@arbor-education/design-system.components 0.0.3 → 0.0.5

package/src/components/slideoverManager/SlideoverManager.stories.tsx

@@ -0,0 +1,374 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SlideoverManager } from './SlideoverManager';
+import { SlideoverUtils } from '../../utils/SlideoverUtils';
+import { Button } from '../button/Button';
+import { Section } from '../section/Section';
+import { FormField } from '../formField/FormField';
+import { generateUuid } from '../../utils/generateUuid';
+import { allowedIcons, type IconName } from '../icon/allowedIcons';
+
+type SlideoverStoryArgs = {
+  headerIcon?: IconName;
+  centerHeaderText?: boolean;
+};
+
+const meta: Meta<SlideoverStoryArgs> = {
+  title: 'Components/SlideoverManager',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    headerIcon: {
+      control: { type: 'select' },
+      options: Object.keys(allowedIcons),
+      description: 'Icon to display in the slideover header',
+    },
+    centerHeaderText: {
+      control: { type: 'boolean' },
+      description: 'Whether to center the header text',
+    },
+  },
+  args: {
+    centerHeaderText: true,
+  },
+  decorators: [
+    Story => (
+      <div>
+        <Story />
+        <div style={{ padding: '1rem' }}>
+          <p>
+            The SlideoverManager is a container that manages the display of slideovers. It listens for events to add or remove slideovers.
+          </p>
+          <p>
+            Use the buttons below to add slideovers with different content.
+          </p>
+        </div>
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<SlideoverStoryArgs>;
+
+let slideoverCount = 0;
+
+const addSlideoverWithContent = (content: React.ReactNode, headerIcon?: IconName, centerHeaderText?: boolean) => {
+  slideoverCount++;
+  SlideoverUtils.addSlideover({
+    title: `Slideover ${slideoverCount}`,
+    children: content,
+    headerIcon,
+    centerHeaderText,
+  });
+};
+
+const removeSlideover = () => {
+  if (slideoverCount > 0) {
+    slideoverCount--;
+  }
+  SlideoverUtils.removeSlideover();
+};
+
+const removeAllSlideovers = () => {
+  slideoverCount = 0;
+  SlideoverUtils.removeAllSlideovers();
+};
+
+export const Default: Story = {
+  render: args => (
+    <>
+      <SlideoverManager slideovers={[]} />
+      <div style={{ padding: '1rem', display: 'flex', gap: '1rem' }}>
+        <Button
+          onClick={() =>
+            addSlideoverWithContent(<p>This is a simple slideover.</p>, args.headerIcon, args.centerHeaderText)}
+        >
+          Add Simple Slideover
+        </Button>
+        <Button onClick={removeSlideover} type="secondary">
+          Remove Last Slideover
+        </Button>
+        <Button onClick={removeAllSlideovers} type="primary-destructive">
+          Remove All
+        </Button>
+      </div>
+    </>
+  ),
+};
+
+export const WithSections: Story = {
+  render: args => (
+    <>
+      <SlideoverManager slideovers={[]} />
+      <div style={{ padding: '1rem', display: 'flex', gap: '1rem' }}>
+        <Button
+          onClick={() =>
+            addSlideoverWithContent(
+              <>
+                <Section title="Section 1" collapsible>
+                  <p>Aliquip ea tempor officia irure do qui culpa. Laborum proident laboris aliqua ad Lorem eiusmod fugiat dolore qui occaecat adipisicing. Dolore quis nisi occaecat commodo labore ad nulla aliquip in. Enim labore nisi laborum nostrud officia ad nulla ut quis. Aute excepteur quis amet aliquip. Excepteur Lorem cupidatat adipisicing consectetur ipsum Lorem. Deserunt dolor veniam sit mollit elit aliquip duis.</p>
+                </Section>
+                <Section title="Section 2" collapsible collapsed>
+                  <p>Veniam adipisicing culpa id esse duis in officia consequat veniam ad ullamco sint sunt anim. Incididunt exercitation dolor Lorem anim aute ad deserunt. Nulla culpa sint aliqua ea Lorem sint. Elit sit consectetur minim cillum consectetur pariatur Lorem labore consectetur nisi consectetur officia exercitation. Est consectetur commodo deserunt ipsum aliqua occaecat qui sunt consectetur.</p>
+                </Section>
+              </>,
+              args.headerIcon,
+              args.centerHeaderText,
+            )}
+        >
+          Add Slideover with Sections
+        </Button>
+        <Button onClick={removeSlideover} type="secondary">
+          Remove Last Slideover
+        </Button>
+        <Button onClick={removeAllSlideovers} type="primary-destructive">
+          Remove All
+        </Button>
+      </div>
+    </>
+  ),
+};
+
+export const WithFormFields: Story = {
+  render: (args) => {
+    const formFieldId = generateUuid();
+    return (
+      <>
+        <SlideoverManager slideovers={[]} />
+        <div style={{ padding: '1rem', display: 'flex', gap: '1rem' }}>
+          <Button
+            onClick={() =>
+              addSlideoverWithContent(
+                <>
+                  <FormField
+                    id={formFieldId}
+                    label="Your Name"
+                    inputType="text"
+                    inputProps={{ placeholder: 'e.g. Jane Doe' }}
+                    fieldDescription="Please enter your full name."
+                  />
+                </>,
+                args.headerIcon,
+                args.centerHeaderText,
+              )}
+          >
+            Add Slideover with Form
+          </Button>
+          <Button onClick={removeSlideover} type="secondary">
+            Remove Last Slideover
+          </Button>
+          <Button onClick={removeAllSlideovers} type="primary-destructive">
+            Remove All
+          </Button>
+        </div>
+      </>
+    );
+  },
+};
+
+export const WithFooterContent: Story = {
+  render: (args) => {
+    const handleSave = () => {
+      alert('Save clicked!');
+      SlideoverUtils.removeSlideover();
+    };
+
+    const handleCancel = () => {
+      SlideoverUtils.removeSlideover();
+    };
+
+    const footerContent = (
+      <div style={{ display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
+        <Button type="secondary" onClick={handleCancel}>
+          Cancel
+        </Button>
+        <Button type="primary" onClick={handleSave}>
+          Save Changes
+        </Button>
+      </div>
+    );
+
+    return (
+      <>
+        <SlideoverManager slideovers={[]} />
+        <div style={{ padding: '1rem', display: 'flex', gap: '1rem' }}>
+          <Button
+            onClick={() => {
+              slideoverCount++;
+              SlideoverUtils.addSlideover({
+                title: `Slideover ${slideoverCount}`,
+                children: (
+                  <>
+                    <Section title="Edit Settings">
+                      <FormField
+                        id={generateUuid()}
+                        label="Setting Name"
+                        inputType="text"
+                        inputProps={{ placeholder: 'Enter setting name' }}
+                      />
+                      <FormField
+                        id={generateUuid()}
+                        label="Description"
+                        inputType="textarea"
+                        inputProps={{ placeholder: 'Enter description', rows: 4 }}
+                      />
+                    </Section>
+                  </>
+                ),
+                footerContents: footerContent,
+                headerIcon: args.headerIcon,
+                centerHeaderText: args.centerHeaderText,
+              });
+            }}
+          >
+            Add Slideover with Footer
+          </Button>
+          <Button onClick={removeSlideover} type="secondary">
+            Remove Last Slideover
+          </Button>
+          <Button onClick={removeAllSlideovers} type="primary-destructive">
+            Remove All
+          </Button>
+        </div>
+      </>
+    );
+  },
+};
+
+export const WithScrollableContent: Story = {
+  render: (args) => {
+    const footerContent = (
+      <div style={{ display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
+        <Button type="secondary" onClick={SlideoverUtils.removeSlideover}>
+          Cancel
+        </Button>
+        <Button type="primary" onClick={SlideoverUtils.removeSlideover}>
+          Save
+        </Button>
+      </div>
+    );
+
+    return (
+      <>
+        <SlideoverManager slideovers={[]} />
+        <div style={{ padding: '1rem', display: 'flex', gap: '1rem' }}>
+          <Button
+            onClick={() => {
+              slideoverCount++;
+              SlideoverUtils.addSlideover({
+                title: `Slideover ${slideoverCount}`,
+                children: (
+                  <>
+                    <Section title="Section 1" collapsible>
+                      <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                      </p>
+                      <FormField
+                        id={generateUuid()}
+                        label="Field 1"
+                        inputType="text"
+                        inputProps={{ placeholder: 'Enter value' }}
+                      />
+                      <FormField
+                        id={generateUuid()}
+                        label="Field 2"
+                        inputType="text"
+                        inputProps={{ placeholder: 'Enter value' }}
+                      />
+                    </Section>
+                    <Section title="Section 2" collapsible>
+                      <p>
+                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                      </p>
+                      <FormField
+                        id={generateUuid()}
+                        label="Field 3"
+                        inputType="textarea"
+                        inputProps={{ placeholder: 'Enter long text', rows: 6 }}
+                      />
+                    </Section>
+                    <Section title="Section 3" collapsible>
+                      <p>
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
+                        totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+                      </p>
+                      <FormField
+                        id={generateUuid()}
+                        label="Field 4"
+                        inputType="number"
+                        inputProps={{ placeholder: 'Enter number' }}
+                      />
+                      <FormField
+                        id={generateUuid()}
+                        label="Field 5"
+                        inputType="text"
+                        inputProps={{ placeholder: 'Enter value' }}
+                      />
+                    </Section>
+                    <Section title="Section 4" collapsible>
+                      <p>
+                        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
+                        eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.
+                      </p>
+                      <FormField
+                        id={generateUuid()}
+                        label="Field 6"
+                        inputType="text"
+                        inputProps={{ placeholder: 'Enter value' }}
+                      />
+                    </Section>
+                    <Section title="Section 5" collapsible>
+                      <p>
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
+                        corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.
+                      </p>
+                      <FormField
+                        id={generateUuid()}
+                        label="Field 7"
+                        inputType="textarea"
+                        inputProps={{ placeholder: 'Enter description', rows: 4 }}
+                      />
+                      <FormField
+                        id={generateUuid()}
+                        label="Field 8"
+                        inputType="text"
+                        inputProps={{ placeholder: 'Enter value' }}
+                      />
+                    </Section>
+                    <Section title="Section 6" collapsible collapsed>
+                      <p>
+                        Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
+                        Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio.
+                      </p>
+                      <FormField
+                        id={generateUuid()}
+                        label="Field 9"
+                        inputType="text"
+                        inputProps={{ placeholder: 'Enter value' }}
+                      />
+                    </Section>
+                  </>
+                ),
+                footerContents: footerContent,
+                headerIcon: args.headerIcon,
+                centerHeaderText: args.centerHeaderText,
+              });
+            }}
+          >
+            Add Slideover with Scrollable Content
+          </Button>
+          <Button onClick={removeSlideover} type="secondary">
+            Remove Last Slideover
+          </Button>
+          <Button onClick={removeAllSlideovers} type="primary-destructive">
+            Remove All
+          </Button>
+        </div>
+      </>
+    );
+  },
+};

package/src/components/slideoverManager/SlideoverManager.test.tsx

@@ -0,0 +1,64 @@
+import { expect, test, describe } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import { SlideoverManager } from './SlideoverManager';
+import '@testing-library/jest-dom/vitest';
+import { SlideoverUtils } from 'Utils/SlideoverUtils';
+import type { SlideoverProps } from 'Components/slideover/Slideover';
+
+const slideover1: SlideoverProps = {
+  title: 'Slideover 1',
+  children: 'Content 1',
+};
+
+const slideover2: SlideoverProps = {
+  title: 'Slideover 2',
+  children: 'Content 2',
+};
+
+describe('SlideoverManager', () => {
+  test('updates slideovers when the slideovers prop changes', () => {
+    const { rerender } = render(<SlideoverManager slideovers={[]} />);
+    expect(screen.queryByText('Slideover 1')).not.toBeInTheDocument();
+
+    rerender(<SlideoverManager slideovers={[slideover1]} />);
+    expect(screen.getByText('Slideover 1')).toBeInTheDocument();
+
+    rerender(<SlideoverManager slideovers={[slideover1, slideover2]} />);
+    expect(screen.getByText('Slideover 1')).toBeInTheDocument();
+    expect(screen.getByText('Slideover 2')).toBeInTheDocument();
+
+    rerender(<SlideoverManager slideovers={[slideover2]} />);
+    expect(screen.queryByText('Slideover 1')).not.toBeInTheDocument();
+    expect(screen.getByText('Slideover 2')).toBeInTheDocument();
+
+    rerender(<SlideoverManager slideovers={[]} />);
+    expect(screen.queryByText('Slideover 1')).not.toBeInTheDocument();
+    expect(screen.queryByText('Slideover 2')).not.toBeInTheDocument();
+  });
+
+  test('adds and removes slideovers using SlideoverUtils', () => {
+    render(<SlideoverManager slideovers={[]} />);
+
+    act(() => {
+      SlideoverUtils.addSlideover({ title: 'First Slideover', children: '' });
+    });
+    expect(screen.getByText('First Slideover')).toBeInTheDocument();
+
+    act(() => {
+      SlideoverUtils.addSlideover({ title: 'Second Slideover', children: '' });
+    });
+    expect(screen.getByText('First Slideover')).toBeInTheDocument();
+    expect(screen.getByText('Second Slideover')).toBeInTheDocument();
+
+    act(() => {
+      SlideoverUtils.removeSlideover();
+    });
+    expect(screen.getByText('First Slideover')).toBeInTheDocument();
+    expect(screen.queryByText('Second Slideover')).not.toBeInTheDocument();
+
+    act(() => {
+      SlideoverUtils.removeAllSlideovers();
+    });
+    expect(screen.queryByText('First Slideover')).not.toBeInTheDocument();
+  });
+});

package/src/components/slideoverManager/SlideoverManager.tsx

@@ -0,0 +1,51 @@
+import classNames from 'classnames';
+import { Slideover, type SlideoverProps } from 'Components/slideover/Slideover';
+import { useEffect, useRef, useState } from 'react';
+import { SLIDEOVER } from 'Utils/Constants';
+import { usePubSub } from 'Utils/hooks/usePubSub';
+import { PopupParentContext } from 'Utils/PopupParentContext';
+
+type SlideoverManagerProps = {
+  slideovers: SlideoverProps[];
+};
+
+export const SlideoverManager = (props: SlideoverManagerProps) => {
+  const { slideovers: initialSlideovers } = props;
+  const [slideovers, setSlideovers] = useState(() => initialSlideovers);
+
+  const popupParentContainerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    setSlideovers(initialSlideovers);
+  }, [initialSlideovers]);
+
+  const hasSlideovers = slideovers.length > 0;
+
+  usePubSub(SLIDEOVER.ADD_SLIDEOVER, (slideover: SlideoverProps) => {
+    setSlideovers(currentSlideovers => [...currentSlideovers, slideover]);
+  });
+
+  usePubSub(SLIDEOVER.REMOVE_SLIDEOVER, () => {
+    setSlideovers(currentSlideovers => currentSlideovers.slice(0, currentSlideovers.length - 1));
+  });
+
+  usePubSub(SLIDEOVER.REMOVE_ALL_SLIDEOVERS, () => {
+    setSlideovers([]);
+  });
+
+  return (
+    <PopupParentContext.Provider value={popupParentContainerRef}>
+      <div
+        className={classNames(
+          'ds-slideover-manager',
+          {
+            'ds-slideover-manager--active': hasSlideovers,
+          },
+        )}
+        ref={popupParentContainerRef}
+      >
+        {slideovers.map((slideoverProps, index) => <Slideover key={index} {...slideoverProps} />)}
+      </div>
+    </PopupParentContext.Provider>
+  );
+};

package/src/components/slideoverManager/slideoverManager.scss

@@ -0,0 +1,13 @@
+.ds-slideover-manager {
+  display: none;
+
+  &--active {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: var(--slideover-overlay-color-background);
+    height: 100vh;
+    width: 100vw;
+  }
+}

package/src/components/tabs/Tabs.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Tabs } from './Tabs';
+
+const meta = {
+  title: 'Components/Tabs',
+  component: Tabs,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      control: false,
+      description: 'Tab items to display',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+    },
+  },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Basic tabs with buttons
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <Tabs.Item active>Overview</Tabs.Item>
+        <Tabs.Item>Details</Tabs.Item>
+        <Tabs.Item>Settings</Tabs.Item>
+      </>
+    ),
+  },
+};
+
+// Tabs with links
+export const WithLinks: Story = {
+  args: {
+    children: (
+      <>
+        <Tabs.Item tabElement="link" tabElementProps={{ href: '#overview' }} active>
+          Overview
+        </Tabs.Item>
+        <Tabs.Item tabElement="link" tabElementProps={{ href: '#details' }}>
+          Details
+        </Tabs.Item>
+        <Tabs.Item tabElement="link" tabElementProps={{ href: '#settings' }}>
+          Settings
+        </Tabs.Item>
+      </>
+    ),
+  },
+};
+
+// Mixed tabs (buttons and links)
+export const Mixed: Story = {
+  args: {
+    children: (
+      <>
+        <Tabs.Item active>Home</Tabs.Item>
+        <Tabs.Item tabElement="link" tabElementProps={{ href: '#about' }}>
+          About
+        </Tabs.Item>
+        <Tabs.Item>Contact</Tabs.Item>
+        <Tabs.Item tabElement="link" tabElementProps={{ href: '#help' }}>
+          Help
+        </Tabs.Item>
+      </>
+    ),
+  },
+};
+
+// Many tabs
+export const ManyTabs: Story = {
+  args: {
+    children: (
+      <>
+        <Tabs.Item active iconName="list">Tab 1</Tabs.Item>
+        <Tabs.Item iconName="list">Tab 2</Tabs.Item>
+        <Tabs.Item iconName="list">Tab 3</Tabs.Item>
+        <Tabs.Item iconName="list">Tab 4</Tabs.Item>
+        <Tabs.Item iconName="list">Tab 5</Tabs.Item>
+        <Tabs.Item iconName="list">Tab 6</Tabs.Item>
+        <Tabs.Item iconName="list">Tab 7</Tabs.Item>
+        <Tabs.Item iconName="list">Tab 8</Tabs.Item>
+      </>
+    ),
+  },
+};