@ssa-ui-kit/core 0.0.1-alpha

package/src/components/TabBar/TabBar.spec.tsx

@@ -0,0 +1,290 @@
+import { within } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+import { getByRole } from '@testing-library/dom';
+
+import Tab from '@components/Tab';
+import LargeTab from '@components/LargeTab';
+
+import { TabBarWrapper, TabContents } from './stories/helpers';
+import TabBar, { TabBarContextProvider } from './index';
+import { ISmallTabProps, ITab } from './types';
+import { ReactNode } from 'react';
+
+interface TabTest extends Pick<ISmallTabProps, 'tabId'> {
+  controls: string;
+  topText?: string;
+  bottomText?: string;
+  text?: string;
+  renderContent: (
+    tab?: {
+      tabId: number | string;
+      text: string;
+      renderContent: () => ReactNode;
+      [prop: string | number | symbol]: unknown;
+    },
+    arg?: unknown,
+  ) => React.ReactNode;
+}
+
+interface ComponentTabBarTests {
+  (
+    describeBlockName: string,
+    tabs: TabTest[],
+    renderTab: (tab: TabTest) => React.ReactElement,
+    getTabText: (tab: TabTest) => string[],
+  ): void;
+}
+
+const componentTabBarTests: ComponentTabBarTests = (
+  describeBlockName,
+  tabs,
+  renderTab,
+  getTabText,
+) => {
+  const checkTabPanel = (tab: TabTest, container: HTMLElement) => {
+    const tabPanel = getByRole(container, 'tabpanel');
+
+    expect(tabPanel).toHaveAttribute('id', tab.controls);
+    expect(tabPanel).toHaveAttribute('aria-labelledby', tab.tabId);
+    expect(tabPanel).toHaveTextContent(tab.topText || tab.text || '');
+  };
+
+  describe(describeBlockName, () => {
+    function setup() {
+      return {
+        user: userEvent.setup(),
+        ...render(
+          <TabBarContextProvider>
+            <TabBarWrapper>
+              <TabBar>{tabs.map((t) => renderTab(t))}</TabBar>
+            </TabBarWrapper>
+          </TabBarContextProvider>,
+        ),
+      };
+    }
+
+    it('Renders tabs', () => {
+      const { getByRole, queryByRole } = setup();
+      const tabBarEl = getByRole('tablist');
+      const tabEls = within(tabBarEl).getAllByRole('tab');
+
+      expect(tabEls.length).toBe(tabs.length);
+      expect(queryByRole('tabpanel')).not.toBeInTheDocument();
+
+      for (let i = 0; i < tabs.length; ++i) {
+        const tab = tabs[i];
+        const tabEl = tabEls[i];
+
+        expect(tabEl).toHaveAttribute('id', tab.tabId);
+        expect(tabEl).toHaveAttribute('aria-selected', 'false');
+        expect(tabEl).toHaveAttribute('tabindex', '0');
+        expect(tabEl).toHaveAttribute('aria-controls', tabs[i].controls);
+
+        const textContents = getTabText(tab);
+
+        for (const t of textContents) {
+          expect(tabEl).toHaveTextContent(t);
+          expect(tabEl.getAttribute('title')).toEqual(expect.stringMatching(t));
+        }
+      }
+    });
+
+    it("Marks a tab as active when it's clicked", async () => {
+      const { user, getByRole, container } = setup();
+      const tabBarEl = getByRole('tablist');
+      const tabEls = within(tabBarEl).getAllByRole('tab');
+
+      await user.click(tabEls[0]);
+
+      for (let i = 0; i < tabs.length; ++i) {
+        const tab = tabs[i];
+        const tabEl = tabEls[i];
+
+        if (i === 0) {
+          expect(tabEl).toHaveAttribute('aria-selected', 'true');
+
+          checkTabPanel(tab, container);
+        } else {
+          expect(tabEl).toHaveAttribute('aria-selected', 'false');
+        }
+
+        expect(tabEl).toHaveAttribute('id', tab.tabId);
+        expect(tabEl).toHaveAttribute('tabindex', '0');
+        expect(tabEl).toHaveAttribute('aria-controls', tabs[i].controls);
+        const textContents = getTabText(tab);
+
+        for (const t of textContents) {
+          expect(tabEl).toHaveTextContent(t);
+          expect(tabEl.getAttribute('title')).toEqual(expect.stringMatching(t));
+        }
+      }
+    });
+
+    it('Marks a tab as inactive when another tab is clicked', async () => {
+      const { user, getByRole, container } = setup();
+      const tabBarEl = getByRole('tablist');
+      const tabEls = within(tabBarEl).getAllByRole('tab');
+
+      await user.click(tabEls[0]);
+      await user.click(tabEls[1]);
+
+      for (let i = 0; i < tabs.length; ++i) {
+        const tab = tabs[i];
+        const tabEl = tabEls[i];
+
+        if (i === 1) {
+          expect(tabEl).toHaveAttribute('aria-selected', 'true');
+
+          checkTabPanel(tab, container);
+        } else {
+          expect(tabEl).toHaveAttribute('aria-selected', 'false');
+        }
+
+        expect(tabEl).toHaveAttribute('id', tab.tabId);
+        expect(tabEl).toHaveAttribute('tabindex', '0');
+        expect(tabEl).toHaveAttribute('aria-controls', tabs[i].controls);
+        const textContents = getTabText(tab);
+
+        for (const t of textContents) {
+          expect(tabEl).toHaveTextContent(t);
+          expect(tabEl.getAttribute('title')).toEqual(expect.stringMatching(t));
+        }
+      }
+    });
+
+    it("Does not toggle an active element when it's clicked", async () => {
+      const { user, getByRole, container } = setup();
+      const tabBarEl = getByRole('tablist');
+      const tabEls = within(tabBarEl).getAllByRole('tab');
+
+      await user.click(tabEls[0]);
+      await user.click(tabEls[0]);
+
+      for (let i = 0; i < tabs.length; ++i) {
+        const tabEl = tabEls[i];
+
+        if (i === 0) {
+          expect(tabEl).toHaveAttribute('aria-selected', 'true');
+
+          checkTabPanel(tabs[i], container);
+        } else {
+          expect(tabEl).toHaveAttribute('aria-selected', 'false');
+        }
+      }
+    });
+
+    it('Becomes focused when TAB is clicked', async () => {
+      const { user, getByRole } = setup();
+
+      const tabBarEl = getByRole('tablist');
+      const tabEls = within(tabBarEl).getAllByRole('tab');
+
+      await user.keyboard('[Tab]');
+
+      expect(tabEls[0]).toHaveFocus();
+    });
+  });
+};
+
+describe('TabBar', () => {
+  const renderContent = (tab?: ISmallTabProps): React.ReactNode => {
+    return (
+      <TabContents
+        id={tab?.ariaControls}
+        labelledBy={tab?.tabId as string}
+        text={`${tab?.topText || tab?.text} contents`}
+      />
+    );
+  };
+
+  componentTabBarTests(
+    'Time Period Tab Bar',
+    [
+      {
+        tabId: 'year',
+        text: 'Year',
+        controls: 'panel-1',
+        renderContent,
+      },
+      { tabId: 'month', text: 'Month', controls: 'panel-2', renderContent },
+      { tabId: 'week', text: 'Week', controls: 'panel-3', renderContent },
+      { tabId: 'day', text: 'Day', controls: 'panel-4', renderContent },
+    ],
+    (tab) => (
+      <Tab
+        key={tab.tabId}
+        tabId={tab.tabId}
+        text={tab.text || ''}
+        ariaControls={tab.controls}
+        renderContent={tab.renderContent as ITab['renderContent']}
+      />
+    ),
+    (tab) => [tab.text || ''],
+  );
+
+  componentTabBarTests(
+    'Week Tab Bar',
+    [
+      {
+        tabId: 'monday',
+        topText: 'Mon',
+        bottomText: '02',
+        controls: 'panel-1',
+        renderContent,
+      },
+      {
+        tabId: 'tuesday',
+        topText: 'Tue',
+        bottomText: '03',
+        controls: 'panel-2',
+        renderContent,
+      },
+      {
+        tabId: 'wednesday',
+        topText: 'Wed',
+        bottomText: '04',
+        controls: 'panel-3',
+        renderContent,
+      },
+      {
+        tabId: 'thursday',
+        topText: 'Thu',
+        bottomText: '05',
+        controls: 'panel-4',
+        renderContent,
+      },
+      {
+        tabId: 'friday',
+        topText: 'Fri',
+        bottomText: '06',
+        controls: 'panel-5',
+        renderContent,
+      },
+      {
+        tabId: 'Saturday',
+        topText: 'Sat',
+        bottomText: '07',
+        controls: 'panel-6',
+        renderContent,
+      },
+      {
+        tabId: 'Sunday',
+        topText: 'Sun',
+        bottomText: '08',
+        controls: 'panel-7',
+        renderContent,
+      },
+    ],
+    (tab) => (
+      <LargeTab
+        key={tab.tabId}
+        tabId={tab.tabId}
+        topText={tab.topText || ''}
+        bottomText={tab.bottomText || ''}
+        ariaControls={tab.controls}
+        renderContent={tab.renderContent as ITab['renderContent']}
+      />
+    ),
+    (tab) => [tab.topText || '', tab.bottomText || ''],
+  );
+});

