Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Convert container-patterns page to newer Library components #161

Merged
merged 1 commit into from
Aug 5, 2021
+118 −75
Merged

Convert container-patterns page to newer Library components #161

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
193 changes: 118 additions & 75 deletions src/pattern-library/components/patterns/ContainerPatterns.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,105 @@
import { useState } from 'preact/hooks';

import {
PatternExample,
PatternExamples,
PatternPage,
Pattern,
} from '../PatternPage';
import Library from '../Library';

import { IconButton, LabeledButton } from '../../../';

export default function ContainerPatterns() {
const [showModalExample, setShowModalExample] = useState(false);
return (
<PatternPage title="Containers">
<Pattern title="Frame">
<p>
A <code>frame</code> has a border, background, padding, and vertical
spacing of immediate children.
</p>
<PatternExamples>
<PatternExample details="basic frame">
<div className="hyp-frame">This is in a frame.</div>
</PatternExample>
<PatternExample details="child content in frame">
<Library.Page title="Containers">
<Library.Pattern title="Frame">
<Library.Example title="Basic frame">
<p>
A <code>frame</code> provides a border, background, padding and
vertical spacing of immediate children.
</p>
<Library.Demo withSource>
<div className="hyp-frame">
<div className="hyp-u-border">Child content in a frame.</div>
<div className="hyp-u-border">Child content in a frame.</div>
<div className="hyp-u-border">Child content in a frame.</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div>
Sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</div>
</div>
</PatternExample>
<PatternExample details="content in a frame: clean theme">
</Library.Demo>
</Library.Example>

<Library.Example title="Using frames with the 'clean' theme">
<p>Clean-theme styling removes borders from frames.</p>
<Library.Demo withSource>
<div className="theme-clean">
<div className="hyp-frame">
Content within a frame in the clean theme. The frame itself has
no borders when in the clean theme.
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div>
Sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</div>
</div>
</div>
</PatternExample>
</PatternExamples>
</Pattern>
</Library.Demo>
</Library.Example>
</Library.Pattern>

<Pattern title="Card">
<p>
A <code>card</code> is a frame with a shadow and hover-shadow effect
that fills available horizontal space.
</p>
<PatternExamples>
<PatternExample details="basic card">
<div className="hyp-card">This is in a card.</div>
</PatternExample>
<PatternExample details="hover shadow disabled">
<Library.Pattern title="Card">
<Library.Example title="Basic card">
<p>
A <code>card</code> is a frame with a shadow and hover-shadow effect
that fills available horizontal space. It extends <code>frame</code>
.
</p>
<Library.Demo withSource>
<div className="hyp-card">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div>
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</Library.Demo>
</Library.Example>

<Library.Example title="Card with no hover">
<p>A card&apos;s hover can be disabled by using a modifying class.</p>
<Library.Demo withSource>
<div className="hyp-card--no-hover">
This is in a card with the hover-shadow effect disabled.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</PatternExample>
<PatternExample details="A card with some actions">
</Library.Demo>
</Library.Example>

<Library.Example title="Card example with actions">
<p>This example shows a card with some available actions.</p>
<Library.Demo withSource>
<div className="hyp-card">
<div>
This is some text in a card that also contains some available
actions.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div className="hyp-actions">
<IconButton title="User" icon="profile" />
<IconButton title="Edit" icon="edit" />
<IconButton title="Delete" icon="trash" />
</div>
</div>
</PatternExample>
<PatternExample details="Clean theme">
</Library.Demo>
</Library.Example>

<Library.Example title="Using cards with the 'clean' theme">
<p>Clean-theme styling removes hover shadows and borders.</p>
<Library.Demo withSource>
<div className="theme-clean">
<div className="hyp-card">
<div>
This is some text in a card in the clean theme. There are no
borders or box-shadows.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div className="hyp-actions">
<IconButton title="User" icon="profile" />
Expand All @@ -81,57 +108,73 @@ export default function ContainerPatterns() {
</div>
</div>
</div>
</PatternExample>
</PatternExamples>
</Pattern>
</Library.Demo>
</Library.Example>
</Library.Pattern>

<Pattern title="Actions">
<Library.Pattern title="Actions">
<p>
The <code>actions</code> pattern presents a collection of actions
(typically buttons). By default, these are laid out in a row, aligned
right, but can also be laid out in a column.
The <code>actions</code> pattern lays out a set of items, typically
buttons, in a row (default) or column, with spacing.{' '}
</p>
<PatternExamples>
<PatternExample details="A set of LabeledButtons">
<Library.Example title="Horizontal (default) layout">
<p>
These examples show <code>Actions</code> used in its default layout
(horizontal) with <code>LabeledButton</code> and{' '}
<code>IconButton</code> components.
</p>
<Library.Demo withSource>
<div className="hyp-actions">
<LabeledButton icon="profile">User</LabeledButton>
<LabeledButton icon="edit">Edit</LabeledButton>
<LabeledButton icon="trash">Delete</LabeledButton>
</div>
</PatternExample>
<PatternExample details="A set of IconButtons">
</Library.Demo>

<Library.Demo withSource>
<div className="hyp-actions">
<IconButton title="User" icon="profile" />
<IconButton title="Edit" icon="edit" />
<IconButton title="Delete" icon="trash" />
</div>
</PatternExample>
<PatternExample details="Columnar layout">
</Library.Demo>
</Library.Example>

<Library.Example title="Columnar layout">
<Library.Demo withSource>
<div className="hyp-actions--column">
<LabeledButton>User</LabeledButton>
<LabeledButton>Edit</LabeledButton>
<LabeledButton>Delete</LabeledButton>
</div>
</PatternExample>
<PatternExample details="Columnar layout: buttons stretching to fill space">
</Library.Demo>
</Library.Example>

<Library.Example title="Columnar layout, filling space">
<p>
This example shows buttons stretching to fill available space in{' '}
<code>actions</code>.
</p>
<Library.Demo withSource>
<div style="width:300px">
<div className="hyp-actions--column">
<LabeledButton variant="primary">Do this</LabeledButton>
<LabeledButton variant="primary">No, this!</LabeledButton>
<LabeledButton variant="primary">Maybe this?</LabeledButton>
</div>
</div>
</PatternExample>
</PatternExamples>
</Pattern>
</Library.Demo>
</Library.Example>
</Library.Pattern>

<Pattern title="Modal container">
<p>
The <code>modal</code> pattern positions and sizes a modal container
appropriately based on viewport size.
</p>
<PatternExamples>
<PatternExample details="Responsive Modal container positioning and sizing">
<Library.Pattern title="Modal">
<Library.Example title="Responsive modal container">
<p>
This pattern makes use of the <code>overlay</code> pattern. It
responsively positions and sizes a container in the viewport to hold
modal content.
</p>
<Library.Demo withSource>
<div>
<LabeledButton
variant="primary"
Expand Down Expand Up @@ -171,9 +214,9 @@ export default function ContainerPatterns() {
</div>
</div>
</div>
</PatternExample>
</PatternExamples>
</Pattern>
</PatternPage>
</Library.Demo>
</Library.Example>
</Library.Pattern>
</Library.Page>
);
}