From 61b40e8ab5cab14a3938fb4be157af158b2157e6 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Mon, 19 Sep 2022 22:50:48 +0700
Subject: [PATCH] feat: Ribbon

---
 contents/_includes/patterns/ribbon.njk |   7 +
 contents/index.njk                     |   6 +
 contents/ribbon.md                     |  96 ++++++++++++++
 pages/ribbon/index.tsx                 | 172 -------------------------
 patterns/ribbon/Cover.tsx              |  74 -----------
 styles/index.scss                      |   1 +
 styles/patterns/_ribbon.scss           |  63 +++++++++
 7 files changed, 173 insertions(+), 246 deletions(-)
 create mode 100644 contents/_includes/patterns/ribbon.njk
 create mode 100644 contents/ribbon.md
 delete mode 100644 pages/ribbon/index.tsx
 delete mode 100644 patterns/ribbon/Cover.tsx
 create mode 100644 styles/patterns/_ribbon.scss

diff --git a/contents/_includes/patterns/ribbon.njk b/contents/_includes/patterns/ribbon.njk
new file mode 100644
index 0000000..6f64927
--- /dev/null
+++ b/contents/_includes/patterns/ribbon.njk
@@ -0,0 +1,7 @@
+<div class="ribbon">
+    <div class="ribbon__side ribbon__side--l"></div>
+    <div class="ribbon__triangle ribbon__triangle--l"></div>
+    <div class="ribbon__triangle ribbon__triangle--r"></div>
+    <div class="ribbon__side ribbon__side--r"></div>
+    <div class="ribbon__content"></div>
+</div>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 768fbcb..ed08217 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -223,6 +223,12 @@ eleventyExcludeFromCollections: true
                     <div class="pattern__title">Questions and answers</div>
                 </a>
             </div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/ribbon/">
+                    <div class="pattern__cover">{% include "patterns/ribbon.njk" %}</div>
+                    <div class="pattern__title">Ribbon</div>
+                </a>
+            </div>
             <div class="pattern__item">
                 <a class="pattern__link" href="/video-background/">
                     <div class="pattern__cover">{% include "patterns/video-background.njk" %}</div>
