Add storybook story for Notice component

WordPress · Feb 28, 2020 · 257656c · 257656c
1 parent 5fde188
commit 257656c
Show file tree

Hide file tree

Showing 2 changed files with 139 additions and 0 deletions.
diff --git a/packages/components/src/notice/stories/index.js b/packages/components/src/notice/stories/index.js
@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import { boolean, select, text } from '@storybook/addon-knobs';
+
+/**
+ * Internal dependencies
+ */
+import Notice from '../';
+
+export default {
+	title: 'Components/Notice',
+	component: Notice,
+};
+
+export const _default = () => {
+	const status = select(
+		'Status',
+		{
+			Warning: 'warning',
+			Success: 'success',
+			Error: 'error',
+			Info: 'info',
+		},
+		'info'
+	);
+	const isDismissible = boolean( 'Is Dismissible', true );
+
+	return (
+		<Notice status={ status } isDismissible={ isDismissible }>
+			<p>This is a notice.</p>
+		</Notice>
+	);
+};
+
+export const withCustomSpokenMessage = () => {
+	const status = select(
+		'Status',
+		{
+			Warning: 'warning',
+			Success: 'success',
+			Error: 'error',
+			Info: 'info',
+		},
+		'info'
+	);
+	const isDismissible = boolean( 'Is Dismissible', true );
+	const politeness = select(
+		'Politeness',
+		{
+			Assertive: 'assertive',
+			Polite: 'polite',
+		},
+		'assertive'
+	);
+	const spokenMessage = text(
+		'Spoken Message',
+		'This is a notice with a custom spoken message'
+	);
+
+	return (
+		<Notice
+			status={ status }
+			isDismissible={ isDismissible }
+			politeness={ politeness }
+			spokenMessage={ spokenMessage }
+		>
+			<p>This is a notice.</p>
+		</Notice>
+	);
+};
diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
@@ -4102,6 +4102,74 @@ exports[`Storyshots Components/Modal Default 1`] = `
 </button>
 `;
 
+exports[`Storyshots Components/Notice Default 1`] = `
+<div
+  className="components-notice is-info is-dismissible"
+>
+  <div
+    className="components-notice__content"
+  >
+    <p>
+      This is a notice.
+    </p>
+  </div>
+  <button
+    aria-label="Dismiss this notice"
+    className="components-button components-notice__dismiss has-icon"
+    onClick={[Function]}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height={24}
+      role="img"
+      viewBox="-2 -2 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Components/Notice With Custom Spoken Message 1`] = `
+<div
+  className="components-notice is-info is-dismissible"
+>
+  <div
+    className="components-notice__content"
+  >
+    <p>
+      This is a notice.
+    </p>
+  </div>
+  <button
+    aria-label="Dismiss this notice"
+    className="components-button components-notice__dismiss has-icon"
+    onClick={[Function]}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height={24}
+      role="img"
+      viewBox="-2 -2 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
 exports[`Storyshots Components/Panel Default 1`] = `
 <div
   className="components-panel"