Updated Icons to be more explicit thanks to Jono

storybookjs · Aug 1, 2022 · c50eff0 · c50eff0
1 parent fc334e3
commit c50eff0
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 19 deletions.
diff --git a/code/lib/components/src/icon/icon.stories.tsx b/code/lib/components/src/icon/icon.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { styled, css } from '@storybook/theming';
 
 import { Icons } from './icon';
-import { icons } from './icons';
+import { icons, IconKey } from './icons';
 
 const Meta = styled.div`
   color: #666;
@@ -67,7 +67,7 @@ export const Labels = () => (
     <List>
       {Object.keys(icons).map((key) => (
         <Item key={key}>
-          <Icons icon={key as keyof typeof icons} aria-hidden />
+          <Icons icon={key as IconKey} aria-hidden />
           <Meta>{key}</Meta>
         </Item>
       ))}
@@ -81,7 +81,7 @@ export const NoLabels = () => (
     <List>
       {Object.keys(icons).map((key) => (
         <Item minimal key={key}>
-          <Icons icon={key as keyof typeof icons} aria-label={key} />
+          <Icons icon={key as IconKey} aria-label={key} />
         </Item>
       ))}
     </List>

diff --git a/code/lib/components/src/icon/icon.tsx b/code/lib/components/src/icon/icon.tsx
@@ -13,22 +13,15 @@ const Svg = styled.svg`
   }
 `;
 
-/**
- * An Icon is a piece of visual element, but we must ensure its accessibility while using it.
- * It can have 2 purposes:
- *
- * - *decorative only*: for example, it illustrates a label next to it. We must ensure that it is ignored by screen readers, by setting `aria-hidden` attribute (ex: `<Icon icon="check" aria-hidden />`)
- * - *non-decorative*: it means that it delivers information. For example, an icon as only child in a button. The meaning can be obvious visually, but it must have a proper text alternative via `aria-label` for screen readers. (ex: `<Icon icon="print" aria-label="Print this document" />`)
- */
-export interface IconsProps {
-  icon?: IconType;
-  symbol?: IconType;
+export interface IconsProps extends ComponentProps<typeof Svg> {
+  icon: IconType;
+  useSymbol?: boolean;
 }
 
-export const Icons: FunctionComponent<IconsProps> = ({ icon, symbol, ...props }: IconsProps) => {
+export const Icons: FunctionComponent<IconsProps> = ({ icon, useSymbol, ...props }: IconsProps) => {
   return (
     <Svg viewBox="0 0 14 14" width="14px" height="14px" {...props}>
-      {symbol ? <use xlinkHref={`#icon--${symbol}`} /> : icons[icon]}
+      {useSymbol ? <use xlinkHref={`#icon--${icon}`} /> : icons[icon]}
     </Svg>
   );
 };

diff --git a/code/lib/ui/src/components/sidebar/TreeNode.tsx b/code/lib/ui/src/components/sidebar/TreeNode.tsx
@@ -147,7 +147,7 @@ export const GroupNode: FunctionComponent<
 > = React.memo(({ children, isExpanded = false, isExpandable = false, ...props }) => (
   <BranchNode isExpandable={isExpandable} tabIndex={-1} {...props}>
     {isExpandable ? <CollapseIcon isExpanded={isExpanded} /> : null}
-    <TypeIcon symbol="folder" color="primary" />
+    <TypeIcon icon="folder" useSymbol color="primary" />
     {children}
   </BranchNode>
 ));
@@ -156,7 +156,7 @@ export const ComponentNode: FunctionComponent<ComponentProps<typeof BranchNode>>
   ({ theme, children, isExpanded, isExpandable, isSelected, ...props }) => (
     <BranchNode isExpandable={isExpandable} tabIndex={-1} {...props}>
       {isExpandable && <CollapseIcon isExpanded={isExpanded} />}
-      <TypeIcon symbol="component" color="secondary" />
+      <TypeIcon icon="component" useSymbol color="secondary" />
       {children}
     </BranchNode>
   )
@@ -166,15 +166,15 @@ export const DocumentNode: FunctionComponent<
   ComponentProps<typeof LeafNode> & { docsMode: boolean }
 > = React.memo(({ theme, children, docsMode, ...props }) => (
   <LeafNode tabIndex={-1} {...props}>
-    <TypeIcon symbol="document" docsMode={docsMode} />
+    <TypeIcon icon="document" useSymbol docsMode={docsMode} />
     {children}
   </LeafNode>
 ));
 
 export const StoryNode: FunctionComponent<ComponentProps<typeof LeafNode>> = React.memo(
   ({ theme, children, ...props }) => (
     <LeafNode tabIndex={-1} {...props}>
-      <TypeIcon symbol="bookmarkhollow" />
+      <TypeIcon icon="bookmarkhollow" useSymbol />
       {children}
     </LeafNode>
   )