ADAPT-000: Add Identity Bar, Logo, Global Footer, SR only Text, Button

.eslintrc

@@ -25,6 +25,7 @@
     "react/jsx-handler-names": 0,
     "react/jsx-fragments": 0,
     "react/no-unused-prop-types": 0,
-    "import/export": 0
+    "import/export": 0,
+    "semi": [1, "always"] // 1 is for warning
   }
 }

.storybook/stories/Paragraph.stories.js

@@ -103,6 +103,12 @@ Intro.args = {
 
 export const Big = Template.bind({})
 Big.args = {
-  ...Short.args,
+  ...Default.args,
   className: 'su-big-paragraph'
 }
+
+export const Card = Template.bind({})
+Card.args = {
+  ...Default.args,
+  className: 'su-card-paragraph'
+}

netlify.toml

@@ -19,4 +19,4 @@
     X-Content-Type-Options = "nosniff"
     Referrer-Policy = "origin-when-cross-origin"
     Strict-Transport-Security = "max-age=2592000"
-    Permissions-Policy = "vibrate=(), geolocation=(), midi=(), notifications=(), push=(), microphone=(), camera=(), magnetometer=(), gyroscope=(), speaker=(), vibrate=(), fullscreen=()"
+    Permissions-Policy = "vibrate=(), geolocation=(), midi=(), notifications=(), push=(), microphone=(), camera=(), magnetometer=(), gyroscope=(), speaker=()"

package.json

@@ -18,8 +18,7 @@
     "test:coverage": "jest --coverage",
     "test:gen": "jest --json --outputFile=./.storybook/.jest-test-results.json",
     "predev": "npm run test:gen",
-    "dev": "start-storybook -p 6006",
-    "storybook": "npm run dev"
+    "dev": "start-storybook -p 6006"
   },
   "repository": {
     "type": "git",
@@ -85,6 +84,7 @@
       "js",
       "jsx",
       "json"
-    ]
+    ],
+    "moduleDirectories": ["node_modules", "src"]
   }
 }

src/Alert/Alert.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import propTypes from 'prop-types'
+import PropTypes from 'prop-types'
 import { alertTypes, lightText, darkText } from './Alert.levers'
 import { Button } from '../Button/Button'
 import Icon from 'react-hero-icon'
