From f415f84a112882b342f88e7645ed1d41b954ce12 Mon Sep 17 00:00:00 2001 From: Lyza Danger Gardner Date: Fri, 13 Aug 2021 11:50:11 -0400 Subject: [PATCH 1/6] Convert `FormComponents` to use new `Library` components --- .../components/patterns/FormComponents.js | 95 +++++++++---------- 1 file changed, 47 insertions(+), 48 deletions(-) diff --git a/src/pattern-library/components/patterns/FormComponents.js b/src/pattern-library/components/patterns/FormComponents.js index bde3cae6b..c20538466 100644 --- a/src/pattern-library/components/patterns/FormComponents.js +++ b/src/pattern-library/components/patterns/FormComponents.js @@ -4,39 +4,21 @@ import { IconButton } from '../../../components/buttons'; import { LabeledCheckbox } from '../../../components/Checkbox'; import { TextInput, TextInputWithButton } from '../../../components/TextInput'; -import { - PatternPage, - Pattern, - PatternExamples, - PatternExample, -} from '../PatternPage'; +import Library from '../Library'; export default function FormComponents() { const [wantSandwich, setWantSandwich] = useState(true); const [wantWatermelon, setWantWatermelon] = useState(false); const [textInputHasError, setTextInputHasError] = useState(true); return ( - - -
- {wantSandwich && '🥪'} - {wantWatermelon && '🍉'} -   -
- - - setWantSandwich(isChecked)} - > - I want a sandwich - - - + + + +
+ {wantWatermelon && '🍉'} +   +
+ I want a watermelon - - - + + + + +
{wantSandwich && '🥪'}
+ + setWantSandwich(isChecked)} + > + I want a sandwich + + + + - +

- TextInput is a basic wrapper around an{' '} + The TextInput component is a basic wrapper around an input type="text" field.

- - + + - + + - + + - - - + + + - +

