From 6393b96e84e1236380c7cc258eeeb31bea88b2da Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sun, 17 Nov 2019 10:29:57 +0700
Subject: [PATCH] Add button with icon

---
 client/App.jsx                        |  2 +
 client/Home.jsx                       | 53 ++++++++++++++-----------
 client/covers/ButtonWithIconCover.jsx | 20 ++++++++++
 client/layouts/ButtonWithIcon.jsx     | 56 +++++++++++++++++++++++++++
 4 files changed, 108 insertions(+), 23 deletions(-)
 create mode 100644 client/covers/ButtonWithIconCover.jsx
 create mode 100644 client/layouts/ButtonWithIcon.jsx

diff --git a/client/App.jsx b/client/App.jsx
index 8917c4b..f330167 100644
--- a/client/App.jsx
+++ b/client/App.jsx
@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 import Home from './Home';
 import Badge from './layouts/Badge';
+import ButtonWithIcon from './layouts/ButtonWithIcon';
 import Centering from './layouts/Centering';
 import HolyGrail from './layouts/HolyGrail';
 import InputAddon from './layouts/InputAddon';
@@ -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>
diff --git a/client/Home.jsx b/client/Home.jsx
index f73df5a..ee123fc 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import BadgeCover from './covers/BadgeCover';
+import ButtonWithIconCover from './covers/ButtonWithIconCover';
 import CenterCover from './covers/CenterCover';
 import HolyGrailCover from './covers/HolyGrailCover';
 import InputAddonCover from './covers/InputAddonCover';
@@ -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>
diff --git a/client/covers/ButtonWithIconCover.jsx b/client/covers/ButtonWithIconCover.jsx
new file mode 100644
index 0000000..03cff62
--- /dev/null
+++ b/client/covers/ButtonWithIconCover.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 ButtonWithIconCover = () => {
+    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 ButtonWithIconCover;
diff --git a/client/layouts/ButtonWithIcon.jsx b/client/layouts/ButtonWithIcon.jsx
new file mode 100644
index 0000000..7f9dfbd
--- /dev/null
+++ b/client/layouts/ButtonWithIcon.jsx
@@ -0,0 +1,56 @@
+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 ButtonWithIcon = () => {
+    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">
+                            <div className="w-100 h3 flex flex-row items-center ba b--black-30 br2 ph2">
+                                <div className="mr2"><Dot size={32} /></div>
+                                <Rectangle />
+                            </div>
+                        </div>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<div style="
+    /* Content is centered */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Colors */
+    background-color: rgba(0, 0, 0, .3);
+    color: #FFF;
+
+    /* Rounded border */
+    border-radius: 9999px;
+    height: 32px;
+    width: 32px;
+">
+    1
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default ButtonWithIcon;