From 66b6fad4b106781a40d1675b9ba70a22e961a36e Mon Sep 17 00:00:00 2001 From: Michael Stedman <46408716+recondesigns@users.noreply.github.com> Date: Sun, 3 Mar 2024 10:51:29 -0600 Subject: [PATCH 1/6] migrated Container files to .tsx and updated snapshot --- .../Container/{Container.js => Container.tsx} | 56 ++++++++++++------- .../__stories__/Container.stories.js | 15 ----- .../__stories__/Container.stories.tsx | 19 +++++++ .../{Container.test.js => Container.test.tsx} | 0 ...r.test.js.snap => Container.test.tsx.snap} | 0 5 files changed, 56 insertions(+), 34 deletions(-) rename components/Container/{Container.js => Container.tsx} (50%) delete mode 100644 components/Container/__stories__/Container.stories.js create mode 100644 components/Container/__stories__/Container.stories.tsx rename components/Container/__tests__/{Container.test.js => Container.test.tsx} (100%) rename components/Container/__tests__/__snapshots__/{Container.test.js.snap => Container.test.tsx.snap} (100%) diff --git a/components/Container/Container.js b/components/Container/Container.tsx similarity index 50% rename from components/Container/Container.js rename to components/Container/Container.tsx index d4925925c..99e8b922e 100644 --- a/components/Container/Container.js +++ b/components/Container/Container.tsx @@ -1,28 +1,46 @@ -import { bool, node, number, oneOf, oneOfType, string } from 'prop-types'; +// import { bool, node, number, oneOf, oneOfType, string } from 'prop-types'; import classNames from 'classnames'; import { getDataAttributes } from 'common/utils/prop-utils'; import styles from './Container.module.css'; -Container.propTypes = { - backgroundImageSource: string, - children: node, - className: string, - id: oneOfType([string, number]), - isFullViewportHeight: bool, - theme: oneOf(['gray', 'secondary', 'white']), +export type ContainerPropsType = { + /** + * Sets the path for an optional background image. + */ + backgroundImageSource?: string; + /** + * Content to be rendered in the Container. + */ + children?: React.ReactNode; + /** + * Applies style classes to the wrapping div. + */ + className?: string; + /** + * Applies an id to the container. + */ + id?: string; + /** + * Sets the height of the container to be full viewport height. + * @default false + */ + isFullViewportHeight?: boolean; + /** + * Applies the color theme. + * @default secondary + */ + theme?: 'gray' | 'secondary' | 'white'; }; -Container.defaultProps = { - backgroundImageSource: undefined, - children: undefined, - className: undefined, - id: undefined, - isFullViewportHeight: false, - theme: 'secondary', -}; - -function Container(props) { - const { backgroundImageSource, children, className, id, isFullViewportHeight, theme } = props; +function Container(props: ContainerPropsType) { + const { + backgroundImageSource, + children, + className, + id, + isFullViewportHeight = false, + theme = 'secondary', + } = props; // See https://css-tricks.com/tinted-images-multiple-backgrounds/ for explanation const darkOverlay = 'linear-gradient(rgba(33, 48, 69, 0.65),rgba(33, 48, 69, 0.65))'; const dynamicBackgroundImage = backgroundImageSource diff --git a/components/Container/__stories__/Container.stories.js b/components/Container/__stories__/Container.stories.js deleted file mode 100644 index 104bee2b6..000000000 --- a/components/Container/__stories__/Container.stories.js +++ /dev/null @@ -1,15 +0,0 @@ -import { descriptions } from 'common/constants/descriptions'; -import Container from '../Container'; - -export default { - component: Container, - title: 'Container', -}; - -const Template = arguments_ => ; - -// Default Container supplied with only required args -export const Default = Template.bind({}); -Default.args = { - children: descriptions.long, -}; diff --git a/components/Container/__stories__/Container.stories.tsx b/components/Container/__stories__/Container.stories.tsx new file mode 100644 index 000000000..52f937cb1 --- /dev/null +++ b/components/Container/__stories__/Container.stories.tsx @@ -0,0 +1,19 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { descriptions } from 'common/constants/descriptions'; +import Container from '../Container'; + +type ContainerStoryType = StoryObj; + +const meta: Meta = { + title: 'Container', + component: Container, + args: { + children: descriptions.long, + }, +}; + +export default meta; + +export const Default: ContainerStoryType = { + render: args => , +}; diff --git a/components/Container/__tests__/Container.test.js b/components/Container/__tests__/Container.test.tsx similarity index 100% rename from components/Container/__tests__/Container.test.js rename to components/Container/__tests__/Container.test.tsx diff --git a/components/Container/__tests__/__snapshots__/Container.test.js.snap b/components/Container/__tests__/__snapshots__/Container.test.tsx.snap similarity index 100% rename from components/Container/__tests__/__snapshots__/Container.test.js.snap rename to components/Container/__tests__/__snapshots__/Container.test.tsx.snap From e0ada92469c6b78f82d547679b01308f6280253a Mon Sep 17 00:00:00 2001 From: Michael Stedman <46408716+recondesigns@users.noreply.github.com> Date: Sun, 3 Mar 2024 10:52:01 -0600 Subject: [PATCH 2/6] updated DonateSection snapshot because the Container changed --- .../__tests__/__snapshots__/DonateSection.test.js.snap | 2 -- 1 file changed, 2 deletions(-) diff --git a/components/ReusableSections/DonateSection/__tests__/__snapshots__/DonateSection.test.js.snap b/components/ReusableSections/DonateSection/__tests__/__snapshots__/DonateSection.test.js.snap index b70111030..4722fbb74 100644 --- a/components/ReusableSections/DonateSection/__tests__/__snapshots__/DonateSection.test.js.snap +++ b/components/ReusableSections/DonateSection/__tests__/__snapshots__/DonateSection.test.js.snap @@ -3,8 +3,6 @@ exports[`DonateSection > should render with no props passed passed 1`] = ` Date: Sun, 3 Mar 2024 11:23:07 -0600 Subject: [PATCH 3/6] migrated Content component files to .tsx and updated snapshot --- components/Content/Content.js | 55 ------------------- components/Content/Content.tsx | 44 +++++++++++++++ .../Content/__stories__/Content.stories.js | 35 ------------ .../Content/__stories__/Content.stories.tsx | 45 +++++++++++++++ .../{Content.test.js => Content.test.tsx} | 0 ...ent.test.js.snap => Content.test.tsx.snap} | 0 6 files changed, 89 insertions(+), 90 deletions(-) delete mode 100644 components/Content/Content.js create mode 100644 components/Content/Content.tsx delete mode 100644 components/Content/__stories__/Content.stories.js create mode 100644 components/Content/__stories__/Content.stories.tsx rename components/Content/__tests__/{Content.test.js => Content.test.tsx} (100%) rename components/Content/__tests__/__snapshots__/{Content.test.js.snap => Content.test.tsx.snap} (100%) diff --git a/components/Content/Content.js b/components/Content/Content.js deleted file mode 100644 index 82c7ba0e0..000000000 --- a/components/Content/Content.js +++ /dev/null @@ -1,55 +0,0 @@ -import { cloneElement } from 'react'; -import { array, bool, oneOf, string } from 'prop-types'; -import Container from 'components/Container/Container'; -import Heading from 'components/Heading/Heading'; - -Content.propTypes = { - backgroundImageSource: string, - className: string, - columns: array.isRequired, // can be JSX, elements, or strings - hasTitleUnderline: bool, - id: string, - isFullViewportHeight: bool, - theme: oneOf(['gray', 'secondary', 'white']), - title: string, -}; - -Content.defaultProps = { - backgroundImageSource: undefined, - className: '', - hasTitleUnderline: false, - id: undefined, - isFullViewportHeight: false, - theme: 'secondary', - title: undefined, -}; - -function Content({ - className, - columns, - hasTitleUnderline, - id, - isFullViewportHeight, - theme, - title, - backgroundImageSource, -}) { - return ( - - {title && } - -
- {/* eslint-disable-next-line react/no-array-index-key */} - {columns.map((column, index) => cloneElement(column, { key: index }))} -
- - ); -} - -export default Content; diff --git a/components/Content/Content.tsx b/components/Content/Content.tsx new file mode 100644 index 000000000..1800dd303 --- /dev/null +++ b/components/Content/Content.tsx @@ -0,0 +1,44 @@ +import { cloneElement, ReactElement } from 'react'; +import Container from 'components/Container/Container'; +import Heading from 'components/Heading/Heading'; + +export type ContentPropsType = { + columns: React.ReactNode[]; + backgroundImageSource?: string; + className?: string; + hasTitleUnderline?: boolean; + id?: string; + isFullViewportHeight?: boolean; + theme?: 'gray' | 'secondary' | 'white'; + title?: string; +}; + +function Content({ + className, + columns, + hasTitleUnderline = false, + id, + isFullViewportHeight = false, + theme = 'secondary', + title, + backgroundImageSource, +}: ContentPropsType) { + return ( + + {title && } + +
+ {/* eslint-disable-next-line react/no-array-index-key */} + {columns.map((column, index) => cloneElement(column as ReactElement, { key: index }))} +
+ + ); +} + +export default Content; diff --git a/components/Content/__stories__/Content.stories.js b/components/Content/__stories__/Content.stories.js deleted file mode 100644 index 6f5bb7a60..000000000 --- a/components/Content/__stories__/Content.stories.js +++ /dev/null @@ -1,35 +0,0 @@ -import Content from '../Content'; - -const multiColumnArray = [ -
-

Column 1

-
, -
-

Column 2

-
, -
-

Column 3

-
, -]; - -export default { - component: Content, - title: 'Content', -}; - -const Template = arguments_ => ; - -// Default Content supplied with only one column -export const Default = Template.bind({}); -Default.args = { - columns: multiColumnArray.slice(0, 1), - title: 'One column content', -}; - -// Container supplied with multiple columns -export const MultipleColumns = Template.bind({}); -MultipleColumns.args = { - ...Default.args, - columns: multiColumnArray, - title: 'Multiple column content', -}; diff --git a/components/Content/__stories__/Content.stories.tsx b/components/Content/__stories__/Content.stories.tsx new file mode 100644 index 000000000..96fb1ecae --- /dev/null +++ b/components/Content/__stories__/Content.stories.tsx @@ -0,0 +1,45 @@ +import { Meta, StoryObj } from '@storybook/react'; +import Content from '../Content'; + +type ContentStoryType = StoryObj; + +const multiColumnArray = [ +
+

