From 216febdb6318e28ce5e98c808c8f6915fa290c6a Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Wed, 21 Sep 2022 11:10:49 +0700
Subject: [PATCH] feat: Upload button

---
 contents/_includes/patterns/upload-button.njk |   9 ++
 contents/index.njk                            |   1 +
 contents/upload-button.md                     |  57 ++++++++
 pages/upload-button/index.tsx                 | 125 ------------------
 patterns/upload-button/Cover.tsx              |  57 --------
 styles/index.scss                             |   1 +
 styles/patterns/_upload-button.scss           |  41 ++++++
 7 files changed, 109 insertions(+), 182 deletions(-)
 create mode 100644 contents/_includes/patterns/upload-button.njk
 create mode 100644 contents/upload-button.md
 delete mode 100644 pages/upload-button/index.tsx
 delete mode 100644 patterns/upload-button/Cover.tsx
 create mode 100644 styles/patterns/_upload-button.scss

diff --git a/contents/_includes/patterns/upload-button.njk b/contents/_includes/patterns/upload-button.njk
new file mode 100644
index 0000000..7a32bd0
--- /dev/null
+++ b/contents/_includes/patterns/upload-button.njk
@@ -0,0 +1,9 @@
+<div class="upload-button">
+    <input type="file" class="upload-button__input" />
+    <div class="upload-button__icon">
+        <svg class="upload-button__svg" viewBox="0 0 24 24">
+            <path d="M18.5,7.5c0.275,0,0.341-0.159,0.146-0.354l-6.292-6.292c-0.195-0.196-0.512-0.196-0.707-0.001 c0,0-0.001,0.001-0.001,0.001L5.354,7.147C5.154,7.342,5.225,7.501,5.5,7.501h3v10c0,0.552,0.448,1,1,1h5c0.552,0,1-0.448,1-1V7.5 H18.5z M23.5,18.5v4c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-4"></path>
+        </svg>
+    </div>
+    {% lines "hor", 3 %}
+</div>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index c3e1fc9..f951bf8 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -99,6 +99,7 @@ eleventyExcludeFromCollections: true
             {% pattern "Spin button" %}{% include "patterns/spin-button.njk" %}{% endpattern %}
             {% pattern "Stepper input" %}{% include "patterns/stepper-input.njk" %}{% endpattern %}
             {% pattern "Switch" %}{% include "patterns/switch.njk" %}{% endpattern %}
+            {% pattern "Upload button" %}{% include "patterns/upload-button.njk" %}{% endpattern %}
         </div>
     </div>
 