package/src/components/TabBar/TabBar.tsx

@@ -0,0 +1,43 @@
+import styled from '@emotion/styled';
+import { Children, cloneElement, isValidElement } from 'react';
+import { useTabBarContext } from './TabBarContext';
+import { ITabBarProps } from './types';
+
+const TabBarBase = styled.div``;
+
+/**
+ * This component doesn't show contents of the selected tab,
+ * however it accepts a required `renderContent()` render
+ * prop and stores it into the Context. This lets the parent
+ * component to decide where to render the contents of the
+ * selected tab.
+ * */
+const TabBar = ({ children }: ITabBarProps) => {
+  const { activeTab, setActiveTab } = useTabBarContext();
+  const activeTabId = activeTab?.tabId;
+
+  return (
+    <TabBarBase role="tablist">
+      {Children.map(children, (child) => {
+        // istanbul ignore else
+        if (isValidElement(child)) {
+          const { renderContent, ...rest } = child.props;
+          const tabId = rest.tabId;
+
+          return cloneElement(child, {
+            key: tabId,
+            isActive: activeTabId === tabId,
+            onClick: () =>
+              activeTabId !== tabId &&
+              setActiveTab({
+                tabId,
+                renderContent: renderContent.bind(null, rest),
+              }),
+          });
+        }
+      })}
+    </TabBarBase>
+  );
+};
+
+export default TabBar;

