@arbor-education/design-system.components 0.0.1

package/src/components/icon/Icon.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta } from '@storybook/react-vite';
+import { Icon } from './Icon';
+
+const meta: Meta<typeof Icon> = {
+  title: 'Components/Icon',
+  component: Icon,
+};
+
+export const Default = {
+  args: {
+    name: '3-dot',
+    size: 16,
+  },
+};
+
+export default meta;

package/src/components/icon/Icon.test.tsx

@@ -0,0 +1,17 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Icon } from './Icon';
+import '@testing-library/jest-dom/vitest';
+
+describe('Icon', () => {
+  test('Icon renders', () => {
+    render(<Icon name="archive" />);
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+  });
+
+  test('Screen reader text', () => {
+    render(<Icon name="arrow-right" screenReaderText="foobar" />);
+    expect(screen.getByText('foobar')).toBeInTheDocument();
+    expect(screen.getByText('foobar')).toHaveClass('sr-only');
+  });
+});

package/src/components/icon/Icon.tsx

@@ -0,0 +1,27 @@
+import type { IconSize } from './types';
+import { allowedIcons } from './allowedIcons';
+import classNames from 'classnames';
+
+type IconProps = {
+  size?: IconSize;
+  color?: string;
+  screenReaderText?: string;
+  name: keyof typeof allowedIcons;
+  className?: string;
+  ariaLabel?: string;
+};
+
+export const Icon = (props: IconProps) => {
+  const { size = 16, color = 'currentColor', name, screenReaderText, className } = props;
+  const Component = allowedIcons[name];
+  const classes = classNames(className, `ds-icon ds-icon-${name}`);
+  return (
+    <>
+      {/* why aria-hidden? https://gomakethings.com/revisting-aria-label-versus-a-visually-hidden-class/ */}
+      <Component size={size} color={color} className={classes} role="img" aria-hidden="true" />
+      {!!screenReaderText && (
+        <span className="sr-only">{screenReaderText}</span>
+      )}
+    </>
+  );
+};

package/src/components/icon/allowedIcons.tsx

