ADAPT-1178 ADAPT-1785 ADAPT-1789: Alert Component and Misc Storybook …

…Config (#5) * Playing around with an idea. * Playing around some more. * added twin. * Wip. * Wip. * Demo code. * wip! * moar.better. * switch. * Moar updates. * fixup! progress. * Remove css file. * fixup! wip. * fixup! wip. * fixup! wip. * fixup! wip. * Fixup! more stuff. * Element stories. * fixup! stories. * ADAPT-000: Alert Icon polishing. * Alert color. * fixup! wip. * fixup! small stuff. * fixup! small stuff. * ADAPT-000: Label Positioning. * fixup! small tweaks. * fixup! dependencies. * fixup! stuff. * More Stories. * fixup! tweaks. * Added psuedo state addon. * ADAPT-000: Clean up npm dependencies and scripts. * Getting testing going. * Fix console errors. * Fix testing errors. * Fixup! passing tests. * fixup! added prehooks. * Missed adding decorators to headings. * Update package.json Co-authored-by: Yvonne Tang <[email protected]> * Update package.json Co-authored-by: Yvonne Tang <[email protected]> * Use react version ^16.14.0 and minor alert style tweaks * Add su-type-0 to paragraph styles Co-authored-by: Yvonne Tang <[email protected]>
SU-SWS · Feb 16, 2021 · 5cf6009 · 5cf6009
1 parent 403e00f
commit 5cf6009
Show file tree

Hide file tree

Showing 50 changed files with 25,665 additions and 51,530 deletions.
diff --git a/.gitignore b/.gitignore
@@ -42,3 +42,4 @@ example/package-lock.json
 
 # Storybook
 storybook-static
+.jest-test-results.json
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -2,17 +2,27 @@ module.exports = {
   "stories": [
     "../src/**/*.stories.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)",
-    "../storybook/**/*.stories.mdx",
-    "../storybook/**/*.stories.@(js|jsx|ts|tsx)"
+    "./stories/*.stories.@(js|jsx|ts|tsx)"
   ],
   "addons": [
+    // Default core extention
     "@storybook/addon-essentials",
+    // https://www.npmjs.com/package/@storybook/addon-jest
+    "@storybook/addon-jest",
+    // This came out of the box. Better find out what it is.
     "@storybook/addon-links",
     // https://storybook.js.org/addons/@whitespace/storybook-addon-html
     "@whitespace/storybook-addon-html",
     // https://storybook.js.org/addons/storybook-addon-designs
     "storybook-addon-designs",
+    // https://www.npmjs.com/package/@storybook/addon-a11y
+    "@storybook/addon-a11y",
     // https://storybook.js.org/addons/storybook-dark-mode
-    "storybook-dark-mode"
-  ]
+    "storybook-dark-mode",
+    // https://storybook.js.org/addons/storybook-addon-pseudo-states
+    "storybook-addon-pseudo-states"
+  ],
+  reactOptions: {
+    fastRefresh: true,
+  }
 }
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,11 +1,160 @@
+// Decanter Styles.
+import 'decanter/dist/decanter.css'
+import 'decanter/dist/decanter.js'
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { addDecorator } from '@storybook/react'
+import { withTests } from '@storybook/addon-jest'
+import results from './.jest-test-results.json';
 
+// Our Breakpoints
+const customViewports = {
+  sm: {
+    name: 'Small Breakpoint',
+    styles: {
+      width: '576px',
+      height: '328px'
+    }
+  },
+  md: {
+    name: 'Medium Breakpoint',
+    styles: {
+      width: '768px',
+      height: '1024px'
+    }
+  },
+  lg: {
+    name: 'Large Breakpoint',
+    styles: {
+      width: '992px',
+      height: '1200px'
+    }
+  },
+  xl: {
+    name: 'Extra Large Breakpoint',
+    styles: {
+      width: '1200px',
+      height: '1024px'
+    }
+  },
+  '2xl': {
+    name: '2X Extra Large Breakpoint',
+    styles: {
+      width: '1500px',
+      height: '1100px'
+    }
+  }
+};
+
+// Configuration.
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: { expanded: true },
   html: {
     prettier: {
       tabWidth: 2,
-      useTabs: false,
-      htmlWhitespaceSensitivity: 'strict',
+      useTabs: false
+    },
+  },
+  viewport: {
+    viewports: {
+      ...INITIAL_VIEWPORTS,
+      ...customViewports
     },
   },
+  backgrounds: {
+    default: 'White',
+    values: [
+      {
+        name: 'White',
+        value: '#FFFFFF',
+      },
+      {
+        name: 'Black',
+        value: '#2E2D29',
+      },
+      {
+        name: 'True Black',
+        value: '#000000',
+      },
+      {
+        name: 'Cardinal Red',
+        value: '#8C1515',
+      },
+      {
+        name: 'Digital Red',
+        value: '#B1040E',
+      },
+      {
+        name: 'Digital Blue',
+        value: '#006CB8',
+      },
+      {
+        name: 'Digital Green',
+        value: '#008566',
+      },
+      {
+        name: 'Palo Alto',
+        value: '#175E54',
+      },
+      {
+        name: 'Palo Verde',
+        value: '#279989',
+      },
+      {
+        name: 'Olive',
+        value: '#8F993E',
+      },
+      {
+        name: 'Bay',
+        value: '#6fa287',
+      },
+      {
+        name: 'Sky',
+        value: '#4298B5',
+      },
+      {
+        name: 'Lagunita',
+        value: '#007C92',
+      },
+      {
+        name: 'Poppy',
+        value: '#E98300',
+      },
+      {
+        name: 'Spirited',
+        value: '#E04F39',
+      },
+      {
+        name: 'illuminating',
+        value: '#FEDD5C',
+      },
+      {
+        name: 'Plum',
+        value: '#620059',
+      },
+      {
+        name: 'Brick',
+        value: '#651C32',
+      },
+      {
+        name: 'Archway',
+        value: '#5D4B3C',
+      },
+      {
+        name: 'Stone',
+        value: '#5D4B3C',
+      },
+      {
+        name: 'Foggy',
+        value: '#DAD7CB',
+      },
+    ],
+  }
 }
