Merge pull request #52 from phuoc-ng/property-list

Property list pattern

client/App.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-rou
 
 import './index.css';
 
+import Pattern from './constants/Pattern';
 import Home from './Home';
 import DetailsLoader from './loaders/DetailsLoader';
 
@@ -11,46 +12,53 @@ const App = () => {
         <Router>
             <RouteSwitch>
                 <Route exact={true} path='/'><Home /></Route>
-                <Route exact={true} path='/badge'><DetailsLoader pattern="Badge" /></Route>
+                <Route exact={true} path='/badge'><DetailsLoader pattern={Pattern.Badge} /></Route>
-                <Route exact={true} path='/breadcrumb'><DetailsLoader pattern="Breadcrumb" /></Route>
+                <Route exact={true} path='/breadcrumb'><DetailsLoader pattern={Pattern.Breadcrumb} /></Route>
-                <Route exact={true} path='/button-with-icon'><DetailsLoader pattern="Button with icon" /></Route>
+                <Route exact={true} path='/button-with-icon'><DetailsLoader pattern={Pattern.ButtonWithIcon} /></Route>
-                <Route exact={true} path='/card'><DetailsLoader pattern="Card" /></Route>
+                <Route exact={true} path='/card'><DetailsLoader pattern={Pattern.Card} /></Route>
-                <Route exact={true} path='/centering'><DetailsLoader pattern="Centering" /></Route>
+                <Route exact={true} path='/centering'><DetailsLoader pattern={Pattern.Centering} /></Route>
-                <Route exact={true} path='/docked-at-corner'><DetailsLoader pattern="Docked at corner" /></Route>
+                <Route exact={true} path='/docked-at-corner'><DetailsLoader pattern={Pattern.DockedAtCorner} /></Route>
-                <Route exact={true} path='/dot-navigation'><DetailsLoader pattern="Dot navigation" /></Route>
+                <Route exact={true} path='/dot-navigation'><DetailsLoader pattern={Pattern.DotNavigation} /></Route>
-                <Route exact={true} path='/feature-list'><DetailsLoader pattern="Feature list" /></Route>
+                <Route exact={true} path='/feature-list'><DetailsLoader pattern={Pattern.FeatureList} /></Route>
-                <Route exact={true} path='/fixed-at-corner'><DetailsLoader pattern="Fixed at corner" /></Route>
+                <Route exact={true} path='/fixed-at-corner'><DetailsLoader pattern={Pattern.FixedAtCorner} /></Route>
-                <Route exact={true} path='/holy-grail'><DetailsLoader pattern="Holy grail" /></Route>
+                <Route exact={true} path='/holy-grail'><DetailsLoader pattern={Pattern.HolyGrail} /></Route>
-                <Route exact={true} path='/input-add-on'><DetailsLoader pattern="Input add-on" /></Route>
+                <Route exact={true} path='/input-add-on'><DetailsLoader pattern={Pattern.InputAddOn} /></Route>
-                <Route exact={true} path='/media-object'><DetailsLoader pattern="Media object" /></Route>
+                <Route exact={true} path='/media-object'><DetailsLoader pattern={Pattern.MediaObject} /></Route>
-                <Route exact={true} path='/menu'><DetailsLoader pattern="Menu" /></Route>
+                <Route exact={true} path='/menu'><DetailsLoader pattern={Pattern.Menu} /></Route>
-                <Route exact={true} path='/modal'><DetailsLoader pattern="Modal" /></Route>
+                <Route exact={true} path='/modal'><DetailsLoader pattern={Pattern.Modal} /></Route>
-                <Route exact={true} path='/notification'><DetailsLoader pattern="Notification" /></Route>
+                <Route exact={true} path='/notification'><DetailsLoader pattern={Pattern.Notification} /></Route>
-                <Route exact={true} path='/pagination'><DetailsLoader pattern="Pagination" /></Route>
+                <Route exact={true} path='/pagination'><DetailsLoader pattern={Pattern.Pagination} /></Route>
                 <Route exact={true} path='/previous-next-buttons'>
-                    <DetailsLoader pattern="Previous next buttons" />
+                    <DetailsLoader pattern={Pattern.PreviousNextButtons} />
                 </Route>
-                <Route exact={true} path='/pricing-table'><DetailsLoader pattern="Pricing table" /></Route>
+                <Route exact={true} path='/pricing-table'><DetailsLoader pattern={Pattern.PricingTable} /></Route>
-                <Route exact={true} path='/progress-bar'><DetailsLoader pattern="Progress bar" /></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='/questions-and-answers'>
-                    <DetailsLoader pattern="Questions and answers" />
+                    <DetailsLoader pattern={Pattern.QuestionsAndAnswers} />
                 </Route>
-                <Route exact={true} path='/radio-switch'><DetailsLoader pattern="Radio switch" /></Route>
+                <Route exact={true} path='/radio-switch'>
-                <Route exact={true} path='/same-height-columns'><DetailsLoader pattern="Same height columns" /></Route>
+                    <DetailsLoader pattern={Pattern.RadioSwitch} />
-                <Route exact={true} path='/search-box'><DetailsLoader pattern="Search box" /></Route>
+                </Route>
-                <Route exact={true} path='/separator'><DetailsLoader pattern="Separator" /></Route>
+                <Route exact={true} path='/same-height-columns'>
-                <Route exact={true} path='/sidebar'><DetailsLoader pattern="Sidebar" /></Route>
+                    <DetailsLoader pattern={Pattern.SameHeightColumns} />
-                <Route exact={true} path='/simple-grid'><DetailsLoader pattern="Simple grid" /></Route>
+                </Route>
-                <Route exact={true} path='/slider'><DetailsLoader pattern="Slider" /></Route>
+                <Route exact={true} path='/search-box'><DetailsLoader pattern={Pattern.SearchBox} /></Route>
-                <Route exact={true} path='/split-navigation'><DetailsLoader pattern="Split navigation" /></Route>
+                <Route exact={true} path='/separator'><DetailsLoader pattern={Pattern.Separator} /></Route>
-                <Route exact={true} path='/split-screen'><DetailsLoader pattern="Split screen" /></Route>
+                <Route exact={true} path='/sidebar'><DetailsLoader pattern={Pattern.Sidebar} /></Route>
-                <Route exact={true} path='/stepper-input'><DetailsLoader pattern="Stepper input" /></Route>
+                <Route exact={true} path='/simple-grid'><DetailsLoader pattern={Pattern.SimpleGrid} /></Route>
-                <Route exact={true} path='/sticky-footer'><DetailsLoader pattern="Sticky footer" /></Route>
+                <Route exact={true} path='/slider'><DetailsLoader pattern={Pattern.Slider} /></Route>
-                <Route exact={true} path='/sticky-header'><DetailsLoader pattern="Sticky header" /></Route>
+                <Route exact={true} path='/split-navigation'><DetailsLoader pattern={Pattern.SplitNavigation} /></Route>
-                <Route exact={true} path='/switch'><DetailsLoader pattern="Switch" /></Route>
+                <Route exact={true} path='/split-screen'><DetailsLoader pattern={Pattern.SplitScreen} /></Route>
-                <Route exact={true} path='/tab'><DetailsLoader pattern="Tab" /></Route>
+                <Route exact={true} path='/stepper-input'><DetailsLoader pattern={Pattern.StepperInput} /></Route>
-                <Route exact={true} path='/toggle-password-visibility'><DetailsLoader pattern="Toggle password visibility" /></Route>
+                <Route exact={true} path='/sticky-footer'><DetailsLoader pattern={Pattern.StickyFooter} /></Route>
-                <Route exact={true} path='/wizard'><DetailsLoader pattern="Wizard" /></Route>
+                <Route exact={true} path='/sticky-header'><DetailsLoader pattern={Pattern.StickyHeader} /></Route>
+                <Route exact={true} path='/switch'><DetailsLoader pattern={Pattern.Switch} /></Route>
+                <Route exact={true} path='/tab'><DetailsLoader pattern={Pattern.Tab} /></Route>
+                <Route exact={true} path='/toggle-password-visibility'>
+                    <DetailsLoader pattern={Pattern.TogglePasswordVisibility} />
+                </Route>
+                <Route exact={true} path='/wizard'><DetailsLoader pattern={Pattern.Wizard} /></Route>
             </RouteSwitch>
         </Router>
     );

