From ede365f6e2495d903ec9f4638cef47b804d8b51f Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Thu, 28 Nov 2019 08:38:55 +0700
Subject: [PATCH 1/4] Prefix url with /pattern

---
 client/App.tsx                   | 86 ++++++++++++++++----------------
 client/Explore.tsx               |  1 +
 client/Home.tsx                  |  3 +-
 client/components/CoverCard.tsx  |  2 +-
 client/layouts/DetailsLayout.tsx |  2 +-
 public/sitemap.xml               | 81 +++++++++++++++---------------
 6 files changed, 90 insertions(+), 85 deletions(-)

diff --git a/client/App.tsx b/client/App.tsx
index bb5912c..355f648 100644
--- a/client/App.tsx
+++ b/client/App.tsx
@@ -13,56 +13,58 @@ const App = () => {
         <Router>
             <RouteSwitch>
                 <Route exact={true} path='/'><Home /></Route>
-                <Route exact={true} path='/explore'><Explore /></Route>
-                <Route exact={true} path='/badge'><DetailsLoader pattern={Pattern.Badge} /></Route>
-                <Route exact={true} path='/breadcrumb'><DetailsLoader pattern={Pattern.Breadcrumb} /></Route>
-                <Route exact={true} path='/button-with-icon'><DetailsLoader pattern={Pattern.ButtonWithIcon} /></Route>
-                <Route exact={true} path='/card'><DetailsLoader pattern={Pattern.Card} /></Route>
-                <Route exact={true} path='/centering'><DetailsLoader pattern={Pattern.Centering} /></Route>
-                <Route exact={true} path='/docked-at-corner'><DetailsLoader pattern={Pattern.DockedAtCorner} /></Route>
-                <Route exact={true} path='/dot-leader'><DetailsLoader pattern={Pattern.DotLeader} /></Route>
-                <Route exact={true} path='/dot-navigation'><DetailsLoader pattern={Pattern.DotNavigation} /></Route>
-                <Route exact={true} path='/drop-area'><DetailsLoader pattern={Pattern.DropArea} /></Route>
-                <Route exact={true} path='/feature-list'><DetailsLoader pattern={Pattern.FeatureList} /></Route>
-                <Route exact={true} path='/fixed-at-corner'><DetailsLoader pattern={Pattern.FixedAtCorner} /></Route>
-                <Route exact={true} path='/holy-grail'><DetailsLoader pattern={Pattern.HolyGrail} /></Route>
-                <Route exact={true} path='/input-add-on'><DetailsLoader pattern={Pattern.InputAddOn} /></Route>
-                <Route exact={true} path='/media-object'><DetailsLoader pattern={Pattern.MediaObject} /></Route>
-                <Route exact={true} path='/menu'><DetailsLoader pattern={Pattern.Menu} /></Route>
-                <Route exact={true} path='/modal'><DetailsLoader pattern={Pattern.Modal} /></Route>
-                <Route exact={true} path='/notification'><DetailsLoader pattern={Pattern.Notification} /></Route>
-                <Route exact={true} path='/pagination'><DetailsLoader pattern={Pattern.Pagination} /></Route>
-                <Route exact={true} path='/previous-next-buttons'>
+                <Route exact={true} path='/patterns'><Explore /></Route>
+
+                <Route exact={true} path='/patterns/badge'><DetailsLoader pattern={Pattern.Badge} /></Route>
+                <Route exact={true} path='/patterns/breadcrumb'><DetailsLoader pattern={Pattern.Breadcrumb} /></Route>
+                <Route exact={true} path='/patterns/button-with-icon'><DetailsLoader pattern={Pattern.ButtonWithIcon} /></Route>
+                <Route exact={true} path='/patterns/card'><DetailsLoader pattern={Pattern.Card} /></Route>
+                <Route exact={true} path='/patterns/centering'><DetailsLoader pattern={Pattern.Centering} /></Route>
+                <Route exact={true} path='/patterns/docked-at-corner'><DetailsLoader pattern={Pattern.DockedAtCorner} /></Route>
+                <Route exact={true} path='/patterns/dot-leader'><DetailsLoader pattern={Pattern.DotLeader} /></Route>
+                <Route exact={true} path='/patterns/dot-navigation'><DetailsLoader pattern={Pattern.DotNavigation} /></Route>
+                <Route exact={true} path='/patterns/drop-area'><DetailsLoader pattern={Pattern.DropArea} /></Route>
+                <Route exact={true} path='/patterns/feature-list'><DetailsLoader pattern={Pattern.FeatureList} /></Route>
+                <Route exact={true} path='/patterns/fixed-at-corner'><DetailsLoader pattern={Pattern.FixedAtCorner} /></Route>
+                <Route exact={true} path='/patterns/floating-label'><DetailsLoader pattern={Pattern.FloatingLabel} /></Route>
+                <Route exact={true} path='/patterns/holy-grail'><DetailsLoader pattern={Pattern.HolyGrail} /></Route>
+                <Route exact={true} path='/patterns/input-add-on'><DetailsLoader pattern={Pattern.InputAddOn} /></Route>
+                <Route exact={true} path='/patterns/media-object'><DetailsLoader pattern={Pattern.MediaObject} /></Route>
+                <Route exact={true} path='/patterns/menu'><DetailsLoader pattern={Pattern.Menu} /></Route>
+                <Route exact={true} path='/patterns/modal'><DetailsLoader pattern={Pattern.Modal} /></Route>
+                <Route exact={true} path='/patterns/notification'><DetailsLoader pattern={Pattern.Notification} /></Route>
+                <Route exact={true} path='/patterns/pagination'><DetailsLoader pattern={Pattern.Pagination} /></Route>
+                <Route exact={true} path='/patterns/previous-next-buttons'>
                     <DetailsLoader pattern={Pattern.PreviousNextButtons} />
                 </Route>
-                <Route exact={true} path='/pricing-table'><DetailsLoader pattern={Pattern.PricingTable} /></Route>
-                <Route exact={true} path='/property-list'><DetailsLoader pattern={Pattern.PropertyList} /></Route>
-                <Route exact={true} path='/progress-bar'><DetailsLoader pattern={Pattern.ProgressBar} /></Route>
-                <Route exact={true} path='/questions-and-answers'>
+                <Route exact={true} path='/patterns/pricing-table'><DetailsLoader pattern={Pattern.PricingTable} /></Route>
+                <Route exact={true} path='/patterns/property-list'><DetailsLoader pattern={Pattern.PropertyList} /></Route>
+                <Route exact={true} path='/patterns/progress-bar'><DetailsLoader pattern={Pattern.ProgressBar} /></Route>
+                <Route exact={true} path='/patterns/questions-and-answers'>
                     <DetailsLoader pattern={Pattern.QuestionsAndAnswers} />
                 </Route>
-                <Route exact={true} path='/radio-switch'><DetailsLoader pattern={Pattern.RadioSwitch} /></Route>
-                <Route exact={true} path='/rating'><DetailsLoader pattern={Pattern.Rating} /></Route>
-                <Route exact={true} path='/same-height-columns'>
+                <Route exact={true} path='/patterns/radio-switch'><DetailsLoader pattern={Pattern.RadioSwitch} /></Route>
+                <Route exact={true} path='/patterns/rating'><DetailsLoader pattern={Pattern.Rating} /></Route>
+                <Route exact={true} path='/patterns/same-height-columns'>
                     <DetailsLoader pattern={Pattern.SameHeightColumns} />
                 </Route>
-                <Route exact={true} path='/search-box'><DetailsLoader pattern={Pattern.SearchBox} /></Route>
-                <Route exact={true} path='/separator'><DetailsLoader pattern={Pattern.Separator} /></Route>
-                <Route exact={true} path='/sidebar'><DetailsLoader pattern={Pattern.Sidebar} /></Route>
-                <Route exact={true} path='/simple-grid'><DetailsLoader pattern={Pattern.SimpleGrid} /></Route>
-                <Route exact={true} path='/slider'><DetailsLoader pattern={Pattern.Slider} /></Route>
-                <Route exact={true} path='/spin-button'><DetailsLoader pattern={Pattern.SpinButton} /></Route>
-                <Route exact={true} path='/split-navigation'><DetailsLoader pattern={Pattern.SplitNavigation} /></Route>
-                <Route exact={true} path='/split-screen'><DetailsLoader pattern={Pattern.SplitScreen} /></Route>
-                <Route exact={true} path='/stepper-input'><DetailsLoader pattern={Pattern.StepperInput} /></Route>
-                <Route exact={true} path='/sticky-footer'><DetailsLoader pattern={Pattern.StickyFooter} /></Route>
-                <Route exact={true} path='/sticky-header'><DetailsLoader pattern={Pattern.StickyHeader} /></Route>
-                <Route exact={true} path='/switch'><DetailsLoader pattern={Pattern.Switch} /></Route>
-                <Route exact={true} path='/tab'><DetailsLoader pattern={Pattern.Tab} /></Route>
-                <Route exact={true} path='/toggle-password-visibility'>
+                <Route exact={true} path='/patterns/search-box'><DetailsLoader pattern={Pattern.SearchBox} /></Route>
+                <Route exact={true} path='/patterns/separator'><DetailsLoader pattern={Pattern.Separator} /></Route>
+                <Route exact={true} path='/patterns/sidebar'><DetailsLoader pattern={Pattern.Sidebar} /></Route>
+                <Route exact={true} path='/patterns/simple-grid'><DetailsLoader pattern={Pattern.SimpleGrid} /></Route>
+                <Route exact={true} path='/patterns/slider'><DetailsLoader pattern={Pattern.Slider} /></Route>
+                <Route exact={true} path='/patterns/spin-button'><DetailsLoader pattern={Pattern.SpinButton} /></Route>
+                <Route exact={true} path='/patterns/split-navigation'><DetailsLoader pattern={Pattern.SplitNavigation} /></Route>
+                <Route exact={true} path='/patterns/split-screen'><DetailsLoader pattern={Pattern.SplitScreen} /></Route>
+                <Route exact={true} path='/patterns/stepper-input'><DetailsLoader pattern={Pattern.StepperInput} /></Route>
+                <Route exact={true} path='/patterns/sticky-footer'><DetailsLoader pattern={Pattern.StickyFooter} /></Route>
+                <Route exact={true} path='/patterns/sticky-header'><DetailsLoader pattern={Pattern.StickyHeader} /></Route>
+                <Route exact={true} path='/patterns/switch'><DetailsLoader pattern={Pattern.Switch} /></Route>
+                <Route exact={true} path='/patterns/tab'><DetailsLoader pattern={Pattern.Tab} /></Route>
+                <Route exact={true} path='/patterns/toggle-password-visibility'>
                     <DetailsLoader pattern={Pattern.TogglePasswordVisibility} />
                 </Route>
-                <Route exact={true} path='/wizard'><DetailsLoader pattern={Pattern.Wizard} /></Route>
+                <Route exact={true} path='/patterns/wizard'><DetailsLoader pattern={Pattern.Wizard} /></Route>
             </RouteSwitch>
         </Router>
     );
