From cd8c22991388874ec48f0fbd3ccdc8ed9e1c7616 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Fri, 29 Nov 2019 15:11:21 +0700
Subject: [PATCH] Add upload button

---
 client/constants/Pattern.ts               |   1 +
 client/pages/ExplorePage.tsx              |   1 +
 client/pages/HomePage.tsx                 |   1 +
 client/patterns/upload-button/Cover.tsx   |  58 +++++++++++
 client/patterns/upload-button/Details.tsx | 117 ++++++++++++++++++++++
 public/sitemap.xml                        |   1 +
 6 files changed, 179 insertions(+)
 create mode 100644 client/patterns/upload-button/Cover.tsx
 create mode 100644 client/patterns/upload-button/Details.tsx

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 9d5f2eb..e8e6681 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -44,6 +44,7 @@ enum Pattern {
     Switch = 'Switch',
     Tab = 'Tab',
     TogglePasswordVisibility = 'Toggle password visibility',
+    UploadButton = 'Upload button',
     Wizard = 'Wizard',
 }
 
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index e9ba511..c93b560 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -123,6 +123,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.Switch} />
                         <CoverCard pattern={Pattern.Tab} />
                         <CoverCard pattern={Pattern.TogglePasswordVisibility} />
+                        <CoverCard pattern={Pattern.UploadButton} />
                         <CoverCard pattern={Pattern.Wizard} />
                     </div>
                 </section>
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index f8c2e77..935fba9 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -235,6 +235,7 @@ const HomePage = () => {
                         <CoverCard pattern={Pattern.Switch} />
                         <CoverCard pattern={Pattern.Tab} />
                         <CoverCard pattern={Pattern.TogglePasswordVisibility} />
+                        <CoverCard pattern={Pattern.UploadButton} />
                         <CoverCard pattern={Pattern.Wizard} />
                     </div>
                 </section>
diff --git a/client/patterns/upload-button/Cover.tsx b/client/patterns/upload-button/Cover.tsx
new file mode 100644
index 0000000..7b5e65b
--- /dev/null
+++ b/client/patterns/upload-button/Cover.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+
+import Circle from '../../placeholders/Circle';
+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 rgba(0, 0, 0, 0.3)',
+                        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/client/patterns/upload-button/Details.tsx b/client/patterns/upload-button/Details.tsx
new file mode 100644
index 0000000..3277dde
--- /dev/null
+++ b/client/patterns/upload-button/Details.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Upload button">
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    You can click the button to choose a file.
+                </div>
+                <BrowserFrame
+                    content={(
+                        <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 rgba(0, 0, 0, 0.3)',
+                                        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>
+                    )}
+                    source={`
+<div style="
+    /* Used to position the input */
+    position: relative;
+
+    /* Content is centered */
+    align-items: center;
+    display: flex;
+
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+">
+    <!-- The real file input -->
+    <input
+        type="file"
+        style="
+            /* Take the full size */
+            height: 100%;
+            left: 0;
+            position: absolute;
+            top: 0;
+            width: 100%;
+
+            /* Make it transparent */
+            opacity: 0;
+        "
+    />
+
+    <!-- The upload icon -->
+    <div style="margin-right: 8px">...</div>
+
+    <!-- The label -->
+    ...
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/public/sitemap.xml b/public/sitemap.xml
index a52843b..063a222 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -45,5 +45,6 @@
     <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/upload-button</loc></url>
     <url><loc>https://csslayout.io/patterns/wizard</loc></url>
 </urlset>
\ No newline at end of file