+
+ ),
+
+ name: 'Inside other elements',
+
+ parameters: {
+ docs: {
+ source: {
+ type: 'dynamic',
+ },
+ },
+
+ chromatic: {
+ disableSnapshot: false,
+ },
+ },
+}
+
+export const DarkMode = {
+ render: DarkModeTemplate.bind({}),
+ name: 'Dark mode',
+
+ parameters: {
+ docs: {
+ source: {
+ type: 'dynamic',
+ },
+ },
+ },
+}
diff --git a/src/banner/banner.stories.mdx b/src/banner/banner.mdx
similarity index 87%
rename from src/banner/banner.stories.mdx
rename to src/banner/banner.mdx
index 647169615..5b17f7f8a 100644
--- a/src/banner/banner.stories.mdx
+++ b/src/banner/banner.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, ArgsTable, Description } from '@storybook/addon-docs'
+import { Meta, Story, Canvas, Controls, Description } from '@storybook/addon-docs/blocks'
import { Box } from '../box'
import { Text } from '../text'
import { Stack } from '../stack'
@@ -7,14 +7,9 @@ import { Button } from '../button'
import { PromoImage } from './story-promo-image'
import { Notice } from '../notice'
import { CheckboxField } from '../checkbox-field'
+import * as BannerStories from './banner.stories'
-
+
export function ArchiveIcon() {
return (
@@ -360,39 +355,7 @@ export function BannerContentExamples({ theme }) {
A simple banner component meant to be used to _inform_ the user of promotional content, disclaimers, warnings, as well as success and error states.
## Examples
@@ -402,15 +365,7 @@ A simple banner component meant to be used to _inform_ the user of promotional c
Banners can feature different icons or no icon at all. When the type is neutral, a custom icon can be provided; otherwise, preset icons corresponding to the respective type will be used.
### Actions
@@ -420,15 +375,7 @@ Banners can have an optional dismiss action, or a primary or tertiary CTA, but n
These actions can be combined, such as a primary CTA with a dismiss option, or a primary CTA with a dismiss option and an inline link.
### Copy
@@ -436,15 +383,7 @@ These actions can be combined, such as a primary CTA with a dismiss option, or a
Banners have two content options: a regular text that can span over multiple lines, or a bold header and a description with a secondary text color.
### Image
@@ -454,15 +393,7 @@ Banners can include images placed at the top, separated from the copy by a divid
Image banners do not feature icons but can include body text or a combination of a header and description. They also support optional inline links and a dismiss action.
### Content
@@ -470,20 +401,12 @@ Image banners do not feature icons but can include body text or a combination of
Banners can include extra content.
## Props
-
+
## Colors
@@ -545,13 +468,5 @@ up, here's a demo on how easily you can prepare banners for dark mode by setting
properties.
diff --git a/src/banner/banner.stories.jsx b/src/banner/banner.stories.jsx
new file mode 100644
index 000000000..bbe5796c7
--- /dev/null
+++ b/src/banner/banner.stories.jsx
@@ -0,0 +1,551 @@
+import * as React from 'react'
+
+import { Box } from '../box'
+import { Button } from '../button'
+import { CheckboxField } from '../checkbox-field'
+import { Notice } from '../notice'
+import { Stack } from '../stack'
+import { Text } from '../text'
+
+import { Banner } from './banner'
+import { PromoImage } from './story-promo-image'
+
+function ArchiveIcon() {
+ return (
+
+ )
+}
+
+function getButton(buttonText) {
+ return (
+
+ )
+}
+
+function getLongDescription() {
+ return 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident cumque recusandae quibusdam, veniam cum illo? Inventore, doloremque necessitatibus! Sequi porro alias mollitia, temporibus quidem, aut modi tempora placeat laborum eos sapiente necessitatibus autem ipsum officia rerum distinctio consectetur tenetur qui! Perspiciatis ab corporis, itaque alias ex optio voluptatum nulla consequatur aut explicabo dolorem rerum ratione magnam. Mollitia dignissimos et ad commodi quasi molestias fugiat repellendus, magni distinctio voluptate neque quos esse asperiores iure excepturi eligendi eaque veniam voluptas blanditiis temporibus, omnis laborum quidem autem totam. Iure, numquam. Totam facilis dolorum, consequatur, eligendi est dolores modi dolore maiores ipsum magnam a.'
+}
+
+function PlaygroundTemplate({ type, title, description, action }) {
+ return (
+
+ }
+ title={title}
+ description={description}
+ action={action}
+ />
+
+ )
+}
+
+function BannerIconExamples({ theme }) {
+ return (
+
+
+ }
+ description="This is a neutral message"
+ />
+
+
+
+
+
+
+
+
+
+ )
+}
+
+function BannerActionExamples({ theme }) {
+ return (
+
+
+ }
+ description="A read-only banner without any action"
+ />
+ }
+ description="A banner with a dismiss action"
+ onClose={() => ({})}
+ />
+ }
+ description="A banner with a primary CTA"
+ action={{
+ type: 'button',
+ label: 'Action',
+ variant: 'primary',
+ }}
+ />
+ }
+ description="A banner with a tertiary CTA"
+ action={{
+ type: 'button',
+ label: 'Action',
+ variant: 'tertiary',
+ }}
+ />
+ }
+ description="A banner with a primary CTA and a dismiss option"
+ action={{
+ type: 'button',
+ label: 'Action',
+ variant: 'primary',
+ }}
+ onClose={() => ({})}
+ />
+ }
+ description="A banner with a tertiary CTA and a dismiss option"
+ action={{
+ type: 'button',
+ label: 'Action',
+ variant: 'tertiary',
+ }}
+ onClose={() => ({})}
+ />
+ }
+ description="A banner with a inline link."
+ inlineLinks={[{ label: 'Learn more', href: '#' }]}
+ />
+ }
+ title="This is a sample title"
+ description="A banner with a inline link in secondary copy."
+ inlineLinks={[{ label: 'Learn more', href: '#' }]}
+ />
+ }
+ title="This is a sample title"
+ description="A banner with multiple inline links."
+ inlineLinks={[
+ { label: 'Learn more', href: '#' },
+ { label: 'Send feedback', href: '#' },
+ ]}
+ />
+ }
+ title="This is a sample title"
+ description="Here’s the message below the title."
+ />
+ }
+ title="This is a sample title"
+ description="Here’s the message below the title."
+ action={{
+ type: 'button',
+ label: 'Action',
+ variant: 'primary',
+ }}
+ onClose={() => ({})}
+ />
+ }
+ title="This is a sample title"
+ description={getLongDescription()}
+ action={{
+ type: 'button',
+ label: 'Action',
+ variant: 'primary',
+ }}
+ />
+ }
+ title="This is a sample title"
+ description={getLongDescription()}
+ action={{
+ type: 'button',
+ label: 'Action',
+ variant: 'primary',
+ }}
+ onClose={() => ({})}
+ />
+
+
+ )
+}
+
+function BannerCopyExamples({ theme }) {
+ return (
+
+
+ }
+ description="This is a some body text. It can span over two lines or more."
+ />
+ }
+ title="This is a sample title"
+ description="Here’s the message below the title. The copy can span over more than one line."
+ />
+
+
+ )
+}
+
+function BannerImageExamples({ theme }) {
+ return (
+
+
+ }
+ inlineLinks={[{ label: 'Learn more', href: '#' }]}
+ />
+ }
+ inlineLinks={[{ label: 'Learn more', href: '#' }]}
+ />
+ }
+ inlineLinks={[{ label: 'Learn more', href: '#' }]}
+ onClose={() => ({})}
+ />
+