From eb657fca18824ecc2ea8756cef1d06645115ce30 Mon Sep 17 00:00:00 2001 From: Chancellor Clark Date: Thu, 20 Aug 2020 16:26:32 -0500 Subject: [PATCH] feat(component): add HR component (#438) --- .../src/components/Typography/Typography.tsx | 9 +++++-- .../Typography/__snapshots__/spec.tsx.snap | 11 ++++++++ .../src/components/Typography/index.ts | 5 ++-- .../src/components/Typography/private.ts | 1 + .../src/components/Typography/spec.tsx | 27 ++++++++++++++++++- .../src/components/Typography/styled.tsx | 11 +++++++- .../src/components/Typography/types.ts | 6 +++++ .../docs/PropTables/TypographyPropTable.tsx | 11 ++++++++ .../docs/pages/Typography/TypographyPage.tsx | 16 +++++++++-- 9 files changed, 89 insertions(+), 8 deletions(-) diff --git a/packages/big-design/src/components/Typography/Typography.tsx b/packages/big-design/src/components/Typography/Typography.tsx index c06fdb977..6d6707a7f 100644 --- a/packages/big-design/src/components/Typography/Typography.tsx +++ b/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(['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 = memo(({ className, style, ...props }) => ); export const Small: React.FC = memo(({ className, style, ...props }) => ); +export const HR: React.FC = memo(({ className, style, ...props }) => ); + export const H0: React.FC = memo(({ className, style, 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'; diff --git a/packages/big-design/src/components/Typography/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Typography/__snapshots__/spec.tsx.snap index 26628753c..dc778a53f 100644 --- a/packages/big-design/src/components/Typography/__snapshots__/spec.tsx.snap +++ b/packages/big-design/src/components/Typography/__snapshots__/spec.tsx.snap @@ -84,6 +84,17 @@ exports[`render H4 1`] = ` `; +exports[`render HR 1`] = ` +.c0 { + border: 0; + border-bottom: 1px solid #D9DCE9; +} + +
+`; + exports[`render Small 1`] = ` .c0 { color: #313440; diff --git a/packages/big-design/src/components/Typography/index.ts b/packages/big-design/src/components/Typography/index.ts index 3ec68175c..5c062bab2 100644 --- a/packages/big-design/src/components/Typography/index.ts +++ b/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; diff --git a/packages/big-design/src/components/Typography/private.ts b/packages/big-design/src/components/Typography/private.ts index 85cfb8f9a..a36aefa77 100644 --- a/packages/big-design/src/components/Typography/private.ts +++ b/packages/big-design/src/components/Typography/private.ts @@ -1,6 +1,7 @@ export { StyleableText, StyleableSmall, + StyleableHR, StyleableH0, StyleableH1, StyleableH2, diff --git a/packages/big-design/src/components/Typography/spec.tsx b/packages/big-design/src/components/Typography/spec.tsx index 0b60e26e0..380194930 100644 --- a/packages/big-design/src/components/Typography/spec.tsx +++ b/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(Test); @@ -49,6 +49,12 @@ test('render Text', () => { expect(container.firstChild).toMatchSnapshot(); }); +test('render HR', () => { + const { container } = render(
); + + expect(container.firstChild).toMatchSnapshot(); +}); + test('render Text with ellipsis', () => { const { container } = render(Test with ellipsis); @@ -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(
); + + 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(
); + + expect(container.firstChild).toHaveStyle(`border-bottom: 1px solid ${theme.colors.primary}`); +}); + +test('HR can change its margins given a margin prop', () => { + const { container } = render(
); + + expect(container.firstChild).toHaveStyle(`margin-top: ${theme.spacing.medium}`); +}); + test('Headings can change their tag', () => { const { container } = render(

Test

); diff --git a/packages/big-design/src/components/Typography/styled.tsx b/packages/big-design/src/components/Typography/styled.tsx index b79ac5bba..a506cf66c 100644 --- a/packages/big-design/src/components/Typography/styled.tsx +++ b/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,6 +132,14 @@ export const StyledSmall = styled.p` ${withMargins()}; `; +export const StyledHR = styled.hr` + ${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 }; @@ -139,3 +147,4 @@ StyledH3.defaultProps = { theme: defaultTheme }; StyledH4.defaultProps = { theme: defaultTheme }; StyledText.defaultProps = { theme: defaultTheme }; StyledSmall.defaultProps = { theme: defaultTheme }; +StyledHR.defaultProps = { theme: defaultTheme }; diff --git a/packages/big-design/src/components/Typography/types.ts b/packages/big-design/src/components/Typography/types.ts index c7428c49a..120129c32 100644 --- a/packages/big-design/src/components/Typography/types.ts +++ b/packages/big-design/src/components/Typography/types.ts @@ -55,3 +55,9 @@ export type HeadingProps = React.HTMLAttributes & TypographyProps & { as?: HeadingTag; }; + +export type HRProps = React.HTMLAttributes & + MarginProps & { + color?: keyof Colors; + themne?: ThemeInterface; + }; diff --git a/packages/docs/PropTables/TypographyPropTable.tsx b/packages/docs/PropTables/TypographyPropTable.tsx index 9b0a77ea0..522d9ff22 100644 --- a/packages/docs/PropTables/TypographyPropTable.tsx +++ b/packages/docs/PropTables/TypographyPropTable.tsx @@ -86,6 +86,13 @@ const textProps: Prop[] = [ }, ]; +const hrProps: Prop[] = [ + { + ...typographyProps[0], + defaultValue: 'secondary30', + }, +]; + export const TypographyPropTable: React.FC = (props) => ( ); @@ -97,3 +104,7 @@ export const HeadingPropTable: React.FC = (props) => ( export const TextPropTable: React.FC = (props) => ( ); + +export const HRPropTable: React.FC = (props) => ( + +); diff --git a/packages/docs/pages/Typography/TypographyPage.tsx b/packages/docs/pages/Typography/TypographyPage.tsx index c4f6608c8..4e2b77fcf 100644 --- a/packages/docs/pages/Typography/TypographyPage.tsx +++ b/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 = () => ( +

HR

+ + + {/* jsx-to-string:start */} +
+ {/* jsx-to-string:end */} + + + +

Inherited Props

+ +

Examples

Color