Merge pull request #45 from phuoc-ng/radio-switch

Radio switch

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>

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" />
@@ -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" />

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>

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;

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 ttu" 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;

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>