From 14e196579639f6b01e9f2ccbd71a72c925e819f8 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Wed, 21 Sep 2022 09:09:00 +0700
Subject: [PATCH] feat: Custom checkbox button

---
 .../patterns/custom-checkbox-button.njk       |   9 +
 contents/custom-checkbox-button.md            |  65 +++++++
 contents/index.njk                            |   1 +
 pages/custom-checkbox-button/index.tsx        | 179 ------------------
 patterns/custom-checkbox-button/Cover.tsx     |  79 --------
 styles/blocks/_pattern.scss                   |   2 +
 styles/index.scss                             |   1 +
 styles/patterns/_custom-checkbox-button.scss  |  38 ++++
 8 files changed, 116 insertions(+), 258 deletions(-)
 create mode 100644 contents/_includes/patterns/custom-checkbox-button.njk
 create mode 100644 contents/custom-checkbox-button.md
 delete mode 100644 pages/custom-checkbox-button/index.tsx
 delete mode 100644 patterns/custom-checkbox-button/Cover.tsx
 create mode 100644 styles/patterns/_custom-checkbox-button.scss

diff --git a/contents/_includes/patterns/custom-checkbox-button.njk b/contents/_includes/patterns/custom-checkbox-button.njk
new file mode 100644
index 0000000..3458b7b
--- /dev/null
+++ b/contents/_includes/patterns/custom-checkbox-button.njk
@@ -0,0 +1,9 @@
+{% for i in range(0, 3) %}
+<label class="custom-checkbox-button">
+    <input type="checkbox" class="custom-checkbox-button__input" />
+    <div class="custom-checkbox-button__square">
+        <div class="custom-checkbox-button__checkbox custom-checkbox-button__checkbox--selected"></div>
+    </div>
+    {% rectangle %}
+</label>
+{% endfor %}
\ No newline at end of file
diff --git a/contents/custom-checkbox-button.md b/contents/custom-checkbox-button.md
new file mode 100644
index 0000000..7548973
--- /dev/null
+++ b/contents/custom-checkbox-button.md
@@ -0,0 +1,65 @@
+---
+layout: layouts/post.njk
+title: Custom checkbox button
+description: Create a custom checkbox button with CSS flexbox
+keywords: css checkbox, css flexbox
+---
+
+## HTML
+
+```html
+<label class="custom-checkbox-button">
+    <!-- The real checkbox -->
+    <input type="checkbox" class="custom-checkbox-button__input" />
+
+    <!-- The fake square -->
+    <div class="custom-checkbox-button__square">
+        <!-- The inner square -->
+        <div class="custom-checkbox-button__checkbox custom-checkbox-button__checkbox--selected"></div>
+    </div>
+
+    <!-- The text -->
+    ...
+</label>
+```
+
+## CSS
+
+```css
+.custom-checkbox-button {
+    /* Center the content horizontally */
+    align-items: center;
+    display: inline-flex;
+
+    /* Cursor */
+    cursor: pointer;
+}
+
+.custom-checkbox-button__input {
+    /* Hide it */
+    display: none;
+}
+
+.custom-checkbox-button__square {
+    border: 1px solid #d1d5db;
+    border-radius: 0.25rem;
+
+    /* Spacing */
+    margin-right: 0.5rem;
+    padding: 0.25rem;
+}
+
+.custom-checkbox-button__checkbox {
+    background-color: transparent;
+    border-radius: 0.25rem;
+    height: 1rem;
+    width: 1rem;
+}
+
+.custom-checkbox-button__checkbox--selected {
+    /* For selected checkbox */
+    background-color: #3b82f6;
+}
+```
+
+{% demo %}{% include "patterns/custom-checkbox-button.njk" %}{% enddemo %}
diff --git a/contents/index.njk b/contents/index.njk
index a1ad7db..6133ffd 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -89,6 +89,7 @@ eleventyExcludeFromCollections: true
         <div class="category__posts">
             {% pattern "Button with icon" %}{% include "patterns/button-with-icon.njk" %}{% endpattern %}
             {% pattern "Chip" %}{% include "patterns/chip.njk" %}{% endpattern %}
