From 97cb6b07d9ce4a1fbaa1686b8cc819caecf7a3cb Mon Sep 17 00:00:00 2001 From: Natalie Pina <34781875+nataliepina@users.noreply.github.com> Date: Mon, 15 May 2023 09:03:30 -0500 Subject: [PATCH] docs: update stories to access all system icons (#971) --- .../badge/stories/colorcodedbadge.stories.tsx | 18 ++++---------- .../button/stories/DropdownButton.stories.tsx | 12 +++------- packages/icon/stories/Icon.stories.tsx | 21 ++++------------ .../stories/selectInput.stories.tsx | 9 ++----- .../stories/SlideToggle.stories.tsx | 2 +- packages/storybookHelpers/controlConstants.ts | 24 ------------------- .../stories/TextInputWithIcon.stories.tsx | 12 ++++------ 7 files changed, 18 insertions(+), 80 deletions(-) diff --git a/packages/badge/stories/colorcodedbadge.stories.tsx b/packages/badge/stories/colorcodedbadge.stories.tsx index c9c63edaa..fbecce07a 100644 --- a/packages/badge/stories/colorcodedbadge.stories.tsx +++ b/packages/badge/stories/colorcodedbadge.stories.tsx @@ -1,17 +1,13 @@ 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: { @@ -19,20 +15,14 @@ export default { } }, iconShape: { - options: systemIcons, - control: { - type: "select" - }, - mapping: systemIconLabels + options: Object.keys(SystemIcons), + mapping: SystemIcons } } } as Meta; -ColorCodedBadge.displayName = "ColorCodedBadge"; - const Template: Story = args => ( Color Coded Badge ); 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 index c2a00ff21..e1d014197 100644 --- 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 index f233dbee1..7c84d4044 100644 --- 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 = args => ( - + ); export const Default = Template.bind({}); diff --git a/packages/selectInput/stories/selectInput.stories.tsx b/packages/selectInput/stories/selectInput.stories.tsx index 3be1c6f08..437f8e268 100644 --- 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 index a7c8ecb32..ffd65e0af 100644 --- 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 index 4f452e874..17e724ab0 100644 --- 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 index 82cb04643..dd8134ef8 100644 --- 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: {