From 6e0fb7e98990608e7aa8141eed7f2076c9bc24de Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sat, 30 Nov 2019 21:33:03 +0700
Subject: [PATCH] Add cookie banner

---
 client/constants/Pattern.ts                 |  1 +
 client/pages/ExplorePage.tsx                |  1 +
 client/patterns/cookie-banner/Cover.tsx     | 47 ++++++++++++
 client/patterns/cookie-banner/Details.tsx   | 80 +++++++++++++++++++++
 client/patterns/fixed-at-corner/Details.tsx |  3 +
 public/sitemap.xml                          |  1 +
 6 files changed, 133 insertions(+)
 create mode 100644 client/patterns/cookie-banner/Cover.tsx
 create mode 100644 client/patterns/cookie-banner/Details.tsx

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 5b3f449..5503cab 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -6,6 +6,7 @@ enum Pattern {
     Card = 'Card',
     Centering = 'Centering',
     CircularNavigation = 'Circular navigation',
+    CookieBanner = 'Cookie banner',
     DockedAtCorner = 'Docked at corner',
     DotLeader = 'Dot leader',
     DotNavigation = 'Dot navigation',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index c1c98dd..76c5c1e 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -90,6 +90,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.Card} />
                         <CoverCard pattern={Pattern.Centering} />
                         <CoverCard pattern={Pattern.CircularNavigation} />
+                        <CoverCard pattern={Pattern.CookieBanner} />
                         <CoverCard pattern={Pattern.DockedAtCorner} />
                         <CoverCard pattern={Pattern.DotLeader} />
                         <CoverCard pattern={Pattern.DotNavigation} />
diff --git a/client/patterns/cookie-banner/Cover.tsx b/client/patterns/cookie-banner/Cover.tsx
new file mode 100644
index 0000000..dd7993a
--- /dev/null
+++ b/client/patterns/cookie-banner/Cover.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+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',
+                    position: 'relative',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        backgroundColor: 'rgba(0, 0, 0, 0.05)',
+                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                        bottom: 0,
+                        display: 'flex',
+                        left: 0,
+                        padding: '4px',
+                        position: 'absolute',
+                        width: '100%',
+                    }}
+                >
+                    <div style={{ flex: 1, marginRight: '4px' }}>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                    </div>
+                    <div style={{ width: '32px' }}>
+                        <Rectangle height={16} />
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/cookie-banner/Details.tsx b/client/patterns/cookie-banner/Details.tsx
new file mode 100644
index 0000000..c6a71ad
--- /dev/null
+++ b/client/patterns/cookie-banner/Details.tsx
@@ -0,0 +1,80 @@
+import React 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';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Cookie banner">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                position: 'relative',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    backgroundColor: 'rgba(0, 0, 0, 0.05)',
+                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                    bottom: 0,
+                                    display: 'flex',
+                                    left: 0,
+                                    padding: '8px',
+                                    position: 'absolute',
+                                    width: '100%',
+                                }}
+                            >
+                                <div style={{ flex: 1, marginRight: '12px' }}>
+                                    <Block numberOfBlocks={5} />
+                                </div>
+                                <div style={{ width: '96px' }}>
+                                    <Rectangle height={32} />
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Banner is displayed at the bottom */
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    width: 100%;
+
+    /* Content is centered */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+">
+    <!-- Tells visitors that the website uses cookie -->
+    <div style="
+        /* Take available width */
+        flex: 1;
+    ">
+        ...
+    </div>
+
+    <!-- Close button -->
+    ...
+</div>
+`}
+                />
+            </div>
+            <RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/fixed-at-corner/Details.tsx b/client/patterns/fixed-at-corner/Details.tsx
index 884993a..e543382 100644
--- a/client/patterns/fixed-at-corner/Details.tsx
+++ b/client/patterns/fixed-at-corner/Details.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Triangle from '../../placeholders/Triangle';
@@ -68,6 +70,7 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
+            <RelatedPatterns patterns={[Pattern.CookieBanner]} />
         </DetailsLayout>
     );
 };
diff --git a/public/sitemap.xml b/public/sitemap.xml
index e27127b..95d99c6 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -12,6 +12,7 @@
     <url><loc>https://csslayout.io/patterns/card</loc></url>
     <url><loc>https://csslayout.io/patterns/centering</loc></url>
     <url><loc>https://csslayout.io/patterns/circular-navigation</loc></url>
+    <url><loc>https://csslayout.io/patterns/cookie-banner</loc></url>
     <url><loc>https://csslayout.io/patterns/docked-at-corner</loc></url>
     <url><loc>https://csslayout.io/patterns/dot-leader</loc></url>
     <url><loc>https://csslayout.io/patterns/dot-navigation</loc></url>