Add Logo, static file loading

- serve static files via directory as per storybook docs
- include story for slim logo only, other types to be added in future

package.json

@@ -23,7 +23,7 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "storybook": "start-storybook",
+    "storybook": "start-storybook -s ./static -p 9001",
     "build": "webpack",
     "build:watch": "webpack --watch",
     "lint": "tsc --noEmit && eslint --ext js,jsx,ts,tsx src",

src/components/Footer/Logo/Logo.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+
+import { Logo } from './Logo'
+
+export default {
+  title: 'Logo',
+  parameters: {
+    info: `
+    Used within USWDS 2.0 Footer component
+    
+    Source: https://designsystem.digital.gov/components/form-controls/#footer
+    `,
+  },
+}
+
+export const Slim = (): React.ReactElement => (
+  <div className="usa-footer__secondary-section">
+    <Logo
+      slim
+      image={
+        <img
+          className="usa-footer__logo-img"
+          src="/logo-img.png"
+          alt="Mock logo"
+        />
+      }
+      heading={<h3 className="usa-footer__logo-heading">Name of Agency</h3>}
+    />
+  </div>
+)
+
+export const NoHeading = (): React.ReactElement => (
+  <div className="usa-footer__secondary-section">
+    <Logo
+      image={
+        <img
+          className="usa-footer__logo-img"
+          src="/logo-img.png"
+          alt="Mock logo"
+        />
+      }
+    />
+  </div>
+)

src/components/Footer/Logo/Logo.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { Logo } from './Logo'
+
+const heading = <h3 className="usa-footer__logo-heading">Swoosh Branding</h3>
+const logoImage = (
+  <img
+    className="usa-footer__logo-img"
+    src="src/components/Footer/Logo/logo-img.png"
+    alt="Nike logo"
+  />
+)
+
+describe('Logo component', () => {
+  it('renders without errors', () => {
+    const { queryByTestId } = render(<Logo image={logoImage} />)
+    expect(queryByTestId('footerLogo')).toBeInTheDocument()
+  })
+
+  it('renders logo image', () => {
+    const { container } = render(<Logo image={logoImage} />)
+    expect(container.querySelector('img')).toBeInTheDocument()
+  })
+
+  it('renders heading when present', () => {
+    const { getByText } = render(<Logo image={logoImage} heading={heading} />)
+    expect(getByText('Swoosh Branding')).toBeInTheDocument()
+  })
+})

src/components/Footer/Logo/Logo.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import classnames from 'classnames'
+
+type LogoProps = {
+  big?: boolean
+  medium?: boolean
+  slim?: boolean
+  heading?: React.ReactNode
+  image: React.ReactNode
+}
+
+export const Logo = ({
+  big,
+  medium,
+  slim,
+  heading,
+  image,
+  ...elementAttributes
+}: LogoProps & React.HtmlHTMLAttributes<HTMLElement>): React.ReactElement => {
+  const containerClasses = classnames(
+    'usa-footer__logo grid-row',
+    {
+      'mobile-lg:grid-col-6 mobile-lg:grid-gap-2': big || medium,
+      'grid-gap-2': slim,
+    },
+    elementAttributes.className
+  )
+
+  return (
+    <div className={containerClasses} data-testid="footerLogo">
+      {heading ? (
+        <>
+          <div className="grid-col-auto">{image}</div>
+          <div className="grid-col-auto">{heading}</div>
+        </>
+      ) : (
+        <>{image}</>
+      )}
+    </div>
+  )
+}