From 9b6ee7a468fa80bf59c09cb0b84256f4bf978556 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Wed, 4 Dec 2019 22:34:20 +0700
Subject: [PATCH] Add accordion

---
 client/constants/Pattern.ts           |   1 +
 client/pages/ExplorePage.tsx          |   1 +
 client/patterns/accordion/Cover.tsx   |  71 +++++++++++
 client/patterns/accordion/Details.tsx | 176 ++++++++++++++++++++++++++
 public/sitemap.xml                    |   1 +
 5 files changed, 250 insertions(+)
 create mode 100644 client/patterns/accordion/Cover.tsx
 create mode 100644 client/patterns/accordion/Details.tsx

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 5a150d1..a8972de 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -1,4 +1,5 @@
 enum Pattern {
+    Accordion = 'Accordion',
     Avatar = 'Avatar',
     AvatarList = 'Avatar list',
     Badge = 'Badge',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 15b3f69..14ec37b 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -88,6 +88,7 @@ const ExplorePage = () => {
                     <Heading title="Patterns" />
 
                     <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
+                        <CoverCard pattern={Pattern.Accordion} />
                         <CoverCard pattern={Pattern.Avatar} />
                         <CoverCard pattern={Pattern.AvatarList} />
                         <CoverCard pattern={Pattern.Badge} />
diff --git a/client/patterns/accordion/Cover.tsx b/client/patterns/accordion/Cover.tsx
new file mode 100644
index 0000000..0128446
--- /dev/null
+++ b/client/patterns/accordion/Cover.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+import Rectangle from '../../placeholders/Rectangle';
+import Triangle from '../../placeholders/Triangle';
+
+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: '100%',
+                        width: '100%',
+                    }}
+                >
+                    <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ marginRight: '4px' }}>
+                                <Triangle corner='r' size={6} />
+                            </div>
+                            <div style={{ flex: 1 }}>
+                                <Rectangle height={4} />
+                            </div>
+                        </div>
+                    </div>
+                    <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ marginRight: '4px' }}>
+                                <Triangle corner='b' size={6} />
+                            </div>
+                            <div style={{ flex: 1 }}>
+                                <Rectangle height={4} />
+                            </div>
+                        </div>
+                    </div>
+                    <div style={{ padding: '8px' }}>
+                        <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                        <div style={{ width: '80%' }}><Line /></div>
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/accordion/Details.tsx b/client/patterns/accordion/Details.tsx
new file mode 100644
index 0000000..09ac3b3
--- /dev/null
+++ b/client/patterns/accordion/Details.tsx
@@ -0,0 +1,176 @@
+import React, { useState } from 'react';
+
+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';
+
+interface ItemProps {
+    index: number;
+    title: React.ReactNode;
+}
+
+const Details: React.FC<{}> = () => {
+    const [activeItem, setActiveItem] = useState(1);
+
+    const Item: React.FC<ItemProps> = ({ index, title, children }) => {
+        const isOpened = (index === activeItem);
+        const click = () => setActiveItem(isOpened ? -1 : index);
+        return (
+            <>
+                <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            cursor: 'pointer',
+                            display: 'flex',
+                            padding: '16px',
+                        }}
+                        onClick={click}
+                    >
+                        <div style={{ marginRight: '12px' }}>
+                            <Triangle size={8} corner={isOpened ? 'b' : 'r'} />
+                        </div>
+                        <div style={{ flex: 1 }}>{title}</div>
+                    </div>
+                    <div
+                        style={{
+                            borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                            display: isOpened ? 'block' : 'none',
+                            padding: '16px',
+                        }}
+                    >
+                        {children}
+                    </div>
+                </div>
+            </>
+        );
+    };
+
+    return (
+        <DetailsLayout title="Accordion">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <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)',
+                                    borderBottomColor: 'transparent',
+                                    borderRadius: '4px',
+                                    width: '60%',
+                                }}
+                            >
+                                <Item
+                                    index={0}
+                                    title={<div style={{ width: '40%' }}><Rectangle /></div>}
+                                >
+                                    <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
+                                </Item>
+                                <Item
+                                    index={1}
+                                    title={<div style={{ width: '80%' }}><Rectangle /></div>}
+                                >
+                                    <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
+                                </Item>
+                                <Item
+                                    index={2}
+                                    title={<div style={{ width: '60%' }}><Rectangle /></div>}
+                                >
+                                    <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
+                                </Item>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<!-- Container -->
+<div style="
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-bottom-color: transparent;
+    border-radius: 4px;
+">
+    <!-- Each accordion item -->
+    <div style="
+        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+    ">
+        <!-- Heading -->
+        <div style="
+            /* Center the content horizontally */
+            align-items: center;
+            display: flex;
+
+            cursor: pointer;
+            padding: 16px;
+        ">
+            <!-- The toggle icon -->
+            <div style="margin-right: 12px;">...</div>
+
+            <!-- The title -->
+            <div style="
+                flex: 1; /* Take remaining width */
+            ">
+                ...
+            </div>
+        </div>
+
+        <!-- The content -->
+        <div style="
+            /* For selected item */
+            display: block;
+
+            /* For not selected item */
+            display: none;
+
+            border-top: 1px solid rgba(0, 0, 0, 0.3);
+            padding: 16px;
+        ">
+            ...
+        </div>
+    </div>
+
+    <!-- Repeat other item -->
+    ...
+</div>
+
+
+<div style="
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+">
+    <!-- Heading -->
+    <div style="
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    ">
+        <!-- Question -->
+        ...
+
+        <!-- The toggle icon sticks to the right -->
+        ...
+    </div>
+
+    <!-- Answer -->
+</div>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.QuestionsAndAnswers]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 5adeb20..42c87b3 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -5,6 +5,7 @@
     <url><loc>https://csslayout.io/patterns/split-screen</loc></url>
     <url><loc>https://csslayout.io/patterns/sticky-footer</loc></url>
     <url><loc>https://csslayout.io/patterns/sticky-header</loc></url>
+    <url><loc>https://csslayout.io/patterns/accordion</loc></url>
     <url><loc>https://csslayout.io/patterns/avatar</loc></url>
     <url><loc>https://csslayout.io/patterns/avatar-list</loc></url>
     <url><loc>https://csslayout.io/patterns/badge</loc></url>