@ebay/ui-core-react 7.3.2 → 7.3.3

package/src/ebay-drawer-dialog/__tests__/index.stories.tsx

@@ -1,244 +0,0 @@
-import React, { createRef, useState } from 'react'
-import { EbayButton } from '../../ebay-button'
-import { action } from '@storybook/addon-actions'
-import { EbayDialogFooter, EbayDialogHeader } from '../../ebay-dialog-base'
-import { EbayDrawerDialog } from '../index'
-import { StoryFn, Meta } from '@storybook/react'
-
-const story: Meta<typeof EbayDrawerDialog> = {
-    component: EbayDrawerDialog,
-    title: 'dialogs/ebay-drawer-dialog'
-}
-
-const numbers = Array(100)
-    .fill(1)
-    .map((x, i) => <p key={i}>{i + 1}</p>)
-
-export const _Default: StoryFn<typeof EbayDrawerDialog> = () => {
-    const [open, setOpen] = useState(false)
-
-    return (
-        <>
-            <EbayButton onClick={() => setOpen(!open)}>Open Drawer</EbayButton>
-            <EbayDrawerDialog
-                open={open}
-                onShow={action('onShow')}
-                onOpen={action('onOpen')}
-                onClose={() => {
-                    action('onClose')()
-                    setOpen(false)
-                }}
-                onExpanded={action('onExpanded')}
-                onCollapsed={action('onCollapsed')}
-                a11yCloseText="Close"
-                a11yMaximizeText="Maximize"
-                a11yMinimizeText="Minimize"
-            >
-                <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. 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>
-                <p>
-                    <a href="http://www.ebay.com">www.ebay.com</a>
-                </p>
-            </EbayDrawerDialog>
-        </>
-    )
-}
-
-export const _Opened: StoryFn<typeof EbayDrawerDialog> = () => (
-    <>
-        <EbayDrawerDialog
-            open
-            onClose={action('Close button clicked.')}
-            a11yCloseText="Close drawer"
-            a11yMaximizeText="Maximize"
-            a11yMinimizeText="Minimize"
-        >
-            <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. 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>
-            <p>
-                <a href="http://www.ebay.com">www.ebay.com</a>
-            </p>
-        </EbayDrawerDialog>
-    </>
-)
-
-export const _WithoutHandle: StoryFn<typeof EbayDrawerDialog> = () => {
-    const [open, setOpen] = useState(false)
-
-    return (
-        <>
-            <EbayButton onClick={() => setOpen(!open)}>Open Drawer</EbayButton>
-            <EbayDrawerDialog
-                noHandle
-                open={open}
-                onClose={() => setOpen(false)}
-                a11yMaximizeText="Maximize"
-                a11yMinimizeText="Minimize"
-                a11yCloseText="Close"
-            >
-                <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. 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>
-                <p>
-                    <a href="http://www.ebay.com">www.ebay.com</a>
-                </p>
-            </EbayDrawerDialog>
-        </>
-    )
-}
-
-export const _WithoutHandleAndCloseButton: StoryFn<typeof EbayDrawerDialog> = () => {
-    const [open, setOpen] = useState(false)
-
-    return (
-        <>
-            <EbayButton onClick={() => setOpen(!open)}>Open Drawer</EbayButton>
-            <EbayDrawerDialog noHandle buttonPosition="hidden" open={open} onClose={() => setOpen(false)}>
-                <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. 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>
-                <p>
-                    <a href="http://www.ebay.com">www.ebay.com</a>
-                </p>
-            </EbayDrawerDialog>
-        </>
-    )
-}
-
-export const _LotsOfContent: StoryFn<typeof EbayDrawerDialog> = () => {
-    const [open, setOpen] = useState(false)
-
-    return (
-        <>
-            <EbayButton onClick={() => setOpen(!open)}>Open Drawer</EbayButton>
-            {numbers}
-            <EbayDrawerDialog
-                open={open}
-                onClose={() => setOpen(false)}
-                a11yMaximizeText="Maximize"
-                a11yMinimizeText="Minimize"
-                a11yCloseText="Close"
-            >
-                <EbayDialogHeader>Scrollable content</EbayDialogHeader>
-                {numbers}
-                <EbayDialogFooter>
-                    <EbayButton onClick={() => setOpen(false)}>Close</EbayButton>
-                </EbayDialogFooter>
-            </EbayDrawerDialog>
-        </>
-    )
-}
-
-export const _CustomFocus: StoryFn<typeof EbayDrawerDialog> = () => {
-    const [open, setOpen] = useState(false)
-    const focusRef = createRef() as any
-
-    return (
-        <>
-            <EbayButton onClick={() => setOpen(!open)}>Open Drawer</EbayButton>
-            <EbayDrawerDialog
-                open={open}
-                focus={focusRef}
-                onClose={() => setOpen(false)}
-                a11yMaximizeText="Maximize"
-                a11yMinimizeText="Minimize"
-                a11yCloseText="Close"
-            >
-                <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. 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>
-                <p>
-                    <a href="http://www.ebay.com">www.ebay.com</a>
-                </p>
-                <EbayDialogFooter>
-                    <EbayButton ref={focusRef} onClick={() => setOpen(false)}>
-                        Close
-                    </EbayButton>
-                </EbayDialogFooter>
-            </EbayDrawerDialog>
-        </>
-    )
-}
-
-export const _WithoutAnimation: StoryFn<typeof EbayDrawerDialog> = () => {
-    const [open, setOpen] = useState(false)
-
-    return (
-        <>
-            <EbayButton onClick={() => setOpen(!open)}>Open Drawer</EbayButton>
-            <EbayDrawerDialog
-                open={open}
-                onClose={() => setOpen(false)}
-                animated={false}
-                a11yMaximizeText="Maximize"
-                a11yMinimizeText="Minimize"
-                a11yCloseText="Close"
-            >
-                <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. 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>
-                <p>
-                    <a href="http://www.ebay.com">www.ebay.com</a>
-                </p>
-            </EbayDrawerDialog>
-        </>
-    )
-}
-
-export const _TriggerExpanded: StoryFn<typeof EbayDrawerDialog> = () => {
-    const [open, setOpen] = useState(false)
-    const [expanded, setExpanded] = useState(false)
-
-    return (
-        <>
-            <EbayButton onClick={() => setOpen(!open)}>Open Drawer</EbayButton>
-            <EbayDrawerDialog
-                open={open}
-                onClose={() => setOpen(false)}
-                expanded={expanded}
-                a11yMaximizeText="Maximize"
-                a11yMinimizeText="Minimize"
-                a11yCloseText="Close"
-            >
-                <p>Trigger Dialog Expanded programmatically.</p>
-
-                <EbayButton onClick={() => setExpanded(!expanded)} priority="secondary">
-                    {expanded ? 'Collapse Drawer' : 'Expand Drawer'}
-                </EbayButton>
-            </EbayDrawerDialog>
-        </>
-    )
-}
-
-export default story

