@arbor-education/design-system.components 0.25.9 → 1.0.0

package/src/components/emptyState/EmptyState.tsx

@@ -0,0 +1,84 @@
+import classNames from 'classnames';
+import { Heading } from 'Components/heading/Heading';
+import { useId, type HTMLAttributes } from 'react';
+
+export type EmptyStatePadding = 'none' | 'xs' | 'sm' | 'md' | 'lg';
+export type EmptyStateHeadingLevel = Heading.Level;
+
+export type EmptyStateProps = {
+  heading: React.ReactNode;
+  subHeading?: React.ReactNode;
+  illustration?: React.ReactNode;
+  orientation?: 'horizontal' | 'vertical';
+  actions?: React.ReactNode;
+  live?: boolean;
+  headingLevel?: EmptyStateHeadingLevel;
+  padding?: EmptyStatePadding;
+  className?: string;
+} & Omit<HTMLAttributes<HTMLElement>, 'children'>;
+
+export const EmptyState = (props: EmptyStateProps): React.JSX.Element => {
+  const {
+    heading,
+    subHeading,
+    illustration,
+    orientation = 'horizontal',
+    actions,
+    live = false,
+    headingLevel = 4,
+    padding = 'md',
+    className,
+    ...rest
+  } = props;
+
+  const headingId = useId();
+  const hasActions = Boolean(actions);
+
+  return (
+    <section
+      role="region"
+      aria-live={live ? 'polite' : undefined}
+      aria-labelledby={headingId}
+      className={classNames(
+        'ds-empty-state',
+        padding !== 'none' && `ds-empty-state--padding-${padding}`,
+        className,
+      )}
+      {...rest}
+    >
+      {illustration && (
+        <div className="ds-empty-state__illustration" aria-hidden="true">
+          {illustration}
+        </div>
+      )}
+      <Heading
+        id={headingId}
+        level={headingLevel}
+        className="ds-empty-state__heading"
+      >
+        {heading}
+      </Heading>
+      {subHeading && (
+        <p className="ds-empty-state__sub-heading">
+          {subHeading}
+        </p>
+      )}
+      {hasActions && (
+        <div
+          className={classNames(
+            'ds-empty-state__actions',
+            `ds-empty-state__actions--${orientation}`,
+          )}
+        >
+          {actions}
+        </div>
+      )}
+    </section>
+  );
+};
+
+export namespace EmptyState {
+  export type Props = EmptyStateProps;
+  export type Padding = EmptyStatePadding;
+  export type HeadingLevel = EmptyStateHeadingLevel;
+}

package/src/components/emptyState/emptyState.scss

