From b448772b307c6dff237d799c5cb61bad5781a5ec Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Mon, 19 Sep 2022 13:26:26 +0700
Subject: [PATCH] feat: Add card pattern

---
 contents/_includes/patterns/card.njk        |  7 ++
 contents/card.md                            | 46 ++++++++++
 contents/index.njk                          | 62 +++++++-------
 pages/card/index.tsx                        | 93 ---------------------
 patterns/card/Cover.tsx                     | 43 ----------
 styles/blocks/{_card.scss => _pattern.scss} |  6 +-
 styles/index.scss                           |  3 +-
 styles/patterns/_card.scss                  | 19 +++++
 8 files changed, 111 insertions(+), 168 deletions(-)
 create mode 100644 contents/_includes/patterns/card.njk
 create mode 100644 contents/card.md
 delete mode 100644 pages/card/index.tsx
 delete mode 100644 patterns/card/Cover.tsx
 rename styles/blocks/{_card.scss => _pattern.scss} (89%)
 create mode 100644 styles/patterns/_card.scss

diff --git a/contents/_includes/patterns/card.njk b/contents/_includes/patterns/card.njk
new file mode 100644
index 0000000..4d9f9ca
--- /dev/null
+++ b/contents/_includes/patterns/card.njk
@@ -0,0 +1,7 @@
+<div class="card">
+    <div class="card__cover">
+    </div>
+    <div class="card__content">
+        {% lines "hor", 5 %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/contents/card.md b/contents/card.md
new file mode 100644
index 0000000..ebb373b
--- /dev/null
+++ b/contents/card.md
@@ -0,0 +1,46 @@
+---
+layout: layouts/post.njk
+title: Card
+description: Create a card with CSS flexbox
+keywords: css card, css flexbox
+---
+
+## HTML
+
+```html
+<div class="card">
+    <!-- Cover -->
+    <div class="card__cover">
+        ...
+    </div>
+
+    <!-- Content -->
+    <div class="card__content">
+        ...
+    </div>
+    ...
+</div>
+```
+
+## CSS
+
+```css
+.card {
+    display: flex;
+    flex-direction: column;
+}
+
+.card__cover {
+    height: 20rem;
+    width: 100%;
+}
+
+.card__content {
+    /* Take available height */
+    flex: 1;
+}
+```
+
+{% demo %}
+{% include "patterns/card.njk" %}
+{% enddemo %}
diff --git a/contents/index.njk b/contents/index.njk
index 05d74cb..298a497 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -13,46 +13,52 @@ eleventyExcludeFromCollections: true
     <div class="category">
         <h2 class="category__name">Display</h2>
         <div class="category__posts">            
-            <div class="card__item">
-                <a class="card__link" href="/accordion/">
-                    <div class="card__cover">{% include "patterns/accordion.njk" %}</div>
-                    <div class="card__title">Accordion</div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/accordion/">
+                    <div class="pattern__cover">{% include "patterns/accordion.njk" %}</div>
+                    <div class="pattern__title">Accordion</div>
                 </a>
             </div>
-            <div class="card__item">
-                <a class="card__link" href="/arrow-buttons/">
-                    <div class="card__cover">{% include "patterns/arrow-buttons.njk" %}</div>
-                    <div class="card__title">Arrow buttons</div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/arrow-buttons/">
+                    <div class="pattern__cover">{% include "patterns/arrow-buttons.njk" %}</div>
+                    <div class="pattern__title">Arrow buttons</div>
                 </a>
             </div>
-            <div class="card__item">
-                <a class="card__link" href="/avatar/">
-                    <div class="card__cover">{% include "patterns/avatar.njk" %}</div>
-                    <div class="card__title">Avatar</div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/avatar/">
+                    <div class="pattern__cover">{% include "patterns/avatar.njk" %}</div>
+                    <div class="pattern__title">Avatar</div>
                 </a>
             </div>
-            <div class="card__item">
-                <a class="card__link" href="/avatar-list/">
-                    <div class="card__cover">{% include "patterns/avatar-list.njk" %}</div>
-                    <div class="card__title">Avatar list</div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/avatar-list/">
+                    <div class="pattern__cover">{% include "patterns/avatar-list.njk" %}</div>
+                    <div class="pattern__title">Avatar list</div>
                 </a>
             </div>
-            <div class="card__item">
-                <a class="card__link" href="/badge/">
-                    <div class="card__cover">{% include "patterns/badge.njk" %}</div>
-                    <div class="card__title">Badge</div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/badge/">
+                    <div class="pattern__cover">{% include "patterns/badge.njk" %}</div>
+                    <div class="pattern__title">Badge</div>
                 </a>
             </div>
-            <div class="card__item">
-                <a class="card__link" href="/centering/">
-                    <div class="card__cover">{% include "patterns/centering.njk" %}</div>
-                    <div class="card__title">Centering</div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/card/">
+                    <div class="pattern__cover">{% include "patterns/card.njk" %}</div>
+                    <div class="pattern__title">Card</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>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/centering/">
+                    <div class="pattern__cover">{% include "patterns/centering.njk" %}</div>
+                    <div class="pattern__title">Centering</div>
+                </a>
+            </div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/close-button/">
+                    <div class="pattern__cover">{% include "patterns/close-button.njk" %}</div>
+                    <div class="pattern__title">Close button</div>
                 </a>
             </div>
         </div>
diff --git a/pages/card/index.tsx b/pages/card/index.tsx
deleted file mode 100644
index b1b6f68..0000000
--- a/pages/card/index.tsx
+++ /dev/null
@@ -1,93 +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 Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.Card}>
-            <Head>
-                <meta name="description" content="Create a card with CSS flexbox" />
-                <meta name="og:description" content="Create a card with CSS flexbox" />
-                <meta name="twitter:description" content="Create a card with CSS flexbox" />
-                <meta name="keywords" content="css card, css flexbox" />
-            </Head>
-            <BrowserFrame
-                html={`
-<div class="card">
-    <!-- Cover -->
-    <div class="card__cover">
-        ...
-    </div>
-
-    <!-- Content -->
-    <div class="card__content">
-        ...
-    </div>
-    ...
-</div>
-`}
-                css={`
-                    .card {
-                        display: flex;
-                        flex-direction: column;
-                    }
-
-                    .card__cover {
-                        height: 150px;
-                        width: 100%;
-                    }
-
-                    .card__content {
-                        /* Take available height */
-                        flex: 1;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '16px',
-                    }}
-                >
-                    <div
-                        style={{
-                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                            borderRadius: '8px',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            width: '256px',
-                        }}
-                    >
-                        <Rectangle height={150} />
-                        <div style={{ flex: 1, padding: '16px' }}>
-                            <div style={{ marginBottom: '16px' }}>
-                                <Block numberOfBlocks={15} />
-                            </div>
-                            <div style={{ width: '128px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <Spacer size="extraLarge" />
-            <RelatedPatterns
-                patterns={[Pattern.CardLayout, Pattern.LayeredCard, Pattern.StackedCards, Pattern.ThreeDimensionsCard]}
-            />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/card/Cover.tsx b/patterns/card/Cover.tsx
deleted file mode 100644
index f29a4f3..0000000
--- a/patterns/card/Cover.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-import Line from '../../placeholders/Line';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    padding: '8px',
-                }}
-            >
-                <div style={{ marginBottom: '8px', width: '100%' }}>
-                    <Rectangle height={32} />
-                </div>
-                <div style={{ flex: 1 }}>
-                    <div style={{ marginBottom: '4px', width: '100%' }}>
-                        <Line />
-                    </div>
-                    <div style={{ marginBottom: '4px', width: '100%' }}>
-                        <Line />
-                    </div>
-                    <div style={{ marginBottom: '4px', width: '80%' }}>
-                        <Line />
-                    </div>
-                    <div style={{ marginBottom: '8px', width: '60%' }}>
-                        <Line />
-                    </div>
-                    <div style={{ width: '30%' }}>
-                        <Rectangle height={8} />
-                    </div>
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/blocks/_card.scss b/styles/blocks/_pattern.scss
similarity index 89%
rename from styles/blocks/_card.scss
rename to styles/blocks/_pattern.scss
index f552a3c..fa7e7e4 100644
--- a/styles/blocks/_card.scss
+++ b/styles/blocks/_pattern.scss
@@ -1,18 +1,18 @@
-.card__item {
+.pattern__item {
     background-color: #fff;
     border-radius: 0.5rem;
     box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.1);
     padding: 0.5rem;
     text-align: center;
 }
-.card__link {
+.pattern__link {
     color: #6366f1;
     font-size: 1.25rem;
     font-weight: 500;
     text-align: center;
     text-decoration: none;
 }
-.card__cover {
+.pattern__cover {
     /* Center the content */
     align-items: center;
     display: flex;
diff --git a/styles/index.scss b/styles/index.scss
index 23f7a15..2f16db7 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -1,6 +1,5 @@
 @import './common';
 
-@import './blocks/card';
 @import './blocks/category';
 @import './blocks/example';
 @import './blocks/hero';
@@ -8,6 +7,7 @@
 @import './blocks/footer';
 @import './blocks/header';
 @import './blocks/nav';
+@import './blocks/pattern';
 @import './blocks/post';
 
 // Patterns
@@ -16,6 +16,7 @@
 @import './patterns/avatar';
 @import './patterns/avatar-list';
 @import './patterns/badge';
+@import './patterns/card';
 @import './patterns/centering';
 @import './patterns/close-button';
 
diff --git a/styles/patterns/_card.scss b/styles/patterns/_card.scss
new file mode 100644
index 0000000..61cc62d
--- /dev/null
+++ b/styles/patterns/_card.scss
@@ -0,0 +1,19 @@
+.card {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    border: 1px solid rgba(0, 0, 0, .3);
+    border-radius: 0.25rem;
+}
+.card__cover {
+    background: rgba(0, 0, 0, .3);
+    border-radius: 0.25rem;
+    height: 40%;
+    width: 100%;
+}
+.card__content {
+    /* Take available height */
+    flex: 1;
+    padding: 0.5rem;
+}
\ No newline at end of file