diff --git a/client/Explore.tsx b/client/Explore.tsx
index 51a6ace..99bc5b5 100644
--- a/client/Explore.tsx
+++ b/client/Explore.tsx
@@ -96,6 +96,7 @@ const Home = () => {
                         <CoverCard pattern={Pattern.DropArea} />
                         <CoverCard pattern={Pattern.FeatureList} />
                         <CoverCard pattern={Pattern.FixedAtCorner} />
+                        <CoverCard pattern={Pattern.FloatingLabel} />
                         <CoverCard pattern={Pattern.InputAddOn} />
                         <CoverCard pattern={Pattern.MediaObject} />
                         <CoverCard pattern={Pattern.Menu} />
diff --git a/client/Home.tsx b/client/Home.tsx
index f7abc74..8cddd17 100644
--- a/client/Home.tsx
+++ b/client/Home.tsx
@@ -169,7 +169,7 @@ const Home = () => {
                             50+ patterns
                         </div>
                         <Link
-                            to="/explore"
+                            to="/patterns"
                             style={{
                                 backgroundColor: '#00449e',
                                 borderRadius: '4px',
@@ -208,6 +208,7 @@ const Home = () => {
                         <CoverCard pattern={Pattern.DropArea} />
                         <CoverCard pattern={Pattern.FeatureList} />
                         <CoverCard pattern={Pattern.FixedAtCorner} />
+                        <CoverCard pattern={Pattern.FloatingLabel} />
                         <CoverCard pattern={Pattern.InputAddOn} />
                         <CoverCard pattern={Pattern.MediaObject} />
                         <CoverCard pattern={Pattern.Menu} />
diff --git a/client/components/CoverCard.tsx b/client/components/CoverCard.tsx
index aa3a81c..bacd873 100644
--- a/client/components/CoverCard.tsx
+++ b/client/components/CoverCard.tsx
@@ -12,7 +12,7 @@ interface CoverCardProps {
 const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
     return (
         <Link
-            to={`/${slug(pattern)}`}
+            to={`/patterns/${slug(pattern)}`}
             style={{
                 alignItems: 'center',
                 display: 'flex',
diff --git a/client/layouts/DetailsLayout.tsx b/client/layouts/DetailsLayout.tsx
index 1949902..63782e5 100644
--- a/client/layouts/DetailsLayout.tsx
+++ b/client/layouts/DetailsLayout.tsx
@@ -35,7 +35,7 @@ const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
                 </Link>
                 <div>~</div>
                 <Link
-                    to="/explore"
+                    to="/patterns"
                     style={{
                         color: '#FFF',
                         padding: '8px 16px',
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 225bf0d..39daf10 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -1,42 +1,43 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9">
-    <url><loc>https://csslayout.io/holy-grail</loc></url>
-    <url><loc>https://csslayout.io/sidebar</loc></url>
-    <url><loc>https://csslayout.io/split-screen</loc></url>
-    <url><loc>https://csslayout.io/sticky-footer</loc></url>
-    <url><loc>https://csslayout.io/sticky-header</loc></url>
-    <url><loc>https://csslayout.io/badge</loc></url>
-    <url><loc>https://csslayout.io/breadcrumb</loc></url>
-    <url><loc>https://csslayout.io/button-with-icon</loc></url>
-    <url><loc>https://csslayout.io/card</loc></url>
-    <url><loc>https://csslayout.io/centering</loc></url>
-    <url><loc>https://csslayout.io/docked-at-corner</loc></url>
-    <url><loc>https://csslayout.io/dot-navigation</loc></url>
-    <url><loc>https://csslayout.io/drop-area</loc></url>
-    <url><loc>https://csslayout.io/feature-list</loc></url>
-    <url><loc>https://csslayout.io/fixed-at-corner</loc></url>
-    <url><loc>https://csslayout.io/input-addon</loc></url>
-    <url><loc>https://csslayout.io/media-object</loc></url>
-    <url><loc>https://csslayout.io/menu</loc></url>
-    <url><loc>https://csslayout.io/modal</loc></url>
-    <url><loc>https://csslayout.io/notification</loc></url>
-    <url><loc>https://csslayout.io/pagination</loc></url>
-    <url><loc>https://csslayout.io/previous-next-buttons</loc></url>
-    <url><loc>https://csslayout.io/pricing-table</loc></url>
-    <url><loc>https://csslayout.io/progress-bar</loc></url>
-    <url><loc>https://csslayout.io/property-list</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/rating</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>
-    <url><loc>https://csslayout.io/simple-grid</loc></url>
-    <url><loc>https://csslayout.io/slider</loc></url>
-    <url><loc>https://csslayout.io/spin-button</loc></url>
-    <url><loc>https://csslayout.io/split-navigation</loc></url>
-    <url><loc>https://csslayout.io/stepper-input</loc></url>
-    <url><loc>https://csslayout.io/switch</loc></url>
-    <url><loc>https://csslayout.io/tab</loc></url>
-    <url><loc>https://csslayout.io/toggle-password-visibility</loc></url>
-    <url><loc>https://csslayout.io/wizard</loc></url>
+    <url><loc>https://csslayout.io/patterns</loc></url>
+    <url><loc>https://csslayout.io/patterns/holy-grail</loc></url>
+    <url><loc>https://csslayout.io/patterns/sidebar</loc></url>
+    <url><loc>https://csslayout.io/patterns/split-screen</loc></url>
+    <url><loc>https://csslayout.io/patterns/sticky-footer</loc></url>
+    <url><loc>https://csslayout.io/patterns/sticky-header</loc></url>
+    <url><loc>https://csslayout.io/patterns/badge</loc></url>
+    <url><loc>https://csslayout.io/patterns/breadcrumb</loc></url>
+    <url><loc>https://csslayout.io/patterns/button-with-icon</loc></url>
+    <url><loc>https://csslayout.io/patterns/card</loc></url>
+    <url><loc>https://csslayout.io/patterns/centering</loc></url>
+    <url><loc>https://csslayout.io/patterns/docked-at-corner</loc></url>
+    <url><loc>https://csslayout.io/patterns/dot-navigation</loc></url>
+    <url><loc>https://csslayout.io/patterns/drop-area</loc></url>
+    <url><loc>https://csslayout.io/patterns/feature-list</loc></url>
+    <url><loc>https://csslayout.io/patterns/fixed-at-corner</loc></url>
+    <url><loc>https://csslayout.io/patterns/input-addon</loc></url>
+    <url><loc>https://csslayout.io/patterns/media-object</loc></url>
+    <url><loc>https://csslayout.io/patterns/menu</loc></url>
+    <url><loc>https://csslayout.io/patterns/modal</loc></url>
+    <url><loc>https://csslayout.io/patterns/notification</loc></url>
+    <url><loc>https://csslayout.io/patterns/pagination</loc></url>
+    <url><loc>https://csslayout.io/patterns/previous-next-buttons</loc></url>
+    <url><loc>https://csslayout.io/patterns/pricing-table</loc></url>
+    <url><loc>https://csslayout.io/patterns/progress-bar</loc></url>
+    <url><loc>https://csslayout.io/patterns/property-list</loc></url>
+    <url><loc>https://csslayout.io/patterns/questions-and-answers</loc></url>
+    <url><loc>https://csslayout.io/patterns/radio-switch</loc></url>
+    <url><loc>https://csslayout.io/patterns/rating</loc></url>
+    <url><loc>https://csslayout.io/patterns/same-height-columns</loc></url>
+    <url><loc>https://csslayout.io/patterns/search-box</loc></url>
+    <url><loc>https://csslayout.io/patterns/separator</loc></url>
+    <url><loc>https://csslayout.io/patterns/simple-grid</loc></url>
+    <url><loc>https://csslayout.io/patterns/slider</loc></url>
+    <url><loc>https://csslayout.io/patterns/spin-button</loc></url>
+    <url><loc>https://csslayout.io/patterns/split-navigation</loc></url>
+    <url><loc>https://csslayout.io/patterns/stepper-input</loc></url>
+    <url><loc>https://csslayout.io/patterns/switch</loc></url>
+    <url><loc>https://csslayout.io/patterns/tab</loc></url>
+    <url><loc>https://csslayout.io/patterns/toggle-password-visibility</loc></url>
+    <url><loc>https://csslayout.io/patterns/wizard</loc></url>
 </urlset>
\ No newline at end of file

From 9062636d38c33b8f25d658cf932155d6e52c77ec Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Thu, 28 Nov 2019 09:30:01 +0700
Subject: [PATCH 2/4] Add floating label

---
 client/App.tsx                                | 36 +++++--
 client/constants/Pattern.ts                   |  1 +
 client/patterns/floating-label/Cover.tsx      | 46 +++++++++
 client/patterns/floating-label/Details.tsx    | 99 +++++++++++++++++++
 .../floating-label/floating-label.css         |  9 ++
 5 files changed, 182 insertions(+), 9 deletions(-)
 create mode 100644 client/patterns/floating-label/Cover.tsx
 create mode 100644 client/patterns/floating-label/Details.tsx
 create mode 100644 client/patterns/floating-label/floating-label.css

diff --git a/client/App.tsx b/client/App.tsx
index 355f648..31087dd 100644
--- a/client/App.tsx
+++ b/client/App.tsx
@@ -15,15 +15,33 @@ const App = () => {
                 <Route exact={true} path='/'><Home /></Route>
                 <Route exact={true} path='/patterns'><Explore /></Route>
 
-                <Route exact={true} path='/patterns/badge'><DetailsLoader pattern={Pattern.Badge} /></Route>
-                <Route exact={true} path='/patterns/breadcrumb'><DetailsLoader pattern={Pattern.Breadcrumb} /></Route>
-                <Route exact={true} path='/patterns/button-with-icon'><DetailsLoader pattern={Pattern.ButtonWithIcon} /></Route>
-                <Route exact={true} path='/patterns/card'><DetailsLoader pattern={Pattern.Card} /></Route>
-                <Route exact={true} path='/patterns/centering'><DetailsLoader pattern={Pattern.Centering} /></Route>
-                <Route exact={true} path='/patterns/docked-at-corner'><DetailsLoader pattern={Pattern.DockedAtCorner} /></Route>
-                <Route exact={true} path='/patterns/dot-leader'><DetailsLoader pattern={Pattern.DotLeader} /></Route>
-                <Route exact={true} path='/patterns/dot-navigation'><DetailsLoader pattern={Pattern.DotNavigation} /></Route>
-                <Route exact={true} path='/patterns/drop-area'><DetailsLoader pattern={Pattern.DropArea} /></Route>
+                <Route exact={true} path='/patterns/badge'>
+                    <DetailsLoader pattern={Pattern.Badge} />
+                </Route>
+                <Route exact={true} path='/patterns/breadcrumb'>
+                    <DetailsLoader pattern={Pattern.Breadcrumb} />
+                </Route>
+                <Route exact={true} path='/patterns/button-with-icon'>
+                    <DetailsLoader pattern={Pattern.ButtonWithIcon} />
+                </Route>
+                <Route exact={true} path='/patterns/card'>
+                    <DetailsLoader pattern={Pattern.Card} />
+                </Route>
+                <Route exact={true} path='/patterns/centering'>
+                    <DetailsLoader pattern={Pattern.Centering} />
+                </Route>
+                <Route exact={true} path='/patterns/docked-at-corner'>
+                    <DetailsLoader pattern={Pattern.DockedAtCorner} />
+                </Route>
+                <Route exact={true} path='/patterns/dot-leader'>
+                    <DetailsLoader pattern={Pattern.DotLeader} />
+                </Route>
+                <Route exact={true} path='/patterns/dot-navigation'>
+                    <DetailsLoader pattern={Pattern.DotNavigation} />
+                </Route>
+                <Route exact={true} path='/patterns/drop-area'>
+                    <DetailsLoader pattern={Pattern.DropArea} />
+                </Route>
                 <Route exact={true} path='/patterns/feature-list'><DetailsLoader pattern={Pattern.FeatureList} /></Route>
                 <Route exact={true} path='/patterns/fixed-at-corner'><DetailsLoader pattern={Pattern.FixedAtCorner} /></Route>
                 <Route exact={true} path='/patterns/floating-label'><DetailsLoader pattern={Pattern.FloatingLabel} /></Route>
diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 921e78e..9d18a8b 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -10,6 +10,7 @@ enum Pattern {
     DropArea = 'Drop area',
     FeatureList = 'Feature list',
     FixedAtCorner = 'Fixed at corner',
+    FloatingLabel = 'Floating label',
     HolyGrail = 'Holy grail',
     InputAddOn = 'Input add-on',
     MediaObject = 'Media object',
diff --git a/client/patterns/floating-label/Cover.tsx b/client/patterns/floating-label/Cover.tsx
new file mode 100644
index 0000000..4fbb19d
--- /dev/null
+++ b/client/patterns/floating-label/Cover.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        height: '32px',
+                        position: 'relative',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: '#BBB',
+                            height: '8px',
+                            left: '8px',
+                            padding: '0 8px',
+                            position: 'absolute',
+                            top: 0,
+                            transform: 'translate(0, -50%)',
+                            width: '40%',
+                        }}
+                    />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/floating-label/Details.tsx b/client/patterns/floating-label/Details.tsx
new file mode 100644
index 0000000..683f53d
--- /dev/null
+++ b/client/patterns/floating-label/Details.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+
+import './floating-label.css';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Floating label">
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    Type something in the input to see how the label is shown up.
+                </div>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                className="floating-container"
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    padding: '0 1px',
+                                    position: 'relative',
+                                    width: '200px',
+                                }}
+                            >
+                                <input
+                                    placeholder="Placeholder"
+                                    type="text"
+                                    style={{
+                                        borderColor: 'transparent',
+                                        padding: '8px',
+                                        width: '100%',
+                                    }}
+                                />
+                                <label
+                                    style={{
+                                        left: '8px',
+                                        padding: '0 8px',
+                                        position: 'absolute',
+                                        top: 0,
+                                        transition: 'all 200ms',
+                                    }}
+                                >
+                                    Placeholder
+                                </label>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<style>
+.floating-container {
+    position: relative;
+}
+
+.floating-container label {
+    /* Position the label */
+    left: 8px;
+    position: absolute;
+    top: 0;
+
+    /* Hide it by default */
+    opacity: 0;
+    transition: 'all 200ms',
+}
+
+/* Show the label at desired position when the placeholder of input isn't shown */
+.floating-container input:not(:placeholder-shown) + label {
+    background: #FFF;
+    transform: translate(0, -50%);
+    opacity: 1;
+}
+</style>
+
+<div class="floating-container">
+    <!-- The input -->
+    <input placeholder="Placeholder" />
+
+    <!-- The label -->
+    <label>Placeholder</label>
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/floating-label/floating-label.css b/client/patterns/floating-label/floating-label.css
new file mode 100644
index 0000000..c07ed08
--- /dev/null
+++ b/client/patterns/floating-label/floating-label.css
@@ -0,0 +1,9 @@
+.floating-container label {
+    opacity: 0;
+}
+
+.floating-container input:not(:placeholder-shown) + label {
+    background: #FFF;
+    transform: translate(0, -50%);
+    opacity: 1;
+}

From fbed770a2970bc03ca48b90fae79c81ca4254902 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Thu, 28 Nov 2019 12:14:36 +0700
Subject: [PATCH 3/4] Load the pattern page from hash

---
 client/App.tsx                                | 75 ++-----------------
 client/PatternPage.tsx                        | 24 ++++++
 client/constants/Pattern.ts                   |  2 +-
 client/loaders/DetailsLoader.tsx              |  4 +-
 .../{input-add-on => input-addon}/Cover.tsx   |  0
 .../{input-add-on => input-addon}/Details.tsx |  0
 6 files changed, 31 insertions(+), 74 deletions(-)
 create mode 100644 client/PatternPage.tsx
 rename client/patterns/{input-add-on => input-addon}/Cover.tsx (100%)
 rename client/patterns/{input-add-on => input-addon}/Details.tsx (100%)

diff --git a/client/App.tsx b/client/App.tsx
index 31087dd..d540590 100644
--- a/client/App.tsx
+++ b/client/App.tsx
@@ -3,10 +3,9 @@ import { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-rou
 
 import './index.css';
 
-import Pattern from './constants/Pattern';
 import Explore from './Explore';
 import Home from './Home';
-import DetailsLoader from './loaders/DetailsLoader';
+import PatternPage from './PatternPage';
 
 const App = () => {
     return (
@@ -15,74 +14,10 @@ const App = () => {
                 <Route exact={true} path='/'><Home /></Route>
                 <Route exact={true} path='/patterns'><Explore /></Route>
 
-                <Route exact={true} path='/patterns/badge'>
-                    <DetailsLoader pattern={Pattern.Badge} />
-                </Route>
-                <Route exact={true} path='/patterns/breadcrumb'>
-                    <DetailsLoader pattern={Pattern.Breadcrumb} />
-                </Route>
-                <Route exact={true} path='/patterns/button-with-icon'>
-                    <DetailsLoader pattern={Pattern.ButtonWithIcon} />
-                </Route>
-                <Route exact={true} path='/patterns/card'>
-                    <DetailsLoader pattern={Pattern.Card} />
-                </Route>
-                <Route exact={true} path='/patterns/centering'>
-                    <DetailsLoader pattern={Pattern.Centering} />
-                </Route>
-                <Route exact={true} path='/patterns/docked-at-corner'>
-                    <DetailsLoader pattern={Pattern.DockedAtCorner} />
-                </Route>
-                <Route exact={true} path='/patterns/dot-leader'>
-                    <DetailsLoader pattern={Pattern.DotLeader} />
-                </Route>
-                <Route exact={true} path='/patterns/dot-navigation'>
-                    <DetailsLoader pattern={Pattern.DotNavigation} />
-                </Route>
-                <Route exact={true} path='/patterns/drop-area'>
-                    <DetailsLoader pattern={Pattern.DropArea} />
-                </Route>
-                <Route exact={true} path='/patterns/feature-list'><DetailsLoader pattern={Pattern.FeatureList} /></Route>
-                <Route exact={true} path='/patterns/fixed-at-corner'><DetailsLoader pattern={Pattern.FixedAtCorner} /></Route>
-                <Route exact={true} path='/patterns/floating-label'><DetailsLoader pattern={Pattern.FloatingLabel} /></Route>
-                <Route exact={true} path='/patterns/holy-grail'><DetailsLoader pattern={Pattern.HolyGrail} /></Route>
-                <Route exact={true} path='/patterns/input-add-on'><DetailsLoader pattern={Pattern.InputAddOn} /></Route>
-                <Route exact={true} path='/patterns/media-object'><DetailsLoader pattern={Pattern.MediaObject} /></Route>
-                <Route exact={true} path='/patterns/menu'><DetailsLoader pattern={Pattern.Menu} /></Route>
-                <Route exact={true} path='/patterns/modal'><DetailsLoader pattern={Pattern.Modal} /></Route>
-                <Route exact={true} path='/patterns/notification'><DetailsLoader pattern={Pattern.Notification} /></Route>
-                <Route exact={true} path='/patterns/pagination'><DetailsLoader pattern={Pattern.Pagination} /></Route>
-                <Route exact={true} path='/patterns/previous-next-buttons'>
-                    <DetailsLoader pattern={Pattern.PreviousNextButtons} />
-                </Route>
-                <Route exact={true} path='/patterns/pricing-table'><DetailsLoader pattern={Pattern.PricingTable} /></Route>
-                <Route exact={true} path='/patterns/property-list'><DetailsLoader pattern={Pattern.PropertyList} /></Route>
-                <Route exact={true} path='/patterns/progress-bar'><DetailsLoader pattern={Pattern.ProgressBar} /></Route>
-                <Route exact={true} path='/patterns/questions-and-answers'>
-                    <DetailsLoader pattern={Pattern.QuestionsAndAnswers} />
-                </Route>
-                <Route exact={true} path='/patterns/radio-switch'><DetailsLoader pattern={Pattern.RadioSwitch} /></Route>
-                <Route exact={true} path='/patterns/rating'><DetailsLoader pattern={Pattern.Rating} /></Route>
-                <Route exact={true} path='/patterns/same-height-columns'>
-                    <DetailsLoader pattern={Pattern.SameHeightColumns} />
-                </Route>
-                <Route exact={true} path='/patterns/search-box'><DetailsLoader pattern={Pattern.SearchBox} /></Route>
-                <Route exact={true} path='/patterns/separator'><DetailsLoader pattern={Pattern.Separator} /></Route>
-                <Route exact={true} path='/patterns/sidebar'><DetailsLoader pattern={Pattern.Sidebar} /></Route>
-                <Route exact={true} path='/patterns/simple-grid'><DetailsLoader pattern={Pattern.SimpleGrid} /></Route>
-                <Route exact={true} path='/patterns/slider'><DetailsLoader pattern={Pattern.Slider} /></Route>
-                <Route exact={true} path='/patterns/spin-button'><DetailsLoader pattern={Pattern.SpinButton} /></Route>
-                <Route exact={true} path='/patterns/split-navigation'><DetailsLoader pattern={Pattern.SplitNavigation} /></Route>
-                <Route exact={true} path='/patterns/split-screen'><DetailsLoader pattern={Pattern.SplitScreen} /></Route>
-                <Route exact={true} path='/patterns/stepper-input'><DetailsLoader pattern={Pattern.StepperInput} /></Route>
-                <Route exact={true} path='/patterns/sticky-footer'><DetailsLoader pattern={Pattern.StickyFooter} /></Route>
-                <Route exact={true} path='/patterns/sticky-header'><DetailsLoader pattern={Pattern.StickyHeader} /></Route>
-                <Route exact={true} path='/patterns/switch'><DetailsLoader pattern={Pattern.Switch} /></Route>
-                <Route exact={true} path='/patterns/tab'><DetailsLoader pattern={Pattern.Tab} /></Route>
-                <Route exact={true} path='/patterns/toggle-password-visibility'>
-                    <DetailsLoader pattern={Pattern.TogglePasswordVisibility} />
-                </Route>
-                <Route exact={true} path='/patterns/wizard'><DetailsLoader pattern={Pattern.Wizard} /></Route>
+                <Route
+                    path='/patterns/:pattern'
+                    render={(props) => <PatternPage pattern={props.match.params.pattern as string} />} // tslint:disable-line
+                />
             </RouteSwitch>
         </Router>
     );
diff --git a/client/PatternPage.tsx b/client/PatternPage.tsx
new file mode 100644
index 0000000..0ecda90
--- /dev/null
+++ b/client/PatternPage.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import Pattern from './constants/Pattern';
+import DetailsLoader from './loaders/DetailsLoader';
+
+interface PatternPageProps {
+    pattern: string;
+}
+
+const capitalizeFirstLetter = (s: string) => `${s.charAt(0).toUpperCase()}${s.slice(1)}`;
+
+const PatternPage: React.FC<PatternPageProps> = ({ pattern }) => {
+    const name = pattern.split('-').map((s) => capitalizeFirstLetter(s)).join('');
+    const patterns = Object.keys(Pattern);
+
+    return (
+        patterns.indexOf(name) === -1
+            // TODO: Render 404
+            ? <div>404</div>
+            : <DetailsLoader pattern={pattern} />
+    );
+};
+
+export default PatternPage;
diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 9d18a8b..bc567e3 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -12,7 +12,7 @@ enum Pattern {
     FixedAtCorner = 'Fixed at corner',
     FloatingLabel = 'Floating label',
     HolyGrail = 'Holy grail',
-    InputAddOn = 'Input add-on',
+    InputAddOn = 'Input addon',
     MediaObject = 'Media object',
     Menu = 'Menu',
     Modal = 'Modal',
diff --git a/client/loaders/DetailsLoader.tsx b/client/loaders/DetailsLoader.tsx
index be36636..2ad34c6 100644
--- a/client/loaders/DetailsLoader.tsx
+++ b/client/loaders/DetailsLoader.tsx
@@ -3,10 +3,8 @@ import React from 'react';
 
 import './spinner.css';
 
-import Pattern from '../constants/Pattern';
-
 interface DetailsLoaderProps {
-    pattern: Pattern;
+    pattern: string;
 }
 
 const slug = (item: string) => item.toLowerCase().split(' ').join('-');
diff --git a/client/patterns/input-add-on/Cover.tsx b/client/patterns/input-addon/Cover.tsx
similarity index 100%
rename from client/patterns/input-add-on/Cover.tsx
rename to client/patterns/input-addon/Cover.tsx
diff --git a/client/patterns/input-add-on/Details.tsx b/client/patterns/input-addon/Details.tsx
similarity index 100%
rename from client/patterns/input-add-on/Details.tsx
rename to client/patterns/input-addon/Details.tsx

From 97acac4e45da94a992537933745067df1a6efe82 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Thu, 28 Nov 2019 12:17:41 +0700
Subject: [PATCH 4/4] Move pages to /pages

---
 client/App.tsx                                | 11 +++++------
 client/{Explore.tsx => pages/ExplorePage.tsx} | 14 +++++++-------
 client/{Home.tsx => pages/HomePage.tsx}       | 12 ++++++------
 client/{ => pages}/PatternPage.tsx            |  4 ++--
 client/{ => pages}/home.css                   |  0
 5 files changed, 20 insertions(+), 21 deletions(-)
 rename client/{Explore.tsx => pages/ExplorePage.tsx} (94%)
 rename client/{Home.tsx => pages/HomePage.tsx} (98%)
 rename client/{ => pages}/PatternPage.tsx (85%)
 rename client/{ => pages}/home.css (100%)

diff --git a/client/App.tsx b/client/App.tsx
index d540590..0353de5 100644
--- a/client/App.tsx
+++ b/client/App.tsx
@@ -3,17 +3,16 @@ import { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-rou
 
 import './index.css';
 
-import Explore from './Explore';
-import Home from './Home';
-import PatternPage from './PatternPage';
+import ExplorePage from './pages/ExplorePage';
+import HomePage from './pages/HomePage';
+import PatternPage from './pages/PatternPage';
 
 const App = () => {
     return (
         <Router>
             <RouteSwitch>
-                <Route exact={true} path='/'><Home /></Route>
-                <Route exact={true} path='/patterns'><Explore /></Route>
-
+                <Route exact={true} path='/'><HomePage /></Route>
+                <Route exact={true} path='/patterns'><ExplorePage /></Route>
                 <Route
                     path='/patterns/:pattern'
                     render={(props) => <PatternPage pattern={props.match.params.pattern as string} />} // tslint:disable-line
diff --git a/client/Explore.tsx b/client/pages/ExplorePage.tsx
similarity index 94%
rename from client/Explore.tsx
rename to client/pages/ExplorePage.tsx
index 99bc5b5..57bb5cf 100644
--- a/client/Explore.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import CoverCard from './components/CoverCard';
-import Heading from './components/Heading';
-import Pattern from './constants/Pattern';
-import useDocumentTitle from './hooks/useDocumentTitle';
-import Layout from './layouts/Layout';
+import CoverCard from '../components/CoverCard';
+import Heading from '../components/Heading';
+import Pattern from '../constants/Pattern';
+import useDocumentTitle from '../hooks/useDocumentTitle';
+import Layout from '../layouts/Layout';
 
-const Home = () => {
+const ExplorePage = () => {
     useDocumentTitle('CSS Layout ∙ Explore');
 
     return (
@@ -129,4 +129,4 @@ const Home = () => {
     );
 };
 
-export default Home;
+export default ExplorePage;
diff --git a/client/Home.tsx b/client/pages/HomePage.tsx
similarity index 98%
rename from client/Home.tsx
rename to client/pages/HomePage.tsx
index 8cddd17..3ffb173 100644
--- a/client/Home.tsx
+++ b/client/pages/HomePage.tsx
@@ -3,12 +3,12 @@ import { Link } from 'react-router-dom';
 
 import './home.css';
 
-import CoverCard from './components/CoverCard';
-import Pattern from './constants/Pattern';
-import useDocumentTitle from './hooks/useDocumentTitle';
-import Layout from './layouts/Layout';
+import CoverCard from '../components/CoverCard';
+import Pattern from '../constants/Pattern';
+import useDocumentTitle from '../hooks/useDocumentTitle';
+import Layout from '../layouts/Layout';
 
-const Home = () => {
+const HomePage = () => {
     useDocumentTitle('CSS Layout');
 
     return (
@@ -241,4 +241,4 @@ const Home = () => {
     );
 };
 
-export default Home;
+export default HomePage;
diff --git a/client/PatternPage.tsx b/client/pages/PatternPage.tsx
similarity index 85%
rename from client/PatternPage.tsx
rename to client/pages/PatternPage.tsx
index 0ecda90..42d999f 100644
--- a/client/PatternPage.tsx
+++ b/client/pages/PatternPage.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import Pattern from './constants/Pattern';
-import DetailsLoader from './loaders/DetailsLoader';
+import Pattern from '../constants/Pattern';
+import DetailsLoader from '../loaders/DetailsLoader';
 
 interface PatternPageProps {
     pattern: string;
diff --git a/client/home.css b/client/pages/home.css
similarity index 100%
rename from client/home.css
rename to client/pages/home.css