@arbor-education/design-system.components 0.2.3 → 0.2.5

package/src/components/table/Table.stories.tsx

@@ -10,6 +10,9 @@ import { RowCountInfo } from './pagination/RowCountInfo';
 import { PaginationPanel } from './pagination/PaginationPanel';
 import { HideColumnsDropdown } from './HideColumnsDropdown';
 import { TableSettingsDropdown } from './pagination/TableSettingsDropdown';
+import { ModalManager } from 'Components/modal/modalManager/ModalManager';
+import { Modal } from 'Components/modal/Modal';
+import { ModalUtils } from 'Utils/ModalUtils';
 
 type TableProps = ComponentProps<typeof Table>;
 
@@ -353,4 +356,166 @@ export const WithButtonCellRenderer: Story = {
   },
 };
 
+export const WithButtonCellRendererThatOpensAModalWithModalManager: StoryObj<TableProps> = {
+  args: {
+    rowData: sampleData,
+    columnDefs: sampleColumnDefs,
+    defaultColDef: defaultColDef,
+    domLayout: 'autoHeight',
+  },
+  render: () => {
+    const ModalContent = (name: string) => (
+      <>
+        <Modal.Header>
+          <Modal.Title>
+            You've clicked on
+            {' '}
+            {name}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <p>Look at you go.</p>
+        </Modal.Body>
+      </>
+    );
+
+    const sampleData = [
+      { id: 1, name: { children: 'Alice Johnson', value: 'Alice Johnson', onClick: () => ModalUtils.addModal({ children: ModalContent('Alice Johnson') }) }, email: 'alice.johnson@example.com', role: 'Developer', status: 'Active' },
+      { id: 2, name: { children: 'Bob Smith', variant: 'secondary', value: 'Bob Smith', onClick: () => ModalUtils.addModal({ children: ModalContent('Bob Smith') }) }, email: 'bob.smith@example.com', role: 'Designer', status: 'Active' },
+      { id: 3, name: { children: 'Charlie Brown', size: 'S', value: 'Charlie Brown', onClick: () => ModalUtils.addModal({ children: ModalContent('Charlie Brown') }) }, email: 'charlie.brown@example.com', role: 'Manager', status: 'Inactive' },
+      { id: 4, name: { children: 'Diana Prince', disabled: true, value: 'Diana Prince', onClick: () => ModalUtils.addModal({ children: ModalContent('Diana Prince') }) }, email: 'diana.prince@example.com', role: 'Developer', status: 'Active' },
+      { id: 5, name: { children: 'Ethan Hunt', iconLeftName: 'download', value: 'Ethan Hunt', onClick: () => ModalUtils.addModal({ children: ModalContent('Ethan Hunt') }) }, email: 'ethan.hunt@example.com', role: 'Analyst', status: 'Active' },
+    ];
+    return (
+      <>
+        <Table
+          rowData={sampleData}
+          columnDefs={sampleColumnDefsWithButtonCellRenderer}
+          defaultColDef={defaultColDef}
+          domLayout="autoHeight"
+        />
+        <ModalManager />
+      </>
+
+    );
+  },
+};
+
+export const WithButtonCellRendererThatOpensAModalWithComposableModal: StoryObj<TableProps> = {
+  args: {
+    rowData: sampleData,
+    columnDefs: sampleColumnDefs,
+    defaultColDef: defaultColDef,
+    domLayout: 'autoHeight',
+  },
+  render: () => {
+    const [activePersonId, setActivePersonId] = useState<number | null>(null);
+    const [showModal, setShowModal] = useState(false);
+
+    const sampleData = [
+      {
+        id: 1,
+        name: {
+          children: 'Alice Johnson',
+          value: 'Alice Johnson',
+          onClick: () => {
+            setActivePersonId(1);
+            setShowModal(true);
+          },
+        },
+        email: 'alice.johnson@example.com',
+        role: 'Developer',
+        status: 'Active',
+      },
+      {
+        id: 2,
+        name: {
+          children: 'Bob Smith',
+          variant: 'secondary',
+          value: 'Bob Smith',
+          onClick: () => {
+            setActivePersonId(2);
+            setShowModal(true);
+          },
+        },
+        email: 'bob.smith@example.com',
+        role: 'Designer',
+        status: 'Active',
+      },
+      {
+        id: 3,
+        name: {
+          children: 'Charlie Brown',
+          size: 'S',
+          value: 'Charlie Brown',
+          onClick: () => {
+            setActivePersonId(3);
+            setShowModal(true);
+          },
+        },
+        email: 'charlie.brown@example.com',
+        role: 'Manager',
+        status: 'Inactive',
+      },
+      {
+        id: 4,
+        name: {
+          children: 'Diana Prince',
+          disabled: true,
+          value: 'Diana Prince',
+          onClick: () => {
+            setActivePersonId(4);
+            setShowModal(true);
+          },
+        },
+        email: 'diana.prince@example.com',
+        role: 'Developer',
+        status: 'Active',
+      },
+      {
+        id: 5,
+        name: {
+          children: 'Ethan Hunt',
+          iconLeftName: 'download',
+          value: 'Ethan Hunt',
+          onClick: () => {
+            setActivePersonId(5);
+            setShowModal(true);
+          },
+        },
+        email: 'ethan.hunt@example.com',
+        role: 'Analyst',
+        status: 'Active',
+      },
+    ];
+    return (
+      <>
+        <Table
+          rowData={sampleData}
+          columnDefs={sampleColumnDefsWithButtonCellRenderer}
+          defaultColDef={defaultColDef}
+          domLayout="autoHeight"
+        />
+        <Modal open={showModal} closeHandler={() => setShowModal(false)}>
+          <Modal.Header>
+            <Modal.Title>
+              You've clicked on
+              {' '}
+              {sampleData.find(person => person.id === activePersonId)?.name.children}
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <p>Look at you go.</p>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button variant="tertiary" onClick={() => setShowModal(false)}>Close</Button>
+            <Button variant="primary" onClick={() => setShowModal(false)}>Primary Action</Button>
+          </Modal.Footer>
+        </Modal>
+      </>
+
+    );
+  },
+};
+
 export default meta;

