From 5267b893ba78e54232874ad31c0805733205693a Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sun, 24 Nov 2019 08:27:31 +0700
Subject: [PATCH 1/2] Add Radio switch

---
 client/App.jsx                           |  1 +
 client/Home.jsx                          |  1 +
 client/patterns/radio-switch/Cover.jsx   | 22 ++++++
 client/patterns/radio-switch/Details.jsx | 85 ++++++++++++++++++++++++
 sitemap.xml                              |  1 +
 5 files changed, 110 insertions(+)
 create mode 100644 client/patterns/radio-switch/Cover.jsx
 create mode 100644 client/patterns/radio-switch/Details.jsx

diff --git a/client/App.jsx b/client/App.jsx
index 5403ca4..48af5e8 100644
--- a/client/App.jsx
+++ b/client/App.jsx
@@ -31,6 +31,7 @@ const App = () => {
                 <Route exact={true} path='/pricing-table'><DetailsLoader pattern="Pricing table" /></Route>
                 <Route exact={true} path='/progress-bar'><DetailsLoader pattern="Progress bar" /></Route>
                 <Route exact={true} path='/questions-and-answers'><DetailsLoader pattern="Questions and answers" /></Route>
+                <Route exact={true} path='/radio-switch'><DetailsLoader pattern="Radio switch" /></Route>
                 <Route exact={true} path='/same-height-columns'><DetailsLoader pattern="Same height columns" /></Route>
                 <Route exact={true} path='/search-box'><DetailsLoader pattern="Search box" /></Route>
                 <Route exact={true} path='/separator'><DetailsLoader pattern="Separator" /></Route>
diff --git a/client/Home.jsx b/client/Home.jsx
index f9cd4a3..74f8a82 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -80,6 +80,7 @@ const Home = () => {
                         <CoverCard pattern="Pricing table" />
                         <CoverCard pattern="Progress bar" />
                         <CoverCard pattern="Questions and answers" />
+                        <CoverCard pattern="Radio switch" />
                         <CoverCard pattern="Same height columns" />
                         <CoverCard pattern="Search box" />
                         <CoverCard pattern="Separator" />
diff --git a/client/patterns/radio-switch/Cover.jsx b/client/patterns/radio-switch/Cover.jsx
new file mode 100644
index 0000000..f845219
--- /dev/null
+++ b/client/patterns/radio-switch/Cover.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+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-80 flex items-center justify-center b--black-30 br-pill ba pa1">
+                    <div className="pa1" style={{ flex: 1 }}>
+                        <Rectangle />
+                    </div>
+                    <div className="pa1 br-pill bg-black-10 h-100" style={{ flex: 1 }}>
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/radio-switch/Details.jsx b/client/patterns/radio-switch/Details.jsx
new file mode 100644
index 0000000..f781e27
--- /dev/null
+++ b/client/patterns/radio-switch/Details.jsx
@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import SampleCode from '../../SampleCode';
+
+const Details = () => {
+    const [isFirstChecked, setFirstChecked] = useState(false);
+    const toggle = () => setFirstChecked(c => !c);
+
+    return (
+        <DetailsLayout title="Radio switch">
+            <div className="ph4 pv5">
+                <BrowserFrame
+                    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} onClick={toggle} />
+                                    <div className={`w3 br1 ${isFirstChecked ? 'bg-white' : 'bg-black-20'}`} style={{ height: '8px' }}  />
+                                </label>
+                                <label className={`pointer pv3 ph2 br-pill ${isFirstChecked ? '' : 'bg-blue white'}`}>
+                                    <input type="radio" className="dn" checked={!isFirstChecked} onClick={toggle} />
+                                    <div className={`w3 br1 ${isFirstChecked ? 'bg-black-20' : 'bg-white'}`} style={{ height: '8px' }}  />
+                                </label>
+                            </div>
+                        </div>
+                    }
+                    source={
+<SampleCode
+lang="html"
+code={`
+<!-- Container -->
+<div style="
+    background-color: rgba(0, 0, 0, .1);
+    border-radius: 9999px;
+    display: inline-flex;
+    padding: 4px;
+">
+    <!-- Radio container -->
+    <label style="
+        border-radius: 9999px;
+        cursor: pointer;
+        padding: 4px 8px;
+
+        /* For selected radio only */
+        background-color: #357edd;
+        color: #fff;
+    ">
+        <input type="radio" style="display: none" />
+
+        <!-- Text -->
+        ...
+    </label>
+
+    <!-- Other radio item -->
+    ...
+</div>
+`}
+/>
+                    }
+                />
+            </div>
+            <div className="bt b--black-20 relative">
+                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0px, -50%)' }}>Use cases</h3>
+
+                <div className="pa4">
+                    <div className="inline-flex br-pill bg-black-10 pa1">
+                        <label className="pointer pv1 ph2 br-pill flex bg-blue white">
+                            <input type="radio" className="dn" />
+                            Monthly
+                        </label>
+                        <label className="pointer pv1 ph2 br-pill flex">
+                            <input type="radio" className="dn" />
+                            Yearly
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/sitemap.xml b/sitemap.xml
index 6bc992a..8d515ca 100644
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -23,6 +23,7 @@
     <url><loc>https://csslayout.io/pricing-table</loc></url>
     <url><loc>https://csslayout.io/progress-bar</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>
     <url><loc>https://csslayout.io/search-box</loc></url>
     <url><loc>https://csslayout.io/separator</loc></url>

From 77a5c9a7633314a0c19120560c82ba1951054cbb Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sun, 24 Nov 2019 15:46:29 +0700
Subject: [PATCH 2/2] Uppercase headings

---
 client/Home.jsx                          | 4 ++--
 client/layouts/Footer.jsx                | 4 ++--
 client/patterns/radio-switch/Details.jsx | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/Home.jsx b/client/Home.jsx
index 74f8a82..4f9ab21 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -46,7 +46,7 @@ const Home = () => {
                 </div>
 
                 <div className="bt b--black-20 relative">
-                    <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>Layouts</h3>
+                    <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>Layouts</h3>
 
                     <div className="flex flex-wrap items-start pa4">
                         <CoverCard pattern="Holy grail" />
@@ -58,7 +58,7 @@ const Home = () => {
                 </div>
 
                 <div className="bt b--black-20 relative">
-                    <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>Patterns</h3>
+                    <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>Patterns</h3>
 
                     <div className="flex flex-wrap items-start pa4">
                         <CoverCard pattern="Badge" />
diff --git a/client/layouts/Footer.jsx b/client/layouts/Footer.jsx
index f9eabc0..45bac41 100644
--- a/client/layouts/Footer.jsx
+++ b/client/layouts/Footer.jsx
@@ -4,7 +4,7 @@ const Footer = () => {
     return (
         <div className="bl br bb b--black-20 flex justify-between br4 br--bottom">
             <div className="bt br b--black-20 relative" style={{ flex: 1 }}>
-                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>PRODUCTS</h3>
+                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>Products</h3>
 
                 <ul className="list ma0 pa0 lh-copy fw5 pa4">
                     <li>
@@ -26,7 +26,7 @@ const Footer = () => {
             </div>
 
             <div className="bt b--black-20 relative" style={{ flex: 1 }}>
-                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>ABOUT</h3>
+                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>About</h3>
 
                 <div className="pa4">
                     <div className="pb2 lh-copy">© 2019 Nguyen Huu Phuoc and contributors</div>
diff --git a/client/patterns/radio-switch/Details.jsx b/client/patterns/radio-switch/Details.jsx
index f781e27..de5ef3d 100644
--- a/client/patterns/radio-switch/Details.jsx
+++ b/client/patterns/radio-switch/Details.jsx
@@ -63,7 +63,7 @@ code={`
                 />
             </div>
             <div className="bt b--black-20 relative">
-                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0px, -50%)' }}>Use cases</h3>
+                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0px, -50%)' }}>Use cases</h3>
 
                 <div className="pa4">
                     <div className="inline-flex br-pill bg-black-10 pa1">