Implement gitflow, revert work for: bash script for testing, Badge TS…

…, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS. (#1094)

packages/design-system-docs/src/pages/components/Autocomplete/_Autocomplete.docs.scss

@@ -13,7 +13,7 @@ The `Autocomplete` component is a parent component that adds autocomplete functi
 
 @react-example Autocomplete.example.jsx
 
-@react-props Autocomplete.tsx
+@react-props Autocomplete.jsx
 
 Style guide: components.autocomplete.react
 */

packages/design-system-docs/src/pages/components/Badge/_Badge.docs.scss

@@ -15,7 +15,7 @@ Style guide: components.badge
 
 @react-example Badge.example.jsx
 
-@react-props Badge.tsx
+@react-props Badge.jsx
 
 Style guide: components.badge.react
 */

packages/design-system-docs/src/pages/components/Button/_Button.docs.scss

@@ -45,7 +45,7 @@ you could pass in a `target` prop to pass to the rendered anchor element.
 
 @react-example Button.example.jsx
 
-@react-props Button.tsx
+@react-props Button.jsx
 
 Style guide: components.button.react
 */

packages/design-system-docs/src/pages/components/FormLabel/_FormLabel.docs.scss

@@ -15,7 +15,7 @@ The `FormLabel` component provides the `label` (or `legend`) for a field, along
 
 @react-example FormLabel.example.jsx
 
-@react-props FormLabel.tsx
+@react-props FormLabel.jsx
 
 Style guide: components.form-label.react
 */

packages/design-system-docs/src/pages/components/Spinner/_Spinner.docs.scss

@@ -65,7 +65,7 @@ Style guide: components.spinner.background
 
 @react-example Spinner.example.jsx
 
-@react-props Spinner.tsx
+@react-props Spinner.jsx
 
 Style guide: components.spinner.react
 */

packages/design-system-docs/src/pages/utilities/background-color/background-color.example.html

@@ -8,20 +8,20 @@
   'warn' , 'warn-dark' , 'warn-darker' , 'warn-darkest' , 'warn-light' , 'warn-lighter' ,
   'warn-lightest' , 'error' , 'error-dark' , 'error-darker' , 'error-darkest' , 'error-light' ,
   'error-lighter' ,'error-lightest'], 'Focus colors' : ['focus-color-light' , 'focus-color-dark' ],
