From e2d8ff1f3a7406cd4ca26dee12ea9aa8bc555db0 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Thu, 12 Dec 2019 21:36:14 +0700
Subject: [PATCH] Add timeline pattern

---
 client/constants/Pattern.ts          |   1 +
 client/pages/ExplorePage.tsx         |   3 +-
 client/pages/HomePage.tsx            |   2 +-
 client/patterns/timeline/Cover.tsx   |  78 +++++++++++++
 client/patterns/timeline/Details.tsx | 158 +++++++++++++++++++++++++++
 public/sitemap.xml                   |   1 +
 6 files changed, 241 insertions(+), 2 deletions(-)
 create mode 100644 client/patterns/timeline/Cover.tsx
 create mode 100644 client/patterns/timeline/Details.tsx

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 34f8e94..b1f32e8 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -60,6 +60,7 @@ enum Pattern {
     StickyHeader = 'Sticky header',
     Switch = 'Switch',
     Tab = 'Tab',
+    Timeline = 'Timeline',
     TogglePasswordVisibility = 'Toggle password visibility',
     UploadButton = 'Upload button',
     ValidationIcon = 'Validation icon',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 6a75468..328ec18 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -62,7 +62,7 @@ const ExplorePage = () => {
                         textAlign: 'center',
                     }}
                 >
-                    Here is the collection of 65 patterns
+                    Here is the collection of 66 patterns
                 </h2>
                 <div style={{ marginBottom: '32px', textAlign: 'center' }}>
                     All covers you see in this page are made with CSS only. Inspect them! 🎉
@@ -154,6 +154,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.QuestionsAndAnswers} />
                         <CoverCard pattern={Pattern.Ribbon} />
                         <CoverCard pattern={Pattern.Separator} />
+                        <CoverCard pattern={Pattern.Timeline} />
                     </div>
                 </section>
 
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index ba4e5ae..4b176fb 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -170,7 +170,7 @@ const HomePage = () => {
                                 marginBottom: '16px',
                             }}
                         >
-                            65 patterns
+                            66 patterns
                         </div>
                         <Link
                             to="/patterns"
