@arbor-education/design-system.components 0.3.6 → 0.4.1

package/src/components/banner/Banner.tsx

@@ -0,0 +1,81 @@
+import { cva } from 'class-variance-authority';
+import { Button } from 'Components/button/Button';
+
+import type { IconName } from 'Components/icon/allowedIcons';
+import { Icon } from 'Components/icon/Icon';
+
+export enum BANNER_LEVEL {
+  INFO = 'info',
+  NEUTRAL = 'neutral',
+  WARNING = 'warning',
+  DESTRUCTIVE = 'destructive',
+}
+
+export type BannerProps = {
+  className?: string;
+  level?: BANNER_LEVEL;
+  icon?: IconName;
+  title?: string;
+  buttonText?: string;
+  buttonOnClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  text?: string;
+  hideIcon?: boolean;
+};
+
+const bannerClassName = cva(['ds-banner'], {
+  variants: {
+    level: {
+      [BANNER_LEVEL.INFO]: 'ds-banner--info',
+      [BANNER_LEVEL.NEUTRAL]: 'ds-banner--neutral',
+      [BANNER_LEVEL.WARNING]: 'ds-banner--warning',
+      [BANNER_LEVEL.DESTRUCTIVE]: 'ds-banner--destructive',
+    },
+  },
+});
+
+const DEFAULT_ICON_MAP: Record<BANNER_LEVEL, IconName> = {
+  [BANNER_LEVEL.INFO]: 'info',
+  [BANNER_LEVEL.NEUTRAL]: 'info',
+  [BANNER_LEVEL.WARNING]: 'triangle-alert',
+  [BANNER_LEVEL.DESTRUCTIVE]: 'circle-alert',
+};
+
+export const Banner = (props: BannerProps) => {
+  const {
+    className,
+    level = BANNER_LEVEL.NEUTRAL,
+    icon: rawIcon,
+    hideIcon = false,
+    title,
+    buttonText,
+    buttonOnClick,
+    text,
+  } = props;
+
+  const icon = hideIcon ? null : rawIcon ?? DEFAULT_ICON_MAP[level];
+
+  return (
+    <div
+      className={bannerClassName({ level, className })}
+    >
+      {icon && <Icon size={24} name={icon} />}
+      <div className="ds-banner__central-container">
+        {title && (
+          <h3 className="ds-banner__title">
+            {title}
+          </h3>
+        )}
+        {text && <span>{text}</span>}
+      </div>
+      {buttonText && (
+        <Button
+          onClick={buttonOnClick}
+          className="ds-banner__button"
+          variant="text-link"
+        >
+          {buttonText}
+        </Button>
+      )}
+    </div>
+  );
+};

package/src/components/banner/banner.scss

@@ -0,0 +1,67 @@
+.ds-banner {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: var(--banner-spacing-gap);
+  padding: var(--banner-spacing-vertical) var(--banner-spacing-horizontal);
+  border-radius: var(--banner-radius);
+  border-width: 1px;
+  border-style: solid;
+
+  &__central-container {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-small);
+  }
+
+  &__title {
+    margin: 0;
+  }
+
+  &__button {
+    color: inherit;
+    align-self: flex-end;
+    text-wrap: nowrap;
+  }
+
+  &--info {
+    svg {
+      stroke: var(--banner-info-color-icon);
+    }
+
+    border-color: var(--banner-info-color-border);
+    background-color: var(--banner-info-color-background);
+    color: var(--banner-info-color-text);
+  }
+  
+  &--neutral {
+    svg {
+      stroke: var(--banner-neutral-color-icon);
+    }
+
+    border-color: var(--banner-neutral-color-border);
+    background-color: var(--banner-neutral-color-background);
+    color: var(--banner-neutral-color-text);
+  }
+
+  &--warning {
+    svg {
+      stroke: var(--banner-warning-color-icon);
+    }
+
+    border-color: var(--banner-warning-color-border);
+    background-color: var(--banner-warning-color-background);
+    color: var(--banner-warning-color-text);
+  }
+
+  &--destructive {
+    svg {
+      stroke: var(--banner-destructive-color-icon);
+    }
+
+    border-color: var(--banner-destructive-color-border);
+    background-color: var(--banner-destructive-color-background);
+    color: var(--banner-destructive-color-text);
+  }
+}

package/src/components/button/button.scss

@@ -6,7 +6,6 @@
   justify-content: center;
   gap: var(--button-medium-spacing-gap-vertical);
   border-radius: var(--button-medium-radius);
-  font-family: var(--font-family-standard);
   font-weight: var(--font-weight-semi-bold);
   padding: var(--button-medium-spacing-vertical) var(--button-medium-spacing-horizontal);
   border: none;
