@orangesk/orange-design-system 2.0.0-alpha.0 → 2.0.0-alpha.1

package/src/components/Tabs/TabPanel.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import generateId from "../../utils/generateId";
+
+interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Optional href for the tab */
+  href?: string;
+  /** Tabpanel id */
+  id?: string;
+  /** Active state */
+  isActive?: boolean;
+  /** Additional class names */
+  className?: string;
+  /** Children components */
+  children?: React.ReactNode;
+}
+
+const TabPanel: React.FC<TabPanelProps> = ({
+  children,
+  isActive,
+  id,
+  href,
+  ...other
+}) => {
+  const currentId = id || generateId();
+
+  return (
+    <div
+      id={currentId}
+      role={href ? "" : "tabpanel"}
+      tabIndex={0}
+      hidden={!isActive}
+      {...other}
+    >
+      {children}
+    </div>
+  );
+};
+
+TabPanel.displayName = "TabPanel";
+
+export { TabPanel };

package/src/components/Tabs/Tabs.mdx

@@ -0,0 +1,373 @@
+import { loremIpsum } from 'lorem-ipsum';
+import {
+  md,
+  ComponentDocs,
+  CodeBlock,
+  Code,
+  DocsTable,
+} from '@lighting-beetle/lighter-styleguide';
+import { Preview, DefaultConfigTable } from '../../styleguide/';
+import Tabs, { TabPanel, Tab as TabLink } from './index';
+
+import {
+  defaultConfig as defaultConfigTabs,
+  configDocs as configDocsTabs,
+} from './Tabs.static';
+
+# Tabs
+
+Navigate sections of content in a tabbed interface.
+
+<Preview
+  code={
+    <Tabs>
+      <TabPanel id="tabpanel-1" tab="Tab 1">
+        ...
+      </TabPanel>
+      <TabPanel id="tabpanel-2" tab="Tab 2">
+        ...
+      </TabPanel>
+      <TabPanel id="tabpanel-3" tab="Tab 3">
+        ...
+      </TabPanel>
+      <TabPanel id="tabpanel-4" tab="Tab 4">
+        ...
+      </TabPanel>
+    </Tabs>
+  }
+>
+  <Tabs activeTabIndex={2}>
+    {[1, 2, 3, 4].map(item => (
+      <TabPanel
+        key={item.toString()}
+        id={`tabpanel-${item}`}
+        tab={`Tab ${item}`}
+        isDisabled={item === 4 ? true : null}
+      >
+        <p>{loremIpsum({ count: 3 })}</p>
+      </TabPanel>
+    ))}
+  </Tabs>
+</Preview>
+
+# Tabs - links
+
+Tabs can be also use as group of links.
+
+<Preview>
+  <Tabs activeTabIndex={2} isLink>
+    {[1, 2, 3, 4].map(item => (
+      <TabPanel
+        key={item.toString()}
+        id={`tabpanel-${item}`}
+        href="#tabs-links"
+        tab={`Tab ${item}`}
+        isDisabled={item === 4 ? true : null}
+      />
+    ))}
+  </Tabs>
+</Preview>
+
+# Light tabs
+
+<Preview
+  code={
+    <Tabs variant="light">
+      <TabPanel id="tabpanel-1" tab="Tab 1">
+        ...
+      </TabPanel>
+      <TabPanel id="tabpanel-2" tab="Tab 2">
+        ...
+      </TabPanel>
+      <TabPanel id="tabpanel-3" tab="Tab 3">
+        ...
+      </TabPanel>
+      <TabPanel id="tabpanel-4" tab="Tab 4">
+        ...
+      </TabPanel>
+    </Tabs>
+  }
+>
+  <Tabs activeTabIndex={2} variant="light">
+    {[1, 2, 3, 4].map(item => (
+      <TabPanel
+        key={item.toString()}
+        id={`tabpanel-light-${item}`}
+        tab={`Tab ${item}`}
+        isDisabled={item === 4 ? true : null}
+      >
+        <p>{loremIpsum({ count: 3 })}</p>
+      </TabPanel>
+    ))}
+  </Tabs>
+</Preview>
+
+## Inverse
+
+<Preview
+  bgTheme="black"
+  code={
+    <>
+      <Tabs colour="inverse">
+        <TabPanel id="tabpanel-1" tab="Tab 1">
+          ...
+        </TabPanel>
+        <TabPanel id="tabpanel-2" tab="Tab 2">
+          ...
+        </TabPanel>
+        <TabPanel id="tabpanel-3" tab="Tab 3">
+          ...
+        </TabPanel>
+        <TabPanel id="tabpanel-4" tab="Tab 4">
+          ...
+        </TabPanel>
+      </Tabs>
+      <Tabs variant="light" colour="inverse">
+        <TabPanel id="tabpanel-5" tab="Tab 5">
+          ...
+        </TabPanel>
+        <TabPanel id="tabpanel-6" tab="Tab 6">
+          ...
+        </TabPanel>
+        <TabPanel id="tabpanel-7" tab="Tab 7">
+          ...
+        </TabPanel>
+        <TabPanel id="tabpanel-8" tab="Tab 8">
+          ...
+        </TabPanel>
+      </Tabs>
+    </>
+  }
+>
+  {['standard', 'light'].map(tab => (
+    <Tabs activeTabIndex={2} colour="inverse" key={tab} variant={tab}>
+      {[1, 2, 3, 4].map(item => (
+        <TabPanel
+          key={item.toString()}
+          id={`tabpanel-${tab}-inverse-${item}`}
+          tab={`Tab ${item}`}
+          isDisabled={item === 4 ? true : null}
+        >
+          <p className="bg-black">{loremIpsum({ count: 3 })}</p>
+        </TabPanel>
+      ))}
+    </Tabs>
+  ))}
+</Preview>
+
+## Full width container
+
+<Preview
+  code={
+    <>
+      <Tabs isFullWidth>
+        <TabPanel id="tabpanel-1" tab="Tab 1">
+          ...
+        </TabPanel>
+        <TabPanel id="tabpanel-2" tab="Tab 2">
+          ...
+        </TabPanel>
+        <TabPanel id="tabpanel-3" tab="Tab 3">
+          ...
+        </TabPanel>
+        <TabPanel id="tabpanel-4" tab="Tab 4">
+          ...
+        </TabPanel>
+      </Tabs>
+      <Tabs variant="light" isFullWidth>
+        <TabPanel id="tabpanel-5" tab="Tab 5">
+          ...
+        </TabPanel>
+        <TabPanel id="tabpanel-6" tab="Tab 6">
+          ...
+        </TabPanel>
+        <TabPanel id="tabpanel-7" tab="Tab 7">
+          ...
+        </TabPanel>
+        <TabPanel id="tabpanel-8" tab="Tab 8">
+          ...
+        </TabPanel>
+      </Tabs>
+    </>
+  }
+>
+  {['standard', 'light'].map(tab => (
+    <Tabs activeTabIndex={2} isFullWidth key={`fullwidth-${tab}`} variant={tab}>
+      {[1, 2, 3, 4].map(item => (
+        <TabPanel
+          key={item.toString()}
+          id={`tabpanel-${tab}-fullwidth-${item}`}
+          tab={`Tab ${item}`}
+          isDisabled={item === 4 ? true : null}
+        >
+          <p>{loremIpsum({ count: 3 })}</p>
+        </TabPanel>
+      ))}
+    </Tabs>
+  ))}
+</Preview>
+
+## Equal width tabs
+
+<Preview
+  code={
+    <>
+      <Tabs hasEqualTabWidth>
+        <TabPanel id="tabpanel-1" tab="Tab 1">
+          ...
+        </TabPanel>
+        <TabPanel id="tabpanel-2" tab="Tab 2">
+          ...
+        </TabPanel>
+        <TabPanel id="tabpanel-3" tab="Tab 3">
+          ...
+        </TabPanel>
+        <TabPanel id="tabpanel-4" tab="Tab 4">
+          ...
+        </TabPanel>
+      </Tabs>
+      <Tabs variant="light" hasEqualTabWidth>
+        <TabPanel id="tabpanel-5" tab="Tab 5">
+          ...
+        </TabPanel>
+        <TabPanel id="tabpanel-6" tab="Tab 6">
+          ...
+        </TabPanel>
+        <TabPanel id="tabpanel-7" tab="Tab 7">
+          ...
+        </TabPanel>
+        <TabPanel id="tabpanel-8" tab="Tab 8">
+          ...
+        </TabPanel>
+      </Tabs>
+    </>
+  }
+>
+  {['standard', 'light'].map(tab => (
+    <Tabs
+      activeTabIndex={2}
+      hasEqualTabWidth
+      key={`equalwidth-${tab}`}
+      variant={tab}
+    >
+      {[1, 2, 3, 4].map(item => (
+        <TabPanel
+          key={item.toString()}
+          id={`tabpanel-${tab}-equalwidth-${item}`}
+          tab={`Tab ${item}`}
+          isDisabled={item === 4 ? true : null}
+        >
+          <p>{loremIpsum({ count: 3 })}</p>
+        </TabPanel>
+      ))}
+    </Tabs>
+  ))}
+</Preview>
+
+## Custom tab content
+
+Only use inline elements as children of the tab titles. The tabs are `<button>` elements which do not allow using block elements inside themselves.
+
+<Preview>
+  <Tabs>
+    <TabPanel
+      id="stylized-tab-1"
+      tab={
+        <React.Fragment>
+          <span className="h3 mb-xsmall">Large tab 1</span>
+          description
+        </React.Fragment>
+      }
+    >
+      <p>{loremIpsum({ count: 5 })}</p>
+    </TabPanel>
+    <TabPanel
+      id="stylized-tab-2"
+      tab={
+        <React.Fragment>
+          <span className="h3 mb-xsmall">Large tab 2</span>
+          description
+        </React.Fragment>
+      }
+    >
+      <p>{loremIpsum({ count: 5 })}</p>
+    </TabPanel>
+  </Tabs>
+</Preview>
+
+## JS module reference
+
+All elements with `[data-tabs]` will be initialised automatically.
+
+## Custom initialization
+
+<CodeBlock language="js">
+  const myTabs = new window.ODS.modules.Tabs(document.getElementById('my-tabs'),
+  config );
+</CodeBlock>
+
+## Default config
+
+<DefaultConfigTable config={defaultConfigTabs} docs={configDocsTabs} />
+
+## Methods
+
+export const methods = [
+  {
+    prop: 'init',
+    type: 'func',
+    default: '() => {}',
+    description: 'Creates a new instance',
+  },
+  {
+    prop: 'destroy',
+    type: 'func',
+    default: '() => {}',
+    description: 'Destroy the instance - remove all listeners',
+  },
+  {
+    prop: 'update',
+    type: 'func',
+    default: '() => {}',
+    description: 'Updates the instance',
+  },
+  {
+    prop: "toggleTab(el: element, state: 'on'/'off')",
+    type: 'func',
+    default: '() => {}',
+    description: 'toggle a tab on or off',
+  },
+  {
+    prop: "toggleTabPanel(el: element, state: 'on'/'off')",
+    type: 'func',
+    default: '() => {}',
+    description: 'toggle a tabpanel on or off',
+  },
+  {
+    prop: 'activateNthTab(index: integer)',
+    type: 'func',
+    default: '() => {}',
+    description: 'activates nth (zero based index) tab and tabpanel',
+  },
+];
+
+<DocsTable data={methods} />
+
+## Props
+
+<ComponentDocs title="<Tabs />" component={Tabs} />
+
+<ComponentDocs
+  title="<TabPanel />"
+  component={TabPanel}
+  excludes={['isActive']}
+/>
+
+## Accessibility
+
+Tabs are implemented according to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel) - [Example 2 Tabs with manual activation](https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html)
+
+Notes:
+
+- Optional keyboard interaction (Home, End, Shift + 10, Delete) is not implemented.
+- Tabpanel elements lack aria-labelledby attributes due to a bug in VoiceOver, which reads the label instead of the content of the tabpanel.

