From b40575e3a5a6b4d522d698db5919f0299254b281 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sun, 1 Dec 2019 16:29:16 +0700
Subject: [PATCH 1/2] Add corner ribbon

---
 client/constants/Pattern.ts                 |   1 +
 client/pages/ExplorePage.tsx                |   1 +
 client/patterns/corner-ribbon/Cover.tsx     |  56 ++++++
 client/patterns/corner-ribbon/Details.tsx   | 189 ++++++++++++++++++++
 client/patterns/fixed-at-corner/Details.tsx |   2 +-
 client/patterns/pricing-table/Details.tsx   |   6 +
 public/sitemap.xml                          |   1 +
 7 files changed, 255 insertions(+), 1 deletion(-)
 create mode 100644 client/patterns/corner-ribbon/Cover.tsx
 create mode 100644 client/patterns/corner-ribbon/Details.tsx

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 5503cab..e00ddba 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -7,6 +7,7 @@ enum Pattern {
     Centering = 'Centering',
     CircularNavigation = 'Circular navigation',
     CookieBanner = 'Cookie banner',
+    CornerRibbon = 'Corner ribbon',
     DockedAtCorner = 'Docked at corner',
     DotLeader = 'Dot leader',
     DotNavigation = 'Dot navigation',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 76c5c1e..b40c89e 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -91,6 +91,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.Centering} />
                         <CoverCard pattern={Pattern.CircularNavigation} />
                         <CoverCard pattern={Pattern.CookieBanner} />
+                        <CoverCard pattern={Pattern.CornerRibbon} />
                         <CoverCard pattern={Pattern.DockedAtCorner} />
                         <CoverCard pattern={Pattern.DotLeader} />
                         <CoverCard pattern={Pattern.DotNavigation} />
