@simplybusiness/mobius 4.2.2 → 4.2.3

package/src/components/TextField/TextField.stories.tsx

@@ -1,14 +1,16 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { useRef } from "react";
 import { search } from "@simplybusiness/icons";
 import { TextField, TextFieldProps } from "./TextField";
-import { excludeControls } from "../../utils/excludeControls";
+import { StoryContainer, excludeControls } from "../../utils";
 import { Segment, SegmentGroup } from "../Segment";
 import { Icon } from "../Icon";
 import { Button } from "../Button";
 import { Text } from "../Text/Text";
 
-export default {
+type StoryType = StoryObj<typeof TextField>;
+
+const meta: Meta<typeof TextField> = {
   title: "Forms/TextField",
   component: TextField,
   excludeStories: ["ExampleHorizontal"],
@@ -38,9 +40,16 @@ export default {
     isRequired: false,
     isReadOnly: false,
   },
+  decorators: [
+    Story => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
 };
 
-export const Normal: Meta<typeof TextField> = {
+export const Normal: StoryType = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
     label: "First name",
@@ -51,7 +60,7 @@ export const Normal: Meta<typeof TextField> = {
   },
 };
 
-export const Placeholder: Meta<typeof TextField> = {
+export const Placeholder: StoryType = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
     label: "Email",
@@ -62,7 +71,7 @@ export const Placeholder: Meta<typeof TextField> = {
   },
 };
 
-export const ControlledValue: Meta<typeof TextField> = {
+export const ControlledValue: StoryType = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
     label: "First name",
@@ -74,7 +83,7 @@ export const ControlledValue: Meta<typeof TextField> = {
   },
 };
 
-export const Disabled: Meta<typeof TextField> = {
+export const Disabled: StoryType = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
     label: "First name",
@@ -86,7 +95,7 @@ export const Disabled: Meta<typeof TextField> = {
   },
 };
 
-export const Valid: Meta<typeof TextField> = {
+export const Valid: StoryType = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
     label: "First name",
@@ -99,7 +108,7 @@ export const Valid: Meta<typeof TextField> = {
   },
 };
 
-export const Hidden: Meta<typeof TextField> = {
+export const Hidden: StoryType = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
     label: "Secret",
@@ -111,7 +120,7 @@ export const Hidden: Meta<typeof TextField> = {
   },
 };
 
-export const Invalid: Meta<typeof TextField> = {
+export const Invalid: StoryType = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
     label: "First name",
@@ -124,7 +133,7 @@ export const Invalid: Meta<typeof TextField> = {
   },
 };
 
-export const WithChildren: Meta<typeof TextField> = {
+export const WithChildren: StoryType = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
     label: "First name",
@@ -136,7 +145,7 @@ export const WithChildren: Meta<typeof TextField> = {
   },
 };
 
-export const WithPrefixInside: Meta<typeof TextField> = {
+export const WithPrefixInside: StoryType = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
     label: "What is your specific trade/profession?",
@@ -149,7 +158,7 @@ export const WithPrefixInside: Meta<typeof TextField> = {
   },
 };
 
-export const WithPrefixAndSuffixInside: Meta<typeof TextField> = {
+export const WithPrefixAndSuffixInside: StoryType = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
     label: "Amount",
@@ -163,7 +172,7 @@ export const WithPrefixAndSuffixInside: Meta<typeof TextField> = {
   },
 };
 
-export const WithPrefixInsideAndSuffixOutside: Meta<typeof TextField> = {
+export const WithPrefixInsideAndSuffixOutside: StoryType = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
     label: "What does your business do?",
@@ -177,7 +186,7 @@ export const WithPrefixInsideAndSuffixOutside: Meta<typeof TextField> = {
   },
 };
 
-export const WithPrefixOutsideAndSuffixInside: Meta<typeof TextField> = {
+export const WithPrefixOutsideAndSuffixInside: StoryType = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
     label: "What is your specific trade/profession?",
@@ -191,7 +200,7 @@ export const WithPrefixOutsideAndSuffixInside: Meta<typeof TextField> = {
   },
 };
 
-export const WithPrefixOutside: Meta<typeof TextField> = {
+export const WithPrefixOutside: StoryType = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {
     label: "Link",
@@ -204,7 +213,7 @@ export const WithPrefixOutside: Meta<typeof TextField> = {
   },
 };
 
-export const WithSuffixOutside: Meta<typeof TextField> = {
+export const WithSuffixOutside: StoryType = {
   render: (args: TextFieldProps) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const fieldRef = useRef<HTMLInputElement>(null);
@@ -255,3 +264,5 @@ export const ExampleHorizontal = () => (
     </Segment>
   </SegmentGroup>
 );
+
+export default meta;

package/src/components/Title/Title.mdx

@@ -1,6 +1,5 @@
 import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
-import { Title, TitleProps } from "./Title";
-import { excludeControls } from "../../utils/excludeControls";
+import { Title } from "./Title";
 import * as TitleStories from "./Title.stories";
 
 <Meta of={TitleStories} />

package/src/components/Title/Title.stories.tsx

@@ -1,15 +1,19 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Title, TitleProps } from "./Title";
 
-export default {
+type StoryType = StoryObj<typeof Title>;
+
+const meta: Meta<typeof Title> = {
   title: "Components/Title",
   component: Title,
 };
 
-export const Normal: Meta<typeof Title> = {
+export const Normal: StoryType = {
   render: (args: TitleProps) => <Title {...args} />,
   args: {
     title: "General Liability",
     description: "Business Co.",
   },
 };
+
+export default meta;

package/src/components/VisuallyHidden/VisuallyHidden.mdx

@@ -1,6 +1,4 @@
-import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
-import { VisuallyHidden, VisuallyHiddenProps } from ".";
-import { excludeControls } from "../../utils/excludeControls";
+import { Meta, Canvas } from "@storybook/blocks";
 import * as VisuallyHiddenStories from "./VisuallyHidden.stories";
 
 <Meta of={VisuallyHiddenStories} />

package/src/components/VisuallyHidden/VisuallyHidden.stories.tsx

@@ -1,15 +1,19 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { VisuallyHidden, VisuallyHiddenProps } from ".";
 
-export default {
+type StoryType = StoryObj<typeof VisuallyHidden>;
+
+const meta: Meta<typeof VisuallyHidden> = {
   title: "Components/VisuallyHidden",
   component: VisuallyHidden,
 };
 
-export const Normal: Meta<typeof VisuallyHidden> = {
+export const Normal: StoryType = {
   render: (args: VisuallyHiddenProps) => (
     <VisuallyHidden {...args}>
       This will only be visible to screen readers.
     </VisuallyHidden>
   ),
 };
+
+export default meta;

package/src/hooks/useBreakpoint/useBreakpoint.stories.tsx

@@ -1,13 +1,15 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { useBreakpoint } from "./useBreakpoint";
 
-export default {
+type StoryType = StoryObj<typeof useBreakpoint>;
+
+const meta: Meta<typeof useBreakpoint> = {
   title: "Theming/useBreakpoint",
+  // @ts-ignore
   component: useBreakpoint,
-  decorators: [(Story: any) => <Story />],
 };
 
-export const Normal: Meta<typeof useBreakpoint> = {
+export const Normal: StoryType = {
   render: () => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { breakpoint } = useBreakpoint();
@@ -20,7 +22,7 @@ export const Normal: Meta<typeof useBreakpoint> = {
   },
 };
 
-export const UpAndDown: Meta<typeof useBreakpoint> = {
+export const UpAndDown: StoryType = {
   render: () => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { down, up } = useBreakpoint();
@@ -35,3 +37,5 @@ export const UpAndDown: Meta<typeof useBreakpoint> = {
     );
   },
 };
+
+export default meta;

package/src/styles.d.ts

@@ -2,3 +2,5 @@ declare module "*.css" {
   const classes: { [className: string]: string };
   export default classes;
 }
+
+declare module "*.module.css";

package/src/utils/StoryContainer.module.css

@@ -0,0 +1,13 @@
+:root {
+  --story-container-width: auto;
+}
+
+@media (min-width: 641px) {
+  :root {
+    --story-container-width: var(--size-inner-container);
+  }
+}
+
+.storyContainer {
+  width: var(--story-container-width);
+}

package/src/utils/StoryContainer.tsx

@@ -0,0 +1,5 @@
+import styles from "./StoryContainer.module.css";
+
+export const StoryContainer = (props: Record<string, unknown>) => (
+  <div className={styles.storyContainer} {...props} />
+);

package/src/utils/index.ts

@@ -0,0 +1,8 @@
+export * from "./changeCSS";
+export * from "./excludeControls";
+export * from "./jestHTMLDialogPolyfill";
+export * from "./mergeRefs";
+export * from "./polyfill-tests";
+export * from "./sizeClasses";
+export * from "./spaceDelimitedList";
+export * from "./StoryContainer";