package/src/ebay-drawer-dialog/components/drawer.tsx

@@ -1,120 +0,0 @@
-import React, { Children, FC, ReactElement, RefObject, Touch, TouchEvent, useEffect, useState } from 'react'
-import classNames from 'classnames'
-import { DialogBaseProps, DialogBaseWithState, EbayDialogHeader } from '../../ebay-dialog-base'
-
-const THRESHOLD_TOUCH = 30
-const classPrefix = 'drawer-dialog'
-
-export interface EbayDrawerProps<T> extends DialogBaseProps<T> {
-    expanded?: boolean;
-    open?: boolean;
-    noHandle?: boolean;
-    focus?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
-    a11yMinimizeText?: string;
-    a11yMaximizeText?: string;
-    /**
-     * @deprecated Use onOpen instead
-     */
-    onShow?: () => void;
-    onClose?: () => void;
-    onExpanded?: () => void;
-    onCollapsed?: () => void;
-}
-
-const EbayDrawerDialog: FC<EbayDrawerProps<any>> = ({
-    expanded: controlledExpanded = false,
-    noHandle,
-    onClose = () => {},
-    onCollapsed = () => {},
-    onExpanded = () => {},
-    a11yMaximizeText,
-    a11yMinimizeText,
-    children,
-    ...rest
-}) => {
-    let touches: Partial<Touch>[] = []
-    const [expanded, setExpanded] = useState(controlledExpanded)
-
-    useEffect(() => {
-        setExpanded(controlledExpanded)
-    }, [controlledExpanded])
-
-    const setExpandedState = (expand: boolean) => {
-        setExpanded(expand)
-        if (expand) {
-            onExpanded()
-        } else {
-            onCollapsed()
-        }
-    }
-
-    const handleTouchStart = (e: TouchEvent) => {
-        touches = Array.from(e.changedTouches).map(({ identifier, pageY }) => ({ identifier, pageY }))
-    }
-
-    const handleTouchEnd = (e: TouchEvent) => {
-        Array.from(e.changedTouches).forEach(({ identifier }) => {
-            const idx = touches.findIndex((touch) => touch.identifier === identifier)
-            if (idx > -1) {
-                touches.splice(idx, 1)
-            }
-        })
-    }
-
-    const handleTouchMove = (e: TouchEvent) => {
-        if (touches.length) {
-            Array.from(e.changedTouches).forEach(({ identifier, pageY }) => {
-                const compare = touches.findIndex(touch => touch.identifier === identifier)
-                const diff = pageY - touches[compare].pageY
-                if (diff > THRESHOLD_TOUCH) {
-                    // Drag down, collpase
-                    if (expanded) {
-                        setExpandedState(false)
-                    } else {
-                        onClose()
-                    }
-                    handleTouchEnd(e)
-                } else if (diff < -THRESHOLD_TOUCH) {
-                    setExpandedState(true)
-                    handleTouchEnd(e)
-                }
-            })
-        }
-    }
-
-    const handle = noHandle ? null : (
-        <button
-            aria-label={expanded ? a11yMinimizeText : a11yMaximizeText}
-            className={`${classPrefix}__handle`}
-            onClick={() => setExpandedState(!expanded)}
-            onScroll={() => setExpandedState(true)}
-            onTouchStart={handleTouchStart}
-            onTouchMove={handleTouchMove}
-            onTouchEnd={handleTouchEnd}
-            type="button"
-        />
-    )
-
-    const childrenArray = Children.toArray(children) as ReactElement[]
-    const header = childrenArray.find(({ type }) => type === EbayDialogHeader)
-    const withoutHeader = childrenArray.filter(({ type }) => type !== EbayDialogHeader)
-
-    return (
-        <DialogBaseWithState
-            {...rest}
-            classPrefix={classPrefix}
-            onCloseBtnClick={onClose}
-            className={classNames(rest.className, `${classPrefix}--mask-fade-slow`)}
-            windowClass={classNames(rest.windowClass, `${classPrefix}__window`, `${classPrefix}__window--slide`, {
-                [`${classPrefix}__window--expanded`]: expanded
-            })}
-            onBackgroundClick={onClose}
-            top={handle}
-        >
-            {header || <EbayDialogHeader />}
-            {withoutHeader}
-        </DialogBaseWithState>
-    )
-}
-
-export default EbayDrawerDialog

