diff --git a/guides/CODING-GUIDELINES.md b/guides/CODING-GUIDELINES.md index b737e253b2..97a09ac3d7 100644 --- a/guides/CODING-GUIDELINES.md +++ b/guides/CODING-GUIDELINES.md @@ -30,7 +30,7 @@ JavaScript coding guidelines are enforced using [Nava's ESLint ruleset](https:// - Build components that are safe to render server-side. This means components must be pure functions of their `props` and `state`, and you only have access to a subset of lifecycle methods: - `getInitialState()` - `getDefaultProps()` - - `componentWillMount()` + - `componentDidMount()` - `render()` - Each component is exported twice, to support different ways developers might import it: - A named export. For example: `export function Button(props) {` diff --git a/packages/design-system/src/components/Pagination/Ellipses.tsx b/packages/design-system/src/components/Pagination/Ellipses.tsx index ec052f083e..c5ca7b0633 100644 --- a/packages/design-system/src/components/Pagination/Ellipses.tsx +++ b/packages/design-system/src/components/Pagination/Ellipses.tsx @@ -1,9 +1,11 @@ import React from 'react'; -export default function Ellipses(): React.ReactElement { +const Ellipses: React.FC = (props) => { return (
  • …
    • ); -} +}; + +export default Ellipses; diff --git a/packages/design-system/src/styles/components/_Pagination.scss b/packages/design-system/src/styles/components/_Pagination.scss index d9f34db93c..1c8ae9ad76 100644 --- a/packages/design-system/src/styles/components/_Pagination.scss +++ b/packages/design-system/src/styles/components/_Pagination.scss @@ -9,7 +9,7 @@ $pagination-overflow-color: $color-gray; $pagination-page-count-color: $color-gray; .ds-c-pagination { - align-items: end; + align-items: flex-end; display: flex; justify-content: space-between; ul { diff --git a/packages/ds-healthcare-gov/docs/src/pages/components/Logo/Logo.docs.scss b/packages/ds-healthcare-gov/docs/src/pages/components/Logo/Logo.docs.scss index 1760d8db7b..421aa20bf4 100644 --- a/packages/ds-healthcare-gov/docs/src/pages/components/Logo/Logo.docs.scss +++ b/packages/ds-healthcare-gov/docs/src/pages/components/Logo/Logo.docs.scss @@ -12,7 +12,7 @@ Available classes: @react-example Logo.example.jsx -@react-props Logo.jsx +@react-props Logo.tsx Style guide: components.logo */ diff --git a/packages/ds-healthcare-gov/docs/src/pages/patterns/Header/Header.docs.scss b/packages/ds-healthcare-gov/docs/src/pages/patterns/Header/Header.docs.scss index 6130f357ad..e2329a1b25 100644 --- a/packages/ds-healthcare-gov/docs/src/pages/patterns/Header/Header.docs.scss +++ b/packages/ds-healthcare-gov/docs/src/pages/patterns/Header/Header.docs.scss @@ -15,7 +15,7 @@ Style guide: patterns.header @react-example Header.example.jsx -@react-props Header.jsx +@react-props Header.tsx @responsive diff --git a/packages/ds-healthcare-gov/src/components/Header/DeConsumerMessage.tsx b/packages/ds-healthcare-gov/src/components/Header/DeConsumerMessage.tsx index f1c7d0ac9d..1f0e2b525a 100644 --- a/packages/ds-healthcare-gov/src/components/Header/DeConsumerMessage.tsx +++ b/packages/ds-healthcare-gov/src/components/Header/DeConsumerMessage.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { TFunction } from 'react-i18next'; interface DeConsumerMessageProps { - deBrokerName: string; + deBrokerName?: string; /** * @hide-props */ diff --git a/packages/ds-healthcare-gov/src/components/Logo/LogoEnSvg.tsx b/packages/ds-healthcare-gov/src/components/Logo/LogoEnSvg.tsx index 7bbfc7a6f4..ec3873cc96 100644 --- a/packages/ds-healthcare-gov/src/components/Logo/LogoEnSvg.tsx +++ b/packages/ds-healthcare-gov/src/components/Logo/LogoEnSvg.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const LogoEnSvg = function () { +const LogoEnSvg: React.FC = (props) => { // prettier-ignore return ( diff --git a/packages/ds-healthcare-gov/src/components/Logo/LogoEsSvg.tsx b/packages/ds-healthcare-gov/src/components/Logo/LogoEsSvg.tsx index 9730bba494..93ac508ec5 100644 --- a/packages/ds-healthcare-gov/src/components/Logo/LogoEsSvg.tsx +++ b/packages/ds-healthcare-gov/src/components/Logo/LogoEsSvg.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const LogoEsSvg = function () { +const LogoEsSvg: React.FC = (props) => { // prettier-ignore return ( diff --git a/packages/ds-healthcare-gov/src/components/PrivacySettings/PrivacySettingsDialog.tsx b/packages/ds-healthcare-gov/src/components/PrivacySettings/PrivacySettingsDialog.tsx index b8f1bac87f..22f2bee6b1 100644 --- a/packages/ds-healthcare-gov/src/components/PrivacySettings/PrivacySettingsDialog.tsx +++ b/packages/ds-healthcare-gov/src/components/PrivacySettings/PrivacySettingsDialog.tsx @@ -39,11 +39,9 @@ export const PrivacySettingsDialog = (props: PrivacySettingsDialogProps) => { return ( diff --git a/packages/ds-medicare-gov/src/components/NavigationMenu/NavigationMenu.tsx b/packages/ds-medicare-gov/src/components/NavigationMenu/NavigationMenu.tsx index 2ab3d7f681..24770fb729 100644 --- a/packages/ds-medicare-gov/src/components/NavigationMenu/NavigationMenu.tsx +++ b/packages/ds-medicare-gov/src/components/NavigationMenu/NavigationMenu.tsx @@ -1,7 +1,8 @@ import { Button } from '@cmsgov/design-system'; -import { Close, Hamburger } from '../Icons'; +import { Close } from '../Icons'; import React from 'react'; import uniqueId from 'lodash/uniqueId'; +import { MenuIconThin } from '@cmsgov/design-system'; export interface NavigationMenuProps { alwaysShowMenuButton?: boolean; @@ -49,7 +50,11 @@ export default class NavigationMenu extends React.PureComponent< onClick={this.toggleMenu} variation="transparent" > - {this.state.menuOpen ? : } + {this.state.menuOpen ? ( + + ) : ( + + )}