package/src/components/TabBar/TabBarContext.tsx

@@ -0,0 +1,43 @@
+import { createContext, useState, useContext } from 'react';
+import { ITab, ITabBarContext } from './types';
+
+const defaultTab: ITab = {
+  tabId: Number.NaN,
+  renderContent() {
+    return null;
+  },
+};
+
+export const TabBarContext = createContext<ITabBarContext>({
+  activeTab: defaultTab,
+  setActiveTab() {
+    /* default no-op */
+  },
+});
+
+export const useTabBarContext = () => useContext(TabBarContext);
+
+const useTabBar = (initialTab?: ITab): ITabBarContext => {
+  const [tab, setTab] = useState<ITab | undefined>(initialTab);
+
+  return {
+    activeTab: tab,
+    setActiveTab: (tab) => setTab(tab),
+  };
+};
+
+export const TabBarContextProvider = ({
+  initialTab = defaultTab,
+  children,
+}: {
+  initialTab?: ITab;
+  children: React.ReactNode;
+}) => {
+  const { activeTab, setActiveTab } = useTabBar(initialTab);
+
+  return (
+    <TabBarContext.Provider value={{ activeTab, setActiveTab }}>
+      {children}
+    </TabBarContext.Provider>
+  );
+};

package/src/components/TabBar/index.ts

