Merge pull request #13 from phuoc-ng/button-with-icon

Button with icon

client/App.jsx

@@ -2,15 +2,16 @@ import React from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 import Home from './Home';
-import Badge from './layouts/Badge';
-import Centering from './layouts/Centering';
-import HolyGrail from './layouts/HolyGrail';
-import InputAddon from './layouts/InputAddon';
-import MediaObject from './layouts/MediaObject';
-import Sidebar from './layouts/Sidebar';
-import StepperInput from './layouts/StepperInput';
-import StickyFooter from './layouts/StickyFooter';
-import StickyHeader from './layouts/StickyHeader';
+import Badge from './layouts/badge/Details';
+import ButtonWithIcon from './layouts/button-with-icon/Details';
+import Centering from './layouts/centering/Details';
+import HolyGrail from './layouts/holy-grail/Details';
+import InputAddon from './layouts/input-add-on/Details';
+import MediaObject from './layouts/media-object/Details';
+import Sidebar from './layouts/sidebar/Details';
+import StepperInput from './layouts/stepper-input/Details';
+import StickyFooter from './layouts/sticky-footer/Details';
+import StickyHeader from './layouts/sticky-header/Details';
 
 const App = () => {
     return (
@@ -18,6 +19,7 @@ const App = () => {
             <Switch>
                 <Route exact={true} path='/'><Home /></Route>
                 <Route exact={true} path='/badge'><Badge /></Route>
+                <Route exact={true} path='/button-with-icon'><ButtonWithIcon /></Route>
                 <Route exact={true} path='/centering'><Centering /></Route>
                 <Route exact={true} path='/holy-grail'><HolyGrail /></Route>
                 <Route exact={true} path='/input-add-on'><InputAddon /></Route>

client/Home.jsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import BadgeCover from './covers/BadgeCover';
-import CenterCover from './covers/CenterCover';
-import HolyGrailCover from './covers/HolyGrailCover';
-import InputAddonCover from './covers/InputAddonCover';
-import MediaObjectCover from './covers/MediaObjectCover';
-import SidebarCover from './covers/SidebarCover';
-import StickyFooterCover from './covers/StickyFooterCover';
-import StickyHeaderCover from './covers/StickyHeaderCover';
-import StepperInputCover from './covers/StepperInputCover';
+import BadgeCover from './layouts/badge/Cover';
+import ButtonWithIconCover from './layouts/button-with-icon/Cover';
+import CenterCover from './layouts/centering/Cover';
+import HolyGrailCover from './layouts/holy-grail/Cover';
+import InputAddonCover from './layouts/input-add-on/Cover';
+import MediaObjectCover from './layouts/media-object/Cover';
+import SidebarCover from './layouts/sidebar/Cover';
+import StepperInputCover from './layouts/stepper-input/Cover';
+import StickyFooterCover from './layouts/sticky-footer/Cover';
+import StickyHeaderCover from './layouts/sticky-header/Cover';
 import Layout from './Layout';
 import useDocumentTitle from './useDocumentTitle';
 
@@ -35,62 +36,68 @@ const Home = () => {
             <div className="mw8 center pb4">
                 <h2 className="f2 lh-copy">Layouts</h2>
 
-                <div className="flex flex-wrap">
-                    <div className="pa2 w-20">
-                        <Link to="/holy-grail" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
+                <div className="flex flex-wrap items-start">
+                    <div className="pa1 w-20">
+                        <Link to="/holy-grail" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <HolyGrailCover />
                             <h4 className="f4 mv0 pt3">Holy grail</h4>
                         </Link>
                     </div>
-                    <div className="pa2 w-20">
-                        <Link to="/sidebar" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
+                    <div className="pa1 w-20">
+                        <Link to="/sidebar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <SidebarCover />
                             <h4 className="f4 mv0 pt3">Sidebar</h4>
                         </Link>
                     </div>
-                    <div className="pa2 w-20">
-                        <Link to="/sticky-footer" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
+                    <div className="pa1 w-20">
+                        <Link to="/sticky-footer" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <StickyFooterCover />
                             <h4 className="f4 mv0 pt3">Sticky footer</h4>
                         </Link>
                     </div>
-                    <div className="pa2 w-20">
-                        <Link to="/sticky-header" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
-                            <StickyHeaderCover />
-                            <h4 className="f4 mv0 pt3">Sticky header</h4>
-                        </Link>
+                    <div className="pa1 w-20">
+                    <Link to="/sticky-header" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                        <StickyHeaderCover />
+                        <h4 className="f4 mv0 pt3">Sticky header</h4>
+                    </Link>
                     </div>
                 </div>
 
                 <h2 className="f2 lh-copy">Patterns</h2>
 
-                <div className="flex flex-wrap">
-                    <div className="pa2 w-20">
-                        <Link to="/badge" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
+                <div className="flex flex-wrap items-start">
+                    <div className="pa1 w-20">
+                        <Link to="/badge" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <BadgeCover />
                             <h4 className="f4 mv0 pt3">Badge</h4>
                         </Link>
                     </div>
-                    <div className="pa2 w-20">
-                        <Link to="/centering" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
+                    <div className="pa1 w-20">
+                        <Link to="/button-with-icon" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                            <ButtonWithIconCover />
+                            <h4 className="f4 mv0 pt3">Button with icon</h4>
+                        </Link>
+                    </div>
+                    <div className="pa1 w-20">
+                        <Link to="/centering" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <CenterCover />
                             <h4 className="f4 mv0 pt3">Centering</h4>
                         </Link>
                     </div>
-                    <div className="pa2 w-20">
-                        <Link to="/input-add-on" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
+                    <div className="pa1 w-20">
+                        <Link to="/input-add-on" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <InputAddonCover />
                             <h4 className="f4 mv0 pt3">Input addon</h4>
                         </Link>
                     </div>
-                    <div className="pa2 w-20">
-                        <Link to="/media-object" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
+                    <div className="pa1 w-20">
+                        <Link to="/media-object" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <MediaObjectCover />
                             <h4 className="f4 mv0 pt3">Media object</h4>
                         </Link>
                     </div>
-                    <div className="pa2 w-20">
-                        <Link to="/stepper-input" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
+                    <div className="pa1 w-20">
+                        <Link to="/stepper-input" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <StepperInputCover />
                             <h4 className="f4 mv0 pt3">Stepper input</h4>
                         </Link>

client/layouts/badge/Cover.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import Frame from '../placeholders/Frame';
+import Frame from '../../placeholders/Frame';
 
-const BadgeCover = () => {
+const Cover = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">
@@ -14,4 +14,4 @@ const BadgeCover = () => {
     );
 };
 
-export default BadgeCover;
+export default Cover;

client/layouts/badge/Details.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import DetailsLayout from '../DetailsLayout';
-import BrowserFrame from '../placeholders/BrowserFrame';
-import SampleCode from '../SampleCode';
-import useDocumentTitle from '../useDocumentTitle';
+import DetailsLayout from '../../DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import SampleCode from '../../SampleCode';
+import useDocumentTitle from '../../useDocumentTitle';
 
-const Badge = () => {
+const Details = () => {
     useDocumentTitle('CSS Layout ∙ Badge');
 
     return (
@@ -48,4 +48,4 @@ code={`
     );
 };
 
-export default Badge;
+export default Details;

client/layouts/button-with-icon/Cover.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import Dot from '../../placeholders/Dot';
+import Frame from '../../placeholders/Frame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Cover = () => {
+    return (
+        <Frame>
+            <div className="h-100 flex flex-column items-center justify-center pa2">
+                <div className="w-100 h2 flex flex-row items-center ba b--black-30 br2 ph1">
+                    <div className="mr1"><Dot /></div>
+                    <Rectangle />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/layouts/button-with-icon/Details.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import DetailsLayout from '../../DetailsLayout';
+import Dot from '../../placeholders/Dot';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import SampleCode from '../../SampleCode';
+import useDocumentTitle from '../../useDocumentTitle';
+
+const Details = () => {
+    useDocumentTitle('CSS Layout ∙ Button with icon');
+
+    return (
+        <DetailsLayout>
+            <h1 className="f1 tc">Button with icon</h1>
+            <BrowserFrame
+                content={
+                    <div className="h-100 flex flex-column items-center justify-center">
+                        <div className="w5">
+                            <button className="w-100 h3 flex flex-row items-center ba b--black-30 br2 ph2">
+                                <div className="mr2"><Dot size={32} /></div>
+                                <Rectangle />
+                            </button>
+                        </div>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<button style="
+    /* Content is centered */
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+">
+    <!-- Icon -->
+    ...
+
+    <!-- Label -->
+    ...
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/layouts/centering/Cover.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import Dot from '../placeholders/Dot';
-import Frame from '../placeholders/Frame';
-import Line from '../placeholders/Line';
+import Dot from '../../placeholders/Dot';
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
 
-const CenterCover = () => {
+const Cover = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">
@@ -20,4 +20,4 @@ const CenterCover = () => {
     );
 };
 
-export default CenterCover;
+export default Cover;

client/layouts/centering/Details.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
-import DetailsLayout from '../DetailsLayout';
-import BrowserFrame from '../placeholders/BrowserFrame';
-import Dot from '../placeholders/Dot';
-import Rectangle from '../placeholders/Rectangle';
-import SampleCode from '../SampleCode';
-import useDocumentTitle from '../useDocumentTitle';
+import DetailsLayout from '../../DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Dot from '../../placeholders/Dot';
+import Rectangle from '../../placeholders/Rectangle';
+import SampleCode from '../../SampleCode';
+import useDocumentTitle from '../../useDocumentTitle';
 
-const Centering = () => {
+const Details = () => {
     useDocumentTitle('CSS Layout ∙ Centering');
 
     return (
@@ -41,4 +41,4 @@ code={`
     );
 };
 
-export default Centering;
+export default Details;

client/layouts/holy-grail/Cover.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import Frame from '../placeholders/Frame';
-import Line from '../placeholders/Line';
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
 
-const HolyGrailCover = () => {
+const Cover = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column">
@@ -45,4 +45,4 @@ const HolyGrailCover = () => {
     );
 };
 
-export default HolyGrailCover;
+export default Cover;

client/layouts/holy-grail/Details.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
-import DetailsLayout from '../DetailsLayout';
-import Block from '../placeholders/Block';
-import BrowserFrame from '../placeholders/BrowserFrame';
-import Rectangle from '../placeholders/Rectangle';
-import SampleCode from '../SampleCode';
-import useDocumentTitle from '../useDocumentTitle';
+import DetailsLayout from '../../DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import SampleCode from '../../SampleCode';
+import useDocumentTitle from '../../useDocumentTitle';
 
-const HolyGrail = () => {
+const Details = () => {
     useDocumentTitle('CSS Layout ∙ Holy grail');
 
     return (
@@ -84,4 +84,4 @@ code={`
     );
 };
 
-export default HolyGrail;
+export default Details;

client/layouts/input-add-on/Cover.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import Frame from '../placeholders/Frame';
-import Line from '../placeholders/Line';
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
 
-const InputAddonCover = () => {
+const Cover = () => {
     return (
         <Frame>
             <div className="h-100 flex items-center justify-center pa2">
@@ -20,4 +20,4 @@ const InputAddonCover = () => {
     );
 };
 
-export default InputAddonCover;
+export default Cover;

client/layouts/input-add-on/Details.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import DetailsLayout from '../DetailsLayout';
-import BrowserFrame from '../placeholders/BrowserFrame';
-import Rectangle from '../placeholders/Rectangle';
-import SampleCode from '../SampleCode';
-import useDocumentTitle from '../useDocumentTitle';
+import DetailsLayout from '../../DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import SampleCode from '../../SampleCode';
+import useDocumentTitle from '../../useDocumentTitle';
 
-const InputAddon = () => {
+const Details = () => {
     useDocumentTitle('CSS Layout ∙ Input add-on');
 
     return (
@@ -133,4 +133,4 @@ code={`
     );
 };
 
-export default InputAddon;
+export default Details;

client/layouts/media-object/Cover.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import Frame from '../placeholders/Frame';
-import Line from '../placeholders/Line';
-import Square from '../placeholders/Square';
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+import Square from '../../placeholders/Square';
 
-const MediaObjectCover = () => {
+const Cover = () => {
     return (
         <Frame>
             <div className="flex h-100 items-start pa2 w-100">
@@ -29,4 +29,4 @@ const MediaObjectCover = () => {
     );
 };
 
-export default MediaObjectCover;
+export default Cover;

client/layouts/media-object/Details.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
-import DetailsLayout from '../DetailsLayout';
-import Block from '../placeholders/Block';
-import BrowserFrame from '../placeholders/BrowserFrame';
-import Rectangle from '../placeholders/Rectangle';
-import Square from '../placeholders/Square';
-import SampleCode from '../SampleCode';
-import useDocumentTitle from '../useDocumentTitle';
+import DetailsLayout from '../../DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import Square from '../../placeholders/Square';
+import SampleCode from '../../SampleCode';
+import useDocumentTitle from '../../useDocumentTitle';
 
-const MediaObject = () => {
+const Details = () => {
     useDocumentTitle('CSS Layout ∙ Media object');
 
     return (
@@ -64,4 +64,4 @@ code={`
     );
 };
 
-export default MediaObject;
+export default Details;

client/layouts/sidebar/Cover.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import Frame from '../placeholders/Frame';
-import Line from '../placeholders/Line';
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
 
-const SidebarCover = () => {
+const Cover = () => {
     return (
         <Frame>
             <div className="h-100 flex">
@@ -22,4 +22,4 @@ const SidebarCover = () => {
     );
 };
 
-export default SidebarCover;
+export default Cover;

client/layouts/sidebar/Details.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import DetailsLayout from '../DetailsLayout';
-import BrowserFrame from '../placeholders/BrowserFrame';
-import Block from '../placeholders/Block';
-import SampleCode from '../SampleCode';
-import useDocumentTitle from '../useDocumentTitle';
+import DetailsLayout from '../../DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Block from '../../placeholders/Block';
+import SampleCode from '../../SampleCode';
+import useDocumentTitle from '../../useDocumentTitle';
 
-const Sidebar = () => {
+const Details = () => {
     useDocumentTitle('CSS Layout ∙ Sidebar');
 
     return (
@@ -55,4 +55,4 @@ code={`
     );
 };
 
-export default Sidebar;
+export default Details;

client/layouts/stepper-input/Cover.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import Frame from '../placeholders/Frame';
+import Frame from '../../placeholders/Frame';
 
-const StepperInputCover = () => {
+const Cover = () => {
     return (
         <Frame>
             <div className="h-100 flex items-center justify-center pa2">
@@ -16,4 +16,4 @@ const StepperInputCover = () => {
     );
 };
 
-export default StepperInputCover;
+export default Cover;

client/layouts/stepper-input/Details.jsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 
-import DetailsLayout from '../DetailsLayout';
-import BrowserFrame from '../placeholders/BrowserFrame';
-import SampleCode from '../SampleCode';
-import useDocumentTitle from '../useDocumentTitle';
+import DetailsLayout from '../../DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import SampleCode from '../../SampleCode';
+import useDocumentTitle from '../../useDocumentTitle';
 
-const StepperInput = () => {
+const Details = () => {
     useDocumentTitle('CSS Layout ∙ Stepper input');
     const [value, setValue] = useState(0);
     const decrease = () => setValue(value - 1);
@@ -84,4 +84,4 @@ code={`
     );
 };
 
-export default StepperInput;
+export default Details;

client/layouts/sticky-footer/Cover.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import Frame from '../placeholders/Frame';
-import Line from '../placeholders/Line';
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
 
-const StickyFooterCover = () => {
+const Cover = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column">
@@ -35,4 +35,4 @@ const StickyFooterCover = () => {
     );
 };
 
-export default StickyFooterCover;
+export default Cover;

client/layouts/sticky-footer/Details.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
-import DetailsLayout from '../DetailsLayout';
-import Block from '../placeholders/Block';
-import BrowserFrame from '../placeholders/BrowserFrame';
-import Rectangle from '../placeholders/Rectangle';
-import SampleCode from '../SampleCode';
-import useDocumentTitle from '../useDocumentTitle';
+import DetailsLayout from '../../DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import SampleCode from '../../SampleCode';
+import useDocumentTitle from '../../useDocumentTitle';
 
-const StickyFooter = () => {
+const Details = () => {
     useDocumentTitle('CSS Layout ∙ Sticky footer');
 
     return (
@@ -57,4 +57,4 @@ code={`
     );
 };
 
-export default StickyFooter;
+export default Details;

client/layouts/sticky-header/Cover.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import Frame from '../placeholders/Frame';
-import Line from '../placeholders/Line';
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
 
-const StickyHeaderCover = () => {
+const Cover = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column">
@@ -27,4 +27,4 @@ const StickyHeaderCover = () => {
     );
 };
 
-export default StickyHeaderCover;
+export default Cover;

client/layouts/sticky-header/Details.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
-import DetailsLayout from '../DetailsLayout';
-import Block from '../placeholders/Block';
-import BrowserFrame from '../placeholders/BrowserFrame';
-import Rectangle from '../placeholders/Rectangle';
-import SampleCode from '../SampleCode';
-import useDocumentTitle from '../useDocumentTitle';
+import DetailsLayout from '../../DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import SampleCode from '../../SampleCode';
+import useDocumentTitle from '../../useDocumentTitle';
 
-const StickyHeader = () => {
+const Details = () => {
     useDocumentTitle('CSS Layout ∙ Sticky header');
 
     return (
@@ -50,4 +50,4 @@ code={`
     );
 };
 
-export default StickyHeader;
+export default Details;