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] 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;
+}