From bc2ccec81a774fa55df0c8bcfb257de66941c065 Mon Sep 17 00:00:00 2001 From: Forrest Baer Date: Tue, 1 Feb 2022 08:38:24 -0600 Subject: [PATCH] NO TICKET - Resolution of several build, start and test warnings (#1552) * updates prop references to tsx files as jsx files for these no longer exist * updates caniuse definitions for latest browsers solving npx browser update warning on build * Updates functions to allow for undefined props (they accept none) solving docgen warning * updates ellipses component definition to allow for empty props solving docgen warning (it has no props) * allow deBrokerName to be undefined to allow for fallback functionality to work, solves test warning as well * resolves build error recommending flex-end instead of end * componentWillMount is deprecated, change guidelines to reflect use of componentDidMount * NavigationMenu was using the deprecated Hamburger icon, changed to use MenuIconThin solving test warning * button variation 'secondary' doesn't exit on button types, changed to transparent to match dialog close button for h.gov, also updated title to heading which was causing the heading to not be displayed at all previously, fixes several test warnings * simpler way to do this, and updating privacy button size to use default * fixes for linting errors --- guides/CODING-GUIDELINES.md | 2 +- .../src/components/Pagination/Ellipses.tsx | 6 ++++-- .../src/styles/components/_Pagination.scss | 2 +- .../src/pages/components/Logo/Logo.docs.scss | 2 +- .../src/pages/patterns/Header/Header.docs.scss | 2 +- .../components/Header/DeConsumerMessage.tsx | 2 +- .../src/components/Logo/LogoEnSvg.tsx | 2 +- .../src/components/Logo/LogoEsSvg.tsx | 2 +- .../PrivacySettings/PrivacySettingsDialog.tsx | 6 ++---- .../NavigationMenu/NavigationMenu.tsx | 9 +++++++-- yarn.lock | 18 ++++-------------- 11 files changed, 24 insertions(+), 29 deletions(-) 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 ? ( + + ) : ( + + )}