From f7c08fe5367c3263da046c5441da0796aacc6045 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Mon, 19 Sep 2022 12:22:31 +0700
Subject: [PATCH] feat: Add close button pattern

---
 contents/_includes/patterns/close-button.njk |   4 +
 contents/close-button.md                     |  73 +++++++++++
 contents/index.njk                           |   6 +
 pages/close-button/index.tsx                 | 131 -------------------
 patterns/close-button/Cover.tsx              |  56 --------
 styles/index.scss                            |   1 +
 styles/patterns/_close-button.scss           |  49 +++++++
 7 files changed, 133 insertions(+), 187 deletions(-)
 create mode 100644 contents/_includes/patterns/close-button.njk
 create mode 100644 contents/close-button.md
 delete mode 100644 pages/close-button/index.tsx
 delete mode 100644 patterns/close-button/Cover.tsx
 create mode 100644 styles/patterns/_close-button.scss

diff --git a/contents/_includes/patterns/close-button.njk b/contents/_includes/patterns/close-button.njk
new file mode 100644
index 0000000..edc2dd3
--- /dev/null
+++ b/contents/_includes/patterns/close-button.njk
@@ -0,0 +1,4 @@
+<button class="close-button">
+    <div class="close-button__line close-button__line--first"></div>
+    <div class="close-button__line close-button__line--second"></div>
+</button>
\ No newline at end of file
diff --git a/contents/close-button.md b/contents/close-button.md
new file mode 100644
index 0000000..ff93cd1
--- /dev/null
+++ b/contents/close-button.md
@@ -0,0 +1,73 @@
+---
+layout: layouts/post.njk
+title: Close button
+description: Create a close button with CSS flexbox
+keywords: css close button, css flexbox
+---
+
+## HTML
+
+```html
+<button class="close-button">
+    <div class="close-button__line close-button__line--first"></div>
+    <div class="close-button__line close-button__line--second"></div>
+</button>
+```
+
+## CSS
+
+```css
+.close-button {
+    /* Reset */
+    background-color: transparent;
+    border-color: transparent;
+
+    /* Cursor */
+    cursor: pointer;
+
+    /* Size */
+    height: 3rem;
+    width: 3rem;
+
+    /* Used to position the inner */
+    position: relative;
+}
+
+.close-button__line {
+    /* Background color */
+    background-color: rgba(0, 0, 0, 0.3);
+
+    /* Position */
+    position: absolute;
+
+    /* Size */
+    height: 1px;
+    width: 100%;
+}
+
+.close-button__line--first {
+    /* Position */
+    left: 0px;
+    top: 50%;
+    transform: translate(0%, -50%) rotate(45deg);
+
+    /* Size */
+    height: 1px;
+    width: 100%;
+}
+
+.close-button__line--second {
+    /* Position */
+    left: 50%;
+    top: 0px;
+    transform: translate(-50%, 0%) rotate(45deg);
+
+    /* Size */
+    height: 100%;
+    width: 1px;
+}
+```
+
+{% demo %}
+{% include "patterns/close-button.njk" %}
+{% enddemo %}
diff --git a/contents/index.njk b/contents/index.njk
index 353cee5..05d74cb 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -49,6 +49,12 @@ eleventyExcludeFromCollections: true
                     <div class="card__title">Centering</div>
                 </a>
             </div>
+            <div class="card__item">
+                <a class="card__link" href="/close-button/">
+                    <div class="card__cover">{% include "patterns/close-button.njk" %}</div>
+                    <div class="card__title">Close button</div>
+                </a>
+            </div>
         </div>
     </div>
 
