✨ new(react-scores): created new component.

packages/react-scores/README.md

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

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

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

packages/react-scores/docs/react-scores-error.stories.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Scores } from '../lib/react-scores';
+
+export default {
+	title: 'Components/Scores/Error',
+	component: Scores,
+	args: {
+		score: 15,
+		type: 'error',
+		size: 'default',
+	},
+	argTypes: {
+		score: {
+			description: 'The score value to display.',
+			control: {
+				type: 'range',
+				min: 0,
+				max: 100,
+				step: 1,
+			},
+		},
+		type: {
+			description: 'The scroes color variation according to type.',
+			control: {
+				type: 'select',
+				options: ['error', 'warning', 'success'],
+			},
+		},
+		size: {
+			description: 'The scores component size.',
+			control: {
+				type: 'select',
+				options: ['default', 'large'],
+			},
+		},
+	},
+};
+
+const Template = (args) => <Scores {...args} />;
+
+export const primary = Template.bind({});
+primary.storyName = 'Default';
+
+export const large = Template.bind({});
+large.storyName = 'Large';
+large.args = {
+	size: 'large',
+};

packages/react-scores/docs/react-scores-success.stories.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Scores } from '../lib/react-scores';
+
+export default {
+	title: 'Components/Scores/Success',
+	component: Scores,
+	args: {
+		score: 95,
+		type: 'success',
+		size: 'default',
+	},
+	argTypes: {
+		score: {
+			description: 'The score value to display.',
+			control: {
+				type: 'range',
+				min: 0,
+				max: 100,
+				step: 1,
+			},
+		},
+		type: {
+			description: 'The scroes color variation according to type.',
+			control: {
+				type: 'select',
+				options: ['error', 'warning', 'success'],
+			},
+		},
+		size: {
+			description: 'The scores component size.',
+			control: {
+				type: 'select',
+				options: ['default', 'large'],
+			},
+		},
+	},
+};
+
+const Template = (args) => <Scores {...args} />;
+
+export const primary = Template.bind({});
+primary.storyName = 'Default';
+
+export const large = Template.bind({});
+large.storyName = 'Large';
+large.args = {
+	size: 'large',
+};

packages/react-scores/docs/react-scores-warning.stories.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Scores } from '../lib/react-scores';
+
+export default {
+	title: 'Components/Scores/Warning',
+	component: Scores,
+	args: {
+		score: 55,
+		type: 'warning',
+		size: 'default',
+	},
+	argTypes: {
+		score: {
+			description: 'The score value to display.',
+			control: {
+				type: 'range',
+				min: 0,
+				max: 100,
+				step: 1,
+			},
+		},
+		type: {
+			description: 'The scroes color variation according to type.',
+			control: {
+				type: 'select',
+				options: ['error', 'warning', 'success'],
+			},
+		},
+		size: {
+			description: 'The scores component size.',
+			control: {
+				type: 'select',
+				options: ['default', 'large'],
+			},
+		},
+	},
+};
+
+const Template = (args) => <Scores {...args} />;
+
+export const primary = Template.bind({});
+primary.storyName = 'Default';
+
+export const large = Template.bind({});
+large.storyName = 'Large';
+large.args = {
+	size: 'large',
+};

packages/react-scores/lib/react-scores.js

@@ -0,0 +1,47 @@
+import React from 'react';
+
+export const Scores = ({ type, size, score }) => {
+	let classes = ['sui-circle-score', 'loaded'];
+
+	// add class based on type
+	switch (type) {
+		case 'error':
+			classes.push('sui-grade-f');
+			break;
+		case 'warning':
+			classes.push('sui-grade-c');
+			break;
+		case 'success':
+			classes.push('sui-grade-a');
+			break;
+		default:
+			break;
+	}
+
+	// switch size of score element
+	switch (size) {
+		case 'large':
+			classes.push('sui-circle-score-lg');
+			break;
+		case 'default':
+		default:
+			break;
+	}
+
+	return (
+		<div className={classes.join(' ')} data-score={score}>
+			<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+				<circle strokeWidth="16" cx="50" cy="50" r="42"></circle>
+				<circle
+					strokeWidth="16"
+					cx="50"
+					cy="50"
+					r="42"
+					strokeDasharray="0,3943.4067435231395"
+					style={{ animation: `3s ease 0s 1 normal forwards running sui${score}` }}
+				></circle>
+			</svg>
+			<span className="sui-circle-score-label">{score}</span>
+		</div>
+	);
+};

packages/react-scores/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@wpmudev/react-scores",
+  "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-scores.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"
+}