From 6be8531b2c944cc1180bf6857c6d52a7b624ac78 Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Mon, 29 Apr 2024 13:18:45 -0500 Subject: [PATCH] feat(Icon)!: introduce 2.0 component - add newly updated spritemap - add tests and snapshots - add new icons - update naming scheme for existing icons - use Icon (v2) in V2 components - mark files for proper export --- src/components/Accordion/Accordion-v2.tsx | 6 +- src/components/Accordion/index.ts | 2 +- .../BannerNotification/BannerNotification.tsx | 4 +- .../BannerNotification.test.ts.snap | 6 +- src/components/Button/Button-v2.tsx | 5 +- .../__snapshots__/Button-v2.test.tsx.snap | 36 +- src/components/Card/Card-v2.stories.tsx | 6 +- src/components/Card/Card-v2.tsx | 3 +- src/components/FieldNote/FieldNote-v2.tsx | 4 +- src/components/Icon/Icon-v2.module.css | 27 + src/components/Icon/Icon-v2.stories.tsx | 143 + src/components/Icon/Icon-v2.test.ts | 7 + src/components/Icon/Icon-v2.tsx | 150 ++ .../Icon/__snapshots__/Icon-v2.test.ts.snap | 2296 +++++++++++++++++ src/components/Icon/index.ts | 5 + .../InlineNotification-v2.tsx | 4 +- src/components/InlineNotification/index.ts | 2 +- src/components/Input/index.ts | 2 +- src/components/InputField/InputField-v2.tsx | 2 +- .../__snapshots__/InputField-v2.test.tsx.snap | 2 +- src/components/Link/Link-v2.tsx | 3 +- src/components/Menu/Menu-v2.stories.tsx | 12 +- src/components/Menu/Menu-v2.tsx | 9 +- src/components/Modal/Modal-v2.tsx | 2 +- .../PopoverContainer-v2.stories.tsx | 8 +- src/components/PopoverContainer/index.ts | 2 +- .../PopoverListItem-v2.stories.ts | 6 +- .../PopoverListItem/PopoverListItem-v2.tsx | 3 +- src/components/Radio/Radio-v2.tsx | 3 +- src/components/Select/Select-v2.tsx | 12 +- src/components/TabGroup/TabGroup.stories.tsx | 4 +- src/components/TabGroup/TabGroup.tsx | 2 +- .../__snapshots__/TabGroup.test.tsx.snap | 2 +- .../TextareaField-v2.test.tsx.snap | 2 +- src/components/Toast/Toast-v2.tsx | 4 +- src/components/Toast/index.ts | 2 +- src/icons/spritemap-v2.tsx | 716 +++++ src/index.ts | 3 + src/util/getIconNameFromStatus-v2.ts | 19 + 39 files changed, 3432 insertions(+), 94 deletions(-) create mode 100755 src/components/Icon/Icon-v2.module.css create mode 100644 src/components/Icon/Icon-v2.stories.tsx create mode 100644 src/components/Icon/Icon-v2.test.ts create mode 100644 src/components/Icon/Icon-v2.tsx create mode 100644 src/components/Icon/__snapshots__/Icon-v2.test.ts.snap create mode 100644 src/icons/spritemap-v2.tsx create mode 100644 src/util/getIconNameFromStatus-v2.ts diff --git a/src/components/Accordion/Accordion-v2.tsx b/src/components/Accordion/Accordion-v2.tsx index 352ffaa09..37bd0d132 100644 --- a/src/components/Accordion/Accordion-v2.tsx +++ b/src/components/Accordion/Accordion-v2.tsx @@ -6,7 +6,7 @@ import { ENTER_KEYCODE, SPACEBAR_KEYCODE } from '../../util/keycodes'; import type { Size } from '../../util/variant-types'; import Heading, { type HeadingElement } from '../Heading'; -import Icon, { type IconName } from '../Icon'; +import { type IconNameV2 as IconName, IconV2 as Icon } from '../Icon'; import Text from '../Text'; import styles from './Accordion-v2.module.css'; @@ -77,7 +77,7 @@ type AccordionButtonProps = { * * **Default is `"expand-more"`**. */ - trailingIcon?: Extract; + trailingIcon?: Extract; }; type AccordionPanelProps = { @@ -159,7 +159,7 @@ const AccordionButton = ({ headingAs, leadingIcon, title, - trailingIcon = 'expand-more', + trailingIcon = 'chevron-down', subtitle, onClose, onOpen, diff --git a/src/components/Accordion/index.ts b/src/components/Accordion/index.ts index eeb8641b0..764793ddf 100644 --- a/src/components/Accordion/index.ts +++ b/src/components/Accordion/index.ts @@ -1,2 +1,2 @@ export { Accordion as default } from './Accordion'; -export { Accordion as AccordionV2 } from './Accordion'; +export { Accordion as AccordionV2 } from './Accordion-v2'; diff --git a/src/components/BannerNotification/BannerNotification.tsx b/src/components/BannerNotification/BannerNotification.tsx index 468a9f86d..fd7b6775b 100644 --- a/src/components/BannerNotification/BannerNotification.tsx +++ b/src/components/BannerNotification/BannerNotification.tsx @@ -1,10 +1,10 @@ import clsx from 'clsx'; import React, { type ReactNode } from 'react'; -import getIconNameFromStatus from '../../util/getIconNameFromStatus'; +import getIconNameFromStatus from '../../util/getIconNameFromStatus-v2'; import type { Status } from '../../util/variant-types'; import Heading from '../Heading'; -import Icon from '../Icon'; +import { IconV2 as Icon } from '../Icon'; import Text from '../Text'; import styles from './BannerNotification.module.css'; diff --git a/src/components/BannerNotification/__snapshots__/BannerNotification.test.ts.snap b/src/components/BannerNotification/__snapshots__/BannerNotification.test.ts.snap index e3c8761a9..f75c34664 100644 --- a/src/components/BannerNotification/__snapshots__/BannerNotification.test.ts.snap +++ b/src/components/BannerNotification/__snapshots__/BannerNotification.test.ts.snap @@ -121,7 +121,7 @@ exports[` Default story renders snapshot 1`] = ` xmlns="http://www.w3.org/2000/svg" >
Dismissable story renders snapshot 1`] = ` xmlns="http://www.w3.org/2000/svg" >
Warning story renders snapshot 1`] = ` xmlns="http://www.w3.org/2000/svg" >
( children, className, context, - icon = 'empty-circle', + icon = 'circle', iconLayout = 'none', isDisabled, isFullWidth, diff --git a/src/components/Button/__snapshots__/Button-v2.test.tsx.snap b/src/components/Button/__snapshots__/Button-v2.test.tsx.snap index 9cb12fd72..78b76c7cc 100644 --- a/src/components/Button/__snapshots__/Button-v2.test.tsx.snap +++ b/src/components/Button/__snapshots__/Button-v2.test.tsx.snap @@ -185,16 +185,8 @@ exports[`