Adding request layout POCs to scaffolding

docs/components/Cluster/Web.stories.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Cluster } from "@jobber/components/Cluster";
+import { Button } from "@jobber/components/Button";
+import { Chip } from "@jobber/components/Chip";
+import { ContentBlock } from "@jobber/components/ContentBlock";
+
+export default {
+  title: "Components/Layouts and Structure/Cluster/Web",
+  component: Cluster,
+  parameters: {
+    viewMode: "story",
+    previewTabs: { code: { hidden: false } },
+  },
+} as ComponentMeta<typeof Cluster>;
+
+const BasicTemplate: ComponentStory<typeof Cluster> = args => (
+  <ContentBlock maxWidth="100%">
+    <Cluster {...args} />
+  </ContentBlock>
+);
+
+export const Basic = BasicTemplate.bind({});
+Basic.args = {
+  children: (
+    <>
+      <Button label="Save" />
+      <Button label="Cancel" type="secondary" />
+      <Button label="Delete" variation="destructive" type="secondary" />
+    </>
+  ),
+};
+
+export const WithChips = BasicTemplate.bind({});
+WithChips.args = {
+  children: (
+    <>
+      <Chip label="Active" />
+      <Chip label="High Priority" />
+      <Chip label="In Progress" />
+      <Chip label="Needs Review" />
+    </>
+  ),
+};
+
+export const CustomSpacing = BasicTemplate.bind({});
+CustomSpacing.args = {
+  gap: "large",
+  children: (
+    <>
+      <Chip label="Large" />
+      <Chip label="Spacing" />
+      <Chip label="Between" />
+      <Chip label="Items" />
+    </>
+  ),
+};
+
+export const CustomAlignment = BasicTemplate.bind({});
+CustomAlignment.args = {
+  justify: "center",
+  align: "center",
+  children: (
+    <>
+      <Button label="Centered" />
+      <Button label="Items" type="secondary" />
+      <Button label="In Cluster" type="secondary" />
+    </>
+  ),
+};

docs/components/ContentBlock/Web.stories.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { ContentBlock } from "@jobber/components/ContentBlock";
+import { Text } from "@jobber/components/Text";
+import { Button } from "@jobber/components/Button";
+import { Stack } from "@jobber/components/Stack";
+import { Cluster } from "@jobber/components/Cluster";
+
+export default {
+  title: "Components/Layouts and Structure/ContentBlock/Web",
+  component: ContentBlock,
+  parameters: {
+    viewMode: "story",
+    previewTabs: { code: { hidden: false } },
+  },
+} as ComponentMeta<typeof ContentBlock>;
+
+const BasicTemplate: ComponentStory<typeof ContentBlock> = args => (
+  <ContentBlock {...args}>
+    <Stack>
+      <Text>
+        This is content that demonstrates the ContentBlock component&rsquo;s
+        ability to constrain and justify content within a container. The content
+        will be justified horizontally and have a maximum width defined by the
+        maxWidth prop. If gutters are applied, they will be applied when there
+        is no more room at the edges of the container to prevent it from bumping
+        up against the edges.
+      </Text>
+      <Cluster
+        justify={
+          args.justify as "center" | "start" | "end" | "between" | "around"
+        }
+      >
+        <Button>
+          <Button.Label>Click me</Button.Label>
+        </Button>
+      </Cluster>
+    </Stack>
+  </ContentBlock>
+);
+
+export const Basic = BasicTemplate.bind({});
+Basic.args = {
+  maxWidth: "50ch",
+  justify: "left",
+};
+
+export const WithGutters = BasicTemplate.bind({});
+WithGutters.args = {
+  maxWidth: "50ch",
+  gutters: "base",
+};
+
+export const WithAndText = BasicTemplate.bind({});
+WithAndText.args = {
+  maxWidth: "50ch",
+  justify: "center",
+  andText: true,
+};
+
+const CustomMaxWidthTemplate: ComponentStory<typeof ContentBlock> = args => (
+  <ContentBlock {...args}>
+    <Stack>
+      <Text>
+        This content demonstrates a custom maximum width constraint. The
+        ContentBlock component allows you to specify any valid CSS length unit
+        for the maxWidth prop.
+      </Text>
+    </Stack>
+  </ContentBlock>
+);
+
+export const CustomMaxWidth = CustomMaxWidthTemplate.bind({});
+CustomMaxWidth.args = {
+  maxWidth: "12ch",
+  gutters: "large",
+};

