From bb0403f0fd63d7334772d4f53dc6527f46aad872 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Tue, 20 Sep 2022 19:05:13 +0700
Subject: [PATCH] feat: Notification

---
 contents/_includes/patterns/notification.njk |  7 ++
 contents/index.njk                           |  1 +
 contents/notification.md                     | 93 ++++++++++++++++++++
 pages/notification/index.tsx                 | 88 ------------------
 patterns/notification/Cover.tsx              | 40 ---------
 styles/index.scss                            |  1 +
 styles/patterns/_notification.scss           | 63 +++++++++++++
 7 files changed, 165 insertions(+), 128 deletions(-)
 create mode 100644 contents/_includes/patterns/notification.njk
 create mode 100644 contents/notification.md
 delete mode 100644 pages/notification/index.tsx
 delete mode 100644 patterns/notification/Cover.tsx
 create mode 100644 styles/patterns/_notification.scss

diff --git a/contents/_includes/patterns/notification.njk b/contents/_includes/patterns/notification.njk
new file mode 100644
index 0000000..3426428
--- /dev/null
+++ b/contents/_includes/patterns/notification.njk
@@ -0,0 +1,7 @@
+<div class="notification">
+    <div class="notification__body">{% lines "hor", 5 %}</div>
+    <button class="notification__close">
+        <div class="notification__close-line notification__close-line--first"></div>
+        <div class="notification__close-line notification__close-line--second"></div>
+    </button>
+</div>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index b4a3f34..946fd9e 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -73,6 +73,7 @@ eleventyExcludeFromCollections: true
         <h2 class="category__name">Feedback</h2>
         <div class="category__posts">
             {% pattern "Modal" %}{% include "patterns/modal.njk" %}{% endpattern %}
+            {% pattern "Notification" %}{% include "patterns/notification.njk" %}{% endpattern %}
             {% pattern "Popover arrow" %}{% include "patterns/popover-arrow.njk" %}{% endpattern %}
             {% pattern "Presence indicator" %}{% include "patterns/presence-indicator.njk" %}{% endpattern %}
             {% pattern "Progress bar" %}{% include "patterns/progress-bar.njk" %}{% endpattern %}
