From 34755a49d9657e404fcee1cc5f10ed93da5bb419 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Fri, 10 Jun 2022 16:13:57 +0530
Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8=20new(selectors):=20create=20new?=
 =?UTF-8?q?=20component.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react-selectors/README.md            |  11 ++
 .../__tests__/react-selectors.test.js         |   7 +
 .../docs/react-selectors-demo.stories.js      |  92 +++++++++++
 .../docs/react-selectors-modifiers.stories.js | 155 ++++++++++++++++++
 .../react-selectors/lib/react-selectors.js    |  60 +++++++
 packages/react-selectors/package.json         |  30 ++++
 6 files changed, 355 insertions(+)
 create mode 100644 packages/react-selectors/README.md
 create mode 100644 packages/react-selectors/__tests__/react-selectors.test.js
 create mode 100644 packages/react-selectors/docs/react-selectors-demo.stories.js
 create mode 100644 packages/react-selectors/docs/react-selectors-modifiers.stories.js
 create mode 100644 packages/react-selectors/lib/react-selectors.js
 create mode 100644 packages/react-selectors/package.json

diff --git a/packages/react-selectors/README.md b/packages/react-selectors/README.md
new file mode 100644
index 00000000..fd7348b2
--- /dev/null
+++ b/packages/react-selectors/README.md
@@ -0,0 +1,11 @@
+# `@wpmudev/react-selectors`
+
+> TODO: description
+
+## Usage
+
+```
+const reactSelectors = require('@wpmudev/react-selectors');
+
+// TODO: DEMONSTRATE API
+```
diff --git a/packages/react-selectors/__tests__/react-selectors.test.js b/packages/react-selectors/__tests__/react-selectors.test.js
new file mode 100644
index 00000000..aecaee3b
--- /dev/null
+++ b/packages/react-selectors/__tests__/react-selectors.test.js
@@ -0,0 +1,7 @@
+'use strict';
+
+const reactSelectors = require('..');
+
+describe('@wpmudev/react-selectors', () => {
+    it('needs tests');
+});
diff --git a/packages/react-selectors/docs/react-selectors-demo.stories.js b/packages/react-selectors/docs/react-selectors-demo.stories.js
new file mode 100644
index 00000000..49c54161
--- /dev/null
+++ b/packages/react-selectors/docs/react-selectors-demo.stories.js
@@ -0,0 +1,92 @@
+import React from "react";
+import { Selectors } from "../lib/react-selectors";
+
+export default {
+	title: "Components/Selectors",
+	component: Selectors,
+	// parameters: {
+	// 	actions: {
+	// 		disabled: true,
+	// 	},
+	// 	notes: {
+	// 		disabled: true,
+	// 	},
+	// },
+};
+
+export const demo = args => <Selectors {...args} />;
+demo.storyName = 'Demo';
+demo.args = {
+	name: 'selectors',
+	columns: 'one',
+	content: [
+		{
+			id: "unique-id-1",
+			label: "Element text",
+			labelId: "label-id-1",
+			description: "Element description",
+			descriptionId: "description-id-1",
+			icon: "info",
+			vertical: true,
+		},
+		{
+			id: "unique-id-2",
+			label: "Element text",
+			labelId: "label-id-2",
+			description: "Element description",
+			descriptionId: "description-id-2",
+			icon: "info",
+			vertical: true,
+		},
+		{
+			id: "unique-id-3",
+			label: "Element text",
+			labelId: "label-id-3",
+			description: "Element description",
+			descriptionId: "description-id-3",
+			icon: "info",
+			vertical: true,
+			disabled: true,
+			isPro: true,
+		},
+		{
+			id: "unique-id-4",
+			label: "Element text",
+			labelId: "label-id-4",
+			description: "Element description",
+			descriptionId: "description-id-4",
+			icon: "info",
+			vertical: true,
+		}
+	],
+};
+demo.argTypes = {
+	name: {
+		description: "Name of the selectors",
+		table: {
+			type: { summary: "string" },
+		},
+		control: {
+			type: 'text',
+		},
+	},
+	columns: {
+		description: "Number of columns",
+		table: {
+			type: { summary: "string" },
+		},
+		control: {
+			type: 'select',
+			options: ['one', 'two', 'three', 'four', 'five'],
+		},
+	},
+	content: {
+		description: "Content of the selectors",
+		table: {
+			type: { summary: "array" },
+		},
+		control: {
+			type: 'array',
+		},
+	}
+};
\ No newline at end of file
diff --git a/packages/react-selectors/docs/react-selectors-modifiers.stories.js b/packages/react-selectors/docs/react-selectors-modifiers.stories.js
new file mode 100644
index 00000000..35a98761
--- /dev/null
+++ b/packages/react-selectors/docs/react-selectors-modifiers.stories.js
@@ -0,0 +1,155 @@
+import React from 'react';
+import { Selectors } from '../lib/react-selectors';
+
+export default {
+	title: 'Components/Selectors',
+	component: Selectors,
+	parameters: {
+		actions: {
+			disabled: true,
+		},
+		controls: {
+			disabled: true,
+		},
+		notes: {
+			disabled: true,
+		},
+		previewTabs: {
+			'storybook/docs/panel': {
+				hidden: true,
+			},
+		},
+	},
+	decorators: [
+		( Story ) => (
+			<div className="sui-box">
+				<div className="sui-box-body">
+					<Story />
+				</div>
+			</div>
+		),
+	],
+};
+
+const StoryTitle = ({ children }) => {
+	const customStyles = {
+		margin: 0,
+		marginBottom: 10 + 'px',
+		color: '#333',
+		fontSize: 14 + 'px',
+		lineHeight: 22 + 'px',
+	};
+
+	return (
+		<h2 style={ customStyles }>{ children }</h2>
+	);
+}
+
+const StoryDescription = ({ children }) => {
+	const customStyles = {
+		margin: 0,
+		marginBottom: 10 + 'px',
+	};
+
+	return (
+		<p className="sui-description" style={ customStyles }>
+			{ children }
+		</p>
+	);
+}
+
+const StoryCode = ({ spaceTop = 5, spaceBottom = 20, children }) => {
+	const customStyles = {
+		display: 'block',
+		margin: 0,
+		marginTop: spaceTop + 'px',
+		marginBottom: spaceBottom + 'px',
+		padding: 5 + 'px ' + 10 + 'px',
+	};
+
+	return (
+		<code style={ customStyles }>{ children }</code>
+	);
+}
+
+const StorySection = ({ title, description, code, code2, isDefault = false, isLast = false, children }) => {
+	return (
+		<>
+			{ title && '' !== title && (
+				<StoryTitle>{ title }{ isDefault && (
+					<span
+						className="sui-tag sui-tag-sm sui-tag-yellow"
+						style={ { marginLeft: 10 + 'px' } }
+						aria-hidden="true"
+					>Default</span>
+				)}</StoryTitle>
+			)}
+			{ description && '' !== description && (
+				<StoryDescription>{ description }</StoryDescription>
+			)}
+			{ code && '' !== code && (
+				<StoryCode { ... ( code2 && '' !== code2 ) && { spaceBottom: 5 } }>{ code }</StoryCode>
+			)}
+			{ code2 && '' !== code2 && (
+				<StoryCode>{ code2 }</StoryCode>
+			)}
+			{ children }
+			{ !isLast && <hr /> }
+		</>
+	);
+}
+
+const simpleContent = [
+	{
+		id: "unique-id-1",
+		label: "Element text",
+		labelId: "label-id-1",
+		description: "Element description",
+		descriptionId: "description-id-1",
+		icon: "info",
+		vertical: true,
+	},
+	{
+		id: "unique-id-2",
+		label: "Element text",
+		labelId: "label-id-2",
+		description: "Element description",
+		descriptionId: "description-id-2",
+		icon: "info",
+		vertical: true,
+	},
+	{
+		id: "unique-id-3",
+		label: "Element text",
+		labelId: "label-id-3",
+		description: "Element description",
+		descriptionId: "description-id-3",
+		icon: "info",
+		vertical: true,
+		disabled: true,
+		isPro: true,
+	},
+	{
+		id: "unique-id-4",
+		label: "Element text",
+		labelId: "label-id-4",
+		description: "Element description",
+		descriptionId: "description-id-4",
+		icon: "info",
+		vertical: true,
+	}
+];
+
+export const Simple = () => {
+	return (
+		<StorySection
+			title="Simple"
+			description="By default the box selectors are aligned horizontal, based on its icon + text position, and text is always left aligned."
+			code="&lt;Tabs tabs={tabsData} /&gt;"
+			isDefault={ true }
+			isLast={ true }>
+			<Selectors name="simple" content={simpleContent} />
+		</StorySection>
+	);
+};
+Simple.storyName = 'Simple Tabs';
\ No newline at end of file
diff --git a/packages/react-selectors/lib/react-selectors.js b/packages/react-selectors/lib/react-selectors.js
new file mode 100644
index 00000000..5da520d7
--- /dev/null
+++ b/packages/react-selectors/lib/react-selectors.js
@@ -0,0 +1,60 @@
+import React from 'react'
+
+const Selectors = ({
+    name,
+    columns = '',
+    content = [],
+}) => {
+    let classes = 'sui-box-selectors';
+    
+    switch (columns) {
+        case 'one':
+            classes += ' sui-box-selectors-col-1';
+            break;
+        case 'two':
+            classes += ' sui-box-selectors-col-2';
+            break;
+        case 'three':
+            classes += ' sui-box-selectors-col-3';
+            break;
+        case 'four':
+            classes += ' sui-box-selectors-col-4';
+            break;
+        case 'five':
+            classes += ' sui-box-selectors-col-5';
+            break;
+        default:
+            break;
+    }
+
+    return (
+        <div className={classes}>
+            <ul role="radiogroup">
+                {content.map((item, index) => (
+                    <li key={index}>
+                        <label 
+                            htmlFor={item.id} 
+                            className={`sui-box-selector ${item.disabled && ('sui-disabled')} ${item.vertical && ('sui-box-selector-vertical')}`}
+                        >
+                            <input type="radio" 
+                                name={name} 
+                                id={item.id} 
+                                aria-labelledby={item.labelId}
+                                aria-describedby={item.descriptionId}
+                                disabled={item.disabled ? true : false}
+                            />
+                            <span aria-hidden="true">
+                                {item.icon && (<span className={`sui-icon-${item.icon}`}></span>)}
+                                <span id={item.labelId} aria-hidden="true">{item.label}</span>
+                                {item.isPro && (<span className="sui-tag sui-tag-pro">Pro</span>)}
+                            </span>
+                            {item.description && (<span id={item.descriptionId} aria-hidden="true">{item.description}</span>)}
+                        </label>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    )
+}
+
+export { Selectors }
diff --git a/packages/react-selectors/package.json b/packages/react-selectors/package.json
new file mode 100644
index 00000000..6b5cc4d6
--- /dev/null
+++ b/packages/react-selectors/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@wpmudev/react-selectors",
+  "version": "1.0.0",
+  "description": "Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth is in ya face when ya hear the British cannons go / BOOM",
+  "keywords": [],
+  "author": "Pawan Kumar <pwnkumar201@gmail.com>",
+  "license": "ISC",
+  "main": "lib/react-selectors.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wpmudev/shared-ui-react.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "bugs": {
+    "url": "https://github.com/wpmudev/shared-ui-react/issues"
+  },
+  "homepage": "https://github.com/wpmudev/shared-ui-react#readme"
+}

From 2b0cd953607faa9fc1c4d1b175d8f1abf62af5ee Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Fri, 10 Jun 2022 17:56:16 +0530
Subject: [PATCH 2/3] =?UTF-8?q?=E2=9C=A8=20new(selectors):=20added=20diffe?=
 =?UTF-8?q?rent=20variations=20of=20selectors.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/react-selectors-demo.stories.js      |  14 +-
 .../docs/react-selectors-layouts.stories.js   | 250 ++++++++++++++++++
 .../docs/react-selectors-modifiers.stories.js | 219 +++++++++++++--
 .../react-selectors/lib/react-selectors.js    |   1 +
 4 files changed, 443 insertions(+), 41 deletions(-)
 create mode 100644 packages/react-selectors/docs/react-selectors-layouts.stories.js

diff --git a/packages/react-selectors/docs/react-selectors-demo.stories.js b/packages/react-selectors/docs/react-selectors-demo.stories.js
index 49c54161..97fe6eaf 100644
--- a/packages/react-selectors/docs/react-selectors-demo.stories.js
+++ b/packages/react-selectors/docs/react-selectors-demo.stories.js
@@ -18,34 +18,25 @@ export const demo = args => <Selectors {...args} />;
 demo.storyName = 'Demo';
 demo.args = {
 	name: 'selectors',
-	columns: 'one',
+	columns: 'three',
 	content: [
 		{
 			id: "unique-id-1",
 			label: "Element text",
 			labelId: "label-id-1",
-			description: "Element description",
-			descriptionId: "description-id-1",
 			icon: "info",
-			vertical: true,
 		},
 		{
 			id: "unique-id-2",
 			label: "Element text",
 			labelId: "label-id-2",
-			description: "Element description",
-			descriptionId: "description-id-2",
 			icon: "info",
-			vertical: true,
 		},
 		{
 			id: "unique-id-3",
 			label: "Element text",
 			labelId: "label-id-3",
-			description: "Element description",
-			descriptionId: "description-id-3",
 			icon: "info",
-			vertical: true,
 			disabled: true,
 			isPro: true,
 		},
@@ -53,10 +44,7 @@ demo.args = {
 			id: "unique-id-4",
 			label: "Element text",
 			labelId: "label-id-4",
-			description: "Element description",
-			descriptionId: "description-id-4",
 			icon: "info",
-			vertical: true,
 		}
 	],
 };
diff --git a/packages/react-selectors/docs/react-selectors-layouts.stories.js b/packages/react-selectors/docs/react-selectors-layouts.stories.js
new file mode 100644
index 00000000..f5957595
--- /dev/null
+++ b/packages/react-selectors/docs/react-selectors-layouts.stories.js
@@ -0,0 +1,250 @@
+import React from 'react';
+import { Selectors } from '../lib/react-selectors';
+
+export default {
+	title: 'Components/Selectors/Layouts',
+	component: Selectors,
+	parameters: {
+		actions: {
+			disabled: true,
+		},
+		controls: {
+			disabled: true,
+		},
+		notes: {
+			disabled: true,
+		},
+		previewTabs: {
+			'storybook/docs/panel': {
+				hidden: true,
+			},
+		},
+	},
+	decorators: [
+		( Story ) => (
+			<div className="sui-box">
+				<div className="sui-box-body">
+					<Story />
+				</div>
+			</div>
+		),
+	],
+};
+
+const StoryTitle = ({ children }) => {
+	const customStyles = {
+		margin: 0,
+		marginBottom: 10 + 'px',
+		color: '#333',
+		fontSize: 14 + 'px',
+		lineHeight: 22 + 'px',
+	};
+
+	return (
+		<h2 style={ customStyles }>{ children }</h2>
+	);
+}
+
+const StoryDescription = ({ children }) => {
+	const customStyles = {
+		margin: 0,
+		marginBottom: 10 + 'px',
+	};
+
+	return (
+		<p className="sui-description" style={ customStyles }>
+			{ children }
+		</p>
+	);
+}
+
+const StoryCode = ({ spaceTop = 5, spaceBottom = 20, children }) => {
+	const customStyles = {
+		display: 'block',
+		margin: 0,
+		marginTop: spaceTop + 'px',
+		marginBottom: spaceBottom + 'px',
+		padding: 5 + 'px ' + 10 + 'px',
+	};
+
+	return (
+		<code style={ customStyles }>{ children }</code>
+	);
+}
+
+const StorySection = ({ title, description, code, code2, isDefault = false, isLast = false, children }) => {
+	return (
+		<>
+			{ title && '' !== title && (
+				<StoryTitle>{ title }{ isDefault && (
+					<span
+						className="sui-tag sui-tag-sm sui-tag-yellow"
+						style={ { marginLeft: 10 + 'px' } }
+						aria-hidden="true"
+					>Default</span>
+				)}</StoryTitle>
+			)}
+			{ description && '' !== description && (
+				<StoryDescription>{ description }</StoryDescription>
+			)}
+			{ code && '' !== code && (
+				<StoryCode { ... ( code2 && '' !== code2 ) && { spaceBottom: 5 } }>{ code }</StoryCode>
+			)}
+			{ code2 && '' !== code2 && (
+				<StoryCode>{ code2 }</StoryCode>
+			)}
+			{ children }
+			{ !isLast && <hr /> }
+		</>
+	);
+}
+
+const content = [
+	{
+		id: "unique-id-1",
+		label: "Auto Col",
+		labelId: "label-id-1",
+		vertical: true,
+	},
+	{
+		id: "unique-id-2",
+		label: "Auto Col",
+		labelId: "label-id-2",
+		vertical: true,
+	},
+	{
+		id: "unique-id-3",
+		label: "Auto Col",
+		labelId: "label-id-3",
+		vertical: true,
+	},
+	{
+		id: "unique-id-4",
+		label: "Auto Col",
+		labelId: "label-id-4",
+		vertical: true,
+	},
+	{
+		id: "unique-id-5",
+		label: "Auto Col",
+		labelId: "label-id-5",
+		vertical: true,
+	},
+];
+
+const oneCol = [
+	{
+		id: "one-unique-id-1",
+		label: "One Column",
+		labelId: "one-label-id-1",
+		vertical: true,
+	},
+	{
+		id: "one-unique-id-2",
+		label: "One Column",
+		labelId: "one-label-id-2",
+		vertical: true,
+	},
+	{
+		id: "one-unique-id-3",
+		label: "One Column",
+		labelId: "one-label-id-3",
+		vertical: true,
+	},
+	{
+		id: "one-unique-id-4",
+		label: "One Column",
+		labelId: "one-label-id-4",
+		vertical: true,
+	},
+	{
+		id: "one-unique-id-5",
+		label: "One Column",
+		labelId: "one-label-id-5",
+		vertical: true,
+	},
+	{
+		id: "one-unique-id-6",
+		label: "One Column",
+		labelId: "one-label-id-6",
+		vertical: true,
+	},
+];
+
+export const auto = () => {
+	return (
+		<StorySection
+			title="Auto-Width Columns"
+			description="Not matter how many elements are, they all will be placed in one row."
+			code="&lt;Selectors name=&quot;autowidth&quot; content={content} /&gt;"
+			isLast={true}>
+			<Selectors name="autowidth" content={content} />
+		</StorySection>
+	);
+};
+auto.storyName = 'Auto Width';
+
+export const one = () => {
+	return (
+		<StorySection
+			title="1 Column"
+			description="The elements will occupy the full-width of the row."
+			code="&lt;Selectors name=&quot;one&quot; columns=&quot;one&quot; content={oneCol} /&gt;"
+			isLast={true}>
+			<Selectors name="one" columns="one" content={oneCol} />
+		</StorySection>
+	);
+};
+one.storyName = '1 Column';
+
+export const two = () => {
+	return (
+		<StorySection
+			title="2 Column"
+			description="The elements will have 50% width and will be placed a max of two elements per row."
+			code="&lt;Selectors name=&quot;two&quot; columns=&quot;two&quot; content={oneCol} /&gt;"
+			isLast={true}>
+			<Selectors name="two" columns="two" content={oneCol} />
+		</StorySection>
+	);
+};
+two.storyName = '2 Column';
+
+export const three = () => {
+	return (
+		<StorySection
+			title="3 Column"
+			description="Elements will ocuppy a third of a row, allowing a max of 3 elements to be placed per row."
+			code="&lt;Selectors name=&quot;three&quot; columns=&quot;three&quot; content={oneCol} /&gt;"
+			isLast={true}>
+			<Selectors name="three" columns="three" content={oneCol} />
+		</StorySection>
+	);
+};
+three.storyName = '3 Column';
+
+export const four = () => {
+	return (
+		<StorySection
+			title="4 Column"
+			description="Elements will ocuppy a fourth of a row, allowing a max of 4 elements to be placed per row."
+			code="&lt;Selectors name=&quot;four&quot; columns=&quot;four&quot; content={oneCol} /&gt;"
+			isLast={true}>
+			<Selectors name="four" columns="four" content={oneCol} />
+		</StorySection>
+	);
+};
+four.storyName = '4 Column';
+
+export const five = () => {
+	return (
+		<StorySection
+			title="5 Column"
+			description="Elements will ocuppy a fifth of a row, allowing a max of 5 elements to be placed per row."
+			code="&lt;Selectors name=&quot;five&quot; columns=&quot;five&quot; content={oneCol} /&gt;"
+			isLast={true}>
+			<Selectors name="five" columns="five" content={oneCol} />
+		</StorySection>
+	);
+};
+five.storyName = '5 Column';
diff --git a/packages/react-selectors/docs/react-selectors-modifiers.stories.js b/packages/react-selectors/docs/react-selectors-modifiers.stories.js
index 35a98761..ed705069 100644
--- a/packages/react-selectors/docs/react-selectors-modifiers.stories.js
+++ b/packages/react-selectors/docs/react-selectors-modifiers.stories.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Selectors } from '../lib/react-selectors';
 
 export default {
-	title: 'Components/Selectors',
+	title: 'Components/Selectors/Design',
 	component: Selectors,
 	parameters: {
 		actions: {
@@ -102,54 +102,217 @@ const StorySection = ({ title, description, code, code2, isDefault = false, isLa
 const simpleContent = [
 	{
 		id: "unique-id-1",
-		label: "Element text",
+		label: "Checked",
 		labelId: "label-id-1",
-		description: "Element description",
-		descriptionId: "description-id-1",
 		icon: "info",
-		vertical: true,
+		checked: true,
 	},
 	{
 		id: "unique-id-2",
-		label: "Element text",
+		label: "Unchecked",
 		labelId: "label-id-2",
-		description: "Element description",
-		descriptionId: "description-id-2",
 		icon: "info",
-		vertical: true,
 	},
 	{
 		id: "unique-id-3",
-		label: "Element text",
+		label: "Unchecked",
 		labelId: "label-id-3",
-		description: "Element description",
-		descriptionId: "description-id-3",
+		icon: "info",
+	},
+	{
+		id: "unique-id-4",
+		label: "Unchecked",
+		labelId: "label-id-4",
+		icon: "info",
+	},
+	{
+		id: "unique-id-5",
+		label: "Unchecked",
+		labelId: "label-id-5",
+		icon: "info",
+		disabled: true,
+		isPro: true,
+	},
+];
+
+const simpleVerticalContent = [
+	{
+		id: "vertical-unique-id-1",
+		label: "Checked",
+		labelId: "vertical-label-id-1",
+		checked: true,
+		icon: "info",
+		vertical: true,
+	},
+	{
+		id: "vertical-unique-id-2",
+		label: "Unchecked",
+		labelId: "vertical-label-id-2",
+		icon: "info",
+		vertical: true,
+	},
+	{
+		id: "vertical-unique-id-3",
+		label: "Unchecked",
+		labelId: "vertical-label-id-3",
+		icon: "info",
+		vertical: true,
+	},
+	{
+		id: "vertical-unique-id-4",
+		label: "Unchecked",
+		labelId: "vertical-label-id-4",
+		icon: "info",
+		vertical: true,
+	},
+	{
+		id: "vertical-unique-id-5",
+		label: "Unchecked",
+		labelId: "vertical-label-id-5",
 		icon: "info",
 		vertical: true,
 		disabled: true,
 		isPro: true,
 	},
+];
+
+const compoundContent = [
 	{
-		id: "unique-id-4",
-		label: "Element text",
-		labelId: "label-id-4",
-		description: "Element description",
-		descriptionId: "description-id-4",
+		id: "compound-unique-id-1",
+		label: "Checked",
+		labelId: "compound-label-id-1",
 		icon: "info",
+		description: "This is a description",
+		descriptionId: "compound-description-id-1",
+		checked: true,
+	},
+	{
+		id: "compound-unique-id-2",
+		label: "Unchecked",
+		labelId: "compound-label-id-2",
+		icon: "info",
+		description: "This is a description",
+		descriptionId: "compound-description-id-2",
+	},
+	{
+		id: "compound-unique-id-3",
+		label: "Unchecked",
+		labelId: "compound-label-id-3",
+		icon: "info",
+		description: "This is a description",
+		descriptionId: "compound-description-id-3",
+	},
+	{
+		id: "compound-unique-id-4",
+		label: "Unchecked",
+		labelId: "compound-label-id-4",
+		icon: "info",
+		description: "This is a description",
+		descriptionId: "compound-description-id-4",
+	},
+	{
+		id: "compound-unique-id-5",
+		label: "Unchecked",
+		labelId: "compound-label-id-5",
+		icon: "info",
+		description: "This is a description",
+		descriptionId: "compound-description-id-5",
+		disabled: true,
+		isPro: true,
+	},
+];
+
+const compoundVerticalContent = [
+	{
+		id: "vertical-compound-unique-id-1",
+		label: "Checked",
+		labelId: "vertical-compound-label-id-1",
+		icon: "info",
+		description: "This is a description",
+		descriptionId: "vertical-compound-description-id-1",
+		checked: true,
+		vertical: true,
+	},
+	{
+		id: "vertical-compound-unique-id-2",
+		label: "Unchecked",
+		labelId: "vertical-compound-label-id-2",
+		icon: "info",
+		description: "This is a description",
+		descriptionId: "vertical-compound-description-id-2",
 		vertical: true,
-	}
+	},
+	{
+		id: "vertical-compound-unique-id-3",
+		label: "Unchecked",
+		labelId: "vertical-compound-label-id-3",
+		icon: "info",
+		description: "This is a description",
+		descriptionId: "vertical-compound-description-id-3",
+		vertical: true,
+	},
+	{
+		id: "vertical-compound-unique-id-4",
+		label: "Unchecked",
+		labelId: "vertical-compound-label-id-4",
+		icon: "info",
+		description: "This is a description",
+		descriptionId: "vertical-compound-description-id-4",
+		vertical: true,
+	},
+	{
+		id: "vertical-compound-unique-id-5",
+		label: "Unchecked",
+		labelId: "vertical-compound-label-id-5",
+		icon: "info",
+		description: "This is a description",
+		descriptionId: "vertical-compound-description-id-5",
+		disabled: true,
+		isPro: true,
+		vertical: true,
+	},
 ];
 
-export const Simple = () => {
+export const Default = () => {
+	return (
+		<>
+			<StorySection
+				title="Simple"
+				description="By default the box selectors are aligned horizontal, based on its icon + text position, and text is always left aligned."
+				code="&lt;Selectors name=&quot;simple&quot; columns=&quot;three&quot; content={simpleContent} /&gt;"
+				isDefault={ true }>
+				<Selectors name="simple" columns="three" content={simpleContent} />
+			</StorySection>
+			<StorySection
+				title="Compound"
+				description="There are some cases where you gonna need to include a description for the items."
+				code="&lt;Selectors name=&quot;compound&quot; columns=&quot;three&quot; content={compoundContent} /&gt;"
+				isLast={ true }>
+				<Selectors name="compound" columns="three" content={compoundContent} />
+			</StorySection>
+		</>
+	);
+};
+Default.storyName = 'Default';
+
+export const Vertical = () => {
 	return (
-		<StorySection
-			title="Simple"
-			description="By default the box selectors are aligned horizontal, based on its icon + text position, and text is always left aligned."
-			code="&lt;Tabs tabs={tabsData} /&gt;"
-			isDefault={ true }
-			isLast={ true }>
-			<Selectors name="simple" content={simpleContent} />
-		</StorySection>
+		<>
+			<StorySection
+				title="Simple"
+				description="You can vertical align box selectors where its text will always be center aligned and icon will be placed on top of text."
+				code="&lt;Selectors name=&quot;vertical&quot; columns=&quot;three&quot; content={simpleVerticalContent} /&gt;"
+				isDefault={true}>
+				<Selectors name="vertical" columns="three" content={simpleVerticalContent} />
+			</StorySection>
+			<StorySection
+				title="Compound"
+				description="There are some cases where you gonna need to include a description for the items."
+				code="&lt;Selectors name=&quot;compound&quot; columns=&quot;three&quot; content={compoundVerticalContent} /&gt;"
+				isLast={ true }>
+				<Selectors name="compound" columns="three" content={compoundVerticalContent} />
+			</StorySection>
+		</>
 	);
 };
-Simple.storyName = 'Simple Tabs';
\ No newline at end of file
+Vertical.storyName = 'Vertical';
\ No newline at end of file
diff --git a/packages/react-selectors/lib/react-selectors.js b/packages/react-selectors/lib/react-selectors.js
index 5da520d7..1a5d25df 100644
--- a/packages/react-selectors/lib/react-selectors.js
+++ b/packages/react-selectors/lib/react-selectors.js
@@ -42,6 +42,7 @@ const Selectors = ({
                                 aria-labelledby={item.labelId}
                                 aria-describedby={item.descriptionId}
                                 disabled={item.disabled ? true : false}
+                                defaultChecked={item.checked ? true : false}
                             />
                             <span aria-hidden="true">
                                 {item.icon && (<span className={`sui-icon-${item.icon}`}></span>)}

From 6b8ffd616f47d44335223b26c29d2d7827babfd7 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Fri, 10 Jun 2022 19:17:29 +0530
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=93=9D=20docs(selectors):=20added=20d?=
 =?UTF-8?q?ocs=20of=20selectors.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/react-selectors-demo.stories.js      | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/react-selectors/docs/react-selectors-demo.stories.js b/packages/react-selectors/docs/react-selectors-demo.stories.js
index 97fe6eaf..f7bc00f4 100644
--- a/packages/react-selectors/docs/react-selectors-demo.stories.js
+++ b/packages/react-selectors/docs/react-selectors-demo.stories.js
@@ -4,14 +4,14 @@ import { Selectors } from "../lib/react-selectors";
 export default {
 	title: "Components/Selectors",
 	component: Selectors,
-	// parameters: {
-	// 	actions: {
-	// 		disabled: true,
-	// 	},
-	// 	notes: {
-	// 		disabled: true,
-	// 	},
-	// },
+	parameters: {
+		actions: {
+			disabled: true,
+		},
+		notes: {
+			disabled: true,
+		},
+	},
 };
 
 export const demo = args => <Selectors {...args} />;
@@ -50,7 +50,7 @@ demo.args = {
 };
 demo.argTypes = {
 	name: {
-		description: "Name of the selectors",
+		description: "Name of the selectors radio group.",
 		table: {
 			type: { summary: "string" },
 		},
@@ -59,7 +59,7 @@ demo.argTypes = {
 		},
 	},
 	columns: {
-		description: "Number of columns",
+		description: "Number of columns or items in one row.",
 		table: {
 			type: { summary: "string" },
 		},
@@ -69,7 +69,8 @@ demo.argTypes = {
 		},
 	},
 	content: {
-		description: "Content of the selectors",
+		description: "Items in selectors where each item is an object with the appropriate properties.",
+
 		table: {
 			type: { summary: "array" },
 		},