✨ new(react-field-list): create new element

packages/react-field-list/README.md

@@ -0,0 +1,11 @@
+# `@wpmudev/react-field-list`
+
+> TODO: description
+
+## Usage
+
+```
+const reactFieldList = require('@wpmudev/react-field-list');
+
+// TODO: DEMONSTRATE API
+```

packages/react-field-list/__tests__/react-field-list.test.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const reactFieldList = require('..');
+
+describe('@wpmudev/react-field-list', () => {
+    it('needs tests');
+});

packages/react-field-list/docs/react-field-list.stories.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Box, BoxBody } from '@wpmudev/react-box';
+import { FieldList } from '../lib/react-field-list';
+
+export default {
+	title: 'Components/Field list',
+	component: FieldList,
+	args: {
+		title: 'Link To',
+		description: 'Choose content you want to convert to links.',
+		options: {
+			'toggle-1': 'Posts',
+			'toggle-2': 'Pages',
+			'toggle-3': 'Categories',
+			'toggle-4': 'Tags',
+		},
+	},
+	argTypes: {
+		title: {
+			description: 'Title of the field list.',
+			control: {
+				type: 'text',
+			},
+		},
+		description: {
+			description: 'Description of the field list.',
+			control: {
+				type: 'text',
+			},
+		},
+		options: {
+			description:
+				'Options of the field list (key: value). Key will be the id of the checkbox and value will be the name of the option. For eg: toggle-1 will be the id of the checkbox and Posts will be the name of the option.',
+			control: {
+				type: 'object',
+			},
+		},
+	},
+};
+
+const Template = (args) => (
+	<Box>
+		<BoxBody>
+			<FieldList {...args} />
+		</BoxBody>
+	</Box>
+);
+
+export const primary = Template.bind({});
+primary.storyName = 'Default';

packages/react-field-list/lib/react-field-list.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export const FieldList = ({ title, description, options }) => {
+	return (
+		<div className="sui-field-list">
+			<div className="sui-field-list-header">
+				<h3 className="sui-field-list-title">{title}</h3>
+				<p className="sui-description">{description}</p>
+			</div>
+
+			{options ? (
+				<div className="sui-field-list-body">
+					{Object.keys(options).map((key) => {
+						const option = options[key];
+						return (
+							<div className="sui-field-list-item" key={key}>
+								<label className="sui-field-list-item-label" htmlFor={key}>
+									{option}
+								</label>
+
+								<label className="sui-toggle">
+									<input type="checkbox" id={key} />
+									<span className="sui-toggle-slider"></span>
+								</label>
+							</div>
+						);
+					})}
+				</div>
+			) : null}
+		</div>
+	);
+};

packages/react-field-list/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@wpmudev/react-field-list",
+  "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 <[email protected]>",
+  "license": "ISC",
+  "main": "lib/react-field-list.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"
+}