Skip to content

Commit

Permalink
Merge pull request #164 from hypothesis/convert-other-patterns
Browse files Browse the repository at this point in the history 
Convert remaining patterns pages to newer Library components
  • Loading branch information
@lyzadanger
lyzadanger authored Aug 6, 2021
2 parents 445580d + 6a3a6b3 commit 5934b67
Show file tree
Hide file tree
Showing 3 changed files with 147 additions and 117 deletions.
118 changes: 64 additions & 54 deletions src/pattern-library/components/patterns/FormPatterns.js
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,103 @@
import {
PatternExample,
PatternExamples,
PatternPage,
Pattern,
} from '../PatternPage';
import Library from '../Library';

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

export default function FormPatterns() {
return (
<PatternPage title="Forms">
<Pattern title="Checkboxes">
<Library.Page title="Forms">
<Library.Pattern title="Checkbox">
<p>
A checkbox, styled accessibly with an SVG image. The SVG image is an
adjacent sibling to the checkbox <code>input</code>.
</p>
<PatternExamples>
<PatternExample details="checkbox">
<input className="hyp-checkbox" type="checkbox" />
<SvgIcon name="checkbox" />
</PatternExample>
<Library.Example title="Checkbox">
<p>
This example shows an <code>input type=&quot;checkbox&quot;</code>{' '}
element with the <code>checkbox</code> pattern applied, both
unchecked and checked.
</p>
<Library.Demo withSource>
<div className="hyp-u-layout-row hyp-u-horizontal-spacing">
<div>
<input className="hyp-checkbox" type="checkbox" />
<SvgIcon name="checkbox" />
</div>

<PatternExample details="checkbox, checked">
<input className="hyp-checkbox" type="checkbox" checked />
<SvgIcon name="checkbox" />
</PatternExample>
<div>
<input className="hyp-checkbox" type="checkbox" checked />
<SvgIcon name="checkbox" />
</div>
</div>
</Library.Demo>
</Library.Example>

<PatternExample details="checkbox with label">
<Library.Example title="Checkbox with label">
<Library.Demo withSource>
<label className="hyp-label">
<input className="hyp-checkbox" type="checkbox" />
<SvgIcon name="checkbox" />
<span>Click me, please</span>
</label>
</PatternExample>
</PatternExamples>
</Pattern>
</Library.Demo>
</Library.Example>
</Library.Pattern>

<Pattern title="Text inputs">
<Library.Pattern title="Text inputs">
<p>
A pattern for <code>input type=&quot;text&quot;</code>
</p>
<PatternExamples>
<PatternExample details="basic text input">
<Library.Example title="Basic text input">
<Library.Demo withSource>
<input
className="hyp-text-input"
type="text"
placeholder="http://www.example.com"
/>
</PatternExample>
<PatternExample details="text input in an error state">
</Library.Demo>
</Library.Example>

<Library.Example title="Text input in an error state">
<Library.Demo withSource>
<input
className="hyp-text-input has-error"
type="text"
placeholder="http://www.example.com"
/>
</PatternExample>
</PatternExamples>
</Pattern>
<Pattern title="Text input with button">
</Library.Demo>
</Library.Example>
</Library.Pattern>

<Library.Pattern title="Text input with button">
<p>
A pattern that pairs a text input field with an icon-only button. Use
a dark-variant button to match the standard pattern here.
</p>
<PatternExamples>
<PatternExample
style={{ width: '300px' }}
details="text input with a dark-variant IconButton"
>
<div className="hyp-text-input-with-button">
<input type="text" placeholder="http://www.example.com" />
<IconButton icon="arrow-right" title="go" variant="dark" />
<Library.Example title="Text input with a dark-variant IconButton">
<Library.Demo withSource>
<div style={{ width: '300px' }}>
<div className="hyp-text-input-with-button">
<input type="text" placeholder="http://www.example.com" />
<IconButton icon="arrow-right" title="go" variant="dark" />
</div>
</div>
</PatternExample>
</Library.Demo>
</Library.Example>

<PatternExample
style={{ width: '300px' }}
details="text input and button in an error state"
>
<div className="hyp-text-input-with-button">
<input
type="text"
placeholder="http://www.example.com"
className="has-error"
/>
<IconButton icon="arrow-right" title="go" variant="dark" />
<Library.Example title="Text input and button in an error state">
<Library.Demo withSource>
<div style={{ width: '300px' }}>
<div className="hyp-text-input-with-button">
<input
type="text"
placeholder="http://www.example.com"
className="has-error"
/>
<IconButton icon="arrow-right" title="go" variant="dark" />
</div>
</div>
</PatternExample>
</PatternExamples>
</Pattern>
</PatternPage>
</Library.Demo>
</Library.Example>
</Library.Pattern>
</Library.Page>
);
}
76 changes: 47 additions & 29 deletions src/pattern-library/components/patterns/PanelPatterns.js
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,46 @@
import {
PatternExample,
PatternExamples,
PatternPage,
Pattern,
} from '../PatternPage';
import Library from '../Library';

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

