From 4401de7f7bf39c7f79a33a8a0a8700d2972a13c6 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Mon, 19 Sep 2022 11:30:21 +0700
Subject: [PATCH] feat: Add avatar list

---
 .../{covers => patterns}/accordion.njk        |   0
 .../{covers => patterns}/arrow-buttons.njk    |   0
 contents/_includes/patterns/avatar-list.njk   |  11 ++
 .../_includes/{covers => patterns}/avatar.njk |   0
 contents/accordion.md                         |   2 +-
 contents/arrow-buttons.md                     |   2 +-
 contents/avatar-list.md                       |  53 ++++++++
 contents/avatar.md                            |   2 +-
 contents/index.njk                            |  12 +-
 pages/avatar-list/index.tsx                   | 114 ------------------
 patterns/avatar-list/Cover.tsx                |  46 -------
 styles/blocks/_card.scss                      |   5 +
 styles/index.scss                             |   9 +-
 styles/{covers => patterns}/_accordion.scss   |   0
 .../{covers => patterns}/_arrow-buttons.scss  |   0
 styles/patterns/_avatar-list.scss             |  28 +++++
 styles/{covers => patterns}/_avatar.scss      |   0
 17 files changed, 114 insertions(+), 170 deletions(-)
 rename contents/_includes/{covers => patterns}/accordion.njk (100%)
 rename contents/_includes/{covers => patterns}/arrow-buttons.njk (100%)
 create mode 100644 contents/_includes/patterns/avatar-list.njk
 rename contents/_includes/{covers => patterns}/avatar.njk (100%)
 create mode 100644 contents/avatar-list.md
 delete mode 100644 pages/avatar-list/index.tsx
 delete mode 100644 patterns/avatar-list/Cover.tsx
 rename styles/{covers => patterns}/_accordion.scss (100%)
 rename styles/{covers => patterns}/_arrow-buttons.scss (100%)
 create mode 100644 styles/patterns/_avatar-list.scss
 rename styles/{covers => patterns}/_avatar.scss (100%)

diff --git a/contents/_includes/covers/accordion.njk b/contents/_includes/patterns/accordion.njk
similarity index 100%
rename from contents/_includes/covers/accordion.njk
rename to contents/_includes/patterns/accordion.njk
diff --git a/contents/_includes/covers/arrow-buttons.njk b/contents/_includes/patterns/arrow-buttons.njk
similarity index 100%
rename from contents/_includes/covers/arrow-buttons.njk
rename to contents/_includes/patterns/arrow-buttons.njk
diff --git a/contents/_includes/patterns/avatar-list.njk b/contents/_includes/patterns/avatar-list.njk
new file mode 100644
index 0000000..73ea6ee
--- /dev/null
+++ b/contents/_includes/patterns/avatar-list.njk
@@ -0,0 +1,11 @@
+<div class="avatars">
+    <div class="avatars__item">
+        <div class="avatars__image">A</div>
+    </div>
+    <div class="avatars__item">
+        <div class="avatars__image">B</div>
+    </div>
+    <div class="avatars__item">
+        <div class="avatars__image">C</div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/contents/_includes/covers/avatar.njk b/contents/_includes/patterns/avatar.njk
similarity index 100%
rename from contents/_includes/covers/avatar.njk
rename to contents/_includes/patterns/avatar.njk
diff --git a/contents/accordion.md b/contents/accordion.md
index d8743c3..9f17577 100644
--- a/contents/accordion.md
+++ b/contents/accordion.md
@@ -85,5 +85,5 @@ keywords: css accordion, css flexbox
 ```
 
 {% demo %}
-{% include "covers/accordion.njk" %}
+{% include "patterns/accordion.njk" %}
 {% enddemo %}
diff --git a/contents/arrow-buttons.md b/contents/arrow-buttons.md
index 22bccef..3eba7f4 100644
--- a/contents/arrow-buttons.md
+++ b/contents/arrow-buttons.md
@@ -87,5 +87,5 @@ keywords: css arrow buttons
 ```
 
 {% demo %}
-{% include "covers/arrow-buttons.njk" %}
+{% include "patterns/arrow-buttons.njk" %}
 {% enddemo %}