package/src/ebay-drawer-dialog/index.ts

@@ -1 +0,0 @@
-export { default as EbayDrawerDialog } from './components/drawer'

package/src/ebay-eek/__tests__/index.spec.tsx

@@ -1,81 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { EbayEek } from '../index'
-
-let wrapper
-async function ratingCheck(max, min, rating, number) {
-    const eekClass = number ? `eek--rating-${number}` : 'eek'
-
-    wrapper = render(<EbayEek max={max} min={min} rating={rating} />)
-
-    wrapper.getAllByRole('figure').forEach(figure => {
-        expect(figure).toHaveClass(eekClass)
-    })
-}
-
-describe('<EbayEek>', () => {
-    it('renders default eek', async () => {
-        const input = {
-            max: 'A+++',
-            min: 'D',
-            rating: 'B'
-        }
-        wrapper = render(<EbayEek {...input} />)
-
-        expect(wrapper.getByText('A+++')).toHaveProperty('nextElementSibling')
-        expect(wrapper.getByText('D')).toHaveProperty('previousElementSibling')
-        expect(wrapper.getByText('B')).toHaveClass('eek__rating')
-        expect(wrapper.getByRole('figure')).toHaveClass('eek--rating-5')
-    })
-
-    it('renders invalid eek', async () => {
-        const input = {
-            max: 'A',
-            min: 'D',
-            rating: 'B'
-        }
-        wrapper = render(<EbayEek {...input} />)
-
-        expect(wrapper.getByText('A')).toHaveProperty('nextElementSibling')
-        expect(wrapper.getByText('D')).toHaveProperty('previousElementSibling')
-        expect(wrapper.getByText('B')).toHaveClass('eek__rating')
-        expect(wrapper.getByRole('figure')).toHaveClass('eek')
-    })
-
-    it('renders the correct eek if rating is outside', async () => {
-        await ratingCheck('A+', 'D', 'A++', '')
-    })
-
-    it('renders rating 1', async () => {
-        await ratingCheck('A++', 'E', 'A++', '1')
-    })
-
-    it('renders rating 2', async () => {
-        await ratingCheck('A++', 'E', 'A+', '2')
-    })
-
-    it('renders rating 3', async () => {
-        await ratingCheck('A++', 'E', 'A', '3')
-    })
-
-    it('renders rating 4', async () => {
-        await ratingCheck('A++', 'E', 'B', '4')
-    })
-
-    it('renders rating 5', async () => {
-        await ratingCheck('A++', 'E', 'C', '5')
-    })
-
-    it('renders rating 6', async () => {
-        await ratingCheck('A++', 'E', 'D', '6')
-    })
-
-    it('renders rating 7', async () => {
-        await ratingCheck('A++', 'E', 'E', '7')
-    })
-
-    it('renders rating 7 (not 8)', async () => {
-        await ratingCheck('A++', 'G', 'F', '7')
-        await ratingCheck('A++', 'G', 'G', '7')
-    })
-})

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