@@ -0,0 +1,208 @@
+import {
+  Archive,
+  ArrowDown,
+  ArrowDownUp,
+  ArrowLeft,
+  ArrowRight,
+  ArrowRightFromLine,
+  ArrowUp,
+  ArrowUpRight,
+  BookOpen,
+  CalendarFold,
+  Camera,
+  ChartColumnIncreasing,
+  ChartSpline,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronUp,
+  CircleAlert,
+  CircleCheck,
+  CircleCheckBig,
+  CirclePercent,
+  CirclePlus,
+  CircleQuestionMark,
+  CircleX,
+  Clipboard,
+  ClipboardList,
+  Clock3,
+  Copy,
+  CornerDownLeft,
+  Dot,
+  Download,
+  Ellipsis,
+  EllipsisVertical,
+  Expand,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  File,
+  Files,
+  Flag,
+  Funnel,
+  GraduationCap,
+  Grid3x3,
+  GripVertical,
+  History,
+  House,
+  Info,
+  IterationCcw,
+  LayoutList,
+  Lightbulb,
+  Link,
+  List,
+  ListFilterPlus,
+  Lock,
+  LockOpen,
+  LogOut, type LucideProps,
+  Mail,
+  Menu,
+  MessageSquareMore,
+  Mic,
+  Minimize2,
+  Minus,
+  Monitor,
+  PaintBucket,
+  Paperclip,
+  PartyPopper,
+  Pencil,
+  Percent,
+  Phone,
+  Pin,
+  Plus,
+  Projector,
+  Redo2,
+  Save,
+  Search,
+  Send,
+  Settings,
+  Share,
+  Sheet,
+  SlidersHorizontal,
+  Smartphone,
+  Sparkles,
+  Star, SwitchCamera, Table, Trash2, TrendingDown, TrendingUp, TriangleAlert, Undo2, Upload, User,
+  Users,
+  UsersRound, X,
+} from 'lucide-react';
+import { AskArbor } from './customIcons/AskArbor';
+import type { CustomIconProps } from './types';
+import { CheckSolid } from './customIcons/CheckSolid';
+import { Google } from './customIcons/Google';
+import { XSolid } from './customIcons/XSolid';
+
+export const allowedIcons = {
+  // lucide icons
+  '3-dot': EllipsisVertical,
+  'archive': Archive,
+  'arrow-down': ArrowDown,
+  'arrow-left': ArrowLeft,
+  'arrow-right-from-line': ArrowRightFromLine,
+  'arrow-right': ArrowRight,
+  'arrow-up-right': ArrowUpRight,
+  'arrow-up': ArrowUp,
+  'book-open': BookOpen,
+  'camera': Camera,
+  'chart-column-increasing': ChartColumnIncreasing,
+  'chart-spline': ChartSpline,
+  'check': Check,
+  'chevron-down': ChevronDown,
+  'chevron-left': ChevronLeft,
+  'chevron-right': ChevronRight,
+  'chevron-up': ChevronUp,
+  'chevrons-left': ChevronsLeft,
+  'chevrons-right': ChevronsRight,
+  'circle-alert': CircleAlert,
+  'circle-check-big': CircleCheckBig,
+  'circle-check': CircleCheck,
+  'circle-help': CircleQuestionMark,
+  'circle-percent': CirclePercent,
+  'circle-plus': CirclePlus,
+  'circle-x': CircleX,
+  'clipboard-list': ClipboardList,
+  'clipboard': Clipboard,
+  'clock-3': Clock3,
+  'copy': Copy,
+  'corner-down-left': CornerDownLeft,
+  'date': CalendarFold,
+  'dot': Dot,
+  'download': Download,
+  'ellipsis-vertical': EllipsisVertical,
+  'ellipsis': Ellipsis,
+  'expand': Expand,
+  'external-link': ExternalLink,
+  'eye-off': EyeOff,
+  'eye': Eye,
+  'favourite-outline': Star,
+  'file': File,
+  'files': Files,
+  'flag': Flag,
+  'funnel': Funnel,
+  'grab': GripVertical,
+  'graduation-cap': GraduationCap,
+  'grid-3x3': Grid3x3,
+  'group': UsersRound,
+  'guardians': Users,
+  'history': History,
+  'house': House,
+  'info': Info,
+  'iteration-ccw': IterationCcw,
+  'layout-list': LayoutList,
+  'lightbulb': Lightbulb,
+  'link': Link,
+  'list-filter-plus': ListFilterPlus,
+  'list': List,
+  'lock-open': LockOpen,
+  'lock': Lock,
+  'log-out': LogOut,
+  'mail': Mail,
+  'menu': Menu,
+  'message-square-more': MessageSquareMore,
+  'mic': Mic,
+  'minus': Minus,
+  'monitor': Monitor,
+  'paint-bucket': PaintBucket,
+  'paperclip': Paperclip,
+  'party-popper': PartyPopper,
+  'pencil': Pencil,
+  'percent': Percent,
+  'phone': Phone,
+  'pin': Pin,
+  'plus': Plus,
+  'projector': Projector,
+  'redo': Redo2,
+  'save': Save,
+  'search': Search,
+  'send': Send,
+  'settings': Settings,
+  'share': Share,
+  'sheet': Sheet,
+  'shrink': Minimize2,
+  'sliders-horizontal': SlidersHorizontal,
+  'smartphone': Smartphone,
+  'sorting': ArrowDownUp,
+  'sparkles': Sparkles,
+  'staff': GraduationCap,
+  'switch-camera': SwitchCamera,
+  'table': Table,
+  'trash': Trash2,
+  'trending-down': TrendingDown,
+  'trending-up': TrendingUp,
+  'triangle-alert': TriangleAlert,
+  'undo': Undo2,
+  'upload': Upload,
+  'user': User,
+  'x': X,
+  // custom icons
+  'ask-arbor': AskArbor,
+  'google': Google,
+  // solid icons
+  'check-solid': (props: CustomIconProps) => <CheckSolid {...props} />,
+  'favourite-filled': (props: LucideProps) => (
+    <Star {...props} fill={props.color} />
+  ),
+  'x-solid': (props: CustomIconProps) => <XSolid {...props} />,
+} as const;

package/src/components/icon/customIcons/AskArbor.tsx