Column 1

+
, +
+

Column 2

+
, +
+

Column 3

+
, +]; + +const meta: Meta = { + title: 'Content', + component: Content, + args: { + columns: multiColumnArray.slice(0, 1), + title: 'One column content', + }, +}; + +export default meta; + +/** + * Default Content supplied with only one column + */ +export const Default: ContentStoryType = { + render: args => , +}; + +/** + * Content supplied with multiple columns + */ +export const MultipleColumns: ContentStoryType = { + ...Default, + args: { + columns: multiColumnArray, + title: 'Multiple column content', + }, +}; diff --git a/components/Content/__tests__/Content.test.js b/components/Content/__tests__/Content.test.tsx similarity index 100% rename from components/Content/__tests__/Content.test.js rename to components/Content/__tests__/Content.test.tsx diff --git a/components/Content/__tests__/__snapshots__/Content.test.js.snap b/components/Content/__tests__/__snapshots__/Content.test.tsx.snap similarity index 100% rename from components/Content/__tests__/__snapshots__/Content.test.js.snap rename to components/Content/__tests__/__snapshots__/Content.test.tsx.snap From 7b0c2725b7a617271bb9f1a0c86dd40a27f495a6 Mon Sep 17 00:00:00 2001 From: Michael Stedman <46408716+recondesigns@users.noreply.github.com> Date: Sun, 3 Mar 2024 11:23:47 -0600 Subject: [PATCH 4/6] updated snapshots due to Content component change --- .../__tests__/__snapshots__/ColorSection.test.tsx.snap | 5 ----- .../__tests__/__snapshots__/FontSection.test.tsx.snap | 2 -- .../__tests__/__snapshots__/LogoSection.test.tsx.snap | 2 -- 3 files changed, 9 deletions(-) diff --git a/components/Branding/ColorSection/__tests__/__snapshots__/ColorSection.test.tsx.snap b/components/Branding/ColorSection/__tests__/__snapshots__/ColorSection.test.tsx.snap index 15ad054e2..2dc44a6f4 100644 --- a/components/Branding/ColorSection/__tests__/__snapshots__/ColorSection.test.tsx.snap +++ b/components/Branding/ColorSection/__tests__/__snapshots__/ColorSection.test.tsx.snap @@ -3,7 +3,6 @@ exports[`ColorSection > should render with required props 1`] = ` @@ -31,12 +30,10 @@ exports[`ColorSection > should render with required props 1`] = ` ] } hasTitleUnderline={true} - isFullViewportHeight={false} theme="white" title="Colors" /> should render with required props 1`] = ` />, ] } - hasTitleUnderline={false} - isFullViewportHeight={false} theme="white" title="Other On-Brand Colors" /> diff --git a/components/Branding/FontSection/__tests__/__snapshots__/FontSection.test.tsx.snap b/components/Branding/FontSection/__tests__/__snapshots__/FontSection.test.tsx.snap index 650c7e1b5..dd1bd0ab8 100644 --- a/components/Branding/FontSection/__tests__/__snapshots__/FontSection.test.tsx.snap +++ b/components/Branding/FontSection/__tests__/__snapshots__/FontSection.test.tsx.snap @@ -2,7 +2,6 @@ exports[`FontSection > should render with required props 1`] = ` should render with required props 1`] = ` ] } hasTitleUnderline={true} - isFullViewportHeight={false} theme="gray" title="Typography" /> diff --git a/components/Branding/LogoSection/__tests__/__snapshots__/LogoSection.test.tsx.snap b/components/Branding/LogoSection/__tests__/__snapshots__/LogoSection.test.tsx.snap index 4598cde48..6dfeb9662 100644 --- a/components/Branding/LogoSection/__tests__/__snapshots__/LogoSection.test.tsx.snap +++ b/components/Branding/LogoSection/__tests__/__snapshots__/LogoSection.test.tsx.snap @@ -2,7 +2,6 @@ exports[`LogoSection > should render with required props 1`] = ` should render with required props 1`] = ` ] } hasTitleUnderline={true} - isFullViewportHeight={false} theme="gray" title="Logo" /> From 785c20fa8e0819ed43a6bc0cac785a808e2b7e84 Mon Sep 17 00:00:00 2001 From: Michael Stedman <46408716+recondesigns@users.noreply.github.com> Date: Sun, 3 Mar 2024 11:32:01 -0600 Subject: [PATCH 5/6] added prop type descriptions for Content.tsx --- components/Content/Content.tsx | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/components/Content/Content.tsx b/components/Content/Content.tsx index 1800dd303..344b461f5 100644 --- a/components/Content/Content.tsx +++ b/components/Content/Content.tsx @@ -3,13 +3,39 @@ import Container from 'components/Container/Container'; import Heading from 'components/Heading/Heading'; export type ContentPropsType = { + /** + * Elements to be rendered in the container. + */ columns: React.ReactNode[]; + /** + * Sets the path for an optional background image. + */ backgroundImageSource?: string; + /** + * Applies style classes to the wrapping div. + */ className?: string; + /** + * Displays an optional line under the title. + */ hasTitleUnderline?: boolean; + /** + * Applies an id to the container. + */ id?: string; + /** + * Sets the height of the container to be full viewport height. + * @default false + */ isFullViewportHeight?: boolean; + /** + * Applies the color theme. + * @default secondary + */ theme?: 'gray' | 'secondary' | 'white'; + /** + * Applies an additional title element. + */ title?: string; }; From e7c2b2649fcb09c45e085d541b3c88967600c6ee Mon Sep 17 00:00:00 2001 From: Michael Stedman <46408716+recondesigns@users.noreply.github.com> Date: Sun, 3 Mar 2024 12:27:17 -0600 Subject: [PATCH 6/6] removed commented out imports --- components/Container/Container.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/Container/Container.tsx b/components/Container/Container.tsx index 99e8b922e..8accedd36 100644 --- a/components/Container/Container.tsx +++ b/components/Container/Container.tsx @@ -1,4 +1,3 @@ -// import { bool, node, number, oneOf, oneOfType, string } from 'prop-types'; import classNames from 'classnames'; import { getDataAttributes } from 'common/utils/prop-utils'; import styles from './Container.module.css';