diff --git a/client/patterns/corner-ribbon/Cover.tsx b/client/patterns/corner-ribbon/Cover.tsx
new file mode 100644
index 0000000..3f6f3ba
--- /dev/null
+++ b/client/patterns/corner-ribbon/Cover.tsx
@@ -0,0 +1,56 @@
+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: '100%',
+                        position: 'relative',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            height: '48px',
+                            left: 0,
+                            overflow: 'hidden',
+                            position: 'absolute',
+                            top: 0,
+                            width: '48px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                height: '16px',
+                                left: '-16px',
+                                position: 'absolute',
+                                textAlign: 'center',
+                                top: '8px',
+                                transform: 'rotate(-45deg)',
+                                width: '70px',
+                            }}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/corner-ribbon/Details.tsx b/client/patterns/corner-ribbon/Details.tsx
new file mode 100644
index 0000000..29b892d
--- /dev/null
+++ b/client/patterns/corner-ribbon/Details.tsx
@@ -0,0 +1,189 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import Heading from '../../components/Heading';
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Corner ribbon">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '100%',
+                                justifyContent: 'center',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    height: '256px',
+                                    position: 'relative',
+                                    width: '256px',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        height: '100px',
+                                        left: 0,
+                                        overflow: 'hidden',
+                                        position: 'absolute',
+                                        top: 0,
+                                        width: '100px',
+                                    }}
+                                >
+                                    <div
+                                        style={{
+                                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                            height: '24px',
+                                            left: '-64px',
+                                            position: 'absolute',
+                                            textAlign: 'center',
+                                            top: '32px',
+                                            transform: 'rotate(-45deg)',
+                                            width: '206px',
+                                        }}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    position: relative;
+">
+    <!-- The container -->
+    <div style="
+        /* Displayed at the top left corner */
+        left: 0px;
+        position: absolute;
+        top: 0px;
+
+        /* Size */
+        height: 100px;
+        width: 100px;
+
+        /* Hide the part of its children which is displayed outside */
+        overflow: hidden;
+    ">
+        <!-- The ribbon -->
+        <div style="
+            /* Position */
+            left: -64px;
+            position: absolute;
+            top: 32px;
+
+            /* Size */
+            height: 24px;
+            width: 206px;
+
+            /* Displayed diagonally */
+            transform: rotate(-45deg);
+
+            /* Background color */
+            background-color: rgba(0, 0, 0, 0.3);
+
+            /* Centerize the text content */
+            text-align: center;
+        ">
+            ...
+        </div>
+    </div>
+</div>
+`}
+                />
+            </div>
+
+            <section>
+                <Heading title="Use cases" />
+
+                <div style={{ padding: '32px' }}>
+                    <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                        You can add a ribbon to
+                        a <Link to='/patterns/pricing-table' style={{ textDecoration: 'none' }}>
+                        pricing table
+                        </Link> to indicate the most popular option.
+                    </div>
+
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            width: '60%',
+                        }}
+                    >
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                flex: 1,
+                                height: '200px',
+                                margin: '0 8px',
+                            }}
+                        />
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                flex: 1,
+                                height: '300px',
+                                margin: '0 8px',
+                                position: 'relative',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    height: '100px',
+                                    left: 0,
+                                    overflow: 'hidden',
+                                    position: 'absolute',
+                                    top: 0,
+                                    width: '100px',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        backgroundColor: '#00449E',
+                                        color: '#FFF',
+                                        fontWeight: 'bold',
+                                        left: '-64px',
+                                        padding: '2px 0',
+                                        position: 'absolute',
+                                        textAlign: 'center',
+                                        top: '32px',
+                                        transform: 'rotate(-45deg)',
+                                        width: '210px',
+                                    }}
+                                >
+                                    Popular
+                                </div>
+                            </div>
+                        </div>
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                borderRadius: '4px',
+                                flex: 1,
+                                height: '250px',
+                                margin: '0 8px',
+                            }}
+                        />
+                    </div>
+                </div>
+            </section>
+
+            <RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/fixed-at-corner/Details.tsx b/client/patterns/fixed-at-corner/Details.tsx
index e543382..2e3cb17 100644
--- a/client/patterns/fixed-at-corner/Details.tsx
+++ b/client/patterns/fixed-at-corner/Details.tsx
@@ -70,7 +70,7 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
-            <RelatedPatterns patterns={[Pattern.CookieBanner]} />
+            <RelatedPatterns patterns={[Pattern.CookieBanner, Pattern.CornerRibbon]} />
         </DetailsLayout>
     );
 };
diff --git a/client/patterns/pricing-table/Details.tsx b/client/patterns/pricing-table/Details.tsx
index 84f2fe3..c676475 100644
--- a/client/patterns/pricing-table/Details.tsx
+++ b/client/patterns/pricing-table/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -10,6 +11,11 @@ const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Pricing table">
             <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    You can
+                    add <Link to='/patterns/corner-ribbon' style={{ textDecoration: 'none' }}>a ribbon</Link> to
+                    indicate the most popular option.
+                </div>
                 <BrowserFrame
                     content={(
                         <div
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 95d99c6..c662412 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -13,6 +13,7 @@
     <url><loc>https://csslayout.io/patterns/centering</loc></url>
     <url><loc>https://csslayout.io/patterns/circular-navigation</loc></url>
     <url><loc>https://csslayout.io/patterns/cookie-banner</loc></url>
+    <url><loc>https://csslayout.io/patterns/corner-ribbon</loc></url>
     <url><loc>https://csslayout.io/patterns/docked-at-corner</loc></url>
     <url><loc>https://csslayout.io/patterns/dot-leader</loc></url>
     <url><loc>https://csslayout.io/patterns/dot-navigation</loc></url>

From 632519268919842bb8d8ee28d72943f0377ad2c8 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sun, 1 Dec 2019 17:16:45 +0700
Subject: [PATCH 2/2] Add ribbon

---
 client/constants/Pattern.ts               |   1 +
 client/pages/ExplorePage.tsx              |   1 +
 client/pages/MadeOf.tsx                   |   2 +-
 client/patterns/corner-ribbon/Details.tsx |   8 +-
 client/patterns/pricing-table/Details.tsx |   3 +-
 client/patterns/ribbon/Cover.tsx          |  74 ++++++++++
 client/patterns/ribbon/Details.tsx        | 169 ++++++++++++++++++++++
 public/sitemap.xml                        |   1 +
 8 files changed, 251 insertions(+), 8 deletions(-)
 create mode 100644 client/patterns/ribbon/Cover.tsx
 create mode 100644 client/patterns/ribbon/Details.tsx

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index e00ddba..2c6be4a 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -35,6 +35,7 @@ enum Pattern {
     RadialProgressBar = 'Radial progress bar',
     RadioSwitch = 'Radio switch',
     Rating = 'Rating',
+    Ribbon = 'Ribbon',
     SameHeightColumns = 'Same height columns',
     SearchBox = 'Search box',
     Separator = 'Separator',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index b40c89e..22b208f 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -118,6 +118,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.RadialProgressBar} />
                         <CoverCard pattern={Pattern.RadioSwitch} />
                         <CoverCard pattern={Pattern.Rating} />
+                        <CoverCard pattern={Pattern.Ribbon} />
                         <CoverCard pattern={Pattern.SameHeightColumns} />
                         <CoverCard pattern={Pattern.SearchBox} />
                         <CoverCard pattern={Pattern.Separator} />
diff --git a/client/pages/MadeOf.tsx b/client/pages/MadeOf.tsx
index 3ddb837..92b5fd7 100644
--- a/client/pages/MadeOf.tsx
+++ b/client/pages/MadeOf.tsx
@@ -16,7 +16,7 @@ const MadeOf: React.FC<{}> = () => {
                     fontSize: '48px',
                     fontWeight: 600,
                     textAlign: 'center',
-                    textTransform: 'uppercase',
+                    textTransform: 'lowercase',
                 }}
             >
                 How it's made
diff --git a/client/patterns/corner-ribbon/Details.tsx b/client/patterns/corner-ribbon/Details.tsx
index 29b892d..8252c7f 100644
--- a/client/patterns/corner-ribbon/Details.tsx
+++ b/client/patterns/corner-ribbon/Details.tsx
@@ -107,10 +107,8 @@ const Details: React.FC<{}> = () => {
 
                 <div style={{ padding: '32px' }}>
                     <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                        You can add a ribbon to
-                        a <Link to='/patterns/pricing-table' style={{ textDecoration: 'none' }}>
-                        pricing table
-                        </Link> to indicate the most popular option.
+                        You can add a ribbon to a <Link to='/patterns/pricing-table'> pricing table</Link> to
+                        indicate the most popular option.
                     </div>
 
                     <div
@@ -181,7 +179,7 @@ const Details: React.FC<{}> = () => {
                 </div>
             </section>
 
-            <RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
+            <RelatedPatterns patterns={[Pattern.FixedAtCorner, Pattern.Ribbon]} />
         </DetailsLayout>
     );
 };
diff --git a/client/patterns/pricing-table/Details.tsx b/client/patterns/pricing-table/Details.tsx
index c676475..6c85d61 100644
--- a/client/patterns/pricing-table/Details.tsx
+++ b/client/patterns/pricing-table/Details.tsx
@@ -12,8 +12,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Pricing table">
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    You can
-                    add <Link to='/patterns/corner-ribbon' style={{ textDecoration: 'none' }}>a ribbon</Link> to
+                    You can <Link to='/patterns/ribbon'>add</Link> <Link to='/patterns/corner-ribbon'>a ribbon</Link> to
                     indicate the most popular option.
                 </div>
                 <BrowserFrame
diff --git a/client/patterns/ribbon/Cover.tsx b/client/patterns/ribbon/Cover.tsx
new file mode 100644
index 0000000..f377925
--- /dev/null
+++ b/client/patterns/ribbon/Cover.tsx
@@ -0,0 +1,74 @@
+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={{
+                        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/client/patterns/ribbon/Details.tsx b/client/patterns/ribbon/Details.tsx
new file mode 100644
index 0000000..39c6aea
--- /dev/null
+++ b/client/patterns/ribbon/Details.tsx
@@ -0,0 +1,169 @@
+import React from 'react';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Ribbon">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <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>
+                    )}
+                    source={`
+<div style="
+    /* 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;
+">
+    <!-- The content -->
+    ...
+
+    <!-- The left side -->
+    <div style="
+        /* Position */
+        bottom: -8px;
+        position: absolute;
+        left: -24px;
+
+        /* Displayed under the container */
+        z-index: -1;
+
+        /* Background */
+        border: 16px solid #CCC;
+        border-left-color: transparent;
+    "
+    />
+
+    <!-- The left triangle displayed below the content -->
+    <div style="
+        left: 0;
+        position: absolute;
+        top: 100%;
+
+        /* Background */
+        border: 8px solid transparent;
+        border-bottom-width: 0;
+        border-right-width: 0;
+        border-top-color: #AAA;
+    " />
+
+    <!-- The right triangle displayed below the content -->
+    <div style="
+        position: absolute;
+        right: 0;
+        top: 100%;
+
+        /* Background */
+        border: 8px solid transparent;
+        border-bottom-width: 0;
+        border-left-width: 0;
+        border-top-color: #AAA;
+    " />
+
+    <!-- The right side -->
+    <div style="
+        /* Position */
+        bottom: -8px;
+        position: absolute;
+        right: -24px;
+
+        /* Displayed under the container */
+        z-index: -1;
+
+        /* Background */
+        border: 16px solid #CCC;
+        border-right-color: transparent;
+    "
+    />
+</div>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.CornerRibbon]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/public/sitemap.xml b/public/sitemap.xml
index c662412..40fe990 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -40,6 +40,7 @@
     <url><loc>https://csslayout.io/patterns/radial-progress-bar</loc></url>
     <url><loc>https://csslayout.io/patterns/radio-switch</loc></url>
     <url><loc>https://csslayout.io/patterns/rating</loc></url>
+    <url><loc>https://csslayout.io/patterns/ribbon</loc></url>
     <url><loc>https://csslayout.io/patterns/same-height-columns</loc></url>
     <url><loc>https://csslayout.io/patterns/search-box</loc></url>
     <url><loc>https://csslayout.io/patterns/separator</loc></url>