From e90743cb28edf192b52e60d22a92279988ceccc5 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Mon, 19 Sep 2022 20:49:37 +0700
Subject: [PATCH] feat: Keyboard shortcut

---
 .../_includes/patterns/keyboard-shortcut.njk  |   1 +
 contents/index.njk                            |   6 +
 contents/keyboard-shortcut.md                 |  35 +++++
 pages/keyboard-shortcut/index.tsx             | 122 ------------------
 patterns/keyboard-shortcut/Cover.tsx          |  34 -----
 styles/index.scss                             |   1 +
 styles/patterns/_keyboard-shortcut.scss       |  12 ++
 7 files changed, 55 insertions(+), 156 deletions(-)
 create mode 100644 contents/_includes/patterns/keyboard-shortcut.njk
 create mode 100644 contents/keyboard-shortcut.md
 delete mode 100644 pages/keyboard-shortcut/index.tsx
 delete mode 100644 patterns/keyboard-shortcut/Cover.tsx
 create mode 100644 styles/patterns/_keyboard-shortcut.scss

diff --git a/contents/_includes/patterns/keyboard-shortcut.njk b/contents/_includes/patterns/keyboard-shortcut.njk
new file mode 100644
index 0000000..ea257d5
--- /dev/null
+++ b/contents/_includes/patterns/keyboard-shortcut.njk
@@ -0,0 +1 @@
+<kbd class="keyboard-shortcut">⌘ + C</kbd>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 014611e..b7b2acc 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -169,6 +169,12 @@ eleventyExcludeFromCollections: true
                     <div class="pattern__title">Inverted corners</div>
                 </a>
             </div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/keyboard-shortcut/">
+                    <div class="pattern__cover">{% include "patterns/keyboard-shortcut.njk" %}</div>
+                    <div class="pattern__title">Keyboard shortcut</div>
+                </a>
+            </div>
             <div class="pattern__item">
                 <a class="pattern__link" href="/triangle-buttons/">
                     <div class="pattern__cover">{% include "patterns/triangle-buttons.njk" %}</div>
diff --git a/contents/keyboard-shortcut.md b/contents/keyboard-shortcut.md
new file mode 100644
index 0000000..37a9d07
--- /dev/null
+++ b/contents/keyboard-shortcut.md
@@ -0,0 +1,35 @@
+---
+layout: layouts/post.njk
+title: Keyboard shortcut
+description: Create a keyboard shortcut with CSS
+keywords: kbd tag, keyboard shortcut
+---
+
+We use the native `kbd` tag to display the keyboard shortcut.
+
+## HTML
+
+```html
+<kbd class="keyboard-shortcut">...</kbd>
+```
+
+## CSS
+
+```css
+.keyboard-shortcut {
+    /* Background and color */
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 0.25rem;
+    color: rgba(0, 0, 0, 0.7);
+
+    /* Bottom shadow */
+    box-shadow: rgba(0, 0, 0, 0.3) 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
+
+    /* Spacing */
+    padding: 0.25rem 0.5rem;
+}
+```
+
+{% demo %}
+{% include "patterns/keyboard-shortcut.njk" %}
+{% enddemo %}
diff --git a/pages/keyboard-shortcut/index.tsx b/pages/keyboard-shortcut/index.tsx
deleted file mode 100644
index c478027..0000000
--- a/pages/keyboard-shortcut/index.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import Link from 'next/link';
-import { Heading, Spacer } from '@1milligram/design';
-
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-interface ItemProps {
-    action: string;
-    keys: string;
-}
-
-const Item: React.FC<ItemProps> = ({ action, keys }) => {
-    return (
-        <div
-            style={{
-                alignItems: 'center',
-                display: 'flex',
-                justifyContent: 'space-between',
-                margin: 0,
-                padding: '4px 0',
-            }}
-        >
-            <div>{action}</div>
-            <kbd
-                style={{
-                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                    borderRadius: '4px',
-                    boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
-                    color: 'rgba(0, 0, 0, 0.7)',
-                    padding: '8px',
-                }}
-            >
-                {keys}
-            </kbd>
-        </div>
-    );
-};
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.KeyboardShortcut}>
-            <Head>
-                <meta name="description" content="Create a keyboard shortcut with CSS" />
-                <meta name="og:description" content="Create a keyboard shortcut with CSS" />
-                <meta name="twitter:description" content="Create a keyboard shortcut with CSS" />
-                <meta name="keywords" content="kbd tag, keyboard shortcut" />
-            </Head>
-            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                We use the native <code>kbd</code> tag to display the keyboard shortcut.
-            </div>
-            <BrowserFrame
-                html={`
-<kbd class="container">
-    ...
-</kbd>
-`}
-                css={`
-                    .container {
-                        /* Background and color */
-                        background-color: rgba(0, 0, 0, 0.1);
-                        border-radius: 4px;
-                        color: rgba(0, 0, 0, 0.7);
-
-                        /* Bottom shadow */
-                        box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
-
-                        /* Spacing */
-                        padding: 8px;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <kbd
-                        style={{
-                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                            borderRadius: '4px',
-                            boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
-                            color: 'rgba(0, 0, 0, 0.7)',
-                            padding: '8px',
-                        }}
-                    >
-                        ⌘ + C
-                    </kbd>
-                </div>
-            </BrowserFrame>
-            <Spacer size="extraLarge" />
-
-            <section>
-                <Heading level={2}>Use cases</Heading>
-
-                <div style={{ padding: '32px' }}>
-                    <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                        We can use this pattern with the{' '}
-                        <Link href="/property-list">
-                            <a>property list</a>
-                        </Link>{' '}
-                        pattern to create shortkey preferences as following:
-                    </div>
-                    <div style={{ width: '250px' }}>
-                        <Item action="Cut" keys="⌘ + X" />
-                        <Item action="Copy" keys="⌘ + C" />
-                        <Item action="Paste" keys="⌘ + V" />
-                    </div>
-                </div>
-            </section>
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/keyboard-shortcut/Cover.tsx b/patterns/keyboard-shortcut/Cover.tsx
deleted file mode 100644
index 75479b8..0000000
--- a/patterns/keyboard-shortcut/Cover.tsx
+++ /dev/null
@@ -1,34 +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',
-                }}
-            >
-                <kbd
-                    style={{
-                        backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                        borderRadius: '4px',
-                        boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
-                        color: 'rgba(0, 0, 0, 0.7)',
-                        padding: '8px',
-                    }}
-                >
-                    ⌘ + C
-                </kbd>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index 83d2707..ebf7009 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -37,6 +37,7 @@
 @import './patterns/full-background';
 @import './patterns/initial-avatar';
 @import './patterns/inverted-corners';
+@import './patterns/keyboard-shortcut';
 @import './patterns/triangle-buttons';
 @import './patterns/video-background';
 @import './patterns/voting';
diff --git a/styles/patterns/_keyboard-shortcut.scss b/styles/patterns/_keyboard-shortcut.scss
new file mode 100644
index 0000000..534cdc9
--- /dev/null
+++ b/styles/patterns/_keyboard-shortcut.scss
@@ -0,0 +1,12 @@
+.keyboard-shortcut {
+    /* Background and color */
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 0.25rem;
+    color: rgba(0, 0, 0, 0.7);
+
+    /* Bottom shadow */
+    box-shadow: rgba(0, 0, 0, 0.3) 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
+
+    /* Spacing */
+    padding: 0.25rem 0.5rem;
+}
\ No newline at end of file