mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-08 15:16:52 +02:00
Code Issues Releases Wiki Activity

Remove tachyons

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-27 12:31:18 +07:00
parent d3a4fdffee
commit 835c3af8ff
94 changed files with 3113 additions and 699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/App.tsx
View File

@@ -36,7 +36,7 @@ const App = () => {
</Route> </Route>
<Route exact={true} path='/pricing-table'><DetailsLoader pattern={Pattern.PricingTable} /></Route> <Route exact={true} path='/pricing-table'><DetailsLoader pattern={Pattern.PricingTable} /></Route>
<Route exact={true} path='/property-list'><DetailsLoader pattern={Pattern.PropertyList} /></Route> <Route exact={true} path='/property-list'><DetailsLoader pattern={Pattern.PropertyList} /></Route>
<Route exact={true} path='/progress-bar'><DetailsLoader pattern={Pattern.PropertyList} /></Route> <Route exact={true} path='/progress-bar'><DetailsLoader pattern={Pattern.ProgressBar} /></Route>
<Route exact={true} path='/questions-and-answers'> <Route exact={true} path='/questions-and-answers'>
<DetailsLoader pattern={Pattern.QuestionsAndAnswers} /> <DetailsLoader pattern={Pattern.QuestionsAndAnswers} />
</Route> </Route>

4
client/Explore.tsx
View File

@@ -69,7 +69,7 @@ const Home = () => {
<section> <section>
<Heading title="Layouts" /> <Heading title="Layouts" />
<div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}> <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
<CoverCard pattern={Pattern.HolyGrail} /> <CoverCard pattern={Pattern.HolyGrail} />
<CoverCard pattern={Pattern.Sidebar} /> <CoverCard pattern={Pattern.Sidebar} />
<CoverCard pattern={Pattern.SplitScreen} /> <CoverCard pattern={Pattern.SplitScreen} />
@@ -81,7 +81,7 @@ const Home = () => {
<section> <section>
<Heading title="Patterns" /> <Heading title="Patterns" />
<div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}> <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
<CoverCard pattern={Pattern.Badge} /> <CoverCard pattern={Pattern.Badge} />
<CoverCard pattern={Pattern.Breadcrumb} /> <CoverCard pattern={Pattern.Breadcrumb} />
<CoverCard pattern={Pattern.ButtonWithIcon} /> <CoverCard pattern={Pattern.ButtonWithIcon} />

1
client/Home.tsx
View File

@@ -165,6 +165,7 @@ const Home = () => {
style={{ style={{
display: 'flex', display: 'flex',
flexWrap: 'wrap', flexWrap: 'wrap',
justifyContent: 'center',
opacity: '0.4', opacity: '0.4',
padding: '32px 16px', padding: '32px 16px',
}} }}

5
client/components/CoverCard.tsx
View File

@@ -11,16 +11,16 @@ interface CoverCardProps {
const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => { const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
return ( return (
<div className="pa1 w-20">
<Link <Link
to={`/${slug(pattern)}`} to={`/${slug(pattern)}`}
style={{ style={{
alignItems: 'center', alignItems: 'center',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'center', justifyContent: 'flex-start',
padding: '16px', padding: '16px',
textDecoration: 'none', textDecoration: 'none',
width: '150px',
}} }}
> >
<CoverLoader pattern={pattern} /> <CoverLoader pattern={pattern} />
@@ -36,7 +36,6 @@ const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
{pattern} {pattern}
</h4> </h4>
</Link> </Link>
</div>
); );
}; };

2
client/components/RelatedPatterns.tsx
View File

@@ -13,7 +13,7 @@ const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {
<section> <section>
<Heading title="Related patterns" /> <Heading title="Related patterns" />
<div className="flex flex-wrap items-start pa4"> <div style={{ alignItems: 'start', display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
{ {
patterns.map((pattern) => <CoverCard key={pattern} pattern={pattern} />) patterns.map((pattern) => <CoverCard key={pattern} pattern={pattern} />)
} }

5
client/components/SampleCode.tsx
View File

@@ -11,7 +11,10 @@ const SampleCode: React.FC<SampleCodeProps> = ({ code, lang }) => {
return code === '' return code === ''
? <></> ? <></>
: ( : (
<pre className="h-100 lh-copy ma0" dangerouslySetInnerHTML={{ __html: highlight(code, lang) }} /> <pre
style={{ height: '100%', lineHeight: 1.5, margin: 0 }}
dangerouslySetInnerHTML={{ __html: highlight(code, lang) }}
/>
); );
}; };

2
client/helpers/highlight.ts
View File

@@ -8,7 +8,7 @@ const highlight = (input: string, language: string) => {
const { value } = hljs.highlight(lang, input); const { value } = hljs.highlight(lang, input);
const highlighted = value.replace('&amp;', '&').trim(); const highlighted = value.replace('&amp;', '&').trim();
return `<code class="hljs h-100 ${lang}">${highlighted}</code>`; return `<code style="height: 100%" class="hljs ${lang}">${highlighted}</code>`;
}; };
export default highlight; export default highlight;

6
client/index.css
View File

@@ -2,6 +2,12 @@ body {
font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif; font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
html, body, div, article, aside, section, main, nav, footer, header, form, fieldset, legend, pre, code, a,
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote, figcaption, figure, textarea,
table, td, th, tr,
input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"] {
box-sizing: border-box;
}
.hljs, code { .hljs, code {
font-family: 'Source Code Pro', monospace; font-family: 'Source Code Pro', monospace;
} }

2
client/layouts/Layout.tsx
View File

@@ -8,7 +8,7 @@ const Layout: React.FC<{}> = ({ children }) => {
}, []); }, []);
return ( return (
<div className="mw8 mb5 center"> <div style={{ margin: '0 auto 64px auto', maxWidth: '1024px' }}>
{children} {children}
<Footer /> <Footer />
<ul <ul

13
client/loaders/DetailsLoader.tsx
View File

@@ -1,9 +1,10 @@
import loadable, { LoadableComponent } from '@loadable/component'; import loadable, { LoadableComponent } from '@loadable/component';
import React from 'react'; import React from 'react';
import Pattern from '../constants/Pattern';
import './spinner.css'; import './spinner.css';
import Pattern from '../constants/Pattern';
interface DetailsLoaderProps { interface DetailsLoaderProps {
pattern: Pattern; pattern: Pattern;
} }
@@ -21,7 +22,15 @@ const loadDetails = /* #__LOADABLE__ */ (props: DetailsLoaderProps) => import(`.
const DetailsLoader: LoadableComponent<DetailsLoaderProps> = loadable(loadDetails, { const DetailsLoader: LoadableComponent<DetailsLoaderProps> = loadable(loadDetails, {
fallback: ( fallback: (
<div className="w100 h-100 flex items-center justify-center"> <div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
width: '100%',
}}
>
<svg className="spinner" width="64px" height="64px" viewBox="0 0 32 32"> <svg className="spinner" width="64px" height="64px" viewBox="0 0 32 32">
<circle <circle
cx="16" cx="16"

25
client/patterns/badge/Cover.tsx
View File

@@ -5,8 +5,29 @@ import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="flex flex-column items-center justify-center white bg-black-30 br-pill w2 h2"> style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
color: '#FFF',
display: 'flex',
flexDirection: 'column',
height: '32px',
justifyContent: 'center',
width: '32px',
}}
>
1 1
</div> </div>
</div> </div>

28
client/patterns/badge/Details.tsx
View File

@@ -6,11 +6,33 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Badge"> <DetailsLayout title="Badge">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="flex flex-column items-center justify-center white bg-black-30 br-pill w2 h2 f4"> style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
color: '#FFF',
display: 'flex',
flexDirection: 'column',
fontSize: '20px',
height: '32px',
justifyContent: 'center',
width: '32px',
}}
>
1 1
</div> </div>
</div> </div>

31
client/patterns/breadcrumb/Cover.tsx
View File

@@ -6,13 +6,30 @@ import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="flex items-center justify-center h2 w-80"> style={{
<div className="w-20"><Rectangle /></div> alignItems: 'center',
<div className="mh1 black">/</div> display: 'flex',
<div className="w-20"><Rectangle /></div> flexDirection: 'column',
<div className="mh1 black">/</div> height: '100%',
<div className="w-20"><Rectangle /></div> justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
justifyContent: 'center',
width: '80%',
}}
>
<div style={{ width: '20%' }}><Rectangle /></div>
<div style={{ color: '#000', margin: '0 4px' }}>/</div>
<div style={{ width: '20%' }}><Rectangle /></div>
<div style={{ color: '#000', margin: '0 4px' }}>/</div>
<div style={{ width: '20%' }}><Rectangle /></div>
</div> </div>
</div> </div>
</Frame> </Frame>

29
client/patterns/breadcrumb/Details.tsx
View File

@@ -7,18 +7,27 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Breadcrumb"> <DetailsLayout title="Breadcrumb">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="flex items-center"> style={{
<div className="w4"><Rectangle height={16} /></div> alignItems: 'center',
<div className="mh1 f2 black-30">/</div> display: 'flex',
<div className="w2"><Rectangle height={16} /></div> flexDirection: 'column',
<div className="mh1 f2 black-30">/</div> height: '100%',
<div className="w3"><Rectangle height={16} /></div> justifyContent: 'center',
<div className="mh1 f2 black-30">/</div> padding: '8px',
<div className="w2"><Rectangle height={16} /></div> }}
>
<div style={{ alignItems: 'center', display: 'flex' }}>
<div style={{ width: '128px' }}><Rectangle height={16} /></div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
<div style={{ width: '32px' }}><Rectangle height={16} /></div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
<div style={{ width: '64px' }}><Rectangle height={16} /></div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
<div style={{ width: '32px' }}><Rectangle height={16} /></div>
</div> </div>
</div> </div>
)} )}

24
client/patterns/button-with-icon/Cover.tsx
View File

@@ -7,9 +7,27 @@ import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center pa2"> <div
<div className="w-100 flex flex-row items-center ba b--black-30 br2 pa1"> style={{
<div className="mr1"><Circle /></div> alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
padding: '8px',
width: '100%',
}}
>
<div style={{ marginRight: '4px' }}><Circle /></div>
<Rectangle /> <Rectangle />
</div> </div>
</div> </div>

29
client/patterns/button-with-icon/Details.tsx
View File

@@ -8,13 +8,32 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Button with icon"> <DetailsLayout title="Button with icon">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="w5"> style={{
<button className="w-100 h3 flex flex-row items-center ba b--black-30 br2 ph2"> alignItems: 'center',
<div className="mr2"><Circle size={32} /></div> display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '256px' }}>
<button
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '8px',
display: 'flex',
height: '64px',
padding: '8px',
width: '100%',
}}
>
<div style={{ marginRight: '8px' }}><Circle size={32} /></div>
<Rectangle /> <Rectangle />
</button> </button>
</div> </div>

21
client/patterns/card/Cover.tsx
View File

@@ -7,16 +7,23 @@ import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="flex flex-column h-100 pa2"> <div
<div className="w-100 mb2"> style={{
display: 'flex',
flexDirection: 'column',
height: '100%',
padding: '8px',
}}
>
<div style={{ marginBottom: '8px', width: '100%' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-80 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
<div className="w-60 mb2"><Line /></div> <div style={{ marginBottom: '8px', width: '60%' }}><Line /></div>
<div className="w-30"> <div style={{ width: '30%' }}>
<Rectangle height={8} /> <Rectangle height={8} />
</div> </div>
</div> </div>

29
client/patterns/card/Details.tsx
View File

@@ -8,15 +8,32 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Card"> <DetailsLayout title="Card">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center pa3"> <div
<div className="b--black-30 ba br2 flex flex-column w5"> style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '16px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '8px',
display: 'flex',
flexDirection: 'column',
width: '256px',
}}
>
<Rectangle height={150} /> <Rectangle height={150} />
<div className="pa3" style={{ flex: 1 }}> <div style={{ flex: 1, padding: '16px' }}>
<div className="mb3"><Block numberOfBlocks={15} /></div> <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
<div className="w4"> <div style={{ width: '128px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
</div> </div>

15
client/patterns/centering/Cover.tsx
View File

@@ -7,12 +7,21 @@ import Line from '../../placeholders/Line';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center"> <div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle /> <Circle />
<div className="w-50 mv1"> <div style={{ margin: '4px 0', width: '50%' }}>
<Line /> <Line />
</div> </div>
<div className="w-40 mv1"> <div style={{ margin: '4px 0', width: '40%' }}>
<Line /> <Line />
</div> </div>
</div> </div>

19
client/patterns/centering/Details.tsx
View File

@@ -8,14 +8,23 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Centering"> <DetailsLayout title="Centering">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle size={64} /> <Circle size={64} />
<div className="w-40 mt3"><Rectangle /></div> <div style={{ marginTop: '16px', width: '40%' }}><Rectangle /></div>
<div className="w-30 mt2"><Rectangle /></div> <div style={{ marginTop: '8px', width: '30%' }}><Rectangle /></div>
<div className="w-20 mt2"><Rectangle /></div> <div style={{ marginTop: '8px', width: '20%' }}><Rectangle /></div>
</div> </div>
)} )}
source={` source={`

33
client/patterns/docked-at-corner/Cover.tsx
View File

@@ -5,11 +5,36 @@ import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center">
<div className="w2 h2 relative ba b--black-30 br2">
<div <div
className="absolute top-0 right-0 br-pill bg-dark-blue" style={{
style={{ height: '16px', transform: 'translate(50%, -50%)', width: '16px' }} alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '32px',
position: 'relative',
width: '32px',
}}
>
<div
style={{
backgroundColor: '#00449E',
borderRadius: '9999px',
height: '16px',
position: 'absolute',
right: 0,
top: 0,
transform: 'translate(50%, -50%)',
width: '16px',
}}
/> />
</div> </div>
</div> </div>

93
client/patterns/docked-at-corner/Details.tsx
View File

@@ -8,15 +8,40 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Docked at corner"> <DetailsLayout title="Docked at corner">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="w4 pa3 relative ba b--black-30 br2"> style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '8px',
padding: '16px',
position: 'relative',
width: '128px',
}}
>
<Rectangle /> <Rectangle />
<div <div
className="absolute top-0 right-0 br-pill bg-dark-blue h2 w2" style={{
style={{ transform: 'translate(50%, -50%)' }} backgroundColor: '#00449E',
borderRadius: '9999px',
height: '32px',
position: 'absolute',
right: 0,
top: 0,
transform: 'translate(50%, -50%)',
width: '32px',
}}
/> />
</div> </div>
</div> </div>
@@ -48,21 +73,65 @@ const Details: React.FC<{}> = () => {
<section> <section>
<Heading title="Use cases" /> <Heading title="Use cases" />
<div className="pa4"> <div style={{ padding: '32px' }}>
<div className="mb4 w4 pa2 relative ba b--black-30 br2"> <div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
marginBottom: '32px',
padding: '8px',
position: 'relative',
width: '128px',
}}
>
Inbox Inbox
<div <div
className="absolute top-0 right-0 br-pill bg-blue white pa1 flex items-center justify-center" style={{
style={{ height: '24px', transform: 'translate(50%, -50%)', width: '24px' }} alignItems: 'center',
backgroundColor: '#357EDD',
borderRadius: '9999px',
color: '#FFF',
display: 'flex',
height: '24px',
justifyContent: 'center',
padding: '4px',
position: 'absolute',
right: 0,
top: 0,
transform: 'translate(50%, -50%)',
width: '24px',
}}
> >
5 5
</div> </div>
</div> </div>
<div className="w-40 h4 pa3 relative ba b--black-30 br2"> <div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '128px',
padding: '16px',
position: 'relative',
width: '40%',
}}
>
Modal Modal
<div <div
className="absolute top-0 right-0 br-pill bg-red white pa1 flex items-center justify-center" style={{
style={{ height: '24px', transform: 'translate(50%, -50%)', width: '24px' }} alignItems: 'center',
backgroundColor: '#FF4136',
borderRadius: '9999px',
color: '#FFF',
display: 'flex',
height: '24px',
justifyContent: 'center',
padding: '4px',
position: 'absolute',
right: 0,
top: 0,
transform: 'translate(50%, -50%)',
width: '24px',
}}
> >
&times; &times;
</div> </div>

53
client/patterns/dot-navigation/Cover.tsx
View File

@@ -5,12 +5,53 @@ import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="flex items-center"> style={{
<div className="mh1 br-pill ba b--black-30" style={{ height: '8px', width: '8px' }} /> alignItems: 'center',
<div className="mh1 br-pill bg-black-30" style={{ height: '8px', width: '8px' }} /> display: 'flex',
<div className="mh1 br-pill ba b--black-30" style={{ height: '8px', width: '8px' }} /> flexDirection: 'column',
<div className="mh1 br-pill ba b--black-30" style={{ height: '8px', width: '8px' }} /> height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ alignItems: 'center', display: 'flex' }}>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
height: '8px',
margin: '0 4px',
width: '8px',
}}
/>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
height: '8px',
margin: '0 4px',
width: '8px',
}}
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
height: '8px',
margin: '0 4px',
width: '8px',
}}
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
height: '8px',
margin: '0 4px',
width: '8px',
}}
/>
</div> </div>
</div> </div>
</Frame> </Frame>

30
client/patterns/dot-navigation/Details.tsx
View File

@@ -15,9 +15,13 @@ const Details: React.FC<{}> = () => {
const click = () => setActiveItem(index); const click = () => setActiveItem(index);
return ( return (
<li <li
className={`pointer mh1 br-pill ${isActive ? 'bg-black-30' : 'ba b--black-30'}`}
style={{ style={{
backgroundColor: isActive ? 'rgba(0, 0, 0, 0.3)' : '',
border: isActive ? 'none' : '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
cursor: 'pointer',
height: '12px', height: '12px',
margin: '0 4px',
width: '12px', width: '12px',
}} }}
onClick={click} onClick={click}
@@ -27,11 +31,29 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Dot navigation"> <DetailsLayout title="Dot navigation">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<ul className="list ma0 pa0 flex items-center justify-center"> style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<ul
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
listStyleType: 'none',
margin: 0,
padding: 0,
}}
>
<Dot index={0} /> <Dot index={0} />
<Dot index={1} /> <Dot index={1} />
<Dot index={2} /> <Dot index={2} />

35
client/patterns/feature-list/Cover.tsx
View File

@@ -8,23 +8,32 @@ import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="flex flex-column justify-center h-100 pa2 w-100"> <div
<div className="flex w-100 mb2"> style={{
<div className="mh1"><Circle size={32} /></div> display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
width: '100%',
}}
>
<div style={{ display: 'flex', marginBottom: '8px', width: '100%' }}>
<div style={{ margin: '0 4px' }}><Circle size={32} /></div>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<div className="w-100 mb2"><Rectangle height={4} /></div> <div style={{ marginBottom: '8px', width: '100%' }}><Rectangle height={4} /></div>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-80"><Line /></div> <div style={{ width: '80%' }}><Line /></div>
</div> </div>
</div> </div>
<div className="flex w-100 flex-row-reverse"> <div style={{ display: 'flex', flexDirection: 'row-reverse', width: '100%' }}>
<div className="mh1"><Circle size={32} /></div> <div style={{ margin: '0 4px' }}><Circle size={32} /></div>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<div className="w-100 mb2"><Rectangle height={4} /></div> <div style={{ marginBottom: '8px', width: '100%' }}><Rectangle height={4} /></div>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-80"><Line /></div> <div style={{ width: '80%' }}><Line /></div>
</div> </div>
</div> </div>
</div> </div>

25
client/patterns/feature-list/Details.tsx
View File

@@ -9,22 +9,29 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Feature list"> <DetailsLayout title="Feature list">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="flex h-100 items-center justify-center"> <div
<div className="w-60"> style={{
<div className="flex flex-row mb4"> alignItems: 'center',
<div className="mh3"><Circle size={128} /></div> display: 'flex',
height: '100%',
justifyContent: 'center',
}}
>
<div style={{ width: '60%' }}>
<div style={{ display: 'flex', marginBottom: '32px' }}>
<div style={{ margin: '0 16px' }}><Circle size={128} /></div>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<div className="mb4"><Rectangle height={8} /></div> <div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
<Block numberOfBlocks={10} /> <Block numberOfBlocks={10} />
</div> </div>
</div> </div>
<div className="flex flex-row flex-row-reverse mb4"> <div style={{ display: 'flex', flexDirection: 'row-reverse', marginBottom: '32px' }}>
<div className="mh3"><Circle size={128} /></div> <div style={{ margin: '0 16px' }}><Circle size={128} /></div>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<div className="mb4"><Rectangle height={8} /></div> <div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
<Block numberOfBlocks={15} /> <Block numberOfBlocks={15} />
</div> </div>
</div> </div>

4
client/patterns/fixed-at-corner/Cover.tsx
View File

@@ -6,8 +6,8 @@ import Triangle from '../../placeholders/Triangle';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="relative"> <div style={{ position: 'relative' }}>
<div className="absolute top-0 left-0"> <div style={{ left: 0, position: 'absolute', top: 0 }}>
<Triangle size={32} /> <Triangle size={32} />
</div> </div>
</div> </div>

12
client/patterns/fixed-at-corner/Details.tsx
View File

@@ -7,20 +7,20 @@ import Triangle from '../../placeholders/Triangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Fixed at corner"> <DetailsLayout title="Fixed at corner">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="relative h-100"> <div style={{ height: '100%', position: 'relative' }}>
<div className="absolute top-0 left-0"> <div style={{ left: 0, position: 'absolute', top: 0 }}>
<Triangle size={64} corner="tl" /> <Triangle size={64} corner="tl" />
</div> </div>
<div className="absolute top-0 right-0"> <div style={{ position: 'absolute', right: 0, top: 0 }}>
<Triangle size={64} corner="tr" /> <Triangle size={64} corner="tr" />
</div> </div>
<div className="absolute bottom-0 right-0"> <div style={{ bottom: 0, position: 'absolute', right: 0 }}>
<Triangle size={64} corner="br" /> <Triangle size={64} corner="br" />
</div> </div>
<div className="absolute bottom-0 left-0"> <div style={{ bottom: 0, left: 0, position: 'absolute' }}>
<Triangle size={64} corner="bl" /> <Triangle size={64} corner="bl" />
</div> </div>
</div> </div>

92
client/patterns/holy-grail/Cover.tsx
View File

@@ -6,38 +6,80 @@ import Line from '../../placeholders/Line';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column"> <div
<div className="flex-shrink-0 bb b--black-30"> style={{
<div className="w-100 flex items-center pa2"> display: 'flex',
<div className="w1"><Line /></div> flexDirection: 'column',
<div className="w1 ml-auto"><Line /></div> height: '100%',
<div className="w1 ml1"><Line /></div> }}
>
<div
style={{
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
flexShrink: 0,
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
padding: '8px',
width: '100%',
}}
>
<div style={{ width: '16px' }}><Line /></div>
<div style={{ marginLeft: 'auto', width: '16px' }}><Line /></div>
<div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
</div> </div>
</div> </div>
<div className="flex-grow-1 flex flex-row"> <div style={{ display: 'flex', flexGrow: 1 }}>
<div className="b--black-30 br pa2 w-30"> <div
<div className="mb1"><Line /></div> style={{
<div className="w-80"><Line /></div> borderRight: '1px solid rgba(0, 0, 0, 0.3)',
padding: '8px',
width: '30%',
}}
>
<div style={{ marginBottom: '4px' }}><Line /></div>
<div style={{ width: '80%' }}><Line /></div>
</div> </div>
<div className="pa2 flex-auto"> <div style={{ flex: 1, padding: '8px' }}>
<div className="mb1"><Line /></div> <div style={{ marginBottom: '4px' }}><Line /></div>
<div className="mb1 w-60"><Line /></div> <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
<div className="mb2 w-80"><Line /></div> <div style={{ marginBottom: '8px', width: '80%' }}><Line /></div>
<div className="mb1"><Line /></div> <div style={{ marginBottom: '4px' }}><Line /></div>
<div className="mb1 w-60"><Line /></div> <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
<div className="mb1 w-80"><Line /></div> <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
</div> </div>
<div className="b--black-30 bl pa2 w-30"> <div
<div className="mb1"><Line /></div> style={{
<div className="w-80"><Line /></div> borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
padding: '8px',
width: '30%',
}}
>
<div style={{ marginBottom: '4px' }}><Line /></div>
<div style={{ width: '80%' }}><Line /></div>
</div> </div>
</div> </div>
<div className="flex-shrink-0 bt b--black-30"> <div
<div className="w-100 flex items-center pa2"> style={{
<div className="w1"><Line /></div> borderTop: '1px solid rgba(0, 0, 0, 0.3)',
<div className="w1 ml1"><Line /></div> flexShrink: 0,
<div className="w1 ml1"><Line /></div> }}
>
<div
style={{
alignItems: 'center',
display: 'flex',
padding: '8px',
width: '100%',
}}
>
<div style={{ width: '16px' }}><Line /></div>
<div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
<div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
</div> </div>
</div> </div>
</div> </div>

50
client/patterns/holy-grail/Details.tsx
View File

@@ -8,26 +8,56 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Holy grail"> <DetailsLayout title="Holy grail">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column"> <div
<div className="flex-shrink-0 bb b--black-30 pa3"> style={{
<div className="w-50"><Rectangle /></div> display: 'flex',
flexDirection: 'column',
height: '100%',
}}
>
<div
style={{
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
flexShrink: 0,
padding: '16px',
}}
>
<div style={{ width: '50%' }}><Rectangle /></div>
</div> </div>
<div className="flex-grow-1 flex flex-row"> <div style={{ display: 'flex', flexGrow: 1 }}>
<div className="b--black-30 br pa3 w-25"> <div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
padding: '16px',
width: '25%',
}}
>
<Block numberOfBlocks={10} /> <Block numberOfBlocks={10} />
</div> </div>
<div className="pa3 flex-auto"> <div style={{ flex: 1, padding: '16px' }}>
<Block numberOfBlocks={20} /> <Block numberOfBlocks={20} />
</div> </div>
<div className="b--black-30 bl pa3 w-20"> <div
style={{
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
padding: '16px',
width: '20%',
}}
>
<Block numberOfBlocks={5} /> <Block numberOfBlocks={5} />
</div> </div>
</div> </div>
<div className="flex-shrink-0 bt b--black-30 pa3"> <div
<div className="w-40"><Rectangle /></div> style={{
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
flexShrink: 0,
padding: '16px',
}}
>
<div style={{ width: '40%' }}><Rectangle /></div>
</div> </div>
</div> </div>
)} )}

35
client/patterns/input-add-on/Cover.tsx
View File

@@ -6,12 +6,37 @@ import Line from '../../placeholders/Line';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex items-center justify-center pa2"> <div
<div className="b--black-30 ba br2 flex w-100 h1"> style={{
<div className="b--black-30 br flex items-center justify-center w-30 ph2"> alignItems: 'center',
<div className="w-100"><Line /></div> display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
height: '24px',
width: '100%',
}}
>
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '0 8px',
width: '30%',
}}
>
<div style={{ width: '100%' }}><Line /></div>
</div> </div>
<div className="flex-grow-1" /> <div style={{ flex: 1 }} />
</div> </div>
</div> </div>
</Frame> </Frame>

124
client/patterns/input-add-on/Details.tsx
View File

@@ -7,29 +7,127 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Input add-on"> <DetailsLayout title="Input add-on">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="w5"> style={{
<div className="b--black-30 ba br2 flex h2 w-100 mb3"> alignItems: 'center',
<div className="bg-black-05 flex items-center justify-center pa2 br b--black-30 w-30"> display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '256px' }}>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
height: '32px',
marginBottom: '16px',
width: '100%',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
width: '30%',
}}
>
<Rectangle /> <Rectangle />
</div> </div>
<input type="text" className="bn pa2 flex-auto" style={{ marginRight: '1px' }} /> <input
type="text"
style={{
borderColor: 'transparent',
flex: 1,
marginRight: '1px',
padding: '4px',
}}
/>
</div> </div>
<div className="b--black-30 ba br2 flex h2 w-100 mb3"> <div
<input type="text" className="bn pa2 flex-auto" style={{ marginLeft: '1px' }} /> style={{
<div className="bg-black-05 flex items-center justify-center pa2 bl b--black-30 w-40"> border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
height: '32px',
marginBottom: '16px',
width: '100%',
}}
>
<input
type="text"
style={{
borderColor: 'transparent',
flex: 1,
marginLeft: '1px',
padding: '8px',
}}
/>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
width: '40%',
}}
>
<Rectangle /> <Rectangle />
</div> </div>
</div> </div>
<div className="b--black-30 ba br2 flex h2 w-100"> <div
<div className="bg-black-05 flex items-center justify-center pa2 br b--black-30 w-20"> style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
height: '32px',
width: '100%',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
width: '20%',
}}
>
<Rectangle /> <Rectangle />
</div> </div>
<input type="text" className="bn pa2 flex-auto" /> <input
<div className="bg-black-05 flex items-center justify-center pa2 bl b--black-30 w-30"> type="text"
style={{
borderColor: 'transparent',
flex: 1,
padding: '8px',
}}
/>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
width: '30%',
}}
>
<Rectangle /> <Rectangle />
</div> </div>
</div> </div>

32
client/patterns/media-object/Cover.tsx
View File

@@ -7,22 +7,30 @@ import Square from '../../placeholders/Square';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="flex h-100 items-start pa2 w-100"> <div
<div className="h2 w2 mr2"> style={{
alignItems: 'flex-start',
display: 'flex',
height: '100%',
padding: '8px',
width: '100%',
}}
>
<div style={{ height: '32px', marginRight: '8px', width: '32px' }}>
<Square /> <Square />
</div> </div>
<div className="flex-auto"> <div style={{ flex: 1 }}>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-80 mb3"><Line /></div> <div style={{ marginBottom: '16px', width: '80%' }}><Line /></div>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-80 mb3"><Line /></div> <div style={{ marginBottom: '16px', width: '80%' }}><Line /></div>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-80 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
</div> </div>
</div> </div>
</Frame> </Frame>

21
client/patterns/media-object/Details.tsx
View File

@@ -9,19 +9,26 @@ import Square from '../../placeholders/Square';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Media object"> <DetailsLayout title="Media object">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex items-start pa3"> <div
<div className="w4 h4 mr3"> style={{
alignItems: 'flex-start',
display: 'flex',
height: '100%',
padding: '16px',
}}
>
<div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
<Square /> <Square />
</div> </div>
<div className="flex-auto"> <div style={{ flex: 1 }}>
<div className="w-80 mb4"> <div style={{ marginBottom: '32px', width: '80%' }}>
<Rectangle /> <Rectangle />
</div> </div>
<div className="mb4"><Block numberOfBlocks={20} /></div> <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
<div className="mb4"><Block numberOfBlocks={15} /></div> <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
</div> </div>
</div> </div>
)} )}

55
client/patterns/menu/Cover.tsx
View File

@@ -6,16 +6,57 @@ import Line from '../../placeholders/Line';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center pa3"> <div
<div className="b--black-30 ba br2 flex flex-column h-100 w-100"> style={{
<div className="b--black-30 bb flex items-center ph2" style={{ flex: 1 }}> alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flexDirection: 'column',
height: '100%',
width: '100%',
}}
>
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
flex: 1,
padding: '0 8px',
}}
>
<Line /> <Line />
</div> </div>
<div className="b--black-30 bb flex items-center ph2" style={{ flex: 1 }}> <div
<div className="w-80"><Line /></div> style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
flex: 1,
padding: '0 8px',
}}
>
<div style={{ width: '80%' }}><Line /></div>
</div> </div>
<div className="flex items-center ph2" style={{ flex: 1 }}> <div
<div className="w-60"><Line /></div> style={{
alignItems: 'center',
display: 'flex',
flex: 1,
padding: '0 8px',
}}
>
<div style={{ width: '60%' }}><Line /></div>
</div> </div>
</div> </div>
</div> </div>

116
client/patterns/menu/Details.tsx
View File

@@ -1,5 +1,7 @@
import React from 'react'; import React from 'react';
import './menu.css';
import RelatedPatterns from '../../components/RelatedPatterns'; import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import DetailsLayout from '../../layouts/DetailsLayout';
@@ -10,40 +12,116 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Menu"> <DetailsLayout title="Menu">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="b--black-30 ba br2 flex flex-column w-40"> style={{
<div className="flex items-center h2 ph2 hover-bg-black-10"> alignItems: 'center',
<div className="w-40"><Rectangle /></div> display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
width: '40%',
}}
>
<div
className="menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
padding: '0 8px',
}}
>
<div style={{ width: '40%' }}><Rectangle /></div>
</div> </div>
<div className="flex items-center h2 ph2 hover-bg-black-10"> <div
className="menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
padding: '0 8px',
}}
>
<Circle /> <Circle />
<div className="w-50 ml1"><Rectangle /></div> <div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
</div> </div>
<div className="flex items-center justify-between h2 ph2 hover-bg-black-10"> <div
<div className="w-30"><Rectangle /></div> className="menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
justifyContent: 'space-between',
padding: '0 8px',
}}
>
<div style={{ width: '30%' }}><Rectangle /></div>
<div>Ctrl + X</div> <div>Ctrl + X</div>
</div> </div>
<div className="flex items-center justify-between h2 ph2 hover-bg-black-10"> <div
<div className="w-70"><Rectangle /></div> className="menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
justifyContent: 'space-between',
padding: '0 8px',
}}
>
<div style={{ width: '70%' }}><Rectangle /></div>
<div>Ctrl + C</div> <div>Ctrl + C</div>
</div> </div>
<div className="flex items-center justify-between h2 ph2 hover-bg-black-10"> <div
<div className="w-20"><Rectangle /></div> className="menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
justifyContent: 'space-between',
padding: '0 8px',
}}
>
<div style={{ width: '20%' }}><Rectangle /></div>
<Circle /> <Circle />
</div> </div>
<div className="flex items-center justify-between h2 ph2 hover-bg-black-10"> <div
<div className="flex items-center w-80"> className="menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
justifyContent: 'space-between',
padding: '0 8px',
}}
>
<div style={{ alignItems: 'center', display: 'flex', width: '80%' }}>
<Circle /> <Circle />
<div className="w-50 ml1"><Rectangle /></div> <div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
</div> </div>
<Circle /> <Circle />
</div> </div>
<div className="b--black-30 bb" style={{ height: '1px' }} /> <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', height: '1px' }} />
<div className="flex items-center justify-between h2 ph2 hover-bg-black-10"> <div
<div className="w-40"><Rectangle /></div> className="menu-item"
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
justifyContent: 'space-between',
padding: '0 8px',
}}
>
<div style={{ width: '40%' }}><Rectangle /></div>
<div>Ctrl + V</div> <div>Ctrl + V</div>
</div> </div>
</div> </div>

3
client/patterns/menu/menu.css Normal file
View File

@@ -0,0 +1,3 @@
.menu-item:hover {
background-color: rgba(0, 0, 0, 0.1);
}

55
client/patterns/modal/Cover.tsx
View File

@@ -7,21 +7,50 @@ import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="flex flex-column h-100 items-center justify-center pa3"> <div
<div className="b--black-30 ba br2 w-100"> style={{
<div className="flex items-center justify-between ph1"> alignItems: 'center',
<div className="w-60"><Rectangle height={2} /></div> display: 'flex',
<div className="black-70">&times;</div> flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
width: '100%',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'space-between',
padding: '0 4px',
}}
>
<div style={{ width: '60%' }}><Rectangle height={2} /></div>
<div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>&times;</div>
</div> </div>
<div className="pa1"> <div style={{ padding: '4px' }}>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-80 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
<div className="w-60 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
<div className="w-40"><Line /></div> <div style={{ width: '40%' }}><Line /></div>
</div> </div>
<div className="flex items-center justify-end pa1"> <div
<div className="w-33 mr2"><Rectangle height={8} /></div> style={{
<div className="w-33"><Rectangle height={8} /></div> alignItems: 'center',
display: 'flex',
justifyContent: 'flex-end',
padding: '4px',
}}
>
<div style={{ marginRight: '8px', width: '33.3333%' }}><Rectangle height={8} /></div>
<div style={{ width: '33.3333%' }}><Rectangle height={8} /></div>
</div> </div>
</div> </div>
</div> </div>

52
client/patterns/modal/Details.tsx
View File

@@ -9,24 +9,54 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Modal"> <DetailsLayout title="Modal">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="b--black-30 ba br2 w-50"> style={{
<div className="flex items-center justify-between bb b--black-30 pa3"> alignItems: 'center',
<div className="w-60"><Rectangle /></div> display: 'flex',
<div className="black-70"> flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
width: '50%',
}}
>
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'space-between',
padding: '16px',
}}
>
<div style={{ width: '60%' }}><Rectangle /></div>
<div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>
<Circle /> <Circle />
</div> </div>
</div> </div>
<div className="pa3"> <div style={{ padding: '16px' }}>
<div className="mb3"><Block numberOfBlocks={10} /></div> <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
<Block numberOfBlocks={5} /> <Block numberOfBlocks={5} />
</div> </div>
<div className="flex justify-end bt b--black-30 pa3"> <div
<div className="w-30 mr2"><Rectangle height={32} /></div> style={{
<div className="w-30"><Rectangle height={32} /></div> borderTop: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'flex-end',
padding: '16px',
}}
>
<div style={{ marginRight: '8px', width: '30%' }}><Rectangle height={32} /></div>
<div style={{ width: '30%' }}><Rectangle height={32} /></div>
</div> </div>
</div> </div>
</div> </div>

27
client/patterns/notification/Cover.tsx
View File

@@ -6,10 +6,29 @@ import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="flex items-center justify-between ba b--black-30 br2 w-80 pa2"> style={{
<div className="w-60"><Rectangle /></div> alignItems: 'center',
<div className="black-70">&times;</div> display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
justifyContent: 'space-between',
padding: '8px',
width: '80%',
}}
>
<div style={{ width: '60%' }}><Rectangle /></div>
<div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>&times;</div>
</div> </div>
</div> </div>
</Frame> </Frame>

38
client/patterns/notification/Details.tsx
View File

@@ -8,15 +8,41 @@ import Circle from '../../placeholders/Circle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Notification"> <DetailsLayout title="Notification">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="b--black-30 ba br2 flex justify-between w-60"> style={{
<div className="pa3 w-80"><Block numberOfBlocks={5} /></div> alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
justifyContent: 'space-between',
width: '60%',
}}
>
<div style={{ padding: '16px', width: '80%' }}><Block numberOfBlocks={5} /></div>
<button <button
className="black-30 bn f2 flex h2 items-center justify-center w2" style={{
style={{ marginRight: '1px' }} alignItems: 'center',
borderColor: 'transparent',
color: 'rgba(0, 0, 0, .3)',
display: 'flex',
fontSize: '36px',
height: '32px',
justifyContent: 'center',
marginRight: '1px',
width: '32px',
}}
> >
<Circle /> <Circle />
</button> </button>

54
client/patterns/pagination/Cover.tsx
View File

@@ -6,16 +6,54 @@ import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center pa2"> <div
<div className="b--black-30 ba br-pill flex"> style={{
<div className="b--black-30 br flex items-center justify-center pa2"> alignItems: 'center',
<Circle size={4} /> display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
display: 'flex',
}}
>
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle size={8} />
</div> </div>
<div className="b--black-30 br flex items-center justify-center pa2"> <div
<Circle size={4} /> style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle size={8} />
</div> </div>
<div className="flex items-center justify-center pa2"> <div
<Circle size={4} /> style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle size={8} />
</div> </div>
</div> </div>
</div> </div>

82
client/patterns/pagination/Details.tsx
View File

@@ -8,27 +8,91 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Pagination"> <DetailsLayout title="Pagination">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center pa3"> <div
<div className="b--black-30 ba br2 flex"> style={{
<div className="b--black-30 br flex items-center justify-center pa2 w4"> alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
}}
>
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
width: '128px',
}}
>
<Rectangle /> <Rectangle />
</div> </div>
<div className="b--black-30 br flex items-center justify-center pa2"> <div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle size={16} /> <Circle size={16} />
</div> </div>
<div className="b--black-30 br flex items-center justify-center pa2"> <div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle size={16} /> <Circle size={16} />
</div> </div>
<div className="b--black-30 br flex items-center justify-center pa2"> <div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle size={16} /> <Circle size={16} />
</div> </div>
<div className="b--black-30 br flex items-center justify-center pa2"> <div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle size={16} /> <Circle size={16} />
</div> </div>
<div className="flex items-center justify-center pa2 w3"> <div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
padding: '8px',
width: '64px',
}}
>
<Rectangle /> <Rectangle />
</div> </div>
</div> </div>

42
client/patterns/previous-next-buttons/Cover.tsx
View File

@@ -6,15 +6,41 @@ import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="flex items-center justify-between pa2 w-100"> style={{
<div className="b--black-30 ba br2 flex flex-row items-center pa1 w-40"> alignItems: 'center',
<div className="mr1">&lt;</div> display: 'flex',
<Rectangle /> flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'space-between',
width: '100%',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
padding: '4px 8px',
}}
>
&lt;
</div> </div>
<div className="b--black-30 ba br2 flex flex-row items-center pa1 w-40"> <div
<Rectangle /> style={{
<div className="ml1">&gt;</div> border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
padding: '4px 8px',
}}
>
&gt;
</div> </div>
</div> </div>
</div> </div>

52
client/patterns/previous-next-buttons/Details.tsx
View File

@@ -7,19 +7,55 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Previous and next buttons"> <DetailsLayout title="Previous and next buttons">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="w-50"> style={{
<div className="flex items-center justify-between pa2 w-100 h2"> alignItems: 'center',
<a className="b--black-30 ba br2 flex flex-row pa2 items-center w-30"> display: 'flex',
<div className="mr2">&lt;</div> flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '50%' }}>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '32px',
justifyContent: 'space-between',
padding: '8px',
width: '100%',
}}
>
<a
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
padding: '8px',
width: '30%',
}}
>
<div style={{ marginRight: '8px' }}>&lt;</div>
<Rectangle /> <Rectangle />
</a> </a>
<a className="b--black-30 ba br2 flex flex-row pa2 items-center w-30"> <a
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
padding: '8px',
width: '30%',
}}
>
<Rectangle /> <Rectangle />
<div className="ml2">&gt;</div> <div style={{ marginLeft: '8px' }}>&gt;</div>
</a> </a>
</div> </div>
</div> </div>

80
client/patterns/pricing-table/Cover.tsx
View File

@@ -8,41 +8,75 @@ import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex items-center justify-center ph2">
<div <div
className="ba br2 b--black-30 flex flex-column items-center justify-center pa1 mr1" style={{
style={{ flex: 1 }} alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
> >
<div className="mb1"><Circle /></div> <div
<div className="mb1 w-100"> style={{
<div className="w-100 mb1"><Line /></div> alignItems: 'center',
<div className="w-100 mb1"><Line /></div> border: '1px solid rgba(0, 0, 0, 0.3)',
<div className="w-80"><Line /></div> borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
marginRight: '4px',
padding: '4px',
}}
>
<div style={{ marginBottom: '4px' }}><Circle /></div>
<div style={{ marginBottom: '4px', width: '100%' }}>
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div style={{ width: '80%' }}><Line /></div>
</div> </div>
<Rectangle /> <Rectangle />
</div> </div>
<div <div
className="ba br2 b--black-30 flex flex-column items-center justify-center pa1 mr1" style={{
style={{ flex: 1 }} alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
marginRight: '4px',
padding: '4px',
}}
> >
<div className="mb1"><Circle /></div> <div style={{ marginBottom: '4px' }}><Circle /></div>
<div className="mb1 w-100"> <div style={{ marginBottom: '4px', width: '100%' }}>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-60 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
<div className="w-80 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-80"><Line /></div> <div style={{ width: '80%' }}><Line /></div>
</div> </div>
<Rectangle /> <Rectangle />
</div> </div>
<div <div
className="ba br2 b--black-30 flex flex-column items-center justify-center pa1" style={{
style={{ flex: 1 }} alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
padding: '4px',
}}
> >
<div className="mb1"><Circle /></div> <div style={{ marginBottom: '4px' }}><Circle /></div>
<div className="mb1 w-100"> <div style={{ marginBottom: '4px', width: '100%' }}>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-80"><Line /></div> <div style={{ width: '80%' }}><Line /></div>
</div> </div>
<Rectangle /> <Rectangle />
</div> </div>

90
client/patterns/pricing-table/Details.tsx
View File

@@ -9,37 +9,85 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Pricing table"> <DetailsLayout title="Pricing table">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex items-center justify-center pa3">
<div className="w-60 flex items-center justify-center">
<div <div
className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2" style={{
style={{ flex: 1 }} alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '16px',
}}
> >
<div className="mb3 w-60"><Rectangle /></div> <div
<div className="mb3"><Circle size={64} /></div> style={{
<div className="mb3 w-100"><Block numberOfBlocks={10} /></div> alignItems: 'center',
<div className="w-40"><Rectangle height={32} /></div> display: 'flex',
justifyContent: 'center',
width: '60%',
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
margin: '0 8px',
padding: '16px',
}}
>
<div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
<div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
<div style={{ marginBottom: '16px', width: '100%' }}>
<Block numberOfBlocks={10} />
</div>
<div style={{ width: '40%' }}><Rectangle height={32} /></div>
</div> </div>
<div <div
className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2" style={{
style={{ flex: 1 }} alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
margin: '0 8px',
padding: '16px',
}}
> >
<div className="mb3 w-60"><Rectangle /></div> <div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
<div className="mb3"><Circle size={64} /></div> <div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
<div className="mb3 w-100"><Block numberOfBlocks={20} /></div> <div style={{ marginBottom: '16px', width: '100%' }}>
<div className="w-40"><Rectangle height={32} /></div> <Block numberOfBlocks={20} />
</div>
<div style={{ width: '40%' }}><Rectangle height={32} /></div>
</div> </div>
<div <div
className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2" style={{
style={{ flex: 1 }} alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
margin: '0 8px',
padding: '16px',
}}
> >
<div className="mb3 w-60"><Rectangle /></div> <div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
<div className="mb3"><Circle size={64} /></div> <div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
<div className="mb3 w-100"><Block numberOfBlocks={10} /></div> <div style={{ marginBottom: '16px', width: '100%' }}>
<div className="w-40"><Rectangle height={32} /></div> <Block numberOfBlocks={10} />
</div>
<div style={{ width: '40%' }}><Rectangle height={32} /></div>
</div> </div>
</div> </div>
</div> </div>

30
client/patterns/progress-bar/Cover.tsx
View File

@@ -5,9 +5,33 @@ import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center pa2"> <div
<div className="h1 w-100 br-pill bg-black-10 pa1"> style={{
<div className="w-40 br-pill h-100 bg-black-30" /> alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '9999px',
height: '16px',
padding: '4px',
width: '100%',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
height: '100%',
width: '40%',
}}
/>
</div> </div>
</div> </div>
</Frame> </Frame>

36
client/patterns/progress-bar/Details.tsx
View File

@@ -12,14 +12,40 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Progress bar"> <DetailsLayout title="Progress bar">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="h1 w-50 br-pill bg-black-10">
<div <div
className="br-pill h-100 bg-blue flex items-center justify-center pa1 white f7" style={{
style={{ width: `${progress}%` }} alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '9999px',
height: '16px',
width: '50%',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: '#357EDD',
borderRadius: '9999px',
color: '#FFF',
display: 'flex',
fontSize: '12px',
height: '100%',
justifyContent: 'center',
padding: '4px',
width: `${progress}%`,
}}
> >
{progress}% {progress}%
</div> </div>

49
client/patterns/property-list/Cover.tsx
View File

@@ -7,18 +7,51 @@ import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center pa3"> <div
<div className="w-100"> style={{
<div className="bb b--black-30 pv1 flex items-center justify-between"> alignItems: 'center',
<div className="w-60"><Rectangle height={8} /></div> display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '100%' }}>
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'space-between',
padding: '4px 0',
}}
>
<div style={{ width: '60%' }}><Rectangle height={8} /></div>
<Circle size={12} /> <Circle size={12} />
</div> </div>
<div className="bb b--black-30 pv1 flex items-center justify-between"> <div
<div className="w-20"><Rectangle height={8} /></div> style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'space-between',
padding: '4px 0',
}}
>
<div style={{ width: '20%' }}><Rectangle height={8} /></div>
<Circle size={12} /> <Circle size={12} />
</div> </div>
<div className="bb b--black-30 pv1 flex items-center justify-between"> <div
<div className="w-40"><Rectangle height={8} /></div> style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'space-between',
padding: '4px 0',
}}
>
<div style={{ width: '40%' }}><Rectangle height={8} /></div>
<Circle size={12} /> <Circle size={12} />
</div> </div>
</div> </div>

13
client/patterns/property-list/Details.tsx
View File

@@ -28,10 +28,19 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Property list"> <DetailsLayout title="Property list">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '40%' }}> <div style={{ width: '40%' }}>
<Item> <Item>
<dt style={{ width: '80%' }}><Rectangle /></dt> <dt style={{ width: '80%' }}><Rectangle /></dt>

43
client/patterns/questions-and-answers/Cover.tsx
View File

@@ -8,21 +8,44 @@ import Triangle from '../../placeholders/Triangle';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center pa2"> <div
<div className="w-80"> style={{
<div className="flex items-center justify-between mb2"> alignItems: 'center',
<div className="w-60"><Rectangle height={4} /></div> display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '80%' }}>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'space-between',
marginBottom: '8px',
}}
>
<div style={{ width: '60%' }}><Rectangle height={4} /></div>
<Triangle size={6} corner="b" /> <Triangle size={6} corner="b" />
</div> </div>
<div> <div>
<div className="flex items-center justify-between mb1"> <div
<div className="w-40"><Rectangle height={4} /></div> style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'space-between',
marginBottom: '4px',
}}
>
<div style={{ width: '40%' }}><Rectangle height={4} /></div>
<Triangle size={6} corner="t" /> <Triangle size={6} corner="t" />
</div> </div>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-80 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
<div className="w-60 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
<div className="w-40"><Line /></div> <div style={{ width: '40%' }}><Line /></div>
</div> </div>
</div> </div>
</div> </div>

50
client/patterns/questions-and-answers/Details.tsx
View File

@@ -20,7 +20,13 @@ const Details: React.FC<{}> = () => {
return ( return (
<div> <div>
<div <div
className="flex items-center justify-between pointer mv3" style={{
alignItems: 'center',
cursor: 'pointer',
display: 'flex',
justifyContent: 'space-between',
padding: '16px 0',
}}
onClick={click} onClick={click}
> >
{title} {title}
@@ -33,33 +39,51 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Questions and answers"> <DetailsLayout title="Questions and answers">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="w-60"> style={{
<div className="mb3 bt bb b--black-30"> alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '60%' }}>
<div
style={{
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
}}
>
<Item <Item
index={0} index={0}
title={<div className="w-40"><Rectangle /></div>} title={<div style={{ width: '40%' }}><Rectangle /></div>}
> >
<div className="mb3"><Block numberOfBlocks={10} /></div> <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
</Item> </Item>
</div> </div>
<div className="mb3 bb b--black-30"> <div
style={{
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
}}
>
<Item <Item
index={1} index={1}
title={<div className="w-80"><Rectangle /></div>} title={<div style={{ width: '80%' }}><Rectangle /></div>}
> >
<div className="mb3"><Block numberOfBlocks={15} /></div> <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
</Item> </Item>
</div> </div>
<div className="bb b--black-30"> <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
<Item <Item
index={2} index={2}
title={<div className="w-60"><Rectangle /></div>} title={<div style={{ width: '60%' }}><Rectangle /></div>}
> >
<div className="mb3"><Block numberOfBlocks={10} /></div> <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
</Item> </Item>
</div> </div>
</div> </div>

35
client/patterns/radio-switch/Cover.tsx
View File

@@ -6,12 +6,39 @@ import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center pa2"> <div
<div className="w-80 flex items-center justify-center b--black-30 br-pill ba pa1"> style={{
<div className="pa1" style={{ flex: 1 }}> alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
display: 'flex',
justifyContent: 'center',
padding: '4px',
width: '80%',
}}
>
<div style={{ flex: 1, padding: '4px' }}>
<Rectangle /> <Rectangle />
</div> </div>
<div className="pa1 br-pill bg-black-10 h-100" style={{ flex: 1 }} /> <div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '9999px',
flex: 1,
height: '100%',
padding: '4px',
}}
/>
</div> </div>
</div> </div>
</Frame> </Frame>

107
client/patterns/radio-switch/Details.tsx
View File

@@ -12,23 +12,73 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Radio switch"> <DetailsLayout title="Radio switch">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="inline-flex br-pill bg-black-10 pa1">
<label className={`pointer pv3 ph2 br-pill ${isFirstChecked ? 'bg-blue white' : ''}`}>
<input type="radio" className="dn" checked={isFirstChecked} onChange={toggle} />
<div <div
className={`w3 br1 ${isFirstChecked ? 'bg-white' : 'bg-black-20'}`} style={{
style={{ height: '8px' }} alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '9999px',
display: 'inline-flex',
padding: '4px',
}}
>
<label
style={{
backgroundColor: isFirstChecked ? '#357EDD' : '',
borderRadius: '9999px',
color: isFirstChecked ? '#FFF' : '',
cursor: 'pointer',
padding: '16px 8px',
}}
>
<input
type="radio"
style={{ display: 'none' }}
checked={isFirstChecked}
onChange={toggle}
/>
<div
style={{
backgroundColor: isFirstChecked ? '#FFF' : 'rgba(0, 0, 0, 0.2)',
borderRadius: '4px',
height: '8px',
width: '64px',
}}
/> />
</label> </label>
<label className={`pointer pv3 ph2 br-pill ${isFirstChecked ? '' : 'bg-blue white'}`}> <label
<input type="radio" className="dn" checked={!isFirstChecked} onChange={toggle} /> style={{
backgroundColor: isFirstChecked ? '' : '#357EDD',
borderRadius: '9999px',
color: isFirstChecked ? '' : '#FFF',
cursor: 'pointer',
padding: '16px 8px',
}}
>
<input
type="radio"
style={{ display: 'none' }}
checked={!isFirstChecked}
onChange={toggle}
/>
<div <div
className={`w3 br1 ${isFirstChecked ? 'bg-black-20' : 'bg-white'}`} style={{
style={{ height: '8px' }} backgroundColor: isFirstChecked ? 'rgba(0, 0, 0, 0.2)' : '#FFF',
borderRadius: '4px',
height: '8px',
width: '64px',
}}
/> />
</label> </label>
</div> </div>
@@ -67,14 +117,37 @@ const Details: React.FC<{}> = () => {
<section> <section>
<Heading title="Use cases" /> <Heading title="Use cases" />
<div className="pa4"> <div style={{ padding: '32px' }}>
<div className="inline-flex br-pill bg-black-10 pa1"> <div
<label className="pointer pv1 ph2 br-pill flex bg-blue white"> style={{
<input type="radio" className="dn" /> backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '9999px',
display: 'inline-flex',
padding: '4px',
}}
>
<label
style={{
backgroundColor: '#357EDD',
borderRadius: '9999px',
color: '#FFF',
cursor: 'pointer',
display: 'flex',
padding: '4px 8px',
}}
>
<input type="radio" style={{ display: 'none' }} />
Monthly Monthly
</label> </label>
<label className="pointer pv1 ph2 br-pill flex"> <label
<input type="radio" className="dn" /> style={{
borderRadius: '9999px',
cursor: 'pointer',
display: 'flex',
padding: '4px 8px',
}}
>
<input type="radio" style={{ display: 'none' }} />
Yearly Yearly
</label> </label>
</div> </div>

28
client/patterns/same-height-columns/Cover.tsx
View File

@@ -7,26 +7,26 @@ import Square from '../../placeholders/Square';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="flex h-100 pa2"> <div style={{ display: 'flex', height: '100%', padding: '8px' }}>
<div className="mh1" style={{ flex: 1 }}> <div style={{ flex: 1, margin: '0 4px' }}>
<div className="w2 h2 mb1"> <div style={{ height: '32px', marginBottom: '4px', width: '32px' }}>
<Square /> <Square />
</div> </div>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-80 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
<div className="w-60"><Line /></div> <div style={{ width: '60%' }}><Line /></div>
</div> </div>
<div className="mh1" style={{ flex: 1 }}> <div style={{ flex: 1, margin: '0 4px' }}>
<div className="w2 h2 mb1"> <div style={{ height: '32px', marginBottom: '4px', width: '32px' }}>
<Square /> <Square />
</div> </div>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-80 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
<div className="w-60 mb2"><Line /></div> <div style={{ marginBottom: '8px', width: '60%' }}><Line /></div>
<div className="w-100 mb1"><Line /></div> <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div className="w-60"><Line /></div> <div style={{ width: '60%' }}><Line /></div>
</div> </div>
</div> </div>
</Frame> </Frame>

64
client/patterns/same-height-columns/Details.tsx
View File

@@ -8,37 +8,73 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Same height columns"> <DetailsLayout title="Same height columns">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center pa3"> <div
<div className="flex h-100 w-100"> style={{
<div className="b--black-20 ba br2 mh2 flex flex-column" style={{ flex: 1 }}> alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ display: 'flex', height: '100%', width: '100%' }}>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
margin: '0 8px',
}}
>
<Rectangle height={200} /> <Rectangle height={200} />
<div className="pa3" style={{ flex: 1 }}> <div style={{ flex: 1, padding: '16px' }}>
<Block numberOfBlocks={10} /> <Block numberOfBlocks={10} />
</div> </div>
<div className="pa3 w4"> <div style={{ padding: '16px', width: '128px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
</div> </div>
<div className="b--black-20 ba br2 mh2 flex flex-column" style={{ flex: 1 }}> <div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
margin: '0 8px',
}}
>
<Rectangle height={200} /> <Rectangle height={200} />
<div className="pa3" style={{ flex: 1 }}> <div style={{ flex: 1, padding: '16px' }}>
<div className="mb3"><Block numberOfBlocks={15} /></div> <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
<Block numberOfBlocks={5} /> <Block numberOfBlocks={5} />
</div> </div>
<div className="pa3 w4"> <div style={{ padding: '16px', width: '128px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
</div> </div>
<div className="b--black-20 ba br2 mh2 flex flex-column" style={{ flex: 1 }}> <div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderRadius: '4px',
display: 'flex',
flex: 1,
flexDirection: 'column',
margin: '0 8px',
}}
>
<Rectangle height={200} /> <Rectangle height={200} />
<div className="pa3" style={{ flex: 1 }}> <div style={{ flex: 1, padding: '16px' }}>
<div className="mb3"><Block numberOfBlocks={5} /></div> <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={5} /></div>
<Block numberOfBlocks={10} /> <Block numberOfBlocks={10} />
</div> </div>
<div className="pa3 w4"> <div style={{ padding: '16px', width: '128px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
</div> </div>

23
client/patterns/search-box/Cover.tsx
View File

@@ -6,8 +6,27 @@ import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center pa2"> <div
<div className="w-100 flex flex-row items-center justify-end ba b--black-30 br2 pa1"> style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
justifyContent: 'flex-end',
padding: '4px',
width: '100%',
}}
>
<Circle /> <Circle />
</div> </div>
</div> </div>

51
client/patterns/search-box/Details.tsx
View File

@@ -7,31 +7,60 @@ import Circle from '../../placeholders/Circle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Search box"> <DetailsLayout title="Search box">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="w5"> style={{
<div className="mb3 b--black-30 ba br1 flex"> alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '256px' }}>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '2px',
display: 'flex',
marginBottom: '16px',
}}
>
<input <input
type="text" type="text"
placeholder="Search" placeholder="Search"
className="pa1 b--transparent" style={{
style={{ flex: 1 }} borderColor: 'transparent',
flex: 1,
padding: '4px',
}}
/> />
<div className="pa2"> <div style={{ padding: '8px' }}>
<Circle /> <Circle />
</div> </div>
</div> </div>
<div className="b--black-30 ba br1 flex flex-row-reverse"> <div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '2px',
display: 'flex',
flexDirection: 'row-reverse',
}}
>
<input <input
type="text" type="text"
placeholder="Search" placeholder="Search"
className="pa1 b--transparent" style={{
style={{ flex: 1 }} borderColor: 'transparent',
flex: 1,
padding: '4px',
}}
/> />
<div className="pa2"> <div style={{ padding: '8px' }}>
<Circle /> <Circle />
</div> </div>
</div> </div>

22
client/patterns/separator/Cover.tsx
View File

@@ -7,10 +7,26 @@ import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="flex items-center h1 w-80"> style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '16px',
width: '80%',
}}
>
<div style={{ flex: 1 }}><Line /></div> <div style={{ flex: 1 }}><Line /></div>
<div className="w-25 mh1"><Rectangle /></div> <div style={{ margin: '0 4px', width: '25%' }}><Rectangle /></div>
<div style={{ flex: 1 }}><Line /></div> <div style={{ flex: 1 }}><Line /></div>
</div> </div>
</div> </div>

43
client/patterns/separator/Details.tsx
View File

@@ -7,15 +7,46 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Separator"> <DetailsLayout title="Separator">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="flex items-center w-60 relative"> style={{
<div className="absolute bg-white ph2" style={{ left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }}> alignItems: 'center',
<div className="w4"><Rectangle height={16} /></div> display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
position: 'relative',
width: '60%',
}}
>
<div
style={{
backgroundColor: '#FFF',
left: '50%',
padding: '0 8px',
position: 'absolute',
top: '50%',
transform: 'translate(-50%, -50%)',
}}
>
<div style={{ width: '128px' }}><Rectangle height={16} /></div>
</div> </div>
<div className="bb b--black-30 w-100" style={{ height: '1px' }} /> <div
style={{
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
height: '1px',
width: '100%',
}}
/>
</div> </div>
</div> </div>
)} )}

36
client/patterns/sidebar/Cover.tsx
View File

@@ -6,16 +6,34 @@ import Line from '../../placeholders/Line';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex"> <div style={{ display: 'flex', height: '100%' }}>
<div className="b--black-30 br flex flex-column justify-end pa1 w-30"> <div
<div className="mb1"><Line /></div> style={{
<div className="w-80"><Line /></div> borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
padding: '4px',
width: '30%',
}}
>
<div style={{ marginBottom: '4px' }}><Line /></div>
<div style={{ width: '80%' }}><Line /></div>
</div> </div>
<div className="flex-grow-1 pa2 b--black-30 br bw2"> <div
<div className="mb2"><Line /></div> style={{
<div className="mb2"><Line /></div> borderRight: '1px solid rgba(0, 0, 0, 0.3)',
<div className="mb2"><Line /></div> borderWidth: '4px',
<div className="w-80"><Line /></div> display: 'flex',
flex: 1,
flexDirection: 'column',
padding: '8px',
}}
>
<div style={{ marginBottom: '8px' }}><Line /></div>
<div style={{ marginBottom: '8px' }}><Line /></div>
<div style={{ marginBottom: '8px' }}><Line /></div>
<div style={{ width: '80%' }}><Line /></div>
</div> </div>
</div> </div>
</Frame> </Frame>

44
client/patterns/sidebar/Details.tsx
View File

@@ -7,21 +7,36 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Sidebar"> <DetailsLayout title="Sidebar">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<div className="lh-copy mb3">Try to scroll the main content!</div> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex"> <div style={{ display: 'flex', height: '100%' }}>
<div className="b--black-30 br flex flex-column justify-end pa3 w-30"> <div
<div className="mb3"><Block numberOfBlocks={5} /></div> style={{
<div className="w-80"><Block numberOfBlocks={4} /></div> borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
padding: '16px',
width: '30%',
}}
>
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={5} /></div>
<div style={{ width: '80%' }}><Block numberOfBlocks={4} /></div>
</div> </div>
<div className="flex-grow-1 pa3 overflow-scroll"> <div
<div className="mb4"><Block numberOfBlocks={20} /></div> style={{
<div className="mb4"><Block numberOfBlocks={20} /></div> flex: 1,
<div className="mb4"><Block numberOfBlocks={20} /></div> overflow: 'scroll',
<div className="mb4"><Block numberOfBlocks={20} /></div> padding: '16px',
<div className="w-80"><Block numberOfBlocks={10} /></div> }}
>
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
<div style={{ width: '80%' }}><Block numberOfBlocks={10} /></div>
</div> </div>
</div> </div>
)} )}
@@ -34,7 +49,10 @@ const Details: React.FC<{}> = () => {
<!-- Main --> <!-- Main -->
<main style=" <main style="
flex-grow: 1; /* Take the remaining width */
flex: 1;
/* Make it scrollable */
overflow: scroll; overflow: scroll;
"> ">
... ...

35
client/patterns/simple-grid/Cover.tsx
View File

@@ -6,21 +6,30 @@ import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="w-80"> style={{
<div className="flex items-center mb1"> alignItems: 'center',
<div className="ph1" style={{ flex: '0 0 50%' }}><Rectangle /></div> display: 'flex',
<div className="ph1" style={{ flex: '1' }}><Rectangle /></div> flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '80%' }}>
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
<div style={{ flex: '0 0 50%', padding: '0 4px' }}><Rectangle /></div>
<div style={{ flex: '1', padding: '0 4px' }}><Rectangle /></div>
</div> </div>
<div className="flex items-center mb1"> <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
<div className="ph1" style={{ flex: '0 0 33%' }}><Rectangle /></div> <div style={{ flex: '0 0 33%', padding: '0 4px' }}><Rectangle /></div>
<div className="ph1" style={{ flex: '0 0 33%' }}><Rectangle /></div> <div style={{ flex: '0 0 33%', padding: '0 4px' }}><Rectangle /></div>
<div className="ph1" style={{ flex: '0 0 33%' }}><Rectangle /></div> <div style={{ flex: '0 0 33%', padding: '0 4px' }}><Rectangle /></div>
</div> </div>
<div className="flex items-center"> <div style={{ alignItems: 'center', display: 'flex' }}>
<div className="ph1" style={{ flex: '0 0 25%' }}><Rectangle /></div> <div style={{ flex: '0 0 25%', padding: '0 4px' }}><Rectangle /></div>
<div className="ph1" style={{ flex: '1' }}><Rectangle /></div> <div style={{ flex: '1', padding: '0 4px' }}><Rectangle /></div>
<div className="ph1" style={{ flex: '0 0 25%' }}><Rectangle /></div> <div style={{ flex: '0 0 25%', padding: '0 4px' }}><Rectangle /></div>
</div> </div>
</div> </div>
</div> </div>

61
client/patterns/simple-grid/Details.tsx
View File

@@ -7,76 +7,85 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Simple grid"> <DetailsLayout title="Simple grid">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="w-60"> style={{
<div className="flex" style={{ margin: '0 -8px 8px -8px' }}> alignItems: 'center',
<div className="ph2" style={{ flex: '1' }}> display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '60%' }}>
<div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
<div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
<div className="ph2" style={{ flex: '1' }}> <div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
</div> </div>
<div className="flex" style={{ margin: '0 -8px 32px -8px' }}> <div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
<div className="ph2" style={{ flex: '0 0 50%' }}> <div style={{ flex: '0 0 50%', padding: '0 8px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
<div className="ph2" style={{ flex: '1' }}> <div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
<div className="ph2" style={{ flex: '1' }}> <div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
</div> </div>
<div className="flex" style={{ margin: '0 -8px 8px -8px' }}> <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
<div className="ph2" style={{ flex: '1' }}> <div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
<div className="ph2" style={{ flex: '1' }}> <div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
<div className="ph2" style={{ flex: '1' }}> <div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
</div> </div>
<div className="flex" style={{ margin: '0 -8px 32px -8px' }}> <div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
<div className="ph2" style={{ flex: '0 0 33.3333%' }}> <div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
<div className="ph2" style={{ flex: '1' }}> <div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
</div> </div>
<div className="flex" style={{ margin: '0 -8px 8px -8px' }}> <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
<div className="ph2" style={{ flex: '1' }}> <div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
<div className="ph2" style={{ flex: '1' }}> <div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
<div className="ph2" style={{ flex: '1' }}> <div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
<div className="ph2" style={{ flex: '1' }}> <div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
</div> </div>
<div className="flex" style={{ margin: '0 -8px 0 -8px' }}> <div style={{ display: 'flex', margin: '0 -8px 0 -8px' }}>
<div className="ph2" style={{ flex: '0 0 25%' }}> <div style={{ flex: '0 0 25%', padding: '0 8px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
<div className="ph2" style={{ flex: '1' }}> <div style={{ flex: '1', padding: '0 8px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
<div className="ph2" style={{ flex: '0 0 33.3333%' }}> <div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
<Rectangle height={32} /> <Rectangle height={32} />
</div> </div>
</div> </div>

22
client/patterns/slider/Cover.tsx
View File

@@ -7,9 +7,25 @@ import Line from '../../placeholders/Line';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="flex items-center h1 w-80"> style={{
<div className="w-20"><Line /></div> alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '16px',
width: '80%',
}}
>
<div style={{ width: '20%' }}><Line /></div>
<Circle /> <Circle />
<div style={{ flex: 1 }}><Line /></div> <div style={{ flex: 1 }}><Line /></div>
</div> </div>

24
client/patterns/slider/Details.tsx
View File

@@ -8,12 +8,28 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Slider"> <DetailsLayout title="Slider">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="flex items-center h1 w5"> style={{
<div className="w-20"><Rectangle height={2} /></div> alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '16px',
width: '256px',
}}
>
<div style={{ width: '20%' }}><Rectangle height={2} /></div>
<Circle size={32} /> <Circle size={32} />
<div style={{ flex: 1 }}><Rectangle height={2} /></div> <div style={{ flex: 1 }}><Rectangle height={2} /></div>
</div> </div>

2
client/patterns/spin-button/Cover.tsx
View File

@@ -19,7 +19,7 @@ const Cover: React.FC<{}> = () => {
<div <div
style={{ style={{
border: '1px solid rgba(0, 0, 0, 0.3)', border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '2px', borderRadius: '4px',
display: 'flex', display: 'flex',
justifyContent: 'flex-end', justifyContent: 'flex-end',
width: '80%', width: '80%',

28
client/patterns/split-navigation/Cover.tsx
View File

@@ -6,11 +6,29 @@ import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="flex items-center w-80 b--black-30 ba br2 pa1"> style={{
<div className="w1 mr1"><Rectangle /></div> alignItems: 'center',
<div className="w1 mr1"><Rectangle /></div> display: 'flex',
<div className="w1 ml-auto"><Rectangle /></div> flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '8px',
display: 'flex',
padding: '4px',
width: '100%',
}}
>
<div style={{ marginRight: '4px', width: '16px' }}><Rectangle /></div>
<div style={{ marginRight: '4px', width: '16px' }}><Rectangle /></div>
<div style={{ marginLeft: 'auto', width: '16px' }}><Rectangle /></div>
</div> </div>
</div> </div>
</Frame> </Frame>

34
client/patterns/split-navigation/Details.tsx
View File

@@ -9,15 +9,35 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Split navigation"> <DetailsLayout title="Split navigation">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<ul className="list ma0 b--black-30 ba br3 flex items-center pa3 w-60"> style={{
<li className="w-20 mr1"><Rectangle /></li> alignItems: 'center',
<li className="w-10 mr1"><Rectangle /></li> display: 'flex',
<li className="w-20 mr1"><Rectangle /></li> flexDirection: 'column',
<li className="w-10 ml-auto"><Rectangle /></li> height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<ul
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '8px',
display: 'flex',
listStyleType: 'none',
margin: 0,
padding: '16px',
width: '60%',
}}
>
<li style={{ marginRight: '4px', width: '20%' }}><Rectangle /></li>
<li style={{ marginRight: '4px', width: '10%' }}><Rectangle /></li>
<li style={{ marginRight: '4px', width: '20%' }}><Rectangle /></li>
<li style={{ marginLeft: 'auto', width: '10%' }}><Rectangle /></li>
</ul> </ul>
</div> </div>
)} )}

35
client/patterns/split-screen/Cover.tsx
View File

@@ -7,17 +7,32 @@ import Line from '../../placeholders/Line';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex"> <div style={{ display: 'flex', height: '100%' }}>
<div className="b--black-30 br flex flex-column justify-center items-center" style={{ flex: 1 }}> <div
<div className="mb1"><Circle /></div> style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
}}
>
<div style={{ marginBottom: '4px' }}><Circle /></div>
</div> </div>
<div className="flex flex-column justify-center" style={{ flex: 1 }}> <div
<div className="pa2"> style={{
<div className="mb1 w-100"><Line /></div> flex: 1,
<div className="mb1 w-100"><Line /></div> flexDirection: 'column',
<div className="mb1 w-80"><Line /></div> justifyContent: 'center',
<div className="mb1 w-80"><Line /></div> }}
<div className="w-60"><Line /></div> >
<div style={{ padding: '8px' }}>
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
<div style={{ width: '60%' }}><Line /></div>
</div> </div>
</div> </div>
</div> </div>

33
client/patterns/split-screen/Details.tsx
View File

@@ -9,21 +9,34 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Split screen"> <DetailsLayout title="Split screen">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex"> <div style={{ display: 'flex', height: '100%' }}>
<div <div
className="b--black-30 br flex flex-column justify-center items-center" style={{
style={{ flex: 1 }} alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
}}
> >
<div className="mb3"><Circle size={128} /></div> <div style={{ marginBottom: '16px' }}><Circle size={128} /></div>
<div className="w-60"><Rectangle /></div> <div style={{ width: '60%' }}><Rectangle /></div>
</div> </div>
<div className="flex flex-column justify-center" style={{ flex: 1 }}> <div
<div className="pa4"> style={{
<div className="mb4"><Rectangle /></div> display: 'flex',
<div className="mb4"><Block numberOfBlocks={15} /></div> flex: 1,
flexDirection: 'column',
justifyContent: 'center',
}}
>
<div style={{ padding: '32px' }}>
<div style={{ marginBottom: '32px' }}><Rectangle /></div>
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
<Block numberOfBlocks={10} /> <Block numberOfBlocks={10} />
</div> </div>
</div> </div>

46
client/patterns/stepper-input/Cover.tsx
View File

@@ -5,11 +5,47 @@ import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex items-center justify-center pa2"> <div
<div className="b--black-30 ba br2 flex w-100 h1"> style={{
<div className="b--black-30 br flex items-center justify-center w1">-</div> alignItems: 'center',
<div className="flex-grow-1" /> display: 'flex',
<div className="b--black-30 bl flex items-center justify-center w1">+</div> height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
height: '24px',
width: '100%',
}}
>
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
width: '16px',
}}
>
-
</div>
<div style={{ flex: 1 }} />
<div
style={{
alignItems: 'center',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
justifyContent: 'center',
width: '16px',
}}
>
+
</div>
</div> </div>
</div> </div>
</Frame> </Frame>

68
client/patterns/stepper-input/Details.tsx
View File

@@ -1,5 +1,4 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import RelatedPatterns from '../../components/RelatedPatterns'; import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern'; import Pattern from '../../constants/Pattern';
@@ -14,25 +13,72 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Stepper input"> <DetailsLayout title="Stepper input">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<div className="lh-copy mb3">
The content of minus and plus buttons are centered by using the technique in the <Link to="/centering" className="link">Centering</Link> page.
</div>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="b--black-30 ba br2 flex h2 w4"> style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '8px',
display: 'flex',
height: '32px',
width: '128px',
}}
>
<button <button
className="bg-black-05 bn flex items-center justify-center pointer w2" style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.05)',
borderColor: 'transparent',
cursor: 'pointer',
display: 'flex',
justifyContent: 'center',
width: '32px',
}}
onClick={decrease} onClick={decrease}
> >
- -
</button> </button>
<div className="b--black-30 ba bb-0 bt-0 h-100" style={{ flex: 1 }}> <div
<input type="text" className="bn h-100 pa2 w-100" value={value} onChange={change} /> style={{
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
flex: 1,
height: '100%',
}}
>
<input
type="text"
style={{
borderColor: 'transparent',
height: '100%',
padding: '8px',
width: '100%',
}}
value={value}
onChange={change}
/>
</div> </div>
<button <button
className="bg-black-05 bn flex items-center justify-center pointer w2" style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.05)',
borderColor: 'transparent',
cursor: 'pointer',
display: 'flex',
justifyContent: 'center',
width: '32px',
}}
onClick={increase} onClick={increase}
> >
+ +

70
client/patterns/sticky-footer/Cover.tsx
View File

@@ -6,28 +6,58 @@ import Line from '../../placeholders/Line';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column"> <div
<div className="flex-shrink-0 b--black-30 br bw2"> style={{
<div className="w-100 flex items-center pa2"> display: 'flex',
<div className="w1"><Line /></div> flexDirection: 'column',
<div className="w1 ml-auto"><Line /></div> height: '100%',
<div className="w1 ml1"><Line /></div> }}
>
<div
style={{
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '4px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
padding: '8px',
width: '100%',
}}
>
<div style={{ width: '16px' }}><Line /></div>
<div style={{ marginLeft: 'auto', width: '16px' }}><Line /></div>
<div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
</div> </div>
</div>
<div
style={{
borderRight: '4px solid rgba(0, 0, 0, 0.3)',
flex: 1,
}}
>
<div style={{ padding: '8px' }}>
<div style={{ marginBottom: '8px', width: '64px' }}><Line /></div>
<div style={{ marginBottom: '8px', width: '64px' }}><Line /></div>
<div style={{ width: '32px' }}><Line /></div>
</div>
</div>
<div>
<Line /> <Line />
</div> <div
<div className="flex-grow-1 b--black-30 br bw2"> style={{
<div className="pa2"> alignItems: 'center',
<div className="w3 mb2"><Line /></div> display: 'flex',
<div className="w3 mb2"><Line /></div> padding: '8px',
<div className="w2"><Line /></div> width: '100%',
</div> }}
</div> >
<div className="flex-shrink-0"> <div style={{ width: '16px' }}><Line /></div>
<Line /> <div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
<div className="w-100 flex items-center pa2"> <div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
<div className="w1"><Line /></div>
<div className="w1 ml1"><Line /></div>
<div className="w1 ml1"><Line /></div>
</div> </div>
</div> </div>
</div> </div>

34
client/patterns/sticky-footer/Details.tsx
View File

@@ -8,21 +8,39 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Sticky footer"> <DetailsLayout title="Sticky footer">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<div className="lh-copy mb3"> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
The footer always sticks to the bottom if the main content is short. The footer always sticks to the bottom if the main content is short.
</div> </div>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column"> <div
<div className="flex-shrink-0 bb b--black-30 pa3"> style={{
<div className="w-50"><Rectangle /></div> display: 'flex',
flexDirection: 'column',
height: '100%',
}}
>
<div
style={{
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
flexShrink: 0,
padding: '16px',
}}
>
<div style={{ width: '50%' }}><Rectangle /></div>
</div> </div>
<div className="flex-grow-1 pa3"> <div style={{ flexGrow: 1, padding: '16px' }}>
<Block numberOfBlocks={20} /> <Block numberOfBlocks={20} />
</div> </div>
<div className="flex-shrink-0 bt b--black-30 pa3"> <div
<div className="w-40"><Rectangle /></div> style={{
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
flexShrink: 0,
padding: '16px',
}}
>
<div style={{ width: '40%' }}><Rectangle /></div>
</div> </div>
</div> </div>
)} )}

41
client/patterns/sticky-header/Cover.tsx
View File

@@ -6,20 +6,39 @@ import Line from '../../placeholders/Line';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column"> <div
<div className="flex-shrink-0"> style={{
<div className="w-100 flex items-center pa2"> display: 'flex',
<div className="w1"><Line /></div> flexDirection: 'column',
<div className="w1 ml-auto"><Line /></div> height: '100%',
<div className="w1 ml1"><Line /></div> }}
>
<div style={{ flexShrink: 0 }}>
<div
style={{
alignItems: 'center',
display: 'flex',
padding: '8px',
width: '100%',
}}
>
<div style={{ width: '16px' }}><Line /></div>
<div style={{ marginLeft: 'auto', width: '16px' }}><Line /></div>
<div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
</div> </div>
<Line /> <Line />
</div> </div>
<div className="flex-grow-1 b--black-30 br bw2"> <div
<div className="pa2"> style={{
<div className="w3 mb2"><Line /></div> borderRight: '1px solid rgba(0, 0, 0, 0.3)',
<div className="w3 mb2"><Line /></div> borderWidth: '4px',
<div className="w2"><Line /></div> flexGrow: 1,
}}
>
<div style={{ padding: '8px' }}>
<div style={{ marginBottom: '8px', width: '64px' }}><Line /></div>
<div style={{ marginBottom: '8px', width: '64px' }}><Line /></div>
<div style={{ width: '32px' }}><Line /></div>
</div> </div>
</div> </div>
</div> </div>

22
client/patterns/sticky-header/Details.tsx
View File

@@ -8,19 +8,27 @@ import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Sticky header"> <DetailsLayout title="Sticky header">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<div className="lh-copy mb3"> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Try to scroll the main content to see the header sticks to the top of page. Try to scroll the main content to see the header sticks to the top of page.
</div> </div>
<BrowserFrame <BrowserFrame
content={( content={(
<div> <div>
<div className="top-0 bg-white bb b--black-30 pa3" style={{ position: 'sticky' }}> <div
<div className="w-50"><Rectangle /></div> style={{
backgroundColor: '#FFF',
borderBottom: '1ox solid rgba(0, 0, 0, 0.3)',
padding: '16px',
position: 'sticky',
top: 0,
}}
>
<div style={{ width: '50%' }}><Rectangle /></div>
</div> </div>
<div className="pa3"> <div style={{ padding: '16px' }}>
<div className="mb4"><Block numberOfBlocks={20} /></div> <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
<div className="mb4"><Block numberOfBlocks={40} /></div> <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={40} /></div>
<div><Block numberOfBlocks={30} /></div> <div><Block numberOfBlocks={30} /></div>
</div> </div>
</div> </div>

32
client/patterns/switch/Cover.tsx
View File

@@ -5,9 +5,35 @@ import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center pa2"> <div
<div className="ba b--black-10 bg-black-30 br-pill h1 w2 flex justify-end"> style={{
<div className="bg-white br-pill w1 h-100" /> alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
border: '1px solid rgba(0, 0, 0, 0.1)',
borderRadius: '9999px',
display: 'flex',
height: '16px',
justifyContent: 'flex-end',
width: '32px',
}}
>
<div
style={{
backgroundColor: '#FFF',
borderRadius: '9999px',
height: '100%',
width: '16px',
}}
/>
</div> </div>
</div> </div>
</Frame> </Frame>

43
client/patterns/switch/Details.tsx
View File

@@ -11,17 +11,48 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Switch"> <DetailsLayout title="Switch">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<div className="lh-copy mb3"> <div style={{ lineHeight: 1.5, marginBottom: '16px'}}>
The checkbox is placed inside a label. So when clicking on the label, The checkbox is placed inside a label. So when clicking on the label,
the checkbox will be checked even though it's hidden. the checkbox will be checked even though it's hidden.
</div> </div>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<label className={`ba br-pill h2 w3 flex ${checked ? 'justify-end b--blue bg-blue' : 'b--black-30 bg-black-10'}`}> style={{
<input type="checkbox" className="dn" checked={checked} onChange={toggle} /> alignItems: 'center',
<div className={`bg-white br-pill w2 ${checked ? '' : 'ba b--black-30'}`} /> display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<label
style={{
backgroundColor: checked ? '#357EDD' : 'rgba(0, 0, 0, 0.1)',
border: `1px solid ${checked ? '#357EDD' : 'rgba(0, 0, 0, 0.3)'}`,
borderRadius: '9999px',
display: 'flex',
height: '32px',
justifyContent: checked ? 'flex-end' : '',
width: '64px',
}}
>
<input
type="checkbox"
style={{ display: 'none' }}
checked={checked}
onChange={toggle}
/>
<div
style={{
backgroundColor: '#FFF',
border: checked ? '' : '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
width: '32px',
}}
/>
</label> </label>
</div> </div>
)} )}

36
client/patterns/tab/Cover.tsx
View File

@@ -6,16 +6,40 @@ import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex items-center justify-center">
<div <div
className="ph2 pv1 ba b--black-30 br2 br--top" style={{
style={{ borderBottomColor: 'transparent' }} alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderBottomColor: 'transparent',
borderTopLeftRadius: '4px',
borderTopRightRadius: '4px',
padding: '4px 8px',
}}
> >
<Circle size={8} /> <Circle size={8} />
</div> </div>
<div className="ph2 pv1 bb b--black-30"><Circle size={8} /></div> <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', padding: '4px 8px' }}>
<div className="ph2 pv1 bb b--black-30"><Circle size={8} /></div> <Circle size={8} />
</div>
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', padding: '4px 8px' }}>
<Circle size={8} />
</div>
</div> </div>
</div> </div>
</Frame> </Frame>

35
client/patterns/tab/Details.tsx
View File

@@ -16,9 +16,13 @@ const Details: React.FC<{}> = () => {
const click = () => setActiveTab(tabIndex); const click = () => setActiveTab(tabIndex);
return ( return (
<div <div
className={`pointer pa3 b--black-30 ${isActive ? 'ba br2 br--top' : 'bb'}`}
style={{ style={{
borderBottomColor: isActive ? 'transparent' : '', [isActive ? 'border' : 'borderBottom']: '1px solid rgba(0, 0, 0, 0.3)',
borderBottomColor: isActive ? 'transparent' : 'rgba(0, 0, 0, 0.3)',
borderTopLeftRadius: '4px',
borderTopRightRadius: '4px',
cursor: 'pointer',
padding: '16px',
}} }}
onClick={click} onClick={click}
> >
@@ -29,23 +33,38 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Tab"> <DetailsLayout title="Tab">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="flex items-center justify-center"> style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
}}
>
<Tab tabIndex={0}> <Tab tabIndex={0}>
<div className="w3"> <div style={{ width: '64px' }}>
<Rectangle height={8} /> <Rectangle height={8} />
</div> </div>
</Tab> </Tab>
<Tab tabIndex={1}> <Tab tabIndex={1}>
<div className="w2"> <div style={{ width: '32px' }}>
<Rectangle height={8} /> <Rectangle height={8} />
</div> </div>
</Tab> </Tab>
<Tab tabIndex={2}> <Tab tabIndex={2}>
<div className="w4"> <div style={{ width: '128px' }}>
<Rectangle height={8} /> <Rectangle height={8} />
</div> </div>
</Tab> </Tab>

31
client/patterns/toggle-password-visibility/Cover.tsx
View File

@@ -6,12 +6,31 @@ import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center pa2"> <div
<div className="w-100 flex flex-row items-center justify-between ba b--black-30 br2 pa1"> style={{
<div className="flex items-center"> alignItems: 'center',
<div className="mr1"><Circle size={8} /></div> display: 'flex',
<div className="mr1"><Circle size={8} /></div> flexDirection: 'column',
<div className="mr1"><Circle size={8} /></div> height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
justifyContent: 'space-between',
padding: '4px',
width: '100%',
}}
>
<div style={{ alignItems: 'center', display: 'flex' }}>
<div style={{ marginRight: '4px' }}><Circle size={8} /></div>
<div style={{ marginRight: '4px' }}><Circle size={8} /></div>
<div style={{ marginRight: '4px' }}><Circle size={8} /></div>
</div> </div>
<Circle /> <Circle />
</div> </div>

39
client/patterns/toggle-password-visibility/Details.tsx
View File

@@ -9,14 +9,41 @@ const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Toggle password visibility"> <DetailsLayout title="Toggle password visibility">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="w5"> style={{
<div className="b--black-30 ba br1 flex"> alignItems: 'center',
<input type={visible ? 'text' : 'password'} autoComplete="off" className="pa1 b--transparent" style={{ flex: 1 }} /> display: 'flex',
<button className="b--transparent pa2" onClick={toggle}> flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '256px' }}>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
}}
>
<input
type={visible ? 'text' : 'password'}
autoComplete="off"
style={{
borderColor: 'transparent',
flex: 1,
marginLeft: '1px',
padding: '4px',
}}
/>
<button
style={{ borderColor: 'transparent', marginRight: '1px', padding: '8px' }}
onClick={toggle}
>
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
style={{ style={{

88
client/patterns/wizard/Cover.tsx
View File

@@ -6,21 +6,93 @@ import Line from '../../placeholders/Line';
const Cover: React.FC<{}> = () => { const Cover: React.FC<{}> = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="flex w-80"> style={{
<div className="flex items-center justify-center" style={{ flex: 1 }}> alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ display: 'flex', width: '100%' }}>
<div
style={{
alignItems: 'center',
display: 'flex',
flex: 1,
justifyContent: 'center',
}}
>
<div style={{ flex: 1 }} /> <div style={{ flex: 1 }} />
<div className="w1 h1 f7 flex items-center justify-center white br-pill bg-black-30">1</div> <div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
color: '#FFF',
display: 'flex',
fontSize: '12px',
height: '16px',
justifyContent: 'center',
width: '16px',
}}
>
1
</div>
<div style={{ flex: 1 }}><Line /></div> <div style={{ flex: 1 }}><Line /></div>
</div> </div>
<div className="flex items-center justify-center" style={{ flex: 1 }}> <div
style={{
alignItems: 'center',
display: 'flex',
flex: 1,
justifyContent: 'center',
}}
>
<div style={{ flex: 1 }}><Line /></div> <div style={{ flex: 1 }}><Line /></div>
<div className="w1 h1 f7 flex items-center justify-center white br-pill bg-black-30">2</div> <div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
color: '#FFF',
display: 'flex',
fontSize: '12px',
height: '16px',
justifyContent: 'center',
width: '16px',
}}
>
2
</div>
<div style={{ flex: 1 }}><Line /></div> <div style={{ flex: 1 }}><Line /></div>
</div> </div>
<div className="flex items-center justify-center" style={{ flex: 1 }}> <div
style={{
alignItems: 'center',
display: 'flex',
flex: 1,
justifyContent: 'center',
}}
>
<div style={{ flex: 1 }}><Line /></div> <div style={{ flex: 1 }}><Line /></div>
<div className="w1 h1 f7 flex items-center justify-center white br-pill bg-black-30">3</div> <div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
color: '#FFF',
display: 'flex',
fontSize: '12px',
height: '16px',
justifyContent: 'center',
width: '16px',
}}
>
3
</div>
<div style={{ flex: 1 }} /> <div style={{ flex: 1 }} />
</div> </div>
</div> </div>

81
client/patterns/wizard/Details.tsx
View File

@@ -9,38 +9,95 @@ import Line from '../../placeholders/Line';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<DetailsLayout title="Wizard"> <DetailsLayout title="Wizard">
<div className="ph4 pv5"> <div style={{ padding: '64px 32px' }}>
<BrowserFrame <BrowserFrame
content={( content={(
<div className="h-100 flex flex-column items-center justify-center"> <div
<div className="flex w-80"> style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ display: 'flex', width: '80%' }}>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<div className="mb3 flex items-center justify-center"> <div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
marginBottom: '16px',
}}
>
<div style={{ flex: 1 }} /> <div style={{ flex: 1 }} />
<div className="flex items-center justify-center mh1"><Circle size={32} /></div> <div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
margin: '0 4px',
}}
>
<Circle size={32} />
</div>
<div style={{ flex: 1 }}><Line /></div> <div style={{ flex: 1 }}><Line /></div>
</div> </div>
<div className="ph3 flex justify-center"> <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
<Block justify='center' numberOfBlocks={5} /> <Block justify='center' numberOfBlocks={5} />
</div> </div>
</div> </div>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<div className="mb3 flex items-center justify-center"> <div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
marginBottom: '16px',
}}
>
<div style={{ flex: 1 }}><Line /></div> <div style={{ flex: 1 }}><Line /></div>
<div className="flex items-center justify-center mh1"><Circle size={32} /></div> <div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
margin: '0 4px',
}}
>
<Circle size={32} />
</div>
<div style={{ flex: 1 }}><Line /></div> <div style={{ flex: 1 }}><Line /></div>
</div> </div>
<div className="ph3 flex justify-center"> <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
<Block justify='center' numberOfBlocks={5} /> <Block justify='center' numberOfBlocks={5} />
</div> </div>
</div> </div>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<div className="mb3 flex items-center justify-center"> <div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
marginBottom: '16px',
}}
>
<div style={{ flex: 1 }}><Line /></div> <div style={{ flex: 1 }}><Line /></div>
<div className="flex items-center justify-center mh1"><Circle size={32} /></div> <div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
margin: '0 4px',
}}
>
<Circle size={32} />
</div>
<div style={{ flex: 1 }} /> <div style={{ flex: 1 }} />
</div> </div>
<div className="ph3 flex justify-center"> <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
<Block justify='center' numberOfBlocks={5} /> <Block justify='center' numberOfBlocks={5} />
</div> </div>
</div> </div>

27
client/placeholders/Block.tsx
View File

@@ -10,13 +10,34 @@ interface BlockProps {
const Block: React.FC<BlockProps> = ({ justify = 'start', numberOfBlocks = 1, blockHeight = 4 }) => { const Block: React.FC<BlockProps> = ({ justify = 'start', numberOfBlocks = 1, blockHeight = 4 }) => {
return ( return (
<div className={`flex flex-wrap w-100 justify-${justify}`}> <div
style={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: justify,
width: '100%',
}}
>
{ {
Array(numberOfBlocks).fill(0).map((_, i) => { Array(numberOfBlocks).fill(0).map((_, i) => {
const s = random(1, 5); const s = random(1, 5);
return ( return (
<div key={i} className={`mr2 mb2 w-${s * 10}`}> <div
<div className="w-100 bg-black-30 br-pill" style={{ height: `${blockHeight}px` }} /> key={i}
style={{
marginBottom: '8px',
marginRight: '8px',
width: `${s * 10}%`,
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
height: `${blockHeight}px`,
width: '100%',
}}
/>
</div> </div>
); );
}) })

79
client/placeholders/BrowserFrame.tsx
View File

@@ -12,41 +12,100 @@ const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
const flip = () => setContentActive((isActive) => !isActive); const flip = () => setContentActive((isActive) => !isActive);
return ( return (
<div className="br2 ba b--black-20" style={{ boxShadow: '0 16px 40px -8px rgba(0, 0, 0, .5)' }}> <div
<div className="flex ph3 pv2 bb b--black-20 items-center bg-black-05"> style={{
<div className="br-100 mr1 w1 h1 bg-red" /> border: '1px solid rgba(0, 0, 0, 0.2)',
<div className="br-100 mr1 w1 h1 bg-gold" /> borderRadius: '4px',
<div className="br-100 mr1 w1 h1 bg-red" /> boxShadow: '0 16px 40px -8px rgba(0, 0, 0, .5)',
<div className="ml-auto"> }}
<button className="bn pointer bg-dark-blue br2 ph2 pv1 white" onClick={flip}> >
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba( 0, 0, 0, 0.05)',
borderBottom: '1px solid rgba(0, 0, 0, 0.2)',
display: 'flex',
padding: '8px 16px',
}}
>
<div
style={{
backgroundColor: '#FF4136',
borderRadius: '100%',
height: '16px',
marginRight: '4px',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFB700',
borderRadius: '100%',
height: '16px',
marginRight: '4px',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FF4136',
borderRadius: '100%',
height: '16px',
marginRight: '4px',
width: '16px',
}}
/>
<div style={{ marginLeft: 'auto' }}>
<button
style={{
backgroundColor: '#00449E',
borderColor: 'transparent',
borderRadius: '4px',
color: '#FFF',
cursor: 'pointer',
padding: '4px 8px',
}}
onClick={flip}
>
{isContentActive ? 'Source' : 'Demo'} {isContentActive ? 'Source' : 'Demo'}
</button> </button>
</div> </div>
</div> </div>
<div <div
className="relative"
style={{ style={{
height: '512px', height: '512px',
position: 'relative',
transform: isContentActive ? '' : 'rotateY(180deg)', transform: isContentActive ? '' : 'rotateY(180deg)',
transformStyle: 'preserve-3d', transformStyle: 'preserve-3d',
transition: 'transform 1s', transition: 'transform 1s',
}} }}
> >
<div <div
className={`overflow-scroll absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-1' : 'o-0'}`}
style={{ style={{
WebkitBackfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden',
backfaceVisibility: 'hidden', backfaceVisibility: 'hidden',
height: '100%',
left: 0,
opacity: isContentActive ? 1 : 0,
overflow: 'scroll',
position: 'absolute',
top: 0,
width: '100%',
}} }}
> >
{content} {content}
</div> </div>
<div <div
className={`absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-0' : 'o-1'}`}
style={{ style={{
WebkitBackfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden',
backfaceVisibility: 'hidden', backfaceVisibility: 'hidden',
height: '100%',
left: 0,
opacity: isContentActive ? 0 : 1,
position: 'absolute',
top: 0,
transform: 'rotateY(180deg)', transform: 'rotateY(180deg)',
width: '100%',
}} }}
> >
<SampleCode lang="html" code={source} /> <SampleCode lang="html" code={source} />

7
client/placeholders/Line.tsx
View File

@@ -3,8 +3,11 @@ import React from 'react';
const Line: React.FC<{}> = () => { const Line: React.FC<{}> = () => {
return ( return (
<div <div
className="w-100 bg-black-30" style={{
style={{ height: '1px' }} backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '1px',
width: '100%',
}}
/> />
); );
}; };

9
client/placeholders/Square.tsx
View File

@@ -6,7 +6,14 @@ interface SquareProps {
const Square: React.FC<SquareProps> = ({ size = 8 }) => { const Square: React.FC<SquareProps> = ({ size = 8 }) => {
return ( return (
<div className="w-100 h-100 bg-black-30 br2" /> <div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '100%',
width: '100%',
}}
/>
); );
}; };

7
client/placeholders/VerticalLine.tsx
View File

@@ -3,8 +3,11 @@ import React from 'react';
const VerticalLine: React.FC<{}> = () => { const VerticalLine: React.FC<{}> = () => {
return ( return (
<div <div
className="h-100 bg-black-30" style={{
style={{ width: '1px' }} backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '100%',
width: '1px',
}}
/> />
); );
}; };

349
vendors/normalize.css@8.0.1/normalize.css vendored Normal file
View File

@@ -0,0 +1,349 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

3
vendors/tachyons@4.10.0/tachyons.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
webpack.config.js
View File

@@ -21,7 +21,7 @@ if (process.env.NODE_ENV === "analyse") {
module.exports = { module.exports = {
entry: { entry: {
'vendor-styles': [ 'vendor-styles': [
'./vendors/tachyons@4.10.0/tachyons.min.css', './vendors/normalize.css@8.0.1/normalize.css',
'./vendors/highlight.js@9.12.0/dracula.min.css', './vendors/highlight.js@9.12.0/dracula.min.css',
], ],
// The CSS for client should come after `vendor-styles` // The CSS for client should come after `vendor-styles`