@@ -0,0 +1,6 @@
+export { default } from './TabBar';
+export {
+  TabBarContextProvider,
+  useTabBarContext,
+  TabBarContext,
+} from './TabBarContext';

package/src/components/TabBar/stories/TimePeriodTabBar.stories.tsx

@@ -0,0 +1,84 @@
+/* eslint-disable prettier/prettier */
+import { Meta, StoryObj } from '@storybook/react';
+import TabBar from '@components/TabBar';
+import Tab from '@components/Tab';
+
+import { TabBarDecorator, TabContents } from './helpers';
+
+type Args = Parameters<typeof TabBar>[0];
+
+export default {
+  title: 'Components/TabBar',
+  component: TabBar,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+      },
+    },
+  },
+  decorators: [TabBarDecorator],
+} as Meta<typeof TabBar>;
+
+const TabBarOutput = ({ args }: {
+  args: Args
+}) => (
+  <TabBar {...args}>
+    <Tab
+      tabId="year"
+      text="Year"
+      ariaControls="year-panel"
+      renderContent={() => (
+        <TabContents id="year-panel" labelledBy="year" text="Year contents" />
+      )}
+    />
+    <Tab
+      tabId="month"
+      text="Month"
+      ariaControls="month-panel"
+      renderContent={() => (
+        <TabContents
+          id="month-panel"
+          labelledBy="month"
+          text="Month contents"
+        />
+      )}
+    />
+    <Tab
+      tabId="week"
+      text="Week"
+      ariaControls="week-panel"
+      renderContent={() => (
+        <TabContents id="week-panel" labelledBy="week" text="Week contents" />
+      )}
+    />
+    <Tab
+      tabId="day"
+      text="Day"
+      ariaControls="day-panel"
+      renderContent={() => (
+        <TabContents id="day-panel" labelledBy="day" text="Day contents" />
+      )}
+    />
+  </TabBar>
+)
+
+export const TimePeriodTabBarStory: StoryObj<typeof Tab> = (args: Args) => (
+  <TabBarOutput args={args} />
+);
+TimePeriodTabBarStory.storyName = 'Time Period Tab Bar';
+
+export const TimePeriodTabBarStoryWithActiveBar: StoryObj<typeof Tab> = (
+  args: Args,
+) => <TabBarOutput args={args} />;
+TimePeriodTabBarStoryWithActiveBar.storyName = 'Time Period Tab Bar (+Active Tab)';
+TimePeriodTabBarStoryWithActiveBar.args = {
+  selectedTabId: 'month',
+  renderContent: () => (
+    <TabContents
+      id="month-panel"
+      labelledBy="month"
+      text="Month contents"
+    />
+  )
+}

package/src/components/TabBar/stories/WeekTabBar.stories.tsx

