diff --git a/packages/components/src/core/Tag/__storybook__/constants.tsx b/packages/components/src/core/Tag/__storybook__/constants.tsx index 57baf24bf..df63d1cd1 100644 --- a/packages/components/src/core/Tag/__storybook__/constants.tsx +++ b/packages/components/src/core/Tag/__storybook__/constants.tsx @@ -1,6 +1,7 @@ import Icon from "src/core/Icon"; import { ExtraTagProps } from "../style"; import { WbSunny } from "@mui/icons-material"; +import CustomSvgIcon from "src/common/storybook/customSvgIcon"; export const TAG_EXCLUDED_CONTROLS = [ "color", @@ -14,21 +15,22 @@ export const TAG_EXCLUDED_CONTROLS = [ export const TAG_ICONS = [ undefined, - , - , + "CheckCircle", + "Loading", + "ExclamationMarkCircle", + "Person", , + , ]; export const TAG_ICONS_LABELS = [ "No Icon", "SDS Check Circle", "SDS Loading", - "MUI WbSunny", + "SDS Exclamation Mark", + "SDS Person", + "MUI Wb Sunny", + "Custom SVG Icon", ]; export const TAG_SDS_STYLES: ExtraTagProps["sdsStyle"][] = [ diff --git a/packages/components/src/core/Tag/__storybook__/stories/default.tsx b/packages/components/src/core/Tag/__storybook__/stories/default.tsx index b5a0fae45..f6558c0a4 100644 --- a/packages/components/src/core/Tag/__storybook__/stories/default.tsx +++ b/packages/components/src/core/Tag/__storybook__/stories/default.tsx @@ -1,11 +1,23 @@ import { Args } from "@storybook/react"; import Callout from "src/core/Callout"; import CalloutTitle from "src/core/Callout/components/CalloutTitle"; +import Icon, { IconNameToSizes } from "src/core/Icon"; import RawTag from "src/core/Tag"; export const Tag = (props: Args): JSX.Element => { const { label, sdsSize, icon } = props; + const finalIcon = + typeof icon === "string" ? ( + + ) : ( + icon + ); + if (sdsSize === "l" && !icon) { return ( @@ -18,5 +30,5 @@ export const Tag = (props: Args): JSX.Element => { ); } - return ; + return ; };