Add storybook-addon-jsx

.storybook/main.ts

@@ -6,6 +6,7 @@ const addons = [
   "@storybook/addon-interactions",
   "@storybook/addon-designs",
   "@storybook/addon-themes",
+  "storybook-addon-jsx",
 ];
 
 if (process.env.NODE_ENV === "development") {

.storybook/preview.ts

@@ -1,5 +1,6 @@
 import { withThemeByClassName } from "@storybook/addon-themes";
 import { Decorator, Parameters } from "@storybook/react";
+import { jsxDecorator } from "storybook-addon-jsx";
 
 import "@fontsource/inconsolata/700.css";
 import "@fontsource/inter/400.css";
@@ -30,4 +31,5 @@ export const decorators: Decorator[] = [
     },
     defaultTheme: "light",
   }),
+  jsxDecorator,
 ];

package.json

@@ -92,6 +92,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^5.0.1",
     "storybook": "^7.4.2",
+    "storybook-addon-jsx": "^7.3.14",
     "stylelint": "^15.10.3",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-plugin-defensive-css": "^0.9.1",

src/components/Button/Button.stories.tsx

@@ -14,17 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta } from "@storybook/react";
 
 import { Button as ButtonComponent } from "./Button";
 import VisibilityOnIcon from "@vector-im/compound-design-tokens/icons/visibility-on.svg";
 
-type Props = {
-  kind?: "primary" | "secondary" | "tertiary" | "destructive";
-  size?: "sm" | "lg";
-};
-
 export default {
   title: "Button",
   component: ButtonComponent,
@@ -34,42 +28,91 @@ export default {
       options: ["sm", "lg"],
       control: { type: "inline-radio" },
     },
+    kind: {
+      options: ["primary", "secondary", "tertiary", "destructive"],
+      control: { type: "inline-radio" },
+    },
+    disabled: {
+      type: "boolean",
+    },
+    as: {
+      control: { type: "text" },
+    },
+    Icon: {
+      options: [undefined, "VisibilityOnIcon"],
+      mapping: {
+        VisibilityOnIcon: VisibilityOnIcon,
+        undefined: undefined,
+      },
+      control: { type: "inline-radio" },
+    },
   },
   args: {
-    size: "sm",
+    size: "lg",
+    as: undefined,
+    disabled: false,
+    children: "Click me!",
   },
 } as Meta<typeof ButtonComponent>;
 
-const Template: StoryFn<typeof ButtonComponent> = ({ kind, size }: Props) => (
-  <div style={{ display: "flex", gap: 8 }}>
-    <ButtonComponent kind={kind} size={size}>
-      Click me!
-    </ButtonComponent>
-    <ButtonComponent Icon={VisibilityOnIcon} kind={kind} size={size}>
-      Click me!
-    </ButtonComponent>
-    <ButtonComponent as="a" href="#" kind={kind} size={size}>
-      Click me!
-    </ButtonComponent>
-  </div>
-);
+export const Default = {
+  args: {
+    // test component defaults
+    kind: undefined,
+    size: undefined,
+  },
+};
+
+export const Small = {
+  args: {
+    // test component defaults
+    kind: undefined,
+    size: "sm",
+  },
+};
+
+export const Primary = {
+  args: {
+    kind: "primary",
+  },
+};
+
+export const Secondary = {
+  args: {
+    kind: "secondary",
+  },
+};
 
-export const Primary = Template.bind({});
-Primary.args = {
-  kind: "primary",
+export const Tertiary = {
+  args: {
+    kind: "tertiary",
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  kind: "secondary",
+export const Destructive = {
+  args: {
+    kind: "destructive",
+  },
 };
 
-export const Tertiary = Template.bind({});
-Tertiary.args = {
-  kind: "tertiary",
+export const WithIcon = {
+  args: {
+    ...Primary.args,
+    Icon: VisibilityOnIcon,
+  },
 };
 
-export const Destructive = Template.bind({});
-Destructive.args = {
-  kind: "destructive",
+export const SmallWithIcon = {
+  args: {
+    ...Primary.args,
+    size: "sm",
+    Icon: VisibilityOnIcon,
+  },
+};
+
+export const Disabled = {
+  args: {
+    ...Primary.args,
+    disabled: true,
+  },
 };

src/components/Link/Link.stories.tsx

@@ -14,22 +14,43 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta } from "@storybook/react";
 
 import { Link as LinkComponent } from "./Link";
 
 export default {
   title: "Link",
   component: LinkComponent,
   tags: ["autodocs"],
-  argTypes: {},
-  args: {},
+  argTypes: {
+    kind: {
+      options: ["primary", "critical"],
+      control: { type: "inline-radio" },
+    },
+  },
+  args: {
+    children: "Text link",
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=645-3494&mode=design&t=NC76puFaYAA5i3V4-0",
+    },
+  },
 } as Meta<typeof LinkComponent>;
 
-const Template: StoryFn<typeof LinkComponent> = (args) => (
-  <LinkComponent {...args}>Text link</LinkComponent>
-);
-
-export const Round = Template.bind({});
-Round.args = {};
+export const Default = {
+  // no args, test default kind
+};
+
+export const Primary = {
+  args: {
+    kind: "primary",
+  },
+};
+
+export const Critical = {
+  args: {
+    kind: "critical",
+  },
+};

src/components/Link/Link.test.tsx

@@ -18,11 +18,23 @@ import { describe, it, expect } from "vitest";
 import { render } from "@testing-library/react";
 import React from "react";
 
-import { Link } from "./Link";
+import Meta, { Default, Primary, Critical } from "./Link.stories";
+import { composeStory } from "@storybook/react";
 
 describe("Link", () => {
-  it("renders", () => {
-    const { asFragment } = render(<Link />);
+  it("renders a primary link by default", () => {
+    const Component = composeStory(Default, Meta);
+    const { asFragment } = render(<Component />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it("renders a primary link", () => {
+    const Component = composeStory(Primary, Meta);
+    const { asFragment } = render(<Component />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it("renders a critical link", () => {
+    const Component = composeStory(Critical, Meta);
+    const { asFragment } = render(<Component />);
     expect(asFragment()).toMatchSnapshot();
   });
 });

src/components/Link/__snapshots__/Link.test.tsx.snap

@@ -1,11 +1,37 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Link > renders 1`] = `
+exports[`Link > renders a critical link 1`] = `
+<DocumentFragment>
+  <a
+    class="_link_379d57"
+    data-kind="critical"
+    rel="noreferrer noopener"
+  >
+    Text link
+  </a>
+</DocumentFragment>
+`;
+
+exports[`Link > renders a primary link 1`] = `
+<DocumentFragment>
+  <a
+    class="_link_379d57"
+    data-kind="primary"
+    rel="noreferrer noopener"
+  >
+    Text link
+  </a>
+</DocumentFragment>
+`;
+
+exports[`Link > renders a primary link by default 1`] = `
 <DocumentFragment>
   <a
     class="_link_379d57"
     data-kind="primary"
     rel="noreferrer noopener"
-  />
+  >
+    Text link
+  </a>
 </DocumentFragment>
 `;