diff --git a/packages/design-system-docs/src/pages/components/Autocomplete/_Autocomplete.docs.scss b/packages/design-system-docs/src/pages/components/Autocomplete/_Autocomplete.docs.scss index a1ec23b8c8..0cc5198842 100644 --- a/packages/design-system-docs/src/pages/components/Autocomplete/_Autocomplete.docs.scss +++ b/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 */ diff --git a/packages/design-system-docs/src/pages/components/Badge/_Badge.docs.scss b/packages/design-system-docs/src/pages/components/Badge/_Badge.docs.scss index 5cb71ceb5b..179a3331d8 100644 --- a/packages/design-system-docs/src/pages/components/Badge/_Badge.docs.scss +++ b/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 */ diff --git a/packages/design-system-docs/src/pages/components/Button/_Button.docs.scss b/packages/design-system-docs/src/pages/components/Button/_Button.docs.scss index b557ec4b2f..899f1b0567 100644 --- a/packages/design-system-docs/src/pages/components/Button/_Button.docs.scss +++ b/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 */ diff --git a/packages/design-system-docs/src/pages/components/FormLabel/_FormLabel.docs.scss b/packages/design-system-docs/src/pages/components/FormLabel/_FormLabel.docs.scss index b4c7958e91..6a0fc9d71d 100644 --- a/packages/design-system-docs/src/pages/components/FormLabel/_FormLabel.docs.scss +++ b/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 */ diff --git a/packages/design-system-docs/src/pages/components/Spinner/_Spinner.docs.scss b/packages/design-system-docs/src/pages/components/Spinner/_Spinner.docs.scss index f3418170ef..af66dc2463 100644 --- a/packages/design-system-docs/src/pages/components/Spinner/_Spinner.docs.scss +++ b/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 */ diff --git a/packages/design-system-docs/src/pages/utilities/background-color/background-color.example.html b/packages/design-system-docs/src/pages/utilities/background-color/background-color.example.html index 9c7b3b7a97..231f62744b 100644 --- a/packages/design-system-docs/src/pages/utilities/background-color/background-color.example.html +++ b/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){ -%>

<%= fill%>

<% if (fill === 'Focus colors - Deprecated') { %> -
-
-

Deprecated - Do not use.

+
+
+

Deprecated - Do not use.

+
-
- <% } %> <% groups[fill].forEach(function(color){ -%> + <% } %> + <% groups[fill].forEach(function(color){ -%>
- {typeof this.props.defaultValue.value !== 'string' - ? String(this.props.defaultValue.value) - : this.props.defaultValue.value} - - ); + return {this.props.defaultValue.value}; } } @@ -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, diff --git a/packages/design-system-scripts/package.json b/packages/design-system-scripts/package.json index 3bde52503b..7d345e9b79 100644 --- a/packages/design-system-scripts/package.json +++ b/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", diff --git a/packages/design-system/src/components/Alert/Alert.tsx b/packages/design-system/src/components/Alert/Alert.tsx index 637708d29d..0c9fb08e74 100644 --- a/packages/design-system/src/components/Alert/Alert.tsx +++ b/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, OmitAlertProps> & AlertProps, - any -> { - static defaultProps = { - role: 'region', - headingLevel: '2', - }; - +export class Alert extends React.PureComponent { 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 diff --git a/packages/design-system/src/components/Autocomplete/Autocomplete.tsx b/packages/design-system/src/components/Autocomplete/Autocomplete.jsx similarity index 78% rename from packages/design-system/src/components/Autocomplete/Autocomplete.tsx rename to packages/design-system/src/components/Autocomplete/Autocomplete.jsx index 91f54f3679..4fd54095a4 100644 --- a/packages/design-system/src/components/Autocomplete/Autocomplete.tsx +++ b/packages/design-system/src/components/Autocomplete/Autocomplete.jsx @@ -14,8 +14,9 @@ * an unacceptable regression of the user experience. */ -import Downshift, { DownshiftProps } from 'downshift'; import Button from '../Button/Button'; +import Downshift from 'downshift'; +import PropTypes from 'prop-types'; import React from 'react'; import TextField from '../TextField/TextField'; import WrapperDiv from './WrapperDiv'; @@ -24,128 +25,20 @@ import { errorPlacementDefault } from '../flags'; import get from 'lodash/get'; import uniqueId from 'lodash.uniqueid'; -export interface AutocompleteItem { - id?: string; - name?: string; -} - -type PropsNotPassedToDownshift = - | 'ariaClearLabel' - | 'clearInputText' - | 'items' - | 'label' - | 'loading' - | 'children' - | 'className' - | 'clearSearchButton'; - -export interface AutocompleteProps extends Omit, PropsNotPassedToDownshift> { - /** - * Screenreader-specific label for the Clear search `