+
+// Add the test results decoration.
+addDecorator(
+  withTests({
+    results,
+  })
+);
diff --git a/.storybook/stories/Blockquote.stories.js b/.storybook/stories/Blockquote.stories.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+
+const BlockquoteComponent = ({children, ...props}) => {
+  return (
+    <blockquote {...props}>
+      <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
+      <p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
+      <cite>Said no one, ever</cite>
+    </blockquote>
+  )
+}
+
+BlockquoteComponent.PropTypes = {
+  className: PropTypes.string,
+}
+
+export default {
+  title: 'HTML Elements/Blockquote',
+  component: BlockquoteComponent,
+  decorators: [(Story) => <div className="su-cc su-rs-my-2"><Story/></div>]
+};
+
+// Safety first.
+const Template = (args) => <BlockquoteComponent {...args} />
+export const Blockquote = Template.bind({})
+Blockquote.args = {
+  className: '',
+}
diff --git a/.storybook/stories/Heading.stories.js b/.storybook/stories/Heading.stories.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+
+const defaultText = "Lorem Ipsum Dolor Sit Amit"
+
+const Heading = ({children, level, ...props}) => {
+
+  switch (level) {
+    case 1:
+      return (<h1 {...props}>{children}</h1>)
+    case 2:
+      return (<h2 {...props}>{children}</h2>)
+    case 3:
+      return (<h3 {...props}>{children}</h3>)
+    case 4:
+      return (<h4 {...props}>{children}</h4>)
+    case 5:
+      return (<h5 {...props}>{children}</h5>)
+    case 6:
+      return (<h6 {...props}>{children}</h6>)
+    default:
+      return (<h2 {...props}>{children}</h2>)
+  }
+}
+
+Heading.propTypes = {
+  className: PropTypes.string,
+  level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired,
+  children: PropTypes.string.isRequired
+}
+
+export default {
+  title: 'HTML Elements/Headings',
+  component: Heading,
+  decorators: [(Story) => <div className="su-cc su-rs-my-2"><Story/></div>]
+}
+
+// Safety first.
+const Template = (args) => <Heading {...args} />
+export const Default = Template.bind({})
+Default.args = {
+  className: '',
+  level: 1,
+  children: defaultText
+}
+Default.storyName = "H 1"
+
+export const H2 = Template.bind({});
+H2.args = {
+  ...Default.args,
+  level: 2
+}
+
+export const H3 = Template.bind({});
+H3.args = {
+  ...Default.args,
+  level: 3
+}
+
+export const H4 = Template.bind({});
+H4.args = {
+  ...Default.args,
+  level: 4
+}
+
+export const H5 = Template.bind({});
+H5.args = {
+  ...Default.args,
+  level: 5
+}
+
+export const H6 = Template.bind({});
+H6.args = {
+  ...Default.args,
+  level: 6
+}
+
+Default.argTypes = {
+  level: {
+    control: {
+      type: 'select',
+      options: [1, 2, 3, 4, 5, 6]
+    }
+  }
+}
diff --git a/.storybook/stories/List.stories.js b/.storybook/stories/List.stories.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+
+const List = ({type, ...props}) => {
+  switch (type) {
+    case 'dl':
+      return (
+        <dl {...props}>
+          <dt>Definition List Title 1</dt>
+          <dd>This is a definition list division.</dd>
+          <dt>Definition List Title 2</dt>
+          <dd>This is a definition list division.</dd>
+        </dl>
+      )
+    case 'ol':
+      return (
+        <ol {...props}>
+          <li>List Item 1</li>
+          <li>List Item 2</li>
+          <li>List Item 3</li>
+        </ol>
+      )
+    case 'ul':
+      return (
+        <ul {...props}>
+          <li>List Item 1</li>
+          <li>List Item 2</li>
+          <li>List Item 3</li>
+        </ul>
+      )
+  }
+}
+
+List.PropTypes = {
+  className: PropTypes.string
+}
+
+export default {
+  title: 'HTML Elements/List',
+  component: List,
+  decorators: [(Story) => <div className="su-cc su-rs-my-2"><Story/></div>]
+};
+
+// Safety first.
+const Template = (args) => <List {...args} />
+
+export const DefinitionList = Template.bind({})
+DefinitionList.args = {
+  className: '',
+  type: 'dl'
+}
+
+export const OrderedList = Template.bind({})
+OrderedList.args = {
+  className: '',
+  type: 'ol'
+}
+
+export const UnorderedList = Template.bind({})
+UnorderedList.args = {
+  className: '',
+  type: 'ul'
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -42,3 +42,4 @@ example/package-lock.json

		# Storybook
		storybook-static
		.jest-test-results.json