@ebay/ui-core-react 7.3.1 → 7.3.2

package/src/ebay-tabs/__tests__/index.stories.tsx

@@ -0,0 +1,301 @@
+import React, { useState } from 'react'
+import { action } from '@storybook/addon-actions'
+import { Meta, StoryFn } from '@storybook/react'
+
+import { EbayTabs, EbayTab as Tab, EbayTabPanel as Panel } from '../index'
+
+const story = {
+    component: EbayTabs,
+    title: 'navigation & disclosure/ebay-tabs'
+} as Meta
+
+export const DefaultTabs: StoryFn<typeof EbayTabs> = (args) => (
+    <>
+        <EbayTabs onTabSelect={action('tab selected')} onSelect={action('onSelect(props')} {...args}>
+            <Tab>Tab 1</Tab>
+            <Tab>Tab 2</Tab>
+            <Tab>Tab 3</Tab>
+            <Panel>
+                <h3>Panel 1</h3>
+                <p>
+                    Focus should go to <a href="#">this link</a> using `tab`-key immediately after the `Tab 1`
+                    (skipping `Tab 2` and `Tab 3`)
+                </p>
+            </Panel>
+            <Panel>
+                <h3>Panel 2</h3>
+                <p>
+                    Focus should go to <a href="#">this link</a> using `tab`-key immediately after the `Tab 2`
+                    (skipping `Tab 3` and `Tab 1`)
+                </p>
+            </Panel>
+            <Panel>
+                <h3>Panel 3</h3>
+                <p>
+                    Focus should go to <a href="#">this link</a> using `tab`-key immediately after the `Tab 3`
+                    (skipping `Tab 1` and `Tab 2`)
+                </p>
+            </Panel>
+        </EbayTabs>
+    </>
+)
+
+export const PreSelectedTab = {
+    render: () => (
+        <>
+            <EbayTabs index={2}>
+                <Tab>Tab 1</Tab>
+                <Tab>Tab 2</Tab>
+                <Tab>Tab 3</Tab>
+                <Panel>
+                    <h3>Panel 1</h3>
+                    <p>
+                        Focus should go to <a href="#">this link</a> using `tab`-key immediately after the `Tab
+                        1` (skipping `Tab 2` and `Tab 3`)
+                    </p>
+                </Panel>
+                <Panel>
+                    <h3>Panel 2</h3>
+                    <p>
+                        Focus should go to <a href="#">this link</a> using `tab`-key immediately after the `Tab
+                        2` (skipping `Tab 3` and `Tab 1`)
+                    </p>
+                </Panel>
+                <Panel>
+                    <h3>Panel 3</h3>
+                    <p>
+                        Focus should go to <a href="#">this link</a> using `tab`-key immediately after the `Tab
+                        3` (skipping `Tab 1` and `Tab 2`)
+                    </p>
+                </Panel>
+            </EbayTabs>
+        </>
+    ),
+
+    name: 'Pre-selected Tab'
+}
+
+export const ProgrammaticallySelectedTabs = {
+    render: () => {
+        const Component = () => {
+            const [selectedTab, selectTab] = useState(0)
+
+            return (
+                <>
+                    {[0, 1, 2].map((i) => (
+                        <button key={i} onClick={() => selectTab(i)}>
+                            Select Tab {i + 1}
+                        </button>
+                    ))}
+                    <EbayTabs index={selectedTab}>
+                        <Tab>Tab 1</Tab>
+                        <Tab>Tab 2</Tab>
+                        <Tab>Tab 3</Tab>
+                        <Panel>
+                            <h3>Panel 1</h3>
+                        </Panel>
+                        <Panel>
+                            <h3>Panel 2</h3>
+                        </Panel>
+                        <Panel>
+                            <h3>Panel 3</h3>
+                        </Panel>
+                    </EbayTabs>
+                </>
+            )
+        }
+
+        return (
+            <>
+                <Component />
+            </>
+        )
+    },
+
+    name: 'Programmatically selected Tabs'
+}
+
+export const ManuallyActivatedTabs = (args) => (
+    <>
+        <EbayTabs activation="manual" {...args}>
+            <Tab>Tab 1</Tab>
+            <Tab>Tab 2</Tab>
+            <Tab>Tab 3</Tab>
+            <Panel>
+                <h3>Panel 1</h3>
+                <p>These tabs are activated manually on Space/Enter key press</p>
+                <p>
+                    Focus should go to <a href="#">this link</a> using `tab`-key immediately after the `Tab
+                    1` (skipping `Tab 2` and `Tab 3`)
+                </p>
+            </Panel>
+            <Panel>
+                <h3>Panel 2</h3>
+                <p>These tabs are activated manually on Space/Enter key press</p>
+                <p>
+                    Focus should go to <a href="#">this link</a> using `tab`-key immediately after the `Tab
+                    2` (skipping `Tab 3` and `Tab 1`)
+                </p>
+            </Panel>
+            <Panel>
+                <p>These tabs are activated manually on Space/Enter key press</p>
+                <h3>Panel 3</h3>
+                <p>
+                    Focus should go to <a href="#">this link</a> using `tab`-key immediately after the `Tab
+                    3` (skipping `Tab 1` and `Tab 2`)
+                </p>
+            </Panel>
+        </EbayTabs>
+    </>
+)
+
+export const LargeTabs = () => (
+    <>
+        <EbayTabs size="large">
+            <Tab>Large Tab 1</Tab>
+            <Tab>Large Tab 2</Tab>
+            <Tab>Large Tab 3</Tab>
+            <Panel>
+                <h3>Panel 1</h3>
+                <p>
+                    Focus should go to <a href="#">this link</a> using `tab`-key immediately after the `Tab 1`
+                    (skipping `Tab 2` and `Tab 3`)
+                </p>
+            </Panel>
+            <Panel>
+                <h3>Panel 2</h3>
+                <p>
+                    Focus should go to <a href="#">this link</a> using `tab`-key immediately after the `Tab 2`
+                    (skipping `Tab 3` and `Tab 1`)
+                </p>
+            </Panel>
+            <Panel>
+                <h3>Panel 3</h3>
+                <p>
+                    Focus should go to <a href="#">this link</a> using `tab`-key immediately after the `Tab 3`
+                    (skipping `Tab 1` and `Tab 2`)
+                </p>
+            </Panel>
+        </EbayTabs>
+    </>
+)
+
+export const MultipleTabs = () => (
+    <>
+        <div>
+            <EbayTabs id="tab-upper">
+                <Tab>Tab 1</Tab>
+                <Tab>Tab 2</Tab>
+                <Panel>
+                    <h3>Panel 1</h3>
+                    <p>
+                        Panel 1 content. Here is a <a href="#">link</a>.
+                    </p>
+                </Panel>
+                <Panel>
+                    <h3>Panel 2</h3>
+                    <p>
+                        Panel 2 content. Here is a <a href="#">link</a>.
+                    </p>
+                </Panel>
+            </EbayTabs>
+        </div>
+        <div style={{ marginTop: '64px' }}>
+            <EbayTabs id="tab-lower">
+                <Tab>Tab A</Tab>
+                <Tab>Tab B</Tab>
+                <Tab>Tab C</Tab>
+                <Panel>
+                    <h3>Panel A</h3>
+                    <p>
+                        Panel A content. Here is a <a href="#">link</a>.
+                    </p>
+                </Panel>
+                <Panel>
+                    <h3>Panel B</h3>
+                    <p>
+                        Panel B content. Here is a <a href="#">link</a>.
+                    </p>
+                </Panel>
+                <Panel>
+                    <h3>Panel C</h3>
+                    <p>
+                        Panel C content. Here is a <a href="#">link</a>.
+                    </p>
+                </Panel>
+            </EbayTabs>
+        </div>
+    </>
+)
+
+export const TabsWithInputs = {
+    render: () => {
+        const Component = () => {
+            const [name, setName] = useState('John Doe')
+
+            return (
+                <EbayTabs>
+                    <Tab>Tab 1</Tab>
+                    <Tab>Tab 2</Tab>
+                    <Tab>Tab 3</Tab>
+                    <Panel>
+                        <label htmlFor="name">Name </label>
+                        <input
+                            id="name"
+                            onChange={(e) => setName(e.target.value)}
+                            type="text"
+                            placeholder="john doe"
+                            value={name}
+                        />
+                        <p>My name is {name}</p>
+                    </Panel>
+                    <Panel>
+                        <h3>Panel 2</h3>
+                    </Panel>
+                    <Panel>
+                        <h3>Panel 3</h3>
+                    </Panel>
+                </EbayTabs>
+            )
+        }
+
+        return (
+            <>
+                <Component />
+            </>
+        )
+    },
+
+    name: 'Tabs with inputs'
+}
+
+export const BottomTabsOnLongPage = {
+    render: () => (
+        <>
+            <p style={{ margin: '10em 0' }}>Scroll down for more content...</p>
+            <p style={{ margin: '10em 0' }}>Scroll down for more content...</p>
+            <p style={{ margin: '10em 0' }}>Scroll down for more content...</p>
+            <p style={{ margin: '10em 0' }}>Scroll down for more content...</p>
+            <p style={{ margin: '10em 0' }}>Scroll down for more content...</p>
+            <p style={{ margin: '10em 0' }}>Scroll down for more content...</p>
+            <p style={{ margin: '10em 0' }}>Scroll down for more content...</p>
+            <p style={{ margin: '10em 0' }}>Scroll down for more content...</p>
+            <EbayTabs>
+                <Tab>Tab 1</Tab>
+                <Tab>Tab 2</Tab>
+                <Panel>
+                    <h3>Panel 1</h3>
+                    <p>Panel 1 content.</p>
+                </Panel>
+                <Panel>
+                    <h3>Panel 2</h3>
+                    <p>Panel 2 content.</p>
+                </Panel>
+            </EbayTabs>
+        </>
+    ),
+
+    name: 'Bottom Tabs on Long Page'
+}
+
+export default story

