From 576573bcf863a9d3a43c0752204b72a330b93e29 Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Wed, 26 Jul 2023 14:03:46 -0700
Subject: [PATCH 01/13] added language selector

---
 .../LanguageSelector.stories.tsx              | 87 +++++++++++++++++
 .../LanguageSelector.test.tsx                 | 91 ++++++++++++++++++
 .../LanguageSelector/LanguageSelector.tsx     | 96 +++++++++++++++++++
 .../LanguageSelectorButton.tsx                | 36 +++++++
 src/components/header/Menu/Menu.test.tsx      | 14 +++
 src/components/header/Menu/Menu.tsx           | 10 +-
 .../header/NavList/NavList.test.tsx           |  2 +
 src/components/header/NavList/NavList.tsx     | 11 ++-
 8 files changed, 345 insertions(+), 2 deletions(-)
 create mode 100644 src/components/LanguageSelector/LanguageSelector.stories.tsx
 create mode 100644 src/components/LanguageSelector/LanguageSelector.test.tsx
 create mode 100644 src/components/LanguageSelector/LanguageSelector.tsx
 create mode 100644 src/components/LanguageSelector/LanguageSelectorButton.tsx

diff --git a/src/components/LanguageSelector/LanguageSelector.stories.tsx b/src/components/LanguageSelector/LanguageSelector.stories.tsx
new file mode 100644
index 0000000000..0498fb7643
--- /dev/null
+++ b/src/components/LanguageSelector/LanguageSelector.stories.tsx
@@ -0,0 +1,87 @@
+import React from 'react'
+import { LanguageSelector, LanguageDefinition } from './LanguageSelector'
+
+export default {
+  title: 'Components/LanguageSelector',
+  component: LanguageSelector,
+  argTypes: {
+    small: { control: 'boolean' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### USWDS 3.0 LanguageSelector component
+
+Source: https://designsystem.digital.gov/components/language-selector/
+`,
+      },
+    },
+  },
+}
+type StorybookArguments = {
+  small?: boolean
+}
+const voidLink = 'javascript:void()'
+const languages: LanguageDefinition[] = [
+  {
+    label: 'العربية',
+    label_en: 'Arabic',
+    attr: 'ar',
+    on_click: voidLink,
+  },
+  {
+    label: '简体字',
+    label_en: 'Chinese - Simplified',
+    attr: 'zh',
+    on_click: voidLink,
+  },
+  {
+    label: 'English',
+    attr: 'en',
+    on_click: voidLink,
+  },
+  {
+    label: 'Español',
+    label_en: 'Spanish',
+    attr: 'es',
+    on_click: voidLink,
+  },
+  {
+    label: 'Français',
+    label_en: 'French',
+    attr: 'fr',
+    on_click: voidLink,
+  },
+  {
+    label: 'Italiano',
+    label_en: 'Italian',
+    attr: 'it',
+    on_click: voidLink,
+  },
+  {
+    label: 'Pусский',
+    label_en: 'Russian',
+    attr: 'ru',
+    on_click: voidLink,
+  },
+]
+
+export const TwoLanguages = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
+  <LanguageSelector
+    langs={[languages[2], languages[3]]}
+    small={argTypes.small}
+  />
+)
+
+export const MoreThanTwoLanguages = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
+  <LanguageSelector
+    langs={languages}
+    label="Languages"
+    small={argTypes.small}
+  />
+)
diff --git a/src/components/LanguageSelector/LanguageSelector.test.tsx b/src/components/LanguageSelector/LanguageSelector.test.tsx
new file mode 100644
index 0000000000..91c41c204b
--- /dev/null
+++ b/src/components/LanguageSelector/LanguageSelector.test.tsx
@@ -0,0 +1,91 @@
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react'
+import {
+  LanguageSelector,
+  LanguageDefinition,
+} from '../LanguageSelector/LanguageSelector'
+
+const voidLink = 'javascript:void()'
+const languages: LanguageDefinition[] = [
+  {
+    label: 'العربية',
+    label_en: 'Arabic',
+    attr: 'ar',
+    on_click: voidLink,
+  },
+  {
+    label: '简体字',
+    label_en: 'Chinese - Simplified',
+    attr: 'zh',
+    on_click: voidLink,
+  },
+  {
+    label: 'English',
+    attr: 'en',
+    on_click: voidLink,
+  },
+]
+
+describe('LanguageSelector component', () => {
+  it('renders without errors', () => {
+    const { getByTestId } = render(<LanguageSelector langs={languages} />)
+    expect(getByTestId('languageSelector')).toBeInTheDocument()
+  })
+
+  it('renders custom styles', () => {
+    const { getByTestId } = render(
+      <LanguageSelector langs={languages} className="custom-class" />
+    )
+    expect(getByTestId('languageSelector')).toHaveClass('custom-class')
+  })
+
+  it('renders small', () => {
+    const { getByTestId } = render(<LanguageSelector langs={languages} small />)
+    expect(getByTestId('languageSelector')).toHaveClass('usa-language--small')
+  })
+
+  it('is auto-labelled with the first language in the list', () => {
+    const { getByTestId } = render(<LanguageSelector langs={languages} />)
+    expect(getByTestId('languageSelectorButton')).toHaveTextContent(
+      languages[0].label
+    )
+  })
+
+  describe('Given 2 languages', () => {
+    it('toggles button label on click', () => {
+      const { getByTestId } = render(
+        <LanguageSelector langs={[languages[0], languages[1]]} />
+      )
+      const button = getByTestId('languageSelectorButton')
+      expect(button).toHaveTextContent(languages[0].label)
+      fireEvent.click(button)
+      expect(button).toHaveTextContent(languages[1].label)
+      fireEvent.click(button)
+      expect(button).toHaveTextContent(languages[0].label)
+    })
+  })
+
+  describe('Given >2 languages', () => {
+    it('displays the given label', () => {
+      const { getByTestId } = render(
+        <LanguageSelector langs={languages} label="Languages" />
+      )
+      expect(getByTestId('languageSelectorButton')).toHaveTextContent(
+        'Languages'
+      )
+    })
+
+    it('renders list when opened', () => {
+      const { getByText, getByTestId } = render(
+        <LanguageSelector langs={languages} label="Languages" />
+      )
+      expect(getByText(languages[0].label)).not.toBeVisible()
+      expect(getByText(languages[1].label)).not.toBeVisible()
+      expect(getByText(languages[2].label)).not.toBeVisible()
+      fireEvent.click(getByTestId('languageSelectorButton'))
+      expect(getByText(languages[0].label)).toBeVisible()
+      expect(getByText(languages[1].label)).toBeVisible()
+      expect(getByText(languages[2].label)).toBeVisible()
+    })
+  })
+})
diff --git a/src/components/LanguageSelector/LanguageSelector.tsx b/src/components/LanguageSelector/LanguageSelector.tsx
new file mode 100644
index 0000000000..670d84be75
--- /dev/null
+++ b/src/components/LanguageSelector/LanguageSelector.tsx
@@ -0,0 +1,96 @@
+import React, { useState } from 'react'
+import classnames from 'classnames'
+import { Menu } from '../header/Menu/Menu'
+import { LanguageSelectorButton } from './LanguageSelectorButton'
+
+export type LanguageDefinition = {
+  label: string
+  label_en?: string
+  attr: string
+  on_click: string
+}
+
+type LanguageSelectorProps = {
+  label?: string
+  langs: LanguageDefinition[]
+  small?: boolean
+  className?: string
+}
+
+export const LanguageSelector = ({
+  label,
+  langs,
+  small,
+  className,
+  ...divProps
+}: LanguageSelectorProps &
+  JSX.IntrinsicElements['div']): React.ReactElement => {
+  const classes = classnames(
+    'usa-language-container',
+    {
+      [`usa-language--small`]: small !== undefined,
+    },
+    className
+  )
+
+  if (langs.length > 2) {
+    const [isOpen, setIsOpen] = useState(false)
+    const items = []
+    for (let i = 0; i < langs.length; i++) {
+      // eslint-disable-next-line security/detect-object-injection
+      const lang: LanguageDefinition = langs[i]
+      items.push(
+        <a href={lang.on_click} key={lang.attr}>
+          <span lang={lang.attr}>
+            <strong>{lang.label}</strong>
+          </span>
+          {lang.label_en && ` (${lang.label_en})`}
+        </a>
+      )
+    }
+    return (
+      <div className={classes} data-testid="languageSelector" {...divProps}>
+        <ul className="usa-language__primary usa-accordion">
+          <li className="usa-language__primary-item">
+            <LanguageSelectorButton
+              label={label || langs[0].label}
+              isOpen={isOpen}
+              onToggle={() => {
+                setIsOpen((prevIsOpen) => !prevIsOpen)
+              }}
+            />
+            <Menu
+              items={items}
+              isOpen={isOpen}
+              id="language-options"
+              type="language"
+            />
+          </li>
+        </ul>
+      </div>
+    )
+  } else {
+    if (label)
+      console.warn(
+        "LanguageSelector's label is not used when only two languages are available."
+      )
+    const [langIndex, setLangIndex] = useState(false)
+    const curLang = langs[Number(langIndex)]
+    const curLangNotEn =
+      curLang.attr && curLang.attr !== 'en' ? curLang.attr : undefined
+    return (
+      <div className={classes} data-testid="languageSelector" {...divProps}>
+        <LanguageSelectorButton
+          className={classes}
+          label={curLang.label}
+          labelAttr={curLangNotEn}
+          onToggle={() => {
+            setLangIndex((prevLangIndex) => !prevLangIndex)
+          }}
+        />
+      </div>
+    )
+  }
+}
+
+export default LanguageSelector
diff --git a/src/components/LanguageSelector/LanguageSelectorButton.tsx b/src/components/LanguageSelector/LanguageSelectorButton.tsx
new file mode 100644
index 0000000000..b267b998ce
--- /dev/null
+++ b/src/components/LanguageSelector/LanguageSelectorButton.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import classnames from 'classnames'
+
+type LanguageSelectorButtonProps = {
+  label: string
+  labelAttr?: string
+  isOpen?: boolean
+  onToggle: () => void
+}
+
+export const LanguageSelectorButton = ({
+  label,
+  labelAttr,
+  isOpen,
+  onToggle,
+  className,
+  ...buttonProps
+}: LanguageSelectorButtonProps &
+  JSX.IntrinsicElements['button']): React.ReactElement => {
+  const classes = classnames('usa-button', 'usa-language__link', className)
+  const labelNotEn = labelAttr && <span lang={labelAttr}>{label}</span>
+  return (
+    <button
+      data-testid="languageSelectorButton"
+      className={classes}
+      aria-expanded={isOpen}
+      aria-controls="language-options"
+      onClick={(): void => onToggle()}
+      type="button"
+      {...buttonProps}>
+      {labelNotEn || label}
+    </button>
+  )
+}
+
+export default LanguageSelectorButton
diff --git a/src/components/header/Menu/Menu.test.tsx b/src/components/header/Menu/Menu.test.tsx
index e3b6d88e94..4a70adf35a 100644
--- a/src/components/header/Menu/Menu.test.tsx
+++ b/src/components/header/Menu/Menu.test.tsx
@@ -32,4 +32,18 @@ describe('Menu component', () => {
     expect(getByText('Simple link one')).toBeInTheDocument()
     expect(getByText('Simple link two')).toBeInTheDocument()
   })
+
+  it('defaults to subnav type', () => {
+    const { container } = render(<Menu items={testItems} isOpen={true} />)
+    expect(container.querySelector('.usa-nav__submenu')).toBeInTheDocument()
+  })
+
+  it('renders given NavList type', () => {
+    const { container } = render(
+      <Menu items={testItems} isOpen={true} type="language" />
+    )
+    expect(
+      container.querySelector('.usa-language__submenu-item')
+    ).toBeInTheDocument()
+  })
 })
diff --git a/src/components/header/Menu/Menu.tsx b/src/components/header/Menu/Menu.tsx
index 92231491cf..39cc54fded 100644
--- a/src/components/header/Menu/Menu.tsx
+++ b/src/components/header/Menu/Menu.tsx
@@ -4,19 +4,27 @@ import { NavList, NavListProps } from '../NavList/NavList'
 type MenuProps = {
   items: React.ReactNode[]
   isOpen: boolean
+  type?:
+    | 'primary'
+    | 'secondary'
+    | 'subnav'
+    | 'megamenu'
+    | 'footerSecondary'
+    | 'language'
 }
 
 export const Menu = ({
   className,
   items,
   isOpen,
+  type,
   ...navListProps
 }: MenuProps & NavListProps): React.ReactElement => {
   return (
     <NavList
       className={className}
       items={items}
-      type="subnav"
+      type={type ? type : 'subnav'}
       hidden={!isOpen}
       {...navListProps}
     />
diff --git a/src/components/header/NavList/NavList.test.tsx b/src/components/header/NavList/NavList.test.tsx
index aae53058a1..a3dee54ab4 100644
--- a/src/components/header/NavList/NavList.test.tsx
+++ b/src/components/header/NavList/NavList.test.tsx
@@ -31,6 +31,7 @@ describe('NavList component', () => {
       ['subnav', '.usa-nav__submenu'],
       ['megamenu', '.usa-nav__submenu-list'],
       ['footerSecondary', '.usa-list'],
+      ['language', '.usa-language__submenu-item'],
     ])('prefers applies type classes %s', (typeString, expectedClass) => {
       const type = typeString as
         | 'primary'
@@ -38,6 +39,7 @@ describe('NavList component', () => {
         | 'subnav'
         | 'megamenu'
         | 'footerSecondary'
+        | 'language'
       const { container } = render(<NavList items={testItems} type={type} />)
       expect(container.querySelector(expectedClass)).toBeInTheDocument()
     })
diff --git a/src/components/header/NavList/NavList.tsx b/src/components/header/NavList/NavList.tsx
index c4f1b16b46..9126be8893 100644
--- a/src/components/header/NavList/NavList.tsx
+++ b/src/components/header/NavList/NavList.tsx
@@ -3,7 +3,13 @@ import classnames from 'classnames'
 
 type CustomNavListProps = {
   items: React.ReactNode[]
-  type?: 'primary' | 'secondary' | 'subnav' | 'megamenu' | 'footerSecondary'
+  type?:
+    | 'primary'
+    | 'secondary'
+    | 'subnav'
+    | 'megamenu'
+    | 'footerSecondary'
+    | 'language'
 }
 
 export type NavListProps = CustomNavListProps & JSX.IntrinsicElements['ul']
@@ -19,6 +25,7 @@ export const NavList = ({
   const isSubnav = type === 'subnav'
   const isMegamenu = type === 'megamenu'
   const isFooterSecondary = type === 'footerSecondary'
+  const isLanguage = type === 'language'
 
   const ulClasses = classnames(
     {
@@ -27,6 +34,7 @@ export const NavList = ({
       'usa-nav__submenu': isSubnav,
       'usa-nav__submenu-list': isMegamenu,
       'usa-list usa-list--unstyled': isFooterSecondary,
+      'usa-language__submenu': isLanguage,
     },
     className
   )
@@ -36,6 +44,7 @@ export const NavList = ({
     'usa-nav__secondary-item': isSecondary,
     'usa-nav__submenu-item': isSubnav || isMegamenu,
     'usa-footer__secondary-link': isFooterSecondary,
+    'usa-language__submenu-item': isLanguage,
   })
 
   return (

From 9d57c17c62925401fffe8a73d323bc05f0cd3802 Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Wed, 26 Jul 2023 14:24:12 -0700
Subject: [PATCH 02/13] added to index.ts

---
 src/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/index.ts b/src/index.ts
index dede489259..87a0f4f0e9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -62,6 +62,8 @@ export { InputGroup } from './components/forms/InputGroup/InputGroup'
 export { InputPrefix } from './components/forms/InputPrefix/InputPrefix'
 export { InputSuffix } from './components/forms/InputSuffix/InputSuffix'
 export { Label } from './components/forms/Label/Label'
+export { LanguageSelector } from './components/LanguageSelector/LanguageSelector'
+export { LanguageSelectorButton } from './components/LanguageSelector/LanguageSelectorButton'
 export { Radio } from './components/forms/Radio/Radio'
 export { RangeInput } from './components/forms/RangeInput/RangeInput'
 export { Select } from './components/forms/Select/Select'

From 80b9fa4073b59d8b2c19d63fb3f38d57455dd109 Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Fri, 28 Jul 2023 10:21:42 -0700
Subject: [PATCH 03/13] a few things...

- added both buttons and links, depending on given click action
- added missing click action to 2-lang button
- added custom class story
---
 .../LanguageSelector.stories.tsx              | 87 +++++++++++++++++--
 .../LanguageSelector.test.tsx                 | 67 +++++++++++++-
 .../LanguageSelector/LanguageSelector.tsx     | 34 ++++++--
 3 files changed, 171 insertions(+), 17 deletions(-)

diff --git a/src/components/LanguageSelector/LanguageSelector.stories.tsx b/src/components/LanguageSelector/LanguageSelector.stories.tsx
index 0498fb7643..2ce1c4c98e 100644
--- a/src/components/LanguageSelector/LanguageSelector.stories.tsx
+++ b/src/components/LanguageSelector/LanguageSelector.stories.tsx
@@ -22,8 +22,8 @@ Source: https://designsystem.digital.gov/components/language-selector/
 type StorybookArguments = {
   small?: boolean
 }
-const voidLink = 'javascript:void()'
-const languages: LanguageDefinition[] = [
+const voidLink = '#test'
+const languagesLink: LanguageDefinition[] = [
   {
     label: 'العربية',
     label_en: 'Arabic',
@@ -67,21 +67,96 @@ const languages: LanguageDefinition[] = [
   },
 ]
 
-export const TwoLanguages = (
+const voidButton = () => console.log('click')
+const languagesButton: LanguageDefinition[] = [
+  {
+    label: 'العربية',
+    label_en: 'Arabic',
+    attr: 'ar',
+    on_click: voidButton,
+  },
+  {
+    label: '简体字',
+    label_en: 'Chinese - Simplified',
+    attr: 'zh',
+    on_click: voidButton,
+  },
+  {
+    label: 'English',
+    attr: 'en',
+    on_click: voidButton,
+  },
+  {
+    label: 'Español',
+    label_en: 'Spanish',
+    attr: 'es',
+    on_click: voidButton,
+  },
+  {
+    label: 'Français',
+    label_en: 'French',
+    attr: 'fr',
+    on_click: voidButton,
+  },
+  {
+    label: 'Italiano',
+    label_en: 'Italian',
+    attr: 'it',
+    on_click: voidButton,
+  },
+  {
+    label: 'Pусский',
+    label_en: 'Russian',
+    attr: 'ru',
+    on_click: voidButton,
+  },
+]
+
+export const TwoLanguagesAsALink = (
   argTypes: StorybookArguments
 ): React.ReactElement => (
   <LanguageSelector
-    langs={[languages[2], languages[3]]}
+    langs={[languagesLink[2], languagesLink[3]]}
     small={argTypes.small}
   />
 )
 
-export const MoreThanTwoLanguages = (
+export const TwoLanguagesAsAButton = (
   argTypes: StorybookArguments
 ): React.ReactElement => (
   <LanguageSelector
-    langs={languages}
+    langs={[languagesButton[2], languagesButton[3]]}
+    small={argTypes.small}
+  />
+)
+
+export const MoreThanTwoLanguagesAsALink = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
+  <LanguageSelector
+    langs={languagesLink}
     label="Languages"
     small={argTypes.small}
   />
 )
+
+export const MoreThanTwoLanguagesAsAButton = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
+  <LanguageSelector
+    langs={languagesButton}
+    label="Languages"
+    small={argTypes.small}
+  />
+)
+
+export const CustomClass = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
+  <LanguageSelector
+    langs={languagesLink}
+    label="Languages"
+    small={argTypes.small}
+    className="usa-button--unstyled"
+  />
+)
\ No newline at end of file
diff --git a/src/components/LanguageSelector/LanguageSelector.test.tsx b/src/components/LanguageSelector/LanguageSelector.test.tsx
index 91c41c204b..b64975a5f9 100644
--- a/src/components/LanguageSelector/LanguageSelector.test.tsx
+++ b/src/components/LanguageSelector/LanguageSelector.test.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { fireEvent, render } from '@testing-library/react'
+import { fireEvent, render, waitFor } from '@testing-library/react'
 import {
   LanguageSelector,
   LanguageDefinition,
 } from '../LanguageSelector/LanguageSelector'
 
-const voidLink = 'javascript:void()'
+const voidLink = '#test'
 const languages: LanguageDefinition[] = [
   {
     label: 'العربية',
@@ -26,6 +26,27 @@ const languages: LanguageDefinition[] = [
   },
 ]
 
+const voidButton = jest.fn();
+const languagesButton: LanguageDefinition[] = [
+  {
+    label: 'العربية',
+    label_en: 'Arabic',
+    attr: 'ar',
+    on_click: voidButton,
+  },
+  {
+    label: '简体字',
+    label_en: 'Chinese - Simplified',
+    attr: 'zh',
+    on_click: voidButton,
+  },
+  {
+    label: 'English',
+    attr: 'en',
+    on_click: voidButton,
+  },
+]
+
 describe('LanguageSelector component', () => {
   it('renders without errors', () => {
     const { getByTestId } = render(<LanguageSelector langs={languages} />)
@@ -63,6 +84,25 @@ describe('LanguageSelector component', () => {
       fireEvent.click(button)
       expect(button).toHaveTextContent(languages[0].label)
     })
+
+    it('works like a link', async () => {
+      const { getByTestId } = render(
+        <LanguageSelector langs={[languages[0], languages[1]]} />
+      )
+      fireEvent.click(getByTestId('languageSelectorButton'))
+      await waitFor(() => {
+        expect(window.location.hash).toEqual(voidLink)
+      })
+    })
+
+    it('works like a button', () => {
+      const { getByTestId } = render(
+        <LanguageSelector langs={[languagesButton[0], languagesButton[1]]} />
+      )
+      fireEvent.click(getByTestId('languageSelectorButton'))
+      fireEvent.click(getByTestId('languageSelectorButton'))
+      expect(voidButton).toHaveBeenCalledTimes(2);
+    })
   })
 
   describe('Given >2 languages', () => {
@@ -87,5 +127,28 @@ describe('LanguageSelector component', () => {
       expect(getByText(languages[1].label)).toBeVisible()
       expect(getByText(languages[2].label)).toBeVisible()
     })
+
+    describe('its list items', () => {
+      it('are links', () => {
+        const { getByTestId } = render(
+          <LanguageSelector langs={languages} label="Languages" />
+        )
+        fireEvent.click(getByTestId('languageSelectorButton'))
+        expect(getByTestId(languages[0].attr)).toHaveAttribute('href',languages[0].on_click)
+        expect(getByTestId(languages[1].attr)).toHaveAttribute('href',languages[0].on_click)
+        expect(getByTestId(languages[2].attr)).toHaveAttribute('href',languages[0].on_click)
+      })
+  
+      it('are buttons', () => {
+        const { getByTestId } = render(
+          <LanguageSelector langs={languagesButton} label="Languages" />
+        )
+        fireEvent.click(getByTestId('languageSelectorButton'))
+        fireEvent.click(getByTestId(languagesButton[0].attr))
+        fireEvent.click(getByTestId(languagesButton[1].attr))
+        fireEvent.click(getByTestId(languagesButton[2].attr))
+        expect(voidButton).toHaveBeenCalledTimes(5); //3 here and 2 above
+      })
+    })
   })
 })
diff --git a/src/components/LanguageSelector/LanguageSelector.tsx b/src/components/LanguageSelector/LanguageSelector.tsx
index 670d84be75..8eb4feb017 100644
--- a/src/components/LanguageSelector/LanguageSelector.tsx
+++ b/src/components/LanguageSelector/LanguageSelector.tsx
@@ -7,7 +7,7 @@ export type LanguageDefinition = {
   label: string
   label_en?: string
   attr: string
-  on_click: string
+  on_click: string | (() => void)
 }
 
 type LanguageSelectorProps = {
@@ -39,20 +39,32 @@ export const LanguageSelector = ({
     for (let i = 0; i < langs.length; i++) {
       // eslint-disable-next-line security/detect-object-injection
       const lang: LanguageDefinition = langs[i]
-      items.push(
-        <a href={lang.on_click} key={lang.attr}>
-          <span lang={lang.attr}>
-            <strong>{lang.label}</strong>
-          </span>
-          {lang.label_en && ` (${lang.label_en})`}
-        </a>
-      )
+      if (typeof lang.on_click === 'string') {
+        items.push(
+          <a href={lang.on_click} data-testid={lang.attr}>
+            <span lang={lang.attr}>
+              <strong>{lang.label}</strong>
+            </span>
+            {lang.label_en && ` (${lang.label_en})`}
+          </a>
+        )
+      } else {
+        items.push(
+          <button onClick={lang.on_click} data-testid={lang.attr}>
+            <span lang={lang.attr}>
+              <strong>{lang.label}</strong>
+            </span>
+            {lang.label_en && ` (${lang.label_en})`}
+          </button>
+        )
+      }
     }
     return (
       <div className={classes} data-testid="languageSelector" {...divProps}>
         <ul className="usa-language__primary usa-accordion">
           <li className="usa-language__primary-item">
             <LanguageSelectorButton
+              className={classes}
               label={label || langs[0].label}
               isOpen={isOpen}
               onToggle={() => {
@@ -78,6 +90,9 @@ export const LanguageSelector = ({
     const curLang = langs[Number(langIndex)]
     const curLangNotEn =
       curLang.attr && curLang.attr !== 'en' ? curLang.attr : undefined
+    const onClickString: string = (typeof(curLang.on_click) === 'string') ? curLang.on_click : ''
+    const onClick = (typeof(curLang.on_click) === 'string') ?
+      () => {window.location.assign(onClickString)} : curLang.on_click
     return (
       <div className={classes} data-testid="languageSelector" {...divProps}>
         <LanguageSelectorButton
@@ -85,6 +100,7 @@ export const LanguageSelector = ({
           label={curLang.label}
           labelAttr={curLangNotEn}
           onToggle={() => {
+            onClick()
             setLangIndex((prevLangIndex) => !prevLangIndex)
           }}
         />

From 17091f2471c40b89562eb45f795c179b48d68555 Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Fri, 28 Jul 2023 10:22:06 -0700
Subject: [PATCH 04/13] prettier

---
 .../LanguageSelector.stories.tsx              |  2 +-
 .../LanguageSelector.test.tsx                 | 23 +++++++++++++------
 .../LanguageSelector/LanguageSelector.tsx     | 11 ++++++---
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/LanguageSelector/LanguageSelector.stories.tsx b/src/components/LanguageSelector/LanguageSelector.stories.tsx
index 2ce1c4c98e..5fab912ff4 100644
--- a/src/components/LanguageSelector/LanguageSelector.stories.tsx
+++ b/src/components/LanguageSelector/LanguageSelector.stories.tsx
@@ -159,4 +159,4 @@ export const CustomClass = (
     small={argTypes.small}
     className="usa-button--unstyled"
   />
-)
\ No newline at end of file
+)
diff --git a/src/components/LanguageSelector/LanguageSelector.test.tsx b/src/components/LanguageSelector/LanguageSelector.test.tsx
index b64975a5f9..b40b100f99 100644
--- a/src/components/LanguageSelector/LanguageSelector.test.tsx
+++ b/src/components/LanguageSelector/LanguageSelector.test.tsx
@@ -26,7 +26,7 @@ const languages: LanguageDefinition[] = [
   },
 ]
 
-const voidButton = jest.fn();
+const voidButton = jest.fn()
 const languagesButton: LanguageDefinition[] = [
   {
     label: 'العربية',
@@ -101,7 +101,7 @@ describe('LanguageSelector component', () => {
       )
       fireEvent.click(getByTestId('languageSelectorButton'))
       fireEvent.click(getByTestId('languageSelectorButton'))
-      expect(voidButton).toHaveBeenCalledTimes(2);
+      expect(voidButton).toHaveBeenCalledTimes(2)
     })
   })
 
@@ -134,11 +134,20 @@ describe('LanguageSelector component', () => {
           <LanguageSelector langs={languages} label="Languages" />
         )
         fireEvent.click(getByTestId('languageSelectorButton'))
-        expect(getByTestId(languages[0].attr)).toHaveAttribute('href',languages[0].on_click)
-        expect(getByTestId(languages[1].attr)).toHaveAttribute('href',languages[0].on_click)
-        expect(getByTestId(languages[2].attr)).toHaveAttribute('href',languages[0].on_click)
+        expect(getByTestId(languages[0].attr)).toHaveAttribute(
+          'href',
+          languages[0].on_click
+        )
+        expect(getByTestId(languages[1].attr)).toHaveAttribute(
+          'href',
+          languages[0].on_click
+        )
+        expect(getByTestId(languages[2].attr)).toHaveAttribute(
+          'href',
+          languages[0].on_click
+        )
       })
-  
+
       it('are buttons', () => {
         const { getByTestId } = render(
           <LanguageSelector langs={languagesButton} label="Languages" />
@@ -147,7 +156,7 @@ describe('LanguageSelector component', () => {
         fireEvent.click(getByTestId(languagesButton[0].attr))
         fireEvent.click(getByTestId(languagesButton[1].attr))
         fireEvent.click(getByTestId(languagesButton[2].attr))
-        expect(voidButton).toHaveBeenCalledTimes(5); //3 here and 2 above
+        expect(voidButton).toHaveBeenCalledTimes(5) //3 here and 2 above
       })
     })
   })
diff --git a/src/components/LanguageSelector/LanguageSelector.tsx b/src/components/LanguageSelector/LanguageSelector.tsx
index 8eb4feb017..01ea4d95b3 100644
--- a/src/components/LanguageSelector/LanguageSelector.tsx
+++ b/src/components/LanguageSelector/LanguageSelector.tsx
@@ -90,9 +90,14 @@ export const LanguageSelector = ({
     const curLang = langs[Number(langIndex)]
     const curLangNotEn =
       curLang.attr && curLang.attr !== 'en' ? curLang.attr : undefined
-    const onClickString: string = (typeof(curLang.on_click) === 'string') ? curLang.on_click : ''
-    const onClick = (typeof(curLang.on_click) === 'string') ?
-      () => {window.location.assign(onClickString)} : curLang.on_click
+    const onClickString: string =
+      typeof curLang.on_click === 'string' ? curLang.on_click : ''
+    const onClick =
+      typeof curLang.on_click === 'string'
+        ? () => {
+            window.location.assign(onClickString)
+          }
+        : curLang.on_click
     return (
       <div className={classes} data-testid="languageSelector" {...divProps}>
         <LanguageSelectorButton

From d8e722604242539535c880955c47b47b46bb4d90 Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Mon, 31 Jul 2023 15:16:38 -0700
Subject: [PATCH 05/13] updated style

---
 src/components/LanguageSelector/LanguageSelector.tsx | 9 +++++++--
 src/styles/index.scss                                | 6 ++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/LanguageSelector/LanguageSelector.tsx b/src/components/LanguageSelector/LanguageSelector.tsx
index 01ea4d95b3..ee9b223c2e 100644
--- a/src/components/LanguageSelector/LanguageSelector.tsx
+++ b/src/components/LanguageSelector/LanguageSelector.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import classnames from 'classnames'
 import { Menu } from '../header/Menu/Menu'
 import { LanguageSelectorButton } from './LanguageSelectorButton'
+import { Button } from '../Button/Button'
 
 export type LanguageDefinition = {
   label: string
@@ -50,12 +51,16 @@ export const LanguageSelector = ({
         )
       } else {
         items.push(
-          <button onClick={lang.on_click} data-testid={lang.attr}>
+          <Button
+            onClick={lang.on_click}
+            data-testid={lang.attr}
+            type="button"
+            unstyled>
             <span lang={lang.attr}>
               <strong>{lang.label}</strong>
             </span>
             {lang.label_en && ` (${lang.label_en})`}
-          </button>
+          </Button>
         )
       }
     }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 5840ccb09a..ead0bc8e08 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -15,3 +15,9 @@
 .usa-search [type='search']::-webkit-search-cancel-button {
   display: none;
 }
+
+// This just allows buttons as well as links in the LanguageSelector
+// It can be removed when https://github.com/uswds/uswds/issues/5409 is fixed
+.usa-language__submenu .usa-language__submenu-item button {
+  @extend a;
+}

From 7a9913fd7c2cee23a6da5309203300c56febd5fc Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Tue, 1 Aug 2023 09:27:13 -0700
Subject: [PATCH 06/13] always show lang attr, make more language agnostic

---
 .../LanguageSelector.stories.tsx              | 24 +++++++++----------
 .../LanguageSelector.test.tsx                 |  8 +++----
 .../LanguageSelector/LanguageSelector.tsx     |  9 +++----
 3 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/components/LanguageSelector/LanguageSelector.stories.tsx b/src/components/LanguageSelector/LanguageSelector.stories.tsx
index 5fab912ff4..d09ab6dd61 100644
--- a/src/components/LanguageSelector/LanguageSelector.stories.tsx
+++ b/src/components/LanguageSelector/LanguageSelector.stories.tsx
@@ -26,13 +26,13 @@ const voidLink = '#test'
 const languagesLink: LanguageDefinition[] = [
   {
     label: 'العربية',
-    label_en: 'Arabic',
+    label_local: 'Arabic',
     attr: 'ar',
     on_click: voidLink,
   },
   {
     label: '简体字',
-    label_en: 'Chinese - Simplified',
+    label_local: 'Chinese - Simplified',
     attr: 'zh',
     on_click: voidLink,
   },
@@ -43,25 +43,25 @@ const languagesLink: LanguageDefinition[] = [
   },
   {
     label: 'Español',
-    label_en: 'Spanish',
+    label_local: 'Spanish',
     attr: 'es',
     on_click: voidLink,
   },
   {
     label: 'Français',
-    label_en: 'French',
+    label_local: 'French',
     attr: 'fr',
     on_click: voidLink,
   },
   {
     label: 'Italiano',
-    label_en: 'Italian',
+    label_local: 'Italian',
     attr: 'it',
     on_click: voidLink,
   },
   {
     label: 'Pусский',
-    label_en: 'Russian',
+    label_local: 'Russian',
     attr: 'ru',
     on_click: voidLink,
   },
@@ -71,13 +71,13 @@ const voidButton = () => console.log('click')
 const languagesButton: LanguageDefinition[] = [
   {
     label: 'العربية',
-    label_en: 'Arabic',
+    label_local: 'Arabic',
     attr: 'ar',
     on_click: voidButton,
   },
   {
     label: '简体字',
-    label_en: 'Chinese - Simplified',
+    label_local: 'Chinese - Simplified',
     attr: 'zh',
     on_click: voidButton,
   },
@@ -88,25 +88,25 @@ const languagesButton: LanguageDefinition[] = [
   },
   {
     label: 'Español',
-    label_en: 'Spanish',
+    label_local: 'Spanish',
     attr: 'es',
     on_click: voidButton,
   },
   {
     label: 'Français',
-    label_en: 'French',
+    label_local: 'French',
     attr: 'fr',
     on_click: voidButton,
   },
   {
     label: 'Italiano',
-    label_en: 'Italian',
+    label_local: 'Italian',
     attr: 'it',
     on_click: voidButton,
   },
   {
     label: 'Pусский',
-    label_en: 'Russian',
+    label_local: 'Russian',
     attr: 'ru',
     on_click: voidButton,
   },
diff --git a/src/components/LanguageSelector/LanguageSelector.test.tsx b/src/components/LanguageSelector/LanguageSelector.test.tsx
index b40b100f99..7fe223fe60 100644
--- a/src/components/LanguageSelector/LanguageSelector.test.tsx
+++ b/src/components/LanguageSelector/LanguageSelector.test.tsx
@@ -9,13 +9,13 @@ const voidLink = '#test'
 const languages: LanguageDefinition[] = [
   {
     label: 'العربية',
-    label_en: 'Arabic',
+    label_local: 'Arabic',
     attr: 'ar',
     on_click: voidLink,
   },
   {
     label: '简体字',
-    label_en: 'Chinese - Simplified',
+    label_local: 'Chinese - Simplified',
     attr: 'zh',
     on_click: voidLink,
   },
@@ -30,13 +30,13 @@ const voidButton = jest.fn()
 const languagesButton: LanguageDefinition[] = [
   {
     label: 'العربية',
-    label_en: 'Arabic',
+    label_local: 'Arabic',
     attr: 'ar',
     on_click: voidButton,
   },
   {
     label: '简体字',
-    label_en: 'Chinese - Simplified',
+    label_local: 'Chinese - Simplified',
     attr: 'zh',
     on_click: voidButton,
   },
diff --git a/src/components/LanguageSelector/LanguageSelector.tsx b/src/components/LanguageSelector/LanguageSelector.tsx
index ee9b223c2e..3f3ca712b7 100644
--- a/src/components/LanguageSelector/LanguageSelector.tsx
+++ b/src/components/LanguageSelector/LanguageSelector.tsx
@@ -6,7 +6,7 @@ import { Button } from '../Button/Button'
 
 export type LanguageDefinition = {
   label: string
-  label_en?: string
+  label_local?: string
   attr: string
   on_click: string | (() => void)
 }
@@ -46,7 +46,7 @@ export const LanguageSelector = ({
             <span lang={lang.attr}>
               <strong>{lang.label}</strong>
             </span>
-            {lang.label_en && ` (${lang.label_en})`}
+            {lang.label_local && ` (${lang.label_local})`}
           </a>
         )
       } else {
@@ -59,7 +59,7 @@ export const LanguageSelector = ({
             <span lang={lang.attr}>
               <strong>{lang.label}</strong>
             </span>
-            {lang.label_en && ` (${lang.label_en})`}
+            {lang.label_local && ` (${lang.label_local})`}
           </Button>
         )
       }
@@ -93,8 +93,6 @@ export const LanguageSelector = ({
       )
     const [langIndex, setLangIndex] = useState(false)
     const curLang = langs[Number(langIndex)]
-    const curLangNotEn =
-      curLang.attr && curLang.attr !== 'en' ? curLang.attr : undefined
     const onClickString: string =
       typeof curLang.on_click === 'string' ? curLang.on_click : ''
     const onClick =
@@ -108,7 +106,6 @@ export const LanguageSelector = ({
         <LanguageSelectorButton
           className={classes}
           label={curLang.label}
-          labelAttr={curLangNotEn}
           onToggle={() => {
             onClick()
             setLangIndex((prevLangIndex) => !prevLangIndex)

From bc58d921499129fdf76e09df82cdff4cb7691494 Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Wed, 2 Aug 2023 14:05:33 -0700
Subject: [PATCH 07/13] tweak langAttr on button

---
 src/components/LanguageSelector/LanguageSelector.tsx      | 4 +++-
 .../LanguageSelector/LanguageSelectorButton.tsx           | 8 ++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/LanguageSelector/LanguageSelector.tsx b/src/components/LanguageSelector/LanguageSelector.tsx
index 3f3ca712b7..4477e6e399 100644
--- a/src/components/LanguageSelector/LanguageSelector.tsx
+++ b/src/components/LanguageSelector/LanguageSelector.tsx
@@ -87,10 +87,11 @@ export const LanguageSelector = ({
       </div>
     )
   } else {
-    if (label)
+    if (label) {
       console.warn(
         "LanguageSelector's label is not used when only two languages are available."
       )
+    }
     const [langIndex, setLangIndex] = useState(false)
     const curLang = langs[Number(langIndex)]
     const onClickString: string =
@@ -106,6 +107,7 @@ export const LanguageSelector = ({
         <LanguageSelectorButton
           className={classes}
           label={curLang.label}
+          labelAttr={curLang.attr}
           onToggle={() => {
             onClick()
             setLangIndex((prevLangIndex) => !prevLangIndex)
diff --git a/src/components/LanguageSelector/LanguageSelectorButton.tsx b/src/components/LanguageSelector/LanguageSelectorButton.tsx
index b267b998ce..23bda36374 100644
--- a/src/components/LanguageSelector/LanguageSelectorButton.tsx
+++ b/src/components/LanguageSelector/LanguageSelectorButton.tsx
@@ -18,7 +18,11 @@ export const LanguageSelectorButton = ({
 }: LanguageSelectorButtonProps &
   JSX.IntrinsicElements['button']): React.ReactElement => {
   const classes = classnames('usa-button', 'usa-language__link', className)
-  const labelNotEn = labelAttr && <span lang={labelAttr}>{label}</span>
+  const buttonContents = labelAttr ? (
+    <span lang={labelAttr}>{label}</span>
+  ) : (
+    label
+  )
   return (
     <button
       data-testid="languageSelectorButton"
@@ -28,7 +32,7 @@ export const LanguageSelectorButton = ({
       onClick={(): void => onToggle()}
       type="button"
       {...buttonProps}>
-      {labelNotEn || label}
+      {buttonContents}
     </button>
   )
 }

From 28a4541697f53ef8a19d1124dce32592454b70d8 Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Wed, 2 Aug 2023 19:16:26 -0700
Subject: [PATCH 08/13] side-stepped lint error

---
 src/styles/index.scss | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index ead0bc8e08..f2241b6b55 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -16,8 +16,24 @@
   display: none;
 }
 
-// This just allows buttons as well as links in the LanguageSelector
+// This just allows buttons as well as links in the LanguageSelector. A more ideal coding for this would just be to `@extend a` here instead of copy-pasting it, but that caused a lint error
 // It can be removed when https://github.com/uswds/uswds/issues/5409 is fixed
+@use 'uswds-core' as *;
+
 .usa-language__submenu .usa-language__submenu-item button {
-  @extend a;
+  color: color('white');
+  display: block;
+  line-height: line-height($theme-navigation-font-family, 3);
+  padding: 0;
+  padding: units(1);
+  text-decoration: none;
+  width: 100%; /* this is something that was actually missing when we were doing the extend because button widths hve different default widths than block element links */
+  &:focus {
+    outline-offset: units('neg-05');
+  }
+
+  &:hover {
+    color: color('white');
+    text-decoration: underline;
+  }
 }

From fe606665f449fbbe44052171dcd1f9a3479312a1 Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Wed, 2 Aug 2023 19:20:44 -0700
Subject: [PATCH 09/13] another lint fix

---
 src/components/LanguageSelector/LanguageSelector.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/LanguageSelector/LanguageSelector.tsx b/src/components/LanguageSelector/LanguageSelector.tsx
index 4477e6e399..976c4141db 100644
--- a/src/components/LanguageSelector/LanguageSelector.tsx
+++ b/src/components/LanguageSelector/LanguageSelector.tsx
@@ -34,8 +34,9 @@ export const LanguageSelector = ({
     className
   )
 
+  const [isOpen, setIsOpen] = useState(false)
+  const [langIndex, setLangIndex] = useState(false)
   if (langs.length > 2) {
-    const [isOpen, setIsOpen] = useState(false)
     const items = []
     for (let i = 0; i < langs.length; i++) {
       // eslint-disable-next-line security/detect-object-injection
@@ -92,7 +93,6 @@ export const LanguageSelector = ({
         "LanguageSelector's label is not used when only two languages are available."
       )
     }
-    const [langIndex, setLangIndex] = useState(false)
     const curLang = langs[Number(langIndex)]
     const onClickString: string =
       typeof curLang.on_click === 'string' ? curLang.on_click : ''

From 2f6ea247e514c3cdf7bd01adc83005f24c88258c Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Mon, 7 Aug 2023 10:28:30 -0700
Subject: [PATCH 10/13] fixed placement of `@use`

---
 src/styles/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index f2241b6b55..3c28a02fab 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,3 +1,4 @@
+@use 'uswds-core' as *;
 @forward 'uswds-theme';
 @forward 'uswds';
 
@@ -18,7 +19,6 @@
 
 // This just allows buttons as well as links in the LanguageSelector. A more ideal coding for this would just be to `@extend a` here instead of copy-pasting it, but that caused a lint error
 // It can be removed when https://github.com/uswds/uswds/issues/5409 is fixed
-@use 'uswds-core' as *;
 
 .usa-language__submenu .usa-language__submenu-item button {
   color: color('white');

From c4cd2bd7d9f4c19bbb22d8ce6130c6f11d9630f3 Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Wed, 9 Aug 2023 11:01:44 -0700
Subject: [PATCH 11/13] scss fix

---
 src/styles/index.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index 3c28a02fab..9a04dc0602 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,4 +1,3 @@
-@use 'uswds-core' as *;
 @forward 'uswds-theme';
 @forward 'uswds';
 

From c6706d737efbb7f1fcc0e408cadd654857b8c18a Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Wed, 9 Aug 2023 14:03:11 -0700
Subject: [PATCH 12/13] replacing utilities with hardcoded styles

---
 src/styles/index.scss | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index 9a04dc0602..71d6f37d5b 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -20,11 +20,10 @@
 // It can be removed when https://github.com/uswds/uswds/issues/5409 is fixed
 
 .usa-language__submenu .usa-language__submenu-item button {
-  color: color('white');
+  color: #ffffff;
   display: block;
-  line-height: line-height($theme-navigation-font-family, 3);
-  padding: 0;
-  padding: units(1);
+  line-height: 1.3;
+  padding: 0.5rem;
   text-decoration: none;
   width: 100%; /* this is something that was actually missing when we were doing the extend because button widths hve different default widths than block element links */
   &:focus {

From 0f3e6693d19cdf91bdf1741823929d1d494f7848 Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Wed, 9 Aug 2023 14:04:59 -0700
Subject: [PATCH 13/13] lint fix

---
 src/styles/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index 71d6f37d5b..9b48ddbdd2 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -20,7 +20,7 @@
 // It can be removed when https://github.com/uswds/uswds/issues/5409 is fixed
 
 .usa-language__submenu .usa-language__submenu-item button {
-  color: #ffffff;
+  color: #fff;
   display: block;
   line-height: 1.3;
   padding: 0.5rem;