diff --git a/storybook/src/docs/components/AmsterdamIconGallery.tsx b/storybook/src/docs/components/AmsterdamIconGallery.tsx index d5a7618037..bf4885efab 100644 --- a/storybook/src/docs/components/AmsterdamIconGallery.tsx +++ b/storybook/src/docs/components/AmsterdamIconGallery.tsx @@ -1,3 +1,4 @@ +import { Heading } from '@amsterdam/design-system-react' import { Icon } from '@amsterdam/design-system-react/src' // import * as Icons from '@amsterdam/design-system-react-icons' import { IconGallery, IconItem } from '@storybook/blocks' @@ -112,24 +113,47 @@ const newIcons = [ 'WhatsappIcon', 'Wheelchair1Icon', 'Wheelchair2Icon', - 'X-twitterIcon', + 'XTwitterIcon', ] export const AmsterdamIconGallery = () => { const icons = Object.keys(Icons) as Array + const updatedIcons = icons.filter((icon) => newIcons.includes(icon)) + const depIcons = icons.filter((icon) => deprecatedIcons.includes(icon)) + const oldIcons = icons.filter((icon) => !updatedIcons.includes(icon) && !depIcons.includes(icon)) return ( - - {icons.map((key) => ( -
+ <> + + New & Updated icons + + + {updatedIcons.map((key) => ( -
- ))} -
+ ))} + + + Deprecated icons + + + {depIcons.map((key) => ( + + + + ))} + + + Old icons + + + {oldIcons.map((key) => ( + + + + ))} + + ) } diff --git a/storybook/src/foundation/assets/icons.docs.mdx b/storybook/src/foundation/assets/icons.docs.mdx index 64bd86f7f2..b778aba67e 100644 --- a/storybook/src/foundation/assets/icons.docs.mdx +++ b/storybook/src/foundation/assets/icons.docs.mdx @@ -14,10 +14,6 @@ import { TwitterIcon } from "../../../../proprietary/react-icons/src"; An overview of all currently available icons. -While we are migrating to the new iconset new and updated icons are displayed in **bold -text**, deprecated icons as ~~strikethrough~~ and icons that are not in the new set are displayed in _italic text_. -Deprecated icons are currently a copy of the new version but will be removed in the future. - ## Related components diff --git a/storybook/src/styles/overrides.css b/storybook/src/styles/overrides.css index 57b37a352b..e757ca4a53 100644 --- a/storybook/src/styles/overrides.css +++ b/storybook/src/styles/overrides.css @@ -124,21 +124,3 @@ border-color: Canvas !important; } } - -.icon-item-normal, -.icon-item-deprecated { - /* display: inline-flex; */ - display: contents; -} - -.icon-item-deprecated div { - text-decoration: line-through; -} - -.icon-item-new div { - font-weight: 700; -} - -.icon-item-old div { - font-style: italic; -}