From 14b07815128e168ddbd616ff80d11a2dd9679b4e Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Wed, 31 Mar 2021 20:55:44 +0700
Subject: [PATCH] Add CSS code for input patterns

---
 client/patterns/button-with-icon/Details.tsx  | 18 ++--
 client/patterns/chip/Details.tsx              | 28 +++---
 .../custom-checkbox-button/Details.tsx        | 75 ++++++++--------
 .../patterns/custom-radio-button/Details.tsx  | 81 ++++++++++--------
 client/patterns/floating-label/Details.tsx    | 43 +++++-----
 client/patterns/input-addon/Details.tsx       | 85 +++++++------------
 .../patterns/radio-button-group/Details.tsx   | 83 +++++++++---------
 client/patterns/radio-switch/Details.tsx      | 44 ++++++----
 client/patterns/rating/Details.tsx            | 32 ++++---
 client/patterns/search-box/Details.tsx        | 31 +++----
 client/patterns/slider/Details.tsx            | 67 ++++++++-------
 11 files changed, 300 insertions(+), 287 deletions(-)

diff --git a/client/patterns/button-with-icon/Details.tsx b/client/patterns/button-with-icon/Details.tsx
index 578f603..a5f7f13 100644
--- a/client/patterns/button-with-icon/Details.tsx
+++ b/client/patterns/button-with-icon/Details.tsx
@@ -22,13 +22,7 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<button style="
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-">
+<button class="button">
     <!-- Icon -->
     ...
 
@@ -36,7 +30,15 @@ html={`
     ...
 </div>
 `}
-css={``}
+css={`
+.button {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/chip/Details.tsx b/client/patterns/chip/Details.tsx
index 95a5125..dcbfa90 100644
--- a/client/patterns/chip/Details.tsx
+++ b/client/patterns/chip/Details.tsx
@@ -26,7 +26,19 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
+<div class="chip">
+    <!-- Content -->
+    <div class="chip__content">
+        ...
+    </div>
+
+    <!-- The close button -->
+    <!-- See https://csslayout.io/patterns/close-button -->
+    ...
+</div>
+`}
+css={`
+.chip {
     /* Center the content */
     align-items: center;
     display: inline-flex;
@@ -40,18 +52,12 @@ html={`
 
     /* Spacing */
     padding: 4px 8px;
-">
-    <!-- Content -->
-    <div style="margin-right: 4px;">
-        ...
-    </div>
+}
 
-    <!-- The close button -->
-    <!-- See https://csslayout.io/patterns/close-button -->
-    ...
-</div>
+.chip__content {
+    margin-right: 4px;
+}
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/custom-checkbox-button/Details.tsx b/client/patterns/custom-checkbox-button/Details.tsx
index b923ddc..d962d36 100644
--- a/client/patterns/custom-checkbox-button/Details.tsx
+++ b/client/patterns/custom-checkbox-button/Details.tsx
@@ -71,51 +71,56 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<label style="
-    /* Center the content horizontally */
-    align-items: center;
-    display: inline-flex;
-
-    /* Cursor */
-    cursor: pointer;
-">
+<label class="label">
     <!-- The real checkbox -->
-    <input
-        type="checkbox"
-        style="
-            /* Hide it */
-            display: none;
-        "
-    />
+    <input type="checkbox" class="label__input" />
 
     <!-- The fake square -->
-    <div style="
-        border: 1px solid rgba(0, 0, 0, 0.3);
-        border-radius: 4px;
-
-        /* Spacing */
-        margin-right: 8px;
-        padding: 4px;
-    ">
+    <div class="label__square">
         <!-- The inner square -->