package/src/components/Tabs/Tabs.static.ts

@@ -0,0 +1,185 @@
+import { RovingTabindex } from "../../utils/keyboard";
+
+interface TabsConfig {
+  tabSelector: string;
+}
+
+export const defaultConfig: TabsConfig = {
+  tabSelector: '[role="tab"]',
+};
+
+export const configDocs = {
+  tabSelector: "Tab element selector",
+};
+
+export default class Tabs {
+  private element: HTMLElement;
+  private config: TabsConfig;
+  private tabs: HTMLElement[];
+  private tabPanels: (HTMLElement | null)[];
+  private activeTabIndex: number | null;
+  private rovingTabindex: RovingTabindex | null;
+
+  constructor(element: HTMLElement, config?: Partial<TabsConfig>) {
+    this.element = element;
+    this.config = { ...defaultConfig, ...config };
+
+    this.tabs = [];
+    this.tabPanels = [];
+    this.activeTabIndex = null;
+
+    this.rovingTabindex = null;
+
+    this.handleClick = this.handleClick.bind(this);
+    this.handleTabFocus = this.handleTabFocus.bind(this);
+
+    (this.element as any).ODS_Tabs = this;
+
+    this.init();
+
+    return this;
+  }
+
+  static getInstance(el: HTMLElement): Tabs | null {
+    return el && (el as any).ODS_Tabs ? (el as any).ODS_Tabs : null;
+  }
+
+  private init(): void {
+    this.tabs = Array.from(
+      this.element.querySelectorAll<HTMLElement>(this.config.tabSelector),
+    );
+
+    this.tabs.map((tab, index) => {
+      const controlId = tab.getAttribute("aria-controls");
+      this.tabPanels.push(
+        controlId ? document.getElementById(controlId) : null,
+      );
+      tab.addEventListener("click", this.handleClick);
+      tab.addEventListener("focus", this.handleTabFocus);
+
+      if (this.isSelected(tab)) {
+        this.activeTabIndex = index;
+      }
+
+      return tab;
+    });
+
+    if (!this.rovingTabindex) {
+      this.rovingTabindex = new RovingTabindex(this.tabs, {
+        direction: "any",
+      });
+    } else {
+      this.rovingTabindex.update(this.tabs);
+    }
+
+    if (this.activeTabIndex !== null) {
+      this.toggleTabPanel(this.tabPanels[this.activeTabIndex], "on");
+    } else if (this.tabs.length > 0) {
+      this.activateNthTab(0);
+    }
+  }
+
+  destroy(): void {
+    this.tabs.map((tab) => {
+      tab.removeEventListener("click", this.handleClick);
+      tab.removeEventListener("focus", this.handleTabFocus);
+      return tab;
+    });
+
+    this.tabs = [];
+    this.tabPanels = [];
+    if (this.rovingTabindex) {
+      this.rovingTabindex.destroy();
+    }
+    (this.element as any).ODS_Tabs = null;
+  }
+
+  update(): void {
+    this.destroy();
+    this.init();
+  }
+
+  private isActive = (el: HTMLElement | null): boolean =>
+    el ? !el.hasAttribute("hidden") : false;
+
+  private isSelected = (el: HTMLElement): boolean =>
+    el.getAttribute("aria-selected") === "true";
+
+  private handleClick(e: MouseEvent): void {
+    const clickedTab = e.currentTarget as HTMLElement;
+
+    if (clickedTab.hasAttribute("aria-disabled")) {
+      e.preventDefault();
+      return;
+    }
+
+    this.tabs.map((tab, i) => {
+      if (tab === clickedTab) {
+        this.activeTabIndex = i;
+        return this.toggleTab(tab, "on");
+      }
+      return this.toggleTab(tab, "off");
+    });
+
+    this.tabPanels.map((tabPanel) => {
+      if (
+        tabPanel &&
+        tabPanel.getAttribute("id") === clickedTab.getAttribute("aria-controls")
+      ) {
+        return this.toggleTabPanel(tabPanel, "on");
+      }
+      return this.toggleTabPanel(tabPanel, "off");
+    });
+  }
+
+  private toggleTab(el: HTMLElement, state: "on" | "off"): void {
+    const isActive = this.isSelected(el);
+
+    if (state === "on" && !isActive) {
+      el.setAttribute("aria-selected", "true");
+      el.setAttribute("tabindex", "0");
+    }
+
+    if (state === "off" && isActive) {
+      el.setAttribute("aria-selected", "false");
+      el.setAttribute("tabindex", "-1");
+    }
+  }
+
+  private toggleTabPanel(el: HTMLElement | null, state: "on" | "off"): void {
+    if (!el) return;
+
+    const isActive = this.isActive(el);
+
+    if (state === "on" && !isActive) {
+      el.removeAttribute("hidden");
+    }
+
+    if (state === "off" && isActive) {
+      el.setAttribute("hidden", "");
+    }
+  }
+
+  activateNthTab(index: number): void {
+    this.tabs.map((tab, i) => {
+      if (i === index) {
+        this.activeTabIndex = i;
+        return this.toggleTab(tab, "on");
+      }
+      return this.toggleTab(tab, "off");
+    });
+
+    this.tabPanels.map((tabPanel, i) => {
+      if (i === index) {
+        return this.toggleTabPanel(tabPanel, "on");
+      }
+      return this.toggleTabPanel(tabPanel, "off");
+    });
+  }
+
+  private handleTabFocus(): void {
+    if (this.rovingTabindex && !this.rovingTabindex.isActive) {
+      this.rovingTabindex.init();
+    }
+  }
+}