fix: tailwind not accepting dynamic classes for storybook

gitcoinco · Oct 23, 2024 · ea2edae · ea2edae
1 parent 2b464de
commit ea2edae
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 33 deletions.
diff --git a/src/primitives/Icon/Icon.mdx b/src/primitives/Icon/Icon.mdx
@@ -6,7 +6,7 @@ import { Icon } from "./Icon";
 
 <Meta of={IconStories} />
 
-The Icon component abstracts away the SVG rendering of icons accepting props for the `type`, `color`, and `size`.
+The Icon component abstracts away the SVG rendering of icons accepting props for the `type` and `className`.
 
 # Example
 

diff --git a/src/primitives/Icon/Icon.stories.tsx b/src/primitives/Icon/Icon.stories.tsx
@@ -6,19 +6,12 @@ const meta = {
   component: Icon,
   args: {
     type: "check",
-    color: "black",
   },
   argTypes: {
     type: {
       control: "select",
       options: Object.values(IconType),
     },
-    color: {
-      control: "color",
-    },
-    size: {
-      control: "text",
-    },
   },
 } satisfies Meta;
 
@@ -30,23 +23,18 @@ export const Default: Story = {};
 
 export const WithThemeColor: Story = {
   args: {
-    color: "grey-400",
+    className: "ui-fill-grey-400",
   },
 };
 
 export const WithCustomColor: Story = {
   args: {
-    color: "#ff00ff",
-  },
-  argTypes: {
-    color: {
-      control: "color",
-    },
+    className: "ui-fill-[#ff00ff]",
   },
 };
 
 export const WithCustomSize: Story = {
   args: {
-    size: "40px",
+    className: "ui-size-[40px]",
   },
 };
diff --git a/src/primitives/Icon/Icon.tsx b/src/primitives/Icon/Icon.tsx
@@ -9,11 +9,9 @@ export enum IconType {
   X = "x",
 }
 
-export interface IconProps {
+export type IconProps = React.SVGProps<SVGSVGElement> & {
   type: IconType;
-  color?: string;
-  size?: string;
-}
+};
 
 const iconComponents: Record<IconProps["type"], React.FC<React.SVGProps<SVGSVGElement>>> = {
   check: CheckIcon,
@@ -23,20 +21,9 @@ const iconComponents: Record<IconProps["type"], React.FC<React.SVGProps<SVGSVGEl
   x: XIcon,
 };
 
-export const Icon: React.FC<IconProps & React.SVGProps<SVGSVGElement>> = ({
-  type,
-  color = "black",
-  size = "20px",
-  className,
-  ...props
-}) => {
-  const classNames = cn(
-    className,
-    color && color[0] === "#" ? `ui-fill-[${color}]` : `ui-fill-${color}`,
-    size && `ui-size-[${size}]`,
-  );
+export const Icon: React.FC<IconProps> = ({ type, className, ...props }) => {
   const IconComponent = iconComponents[type];
-  return <IconComponent className={`${classNames}`} {...props} />;
+  return <IconComponent className={className} {...props} />;
 };
 
 export const icons = Object.keys(iconComponents) as IconProps["type"][];