✨ new(react-tags): create new component.

packages/react-tags/README.md

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

packages/react-tags/__tests__/react-tags.test.js

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

packages/react-tags/docs/react-tags-default.stories.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import { Box, BoxBody } from '@wpmudev/react-box';
+import { Tags } from '../lib/react-tags';
+
+export default {
+	title: 'Components/Tags/Simple',
+	component: Tags,
+	args: {
+		label: 'Primary',
+		childrenContent: false,
+		color: 'default',
+		size: 'default',
+		icon: '',
+		href: '',
+		onClick: '',
+		ghost: false,
+		uppercase: false,
+		truncated: false,
+		multiline: false,
+	},
+	argTypes: {
+		label: {
+			description: 'The label of the tag.',
+			control: {
+				type: 'text',
+			},
+		},
+		childrenContent: {
+			description: 'If true, the content of the tag will be rendered as children.',
+			control: {
+				type: 'boolean',
+			},
+		},
+		color: {
+			description: 'The color of the tag that will be filled background.',
+			control: {
+				type: 'select',
+				options: ['default', 'red', 'yellow', 'green', 'blue', 'purple', 'disabled'],
+			},
+		},
+		size: {
+			description: 'The size of the tag.',
+			control: {
+				type: 'select',
+				options: { default: 'default', small: 'sm', 'mini pro': 'pro', 'mini beta': 'beta' },
+			},
+		},
+		icon: {
+			description: 'Add icon inside the tag.',
+			control: {
+				type: 'text',
+			},
+		},
+		href: {
+			description: 'The link or href of the tag.',
+			control: { type: 'text' },
+		},
+		onClick: {
+			description: 'The button with onClick function for the tag.',
+			control: { type: 'function' },
+		},
+		ghost: {
+			description: 'Some designs will require outlined tags.',
+			control: { type: 'boolean' },
+		},
+		truncated: {
+			description:
+				'By default tags are multi-line, this mean height of the tag will adjust depending on the amount of text and its width. But there are times when you will need to truncate text inside tag instead using multi-line text.',
+			control: { type: 'boolean' },
+		},
+		uppercase: {
+			description: 'Some tags require to have uppercase text.',
+			control: { type: 'boolean' },
+		},
+		multiline: {
+			description: 'Some tags require to have multi-line text.',
+			control: { type: 'boolean' },
+		},
+	},
+};
+
+const Template = ({ ...props }) => {
+	return (
+		<Box>
+			<BoxBody>
+				<Tags {...props} />
+			</BoxBody>
+		</Box>
+	);
+};
+
+export const primary = Template.bind({});
+primary.storyName = 'Solid';
+
+export const ghost = Template.bind({});
+ghost.storyName = 'Ghost';
+ghost.args = {
+	ghost: true,
+};
+
+export const small = Template.bind({});
+small.storyName = 'Small';
+small.args = {
+	size: 'sm',
+};
+
+export const mini = Template.bind({});
+mini.storyName = 'Mini';
+mini.args = {
+	size: 'pro',
+};
+
+export const uppercase = Template.bind({});
+uppercase.storyName = 'Uppercase';
+uppercase.args = {
+	color: 'blue',
+	uppercase: true,
+};
+
+export const multiline = Template.bind({});
+multiline.storyName = 'Multiline';
+multiline.args = {
+	label: 'Multiple line tag',
+	multiline: true,
+};
+
+export const truncated = Template.bind({});
+truncated.storyName = 'Truncated';
+truncated.args = {
+	label: 'Multiple line tag',
+	childrenContent: true,
+	truncated: true,
+};
+
+export const disabled = Template.bind({});
+disabled.storyName = 'Disabled';
+disabled.args = {
+	color: 'disabled',
+};

