Patch/2.7.2 - Master branch (#1100)

* 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. * Add export for DateFieldYearValue in <DateField />. (#1095) * Export several types and interfaces from <Dropdown />. (#1096) * Review TS types/interfaces for TextField components. (#1098) * alert and choice list typescript type export updates (#1097) * alert component TS definition updates * updated alert TS omit props * ChoiceList component TS definition updates * updated ChoiceProps to be exported * comment cleanup in alert Co-authored-by: Anna Scheuler Kammeyer <[email protected]>
CMSgov · Aug 2, 2021 · 5f7ca36 · 5f7ca36
1 parent b8ea34f
commit 5f7ca36
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 51 deletions.
diff --git a/packages/design-system/src/components/Alert/Alert.tsx b/packages/design-system/src/components/Alert/Alert.tsx
@@ -1,5 +1,4 @@
 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';
@@ -9,22 +8,28 @@ import uniqueId from 'lodash.uniqueid';
 /* 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;
+  [additional_props: string]: unknown;
 }
 /* eslint-enable camelcase */
 
-interface AnalyticsObjectShape {
+export interface AnalyticsObjectShape {
   onComponentDidMount?: boolean | AnalyticsEventShape;
 }
 
+export type AlertHeadingLevel = '1' | '2' | '3' | '4' | '5' | '6';
+
+export type AlertRole = 'alert' | 'alertdialog' | 'region' | 'status';
+
+export type AlertVariation = 'error' | 'warn' | 'success';
 export interface AlertProps {
   /**
    * Access a reference to the `alert` `div` element
@@ -59,19 +64,19 @@ export interface AlertProps {
   /**
    * Heading type to override default `<h2>`.
    */
-  headingLevel?: '1' | '2' | '3' | '4' | '5' | '6';
+  headingLevel?: AlertHeadingLevel;
   /**
    * Boolean to hide the `Alert` icon
    */
   hideIcon?: boolean;
   /**
    * ARIA `role`, defaults to 'region'
    */
-  role?: 'alert' | 'alertdialog' | 'region' | 'status';
+  role?: AlertRole;
   /**
    * A string corresponding to the `Alert` variation classes (`error`, `warn`, `success`)
    */
-  variation?: 'error' | 'warn' | 'success';
+  variation?: AlertVariation;
 
   [key: string]: any;
 }
@@ -89,7 +94,18 @@ const defaultAnalytics = (heading = '', variation = '') => ({
   },
 });
 
-export class Alert extends React.PureComponent<AlertProps, any> {
+// Omit props that we override with values from the Alert
+type OmitAlertProps = 'role' | 'children' | 'className' | 'ref';
+
+export class Alert extends React.PureComponent<
+  Omit<React.ComponentPropsWithRef<'div'>, OmitAlertProps> & AlertProps,
+  any
+> {
+  static defaultProps = {
+    role: 'region',
+    headingLevel: '2',
+  };
+
   constructor(props: AlertProps) {
     super(props);
     this.alertTextRef = null;
@@ -114,7 +130,7 @@ export class Alert extends React.PureComponent<AlertProps, any> {
 
     if (alertSendsAnalytics()) {
       const eventAction = 'onComponentDidMount';
-      const eventHeading = this.props.heading || this.props.children;
+      const eventHeading: string | React.ReactNode = this.props.heading || this.props.children;
 
       /* Send analytics event for `error`, `warn`, `success` alert variations */
       if (this.props.variation) {
@@ -146,7 +162,7 @@ export class Alert extends React.PureComponent<AlertProps, any> {
   eventHeadingText: string;
 
   heading(): React.ReactElement | void {
-    const { headingLevel = '2', heading } = this.props;
+    const { headingLevel, heading } = this.props;
     const Heading = `h${headingLevel}`;
     if (heading) {
       const headingProps = {
@@ -167,7 +183,7 @@ export class Alert extends React.PureComponent<AlertProps, any> {
       headingLevel,
       hideIcon,
       alertRef,
-      role = 'region',
+      role,
       variation,
       analytics,
       ...alertProps

diff --git a/packages/design-system/src/components/ChoiceList/Choice.test.tsx b/packages/design-system/src/components/ChoiceList/Choice.test.tsx
@@ -1,17 +1,17 @@
-import Choice from './Choice';
+import Choice, { ChoiceProps, ChoiceType } from './Choice';
 import FormLabel from '../FormLabel/FormLabel';
 import React from 'react';
 import { shallow } from 'enzyme';
 
 const defaultProps = {
   name: 'foo',
   value: 'boo',
-  type: 'checkbox',
+  type: 'checkbox' as ChoiceType,
   label: 'George Washington',
 };
 
 function render(customProps = {}) {
-  const props = { ...defaultProps, ...customProps };
+  const props: ChoiceProps = { ...defaultProps, ...customProps };
   return {
     props,
     wrapper: shallow(<Choice {...props} />),
@@ -222,8 +222,8 @@ describe('Choice', () => {
           target: { checked: true },
         });
 
-        expect(data.props.onBlur.mock.calls.length).toBe(0);
-        expect(data.props.onChange.mock.calls.length).toBe(1);
+        expect(data.props.onBlur).toHaveBeenCalledTimes(0);
+        expect(data.props.onChange).toHaveBeenCalledTimes(1);
       });
 
       it('updates state when uncontrolled component', () => {
@@ -257,8 +257,8 @@ describe('Choice', () => {
 
       input.simulate('blur');
 
-      expect(data.props.onBlur.mock.calls.length).toBe(1);
-      expect(data.props.onChange.mock.calls.length).toBe(0);
+      expect(data.props.onBlur).toHaveBeenCalledTimes(1);
+      expect(data.props.onChange).toHaveBeenCalledTimes(0);
     });
 
     describe('uncheck event emitter', () => {

diff --git a/packages/design-system/src/components/ChoiceList/Choice.tsx b/packages/design-system/src/components/ChoiceList/Choice.tsx
@@ -4,6 +4,9 @@ import React from 'react';
 import classNames from 'classnames';
 import uniqueId from 'lodash.uniqueid';
 
+export type ChoiceSize = 'small';
+export type ChoiceType = 'checkbox' | 'radio';
+export type ChoiceValue = number | string;
 export interface ChoiceProps {
   /**
    * @hide-prop In order to be consistent with form elements, use `label` instead
@@ -67,7 +70,7 @@ export interface ChoiceProps {
    * Applies the "inverse" UI theme
    */
   inversed?: boolean;
-  size?: 'small';
+  size?: ChoiceSize;
   /**
    * The `input` field's `name` attribute
    */
@@ -77,11 +80,11 @@ export interface ChoiceProps {
   /**
    * Sets the type to render `checkbox` fields or `radio` buttons
    */
-  type: 'checkbox' | 'radio';
+  type: ChoiceType;
   /**
    * The `input` `value` attribute
    */
-  value: number | string;
+  value: ChoiceValue;
 }
 
 type OmitProps =

diff --git a/packages/design-system/src/components/ChoiceList/ChoiceList.test.tsx b/packages/design-system/src/components/ChoiceList/ChoiceList.test.tsx
@@ -1,5 +1,5 @@
+import ChoiceList, { ChoiceListType } from './ChoiceList';
 import { mount, shallow } from 'enzyme';
-import ChoiceList from './ChoiceList';
 import React from 'react';
 
 function generateChoices(length) {
@@ -22,7 +22,7 @@ function render(customProps = {}, choicesCount = 2, deep = true) {
       choices: generateChoices(choicesCount),
       label: 'Foo',
       name: 'spec-field',
-      type: 'radio',
+      type: 'radio' as ChoiceListType,
     },
     ...customProps,
   };

diff --git a/packages/design-system/src/components/ChoiceList/ChoiceList.tsx b/packages/design-system/src/components/ChoiceList/ChoiceList.tsx
@@ -4,9 +4,13 @@ import React from 'react';
 import classNames from 'classnames';
 import pick from 'lodash/pick';
 
+export type ChoiceListSize = 'small';
+export type ChoiceListType = 'checkbox' | 'radio';
+export type ChoiceListErrorPlacement = 'top' | 'bottom';
+
 // Omit props that we override with values from the ChoiceList
 type OmitChoiceProp = 'inversed' | 'name' | 'onBlur' | 'onChange' | 'size' | 'type' | 'inputRef';
-type ChoiceProps = Omit<ChoiceComponentProps, OmitChoiceProp>;
+export type ChoiceProps = Omit<ChoiceComponentProps, OmitChoiceProp>;
 
 export interface ChoiceListProps {
   /**
@@ -29,7 +33,7 @@ export interface ChoiceListProps {
   /**
    * Location of the error message relative to the field input
    */
-  errorPlacement?: 'top' | 'bottom';
+  errorPlacement?: ChoiceListErrorPlacement;
   /**
    * Additional hint text to display
    */
@@ -72,11 +76,11 @@ export interface ChoiceListProps {
   /**
    * Sets the size of the checkbox or radio button
    */
-  size?: 'small';
+  size?: ChoiceListSize;
   /**
    * Sets the type to render `checkbox` fields or `radio` buttons
    */
-  type: 'checkbox' | 'radio';
+  type: ChoiceListType;
 }
 
 export class ChoiceList extends React.PureComponent<ChoiceListProps, any> {

diff --git a/packages/design-system/src/components/DateField/DateField.tsx b/packages/design-system/src/components/DateField/DateField.tsx
@@ -11,6 +11,7 @@ export type DateFieldMonthDefaultValue = string | number;
 export type DateFieldMonthValue = string | number;
 export type DateFieldYearDefaultValue = string | number;
 export type DateFieldYearValue = string | number;
+export type DateFieldErrorPlacement = 'top' | 'bottom';
 
 export interface DateFieldProps {
   /**
@@ -39,7 +40,7 @@ export interface DateFieldProps {
   /**
    * Location of the error message relative to the field input
    */
-  errorPlacement?: 'top' | 'bottom';
+  errorPlacement?: DateFieldErrorPlacement;
   /**
    * Additional hint text to display above the individual month/day/year fields
    */

diff --git a/packages/design-system/src/components/Dropdown/Dropdown.tsx b/packages/design-system/src/components/Dropdown/Dropdown.tsx
@@ -5,6 +5,14 @@ import { errorPlacementDefault } from '../flags';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 
+export type DropdownDefaultValue = number | string;
+export interface DropdownOptions {
+  label: React.ReactNode;
+  value: number | string;
+}
+export type DropdownSize = 'small' | 'medium';
+export type DropdownValue = number | string;
+export type DropdownErrorPlacement = 'top' | 'bottom';
 export interface DropdownProps {
   /**
    * Adds `aria-label` attribute. When using `aria-label`, `label` should be empty string.
@@ -22,7 +30,7 @@ export interface DropdownProps {
    * Sets the initial selected state. Use this for an uncontrolled component;
    * otherwise, use the `value` property.
    */
-  defaultValue?: number | string;
+  defaultValue?: DropdownDefaultValue;
   /**
    * Disables the entire field.
    */
@@ -35,7 +43,7 @@ export interface DropdownProps {
   /**
    * Location of the error message relative to the field input
    */
-  errorPlacement?: 'top' | 'bottom';
+  errorPlacement?: DropdownErrorPlacement;
   /**
    * Additional classes to be added to the select element
    */
@@ -75,10 +83,7 @@ export interface DropdownProps {
   /**
    * The list of options to be rendered. Provide an empty list if using custom options via the `children` prop.
    */
-  options: {
-    label: React.ReactNode;
-    value: number | string;
-  }[];
+  options: DropdownOptions[];
   onBlur?: (...args: any[]) => any;
   onChange?: (...args: any[]) => any;
   /**
@@ -88,12 +93,12 @@ export interface DropdownProps {
   /**
    * If the component renders a select, set the max-width of the input either to `'small'` or `'medium'`.
    */
-  size?: 'small' | 'medium';
+  size?: DropdownSize;
   /**
    * Sets the field's `value`. Use this in combination with `onChange`
    * for a controlled component; otherwise, set `defaultValue`.
    */
-  value?: number | string;
+  value?: DropdownValue;
 }
 
 type OmitProps =

diff --git a/packages/design-system/src/components/Table/__snapshots__/Table.test.jsx.snap b/packages/design-system/src/components/Table/__snapshots__/Table.test.jsx.snap
@@ -21,6 +21,7 @@ exports[`Table table caption scrollable true applies scroll table wrapper and cl
   scrollableNotice={
     <Alert
       className="ds-u-margin-y--1 ds-u-font-weight--normal"
+      headingLevel="2"
       role="status"
     >
       <p
@@ -50,6 +51,7 @@ exports[`Table table caption scrollable true applies scroll table wrapper and cl
         _scrollableNotice={
           <Alert
             className="ds-u-margin-y--1 ds-u-font-weight--normal"
+            headingLevel="2"
             role="status"
           >
             <p

diff --git a/packages/design-system/src/components/TextField/Mask.tsx b/packages/design-system/src/components/TextField/Mask.tsx
@@ -1,6 +1,9 @@
 import { maskValue, unmaskValue } from './maskHelpers';
 import React from 'react';
 
+// TODO: Remove `maskValue` and `unmaskValue` exports with next major release (v3.x.x)
+export { maskValue, unmaskValue };
+
 const maskPattern = {
   phone: '[0-9-]*',
   ssn: '[0-9-*]*',

diff --git a/packages/design-system/src/components/TextField/TextField.tsx b/packages/design-system/src/components/TextField/TextField.tsx
@@ -10,10 +10,11 @@ import pick from 'lodash/pick';
 export { unmaskValue } from './maskHelpers';
 
 export type TextFieldDefaultValue = string | number;
-
+export type TextFieldMask = 'currency' | 'phone' | 'ssn' | 'zip';
 export type TextFieldRows = number | string;
-
+export type TextFieldSize = 'small' | 'medium';
 export type TextFieldValue = string | number;
+export type TextFieldErrorPlacement = 'top' | 'bottom';
 
 export interface TextFieldProps {
   /**
@@ -39,7 +40,7 @@ export interface TextFieldProps {
   /**
    * Location of the error message relative to the field input
    */
-  errorPlacement?: 'top' | 'bottom';
+  errorPlacement?: TextFieldErrorPlacement;
   /**
    * Additional classes to be added to the field element
    */
@@ -85,7 +86,7 @@ export interface TextFieldProps {
    * you expect to be entered. Depending on the mask, the
    * field's appearance and functionality may be affected.
    */
-  mask?: 'currency' | 'phone' | 'ssn' | 'zip';
+  mask?: TextFieldMask;
   /**
    * Whether or not the text field is a multiline text field
    */
@@ -109,7 +110,7 @@ export interface TextFieldProps {
   /**
    * Set the max-width of the input either to `'small'` or `'medium'`.
    */
-  size?: 'small' | 'medium';
+  size?: TextFieldSize;
   /**
    * HTML `input` [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#<input>_types) attribute. If you are using `type=number` please use the numeric prop instead.
    */