-        <div style="
-            border-radius: 4px;
-            height: 16px;
-            width: 16px;
-
-            /* For selected checkbox */
-            background-color: #00449E;
-
-            /* For not selected checkbox */
-            background-color: transparent;
-        " />
+        <div class="label__checkbox label__square--selected"></div>
     </div>
 
     <!-- The text -->
     ...
 </div>
 `}
-css={``}
+css={`
+.label {
+    /* Center the content horizontally */
+    align-items: center;
+    display: inline-flex;
+
+    /* Cursor */
+    cursor: pointer;
+}
+
+.label__input {
+    /* Hide it */
+    display: none;
+}
+
+.label__square {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+
+    /* Spacing */
+    margin-right: 8px;
+    padding: 4px;
+}
+
+.label__checkbox {
+    background-color: transparent;
+    border-radius: 4px;
+    height: 16px;
+    width: 16px;
+}
+
+.label__checkbox--selected {
+    /* For selected checkbox */
+    background-color: #00449E;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/custom-radio-button/Details.tsx b/client/patterns/custom-radio-button/Details.tsx
index 2398ce1..1ac9eb0 100644
--- a/client/patterns/custom-radio-button/Details.tsx
+++ b/client/patterns/custom-radio-button/Details.tsx
@@ -72,53 +72,60 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<label style="
-    /* Center the content horizontally */
-    align-items: center;
-    display: inline-flex;
-
-    /* Cursor */
-    cursor: pointer;
-">
+<label class="label">
     <!-- The real radio -->
-    <input
-        type="radio"
-        style="
-            /* Hide it */
-            display: none;
-        "
-    />
+    <input type="radio" class="label__input" />
 
     <!-- The fake circle -->
-    <div style="
-        /* Rounded border */
-        border: 1px solid rgba(0, 0, 0, 0.3);
-        border-radius: 9999px;
-
-        /* Spacing */
-        margin-right: 8px;
-        padding: 4px;
-    ">
+    <div class="label__circle">
         <!-- The inner circle -->
-        <div style="
-            /* Rounded border */
-            border-radius: 9999px;
-            height: 16px;
-            width: 16px;
-
-            /* For selected radio */
-            background-color: #00449E;
-
-            /* For not selected radio */
-            background-color: transparent;
-        " />
+        <div class="label__radio label__radio--selected"></div>
     </div>
 
     <!-- The text -->
     ...
 </div>
 `}
-css={``}
+css={`
+.label {
+    /* Center the content horizontally */
+    align-items: center;
+    display: inline-flex;
+
+    /* Cursor */
+    cursor: pointer;
+}
+
+.label__input {
+    /* Hide it */
+    display: none;
+}
+
+.label__circle {
+    /* Rounded border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 9999px;
+
+    /* Spacing */
+    margin-right: 8px;
+    padding: 4px;
+}
+
+.label__radio {
+    /* Rounded border */
+    border-radius: 9999px;
+    height: 16px;
+    width: 16px;
+
+    /* For not selected radio */
+    background-color: transparent;
+}
+
+.label__radio--selected {
+    /* For selected radio */
+    background-color: #00449E;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/floating-label/Details.tsx b/client/patterns/floating-label/Details.tsx
index e3eecf2..f1edb5b 100644
--- a/client/patterns/floating-label/Details.tsx
+++ b/client/patterns/floating-label/Details.tsx
@@ -25,12 +25,30 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<style>
-.p-floating-container {
+<div class="container">
+    <!-- The input -->
+    <input placeholder="Placeholder" class="container__input" />
+
+    <!-- The label -->
+    <label class="container__label">Placeholder</label>
+</div>
+`}
+css={`
+.container {
     position: relative;
 }
 
-.p-floating-container label {
+/*
+Show the label at desired position when the 
+placeholder of input isn't shown
+*/
+.container__input:not(:placeholder-shown) + .container__label {
+    background: #FFF;
+    transform: translate(0, -50%);
+    opacity: 1;
+}
+
+.container__label {
     /* Position the label */
     left: 8px;
     position: absolute;
@@ -38,26 +56,9 @@ html={`
 
     /* Hide it by default */
     opacity: 0;
-    transition: 'all 200ms',
+    transition: all 200ms;
 }
-
-/* Show the label at desired position when the placeholder of input isn't shown */
-.p-floating-container input:not(:placeholder-shown) + label {
-    background: #FFF;
-    transform: translate(0, -50%);
-    opacity: 1;
-}
-</style>
-
-<div class="p-floating-container">
-    <!-- The input -->
-    <input placeholder="Placeholder" />
-
-    <!-- The label -->
-    <label>Placeholder</label>
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/input-addon/Details.tsx b/client/patterns/input-addon/Details.tsx
index 04c406f..f0e7163 100644
--- a/client/patterns/input-addon/Details.tsx
+++ b/client/patterns/input-addon/Details.tsx
@@ -22,88 +22,63 @@ const Details: React.FC<{}> = () => {
                 <BrowserFrame
 html={`
 <!-- Add-on prepended -->
-<div style="
-    display: flex;
-
-    /* Take full size */
-    width: 100%;
-">
+<div class="container">
     <!-- Add-on -->
-    <div style="
-        /* Center the content */
-        align-items: center;
-        display: flex;
-        justify-content: center;
-    ">
+    <div class="container__addon">
         ...
     </div>
 
     <!-- Input -->
-    <input type="text" style="
-        /* Take the remaining width */
-        flex: 1;
-    " />
+    <input type="text" class="container__input" />
 </div>
 
 <!-- Add-on appended -->
-<div style="
-    display: flex;
-
-    /* Take full size */
-    width: 100%;
-">
+<div class="container">
     <!-- Input -->
-    <input type="text" style="
-        /* Take the remaining width */
-        flex: 1;
-    " />
+    <input type="text" class="container__input" />
 
     <!-- Add-on -->
-    <div style="
-        /* Center the content */
-        align-items: center;
-        display: flex;
-        justify-content: center;
-    ">
+    <div class="container__addon">
         ...
     </div>
 </div>
 
 <!-- Appended and prepended add-ons -->
-<div style="
-    display: flex;
-
-    /* Take full size */
-    width: 100%;
-">
+<div class="container">
     <!-- Add-on -->
-    <div style="
-        /* Center the content */
-        align-items: center;
-        display: flex;
-        justify-content: center;
-    ">
+    <div class="container__addon">
         ...
     </div>
 
     <!-- Input -->
-    <input type="text" style="
-        /* Take the remaining width */
-        flex: 1;
-    " />
+    <input type="text" class="container__input" />
 
     <!-- Add-on -->
-    <div style="
-        /* Center the content */
-        align-items: center;
-        display: flex;
-        justify-content: center;
-    ">
+    <div class="container__addon">
         ...
     </div>
 </div>
 `}
-css={``}
+css={`
+.container {
+    display: flex;
+
+    /* Take full size */
+    width: 100%;
+}
+
+.container__input {
+    /* Take the remaining width */
+    flex: 1;
+}
+
+.container__addon {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/radio-button-group/Details.tsx b/client/patterns/radio-button-group/Details.tsx
index 4891b41..5ee8c11 100644
--- a/client/patterns/radio-button-group/Details.tsx
+++ b/client/patterns/radio-button-group/Details.tsx
@@ -58,51 +58,14 @@ const Details: React.FC<{}> = () => {
                 <BrowserFrame
 html={`
 <style>
-.p-radio-button-group label {
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-}
 
-/* Remove the right border from the last label */
-.p-radio-button-group label:last-child {
-    border-right-color: transparent;
-}
 </style>
 
-<div
-    class="p-radio-button-group"
-    style="
-        display: flex;
-
-        /* Border */
-        border: 1px solid rgba(0, 0, 0, 0.3);
-        border-radius: 4px;
-        height: 32px;
-    "
->
+<div class="container">
     <!-- Each radio item -->
-    <label style="
-        /* Center the content */
-        align-items: center;
-        display: inline-flex;
-
-        padding: 8px;
-
-        /* For selected radio */
-        background-color: #00449E;
-        color: #FFF;
-
-        /* For not selected radio */
-        background-color: transparent;
-        color: #CCC;
-    ">
+    <label class="container__label">
         <!-- The radio input -->
-        <input
-            type="radio"
-            style="
-                /* Hide it */
-                display: none;
-            "
-        />
+        <input type="radio" class="container__input" />
 
         <!-- The text -->
         ...
@@ -112,7 +75,45 @@ html={`
     ...
 </div>
 `}
-css={``}
+css={`
+.container {
+    display: flex;
+
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+    height: 32px;
+}
+
+.container__label {
+    /* Center the content */
+    align-items: center;
+    display: inline-flex;
+
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
+    padding: 8px;
+
+    /* For not selected radio */
+    background-color: transparent;
+    color: #CCC;
+}
+
+.container__label:last-child {
+    /* Remove the right border from the last label */
+    border-right-color: transparent;
+}
+
+.container__label--selected {
+    /* For selected radio */
+    background-color: #00449E;
+    color: #FFF;
+}
+
+.container__input {
+    /* Hide it */
+    display: none;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/radio-switch/Details.tsx b/client/patterns/radio-switch/Details.tsx
index d0ea964..9dee613 100644
--- a/client/patterns/radio-switch/Details.tsx
+++ b/client/patterns/radio-switch/Details.tsx
@@ -26,23 +26,10 @@ const Details: React.FC<{}> = () => {
                 <BrowserFrame
 html={`
 <!-- Container -->
-<div style="
-    background-color: rgba(0, 0, 0, .1);
-    border-radius: 9999px;
-    display: inline-flex;
-    padding: 4px;
-">
+<div class="container">
     <!-- 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" />
+    <label class="container__label container__label--selected">
+        <input type="radio" class="container__input" />
 
         <!-- Text -->
         ...
@@ -52,7 +39,30 @@ html={`
     ...
 </div>
 `}
-css={``}
+css={`
+.container {
+    background-color: rgba(0, 0, 0, .1);
+    border-radius: 9999px;
+    display: inline-flex;
+    padding: 4px;
+}
+
+.container__label {
+    border-radius: 9999px;
+    cursor: pointer;
+    padding: 4px 8px;
+}
+
+.container__label--selected {
+    /* For selected radio only */
+    background-color: #357edd;
+    color: #fff;
+}
+
+.container__input {
+    display: none
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/rating/Details.tsx b/client/patterns/rating/Details.tsx
index fb384e1..dc53dbe 100644
--- a/client/patterns/rating/Details.tsx
+++ b/client/patterns/rating/Details.tsx
@@ -21,8 +21,16 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<style>
-.p-rating {
+<div class="rating">
+    <button class="rating__star">☆</button>
+    <button class="rating__star">☆</button>
+    <button class="rating__star">☆</button>
+    <button class="rating__star">☆</button>
+    <button class="rating__star">★</button>
+</div>
+`}
+css={`
+.rating {
     /* Center the content */
     align-items: center;
     display: flex;
@@ -33,8 +41,8 @@ html={`
     font-size: 32px;
 }
 
-.p-rating .p-rating-star:hover,
-.p-rating .p-rating-star:hover ~ .p-rating-star {
+.rating__star:hover,
+.rating__star:hover ~ .rating__star {
     color: transparent;
 }
 
@@ -42,15 +50,15 @@ html={`
 Make all previous stars selected when hover on a star
 Note that we use \`flex-direction: row-reverse\` on the container
 */
-.p-rating .p-rating-star:hover:before,
-.p-rating .p-rating-star:hover ~ .p-rating-star:before {
+.rating__star:hover:before,
+.rating__star:hover ~ .rating__star:before {
     color: #00449e;
     content: '\\2605';
     left: 0;
     position: absolute;
 }
 
-.p-rating-star {
+.rating__star {
     /* Reset styles for button */
     background-color: transparent;
     border: transparent;
@@ -60,17 +68,7 @@ Note that we use \`flex-direction: row-reverse\` on the container
     /* Used to position the hover state */
     position: relative;
 }
-</style>
-
-<div class="p-rating">
-    <button class="p-rating-star">☆</button>
-    <button class="p-rating-star">☆</button>
-    <button class="p-rating-star">☆</button>
-    <button class="p-rating-star">☆</button>
-    <button class="p-rating-star">★</button>
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/search-box/Details.tsx b/client/patterns/search-box/Details.tsx
index d541c00..27cbc21 100644
--- a/client/patterns/search-box/Details.tsx
+++ b/client/patterns/search-box/Details.tsx
@@ -21,7 +21,16 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- Text input -->
+    <input type="text" class="container__input" />
+
+    <!-- Search icon sticks to the left or right -->
+    ...
+</div>
+`}
+css={`
+.container {
     display: flex;
 
     /* If you want to place the icon before the text input */
@@ -29,22 +38,14 @@ html={`
 
     /* 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>
+.container__input {
+    border-color: transparent;
+    /* Take available width */
+    flex: 1;
+}
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/slider/Details.tsx b/client/patterns/slider/Details.tsx
index fa43f5b..1403269 100644
--- a/client/patterns/slider/Details.tsx
+++ b/client/patterns/slider/Details.tsx
@@ -22,49 +22,56 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- Left side -->
+    <!-- Width based on the current value -->
+    <div class="container__left" style="width: 20%"></div>
+
+    <!-- Circle -->
+    <div class="container__circle"></div>
+
+    <!-- Right side -->
+    <div class="container__right"></div>
+</div>
+`}
+css={`
+.container {
     /* Content is centered horizontally */
     align-items: center;
     display: flex;
 
     /* Size */
     height: 32px;
-">
-    <!-- Left side -->
-    <div style="
-        /* Width based on the current value */
-        height: 2px;
-        width: 20%;
+}
 
-        /* Colors */
-        background-color: rgba(0, 0, 0, .3);
-    "></div>
+.container__left {
+    height: 2px;
 
-    <!-- Circle -->
-    <div style="
-        /* Size */
-        height: 32px;
-        width: 32px;
+    /* Colors */
+    background-color: rgba(0, 0, 0, .3);
+}
 
-        /* Rounded border */
-        border-radius: 9999px;
+.container__circle {
+    /* Size */
+    height: 32px;
+    width: 32px;
 
-        /* Colors */
-        background-color: rgba(0, 0, 0, .3);
-    "></div>
+    /* Rounded border */
+    border-radius: 9999px;
 
-    <!-- Right side -->
-    <div style="
-        /* Take the remaining width */
-        flex: 1;
-        height: 2px;
+    /* Colors */
+    background-color: rgba(0, 0, 0, .3);
+}
 
-        /* Colors */
-        background-color: rgba(0, 0, 0, .3);
-    "></div>
-</div>
+.container__right {
+    /* Take the remaining width */
+    flex: 1;
+    height: 2px;
+
+    /* Colors */
+    background-color: rgba(0, 0, 0, .3);
+}
 `}
-css={``}
                 >
                     <div
                         style={{