export default function OrganismPatterns() {
return (
<PatternPage title="Panels">
<Library.Page title="Panels">
<p>
The <code>panel</code> pattern is used by several components:{' '}
<code>Panel</code>, <code>Dialog</code>, <code>Modal</code>, e.g.
</p>
<Pattern title="Panel">
<Library.Pattern title="Panel">
<p>
A panel is a card with a header and affordances for a close button.
Use the <code>--closeable</code> modifier when using{' '}
<code>panel</code> with an icon-only close button.
</p>
<PatternExamples>
<PatternExample
details="Panel with no header"
style={{ maxWidth: '400px' }}
>
<div className="hyp-panel">
This is in a panel that has no header. A header is not required,
but you are encouraged to use <code>card</code> in that case. Note
that a <code>panel</code> will currently fill all available space.
The containing element has been set to{' '}
<code>max-width: 400px</code> here.
<Library.Example title="Panel with no header">
<p>
This is in a panel that has no header. A header is not required, but
you are encouraged to use <code>card</code> in that case. Note that
a <code>panel</code> will currently fill all available space. The
containing element has been set to <code>max-width: 400px</code>{' '}
here.
</p>
<Library.Demo withSource>
<div style={{ maxWidth: '400px' }}>
<div className="hyp-panel">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat
</div>
</div>
</PatternExample>
<PatternExample details="Panel with title but no close button">
</Library.Demo>
</Library.Example>

<Library.Example title="Panel with title but no close button">
<p>
This example shows a panel with header and content, but no close
affordances.
</p>
<Library.Demo withSource>
<div className="hyp-panel">
<header>
<h2 className="hyp-panel__title">
Expand All @@ -45,9 +52,15 @@ export default function OrganismPatterns() {
affordance.
</div>
</div>
</PatternExample>
</Library.Demo>
</Library.Example>

<PatternExample details="Closeable panel (using IconButton): preferred">
<Library.Example title="Closeable panel">
<p>
This example shows a panel pattern with a <code>IconButton</code>{' '}
close button, using the <code>--closeable</code> modifier.
</p>
<Library.Demo withSource>
<div className="hyp-panel hyp-panel--closeable">
<header>
<h2 className="hyp-panel__title">
Expand All @@ -62,9 +75,14 @@ export default function OrganismPatterns() {
.
</div>
</div>
</PatternExample>
</Library.Demo>
</Library.Example>

<PatternExample details="Panel with actions">
<Library.Example title="Panel with actions">
<p>
It is common to render some <code>actions</code> within a panel.
</p>
<Library.Demo withSource>
<div className="hyp-panel hyp-panel--closeable">
<header>
<h2 className="hyp-panel__title">Panel title</h2>
Expand All @@ -83,9 +101,9 @@ export default function OrganismPatterns() {
</LabeledButton>
</div>
</div>
</PatternExample>
</PatternExamples>
</Pattern>
</PatternPage>
</Library.Demo>
</Library.Example>
</Library.Pattern>
</Library.Page>
);
}
Loading

0 comments on commit 5934b67

Please sign in to comment.