diff --git a/contents/notification.md b/contents/notification.md
new file mode 100644
index 0000000..0c03995
--- /dev/null
+++ b/contents/notification.md
@@ -0,0 +1,93 @@
+---
+layout: layouts/post.njk
+title: Notification
+description: Create a notification with CSS flexbox
+keywords: css alert, css flexbox, css notification
+---
+
+## HTML
+
+```html
+<div class="notification">
+    <!-- Content -->
+    <div class="notification__body">
+        ...
+    </div>
+
+    <!-- Close button -->
+    <button class="notification__close">
+        <div class="notification__close-line notification__close-line--first"></div>
+        <div class="notification__close-line notification__close-line--second"></div>
+    </button>
+</div>
+```
+
+## CSS
+
+```css
+.notification {
+    display: flex;
+}
+.notification__body {
+    flex: 1;
+    margin-right: 0.5rem;
+}
+```
+
+The [close button](/close-button/) represents the button for closing the notification.
+
+```css
+.notification__close {
+    /* Reset */
+    background-color: transparent;
+    border-color: transparent;
+
+    /* Cursor */
+    cursor: pointer;
+
+    /* Size */
+    height: 1rem;
+    width: 1rem;
+
+    /* Used to position the inner */
+    position: relative;
+}
+
+.notification__close-line {
+    /* Background color */
+    background-color: rgba(0, 0, 0, 0.3);
+
+    /* Position */
+    position: absolute;
+
+    /* Size */
+    height: 1px;
+    width: 100%;
+}
+
+.notification__close-line--first {
+    /* Position */
+    left: 0px;
+    top: 50%;
+    transform: translate(0%, -50%) rotate(45deg);
+
+    /* Size */
+    height: 1px;
+    width: 100%;
+}
+
+.notification__close-line--second {
+    /* Position */
+    left: 50%;
+    top: 0px;
+    transform: translate(-50%, 0%) rotate(45deg);
+
+    /* Size */
+    height: 100%;
+    width: 1px;
+}
+```
+
+{% demo %}
+{% include "patterns/notification.njk" %}
+{% enddemo %}
diff --git a/pages/notification/index.tsx b/pages/notification/index.tsx
deleted file mode 100644
index 5d7a6e9..0000000
--- a/pages/notification/index.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import Link from 'next/link';
-
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.Notification}>
-            <Head>
-                <meta name="description" content="Create a notification with CSS flexbox" />
-                <meta name="og:description" content="Create a notification with CSS flexbox" />
-                <meta name="twitter:description" content="Create a notification with CSS flexbox" />
-                <meta name="keywords" content="css alert, css flexbox, css notification" />
-            </Head>
-            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                You can use the{' '}
-                <Link href="/close-button">
-                    <a>close button</a>
-                </Link>{' '}
-                to represent the button for closing the notification.
-            </div>
-            <BrowserFrame
-                html={`
-<div class="notification">
-    <!-- Content -->
-    ...
-
-    <!-- Close button sticks to the right -->
-    ...
-</div>
-`}
-                css={`
-                    .notification {
-                        display: flex;
-                        justify-content: space-between;
-                    }
-                `}
-            >
-                <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',
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            width: '60%',
-                        }}
-                    >
-                        <div style={{ padding: '16px', width: '80%' }}>
-                            <Block numberOfBlocks={5} />
-                        </div>
-                        <button
-                            style={{
-                                alignItems: 'center',
-                                borderColor: 'transparent',
-                                color: 'rgba(0, 0, 0, .3)',
-                                display: 'flex',
-                                fontSize: '36px',
-                                height: '32px',
-                                justifyContent: 'center',
-                                marginRight: '1px',
-                                width: '32px',
-                            }}
-                        >
-                            <Circle />
-                        </button>
-                    </div>
-                </div>
-            </BrowserFrame>
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/notification/Cover.tsx b/patterns/notification/Cover.tsx
deleted file mode 100644
index f8ec777..0000000
--- a/patterns/notification/Cover.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-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={{
-                        alignItems: 'center',
-                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                        borderRadius: '4px',
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        padding: '8px',
-                        width: '80%',
-                    }}
-                >
-                    <div style={{ width: '60%' }}>
-                        <Rectangle />
-                    </div>
-                    <div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>&times;</div>
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index c5e6977..cd504b7 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -43,6 +43,7 @@
 @import './patterns/lined-paper';
 @import './patterns/media-object';
 @import './patterns/modal';
+@import './patterns/notification';
 @import './patterns/overlay-play-button';
 @import './patterns/popover-arrow';
 @import './patterns/presence-indicator';
diff --git a/styles/patterns/_notification.scss b/styles/patterns/_notification.scss
new file mode 100644
index 0000000..08acbe4
--- /dev/null
+++ b/styles/patterns/_notification.scss
@@ -0,0 +1,63 @@
+.notification {
+    display: flex;
+
+    /* Demo */
+    border: 1px solid #d1d5db;
+    border-radius: 0.25rem;
+    padding: 0.25rem;
+    width: 8rem;
+}
+.notification__body {
+    flex: 1;
+    margin-right: 0.5rem;
+}
+
+.notification__close {
+    /* Reset */
+    background-color: transparent;
+    border-color: transparent;
+
+    /* Cursor */
+    cursor: pointer;
+
+    /* Size */
+    height: 1rem;
+    width: 1rem;
+
+    /* Used to position the inner */
+    position: relative;
+}
+
+.notification__close-line {
+    /* Background color */
+    background-color: rgba(0, 0, 0, 0.3);
+
+    /* Position */
+    position: absolute;
+
+    /* Size */
+    height: 1px;
+    width: 100%;
+}
+
+.notification__close-line--first {
+    /* Position */
+    left: 0px;
+    top: 50%;
+    transform: translate(0%, -50%) rotate(45deg);
+
+    /* Size */
+    height: 1px;
+    width: 100%;
+}
+
+.notification__close-line--second {
+    /* Position */
+    left: 50%;
+    top: 0px;
+    transform: translate(-50%, 0%) rotate(45deg);
+
+    /* Size */
+    height: 100%;
+    width: 1px;
+}