Merge pull request #105 from trussworks/em-title-component-#83

Add title component

src/components/Title/Title.stories.tsx

@@ -12,9 +12,6 @@ Source: https://designsystem.digital.gov/components/header/
   },
 }
 
-const testTitle = 'Test Title'
-const testLink = '#testLinkOne'
+const testTitle = <a href="#testlink">Project Title</a>
 
-export const defaultTitle = (): React.ReactElement => (
-  <Title title={testTitle} link={testLink}></Title>
-)
+export const defaultTitle = (): React.ReactElement => <Title>{testTitle}</Title>

src/components/Title/Title.test.tsx

@@ -3,14 +3,9 @@ import { render } from '@testing-library/react'
 
 import { Title } from './Title'
 
-const testTitle = 'Test Title'
-const testLink = '#testLinkOne'
-
 describe('Title component', () => {
   it('renders without errors', () => {
-    const { queryByText } = render(
-      <Title title={testTitle} link={testLink}></Title>
-    )
+    const { queryByText } = render(<Title>Test Title</Title>)
     expect(queryByText('Test Title')).toBeInTheDocument()
   })
 })

src/components/Title/Title.tsx

@@ -2,18 +2,18 @@ import React from 'react'
 import classnames from 'classnames'
 
 interface TitleProps {
-  title: React.ReactNode
-  link?: string
+  children: React.ReactNode
 }
 
-export const Title = ({ title, link }: TitleProps): React.ReactElement => {
-  const classes = classnames('usa-logo')
+export const Title = (
+  props: TitleProps & React.HTMLAttributes<HTMLDivElement>
+): React.ReactElement => {
+  const { className, children, ...divProps } = props
+  const classes = classnames('usa-logo', className)
 
   return (
-    <div className={classes}>
-      <em className="usa-logo__text">
-        <a href={link}>{title}</a>
-      </em>
+    <div className={classes} {...divProps}>
+      <em className="usa-logo__text">{children}</em>
     </div>
   )
 }