Merge pull request #1758 from bryceosterhaus/1757

Fixes #1757 - Create @clay/label
liferay · Apr 8, 2019 · 7f03836 · 7f03836
2 parents 98d9cbb + 0172ed5
commit 7f03836
Show file tree

Hide file tree

Showing 13 changed files with 314 additions and 3 deletions.
diff --git a/migrate-the-clay-components-from-v2-to-v3.md b/migrate-the-clay-components-from-v2-to-v3.md
@@ -119,3 +119,13 @@ Using a radio by itself doesn't make much sense, only when 2+ exist does the fun
 	<ClayRadioGroup.Radio label="Three" value="three" />
 </ClayRadioGroup>
 ```
+
+## ClayLabel
+
+### API Changes
+
+-   `style` is now `displayType`
+-   Removed `size` in favor of `large` since there is only default and large options.
+-   Removed `label` in favor of utilizing `children` prop
+-   Added `closeButtonProps` which allows you to add attributes to the nested button.
+    -   This is where you would pass a callback for `onClick`.
diff --git a/packages/clay-icon/src/ClayIcon.tsx b/packages/clay-icon/src/ClayIcon.tsx
@@ -49,7 +49,7 @@ const ClayIcon: React.FunctionComponent<Props> = ({
 			)}
 			role="presentation"
 		>
-			<use data-href={`${spriteMapVal}#${symbol}`} />
+			<use xlinkHref={`${spriteMapVal}#${symbol}`} />
 		</svg>
 	);
 };

diff --git a/packages/clay-icon/src/__tests__/__snapshots__/ClayIcon.tsx.snap b/packages/clay-icon/src/__tests__/__snapshots__/ClayIcon.tsx.snap
@@ -6,7 +6,7 @@ exports[`ClayIcon renders 1`] = `
   role="presentation"
 >
   <use
-    data-href="/path/to/some/resource.svg#cool-icon"
+    xlinkHref="/path/to/some/resource.svg#cool-icon"
   />
 </svg>
 `;
@@ -17,7 +17,7 @@ exports[`ClayIcon renders with context spritemap 1`] = `
   role="presentation"
 >
   <use
-    data-href="foo/bar.svg#cool-icon"
+    xlinkHref="foo/bar.svg#cool-icon"
   />
 </svg>
 `;
