Merge pull request #185 from newjersey/chore/0402-migrate-components

Add Sub pages for template layouts

Author: timwright12

.storybook/preview.ts

@@ -4,18 +4,6 @@ import type { StoryFn, StoryContext, Args } from "@storybook/web-components-vite
 import "@uswds/uswds";
 import "./storybook.css";
 
-// A decorator to wrap stories in a div that applies padding and background color based on theme
-const storyWrapperDecorator = <TArgs extends Args>(
-  Story: StoryFn<TArgs>,
-  context: StoryContext<TArgs>,
-) => {
-  const className = context.args.theme === "dark" ? "usa-dark-background" : "";
-
-  return html`
-    <div class="display-block padding-2 ${className}">${Story(context.args, context)}</div>
-  `;
-};
-
 const preview: Preview = {
   parameters: {
     layout: "fullscreen",
@@ -39,7 +27,7 @@ const preview: Preview = {
       test: "todo",
     },
   },
-  decorators: [storyWrapperDecorator],
+  decorators: [],
 };
 
 export default preview;

.storybook/storybook.css

@@ -8,3 +8,8 @@
 .margin-top-0 {
   margin-top: 0 !important;
 }
+
+.docs-story,
+#storybook-root {
+  padding: 1rem;
+}

package.json

@@ -33,6 +33,9 @@
     "url": "https://github.com/newjersey/njwds/issues"
   },
   "homepage": "https://github.com/newjersey/njwds#readme",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "dependencies": {
     "@uswds/uswds": "3.10.0",
     "lit": "^3.3.2"

src/stories/elements/Link/Link.stories.ts

@@ -6,12 +6,6 @@ const meta = {
   title: "Elements/Link",
   tags: ["autodocs"],
   render: (args) => Link(args),
-  argTypes: {
-    theme: {
-      control: { type: "select" },
-      options: ["light", "dark"],
-    },
-  },
 } satisfies Meta<LinkProps>;
 
 export default meta;
@@ -20,7 +14,6 @@ type Story = StoryObj<LinkProps>;
 export const Basic: Story = {
   args: {
     label: "Link text",
-    theme: "light",
     external: false,
   },
 };

src/stories/elements/Link/Link.ts

@@ -13,10 +13,26 @@ export const Link = ({ label, theme = "light", external = false }: LinkProps) =>
   const linkTheme = theme !== "light" ? "" : "";
 
   return html`
-    <a
-      href="!#"
-      class=${["usa-link", external && "usa-link--external", linkTheme].filter(Boolean).join(" ")}
-      >${label}</a
-    >
+    <p>
+      <a
+        href="!#"
+        class=${["usa-link", external && "usa-link--external", linkTheme].filter(Boolean).join(" ")}
+      >
+        ${label}
+      </a>
+    </p>
+
+    <div class="usa-dark-background">
+      <p>
+        <a
+          href="!#"
+          class=${["usa-link", external && "usa-link--external", linkTheme]
+            .filter(Boolean)
+            .join(" ")}
+        >
+          ${label}
+        </a>
+      </p>
+    </div>
   `;
 };

src/stories/templates/Documentation/Documentation.stories.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+
+import { DocumentationLayout } from "./Documentation";
+import "@uswds/uswds";
+
+const meta = {
+  title: "Templates/Documentation",
+  tags: ["autodocs"],
+  render: () => DocumentationLayout(),
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};