+            {% pattern "Custom checkbox button" %}{% include "patterns/custom-checkbox-button.njk" %}{% endpattern %}
         </div>
     </div>
 
diff --git a/pages/custom-checkbox-button/index.tsx b/pages/custom-checkbox-button/index.tsx
deleted file mode 100644
index 85e8a83..0000000
--- a/pages/custom-checkbox-button/index.tsx
+++ /dev/null
@@ -1,179 +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';
-import Rectangle from '../../placeholders/Rectangle';
-
-interface CheckboxProps {
-    isChecked: boolean;
-    value: string;
-}
-
-const Details: React.FC<{}> = () => {
-    const Checkbox: React.FC<CheckboxProps> = ({ isChecked, value, children }) => {
-        const [checked, setChecked] = React.useState(isChecked);
-        const click = () => setChecked((c) => !c);
-
-        return (
-            <label
-                htmlFor="custom-checkbox-button"
-                style={{
-                    alignItems: 'center',
-                    cursor: 'pointer',
-                    display: 'inline-flex',
-                }}
-            >
-                <input
-                    id="custom-checkbox-button"
-                    type="checkbox"
-                    name="option"
-                    value={value}
-                    checked={checked}
-                    style={{ display: 'none' }}
-                    onChange={click}
-                />
-                <div
-                    style={{
-                        border: '1px solid #d1d5db',
-                        borderRadius: '4px',
-                        marginRight: '8px',
-                        padding: '4px',
-                    }}
-                >
-                    <div
-                        style={{
-                            backgroundColor: checked ? '#00449E' : 'transparent',
-                            borderRadius: '4px',
-                            height: '16px',
-                            width: '16px',
-                        }}
-                    />
-                </div>
-                {children}
-            </label>
-        );
-    };
-
-    return (
-        <PatternLayout pattern={Pattern.CustomCheckboxButton}>
-            <Head>
-                <meta name="description" content="Create a custom checkbox button with CSS flexbox" />
-                <meta name="og:description" content="Create a custom checkbox button with CSS flexbox" />
-                <meta name="twitter:description" content="Create a custom checkbox button with CSS flexbox" />
-                <meta name="keywords" content="css checkbox, css flexbox" />
-            </Head>
-            <BrowserFrame
-                html={`
-<label class="label">
-    <!-- The real checkbox -->
-    <input type="checkbox" class="label__input" />
-
-    <!-- The fake square -->
-    <div class="label__square">
-        <!-- The inner square -->
-        <div class="label__checkbox label__square--selected"></div>
-    </div>
-
-    <!-- The text -->
-    ...
-</div>
-`}
-                css={`
-                    .label {
-                        /* Center the content horizontally */
-                        align-items: center;
-                        display: inline-flex;
-
-                        /* Cursor */
-                        cursor: pointer;
-                    }
-
-                    .label__input {
-                        /* Hide it */
-                        display: none;
-                    }
-
-                    .label__square {
-                        border: 1px solid #d1d5db;
-                        border-radius: 4px;
-
-                        /* Spacing */
-                        margin-right: 8px;
-                        padding: 4px;
-                    }
-
-                    .label__checkbox {
-                        background-color: transparent;
-                        border-radius: 4px;
-                        height: 16px;
-                        width: 16px;
-                    }
-
-                    .label__checkbox--selected {
-                        /* For selected checkbox */
-                        background-color: #00449e;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <div style={{ width: '200px' }}>
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'inline-flex',
-                                marginBottom: '16px',
-                            }}
-                        >
-                            <Checkbox value="1" isChecked={false}>
-                                <div style={{ width: '100px' }}>
-                                    <Rectangle />
-                                </div>
-                            </Checkbox>
-                        </div>
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'inline-flex',
-                                marginBottom: '16px',
-                            }}
-                        >
-                            <Checkbox value="2" isChecked={true}>
-                                <div style={{ width: '200px' }}>
-                                    <Rectangle />
-                                </div>
-                            </Checkbox>
-                        </div>
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'inline-flex',
-                            }}
-                        >
-                            <Checkbox value="3" isChecked={false}>
-                                <div style={{ width: '150px' }}>
-                                    <Rectangle />
-                                </div>
-                            </Checkbox>
-                        </div>
-                    </div>
-                </div>
-            </BrowserFrame>
-            <Spacer size="extraLarge" />
-            <RelatedPatterns patterns={[Pattern.CustomRadioButton, Pattern.RadioButtonGroup]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/custom-checkbox-button/Cover.tsx b/patterns/custom-checkbox-button/Cover.tsx
deleted file mode 100644
index 10fb063..0000000
--- a/patterns/custom-checkbox-button/Cover.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-import Rectangle from '../../placeholders/Rectangle';
-import Square from '../../placeholders/Square';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '8px',
-                }}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        marginBottom: '8px',
-                        width: '100%',
-                    }}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            border: '1px solid #d1d5db',
-                            borderRadius: '4px',
-                            display: 'flex',
-                            height: '24px',
-                            justifyContent: 'center',
-                            marginRight: '8px',
-                            padding: '4px',
-                            width: '24px',
-                        }}
-                    >
-                        <Square backgroundColor="transparent" />
-                    </div>
-                    <div style={{ flex: 1 }}>
-                        <Rectangle />
-                    </div>
-                </div>
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        marginBottom: '8px',
-                        width: '100%',
-                    }}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            border: '1px solid #d1d5db',
-                            borderRadius: '4px',
-                            display: 'flex',
-                            height: '24px',
-                            justifyContent: 'center',
-                            marginRight: '8px',
-                            padding: '4px',
-                            width: '24px',
-                        }}
-                    >
-                        <Square backgroundColor="#00449E" />
-                    </div>
-                    <div style={{ flex: 1 }}>
-                        <Rectangle />
-                    </div>
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/blocks/_pattern.scss b/styles/blocks/_pattern.scss
index 3423254..014270e 100644
--- a/styles/blocks/_pattern.scss
+++ b/styles/blocks/_pattern.scss
@@ -16,6 +16,8 @@
     flex-direction: column;
     justify-content: center;
 
+    pointer-events: none;
+
     height: 8rem;
     width: 100%;
     margin-bottom: 0.5rem;
diff --git a/styles/index.scss b/styles/index.scss
index 61d331f..43299e0 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -26,6 +26,7 @@
 @import './patterns/cookie-banner';
 @import './patterns/corner-ribbon';
 @import './patterns/curved-background';
+@import './patterns/custom-checkbox-button';
 @import './patterns/diagonal-section';
 @import './patterns/docked-at-corner';
 @import './patterns/dot-leader';
diff --git a/styles/patterns/_custom-checkbox-button.scss b/styles/patterns/_custom-checkbox-button.scss
new file mode 100644
index 0000000..db52b0a
--- /dev/null
+++ b/styles/patterns/_custom-checkbox-button.scss
@@ -0,0 +1,38 @@
+.custom-checkbox-button {
+    /* Center the content horizontally */
+    align-items: center;
+    display: inline-flex;
+
+    /* Cursor */
+    cursor: pointer;
+
+    /* Demo */
+    margin: 0.25rem 0;
+    width: 8rem;
+}
+
+.custom-checkbox-button__input {
+    /* Hide it */
+    display: none;
+}
+
+.custom-checkbox-button__square {
+    border: 1px solid #d1d5db;
+    border-radius: 0.25rem;
+
+    /* Spacing */
+    margin-right: 0.5rem;
+    padding: 0.25rem;
+}
+
+.custom-checkbox-button__checkbox {
+    background-color: transparent;
+    border-radius: 0.25rem;
+    height: 1rem;
+    width: 1rem;
+}
+
+.custom-checkbox-button__checkbox--selected {
+    /* For selected checkbox */
+    background-color: #3b82f6;
+}
\ No newline at end of file