From 6eca28e92749bc5d621c13d991f1cff74be5eca1 Mon Sep 17 00:00:00 2001 From: John Gerrard Holland Date: Thu, 10 Aug 2023 17:29:29 +0200 Subject: [PATCH 1/2] docs: add viewport sizes to storybook config --- packages/storybook/.storybook/preview.js | 54 ++++++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/packages/storybook/.storybook/preview.js b/packages/storybook/.storybook/preview.js index 1e3a40792..f74a7546b 100644 --- a/packages/storybook/.storybook/preview.js +++ b/packages/storybook/.storybook/preview.js @@ -1,5 +1,6 @@ import { withThemeByClassName } from "@storybook/addon-styling" import { action } from "@storybook/addon-actions" +import { MINIMAL_VIEWPORTS, INITIAL_VIEWPORTS } from "@storybook/addon-viewport" // Gatsby's Link overrides: // Gatsby Link calls the `enqueue` & `hovering` methods on the global variable ___loader. @@ -19,6 +20,52 @@ window.___navigate = (pathname) => { action("NavigateTo:")(pathname) } +const customViewports = { + tailwindXS: { + name: "Tailwind XS", + styles: { + width: "480px", + height: "600px", + }, + }, + tailwindSM: { + name: "Tailwind SM", + styles: { + width: "640px", + height: "768px", + }, + }, + tailwindMD: { + name: "Tailwind MD", + styles: { + width: "768px", + height: "768px", + }, + }, + + tailwindLG: { + name: "Tailwind LG", + styles: { + width: "1024px", + height: "768px", + }, + }, + tailwindXL: { + name: "Tailwind XL", + styles: { + width: "1280px", + height: "800px", + }, + }, + tailwind2XL: { + name: "Tailwind 2XL", + styles: { + width: "1536px", + height: "1200px", + }, + }, +} + import "@thepolicylab-projectportals/gatsby-theme-project-portal/src/styles/global.css" /** @type { import('@storybook/react').Preview } */ const preview = { @@ -30,6 +77,13 @@ const preview = { date: /(Date|opportunityCloses|created|lastModified)$/, }, }, + viewport: { + viewports: { + ...MINIMAL_VIEWPORTS, + ...customViewports, + ...INITIAL_VIEWPORTS, + }, + }, }, decorators: [ From c7f2d37d3314419474935de380603b3447f36b04 Mon Sep 17 00:00:00 2001 From: John Gerrard Holland Date: Thu, 10 Aug 2023 17:30:47 +0200 Subject: [PATCH 2/2] docs: add viewport sizes to the most prominent responsive components --- .../src/components/Cards.stories.tsx | 30 +++++++++++++++++++ .../CollaboratorDetails.stories.tsx | 30 +++++++++++++++++++ .../src/components/Navbar.stories.tsx | 30 +++++++++++++++++++ .../src/components/ProjectDetail.stories.tsx | 30 +++++++++++++++++++ .../src/components/ProjectPage.stories.tsx | 30 +++++++++++++++++++ .../src/components/ProjectTeam.stories.tsx | 30 +++++++++++++++++++ .../src/components/ShareProject.stories.tsx | 30 +++++++++++++++++++ .../src/layouts/AboutPageLayout.stories.tsx | 30 +++++++++++++++++++ .../src/layouts/CardPageLayout.stories.tsx | 30 +++++++++++++++++++ .../src/layouts/ContactPageLayout.stories.tsx | 30 +++++++++++++++++++ .../src/layouts/Layout.stories.tsx | 30 +++++++++++++++++++ .../src/layouts/ProjectDetailPage.stories.tsx | 30 +++++++++++++++++++ .../layouts/ThankYouPageLayout.stories.tsx | 30 +++++++++++++++++++ 13 files changed, 390 insertions(+) diff --git a/packages/gatsby-theme-project-portal/src/components/Cards.stories.tsx b/packages/gatsby-theme-project-portal/src/components/Cards.stories.tsx index 17410825e..737f00c27 100644 --- a/packages/gatsby-theme-project-portal/src/components/Cards.stories.tsx +++ b/packages/gatsby-theme-project-portal/src/components/Cards.stories.tsx @@ -38,3 +38,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 index d6fb9eb1c..2ef30d953 100644 --- 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 index 1601f7cef..03903e453 100644 --- 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 index f13b0b381..addbc9ad6 100644 --- 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 index c14c06591..40448a0c6 100644 --- 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 index c7563f1fa..ac4848788 100644 --- 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 index 8959f86b4..fcac21c1a 100644 --- 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 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 index 9e57b1b88..7e95493ff 100644 --- 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 index 610ba000f..d65ac9853 100644 --- 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 index 54b9feb86..9f8501a2f 100644 --- 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 index 2628d2445..ea6d45fd6 100644 --- 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" } }, +} diff --git a/packages/gatsby-theme-project-portal/src/layouts/ProjectDetailPage.stories.tsx b/packages/gatsby-theme-project-portal/src/layouts/ProjectDetailPage.stories.tsx index fa9261486..6071331a8 100644 --- a/packages/gatsby-theme-project-portal/src/layouts/ProjectDetailPage.stories.tsx +++ b/packages/gatsby-theme-project-portal/src/layouts/ProjectDetailPage.stories.tsx @@ -32,3 +32,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/ThankYouPageLayout.stories.tsx b/packages/gatsby-theme-project-portal/src/layouts/ThankYouPageLayout.stories.tsx index 790490bb2..d9491aafc 100644 --- a/packages/gatsby-theme-project-portal/src/layouts/ThankYouPageLayout.stories.tsx +++ b/packages/gatsby-theme-project-portal/src/layouts/ThankYouPageLayout.stories.tsx @@ -20,3 +20,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" } }, +}