@@ -0,0 +1,28 @@
+import type { CustomIconProps } from '../types';
+
+export const AskArbor = (props: CustomIconProps) => {
+  const { size, color, ...rest } = props;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M19.012 7.25127L22.1143 8.18122C22.4097 8.26883 22.6088 8.55186 22.6088 8.86858C22.6088 9.18531 22.4097 9.46834 22.1143 9.55594L19.012 10.4859L18.1257 13.7407C18.0422 14.0507 17.7724 14.2596 17.4705 14.2596C17.1687 14.2596 16.8989 14.0507 16.8154 13.7407L15.9291 10.4859L12.8268 9.55594C12.5314 9.46834 12.3323 9.18531 12.3323 8.86858C12.3323 8.55186 12.5314 8.26883 12.8268 8.18122L15.9291 7.25127L16.8154 3.99643C16.8989 3.68644 17.1687 3.47754 17.4705 3.47754C17.7724 3.47754 18.0422 3.68644 18.1257 3.99643L19.012 7.25127Z"
+        fill={color}
+      />
+      <path
+        d="M11.1167 2.31293L13.0181 2.8829C13.1992 2.9366 13.3212 3.11007 13.3212 3.30419C13.3212 3.49831 13.1992 3.67178 13.0181 3.72547L11.1167 4.29544L10.5735 6.29035C10.5223 6.48034 10.357 6.60838 10.172 6.60838C9.98695 6.60838 9.82161 6.48034 9.77044 6.29035L9.22719 4.29544L7.32582 3.72547C7.14474 3.67178 7.02271 3.49831 7.02271 3.30419C7.02271 3.11007 7.14474 2.9366 7.32582 2.8829L9.22719 2.31293L9.77044 0.318028C9.82161 0.128037 9.98695 0 10.172 0C10.357 0 10.5223 0.128037 10.5735 0.318028L11.1167 2.31293Z"
+        fill={color}
+      />
+      <path
+        d="M10.6567 14.2787L14.9598 15.5687C15.3696 15.6902 15.6458 16.0828 15.6458 16.5221C15.6458 16.9614 15.3696 17.354 14.9598 17.4755L10.6567 18.7655L9.42724 23.2802C9.31142 23.7102 8.93724 24 8.51851 24C8.09979 24 7.72561 23.7102 7.60979 23.2802L6.38033 18.7655L2.07724 17.4755C1.66742 17.354 1.39124 16.9614 1.39124 16.5221C1.39124 16.0828 1.66742 15.6902 2.07724 15.5687L6.38033 14.2787L7.60979 9.76394C7.72561 9.33396 8.09979 9.04419 8.51851 9.04419C8.93724 9.04419 9.31142 9.33396 9.42724 9.76394L10.6567 14.2787Z"
+        fill={color}
+      />
+    </svg>
+  );
+};

package/src/components/icon/customIcons/CheckSolid.tsx

@@ -0,0 +1,43 @@
+import type { CustomIconProps } from '../types';
+import { useMemoGenerateUuid } from '../../../utils/hooks/useMemoGenerateUuid';
+
+export const CheckSolid = (props: CustomIconProps) => {
+  const { size, color, ...rest } = props;
+  const maskId = useMemoGenerateUuid({ prefix: 'mask' });
+  const clipId = useMemoGenerateUuid({ prefix: 'clip' });
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <defs>
+        <clipPath id={clipId}>
+          <rect width="12" height="12" fill="white" />
+        </clipPath>
+        <mask id={maskId} maskUnits="userSpaceOnUse">
+          <rect width="100%" height="100%" fill="white"></rect>
+          <path
+            d="M3.75 6L5.25 7.5L8.25 4.5"
+            stroke="black"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </mask>
+      </defs>
+      <g clipPath={`url(#${clipId})`} mask={`url(#${maskId})`}>
+        <rect
+          x="0.75"
+          y="0.75"
+          width="10.5"
+          height="10.5"
+          rx="5.25"
+          fill={color}
+        />
+      </g>
+    </svg>
+  );
+};

package/src/components/icon/customIcons/Google.tsx

