Merge pull request #33 from phuoc-ng/search

Add dot navigation, search box

client/App.jsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-router-dom';
 
+import './index.css';
+
 import Home from './Home';
 import Badge from './layouts/badge/Details';
 import Breadcrumb from './layouts/breadcrumb/Details';
 import ButtonWithIcon from './layouts/button-with-icon/Details';
 import Card from './layouts/card/Details';
 import Centering from './layouts/centering/Details';
+import DotNavigation from './layouts/dot-navigation/Details';
 import FeatureList from './layouts/feature-list/Details';
 import FixedAtCorner from './layouts/fixed-at-corner/Details';
 import HolyGrail from './layouts/holy-grail/Details';
@@ -20,6 +23,7 @@ import PreviousNextButtons from './layouts/previous-next-buttons/Details';
 import PricingTable from './layouts/pricing-table/Details';
 import ProgressBar from './layouts/progress-bar/Details';
 import SameHeightColumns from './layouts/same-height-columns/Details';
+import SearchBox from './layouts/search-box/Details';
 import Separator from './layouts/separator/Details';
 import Sidebar from './layouts/sidebar/Details';
 import SimpleGrid from './layouts/simple-grid/Details';
@@ -43,6 +47,7 @@ const App = () => {
                 <Route exact={true} path='/button-with-icon'><ButtonWithIcon /></Route>
                 <Route exact={true} path='/card'><Card /></Route>
                 <Route exact={true} path='/centering'><Centering /></Route>
+                <Route exact={true} path='/dot-navigation'><DotNavigation /></Route>
                 <Route exact={true} path='/feature-list'><FeatureList /></Route>
                 <Route exact={true} path='/fixed-at-corner'><FixedAtCorner /></Route>
                 <Route exact={true} path='/holy-grail'><HolyGrail /></Route>
@@ -56,6 +61,7 @@ const App = () => {
                 <Route exact={true} path='/pricing-table'><PricingTable /></Route>
                 <Route exact={true} path='/progress-bar'><ProgressBar /></Route>
                 <Route exact={true} path='/same-height-columns'><SameHeightColumns /></Route>
+                <Route exact={true} path='/search-box'><SearchBox /></Route>
                 <Route exact={true} path='/separator'><Separator /></Route>
                 <Route exact={true} path='/sidebar'><Sidebar /></Route>
                 <Route exact={true} path='/simple-grid'><SimpleGrid /></Route>

client/Home.jsx

@@ -6,6 +6,7 @@ import BreadcrumbCover from './layouts/breadcrumb/Cover';
 import ButtonWithIconCover from './layouts/button-with-icon/Cover';
 import CardCover from './layouts/card/Cover';
 import CenterCover from './layouts/centering/Cover';
+import DotNavigationCover from './layouts/dot-navigation/Cover';
 import FeatureListCover from './layouts/feature-list/Cover';
 import FixedAtCornerCover from './layouts/fixed-at-corner/Cover';
 import HolyGrailCover from './layouts/holy-grail/Cover';
@@ -19,6 +20,7 @@ import PreviousNextButtonCover from './layouts/previous-next-buttons/Cover';
 import PricingTableCover from './layouts/pricing-table/Cover';
 import ProgressBarCover from './layouts/progress-bar/Cover';
 import SameHeightColumnsCover from './layouts/same-height-columns/Cover';
+import SearchBoxCover from './layouts/search-box/Cover';
 import SeparatorCover from './layouts/separator/Cover';
 import SidebarCover from './layouts/sidebar/Cover';
 import SimpleGridCover from './layouts/simple-grid/Cover';
@@ -142,6 +144,12 @@ const Home = () => {
                                 <h4 className="f5 mv0 pt3">Centering</h4>
                             </Link>
                         </div>
+                        <div className="pa1 w-20">
+                            <Link to="/dot-navigation" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <DotNavigationCover />
+                                <h4 className="f5 mv0 pt3">Dot navigation</h4>
+                            </Link>
+                        </div>
                         <div className="pa1 w-20">
                             <Link to="/feature-list" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                                 <FeatureListCover />
@@ -214,6 +222,12 @@ const Home = () => {
                                 <h4 className="f5 mv0 pt3">Same height columns</h4>
                             </Link>
                         </div>
+                        <div className="pa1 w-20">
+                            <Link to="/search-box" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                                <SearchBoxCover />
+                                <h4 className="f5 mv0 pt3">Search box</h4>
+                            </Link>
+                        </div>
                         <div className="pa1 w-20">
                             <Link to="/separator" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                                 <SeparatorCover />

client/index.css

@@ -0,0 +1,10 @@
+@import '../vendors/tachyons@4.10.0/tachyons.min.css';
+@import '../vendors/highlight.js@9.12.0/dracula.min.css';
+
+body {
+    -webkit-font-smoothing: antialiased;
+}
+code {
+    font-family: 'Source Code Pro', monospace;
+    font-size: 14px;
+}

client/index.html

@@ -4,17 +4,6 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap" rel="stylesheet">
-    <link href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/dracula.min.css" rel="stylesheet">
-    <style>
-    body {
-        -webkit-font-smoothing: antialiased;
-    }
-    code {
-        font-family: 'Source Code Pro', monospace;
-        font-size: 14px;
-    }
-    </style>
 </head>
 <body class="avenir w-100">
     <div id="root"></div>

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

@@ -8,7 +8,7 @@ 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="w-100 flex flex-row items-center ba b--black-30 br2 pa1">
                     <div className="mr1"><Circle /></div>
                     <Rectangle />
                 </div>

client/layouts/dot-navigation/Cover.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover = () => {
+    return (
+        <Frame>
+            <div className="h-100 flex flex-column items-center justify-center">
+                <div className="flex items-center">
+                    <div className="mh1 br-pill ba b--black-30" style={{ height: '8px', width: '8px' }} />
+                    <div className="mh1 br-pill bg-black-30" style={{ height: '8px', width: '8px' }} />
+                    <div className="mh1 br-pill ba b--black-30" style={{ height: '8px', width: '8px' }} />
+                    <div className="mh1 br-pill ba b--black-30" style={{ height: '8px', width: '8px' }} />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/layouts/dot-navigation/Details.jsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+
+import DetailsLayout from '../../DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import SampleCode from '../../SampleCode';
+
+const Details = () => {
+    const [activeItem, setActiveItem] = useState(0);
+
+    const Dot = ({ index }) => {
+        const isActive = index === activeItem;
+        const click = () => setActiveItem(index);
+        return (
+            <li
+                className={`pointer mh1 br-pill ${isActive ? 'bg-black-30' : 'ba b--black-30'}`}
+                style={{
+                    height: '12px',
+                    width: '12px',
+                }}
+                onClick={click}
+            />
+        );
+    };
+
+    return (
+        <DetailsLayout title="Dot navigation">
+            <BrowserFrame
+                content={
+                    <div className="h-100 flex flex-column items-center justify-center">
+                        <ul className="list ma0 pa0 flex items-center justify-center">
+                            <Dot index={0} />
+                            <Dot index={1} />
+                            <Dot index={2} />
+                            <Dot index={3} />
+                        </ul>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<ul style="
+    /* Content is centered */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Reset styles */
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+">
+    <li style="
+        /* Rounded border */
+        border-radius: 9999px;
+        height: 12px;
+        width: 12px;
+
+        /* Active dot */
+        background-color: rgba(0, 0, 0, .3);
+
+        /* Inactive dot */
+        background-color: transparent;
+        border: 1px solid rgba(0, 0, 0, .3);
+
+        /* OPTIONAL: Spacing between dots */
+        margin: 0 4px;
+    " />
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/layouts/search-box/Cover.jsx

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

client/layouts/search-box/Details.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import DetailsLayout from '../../DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+import SampleCode from '../../SampleCode';
+
+const Details = () => {
+    return (
+        <DetailsLayout title="Search box">
+            <BrowserFrame
+                content={
+                    <div className="h-100 flex flex-column items-center justify-center">
+                        <div className="w5">
+                            <div className="mb3 b--black-30 ba br1 flex">
+                                <input type="text" placeholder="Search" className="pa1 b--transparent" style={{ flex: 1 }} />
+                                <div className="pa2">
+                                    <Circle />
+                                </div>
+                            </div>
+
+                            <div className="b--black-30 ba br1 flex flex-row-reverse">
+                                <input type="text" placeholder="Search" className="pa1 b--transparent" style={{ flex: 1 }} />
+                                <div className="pa2">
+                                    <Circle />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<div style="
+    display: flex;
+
+    /* If you want to place the icon before the text input */
+    flex-direction: row-reverse;
+
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+">
+    <!-- Text input -->
+    <input
+        type="text"
+        style="
+            border-color: transparent;
+            /* Take available width */
+            flex: 1;
+        "
+    />
+
+    <!-- Search icon sticks to the left or right -->
+    ...
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

vendors/highlight.js@9.12.0/dracula.min.css

@@ -0,0 +1 @@
+.hljs{display:block;overflow-x:auto;padding:0.5em;background:#282a36}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-section,.hljs-link{color:#8be9fd}.hljs-function .hljs-keyword{color:#ff79c6}.hljs,.hljs-subst{color:#f8f8f2}.hljs-string,.hljs-title,.hljs-name,.hljs-type,.hljs-attribute,.hljs-symbol,.hljs-bullet,.hljs-addition,.hljs-variable,.hljs-template-tag,.hljs-template-variable{color:#f1fa8c}.hljs-comment,.hljs-quote,.hljs-deletion,.hljs-meta{color:#6272a4}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-title,.hljs-section,.hljs-doctag,.hljs-type,.hljs-name,.hljs-strong{font-weight:bold}.hljs-emphasis{font-style:italic}