package/src/components/tag/Tag.stories.tsx

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

package/src/components/tag/Tag.test.tsx

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

package/src/components/tag/Tag.tsx

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

package/src/components/tag/tag.scss

@@ -0,0 +1,51 @@
+.ds-tag {
+  display: flex;
+  padding: var(--tag-spacing-vertical) var(--tag-spacing-horizontal);
+  align-items: center;
+  gap: var(--tag-spacing-gap-horizontal);
+  border-radius: var(--tag-radius);
+  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);
+  font-style: normal;
+  font-weight: var(--type-body-p-weight);
+  line-height: 150%; /* 19.5px */
+  
+  &--orange {
+    color: var(--tag-category-orange-color-text);
+    background: var(--tag-category-orange-color-background);
+  }
+
+  &--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/index.scss

@@ -14,6 +14,7 @@
 @use "components/formField/inputs/checkbox/checkboxInput.scss";
 @use "components/formField/inputs/selectDropdown/selectDropdown";
 @use "components/formField/inputs/colourPickerDropdown/colourPickerDropdown.scss";
+@use "components/tag/tag.scss";
 @use "components/pill/pill.scss";
 @use "components/section/section.scss";
 @use "components/tabs/tabs.scss";

package/src/index.ts

@@ -3,6 +3,7 @@ export { Heading } from 'Components/heading/Heading';
 export { Icon } from 'Components/icon/Icon';
 export { Card } from 'Components/card/Card';
 export { Dropdown } from 'Components/dropdown/Dropdown';
+export { Tag } from 'Components/tag/Tag';
 export { Pill } from 'Components/pill/Pill';
 export { Section } from 'Components/section/Section';
 export { Tabs } from 'Components/tabs/Tabs';