docs: add dropdown to props table for icons, illustrations, patterns

Updates stories for icons, illustrations, patterns to show a dropdown for the icon, illustration, pattern in playground controls that dynamically updates the one shown in the playground

Author: aresnik11

packages/styleguide/src/lib/Atoms/Icons/Mini/Mini.mdx

@@ -38,9 +38,17 @@ Our icons by using standardized with a viewBox size of `"0 0 16 16"`. Icons shou
 
 All of our Icons are not minified by default, and optimized by [SVGO](https://github.com/svg/svgo) before build time. We like to preserve the source URL as well as any relevent comments or metadata within these SVGs.
 
+Example usage:
+
+```jsx
+import { MiniStarIcon } from '@codecademy/gamut-icons';
+
+<MiniStarIcon />;
+```
+
 ## Playground
 
-<Canvas sourceState="shown" of={MiniIconStories.Default} />
+<Canvas of={MiniIconStories.Default} sourceState="none" />
 
 <Controls />
 

packages/styleguide/src/lib/Atoms/Icons/Mini/Mini.stories.tsx

@@ -1,14 +1,39 @@
-import { MiniStarIcon } from '@codecademy/gamut-icons';
+import { GamutIconProps } from '@codecademy/gamut-icons';
+// eslint-disable-next-line gamut/import-paths
+import * as miniIcons from '@codecademy/gamut-icons/src/icons/mini';
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
-const meta: Meta<typeof MiniStarIcon> = {
-  component: MiniStarIcon,
-  args: {},
+type MiniIconProps = GamutIconProps & {
+  icon: typeof miniIcons.MiniStarIcon;
+};
+
+const MiniIconComponent: React.FC<MiniIconProps> = ({
+  icon: Icon,
+  ...rest
+}) => {
+  return <Icon {...rest} />;
+};
+
+const meta: Meta<typeof MiniIconComponent> = {
+  component: MiniIconComponent,
+  argTypes: {
+    icon: {
+      options: Object.keys(miniIcons),
+      mapping: miniIcons,
+      control: {
+        type: 'select',
+      },
+    },
+  },
 };
 
 export default meta;
-type Story = StoryObj<typeof MiniStarIcon>;
+type Story = StoryObj<typeof MiniIconComponent>;
 
 export const Default: Story = {
-  args: {},
+  args: {
+    size: 16,
+    icon: miniIcons.MiniStarIcon,
+  },
 };

packages/styleguide/src/lib/Atoms/Icons/Regular/Regular.mdx

@@ -38,9 +38,17 @@ Our icons are standardized with a viewBox size of `"0 0 24 24"`. Icons should be
 
 All of our Icons are not minified by default, and optimized by [SVGO](https://github.com/svg/svgo) before build time. We like to preserve the source URL as well as any relevent comments or metadata within these SVGs.
 
+Example usage:
+
+```jsx
+import { AlertIcon } from '@codecademy/gamut-icons';
+
+<AlertIcon />;
+```
+
 ## Playground
 
-<Canvas sourceState="shown" of={RegularIconStories.Default} />
+<Canvas of={RegularIconStories.Default} sourceState="none" />
 
 <Controls />
 

packages/styleguide/src/lib/Atoms/Icons/Regular/Regular.stories.tsx

@@ -1,16 +1,35 @@
-import { AlertIcon } from '@codecademy/gamut-icons';
+import { GamutIconProps } from '@codecademy/gamut-icons';
+// eslint-disable-next-line gamut/import-paths
+import * as icons from '@codecademy/gamut-icons/src/icons/regular';
 import type { Meta, StoryObj } from '@storybook/react';
 
-const meta: Meta<typeof AlertIcon> = {
-  component: AlertIcon,
-  args: {},
+type IconProps = GamutIconProps & {
+  icon: typeof icons.AlertIcon;
+};
+
+const IconComponent: React.FC<IconProps> = ({ icon: Icon, ...rest }) => {
+  return <Icon {...rest} />;
+};
+
+const meta: Meta<typeof IconComponent> = {
+  component: IconComponent,
+  argTypes: {
+    icon: {
+      options: Object.keys(icons),
+      mapping: icons,
+      control: {
+        type: 'select',
+      },
+    },
+  },
 };
 
 export default meta;
-type Story = StoryObj<typeof AlertIcon>;
+type Story = StoryObj<typeof IconComponent>;
 
 export const Default: Story = {
   args: {
     size: 40,
+    icon: icons.AlertIcon,
   },
 };

packages/styleguide/src/lib/Atoms/Illustrations/Illustrations.mdx

@@ -28,7 +28,13 @@ export const parameters = {
 
 ## Usage
 
-Illustrations are intended to be able to take in props for variants such as color, so despite being SVG-based, they're stored in our code as regular React components.
+Illustrations are intended to be able to take in props for variants such as color, so despite being SVG-based, they're stored in our code as regular React components and can be used like so:
+
+```jsx
+import { NumberBlocks } from '@codecademy/gamut-illustrations';
+
+<NumberBlocks width="128px" />;
+```
 
 ## Adding an illustration
 
@@ -44,7 +50,7 @@ If you cannot find the Illustration you would like in the ones that we have spec
 
 ## Playground
 
-<Canvas sourceState="shown" of={IllustrationsStories.Default} />
+<Canvas of={IllustrationsStories.Default} sourceState="none" />
 
 <Controls />
 

packages/styleguide/src/lib/Atoms/Illustrations/Illustrations.stories.tsx

@@ -1,18 +1,38 @@
+import type { IllustrationProps } from '@codecademy/gamut-illustrations';
 import * as illustrations from '@codecademy/gamut-illustrations';
 import type { Meta, StoryObj } from '@storybook/react';
 
-const Illustration = illustrations.NumberBlocks;
+type IllustrationComponentProps = IllustrationProps & {
+  illustration: React.ComponentType<IllustrationProps>;
+};
+
+const IllustrationComponent: React.FC<IllustrationComponentProps> = ({
+  illustration: Illustration,
+  ...rest
+}) => {
+  return <Illustration {...rest} />;
+};
 
-const meta: Meta<typeof Illustration> = {
-  component: Illustration,
-  args: {},
+const meta: Meta<typeof IllustrationComponent> = {
+  component: IllustrationComponent,
+  argTypes: {
+    illustration: {
+      options: Object.keys(illustrations),
+      mapping: illustrations,
+      control: {
+        type: 'select',
+      },
+    },
+  },
 };
 
 export default meta;
-type Story = StoryObj<typeof Illustration>;
+type Story = StoryObj<typeof IllustrationComponent>;
 
 export const Default: Story = {
   args: {
     width: 256,
+    height: 256,
+    illustration: illustrations.NumberBlocks,
   },
 };

packages/styleguide/src/lib/Atoms/Patterns/Patterns.mdx

@@ -33,9 +33,15 @@ export const parameters = {
 
 Patterns are intended to be able to take in a color and any system layout, positioning, and spacing props.
 
+```jsx
+import { DotsLoose } from '@codecademy/gamut-patterns';
+
+<DotsLoose width="128px" />;
+```
+
 ## Playground
 
-<Canvas sourceState="shown" of={PatternsStories.Default} />
+<Canvas of={PatternsStories.Default} sourceState="none" />
 
 <Controls />
 

packages/styleguide/src/lib/Atoms/Patterns/Patterns.stories.tsx

@@ -1,18 +1,37 @@
+import type { PatternProps } from '@codecademy/gamut-patterns';
 import * as patterns from '@codecademy/gamut-patterns';
 import type { Meta, StoryObj } from '@storybook/react';
 
-const Pattern = patterns.DotLoose;
+type PatternComponentProps = PatternProps & {
+  pattern: React.ComponentType<PatternProps>;
+};
+
+const PatternComponent: React.FC<PatternComponentProps> = ({
+  pattern: Pattern,
+  ...rest
+}) => {
+  return <Pattern {...rest} />;
+};
 
-const meta: Meta<typeof Pattern> = {
-  component: Pattern,
-  args: {},
+const meta: Meta<typeof PatternComponent> = {
+  component: PatternComponent,
+  argTypes: {
+    pattern: {
+      options: Object.keys(patterns),
+      mapping: patterns,
+      control: {
+        type: 'select',
+      },
+    },
+  },
 };
 
 export default meta;
-type Story = StoryObj<typeof Pattern>;
+type Story = StoryObj<typeof PatternComponent>;
 
 export const Default: Story = {
   args: {
     height: 200,
+    pattern: patterns.DotLoose,
   },
 };