@@ -0,0 +1,33 @@
+import type { CustomIconProps } from '../types';
+
+export const Google = (props: CustomIconProps) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { size, color, ...rest } = props;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M18.1963 18.0438C20.2182 16.1567 21.1167 13.0117 20.5776 10.0013H12.5352V13.3262H17.118C16.9383 14.4045 16.3092 15.303 15.4107 15.8872L18.1963 18.0438Z"
+        fill="#4285F4"
+      />
+      <path
+        d="M4.89648 15.393C4.97011 15.5379 5.04773 15.6807 5.12936 15.8212C5.21105 15.9618 5.29661 16.1 5.38605 16.2357C5.47555 16.3714 5.56873 16.5045 5.66573 16.635C5.76273 16.7655 5.8633 16.893 5.96755 17.0178C6.07173 17.1426 6.17936 17.2643 6.29048 17.383C6.40155 17.5017 6.51592 17.6172 6.63355 17.7294C6.75117 17.8416 6.87186 17.9504 6.99561 18.0558C7.11936 18.1612 7.24598 18.263 7.37555 18.3613C7.50505 18.4595 7.63723 18.554 7.77211 18.6448C7.90698 18.7355 8.0443 18.8224 8.18411 18.9054C8.32386 18.9884 8.46586 19.0674 8.61011 19.1424C8.75436 19.2173 8.90061 19.2882 9.04886 19.3549C9.19711 19.4216 9.34711 19.4841 9.49892 19.5423C9.65067 19.6005 9.80398 19.6544 9.9588 19.704C10.1136 19.7535 10.2697 19.7987 10.4271 19.8394C10.5845 19.8802 10.7429 19.9164 10.9023 19.9482C11.0617 19.98 11.2219 20.0072 11.3829 20.03C11.5439 20.0527 11.7054 20.0708 11.8674 20.0844C12.0294 20.098 12.1916 20.107 12.3541 20.1114C12.5166 20.1158 12.6791 20.1157 12.8416 20.1109C13.0041 20.1062 13.1663 20.0968 13.3283 20.0828C13.4902 20.0689 13.6517 20.0504 13.8126 20.0273C13.9735 20.0043 14.1337 19.9767 14.293 19.9445C14.4524 19.9124 14.6107 19.8758 14.768 19.8348C14.9253 19.7937 15.0813 19.7482 15.236 19.6983C15.3907 19.6485 15.5439 19.5942 15.6956 19.5357C15.8472 19.4771 15.9971 19.4143 16.1452 19.3473C16.2934 19.2803 16.4394 19.2092 16.5835 19.1338C16.7276 19.0586 16.8694 18.9793 17.009 18.896C17.1486 18.8127 17.2857 18.7255 17.4204 18.6345C17.5551 18.5434 17.6871 18.4486 17.8164 18.3501C17.9457 18.2516 18.0722 18.1495 18.1957 18.0438L15.41 15.8872C13.0288 17.4597 9.07498 16.8757 7.72705 13.1914L4.89648 15.393Z"
+        fill="#34A853"
+      />
+      <path
+        d="M7.72739 13.1914C7.36795 12.0681 7.36795 11.0348 7.72739 9.91152L4.89683 7.70996C3.86345 9.77677 3.54895 12.6971 4.89683 15.393L7.72739 13.1914Z"
+        fill="#FBBC02"
+      />
+      <path
+        d="M7.72705 9.91146C8.71555 6.81134 12.9389 5.01415 15.7695 7.66496L18.2406 5.23877C14.7361 1.86908 7.9068 2.00383 4.89648 7.7099L7.72705 9.91146Z"
+        fill="#EA4335"
+      />
+    </svg>
+  );
+};

package/src/components/icon/customIcons/XSolid.tsx

@@ -0,0 +1,32 @@
+import type { CustomIconProps } from '../types';
+import { useMemoGenerateUuid } from '../../../utils/hooks/useMemoGenerateUuid';
+
+export const XSolid = (props: CustomIconProps) => {
+  const { size, color, ...rest } = props;
+  const maskId = useMemoGenerateUuid({ prefix: 'mask' });
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <defs>
+        <mask id={maskId} maskUnits="userSpaceOnUse">
+          <rect width="100%" height="100%" fill="white"></rect>
+          <path
+            d="M8 4L4 8M4 4L8 8"
+            stroke="black"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </mask>
+      </defs>
+      <g mask={`url(#${maskId})`}>
+        <rect x="1" y="1" width="10" height="10" rx="5" fill={color} />
+      </g>
+    </svg>
+  );
+};

package/src/components/icon/types.ts