packages/react-tags/docs/react-tags-variations.stories.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import { Box, BoxBody } from '@wpmudev/react-box';
+import { Tags } from '../lib/react-tags';
+
+export default {
+	title: 'Components/Tags/Variations',
+	component: Tags,
+	args: {
+		label: 'Primary',
+		childrenContent: false,
+		color: 'default',
+		size: 'default',
+		icon: '',
+		href: '',
+		onClick: () => {
+			alert('button clicked.');
+		},
+		ghost: false,
+		uppercase: false,
+		truncated: false,
+		multiline: false,
+	},
+	argTypes: {
+		label: {
+			description: 'The label of the tag.',
+			control: {
+				type: 'text',
+			},
+		},
+		childrenContent: {
+			description: 'If true, the content of the tag will be rendered as children.',
+			control: {
+				type: 'boolean',
+			},
+		},
+		color: {
+			description: 'The color of the tag that will be filled background.',
+			control: {
+				type: 'select',
+				options: ['default', 'red', 'yellow', 'green', 'blue', 'purple', 'disabled'],
+			},
+		},
+		size: {
+			description: 'The size of the tag.',
+			control: {
+				type: 'select',
+				options: { default: 'default', small: 'sm', 'mini pro': 'pro', 'mini beta': 'beta' },
+			},
+		},
+		icon: {
+			description: 'Add icon inside the tag.',
+			control: {
+				type: 'text',
+			},
+		},
+		href: {
+			description: 'The link or href of the tag.',
+			control: { type: 'text' },
+		},
+		onClick: {
+			description: 'The button with onClick function for the tag.',
+			control: { type: 'function' },
+		},
+		ghost: {
+			description: 'Some designs will require outlined tags.',
+			control: { type: 'boolean' },
+		},
+		truncated: {
+			description:
+				'By default tags are multi-line, this mean height of the tag will adjust depending on the amount of text and its width. But there are times when you will need to truncate text inside tag instead using multi-line text.',
+			control: { type: 'boolean' },
+		},
+		uppercase: {
+			description: 'Some tags require to have uppercase text.',
+			control: { type: 'boolean' },
+		},
+		multiline: {
+			description: 'Some tags require to have multi-line text.',
+			control: { type: 'boolean' },
+		},
+	},
+};
+
+const Template = ({ ...props }) => {
+	return (
+		<Box>
+			<BoxBody>
+				<Tags {...props} />
+			</BoxBody>
+		</Box>
+	);
+};
+
+export const primary = Template.bind({});
+primary.storyName = 'Button';
+
+export const link = Template.bind({});
+link.storyName = 'Link';
+link.args = {
+	href: 'https://www.wpmudev.org',
+	onClick: '',
+};
+
+export const icon = Template.bind({});
+icon.storyName = 'Icon';
+icon.args = {
+	icon: 'info',
+	childrenContent: true,
+	onClick: '',
+};

packages/react-tags/lib/react-tags.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const IconWrap = styled.span`
+	width: 22px;
+	position: relative;
+	margin-left: -7px;
+	vertical-align: middle;
+	line-height: 1;
+	&:before {
+		color: inherit !important;
+	}
+`;
+
+const ButtonWrap = styled.button`
+	cursor: pointer !important;
+`;
+
+const LinkWrap = styled.a`
+	cursor: pointer !important;
+`;
+
+export const Tags = ({
+	size,
+	label,
+	childrenContent,
+	ghost,
+	color,
+	truncated,
+	multiline,
+	uppercase,
+	onClick,
+	icon,
+	href,
+	...props
+}) => {
+	let classes = [
+			'sui-tag',
+			truncated ? 'sui-tag-truncated' : '',
+			uppercase ? 'sui-tag-uppercase' : '',
+		],
+		htmlTag = '';
+
+	// switch size
+	switch (size) {
+		case 'sm':
+		case 'pro':
+		case 'beta':
+			classes.push(`sui-tag-${size}`);
+			break;
+		default:
+			break;
+	}
+
+	// switch color
+	switch (color) {
+		case 'red':
+		case 'yellow':
+		case 'green':
+		case 'blue':
+		case 'purple':
+		case 'disabled':
+			ghost ? classes.push(`sui-tag-ghost sui-tag-${color}`) : classes.push(`sui-tag-${color}`);
+			break;
+		default:
+			ghost && classes.push('sui-tag-ghost sui-tag-red');
+			break;
+	}
+
+	// if props href is set, then set htmlTag to 'a' or if else onclick set then set html tag to 'button'
+	if (href) {
+		htmlTag = LinkWrap;
+	} else if (onClick) {
+		htmlTag = ButtonWrap;
+	} else {
+		htmlTag = 'span';
+	}
+
+	return React.createElement(
+		htmlTag,
+		{
+			className: classes.join(' '),
+			style: truncated || multiline ? { maxWidth: '100px' } : {},
+			onClick: onClick ? onClick : null,
+			href: href ? href : null,
+			...props,
+		},
+		icon ? <IconWrap className={'sui-icon-' + icon} aria-hidden="true"></IconWrap> : null,
+		truncated || childrenContent ? <span>{label}</span> : label,
+	);
+};

packages/react-tags/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@wpmudev/react-tags",
+  "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-tags.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",
+  "dependencies": {
+    "styled-components": "^5.3.3"
+  }
+}