From 3fa0341174b3434a6fd5b639010981232cbf1837 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Mon, 19 Sep 2022 18:23:45 +0700
Subject: [PATCH] feat: Feature comparison

---
 .../_includes/patterns/feature-comparison.njk |  40 ++++
 contents/feature-comparison.md                |  62 +++++
 contents/index.njk                            |   6 +
 pages/feature-comparison/index.tsx            | 222 ------------------
 patterns/feature-comparison/Cover.tsx         |  54 -----
 styles/blocks/_example.scss                   |   1 +
 styles/index.scss                             |   1 +
 styles/patterns/_feature-comparison.scss      |  26 ++
 styles/placeholders/_circle.scss              |   4 +-
 9 files changed, 138 insertions(+), 278 deletions(-)
 create mode 100644 contents/_includes/patterns/feature-comparison.njk
 create mode 100644 contents/feature-comparison.md
 delete mode 100644 pages/feature-comparison/index.tsx
 delete mode 100644 patterns/feature-comparison/Cover.tsx
 create mode 100644 styles/patterns/_feature-comparison.scss

diff --git a/contents/_includes/patterns/feature-comparison.njk b/contents/_includes/patterns/feature-comparison.njk
new file mode 100644
index 0000000..54dd9af
--- /dev/null
+++ b/contents/_includes/patterns/feature-comparison.njk
@@ -0,0 +1,40 @@
+<div class="feature-comparison">
+    <div class="feature-comparison__feature">
+        {% rectangle %}
+    </div>
+    <div class="feature-comparison__model">
+        {% rectangle %}
+    </div>
+    <div class="feature-comparison__model">
+        {% rectangle %}
+    </div>
+</div>
+<div class="feature-comparison">
+    <div class="feature-comparison__feature">
+        {% line "hor" %}
+    </div>
+    <div class="feature-comparison__model">
+        {% circle %}
+    </div>
+    <div class="feature-comparison__model">
+        {% circle %}
+    </div>
+</div>
+<div class="feature-comparison">
+    <div class="feature-comparison__feature">
+        {% line "hor" %}
+    </div>
+    <div class="feature-comparison__model"></div>
+    <div class="feature-comparison__model">
+        {% circle %}
+    </div>
+</div>
+<div class="feature-comparison">
+    <div class="feature-comparison__feature">
+        {% line "hor" %}
+    </div>
+    <div class="feature-comparison__model">
+        {% circle %}
+    </div>
+    <div class="feature-comparison__model"></div>
+</div>
\ No newline at end of file
diff --git a/contents/feature-comparison.md b/contents/feature-comparison.md
new file mode 100644
index 0000000..fc50183
--- /dev/null
+++ b/contents/feature-comparison.md
@@ -0,0 +1,62 @@
+---
+layout: layouts/post.njk
+title: Feature comparison
+description: Create a feature comparison list with CSS flexbox
+keywords: css feature comparison, css flexbox
+---
+
+## HTML
+
+```html
+<div class="feature-comparison">
+    <!-- Feature name -->
+    <div class="feature-comparison__feature">
+        ...
+    </div>
+
+    <!-- The model -->
+    <div class="feature-comparison__model">
+        <!--
+        For the first row: display the model name (Basic, Pro, etc.)
+        From the second row: display a yes/no icon indicating the feature is available or not
+        -->
+        ...
+    </div>
+
+    <!-- Repeated other models -->
+    ...
+</div>
+
+<!-- Repeated items -->
+...
+```
+
+## CSS
+
+```css
+.feature-comparison {
+    align-items: center;
+    display: flex;
+
+    /* Bottom border */
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+
+    /* Spacing */
+    padding: 0.25rem 0;
+}
+
+.feature-comparison__feature {
+    /* Take available width */
+    flex: 1;
+}
+
+.feature-comparison__model {
+    /* Center the content */
+    display: flex;
+    justify-content: center;
+}
+```
+
+{% demo %}
+{% include "patterns/feature-comparison.njk" %}
+{% enddemo %}
diff --git a/contents/index.njk b/contents/index.njk
index e019e48..6bc64df 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -127,6 +127,12 @@ eleventyExcludeFromCollections: true
                     <div class="pattern__title">Fading long section</div>
                 </a>
             </div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/feature-comparison/">
