@ebay/ui-core-react 7.3.1 → 7.3.2

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

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

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

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

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

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

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

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

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

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