feat: profile 4.0

packages/shared/src/components/CalendarHeatmap.tsx

@@ -245,7 +245,7 @@ export function CalendarHeatmap<T extends { date: string }>({
 
   return (
     <svg
-      width={width}
+      width="100%"
       viewBox={`0 0 ${width} ${height}`}
       onMouseDown={(e) => e.preventDefault()}
     >

packages/shared/src/components/ExpandableContent.spec.tsx

@@ -0,0 +1,184 @@
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { ExpandableContent } from './ExpandableContent';
+import clearAllMocks = jest.clearAllMocks;
+
+describe('ExpandableContent', () => {
+  const shortContent = <div>Short content that fits</div>;
+  const longContent = (
+    <div>
+      <p>Long content paragraph 1</p>
+      <p>Long content paragraph 2</p>
+      <p>Long content paragraph 3</p>
+      <p>Long content paragraph 4</p>
+      <p>Long content paragraph 5</p>
+      <p>Long content paragraph 6</p>
+      <p>Long content paragraph 7</p>
+      <p>Long content paragraph 8</p>
+      <p>Long content paragraph 9</p>
+      <p>Long content paragraph 10</p>
+    </div>
+  );
+
+  beforeEach(() => {
+    // Reset scrollHeight mock before each test
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 100; // Default value
+      },
+    });
+  });
+
+  afterEach(() => {
+    clearAllMocks();
+  });
+
+  it('should render children content', () => {
+    render(<ExpandableContent>{shortContent}</ExpandableContent>);
+    const element = screen.getByText('Short content that fits');
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it('should not show "See More" button when content is short', async () => {
+    // Mock scrollHeight to be less than maxHeight
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 200; // Less than default 320px
+      },
+    });
+
+    render(<ExpandableContent>{shortContent}</ExpandableContent>);
+
+    // Wait a bit for useEffect to run
+    await waitFor(
+      () => {
+        expect(
+          screen.queryByRole('button', { name: /see more/i }),
+        ).not.toBeInTheDocument();
+      },
+      { timeout: 200 },
+    );
+  });
+
+  it('should show "See More" button when content exceeds maxHeight', async () => {
+    // Mock scrollHeight to be more than maxHeight
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 500; // More than default 320px
+      },
+    });
+
+    render(<ExpandableContent>{longContent}</ExpandableContent>);
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /see more/i }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('should expand content when "See More" button is clicked', async () => {
+    // Mock scrollHeight to be more than maxHeight
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 500;
+      },
+    });
+
+    render(
+      <ExpandableContent maxHeight={320}>{longContent}</ExpandableContent>,
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /see more/i }),
+      ).toBeInTheDocument();
+    });
+
+    const seeMoreButton = screen.getByRole('button', { name: /see more/i });
+    fireEvent.click(seeMoreButton);
+
+    // Button should disappear after expansion
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('button', { name: /see more/i }),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it('should show gradient overlay when content is collapsed', async () => {
+    // Mock scrollHeight to be more than maxHeight
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 500;
+      },
+    });
+
+    render(
+      <ExpandableContent maxHeight={320}>{longContent}</ExpandableContent>,
+    );
+
+    // Wait for See More button to appear, which indicates collapsed state
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /see more/i }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('should hide "See More" button when content is expanded', async () => {
+    // Mock scrollHeight to be more than maxHeight
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 500;
+      },
+    });
+
+    render(
+      <ExpandableContent maxHeight={320}>{longContent}</ExpandableContent>,
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /see more/i }),
+      ).toBeInTheDocument();
+    });
+
+    const seeMoreButton = screen.getByRole('button', { name: /see more/i });
+    fireEvent.click(seeMoreButton);
+
+    // Both button and gradient should be hidden after expansion
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('button', { name: /see more/i }),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it('should apply custom maxHeight', async () => {
+    // Mock scrollHeight to exceed custom maxHeight
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 200; // More than 150px
+      },
+    });
+
+    render(
+      <ExpandableContent maxHeight={150}>{longContent}</ExpandableContent>,
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /see more/i }),
+      ).toBeInTheDocument();
+    });
+  });
+});

packages/shared/src/components/ExpandableContent.tsx

