{`The `}
@@ -18,4 +18,6 @@ const Template: Story = args => (
);
-export const Default = Template.bind({});
+export const Default = {
+ render: Template
+};
diff --git a/packages/card/stories/ButtonCard.stories.tsx b/packages/card/stories/ButtonCard.stories.tsx
index 167b1cd32..e9680d578 100644
--- a/packages/card/stories/ButtonCard.stories.tsx
+++ b/packages/card/stories/ButtonCard.stories.tsx
@@ -1,5 +1,5 @@
import * as React from "react";
-import { Story, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import ButtonCard from "../components/ButtonCard";
@@ -20,40 +20,56 @@ export default {
}
} as Meta;
-const Template: Story = args =>
-
- I stay at a 2:1 aspect ratio
-
-
-);
+export const AspectRatio = {
+ render: args => (
+
+
+ I stay at a 2:1 aspect ratio
+
+
+ )
+};
diff --git a/packages/card/stories/Card.stories.tsx b/packages/card/stories/Card.stories.tsx
index 800e4df4b..aacb5bce7 100644
--- a/packages/card/stories/Card.stories.tsx
+++ b/packages/card/stories/Card.stories.tsx
@@ -1,6 +1,6 @@
import * as React from "react";
import { ButtonCard, Card, LinkCard } from "../index";
-import { Story, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react";
import { spacingSizeValues } from "../../storybookHelpers/controlConstants";
export default {
@@ -27,49 +27,46 @@ export default {
}
} as Meta;
-const Template: Story = args =>
- I stay at a 2:1 aspect ratio
-
-);
+export const ResponsivePaddingSize = {
+ render: Template,
-AspectRatio.args = { aspectRatio: "2:1" };
+ args: {
+ paddingSize: {
+ default: "s",
+ small: "m",
+ medium: "l",
+ large: "xl",
+ jumbo: "xxl"
+ },
+ children: "Responsive Card Content"
+ }
+};
-export const DefaultLinkCard = args => (
- {`Click here to copy the text: "${textToCopy}"`}
- {`Click here to copy the text: "${textToCopy}"`}
+ }
+};
diff --git a/packages/codesnippet/stories/CodeSnippet.stories.tsx b/packages/codesnippet/stories/CodeSnippet.stories.tsx
index ba8544ff3..6fb1fdd21 100644
--- a/packages/codesnippet/stories/CodeSnippet.stories.tsx
+++ b/packages/codesnippet/stories/CodeSnippet.stories.tsx
@@ -1,6 +1,6 @@
import * as React from "react";
import { CodeSnippet } from "../index";
-import { Story, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react";
import { CodeSnippetProps } from "../components/CodeSnippet";
const snippet = `cd ui-kit && npm start`;
@@ -20,34 +20,48 @@ export default {
}
} as Meta;
-const Template: StoryCheck out this exciting content
Form sections go here
Form sections go here
+ Form sections go here
+
-
- )
+ args: {
+ message: (
+ - Custom Heading Level 3 -
-- Detailed custom paragraph text. -
-
+
+ )
+ }
};
-export const WithActions = Template.bind({});
-WithActions.args = {
- primaryAction: + Custom Heading Level 3 +
++ Detailed custom paragraph text. +
+
-
- )
+export const MessageAsCustomMarkup = {
+ render: Template,
+
+ args: {
+ message: (
+ - There is something that we need - to tell you about -
-- And that something is detailed enough to require two lines and some - custom formatting -
-
+
+ )
+ }
};
-export const WithActions = Template.bind({});
-WithActions.args = {
- primaryAction: + There is something that we + need to tell you about +
++ And that something is detailed enough to require two lines and some + custom formatting +
+
-
- ResetLink will reset inherited Link styles to take on new styles.
-
-
-
- This red text is a link
-
- {" "}
- that is inheriting color from a Text component.
-
-);
+export const _ResetLink = {
+ render: args => (
+
+
+ ResetLink will reset inherited Link styles to take on new styles.
+
+
+
+ This red text is a link
+
+ {" "}
+ that is inheriting color from a Text component.
+
+ )
+};
diff --git a/packages/list/stories/borderedList.stories.tsx b/packages/list/stories/borderedList.stories.tsx
index 3048811dc..16905fe54 100644
--- a/packages/list/stories/borderedList.stories.tsx
+++ b/packages/list/stories/borderedList.stories.tsx
@@ -1,5 +1,5 @@
import * as React from "react";
-import { Story, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react";
import { BorderedList } from "../index";
export default {
@@ -7,7 +7,7 @@ export default {
component: BorderedList
} as Meta;
-const Template: Story = args => (
+const Template: StoryFn = args => (
-
-
-
-
-
+
-
+
-
- );
- return (
+export const _FullscreenModal = {
+ render: args => (
- {closeText}
-
-
-
- {title}
-
- Some subheader
-
-
-
-
-
-
-
-
-
-
- {ctaButton}
-
-
+
+ );
+ return (
+
+ {closeText}
+
+
+
+ {title}
+
+ Some subheader
+
+
+
+
+
+
+
+
+
+
+ {ctaButton}
+
+
- Universe
,
-
+ {({ isOpen, onClose }) => (
+
+ Continue
+
+ }
+ id="testId"
+ {...args}
+ >
+
+ {({ isOpen, onClose }) => (
+
+
+ )}
+
+
+ )}
+
+ );
+ }
+};
+
+export const CustomFocusedElement = {
+ render: args => (
+
+ {({ isOpen, onClose }) => (
+
+
-
- )}
-
-);
+
+ )}
+
+ )
+};
diff --git a/packages/pageheader/stories/PageHeader.stories.tsx b/packages/pageheader/stories/PageHeader.stories.tsx
index f3f35eb95..8dc1373ff 100644
--- a/packages/pageheader/stories/PageHeader.stories.tsx
+++ b/packages/pageheader/stories/PageHeader.stories.tsx
@@ -1,5 +1,5 @@
import * as React from "react";
-import { Story, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react";
import { PageHeader, PageHeaderBody, PageHeaderTabs } from "../index";
import { PrimaryButton, SecondaryButton, ResetButton } from "../../button";
import { Tabs, TabItem, TabTitle } from "../../tabs";
@@ -16,89 +16,100 @@ const action = () => alert("Action triggered");
export default {
title: "Page Structure/Page Header",
- component: PageHeader,
- args: {
- breadcrumbElements: [
+ component: PageHeader
+} as Meta;
+
+const Template: StoryFn = args => (
+
+
-
+
Milky Way
,
Earth
- ],
- actions: [
+ ]}
+ actions={[
First tab Content
- First tab Content
+ dropdown content
- - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - Lorem Ipsum has been the industry's standard dummy text ever since the - 1500s, when an unknown printer took a galley of type and scrambled it to - make a type specimen book. It has survived not only five centuries, but - also the leap into electronic typesetting, remaining essentially - unchanged. -
-dropdown content
+ + Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. It has survived not only five + centuries, but also the leap into electronic typesetting, remaining + essentially unchanged. +
+dropdown content
- - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - Lorem Ipsum has been the industry's standard dummy text ever since the - 1500s, when an unknown printer took a galley of type and scrambled it to - make a type specimen book. It has survived not only five centuries, but - also the leap into electronic typesetting, remaining essentially - unchanged. -
-dropdown content
+ + Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. It has survived not only five + centuries, but also the leap into electronic typesetting, remaining + essentially unchanged. +
+
@@ -41,4 +41,6 @@ const Template: Story = args => (
);
-export const Default = Template.bind({});
+export const Default = {
+ render: Template
+};
diff --git a/packages/styleUtils/layout/flexbox/stories/flex.stories.tsx b/packages/styleUtils/layout/flexbox/stories/flex.stories.tsx
index 6481b1d41..976f592c5 100644
--- a/packages/styleUtils/layout/flexbox/stories/flex.stories.tsx
+++ b/packages/styleUtils/layout/flexbox/stories/flex.stories.tsx
@@ -1,5 +1,5 @@
import * as React from "react";
-import { Story, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react";
import Flex from "../components/Flex";
import FlexItem from "../components/FlexItem";
import styled from "@emotion/styled";
@@ -47,7 +47,7 @@ export default {
}
} as Meta;
-const Template: Story = args => (
+const Template: StoryFn = args => (
- grow
-
-
-
-
-
+ shrink
-
-
- Use the Control panel to change my order.
-
-
- 2
-
-
- 3
-
-
- 4
-
-
-
- );
+export const ResponsiveFlexValue = {
+ render: args => (
+
-
- 0 or 3
+
+ growFactor 2
+
+
+ growFactor 1
+
+
+ growFactor 1
+
+
+
+
+ )
+};
+
+export const Order = {
+ render: args => {
+ return (
+
+
+
+ Use the Control panel to change my order.
2
@@ -153,8 +136,37 @@ export const ResponsiveOrder = args => {
3
+
+ 4
+
-
- );
+ );
+ }
+};
+
+export const ResponsiveOrder = {
+ render: args => {
+ return (
+ - The first flex item is `flex="shrink"` on narrower viewports and - `flex="grow"` on wider viewports -
+export const FlexShrink = { + render: args => (
- dyanmic
-
+
@@ -89,63 +70,65 @@ export const ResponsiveFlexValue = args => (
-
-);
-
-export const ResponsiveGrowFactor = args => (
-
-
-
-
- growFactor 2
-
-
- growFactor 1
-
-
- growFactor 1
-
-
-
-
-);
+ )
+};
-export const Order = args => {
- return (
- - The first flex item has a grow factor of 1 on narrower viewports, and a - grow factor of 3 on wider viewports -
-
+
+
+
+
+
+
+
+
+
+ )
};
-export const ResponsiveOrder = args => {
- return (
+export const ResponsiveGrowFactor = {
+ render: args => (
+ The first flex item is `flex="shrink"` on narrower viewports and + `flex="grow"` on wider viewports +
+
+ dyanmic
+
+
+ grow
+
+ - The first flex-item has an order of 0 on narrower viewports, and an - order of 3 on wider viewports + The first flex item has a grow factor of 1 on narrower viewports, and a + grow factor of 3 on wider viewports
+
+
+
+ 0 or 3
+
+
+ 2
+
+
+ 3
+
+
+
+
+ );
+ }
};
diff --git a/packages/styleUtils/layout/gridList/stories/GridList.stories.tsx b/packages/styleUtils/layout/gridList/stories/GridList.stories.tsx
index 15919a13b..e025ffcda 100644
--- a/packages/styleUtils/layout/gridList/stories/GridList.stories.tsx
+++ b/packages/styleUtils/layout/gridList/stories/GridList.stories.tsx
@@ -5,7 +5,7 @@ import {
spaceL,
themeBrandPrimary
} from "../../../../design-tokens/build/js/designTokens";
-import { Story, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react";
import { spacingSizeValues } from "../../../../storybookHelpers/controlConstants";
const GridChild = styled.div`
@@ -47,14 +47,19 @@ export default {
}
} as Meta;
-const Template: Story+ The first flex-item has an order of 0 on narrower viewports, and an + order of 3 on wider viewports +
+Lorem Ipsum is simply dummy text
of the printing and typesetting industry.
@@ -37,14 +37,19 @@ const Template: Story
-
-
-
-
- );
-};
+ return (
+ Options:
-{bgOptions}
-
+
+
+
+
+ );
+ },
+
+ args: {
+ bgImageUrl: "https://via.placeholder.com/150",
+ bgImageOptions: {
+ size: "contain",
+ repeat: "repeat-x",
+ position: "top-left"
+ }
+ },
-BackgroundImageWithOptions.args = {
- bgImageUrl: "https://via.placeholder.com/150",
- bgImageOptions: {
- size: "contain",
- repeat: "repeat-x",
- position: "top-left"
+ parameters: {
+ controls: {
+ exclude: ["vertAlignChildren", "textAlign", "bgColor", "display"]
+ }
}
};
-BackgroundImageWithOptions.parameters = {
- controls: {
- exclude: ["vertAlignChildren", "textAlign", "bgColor", "display"]
+
+export const DisplayInline: StoryObjOptions:
+{bgOptions}
+
+
+ ),
-DisplayInline.args = { display: "inline" };
-DisplayInline.parameters = {
- controls: { exclude: ["vertAlignChildren", "textAlign"] }
+ parameters: { controls: { exclude: ["display"] } }
};
-export const VerticalAlignChildren: StoryUse the Control panel to try other alignments.
+
+
+
+
+ Child 1
+ Child 2
+ Child 3
+
-
-);
-
-VerticalAlignChildren.parameters = { controls: { exclude: ["display"] } };
-
-export const CustomTag = args => (
- Use the Control panel to try other alignments.
+export const CustomTag = { + render: args => (
-
-
+ {`This is rendered using a tag`}
- Child 1
- Child 2
- Child 3
+
-
- {`This is rendered using a tag`}
-
-
-);
+ )
+};
diff --git a/packages/styleUtils/modifiers/stories/SpacingBox.stories.tsx b/packages/styleUtils/modifiers/stories/SpacingBox.stories.tsx
index e6b538fce..7eb629f0e 100644
--- a/packages/styleUtils/modifiers/stories/SpacingBox.stories.tsx
+++ b/packages/styleUtils/modifiers/stories/SpacingBox.stories.tsx
@@ -1,6 +1,6 @@
import * as React from "react";
import SpacingBox, { SpacingBoxProps } from "../components/SpacingBox";
-import { Story, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react";
import styled from "@emotion/styled";
import { themeBrandPrimary } from "../../../design-tokens/build/js/designTokens";
import {
@@ -51,15 +51,17 @@ export default {
}
} as Meta;
-const Template: StoryResize your viewport width to see the spacing change
- Resize your viewport width to see the text below change size responsively. -
-+ Resize your viewport width to see the text below change size + responsively. +
+@@ -48,120 +48,132 @@ const Template: Story = args => (
- Heading Level 1
- Sample Caption Text
-
+export const UsingTypographyComponents = {
+ render: args => (
+
+ Heading Level 1
+ Sample Caption Text
+
+
+
+ Heading Level Two
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting
+ industry. Lorem Ipsum has been the industry's standard dummy text
+ ever since the 1500s, when an unknown printer took a galley of type
+ and scrambled it to make a type specimen book.
+
+
-
+ Heading Level Three
+
+ It has survived not only five centuries, but also the leap into
+ electronic typesetting, remaining essentially unchanged. It was
+ popularised in the 1960s with the release of Letraset sheets
+ containing Lorem Ipsum passages, and more recently with desktop
+ publishing software like Aldus PageMaker including versions of Lorem
+ Ipsum.
+
+
+
- Heading Level Two
-
+export const ContainingAList = {
+ render: args => (
+
+
+
-
-
- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. -
- Heading Level Three
-
+
+
-
- It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. -
- Lorem Ipsum is simply dummy text of the printing and typesetting - industry. Lorem Ipsum has been the industry's standard dummy text ever - since the 1500s, when an unknown printer took a galley of type and - scrambled it to make a type specimen book. -
-- It has survived not only five centuries, but also the leap into - electronic typesetting, remaining essentially unchanged. It was - popularised in the 1960s with the release of Letraset sheets containing - Lorem Ipsum passages, and more recently with desktop publishing software - like Aldus PageMaker including versions of Lorem Ipsum. -
--
-
- List item one -
- List item two -
- List item three -
- List item four -
- List item five -
- Lorem Ipsum is simply dummy text of the printing and typesetting - industry. Lorem Ipsum has been the industry's standard dummy text ever - since the 1500s, when an unknown printer took a galley of type and - scrambled it to make a type specimen book. -
-- It has survived not only five centuries, but also the leap into - electronic typesetting, remaining essentially unchanged. It was - popularised in the 1960s with the release of Letraset sheets containing - Lorem Ipsum passages, and more recently with desktop publishing software - like Aldus PageMaker including versions of Lorem Ipsum. -
--
+
- List item one +
- List item two +
- List item three +
- List item four +
- List item five +
+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. +
++ It has survived not only five centuries, but also the leap into + electronic typesetting, remaining essentially unchanged. It was + popularised in the 1960s with the release of Letraset sheets + containing Lorem Ipsum passages, and more recently with desktop + publishing software like Aldus PageMaker including versions of Lorem + Ipsum. +
+ +- Lorem Ipsum is simply dummy text of the printing and typesetting - industry. Lorem Ipsum has been the industry's standard dummy text ever - since the 1500s, when an unknown printer took a galley of type and - scrambled it to make a type specimen book. -
-- It has survived not only five centuries, but also the leap into - electronic typesetting, remaining essentially unchanged. It was - popularised in the 1960s with the release of Letraset sheets containing - Lorem Ipsum passages, and more recently with desktop publishing software - like Aldus PageMaker including versions of Lorem Ipsum. -
-- Lorem Ipsum is simply dummy text of the printing and typesetting - industry. Lorem Ipsum has been the industry's standard dummy text ever - since the 1500s, when an unknown printer took a galley of type and - scrambled it to make a type specimen book. -
-- It has survived not only five centuries, but also the leap into - electronic typesetting, remaining essentially unchanged. It was - popularised in the 1960s with the release of Letraset sheets containing - Lorem Ipsum passages, and more recently with desktop publishing software - like Aldus PageMaker including versions of Lorem Ipsum. -
-+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. +
++ It has survived not only five centuries, but also the leap into + electronic typesetting, remaining essentially unchanged. It was + popularised in the 1960s with the release of Letraset sheets + containing Lorem Ipsum passages, and more recently with desktop + publishing software like Aldus PageMaker including versions of Lorem + Ipsum. +
++ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. +
++ It has survived not only five centuries, but also the leap into + electronic typesetting, remaining essentially unchanged. It was + popularised in the 1960s with the release of Letraset sheets + containing Lorem Ipsum passages, and more recently with desktop + publishing software like Aldus PageMaker including versions of Lorem + Ipsum. +
+
-
-
- Tooltip Content
-
-
- }
- >
- Dropdown Trigger
-
-
-);
+export const MountedInsideDropdown = {
+ render: args => (
+
+
+
+ Tooltip Content
+
+
+ }
+ >
+ Dropdown Trigger
+
+
+ )
+};
-export const DefaultMaxWidth = args => (
-
-
- content that is greater than 100px
+export const MinOrMaxWidth = {
+ render: args => (
+ <>
+
+ content
-
+
+ )
+};
+
+export const ContentWidth = {
+ render: args => (
+
+ content that is greater than 100px
+
+
+ {Story()}
]
} as Meta;
-const Template: Story = args => (
+const Template: StoryFn = args => (