Merge pull request #71 from phuoc-ng/radio-group

Add radio button group

client/constants/Pattern.ts

@@ -35,6 +35,7 @@ enum Pattern {
     ProgressBar = 'Progress bar',
     QuestionsAndAnswers = 'Questions and answers',
     RadialProgressBar = 'Radial progress bar',
+    RadioButtonGroup = 'Radio button group',
     RadioSwitch = 'Radio switch',
     Rating = 'Rating',
     Ribbon = 'Ribbon',

client/pages/ExplorePage.tsx

@@ -118,6 +118,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.ProgressBar} />
                         <CoverCard pattern={Pattern.QuestionsAndAnswers} />
                         <CoverCard pattern={Pattern.RadialProgressBar} />
+                        <CoverCard pattern={Pattern.RadioButtonGroup} />
                         <CoverCard pattern={Pattern.RadioSwitch} />
                         <CoverCard pattern={Pattern.Rating} />
                         <CoverCard pattern={Pattern.Ribbon} />

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

@@ -151,7 +151,7 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
-            <RelatedPatterns patterns={[Pattern.CustomRadioButton]} />
+            <RelatedPatterns patterns={[Pattern.CustomRadioButton, Pattern.RadioButtonGroup]} />
         </DetailsLayout>
     );
 };

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

@@ -154,7 +154,7 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
-            <RelatedPatterns patterns={[Pattern.CustomCheckboxButton]} />
+            <RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.RadioButtonGroup]} />
         </DetailsLayout>
     );
 };

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

@@ -0,0 +1,51 @@
+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',
+                }}
+            >
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        display: 'flex',
+                        height: '24px',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: '#00449E',
+                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                            flex: 1,
+                        }}
+                    />
+                    <div
+                        style={{
+                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                            flex: 1,
+                        }}
+                    />
+                    <div
+                        style={{
+                            flex: 1,
+                        }}
+                    />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

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

@@ -0,0 +1,143 @@
+import React, { useState } from 'react';
+
+import './radioButtonGroup.css';
+
+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 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',
+                    backgroundColor: value === selectedValue ? '#00449E' : 'transparent',
+                    cursor: 'pointer',
+                    display: 'inline-flex',
+                    padding: '8px',
+                }}
+            >
+                <input
+                    type="radio"
+                    name="option"
+                    value={value}
+                    style={{ display: 'none' }}
+                    onChange={click}
+                />
+                {children}
+            </label>
+        );
+    };
+
+    return (
+        <DetailsLayout title="Radio button group">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                className="p-radio-button-group"
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                    height: '32px',
+                                }}
+                            >
+                                <Radio value='1'>
+                                    <div style={{ width: '80px' }}><Rectangle /></div>
+                                </Radio>
+                                <Radio value='2'>
+                                    <div style={{ width: '120px' }}><Rectangle /></div>
+                                </Radio>
+                                <Radio value='3'>
+                                    <div style={{ width: '100px' }}><Rectangle /></div>
+                                </Radio>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<style>
+.p-radio-button-group label {
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
+}
+
+/* Remove the right border from the last label */
+.p-radio-button-group label:last-child {
+    border-right-color: transparent;
+}
+</style>
+
+<div
+    class="p-radio-button-group"
+    style="
+        display: flex;
+
+        /* Border */
+        border: 1px solid rgba(0, 0, 0, 0.3);
+        border-radius: 4px;
+        height: 32px;
+    "
+>
+    <!-- Each radio item -->
+    <label style="
+        /* Center the content */
+        align-items: center;
+        display: inline-flex;
+
+        padding: 8px;
+
+        /* For selected radio */
+        background-color: #00449E;
+        color: #FFF;
+
+        /* For not selected radio */
+        background-color: transparent;
+        color: #CCC;
+    ">
+        <!-- The radio input -->
+        <input
+            type="radio"
+            style="
+                /* Hide it */
+                display: none;
+            "
+        />
+
+        <!-- The text -->
+        ...
+    </label>
+
+    <!-- Repeat other items -->
+    ...
+</div>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.CustomRadioButton]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/radio-button-group/radioButtonGroup.css

@@ -0,0 +1,6 @@
+.p-radio-button-group label {
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
+}
+.p-radio-button-group label:last-child {
+    border-right-color: transparent;
+}

public/sitemap.xml

@@ -40,6 +40,7 @@
     <url><loc>https://csslayout.io/patterns/property-list</loc></url>
     <url><loc>https://csslayout.io/patterns/questions-and-answers</loc></url>
     <url><loc>https://csslayout.io/patterns/radial-progress-bar</loc></url>
+    <url><loc>https://csslayout.io/patterns/radio-button-group</loc></url>
     <url><loc>https://csslayout.io/patterns/radio-switch</loc></url>
     <url><loc>https://csslayout.io/patterns/rating</loc></url>
     <url><loc>https://csslayout.io/patterns/ribbon</loc></url>