@@ -84,12 +84,14 @@ export const Alert = ({ classes = {}, children, ref, ...props }) => {
   const DefaultDismiss = (
     <Button
       className={classnames(
-        'su-p-0 su-text-17 su-bg-transparent hover:su-bg-transparent focus:su-bg-transparent su-uppercase su-font-bold su-inline-block su-tracking-widest',
+        'su-text-17 su-uppercase su-font-bold su-inline-block su-tracking-widest',
         levers.dismiss,
         classes.dismiss
       )}
       aria-label='Dismiss Alert'
       onClick={() => { setDismissed(true) }}
+      variant='none'
+      size='minimal'
     >
       Dismiss <Icon icon='x-circle' type='solid' className={classnames('su-inline-block su--mt-3 su-h-25 su-w-25')} />
     </Button>
@@ -169,78 +171,82 @@ export const Alert = ({ classes = {}, children, ref, ...props }) => {
 
 Alert.propTypes = {
   // Nodes and content.
-  children: propTypes.oneOfType([
-    propTypes.node,
-    propTypes.element,
-    propTypes.string
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.element,
+    PropTypes.string
+  ]),
+  dismissBtn: PropTypes.element,
+  icon: PropTypes.element,
+  label: PropTypes.string,
+  heading: PropTypes.string,
+  footer: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.element,
+    PropTypes.string
   ]),
-  dismissBtn: propTypes.element,
-  icon: propTypes.element,
-  label: propTypes.string,
-  heading: propTypes.string,
-  footer: propTypes.node,
 
   // State and Levers.
-  type: propTypes.oneOf(alertTypes),
-  isLargeIcon: propTypes.bool,
-  isLabelTop: propTypes.bool,
-  isIconTop: propTypes.bool,
-  hasDismiss: propTypes.bool,
-  hasIcon: propTypes.bool,
-  hasLabel: propTypes.bool,
+  type: PropTypes.oneOf(alertTypes),
+  isLargeIcon: PropTypes.bool,
+  isLabelTop: PropTypes.bool,
+  isIconTop: PropTypes.bool,
+  hasDismiss: PropTypes.bool,
+  hasIcon: PropTypes.bool,
+  hasLabel: PropTypes.bool,
 
   // The CSS Classname property
-  classes: propTypes.shape(
+  classes: PropTypes.shape(
     {
-      wrapper: propTypes.oneOfType([
-        propTypes.string,
-        propTypes.object,
-        propTypes.array
+      wrapper: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object,
+        PropTypes.array
       ]),
-      container: propTypes.oneOfType([
-        propTypes.string,
-        propTypes.object,
-        propTypes.array
+      container: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object,
+        PropTypes.array
       ]),
-      dismissWrapper: propTypes.oneOfType([
-        propTypes.string,
-        propTypes.object,
-        propTypes.array
+      dismissWrapper: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object,
+        PropTypes.array
       ]),
-      headerWrapper: propTypes.oneOfType([
-        propTypes.string,
-        propTypes.object,
-        propTypes.array
+      headerWrapper: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object,
+        PropTypes.array
       ]),
-      headerIcon: propTypes.oneOfType([
-        propTypes.string,
-        propTypes.object,
-        propTypes.array
+      headerIcon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object,
+        PropTypes.array
       ]),
-      label: propTypes.oneOfType([
-        propTypes.string,
-        propTypes.object,
-        propTypes.array
+      label: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object,
+        PropTypes.array
       ]),
-      bodyWrapper: propTypes.oneOfType([
-        propTypes.string,
-        propTypes.object,
-        propTypes.array
+      bodyWrapper: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object,
+        PropTypes.array
       ]),
-      bodyHeading: propTypes.oneOfType([
-        propTypes.string,
-        propTypes.object,
-        propTypes.array
+      bodyHeading: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object,
+        PropTypes.array
       ]),
-      body: propTypes.oneOfType([
-        propTypes.string,
-        propTypes.object,
-        propTypes.array
+      body: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object,
+        PropTypes.array
       ]),
-      footerWrapper: propTypes.oneOfType([
-        propTypes.string,
-        propTypes.object,
-        propTypes.array
+      footerWrapper: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object,
+        PropTypes.array
       ])
     }
   )

src/Alert/Alert.stories.js

@@ -45,8 +45,7 @@ const AlertTemplate = ({ children, ...rest }) => {
 // /////////////////////////////////////////////////////////////////////////////
 export const Default = AlertTemplate.bind({})
 Default.args = {
-  children: textMixed,
-  heading: 'Alert Lorem Ipsum'
+  children: textMixed
 }
 Default.parameters = {
   jest: ['Alert.test.js']
@@ -55,7 +54,6 @@ Default.parameters = {
 export const Info = AlertTemplate.bind({})
 Info.args = {
   children: textMixed,
-  heading: 'Alert Lorem Ipsum',
   type: 'info'
 }
 
@@ -71,8 +69,8 @@ Info.parameters = {
 export const Error = AlertTemplate.bind({})
 Error.args = {
   children: textMixed,
-  heading: 'Alert Lorem Ipsum',
-  type: 'error'
+  type: 'error',
+  label: 'error'
 }
 Error.parameters = {
   docs: {
@@ -85,8 +83,8 @@ Error.parameters = {
 export const Warning = AlertTemplate.bind({})
 Warning.args = {
   children: textMixed,
-  heading: 'Alert Lorem Ipsum',
-  type: 'warning'
+  type: 'warning',
+  label: 'warning'
 }
 Warning.parameters = {
   docs: {
@@ -99,8 +97,8 @@ Warning.parameters = {
 export const Success = AlertTemplate.bind({})
 Success.args = {
   children: textMixed,
-  heading: 'Alert Lorem Ipsum',
-  type: 'success'
+  type: 'success',
+  label: 'success'
 }
 Success.parameters = {
   docs: {
@@ -113,7 +111,6 @@ Success.parameters = {
 export const LabelsOnTop = AlertTemplate.bind({})
 LabelsOnTop.args = {
   children: textMixed,
-  heading: 'Alert Lorem Ipsum',
   isIconTop: true,
   isLabelTop: true
 }
@@ -135,8 +132,9 @@ BigIcon.args = {
 }
 BigIcon.storyName = 'Big Icon + No Label'
 
-export const NoHeader = AlertTemplate.bind({})
-NoHeader.args = {
+export const WithHeader = AlertTemplate.bind({})
+WithHeader.args = {
+  heading: 'Alert Lorem Ipsum',
   children: textMixed,
   isLabelTop: true,
   isLargeIcon: true