@@ -0,0 +1,8 @@
+export type IconSize = 12 | 16 | 24;
+
+export type CustomIconProps = {
+  size: IconSize;
+  color?: string;
+  role?: string;
+  className?: string;
+};

package/src/components/pill/Pill.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta } from '@storybook/react-vite';
+import { Pill } from './Pill';
+
+const meta: Meta<typeof Pill> = {
+  title: 'Components/Pill',
+  component: Pill,
+};
+
+export const Default = {
+  args: {
+  },
+};
+
+export default meta;

package/src/components/pill/Pill.test.tsx

@@ -0,0 +1,21 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Pill } from './Pill';
+import '@testing-library/jest-dom/vitest';
+
+describe('Pill', () => {
+  test('Pill says hello', () => {
+    render(<Pill text="Hello I'm a Pill!" />);
+    expect(screen.getByText("Hello I'm a Pill!")).toBeInTheDocument();
+  });
+
+  test('Pill has default color green', () => {
+    render(<Pill text="Hello I'm a Pill!" />);
+    expect(screen.getByText("Hello I'm a Pill!")).toHaveClass('ds-pill--green');
+  });
+
+  test('Pill has custom color', () => {
+    render(<Pill text="Hello I'm a Pill!" color="blue" />);
+    expect(screen.getByText("Hello I'm a Pill!")).toHaveClass('ds-pill--blue');
+  });
+});

package/src/components/pill/Pill.tsx

@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+
+export type PillColor = 'orange'
+  | 'blue'
+  | 'green'
+  | 'purple'
+  | 'teal'
+  | 'salmon'
+  | 'yellow';
+
+type PillProps = {
+  text: string;
+  color?: PillColor;
+};
+
+export const Pill = ({ text, color = 'green' }: PillProps) => {
+  return (
+    <span
+      className={classNames('ds-pill', `ds-pill--${color}`)}
+    >
+      {text}
+    </span>
+  );
+};

package/src/components/pill/pill.scss

@@ -0,0 +1,51 @@
+.ds-pill {
+  display: flex;
+  padding: var(--tag-spacing-x, 8px) var(--tag-spacing-y, 12px);
+  align-items: center;
+  gap: var(--tag-spacing-gap-y, 8px);
+  border-radius: var(--tag-radius, 99px);
+  flex-grow: 0;
+  width: fit-content;
+
+  /* typography/body/p1-reg */
+  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 */
+  
+  &--orange {
+    color: var(--tag-category-orange-color-text, #7E3E00);
+    background: var(--tag-category-orange-color-background, #F7EED8);
+  }
+
+  &--blue {
+    color: var(--tag-category-blue-color-text);
+    background: var(--tag-category-blue-color-background);
+  }
+
+  &--green {
+    color: var(--tag-category-green-color-text);
+    background: var(--tag-category-green-color-background);
+  }
+
+  &--purple {
+    color: var(--tag-category-purple-color-text);
+    background: var(--tag-category-purple-color-background);
+  }
+
+  &--teal {
+    color: var(--tag-category-teal-color-text);
+    background: var(--tag-category-teal-color-background);
+  }
+
+  &--salmon {
+    color: var(--tag-category-salmon-color-text);
+    background: var(--tag-category-salmon-color-background);
+  }
+
+  &--yellow {
+    color: var(--tag-category-yellow-color-text);
+    background: var(--tag-category-yellow-color-background);
+  }
+}

package/src/global.scss

@@ -0,0 +1,19 @@
+.sr-only {
+  clip: rect(0 0 0 0); /* stylelint-disable-line property-no-deprecated */
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.medium-spacing-gap {
+  gap: var(--button-medium-spacing-gap-y);
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}

package/src/index.scss

@@ -0,0 +1,7 @@
+@use "./tokens.scss";
+@use "./global.scss";
+@use "./components/button/button.scss";
+@use "./components/heading/heading.scss";
+@use "./components/card/card.scss";
+@use "./components/pill/pill.scss";
+@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";

package/src/index.ts

@@ -0,0 +1,6 @@
+export { Button } from './components/button/Button';
+export { Heading } from './components/heading/Heading';
+export { HeadingInnerContainer } from './components/heading/HeadingInnerContainer';
+export { Icon } from './components/icon/Icon';
+export { Card } from './components/card/Card';
+export { Pill } from './components/pill/Pill';