@@ -1,102 +0,0 @@
-import React from 'react'
-import { EbayEek, EbayEekProps } from '../index'
-import { StoryObj, StoryFn, Meta } from '@storybook/react'
-
-const meta: Meta<typeof EbayEek> = {
-    component: EbayEek,
-    title: 'graphics & icons/ebay-eek'
-}
-
-export default meta
-
-export const RegularA: StoryFn<EbayEekProps> = () => (
-    <>
-        <div>
-            <EbayEek max="A" min="G" rating="A" />
-            <EbayEek max="A" min="G" rating="B" />
-            <EbayEek max="A" min="G" rating="C" />
-            <EbayEek max="A" min="G" rating="D" />
-            <EbayEek max="A" min="G" rating="E" />
-            <EbayEek max="A" min="G" rating="F" />
-            <EbayEek max="A" min="G" rating="G" />
-        </div>
-    </>
-)
-
-export const A: StoryObj<EbayEekProps> = {
-    render: () => (
-        <>
-            <div>
-                <EbayEek max="A++" min="E" rating="A++" />
-                <EbayEek max="A++" min="E" rating="A+" />
-                <EbayEek max="A++" min="E" rating="A" />
-                <EbayEek max="A++" min="E" rating="B" />
-                <EbayEek max="A++" min="E" rating="C" />
-                <EbayEek max="A++" min="E" rating="D" />
-                <EbayEek max="A++" min="E" rating="E" />
-            </div>
-            <div>
-                <EbayEek max="A++" min="G" rating="A++" />
-                <EbayEek max="A++" min="G" rating="A+" />
-                <EbayEek max="A++" min="G" rating="A" />
-                <EbayEek max="A++" min="G" rating="B" />
-                <EbayEek max="A++" min="G" rating="C" />
-                <EbayEek max="A++" min="G" rating="D" />
-                <EbayEek max="A++" min="G" rating="E" />
-                <EbayEek max="A++" min="G" rating="F" />
-                <EbayEek max="A++" min="G" rating="G" />
-            </div>
-        </>
-    ),
-
-    name: 'A++'
-}
-
-export const ValidA: StoryObj<EbayEekProps> = {
-    render: () => (
-        <>
-            <div>
-                <EbayEek max="A+++" min="D" rating="A+++" />
-                <EbayEek max="A+++" min="D" rating="A++" />
-                <EbayEek max="A+++" min="D" rating="A+" />
-                <EbayEek max="A+++" min="D" rating="A" />
-                <EbayEek max="A+++" min="D" rating="B" />
-                <EbayEek max="A+++" min="D" rating="C" />
-                <EbayEek max="A+++" min="D" rating="D" />
-            </div>
-            <div>
-                <EbayEek max="A+++" min="E" rating="A+++" />
-                <EbayEek max="A+++" min="E" rating="A++" />
-                <EbayEek max="A+++" min="E" rating="A+" />
-                <EbayEek max="A+++" min="E" rating="A" />
-                <EbayEek max="A+++" min="E" rating="B" />
-                <EbayEek max="A+++" min="E" rating="C" />
-                <EbayEek max="A+++" min="E" rating="D" />
-                <EbayEek max="A+++" min="E" rating="E" />
-            </div>
-            <div>
-                <EbayEek max="A+++" min="G" rating="A+++" />
-                <EbayEek max="A+++" min="G" rating="A++" />
-                <EbayEek max="A+++" min="G" rating="A+" />
-                <EbayEek max="A+++" min="G" rating="A" />
-                <EbayEek max="A+++" min="G" rating="B" />
-                <EbayEek max="A+++" min="G" rating="C" />
-                <EbayEek max="A+++" min="G" rating="D" />
-                <EbayEek max="A+++" min="G" rating="E" />
-                <EbayEek max="A+++" min="G" rating="F" />
-                <EbayEek max="A+++" min="G" rating="G" />
-            </div>
-        </>
-    ),
-
-    name: 'Valid A+++'
-}
-
-export const InvalidCombinations: StoryFn<EbayEekProps> = () => (
-    <>
-        <EbayEek max="B" min="G" rating="D" />
-        <EbayEek max="A" min="G" rating="A+++" />
-        <EbayEek max="A++" min="B" rating="A++" />
-        <EbayEek max="A+" min="B" rating="A++" />
-    </>
-)

