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/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..e6e58ecca --- /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: 'ReusableSections/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 diff --git a/components/ReusableSections/SponsorsSection/SponsorsSection.js b/components/ReusableSections/SponsorsSection/SponsorsSection.tsx similarity index 87% rename from components/ReusableSections/SponsorsSection/SponsorsSection.js rename to components/ReusableSections/SponsorsSection/SponsorsSection.tsx index c58bf3f02..00550d8d9 100644 --- a/components/ReusableSections/SponsorsSection/SponsorsSection.js +++ b/components/ReusableSections/SponsorsSection/SponsorsSection.tsx @@ -3,10 +3,15 @@ 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..4dd29498e --- /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: 'ReusableSections/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 55% rename from components/ReusableSections/SponsorsSection/__tests__/SponsorsSection.test.js rename to components/ReusableSections/SponsorsSection/__tests__/SponsorsSection.test.tsx index 8b6eb34d3..f85c488c8 100644 --- a/components/ReusableSections/SponsorsSection/__tests__/SponsorsSection.test.js +++ b/components/ReusableSections/SponsorsSection/__tests__/SponsorsSection.test.tsx @@ -1,15 +1,22 @@ 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(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); 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. +

+ +
+
+`; diff --git a/components/ScreenReaderOnly/ScreenReaderOnly.js b/components/ScreenReaderOnly/ScreenReaderOnly.tsx similarity index 67% rename from components/ScreenReaderOnly/ScreenReaderOnly.js rename to components/ScreenReaderOnly/ScreenReaderOnly.tsx index 96043b8de..bf31ddab9 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,7 @@ export const toggleMessages = { close: 'Hide expanded', }; -ScreenReaderOnly.propTypes = { - children: node.isRequired, -}; - -function ScreenReaderOnly({ children }) { +function ScreenReaderOnly({ children }: React.PropsWithChildren) { 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 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..838e97cfb --- /dev/null +++ b/components/SocialMedia/SocialMediaContainer/SocialMediaContainer.tsx @@ -0,0 +1,12 @@ +export type SocialMediaContainer = { + /** + * Child content of + */ + 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 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`] = `
-
{`"${quote}"`}
- - ); -} - -export default SuccessStory; diff --git a/components/SuccessStory/SuccessStory.tsx b/components/SuccessStory/SuccessStory.tsx new file mode 100644 index 000000000..8321fb255 --- /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 90% rename from components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap rename to components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.tsx.snap index fbf249376..f09d69b4e 100644 --- a/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.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!”
`;