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} - - - - - ); -} 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/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)} /> - - -     -     + + + + ); } 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. +

    +
    -     -     -     -     + + + + ); } 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. - - + + + + +
    -     -     -     -     + + + + ); } 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
    -     - + + + + +
    -     -     -     -     + + + + ); } diff --git a/styles/pattern-library.scss b/styles/pattern-library.scss index b6dd4d7b1..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 @@ -318,5 +214,6 @@ $-library-vertical-spacing: 7; &__demo-content { @include layout.row($align: center, $justify: center); + @include layout.horizontal-spacing; } }