@@ -0,0 +1,63 @@
+.ds-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  gap: var(--spacing-xsmall);
+}
+
+.ds-empty-state--padding-xs {
+  padding-block: var(--spacing-small);
+  padding-inline: var(--spacing-xsmall);
+}
+
+.ds-empty-state--padding-sm {
+  padding-block: var(--spacing-large);
+  padding-inline: var(--spacing-medium);
+}
+
+.ds-empty-state--padding-md {
+  padding-block: var(--spacing-xlarge);
+  padding-inline: var(--spacing-large);
+}
+
+.ds-empty-state--padding-lg {
+  padding-block: var(--spacing-xxxlarge);
+  padding-inline: var(--spacing-xlarge);
+}
+
+.ds-empty-state__illustration {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ds-empty-state__heading {
+  justify-content: center;
+}
+
+.ds-empty-state__sub-heading {
+  margin: 0;
+  color: var(--color-grey-600);
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  line-height: var(--type-body-line-height);
+  margin-bottom: var(--spacing-xsmall);
+}
+
+.ds-empty-state__actions {
+  display: flex;
+  gap: var(--spacing-small);
+}
+
+.ds-empty-state__actions--horizontal {
+  flex-flow: row wrap;
+  justify-content: center;
+}
+
+.ds-empty-state__actions--vertical {
+  flex-direction: column;
+  align-items: center;
+}

package/src/components/favourite/FavouriteButton.test.tsx

@@ -0,0 +1,83 @@
+import '@testing-library/jest-dom/vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test, vi } from 'vitest';
+import { FavouriteButton } from './FavouriteButton.js';
+
+describe('FavouriteButton', () => {
+  test('toggle variant shows outline icon when not pressed', () => {
+    render(
+      <FavouriteButton
+        variant="toggle"
+        isPressed={false}
+        label="Add to favourites"
+        data-testid="favourite-button"
+      />,
+    );
+
+    expect(screen.getByRole('button', { name: 'Add to favourites' })).toHaveAttribute('aria-pressed', 'false');
+    expect(screen.getByTestId('favourite-button').querySelector('svg')).toBeInTheDocument();
+  });
+
+  test('toggle variant shows filled icon when pressed', () => {
+    render(
+      <FavouriteButton
+        variant="toggle"
+        isPressed
+        label="Remove from favourites"
+        data-testid="favourite-button"
+      />,
+    );
+
+    expect(screen.getByRole('button', { name: 'Remove from favourites' })).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  test('remove variant always shows filled icon and no aria-pressed', () => {
+    render(
+      <FavouriteButton
+        variant="remove"
+        label="Remove from favourites"
+        data-testid="favourite-button"
+      />,
+    );
+
+    const button = screen.getByRole('button', { name: 'Remove from favourites' });
+    expect(button).not.toHaveAttribute('aria-pressed');
+  });
+
+  test('shows tooltip on hover', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <FavouriteButton
+        variant="remove"
+        label="Remove from favourites"
+        tooltipDelayDuration={0}
+        data-testid="favourite-button"
+      />,
+    );
+
+    await user.hover(screen.getByRole('button', { name: 'Remove from favourites' }));
+    await expect(screen.getAllByText('Remove from favourites')[0]).toBeInTheDocument();
+  });
+
+  test('calls onClick and stops propagation', () => {
+    const onClick = vi.fn();
+    const parentClick = vi.fn();
+
+    render(
+      <div onClick={parentClick} role="presentation">
+        <FavouriteButton
+          variant="remove"
+          label="Remove from favourites"
+          onClick={onClick}
+        />
+      </div>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Remove from favourites' }));
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(parentClick).not.toHaveBeenCalled();
+  });
+});

package/src/components/favourite/FavouriteButton.tsx

@@ -0,0 +1,70 @@
+import classNames from 'classnames';
+import { Icon } from 'Components/icon/Icon';
+import { TooltipWrapper } from 'Components/tooltip/TooltipWrapper';
+import type { ButtonHTMLAttributes, MouseEventHandler } from 'react';
+import { FAVOURITE_FILLED_ICON_COLOR, FAVOURITE_ICON } from 'Utils/favourites/favouriteConstants';
+
+type FavouriteButtonVariantProps
+  = | { variant: 'toggle'; isPressed: boolean }
+    | { variant: 'remove'; isPressed?: never };
+
+export type FavouriteButtonProps = {
+  'label': string;
+  'className'?: string;
+  'tooltipSide'?: 'left' | 'right' | 'top' | 'bottom';
+  'tooltipDelayDuration'?: number;
+  'data-testid'?: string;
+} & FavouriteButtonVariantProps
+& Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'aria-pressed'>;
+
+export const FavouriteButton = (props: FavouriteButtonProps): React.JSX.Element => {
+  const {
+    variant,
+    isPressed = false,
+    label,
+    className,
+    tooltipSide = 'left',
+    tooltipDelayDuration = 400,
+    onClick,
+    'data-testid': dataTestId,
+    ...rest
+  } = props;
+
+  const showFilledIcon = variant === 'remove' || isPressed;
+
+  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onClick?.(event);
+  };
+
+  return (
+    <TooltipWrapper
+      tooltipContent={label}
+      delayDuration={tooltipDelayDuration}
+      disableHoverableContent
+      triggerProps={{ onPointerDown: event => event.preventDefault() }}
+      contentProps={{ side: tooltipSide, sideOffset: 8, shouldShowArrow: false }}
+    >
+      <button
+        type="button"
+        className={classNames(
+          'ds-favourite-button',
+          variant === 'toggle' ? 'ds-favourite-button--toggle' : 'ds-favourite-button--remove',
+          className,
+        )}
+        aria-label={label}
+        aria-pressed={variant === 'toggle' ? isPressed : undefined}
+        data-testid={dataTestId}
+        onClick={handleClick}
+        {...rest}
+      >
+        <Icon
+          name={showFilledIcon ? FAVOURITE_ICON.filled : FAVOURITE_ICON.outline}
+          size={16}
+          color={showFilledIcon ? FAVOURITE_FILLED_ICON_COLOR : 'currentColor'}
+        />
+      </button>
+    </TooltipWrapper>
+  );
+};

package/src/components/favourite/favouriteButton.scss

@@ -0,0 +1,37 @@
+.ds-favourite-button {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-xsmall);
+  height: var(--size-control-xsmall);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  border-radius: var(--border-radius-round);
+  cursor: pointer;
+
+  &:hover,
+  &[data-state='delayed-open'],
+  &[data-state='instant-open'],
+  &[data-state='open'] {
+    background: color-mix(in srgb, var(--color-mono-black) 8%, transparent);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--focus-border) var(--focus-color-focus);
+  }
+}
+
+.ds-favourite-button--toggle {
+  color: inherit;
+}

package/src/components/icon/Icon.tsx

@@ -1,6 +1,6 @@
-import type { CustomIconProps, IconSize } from './types.js';
-import { allowedIcons, type IconName } from './allowedIcons.js';
 import classNames from 'classnames';
+import { allowedIcons, type IconName } from './allowedIcons.js';
+import type { CustomIconProps, IconSize } from './types.js';
 
 type IconProps = {
   size?: IconSize;

package/src/components/link/link.scss

@@ -0,0 +1,26 @@
+.ds-link {
+  display: inline;
+  color: var(--type-body-hyperlink-color);
+  font-weight: var(--type-body-hyperlink-weight);
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-underline-position: from-font;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--hyperlink-hover);
+  }
+
+  &:active {
+    color: var(--hyperlink-active);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--focus-border) solid var(--focus-color-focus);
+    outline-offset: calc(1 * var(--focus-border));
+  }
+}