@ebay/ui-core-react 7.3.0 → 7.3.2

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

@@ -0,0 +1,46 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { composeStories } from '@storybook/react'
+import * as stories from './index.stories'
+
+const { AllIcons, CustomColor, NonDecorative } = composeStories(stories)
+
+jest.mock('../../common/random-id')
+
+describe('ebay-icon rendering', () => {
+    describe('AllIcons story', () => {
+        it('renders icons correctly', () => {
+            const { container } = render(<AllIcons />)
+            const [icon] = container.querySelectorAll('svg')
+            expect(icon).toHaveAttribute('aria-hidden', 'true')
+            expect(icon).toHaveClass('icon icon--12')
+            expect(icon).toHaveAttribute('focusable', 'false')
+            const useElement = icon.querySelector('use')
+            expect(useElement).toHaveAttribute('xlink:href', '#icon-add-12')
+        })
+    })
+
+    describe('CustomColor story', () => {
+        it('renders icon correctly', () => {
+            const { container } = render(<CustomColor />)
+            const [_, iconClass, iconStyle] = container.querySelectorAll('svg')
+            expect(iconClass).toHaveClass('icon demo3')
+            expect(iconStyle).toHaveAttribute('style', 'color: green;')
+        })
+    })
+
+    describe('Non_Decorative story', () => {
+        it('renders icon correctly', () => {
+            const { container } = render(<NonDecorative />)
+            const [iconConfirmation, iconAttention] = container.querySelectorAll('svg')
+
+            expect(iconConfirmation).toHaveClass('icon')
+            expect(iconConfirmation).toHaveAttribute('aria-labelledby', 'icon-title-abc123')
+            const title = iconConfirmation.querySelector('title')
+            expect(title).toHaveAttribute('id', 'icon-title-abc123')
+
+            expect(iconAttention).toHaveClass('icon')
+            expect(iconAttention).toHaveAttribute('aria-label', 'Attention')
+        })
+    })
+})

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

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Meta } from '@storybook/react'
+import { EbayIcon } from '../index'
+import { icons } from './constants'
+
+export default {
+    component: EbayIcon,
+    title: 'graphics & icons/ebay-icon'
+} as Meta
+
+export const AllIcons = () => (
+    <table>
+        {icons.map((icon, i) => (
+            <tr key={i}>
+                <td>{icon}</td>
+                <td key={icon}>
+                    <EbayIcon name={icon} />
+                </td>
+            </tr>
+        ))}
+    </table>
+)
+
+export const CustomColor = () => (
+    <div>
+        <style dangerouslySetInnerHTML={{ __html: `.demo3 {color: blue;}` }} />
+        <p>
+            default <EbayIcon name="notification16" />
+        </p>
+        <p>
+            with className <EbayIcon name="notification16" className="demo3" />
+        </p>
+        <p>
+            with style <EbayIcon name="notification16" style={{ color: 'green' }} />
+        </p>
+        <p>
+            with style <EbayIcon name="attentionFilled16" style={{ color: 'purple' }} />
+        </p>
+    </div>
+)
+
+export const NonDecorative = () => (
+    <div>
+        <EbayIcon name="confirmation16" a11yText="Confirmation" />
+        <EbayIcon name="attention16" a11yText="Attention" a11yVariant="label" />
+    </div>
+)

package/src/ebay-icon/icon.tsx

@@ -0,0 +1,104 @@
+import React, { FC, Ref, SVGProps, useEffect, useState } from 'react'
+import classNames from 'classnames'
+import { withForwardRef } from '../common/component-utils'
+import { randomId } from '../common/random-id'
+import { Icon } from './types'
+
+export type A11yVariant = 'label';
+
+export type EbayIconProps = SVGProps<SVGSVGElement> & {
+    className?: string;
+    name: Icon;
+    noSkinClasses?: boolean;
+    a11yText?: string;
+    a11yVariant?: A11yVariant;
+    forwardedRef?: Ref<SVGSVGElement>;
+};
+
+const EbayIcon: FC<EbayIconProps> = ({
+    name,
+    className: extraClass,
+    noSkinClasses = false,
+    a11yText,
+    a11yVariant,
+    forwardedRef,
+    ...rest
+}) => {
+    const [rId, setRandomId] = useState('')
+
+    useEffect(() => {
+        setRandomId(randomId())
+    }, [])
+
+    const withAriaLabel = a11yVariant === 'label'
+    const a11yTextId = a11yText && `icon-title-${rId}`
+    const a11yProps = a11yText ? {
+        'aria-labelledby': withAriaLabel ? undefined : a11yTextId,
+        'aria-label': withAriaLabel ? a11yText : undefined,
+        role: 'img'
+    } : {
+        'aria-hidden': true
+    }
+    const kebabName = kebabCased(name)
+    const size = getIconSize(kebabName) || kebabName
+
+    const skinClassName = [`icon`, `icon--${size}`, getFilledIconName(kebabName)].filter(Boolean).join(' ')
+    const className = classNames(extraClass,
+        { [skinClassName]: !noSkinClasses }
+    )
+
+    return (
+        <svg
+            {...rest}
+            className={className}
+            xmlns="http://www.w3.org/2000/svg"
+            focusable={false}
+            ref={forwardedRef}
+            {...a11yProps}
+        >
+            {a11yText && !withAriaLabel && <title id={a11yTextId}>{a11yText}</title>}
+            <use xlinkHref={`#icon-${kebabName}`} />
+        </svg>
+    )
+}
+
+// This function extract the size of the icon name.
+// The icon can have these name structures:
+// - icon-name-24
+// - icon-name-24-colored
+// - icon-name-filled-24
+// - icon-name-filled-24-colored
+// - icon-name
+function getIconSize(iconName: string) {
+    const iconNameArray = iconName.split('-')
+    const size = iconNameArray[iconNameArray.length - 1]
+
+    if (size === 'colored') {
+        return iconNameArray[iconNameArray.length - 2]
+    }
+
+    if (isNaN(Number(size))) {
+        return ''
+    }
+
+    return size
+}
+
+function getFilledIconName(iconName: string) {
+    const iconNameArray = iconName.split('-')
+    const filledIndex = iconNameArray.indexOf('filled')
+
+    if (filledIndex === -1) {
+        return ''
+    }
+
+    return `icon--${iconNameArray.slice(0, filledIndex + 1).join('-')}`
+}
+
+export function kebabCased(str: string): string {
+    return str
+        .replace(/([0-9]+)/g, (s, n) => `-${n}`)
+        .replace(/([A-Z])/g, (s, c) => `-${c.toLowerCase()}`)
+}
+
+export default withForwardRef(EbayIcon)

package/src/ebay-icon/index.ts

@@ -0,0 +1,2 @@
+export { default as EbayIcon, type EbayIconProps, type A11yVariant } from './icon'
+export type { Icon } from './types'