From 5757fe5208c890129ad3f9e594f8dffdbf951a32 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Tue, 3 Dec 2019 22:21:07 +0700
Subject: [PATCH] Add popover arrow

---
 client/constants/Pattern.ts               |   1 +
 client/pages/ExplorePage.tsx              |   1 +
 client/patterns/popover-arrow/Cover.tsx   |  47 +++
 client/patterns/popover-arrow/Details.tsx | 428 ++++++++++++++++++++++
 public/sitemap.xml                        |   1 +
 5 files changed, 478 insertions(+)
 create mode 100644 client/patterns/popover-arrow/Cover.tsx
 create mode 100644 client/patterns/popover-arrow/Details.tsx

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index b33c750..f6aa583 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -28,6 +28,7 @@ enum Pattern {
     Notification = 'Notification',
     OverlayPlayButton = 'Overlay play button',
     Pagination = 'Pagination',
+    PopoverArrow = 'Popover arrow',
     PresenceIndicator = 'Presence indicator',
     PreviousNextButtons = 'Previous next buttons',
     PricingTable = 'Pricing table',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 427d7c1..a0059f1 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -116,6 +116,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.Notification} />
                         <CoverCard pattern={Pattern.OverlayPlayButton} />
                         <CoverCard pattern={Pattern.Pagination} />
+                        <CoverCard pattern={Pattern.PopoverArrow} />
                         <CoverCard pattern={Pattern.PresenceIndicator} />
                         <CoverCard pattern={Pattern.PreviousNextButtons} />
                         <CoverCard pattern={Pattern.PricingTable} />
