@ebay/ui-core-react 7.3.2 → 7.3.3

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

@@ -1,301 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,57 +0,0 @@
-// 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>
-`;