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

#4) Adds new components: - Identity Bar - Logo - Global Footer - SR Only Text Improves Components: - Button Adds Tests and Test Runner Co-authored-by: Sherakama <[email protected]> Co-authored-by: Yvonne Tang <[email protected]>
SU-SWS · Feb 17, 2021 · c3e3c7d · c3e3c7d
1 parent 5cf6009
commit c3e3c7d
Show file tree

Hide file tree

Showing 35 changed files with 951 additions and 331 deletions.
diff --git a/.eslintrc b/.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
   }
 }
diff --git a/.github/workflows/run-jest-tests.yml b/.github/workflows/run-jest-tests.yml
@@ -0,0 +1,22 @@
+name: "Run Jest Tests"
+
+# Trigger the workflow on merge of pull request or direct push,
+# but only for the main branch
+on:
+  pull_request :
+    types: [ opened, edited, synchronize, reopened]
+
+jobs:
+  tests:
+    name: 'Run Tests'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+      - name: Set Node Version
+        uses: actions/setup-node@v1
+        with:
+          node-version: 15.x
+      - run: npm ci
+      - run: npm run test
+      - run: npm run test:coverage
diff --git a/.storybook/stories/Paragraph.stories.js b/.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'
+}
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,17 @@
+module.exports = {
+  "verbose": true,
+  "testPathIgnorePatterns": [
+    "/node_modules/",
+    "/docs/"
+  ],
+  "testRegex": "(/test/.*|\\.(test|spec))\\.(js|jsx)$",
+  "moduleFileExtensions": [
+    "js",
+    "jsx",
+    "json"
+  ],
+  "moduleDirectories": [
+    "node_modules",
+    "src"
+  ]
+}
diff --git a/netlify.toml b/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=()"
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,13 +13,12 @@
     "prebuild": "npm run test:gen",
     "build": "build-storybook",
     "lint": "eslint .",
-    "test": "jest",
+    "test": "jest --no-cache",
     "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "test:gen": "jest --json --outputFile=./.storybook/.jest-test-results.json",
+    "test:coverage": "jest --coverage --no-cache",
+    "test:gen": "jest --no-cache --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",
@@ -74,17 +73,5 @@
     "storybook-addon-designs": "^5.4.3",
     "storybook-addon-pseudo-states": "^1.0.0-rc.3",
     "storybook-dark-mode": "^1.0.4"
-  },
-  "jest": {
-    "testPathIgnorePatterns": [
-      "/node_modules/",
-      "/docs/"
-    ],
-    "testRegex": "(/test/.*|\\.(test|spec))\\.(js|jsx)$",
-    "moduleFileExtensions": [
-      "js",
-      "jsx",
-      "json"
-    ]
   }
 }
diff --git a/src/Alert/Alert.js b/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'
@@ -14,7 +14,7 @@ import Icon from 'react-hero-icon'
  */
 export const Alert = ({ classes = {}, children, ref, ...props }) => {
   // Defaults & Variables
-  const classnames = require('classnames')
+  const classnames = require('classnames/dedupe')
   const levers = {}
   const iconProps = { height: 24, width: 24 }
   const [isDismissed, setDismissed] = useState(false)
@@ -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
       ])
     }
   )