Divide updated, deprecated and old icons for better overview

Amsterdam · Jan 13, 2025 · f609b59 · f609b59
1 parent 1b20410
commit f609b59
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 32 deletions.
diff --git 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<keyof typeof Icons>
+  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 (
-    <IconGallery>
-      {icons.map((key) => (
-        <div
-          className={`icon-item-${deprecatedIcons.includes(key) ? 'deprecated' : 'normal'} icon-item-${newIcons.includes(key) ? 'new' : 'old'}`}
-          key={key}
-        >
+    <>
+      <Heading level={3} size="level-2" className="ams-mb--sm">
+        New & Updated icons
+      </Heading>
+      <IconGallery>
+        {updatedIcons.map((key) => (
           <IconItem name={key.substring(0, key.length - 4)}>
             <Icon svg={Icons[key]} />
           </IconItem>
-        </div>
-      ))}
-    </IconGallery>
+        ))}
+      </IconGallery>
+      <Heading level={3} size="level-2" className="ams-mb--sm">
+        Deprecated icons
+      </Heading>
+      <IconGallery>
+        {depIcons.map((key) => (
+          <IconItem name={key.substring(0, key.length - 4)}>
+            <Icon svg={Icons[key]} />
+          </IconItem>
+        ))}
+      </IconGallery>
+      <Heading level={3} size="level-2" className="ams-mb--sm">
+        Old icons
+      </Heading>
+      <IconGallery>
+        {oldIcons.map((key) => (
+          <IconItem name={key.substring(0, key.length - 4)}>
+            <Icon svg={Icons[key]} />
+          </IconItem>
+        ))}
+      </IconGallery>
+    </>
   )
 }
diff --git 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.
-
 <AmsterdamIconGallery />
 
 ## Related components

diff --git 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;
-}