Merge pull request #90 from phuoc-ng/keyboard-shortcut

Add keyboard shortcut pattern

client/constants/Pattern.ts

@@ -26,6 +26,7 @@ enum Pattern {
     FloatingLabel = 'Floating label',
     FullScreenMenu = 'Full screen menu',
     HolyGrail = 'Holy grail',
+    KeyboardShortcut = 'Keyboard shortcut',
     InitialAvatar = 'Initial avatar',
     InputAddon = 'Input addon',
     MediaObject = 'Media object',

client/pages/ExplorePage.tsx

@@ -148,6 +148,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.FeatureComparison} />
                         <CoverCard pattern={Pattern.FeatureList} />
                         <CoverCard pattern={Pattern.FixedAtCorner} />
+                        <CoverCard pattern={Pattern.KeyboardShortcut} />
                         <CoverCard pattern={Pattern.InitialAvatar} />
                         <CoverCard pattern={Pattern.MediaObject} />
                         <CoverCard pattern={Pattern.OverlayPlayButton} />

client/patterns/keyboard-shortcut/Cover.tsx

@@ -0,0 +1,34 @@
+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',
+                }}
+            >
+                <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;

client/patterns/keyboard-shortcut/Details.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import Heading from '../../components/Heading';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+interface ItemProps {
+    action: string;
+    keys: string;
+}
+
+const Item: React.FC<ItemProps> = ({ action, keys }) => {
+    return (
+        <dl
+            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>
+        </dl>
+    );
+};
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Keyboard shortcut">
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    We use the native <code>kbd</code> tag to display the keyboard shortcut.
+                </div>
+                <BrowserFrame
+                    content={(
+                        <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>
+                    )}
+                    source={`
+<kbd style="
+    /* 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;
+">
+    ...
+</kbd>
+`}
+                />
+            </div>
+
+            <section>
+                <Heading title="Use cases" />
+
+                <div style={{ padding: '32px' }}>
+                    <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                        We can use this pattern with the <Link to="/patterns/property-list">property list</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>
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/property-list/Details.tsx

@@ -92,7 +92,7 @@ const Details: React.FC<{}> = () => {
             <section>
                 <Heading title="Use cases" />
 
-                <div style={{ padding: '64px', width: '500px' }}>
+                <div style={{ padding: '32px', width: '500px' }}>
                     <Item>
                         <dt>Name</dt>
                         <dd>WebAssembly in Action</dd>

public/sitemap.xml

@@ -1,10 +1,5 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9">
     <url><loc>https://csslayout.io/patterns</loc></url>
-    <url><loc>https://csslayout.io/patterns/holy-grail</loc></url>
-    <url><loc>https://csslayout.io/patterns/sidebar</loc></url>
-    <url><loc>https://csslayout.io/patterns/split-screen</loc></url>
-    <url><loc>https://csslayout.io/patterns/sticky-footer</loc></url>
-    <url><loc>https://csslayout.io/patterns/sticky-header</loc></url>
     <url><loc>https://csslayout.io/patterns/accordion</loc></url>
     <url><loc>https://csslayout.io/patterns/avatar</loc></url>
     <url><loc>https://csslayout.io/patterns/avatar-list</loc></url>
@@ -31,8 +26,10 @@
     <url><loc>https://csslayout.io/patterns/fixed-at-corner</loc></url>
     <url><loc>https://csslayout.io/patterns/floating-label</loc></url>
     <url><loc>https://csslayout.io/patterns/full-screen-menu</loc></url>
+    <url><loc>https://csslayout.io/patterns/holy-grail</loc></url>
     <url><loc>https://csslayout.io/patterns/initial-avatar</loc></url>
     <url><loc>https://csslayout.io/patterns/input-addon</loc></url>
+    <url><loc>https://csslayout.io/patterns/keyboard-shortcut</loc></url>
     <url><loc>https://csslayout.io/patterns/media-object</loc></url>
     <url><loc>https://csslayout.io/patterns/menu</loc></url>
     <url><loc>https://csslayout.io/patterns/modal</loc></url>
@@ -55,11 +52,15 @@
     <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>
+    <url><loc>https://csslayout.io/patterns/sidebar</loc></url>
     <url><loc>https://csslayout.io/patterns/simple-grid</loc></url>
     <url><loc>https://csslayout.io/patterns/slider</loc></url>
     <url><loc>https://csslayout.io/patterns/spin-button</loc></url>
     <url><loc>https://csslayout.io/patterns/split-navigation</loc></url>
+    <url><loc>https://csslayout.io/patterns/split-screen</loc></url>
     <url><loc>https://csslayout.io/patterns/stepper-input</loc></url>
+    <url><loc>https://csslayout.io/patterns/sticky-footer</loc></url>
+    <url><loc>https://csslayout.io/patterns/sticky-header</loc></url>
     <url><loc>https://csslayout.io/patterns/switch</loc></url>
     <url><loc>https://csslayout.io/patterns/tab</loc></url>
     <url><loc>https://csslayout.io/patterns/timeline</loc></url>