feat(components): migrate Hr to TypeScript (#620)

src/__snapshots__/storyshots.spec.js.snap

@@ -6477,7 +6477,7 @@ exports[`Storyshots Components/Hr Base 1`] = `
 }
 
 <hr
-  class="circuit-0 circuit-1"
+  class="circuit-0"
 />
 `;
 

src/components/Hr/Hr.docs.mdx

@@ -1,5 +1,5 @@
 import { Status, Props, Story } from '../../../.storybook/components';
-import Hr from '../../../src/components/Hr/Hr';
+import { Hr } from './Hr';
 
 # HR
 
@@ -8,13 +8,11 @@ import Hr from '../../../src/components/Hr/Hr';
 HR provides a visual line that separates content into sections
 
 <Story id="components-hr--base" />
-
 <Props of={Hr} />
 
 ## When to use it
 
-Use it when you need to separate different sections of a certain content within a body text or a list
-of data within a card.
+Use it when you need to separate different sections of a certain content within a body text or a list of data within a card.
 
 ## Usage guidelines
 

src/components/Hr/Hr.spec.js → src/components/Hr/Hr.spec.tsx

@@ -15,7 +15,9 @@
 
 import React from 'react';
 
-import Hr from './Hr';
+import { create, renderToHtml, axe } from '../../util/test-utils';
+
+import { Hr } from './Hr';
 
 describe('Hr', () => {
   /**

src/components/Hr/Hr.story.js → src/components/Hr/Hr.story.tsx

@@ -16,7 +16,7 @@
 import React from 'react';
 
 import docs from './Hr.docs.mdx';
-import Hr from './Hr';
+import { Hr } from './Hr';
 
 export default {
   title: 'Components/Hr',

src/components/Hr/Hr.js → src/components/Hr/Hr.tsx

@@ -13,10 +13,11 @@
  * limitations under the License.
  */
 
-import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 
-const baseStyles = ({ theme }) => css`
+import styled, { StyleProps } from '../../styles/styled';
+
+const baseStyles = ({ theme }: StyleProps) => css`
   label: hr;
   display: block;
   width: 100%;
@@ -28,9 +29,4 @@ const baseStyles = ({ theme }) => css`
 /**
  * A horizontal rule to visually and semantically separate text.
  */
-const Hr = styled('hr')(baseStyles);
-
-/**
- * @component
- */
-export default Hr;
+export const Hr = styled('hr')<{}>(baseStyles);

src/components/Hr/__snapshots__/Hr.spec.js.snap → src/components/Hr/__snapshots__/Hr.spec.tsx.snap

@@ -10,6 +10,6 @@ exports[`Hr should render with default styles 1`] = `
 }
 
 <hr
-  class="circuit-0 circuit-1"
+  class="circuit-0"
 />
 `;

src/components/Hr/index.js → src/components/Hr/index.ts

@@ -13,6 +13,6 @@
  * limitations under the License.
  */
 
-import Hr from './Hr';
+import { Hr } from './Hr';
 
 export default Hr;