Merge pull request #565 from thepolicylab-projectportals/docs/add-win…

…dow-width-examples-in-storybook docs: add viewport examples for most important responsive components in Storybook
thepolicylab-projectportals · Aug 15, 2023 · a36c21d · a36c21d
2 parents 7bf9a98 + 3d8f3ea
commit a36c21d
Show file tree

Hide file tree

Showing 14 changed files with 444 additions and 0 deletions.
diff --git a/packages/gatsby-theme-project-portal/src/components/Cards.stories.tsx b/packages/gatsby-theme-project-portal/src/components/Cards.stories.tsx
@@ -39,3 +39,33 @@ export const NoCards: Story = {
     nodes: [],
   },
 }
+
+export const TailwindXSWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXS" } },
+}
+
+export const TailwindSMWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindSM" } },
+}
+
+export const TailwindMDWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindMD" } },
+}
+
+export const TailwindLGWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindLG" } },
+}
+
+export const TailwindXLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXL" } },
+}
+
+export const Tailwind2XLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwind2XL" } },
+}
diff --git a/packages/gatsby-theme-project-portal/src/components/CollaboratorDetails.stories.tsx b/packages/gatsby-theme-project-portal/src/components/CollaboratorDetails.stories.tsx
@@ -34,3 +34,33 @@ export const NoRequirements: Story = {
 export const NoKeyDates: Story = {
   args: { ...Primary.args, keyDates: null },
 }
+
+export const TailwindXSWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXS" } },
+}
+
+export const TailwindSMWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindSM" } },
+}
+
+export const TailwindMDWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindMD" } },
+}
+
+export const TailwindLGWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindLG" } },
+}
+
+export const TailwindXLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXL" } },
+}
+
+export const Tailwind2XLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwind2XL" } },
+}
diff --git a/packages/gatsby-theme-project-portal/src/components/Navbar.stories.tsx b/packages/gatsby-theme-project-portal/src/components/Navbar.stories.tsx
@@ -36,3 +36,33 @@ export const OpenPageIsActive: Story = {
 export const NoLogo: Story = {
   args: { ...Primary.args, activePage: "Open", image: null },
 }
+
+export const TailwindXSWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXS" } },
+}
+
+export const TailwindSMWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindSM" } },
+}
+
+export const TailwindMDWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindMD" } },
+}
+
+export const TailwindLGWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindLG" } },
+}
+
+export const TailwindXLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXL" } },
+}
+
+export const Tailwind2XLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwind2XL" } },
+}
diff --git a/packages/gatsby-theme-project-portal/src/components/ProjectDetail.stories.tsx b/packages/gatsby-theme-project-portal/src/components/ProjectDetail.stories.tsx
@@ -92,3 +92,33 @@ export const Minimum: Story = {
     lastModified: new Date("2022-05-27T16:34:04.000Z"),
   },
 }
+
+export const TailwindXSWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXS" } },
+}
+
+export const TailwindSMWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindSM" } },
+}
+
+export const TailwindMDWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindMD" } },
+}
+
+export const TailwindLGWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindLG" } },
+}
+
+export const TailwindXLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXL" } },
+}
+
+export const Tailwind2XLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwind2XL" } },
+}
diff --git a/packages/gatsby-theme-project-portal/src/components/ProjectPage.stories.tsx b/packages/gatsby-theme-project-portal/src/components/ProjectPage.stories.tsx
@@ -24,3 +24,33 @@ export const Primary: Story = {
     image: loadImage("image/background.jpg"),
   },
 }
+
+export const TailwindXSWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXS" } },
+}
+
+export const TailwindSMWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindSM" } },
+}
+
+export const TailwindMDWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindMD" } },
+}
+
+export const TailwindLGWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindLG" } },
+}
+
+export const TailwindXLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXL" } },
+}
+
+export const Tailwind2XLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwind2XL" } },
+}
diff --git a/packages/gatsby-theme-project-portal/src/components/ProjectTeam.stories.tsx b/packages/gatsby-theme-project-portal/src/components/ProjectTeam.stories.tsx
@@ -19,3 +19,33 @@ export const Primary: Story = {
     defaultImage: contactImage,
   },
 }
