From d464c5499282951c9ab3476347483300bdbe08bf Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Fri, 29 Nov 2019 11:22:56 +0700
Subject: [PATCH] Add dropdown

---
 client/constants/Pattern.ts           |   1 +
 client/pages/ExplorePage.tsx          |   1 +
 client/pages/HomePage.tsx             |   1 +
 client/patterns/dropdown/Cover.tsx    |  83 +++++++++++++++
 client/patterns/dropdown/Details.tsx  | 142 ++++++++++++++++++++++++++
 client/patterns/dropdown/dropdown.css |   7 ++
 public/sitemap.xml                    |   1 +
 7 files changed, 236 insertions(+)
 create mode 100644 client/patterns/dropdown/Cover.tsx
 create mode 100644 client/patterns/dropdown/Details.tsx
 create mode 100644 client/patterns/dropdown/dropdown.css

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index bc567e3..8eb3028 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -8,6 +8,7 @@ enum Pattern {
     DotLeader = 'Dot leader',
     DotNavigation = 'Dot navigation',
     DropArea = 'Drop area',
+    Dropdown = 'Dropdown',
     FeatureList = 'Feature list',
     FixedAtCorner = 'Fixed at corner',
     FloatingLabel = 'Floating label',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index ac192ac..88b9b20 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -92,6 +92,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.DotLeader} />
                         <CoverCard pattern={Pattern.DotNavigation} />
                         <CoverCard pattern={Pattern.DropArea} />
+                        <CoverCard pattern={Pattern.Dropdown} />
                         <CoverCard pattern={Pattern.FeatureList} />
                         <CoverCard pattern={Pattern.FixedAtCorner} />
                         <CoverCard pattern={Pattern.FloatingLabel} />
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index 2e6183c..805ff5d 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -204,6 +204,7 @@ const HomePage = () => {
                         <CoverCard pattern={Pattern.DotLeader} />
                         <CoverCard pattern={Pattern.DotNavigation} />
                         <CoverCard pattern={Pattern.DropArea} />
+                        <CoverCard pattern={Pattern.Dropdown} />
                         <CoverCard pattern={Pattern.FeatureList} />
                         <CoverCard pattern={Pattern.FixedAtCorner} />
                         <CoverCard pattern={Pattern.FloatingLabel} />
diff --git a/client/patterns/dropdown/Cover.tsx b/client/patterns/dropdown/Cover.tsx
new file mode 100644
index 0000000..e45d4a4
--- /dev/null
+++ b/client/patterns/dropdown/Cover.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+import Triangle from '../../placeholders/Triangle';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    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',
+                        height: '24px',
+                        justifyContent: 'flex-end',
+                        marginBottom: '4px',
+                        paddingRight: '4px',
+                        width: '60%',
+                    }}
+                >
+                    <Triangle corner='b' size={8} />
+                </div>
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        display: 'flex',
+                        flex: 1,
+                        flexDirection: 'column',
+                        height: '100%',
+                        width: '80%',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            flex: 1,
+                            padding: '0 4px',
+                        }}
+                    >
+                        <Line />
+                    </div>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            flex: 1,
+                            padding: '0 4px',
+                        }}
+                    >
+                        <div style={{ width: '80%' }}><Line /></div>
+                    </div>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flex: 1,
+                            padding: '0 4px',
+                        }}
+                    >
+                        <div style={{ width: '60%' }}><Line /></div>
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/dropdown/Details.tsx b/client/patterns/dropdown/Details.tsx
new file mode 100644
index 0000000..351f3ec
--- /dev/null
+++ b/client/patterns/dropdown/Details.tsx
@@ -0,0 +1,142 @@
+import React from 'react';
+
+import './dropdown.css';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import Triangle from '../../placeholders/Triangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Dropdown">
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    Move the mouse over the button to see the dropdown.
+                </div>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                className="dropdown"
+                                style={{
+                                    position: 'relative',
+                                }}
+                            >
+                                <button
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRadius: '4px',
+                                        display: 'flex',
+                                        height: '32px',
+                                        width: '128px',
+                                    }}
+                                >
+                                    <span style={{ flex: 1, marginRight: '8px' }}><Rectangle /></span>
+                                    <Triangle size={8} corner='b' />
+                                </button>
+
+                                <div
+                                    className="dropdown-content"
+                                    style={{
+                                        backgroundColor: '#FFF',
+                                        height: '200px',
+                                        left: 0,
+                                        paddingTop: '4px',
+                                        position: 'absolute',
+                                        top: '100%',
+                                        width: '200px',
+                                        zIndex: 9999,
+                                    }}
+                                >
+                                    <div
+                                        style={{
+                                            alignItems: 'center',
+                                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                                            borderRadius: '4px',
+                                            display: 'flex',
+                                            height: '100%',
+                                            justifyContent: 'center',
+                                            padding: '16px',
+                                            width: '100%',
+                                        }}
+                                    >
+                                        <Block numberOfBlocks={10} justify='center' />
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                style={{
+                                    marginTop: '16px',
+                                    width: '256px',
+                                }}
+                            >
+                            <Block numberOfBlocks={20} justify='center' />
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<style>
+/* Hide the dropdown's content by default -->
+.dropdown-content {
+    display: none;
+}
+
+/* Show the content when hover on the container -->
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+</style>
+
+<div
+    class="dropdown"
+    style="
+        position: relative;
+    "
+>
+    <!-- The trigger element -->
+    <button>...</button>
+
+    <!-- The content -->
+    <div
+        class="dropdown-content"
+        style="
+            /* Position it right below the trigger element */
+            left: 0,
+            paddingTop: '4px',
+            position: 'absolute',
+            top: '100%',
+
+            /* It should be on the top of other elements */
+            backgroundColor: '#FFF',
+            zIndex: 9999,
+
+            /* Size */
+            height: '200px',
+            width: '200px',
+        "
+    >
+        ...
+    </div>
+</div>
+`}
+                />
+            </div>
+            <RelatedPatterns patterns={[Pattern.Menu]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/dropdown/dropdown.css b/client/patterns/dropdown/dropdown.css
new file mode 100644
index 0000000..ab9f7a9
--- /dev/null
+++ b/client/patterns/dropdown/dropdown.css
@@ -0,0 +1,7 @@
+.dropdown-content {
+    display: none;
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
diff --git a/public/sitemap.xml b/public/sitemap.xml
index cc933d7..aab3ddd 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -14,6 +14,7 @@
     <url><loc>https://csslayout.io/patterns/dot-leader</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/dropdown</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/floating-label</loc></url>