Merge pull request #70 from phuoc-ng/custom-checkbox-button

Add custom checkbox button

client/constants/Pattern.ts

@@ -8,6 +8,7 @@ enum Pattern {
     CircularNavigation = 'Circular navigation',
     CookieBanner = 'Cookie banner',
     CornerRibbon = 'Corner ribbon',
+    CustomCheckboxButton = 'Custom checkbox button',
     CustomRadioButton = 'Custom radio button',
     DockedAtCorner = 'Docked at corner',
     DotLeader = 'Dot leader',

client/pages/ExplorePage.tsx

@@ -92,6 +92,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.CircularNavigation} />
                         <CoverCard pattern={Pattern.CookieBanner} />
                         <CoverCard pattern={Pattern.CornerRibbon} />
+                        <CoverCard pattern={Pattern.CustomCheckboxButton} />
                         <CoverCard pattern={Pattern.CustomRadioButton} />
                         <CoverCard pattern={Pattern.DockedAtCorner} />
                         <CoverCard pattern={Pattern.DotLeader} />

client/patterns/custom-checkbox-button/Cover.tsx

@@ -0,0 +1,79 @@
+import 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 rgba(0, 0, 0, 0.3)',
+                            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 rgba(0, 0, 0, 0.3)',
+                            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;

client/patterns/custom-checkbox-button/Details.tsx

@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+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] = useState(isChecked);
+        const click = () => setChecked((c) => !c);
+
+        return (
+            <label
+                style={{
+                    alignItems: 'center',
+                    cursor: 'pointer',
+                    display: 'inline-flex',
+                }}
+            >
+                <input
+                    type="checkbox"
+                    name="option"
+                    value={value}
+                    checked={checked}
+                    style={{ display: 'none' }}
+                    onChange={click}
+                />
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        marginRight: '8px',
+                        padding: '4px',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: checked ? '#00449E' : 'transparent',
+                            borderRadius: '4px',
+                            height: '16px',
+                            width: '16px',
+                        }}
+                    />
+                </div>
+                {children}
+            </label>
+        );
+    };
+
+    return (
+        <DetailsLayout title="Custom checkbox button">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <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>
+                    )}
+                    source={`
+<label style="
+    /* Center the content horizontally */
+    align-items: center;
+    display: inline-flex;
+
+    /* Cursor */
+    cursor: pointer;
+">
+    <!-- The real checkbox -->
+    <input
+        type="checkbox"
+        style="
+            /* Hide it */
+            display: none;
+        "
+    />
+
+    <!-- The fake square -->
+    <div style="
+        border: 1px solid rgba(0, 0, 0, 0.3);
+        border-radius: 4px;
+
+        /* Spacing */
+        margin-right: 8px;
+        padding: 4px;
+    ">
+        <!-- The inner square -->
+        <div style="
+            border-radius: 4px;
+            height: 16px;
+            width: 16px;
+
+            /* For selected checkbox */
+            background-color: #00449E;
+
+            /* For not selected checkbox */
+            background-color: transparent;
+        " />
+    </div>
+
+    <!-- The text -->
+    ...
+</div>
+`}
+                />
+            </div>
+            <RelatedPatterns patterns={[Pattern.CustomRadioButton]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/custom-radio-button/Cover.tsx

@@ -36,7 +36,7 @@ const Cover: React.FC<{}> = () => {
                             padding: '4px',
                         }}
                     >
-                        <Circle />
+                        <Circle backgroundColor='#00449E' />
                     </div>
                     <div style={{ flex: 1 }}>
                         <Rectangle />

client/patterns/custom-radio-button/Details.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -40,7 +42,7 @@ const Details: React.FC<{}> = () => {
                     <div
                         style={{
                             backgroundColor: value === selectedValue
-                                ? 'rgba(0, 0, 0, 0.3)'
+                                ? '#00449E'
                                 : 'transparent',
                             borderRadius: '9999px',
                             height: '16px',
@@ -139,7 +141,7 @@ const Details: React.FC<{}> = () => {
             width: 16px;
 
             /* For selected radio */
-            background-color: rgba(0, 0, 0, 0.3);
+            background-color: #00449E;
 
             /* For not selected radio */
             background-color: transparent;
@@ -152,6 +154,7 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
+            <RelatedPatterns patterns={[Pattern.CustomCheckboxButton]} />
         </DetailsLayout>
     );
 };

client/placeholders/Square.tsx

@@ -1,14 +1,18 @@
 import React from 'react';
 
 interface SquareProps {
+    backgroundColor?: string;
     size?: number;
 }
 
-const Square: React.FC<SquareProps> = ({ size = 8 }) => {
+const Square: React.FC<SquareProps> = ({
+    backgroundColor = 'rgba(0, 0, 0, 0.3)',
+    size = 8,
+}) => {
     return (
         <div
             style={{
-                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                backgroundColor,
                 borderRadius: '4px',
                 height: '100%',
                 width: '100%',

public/sitemap.xml

@@ -14,6 +14,7 @@
     <url><loc>https://csslayout.io/patterns/circular-navigation</loc></url>
     <url><loc>https://csslayout.io/patterns/cookie-banner</loc></url>
     <url><loc>https://csslayout.io/patterns/corner-ribbon</loc></url>
+    <url><loc>https://csslayout.io/patterns/custom-checkbox-button</loc></url>
     <url><loc>https://csslayout.io/patterns/custom-radio-button</loc></url>
     <url><loc>https://csslayout.io/patterns/docked-at-corner</loc></url>
     <url><loc>https://csslayout.io/patterns/dot-leader</loc></url>