Migrate Container and Content components to Typescript

components/Branding/ColorSection/__tests__/__snapshots__/ColorSection.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`ColorSection > should render with required props 1`] = `
 <React.Fragment>
   <Content
-    className=""
     columns={
       [
         <div>
@@ -31,12 +30,10 @@ exports[`ColorSection > should render with required props 1`] = `
       ]
     }
     hasTitleUnderline={true}
-    isFullViewportHeight={false}
     theme="white"
     title="Colors"
   />
   <Content
-    className=""
     columns={
       [
         <Swatch
@@ -49,8 +46,6 @@ exports[`ColorSection > should render with required props 1`] = `
         />,
       ]
     }
-    hasTitleUnderline={false}
-    isFullViewportHeight={false}
     theme="white"
     title="Other On-Brand Colors"
   />

components/Branding/FontSection/__tests__/__snapshots__/FontSection.test.tsx.snap

@@ -2,7 +2,6 @@
 
 exports[`FontSection > should render with required props 1`] = `
 <Content
-  className=""
   columns={
     [
       <ul
@@ -60,7 +59,6 @@ exports[`FontSection > should render with required props 1`] = `
     ]
   }
   hasTitleUnderline={true}
-  isFullViewportHeight={false}
   theme="gray"
   title="Typography"
 />

components/Branding/LogoSection/__tests__/__snapshots__/LogoSection.test.tsx.snap

@@ -2,7 +2,6 @@
 
 exports[`LogoSection > should render with required props 1`] = `
 <Content
-  className=""
   columns={
     [
       <ul
@@ -338,7 +337,6 @@ exports[`LogoSection > should render with required props 1`] = `
     ]
   }
   hasTitleUnderline={true}
-  isFullViewportHeight={false}
   theme="gray"
   title="Logo"
 />

components/Container/Container.js → 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

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<typeof Container>;
+
+const meta: Meta<typeof Container> = {
+  title: 'Container',
+  component: Container,
+  args: {
+    children: descriptions.long,
+  },
+};
+
+export default meta;
+
+export const Default: ContainerStoryType = {
+  render: args => <Container {...args} />,
+};

components/Content/Content.tsx

@@ -0,0 +1,70 @@
+import { cloneElement, ReactElement } from 'react';
+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;
+};
+
+function Content({
+  className,
+  columns,
+  hasTitleUnderline = false,
+  id,
+  isFullViewportHeight = false,
+  theme = 'secondary',
+  title,
+  backgroundImageSource,
+}: ContentPropsType) {
+  return (
+    <Container
+      backgroundImageSource={backgroundImageSource}
+      className={className}
+      id={id}
+      isFullViewportHeight={isFullViewportHeight}
+      theme={theme}
+    >
+      {title && <Heading text={title} hasTitleUnderline={hasTitleUnderline} headingLevel={3} />}
+
+      <div className="flex justify-center items-center flex-wrap w-full [&>*]:m-4">
+        {/* eslint-disable-next-line react/no-array-index-key */}
+        {columns.map((column, index) => cloneElement(column as ReactElement<any>, { key: index }))}
+      </div>
+    </Container>
+  );
+}
+
+export default Content;

components/Content/__stories__/Content.stories.tsx

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Content from '../Content';
+
+type ContentStoryType = StoryObj<typeof Content>;
+
+const multiColumnArray = [
+  <div>
+    <p>Column 1</p>
+  </div>,
+  <div>
+    <p>Column 2</p>
+  </div>,
+  <div>
+    <p>Column 3</p>
+  </div>,
+];
+
+const meta: Meta<typeof Content> = {
+  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 {...args} />,
+};
+
+/**
+ * Content supplied with multiple columns
+ */
+export const MultipleColumns: ContentStoryType = {
+  ...Default,
+  args: {
+    columns: multiColumnArray,
+    title: 'Multiple column content',
+  },
+};

components/ReusableSections/DonateSection/__tests__/__snapshots__/DonateSection.test.js.snap

@@ -3,8 +3,6 @@
 exports[`DonateSection > should render with no props passed passed 1`] = `
 <Container
   backgroundImageSource="https://operation-code-assets.s3.us-east-2.amazonaws.com/background_flag.jpg"
-  isFullViewportHeight={false}
-  theme="secondary"
 >
   <Heading
     hasHashLink={true}