+                    <div class="pattern__cover">{% include "patterns/feature-comparison.njk" %}</div>
+                    <div class="pattern__title">Feature comparison</div>
+                </a>
+            </div>
         </div>
     </div>
 
diff --git a/pages/feature-comparison/index.tsx b/pages/feature-comparison/index.tsx
deleted file mode 100644
index 120c061..0000000
--- a/pages/feature-comparison/index.tsx
+++ /dev/null
@@ -1,222 +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 Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.FeatureComparison}>
-            <Head>
-                <meta name="description" content="Create a feature comparison list with CSS flexbox" />
-                <meta name="og:description" content="Create a feature comparison list with CSS flexbox" />
-                <meta name="twitter:description" content="Create a feature comparison list with CSS flexbox" />
-                <meta name="keywords" content="css feature comparison, css flexbox" />
-            </Head>
-            <BrowserFrame
-                html={`
-<div class="container">
-    <!-- Feature name -->
-    <div class="container__feature">
-        ...
-    </div>
-
-    <!-- The model -->
-    <div class="container__model">
-        <!--
-        For the first row: display the model name (Basic, Pro, etc.)
-        From the second row: display a yes/no icon indicating the feature is available or not
-        -->
-        ...
-    </div>
-
-    <!-- Repeated other models -->
-    ...
-</div>
-
-<!-- Repeated items -->
-...
-`}
-                css={`
-                    .container {
-                        align-items: center;
-                        display: flex;
-
-                        /* Bottom border */
-                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-
-                        /* Spacing */
-                        padding: 12px 0px;
-                    }
-
-                    .container__feature {
-                        /* Take available width */
-                        flex: 1;
-
-                        /* Spacing */
-                        margin-right: 16px;
-                    }
-
-                    .container__model {
-                        /* Center the content */
-                        display: flex;
-                        justify-content: center;
-
-                        /* Spacing */
-                        margin-right: 16px;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        height: '100%',
-                        justifyContent: 'center',
-                    }}
-                >
-                    <div style={{ width: '60%' }}>
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                display: 'flex',
-                                padding: '12px 0',
-                                width: '100%',
-                            }}
-                        >
-                            <div style={{ flex: 1, marginRight: '16px' }}>
-                                <Rectangle />
-                            </div>
-                            <div
-                                style={{
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    marginRight: '16px',
-                                    width: '75px',
-                                }}
-                            >
-                                <Rectangle />
-                            </div>
-                            <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
-                                <Rectangle />
-                            </div>
-                        </div>
-
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                display: 'flex',
-                                padding: '8px 0',
-                                width: '100%',
-                            }}
-                        >
-                            <div style={{ flex: 1, marginRight: '16px' }}>
-                                <Block numberOfBlocks={4} />
-                            </div>
-                            <div
-                                style={{
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    marginRight: '16px',
-                                    width: '75px',
-                                }}
-                            >
-                                <Circle size={8} />
-                            </div>
-                            <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
-                                <Circle size={8} />
-                            </div>
-                        </div>
-
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                display: 'flex',
-                                padding: '8px 0',
-                                width: '100%',
-                            }}
-                        >
-                            <div style={{ flex: 1, marginRight: '16px' }}>
-                                <Block numberOfBlocks={5} />
-                            </div>
-                            <div
-                                style={{
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    marginRight: '16px',
-                                    width: '75px',
-                                }}
-                            />
-                            <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
-                                <Circle size={8} />
-                            </div>
-                        </div>
-
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                display: 'flex',
-                                padding: '8px 0',
-                                width: '100%',
-                            }}
-                        >
-                            <div style={{ flex: 1, marginRight: '16px' }}>
-                                <Block numberOfBlocks={4} />
-                            </div>
-                            <div
-                                style={{
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    marginRight: '16px',
-                                    width: '75px',
-                                }}
-                            >
-                                <Circle size={8} />
-                            </div>
-                            <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
-                        </div>
-
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                display: 'flex',
-                                padding: '8px 0',
-                                width: '100%',
-                            }}
-                        >
-                            <div style={{ flex: 1, marginRight: '16px' }}>
-                                <Block numberOfBlocks={6} />
-                            </div>
-                            <div
-                                style={{
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    marginRight: '16px',
-                                    width: '75px',
-                                }}
-                            >
-                                <Circle size={8} />
-                            </div>
-                            <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
-                        </div>
-                    </div>
-                </div>
-            </BrowserFrame>
-            <Spacer size="extraLarge" />
-            <RelatedPatterns patterns={[Pattern.FeatureList, Pattern.PricingTable]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/feature-comparison/Cover.tsx b/patterns/feature-comparison/Cover.tsx
deleted file mode 100644
index 11492be..0000000
--- a/patterns/feature-comparison/Cover.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from 'react';
-
-import Circle from '../../placeholders/Circle';
-import Frame from '../../placeholders/Frame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '8px',
-                    width: '100%',
-                }}
-            >
-                <div style={{ display: 'flex', marginBottom: '8px', width: '100%' }}>
-                    <div style={{ flex: 1, marginRight: '8px' }}>
-                        <Rectangle height={4} />
-                    </div>
-                    <div style={{ display: 'flex', justifyContent: 'center', width: '16px' }}>
-                        <Circle size={4} />
-                    </div>
-                    <div style={{ display: 'flex', justifyContent: 'center', width: '16px' }}>
-                        <Circle size={4} />
-                    </div>
-                </div>
-                <div style={{ display: 'flex', marginBottom: '8px', width: '100%' }}>
-                    <div style={{ flex: 1, marginRight: '8px' }}>
-                        <Rectangle height={4} />
-                    </div>
-                    <div style={{ display: 'flex', justifyContent: 'center', width: '16px' }} />
-                    <div style={{ display: 'flex', justifyContent: 'center', width: '16px' }}>
-                        <Circle size={4} />
-                    </div>
-                </div>
-                <div style={{ display: 'flex', marginBottom: '8px', width: '100%' }}>
-                    <div style={{ flex: 1, marginRight: '8px' }}>
-                        <Rectangle height={4} />
-                    </div>
-                    <div style={{ display: 'flex', justifyContent: 'center', width: '16px' }}>
-                        <Circle size={4} />
-                    </div>
-                    <div style={{ display: 'flex', justifyContent: 'center', width: '16px' }} />
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/blocks/_example.scss b/styles/blocks/_example.scss
index 56db460..39df653 100644
--- a/styles/blocks/_example.scss
+++ b/styles/blocks/_example.scss
@@ -55,6 +55,7 @@
 .example__content {
     align-items: center;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     padding: 1rem;
 }
diff --git a/styles/index.scss b/styles/index.scss
index 07c9c8f..e1136a5 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -30,6 +30,7 @@
 @import './patterns/drop-area';
 @import './patterns/drop-cap';
 @import './patterns/fading-long-section';
+@import './patterns/feature-comparison';
 
 // Placeholders
 @import './placeholders/circle';
diff --git a/styles/patterns/_feature-comparison.scss b/styles/patterns/_feature-comparison.scss
new file mode 100644
index 0000000..7e75009
--- /dev/null
+++ b/styles/patterns/_feature-comparison.scss
@@ -0,0 +1,26 @@
+.feature-comparison {
+    align-items: center;
+    display: flex;
+
+    /* Bottom border */
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+
+    /* Spacing */
+    padding: 0.25rem 0;
+
+    width: 100%;
+}
+
+.feature-comparison__feature {
+    /* Take available width */
+    flex: 1;
+}
+
+.feature-comparison__model {
+    /* Center the content */
+    display: flex;
+    justify-content: center;
+    
+    /* Demo */
+    width: 1.5rem;
+}
\ No newline at end of file
diff --git a/styles/placeholders/_circle.scss b/styles/placeholders/_circle.scss
index 81ac6f4..8757981 100644
--- a/styles/placeholders/_circle.scss
+++ b/styles/placeholders/_circle.scss
@@ -1,6 +1,6 @@
 .circle {
     background: rgba(0, 0, 0, .3);
     border-radius: 9999px;
-    height: 1rem;
-    width: 1rem;
+    height: 0.5rem;
+    width: 0.5rem;
 }
\ No newline at end of file