diff --git a/client/patterns/timeline/Cover.tsx b/client/patterns/timeline/Cover.tsx
new file mode 100644
index 0000000..268a55b
--- /dev/null
+++ b/client/patterns/timeline/Cover.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+
+import Circle from '../../placeholders/Circle';
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+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={{
+                        position: 'relative',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            borderRight: '1px solid #aaa',
+                            height: '100%',
+                            left: '6px',
+                            position: 'absolute',
+                            top: 0,
+                        }}
+                    />
+                    <ul
+                        style={{
+                            listStyleType: 'none',
+                            margin: 0,
+                            padding: 0,
+                        }}
+                    >
+                        <li style={{ marginBottom: '8px' }}>
+                            <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
+                                <Circle backgroundColor='#aaa' size={12} />
+                                <div style={{ flex: 1, marginLeft: '8px' }}>
+                                    <div style={{ width: '80%' }}><Rectangle /></div>
+                                </div>
+                            </div>
+                            <div style={{ marginLeft: '20px' }}>
+                                <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                                <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                                <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                                <div style={{ width: '40%' }}><Line /></div>
+                            </div>
+                        </li>
+                        <li>
+                            <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
+                                <Circle backgroundColor='#aaa' size={12} />
+                                <div style={{ flex: 1, marginLeft: '8px' }}>
+                                    <div style={{ width: '60%' }}><Rectangle /></div>
+                                </div>
+                            </div>
+                            <div style={{ marginLeft: '20px' }}>
+                                <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                                <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                                <div style={{ marginBottom: '4px', width: '40%' }}><Line /></div>
+                                <div style={{ width: '80%' }}><Line /></div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/timeline/Details.tsx b/client/patterns/timeline/Details.tsx
new file mode 100644
index 0000000..c904b24
--- /dev/null
+++ b/client/patterns/timeline/Details.tsx
@@ -0,0 +1,158 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Timeline">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    position: 'relative',
+                                    width: '60%',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        borderRight: '2px solid #aaa',
+                                        height: '100%',
+                                        left: '16px',
+                                        position: 'absolute',
+                                        top: 0,
+                                    }}
+                                />
+                                <ul
+                                    style={{
+                                        listStyleType: 'none',
+                                        margin: 0,
+                                        padding: 0,
+                                    }}
+                                >
+                                    <li style={{ marginBottom: '8px' }}>
+                                        <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
+                                            <Circle backgroundColor='#aaa' size={32} />
+                                            <div style={{ flex: 1, marginLeft: '16px' }}>
+                                                <div style={{ width: '80%' }}><Rectangle /></div>
+                                            </div>
+                                        </div>
+                                        <div style={{ marginLeft: '48px' }}>
+                                            <Block numberOfBlocks={10} blockHeight={2} />
+                                        </div>
+                                    </li>
+                                    <li style={{ marginBottom: '8px' }}>
+                                        <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
+                                            <Circle backgroundColor='#aaa' size={32} />
+                                            <div style={{ flex: 1, marginLeft: '16px' }}>
+                                                <div style={{ width: '60%' }}><Rectangle /></div>
+                                            </div>
+                                        </div>
+                                        <div style={{ marginLeft: '48px' }}>
+                                            <Block numberOfBlocks={15} blockHeight={2} />
+                                        </div>
+                                    </li>
+                                    <li style={{ marginBottom: '8px' }}>
+                                        <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
+                                            <Circle backgroundColor='#aaa' size={32} />
+                                            <div style={{ flex: 1, marginLeft: '16px' }}>
+                                                <div style={{ width: '60%' }}><Rectangle /></div>
+                                            </div>
+                                        </div>
+                                        <div style={{ marginLeft: '48px' }}>
+                                            <Block numberOfBlocks={10} blockHeight={2} />
+                                        </div>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Used to position the left vertical line */
+    position: relative;
+">
+    <!-- Left vertical line -->
+    <div style="
+        /* Border */
+        border-right: 2px solid #aaa;
+
+        /* Positioned at the left */
+        left: 16px;
+        position: absolute;
+        top: 0px;
+
+        /* Take full height */
+        height: 100%;
+    " />
+
+    <!-- The timeline items container -->
+    <ul style="
+        /* Reset styles */
+        list-style-type: none;
+        margin: 0px;
+        padding: 0px;
+    ">
+        <!-- Each timeline item -->
+        <li style="margin-bottom: 8px;">
+            <!-- The circle and title -->
+            <div style="
+                /* Center the content horizontally */
+                align-items: center;
+                display: flex;
+            ">
+                <!-- The circle -->
+                <div style="
+                    /* Rounded border */
+                    background-color: rgb(170, 170, 170);
+                    border-radius: 9999px;
+
+                    /* Size */
+                    height: 32px;
+                    width: 32px;
+                " />
+
+                <!-- The title -->
+                <div style="
+                    /* Take available width */
+                    flex: 1;
+                ">
+                    ...
+                </div>
+            </div>
+
+            <!-- The description -->
+            <div style="
+                /* Make it align with the title */
+                margin-left: 48px;
+            ">
+                ...
+            </div>
+        </li>
+
+        <!-- Repeat other items -->
+        ...
+    </ul>
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/public/sitemap.xml b/public/sitemap.xml
index f36a0cb..1ced200 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -61,6 +61,7 @@
     <url><loc>https://csslayout.io/patterns/stepper-input</loc></url>
     <url><loc>https://csslayout.io/patterns/switch</loc></url>
     <url><loc>https://csslayout.io/patterns/tab</loc></url>
+    <url><loc>https://csslayout.io/patterns/timeline</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/validation-icon</loc></url>