diff --git a/src/components/Footer/SocialLinks/SocialLinks.test.tsx b/src/components/Footer/SocialLinks/SocialLinks.test.tsx index 3f5869a2c3..04e0c71155 100644 --- a/src/components/Footer/SocialLinks/SocialLinks.test.tsx +++ b/src/components/Footer/SocialLinks/SocialLinks.test.tsx @@ -40,7 +40,9 @@ describe('SocialLinks component', () => { describe('SocialLink component', () => { it('renders without errors', () => { const { container } = render() - expect(container.querySelector('.usa-social-link')).toBeInTheDocument() - expect(screen.getByRole('img')).toHaveAttribute('alt', 'Instagram') + const link = container.querySelector('.usa-social-link') + expect(link).toBeInTheDocument() + expect(link).toHaveAttribute('title', 'Instagram') + expect(screen.getByRole('img')).toHaveAttribute('name', 'Instagram') }) }) diff --git a/src/components/Footer/SocialLinks/SocialLinks.tsx b/src/components/Footer/SocialLinks/SocialLinks.tsx index 24eb04340d..fddd1d98bb 100644 --- a/src/components/Footer/SocialLinks/SocialLinks.tsx +++ b/src/components/Footer/SocialLinks/SocialLinks.tsx @@ -1,12 +1,7 @@ /* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react' import classnames from 'classnames' - -import iconFacebook from '@uswds/uswds/src/img/usa-icons/facebook.svg' -import iconTwitter from '@uswds/uswds/src/img/usa-icons/twitter.svg' -import iconYouTube from '@uswds/uswds/src/img/usa-icons/youtube.svg' -import iconInstagram from '@uswds/uswds/src/img/usa-icons/instagram.svg' -import iconRSS from '@uswds/uswds/src/img/usa-icons/rss_feed.svg' +import { Icon } from '../../Icon/Icons' type SocialLinksProps = { links: React.ReactNode[] @@ -39,28 +34,26 @@ export const SocialLink = ({ name, ...props }: SocialLinkProps & JSX.IntrinsicElements['a']): React.ReactElement => { - let iconSrc = '' + let icon: Icon switch (name) { case 'Facebook': - iconSrc = iconFacebook + icon = break case 'Twitter': - iconSrc = iconTwitter + icon = break case 'YouTube': - iconSrc = iconYouTube + icon = break case 'Instagram': - iconSrc = iconInstagram + icon = break case 'RSS': - iconSrc = iconRSS + icon = break } return ( - - {name} - + {icon} ) } diff --git a/src/components/Search/SearchButton/SearchButton.tsx b/src/components/Search/SearchButton/SearchButton.tsx index 612b8105cf..8c8b999810 100644 --- a/src/components/Search/SearchButton/SearchButton.tsx +++ b/src/components/Search/SearchButton/SearchButton.tsx @@ -1,7 +1,7 @@ import React from 'react' import classnames from 'classnames' -import searchImg from '@uswds/uswds/src/img/usa-icons-bg/search--white.svg' +import { Icon } from '../../Icon/Icons' import { Button } from '../../Button/Button' @@ -37,11 +37,7 @@ export const SearchButton = ({ {!isSmall && ( {buttonText} )} - {buttonText} + ) diff --git a/src/components/banner/BannerLockImage/BannerLockImage.test.tsx b/src/components/banner/BannerLockImage/BannerLockImage.test.tsx deleted file mode 100644 index e59187dc98..0000000000 --- a/src/components/banner/BannerLockImage/BannerLockImage.test.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react' -import { render, screen, within } from '@testing-library/react' -import { BannerLockImage } from './BannerLockImage' - -describe('BannerIcon Component', () => { - it('renders properly', () => { - const { container } = render( - - ) - - const span = container.querySelector('span') - const svg = screen.getByRole('img') - const title = within(svg).getByText('A Lock') - const description = within(svg).getByText('A picture of a lock') - - expect(span).toHaveClass('icon-lock') - expect(svg).toHaveClass('usa-banner__lock-image') - expect(svg).toHaveAttribute('aria-labelledby', 'banner-lock-description') - expect(title).toHaveProperty('id', 'banner-lock-title') - expect(description).toHaveProperty('id', 'banner-lock-description') - }) - - it('Allows custom classes to be passed in', () => { - const { container } = render( - - ) - - const span = container.querySelector('span') - const svg = screen.getByRole('img') - - expect(span).toHaveClass('icon-lock span-class') - expect(svg).toHaveClass('usa-banner__lock-image svg-class') - }) -}) diff --git a/src/components/banner/BannerLockImage/BannerLockImage.tsx b/src/components/banner/BannerLockImage/BannerLockImage.tsx deleted file mode 100644 index 84fb6c1f96..0000000000 --- a/src/components/banner/BannerLockImage/BannerLockImage.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React, { ReactElement } from 'react' -import classNames from 'classnames' - -type BannerLockImageProps = { - title: string - titleProps?: JSX.IntrinsicElements['title'] - description: string - descriptionProps?: JSX.IntrinsicElements['desc'] - svgProps?: JSX.IntrinsicElements['svg'] -} - -export const BannerLockImage = ({ - className, - title, - titleProps, - description, - descriptionProps, - svgProps, - ...spanProps -}: BannerLockImageProps & JSX.IntrinsicElements['span']): ReactElement => { - const spanClasses = classNames('icon-lock', className) - - const { className: svgClassName, ...remainingSvgProps } = svgProps || {} - const svgClasses = classNames('usa-banner__lock-image', svgClassName) - - return ( - - - - - - - - ) -} diff --git a/src/components/banner/CustomBanner.stories.tsx b/src/components/banner/CustomBanner.stories.tsx index 9151bd2617..183c7a4f56 100644 --- a/src/components/banner/CustomBanner.stories.tsx +++ b/src/components/banner/CustomBanner.stories.tsx @@ -1,4 +1,5 @@ import React, { ReactElement, useState } from 'react' +import { Icon } from '../Icon/Icons' import { Banner, BannerButton, @@ -7,7 +8,6 @@ import { BannerGuidance, BannerHeader, BannerIcon, - BannerLockImage, MediaBlockBody, } from '../../index' @@ -18,10 +18,6 @@ import httpsIcon from '@uswds/uswds/src/img/icon-https.svg' const CustomBanner = (): ReactElement => { const [isOpen, setIsOpen] = useState(false) - const lock = ( - - ) - return ( {

Secure .gov websites use HTTPS -
A lock ( {lock} ) or{' '} +
A lock () or{' '} https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites. diff --git a/src/components/banner/GovBanner/GovBanner.tsx b/src/components/banner/GovBanner/GovBanner.tsx index b6a9831204..396df533ff 100644 --- a/src/components/banner/GovBanner/GovBanner.tsx +++ b/src/components/banner/GovBanner/GovBanner.tsx @@ -7,7 +7,7 @@ import { BannerContent } from '../BannerContent/BannerContent' import { BannerGuidance } from '../BannerGuidance/BannerGuidance' import { BannerIcon } from '../BannerIcon/BannerIcon' import { MediaBlockBody } from '../../mediablock/MediaBlockBody/MediaBlockBody' -import { BannerLockImage } from '../BannerLockImage/BannerLockImage' +import { Icon } from '../../Icon/Icons' // assets import flagImg from '@uswds/uswds/src/img/us_flag_small.png' @@ -29,10 +29,6 @@ interface GovBannerCopy { } const getCopy = (language: Language, tld: TLD): GovBannerCopy => { - const lock = ( - - ) - switch (language) { case 'english': return { @@ -61,7 +57,7 @@ const getCopy = (language: Language, tld: TLD): GovBannerCopy => { httpsSectionHeader: `Secure ${tld} websites use HTTPS`, httpsSectionContent: ( <> - A lock ( {lock} ) or https://{' '} + A lock () or https://{' '} means you’ve safely connected to the {tld} website. Share sensitive information only on official, secure websites. @@ -94,7 +90,7 @@ const getCopy = (language: Language, tld: TLD): GovBannerCopy => { httpsSectionHeader: `Los sitios web seguros ${tld} usan HTTPS`, httpsSectionContent: ( <> - Un candado ( {lock} ) o https://{' '} + Un candado () o https://{' '} significa que usted se conectó de forma segura a un sitio web {tld}. Comparta información sensible sólo en sitios web oficiales y seguros. diff --git a/src/components/banner/GovBanner/__snapshots__/GovBanner.test.tsx.snap b/src/components/banner/GovBanner/__snapshots__/GovBanner.test.tsx.snap index 3e6909a0ac..2bd865706e 100644 --- a/src/components/banner/GovBanner/__snapshots__/GovBanner.test.tsx.snap +++ b/src/components/banner/GovBanner/__snapshots__/GovBanner.test.tsx.snap @@ -113,38 +113,14 @@ exports[`GovBanner component static content renders consistently in English for
A - lock ( - - - - - - - - ) + lock ( + + ) or @@ -276,38 +252,14 @@ exports[`GovBanner component static content renders consistently in English for
A - lock ( - - - - - - - - ) + lock ( + + ) or @@ -439,38 +391,14 @@ exports[`GovBanner component static content renders consistently in Spanish for
Un - candado ( - - - - - - - - ) + candado ( + + ) o @@ -602,38 +530,14 @@ exports[`GovBanner component static content renders consistently in Spanish for
Un - candado ( - - - - - - - - ) + candado ( + + ) o @@ -765,38 +669,14 @@ exports[`GovBanner component static content renders consistently with default pr
A - lock ( - - - - - - - - ) + lock ( + + ) or diff --git a/src/components/header/NavCloseButton/NavCloseButton.tsx b/src/components/header/NavCloseButton/NavCloseButton.tsx index a4f3d9251e..43af7a82bd 100644 --- a/src/components/header/NavCloseButton/NavCloseButton.tsx +++ b/src/components/header/NavCloseButton/NavCloseButton.tsx @@ -1,7 +1,7 @@ import React from 'react' import classnames from 'classnames' // assets -import closeImg from '@uswds/uswds/src/img/usa-icons/close.svg' +import { Icon } from '../../Icon/Icons' export const NavCloseButton = ({ onClick, @@ -16,8 +16,9 @@ export const NavCloseButton = ({ onClick={onClick} data-testid="navCloseButton" {...buttonProps} - type="button"> - close + type="button" + aria-label="Close"> + ) } diff --git a/src/index.ts b/src/index.ts index 69af332d6e..dd003d8f0f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -22,7 +22,6 @@ export { BannerFlag } from './components/banner/BannerFlag/BannerFlag' export { BannerGuidance } from './components/banner/BannerGuidance/BannerGuidance' export { BannerHeader } from './components/banner/BannerHeader/BannerHeader' export { BannerIcon } from './components/banner/BannerIcon/BannerIcon' -export { BannerLockImage } from './components/banner/BannerLockImage/BannerLockImage' export { GovBanner } from './components/banner/GovBanner/GovBanner' /** Collection components */