Merge pull request #25 from phuoc-ng/switch

Add Switch

client/App.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-router-dom';
 
 import Home from './Home';
 import Badge from './layouts/badge/Details';
@@ -23,11 +23,12 @@ import SplitScreen from './layouts/split-screen/Details';
 import StepperInput from './layouts/stepper-input/Details';
 import StickyFooter from './layouts/sticky-footer/Details';
 import StickyHeader from './layouts/sticky-header/Details';
+import Switch from './layouts/switch/Details';
 
 const App = () => {
     return (
         <Router>
-            <Switch>
+            <RouteSwitch>
                 <Route exact={true} path='/'><Home /></Route>
                 <Route exact={true} path='/badge'><Badge /></Route>
                 <Route exact={true} path='/breadcrumb'><Breadcrumb /></Route>
@@ -50,7 +51,8 @@ const App = () => {
                 <Route exact={true} path='/stepper-input'><StepperInput /></Route>
                 <Route exact={true} path='/sticky-footer'><StickyFooter /></Route>
                 <Route exact={true} path='/sticky-header'><StickyHeader /></Route>
-            </Switch>
+                <Route exact={true} path='/switch'><Switch /></Route>
+            </RouteSwitch>
         </Router>
     );
 };

client/Home.jsx

@@ -22,6 +22,7 @@ import SplitScreenCover from './layouts/split-screen/Cover';
 import StepperInputCover from './layouts/stepper-input/Cover';
 import StickyFooterCover from './layouts/sticky-footer/Cover';
 import StickyHeaderCover from './layouts/sticky-header/Cover';
+import SwitchCover from './layouts/switch/Cover';
 import Layout from './Layout';
 import useDocumentTitle from './hooks/useDocumentTitle';
 
@@ -179,6 +180,12 @@ const Home = () => {
                             <h4 className="f5 mv0 pt3">Stepper input</h4>
                         </Link>
                     </div>
+                    <div className="pa1 w-20">
+                        <Link to="/switch" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                            <SwitchCover />
+                            <h4 className="f5 mv0 pt3">Switch</h4>
+                        </Link>
+                    </div>
                 </div>
             </div>
         </Layout>

client/layouts/stepper-input/Cover.jsx

@@ -8,7 +8,7 @@ const Cover = () => {
             <div className="h-100 flex items-center justify-center pa2">
                 <div className="b--black-30 ba br2 flex w-100 h1">
                     <div className="b--black-30 br flex items-center justify-center w1">-</div>
-                    <div className="flex-grow-1 bg-white"></div>
+                    <div className="flex-grow-1"></div>
                     <div className="b--black-30 bl flex items-center justify-center w1">+</div>
                 </div>
             </div>

client/layouts/switch/Cover.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover = () => {
+    return (
+        <Frame>
+            <div className="h-100 flex flex-column items-center justify-center pa2">
+                <div className="ba b--blue bg-blue br-pill h1 w2 flex justify-end">
+                    <div className="bg-white br-pill w1 h-100" />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/layouts/switch/Details.jsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+
+import DetailsLayout from '../../DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import SampleCode from '../../SampleCode';
+import useDocumentTitle from '../../hooks/useDocumentTitle';
+
+const Details = () => {
+    useDocumentTitle('CSS Layout ∙ Switch');
+    const [checked, setChecked] = useState(false);
+    const toggle = () => setChecked(c => !c);
+
+    return (
+        <DetailsLayout>
+            <h1 className="f1 tc">Switch</h1>
+            <div className="lh-copy mb3">The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even though it's hidden.</div>
+            <BrowserFrame
+                content={
+                    <div className="h-100 flex flex-column items-center justify-center">
+                        <label className={`ba br-pill h2 w3 flex ${checked ? 'justify-end b--blue bg-blue' : 'b--black-30 bg-black-10'}`}>
+                            <input type="checkbox" className="dn" checked={checked} onClick={toggle} />
+                            <div className={`bg-white br-pill w2 ${checked ? '' : 'ba b--black-30'}`} />
+                        </label>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<label style="
+    display: flex;
+
+    /* Rounded border */
+    border-radius: 9999px;
+
+    /* Size */
+    height: 32px;
+    width: 64px;
+
+    /* OFF status */
+    background-color: rgba(0, 0, 0, .1);
+    border: 1px solid rgba(0, 0, 0, .3);
+
+    /* ON status */
+    background-color: #357edd;
+    border: 1px solid #357edd;
+    /* Push the circle to the right */
+    justify-content: flex-end;
+">
+    <!-- Hide the input -->
+    <input type="checkbox" style="display: none" />
+
+    <!-- Circle -->
+    <div style="
+        /* Rounded border */
+        border-radius: 9999px;
+
+        /* Size */
+        width: 32px;
+
+        background-color: #FFF;
+
+        /* OFF status */
+        border: 1px solid rgba(0, 0, 0, .3);
+    " />
+</label>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/placeholders/BrowserFrame.jsx

@@ -5,7 +5,7 @@ const BrowserFrame = ({ content, source }) => {
     const flip = () => setContentActive(isActive => !isActive);
 
     return (
-        <div className="br2 ba b--black-20">
+        <div className="br2 ba b--black-20" style={{ boxShadow: '0 24px 48px -8px rgba(0, 0, 0, .5)' }}>
             <div className="flex ph3 pv2 bb b--black-20 items-center bg-black-05">
                 <div className="br-100 mr1 w1 h1 bg-red" />
                 <div className="br-100 mr1 w1 h1 bg-gold" />

client/placeholders/Frame.jsx

@@ -5,6 +5,7 @@ const Frame = ({ children }) => {
         <div
             className="ba b--black-30 br2"
             style={{
+                boxShadow: 'rgba(0, 0, 0, 0.2) 0px 16px 24px -4px, rgba(0, 0, 0, 0.05) 0px 8px 8px -4px',
                 height: '100px',
                 width: '100px',
             }}