Merge pull request #69 from phuoc-ng/custom-radio

Add custom radio button

client/constants/Pattern.ts

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

client/layouts/Footer.tsx

@@ -27,6 +27,7 @@ const Footer: React.FC<{}> = () => {
                         listStyleType: 'none',
                         margin: 0,
                         padding: 0,
+                        width: '100%',
                     }}
                 >
                     <li style={{ alignItems: 'center', display: 'flex' }}>
@@ -42,14 +43,14 @@ const Footer: React.FC<{}> = () => {
                         </h3>
                         &#123;
                     </li>
-                    <ul style={{ listStyleType: 'none', margin: 0, padding: '0 24px' }}>
+                    <ul style={{ listStyleType: 'none', margin: 0, paddingLeft: '24px' }}>
-                        <li>
+                        <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
-                            css-layout,
+                            <div>css-layout,</div>
-                            <span style={{ color: 'rgba(0, 0, 0, 0.3)', marginLeft: '16px' }}>
+                            <div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
                                 /&#42; You are here &#42;/
-                            </span>
+                            </div>
                         </li>
-                        <li>
+                        <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
                             <a
                                 href="https://formvalidation.io"
                                 style={{ textDecoration: 'none' }}
@@ -58,8 +59,11 @@ const Footer: React.FC<{}> = () => {
                             >
                                 form-validation,
                             </a>
+                            <div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
+                                /&#42; A JS validation library &#42;/
+                            </div>
                         </li>
-                        <li>
+                        <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
                             <a
                                 href="https://blur.page"
                                 style={{ textDecoration: 'none' }}
@@ -68,8 +72,11 @@ const Footer: React.FC<{}> = () => {
                             >
                                 blur-page,
                             </a>
+                            <div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
+                                /&#42; Chrome and Firefox extensions &#42;/
+                            </div>
                         </li>
-                        <li>
+                        <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
                             <a
                                 href="https://react-pdf-viewer.dev"
                                 style={{ textDecoration: 'none' }}
@@ -78,6 +85,9 @@ const Footer: React.FC<{}> = () => {
                             >
                                 react-pdf-viewer,
                             </a>
+                            <div style={{ color: 'rgba(0, 0, 0, 0.3)' }}>
+                                /&#42; A React component &#42;/
+                            </div>
                         </li>
                     </ul>
                     <li>&#125;</li>
@@ -114,7 +124,7 @@ const Footer: React.FC<{}> = () => {
                         </h3>
                         &#123;
                     </li>
-                    <ul style={{ listStyleType: 'none', margin: 0, padding: '0 24px' }}>
+                    <ul style={{ listStyleType: 'none', margin: 0, paddingLeft: '24px' }}>
                         <li style={{ alignItems: 'center', display: 'flex' }}>
                             <div>twitter:</div>
                             <a

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.CustomRadioButton} />
                         <CoverCard pattern={Pattern.DockedAtCorner} />
                         <CoverCard pattern={Pattern.DotLeader} />
                         <CoverCard pattern={Pattern.DotNavigation} />

client/patterns/avatar-list/Details.tsx

@@ -58,7 +58,7 @@ const Details: React.FC<{}> = () => {
             /* Add a white curve between avatars */
             box-shadow: 0 0 0 4px #FFF;
 
-            /* Content is centered */
+            /* Center the content */
             align-items: center;
             display: flex;
             justify-content: center;

client/patterns/badge/Details.tsx

@@ -39,7 +39,7 @@ const Details: React.FC<{}> = () => {
                     )}
                     source={`
 <div style="
-    /* Content is centered */
+    /* Center the content */
     align-items: center;
     display: flex;
     justify-content: center;

client/patterns/button-with-icon/Details.tsx

@@ -41,7 +41,7 @@ const Details: React.FC<{}> = () => {
                     )}
                     source={`
 <button style="
-    /* Content is centered */
+    /* Center the content */
     align-items: center;
     display: flex;
     flex-direction: row;

client/patterns/circular-navigation/Details.tsx

@@ -104,7 +104,7 @@ const Details: React.FC<{}> = () => {
             */
             transform: rotate(-0deg);
 
-            /* Content is centered */
+            /* Center the content */
             align-items: center;
             display: flex;
             justify-content: center;

client/patterns/cookie-banner/Details.tsx

@@ -53,7 +53,7 @@ const Details: React.FC<{}> = () => {
     position: fixed;
     width: 100%;
 
-    /* Content is centered */
+    /* Center the content */
     align-items: center;
     display: flex;
     justify-content: center;

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

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import Circle from '../../placeholders/Circle';
+import Frame from '../../placeholders/Frame';
+import Rectangle from '../../placeholders/Rectangle';
+
+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: '9999px',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            marginRight: '8px',
+                            padding: '4px',
+                        }}
+                    >
+                        <Circle />
+                    </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: '9999px',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            marginRight: '8px',
+                            padding: '4px',
+                        }}
+                    >
+                        <Circle backgroundColor='transparent' />
+                    </div>
+                    <div style={{ flex: 1 }}>
+                        <Rectangle />
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

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

@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+interface RadioProps {
+    value: string;
+}
+
+const Details: React.FC<{}> = () => {
+    const [selectedValue, setSelectedValue] = useState('1');
+
+    const Radio: React.FC<RadioProps> = ({ value, children }) => {
+        const click = () => setSelectedValue(value);
+
+        return (
+            <label
+                style={{
+                    alignItems: 'center',
+                    cursor: 'pointer',
+                    display: 'inline-flex',
+                }}
+            >
+                <input
+                    type="radio"
+                    name="option"
+                    value={value}
+                    style={{ display: 'none' }}
+                    onChange={click}
+                />
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '9999px',
+                        marginRight: '8px',
+                        padding: '4px',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: value === selectedValue
+                                ? 'rgba(0, 0, 0, 0.3)'
+                                : 'transparent',
+                            borderRadius: '9999px',
+                            height: '16px',
+                            width: '16px',
+                        }}
+                    />
+                </div>
+                {children}
+            </label>
+        );
+    };
+
+    return (
+        <DetailsLayout title="Custom radio 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',
+                                    }}
+                                >
+                                    <Radio value='1'>
+                                        <div style={{ width: '100px' }}><Rectangle /></div>
+                                    </Radio>
+                                </div>
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'inline-flex',
+                                        marginBottom: '16px',
+                                    }}
+                                >
+                                    <Radio value='2'>
+                                        <div style={{ width: '200px' }}><Rectangle /></div>
+                                    </Radio>
+                                </div>
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'inline-flex',
+                                    }}
+                                >
+                                    <Radio value='3'>
+                                        <div style={{ width: '150px' }}><Rectangle /></div>
+                                    </Radio>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<label style="
+    /* Center the content horizontally */
+    align-items: center;
+    display: inline-flex;
+
+    /* Cursor */
+    cursor: pointer;
+">
+    <!-- The real radio -->
+    <input
+        type="radio"
+        style="
+            /* Hide it */
+            display: none;
+        "
+    />
+
+    <!-- The fake circle -->
+    <div style="
+        /* Rounded border */
+        border: 1px solid rgba(0, 0, 0, 0.3);
+        border-radius: 9999px;
+
+        /* Spacing */
+        margin-right: 8px;
+        padding: 4px;
+    ">
+        <!-- The inner circle -->
+        <div style="
+            /* Rounded border */
+            border-radius: 9999px;
+            height: 16px;
+            width: 16px;
+
+            /* For selected radio */
+            background-color: rgba(0, 0, 0, 0.3);
+
+            /* For not selected radio */
+            background-color: transparent;
+        " />
+    </div>
+
+    <!-- The text -->
+    ...
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/docked-at-corner/Details.tsx