package/src/ebay-tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as EbayTabs } from './tabs'
+export { default as EbayTab } from './tab'
+export { default as EbayTabPanel } from './tab-panel'
+export type { Activation, Size, TabsProps, OnSelectProps } from './types'

package/src/ebay-tabs/tab-panel.tsx

@@ -0,0 +1,32 @@
+import React, { ComponentProps, FC } from 'react'
+import classNames from 'classnames'
+
+type TabPanelProps = ComponentProps<'div'> & {
+    index?: number;
+    parentId?: string;
+    selected?: boolean;
+}
+
+const TabPanel: FC<TabPanelProps> = ({
+    children,
+    index,
+    parentId,
+    selected,
+    className,
+    ...rest
+}) => (
+    <div
+        {...rest}
+        aria-labelledby={`default-tab-${index}`}
+        className={classNames(className, 'tabs__panel')}
+        id={`${parentId || 'default'}-tabpanel-${index}`}
+        role="tabpanel"
+        hidden={!selected}
+    >
+        <div className="tabs__cell">
+            {children}
+        </div>
+    </div>
+)
+
+export default TabPanel

package/src/ebay-tabs/tab.tsx

@@ -0,0 +1,38 @@
+import React, { ComponentProps, FC, RefCallback } from 'react'
+import classNames from 'classnames'
+
+type TabProps = ComponentProps<'div'> & {
+    index?: number;
+    parentId?: string;
+    selected?: boolean;
+    focused?: boolean;
+    refCallback?: RefCallback<HTMLElement>;
+}
+
+const Tab: FC<TabProps> = ({
+    children,
+    index,
+    parentId,
+    selected,
+    focused,
+    className,
+    refCallback,
+    ...rest
+}) => (
+    <div
+        {...rest}
+        ref={refCallback}
+        aria-controls={`${parentId || 'default'}-tabpanel-${index}`}
+        aria-selected={selected}
+        className={classNames(className, 'tabs__item')}
+        id={`${parentId || 'default'}-tab-${index}`}
+        role="tab"
+        tabIndex={focused ? 0 : -1}
+    >
+        <span>
+            {children}
+        </span>
+    </div>
+)
+
+export default Tab