+
+export const TailwindXSWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXS" } },
+}
+
+export const TailwindSMWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindSM" } },
+}
+
+export const TailwindMDWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindMD" } },
+}
+
+export const TailwindLGWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindLG" } },
+}
+
+export const TailwindXLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXL" } },
+}
+
+export const Tailwind2XLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwind2XL" } },
+}
diff --git a/packages/gatsby-theme-project-portal/src/components/ShareProject.stories.tsx b/packages/gatsby-theme-project-portal/src/components/ShareProject.stories.tsx
@@ -21,3 +21,33 @@ export default meta
 type Story = StoryObj<typeof ShareProject>
 
 export const Primary: Story = {}
+
+export const TailwindXSWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXS" } },
+}
+
+export const TailwindSMWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindSM" } },
+}
+
+export const TailwindMDWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindMD" } },
+}
+
+export const TailwindLGWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindLG" } },
+}
+
+export const TailwindXLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXL" } },
+}
+
+export const Tailwind2XLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwind2XL" } },
+}
diff --git a/packages/gatsby-theme-project-portal/src/layouts/AboutPageLayout.stories.tsx b/packages/gatsby-theme-project-portal/src/layouts/AboutPageLayout.stories.tsx
@@ -38,3 +38,33 @@ export const Primary: Story = {
     },
   },
 }
+
+export const TailwindXSWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXS" } },
+}
+
+export const TailwindSMWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindSM" } },
+}
+
+export const TailwindMDWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindMD" } },
+}
+
+export const TailwindLGWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindLG" } },
+}
+
+export const TailwindXLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXL" } },
+}
+
+export const Tailwind2XLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwind2XL" } },
+}
diff --git a/packages/gatsby-theme-project-portal/src/layouts/CardPageLayout.stories.tsx b/packages/gatsby-theme-project-portal/src/layouts/CardPageLayout.stories.tsx
@@ -37,3 +37,33 @@ export const Primary: Story = {
     },
   },
 }
+
+export const TailwindXSWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXS" } },
+}
+
+export const TailwindSMWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindSM" } },
+}
+
+export const TailwindMDWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindMD" } },
+}
+
+export const TailwindLGWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindLG" } },
+}
+
+export const TailwindXLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXL" } },
+}
+
+export const Tailwind2XLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwind2XL" } },
+}
diff --git a/packages/gatsby-theme-project-portal/src/layouts/ContactPageLayout.stories.tsx b/packages/gatsby-theme-project-portal/src/layouts/ContactPageLayout.stories.tsx
@@ -31,3 +31,33 @@ export const Primary: Story = {
     },
   },
 }
+
+export const TailwindXSWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXS" } },
+}
+
+export const TailwindSMWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindSM" } },
+}
+
+export const TailwindMDWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindMD" } },
+}
+
+export const TailwindLGWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindLG" } },
+}
+
+export const TailwindXLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXL" } },
+}
+
+export const Tailwind2XLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwind2XL" } },
+}
diff --git a/packages/gatsby-theme-project-portal/src/layouts/Layout.stories.tsx b/packages/gatsby-theme-project-portal/src/layouts/Layout.stories.tsx
@@ -38,3 +38,33 @@ export const Primary: Story = {
     children: <></>,
   },
 }
+
+export const TailwindXSWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXS" } },
+}
+
+export const TailwindSMWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindSM" } },
+}
+
+export const TailwindMDWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindMD" } },
+}
+
+export const TailwindLGWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindLG" } },
+}
+
+export const TailwindXLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwindXL" } },
+}
+
+export const Tailwind2XLWindow: Story = {
+  args: Primary.args,
+  parameters: { viewport: { defaultViewport: "tailwind2XL" } },
+}