From e3f071bc9ce782d2925f1ceee4be288c9f044003 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Mon, 19 Sep 2022 21:22:23 +0700
Subject: [PATCH] feat: Overlay play button

---
 .../patterns/overlay-play-button.njk          |   7 ++
 contents/index.njk                            |   6 +
 contents/overlay-play-button.md               |  67 +++++++++++
 pages/overlay-play-button/index.tsx           | 112 ------------------
 patterns/overlay-play-button/Cover.tsx        |  58 ---------
 styles/index.scss                             |   1 +
 styles/patterns/_overlay-play-button.scss     |  38 ++++++
 7 files changed, 119 insertions(+), 170 deletions(-)
 create mode 100644 contents/_includes/patterns/overlay-play-button.njk
 create mode 100644 contents/overlay-play-button.md
 delete mode 100644 pages/overlay-play-button/index.tsx
 delete mode 100644 patterns/overlay-play-button/Cover.tsx
 create mode 100644 styles/patterns/_overlay-play-button.scss

diff --git a/contents/_includes/patterns/overlay-play-button.njk b/contents/_includes/patterns/overlay-play-button.njk
new file mode 100644
index 0000000..755065c
--- /dev/null
+++ b/contents/_includes/patterns/overlay-play-button.njk
@@ -0,0 +1,7 @@
+<div class="overlay-play-button">
+    <div class="overlay-play-button__overlay">
+        <div class="overlay-play-button__play">
+            {% triangle "r" %}
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 630241d..38d1ac1 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -193,6 +193,12 @@ eleventyExcludeFromCollections: true
                     <div class="pattern__title">Media object</div>
                 </a>
             </div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/overlay-play-button/">
+                    <div class="pattern__cover">{% include "patterns/overlay-play-button.njk" %}</div>
+                    <div class="pattern__title">Overlay play button</div>
+                </a>
+            </div>
             <div class="pattern__item">
                 <a class="pattern__link" href="/triangle-buttons/">
                     <div class="pattern__cover">{% include "patterns/triangle-buttons.njk" %}</div>