@@ -0,0 +1,100 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import {
+  Button,
+  ButtonIconPosition,
+  ButtonSize,
+  ButtonVariant,
+} from './buttons/Button';
+import { MoveToIcon } from './icons';
+import { IconSize } from './Icon';
+
+export interface ExpandableContentProps {
+  children: ReactNode;
+  maxHeight?: number; // in pixels
+  className?: string;
+}
+
+const DEFAULT_MAX_HEIGHT = 320; // pixels
+
+export function ExpandableContent({
+  children,
+  maxHeight = DEFAULT_MAX_HEIGHT,
+  className,
+}: ExpandableContentProps): ReactElement {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [showSeeMore, setShowSeeMore] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const element = contentRef.current;
+    if (!element) {
+      return undefined;
+    }
+
+    const checkHeight = () => {
+      const contentHeight = element.scrollHeight;
+      setShowSeeMore(contentHeight > maxHeight);
+    };
+
+    // Wait for browser to complete layout before checking height
+    // Using double RAF ensures the layout is fully calculated
+    const rafId = requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        checkHeight();
+      });
+    });
+
+    // Only use ResizeObserver if there are images (for async loading)
+    const hasImages = element.querySelector('img') !== null;
+    if (!hasImages) {
+      return () => cancelAnimationFrame(rafId);
+    }
+
+    const resizeObserver = new ResizeObserver(checkHeight);
+    resizeObserver.observe(element);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      resizeObserver.disconnect();
+    };
+  }, [maxHeight, children]);
+
+  return (
+    <>
+      <div
+        ref={contentRef}
+        className={classNames(
+          'relative transition-all duration-500 ease-in-out',
+          {
+            'overflow-hidden': !isExpanded,
+          },
+          className,
+        )}
+        style={{
+          maxHeight: !isExpanded ? `${maxHeight}px` : undefined,
+        }}
+      >
+        {children}
+        {!isExpanded && showSeeMore && (
+          <div className="absolute inset-x-0 bottom-0 h-12 bg-gradient-to-b from-transparent to-background-default" />
+        )}
+      </div>
+
+      {showSeeMore && !isExpanded && (
+        <div className="mt-4 flex w-full items-center justify-center">
+          <Button
+            variant={ButtonVariant.Subtle}
+            size={ButtonSize.Medium}
+            onClick={() => setIsExpanded(true)}
+            icon={<MoveToIcon size={IconSize.XSmall} className="rotate-90" />}
+            iconPosition={ButtonIconPosition.Right}
+          >
+            See More
+          </Button>
+        </div>
+      )}
+    </>
+  );
+}

packages/shared/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -23,7 +23,12 @@ function HorizontalScrollComponent(
   const titleId = `horizontal-scroll-title-${id}`;
   const { ref, header } = useHorizontalScrollHeader({
     ...scrollProps,
-    title: { ...scrollProps?.title, id: titleId },
+    title:
+      scrollProps.title &&
+      typeof scrollProps.title === 'object' &&
+      'copy' in scrollProps.title
+        ? { ...scrollProps.title, id: titleId }
+        : scrollProps.title,
   });
 
   return (

packages/shared/src/components/HorizontalScroll/HorizontalScrollHeader.tsx

@@ -1,8 +1,9 @@
 import type { MouseEventHandler, ReactElement, ReactNode } from 'react';
 import React from 'react';
+import classNames from 'classnames';
 import Link from '../utilities/Link';
 import { Button } from '../buttons/Button';
-import { ButtonVariant } from '../buttons/common';
+import { ButtonSize, ButtonVariant } from '../buttons/common';
 import ConditionalWrapper from '../ConditionalWrapper';
 import { ArrowIcon } from '../icons';
 import { Typography, TypographyType } from '../typography/Typography';
@@ -15,14 +16,16 @@ export interface HorizontalScrollTitleProps {
 }
 
 export interface HorizontalScrollHeaderProps {
-  title: HorizontalScrollTitleProps;
+  title?: HorizontalScrollTitleProps | ReactNode;
   isAtEnd: boolean;
   isAtStart: boolean;
   onClickNext: MouseEventHandler;
   onClickPrevious: MouseEventHandler;
   onClickSeeAll?: MouseEventHandler;
   linkToSeeAll?: string;
   canScroll: boolean;
+  className?: string;
+  buttonSize?: ButtonSize;
 }
 
 export const HorizontalScrollTitle = ({
@@ -50,10 +53,25 @@ export function HorizontalScrollHeader({
   onClickSeeAll,
   linkToSeeAll,
   canScroll,
+  className,
+  buttonSize = ButtonSize.Medium,
 }: HorizontalScrollHeaderProps): ReactElement {
+  // Check if title is props object or custom ReactNode
+  const isCustomTitle =
+    title && typeof title === 'object' && !('copy' in title);
+
   return (
-    <div className="mx-4 flex min-h-10 w-auto flex-row items-center justify-between laptop:mx-0 laptop:w-full">
-      <HorizontalScrollTitle {...title} />
+    <div
+      className={classNames(
+        'mx-4 flex min-h-10 w-auto flex-row items-center justify-between laptop:mx-0 laptop:w-full',
+        className,
+      )}
+    >
+      {isCustomTitle
+        ? title
+        : title && (
+            <HorizontalScrollTitle {...(title as HorizontalScrollTitleProps)} />
+          )}
       {canScroll && (
         <div className="hidden flex-row items-center gap-3 tablet:flex">
           <Button
@@ -62,13 +80,15 @@ export function HorizontalScrollHeader({
             disabled={isAtStart}
             onClick={onClickPrevious}
             aria-label="Scroll left"
+            size={buttonSize}
           />
           <Button
             variant={ButtonVariant.Tertiary}
             icon={<ArrowIcon className="rotate-90" />}
             disabled={isAtEnd}
             onClick={onClickNext}
             aria-label="Scroll right"
+            size={buttonSize}
           />
           {(onClickSeeAll || linkToSeeAll) && (
             <ConditionalWrapper