This component wraps the text-input-with-button pattern: a text input on the left with an associated icon-only button on the @@ -74,15 +71,17 @@ export default function FormComponents() { Current usage favors the dark variant of{' '} IconButton.

- - + + - + + - + + setTextInputHasError(!textInputHasError)} /> - - - - + + + + ); } From 3e3391a7afd5cb19aeb9c1517afc910d4c44c19c Mon Sep 17 00:00:00 2001 From: Lyza Danger Gardner Date: Fri, 13 Aug 2021 11:52:59 -0400 Subject: [PATCH 2/6] Convert `PanelComponents` to use new `Library` components --- .../components/patterns/PanelComponents.js | 43 ++++++++++--------- 1 file changed, 23 insertions(+), 20 deletions(-) diff --git a/src/pattern-library/components/patterns/PanelComponents.js b/src/pattern-library/components/patterns/PanelComponents.js index 1edcdfa61..d5466f7aa 100644 --- a/src/pattern-library/components/patterns/PanelComponents.js +++ b/src/pattern-library/components/patterns/PanelComponents.js @@ -1,23 +1,20 @@ import { Panel } from '../../../'; -import { - PatternPage, - Pattern, - PatternExamples, - PatternExample, -} from '../PatternPage'; +import Library from '../Library'; export default function PanelComponents() { return ( - - - - + + + + Here is a panel with no close button and very simple content. - - + + + + alert('close clicked')} @@ -26,8 +23,11 @@ export default function PanelComponents() { Providing an onClose function will cause a close button to render. - - + + + + + This panel has an optional icon in the header. - - + + + + +
- - - - + + + + ); } From 4074e1649441aaf152c963ca086ce9b4e641f105 Mon Sep 17 00:00:00 2001 From: Lyza Danger Gardner Date: Fri, 13 Aug 2021 11:59:00 -0400 Subject: [PATCH 3/6] Convert `ThumbnailComponents` to new `Library` components --- .../patterns/ThumbnailComponents.js | 79 +++++++++++-------- 1 file changed, 47 insertions(+), 32 deletions(-) diff --git a/src/pattern-library/components/patterns/ThumbnailComponents.js b/src/pattern-library/components/patterns/ThumbnailComponents.js index cdb345333..70b262a0c 100644 --- a/src/pattern-library/components/patterns/ThumbnailComponents.js +++ b/src/pattern-library/components/patterns/ThumbnailComponents.js @@ -1,16 +1,11 @@ import { Thumbnail } from '../../..'; -import { - PatternPage, - Pattern, - PatternExamples, - PatternExample, -} from '../PatternPage'; +import Library from '../Library'; export default function ThumbnailComponents() { return ( - - + +

The Thumbnail component handles rendering a thumbnail or other image, and provides a loading state and an empty (placeholder) @@ -23,61 +18,81 @@ export default function ThumbnailComponents() { 250x175px. The Thumbnail will fill, but not exceed, the available space.

- - + + +
- - + + + + +
kitty
- - + + + + +
- - + + + + +
kitty
- - + + + + +

Placeholder can be any JSX

+
- - - + + + - +

These examples are within a 100x150px parent.

- - + +
- - + + + + +
kitty
- - + + + + +
- - - - + + + + ); } From 5476a373efcef36c24a52cb156f008525b8fb40b Mon Sep 17 00:00:00 2001 From: Lyza Danger Gardner Date: Fri, 13 Aug 2021 13:21:17 -0400 Subject: [PATCH 4/6] Convert `ButtonComponents` page to use new `Library` components Make a small CSS-layout change to prevent this page from being huge --- .../components/patterns/ButtonComponents.js | 460 ++++++------------ styles/pattern-library.scss | 1 + 2 files changed, 154 insertions(+), 307 deletions(-) diff --git a/src/pattern-library/components/patterns/ButtonComponents.js b/src/pattern-library/components/patterns/ButtonComponents.js index 31d671213..a2a12c79b 100644 --- a/src/pattern-library/components/patterns/ButtonComponents.js +++ b/src/pattern-library/components/patterns/ButtonComponents.js @@ -1,196 +1,165 @@ import { IconButton, LabeledButton, LinkButton } from '../../../'; -import { - PatternPage, - Pattern, - PatternExamples, - PatternExample, -} from '../PatternPage'; +import Library from '../Library'; export default function ButtonComponents() { return ( - - + +

+ Button components support the following variants: +

+
    +
  • Default
    • +
  • + Primary: For indicating that a button represents a primary action +
    • +
  • Dark: For rendering a button on a grey background
    • +
  • + Light: This variant should only be used for non-critical buttons on + white backgrounds (low contrast). +
    • +
+

+ In addition, a button may be in one of four states, which are + represented in their variant examples, left to right: +

+
    +
  • Default
    • +
  • Pressed
    • +
  • Expanded
    • +
  • Disabled
    • +
+ +

A button containing an icon and no other content.

- -

Sizes

-

- The optional size property affects the proportions and - overall size of the button by way of padding. It does not change the - size of the icon itself, which is sized at  - 1em. The default sizing is medium. -

- - + +

+ The optional size property affects the proportions and + overall size of the button by way of padding. It does not change the + size of the icon itself, which is sized at  + 1em. The default sizing is medium. +

+ - - - -

Default variant

- - + + + + +

Dark variant

+

+ The IconButton dark variant is for use on darker (light + grey vs. white) backgrounds. Note that this button, unlike other{' '} + IconButtons, has a background color. This is to allow + for a use case in which the dark IconButton is + initially fixed on a grey background but floats on top of content + when scrolled. +

+

Light variant

+

+ This variant should only be used for non-critical icons on white + backgrounds (low contrast). +

+ - - - - - - - - - - - + -

Primary variant

- - - - - - + + - - - - - - - - - -

Dark variant

-

- This variant is for use on darker (light grey vs. white) backgrounds. - Note that this button, unlike other IconButtons, has a - background color. This is to allow for a use case in which the dark{' '} - IconButton is initially fixed on a grey background but - floats on top of content when scrolled. -

- - - - - - - - - - - - - - - - - - + -

Light variant

-

- This variant should only be used for non-critical icons on white - backgrounds (low contrast). -

- - - - + + + + + + - + + - - - - - - - - - + + + - +

A button with content and, optionally, an icon.

- -

Sizes

-

- As with IconButton, sizing affects proportions and - overall size via padding. -

- - - + +

+ The optional size property affects the proportions and + overall size of the button by way of padding. It does not change the + size of the icon itself, which is sized at  + 1em. The default sizing is medium. +

+ Edit Edit Edit - + - + Edit User @@ -198,9 +167,9 @@ export default function ButtonComponents() { Edit User - + - + Edit User @@ -210,216 +179,93 @@ export default function ButtonComponents() { Edit User - - - -

Default variant

+ + - - - Edit + + Edit - - - - Edit Edit - - - - Edit Edit - - - - Edit Edit - - - -

Primary variant

- - - - Edit user - - Edit user - - + - - - Edit user - - - Edit user - - - - - - Edit user - - - Edit user - - - - - - Edit user - - - Edit user + + + Edit - - - -

Dark variant

- -

Intended for use on non-white, very light grey backgrounds.

- - - Buy ice cream - - Buy ice cream + + Edit - - - - - Buy ice cream + + Edit - - Buy ice cream + + Edit - + - - - Buy ice cream + + + Edit - - Buy ice cream + + Edit - - - - - Buy ice cream + + Edit - - Buy ice cream + + Edit - - - + + + - +

A button styled to look like a link (anchor tag).

-

Default variant

- - + + Show replies (10) - - - Show replies (10) - - - Show replies (10) - - - Show replies (10) - - - -

Primary variant

+ - - + Show replies (10) - - - - + Show replies (10) - - - - + Show replies (10) - - - - + Show replies (10) - - - -

Dark variant

-

For use on light grey (non-white) backgrounds.

+ - - + Show replies (10) - - - - + Show replies (10) - - - - + Show replies (10) - - - - + Show replies (10) - - - - + + + + ); } diff --git a/styles/pattern-library.scss b/styles/pattern-library.scss index b6dd4d7b1..d431988a0 100644 --- a/styles/pattern-library.scss +++ b/styles/pattern-library.scss @@ -318,5 +318,6 @@ $-library-vertical-spacing: 7; &__demo-content { @include layout.row($align: center, $justify: center); + @include layout.horizontal-spacing; } } From 30e21d18b816514bd26f9ec623917dfe3ccf7e44 Mon Sep 17 00:00:00 2001 From: Lyza Danger Gardner Date: Fri, 13 Aug 2021 13:29:53 -0400 Subject: [PATCH 5/6] Convert `LayoutFoundations` page to use newer `Library` components --- .../components/patterns/LayoutFoundations.js | 85 +++++++++---------- 1 file changed, 40 insertions(+), 45 deletions(-) diff --git a/src/pattern-library/components/patterns/LayoutFoundations.js b/src/pattern-library/components/patterns/LayoutFoundations.js index ac6d68b8b..be3869244 100644 --- a/src/pattern-library/components/patterns/LayoutFoundations.js +++ b/src/pattern-library/components/patterns/LayoutFoundations.js @@ -3,12 +3,7 @@ import { useState } from 'preact/hooks'; import { LabeledButton } from '../../../'; -import { - PatternPage, - Pattern, - PatternExamples, - PatternExample, -} from '../PatternPage'; +import Library from '../Library'; function SquareBlock() { return ( @@ -78,8 +73,8 @@ export default function LayoutFoundations() { '8rem', ]; return ( - - + +

Spacing units provide a way to apply predefined, consistent spacing dimensions between (margins) and around (padding) elements. Our @@ -106,8 +101,9 @@ export default function LayoutFoundations() { ))} - - + + +

Sometimes you may need to apply or adjust horizontal spacing between an element's immediate children. @@ -133,8 +129,9 @@ export default function LayoutFoundations() { - - + + +

Sometimes you may need to apply or adjust vertical spacing between an element's immediate children. @@ -156,14 +153,15 @@ export default function LayoutFoundations() { - - -

- The fixed-centered layout pattern centers an element both - horizontally and vertically within the entire viewport. -

- - + + + + +

+ The fixed-centered layout pattern centers an element + both horizontally and vertically within the entire viewport. +

+
- - - - -

- The overlay layout pattern provides a full-viewport, - semi-opaque overlay that obscures UI interactions in the viewport - below. It is intended for use as a backdrop for modals, e.g. -

- - + + + + +

+ The overlay layout pattern provides a full-viewport, + semi-opaque overlay that obscures UI interactions in the viewport + below. It is intended for use as a backdrop for modals, e.g. +

+
- - - + + - -

- This shows an example of combining the overlay and{' '} - fixed-centered patterns. -

- - + +

+ This shows an example of combining the overlay and{' '} + fixed-centered patterns. +

+
- - - - + + + + ); } From 4856b906f88e0dd3d874c71a9c735746422f2fcb Mon Sep 17 00:00:00 2001 From: Lyza Danger Gardner Date: Fri, 13 Aug 2021 13:33:30 -0400 Subject: [PATCH 6/6] Remove unused `PatternPage` component module and its styles --- src/pattern-library/components/PatternPage.js | 137 ------------------ styles/pattern-library.scss | 104 ------------- 2 files changed, 241 deletions(-) delete mode 100644 src/pattern-library/components/PatternPage.js diff --git a/src/pattern-library/components/PatternPage.js b/src/pattern-library/components/PatternPage.js deleted file mode 100644 index 3a4f43702..000000000 --- a/src/pattern-library/components/PatternPage.js +++ /dev/null @@ -1,137 +0,0 @@ -import { toChildArray } from 'preact'; - -import { jsxToString } from '../util/jsx-to-string'; - -/** - * Components to render patterns and examples. Typical structure of a "Demo" - * page might be: - * - * - * - *

Everyone loves an elephant.

- * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - */ - -/** - * @typedef PatternPageProps - * @prop {import("preact").ComponentChildren} children - * @prop {string} title - */ - -/** - * Render a page of patterns - * @param {PatternPageProps} props - */ -export function PatternPage({ children, title }) { - return ( -
-

{title}

-
{children}
-
- ); -} - -/** - * @typedef PatternProps - * @prop {import("preact").ComponentChildren} children - * @prop {string} title - */ - -/** - * A pattern and its examples - * @param {PatternProps} props - */ -export function Pattern({ children, title }) { - return ( -
-

{title}

- {children} -
- ); -} - -/** - * @typedef PatternExamplesProps - * @prop {import("preact").ComponentChildren} children - * @prop {string} [title] - */ - -/** - * Tabular layout of one or more `PatternExample` components, with optional - * title. - * - * @param {PatternExamplesProps} props - */ -export function PatternExamples({ children }) { - return ( - - - - - - - {children} -
ExampleDetailsSource
- ); -} - -/** - * @typedef PatternExampleProps - * @prop {import("preact").ComponentChildren} children - Example source - * @prop {string} details - Details about the pattern example - * @prop {Object} [style] - Optional additional inline styles to apply to the - * table cell with the rendered example - */ - -/** - * Tabular layout of a single example. Will render its `children` as the - * example, as well as the source JSX of its `children` - * - * @param {PatternExampleProps} props - */ -export function PatternExample({ children, details, style = {} }) { - const source = toChildArray(children).map((child, idx) => { - return ( -
  • - - 
    {jsxToString(child)}
    -     -
    • - ); - }); - return ( - - -
    {children}
    - - {details} - -
      {source}
    - - - ); -} diff --git a/styles/pattern-library.scss b/styles/pattern-library.scss index d431988a0..c2108788f 100644 --- a/styles/pattern-library.scss +++ b/styles/pattern-library.scss @@ -90,68 +90,6 @@ pre { } } -.PatternPage { - font-size: 14px; - - &__content { - padding: 2em 0; - } -} - -.Pattern { - margin: 0 0 4em 1em; - p { - margin: 1em; - margin-left: 0; - } - - & > h2 { - margin-left: -1em; - } -} - -.PatternExamples { - border: 1px solid var.$color-grey-3; - border-collapse: collapse; - width: 100%; - margin-top: 1em; - margin-bottom: 2em; - - th, - td { - padding: 0.5em; - } - - th { - background-color: var.$color-grey-1; - border-bottom: 1px solid var.$color-grey-3; - text-align: left; - } - - td { - padding-top: 10px; - padding-bottom: 10px; - } - - tr:nth-child(even) { - background: var.$color-grey-0; - } - - code { - color: var.$color-grey-7; - } -} - -.PatternExample { - &__example { - display: flex; - align-items: center; - & > * + * { - margin-left: 1em; - } - } -} - // Element styles body { font-family: sans-serif; @@ -170,48 +108,6 @@ body { } } -// TODO This is prototype styling for a potential new component in the -// pattern library. -.Example { - margin: 1.5em 0; - - p { - margin: 0 0 1em 0; - } - - & > p { - margin: 0 0 0.5em; - font-size: 18px; - } - - &__content { - margin-top: 2em; - display: flex; - flex-direction: column; - - @media screen and (min-width: 48rem) { - flex-direction: row; - } - } - - &__usage { - padding-right: 1em; - flex-basis: 0; - flex-grow: 2; - font-size: 15px; - line-height: 1.4; - } - - &__demo { - flex-basis: 0; - flex-grow: 3; - display: flex; - align-items: center; - justify-content: center; - background-color: var.$color-grey-1; - } -} - $-library-vertical-spacing: 7; .LibraryPage { // Make sure the content width is not too terribly wide: it gets hard to read