package/src/ebay-eek/__tests__/render.spec.tsx

@@ -1,49 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { composeStory } from '@storybook/react'
-import Meta, { RegularA, A, ValidA } from './index.stories'
-
-const RegularAStory = composeStory(RegularA, Meta)
-const AStory = composeStory(A, Meta)
-const ValidAStory = composeStory(ValidA, Meta)
-
-describe('EbayEek rendering', () => {
-    it('RegularA story', () => {
-        const { container } = render(<RegularAStory />)
-        const eek = container.querySelector('.eek')
-        const eekContainer = eek.querySelector('.eek__container')
-        const eekRating = eekContainer.querySelector('.eek__rating')
-        const eekRatingRange = eekContainer.querySelector('.eek__rating-range')
-
-        expect(eek).toHaveClass('eek--rating-1')
-        expect(eek).toHaveAttribute('aria-label', 'Energy Rating: A. Range: A - G.')
-        expect(eekRating.textContent).toBe('A')
-        expect(eekRatingRange.textContent).toBe('AG')
-    })
-
-    it('A story', () => {
-        const { container } = render(<AStory />)
-        const eek = container.querySelector('.eek')
-        const eekContainer = eek.querySelector('.eek__container')
-        const eekRating = eekContainer.querySelector('.eek__rating')
-        const eekRatingRange = eekContainer.querySelector('.eek__rating-range')
-
-        expect(eek).toHaveClass('eek--rating-1')
-        expect(eek).toHaveAttribute('aria-label', 'Energy Rating: A++. Range: A++ - E.')
-        expect(eekRating.textContent).toBe('A++')
-        expect(eekRatingRange.textContent).toBe('A++E')
-    })
-
-    it('ValidA story', () => {
-        const { container } = render(<ValidAStory />)
-        const eek = container.querySelector('.eek')
-        const eekContainer = eek.querySelector('.eek__container')
-        const eekRating = eekContainer.querySelector('.eek__rating')
-        const eekRatingRange = eekContainer.querySelector('.eek__rating-range')
-
-        expect(eek).toHaveClass('eek--rating-1')
-        expect(eek).toHaveAttribute('aria-label', 'Energy Rating: A+++. Range: A+++ - D.')
-        expect(eekRating.textContent).toBe('A+++')
-        expect(eekRatingRange.textContent).toBe('A+++D')
-    })
-})