diff --git a/contents/upload-button.md b/contents/upload-button.md
new file mode 100644
index 0000000..7da5511
--- /dev/null
+++ b/contents/upload-button.md
@@ -0,0 +1,57 @@
+---
+layout: layouts/post.njk
+title: Upload button
+description: Create an upload button with CSS flexbox
+keywords: css file input, css flexbox, css upload button
+---
+
+## HTML
+
+```html
+<div class="upload-button">
+    <!-- The real file input -->
+    <input type="file" class="upload-button__input" />
+
+    <!-- The upload icon -->
+    <div class="upload-button__icon">...</div>
+
+    <!-- The label -->
+    ...
+</div>
+```
+
+## CSS
+
+```css
+.upload-button {
+    /* Used to position the input */
+    position: relative;
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+
+    /* Border */
+    border: 1px solid #d1d5db;
+    border-radius: 0.25rem;
+    padding: 0.25rem 0.5rem;
+}
+
+.upload-button__input {
+    /* Take the full size */
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+
+    /* Make it transparent */
+    opacity: 0;
+}
+
+.upload-button__icon {
+    margin-right: 0.5rem;
+}
+```
+
+{% demo %}{% include "patterns/upload-button.njk" %}{% enddemo %}
diff --git a/pages/upload-button/index.tsx b/pages/upload-button/index.tsx
deleted file mode 100644
index ce13a3e..0000000
--- a/pages/upload-button/index.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.UploadButton}>
-            <Head>
-                <meta name="description" content="Create an upload button with CSS flexbox" />
-                <meta name="og:description" content="Create an upload button with CSS flexbox" />
-                <meta name="twitter:description" content="Create an upload button with CSS flexbox" />
-                <meta name="keywords" content="css file input, css flexbox, css upload button" />
-            </Head>
-            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>You can click the button to choose a file.</div>
-            <BrowserFrame
-                html={`
-<div class="container">
-    <!-- The real file input -->
-    <input type="file" class="container__input" />
-
-    <!-- The upload icon -->
-    <div class="container__icon">...</div>
-
-    <!-- The label -->
-    ...
-</div>
-`}
-                css={`
-                    .container {
-                        /* Used to position the input */
-                        position: relative;
-
-                        /* Center the content */
-                        align-items: center;
-                        display: flex;
-
-                        /* Border */
-                        border: 1px solid #d1d5db;
-                    }
-
-                    .container__input {
-                        /* Take the full size */
-                        height: 100%;
-                        left: 0;
-                        position: absolute;
-                        top: 0;
-                        width: 100%;
-
-                        /* Make it transparent */
-                        opacity: 0;
-                    }
-
-                    .container__icon {
-                        margin-right: 8px;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <div style={{ width: '128px' }}>
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                border: '1px solid #d1d5db',
-                                borderRadius: '4px',
-                                display: 'flex',
-                                padding: '8px',
-                                position: 'relative',
-                                width: '100%',
-                            }}
-                        >
-                            <input
-                                type="file"
-                                style={{
-                                    height: '100%',
-                                    left: 0,
-                                    opacity: 0,
-                                    position: 'absolute',
-                                    top: 0,
-                                    width: '100%',
-                                }}
-                            />
-                            <div style={{ marginRight: '8px' }}>
-                                <svg
-                                    viewBox="0 0 24 24"
-                                    style={{
-                                        fill: 'none',
-                                        height: '24',
-                                        stroke: 'rgba(0, 0, 0, 0.4)',
-                                        strokeLinecap: 'round',
-                                        strokeLinejoin: 'round',
-                                        strokeWidth: 1,
-                                        width: '24',
-                                    }}
-                                >
-                                    <path
-                                        d={`M18.5,7.5c0.275,0,0.341-0.159,0.146-0.354l-6.292-6.292c-0.195-0.196-0.512-0.196-0.707-0.001
-                                            c0,0-0.001,0.001-0.001,0.001L5.354,7.147C5.154,7.342,5.225,7.501,5.5,7.501h3v10c0,0.552,0.448,1,1,1h5c0.552,0,1-0.448,1-1V7.5
-                                            H18.5z
-                                            M23.5,18.5v4c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-4`}
-                                    />
-                                </svg>
-                            </div>
-                            <Rectangle />
-                        </div>
-                    </div>
-                </div>
-            </BrowserFrame>
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/upload-button/Cover.tsx b/patterns/upload-button/Cover.tsx
deleted file mode 100644
index 5ad30ac..0000000
--- a/patterns/upload-button/Cover.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as 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={{
-                        alignItems: 'center',
-                        border: '1px solid #d1d5db',
-                        borderRadius: '4px',
-                        display: 'flex',
-                        padding: '8px',
-                        width: '100%',
-                    }}
-                >
-                    <div style={{ marginRight: '4px' }}>
-                        <svg
-                            viewBox="0 0 24 24"
-                            style={{
-                                fill: 'none',
-                                height: '16px',
-                                stroke: 'rgba(0, 0, 0, 0.4)',
-                                strokeLinecap: 'round',
-                                strokeLinejoin: 'round',
-                                strokeWidth: 1,
-                                width: '16px',
-                            }}
-                        >
-                            <path
-                                d={`M18.5,7.5c0.275,0,0.341-0.159,0.146-0.354l-6.292-6.292c-0.195-0.196-0.512-0.196-0.707-0.001
-                                c0,0-0.001,0.001-0.001,0.001L5.354,7.147C5.154,7.342,5.225,7.501,5.5,7.501h3v10c0,0.552,0.448,1,1,1h5c0.552,0,1-0.448,1-1V7.5
-                                H18.5z
-                                M23.5,18.5v4c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-4`}
-                            />
-                        </svg>
-                    </div>
-                    <Rectangle />
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index a037d1d..47b1ff4 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -80,6 +80,7 @@
 @import './patterns/tooltip';
 @import './patterns/tree-diagram';
 @import './patterns/triangle-buttons';
+@import './patterns/upload-button';
 @import './patterns/validation-icon';
 @import './patterns/video-background';
 @import './patterns/voting';
diff --git a/styles/patterns/_upload-button.scss b/styles/patterns/_upload-button.scss
new file mode 100644
index 0000000..40e6308
--- /dev/null
+++ b/styles/patterns/_upload-button.scss
@@ -0,0 +1,41 @@
+.upload-button {
+    /* Used to position the input */
+    position: relative;
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+
+    /* Border */
+    border: 1px solid #d1d5db;
+    border-radius: 0.25rem;
+    padding: 0.25rem 0.5rem;
+
+    /* Demo */
+    width: 8rem;
+}
+
+.upload-button__input {
+    /* Take the full size */
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+
+    /* Make it transparent */
+    opacity: 0;
+}
+
+.upload-button__icon {
+    margin-right: 0.5rem;
+}
+.upload-button__svg {
+    fill: none;
+    height: 1.5rem;
+    stroke: #d1d5db;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 1;
+    width: 1.5rem;
+}