@@ -0,0 +1,136 @@
+import { Meta, StoryObj } from '@storybook/react';
+import TabBar from '@components/TabBar';
+import LargeTab from '@components/LargeTab';
+
+import { TabBarDecorator, TabContents } from './helpers';
+
+type Args = Parameters<typeof TabBar>[0];
+
+export default {
+  title: 'Components/TabBar',
+  component: TabBar,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+      },
+    },
+  },
+  decorators: [TabBarDecorator],
+} as Meta<typeof TabBar>;
+
+const TabBarOutput = ({ args }: { args: Args }) => (
+  <TabBar {...args}>
+    <LargeTab
+      tabId="monday"
+      topText="Mon"
+      bottomText="02"
+      ariaControls="monday-panel"
+      renderContent={() => (
+        <TabContents
+          id="monday-panel"
+          labelledBy="monday"
+          text="Monday contents"
+        />
+      )}
+    />
+    <LargeTab
+      tabId="tuesday"
+      topText="Tue"
+      bottomText="03"
+      ariaControls="tuesday-panel"
+      renderContent={() => (
+        <TabContents
+          id="tuesday-panel"
+          labelledBy="tuesday"
+          text="Tuesday contents"
+        />
+      )}
+    />
+    <LargeTab
+      tabId="wednesday"
+      topText="Wed"
+      bottomText="04"
+      ariaControls="wednesday-panel"
+      renderContent={() => (
+        <TabContents
+          id="wednesday-panel"
+          labelledBy="wednesday"
+          text="Wednesday contents"
+        />
+      )}
+    />
+    <LargeTab
+      tabId="thursday"
+      topText="Thu"
+      bottomText="05"
+      ariaControls="thursday-panel"
+      renderContent={() => (
+        <TabContents
+          id="thursday-panel"
+          labelledBy="thursday"
+          text="Thursday contents"
+        />
+      )}
+    />
+    <LargeTab
+      tabId="friday"
+      topText="Fri"
+      bottomText="06"
+      ariaControls="friday-panel"
+      renderContent={() => (
+        <TabContents
+          id="friday-panel"
+          labelledBy="friday"
+          text="Friday contents"
+        />
+      )}
+    />
+    <LargeTab
+      tabId="saturday"
+      topText="Sat"
+      bottomText="07"
+      ariaControls="saturday-panel"
+      renderContent={() => (
+        <TabContents
+          id="saturday-panel"
+          labelledBy="saturday"
+          text="Saturday contents"
+        />
+      )}
+    />
+    <LargeTab
+      tabId="sunday"
+      topText="Sun"
+      bottomText="08"
+      ariaControls="sunday-panel"
+      renderContent={() => (
+        <TabContents
+          id="sunday-panel"
+          labelledBy="sunday"
+          text="Sunday contents"
+        />
+      )}
+    />
+  </TabBar>
+);
+
+export const WeekTabBarStory: StoryObj<typeof LargeTab> = (args: Args) => (
+  <TabBarOutput args={args} />
+);
+WeekTabBarStory.storyName = 'Week Tab Bar';
+
+export const WeekTabBarStoryWithActiveBar: StoryObj<typeof LargeTab> = (
+  args: Args,
+) => <TabBarOutput args={args} />;
+WeekTabBarStoryWithActiveBar.storyName = 'Week Tab Bar (+Active Tab)';
+WeekTabBarStoryWithActiveBar.args = {
+  selectedTabId: 'wednesday',
+  renderContent: () => (
+    <TabContents
+      id="wednesday-panel"
+      labelledBy="wednesday"
+      text="Wednesday contents"
+    />
+  ),
+};

package/src/components/TabBar/stories/helpers.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Fragment, useLayoutEffect } from 'react';
+import { useTabBarContext, TabBarContextProvider } from '@components/TabBar';
+import { ITab } from '../types';
+import TabBar from '../TabBar';
+import { DecoratorFunction } from '@storybook/types';
+
+type Args = Parameters<typeof TabBar>[0];
+
+export const TabBarWrapper = ({
+  children,
+  selectedTabId,
+  renderContent,
+}: {
+  children: React.ReactNode;
+  selectedTabId?: ITab['tabId'];
+  renderContent?: ITab['renderContent'];
+}) => {
+  const { activeTab, setActiveTab } = useTabBarContext();
+  useLayoutEffect(() => {
+    if (selectedTabId && renderContent) {
+      setActiveTab({
+        tabId: selectedTabId,
+        renderContent,
+      });
+    }
+  }, []);
+
+  return (
+    <Fragment>
+      <div>{children}</div>
+      {activeTab?.renderContent()}
+    </Fragment>
+  );
+};
+
+export const TabContents = ({
+  text,
+  id,
+  labelledBy,
+}: {
+  text: string;
+  id?: string;
+  labelledBy?: string;
+}) => {
+  return (
+    <p id={id} role="tabpanel" tabIndex={0} aria-labelledby={labelledBy}>
+      {text}
+    </p>
+  );
+};
+
+/* istanbul ignore next */
+export const TabBarDecorator: DecoratorFunction<
+  {
+    component: typeof TabBar;
+    storyResult: React.ReactElement;
+    canvasElement: unknown;
+  },
+  Args
+> = (Story, { args }) => {
+  return (
+    <TabBarContextProvider>
+      <TabBarWrapper {...args}>
+        <Story {...args} />
+      </TabBarWrapper>
+    </TabBarContextProvider>
+  );
+};