From 0285cd63852fabc6787baf82fad42523c11008b7 Mon Sep 17 00:00:00 2001 From: Vio Date: Mon, 17 Aug 2020 12:34:26 +0200 Subject: [PATCH 1/6] feat(ui): FlexStart component --- packages/ui/src/constants.js | 23 ++ .../flex-stack.stories.storyshot | 200 ++++++++++++++++++ .../__snapshots__/stack.stories.storyshot | 199 +++++++++++++++++ .../ui/src/layout/flex-stack/flex-stack.jsx | 46 ++++ .../layout/flex-stack/flex-stack.module.css | 41 ++++ .../layout/flex-stack/flex-stack.stories.jsx | 50 +++++ packages/ui/src/layout/flex-stack/index.js | 1 + packages/ui/src/layout/index.js | 1 + packages/ui/src/layout/stack/stack.jsx | 25 +-- 9 files changed, 562 insertions(+), 24 deletions(-) create mode 100644 packages/ui/src/constants.js create mode 100644 packages/ui/src/layout/flex-stack/__snapshots__/flex-stack.stories.storyshot create mode 100644 packages/ui/src/layout/flex-stack/__snapshots__/stack.stories.storyshot create mode 100644 packages/ui/src/layout/flex-stack/flex-stack.jsx create mode 100644 packages/ui/src/layout/flex-stack/flex-stack.module.css create mode 100644 packages/ui/src/layout/flex-stack/flex-stack.stories.jsx create mode 100644 packages/ui/src/layout/flex-stack/index.js diff --git a/packages/ui/src/constants.js b/packages/ui/src/constants.js new file mode 100644 index 0000000000..31af8dc811 --- /dev/null +++ b/packages/ui/src/constants.js @@ -0,0 +1,23 @@ +export const NO_SPACE = 'no-space'; +export const SPACE_XXXSMALL = 'xxxsmall'; +export const SPACE_XXSMALL = 'xxsmall'; +export const SPACE_XSMALL = 'xsmall'; +export const SPACE_SMALL = 'small'; +export const SPACE_MEDIUM = 'medium'; +export const SPACE_LARGE = 'large'; +export const SPACE_XLARGE = 'xlarge'; +export const SPACE_XXLARGE = 'xxlarge'; +export const SPACE_XXXLARGE = 'xxxlarge'; + +export const SPACES = [ + NO_SPACE, + SPACE_XXXSMALL, + SPACE_XXSMALL, + SPACE_XSMALL, + SPACE_SMALL, + SPACE_MEDIUM, + SPACE_LARGE, + SPACE_XLARGE, + SPACE_XXLARGE, + SPACE_XXXLARGE, +]; diff --git a/packages/ui/src/layout/flex-stack/__snapshots__/flex-stack.stories.storyshot b/packages/ui/src/layout/flex-stack/__snapshots__/flex-stack.stories.storyshot new file mode 100644 index 0000000000..887339bb3f --- /dev/null +++ b/packages/ui/src/layout/flex-stack/__snapshots__/flex-stack.stories.storyshot @@ -0,0 +1,200 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Layout/FlexStack default 1`] = ` +
+ + + Lorem ipsum 1 + + + Lorem ipsum 2 + + Lorem ipsum 3 + +
+`; + +exports[`Storyshots Layout/FlexStack single item 1`] = ` +
+ + + Lorem ipsum + + +
+`; + +exports[`Storyshots Layout/FlexStack with custom wrapper 1`] = ` +
+ + + Lorem ipsum 1 + + + Lorem ipsum 2 + + +
+`; + +exports[`Storyshots Layout/FlexStack with large space 1`] = ` +
+ + + Lorem ipsum 1 + + + Lorem ipsum 2 + + + Lorem ipsum 3 + + +
+`; + +exports[`Storyshots Layout/FlexStack with nested stack 1`] = ` +
+ + + Lorem ipsum 1 + + + Lorem ipsum 2 + + + + Lorem ipsum 3.1 + + + Lorem ipsum 3.2 + + + +
+`; + +exports[`Storyshots Layout/FlexStack with null child 1`] = ` +
+ + + Lorem ipsum 1 + + +
+`; diff --git a/packages/ui/src/layout/flex-stack/__snapshots__/stack.stories.storyshot b/packages/ui/src/layout/flex-stack/__snapshots__/stack.stories.storyshot new file mode 100644 index 0000000000..a4fffe03c5 --- /dev/null +++ b/packages/ui/src/layout/flex-stack/__snapshots__/stack.stories.storyshot @@ -0,0 +1,199 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Layout/Stack default 1`] = ` +
+ + + Lorem ipsum 1 + + + Lorem ipsum 2 + + +
+`; + +exports[`Storyshots Layout/Stack single item 1`] = ` +
+ + + Lorem ipsum + + +
+`; + +exports[`Storyshots Layout/Stack with custom wrapper 1`] = ` +
+ + + Lorem ipsum 1 + + + Lorem ipsum 2 + + +
+`; + +exports[`Storyshots Layout/Stack with large space 1`] = ` +
+ + + Lorem ipsum 1 + + + Lorem ipsum 2 + + + Lorem ipsum 3 + + +
+`; + +exports[`Storyshots Layout/Stack with nested stack 1`] = ` +
+ + + Lorem ipsum 1 + + + Lorem ipsum 2 + + + + Lorem ipsum 3.1 + + + Lorem ipsum 3.2 + + + +
+`; + +exports[`Storyshots Layout/Stack with null child 1`] = ` +
+ + + Lorem ipsum 1 + + +
+`; diff --git a/packages/ui/src/layout/flex-stack/flex-stack.jsx b/packages/ui/src/layout/flex-stack/flex-stack.jsx new file mode 100644 index 0000000000..e1374f6dcb --- /dev/null +++ b/packages/ui/src/layout/flex-stack/flex-stack.jsx @@ -0,0 +1,46 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import cx from 'classnames'; + +import { NO_SPACE, SPACES } from '../../constants'; +import css from './flex-stack.module.css'; + +const renderNestedChild = (child) => { + if (child === null) { + return null; + } + + if (!child?.props) { + return
{child}
; + } + + return React.cloneElement(child, { + ...child.props, + className: cx(css.item, child.props.className), + }); +}; + +export const FlexStack = (props) => { + const { as: Component, className, space, children, ...restProps } = props; + const rootClassName = cx(className, css.root, css[`space--${space}`]); + + return ( + + {React.Children.map(children, renderNestedChild)} + + ); +}; + +FlexStack.defaultProps = { + as: 'div', + className: '', + children: null, + space: NO_SPACE, +}; + +FlexStack.propTypes = { + as: PropTypes.elementType, + className: PropTypes.string, + children: PropTypes.node, + space: PropTypes.oneOf(SPACES), +}; diff --git a/packages/ui/src/layout/flex-stack/flex-stack.module.css b/packages/ui/src/layout/flex-stack/flex-stack.module.css new file mode 100644 index 0000000000..59f47ae038 --- /dev/null +++ b/packages/ui/src/layout/flex-stack/flex-stack.module.css @@ -0,0 +1,41 @@ +.root { + display: flex; + align-items: center; + justify-content: flex-start; +} + +.space--xxxsmall > .item + .item { + margin-left: var(--space-xxxsmall); +} + +.space--xxsmall > .item + .item { + margin-left: var(--space-xxsmall); +} + +.space--xsmall > .item + .item { + margin-left: var(--space-xsmall); +} + +.space--small > .item + .item { + margin-left: var(--space-small); +} + +.space--medium > .item + .item { + margin-left: var(--space-medium); +} + +.space--large > .item + .item { + margin-left: var(--space-large); +} + +.space--xlarge > .item + .item { + margin-left: var(--space-xlarge); +} + +.space--xxlarge > .item + .item { + margin-left: var(--space-xxlarge); +} + +.space--xxxlarge > .item + .item { + margin-left: var(--space-xxxlarge); +} diff --git a/packages/ui/src/layout/flex-stack/flex-stack.stories.jsx b/packages/ui/src/layout/flex-stack/flex-stack.stories.jsx new file mode 100644 index 0000000000..a8322130e1 --- /dev/null +++ b/packages/ui/src/layout/flex-stack/flex-stack.stories.jsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; + +import { getWrapperDecorator } from '../../stories'; +import { Box } from '../../ui'; +import { FlexStack } from '.'; + +const stories = storiesOf('Layout/FlexStack', module); +stories.addDecorator(getWrapperDecorator()); + +stories.add('default', () => ( + + Lorem ipsum 1 + Lorem ipsum 2 + {null} + Lorem ipsum 3 + +)); + +stories.add('with custom wrapper', () => ( + + Lorem ipsum 1 + Lorem ipsum 2 + +)); + +stories.add('with large space', () => ( + + Lorem ipsum 1 + Lorem ipsum 2 + Lorem ipsum 3 + +)); + +stories.add('with nested stack', () => ( + + Lorem ipsum 1 + Lorem ipsum 2 + + Lorem ipsum 3.1 + Lorem ipsum 3.2 + + +)); + +stories.add('single item', () => ( + + Lorem ipsum + +)); diff --git a/packages/ui/src/layout/flex-stack/index.js b/packages/ui/src/layout/flex-stack/index.js new file mode 100644 index 0000000000..ef5cf82c08 --- /dev/null +++ b/packages/ui/src/layout/flex-stack/index.js @@ -0,0 +1 @@ +export * from './flex-stack'; diff --git a/packages/ui/src/layout/index.js b/packages/ui/src/layout/index.js index 14eff808e8..48c1c191c7 100644 --- a/packages/ui/src/layout/index.js +++ b/packages/ui/src/layout/index.js @@ -2,3 +2,4 @@ export { Footer } from './footer'; export { Header } from './header'; export { SubHeader } from './sub-header'; export { Stack } from './stack'; +export { FlexStack } from './flex-stack'; diff --git a/packages/ui/src/layout/stack/stack.jsx b/packages/ui/src/layout/stack/stack.jsx index c73db39974..7500d6c2ae 100644 --- a/packages/ui/src/layout/stack/stack.jsx +++ b/packages/ui/src/layout/stack/stack.jsx @@ -2,32 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; +import { NO_SPACE, SPACES } from '../../constants'; import css from './stack.module.css'; -const NO_SPACE = 'no-space'; -const SPACE_XXXSMALL = 'xxxsmall'; -const SPACE_XXSMALL = 'xxsmall'; -const SPACE_XSMALL = 'xsmall'; -const SPACE_SMALL = 'small'; -const SPACE_MEDIUM = 'medium'; -const SPACE_LARGE = 'large'; -const SPACE_XLARGE = 'xlarge'; -const SPACE_XXLARGE = 'xxlarge'; -const SPACE_XXXLARGE = 'xxxlarge'; - -const SPACES = [ - NO_SPACE, - SPACE_XXXSMALL, - SPACE_XXSMALL, - SPACE_XSMALL, - SPACE_SMALL, - SPACE_MEDIUM, - SPACE_LARGE, - SPACE_XLARGE, - SPACE_XXLARGE, - SPACE_XXXLARGE, -]; - export const Stack = (props) => { const { as: Component, className, space, children } = props; const rootClassName = cx(className, css.root, css[`space--${space}`]); From f67c8767289c7817b8953b582a6e1cad374b4282 Mon Sep 17 00:00:00 2001 From: Vio Date: Mon, 17 Aug 2020 12:43:14 +0200 Subject: [PATCH 2/6] fix(ui): Stack - clone and merge class name --- .../flex-stack.stories.storyshot | 25 ------------------ .../ui/src/layout/flex-stack/flex-stack.jsx | 18 ++----------- .../__snapshots__/stack.stories.storyshot | 26 +------------------ packages/ui/src/layout/stack/stack.jsx | 6 ++--- .../ui/src/layout/stack/stack.stories.jsx | 9 ++----- packages/ui/src/{utils.js => utils.jsx} | 17 ++++++++++++ 6 files changed, 24 insertions(+), 77 deletions(-) rename packages/ui/src/{utils.js => utils.jsx} (54%) diff --git a/packages/ui/src/layout/flex-stack/__snapshots__/flex-stack.stories.storyshot b/packages/ui/src/layout/flex-stack/__snapshots__/flex-stack.stories.storyshot index 887339bb3f..b415d840f8 100644 --- a/packages/ui/src/layout/flex-stack/__snapshots__/flex-stack.stories.storyshot +++ b/packages/ui/src/layout/flex-stack/__snapshots__/flex-stack.stories.storyshot @@ -173,28 +173,3 @@ exports[`Storyshots Layout/FlexStack with nested stack 1`] = ` `; - -exports[`Storyshots Layout/FlexStack with null child 1`] = ` -
- - - Lorem ipsum 1 - - -
-`; diff --git a/packages/ui/src/layout/flex-stack/flex-stack.jsx b/packages/ui/src/layout/flex-stack/flex-stack.jsx index e1374f6dcb..9b16097736 100644 --- a/packages/ui/src/layout/flex-stack/flex-stack.jsx +++ b/packages/ui/src/layout/flex-stack/flex-stack.jsx @@ -3,30 +3,16 @@ import PropTypes from 'prop-types'; import cx from 'classnames'; import { NO_SPACE, SPACES } from '../../constants'; +import { getRenderChildWithClassName } from '../../utils'; import css from './flex-stack.module.css'; -const renderNestedChild = (child) => { - if (child === null) { - return null; - } - - if (!child?.props) { - return
{child}
; - } - - return React.cloneElement(child, { - ...child.props, - className: cx(css.item, child.props.className), - }); -}; - export const FlexStack = (props) => { const { as: Component, className, space, children, ...restProps } = props; const rootClassName = cx(className, css.root, css[`space--${space}`]); return ( - {React.Children.map(children, renderNestedChild)} + {React.Children.map(children, getRenderChildWithClassName(css.item))} ); }; diff --git a/packages/ui/src/layout/stack/__snapshots__/stack.stories.storyshot b/packages/ui/src/layout/stack/__snapshots__/stack.stories.storyshot index a4fffe03c5..683299fe2a 100644 --- a/packages/ui/src/layout/stack/__snapshots__/stack.stories.storyshot +++ b/packages/ui/src/layout/stack/__snapshots__/stack.stories.storyshot @@ -27,6 +27,7 @@ exports[`Storyshots Layout/Stack default 1`] = ` > Lorem ipsum 2 + Lorem ipsum 3 `; @@ -172,28 +173,3 @@ exports[`Storyshots Layout/Stack with nested stack 1`] = ` `; - -exports[`Storyshots Layout/Stack with null child 1`] = ` -
- - - Lorem ipsum 1 - - -
-`; diff --git a/packages/ui/src/layout/stack/stack.jsx b/packages/ui/src/layout/stack/stack.jsx index 7500d6c2ae..8fc0b579e4 100644 --- a/packages/ui/src/layout/stack/stack.jsx +++ b/packages/ui/src/layout/stack/stack.jsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import cx from 'classnames'; import { NO_SPACE, SPACES } from '../../constants'; +import { getRenderChildWithClassName } from '../../utils'; import css from './stack.module.css'; export const Stack = (props) => { @@ -11,10 +12,7 @@ export const Stack = (props) => { return ( - {React.Children.map( - children, - (child) => child !== null &&
{child}
, - )} + {React.Children.map(children, getRenderChildWithClassName(css.item))} ); }; diff --git a/packages/ui/src/layout/stack/stack.stories.jsx b/packages/ui/src/layout/stack/stack.stories.jsx index 42b715a3b0..bf85c91504 100644 --- a/packages/ui/src/layout/stack/stack.stories.jsx +++ b/packages/ui/src/layout/stack/stack.stories.jsx @@ -12,6 +12,8 @@ stories.add('default', () => ( Lorem ipsum 1 Lorem ipsum 2 + {null} + Lorem ipsum 3 )); @@ -41,13 +43,6 @@ stories.add('with nested stack', () => ( )); -stories.add('with null child', () => ( - - {null} - Lorem ipsum 1 - -)); - stories.add('single item', () => ( Lorem ipsum diff --git a/packages/ui/src/utils.js b/packages/ui/src/utils.jsx similarity index 54% rename from packages/ui/src/utils.js rename to packages/ui/src/utils.jsx index cb1ef0074c..a82395cc2c 100644 --- a/packages/ui/src/utils.js +++ b/packages/ui/src/utils.jsx @@ -1,4 +1,6 @@ +import React from 'react'; import { chunk } from 'lodash'; +import cx from 'classnames'; import COLORS from './chart-colors.json'; @@ -17,3 +19,18 @@ export const getColors = (count = 2) => { return chunkColors[Math.floor(chunkColors.length / 2)]; }); }; + +export const getRenderChildWithClassName = (className) => (child) => { + if (child === null) { + return null; + } + + if (!child?.props) { + return
{child}
; + } + + return React.cloneElement(child, { + ...child.props, + className: cx(className, child.props.className), + }); +}; From 49f3da4cb71c06d5cb0d4c0772ae6e4172f3bc42 Mon Sep 17 00:00:00 2001 From: Vio Date: Mon, 17 Aug 2020 12:48:52 +0200 Subject: [PATCH 3/6] refactor(ui): Box - move to layout components folder --- .../box/__snapshots__/box.stories.storyshot | 0 packages/ui/src/{ui => layout}/box/box.jsx | 13 ++----------- packages/ui/src/{ui => layout}/box/box.module.css | 0 packages/ui/src/{ui => layout}/box/box.stories.jsx | 2 +- packages/ui/src/{ui => layout}/box/index.js | 0 .../ui/src/layout/flex-stack/flex-stack.stories.jsx | 2 +- packages/ui/src/layout/index.js | 1 + packages/ui/src/layout/stack/stack.stories.jsx | 2 +- packages/ui/src/prototypes/bundle-page.stories.jsx | 4 ++-- packages/ui/src/ui/index.js | 1 - 10 files changed, 8 insertions(+), 17 deletions(-) rename packages/ui/src/{ui => layout}/box/__snapshots__/box.stories.storyshot (100%) rename packages/ui/src/{ui => layout}/box/box.jsx (72%) rename packages/ui/src/{ui => layout}/box/box.module.css (100%) rename packages/ui/src/{ui => layout}/box/box.stories.jsx (94%) rename packages/ui/src/{ui => layout}/box/index.js (100%) diff --git a/packages/ui/src/ui/box/__snapshots__/box.stories.storyshot b/packages/ui/src/layout/box/__snapshots__/box.stories.storyshot similarity index 100% rename from packages/ui/src/ui/box/__snapshots__/box.stories.storyshot rename to packages/ui/src/layout/box/__snapshots__/box.stories.storyshot diff --git a/packages/ui/src/ui/box/box.jsx b/packages/ui/src/layout/box/box.jsx similarity index 72% rename from packages/ui/src/ui/box/box.jsx rename to packages/ui/src/layout/box/box.jsx index 2b0076feb8..ecf8f605a9 100644 --- a/packages/ui/src/ui/box/box.jsx +++ b/packages/ui/src/layout/box/box.jsx @@ -4,19 +4,10 @@ import cx from 'classnames'; import css from './box.module.css'; -export const Box = ({ - className, - as: Component, - ...props -}) => { +export const Box = ({ className, as: Component, ...props }) => { const rootClassName = cx(css.root, className); - return ( - - ); + return ; }; Box.defaultProps = { diff --git a/packages/ui/src/ui/box/box.module.css b/packages/ui/src/layout/box/box.module.css similarity index 100% rename from packages/ui/src/ui/box/box.module.css rename to packages/ui/src/layout/box/box.module.css diff --git a/packages/ui/src/ui/box/box.stories.jsx b/packages/ui/src/layout/box/box.stories.jsx similarity index 94% rename from packages/ui/src/ui/box/box.stories.jsx rename to packages/ui/src/layout/box/box.stories.jsx index 42b8a23332..dd98644171 100644 --- a/packages/ui/src/ui/box/box.stories.jsx +++ b/packages/ui/src/layout/box/box.stories.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { getWrapperDecorator } from '../../stories'; -import { Table } from '../table'; +import { Table } from '../../ui'; import { Box } from '.'; const stories = storiesOf('UI/Box', module); diff --git a/packages/ui/src/ui/box/index.js b/packages/ui/src/layout/box/index.js similarity index 100% rename from packages/ui/src/ui/box/index.js rename to packages/ui/src/layout/box/index.js diff --git a/packages/ui/src/layout/flex-stack/flex-stack.stories.jsx b/packages/ui/src/layout/flex-stack/flex-stack.stories.jsx index a8322130e1..d329a0ffed 100644 --- a/packages/ui/src/layout/flex-stack/flex-stack.stories.jsx +++ b/packages/ui/src/layout/flex-stack/flex-stack.stories.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { getWrapperDecorator } from '../../stories'; -import { Box } from '../../ui'; +import { Box } from '../box'; import { FlexStack } from '.'; const stories = storiesOf('Layout/FlexStack', module); diff --git a/packages/ui/src/layout/index.js b/packages/ui/src/layout/index.js index 48c1c191c7..daa9442e85 100644 --- a/packages/ui/src/layout/index.js +++ b/packages/ui/src/layout/index.js @@ -1,3 +1,4 @@ +export { Box } from './box'; export { Footer } from './footer'; export { Header } from './header'; export { SubHeader } from './sub-header'; diff --git a/packages/ui/src/layout/stack/stack.stories.jsx b/packages/ui/src/layout/stack/stack.stories.jsx index bf85c91504..b89b81c8c6 100644 --- a/packages/ui/src/layout/stack/stack.stories.jsx +++ b/packages/ui/src/layout/stack/stack.stories.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { getWrapperDecorator } from '../../stories'; -import { Box } from '../../ui'; +import { Box } from '../box'; import { Stack } from '.'; const stories = storiesOf('Layout/Stack', module); diff --git a/packages/ui/src/prototypes/bundle-page.stories.jsx b/packages/ui/src/prototypes/bundle-page.stories.jsx index 50d31f522b..8aad25dd63 100644 --- a/packages/ui/src/prototypes/bundle-page.stories.jsx +++ b/packages/ui/src/prototypes/bundle-page.stories.jsx @@ -6,8 +6,8 @@ import { get } from 'lodash'; import baselineData from '../../__mocks__/webpack-stats.baseline.json'; import currentData from '../../__mocks__/webpack-stats.current.json'; -import { Box, Container, Logo, Tabs } from '../ui'; -import { Header, Footer, Stack } from '../layout'; +import { Container, Logo, Tabs } from '../ui'; +import { Box, Header, Footer, Stack } from '../layout'; import { JobsHeader } from '../components/jobs-header'; import { BundleAssets } from '../components/bundle-assets'; import { BundleAssetsTotalsTable } from '../components/bundle-assets-totals-table'; diff --git a/packages/ui/src/ui/index.js b/packages/ui/src/ui/index.js index 13a7c001d8..b6918474b6 100644 --- a/packages/ui/src/ui/index.js +++ b/packages/ui/src/ui/index.js @@ -1,5 +1,4 @@ export { Alert } from './alert'; -export { Box } from './box'; export { Container } from './container'; export { Dropdown } from './dropdown'; export { EmptySet } from './empty-set'; From 6d682b875b7512c0e070810c9ed45bb86da12de5 Mon Sep 17 00:00:00 2001 From: Vio Date: Mon, 17 Aug 2020 12:55:27 +0200 Subject: [PATCH 4/6] feat(ui): Box - add padding support --- .../box/__snapshots__/box.stories.storyshot | 281 ++++-------------- packages/ui/src/layout/box/box.jsx | 11 +- packages/ui/src/layout/box/box.module.css | 36 +++ packages/ui/src/layout/box/box.stories.jsx | 8 +- .../flex-stack.stories.storyshot | 12 + .../__snapshots__/stack.stories.storyshot | 12 + .../bundle-page.stories.storyshot | 5 +- 7 files changed, 145 insertions(+), 220 deletions(-) diff --git a/packages/ui/src/layout/box/__snapshots__/box.stories.storyshot b/packages/ui/src/layout/box/__snapshots__/box.stories.storyshot index 0602054414..0d7615679a 100644 --- a/packages/ui/src/layout/box/__snapshots__/box.stories.storyshot +++ b/packages/ui/src/layout/box/__snapshots__/box.stories.storyshot @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots UI/Box default 1`] = ` +exports[`Storyshots Layout/Box default 1`] = `
-
-

- Lorem ipsum -

-
+

+ Lorem ipsum +

`; -exports[`Storyshots UI/Box with table 1`] = ` +exports[`Storyshots Layout/Box with padding 1`] = `
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - Col A - - - Col B - - - Col C -
- - a1 - - - b1 - - - c1 -
- - a2 - - - b2 - - - c2 -
- - a3 - - - b3 - - - c3 -
- -
+

+ Lorem ipsum +

+ +
+`; + +exports[`Storyshots Layout/Box with table 1`] = ` +
+ + `; diff --git a/packages/ui/src/layout/box/box.jsx b/packages/ui/src/layout/box/box.jsx index ecf8f605a9..32adbef029 100644 --- a/packages/ui/src/layout/box/box.jsx +++ b/packages/ui/src/layout/box/box.jsx @@ -2,10 +2,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; +import { NO_SPACE, SPACES } from '../../constants'; import css from './box.module.css'; -export const Box = ({ className, as: Component, ...props }) => { - const rootClassName = cx(css.root, className); +export const Box = ({ className, as: Component, padding, ...props }) => { + const rootClassName = cx(css.root, className, css[`padding-${padding}`]); return ; }; @@ -13,6 +14,7 @@ export const Box = ({ className, as: Component, ...props }) => { Box.defaultProps = { className: '', as: 'div', + padding: NO_SPACE, }; Box.propTypes = { @@ -20,5 +22,8 @@ Box.propTypes = { className: PropTypes.string, /** Rendered component */ - as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]), + as: PropTypes.elementType, + + /** Padding space size */ + padding: PropTypes.oneOf(SPACES), }; diff --git a/packages/ui/src/layout/box/box.module.css b/packages/ui/src/layout/box/box.module.css index 39686d6c80..152043736f 100644 --- a/packages/ui/src/layout/box/box.module.css +++ b/packages/ui/src/layout/box/box.module.css @@ -2,3 +2,39 @@ border: 1px solid var(--color-outline); background: var(--color-background); } + +.padding-xxxsmall { + padding: var(--space-xxxsmall); +} + +.padding-xxsmall { + padding: var(--space-xxsmall); +} + +.padding-xxsmall { + padding: var(--space-xsmall); +} + +.padding-small { + padding: var(--space-small); +} + +.padding-medium { + padding: var(--space-medium); +} + +.padding-large { + padding: var(--space-large); +} + +.padding-xlarge { + padding: var(--space-xlarge); +} + +.padding-xxlarge { + padding: var(--space-xxlarge); +} + +.padding-xxxlarge { + padding: var(--space-xxxlarge); +} diff --git a/packages/ui/src/layout/box/box.stories.jsx b/packages/ui/src/layout/box/box.stories.jsx index dd98644171..5f46981933 100644 --- a/packages/ui/src/layout/box/box.stories.jsx +++ b/packages/ui/src/layout/box/box.stories.jsx @@ -5,7 +5,7 @@ import { getWrapperDecorator } from '../../stories'; import { Table } from '../../ui'; import { Box } from '.'; -const stories = storiesOf('UI/Box', module); +const stories = storiesOf('Layout/Box', module); stories.addDecorator(getWrapperDecorator()); stories.add('default', () => ( @@ -14,6 +14,12 @@ stories.add('default', () => ( )); +stories.add('with padding', () => ( + +

Lorem ipsum

+ +)); + stories.add('with table', () => (
Lorem ipsum 1 Lorem ipsum 2 @@ -50,6 +52,7 @@ exports[`Storyshots Layout/FlexStack single item 1`] = ` Lorem ipsum @@ -75,12 +78,14 @@ exports[`Storyshots Layout/FlexStack with custom wrapper 1`] = ` Lorem ipsum 1 Lorem ipsum 2 @@ -106,18 +111,21 @@ exports[`Storyshots Layout/FlexStack with large space 1`] = ` Lorem ipsum 1 Lorem ipsum 2 Lorem ipsum 3 @@ -143,12 +151,14 @@ exports[`Storyshots Layout/FlexStack with nested stack 1`] = ` Lorem ipsum 1 Lorem ipsum 2 @@ -160,12 +170,14 @@ exports[`Storyshots Layout/FlexStack with nested stack 1`] = ` Lorem ipsum 3.1 Lorem ipsum 3.2 diff --git a/packages/ui/src/layout/stack/__snapshots__/stack.stories.storyshot b/packages/ui/src/layout/stack/__snapshots__/stack.stories.storyshot index 683299fe2a..3a9ca81cf4 100644 --- a/packages/ui/src/layout/stack/__snapshots__/stack.stories.storyshot +++ b/packages/ui/src/layout/stack/__snapshots__/stack.stories.storyshot @@ -18,12 +18,14 @@ exports[`Storyshots Layout/Stack default 1`] = ` Lorem ipsum 1 Lorem ipsum 2 @@ -50,6 +52,7 @@ exports[`Storyshots Layout/Stack single item 1`] = ` Lorem ipsum @@ -75,12 +78,14 @@ exports[`Storyshots Layout/Stack with custom wrapper 1`] = ` Lorem ipsum 1 Lorem ipsum 2 @@ -106,18 +111,21 @@ exports[`Storyshots Layout/Stack with large space 1`] = ` Lorem ipsum 1 Lorem ipsum 2 Lorem ipsum 3 @@ -143,12 +151,14 @@ exports[`Storyshots Layout/Stack with nested stack 1`] = ` Lorem ipsum 1 Lorem ipsum 2 @@ -160,12 +170,14 @@ exports[`Storyshots Layout/Stack with nested stack 1`] = ` Lorem ipsum 3.1 Lorem ipsum 3.2 diff --git a/packages/ui/src/prototypes/__snapshots__/bundle-page.stories.storyshot b/packages/ui/src/prototypes/__snapshots__/bundle-page.stories.storyshot index a06353097a..4e13c0920f 100644 --- a/packages/ui/src/prototypes/__snapshots__/bundle-page.stories.storyshot +++ b/packages/ui/src/prototypes/__snapshots__/bundle-page.stories.storyshot @@ -20,6 +20,7 @@ exports[`Storyshots Prototypes/BundlePage assets 1`] = ` - Date: Mon, 17 Aug 2020 13:02:11 +0200 Subject: [PATCH 5/6] feat(ui): Box - add outline modifier --- .../bundle-chunk-modules.jsx | 4 +-- .../bundle-modules/bundle-modules.jsx | 4 +-- .../box/__snapshots__/box.stories.storyshot | 32 +++++++++++++++---- packages/ui/src/layout/box/box.jsx | 8 +++-- packages/ui/src/layout/box/box.module.css | 5 ++- packages/ui/src/layout/box/box.stories.jsx | 14 ++++---- .../flex-stack.stories.storyshot | 12 +++++++ .../layout/flex-stack/flex-stack.stories.jsx | 24 +++++++------- .../__snapshots__/stack.stories.storyshot | 12 +++++++ .../ui/src/layout/stack/stack.stories.jsx | 24 +++++++------- .../bundle-page.stories.storyshot | 5 ++- .../ui/src/prototypes/bundle-page.stories.jsx | 6 ++-- 12 files changed, 101 insertions(+), 49 deletions(-) diff --git a/packages/ui/src/components/bundle-chunk-modules/bundle-chunk-modules.jsx b/packages/ui/src/components/bundle-chunk-modules/bundle-chunk-modules.jsx index c15fdc091b..7d9b42f974 100644 --- a/packages/ui/src/components/bundle-chunk-modules/bundle-chunk-modules.jsx +++ b/packages/ui/src/components/bundle-chunk-modules/bundle-chunk-modules.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import cx from 'classnames'; import { map } from 'lodash'; -import { Box } from '../../ui/box'; +import { Box } from '../../layout/box'; import { EmptySet } from '../../ui/empty-set'; import { FileName } from '../../ui/file-name'; import { FiltersDropdown } from '../../ui/filters-dropdown'; @@ -75,7 +75,7 @@ export const BundleChunkModules = ({ {id && {`Chunk id: ${id}`}} - + ( diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.jsx b/packages/ui/src/components/bundle-modules/bundle-modules.jsx index e877451043..b0ea940b82 100644 --- a/packages/ui/src/components/bundle-modules/bundle-modules.jsx +++ b/packages/ui/src/components/bundle-modules/bundle-modules.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { isEmpty } from 'lodash'; import * as webpack from '@bundle-stats/utils/lib-esm/webpack'; -import { Box } from '../../ui/box'; +import { Box } from '../../layout/box'; import { BundleChunkModules } from '../bundle-chunk-modules'; import css from './bundle-modules.module.css'; @@ -26,7 +26,7 @@ export const BundleModules = ({ jobs }) => { ))} {isEmpty(modulesReport) && ( - +

No data available!

Please make sure Webpack stats are configured correctly.

-

- Lorem ipsum -

+ Lorem ipsum + + +`; + +exports[`Storyshots Layout/Box with outline 1`] = ` +
+ + Lorem ipsum
`; @@ -35,11 +55,10 @@ exports[`Storyshots Layout/Box with padding 1`] = ` -

- Lorem ipsum -

+ Lorem ipsum `; @@ -57,6 +76,7 @@ exports[`Storyshots Layout/Box with table 1`] = `
{ - const rootClassName = cx(css.root, className, css[`padding-${padding}`]); +export const Box = ({ className, as: Component, padding, outline, ...props }) => { + const rootClassName = cx(css.root, className, css[`padding-${padding}`], outline && css.outline); return ; }; @@ -15,6 +15,7 @@ Box.defaultProps = { className: '', as: 'div', padding: NO_SPACE, + outline: false, }; Box.propTypes = { @@ -26,4 +27,7 @@ Box.propTypes = { /** Padding space size */ padding: PropTypes.oneOf(SPACES), + + /** Outline flag */ + outline: PropTypes.bool, }; diff --git a/packages/ui/src/layout/box/box.module.css b/packages/ui/src/layout/box/box.module.css index 152043736f..7690e12c55 100644 --- a/packages/ui/src/layout/box/box.module.css +++ b/packages/ui/src/layout/box/box.module.css @@ -1,8 +1,11 @@ .root { - border: 1px solid var(--color-outline); background: var(--color-background); } +.outline { + border: 1px solid var(--color-outline); +} + .padding-xxxsmall { padding: var(--space-xxxsmall); } diff --git a/packages/ui/src/layout/box/box.stories.jsx b/packages/ui/src/layout/box/box.stories.jsx index 5f46981933..12b152b9ea 100644 --- a/packages/ui/src/layout/box/box.stories.jsx +++ b/packages/ui/src/layout/box/box.stories.jsx @@ -8,15 +8,13 @@ import { Box } from '.'; const stories = storiesOf('Layout/Box', module); stories.addDecorator(getWrapperDecorator()); -stories.add('default', () => ( - -

Lorem ipsum

- -)); +stories.add('default', () => Lorem ipsum); + +stories.add('with padding', () => Lorem ipsum); -stories.add('with padding', () => ( - -

Lorem ipsum

+stories.add('with outline', () => ( + + Lorem ipsum )); diff --git a/packages/ui/src/layout/flex-stack/__snapshots__/flex-stack.stories.storyshot b/packages/ui/src/layout/flex-stack/__snapshots__/flex-stack.stories.storyshot index db8b1f7ce7..73214cb5d7 100644 --- a/packages/ui/src/layout/flex-stack/__snapshots__/flex-stack.stories.storyshot +++ b/packages/ui/src/layout/flex-stack/__snapshots__/flex-stack.stories.storyshot @@ -18,6 +18,7 @@ exports[`Storyshots Layout/FlexStack default 1`] = ` Lorem ipsum 1 @@ -25,6 +26,7 @@ exports[`Storyshots Layout/FlexStack default 1`] = ` Lorem ipsum 2 @@ -52,6 +54,7 @@ exports[`Storyshots Layout/FlexStack single item 1`] = ` Lorem ipsum @@ -78,6 +81,7 @@ exports[`Storyshots Layout/FlexStack with custom wrapper 1`] = ` Lorem ipsum 1 @@ -85,6 +89,7 @@ exports[`Storyshots Layout/FlexStack with custom wrapper 1`] = ` Lorem ipsum 2 @@ -111,6 +116,7 @@ exports[`Storyshots Layout/FlexStack with large space 1`] = ` Lorem ipsum 1 @@ -118,6 +124,7 @@ exports[`Storyshots Layout/FlexStack with large space 1`] = ` Lorem ipsum 2 @@ -125,6 +132,7 @@ exports[`Storyshots Layout/FlexStack with large space 1`] = ` Lorem ipsum 3 @@ -151,6 +159,7 @@ exports[`Storyshots Layout/FlexStack with nested stack 1`] = ` Lorem ipsum 1 @@ -158,6 +167,7 @@ exports[`Storyshots Layout/FlexStack with nested stack 1`] = ` Lorem ipsum 2 @@ -170,6 +180,7 @@ exports[`Storyshots Layout/FlexStack with nested stack 1`] = ` Lorem ipsum 3.1 @@ -177,6 +188,7 @@ exports[`Storyshots Layout/FlexStack with nested stack 1`] = ` Lorem ipsum 3.2 diff --git a/packages/ui/src/layout/flex-stack/flex-stack.stories.jsx b/packages/ui/src/layout/flex-stack/flex-stack.stories.jsx index d329a0ffed..6623c5cf94 100644 --- a/packages/ui/src/layout/flex-stack/flex-stack.stories.jsx +++ b/packages/ui/src/layout/flex-stack/flex-stack.stories.jsx @@ -10,8 +10,8 @@ stories.addDecorator(getWrapperDecorator()); stories.add('default', () => ( - Lorem ipsum 1 - Lorem ipsum 2 + Lorem ipsum 1 + Lorem ipsum 2 {null} Lorem ipsum 3 @@ -19,32 +19,32 @@ stories.add('default', () => ( stories.add('with custom wrapper', () => ( - Lorem ipsum 1 - Lorem ipsum 2 + Lorem ipsum 1 + Lorem ipsum 2 )); stories.add('with large space', () => ( - Lorem ipsum 1 - Lorem ipsum 2 - Lorem ipsum 3 + Lorem ipsum 1 + Lorem ipsum 2 + Lorem ipsum 3 )); stories.add('with nested stack', () => ( - Lorem ipsum 1 - Lorem ipsum 2 + Lorem ipsum 1 + Lorem ipsum 2 - Lorem ipsum 3.1 - Lorem ipsum 3.2 + Lorem ipsum 3.1 + Lorem ipsum 3.2 )); stories.add('single item', () => ( - Lorem ipsum + Lorem ipsum )); diff --git a/packages/ui/src/layout/stack/__snapshots__/stack.stories.storyshot b/packages/ui/src/layout/stack/__snapshots__/stack.stories.storyshot index 3a9ca81cf4..ac366ce496 100644 --- a/packages/ui/src/layout/stack/__snapshots__/stack.stories.storyshot +++ b/packages/ui/src/layout/stack/__snapshots__/stack.stories.storyshot @@ -18,6 +18,7 @@ exports[`Storyshots Layout/Stack default 1`] = ` Lorem ipsum 1 @@ -25,6 +26,7 @@ exports[`Storyshots Layout/Stack default 1`] = ` Lorem ipsum 2 @@ -52,6 +54,7 @@ exports[`Storyshots Layout/Stack single item 1`] = ` Lorem ipsum @@ -78,6 +81,7 @@ exports[`Storyshots Layout/Stack with custom wrapper 1`] = ` Lorem ipsum 1 @@ -85,6 +89,7 @@ exports[`Storyshots Layout/Stack with custom wrapper 1`] = ` Lorem ipsum 2 @@ -111,6 +116,7 @@ exports[`Storyshots Layout/Stack with large space 1`] = ` Lorem ipsum 1 @@ -118,6 +124,7 @@ exports[`Storyshots Layout/Stack with large space 1`] = ` Lorem ipsum 2 @@ -125,6 +132,7 @@ exports[`Storyshots Layout/Stack with large space 1`] = ` Lorem ipsum 3 @@ -151,6 +159,7 @@ exports[`Storyshots Layout/Stack with nested stack 1`] = ` Lorem ipsum 1 @@ -158,6 +167,7 @@ exports[`Storyshots Layout/Stack with nested stack 1`] = ` Lorem ipsum 2 @@ -170,6 +180,7 @@ exports[`Storyshots Layout/Stack with nested stack 1`] = ` Lorem ipsum 3.1 @@ -177,6 +188,7 @@ exports[`Storyshots Layout/Stack with nested stack 1`] = ` Lorem ipsum 3.2 diff --git a/packages/ui/src/layout/stack/stack.stories.jsx b/packages/ui/src/layout/stack/stack.stories.jsx index b89b81c8c6..5edf257c94 100644 --- a/packages/ui/src/layout/stack/stack.stories.jsx +++ b/packages/ui/src/layout/stack/stack.stories.jsx @@ -10,8 +10,8 @@ stories.addDecorator(getWrapperDecorator()); stories.add('default', () => ( - Lorem ipsum 1 - Lorem ipsum 2 + Lorem ipsum 1 + Lorem ipsum 2 {null} Lorem ipsum 3 @@ -19,32 +19,32 @@ stories.add('default', () => ( stories.add('with custom wrapper', () => ( - Lorem ipsum 1 - Lorem ipsum 2 + Lorem ipsum 1 + Lorem ipsum 2 )); stories.add('with large space', () => ( - Lorem ipsum 1 - Lorem ipsum 2 - Lorem ipsum 3 + Lorem ipsum 1 + Lorem ipsum 2 + Lorem ipsum 3 )); stories.add('with nested stack', () => ( - Lorem ipsum 1 - Lorem ipsum 2 + Lorem ipsum 1 + Lorem ipsum 2 - Lorem ipsum 3.1 - Lorem ipsum 3.2 + Lorem ipsum 3.1 + Lorem ipsum 3.2 )); stories.add('single item', () => ( - Lorem ipsum + Lorem ipsum )); diff --git a/packages/ui/src/prototypes/__snapshots__/bundle-page.stories.storyshot b/packages/ui/src/prototypes/__snapshots__/bundle-page.stories.storyshot index 4e13c0920f..00761a6810 100644 --- a/packages/ui/src/prototypes/__snapshots__/bundle-page.stories.storyshot +++ b/packages/ui/src/prototypes/__snapshots__/bundle-page.stories.storyshot @@ -20,6 +20,7 @@ exports[`Storyshots Prototypes/BundlePage assets 1`] = ` - ( - + @@ -92,7 +92,7 @@ stories.add('totals', () => ( stories.add('assets', () => ( - + @@ -110,7 +110,7 @@ stories.add('modules', () => ( stories.add('packages', () => ( - + From 3c28c1cf93405893c624aa635ef50b6fc29bd15a Mon Sep 17 00:00:00 2001 From: Vio Date: Mon, 17 Aug 2020 13:33:00 +0200 Subject: [PATCH 6/6] refactor(ui): Use layout components --- packages/html-templates/src/app/index.jsx | 8 +-- .../bundle-assets-totals-chart-bars.jsx | 39 +++++------ ...bundle-assets-totals-chart-bars.module.css | 5 -- .../src/components/job-header/job-header.jsx | 46 ++++++------- .../job-header/job-header.module.css | 40 ++---------- .../components/jobs-header/jobs-header.jsx | 5 +- .../jobs-header/jobs-header.module.css | 8 --- .../layout/flex-stack/flex-stack.module.css | 4 ++ packages/ui/src/layout/stack/stack.module.css | 4 ++ .../__snapshots__/alert.stories.storyshot | 65 ++++++++++++++----- packages/ui/src/ui/alert/alert.jsx | 5 +- packages/ui/src/ui/alert/alert.module.css | 5 +- 12 files changed, 114 insertions(+), 120 deletions(-) diff --git a/packages/html-templates/src/app/index.jsx b/packages/html-templates/src/app/index.jsx index b5de7968c7..e2d448f040 100644 --- a/packages/html-templates/src/app/index.jsx +++ b/packages/html-templates/src/app/index.jsx @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import { Box } from '@bundle-stats/ui/lib-esm/ui/box'; +import { Box } from '@bundle-stats/ui/lib-esm/layout/box'; import { Container } from '@bundle-stats/ui/lib-esm/ui/container'; import { JobsHeader } from '@bundle-stats/ui/lib-esm/components/jobs-header'; import { DuplicatePackagesWarning } from '@bundle-stats/ui/lib-esm/components/duplicate-packages-warning'; @@ -74,7 +74,7 @@ const StandaloneApp = ({ jobs }) => { Totals - + @@ -85,7 +85,7 @@ const StandaloneApp = ({ jobs }) => { Assets - + @@ -103,7 +103,7 @@ const StandaloneApp = ({ jobs }) => { Packages - + diff --git a/packages/ui/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.jsx b/packages/ui/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.jsx index 93e35187ec..e4779d08f9 100644 --- a/packages/ui/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.jsx +++ b/packages/ui/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.jsx @@ -1,13 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; -import { - get, map, max, sum, -} from 'lodash'; +import { get, map, max, sum } from 'lodash'; import * as webpack from '@bundle-stats/utils/lib-esm/webpack'; import { HorizontalBarChart } from '../../ui'; import { getColors } from '../../utils'; +import { Stack } from '../../layout/stack'; import { SummaryItem } from '../summary-item'; import css from './bundle-assets-totals-chart-bars.module.css'; @@ -19,10 +18,7 @@ export const BundleAssetsTotalsChartBars = ({ className, jobs }) => { items.forEach(({ runs }) => { runs.forEach((run, runIndex) => { - dataGraphs[runIndex] = [ - ...dataGraphs[runIndex] || [], - get(run, 'value', 0), - ]; + dataGraphs[runIndex] = [...(dataGraphs[runIndex] || []), get(run, 'value', 0)]; }); }); @@ -46,12 +42,10 @@ export const BundleAssetsTotalsChartBars = ({ className, jobs }) => { ); return ( -
-

- Total size by type -

+ +

Total size by type

-
+ {dataGraphs.map((data, runIndex) => { const { internalBuildNumber } = jobs[runIndex]; @@ -63,13 +57,8 @@ export const BundleAssetsTotalsChartBars = ({ className, jobs }) => { })); return ( -
-

- {`Job #${internalBuildNumber}`} -

+
+

{`Job #${internalBuildNumber}`}

{
); })} -
-
+ + ); }; @@ -89,7 +78,9 @@ BundleAssetsTotalsChartBars.defaultProps = { BundleAssetsTotalsChartBars.propTypes = { className: PropTypes.string, - jobs: PropTypes.arrayOf(PropTypes.shape({ - internalBuildNumber: PropTypes.number, - })).isRequired, + jobs: PropTypes.arrayOf( + PropTypes.shape({ + internalBuildNumber: PropTypes.number, + }), + ).isRequired, }; diff --git a/packages/ui/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.module.css b/packages/ui/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.module.css index 45b1d2501b..e7cd559287 100644 --- a/packages/ui/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.module.css +++ b/packages/ui/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.module.css @@ -1,5 +1,4 @@ .title { - margin: 0 0 var(--space-small); color: var(--color-text-light); font-weight: bold; font-size: var(--size-medium); @@ -11,10 +10,6 @@ position: relative; } -.item + .item { - margin-top: var(--space-medium); -} - .itemTitle { position: absolute; right: 0; diff --git a/packages/ui/src/components/job-header/job-header.jsx b/packages/ui/src/components/job-header/job-header.jsx index 5355dabb4b..9c1c150ee8 100644 --- a/packages/ui/src/components/job-header/job-header.jsx +++ b/packages/ui/src/components/job-header/job-header.jsx @@ -5,6 +5,8 @@ import { get } from 'lodash'; import { formatDistanceToNow } from 'date-fns'; import { SOURCE_PATH_WEBPACK_STATS, formatDate, formatTime } from '@bundle-stats/utils'; +import { FlexStack } from '../../layout/flex-stack'; +import { Stack } from '../../layout/stack'; import { Icon } from '../../ui/icon'; import css from './job-header.module.css'; @@ -15,31 +17,31 @@ export const JobHeader = (props) => { const rootClassName = cx(css.root, className); return ( -
-
-

- {`#${job.internalBuildNumber}`} - {tag && {tag}} -

-
- {builtAt && ( - - - {formatDistanceToNow(new Date(builtAt), { addSuffix: true })} + +

+ {`#${job.internalBuildNumber}`} + {tag && {tag}} +

+ + {builtAt && ( + + + + {formatDistanceToNow(new Date(builtAt), { addSuffix: true })} - )} + + )} - {hash && ( - - - {hash} - - )} + {hash && ( + + + {hash} + + )} - {children} -
-
-
+ {children} + + ); }; diff --git a/packages/ui/src/components/job-header/job-header.module.css b/packages/ui/src/components/job-header/job-header.module.css index d27c4b15d3..c80ebaeddf 100644 --- a/packages/ui/src/components/job-header/job-header.module.css +++ b/packages/ui/src/components/job-header/job-header.module.css @@ -1,20 +1,14 @@ .root { - position: relative; - display: flex; - align-items: flex-start; } .title { - margin: 0; - font-size: var(--size-xxxlarge); - line-height: var(--space-medium); + line-height: 1; font-weight: bold; vertical-align: top; } .tag { padding: var(--space-xxxsmall); - margin-top: 5px; margin-left: var(--space-xxxsmall); background-color: var(--color-highlight); color: var(--color-text-light); @@ -25,43 +19,19 @@ vertical-align: top; } -.meta { - margin-top: var(--space-xxsmall); - font-size: var(--size-small); - line-height: var(--space-xsmall); - color: var(--color-text-light); -} - -.description { - flex: 1 1 100%; -} - -.commitMessage { - margin: 0; -} .metaItem { display: inline-flex; - margin-right: var(--space-xxsmall); align-items: center; } .metaIcon { width: var(--space-small); + height: var(--space-small); margin-right: var(--space-xxxsmall); + color: var(--color-text-light); } -.summaryItem { - flex: 0 0 auto; - padding-top: 0; - padding-bottom: 0; - margin-left: var(--space-small); - text-align: right; -} - -/** Loading state */ -.loading .jobTitle { - height: var(--size-large); - width: 3em; - background: var(--color-highlight); +.metaLabel { + line-height: 1; } diff --git a/packages/ui/src/components/jobs-header/jobs-header.jsx b/packages/ui/src/components/jobs-header/jobs-header.jsx index e2b41323fe..8437845ef2 100644 --- a/packages/ui/src/components/jobs-header/jobs-header.jsx +++ b/packages/ui/src/components/jobs-header/jobs-header.jsx @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; +import { FlexStack } from '../../layout/flex-stack'; import { JobHeader } from '../job-header'; import css from './jobs-header.module.css'; @@ -10,7 +11,7 @@ export const JobsHeader = (props) => { const rootClassName = cx(css.root, className); return ( -
+ {jobs && jobs.map((job, index) => ( { tag={index === 0 ? 'current' : 'baseline'} /> ))} -
+ ); }; diff --git a/packages/ui/src/components/jobs-header/jobs-header.module.css b/packages/ui/src/components/jobs-header/jobs-header.module.css index 243d0f0c0b..48b8f98d0c 100644 --- a/packages/ui/src/components/jobs-header/jobs-header.module.css +++ b/packages/ui/src/components/jobs-header/jobs-header.module.css @@ -1,5 +1,4 @@ .root { - display: flex; align-items: stretch; flex-wrap: wrap; } @@ -8,10 +7,3 @@ flex: 1 1 360px; padding: var(--space-small) var(--space-small) var(--space-small) 0; } - -/** Loading state */ -.loading .jobTitle { - height: var(--size-large); - width: 3em; - background: var(--color-highlight); -} diff --git a/packages/ui/src/layout/flex-stack/flex-stack.module.css b/packages/ui/src/layout/flex-stack/flex-stack.module.css index 59f47ae038..3c9527208f 100644 --- a/packages/ui/src/layout/flex-stack/flex-stack.module.css +++ b/packages/ui/src/layout/flex-stack/flex-stack.module.css @@ -4,6 +4,10 @@ justify-content: flex-start; } +.item { + margin: 0; +} + .space--xxxsmall > .item + .item { margin-left: var(--space-xxxsmall); } diff --git a/packages/ui/src/layout/stack/stack.module.css b/packages/ui/src/layout/stack/stack.module.css index 1a4bdb07b7..c3880f23a4 100644 --- a/packages/ui/src/layout/stack/stack.module.css +++ b/packages/ui/src/layout/stack/stack.module.css @@ -1,3 +1,7 @@ +.item { + margin: 0; +} + .space--xxxsmall > .item + .item { margin-top: var(--space-xxxsmall); } diff --git a/packages/ui/src/ui/alert/__snapshots__/alert.stories.storyshot b/packages/ui/src/ui/alert/__snapshots__/alert.stories.storyshot index ee85b673b3..bdc47c80cd 100644 --- a/packages/ui/src/ui/alert/__snapshots__/alert.stories.storyshot +++ b/packages/ui/src/ui/alert/__snapshots__/alert.stories.storyshot @@ -14,11 +14,18 @@ exports[`Storyshots UI/Alert default 1`] = ` className="" kind="default" > -
- Lorem ipsum -
+
+ Lorem ipsum +
+
`; @@ -37,11 +44,18 @@ exports[`Storyshots UI/Alert with kind danger 1`] = ` className="" kind="danger" > -
- Lorem ipsum -
+
+ Lorem ipsum +
+ `; @@ -60,11 +74,18 @@ exports[`Storyshots UI/Alert with kind info 1`] = ` className="" kind="info" > -
- Lorem ipsum -
+
+ Lorem ipsum +
+ `; @@ -83,11 +104,18 @@ exports[`Storyshots UI/Alert with kind success 1`] = ` className="" kind="success" > -
- Lorem ipsum -
+
+ Lorem ipsum +
+ `; @@ -106,11 +134,18 @@ exports[`Storyshots UI/Alert with kind warning 1`] = ` className="" kind="warning" > -
- Lorem ipsum -
+
+ Lorem ipsum +
+ `; diff --git a/packages/ui/src/ui/alert/alert.jsx b/packages/ui/src/ui/alert/alert.jsx index 46acb7793f..752e43c5c4 100644 --- a/packages/ui/src/ui/alert/alert.jsx +++ b/packages/ui/src/ui/alert/alert.jsx @@ -2,15 +2,16 @@ import React from 'react'; import cx from 'classnames'; import PropTypes from 'prop-types'; +import { Box } from '../../layout/box'; import css from './alert.module.css'; export const Alert = (props) => { const { className, kind, children } = props; return ( -
+ {children} -
+ ); }; diff --git a/packages/ui/src/ui/alert/alert.module.css b/packages/ui/src/ui/alert/alert.module.css index 235809cbc8..1331cd822e 100644 --- a/packages/ui/src/ui/alert/alert.module.css +++ b/packages/ui/src/ui/alert/alert.module.css @@ -1,7 +1,6 @@ .root { - border: 1px solid var(--color-outline); - padding: var(--space-small); - color: var(--color-text-dark) + color: var(--color-text); + border-color: var(--color-outline); } .success {