package/src/ebay-tabs/tabs.tsx

@@ -0,0 +1,104 @@
+import React, { cloneElement, FC, KeyboardEvent, useEffect, useState } from 'react'
+import classNames from 'classnames'
+
+import { handleActionKeydown, handleLeftRightArrowsKeydown } from '../common/event-utils'
+import { filterByType } from '../common/component-utils'
+import Tab from './tab'
+import TabPanel from './tab-panel'
+import type { TabsProps } from './types'
+
+const Tabs: FC<TabsProps> = ({
+    id,
+    className,
+    index = 0,
+    size = 'medium',
+    activation = 'auto',
+    onSelect = () => {},
+    onTabSelect = () => {},
+    children
+}) => {
+    const headings: HTMLElement[] = []
+
+    const [selectedIndex, setSelectedIndex] = useState<number>(index)
+    const [focusedIndex, setFocusedIndex] = useState<number>(index)
+
+    const handleSelect = (i: number): void => {
+        onSelect({ selectedIndex: i })
+        onTabSelect(i)
+        setSelectedIndex(i)
+    }
+
+    /**
+     * Handle a11y for heading
+     * https://ebay.gitbooks.io/mindpatterns/content/disclosure/tabs.html
+     */
+    const onKeyDown = (ev: KeyboardEvent, i: number): void => {
+        handleActionKeydown(ev, () => {
+            ev.preventDefault()
+
+            if (activation === 'manual') {
+                handleSelect(i)
+            }
+        })
+
+        handleLeftRightArrowsKeydown(ev, () => {
+            ev.preventDefault()
+
+            const len = filterByType(children, Tab).length
+            const direction = ['Left', 'ArrowLeft'].includes(ev.key) ? -1 : 1
+            const currentIndex = focusedIndex === undefined ? selectedIndex : focusedIndex
+            const nextIndex = (currentIndex + len + direction) % len
+            setFocusedIndex(nextIndex)
+            headings[nextIndex]?.focus()
+
+            if (activation !== 'manual') {
+                handleSelect(nextIndex)
+            }
+        })
+    }
+
+    useEffect(() => {
+        handleSelect(index)
+    }, [index])
+
+    const isLarge = size === 'large'
+
+    const tabHeadings = filterByType(children, Tab).map((item, i) =>
+        cloneElement(item, {
+            ...item.props,
+            refCallback: ref => { headings[i] = ref },
+            index: i,
+            parentId: id,
+            selected: selectedIndex === i,
+            focused: focusedIndex === i,
+            onClick: () => {
+                handleSelect(i)
+                setFocusedIndex(i)
+            },
+            onKeyDown: e => { onKeyDown(e, i) }
+        }))
+
+    const tabPanels = filterByType(children, TabPanel).map((item, i) => {
+        const itemProps = {
+            index: i,
+            parentId: id,
+            selected: selectedIndex === i,
+            children: item.props.children
+        }
+
+        return cloneElement(item, itemProps)
+    })
+
+    return (
+        <div id={id} className={classNames(className, 'tabs')}>
+            <div className={classNames('tabs__items', { 'tabs__items--large': isLarge })} role="tablist">
+                {tabHeadings}
+            </div>
+            <div className="tabs__content">
+                {tabPanels}
+            </div>
+        </div>
+    )
+}
+
+export default Tabs

