From 7517c88d7ae98e50783bf2bdf463d9e51b759bf6 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Fri, 24 Apr 2020 13:55:47 -0800
Subject: [PATCH 1/7] Add title component

---
 src/components/Title/Title.stories.tsx | 20 ++++++++++++++++++++
 src/components/Title/Title.test.tsx    | 16 ++++++++++++++++
 src/components/Title/Title.tsx         | 21 +++++++++++++++++++++
 3 files changed, 57 insertions(+)
 create mode 100644 src/components/Title/Title.stories.tsx
 create mode 100644 src/components/Title/Title.test.tsx
 create mode 100644 src/components/Title/Title.tsx

diff --git a/src/components/Title/Title.stories.tsx b/src/components/Title/Title.stories.tsx
new file mode 100644
index 0000000000..56d2c714e3
--- /dev/null
+++ b/src/components/Title/Title.stories.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Title } from './Title'
+
+export default {
+  title: 'Title',
+  parameters: {
+    info: `
+USWDS 2.0 Title component
+
+Source: https://designsystem.digital.gov/components/header/
+`,
+  },
+}
+
+const testTitle = 'Test Title'
+const testLink = '#testLinkOne'
+
+export const defaultTitle = (): React.ReactElement => (
+  <Title title={testTitle} link={testLink}></Title>
+)
diff --git a/src/components/Title/Title.test.tsx b/src/components/Title/Title.test.tsx
new file mode 100644
index 0000000000..1f188ecdf8
--- /dev/null
+++ b/src/components/Title/Title.test.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+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>
+    )
+    expect(queryByText('Test Title')).toBeInTheDocument()
+  })
+})
diff --git a/src/components/Title/Title.tsx b/src/components/Title/Title.tsx
new file mode 100644
index 0000000000..c3d84704b2
--- /dev/null
+++ b/src/components/Title/Title.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import classnames from 'classnames'
+
+interface TitleProps {
+  title: React.ReactNode
+  link?: string
+}
+
+export const Title = ({ title, link }: TitleProps): React.ReactElement => {
+  const classes = classnames('usa-logo')
+
+  return (
+    <div className={classes}>
+      <em className="usa-logo__text">
+        <a href={link}>{title}</a>
+      </em>
+    </div>
+  )
+}
+
+export default Title

From fc8312aec7723757f078f5612c4a538bb25fc048 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Mon, 27 Apr 2020 09:30:10 -0800
Subject: [PATCH 2/7] Fix title markup

---
 src/components/Title/Title.stories.tsx | 5 ++---
 src/components/Title/Title.test.tsx    | 5 +----
 src/components/Title/Title.tsx         | 7 ++-----
 3 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/components/Title/Title.stories.tsx b/src/components/Title/Title.stories.tsx
index 56d2c714e3..c375309850 100644
--- a/src/components/Title/Title.stories.tsx
+++ b/src/components/Title/Title.stories.tsx
@@ -12,9 +12,8 @@ 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>
+  <Title title={testTitle}></Title>
 )
diff --git a/src/components/Title/Title.test.tsx b/src/components/Title/Title.test.tsx
index 1f188ecdf8..4f94f5a95d 100644
--- a/src/components/Title/Title.test.tsx
+++ b/src/components/Title/Title.test.tsx
@@ -4,13 +4,10 @@ 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 title={testTitle}></Title>)
     expect(queryByText('Test Title')).toBeInTheDocument()
   })
 })
diff --git a/src/components/Title/Title.tsx b/src/components/Title/Title.tsx
index c3d84704b2..98c58fd0aa 100644
--- a/src/components/Title/Title.tsx
+++ b/src/components/Title/Title.tsx
@@ -3,17 +3,14 @@ import classnames from 'classnames'
 
 interface TitleProps {
   title: React.ReactNode
-  link?: string
 }
 