diff --git a/packages/clay-label/README.md b/packages/clay-label/README.md
@@ -0,0 +1,25 @@
+# clay-label
+
+React implementation for label from clay-css
+
+## Setup
+
+1. Install `yarn`
+
+2. Install local dependencies:
+
+```
+yarn
+```
+
+3. Build the code:
+
+```
+yarn start
+```
+
+4. Open the demo at `localhost:8080` on your browser.
+
+## Contribute
+
+We'd love to get contributions from you! Please, check our [Contributing Guidelines](https://github.com/liferay/clay/blob/master/CONTRIBUTING.md) to see how you can help us improve.
diff --git a/packages/clay-label/demo/App.tsx b/packages/clay-label/demo/App.tsx
@@ -0,0 +1,44 @@
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import ClayLabel from '../src/ClayLabel';
+import {ClayIconSpriteContext} from '@clayui/icon';
+
+import 'clay-css/lib/css/atlas.css';
+
+const App: React.FunctionComponent = () => {
+	const [active, setActive] = React.useState(true);
+
+	return (
+		<ClayIconSpriteContext.Provider value="node_modules/clay-css/lib/images/icons/icons.svg">
+			<div>
+				<ClayLabel>{'Default Label'}</ClayLabel>
+				<ClayLabel displayType="info">{'Info Label'}</ClayLabel>
+				<ClayLabel displayType="warning">{'Warning Label'}</ClayLabel>
+				<ClayLabel displayType="danger">{'Danger Label'}</ClayLabel>
+				<ClayLabel displayType="success">{'Success Label'}</ClayLabel>
+
+				{active && (
+					<ClayLabel
+						closeButtonProps={{
+							children: 'x',
+							onClick: () => setActive(false),
+						}}
+						displayType="success"
+					>
+						{'Closable'}
+					</ClayLabel>
+				)}
+
+				<ClayLabel href="#/foo/bar">{'Label w/ link'}</ClayLabel>
+			</div>
+		</ClayIconSpriteContext.Provider>
+	);
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/packages/clay-label/demo/index.html b/packages/clay-label/demo/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+	<img
+		style="display: none;"
+		src="../node_modules/clay-css/lib/images/icons/icons.svg"
+	/>
+
+	<body style="margin: 48px;">
+		<div id="root"></div>
+	</body>
+</html>
diff --git a/packages/clay-label/package.json b/packages/clay-label/package.json
@@ -0,0 +1,35 @@
+{
+	"name": "@clayui/label",
+	"version": "3.0.0",
+	"description": "ClayLabel component",
+	"license": "BSD-3-Clause",
+	"repository": "https://github.com/liferay/clay/tree/master/packages/clay-label",
+	"engines": {
+		"node": ">=0.12.0",
+		"npm": ">=3.0.0"
+	},
+	"main": "lib/ClayLabel.js",
+	"esnext:main": "src/ClayLabel.js",
+	"jsnext:main": "src/ClayLabel.js",
+	"files": ["lib", "src"],
+	"scripts": {
+		"build": "babel src --root-mode upward --out-dir lib --extensions .ts,.tsx",
+		"build:types": "tsc --project ./tsconfig.declarations.json",
+		"prepublishOnly": "npm run build && npm run build:types",
+		"start": "webpack-dev-server --mode development",
+		"test": "jest --config ../../jest.config.js"
+	},
+	"keywords": ["clay", "react"],
+	"dependencies": {
+		"@clayui/icon": "^3.0.0",
+		"classnames": "^2.2.6"
+	},
+	"devDependencies": {
+		"clay-css": "^2.12.0"
+	},
+	"peerDependencies": {
+		"react": "^16.8.1",
+		"react-dom": "^16.8.1"
+	},
+	"browserslist": ["extends browserslist-config-clay"]
+}
diff --git a/packages/clay-label/src/ClayLabel.tsx b/packages/clay-label/src/ClayLabel.tsx
@@ -0,0 +1,75 @@
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import * as React from 'react';
+import classNames from 'classnames';
+import Icon from '@clayui/icon';
+
+type DisplayType = 'secondary' | 'info' | 'warning' | 'danger' | 'success';
+
+interface Props
+	extends React.BaseHTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
+	/**
+	 * HTML properties that are applied to the 'x' button.
+	 */
+	closeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+	/**
+	 * Determines the style of the label.
+	 */
+	displayType?: DisplayType;
+
+	/**
+	 * Flag to indicate if the label should be of the `large` variant.
+	 */
+	large?: boolean;
+
+	/**
+	 * Path to the location of the spritemap resource used for Icon.
+	 */
+	spritemap?: string;
+}
+
+const ClayLabel: React.FunctionComponent<Props> = ({
+	children,
+	className,
+	closeButtonProps,
+	displayType = 'secondary',
+	href,
+	large = false,
+	spritemap,
+	...otherProps
+}) => {
+	const TagName = href ? 'a' : 'span';
+
+	return (
+		<TagName
+			{...otherProps}
+			className={classNames('label', className, {
+				'label-dismissible': closeButtonProps,
+				'label-lg': large,
+				[`label-${displayType}`]: displayType,
+			})}
+			href={href}
+		>
+			<span className="label-item label-item-expand">{children}</span>
+
+			{closeButtonProps && (
+				<span className="label-item label-item-after">
+					<button
+						{...closeButtonProps}
+						className="close"
+						type="button"
+					>
+						<Icon spritemap={spritemap} symbol="times" />
+					</button>
+				</span>
+			)}
+		</TagName>
+	);
+};
+
+export default ClayLabel;
diff --git a/packages/clay-label/src/__tests__/ClayLabel.tsx b/packages/clay-label/src/__tests__/ClayLabel.tsx
@@ -0,0 +1,35 @@
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import * as React from 'react';
+import * as TestRenderer from 'react-test-renderer';
+import ClayLabel from '../ClayLabel';
+
+describe('ClayLabel', () => {
+	it('renders', () => {
+		const testRenderer = TestRenderer.create(
+			<ClayLabel>{'Default Label'}</ClayLabel>
+		);
+
+		expect(testRenderer.toJSON()).toMatchSnapshot();
+	});
+
+	it('renders with a different displayType ', () => {
+		const testRenderer = TestRenderer.create(
+			<ClayLabel displayType="success">{'Success Label'}</ClayLabel>
+		);
+
+		expect(testRenderer.toJSON()).toMatchSnapshot();
+	});
+
+	it('renders as a link ', () => {
+		const testRenderer = TestRenderer.create(
+			<ClayLabel href="#/foo/bar">{'Label w/ link'}</ClayLabel>
+		);
+
+		expect(testRenderer.toJSON()).toMatchSnapshot();
+	});
+});
diff --git a/packages/clay-label/src/__tests__/__snapshots__/ClayLabel.tsx.snap b/packages/clay-label/src/__tests__/__snapshots__/ClayLabel.tsx.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClayLabel renders 1`] = `
+<span
+  className="label label-secondary"
+>
+  <span
+    className="label-item label-item-expand"
+  >
+    Default Label
+  </span>
+</span>
+`;
+
+exports[`ClayLabel renders as a link  1`] = `
+<a
+  className="label label-secondary"
+  href="#/foo/bar"
+>
+  <span
+    className="label-item label-item-expand"
+  >
+    Label w/ link
+  </span>
+</a>
+`;
+
+exports[`ClayLabel renders with a different displayType  1`] = `
+<span
+  className="label label-success"
+>
+  <span
+    className="label-item label-item-expand"
+  >
+    Success Label
+  </span>
+</span>
+`;
diff --git a/packages/clay-label/tsconfig.declarations.json b/packages/clay-label/tsconfig.declarations.json
@@ -0,0 +1,8 @@
+{
+	"compilerOptions": {
+		"declarationDir": "./lib"
+	},
+	"extends": "../../tsconfig.declarations.json",
+	"include": ["src"],
+	"exclude": ["**/__tests__/**"]
+}
diff --git a/packages/clay-label/tsconfig.json b/packages/clay-label/tsconfig.json
@@ -0,0 +1,4 @@
+{
+	"extends": "../../tsconfig.json",
+	"include": ["src"]
+}
diff --git a/packages/clay-label/webpack.config.js b/packages/clay-label/webpack.config.js
@@ -0,0 +1,26 @@
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+const path = require('path');
+const HWP = require('html-webpack-plugin');
+
+module.exports = {
+	entry: path.join(__dirname, 'demo/App.tsx'),
+	module: {
+		rules: [
+			{loader: 'awesome-typescript-loader', test: /\.tsx?$/},
+			{enforce: 'pre', loader: 'source-map-loader', test: /\.js$/},
+			{
+				test: /\.css$/,
+				use: ['style-loader', 'css-loader'],
+			},
+		],
+	},
+	plugins: [new HWP({template: path.join(__dirname, './demo/index.html')})],
+	resolve: {
+		extensions: ['.ts', '.tsx', '.js', '.json'],
+	},
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,7 +49,7 @@ const ClayIcon: React.FunctionComponent<Props> = ({ @@
     			)}
     			role="presentation"
     		>
-    			<use data-href={`${spriteMapVal}#${symbol}`} />
+    			<use xlinkHref={`${spriteMapVal}#${symbol}`} />
     		</svg>
     	);
     };
@@ Expand Down @@