diff --git a/contents/overlay-play-button.md b/contents/overlay-play-button.md
new file mode 100644
index 0000000..cd7bdef
--- /dev/null
+++ b/contents/overlay-play-button.md
@@ -0,0 +1,67 @@
+---
+layout: layouts/post.njk
+title: Overlay play button
+description: Create an overlay play button with CSS flexbox
+keywords: css flexbox
+---
+
+## HTML
+
+```html
+<div class="overlay-play-button">
+    <!-- The video element -->
+    <video src="..." />
+
+    <!-- The overlay area -->
+    <div class="overlay-play-button__overlay">
+        <!-- The player button -->
+        <div class="overlay-play-button__play">
+            ...
+        </div>
+    </div>
+</div>
+```
+
+## CSS
+
+```css
+.overlay-play-button {
+    /* Used to position the overlay */
+    position: relative;
+}
+
+.overlay-play-button__overlay {
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: 0;
+
+    /* Take full size */
+    height: 100%;
+    width: 100%;
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Add a dark background */
+    background-color: rgba(0, 0, 0, 0.25);
+}
+
+.overlay-play-button__play {
+    border: 0.25rem solid #FFF;
+    border-radius: 9999px;
+    height: 3rem;
+    width: 3rem;
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+```
+
+{% demo %}
+{% include "patterns/overlay-play-button.njk" %}
+{% enddemo %}
diff --git a/pages/overlay-play-button/index.tsx b/pages/overlay-play-button/index.tsx
deleted file mode 100644
index 5c11427..0000000
--- a/pages/overlay-play-button/index.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Spacer } from '@1milligram/design';
-
-import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Triangle from '../../placeholders/Triangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.OverlayPlayButton}>
-            <Head>
-                <meta name="description" content="Create an overlay play button with CSS flexbox" />
-                <meta name="og:description" content="Create an overlay play button with CSS flexbox" />
-                <meta name="twitter:description" content="Create an overlay play button with CSS flexbox" />
-                <meta name="keywords" content="css flexbox" />
-            </Head>
-            <BrowserFrame
-                html={`
-<div class="container">
-    <!-- The video element -->
-    <video src="..." />
-
-    <!-- The overlay area -->
-    <div class="container__overlay">
-        <!-- The player button -->
-        ...
-    </div>
-</div>
-`}
-                css={`
-                    .container {
-                        /* Used to position the overlay */
-                        position: relative;
-                    }
-
-                    .container__overlay {
-                        /* Position */
-                        left: 0;
-                        position: absolute;
-                        top: 0;
-
-                        /* Take full size */
-                        height: 100%;
-                        width: 100%;
-
-                        /* Center the content */
-                        align-items: center;
-                        display: flex;
-                        justify-content: center;
-
-                        /* Add a dark background */
-                        background-color: rgba(0, 0, 0, 0.25);
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <div
-                        style={{
-                            height: '100%',
-                            position: 'relative',
-                            width: '100%',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                backgroundColor: 'rgba(0, 0, 0, 0.25)',
-                                display: 'flex',
-                                height: '100%',
-                                justifyContent: 'center',
-                                left: 0,
-                                position: 'absolute',
-                                top: 0,
-                                width: '100%',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    border: '4px solid #FFF',
-                                    borderRadius: '9999px',
-                                    display: 'flex',
-                                    height: '64px',
-                                    justifyContent: 'center',
-                                    width: '64px',
-                                }}
-                            >
-                                <Triangle backgroundColor="#FFF" corner="r" size={8} />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </BrowserFrame>
-            <Spacer size="extraLarge" />
-            <RelatedPatterns patterns={[Pattern.VideoBackground]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/overlay-play-button/Cover.tsx b/patterns/overlay-play-button/Cover.tsx
deleted file mode 100644
index bb9fb99..0000000
--- a/patterns/overlay-play-button/Cover.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-import Triangle from '../../placeholders/Triangle';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '8px',
-                }}
-            >
-                <div
-                    style={{
-                        height: '100%',
-                        position: 'relative',
-                        width: '100%',
-                    }}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            backgroundColor: 'rgba(0, 0, 0, 0.25)',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            left: 0,
-                            position: 'absolute',
-                            top: 0,
-                            width: '100%',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                border: '2px solid #FFF',
-                                borderRadius: '9999px',
-                                display: 'flex',
-                                height: '32px',
-                                justifyContent: 'center',
-                                width: '32px',
-                            }}
-                        >
-                            <Triangle backgroundColor="#FFF" corner="r" size={8} />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index 6165d60..a4d81c0 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -41,6 +41,7 @@
 @import './patterns/layered-card';
 @import './patterns/lined-paper';
 @import './patterns/media-object';
+@import './patterns/overlay-play-button';
 @import './patterns/triangle-buttons';
 @import './patterns/video-background';
 @import './patterns/voting';
diff --git a/styles/patterns/_overlay-play-button.scss b/styles/patterns/_overlay-play-button.scss
new file mode 100644
index 0000000..97dee82
--- /dev/null
+++ b/styles/patterns/_overlay-play-button.scss
@@ -0,0 +1,38 @@
+.overlay-play-button {
+    /* Used to position the overlay */
+    position: relative;
+
+    /* Demo */
+    height: 100%;
+    width: 100%;
+}
+
+.overlay-play-button__overlay {
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: 0;
+
+    /* Take full size */
+    height: 100%;
+    width: 100%;
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Add a dark background */
+    background-color: rgba(0, 0, 0, 0.25);
+}
+
+.overlay-play-button__play {
+    border: 0.25rem solid #FFF;
+    border-radius: 9999px;
+    height: 3rem;
+    width: 3rem;
+
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
\ No newline at end of file