package/src/ebay-tabs/types.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from 'react'
+
+export type Activation = 'auto' | 'manual'
+export type Size = 'medium' | 'large'
+
+export type OnSelectProps = {
+  selectedIndex: number;
+}
+
+export type TabsProps = ComponentProps<'div'> & {
+  index?: number;
+  size?: Size;
+  activation?: Activation;
+  onSelect?: (props: OnSelectProps) => void;
+  /**
+   * @deprecated Use onSelect instead
+   */
+  onTabSelect?: (index: number) => void;
+}

package/src/ebay-textbox/__tests__/__snapshots__/render.spec.tsx.snap

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ebay-textbox rendering renders with icon story correctly 1`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--16"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-mail-16"
+  />
+</svg>
+`;
+
+exports[`ebay-textbox rendering renders with pre/post fix text correctly 1`] = `
+<div>
+  <div>
+    <p>
+      <span
+        class="textbox"
+      >
+        <span
+          id="prefix"
+        >
+          $
+        </span>
+        <input
+          aria-describedby="prefix"
+          class="textbox__control"
+          placeholder="0.00"
+          type="text"
+          value=""
+        />
+      </span>
+    </p>
+    <p>
+      <span
+        class="textbox"
+      >
+        <input
+          aria-describedby="postfix"
+          class="textbox__control"
+          placeholder="0"
+          type="text"
+          value=""
+        />
+        <span
+          id="postfix"
+        >
+          in.
+        </span>
+      </span>
+    </p>
+  </div>
+</div>
+`;