client/Home.tsx

@@ -87,6 +87,7 @@ const Home = () => {
                         <CoverCard pattern={Pattern.Pagination} />
                         <CoverCard pattern={Pattern.PreviousNextButtons} />
                         <CoverCard pattern={Pattern.PricingTable} />
+                        <CoverCard pattern={Pattern.PropertyList} />
                         <CoverCard pattern={Pattern.ProgressBar} />
                         <CoverCard pattern={Pattern.QuestionsAndAnswers} />
                         <CoverCard pattern={Pattern.RadioSwitch} />

client/constants/Pattern.ts

@@ -17,6 +17,7 @@ enum Pattern {
     Pagination = 'Pagination',
     PreviousNextButtons = 'Previous next buttons',
     PricingTable = 'Pricing table',
+    PropertyList = 'Property list',
     ProgressBar = 'Progress bar',
     QuestionsAndAnswers = 'Questions and answers',
     RadioSwitch = 'Radio switch',

client/loaders/DetailsLoader.tsx

@@ -1,10 +1,11 @@
 import loadable, { LoadableComponent } from '@loadable/component';
 import React from 'react';
 
+import Pattern from '../constants/Pattern';
 import './spinner.css';
 
 interface DetailsLoaderProps {
-    pattern: string;
+    pattern: Pattern;
 }
 
 const slug = (item: string) => item.toLowerCase().split(' ').join('-');

client/patterns/menu/Details.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
@@ -108,6 +110,7 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
+            <RelatedPatterns patterns={[Pattern.PropertyList]} />
         </DetailsLayout>
     );
 };