-  'Additional colors' : ['muted-inverse', 'transparent' ], 'Focus colors - Deprecated' :
-  ['focus-color', 'focus-color-inverse', 'focus-border-inverse'], }; -%> <%
+  'Additional colors' : ['muted-inverse', 'transparent' ], 'Focus colors - Deprecated' : ['focus-color', 'focus-color-inverse', 'focus-border-inverse'], }; -%> <%
   Object.keys(groups).forEach(function(fill){ -%>
   <section>
     <h1 class="preview__label">
       <%= fill%>
     </h1>
     <% if (fill === 'Focus colors - Deprecated') { %>
-    <div class="ds-c-alert ds-c-alert--error ds-u-margin-bottom--2" role="region">
-      <div class="ds-c-alert__body">
-        <p class="ds-c-alert__text"><strong>Deprecated</strong> - Do not use.</p>
+      <div class="ds-c-alert ds-c-alert--error ds-u-margin-bottom--2" role="region">
+        <div class="ds-c-alert__body">
+          <p class="ds-c-alert__text"><strong>Deprecated</strong> - Do not use.</p>
+        </div>
       </div>
-    </div>
-    <% } %> <% groups[fill].forEach(function(color){ -%>
+    <% } %>
+    <% groups[fill].forEach(function(color){ -%>
     <article class="ds-u-margin-bottom--1">
       <div
         class="c-swatch__preview c-swatch__preview--condensed ds-u-radius--circle ds-u-fill--<%= color %>"

packages/design-system-docs/src/scripts/components/ReactPropDoc.jsx

@@ -8,13 +8,7 @@ import React from 'react';
 class ReactPropDoc extends React.PureComponent {
   defaultValue() {
     if (this.props.defaultValue) {
-      return (
-        <code>
-          {typeof this.props.defaultValue.value !== 'string'
-            ? String(this.props.defaultValue.value)
-            : this.props.defaultValue.value}
-        </code>
-      );
+      return <code>{this.props.defaultValue.value}</code>;
     }
   }
 
@@ -106,7 +100,7 @@ class ReactPropDoc extends React.PureComponent {
 
 ReactPropDoc.propTypes = {
   defaultValue: PropTypes.shape({
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    value: PropTypes.string,
   }),
   description: PropTypes.string,
   name: PropTypes.string,

packages/design-system-scripts/package.json

@@ -68,7 +68,7 @@
     "node-notifier": "8.0.1",
     "node-sass": "4.14.1",
     "postcss-import": "^11.1.0",
-    "prismjs": "1.24.0",
+    "prismjs": "1.23.0",
     "react-app-polyfill": "^1.0.6",
     "react-docgen": "4.1.1",
     "react-docgen-typescript": "^1.18.0",

packages/design-system/src/components/Alert/Alert.tsx

@@ -1,25 +1,23 @@
 import { EVENT_CATEGORY, MAX_LENGTH, sendAnalyticsEvent } from '../analytics/SendAnalytics';
+// import PropTypes from 'prop-types';
 import React from 'react';
 import { alertSendsAnalytics } from '../flags';
 import classNames from 'classnames';
 import get from 'lodash/get';
 import uniqueId from 'lodash.uniqueid';
 
-// Omit props that we override with values from the ChoiceList
-type OmitAlertProps = 'role';
-
 /* eslint-disable camelcase */
 // disable linting since prop names must be in snake case for integration with Blast
 export interface AnalyticsEventShape {
-  event_name: string;
-  event_type: string;
-  ga_eventAction: string;
-  ga_eventCategory: string;
-  ga_eventLabel: string;
+  event_name?: string;
+  event_type?: string;
+  ga_eventAction?: string;
+  ga_eventCategory?: string;
+  ga_eventLabel?: string;
   ga_eventType?: string;
   ga_eventValue?: string;
-  heading: string;
-  type: string;
+  heading?: string;
+  type?: string;
 }
 /* eslint-enable camelcase */
 
@@ -91,15 +89,7 @@ const defaultAnalytics = (heading = '', variation = '') => ({
   },
 });
 
-export class Alert extends React.Component<
-  Omit<React.ComponentPropsWithRef<'div'>, OmitAlertProps> & AlertProps,
-  any
-> {
-  static defaultProps = {
-    role: 'region',
-    headingLevel: '2',
-  };
-
+export class Alert extends React.PureComponent<AlertProps, any> {
   constructor(props: AlertProps) {
     super(props);
     this.alertTextRef = null;
@@ -124,7 +114,7 @@ export class Alert extends React.Component<
 
     if (alertSendsAnalytics()) {
       const eventAction = 'onComponentDidMount';
-      const eventHeading: string | React.ReactNode = this.props.heading || this.props.children;
+      const eventHeading = this.props.heading || this.props.children;
 
       /* Send analytics event for `error`, `warn`, `success` alert variations */
       if (this.props.variation) {
@@ -156,7 +146,7 @@ export class Alert extends React.Component<
   eventHeadingText: string;
 
   heading(): React.ReactElement | void {
-    const { headingLevel, heading } = this.props;
+    const { headingLevel = '2', heading } = this.props;
     const Heading = `h${headingLevel}`;
     if (heading) {
       const headingProps = {
@@ -167,7 +157,7 @@ export class Alert extends React.Component<
     }
   }
 
-  render(): JSX.Element {
+  render(): React.ReactNode {
     const {
       children,
       className,
@@ -177,7 +167,7 @@ export class Alert extends React.Component<
       headingLevel,
       hideIcon,
       alertRef,
-      role,
+      role = 'region',
       variation,
       analytics,
       ...alertProps