Replace icons

storybookjs · Jan 31, 2024 · 98f9f1c · 98f9f1c
1 parent 42c6704
commit 98f9f1c
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 52 deletions.
diff --git a/code/addons/a11y/src/components/Report/Item.tsx b/code/addons/a11y/src/components/Report/Item.tsx
@@ -1,7 +1,6 @@
 import React, { Fragment, useState } from 'react';
 
 import { styled } from '@storybook/theming';
-import { Icons } from '@storybook/components';
 
 import type { Result } from 'axe-core';
 import { Info } from './Info';
@@ -11,6 +10,7 @@ import { Tags } from './Tags';
 
 import type { RuleType } from '../A11YPanel';
 import HighlightToggle from './HighlightToggle';
+import { ChevronSmallDownIcon } from '@storybook/icons';
 
 const Wrapper = styled.div(({ theme }) => ({
   display: 'flex',
@@ -21,10 +21,7 @@ const Wrapper = styled.div(({ theme }) => ({
   },
 }));
 
-const Icon = styled(Icons)({
-  height: 10,
-  width: 10,
-  minWidth: 10,
+const Icon = styled(ChevronSmallDownIcon)({
   marginRight: 10,
   transition: 'transform 0.1s ease-in-out',
   verticalAlign: 'inherit',
@@ -75,7 +72,6 @@ export const Item = (props: ItemProps) => {
       <Wrapper>
         <HeaderBar onClick={() => onToggle(!open)} role="button">
           <Icon
-            icon="arrowdown"
             style={{
               transform: `rotate(${open ? 0 : -90}deg)`,
             }}

diff --git a/code/addons/interactions/src/components/List.tsx b/code/addons/interactions/src/components/List.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment, useState } from 'react';
 import { styled, themes, convert } from '@storybook/theming';
-import { Icons, type IconsProps } from '@storybook/components';
+import { ChevronSmallDownIcon } from '@storybook/icons';
 
 const ListWrapper = styled.ul({
   listStyle: 'none',
@@ -18,10 +18,7 @@ const Wrapper = styled.div({
   },
 });
 
-const Icon = styled(Icons)<IconsProps>({
-  height: 10,
-  width: 10,
-  minWidth: 10,
+const Icon = styled(ChevronSmallDownIcon)({
   color: convert(themes.light).textMutedColor,
   marginRight: 10,
   transition: 'transform 0.1s ease-in-out',
@@ -68,7 +65,6 @@ export const ListItem: React.FC<ListItemProps> = ({ item }) => {
       <Wrapper>
         <HeaderBar onClick={() => onToggle(!open)} role="button">
           <Icon
-            icon="arrowdown"
             color={convert(themes.light).appBorderColor}
             style={{
               transform: `rotate(${open ? 0 : -90}deg)`,

diff --git a/code/addons/interactions/src/components/StatusIcon.tsx b/code/addons/interactions/src/components/StatusIcon.tsx
@@ -1,51 +1,35 @@
 import React from 'react';
-import { Icons, type IconsProps } from '@storybook/components';
 import { type Call, CallStates } from '@storybook/instrumenter';
-import { styled } from '@storybook/theming';
+import { styled, useTheme } from '@storybook/theming';
 
 import { transparentize } from 'polished';
-import localTheme from '../theme';
+import { CheckIcon, CircleIcon, PlayIcon, StopAltIcon } from '@storybook/icons';
 
 export interface StatusIconProps {
   status: Call['status'];
-  useSymbol?: IconsProps['useSymbol'];
-  className?: string;
 }
 
-const {
-  colors: {
-    pure: { gray },
-  },
-} = localTheme;
-
-const StyledStatusIcon = styled(Icons)<StatusIconProps>(({ theme, status }) => {
-  const color = {
-    [CallStates.DONE]: theme.color.positive,
-    [CallStates.ERROR]: theme.color.negative,
-    [CallStates.ACTIVE]: theme.color.secondary,
-    [CallStates.WAITING]: transparentize(0.5, gray[500]),
-  }[status];
-  return {
-    width: status === CallStates.WAITING ? 6 : 12,
-    height: status === CallStates.WAITING ? 6 : 12,
-    color,
-    justifySelf: 'center',
-  };
+const WarningContainer = styled.div({
+  width: 14,
+  height: 14,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
 });
 
-export const StatusIcon: React.FC<StatusIconProps> = ({ status, className }) => {
-  const icon = {
-    [CallStates.DONE]: 'check',
-    [CallStates.ERROR]: 'stopalt',
-    [CallStates.ACTIVE]: 'play',
-    [CallStates.WAITING]: 'circle',
-  }[status] as IconsProps['icon'];
+export const StatusIcon: React.FC<StatusIconProps> = ({ status }) => {
+  const theme = useTheme();
+
   return (
-    <StyledStatusIcon
-      data-testid={`icon-${status}`}
-      status={status}
-      icon={icon}
-      className={className}
-    />
+    <>
+      {status === CallStates.DONE && <CheckIcon color={theme.color.positive} />}
+      {status === CallStates.ERROR && <StopAltIcon color={theme.color.negative} />}
+      {status === CallStates.ACTIVE && <PlayIcon color={theme.color.secondary} />}
+      {status === CallStates.WAITING && (
+        <WarningContainer>
+          <CircleIcon color={transparentize(0.5, '#CCCCCC')} size={6} />
+        </WarningContainer>
+      )}
+    </>
   );
 };
diff --git a/code/ui/manager/src/settings/shortcuts.tsx b/code/ui/manager/src/settings/shortcuts.tsx
@@ -7,8 +7,9 @@ import {
   shortcutToHumanString,
   shortcutMatchesShortcut,
 } from '@storybook/manager-api';
-import { Button, Form, Icons } from '@storybook/components';
+import { Button, Form } from '@storybook/components';
 import SettingsFooter from './SettingsFooter';
+import { CheckIcon } from '@storybook/icons';
 
 const Header = styled.header(({ theme }) => ({
   marginBottom: 20,
@@ -80,7 +81,7 @@ export const Fade = keyframes`
   50% { opacity: 1; }
 `;
 
-export const SuccessIcon = styled(Icons)<{ valid: string }>(
+export const SuccessIcon = styled(CheckIcon)<{ valid: string }>(
   ({ valid, theme }) =>
     valid === 'valid'
       ? {
@@ -283,7 +284,7 @@ class ShortcutsScreen extends Component<ShortcutsScreenProps, ShortcutsScreenSta
           readOnly
         />
 
-        <SuccessIcon valid={this.displaySuccessMessage(feature)} icon="check" />
+        <SuccessIcon valid={this.displaySuccessMessage(feature)} />
       </Row>
     ));