diff --git a/contents/avatar-list.md b/contents/avatar-list.md
new file mode 100644
index 0000000..12750af
--- /dev/null
+++ b/contents/avatar-list.md
@@ -0,0 +1,53 @@
+---
+layout: layouts/post.njk
+title: Avatar list
+description: Create an avatar list with CSS flexbox
+keywords: css avatar, css flexbox
+---
+
+## HTML
+
+```html
+<div class="avatars">
+    <!-- Avatar item -->
+    <div class="avatars__item">
+        <div class="avatars__image">
+            <!-- Image -->
+            ...
+        </div>
+    </div>
+
+    <!-- Repeat other avatars -->
+    ...
+</div>
+```
+
+## CSS
+
+```css
+.avatars {
+    display: flex;
+}
+
+.avatars__item {
+    /* Nagative margin make avatar overlap to previous one */
+    margin-left: -0.25rem;
+}
+
+.avatars__image {
+    /* Add a white curve between avatars */
+    box-shadow: 0 0 0 0.25rem #fff;
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Rounded border */
+    border-radius: 9999px;
+}
+```
+
+{% demo %}
+{% include "patterns/avatar-list.njk" %}
+{% enddemo %}
diff --git a/contents/avatar.md b/contents/avatar.md
index 6672c59..dd7707a 100644
--- a/contents/avatar.md
+++ b/contents/avatar.md
@@ -39,5 +39,5 @@ keywords: css avatar, css flexbox
 ```
 
 {% demo %}
-{% include "covers/avatar.njk" %}
+{% include "patterns/avatar.njk" %}
 {% enddemo %}
diff --git a/contents/index.njk b/contents/index.njk
index 00754c7..2425e7a 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -15,22 +15,28 @@ eleventyExcludeFromCollections: true
         <div class="category__posts">            
             <div class="card__item">
                 <a class="card__link" href="/accordion/">
-                    <div class="card__cover">{% include "covers/accordion.njk" %}</div>
+                    <div class="card__cover">{% include "patterns/accordion.njk" %}</div>
                     <div class="card__title">Accordion</div>
                 </a>
             </div>
             <div class="card__item">
                 <a class="card__link" href="/arrow-buttons/">
-                    <div class="card__cover">{% include "covers/arrow-buttons.njk" %}</div>
+                    <div class="card__cover">{% include "patterns/arrow-buttons.njk" %}</div>
                     <div class="card__title">Arrow buttons</div>
                 </a>
             </div>
             <div class="card__item">
                 <a class="card__link" href="/avatar/">
-                    <div class="card__cover">{% include "covers/avatar.njk" %}</div>
+                    <div class="card__cover">{% include "patterns/avatar.njk" %}</div>
                     <div class="card__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>
+                </a>
+            </div>
         </div>
     </div>
 
diff --git a/pages/avatar-list/index.tsx b/pages/avatar-list/index.tsx
deleted file mode 100644
index 52719a0..0000000
--- a/pages/avatar-list/index.tsx
+++ /dev/null
@@ -1,114 +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';
-
-const Avatar: React.FC<{}> = ({ children }) => {
-    return (
-        <div
-            style={{
-                alignItems: 'center',
-                backgroundColor: '#BBB',
-                borderRadius: '9999px',
-                boxShadow: '0 0 0 4px #FFF',
-                color: '#FFF',
-                display: 'flex',
-                height: '48px',
-                justifyContent: 'center',
-                width: '48px',
-            }}
-        >
-            {children}
-        </div>
-    );
-};
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.AvatarList}>
-            <Head>
-                <meta name="description" content="Create an avatar list with CSS flexbox" />
-                <meta name="og:description" content="Create an avatar list with CSS flexbox" />
-                <meta name="twitter:description" content="Create an avatar list with CSS flexbox" />
-                <meta name="keywords" content="css avatar, css flexbox" />
-            </Head>
-            <BrowserFrame
-                html={`
-<div class="avatars">
-    <!-- Avatar item -->
-    <div class="avatars__item">
-        <div class="avatars__image">
-            <!-- Image -->
-            ...
-        </div>
-    </div>
-
-    <!-- Repeat other avatars -->
-    ...
-</div>
-`}
-                css={`
-                    .avatars {
-                        display: flex;
-                    }
-
-                    .avatars__item {
-                        /* Nagative margin make avatar overlap to previous one */
-                        margin-left: -4px;
-                    }
-
-                    .avatars__image {
-                        /* Add a white curve between avatars */
-                        box-shadow: 0 0 0 4px #fff;
-
-                        /* Center the content */
-                        align-items: center;
-                        display: flex;
-                        justify-content: center;
-
-                        /* Rounded border */
-                        border-radius: 9999px;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <div style={{ marginLeft: '-4px' }}>
-                        <Avatar />
-                    </div>
-                    <div style={{ marginLeft: '-4px' }}>
-                        <Avatar />
-                    </div>
-                    <div style={{ marginLeft: '-4px' }}>
-                        <Avatar />
-                    </div>
-                    <div style={{ marginLeft: '-4px' }}>
-                        <Avatar />
-                    </div>
-                    <div style={{ marginLeft: '-4px' }}>
-                        <Avatar>+5</Avatar>
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <Spacer size="extraLarge" />
-
-            <RelatedPatterns
-                patterns={[Pattern.Avatar, Pattern.Centering, Pattern.InitialAvatar, Pattern.PresenceIndicator]}
-            />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/avatar-list/Cover.tsx b/patterns/avatar-list/Cover.tsx
deleted file mode 100644
index 9f7f5b5..0000000
--- a/patterns/avatar-list/Cover.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '8px',
-                }}
-            >
-                {Array(3)
-                    .fill(null)
-                    .map((_, i) => {
-                        return (
-                            <div key={i} style={{ marginLeft: '-4px' }}>
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: '#BBB',
-                                        borderRadius: '9999px',
-                                        boxShadow: '0 0 0 2px #FFF',
-                                        color: '#FFF',
-                                        display: 'flex',
-                                        fontSize: '12px',
-                                        height: '24px',
-                                        justifyContent: 'center',
-                                        width: '24px',
-                                    }}
-                                >
-                                    {i + 1}
-                                </div>
-                            </div>
-                        );
-                    })}
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/blocks/_card.scss b/styles/blocks/_card.scss
index f9bbd28..f552a3c 100644
--- a/styles/blocks/_card.scss
+++ b/styles/blocks/_card.scss
@@ -13,6 +13,11 @@
     text-decoration: none;
 }
 .card__cover {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
     height: 8rem;
     width: 100%;
     margin-bottom: 0.5rem;
diff --git a/styles/index.scss b/styles/index.scss
index 87b9a0d..97c5548 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -10,10 +10,11 @@
 @import './blocks/nav';
 @import './blocks/post';
 
-// Cover
-@import './covers/accordion';
-@import './covers/arrow-buttons';
-@import './covers/avatar';
+// Patterns
+@import './patterns/accordion';
+@import './patterns/arrow-buttons';
+@import './patterns/avatar';
+@import './patterns/avatar-list';
 
 // Placeholders
 @import './placeholders/circle';
diff --git a/styles/covers/_accordion.scss b/styles/patterns/_accordion.scss
similarity index 100%
rename from styles/covers/_accordion.scss
rename to styles/patterns/_accordion.scss
diff --git a/styles/covers/_arrow-buttons.scss b/styles/patterns/_arrow-buttons.scss
similarity index 100%
rename from styles/covers/_arrow-buttons.scss
rename to styles/patterns/_arrow-buttons.scss
diff --git a/styles/patterns/_avatar-list.scss b/styles/patterns/_avatar-list.scss
new file mode 100644
index 0000000..8f9aa4a
--- /dev/null
+++ b/styles/patterns/_avatar-list.scss
@@ -0,0 +1,28 @@
+.avatars {
+    display: flex;
+    justify-content: center;
+
+    height: 2rem;
+    width: 100%;
+}
+.avatars__item {
+    margin-left: -0.25rem;
+}
+.avatars__image {
+    background-color: #BBB;
+    box-shadow: 0 0 0 0.25rem #FFF;
+    color: #FFF;
+    font-size: 0.75rem;
+
+    /* Rounded border */
+    border-radius: 50%;
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Size */
+    height: 2rem;
+    width: 2rem;
+}
\ No newline at end of file
diff --git a/styles/covers/_avatar.scss b/styles/patterns/_avatar.scss
similarity index 100%
rename from styles/covers/_avatar.scss
rename to styles/patterns/_avatar.scss