feat(component): add HR component (#438)

packages/big-design/src/components/Typography/Typography.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 
-import { StyledH0, StyledH1, StyledH2, StyledH3, StyledH4, StyledSmall, StyledText } from './styled';
-import { HeadingProps, HeadingTag, TextProps } from './types';
+import { StyledH0, StyledH1, StyledH2, StyledH3, StyledH4, StyledHR, StyledSmall, StyledText } from './styled';
+import { HeadingProps, HeadingTag, HRProps, TextProps } from './types';
 
 const validHeadingTags = new Set<HeadingTag>(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
 
@@ -13,11 +13,14 @@ export const StyleableH1 = StyledH1;
 export const StyleableH2 = StyledH2;
 export const StyleableH3 = StyledH3;
 export const StyleableH4 = StyledH4;
+export const StyleableHR = StyledHR;
 
 // Public
 export const Text: React.FC<TextProps> = memo(({ className, style, ...props }) => <StyleableText {...props} />);
 export const Small: React.FC<TextProps> = memo(({ className, style, ...props }) => <StyleableSmall {...props} />);
 
+export const HR: React.FC<HRProps> = memo(({ className, style, ...props }) => <StyleableHR {...props} />);
+
 export const H0: React.FC<HeadingProps> = memo(({ className, style, as, ...props }) => (
   <StyleableH0 as={getHeadingTag('h1', as)} {...props} />
 ));
@@ -45,6 +48,8 @@ const getHeadingTag = (defaultTag: HeadingTag, tag?: HeadingTag): HeadingTag =>
 Text.displayName = 'Text';
 Small.displayName = 'Small';
 
+HR.displayName = 'HR';
+
 H0.displayName = 'H0';
 H1.displayName = 'H1';
 H2.displayName = 'H2';

packages/big-design/src/components/Typography/__snapshots__/spec.tsx.snap

@@ -84,6 +84,17 @@ exports[`render H4 1`] = `
 </h4>
 `;
 
+exports[`render HR 1`] = `
+.c0 {
+  border: 0;
+  border-bottom: 1px solid #D9DCE9;
+}
+
+<hr
+  class="c0"
+/>
+`;
+
 exports[`render Small 1`] = `
 .c0 {
   color: #313440;

packages/big-design/src/components/Typography/index.ts

@@ -1,6 +1,7 @@
-import { HeadingProps as _HeadingProps, TextProps as _TextProps } from './types';
+import { HeadingProps as _HeadingProps, HRProps as _HRProps, TextProps as _TextProps } from './types';
 
-export { Text, Small, H0, H1, H2, H3, H4 } from './Typography';
+export { Text, Small, HR, H0, H1, H2, H3, H4 } from './Typography';
 
 export type TextProps = _TextProps;
 export type HeadingProps = _HeadingProps;
+export type HRProps = _HRProps;

packages/big-design/src/components/Typography/private.ts

@@ -1,6 +1,7 @@
 export {
   StyleableText,
   StyleableSmall,
+  StyleableHR,
   StyleableH0,
   StyleableH1,
   StyleableH2,

packages/big-design/src/components/Typography/spec.tsx

@@ -5,7 +5,7 @@ import { render } from '@test/utils';
 
 import 'jest-styled-components';
 
-import { H0, H1, H2, H3, H4, Small, Text } from './Typography';
+import { H0, H1, H2, H3, H4, HR, Small, Text } from './Typography';
 
 test('render H0', () => {
   const { container } = render(<H0>Test</H0>);
@@ -49,6 +49,12 @@ test('render Text', () => {
   expect(container.firstChild).toMatchSnapshot();
 });
 
+test('render HR', () => {
+  const { container } = render(<HR />);
+
+  expect(container.firstChild).toMatchSnapshot();
+});
+
 test('render Text with ellipsis', () => {
   const { container } = render(<Text ellipsis={true}>Test with ellipsis</Text>);
 
@@ -132,6 +138,13 @@ test('Text - does not forward styles', () => {
   expect(container.firstChild).not.toHaveStyle('background: red');
 });
 
+test('HR - does not forward styles', () => {
+  const { container } = render(<HR className="test" style={{ background: 'red' }} />);
+
+  expect(container.getElementsByClassName('test').length).toBe(0);
+  expect(container.firstChild).not.toHaveStyle('background: red');
+});
+
 test('All typography components allow changing their color given a color prop', () => {
   const { container } = render(
     <>
@@ -149,6 +162,18 @@ test('All typography components allow changing their color given a color prop',
   });
 });
 
+test('HR allows changing its color given a color prop', () => {
+  const { container } = render(<HR color="primary" />);
+
+  expect(container.firstChild).toHaveStyle(`border-bottom: 1px solid ${theme.colors.primary}`);
+});
+
+test('HR can change its margins given a margin prop', () => {
+  const { container } = render(<HR marginTop="medium" />);
+
+  expect(container.firstChild).toHaveStyle(`margin-top: ${theme.spacing.medium}`);
+});
+
 test('Headings can change their tag', () => {
   const { container } = render(<H2 as="h1">Test</H2>);
 

packages/big-design/src/components/Typography/styled.tsx

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 
 import { withMargins } from '../../mixins';
 
-import { HeadingProps, TextProps, TypographyProps } from './types';
+import { HeadingProps, HRProps, TextProps, TypographyProps } from './types';
 
 const commonTextStyles = (props: TypographyProps) => css`
   color: ${({ theme }) => (props.color ? theme.colors[props.color] : theme.colors.secondary70)};
@@ -132,10 +132,19 @@ export const StyledSmall = styled.p<TextProps>`
   ${withMargins()};
 `;
 
+export const StyledHR = styled.hr<HRProps>`
+  ${withMargins()};
+
+  border: 0;
+  border-bottom: 1px solid
+    ${({ color, theme }) => (color && color in theme.colors ? theme.colors[color] : theme.colors.secondary30)};
+`;
+
 StyledH0.defaultProps = { theme: defaultTheme };
 StyledH1.defaultProps = { theme: defaultTheme };
 StyledH2.defaultProps = { theme: defaultTheme };
 StyledH3.defaultProps = { theme: defaultTheme };
 StyledH4.defaultProps = { theme: defaultTheme };
 StyledText.defaultProps = { theme: defaultTheme };
 StyledSmall.defaultProps = { theme: defaultTheme };
+StyledHR.defaultProps = { theme: defaultTheme };

packages/big-design/src/components/Typography/types.ts

@@ -55,3 +55,9 @@ export type HeadingProps = React.HTMLAttributes<HTMLHeadingElement> &
   TypographyProps & {
     as?: HeadingTag;
   };
+
+export type HRProps = React.HTMLAttributes<HTMLHRElement> &
+  MarginProps & {
+    color?: keyof Colors;
+    themne?: ThemeInterface;
+  };

packages/docs/PropTables/TypographyPropTable.tsx

@@ -86,6 +86,13 @@ const textProps: Prop[] = [
   },
 ];
 
+const hrProps: Prop[] = [
+  {
+    ...typographyProps[0],
+    defaultValue: 'secondary30',
+  },
+];
+
 export const TypographyPropTable: React.FC<PropTableWrapper> = (props) => (
   <PropTable title="Typography" propList={typographyProps} {...props} />
 );
@@ -97,3 +104,7 @@ export const HeadingPropTable: React.FC<PropTableWrapper> = (props) => (
 export const TextPropTable: React.FC<PropTableWrapper> = (props) => (
   <PropTable title="Text" propList={textProps} {...props} />
 );
+
+export const HRPropTable: React.FC<PropTableWrapper> = (props) => (
+  <PropTable title="HR" propList={hrProps} {...props} />
+);

packages/docs/pages/Typography/TypographyPage.tsx

@@ -1,8 +1,8 @@
-import { Box, H0, H1, H2, H3, H4, Link, Small, Text } from '@bigcommerce/big-design';
+import { Box, H0, H1, H2, H3, H4, HR, Link, Small, Text } from '@bigcommerce/big-design';
 import React from 'react';
 
 import { Code, CodePreview, NextLink } from '../../components';
-import { HeadingPropTable, MarginPropTable, TextPropTable, TypographyPropTable } from '../../PropTables';
+import { HeadingPropTable, HRPropTable, MarginPropTable, TextPropTable, TypographyPropTable } from '../../PropTables';
 
 const TypographyPage = () => (
   <>
@@ -48,6 +48,18 @@ const TypographyPage = () => (
     <TypographyPropTable collapsible />
     <MarginPropTable collapsible />
 
+    <H1>HR</H1>
+
+    <CodePreview>
+      {/* jsx-to-string:start */}
+      <HR marginVertical="large" />
+      {/* jsx-to-string:end */}
+    </CodePreview>
+
+    <HRPropTable />
+    <H2>Inherited Props</H2>
+    <MarginPropTable collapsible />
+
     <H1>Examples</H1>
 
     <H2>Color</H2>