client/patterns/property-list/Cover.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import Circle from '../../placeholders/Circle';
+import Frame from '../../placeholders/Frame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div className="h-100 flex flex-column items-center justify-center pa3">
+                <div className="w-100">
+                    <div className="bb b--black-30 pv1 flex items-center justify-between">
+                        <div className="w-60"><Rectangle height={8} /></div>
+                        <Circle size={12} />
+                    </div>
+                    <div className="bb b--black-30 pv1 flex items-center justify-between">
+                        <div className="w-20"><Rectangle height={8} /></div>
+                        <Circle size={12} />
+                    </div>
+                    <div className="bb b--black-30 pv1 flex items-center justify-between">
+                        <div className="w-40"><Rectangle height={8} /></div>
+                        <Circle size={12} />
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/property-list/Details.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+
+import Heading from '../../components/Heading';
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    const Item: React.FC<{}> = ({ children }) => {
+        return (
+            <dl
+                style={{
+                    alignItems: 'center',
+                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    margin: 0,
+                    padding: '8px 0',
+                }}
+            >
+                {children}
+            </dl>
+        );
+    };
+
+    return (
+        <DetailsLayout title="Property list">
+            <div className="ph4 pv5">
+                <BrowserFrame
+                    content={(
+                        <div className="h-100 flex flex-column items-center justify-center">
+                            <div style={{ width: '40%' }}>
+                                <Item>
+                                    <dt style={{ width: '80%' }}><Rectangle /></dt>
+                                    <dd><Circle /></dd>
+                                </Item>
+                                <Item>
+                                    <dt style={{ width: '60%' }}><Rectangle /></dt>
+                                    <dd><Circle /></dd>
+                                </Item>
+                                <Item>
+                                    <dt style={{ width: '30%' }}><Rectangle /></dt>
+                                    <dd><Circle /></dd>
+                                </Item>
+                                <Item>
+                                    <dt style={{ width: '50%' }}><Rectangle /></dt>
+                                    <dd><Circle /></dd>
+                                </Item>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<!-- A property item -->
+<dl style="
+    /* Content is center horizontally */
+    align-items: center;
+    display: flex;
+
+    /*
+    The property name will stick to the left, and the value
+    will stick to the right
+    */
+    justify-content: space-between;
+
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+
+    /* Spacing */
+    margin: 0px;
+    padding: 8px 0px;
+">
+    <!-- Property name -->
+    <dt>...</dt>
+
+    <!-- Property value -->
+    <dd>...</dd>
+</dl>
+`}
+                />
+            </div>
+            <section>
+                <Heading title="Use cases" />
+
+                <div style={{ padding: '64px', width: '500px' }}>
+                    <Item>
+                        <dt>Name</dt>
+                        <dd>WebAssembly in Action</dd>
+                    </Item>
+                    <Item>
+                        <dt>Author</dt>
+                        <dd>Gerard Gallant</dd>
+                    </Item>
+                    <Item>
+                        <dt>Publishing date</dt>
+                        <dd>November 2019</dd>
+                    </Item>
+                    <Item>
+                        <dt>ISBN</dt>
+                        <dd>9781617295744</dd>
+                    </Item>
+                </div>
+            </section>
+            <RelatedPatterns patterns={[Pattern.Menu]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/placeholders/Circle.tsx

@@ -7,8 +7,9 @@ interface CircleProps {
 const Circle: React.FC<CircleProps> = ({ size = 16 }) => {
     return (
         <div
-            className="bg-black-30 br-pill"
             style={{
+                backgroundColor: 'rgba(0, 0, 0, .3)',
+                borderRadius: '9999px',
                 height: `${size}px`,
                 width: `${size}px`,
             }}

client/placeholders/Rectangle.tsx

@@ -7,8 +7,12 @@ interface RectangleProps {
 const Rectangle: React.FC<RectangleProps> = ({ height = 8 }) => {
     return (
         <div
-            className="w-100 bg-black-30 br1"
+            style={{
-            style={{ height: `${height}px` }}
+                backgroundColor: 'rgba(0, 0, 0, .3)',
+                borderRadius: '2px',
+                height: `${height}px`,
+                width: '100%',
+            }}
         />
     );
 };

public/sitemap.xml

@@ -22,6 +22,7 @@
     <url><loc>https://csslayout.io/previous-next-buttons</loc></url>
     <url><loc>https://csslayout.io/pricing-table</loc></url>
     <url><loc>https://csslayout.io/progress-bar</loc></url>
+    <url><loc>https://csslayout.io/property-list</loc></url>
     <url><loc>https://csslayout.io/questions-and-answers</loc></url>
     <url><loc>https://csslayout.io/radio-switch</loc></url>
     <url><loc>https://csslayout.io/same-height-columns</loc></url>