From c2fc111309540005af746080b336720617d63c8f Mon Sep 17 00:00:00 2001 From: Kyle Holmberg Date: Fri, 21 Jun 2024 03:35:50 +0700 Subject: [PATCH 01/19] upgrade to Next v13 --- .eslintrc.js | 4 +- common/constants/dropdown-states-values.js | 61 - common/constants/partners.js | 2 +- common/constants/successStories.js | 4 +- components/Accordion/Accordion.tsx | 16 +- .../__stories__/Accordion.stories.tsx | 2 +- components/Alert/Alert.tsx | 10 +- .../Alert/__stories__/Alert.stories.tsx | 2 +- components/Badge/Badge.tsx | 10 +- .../Badge/__stories__/Badge.stories.tsx | 38 +- components/Badge/__tests__/Badge.test.tsx | 2 +- .../Branding/ColorSection/ColorSection.tsx | 8 +- .../__tests__/ColorSection.test.tsx | 2 +- .../Branding/FontSection/FontSection.tsx | 6 +- .../__tests__/FontSection.test.tsx | 2 +- .../Branding/LogoSection/LogoSection.tsx | 9 +- .../__tests__/LogoSection.test.tsx | 2 +- components/Branding/Swatch/Swatch.tsx | 10 +- .../Branding/Swatch/__tests__/Swatch.test.tsx | 2 +- components/Buttons/Button/Button.tsx | 10 +- .../Button/__stories__/Button.stories.tsx | 4 +- .../Buttons/Button/__tests__/Button.test.tsx | 2 +- .../Buttons/CloseButton/CloseButton.tsx | 8 +- .../__stories__/CloseButton.stories.tsx | 4 +- .../__tests__/CloseButton.test.tsx | 2 +- components/Buttons/LinkButton/LinkButton.tsx | 26 +- .../__stories__/LinkButton.stories.tsx | 4 +- .../LinkButton/__tests__/LinkButton.test.tsx | 2 +- components/Cards/Card/Card.tsx | 8 +- .../Cards/Card/__stories__/Card.stories.tsx | 4 +- components/Cards/Card/__tests__/Card.test.tsx | 2 +- .../FlatCard/{FlatCard.js => FlatCard.tsx} | 37 +- .../FlatCard/__stories__/FlatCard.stories.js | 4 +- .../Cards/FlatCard/__tests__/FlatCard.test.js | 4 +- components/Cards/ImageCard/ImageCard.tsx | 8 +- .../__stories__/ImageCard.stories.tsx | 8 +- .../ImageCard/__tests__/ImageCard.test.tsx | 2 +- .../Cards/ResourceCard/ResourceCard.tsx | 18 +- .../ResourceCard/ResourceSkeletonCard.tsx | 8 +- .../__stories__/ResourceCard.stories.tsx | 4 +- .../ResourceSkeletonCard.stories.tsx | 2 +- .../__tests__/ResourceCard.test.tsx | 2 +- .../__tests__/ResourceSkeletonCard.test.tsx | 2 +- components/Cards/ValueCard/ValueCard.tsx | 10 +- .../__stories__/ValueCard.stories.tsx | 4 +- .../ValueCard/__tests__/ValueCard.test.tsx | 2 +- components/Container/Container.tsx | 4 +- .../__stories__/Container.stories.tsx | 4 +- .../Container/__tests__/Container.test.tsx | 2 +- components/Content/Content.tsx | 12 +- .../Content/__stories__/Content.stories.tsx | 2 +- components/Content/__tests__/Content.test.tsx | 2 +- components/Drawer/Drawer.tsx | 8 +- .../Drawer/__stories__/Drawer.stories.tsx | 2 +- components/Drawer/__tests__/Drawer.test.tsx | 2 +- components/ErrorDisplay/ErrorDisplay.tsx | 6 +- .../__tests__/ErrorDisplay.test.tsx | 2 +- .../FeaturedJobItem/FeaturedJobItem.tsx | 10 +- .../__stories__/FeaturedJobItem.stories.tsx | 4 +- .../__tests__/FeaturedJobItem.test.tsx | 2 +- components/Footer/Footer.tsx | 18 +- components/Footer/__tests__/Footer.test.tsx | 2 +- components/Form/Checkbox/Checkbox.js | 8 +- components/Form/Form.js | 6 +- components/Form/Input/Input.js | 8 +- .../Form/Input/__stories__/Input.stories.js | 4 +- components/Form/Input/__tests__/Input.test.js | 4 +- components/Form/Label/Label.js | 6 +- .../Form/Label/__stories__/Label.stories.js | 2 +- components/Form/Label/__tests__/Label.test.js | 2 +- components/Form/MultiStepForm.js | 10 +- components/Form/Select/Select.js | 8 +- components/Form/Select/ThemedReactSelect.js | 4 +- .../Form/Select/__stories__/Select.stories.js | 4 +- .../Form/Select/__tests__/Select.test.js | 4 +- .../__tests__/ThemedReactSelect.test.js | 2 +- components/Form/__tests__/Form.test.js | 5 +- .../ChangePasswordForm/ChangePasswordForm.js | 12 +- .../__stories__/ChangePasswordForm.stories.js | 2 +- .../__tests__/ChangePasswordForm.test.js | 2 +- .../CreateResourceForm/CreateResourceForm.js | 12 +- components/Forms/LoginForm/LoginForm.js | 10 +- .../__stories__/LoginForm.stories.js | 2 +- .../LoginForm/__tests__/LoginForm.test.js | 2 +- .../PasswordResetForm/PasswordResetForm.js | 12 +- .../__stories__/PasswordResetForm.stories.js | 2 +- .../__tests__/PasswordResetForm.test.js | 2 +- .../RegistrationForm/RegistrationForm.js | 20 +- .../__stories__/RegistrationForm.stories.js | 2 +- .../ResourceSearchForm/ResourceSearchForm.js | 12 +- .../__stories__/ResourceSearchForm.stories.js | 2 +- .../__tests__/ResourceSearchForm.test.js | 2 +- .../UpdateProfileForm/UpdateProfileForm.js | 4 +- .../__stories__/UpdateProfileForm.stories.js | 2 +- .../__tests__/UpdateProfileForm.test.js | 2 +- .../steps/MilitaryDetails.js | 8 +- .../UpdateProfileForm/steps/MilitaryStatus.js | 6 +- .../steps/ProfessionalDetails.js | 8 +- .../UpdateProfileForm/steps/Technology.js | 6 +- .../steps/__tests__/MilitaryDetails.test.js | 4 +- .../steps/__tests__/MilitaryStatus.test.js | 4 +- .../__tests__/ProfessionalDetails.test.js | 4 +- .../steps/__tests__/Technology.test.js | 4 +- .../Forms/UpdateProfileForm/steps/index.js | 8 +- components/{head.js => Head.tsx} | 37 +- components/Heading/Heading.tsx | 10 +- .../Heading/__stories__/Heading.stories.tsx | 2 +- components/Heading/__tests__/Heading.test.tsx | 2 +- components/HeroBanner/HeroBanner.tsx | 10 +- .../__stories__/HeroBanner.stories.tsx | 2 +- .../HeroBanner/__tests__/HeroBanner.test.tsx | 2 +- components/Modal/Modal.tsx | 10 +- .../Modal/__stories__/Modal.stories.tsx | 8 +- components/Modal/__tests__/Modal.test.tsx | 2 +- components/Nav/Nav.tsx | 34 +- components/Nav/NavListItem/NavListItem.tsx | 57 +- .../__tests__/NavListItem.test.tsx | 2 +- components/Nav/NavMobile/NavMobile.tsx | 55 +- .../NavMobile/__tests__/NavMobile.test.tsx | 2 +- components/OutboundLink/OutboundLink.tsx | 10 +- .../__stories__/OutboundLink.stories.tsx | 4 +- .../__tests__/OutboundLink.test.tsx | 2 +- components/Pagination/Pagination.tsx | 10 +- .../PaginationItem/PaginationItem.tsx | 18 +- .../__tests__/PaginationItem.test.tsx | 2 +- .../__stories__/Pagination.stories.tsx | 2 +- .../Pagination/__tests__/Pagination.test.tsx | 2 +- .../PartnerLogoLink/PartnerLogoLink.tsx | 10 +- .../__stories__/PartnerLogoLink.stories.tsx | 4 +- .../__tests__/PartnerLogoLink.test.tsx | 2 +- components/Press/PressLinks/PressLinks.tsx | 8 +- .../PressLinks/__tests__/PressLinks.test.tsx | 2 +- components/Press/PressPhotos/PressPhotos.tsx | 6 +- .../__tests__/PressPhotos.test.tsx | 2 +- components/Press/PressVideos/PressVideos.tsx | 4 +- .../__tests__/PressVideos.test.tsx | 2 +- .../ProgressIndicator/ProgressIndicator.tsx | 9 +- .../__stories__/ProgressIndicator.stories.tsx | 4 +- .../__tests__/ProgressIndicator.test.tsx | 2 +- .../DonateSection/DonateSection.tsx | 10 +- .../__stories__/DonateSection.stories.tsx | 4 +- .../__tests__/DonateSection.test.tsx | 2 +- .../JoinSection/JoinSection.tsx | 12 +- .../__stories__/JoinSection.stories.tsx | 2 +- .../__tests__/JoinSection.test.tsx | 2 +- .../SponsorsSection/SponsorsSection.tsx | 20 +- .../__stories__/SponsorSection.stories.tsx | 16 +- .../__tests__/SponsorsSection.test.tsx | 6 +- .../ScreenReaderOnly/ScreenReaderOnly.tsx | 4 +- .../__stories__/ScreenReaderOnly.stories.tsx | 2 +- .../SocialLoginGroup/SocialLoginButtons.js | 4 +- .../SocialLoginGroup/SocialLoginGroup.js | 6 +- .../__tests__/SocialLoginButtons.test.js | 2 +- .../__tests__/SocialLoginGroup.test.js | 2 +- components/SocialMedia/SocialMedia.tsx | 8 +- .../SocialMediaContainer.tsx | 8 +- .../__tests__/SocialMediaContainer.test.tsx | 2 +- .../SocialMediaItem/SocialMediaItem.tsx | 12 +- .../__tests__/SocialMediaItem.test.tsx | 2 +- .../__tests__/SocialMedia.test.tsx | 2 +- components/SuccessStory/SuccessStory.tsx | 10 +- .../__stories__/SuccessStory.stories.tsx | 6 +- .../__tests__/SuccessStory.test.tsx | 2 +- components/Timeline/Timeline.tsx | 8 +- .../Timeline/TimelineEvent/TimelineEvent.tsx | 8 +- .../__tests__/TimelineEvent.test.tsx | 2 +- .../Timeline/TimelineNav/TimelineNav.tsx | 14 +- .../__tests__/TimelineNav.test.tsx | 2 +- .../Timeline/__tests__/Timeline.test.tsx | 2 +- components/Timeline/historyData.js | 4 +- .../UpgradeBrowserOverlay.tsx | 10 +- .../UpgradeBrowserOverlay.stories.tsx | 2 +- .../__tests__/UpgradeBrowserOverlay.test.tsx | 2 +- .../ZipRecruiterJobs/ZipRecruiterJobs.js | 4 +- next.config.js | 2 + package.json | 68 +- pages/404.tsx | 2 +- pages/_app.tsx | 4 +- pages/_error.tsx | 2 +- pages/about.tsx | 31 +- pages/blog/index.tsx | 4 +- pages/branding.tsx | 12 +- pages/challenge.tsx | 10 +- pages/chapter_leader.tsx | 8 +- pages/chapters.tsx | 10 +- pages/confirm_email.tsx | 12 +- pages/contact.tsx | 12 +- pages/corporate-training/index.tsx | 8 +- pages/donate.tsx | 8 +- pages/faq.tsx | 22 +- pages/get_involved.tsx | 35 +- pages/history.tsx | 10 +- pages/index.tsx | 18 +- pages/jobs.tsx | 10 +- pages/join/form.tsx | 8 +- pages/join/index.tsx | 6 +- pages/join/success.tsx | 6 +- pages/podcast.tsx | 12 +- pages/policy.tsx | 4 +- pages/press.tsx | 32 +- pages/project_rebuild.tsx | 15 +- pages/scholarship/code_platoon.tsx | 6 +- pages/scholarship/index.tsx | 16 +- pages/services.tsx | 16 +- pages/slack_guide.tsx | 16 +- pages/sponsorship.tsx | 16 +- pages/team.tsx | 8 +- pages/terms.tsx | 11 +- pages/thank_you.tsx | 4 +- scripts/createPage/builders.js | 4 +- vitest.setup.tsx | 7 +- yarn.lock | 1398 ++++++++++------- 212 files changed, 1557 insertions(+), 1558 deletions(-) delete mode 100644 common/constants/dropdown-states-values.js rename components/Cards/FlatCard/{FlatCard.js => FlatCard.tsx} (76%) rename components/{head.js => Head.tsx} (57%) diff --git a/.eslintrc.js b/.eslintrc.js index 18513d01d..3a0952a40 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -75,12 +75,14 @@ module.exports = { format: ['PascalCase', 'UPPER_CASE'], prefix: [ 'is', + 'are', 'was', 'should', 'has', 'can', 'did', 'will', + 'ARE_', 'IS_', 'WAS_', 'SHOULD_', @@ -235,7 +237,7 @@ module.exports = { { name: 'formik', importNames: ['Form'], - message: `Please use our Form component to have good defaults defined.\n "import Form from 'components/Form/Form';"`, + message: `Please use our Form component to have good defaults defined.\n "import { Form } from 'components/Form/Form';"`, }, { name: 'react', diff --git a/common/constants/dropdown-states-values.js b/common/constants/dropdown-states-values.js deleted file mode 100644 index 67b5bce7e..000000000 --- a/common/constants/dropdown-states-values.js +++ /dev/null @@ -1,61 +0,0 @@ -export default [ - { value: 'AL', label: 'Alabama' }, - { value: 'AK', label: 'Alaska' }, - { value: 'AS', label: 'American Samoa' }, - { value: 'AZ', label: 'Arizona' }, - { value: 'AR', label: 'Arkansas' }, - { value: 'CA', label: 'California' }, - { value: 'CO', label: 'Colorado' }, - { value: 'CT', label: 'Connecticut' }, - { value: 'DE', label: 'Delaware' }, - { value: 'DC', label: 'District Of Columbia' }, - { value: 'FM', label: 'Federated States Of Micronesia' }, - { value: 'FL', label: 'Florida' }, - { value: 'GA', label: 'Georgia' }, - { value: 'GU', label: 'Guam' }, - { value: 'HI', label: 'Hawaii' }, - { value: 'ID', label: 'Idaho' }, - { value: 'IL', label: 'Illinois' }, - { value: 'IN', label: 'Indiana' }, - { value: 'IA', label: 'Iowa' }, - { value: 'KS', label: 'Kansas' }, - { value: 'KY', label: 'Kentucky' }, - { value: 'LA', label: 'Louisiana' }, - { value: 'ME', label: 'Maine' }, - { value: 'MH', label: 'Marshall Islands' }, - { value: 'MD', label: 'Maryland' }, - { value: 'MA', label: 'Massachusetts' }, - { value: 'MI', label: 'Michigan' }, - { value: 'MN', label: 'Minnesota' }, - { value: 'MS', label: 'Mississippi' }, - { value: 'MO', label: 'Missouri' }, - { value: 'MT', label: 'Montana' }, - { value: 'NE', label: 'Nebraska' }, - { value: 'NV', label: 'Nevada' }, - { value: 'NH', label: 'New Hampshire' }, - { value: 'NJ', label: 'New Jersey' }, - { value: 'NM', label: 'New Mexico' }, - { value: 'NY', label: 'New York' }, - { value: 'NC', label: 'North Carolina' }, - { value: 'ND', label: 'North Dakota' }, - { value: 'MP', label: 'Northern Mariana Islands' }, - { value: 'OH', label: 'Ohio' }, - { value: 'OK', label: 'Oklahoma' }, - { value: 'OR', label: 'Oregon' }, - { value: 'PW', label: 'Palau' }, - { value: 'PA', label: 'Pennsylvania' }, - { value: 'PR', label: 'Puerto Rico' }, - { value: 'RI', label: 'Rhode Island' }, - { value: 'SC', label: 'South Carolina' }, - { value: 'SD', label: 'South Dakota' }, - { value: 'TN', label: 'Tennessee' }, - { value: 'TX', label: 'Texas' }, - { value: 'UT', label: 'Utah' }, - { value: 'VT', label: 'Vermont' }, - { value: 'VI', label: 'Virgin Islands' }, - { value: 'VA', label: 'Virginia' }, - { value: 'WA', label: 'Washington' }, - { value: 'WV', label: 'West Virginia' }, - { value: 'WI', label: 'Wisconsin' }, - { value: 'WY', label: 'Wyoming' }, -]; diff --git a/common/constants/partners.js b/common/constants/partners.js index 9499db609..eca23040a 100644 --- a/common/constants/partners.js +++ b/common/constants/partners.js @@ -105,4 +105,4 @@ const partners = [ }, ]; -export default sortBy(partners, 'name'); +export const sortedPartners = sortBy(partners, 'name'); diff --git a/common/constants/successStories.js b/common/constants/successStories.js index 2f680ff5f..122a4d8c9 100644 --- a/common/constants/successStories.js +++ b/common/constants/successStories.js @@ -1,6 +1,6 @@ import { s3 } from 'common/constants/urls'; -const successStories = [ +export const successStories = [ { title: 'Ali Cipolla-Taylor, Talent Acquisition at Microsoft', quote: @@ -20,5 +20,3 @@ const successStories = [ imageSource: `${s3}headshots/jose.jpg`, }, ]; - -export default successStories; diff --git a/components/Accordion/Accordion.tsx b/components/Accordion/Accordion.tsx index 2ad492176..2f1987486 100644 --- a/components/Accordion/Accordion.tsx +++ b/components/Accordion/Accordion.tsx @@ -2,14 +2,14 @@ import { useState } from 'react'; import classNames from 'classnames'; import Chevron from 'public/static/images/icons/FontAwesome/angle-right-solid.svg'; import { ACCORDION_CONTENT, ACCORDION_TOGGLE_BUTTON } from 'common/constants/testIDs'; -import ScreenReaderOnly, { toggleMessages } from '../ScreenReaderOnly/ScreenReaderOnly'; -import Card from '../Cards/Card/Card'; +import { ScreenReaderOnly, toggleMessages } from '../ScreenReaderOnly/ScreenReaderOnly'; +import { Card } from '../Cards/Card/Card'; import styles from './Accordion.module.css'; const ChevronRight = () => ; const ChevronDown = () => ; -type ContentPropType = { +interface ContentPropType { /** * Labels or thumbnails representing sections of content. */ @@ -18,9 +18,9 @@ type ContentPropType = { * Section of content associated with header. */ bodyChildren: React.ReactNode | React.ReactNode[]; -}; +} -export type AccordionPropsType = { +export interface AccordionPropsType { /** * Accessibility ID to use for joining elements together with ARIA attributes */ @@ -38,13 +38,13 @@ export type AccordionPropsType = { * @default - false */ hasAnimationOnHover?: boolean; -}; +} /** * @description A component whose main content is invisible until revealed by the user * @see http://web-accessibility.carnegiemuseums.org/code/accordions/ */ -function Accordion({ +export function Accordion({ accessibilityId, className, content, @@ -101,5 +101,3 @@ function Accordion({ ); } - -export default Accordion; diff --git a/components/Accordion/__stories__/Accordion.stories.tsx b/components/Accordion/__stories__/Accordion.stories.tsx index 7d0dab6ac..0980adf75 100644 --- a/components/Accordion/__stories__/Accordion.stories.tsx +++ b/components/Accordion/__stories__/Accordion.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import Accordion from '../Accordion'; +import { Accordion } from '../Accordion'; type AccordionStoryType = StoryObj; diff --git a/components/Alert/Alert.tsx b/components/Alert/Alert.tsx index e058c1195..acc100629 100644 --- a/components/Alert/Alert.tsx +++ b/components/Alert/Alert.tsx @@ -1,17 +1,17 @@ import classNames from 'classnames'; import { ALERT, ALERT_CLOSE_BUTTON } from 'common/constants/testIDs'; -import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly'; +import { ScreenReaderOnly } from 'components/ScreenReaderOnly/ScreenReaderOnly'; import styles from './Alert.module.css'; -export type AlertPropsType = { +export interface AlertPropsType { type: 'error' | 'success' | 'warning'; children: React.ReactNode; className?: string; 'data-testid'?: string; onClose?: () => void; -}; +} -function Alert({ +export function Alert({ children, className, 'data-testid': testID = ALERT, @@ -44,5 +44,3 @@ function Alert({ ); } - -export default Alert; diff --git a/components/Alert/__stories__/Alert.stories.tsx b/components/Alert/__stories__/Alert.stories.tsx index 247f9a79c..d39f1a4e2 100644 --- a/components/Alert/__stories__/Alert.stories.tsx +++ b/components/Alert/__stories__/Alert.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import Alert from '../Alert'; +import { Alert } from '../Alert'; type AlertStoryType = StoryObj; diff --git a/components/Badge/Badge.tsx b/components/Badge/Badge.tsx index 6a377dc96..12df170a7 100644 --- a/components/Badge/Badge.tsx +++ b/components/Badge/Badge.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; -export type BadgePropsType = { +export interface BadgePropsType { /** * SVG icon to be used as the badge. */ @@ -15,12 +15,12 @@ export type BadgePropsType = { className?: string; /** * Sets whether the label is rendered above, or below, the badge.. - * @default - true + * @default - true */ isImageFirst?: boolean; -}; +} -function Badge({ className = undefined, icon, isImageFirst = true, label }: BadgePropsType) { +export function Badge({ className = undefined, icon, isImageFirst = true, label }: BadgePropsType) { return (
); } - -export default Badge; diff --git a/components/Badge/__stories__/Badge.stories.tsx b/components/Badge/__stories__/Badge.stories.tsx index 7cec89c36..a374fa76c 100644 --- a/components/Badge/__stories__/Badge.stories.tsx +++ b/components/Badge/__stories__/Badge.stories.tsx @@ -1,8 +1,8 @@ -import { Meta, StoryObj } from '@storybook/react' -import GithubIcon from 'public/static/images/icons/github_logo.svg'; -import TwitterIcon from 'public/static/images/icons/twitter_logo.svg'; -import PinterestIcon from 'public/static/images/icons/pinterest_logo.svg'; -import Badge from '../Badge'; +import { Meta, StoryObj } from '@storybook/react'; +import { GithubIcon } from 'public/static/images/icons/github_logo.svg'; +import { TwitterIcon } from 'public/static/images/icons/twitter_logo.svg'; +import { PinterestIcon } from 'public/static/images/icons/pinterest_logo.svg'; +import { Badge } from '../Badge'; const icons = { github: , @@ -10,35 +10,35 @@ const icons = { pinterest: , }; -type BadgeStoryType = StoryObj +type BadgeStoryType = StoryObj; export const GitHubBadge: BadgeStoryType = { render: args => , args: { icon: icons.github, - label: 'GitHub Badge' - } -} + label: 'GitHub Badge', + }, +}; export const TwitterBadge: BadgeStoryType = { render: args => , args: { icon: icons.twitter, - label: 'Twitter Badge' - } -} + label: 'Twitter Badge', + }, +}; export const PinterestBadge: BadgeStoryType = { render: args => , args: { icon: icons.pinterest, - label: 'Pinterest Badge' - } -} + label: 'Pinterest Badge', + }, +}; -const meta: Meta ={ +const meta: Meta = { title: 'Badge', - component: Badge -} + component: Badge, +}; -export default meta +export default meta; diff --git a/components/Badge/__tests__/Badge.test.tsx b/components/Badge/__tests__/Badge.test.tsx index da8372c1c..38330dd7f 100644 --- a/components/Badge/__tests__/Badge.test.tsx +++ b/components/Badge/__tests__/Badge.test.tsx @@ -2,7 +2,7 @@ import { render } from '@testing-library/react'; import createSnapshotTest from 'test-utils/createSnapshotTest'; import Icon from 'static/images/icons/github_logo.svg'; -import Badge from '../Badge'; +import { Badge } from '../Badge'; const badgeIcon = ; diff --git a/components/Branding/ColorSection/ColorSection.tsx b/components/Branding/ColorSection/ColorSection.tsx index 0b150782e..20b04a0b8 100644 --- a/components/Branding/ColorSection/ColorSection.tsx +++ b/components/Branding/ColorSection/ColorSection.tsx @@ -1,8 +1,8 @@ import { brandColorsObject } from 'common/styles/styleExports'; -import Swatch from 'components/Branding/Swatch/Swatch'; -import Content from 'components/Content/Content'; +import { Swatch } from 'components/Branding/Swatch/Swatch'; +import { Content } from 'components/Content/Content'; -function ColorSection() { +export function ColorSection() { const primaryColor = { name: 'Primary', hexCode: brandColorsObject.primary }; const secondaryColor = { name: 'Secondary', hexCode: brandColorsObject.secondary }; @@ -41,5 +41,3 @@ function ColorSection() { ); } - -export default ColorSection; diff --git a/components/Branding/ColorSection/__tests__/ColorSection.test.tsx b/components/Branding/ColorSection/__tests__/ColorSection.test.tsx index d01c6a83e..c661a5450 100644 --- a/components/Branding/ColorSection/__tests__/ColorSection.test.tsx +++ b/components/Branding/ColorSection/__tests__/ColorSection.test.tsx @@ -1,6 +1,6 @@ import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest'; -import ColorSection from '../ColorSection'; +import { ColorSection } from '../ColorSection'; describe('ColorSection', () => { it('should render with required props', () => { diff --git a/components/Branding/FontSection/FontSection.tsx b/components/Branding/FontSection/FontSection.tsx index 7cc9b794e..097baadad 100644 --- a/components/Branding/FontSection/FontSection.tsx +++ b/components/Branding/FontSection/FontSection.tsx @@ -1,7 +1,7 @@ -import Content from 'components/Content/Content'; +import { Content } from 'components/Content/Content'; import { fontsObject } from 'common/styles/styleExports'; -function FontSection() { +export function FontSection() { // Every letter of the alphabet in one string const demoText = 'Sphinx of black quartz, judge my vow!'; @@ -36,5 +36,3 @@ function FontSection() { /> ); } - -export default FontSection; diff --git a/components/Branding/FontSection/__tests__/FontSection.test.tsx b/components/Branding/FontSection/__tests__/FontSection.test.tsx index eea0622fe..f4b3c68ad 100644 --- a/components/Branding/FontSection/__tests__/FontSection.test.tsx +++ b/components/Branding/FontSection/__tests__/FontSection.test.tsx @@ -1,6 +1,6 @@ import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest'; -import FontSection from '../FontSection'; +import { FontSection } from '../FontSection'; describe('FontSection', () => { it('should render with required props', () => { diff --git a/components/Branding/LogoSection/LogoSection.tsx b/components/Branding/LogoSection/LogoSection.tsx index d7d516e69..ad29edabd 100644 --- a/components/Branding/LogoSection/LogoSection.tsx +++ b/components/Branding/LogoSection/LogoSection.tsx @@ -1,11 +1,11 @@ import classNames from 'classnames'; -import Badge from 'components/Badge/Badge'; -import Content from 'components/Content/Content'; +import { Badge } from 'components/Badge/Badge'; +import { Content } from 'components/Content/Content'; import { s3 } from 'common/constants/urls'; -import Image from 'next/image'; +import Image from 'next/legacy/image'; import styles from './LogoSection.module.css'; -function LogoSection() { +export function LogoSection() { return ( ); } -export default LogoSection; diff --git a/components/Branding/LogoSection/__tests__/LogoSection.test.tsx b/components/Branding/LogoSection/__tests__/LogoSection.test.tsx index a7e4dedee..584d708e7 100644 --- a/components/Branding/LogoSection/__tests__/LogoSection.test.tsx +++ b/components/Branding/LogoSection/__tests__/LogoSection.test.tsx @@ -1,6 +1,6 @@ import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest'; -import LogoSection from '../LogoSection'; +import { LogoSection } from '../LogoSection'; describe('LogoSection', () => { it('should render with required props', () => { diff --git a/components/Branding/Swatch/Swatch.tsx b/components/Branding/Swatch/Swatch.tsx index 5de1a2a70..da657b689 100644 --- a/components/Branding/Swatch/Swatch.tsx +++ b/components/Branding/Swatch/Swatch.tsx @@ -1,17 +1,17 @@ import { string } from 'prop-types'; -import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly'; +import { ScreenReaderOnly } from 'components/ScreenReaderOnly/ScreenReaderOnly'; Swatch.propTypes = { colorName: string.isRequired, hexCode: string.isRequired, }; -export type Swatch = { +export interface Swatch { colorName: string; hexCode: string; -}; +} -function Swatch({ colorName, hexCode }: Swatch) { +export function Swatch({ colorName, hexCode }: Swatch) { return (
{`A block of the color ${colorName}`} @@ -25,5 +25,3 @@ function Swatch({ colorName, hexCode }: Swatch) {
); } - -export default Swatch; diff --git a/components/Branding/Swatch/__tests__/Swatch.test.tsx b/components/Branding/Swatch/__tests__/Swatch.test.tsx index 17d92e2e8..65ff37719 100644 --- a/components/Branding/Swatch/__tests__/Swatch.test.tsx +++ b/components/Branding/Swatch/__tests__/Swatch.test.tsx @@ -1,6 +1,6 @@ import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest'; -import Swatch from '../Swatch'; +import { Swatch } from '../Swatch'; describe('Swatch', () => { it('should render with required props', () => { diff --git a/components/Buttons/Button/Button.tsx b/components/Buttons/Button/Button.tsx index 6441f73e1..ab1b5a3d2 100644 --- a/components/Buttons/Button/Button.tsx +++ b/components/Buttons/Button/Button.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import noop from 'lodash/noop'; import classNames from 'classnames'; import { BUTTON } from 'common/constants/testIDs'; @@ -6,7 +5,7 @@ import { gtag } from 'common/utils/thirdParty/gtag'; import { getDataAttributes, getAriaAttributes } from 'common/utils/prop-utils'; import styles from './Button.module.css'; -type GoogleAnalyticsEventPropType = { +interface GoogleAnalyticsEventPropType { /** * A description of the behaviour. E.g. 'Clicked Delete', 'Added a component', 'Deleted account' */ @@ -34,7 +33,7 @@ type GoogleAnalyticsEventPropType = { * 'beacon', 'xhr', or 'image'. */ transport?: 'beacon' | 'xhr' | 'image'; -}; +} type ButtonProps = { /** @@ -51,7 +50,7 @@ type ButtonProps = { theme?: 'primary' | 'secondary'; } & React.ButtonHTMLAttributes; -export default function Button({ +export function Button({ analyticsObject = { action: 'Button Selected', category: 'Interactions', @@ -87,7 +86,8 @@ export default function Button({ onClick(e); }} tabIndex={tabIndex} - type={type} + // eslint-disable-next-line react/button-has-type + type={type} // `type` prop has a default value, so ^ is a false-negative {...customDataAttributes} {...ariaAttributes} > diff --git a/components/Buttons/Button/__stories__/Button.stories.tsx b/components/Buttons/Button/__stories__/Button.stories.tsx index 8db7e6da1..684ab9037 100644 --- a/components/Buttons/Button/__stories__/Button.stories.tsx +++ b/components/Buttons/Button/__stories__/Button.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import Button from '../Button'; +import { Button } from '../Button'; type ButtonStoryType = StoryObj; @@ -20,4 +20,4 @@ export const Default: ButtonStoryType = { args: { children: 'Button', }, -}; \ No newline at end of file +}; diff --git a/components/Buttons/Button/__tests__/Button.test.tsx b/components/Buttons/Button/__tests__/Button.test.tsx index 74c6cc189..b1dcbf5eb 100644 --- a/components/Buttons/Button/__tests__/Button.test.tsx +++ b/components/Buttons/Button/__tests__/Button.test.tsx @@ -3,7 +3,7 @@ import { BUTTON } from 'common/constants/testIDs'; import { gtag } from 'common/utils/thirdParty/gtag'; import createSnapshotTest from 'test-utils/createSnapshotTest'; -import Button from '../Button'; +import { Button } from '../Button'; describe('Button', () => { const requiredProps = { diff --git a/components/Buttons/CloseButton/CloseButton.tsx b/components/Buttons/CloseButton/CloseButton.tsx index edd98f524..0a48c7caf 100644 --- a/components/Buttons/CloseButton/CloseButton.tsx +++ b/components/Buttons/CloseButton/CloseButton.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import { CLOSE_BUTTON } from 'common/constants/testIDs'; -import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly'; +import { ScreenReaderOnly } from 'components/ScreenReaderOnly/ScreenReaderOnly'; import PlusIcon from 'static/images/icons/plus.svg'; import styles from './CloseButton.module.css'; @@ -11,11 +11,7 @@ export type CloseButtonProps = { theme?: 'primary' | 'secondary' | 'white'; } & React.ButtonHTMLAttributes; -export default function CloseButton({ - disabled = false, - onClick, - theme = 'primary', -}: CloseButtonProps) { +export function CloseButton({ disabled = false, onClick, theme = 'primary' }: CloseButtonProps) { return ( + +
+ Operation Code Logo +