diff --git a/contents/ribbon.md b/contents/ribbon.md
new file mode 100644
index 0000000..e8cd247
--- /dev/null
+++ b/contents/ribbon.md
@@ -0,0 +1,96 @@
+---
+layout: layouts/post.njk
+title: Ribbon
+description: Create a ribbon with CSS
+keywords: css ribbon
+---
+
+## HTML
+
+```html
+<div class="ribbon">
+    <!-- The left side -->
+    <div class="ribbon__side ribbon__side--l"></div>
+
+    <!-- The left triangle displayed below the content -->
+    <div class="ribbon__triangle ribbon__triangle--l"></div>
+
+    <!-- The right triangle displayed below the content -->
+    <div class="ribbon__triangle ribbon__triangle--r"></div>
+
+    <!-- The right side -->
+    <div class="ribbon__side ribbon__side--r"></div>
+
+    <!-- The content -->
+    <div class="ribbon__content"></div>
+</div>
+```
+
+## CSS
+
+```css
+.ribbon {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Size */
+    height: 2rem;
+
+    /* Use to position the corners */
+    position: relative;
+}
+
+.ribbon__content {
+    /* Background color */
+    background-color: #9ca3af;
+    z-index: 1;
+
+    height: 100%;
+    width: 100%;
+}
+.ribbon__side {
+    bottom: -0.5rem;
+    position: absolute;
+
+    /* Displayed under the ribbon */
+    z-index: 1;
+
+    /* Background */
+    border: 1rem solid #d1d5db;
+}
+
+.ribbon__side--l {
+    /* Position */
+    left: -1.5rem;
+    border-color: rgba(0, 0, 0, .3) rgba(0, 0, 0, .3) rgba(0, 0, 0, .3) transparent;
+}
+
+.ribbon__side--r {
+    /* Position */
+    right: -1.5rem;
+    border-color: rgba(0, 0, 0, .3) transparent rgba(0, 0, 0, .3) rgba(0, 0, 0, .3);
+}
+
+.ribbon__triangle {
+    position: absolute;
+    top: 100%;
+
+    border: 0.5rem solid transparent;
+    border-bottom-width: 0;
+    border-top-color: #aaa;
+}
+
+.ribbon__triangle--l {
+    border-right-width: 0;
+    left: 0;
+}
+
+.ribbon__triangle--r {
+    border-left-width: 0;
+    right: 0;
+}
+```
+
+{% demo %}{% include "patterns/ribbon.njk" %}{% enddemo %}
diff --git a/pages/ribbon/index.tsx b/pages/ribbon/index.tsx
deleted file mode 100644
index 0b2c7e8..0000000
--- a/pages/ribbon/index.tsx
+++ /dev/null
@@ -1,172 +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 Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.Ribbon}>
-            <Head>
-                <meta name="description" content="Create a ribbon with CSS" />
-                <meta name="og:description" content="Create a ribbon with CSS" />
-                <meta name="twitter:description" content="Create a ribbon with CSS" />
-                <meta name="keywords" content="css ribbon" />
-            </Head>
-            <BrowserFrame
-                html={`
-<div class="container">
-    <!-- The content -->
-    ...
-
-    <!-- The left side -->
-    <div class="container__side container__side--left"></div>
-
-    <!-- The left triangle displayed below the content -->
-    <div class="container__triangle container__triangle--left"></div>
-
-    <!-- The right triangle displayed below the content -->
-    <div class="container__triangle container__triangle--right"></div>
-
-    <!-- The right side -->
-    <div class="container__side container__side--right"></div>
-</div>
-`}
-                css={`
-                    .container {
-                        /* Center the content */
-                        align-items: center;
-                        display: flex;
-                        justify-content: center;
-
-                        /* Background color */
-                        background-color: #bbb;
-
-                        /* Size */
-                        height: 32px;
-
-                        /* Use to position the corners */
-                        position: relative;
-                    }
-
-                    .container__side {
-                        bottom: -8px;
-                        position: absolute;
-
-                        /* Displayed under the container */
-                        z-index: -1;
-
-                        /* Background */
-                        border: 16px solid #ccc;
-                        border-left-color: transparent;
-                    }
-
-                    .container__side--left {
-                        /* Position */
-                        left: -24px;
-                    }
-
-                    .container__side--right {
-                        /* Position */
-                        right: -24px;
-                    }
-
-                    .container__triangle {
-                        position: absolute;
-                        top: 100%;
-
-                        border: 8px solid transparent;
-                        border-bottom-width: 0;
-                        border-top-color: #aaa;
-                    }
-
-                    .container__triangle--left {
-                        border-right-width: 0;
-                        left: 0;
-                    }
-
-                    .container__triangle--right {
-                        border-left-width: 0;
-                        right: 0;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            backgroundColor: '#BBB',
-                            display: 'flex',
-                            height: '32px',
-                            justifyContent: 'center',
-                            padding: '0 16px',
-                            position: 'relative',
-                            width: '150px',
-                        }}
-                    >
-                        <Rectangle />
-                        <div
-                            style={{
-                                border: '16px solid #CCC',
-                                borderLeftColor: 'transparent',
-                                bottom: '-8px',
-                                left: '-24px',
-                                position: 'absolute',
-                                zIndex: -1,
-                            }}
-                        />
-                        <div
-                            style={{
-                                border: '8px solid transparent',
-                                borderBottomWidth: 0,
-                                borderRightWidth: 0,
-                                borderTopColor: '#AAA',
-                                left: 0,
-                                position: 'absolute',
-                                top: '100%',
-                            }}
-                        />
-                        <div
-                            style={{
-                                border: '8px solid transparent',
-                                borderBottomWidth: 0,
-                                borderLeftWidth: 0,
-                                borderTopColor: '#AAA',
-                                position: 'absolute',
-                                right: 0,
-                                top: '100%',
-                            }}
-                        />
-                        <div
-                            style={{
-                                border: '16px solid #CCC',
-                                borderRightColor: 'transparent',
-                                bottom: '-8px',
-                                position: 'absolute',
-                                right: '-24px',
-                                zIndex: -1,
-                            }}
-                        />
-                    </div>
-                </div>
-            </BrowserFrame>
-            <Spacer size="extraLarge" />
-            <RelatedPatterns patterns={[Pattern.CornerRibbon]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/ribbon/Cover.tsx b/patterns/ribbon/Cover.tsx
deleted file mode 100644
index 002c25e..0000000
--- a/patterns/ribbon/Cover.tsx
+++ /dev/null
@@ -1,74 +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',
-                }}
-            >
-                <div
-                    style={{
-                        backgroundColor: '#BBB',
-                        height: '24px',
-                        position: 'relative',
-                        width: '48px',
-                    }}
-                >
-                    <div
-                        style={{
-                            border: '12px solid #CCC',
-                            borderLeftColor: 'transparent',
-                            bottom: '-6px',
-                            left: '-18px',
-                            position: 'absolute',
-                            zIndex: -1,
-                        }}
-                    />
-                    <div
-                        style={{
-                            border: '6px solid transparent',
-                            borderBottomWidth: 0,
-                            borderRightWidth: 0,
-                            borderTopColor: '#AAA',
-                            left: 0,
-                            position: 'absolute',
-                            top: '100%',
-                        }}
-                    />
-                    <div
-                        style={{
-                            border: '6px solid transparent',
-                            borderBottomWidth: 0,
-                            borderLeftWidth: 0,
-                            borderTopColor: '#AAA',
-                            position: 'absolute',
-                            right: 0,
-                            top: '100%',
-                        }}
-                    />
-                    <div
-                        style={{
-                            border: '12px solid #CCC',
-                            borderRightColor: 'transparent',
-                            bottom: '-6px',
-                            position: 'absolute',
-                            right: '-18px',
-                            zIndex: -1,
-                        }}
-                    />
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index 8a1c039..833f48b 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -46,6 +46,7 @@
 @import './patterns/pricing-table';
 @import './patterns/property-list';
 @import './patterns/questions-and-answers';
+@import './patterns/ribbon';
 @import './patterns/triangle-buttons';
 @import './patterns/video-background';
 @import './patterns/voting';
diff --git a/styles/patterns/_ribbon.scss b/styles/patterns/_ribbon.scss
new file mode 100644
index 0000000..5174b77
--- /dev/null
+++ b/styles/patterns/_ribbon.scss
@@ -0,0 +1,63 @@
+.ribbon {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Size */
+    height: 2rem;
+    width: 4rem; /* For demo */
+
+    /* Use to position the corners */
+    position: relative;
+}
+
+.ribbon__content {
+    /* Background color */
+    background-color: #9ca3af;
+    z-index: 1;
+
+    height: 100%;
+    width: 100%;
+}
+.ribbon__side {
+    bottom: -0.5rem;
+    position: absolute;
+
+    /* Displayed under the ribbon */
+    z-index: 1;
+
+    /* Background */
+    border: 1rem solid #d1d5db;
+}
+
+.ribbon__side--l {
+    /* Position */
+    left: -1.5rem;
+    border-color: rgba(0, 0, 0, .3) rgba(0, 0, 0, .3) rgba(0, 0, 0, .3) transparent;
+}
+
+.ribbon__side--r {
+    /* Position */
+    right: -1.5rem;
+    border-color: rgba(0, 0, 0, .3) transparent rgba(0, 0, 0, .3) rgba(0, 0, 0, .3);
+}
+
+.ribbon__triangle {
+    position: absolute;
+    top: 100%;
+
+    border: 0.5rem solid transparent;
+    border-bottom-width: 0;
+    border-top-color: #aaa;
+}
+
+.ribbon__triangle--l {
+    border-right-width: 0;
+    left: 0;
+}
+
+.ribbon__triangle--r {
+    border-left-width: 0;
+    right: 0;
+}
\ No newline at end of file