From 22a9eedc81b9f1057beb0b901329fbd1b58cf12f Mon Sep 17 00:00:00 2001 From: Michael Stedman <46408716+recondesigns@users.noreply.github.com> Date: Mon, 11 Mar 2024 21:45:38 -0500 Subject: [PATCH 01/10] migrated JoinSection files .tsx and updated snapshot --- .../{JoinSection.js => JoinSection.tsx} | 0 .../__stories__/JoinSection.stories.js | 9 --------- .../__stories__/JoinSection.stories.tsx | 15 +++++++++++++++ .../{JoinSection.test.js => JoinSection.test.tsx} | 0 ...ion.test.js.snap => JoinSection.test.tsx.snap} | 0 5 files changed, 15 insertions(+), 9 deletions(-) rename components/ReusableSections/JoinSection/{JoinSection.js => JoinSection.tsx} (100%) delete mode 100644 components/ReusableSections/JoinSection/__stories__/JoinSection.stories.js create mode 100644 components/ReusableSections/JoinSection/__stories__/JoinSection.stories.tsx rename components/ReusableSections/JoinSection/__tests__/{JoinSection.test.js => JoinSection.test.tsx} (100%) rename components/ReusableSections/JoinSection/__tests__/__snapshots__/{JoinSection.test.js.snap => JoinSection.test.tsx.snap} (100%) diff --git a/components/ReusableSections/JoinSection/JoinSection.js b/components/ReusableSections/JoinSection/JoinSection.tsx similarity index 100% rename from components/ReusableSections/JoinSection/JoinSection.js rename to components/ReusableSections/JoinSection/JoinSection.tsx diff --git a/components/ReusableSections/JoinSection/__stories__/JoinSection.stories.js b/components/ReusableSections/JoinSection/__stories__/JoinSection.stories.js deleted file mode 100644 index fa596d8fa..000000000 --- a/components/ReusableSections/JoinSection/__stories__/JoinSection.stories.js +++ /dev/null @@ -1,9 +0,0 @@ -import JoinSection from '../JoinSection'; - -export default { - component: JoinSection, - title: 'Reusable/JoinSection', -}; -const Template = arguments_ => ; - -export const Default = Template.bind({}); diff --git a/components/ReusableSections/JoinSection/__stories__/JoinSection.stories.tsx b/components/ReusableSections/JoinSection/__stories__/JoinSection.stories.tsx new file mode 100644 index 000000000..98ecdecfe --- /dev/null +++ b/components/ReusableSections/JoinSection/__stories__/JoinSection.stories.tsx @@ -0,0 +1,15 @@ +import { Meta, StoryObj } from '@storybook/react'; +import JoinSection from '../JoinSection'; + +type JoinSectionStoryType = StoryObj; + +const meta: Meta = { + title: 'Reusable/JoinSection', + component: JoinSection, +}; + +export default meta; + +export const Default: JoinSectionStoryType = { + render: () => , +}; diff --git a/components/ReusableSections/JoinSection/__tests__/JoinSection.test.js b/components/ReusableSections/JoinSection/__tests__/JoinSection.test.tsx similarity index 100% rename from components/ReusableSections/JoinSection/__tests__/JoinSection.test.js rename to components/ReusableSections/JoinSection/__tests__/JoinSection.test.tsx diff --git a/components/ReusableSections/JoinSection/__tests__/__snapshots__/JoinSection.test.js.snap b/components/ReusableSections/JoinSection/__tests__/__snapshots__/JoinSection.test.tsx.snap similarity index 100% rename from components/ReusableSections/JoinSection/__tests__/__snapshots__/JoinSection.test.js.snap rename to components/ReusableSections/JoinSection/__tests__/__snapshots__/JoinSection.test.tsx.snap From 891a2430f36c3456f07d38af1b48edd30a7483e5 Mon Sep 17 00:00:00 2001 From: Michael Stedman <46408716+recondesigns@users.noreply.github.com> Date: Mon, 11 Mar 2024 22:18:03 -0500 Subject: [PATCH 02/10] migrated SponsorsSection files to .tsx --- .../{SponsorsSection.js => SponsorsSection.tsx} | 7 ++++++- .../__stories__/SponsorSection.stories.js | 10 ---------- .../__stories__/SponsorSection.stories.tsx | 15 +++++++++++++++ ...rsSection.test.js => SponsorsSection.test.tsx} | 6 +++--- 4 files changed, 24 insertions(+), 14 deletions(-) rename components/ReusableSections/SponsorsSection/{SponsorsSection.js => SponsorsSection.tsx} (90%) delete mode 100644 components/ReusableSections/SponsorsSection/__stories__/SponsorSection.stories.js create mode 100644 components/ReusableSections/SponsorsSection/__stories__/SponsorSection.stories.tsx rename components/ReusableSections/SponsorsSection/__tests__/{SponsorsSection.test.js => SponsorsSection.test.tsx} (80%) diff --git a/components/ReusableSections/SponsorsSection/SponsorsSection.js b/components/ReusableSections/SponsorsSection/SponsorsSection.tsx similarity index 90% rename from components/ReusableSections/SponsorsSection/SponsorsSection.js rename to components/ReusableSections/SponsorsSection/SponsorsSection.tsx index c58bf3f02..834041126 100644 --- a/components/ReusableSections/SponsorsSection/SponsorsSection.js +++ b/components/ReusableSections/SponsorsSection/SponsorsSection.tsx @@ -3,7 +3,12 @@ import Heading from 'components/Heading/Heading'; import PartnerLogoLink from 'components/PartnerLogoLink/PartnerLogoLink'; import partners, { PARTNER_TYPES } from 'common/constants/partners'; -const isPaidSponsor = partner => partner.type === PARTNER_TYPES.PAID; +type Partner = { + name: string; + type: string; +}; + +const isPaidSponsor = (partner: Partner): boolean => partner.type === PARTNER_TYPES.PAID; const SponsorsSection = () => ( diff --git a/components/ReusableSections/SponsorsSection/__stories__/SponsorSection.stories.js b/components/ReusableSections/SponsorsSection/__stories__/SponsorSection.stories.js deleted file mode 100644 index 2ecad1533..000000000 --- a/components/ReusableSections/SponsorsSection/__stories__/SponsorSection.stories.js +++ /dev/null @@ -1,10 +0,0 @@ -import SponsorsSection from '../SponsorsSection'; - -export default { - component: SponsorsSection, - title: 'Reusable/SponsorSection', -}; - -const Template = arguments_ => ; - -export const Default = Template.bind({}); diff --git a/components/ReusableSections/SponsorsSection/__stories__/SponsorSection.stories.tsx b/components/ReusableSections/SponsorsSection/__stories__/SponsorSection.stories.tsx new file mode 100644 index 000000000..6ed5f2228 --- /dev/null +++ b/components/ReusableSections/SponsorsSection/__stories__/SponsorSection.stories.tsx @@ -0,0 +1,15 @@ +import { Meta, StoryObj } from '@storybook/react' +import SponsorsSection from '../SponsorsSection'; + +type SponsorsSectionStoryType = StoryObj + +const meta: Meta = { + title: 'Reusable/SponsorsSection', + component: SponsorsSection +} + +export default meta + +export const Default: SponsorsSectionStoryType = { + render: () => +} \ No newline at end of file diff --git a/components/ReusableSections/SponsorsSection/__tests__/SponsorsSection.test.js b/components/ReusableSections/SponsorsSection/__tests__/SponsorsSection.test.tsx similarity index 80% rename from components/ReusableSections/SponsorsSection/__tests__/SponsorsSection.test.js rename to components/ReusableSections/SponsorsSection/__tests__/SponsorsSection.test.tsx index 8b6eb34d3..29fc2e7e8 100644 --- a/components/ReusableSections/SponsorsSection/__tests__/SponsorsSection.test.js +++ b/components/ReusableSections/SponsorsSection/__tests__/SponsorsSection.test.tsx @@ -5,11 +5,11 @@ import SponsorsSection from '../SponsorsSection'; describe('SponsorsSection', () => { it('should render a secure link and image for each partner', () => { - const component = render(Test); + const component = render(); partners.forEach(partner => { - const image = component.queryByAltText(`${partner.name} logo`); - const link = image.parentNode; + const image = component.queryByAltText(`${partner.name} logo`)!; + const link = image.parentNode as HTMLAnchorElement; expect(image).toBeInTheDocument(); expect(link.href.startsWith('https://')).toStrictEqual(true); From 0ee3dce09b2b3dd70d58d021814a9791e08acf2e Mon Sep 17 00:00:00 2001 From: Michael Stedman <46408716+recondesigns@users.noreply.github.com> Date: Mon, 11 Mar 2024 22:25:39 -0500 Subject: [PATCH 03/10] added test-id to SponsorsSection and added snapshot test --- .../SponsorsSection/SponsorsSection.tsx | 2 +- .../__tests__/SponsorsSection.test.tsx | 9 +- .../SponsorsSection.test.tsx.snap | 487 ++++++++++++++++++ 3 files changed, 496 insertions(+), 2 deletions(-) create mode 100644 components/ReusableSections/SponsorsSection/__tests__/__snapshots__/SponsorsSection.test.tsx.snap diff --git a/components/ReusableSections/SponsorsSection/SponsorsSection.tsx b/components/ReusableSections/SponsorsSection/SponsorsSection.tsx index 834041126..00550d8d9 100644 --- a/components/ReusableSections/SponsorsSection/SponsorsSection.tsx +++ b/components/ReusableSections/SponsorsSection/SponsorsSection.tsx @@ -11,7 +11,7 @@ type Partner = { const isPaidSponsor = (partner: Partner): boolean => partner.type === PARTNER_TYPES.PAID; const SponsorsSection = () => ( - + diff --git a/components/ReusableSections/SponsorsSection/__tests__/SponsorsSection.test.tsx b/components/ReusableSections/SponsorsSection/__tests__/SponsorsSection.test.tsx index 29fc2e7e8..f85c488c8 100644 --- a/components/ReusableSections/SponsorsSection/__tests__/SponsorsSection.test.tsx +++ b/components/ReusableSections/SponsorsSection/__tests__/SponsorsSection.test.tsx @@ -1,9 +1,16 @@ import { render } from '@testing-library/react'; +import createSnapshotTest from 'test-utils/createSnapshotTest'; import partners from 'common/constants/partners'; - import SponsorsSection from '../SponsorsSection'; describe('SponsorsSection', () => { + it('should render', () => { + const { queryByTestId } = render(); + expect(queryByTestId('Sponsors Section')).not.toBeNull(); + + createSnapshotTest(); + }); + it('should render a secure link and image for each partner', () => { const component = render(); diff --git a/components/ReusableSections/SponsorsSection/__tests__/__snapshots__/SponsorsSection.test.tsx.snap b/components/ReusableSections/SponsorsSection/__tests__/__snapshots__/SponsorsSection.test.tsx.snap new file mode 100644 index 000000000..20bd33cb5 --- /dev/null +++ b/components/ReusableSections/SponsorsSection/__tests__/__snapshots__/SponsorsSection.test.tsx.snap @@ -0,0 +1,487 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`SponsorsSection > should render 1`] = ` +
+
+ + +

+ These sponsors have donated cash to help keep the mission going here at Operation Code. They may or may not have also donated to our cause via others means. +

+ + +

+ The following organizations have helped Operation Code through services, products, advertisements, scholarships, or sponsorships. We thank them for their contributions. +

+ +
+
+`; From b9f581125f1c74fbf3ba5a48bb543ab1099b2af8 Mon Sep 17 00:00:00 2001 From: Michael Stedman <46408716+recondesigns@users.noreply.github.com> Date: Mon, 11 Mar 2024 22:43:11 -0500 Subject: [PATCH 04/10] migrated ScreenReaderOnly files to .tsx and updated snapshot --- ...reenReaderOnly.js => ScreenReaderOnly.tsx} | 10 ++++--- .../__stories__/ScreenReaderOnly.stories.js | 20 -------------- .../__stories__/ScreenReaderOnly.stories.tsx | 26 +++++++++++++++++++ .../__tests__/ScreenReaderOnly.test.js | 9 ------- .../__tests__/ScreenReaderOnly.test.tsx | 11 ++++++++ ...js.snap => ScreenReaderOnly.test.tsx.snap} | 0 6 files changed, 43 insertions(+), 33 deletions(-) rename components/ScreenReaderOnly/{ScreenReaderOnly.js => ScreenReaderOnly.tsx} (56%) delete mode 100644 components/ScreenReaderOnly/__stories__/ScreenReaderOnly.stories.js create mode 100644 components/ScreenReaderOnly/__stories__/ScreenReaderOnly.stories.tsx delete mode 100644 components/ScreenReaderOnly/__tests__/ScreenReaderOnly.test.js create mode 100644 components/ScreenReaderOnly/__tests__/ScreenReaderOnly.test.tsx rename components/ScreenReaderOnly/__tests__/__snapshots__/{ScreenReaderOnly.test.js.snap => ScreenReaderOnly.test.tsx.snap} (100%) diff --git a/components/ScreenReaderOnly/ScreenReaderOnly.js b/components/ScreenReaderOnly/ScreenReaderOnly.tsx similarity index 56% rename from components/ScreenReaderOnly/ScreenReaderOnly.js rename to components/ScreenReaderOnly/ScreenReaderOnly.tsx index 96043b8de..849259037 100644 --- a/components/ScreenReaderOnly/ScreenReaderOnly.js +++ b/components/ScreenReaderOnly/ScreenReaderOnly.tsx @@ -1,4 +1,3 @@ -import { node } from 'prop-types'; import { SCREEN_READER_ONLY } from 'common/constants/testIDs'; export const toggleMessages = { @@ -6,11 +5,14 @@ export const toggleMessages = { close: 'Hide expanded', }; -ScreenReaderOnly.propTypes = { - children: node.isRequired, +export type ScreenReaderOnlyPropsType = { + /** + * Child content that is rendered in the root element, but not displayed. + */ + children: React.ReactNode; }; -function ScreenReaderOnly({ children }) { +function ScreenReaderOnly({ children }: ScreenReaderOnlyPropsType) { return ( {children} diff --git a/components/ScreenReaderOnly/__stories__/ScreenReaderOnly.stories.js b/components/ScreenReaderOnly/__stories__/ScreenReaderOnly.stories.js deleted file mode 100644 index 2854866bc..000000000 --- a/components/ScreenReaderOnly/__stories__/ScreenReaderOnly.stories.js +++ /dev/null @@ -1,20 +0,0 @@ -import ScreenReaderOnly from '../ScreenReaderOnly'; - -export default { - component: ScreenReaderOnly, - title: 'ScreenReaderOnly', -}; - -const Template = arguments_ => { - return ( - <> - Content never displayed, but it is rendered - - - ); -}; - -export const Default = Template.bind({}); -Default.args = { - children: 'ScreenReader content', -}; diff --git a/components/ScreenReaderOnly/__stories__/ScreenReaderOnly.stories.tsx b/components/ScreenReaderOnly/__stories__/ScreenReaderOnly.stories.tsx new file mode 100644 index 000000000..1c16a7391 --- /dev/null +++ b/components/ScreenReaderOnly/__stories__/ScreenReaderOnly.stories.tsx @@ -0,0 +1,26 @@ +import { Meta, StoryObj } from '@storybook/react'; +import ScreenReaderOnly from '../ScreenReaderOnly'; + +type ScreenReaderOnlyStoryType = StoryObj; + +const meta: Meta = { + title: 'ScreenReaderOnly', + component: ScreenReaderOnly, + args: { + children: 'ScreenReader content', + }, + decorators: [ + ScreenReaderOnlyStory => ( + <> + Content never displayed, but it is rendered + + + ), + ], +}; + +export default meta; + +export const Default: ScreenReaderOnlyStoryType = { + render: args => , +}; diff --git a/components/ScreenReaderOnly/__tests__/ScreenReaderOnly.test.js b/components/ScreenReaderOnly/__tests__/ScreenReaderOnly.test.js deleted file mode 100644 index 74d1ff0d9..000000000 --- a/components/ScreenReaderOnly/__tests__/ScreenReaderOnly.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import createSnapshotTest from 'test-utils/createSnapshotTest'; - -import { Default } from '../__stories__/ScreenReaderOnly.stories'; - -describe('ScreenReaderOnly', () => { - it('should render with required props', () => { - createSnapshotTest(); - }); -}); diff --git a/components/ScreenReaderOnly/__tests__/ScreenReaderOnly.test.tsx b/components/ScreenReaderOnly/__tests__/ScreenReaderOnly.test.tsx new file mode 100644 index 000000000..054618c50 --- /dev/null +++ b/components/ScreenReaderOnly/__tests__/ScreenReaderOnly.test.tsx @@ -0,0 +1,11 @@ +import createSnapshotTest from 'test-utils/createSnapshotTest'; +import { composeStory } from '@storybook/react'; +import meta, { Default } from '../__stories__/ScreenReaderOnly.stories'; + +const ScreenReaderOnlyStory = composeStory(Default, meta); + +describe('ScreenReaderOnly', () => { + it('should render with required props', () => { + createSnapshotTest(); + }); +}); diff --git a/components/ScreenReaderOnly/__tests__/__snapshots__/ScreenReaderOnly.test.js.snap b/components/ScreenReaderOnly/__tests__/__snapshots__/ScreenReaderOnly.test.tsx.snap similarity index 100% rename from components/ScreenReaderOnly/__tests__/__snapshots__/ScreenReaderOnly.test.js.snap rename to components/ScreenReaderOnly/__tests__/__snapshots__/ScreenReaderOnly.test.tsx.snap From 134e98b8b9cd167febaf83b6bb16319d42d3ad2b Mon Sep 17 00:00:00 2001 From: Michael Stedman <46408716+recondesigns@users.noreply.github.com> Date: Mon, 11 Mar 2024 22:56:38 -0500 Subject: [PATCH 05/10] migrated SocialMedia and SocialMediaContainer to .tsx --- .../SocialMedia/{SocialMedia.js => SocialMedia.tsx} | 0 .../SocialMediaContainer/SocialMediaContainer.js | 9 --------- .../SocialMediaContainer/SocialMediaContainer.tsx | 13 +++++++++++++ ...tainer.test.js => SocialMediaContainer.test.tsx} | 0 ...t.js.snap => SocialMediaContainer.test.tsx.snap} | 2 +- 5 files changed, 14 insertions(+), 10 deletions(-) rename components/SocialMedia/{SocialMedia.js => SocialMedia.tsx} (100%) delete mode 100644 components/SocialMedia/SocialMediaContainer/SocialMediaContainer.js create mode 100644 components/SocialMedia/SocialMediaContainer/SocialMediaContainer.tsx rename components/SocialMedia/SocialMediaContainer/__tests__/{SocialMediaContainer.test.js => SocialMediaContainer.test.tsx} (100%) rename components/SocialMedia/SocialMediaContainer/__tests__/__snapshots__/{SocialMediaContainer.test.js.snap => SocialMediaContainer.test.tsx.snap} (79%) diff --git a/components/SocialMedia/SocialMedia.js b/components/SocialMedia/SocialMedia.tsx similarity index 100% rename from components/SocialMedia/SocialMedia.js rename to components/SocialMedia/SocialMedia.tsx diff --git a/components/SocialMedia/SocialMediaContainer/SocialMediaContainer.js b/components/SocialMedia/SocialMediaContainer/SocialMediaContainer.js deleted file mode 100644 index 7d576a44e..000000000 --- a/components/SocialMedia/SocialMediaContainer/SocialMediaContainer.js +++ /dev/null @@ -1,9 +0,0 @@ -import { arrayOf, element } from 'prop-types'; - -SocialMediaContainer.propTypes = { children: arrayOf(element).isRequired }; - -function SocialMediaContainer({ children }) { - return
{children}
; -} - -export default SocialMediaContainer; diff --git a/components/SocialMedia/SocialMediaContainer/SocialMediaContainer.tsx b/components/SocialMedia/SocialMediaContainer/SocialMediaContainer.tsx new file mode 100644 index 000000000..c7d8d40a8 --- /dev/null +++ b/components/SocialMedia/SocialMediaContainer/SocialMediaContainer.tsx @@ -0,0 +1,13 @@ +import { arrayOf, element } from 'prop-types'; + +SocialMediaContainer.propTypes = { children: arrayOf(element).isRequired }; + +export type SocialMediaContainer = { + children: React.ReactElement[]; +}; + +function SocialMediaContainer({ children }: SocialMediaContainer) { + return
{children}
; +} + +export default SocialMediaContainer; diff --git a/components/SocialMedia/SocialMediaContainer/__tests__/SocialMediaContainer.test.js b/components/SocialMedia/SocialMediaContainer/__tests__/SocialMediaContainer.test.tsx similarity index 100% rename from components/SocialMedia/SocialMediaContainer/__tests__/SocialMediaContainer.test.js rename to components/SocialMedia/SocialMediaContainer/__tests__/SocialMediaContainer.test.tsx diff --git a/components/SocialMedia/SocialMediaContainer/__tests__/__snapshots__/SocialMediaContainer.test.js.snap b/components/SocialMedia/SocialMediaContainer/__tests__/__snapshots__/SocialMediaContainer.test.tsx.snap similarity index 79% rename from components/SocialMedia/SocialMediaContainer/__tests__/__snapshots__/SocialMediaContainer.test.js.snap rename to components/SocialMedia/SocialMediaContainer/__tests__/__snapshots__/SocialMediaContainer.test.tsx.snap index 58e60387b..abde29166 100644 --- a/components/SocialMedia/SocialMediaContainer/__tests__/__snapshots__/SocialMediaContainer.test.js.snap +++ b/components/SocialMedia/SocialMediaContainer/__tests__/__snapshots__/SocialMediaContainer.test.tsx.snap @@ -2,7 +2,7 @@ exports[`SocialMediaContainer > should render with required props 1`] = `
Testing 1 From 3190c8b75bc7d8813fe08e1823b35367327858a4 Mon Sep 17 00:00:00 2001 From: Michael Stedman <46408716+recondesigns@users.noreply.github.com> Date: Mon, 11 Mar 2024 23:05:19 -0500 Subject: [PATCH 06/10] migrated SocialMediaItem to .tsx and updated other SocialMedia prop type descriptions --- .../SocialMediaContainer.tsx | 7 +++--- ...SocialMediaItem.js => SocialMediaItem.tsx} | 22 +++++++++++++------ ...aItem.test.js => SocialMediaItem.test.tsx} | 1 - ....js.snap => SocialMediaItem.test.tsx.snap} | 2 +- ...cialMedia.test.js => SocialMedia.test.tsx} | 0 ...test.js.snap => SocialMedia.test.tsx.snap} | 0 6 files changed, 19 insertions(+), 13 deletions(-) rename components/SocialMedia/SocialMediaItem/{SocialMediaItem.js => SocialMediaItem.tsx} (55%) rename components/SocialMedia/SocialMediaItem/__tests__/{SocialMediaItem.test.js => SocialMediaItem.test.tsx} (99%) rename components/SocialMedia/SocialMediaItem/__tests__/__snapshots__/{SocialMediaItem.test.js.snap => SocialMediaItem.test.tsx.snap} (95%) rename components/SocialMedia/__tests__/{SocialMedia.test.js => SocialMedia.test.tsx} (100%) rename components/SocialMedia/__tests__/__snapshots__/{SocialMedia.test.js.snap => SocialMedia.test.tsx.snap} (100%) diff --git a/components/SocialMedia/SocialMediaContainer/SocialMediaContainer.tsx b/components/SocialMedia/SocialMediaContainer/SocialMediaContainer.tsx index c7d8d40a8..838e97cfb 100644 --- a/components/SocialMedia/SocialMediaContainer/SocialMediaContainer.tsx +++ b/components/SocialMedia/SocialMediaContainer/SocialMediaContainer.tsx @@ -1,8 +1,7 @@ -import { arrayOf, element } from 'prop-types'; - -SocialMediaContainer.propTypes = { children: arrayOf(element).isRequired }; - export type SocialMediaContainer = { + /** + * Child content of + */ children: React.ReactElement[]; }; diff --git a/components/SocialMedia/SocialMediaItem/SocialMediaItem.js b/components/SocialMedia/SocialMediaItem/SocialMediaItem.tsx similarity index 55% rename from components/SocialMedia/SocialMediaItem/SocialMediaItem.js rename to components/SocialMedia/SocialMediaItem/SocialMediaItem.tsx index 0f2643372..5f8eb1205 100644 --- a/components/SocialMedia/SocialMediaItem/SocialMediaItem.js +++ b/components/SocialMedia/SocialMediaItem/SocialMediaItem.tsx @@ -1,16 +1,24 @@ -import { node, string } from 'prop-types'; import OutboundLink from 'components/OutboundLink/OutboundLink'; import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly'; -SocialMediaItem.propTypes = { - name: string.isRequired, - href: string.isRequired, - svg: node.isRequired, +export type SocialMediaItemPropsType = { + /** + * Name of the social media item. + */ + name: string; + /** + * URL to the social media site. + */ + href: string; + /** + * Icon to be used. + */ + svg: React.ReactNode; }; -function SocialMediaItem({ name, href, svg }) { +function SocialMediaItem({ name, href, svg }: SocialMediaItemPropsType) { return ( -
+
should render with required props 1`] = `
Date: Mon, 11 Mar 2024 23:16:51 -0500 Subject: [PATCH 07/10] migrated SuccessStory files to .tsx and updated snapshot --- components/SuccessStory/SuccessStory.js | 18 ------------- components/SuccessStory/SuccessStory.tsx | 26 +++++++++++++++++++ .../__stories__/SuccessStory.stories.js | 17 ------------ .../__stories__/SuccessStory.stories.tsx | 22 ++++++++++++++++ ...essStory.test.js => SuccessStory.test.tsx} | 1 - ...est.js.snap => SuccessStory.test.tsx.snap} | 0 6 files changed, 48 insertions(+), 36 deletions(-) delete mode 100644 components/SuccessStory/SuccessStory.js create mode 100644 components/SuccessStory/SuccessStory.tsx delete mode 100644 components/SuccessStory/__stories__/SuccessStory.stories.js create mode 100644 components/SuccessStory/__stories__/SuccessStory.stories.tsx rename components/SuccessStory/__tests__/{SuccessStory.test.js => SuccessStory.test.tsx} (99%) rename components/SuccessStory/__tests__/__snapshots__/{SuccessStory.test.js.snap => SuccessStory.test.tsx.snap} (100%) diff --git a/components/SuccessStory/SuccessStory.js b/components/SuccessStory/SuccessStory.js deleted file mode 100644 index 2cbe39469..000000000 --- a/components/SuccessStory/SuccessStory.js +++ /dev/null @@ -1,18 +0,0 @@ -import { string } from 'prop-types'; -import FlatCard from 'components/Cards/FlatCard/FlatCard'; - -SuccessStory.propTypes = { - imageSource: string.isRequired, - quote: string.isRequired, - title: string.isRequired, -}; - -function SuccessStory({ imageSource, quote, title }) { - return ( - -
{`"${quote}"`}
- - ); -} - -export default SuccessStory; diff --git a/components/SuccessStory/SuccessStory.tsx b/components/SuccessStory/SuccessStory.tsx new file mode 100644 index 000000000..cb327c322 --- /dev/null +++ b/components/SuccessStory/SuccessStory.tsx @@ -0,0 +1,26 @@ +import FlatCard from 'components/Cards/FlatCard/FlatCard'; + +export type SuccessStoryPropsType = { + /** + * Path to image used on the card. + */ + imageSource: string; + /** + * String applied tot he block quote element. + */ + quote: string; + /** + * String applied to the card header. + */ + title: string; +}; + +function SuccessStory({ imageSource, quote, title }: SuccessStoryPropsType) { + return ( + +
{`"${quote}"`}
+ + ); +} + +export default SuccessStory; diff --git a/components/SuccessStory/__stories__/SuccessStory.stories.js b/components/SuccessStory/__stories__/SuccessStory.stories.js deleted file mode 100644 index 88961e3d6..000000000 --- a/components/SuccessStory/__stories__/SuccessStory.stories.js +++ /dev/null @@ -1,17 +0,0 @@ -import { descriptions } from 'common/constants/descriptions'; -import { s3 } from 'common/constants/urls'; -import SuccessStory from '../SuccessStory'; - -export default { - component: SuccessStory, - title: 'SuccessStory', -}; - -const Template = arguments_ => ; - -export const Default = Template.bind({}); -Default.args = { - imageSource: `${s3}headshots/david_molina.jpg`, - quote: descriptions.long, - title: 'Name of Person', -}; diff --git a/components/SuccessStory/__stories__/SuccessStory.stories.tsx b/components/SuccessStory/__stories__/SuccessStory.stories.tsx new file mode 100644 index 000000000..8485ed4e2 --- /dev/null +++ b/components/SuccessStory/__stories__/SuccessStory.stories.tsx @@ -0,0 +1,22 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { descriptions } from 'common/constants/descriptions'; +import { s3 } from 'common/constants/urls'; +import SuccessStory from '../SuccessStory'; + +type SuccessStoryType = StoryObj; + +const meta: Meta = { + title: 'SuccesStory', + component: SuccessStory, + args: { + title: 'Name of Person', + imageSource: `${s3}headshots/david_molina.jpg`, + quote: descriptions.long, + }, +}; + +export default meta; + +export const Default: SuccessStoryType = { + render: args => , +}; diff --git a/components/SuccessStory/__tests__/SuccessStory.test.js b/components/SuccessStory/__tests__/SuccessStory.test.tsx similarity index 99% rename from components/SuccessStory/__tests__/SuccessStory.test.js rename to components/SuccessStory/__tests__/SuccessStory.test.tsx index 67a3273af..53349fdc3 100644 --- a/components/SuccessStory/__tests__/SuccessStory.test.js +++ b/components/SuccessStory/__tests__/SuccessStory.test.tsx @@ -1,5 +1,4 @@ import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest'; - import SuccessStory from '../SuccessStory'; describe('SuccessStory', () => { diff --git a/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap b/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.tsx.snap similarity index 100% rename from components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap rename to components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.tsx.snap From 765c6f569d2cc8266ffd490ff1aa39cb6b30836e Mon Sep 17 00:00:00 2001 From: Michael Stedman <46408716+recondesigns@users.noreply.github.com> Date: Mon, 11 Mar 2024 23:45:29 -0500 Subject: [PATCH 08/10] updated resusable sections' Story titles --- .../DonateSection/__stories__/DonateSection.stories.tsx | 2 +- .../JoinSection/__stories__/JoinSection.stories.tsx | 2 +- .../SponsorsSection/__stories__/SponsorSection.stories.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/ReusableSections/DonateSection/__stories__/DonateSection.stories.tsx b/components/ReusableSections/DonateSection/__stories__/DonateSection.stories.tsx index 6b3c14900..b48167714 100644 --- a/components/ReusableSections/DonateSection/__stories__/DonateSection.stories.tsx +++ b/components/ReusableSections/DonateSection/__stories__/DonateSection.stories.tsx @@ -5,7 +5,7 @@ import DonateSection from '../DonateSection'; type DonateSectionStoryType = StoryObj; const meta: Meta = { - title: 'Reusable/DonateSection', + title: 'ReusableSections/DonateSection', component: DonateSection, }; diff --git a/components/ReusableSections/JoinSection/__stories__/JoinSection.stories.tsx b/components/ReusableSections/JoinSection/__stories__/JoinSection.stories.tsx index 98ecdecfe..e6e58ecca 100644 --- a/components/ReusableSections/JoinSection/__stories__/JoinSection.stories.tsx +++ b/components/ReusableSections/JoinSection/__stories__/JoinSection.stories.tsx @@ -4,7 +4,7 @@ import JoinSection from '../JoinSection'; type JoinSectionStoryType = StoryObj; const meta: Meta = { - title: 'Reusable/JoinSection', + title: 'ReusableSections/JoinSection', component: JoinSection, }; diff --git a/components/ReusableSections/SponsorsSection/__stories__/SponsorSection.stories.tsx b/components/ReusableSections/SponsorsSection/__stories__/SponsorSection.stories.tsx index 6ed5f2228..4dd29498e 100644 --- a/components/ReusableSections/SponsorsSection/__stories__/SponsorSection.stories.tsx +++ b/components/ReusableSections/SponsorsSection/__stories__/SponsorSection.stories.tsx @@ -4,7 +4,7 @@ import SponsorsSection from '../SponsorsSection'; type SponsorsSectionStoryType = StoryObj const meta: Meta = { - title: 'Reusable/SponsorsSection', + title: 'ReusableSections/SponsorsSection', component: SponsorsSection } From e0e4a16f6f5711d1fd7c1c79fac8a691562af08e Mon Sep 17 00:00:00 2001 From: Michael Stedman <46408716+recondesigns@users.noreply.github.com> Date: Mon, 11 Mar 2024 23:58:04 -0500 Subject: [PATCH 09/10] removed props type and typed component with PropsWithChildren<> --- components/ScreenReaderOnly/ScreenReaderOnly.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/components/ScreenReaderOnly/ScreenReaderOnly.tsx b/components/ScreenReaderOnly/ScreenReaderOnly.tsx index 849259037..bf31ddab9 100644 --- a/components/ScreenReaderOnly/ScreenReaderOnly.tsx +++ b/components/ScreenReaderOnly/ScreenReaderOnly.tsx @@ -5,14 +5,7 @@ export const toggleMessages = { close: 'Hide expanded', }; -export type ScreenReaderOnlyPropsType = { - /** - * Child content that is rendered in the root element, but not displayed. - */ - children: React.ReactNode; -}; - -function ScreenReaderOnly({ children }: ScreenReaderOnlyPropsType) { +function ScreenReaderOnly({ children }: React.PropsWithChildren) { return ( {children} From 093222d495881494aa1f79a7645d376792819cf6 Mon Sep 17 00:00:00 2001 From: Michael Stedman <46408716+recondesigns@users.noreply.github.com> Date: Mon, 11 Mar 2024 23:59:09 -0500 Subject: [PATCH 10/10] applied quotation mark change and updated SuccessStory snapshot --- components/SuccessStory/SuccessStory.tsx | 2 +- .../__tests__/__snapshots__/SuccessStory.test.tsx.snap | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/SuccessStory/SuccessStory.tsx b/components/SuccessStory/SuccessStory.tsx index cb327c322..8321fb255 100644 --- a/components/SuccessStory/SuccessStory.tsx +++ b/components/SuccessStory/SuccessStory.tsx @@ -18,7 +18,7 @@ export type SuccessStoryPropsType = { function SuccessStory({ imageSource, quote, title }: SuccessStoryPropsType) { return ( -
{`"${quote}"`}
+
{`“${quote}”`}
 ); } diff --git a/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.tsx.snap b/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.tsx.snap index fbf249376..f09d69b4e 100644 --- a/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.tsx.snap +++ b/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.tsx.snap @@ -12,7 +12,7 @@ exports[`SuccessStory > should render with required props 1`] = ` } >
- "Best test of my life!" + “Best test of my life!”
`;