docs: update stories to access all system icons (#971)

d2iq · May 15, 2023 · 97cb6b0 · 97cb6b0
1 parent 3da0b7f
commit 97cb6b0
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 80 deletions.
diff --git a/packages/badge/stories/colorcodedbadge.stories.tsx b/packages/badge/stories/colorcodedbadge.stories.tsx
@@ -1,38 +1,28 @@
 import * as React from "react";
 import { Story, Meta } from "@storybook/react";
-import { BadgeButton, ColorCodedBadge } from "../../index";
+import { ColorCodedBadge } from "../../index";
 import { ColorCodedBadgeProps } from "../components/ColorCodedBadge";
-import {
- systemIconLabels,
- systemIcons
-} from "../../storybookHelpers/controlConstants";
+import { SystemIcons } from "../../icons/dist/system-icons-enum";
 import { textColorPrimary } from "../../design-tokens/build/js/designTokens";
 
 export default {
  title: "Graphic Elements/ColorCodedBadge",
  component: ColorCodedBadge,
- subcomponents: { BadgeButton },
  argTypes: {
  color: {
  control: {
  type: "color"
  }
  },
  iconShape: {
- options: systemIcons,
- control: {
- type: "select"
- },
- mapping: systemIconLabels
+ options: Object.keys(SystemIcons),
+ mapping: SystemIcons
  }
  }
 } as Meta;
 
-ColorCodedBadge.displayName = "ColorCodedBadge";
-
 const Template: Story<ColorCodedBadgeProps> = args => (
  <ColorCodedBadge {...args}>Color Coded Badge</ColorCodedBadge>
 );
 
 export const Default = Template.bind({});
-Default.args = { color: textColorPrimary };
diff --git a/packages/button/stories/DropdownButton.stories.tsx b/packages/button/stories/DropdownButton.stories.tsx
@@ -8,10 +8,7 @@ import {
  WarningDropdownButton,
  DangerDropdownButton
 } from "../../index";
-import {
- systemIconLabels,
- systemIcons
-} from "../../storybookHelpers/controlConstants";
+import { SystemIcons } from "../../icons/dist/system-icons-enum";
 
 export default {
  title: "Actions/Dropdown Button",
@@ -23,11 +20,8 @@ export default {
  }
  },
  iconStart: {
- options: systemIcons,
- control: {
- type: "select"
- },
- mapping: systemIconLabels
+ options: Object.keys(SystemIcons),
+ mapping: SystemIcons
  }
  },
  args: {

diff --git a/packages/icon/stories/Icon.stories.tsx b/packages/icon/stories/Icon.stories.tsx
@@ -4,11 +4,7 @@ import { Icon } from "../index";
 import { SystemIcons } from "../../icons/dist/system-icons-enum";
 import { textColorPrimary } from "../../design-tokens/build/js/designTokens";
 import { IconProps } from "../components/Icon";
-import {
- spacingSizeValues,
- systemIconLabels,
- systemIcons
-} from "../../storybookHelpers/controlConstants";
+import { spacingSizeValues } from "../../storybookHelpers/controlConstants";
 
 export default {
  title: "Graphic Elements/Icon",
@@ -20,11 +16,8 @@ export default {
  }
  },
  shape: {
- options: systemIcons,
- control: {
- type: "select"
- },
- mapping: systemIconLabels
+ options: Object.keys(SystemIcons),
+ mapping: SystemIcons
  },
  size: {
  options: spacingSizeValues,
@@ -51,13 +44,7 @@ export default {
 } as Meta;
 
 const Template: Story<IconProps> = args => (
- <Icon
- shape={SystemIcons.ArrowRight}
- color={textColorPrimary}
- size="s"
- ariaLabel="Sample icon"
- {...args}
- />
+ <Icon color={textColorPrimary} size="s" ariaLabel="Sample icon" {...args} />
 );
 
 export const Default = Template.bind({});
diff --git a/packages/selectInput/stories/selectInput.stories.tsx b/packages/selectInput/stories/selectInput.stories.tsx
@@ -3,11 +3,6 @@ import { Story, Meta } from "@storybook/react";
 import { SelectInput } from "../../index";
 import { InputStoryWrapper } from "../../../decorators/inputStoryWrapper";
 import { SystemIcons } from "../../icons/dist/system-icons-enum";
-import {
- systemIconLabels,
- systemIcons
-} from "../../storybookHelpers/controlConstants";
-
 const defaultOptions = [
  { value: "exosphere", label: "Exosphere" },
  { value: "thermosphere", label: "Thermosphere" },
@@ -27,8 +22,8 @@ export default {
  component: SelectInput,
  argTypes: {
  iconStart: {
- options: systemIcons,
- mapping: systemIconLabels
+ options: Object.keys(SystemIcons),
+ mapping: SystemIcons
  },
  inputLabel: {
  control: {

diff --git a/packages/slideToggle/stories/SlideToggle.stories.tsx b/packages/slideToggle/stories/SlideToggle.stories.tsx
@@ -22,7 +22,7 @@ export default {
  }
  },
  args: {
- apperance: "standard",
+ appearance: "standard",
  inputLabel: "Default"
  }
 };

diff --git a/packages/storybookHelpers/controlConstants.ts b/packages/storybookHelpers/controlConstants.ts
@@ -62,30 +62,6 @@ export const sideValues = [
  "vert"
 ];
 
-export const systemIcons = [
- "SystemIcons.ArrowRight",
- "SystemIcons.Check",
- "SystemIcons.Close",
- "SystemIcons.Folder",
- "SystemIcons.Gear",
- "SystemIcons.Services",
- "SystemIcons.Users",
- "SystemIcons.LockData",
- "SystemIcons.CircleCheck"
-];
-
-export const systemIconLabels = {
- "SystemIcons.ArrowRight": SystemIcons.ArrowRight,
- "SystemIcons.Check": SystemIcons.Check,
- "SystemIcons.Close": SystemIcons.Close,
- "SystemIcons.Folder": SystemIcons.Folder,
- "SystemIcons.Gear": SystemIcons.Gear,
- "SystemIcons.Services": SystemIcons.Services,
- "SystemIcons.Users": SystemIcons.Users,
- "SystemIcons.LockData": SystemIcons.LockData,
- "SystemIcons.CircleCheck": SystemIcons.CircleCheck
-};
-
 export const directionsValues = [
  Direction.BottomLeft,
  Direction.BottomRight,

diff --git a/packages/textInput/stories/TextInputWithIcon.stories.tsx b/packages/textInput/stories/TextInputWithIcon.stories.tsx
@@ -3,10 +3,6 @@ import { Story, Meta } from "@storybook/react";
 import { TextInputWithIcon } from "../index";
 import { SystemIcons } from "../../icons/dist/system-icons-enum";
 import { InputStoryWrapper } from "../../../decorators/inputStoryWrapper";
-import {
- systemIconLabels,
- systemIcons
-} from "../../storybookHelpers/controlConstants";
 
 export default {
  title: "Forms/TextInputWithIcon",
@@ -19,12 +15,12 @@ export default {
  }
  },
  iconStart: {
- options: systemIcons,
- mapping: systemIconLabels
+ options: Object.keys(SystemIcons),
+ mapping: SystemIcons
  },
  iconEnd: {
- options: systemIcons,
- mapping: systemIconLabels
+ options: Object.keys(SystemIcons),
+ mapping: SystemIcons
  },
  hintContent: {
  control: {