@@ -59,7 +59,7 @@ const Details: React.FC<{}> = () => {
         top: 0;
         transform: translate(50%, -50%);
 
-        /* Content is centered */
+        /* Center the content */
         align-items: center;
         display: flex;
         justify-content: center;

client/patterns/dot-leader/Details.tsx

@@ -66,7 +66,7 @@ const Details: React.FC<{}> = () => {
                     )}
                     source={`
 <div style="
-    /* Content is centered */
+    /* Center the content */
     align-items: center;
     display: flex;
     justify-content: center;

client/patterns/dot-navigation/Details.tsx

@@ -63,7 +63,7 @@ const Details: React.FC<{}> = () => {
                     )}
                     source={`
 <ul style="
-    /* Content is centered */
+    /* Center the content */
     align-items: center;
     display: flex;
     justify-content: center;

client/patterns/drop-area/Details.tsx

@@ -40,7 +40,7 @@ const Details: React.FC<{}> = () => {
                     )}
                     source={`
 <div style="
-    /* Content is centered */
+    /* Center the content */
     align-items: center;
     display: flex;
     justify-content: center;

client/patterns/full-screen-menu/Details.tsx

@@ -91,7 +91,7 @@ const Details: React.FC<{}> = () => {
     top: 0;
     width: 100%;
 
-    /* Content is centered */
+    /* Center the content */
     align-items: center;
     display: flex;
     justify-content: center;

client/patterns/input-addon/Details.tsx

@@ -144,7 +144,7 @@ const Details: React.FC<{}> = () => {
 ">
     <!-- Add-on -->
     <div style="
-        /* Content is centered */
+        /* Center the content */
         align-items: center;
         display: flex;
         justify-content: center;
@@ -174,7 +174,7 @@ const Details: React.FC<{}> = () => {
 
     <!-- Add-on -->
     <div style="
-        /* Content is centered */
+        /* Center the content */
         align-items: center;
         display: flex;
         justify-content: center;
@@ -192,7 +192,7 @@ const Details: React.FC<{}> = () => {
 ">
     <!-- Add-on -->
     <div style="
-        /* Content is centered */
+        /* Center the content */
         align-items: center;
         display: flex;
         justify-content: center;
@@ -208,7 +208,7 @@ const Details: React.FC<{}> = () => {
 
     <!-- Add-on -->
     <div style="
-        /* Content is centered */
+        /* Center the content */
         align-items: center;
         display: flex;
         justify-content: center;

client/patterns/overlay-play-button/Details.tsx

@@ -76,7 +76,7 @@ const Details: React.FC<{}> = () => {
         height: 100%;
         width: 100%;
 
-        /* Content is centered */
+        /* Center the content */
         align-items: center;
         display: flex;
         justify-content: center;

client/patterns/pagination/Details.tsx

@@ -108,7 +108,7 @@ const Details: React.FC<{}> = () => {
 ">
     <!-- Pagination item -->
     <div style="
-        /* Content is centered */
+        /* Center the content */
         align-items: center;
         display: flex;
         justify-content: center;
@@ -121,7 +121,7 @@ const Details: React.FC<{}> = () => {
 
     <!-- Don't set the right border for the last item -->
     <div style="
-        /* Content is centered */
+        /* Center the content */
         align-items: center;
         display: flex;
         justify-content: center;

client/patterns/progress-bar/Details.tsx

@@ -61,7 +61,7 @@ const Details: React.FC<{}> = () => {
     border-radius: 9999px;
 ">
     <div style="
-        /* Content is centered */
+        /* Center the content */
         align-items: center;
         display: flex;
         justify-content: center;

client/patterns/radial-progress-bar/Details.tsx

@@ -89,7 +89,7 @@ const Details: React.FC<{}> = () => {
 ">
     <!-- Show number of percentages -->
     <div style="
-        /* Content is centered */
+        /* Center the content */
         align-items: center;
         display: flex;
         justify-content: center;

client/patterns/rating/Details.tsx

@@ -30,7 +30,7 @@ const Details: React.FC<{}> = () => {
                     source={`
 <style>
 .p-rating {
-    /* Content is centered */
+    /* Center the content */
     align-items: center;
     display: flex;
     justify-content: center;

client/patterns/stepper-input/Details.tsx

@@ -99,7 +99,7 @@ const Details: React.FC<{}> = () => {
 ">
     <!-- Minus button -->
     <button style="
-        /* Content is centered */
+        /* Center the content */
         align-items: center;
         display: flex;
         justify-content: center;
@@ -119,7 +119,7 @@ const Details: React.FC<{}> = () => {
 
     <!-- Plus button -->
     <button style="
-        /* Content is centered */
+        /* Center the content */
         align-items: center;
         display: flex;
         justify-content: center;

client/patterns/tab/Details.tsx

@@ -73,7 +73,7 @@ const Details: React.FC<{}> = () => {
                     )}
                     source={`
 <div style="
-    /* Content is centered */
+    /* Center the content */
     align-items: center;
     display: flex;
     justify-content: center;

client/patterns/upload-button/Details.tsx

@@ -78,7 +78,7 @@ const Details: React.FC<{}> = () => {
     /* Used to position the input */
     position: relative;
 
-    /* Content is centered */
+    /* Center the content */
     align-items: center;
     display: flex;
 

client/patterns/wizard/Details.tsx

@@ -114,7 +114,7 @@ const Details: React.FC<{}> = () => {
         flex: 1;
     ">
         <div style="
-            /* Content is centered */
+            /* Center the content */
             align-items: center;
             display: flex;
             justify-content: center;
@@ -133,7 +133,7 @@ const Details: React.FC<{}> = () => {
 
             <!-- The step number -->
             <div style="
-                /* Content is centered */
+                /* Center the content */
                 align-items: center;
                 display: flex;
                 justify-content: center;

client/placeholders/Circle.tsx

@@ -1,14 +1,18 @@
 import React from 'react';
 
 interface CircleProps {
+    backgroundColor?: string;
     size?: number;
 }
 
-const Circle: React.FC<CircleProps> = ({ size = 16 }) => {
+const Circle: React.FC<CircleProps> = ({
+    backgroundColor = 'rgba(0, 0, 0, .3)',
+    size = 16,
+}) => {
     return (
         <div
             style={{
-                backgroundColor: 'rgba(0, 0, 0, .3)',
+                backgroundColor,
                 borderRadius: '9999px',
                 height: `${size}px`,
                 width: `${size}px`,

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-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>
     <url><loc>https://csslayout.io/patterns/dot-navigation</loc></url>