-export const Title = ({ title, link }: TitleProps): React.ReactElement => {
+export const Title = ({ title }: TitleProps): React.ReactElement => {
   const classes = classnames('usa-logo')
 
   return (
     <div className={classes}>
-      <em className="usa-logo__text">
-        <a href={link}>{title}</a>
-      </em>
+      <h1 className="usa-logo__text">{title}</h1>
     </div>
   )
 }

From 4b6d1b4e9baa763bf66a0d42e61007b5d954c4a1 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Mon, 27 Apr 2020 16:15:32 -0800
Subject: [PATCH 3/7] Updates from PR review

---
 src/components/Title/Title.stories.tsx |  2 +-
 src/components/Title/Title.test.tsx    |  6 ++----
 src/components/Title/Title.tsx         | 16 +++++++++++-----
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/Title/Title.stories.tsx b/src/components/Title/Title.stories.tsx
index c375309850..2ada20a5d9 100644
--- a/src/components/Title/Title.stories.tsx
+++ b/src/components/Title/Title.stories.tsx
@@ -15,5 +15,5 @@ Source: https://designsystem.digital.gov/components/header/
 const testTitle = <a href="#testlink">Project Title</a>
 
 export const defaultTitle = (): React.ReactElement => (
-  <Title title={testTitle}></Title>
+  <Title text={true}>{testTitle}</Title>
 )
diff --git a/src/components/Title/Title.test.tsx b/src/components/Title/Title.test.tsx
index 4f94f5a95d..74977361f1 100644
--- a/src/components/Title/Title.test.tsx
+++ b/src/components/Title/Title.test.tsx
@@ -1,13 +1,11 @@
-import React from 'react'
+import React, { Children } from 'react'
 import { render } from '@testing-library/react'
 
 import { Title } from './Title'
 
-const testTitle = 'Test Title'
-
 describe('Title component', () => {
   it('renders without errors', () => {
-    const { queryByText } = render(<Title title={testTitle}></Title>)
+    const { queryByText } = render(<Title>Test Title</Title>)
     expect(queryByText('Test Title')).toBeInTheDocument()
   })
 })
diff --git a/src/components/Title/Title.tsx b/src/components/Title/Title.tsx
index 98c58fd0aa..8c98544600 100644
--- a/src/components/Title/Title.tsx
+++ b/src/components/Title/Title.tsx
@@ -2,15 +2,21 @@ import React from 'react'
 import classnames from 'classnames'
 
 interface TitleProps {
-  title: React.ReactNode
+  children: React.ReactNode
+  logo?: boolean
+  text?: boolean
 }
 
-export const Title = ({ title }: TitleProps): React.ReactElement => {
-  const classes = classnames('usa-logo')
+export const Title = (props: TitleProps): React.ReactElement => {
+  const { children, logo, text } = props
+  const classes = classnames({
+    'usa-logo__logo': logo,
+    'usa-logo__text': text,
+  })
 
   return (
-    <div className={classes}>
-      <h1 className="usa-logo__text">{title}</h1>
+    <div className="usa-logo">
+      <em className={classes}>{children}</em>
     </div>
   )
 }

From 05df98582ea724411a10d0a757d832f782f035a7 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Mon, 27 Apr 2020 16:20:16 -0800
Subject: [PATCH 4/7] Keep it simple

---
 src/components/Title/Title.stories.tsx |  4 +---
 src/components/Title/Title.tsx         | 14 ++++----------
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/components/Title/Title.stories.tsx b/src/components/Title/Title.stories.tsx
index 2ada20a5d9..ab6f40e830 100644
--- a/src/components/Title/Title.stories.tsx
+++ b/src/components/Title/Title.stories.tsx
@@ -14,6 +14,4 @@ Source: https://designsystem.digital.gov/components/header/
 
 const testTitle = <a href="#testlink">Project Title</a>
 
-export const defaultTitle = (): React.ReactElement => (
-  <Title text={true}>{testTitle}</Title>
-)
+export const defaultTitle = (): React.ReactElement => <Title>{testTitle}</Title>
diff --git a/src/components/Title/Title.tsx b/src/components/Title/Title.tsx
index 8c98544600..5ff9ef41b0 100644
--- a/src/components/Title/Title.tsx
+++ b/src/components/Title/Title.tsx
@@ -3,20 +3,14 @@ import classnames from 'classnames'
 
 interface TitleProps {
   children: React.ReactNode
-  logo?: boolean
-  text?: boolean
 }
 
-export const Title = (props: TitleProps): React.ReactElement => {
-  const { children, logo, text } = props
-  const classes = classnames({
-    'usa-logo__logo': logo,
-    'usa-logo__text': text,
-  })
+export const Title = ({ children }: TitleProps): React.ReactElement => {
+  const classes = classnames('usa-logo')
 
   return (
-    <div className="usa-logo">
-      <em className={classes}>{children}</em>
+    <div className={classes}>
+      <em className="usa-logo__text">{children}</em>
     </div>
   )
 }

From 48f7e918ae58c048efb8fdf00237607c3b67bd1d Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Tue, 28 Apr 2020 07:46:13 -0800
Subject: [PATCH 5/7] Fix props

---
 src/components/Title/Title.test.tsx |  2 +-
 src/components/Title/Title.tsx      | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Title/Title.test.tsx b/src/components/Title/Title.test.tsx
index 74977361f1..e60ae18997 100644
--- a/src/components/Title/Title.test.tsx
+++ b/src/components/Title/Title.test.tsx
@@ -1,4 +1,4 @@
-import React, { Children } from 'react'
+import React from 'react'
 import { render } from '@testing-library/react'
 
 import { Title } from './Title'
diff --git a/src/components/Title/Title.tsx b/src/components/Title/Title.tsx
index 5ff9ef41b0..0540da2e9f 100644
--- a/src/components/Title/Title.tsx
+++ b/src/components/Title/Title.tsx
@@ -3,13 +3,18 @@ import classnames from 'classnames'
 
 interface TitleProps {
   children: React.ReactNode
+  className?: string
 }
 
-export const Title = ({ children }: TitleProps): React.ReactElement => {
-  const classes = classnames('usa-logo')
+export const Title = ({
+  className,
+  children,
+  ...props
+}: TitleProps): React.ReactElement => {
+  const classes = classnames('usa-logo', className)
 
   return (
-    <div className={classes}>
+    <div className={classes} {...props}>
       <em className="usa-logo__text">{children}</em>
     </div>
   )

From eed81e43b9892f3fd6b792a4685413430728772c Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Tue, 28 Apr 2020 08:31:35 -0800
Subject: [PATCH 6/7] Fix div prop

---
 src/components/Title/Title.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/Title/Title.tsx b/src/components/Title/Title.tsx
index 0540da2e9f..893660b413 100644
--- a/src/components/Title/Title.tsx
+++ b/src/components/Title/Title.tsx
@@ -2,19 +2,18 @@ import React from 'react'
 import classnames from 'classnames'
 
 interface TitleProps {
-  children: React.ReactNode
   className?: string
+  children: React.ReactNode
 }
 
-export const Title = ({
-  className,
-  children,
-  ...props
-}: TitleProps): React.ReactElement => {
+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} {...props}>
+    <div className={classes} {...divProps}>
       <em className="usa-logo__text">{children}</em>
     </div>
   )

From b61ee71f4ca643072f0cf15b65ee884091ac0515 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Wed, 29 Apr 2020 13:47:00 -0800
Subject: [PATCH 7/7] Remove title prop

---
 src/components/Title/Title.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Title/Title.tsx b/src/components/Title/Title.tsx
index 893660b413..111786b0ae 100644
--- a/src/components/Title/Title.tsx
+++ b/src/components/Title/Title.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 import classnames from 'classnames'
 
 interface TitleProps {
-  className?: string
   children: React.ReactNode
 }