@@ -14,7 +13,6 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   position: relative;
   text-decoration: none;
-  font-size: var(--font-size-2-13);
 
   &--no-horizontal-padding {
     padding: var(--button-medium-spacing-vertical) 0;
@@ -108,10 +106,7 @@
     color: var(--color-grey-900, #2F2F2F);
 
     /* typography/body/p1-regular */
-    font-family: var(--type-body-p-family, Inter);
-    font-size: var(--type-body-p-size, 13px);
     font-style: normal;
-    font-weight: var(--type-body-p-weight, 400);
     line-height: 150%; /* 19.5px */
     display: flex;
     padding: var(--spacing-small)  var(--spacing-small) var(--spacing-small) var(--spacing-medium);

package/src/components/card/card.scss

@@ -74,9 +74,6 @@
 
     .ds-card__paragraph {
       margin: 0;
-      font-family: var(--type-body-p-family);
-      font-size: var(--type-body-p-size);
-      font-weight: var(--type-body-p-weight);
     }
   }
 }

package/src/components/dropdown/Dropdown.tsx

@@ -3,11 +3,13 @@ import { DropdownTrigger } from './DropdownTrigger';
 import { DropdownContent } from './DropdownContent';
 import { DropdownItem } from './items/DropdownItem';
 import { DropdownSelectItem } from './items/DropdownSelectItem';
+import { DropdownSeparator } from './items/DropdownSeparator';
+import { DropdownGroup } from './items/DropdownGroup';
 
 export const Dropdown = (props: DropdownMenu.DropdownMenuProps) => {
   const { children, ...rest } = props;
   return (
-    <DropdownMenu.Root {...rest}>
+    <DropdownMenu.Root modal={false} {...rest}>
       {children}
     </DropdownMenu.Root>
   );
@@ -17,3 +19,5 @@ Dropdown.Trigger = DropdownTrigger;
 Dropdown.Content = DropdownContent;
 Dropdown.Item = DropdownItem;
 Dropdown.SelectItem = DropdownSelectItem;
+Dropdown.Separator = DropdownSeparator;
+Dropdown.Group = DropdownGroup;

package/src/components/dropdown/dropdown.scss

@@ -5,11 +5,11 @@
     background-color: var(--form-dropdown-color-background);
     min-width: 200px;
     border: 1px solid var(--color-grey-200);
-    font-family: var(--type-body-p-family);
-    font-size: var(--type-body-p-size);
     font-style: normal;
-    font-weight: var(--type-body-p-weight);
     line-height: 150%;
+    max-height: 300px;
+    max-height: var(--radix-popper-available-height);
+    overflow-y: auto;
 }
 
 .ds-dropdown__item {
@@ -45,4 +45,4 @@
     .ds-dropdown__item--check-icon {
         margin-left: auto;
     }
-}
+}

package/src/components/dropdown/items/DropdownGroup.tsx

@@ -0,0 +1,11 @@
+import { DropdownMenu } from 'radix-ui';
+import classNames from 'classnames';
+
+export const DropdownGroup = (props: DropdownMenu.DropdownMenuGroupProps) => {
+  const { children, className = '', ...rest } = props;
+  return (
+    <DropdownMenu.Group className={classNames('ds-dropdown__group', className)} {...rest}>
+      {children}
+    </DropdownMenu.Group>
+  );
+};

package/src/components/dropdown/items/DropdownSeparator.tsx

@@ -0,0 +1,9 @@
+import { DropdownMenu } from 'radix-ui';
+import classNames from 'classnames';
+
+export const DropdownSeparator = (props: DropdownMenu.DropdownMenuSeparatorProps) => {
+  const { className = '', ...rest } = props;
+  return (
+    <DropdownMenu.Separator className={classNames('ds-dropdown__separator', className)} {...rest} />
+  );
+};

package/src/components/formField/fieldset/fieldset.scss