diff --git a/client/patterns/popover-arrow/Cover.tsx b/client/patterns/popover-arrow/Cover.tsx
new file mode 100644
index 0000000..49370a6
--- /dev/null
+++ b/client/patterns/popover-arrow/Cover.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+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: '60%',
+                        position: 'relative',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: '#FFF',
+                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                            height: '10px',
+                            left: '10px',
+                            position: 'absolute',
+                            top: 0,
+                            transform: 'translate(50%, -50%) rotate(225deg)',
+                            width: '10px',
+                            zIndex: 0,
+                        }}
+                    />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/popover-arrow/Details.tsx b/client/patterns/popover-arrow/Details.tsx
new file mode 100644
index 0000000..21cf88a
--- /dev/null
+++ b/client/patterns/popover-arrow/Details.tsx
@@ -0,0 +1,428 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Popover arrow">
+            <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)',
+                                    borderRadius: '4px',
+                                    height: '300px',
+                                    marginBottom: '16px',
+                                    position: 'relative',
+                                    width: '300px',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        backgroundColor: '#FFF',
+                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                        height: '16px',
+                                        left: '32px',
+                                        position: 'absolute',
+                                        top: 0,
+                                        transform: 'translate(50%, -50%) rotate(45deg)',
+                                        width: '16px',
+                                    }}
+                                />
+                                <div
+                                    style={{
+                                        backgroundColor: '#FFF',
+                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                        height: '16px',
+                                        left: '50%',
+                                        position: 'absolute',
+                                        top: 0,
+                                        transform: 'translate(-50%, -50%) rotate(45deg)',
+                                        width: '16px',
+                                    }}
+                                />
+                                <div
+                                    style={{
+                                        backgroundColor: '#FFF',
+                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                        height: '16px',
+                                        position: 'absolute',
+                                        right: '32px',
+                                        top: 0,
+                                        transform: 'translate(-50%, -50%) rotate(45deg)',
+                                        width: '16px',
+                                    }}
+                                />
+
+                                <div
+                                    style={{
+                                        backgroundColor: '#FFF',
+                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                        height: '16px',
+                                        position: 'absolute',
+                                        right: 0,
+                                        top: '32px',
+                                        transform: 'translate(50%, 50%) rotate(45deg)',
+                                        width: '16px',
+                                    }}
+                                />
+                                <div
+                                    style={{
+                                        backgroundColor: '#FFF',
+                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                        height: '16px',
+                                        position: 'absolute',
+                                        right: 0,
+                                        top: '50%',
+                                        transform: 'translate(50%, -50%) rotate(45deg)',
+                                        width: '16px',
+                                    }}
+                                />
+                                <div
+                                    style={{
+                                        backgroundColor: '#FFF',
+                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                        bottom: '32px',
+                                        height: '16px',
+                                        position: 'absolute',
+                                        right: 0,
+                                        transform: 'translate(50%, -50%) rotate(45deg)',
+                                        width: '16px',
+                                    }}
+                                />
+
+                                <div
+                                    style={{
+                                        backgroundColor: '#FFF',
+                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                        bottom: '-16px',
+                                        height: '16px',
+                                        left: '32px',
+                                        position: 'absolute',
+                                        transform: 'translate(50%, -50%) rotate(45deg)',
+                                        width: '16px',
+                                    }}
+                                />
+                                <div
+                                    style={{
+                                        backgroundColor: '#FFF',
+                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                        bottom: '-16px',
+                                        height: '16px',
+                                        left: '50%',
+                                        position: 'absolute',
+                                        transform: 'translate(-50%, -50%) rotate(45deg)',
+                                        width: '16px',
+                                    }}
+                                />
+                                <div
+                                    style={{
+                                        backgroundColor: '#FFF',
+                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                        bottom: '-16px',
+                                        height: '16px',
+                                        position: 'absolute',
+                                        right: '32px',
+                                        transform: 'translate(-50%, -50%) rotate(45deg)',
+                                        width: '16px',
+                                    }}
+                                />
+
+                                <div
+                                    style={{
+                                        backgroundColor: '#FFF',
+                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                        height: '16px',
+                                        left: 0,
+                                        position: 'absolute',
+                                        top: '32px',
+                                        transform: 'translate(-50%, 50%) rotate(45deg)',
+                                        width: '16px',
+                                    }}
+                                />
+                                <div
+                                    style={{
+                                        backgroundColor: '#FFF',
+                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                        height: '16px',
+                                        left: 0,
+                                        position: 'absolute',
+                                        top: '50%',
+                                        transform: 'translate(-50%, -50%) rotate(45deg)',
+                                        width: '16px',
+                                    }}
+                                />
+                                <div
+                                    style={{
+                                        backgroundColor: '#FFF',
+                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                        bottom: '32px',
+                                        height: '16px',
+                                        left: 0,
+                                        position: 'absolute',
+                                        transform: 'translate(-50%, -50%) rotate(45deg)',
+                                        width: '16px',
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+
+    /* Used to position the arrow */
+    position: relative;
+">
+    <!-- The content -->
+    ...
+
+    <!-- Top left arrow -->
+    <div style="
+        /* Position at the top left corner */
+        left: 32px;
+        position: absolute;
+        top: 0px;
+
+        /* Border */
+        background-color: #FFF;
+        border-left: 1px solid rgba(0, 0, 0, 0.3);
+        border-top: 1px solid rgba(0, 0, 0, 0.3);
+        transform: translate(50%, -50%) rotate(45deg);
+
+        /* Size */
+        height: 16px;
+        width: 16px;
+    " />
+
+    <!-- Top center arrow -->
+    <div style="
+        /* Position at the top center */
+        left: 50%;
+        position: absolute;
+        top: 0px;
+
+        /* Border */
+        background-color: #FFF;
+        border-left: 1px solid rgba(0, 0, 0, 0.3);
+        border-top: 1px solid rgba(0, 0, 0, 0.3);
+        transform: translate(-50%, -50%) rotate(45deg);
+
+        /* Size */
+        height: 16px;
+        width: 16px;
+    " />
+
+    <!-- Top right arrow -->
+    <div style="
+        /* Position at the top right corner */
+        position: absolute;
+        right: 32px;
+        top: 0px;
+
+        /* Border */
+        background-color: #FFF;
+        border-left: 1px solid rgba(0, 0, 0, 0.3);
+        border-top: 1px solid rgba(0, 0, 0, 0.3);
+        transform: translate(-50%, -50%) rotate(45deg);
+
+        /* Size */
+        height: 16px;
+        width: 16px;
+    " />
+
+    <!-- Right top arrow -->
+    <div style="
+        /* Position at the right top corner */
+        position: absolute;
+        right: 0;
+        top: 32px;
+
+        /* Border */
+        background-color: #FFF;
+        border-right: 1px solid rgba(0, 0, 0, 0.3);
+        border-top: 1px solid rgba(0, 0, 0, 0.3);
+        transform: translate(50%, 50%) rotate(45deg);
+
+        /* Size */
+        height: 16px;
+        width: 16px;
+    " />
+
+    <!-- Right center arrow -->
+    <div style="
+        /* Position at the right center */
+        position: absolute;
+        right: 0;
+        top: 50%;
+
+        /* Border */
+        background-color: #FFF;
+        border-right: 1px solid rgba(0, 0, 0, 0.3);
+        border-top: 1px solid rgba(0, 0, 0, 0.3);
+        transform: translate(50%, -50%) rotate(45deg);
+
+        /* Size */
+        height: 16px;
+        width: 16px;
+    " />
+
+    <!-- Right bottom arrow -->
+    <div style="
+        /* Position at the right bottom corner */
+        bottom: 32px;
+        position: absolute;
+        right: 0;
+
+        /* Border */
+        background-color: #FFF;
+        border-right: 1px solid rgba(0, 0, 0, 0.3);
+        border-top: 1px solid rgba(0, 0, 0, 0.3);
+        transform: translate(50%, -50%) rotate(45deg);
+
+        /* Size */
+        height: 16px;
+        width: 16px;
+    " />
+
+    <!-- Bottom left arrow -->
+    <div style="
+        /* Position at the bottom left corner */
+        bottom: -16px;
+        position: absolute;
+        left: 32px;
+
+        /* Border */
+        background-color: #FFF;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+        border-right: 1px solid rgba(0, 0, 0, 0.3);
+        transform: translate(50%, -50%) rotate(45deg);
+
+        /* Size */
+        height: 16px;
+        width: 16px;
+    " />
+
+    <!-- Bottom center arrow -->
+    <div style="
+        /* Position at the bottom center */
+        bottom: -16px;
+        position: absolute;
+        left: 50%;
+
+        /* Border */
+        background-color: #FFF;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+        border-right: 1px solid rgba(0, 0, 0, 0.3);
+        transform: translate(-50%, -50%) rotate(45deg);
+
+        /* Size */
+        height: 16px;
+        width: 16px;
+    " />
+
+    <!-- Bottom right arrow -->
+    <div style="
+        /* Position at the bottom right corner */
+        bottom: -16px;
+        position: absolute;
+        right: 32px;
+
+        /* Border */
+        background-color: #FFF;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+        border-right: 1px solid rgba(0, 0, 0, 0.3);
+        transform: translate(-50%, -50%) rotate(45deg);
+
+        /* Size */
+        height: 16px;
+        width: 16px;
+    " />
+
+    <!-- Left top arrow -->
+    <div style="
+        /* Position at the left top corner */
+        left: 0;
+        position: absolute;
+        top: 32px;
+
+        /* Border */
+        background-color: #FFF;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+        border-left: 1px solid rgba(0, 0, 0, 0.3);
+        transform: translate(-50%, 50%) rotate(45deg);
+
+        /* Size */
+        height: 16px;
+        width: 16px;
+    " />
+
+    <!-- Left center arrow -->
+    <div style="
+        /* Position at the left center */
+        left: 0;
+        position: absolute;
+        top: 50%;
+
+        /* Border */
+        background-color: #FFF;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+        border-left: 1px solid rgba(0, 0, 0, 0.3);
+        transform: translate(-50%, -50%) rotate(45deg);
+
+        /* Size */
+        height: 16px;
+        width: 16px;
+    " />
+
+    <!-- Left bottom arrow -->
+    <div style="
+        /* Position at the left bottom corner */
+        bottom: 32px;
+        left: 0;
+        position: absolute;
+
+        /* Border */
+        background-color: #FFF;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+        border-left: 1px solid rgba(0, 0, 0, 0.3);
+        transform: translate(-50%, -50%) rotate(45deg);
+
+        /* Size */
+        height: 16px;
+        width: 16px;
+    " />
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/public/sitemap.xml b/public/sitemap.xml
index eb938b2..df98c72 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -33,6 +33,7 @@
     <url><loc>https://csslayout.io/patterns/notification</loc></url>
     <url><loc>https://csslayout.io/patterns/overlay-play-button</loc></url>
     <url><loc>https://csslayout.io/patterns/pagination</loc></url>
+    <url><loc>https://csslayout.io/patterns/popover-arrow</loc></url>
     <url><loc>https://csslayout.io/patterns/presence-indicator</loc></url>
     <url><loc>https://csslayout.io/patterns/previous-next-buttons</loc></url>
     <url><loc>https://csslayout.io/patterns/pricing-table</loc></url>