docs/components/Cover/Web.stories.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Cover } from "@jobber/components/Cover";
+import { Box } from "@jobber/components/Box";
+import { Stack } from "@jobber/components/Stack";
+import { Heading } from "@jobber/components/Heading";
+import { Text } from "@jobber/components/Text";
+
+export default {
+  title: "Components/Layouts and Structure/Cover/Web",
+  component: Cover,
+  parameters: {
+    viewMode: "story",
+    previewTabs: { code: { hidden: false } },
+  },
+} as ComponentMeta<typeof Cover>;
+
+const BasicTemplate: ComponentStory<typeof Cover> = args => (
+  <Cover {...args}>
+    <Cover.Center>
+      <Box padding="base" background="surface--background">
+        <Stack>
+          <Heading level={2}>Centered Content</Heading>
+          <Text>This content is vertically centered within the Cover</Text>
+        </Stack>
+      </Box>
+    </Cover.Center>
+  </Cover>
+);
+
+export const Basic = BasicTemplate.bind({});
+Basic.args = {
+  minHeight: "30vh",
+};
+
+export const WithTopAndBottom: ComponentStory<typeof Cover> = () => (
+  <Cover minHeight="50vh">
+    <Stack>
+      <Text>Content at the top</Text>
+    </Stack>
+    <Cover.Center>
+      <Box padding="base" background="surface--background">
+        <Stack>
+          <Heading level={2}>Centered Content</Heading>
+          <Text>This content stays centered while content flows around it</Text>
+        </Stack>
+      </Box>
+    </Cover.Center>
+    <Stack>
+      <Text>Content at the bottom</Text>
+    </Stack>
+  </Cover>
+);
+
+export const TallCover: ComponentStory<typeof Cover> = () => (
+  <Cover minHeight="80vh">
+    <Cover.Center>
+      <Box padding="base" background="surface--background">
+        <Stack>
+          <Heading level={2}>Tall Cover</Heading>
+          <Text>This cover takes up most of the viewport height</Text>
+        </Stack>
+      </Box>
+    </Cover.Center>
+  </Cover>
+);

docs/components/Frame/Web.stories.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Frame } from "@jobber/components/Frame";
+import { Box } from "@jobber/components/Box";
+import { Heading } from "@jobber/components/Heading";
+import { Text } from "@jobber/components/Text";
+
+export default {
+  title: "Components/Layouts and Structure/Frame/Web",
+  component: Frame,
+  parameters: {
+    viewMode: "story",
+    previewTabs: { code: { hidden: false } },
+  },
+} as ComponentMeta<typeof Frame>;
+
+const BasicTemplate: ComponentStory<typeof Frame> = args => (
+  <Frame {...args}>
+    <img src="https://placehold.co/600x400?text=Frame" alt="Placeholder" />
+  </Frame>
+);
+
+export const Basic = BasicTemplate.bind({});
+Basic.args = {
+  aspectX: 16,
+  aspectY: 9,
+};
+
+export const Square = BasicTemplate.bind({});
+Square.args = {
+  aspectX: 1,
+  aspectY: 1,
+};
+
+export const FourByThree = BasicTemplate.bind({});
+FourByThree.args = {
+  aspectX: 4,
+  aspectY: 3,
+};
+
+export const WithContent: ComponentStory<typeof Frame> = () => (
+  <Frame>
+    <Box padding="base">
+      <Heading level={2}>It Works for Content As Well</Heading>
+      <Text>Everything is centered and cropped to fit the aspect ratio.</Text>
+    </Box>
+  </Frame>
+);