package/src/ebay-eek/eek-rating.tsx

@@ -1,46 +0,0 @@
-import React, { FC } from 'react'
-import classNames from 'classnames'
-import eekUtil from './eek-util'
-import { EbayIcon } from '../ebay-icon'
-
-
-export type EbayEekProps = {
-    rating: string;
-    max: string;
-    min: string;
-    a11yText?: string;
-    className?: string;
-}
-
-const EbayEek: FC<EbayEekProps> = ({
-    min = '',
-    max = '',
-    rating,
-    a11yText,
-    className: extraClasses
-}) => {
-    const parsedRating = eekUtil({ rating, min, max })
-    const className = classNames(extraClasses, 'eek',
-        { [`eek--rating-${parsedRating}`]: !!parsedRating }
-    )
-    const backupA11yText = `Energy Rating: ${rating}. Range: ${max} - ${min}.`
-    return (
-        <div
-            className={className}
-            role="figure"
-            aria-label={a11yText || backupA11yText} >
-            <div className="eek__container" aria-hidden>
-                <span className="eek__rating-range">
-                    <span aria-hidden="true">{max}</span>
-                    <EbayIcon name="eekRangeArrow" />
-                    <span aria-hidden="true">{min}</span>
-                </span>
-                <span className="eek__rating" aria-hidden="true">{rating}</span>
-            </div>
-            <EbayIcon name="eekArrow" />
-        </div>
-    )
-}
-
-
-export default EbayEek

package/src/ebay-eek/eek-util.ts

@@ -1,34 +0,0 @@
-import { EbayEekProps } from './eek-rating'
-
-const validRanges = {
-    'A+++': ['D', 'E', 'G'],
-    'A++': ['E', 'G'],
-    'A+': ['F', 'G'],
-    A: ['G']
-}
-
-
-export default (input: EbayEekProps): number => {
-    const { max, min, rating } = input
-    const validMax = validRanges[max]
-    if (!(validMax && validMax.indexOf(min) > -1)) {
-        return null
-    }
-    // Count from max until you reach rating
-    let current = max
-    let i = 1
-    while (current !== rating) {
-        i++
-        if (min === current) {
-            // It's at end, didn't match rating
-            return null
-        } else if (current.length > 1) {
-            // Has + in string, remove one plus
-            current = current.slice(0, current.length - 1)
-        } else {
-            // No pluses get next character code
-            current = String.fromCharCode(current.charCodeAt(0) + 1)
-        }
-    }
-    return i > 7 ? 7 : i
-}