diff --git a/pages/close-button/index.tsx b/pages/close-button/index.tsx
deleted file mode 100644
index 2a2224f..0000000
--- a/pages/close-button/index.tsx
+++ /dev/null
@@ -1,131 +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';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.CloseButton}>
-            <Head>
-                <meta name="description" content="Create a close button with CSS flexbox" />
-                <meta name="og:description" content="Create a close button with CSS flexbox" />
-                <meta name="twitter:description" content="Create a close button with CSS flexbox" />
-                <meta name="keywords" content="css close button, css flexbox" />
-            </Head>
-            <BrowserFrame
-                html={`
-<button class="button">
-    <div class="button__line button__line--first"></div>
-
-    <div class="button__line button__line--second"></div>
-</button>
-`}
-                css={`
-                    .button {
-                        /* Reset */
-                        background-color: transparent;
-                        border-color: transparent;
-
-                        /* Cursor */
-                        cursor: pointer;
-
-                        /* Size */
-                        height: 32px;
-                        width: 32px;
-
-                        /* Used to position the inner */
-                        position: relative;
-                    }
-
-                    .button__line {
-                        /* Background color */
-                        background-color: rgba(0, 0, 0, 0.3);
-
-                        /* Position */
-                        position: absolute;
-
-                        /* Size */
-                        height: 1px;
-                        width: 100%;
-                    }
-
-                    .button__line--first {
-                        /* Position */
-                        left: 0px;
-                        top: 50%;
-                        transform: translate(0%, -50%) rotate(45deg);
-
-                        /* Size */
-                        height: 1px;
-                        width: 100%;
-                    }
-
-                    .button__line--second {
-                        /* Position */
-                        left: 50%;
-                        top: 0px;
-                        transform: translate(-50%, 0%) rotate(45deg);
-
-                        /* Size */
-                        height: 100%;
-                        width: 1px;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <button
-                        style={{
-                            backgroundColor: 'transparent',
-                            borderColor: 'transparent',
-                            cursor: 'pointer',
-                            height: '32px',
-                            position: 'relative',
-                            width: '32px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                height: '1px',
-                                left: 0,
-                                position: 'absolute',
-                                top: '50%',
-                                transform: 'translate(0%, -50%) rotate(45deg)',
-                                width: '100%',
-                            }}
-                        />
-                        <div
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                height: '100%',
-                                left: '50%',
-                                position: 'absolute',
-                                top: 0,
-                                transform: 'translate(-50%, 0%) rotate(45deg)',
-                                width: '1px',
-                            }}
-                        />
-                    </button>
-                </div>
-            </BrowserFrame>
-
-            <Spacer size="extraLarge" />
-            <RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Chip, Pattern.Modal, Pattern.Notification]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/close-button/Cover.tsx b/patterns/close-button/Cover.tsx
deleted file mode 100644
index 43c148a..0000000
--- a/patterns/close-button/Cover.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as 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',
-                }}
-            >
-                <button
-                    style={{
-                        backgroundColor: 'transparent',
-                        borderColor: 'transparent',
-                        cursor: 'pointer',
-                        height: '32px',
-                        position: 'relative',
-                        width: '32px',
-                    }}
-                >
-                    <div
-                        style={{
-                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                            height: '1px',
-                            left: 0,
-                            position: 'absolute',
-                            top: '50%',
-                            transform: 'translate(0%, -50%) rotate(45deg)',
-                            width: '100%',
-                        }}
-                    />
-                    <div
-                        style={{
-                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                            height: '100%',
-                            left: '50%',
-                            position: 'absolute',
-                            top: 0,
-                            transform: 'translate(-50%, 0%) rotate(45deg)',
-                            width: '1px',
-                        }}
-                    />
-                </button>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index b5274e9..23f7a15 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -17,6 +17,7 @@
 @import './patterns/avatar-list';
 @import './patterns/badge';
 @import './patterns/centering';
+@import './patterns/close-button';
 
 // Placeholders
 @import './placeholders/circle';
diff --git a/styles/patterns/_close-button.scss b/styles/patterns/_close-button.scss
new file mode 100644
index 0000000..2b5f19a
--- /dev/null
+++ b/styles/patterns/_close-button.scss
@@ -0,0 +1,49 @@
+.close-button {
+    /* Reset */
+    background-color: transparent;
+    border-color: transparent;
+
+    /* Cursor */
+    cursor: pointer;
+
+    /* Size */
+    height: 3rem;
+    width: 3rem;
+
+    /* Used to position the inner */
+    position: relative;
+}
+
+.close-button__line {
+    /* Background color */
+    background-color: rgba(0, 0, 0, 0.3);
+
+    /* Position */
+    position: absolute;
+
+    /* Size */
+    height: 1px;
+    width: 100%;
+}
+
+.close-button__line--first {
+    /* Position */
+    left: 0px;
+    top: 50%;
+    transform: translate(0%, -50%) rotate(45deg);
+
+    /* Size */
+    height: 1px;
+    width: 100%;
+}
+
+.close-button__line--second {
+    /* Position */
+    left: 50%;
+    top: 0px;
+    transform: translate(-50%, 0%) rotate(45deg);
+
+    /* Size */
+    height: 100%;
+    width: 1px;
+}