From 9e6cb4787320a702caf7ecf1b13ee74f26174aee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A1n=20Hamara?= Date: Tue, 3 May 2022 16:34:39 +0200 Subject: [PATCH 1/8] feat: add Divider component to Wave --- src/components/Divider/Divider.spec.tsx | 17 ++++ src/components/Divider/Divider.tsx | 80 +++++++++++++++++ src/components/Divider/docs/Divider.mdx | 88 +++++++++++++++++++ .../Divider/docs/WrappedDivider.tsx | 37 ++++++++ src/components/index.ts | 1 + 5 files changed, 223 insertions(+) create mode 100644 src/components/Divider/Divider.spec.tsx create mode 100644 src/components/Divider/Divider.tsx create mode 100644 src/components/Divider/docs/Divider.mdx create mode 100644 src/components/Divider/docs/WrappedDivider.tsx diff --git a/src/components/Divider/Divider.spec.tsx b/src/components/Divider/Divider.spec.tsx new file mode 100644 index 000000000..c3c9f8506 --- /dev/null +++ b/src/components/Divider/Divider.spec.tsx @@ -0,0 +1,17 @@ +import { render, screen } from '@testing-library/react'; +import * as React from 'react'; +import { Divider } from './Divider'; + +describe('Divider', () => { + it('renders horizontal divider by default when not passing any props', () => { + render(); + expect(screen.getByTestId('horizontal-divider')).toBeInTheDocument(); + expect(screen.queryByTestId('vertical-divider')).not.toBeInTheDocument(); + }); + + it('renders vertical divider when passing vertical prop', () => { + render(); + expect(screen.getByTestId('vertical-divider')).toBeInTheDocument(); + expect(screen.queryByTestId('horizontal-divider')).not.toBeInTheDocument(); + }); +}); diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx new file mode 100644 index 000000000..42d2f17ab --- /dev/null +++ b/src/components/Divider/Divider.tsx @@ -0,0 +1,80 @@ +import React from 'react'; +import styled, { StyledComponent } from 'styled-components'; +import { compose, space, SpaceProps } from 'styled-system'; +import { theme } from '../../essentials/theme'; +import { get } from '../../utils/themeGet'; + +type DividerOffset = number | string; + +interface DividerProps extends SpaceProps { + /** + * Set the direction of the divider to vertical + */ + vertical?: boolean; + /** + * Set offset / margin of the divider from the surrounding content + */ + offset?: DividerOffset; +} + +const HorizontalLine: StyledComponent<'div', typeof theme, DividerProps, 'theme'> = styled.div.attrs({ theme })< + DividerProps +>` + width: 100%; + margin: 0 auto; + border: 0; + border-top: 0.06rem solid ${get('semanticColors.border.primary')}; + + ${compose(space)} +`; + +const VerticalLine: StyledComponent<'div', typeof theme, DividerProps, 'theme'> = styled.div.attrs({ theme })< + DividerProps +>` + display: inline-block; + width: 0.06rem; + margin: 0 auto; + border: 0; + border-left: 0.06rem solid ${get('semanticColors.border.primary')}; + + ${compose(space)} +`; + +/** + * ** Primary UI element for visually separating content ** + * + * Renders a divider UI component: horizontal or vertical line that visually separates two pieces of data, content or UI immediately next to it. + * + * Horizontal divider will take up full available width, vertical divider will take up full available height. + * + * _Divider_ renders a horizontal divider by default. Set **vertical** prop to __true__ to change divider orientation. + * + * + * --- + * + *
+ * + * #### Divider vs. Border + * + * The default color of _Divider_ is $border.primary (#C6CDD4) ⬤, however... + * + * ** Divider is NOT a border, and should not be used as such. Please do not use this component as a border for elements. ** + * + * Divider is naturally expected to have a certain offset from the elements it is 'dividing' or separating. + * + * --- + * + * #### Style Props + * + * The Divider has following design props: + * - **offset** - set the divider offset from the content it is separating (uses _mx_, _my_ styled system props) + * + */ +const Divider = ({ vertical = false, offset = 0 }: DividerProps): React.ReactElement => + vertical ? ( + + ) : ( + + ); + +export { Divider, DividerProps, DividerOffset }; diff --git a/src/components/Divider/docs/Divider.mdx b/src/components/Divider/docs/Divider.mdx new file mode 100644 index 000000000..9f7e74330 --- /dev/null +++ b/src/components/Divider/docs/Divider.mdx @@ -0,0 +1,88 @@ +--- +name: Divider +menu: Components +route: /components/divider +--- + +import { Playground } from 'docz'; +import { ItemWrapper } from '../../../../docs/components/ItemWrapper.ts'; +import { Divider } from '../Divider.tsx'; +import { WrappedHorizontalDivider, WrappedVerticalDivider } from './WrappedDivider.tsx'; + +# Divider + +**Primary UI element for visually separating content** + +Renders a divider UI component: horizontal or vertical line that visually separates two pieces of data, content or UI. +
+
+ +### Default Behaviour +Horizontal divider takes up full available width, vertical divider takes up full available height. + +Horizontal divider is rendered by default. Set **vertical** prop to __true__ to change divider orientation. +
+
+ +### Divider vs Border + +The default color of Divider is **$border.primary** (#C6CDD4), however... + +**Divider is NOT a border, and should not be used as such. Please do not use this component as a border for elements.** + +Divider is naturally expected to have a certain offset from the elements it is 'dividing' or separating. +
+
+ +### Style Props + +The Divider has following design props: +- **offset** - set the divider offset from the content it is separating (uses _mx_, _my_ styled system props) + +
+ +## Usage + +### Horizontal (without offset) + + + + + +```jsx + +``` + +
+ +### Horizontal (with offset) + + + + + +```jsx + +``` + +
+ +### Vertical (without offset) + + + + + +```jsx + +``` + +### Vertical (with offset) + + + + + +```jsx + +``` diff --git a/src/components/Divider/docs/WrappedDivider.tsx b/src/components/Divider/docs/WrappedDivider.tsx new file mode 100644 index 000000000..a7bc3f2e1 --- /dev/null +++ b/src/components/Divider/docs/WrappedDivider.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Divider } from '../Divider'; +import type DividerOffset from '../Divider'; + +const DividerWrapper = styled.div` + height: auto; + display: flex; + width: 100%; +`; + +const DividerColumnWrapper = styled(DividerWrapper)` + flex-direction: column; +`; + +const DividerSideElement = styled.div` + height: auto; + padding: 4; +`; + +const WrappedHorizontalDivider = (offset: DividerOffset): React.ReactNode => ( + + Element 1 + + Element 2 + +); + +const WrappedVerticalDivider = (offset: DividerOffset): React.ReactNode => ( + + Element 1 + + Element 2 + +); + +export { WrappedHorizontalDivider, WrappedVerticalDivider }; diff --git a/src/components/index.ts b/src/components/index.ts index 72e2e515b..e8fc8425b 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -21,6 +21,7 @@ export { Tag, TagProps } from './Tag/Tag'; export { InlineSpinner, InlineSpinnerProps } from './InlineSpinner/InlineSpinner'; export { TabBar, TabBarWithLink as TabBarProps } from './TabBar/TabBar'; export { DatePicker, DateRangePicker, DateRangePickerProps, DatePickerProps } from './Datepicker'; +export { Divider, DividerProps } from './Divider/Divider'; export { Tooltip, TooltipProps } from './Tooltip/Tooltip'; export { Toggle, ToggleProps } from './Toggle/Toggle'; export { Box, BoxProps } from './Box/Box'; From c134c807b97b7375739bd80b985ad81f874c4de9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A1n=20Hamara?= Date: Thu, 5 May 2022 14:29:49 +0200 Subject: [PATCH 2/8] feat(divider): add default offset to the divider add additional tests to check the default offset --- src/components/Divider/Divider.spec.tsx | 18 ++++++ src/components/Divider/Divider.tsx | 46 +++------------ src/components/Divider/docs/Divider.mdx | 57 ++++++++++++------- .../Divider/docs/WrappedDivider.tsx | 14 ++++- 4 files changed, 73 insertions(+), 62 deletions(-) diff --git a/src/components/Divider/Divider.spec.tsx b/src/components/Divider/Divider.spec.tsx index c3c9f8506..4ec7e3a7e 100644 --- a/src/components/Divider/Divider.spec.tsx +++ b/src/components/Divider/Divider.spec.tsx @@ -14,4 +14,22 @@ describe('Divider', () => { expect(screen.getByTestId('vertical-divider')).toBeInTheDocument(); expect(screen.queryByTestId('horizontal-divider')).not.toBeInTheDocument(); }); + + it('renders horizontal divider with 1rem top and bottom offset by default', () => { + render(); + const dividerInstance = screen.getByTestId('horizontal-divider'); + const dividerStyle = window.getComputedStyle(dividerInstance); + + expect(dividerStyle.marginTop).toBe('1rem'); + expect(dividerStyle.marginBottom).toBe('1rem'); + }); + + it('renders vertical divider with 1rem left and right offset by default', () => { + render(); + const dividerInstance = screen.getByTestId('vertical-divider'); + const dividerStyle = window.getComputedStyle(dividerInstance); + + expect(dividerStyle.marginLeft).toBe('1rem'); + expect(dividerStyle.marginRight).toBe('1rem'); + }); }); diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx index 42d2f17ab..f47ded65e 100644 --- a/src/components/Divider/Divider.tsx +++ b/src/components/Divider/Divider.tsx @@ -18,59 +18,31 @@ interface DividerProps extends SpaceProps { } const HorizontalLine: StyledComponent<'div', typeof theme, DividerProps, 'theme'> = styled.div.attrs({ theme })< - DividerProps + Pick >` width: 100%; - margin: 0 auto; + margin-left: auto; + margin-right: auto; border: 0; - border-top: 0.06rem solid ${get('semanticColors.border.primary')}; + border-top: 1px solid ${get('semanticColors.border.primary')}; ${compose(space)} `; const VerticalLine: StyledComponent<'div', typeof theme, DividerProps, 'theme'> = styled.div.attrs({ theme })< - DividerProps + Pick >` display: inline-block; width: 0.06rem; - margin: 0 auto; + margin-top: 0; + margin-bottom: 0; border: 0; - border-left: 0.06rem solid ${get('semanticColors.border.primary')}; + border-left: 1px solid ${get('semanticColors.border.primary')}; ${compose(space)} `; -/** - * ** Primary UI element for visually separating content ** - * - * Renders a divider UI component: horizontal or vertical line that visually separates two pieces of data, content or UI immediately next to it. - * - * Horizontal divider will take up full available width, vertical divider will take up full available height. - * - * _Divider_ renders a horizontal divider by default. Set **vertical** prop to __true__ to change divider orientation. - * - * - * --- - * - *
- * - * #### Divider vs. Border - * - * The default color of _Divider_ is $border.primary (#C6CDD4) ⬤, however... - * - * ** Divider is NOT a border, and should not be used as such. Please do not use this component as a border for elements. ** - * - * Divider is naturally expected to have a certain offset from the elements it is 'dividing' or separating. - * - * --- - * - * #### Style Props - * - * The Divider has following design props: - * - **offset** - set the divider offset from the content it is separating (uses _mx_, _my_ styled system props) - * - */ -const Divider = ({ vertical = false, offset = 0 }: DividerProps): React.ReactElement => +const Divider: React.FC = ({ vertical = false, offset = '1rem' }: DividerProps) => vertical ? ( ) : ( diff --git a/src/components/Divider/docs/Divider.mdx b/src/components/Divider/docs/Divider.mdx index 9f7e74330..76c1be9d9 100644 --- a/src/components/Divider/docs/Divider.mdx +++ b/src/components/Divider/docs/Divider.mdx @@ -7,7 +7,7 @@ route: /components/divider import { Playground } from 'docz'; import { ItemWrapper } from '../../../../docs/components/ItemWrapper.ts'; import { Divider } from '../Divider.tsx'; -import { WrappedHorizontalDivider, WrappedVerticalDivider } from './WrappedDivider.tsx'; +import { WrappedHorizontalDivider, WrappedVerticalDivider, SectionPlaceholder } from './WrappedDivider.tsx'; # Divider @@ -15,74 +15,87 @@ import { WrappedHorizontalDivider, WrappedVerticalDivider } from './WrappedDivid Renders a divider UI component: horizontal or vertical line that visually separates two pieces of data, content or UI.
-
### Default Behaviour Horizontal divider takes up full available width, vertical divider takes up full available height. Horizontal divider is rendered by default. Set **vertical** prop to __true__ to change divider orientation.
-
### Divider vs Border - The default color of Divider is **$border.primary** (#C6CDD4), however... **Divider is NOT a border, and should not be used as such. Please do not use this component as a border for elements.** Divider is naturally expected to have a certain offset from the elements it is 'dividing' or separating.
-
### Style Props - The Divider has following design props: - **offset** - set the divider offset from the content it is separating (uses _mx_, _my_ styled system props) - -
+
+
## Usage -### Horizontal (without offset) +### Horizontal (with default offset) - + ```jsx ``` +
-
- -### Horizontal (with offset) +### Horizontal (without offset) - + ```jsx - + ``` +
-
- -### Vertical (without offset) +### Vertical (with default offset) - + ```jsx ``` +
-### Vertical (with offset) +### Vertical (without offset) - + ```jsx - + ``` +
+ +# Playground + + +
Section 1
+ +
Section 2
+ + + + {/* We need the row flow to see vertical divider */} +
+ Section 1 + + Section 2 +
+ + diff --git a/src/components/Divider/docs/WrappedDivider.tsx b/src/components/Divider/docs/WrappedDivider.tsx index a7bc3f2e1..43b64db90 100644 --- a/src/components/Divider/docs/WrappedDivider.tsx +++ b/src/components/Divider/docs/WrappedDivider.tsx @@ -18,7 +18,15 @@ const DividerSideElement = styled.div` padding: 4; `; -const WrappedHorizontalDivider = (offset: DividerOffset): React.ReactNode => ( +const SectionPlaceholder = styled.div` + flex: 1; + height: '200px'; + border: 1px black solid; + text-align: center; + padding: 20px; +`; + +const WrappedHorizontalDivider = (offset: DividerOffset): React.ReactElement => ( Element 1 @@ -26,7 +34,7 @@ const WrappedHorizontalDivider = (offset: DividerOffset): React.ReactNode => ( ); -const WrappedVerticalDivider = (offset: DividerOffset): React.ReactNode => ( +const WrappedVerticalDivider = (offset: DividerOffset): React.ReactElement => ( Element 1 @@ -34,4 +42,4 @@ const WrappedVerticalDivider = (offset: DividerOffset): React.ReactNode => ( ); -export { WrappedHorizontalDivider, WrappedVerticalDivider }; +export { WrappedHorizontalDivider, WrappedVerticalDivider, SectionPlaceholder }; From 278eb8ac13a2cdb53fa71acae49e192465c9adc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A1n=20Hamara?= Date: Thu, 5 May 2022 14:43:39 +0200 Subject: [PATCH 3/8] fix(divider): allow usage of 1px in .stylelintrc Needed to change stylelintrc config to allow usage of px unit for divider --- .stylelintrc | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index b956bbeb9..9db63eb9b 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -9,13 +9,12 @@ ], "rules": { "declaration-empty-line-before": null, - "unit-whitelist": [ - "rem", - "deg", - "fr", - "ms", - "%" - ], + "declaration-property-unit-whitelist": { + "/.*/": ["rem", "deg", "fr", "ms", "%", "px"] + }, + "declaration-property-value-blacklist": { + "/.*/": ["(\\d+[1]+px|[^1]+px)"] + }, "value-keyword-case": ["lower", { "ignoreKeywords": ["dummyValue"] }] } } From ad7448b1fadc183f9ab1f4bf588e8e5613b0b113 Mon Sep 17 00:00:00 2001 From: Jan Hamara Date: Fri, 6 May 2022 15:20:19 +0200 Subject: [PATCH 4/8] Update src/components/Divider/Divider.spec.tsx Co-authored-by: martimalek <46452321+martimalek@users.noreply.github.com> --- src/components/Divider/Divider.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Divider/Divider.spec.tsx b/src/components/Divider/Divider.spec.tsx index 4ec7e3a7e..70523eb25 100644 --- a/src/components/Divider/Divider.spec.tsx +++ b/src/components/Divider/Divider.spec.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { Divider } from './Divider'; describe('Divider', () => { - it('renders horizontal divider by default when not passing any props', () => { + it('renders a horizontal divider by default when not passing any props', () => { render(); expect(screen.getByTestId('horizontal-divider')).toBeInTheDocument(); expect(screen.queryByTestId('vertical-divider')).not.toBeInTheDocument(); From f0969f4703d7bf1a12462f2dce0471449c594dde Mon Sep 17 00:00:00 2001 From: Jan Hamara Date: Fri, 6 May 2022 15:20:28 +0200 Subject: [PATCH 5/8] Update src/components/Divider/Divider.spec.tsx Co-authored-by: martimalek <46452321+martimalek@users.noreply.github.com> --- src/components/Divider/Divider.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Divider/Divider.spec.tsx b/src/components/Divider/Divider.spec.tsx index 70523eb25..303e147bc 100644 --- a/src/components/Divider/Divider.spec.tsx +++ b/src/components/Divider/Divider.spec.tsx @@ -9,7 +9,7 @@ describe('Divider', () => { expect(screen.queryByTestId('vertical-divider')).not.toBeInTheDocument(); }); - it('renders vertical divider when passing vertical prop', () => { + it('renders a vertical divider when passing vertical prop', () => { render(); expect(screen.getByTestId('vertical-divider')).toBeInTheDocument(); expect(screen.queryByTestId('horizontal-divider')).not.toBeInTheDocument(); From 980513fef627979645b1d784b21dbe9b9e97c5d0 Mon Sep 17 00:00:00 2001 From: Jan Hamara Date: Fri, 6 May 2022 15:22:58 +0200 Subject: [PATCH 6/8] Update src/components/Divider/docs/Divider.mdx Co-authored-by: martimalek <46452321+martimalek@users.noreply.github.com> --- src/components/Divider/docs/Divider.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Divider/docs/Divider.mdx b/src/components/Divider/docs/Divider.mdx index 76c1be9d9..3760d4bd3 100644 --- a/src/components/Divider/docs/Divider.mdx +++ b/src/components/Divider/docs/Divider.mdx @@ -17,7 +17,7 @@ Renders a divider UI component: horizontal or vertical line that visually separa
### Default Behaviour -Horizontal divider takes up full available width, vertical divider takes up full available height. +The horizontal divider takes up the full available width and the vertical divider takes up the full available height. Horizontal divider is rendered by default. Set **vertical** prop to __true__ to change divider orientation.
From 3ac4c76a680c579fead973ad6a59bcdae638f36d Mon Sep 17 00:00:00 2001 From: Jan Hamara Date: Fri, 6 May 2022 15:23:11 +0200 Subject: [PATCH 7/8] Update src/components/Divider/docs/Divider.mdx Co-authored-by: martimalek <46452321+martimalek@users.noreply.github.com> --- src/components/Divider/docs/Divider.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Divider/docs/Divider.mdx b/src/components/Divider/docs/Divider.mdx index 3760d4bd3..eafefe410 100644 --- a/src/components/Divider/docs/Divider.mdx +++ b/src/components/Divider/docs/Divider.mdx @@ -19,7 +19,7 @@ Renders a divider UI component: horizontal or vertical line that visually separa ### Default Behaviour The horizontal divider takes up the full available width and the vertical divider takes up the full available height. -Horizontal divider is rendered by default. Set **vertical** prop to __true__ to change divider orientation. +The horizontal divider is rendered by default. Set **vertical** prop to `true` to change the divider orientation.
### Divider vs Border From 6324d13d7737b37f1541fd5a2a0c7da936decd4f Mon Sep 17 00:00:00 2001 From: Jan Hamara Date: Fri, 6 May 2022 15:23:25 +0200 Subject: [PATCH 8/8] Update src/components/Divider/docs/Divider.mdx Co-authored-by: martimalek <46452321+martimalek@users.noreply.github.com> --- src/components/Divider/docs/Divider.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Divider/docs/Divider.mdx b/src/components/Divider/docs/Divider.mdx index eafefe410..413ffbff4 100644 --- a/src/components/Divider/docs/Divider.mdx +++ b/src/components/Divider/docs/Divider.mdx @@ -31,7 +31,7 @@ Divider is naturally expected to have a certain offset from the elements it is '
### Style Props -The Divider has following design props: +The Divider has the following design props: - **offset** - set the divider offset from the content it is separating (uses _mx_, _my_ styled system props)