@@ -9,8 +9,6 @@
 }
 
 .ds-fieldset__legend {
-    font-family: var(--font-family-standard);
-    font-size: var(--font-size-2-13);
     font-weight: var(--type-body-bold-weight);
     color: var(--form-field-label-color-text);
     line-height: 150%;

package/src/components/formField/formField.scss

@@ -1,6 +1,4 @@
 .ds-form-field {
-  font-family: var(--font-family-standard);
-  font-size: var(--font-size-2-13);
   line-height: 150%;
   width: 100%;
   box-sizing: border-box;

package/src/components/formField/inputs/checkbox/checkboxInput.scss

@@ -43,8 +43,6 @@
 
   .ds-checkbox-label__text {
     flex: 1 0 0;
-    font-size: var(--type-body-p-size);
-    font-weight: var(--type-body-p-weight);
     color: var(--checkbox-default-color-text);
     line-height: var(--line-height-default);
   }

package/src/components/formField/inputs/input.scss

@@ -2,9 +2,6 @@
 
 .ds-input {
   width: 100%;
-  font-size: var(--type-body-p-size);
-  font-family: var(--font-family-standard);
-  font-weight: var(--font-weight-regular);
   border: var(--border-weight) solid var(--form-field-text-default-color-border);
   border-radius: var(--form-field-radius);
   color: var(--form-field-text-default-color-text);

package/src/components/formField/inputs/radio/radioButtonInput.scss

@@ -19,8 +19,6 @@
 
   .ds-radio-button-input__text {
     flex: 1 0 0;
-    font-size: var(--type-body-p-size);
-    font-weight: var(--type-body-p-weight);
     color: var(--checkbox-default-color-text);
     line-height: var(--line-height-default);
     user-select: none;

package/src/components/formField/inputs/selectDropdown/selectDropdown.scss

@@ -16,7 +16,6 @@
 .ds-select-dropdown__items--header {
   margin: 0;
   color: var(--form-dropdown-form-drop-item-title-color-text);
-  font-size: var(--font-size-2-13);
   padding: var(--spacing-xsmall) var(--spacing-small) var(--spacing-medium) var(--spacing-small);
   border-bottom: var(--border-weight) solid var(--page-base-color-border);
 }

package/src/components/formField/label/label.scss

@@ -1,6 +1,4 @@
 .ds-label {
-  font-family: var(--font-family-standard);
-  font-size: var(--font-size-2-13);
   font-weight: var(--type-body-bold-weight);
   color: var(--form-field-label-color-text);
   line-height: 150%;

package/src/components/modal/modal.scss

@@ -23,9 +23,6 @@
     max-width: calc(100vw - var(--spacing-medium));
     max-height: calc(100vh - var(--spacing-medium));
     min-width: var(--modal-min-width);
-    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);
     color: var(--type-body-p-color);
 

package/src/components/pill/pill.scss

@@ -10,10 +10,7 @@
   cursor: pointer;
 
   /* typography/body/p1-reg */
-  font-family: var(--type-body-p-family, Inter);
-  font-size: var(--type-body-p-size);
   font-style: normal;
-  font-weight: var(--type-body-p-weight);
   line-height: 150%; /* 19.5px */
 
   &__inactive{

package/src/components/searchBar/searchBar.scss

@@ -50,9 +50,6 @@
 
     &__placeholder {
       color: var(--search-global-default-color-text);
-      font-family: var(--type-body-p-family);
-      font-size: var(--type-body-p-size);
-      font-weight: var(--type-body-p-weight);
     }
 
     &-icon-only {

package/src/components/table/columnFilters/columnFilters.scss

@@ -43,9 +43,6 @@
     border: var(--border-weight) solid var(--color-grey-200);
     border-radius: var(--border-radius-small);
     color: var(--color-grey-900);
-    font-family: var(--font-family-standard);
-    font-size: var(--font-size-2-13);
-    font-weight: var(--font-weight-regular);
     padding: 0 var(--spacing-small);
     justify-content: space-between;
 }
@@ -59,9 +56,6 @@
     border: var(--border-weight) solid var(--color-grey-200);
     border-radius: var(--border-radius-small);
     color: var(--color-grey-900);
-    font-family: var(--font-family-standard);
-    font-size: var(--font-size-2-13);
-    font-weight: var(--font-weight-regular);
     box-sizing: border-box;
 
     &::-webkit-calendar-picker-indicator {

package/src/components/table/pagination/pagination.scss

@@ -20,7 +20,3 @@
         width: 39px;
     }
 }
-
-.ds-table__pagination-controls, .ds-table__row-count-info {
-    font-size: var(--font-size-2-13);
-}

package/src/components/tabs/tabs.scss

@@ -4,7 +4,6 @@
   list-style: none;
   padding: 0;
   margin: 0;
-  font-family: var(--type-body-p-family);
   align-items: center;
   justify-content: flex-start;
   gap: var(--tabs-spacing-horizontal-gap);
@@ -21,7 +20,6 @@
 .ds-tabs-item__tab {
   min-width: var(--size-control-xlarge);
   position: relative;
-  font-family: var(--type-body-p-family);
   padding: var(--tabs-tab-item-spacing-vertical) var(--tabs-tab-item-spacing-horizontal);
   cursor: pointer;
   display: flex;

package/src/components/tag/tag.scss

@@ -8,10 +8,7 @@
   width: fit-content;
 
   /* typography/body/p1-reg */
-  font-family: var(--type-body-p-family, Inter);
-  font-size: var(--type-body-p-size);
   font-style: normal;
-  font-weight: var(--type-body-p-weight);
   line-height: 150%; /* 19.5px */
 
   &--neutral {

package/src/components/toast/toast.scss

@@ -17,7 +17,6 @@
     border-radius: var(--toast-radius);
     box-shadow: var(--shadow-small);
     font-family: var(--type-body-bold-family);
-    font-size: var(--type-body-p-size);
     font-style: normal;
     font-weight: var(--type-body-bold-weight);
     line-height: var(--line-height-default); 

package/src/components/tooltip/tooltip.scss

@@ -4,9 +4,6 @@
         background: var(--tooltip-color-background);
         padding: var(--tooltip-spacing-vertical) var(--tooltip-spacing-horizontal);
         border-radius: var(--border-radius-small);
-        font-size: var(--type-body-p-size);
-        font-family: var(--type-body-p-family);
-        font-weight: var(--type-body-p-weight);
 
         &-arrow {
             fill: var(--tooltip-color-background);

package/src/components/userDropdown/UserDropdown.stories.tsx

@@ -0,0 +1,237 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { UserDropdown } from './UserDropdown';
+import { ArborLogo, GovhubLogo, KeyLogo, RobinLogo, SampeopleLogo, TimetablerLogo } from './assets/logos';
+
+const meta: Meta<typeof UserDropdown> = {
+  title: 'Components/UserDropdown',
+  component: UserDropdown,
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof UserDropdown>;
+
+// Mock avatar image (placeholder)
+const avatarSrc = 'data:image/svg+xml,%3Csvg width="32" height="32" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="16" cy="16" r="16" fill="%233cad51"/%3E%3Ctext x="16" y="21" font-family="Arial" font-size="14" font-weight="bold" fill="white" text-anchor="middle"%3ECM%3C/text%3E%3C/svg%3E';
+
+// Import real logos from assets
+const logoArborWorkflows = ArborLogo;
+const logoGovernorHub = GovhubLogo;
+const logoTheKey = KeyLogo;
+const logoRobin = RobinLogo;
+const logoSamPeople = SampeopleLogo;
+const logoTimetabler = TimetablerLogo;
+
+const AppLogo = ({ src, alt }: { src: string; alt: string }) => (
+  <img src={src} alt={alt} width={24} height={24} style={{ objectFit: 'contain' }} />
+);
+
+// Mock company logo SVG
+const mockLogoSrc = 'data:image/svg+xml,%3Csvg width="50" height="30" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="50" height="30" rx="4" fill="%233cad51"/%3E%3Ctext x="25" y="20" font-family="Arial" font-size="14" font-weight="bold" fill="white" text-anchor="middle"%3ELogo%3C/text%3E%3C/svg%3E';
+
+export const Default: Story = {
+  args: {
+    user: {
+      name: 'Christine Montgomery-Smith',
+      subtitle: 'Business Manager',
+      avatarSrc,
+      avatarAlt: 'Christine Montgomery-Smith',
+    },
+    logoSrc: mockLogoSrc,
+    logoAlt: 'Arbor',
+    sections: [
+      {
+        label: 'My Apps',
+        apps: [
+          {
+            logo: <AppLogo src={logoArborWorkflows} alt="Arbor Workflows" />,
+            name: 'Arbor Workflows',
+            onClick: () => { console.log('Open Arbor Workflows'); },
+          },
+          {
+            logo: <AppLogo src={logoGovernorHub} alt="GovernorHub" />,
+            name: 'GovernorHub',
+            onClick: () => { console.log('Open GovernorHub'); },
+          },
+          {
+            logo: <AppLogo src={logoTheKey} alt="The Key" />,
+            name: 'The Key',
+            onClick: () => { console.log('Open The Key'); },
+          },
+        ],
+      },
+    ],
+    discoverSection: {
+      label: 'Discover the Arbor suite',
+      defaultOpen: true,
+      apps: [
+        {
+          logo: <AppLogo src={logoArborWorkflows} alt="Arbor Finance" />,
+          name: 'Arbor Finance',
+          description: 'Cloud-based accounting',
+          onClick: () => { console.log('Open Arbor Finance'); },
+        },
+        {
+          logo: <AppLogo src={logoRobin} alt="Robin" />,
+          name: 'Robin',
+          description: 'AI website compliance checks',
+          onClick: () => { console.log('Open Robin'); },
+        },
+        {
+          logo: <AppLogo src={logoSamPeople} alt="SAMPeople" />,
+          name: 'SAMPeople',
+          description: 'HR and recruitment',
+          onClick: () => { console.log('Open SAMPeople'); },
+        },
+        {
+          logo: <AppLogo src={logoTimetabler} alt="Timetabler" />,
+          name: 'Timetabler',
+          description: 'Schedule timetables and more',
+          onClick: () => { console.log('Open Timetabler'); },
+        },
+      ],
+    },
+    userInfoAction: { type: 'link', onClick: () => { console.log('View profile'); } },
+    onSignOut: () => { console.log('Sign out'); },
+    signOutLabel: 'Sign out of Arbor',
+  },
+};
+
+export const WithApps: Story = {
+  args: {
+    user: {
+      name: 'Christine Montgomery-Smith',
+      subtitle: 'Business Manager',
+      avatarInitials: 'CM',
+    },
+    sections: [
+      {
+        label: 'Quick Actions',
+        apps: [
+          { name: 'Settings', onClick: () => { console.log('Settings'); } },
+          { name: 'Help', onClick: () => { console.log('Help'); } },
+        ],
+      },
+    ],
+    onSignOut: () => { console.log('Sign out'); },
+  },
+};
+
+export const Minimal: Story = {
+  args: {
+    user: {
+      name: 'Christine Montgomery',
+      avatarInitials: 'CM',
+      avatarAlt: 'Christine Montgomery',
+    },
+    onSignOut: () => { console.log('Sign out'); },
+  },
+};
+
+export const WithMenu: Story = {
+  args: {
+    user: {
+      name: 'Christine Montgomery-Smith',
+      subtitle: 'Business Manager',
+      avatarSrc,
+      avatarAlt: 'Christine Montgomery-Smith',
+    },
+    logoSrc: mockLogoSrc,
+    logoAlt: 'Arbor',
+    sections: [
+      {
+        label: 'My Apps',
+        apps: [
+          {
+            logo: <AppLogo src={logoArborWorkflows} alt="Arbor Workflows" />,
+            name: 'Arbor Workflows',
+            onClick: () => { console.log('Open Arbor Workflows'); },
+          },
+        ],
+      },
+    ],
+    userInfoAction: {
+      type: 'menu',
+      items: [
+        { label: 'Help centre', onClick: () => { console.log('Help centre'); } },
+        { label: 'About', onClick: () => { console.log('About'); } },
+        { label: 'Leave feedback', onClick: () => { console.log('Leave feedback'); } },
+      ],
+    },
+    onSignOut: () => { console.log('Sign out'); },
+    signOutLabel: 'Sign out of Arbor',
+  },
+};
+
+export const DarkVariant: Story = {
+  args: {
+    user: {
+      name: 'Christine Montgomery-Smith',
+      subtitle: 'Business Manager',
+      avatarSrc,
+      avatarAlt: 'Christine Montgomery-Smith',
+    },
+    logoSrc: mockLogoSrc,
+    logoAlt: 'Arbor',
+    variant: 'dark',
+    sections: [
+      {
+        label: 'My Apps',
+        apps: [
+          {
+            logo: <AppLogo src={logoArborWorkflows} alt="Arbor Workflows" />,
+            name: 'Arbor Workflows',
+            onClick: () => { console.log('Open Arbor Workflows'); },
+          },
+        ],
+      },
+    ],
+    onSignOut: () => { console.log('Sign out'); },
+    signOutLabel: 'Sign out of Arbor',
+  },
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#2f2f2f' },
+      ],
+    },
+  },
+};
+
+export const LightVariant: Story = {
+  args: {
+    user: {
+      name: 'Christine Montgomery-Smith',
+      subtitle: 'Business Manager',
+      avatarSrc,
+      avatarAlt: 'Christine Montgomery-Smith',
+    },
+    logoSrc: mockLogoSrc,
+    logoAlt: 'Arbor',
+    variant: 'light',
+    sections: [
+      {
+        label: 'My Apps',
+        apps: [
+          {
+            logo: <AppLogo src={logoArborWorkflows} alt="Arbor Workflows" />,
+            name: 'Arbor Workflows',
+            onClick: () => { console.log('Open Arbor Workflows'); },
+          },
+        ],
+      },
+    ],
+    onSignOut: () => { console.log('Sign out'); },
+    signOutLabel: 'Sign out of Arbor',
+  },
+  parameters: {
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#ffffff' },
+      ],
+    },
+  },
+};
+
+export default meta;