From 42d884a645450099a3211002f10d6c1e7ec49155 Mon Sep 17 00:00:00 2001
From: valterlorran <valterlorran@hotmail.com>
Date: Tue, 4 Jul 2023 11:17:28 -0300
Subject: [PATCH] Revert "Remove unused badge files (#78814)"

This reverts commit aefc7f343db6ed893898eae74a81e532d02a50a2.
---
 .../assets/stylesheets/shared/_variables.scss |  8 +++
 client/components/badge/README.md             | 20 +++++++
 client/components/badge/docs/example.jsx      | 20 +++++++
 client/components/badge/index.jsx             | 33 ++++++++++++
 client/components/badge/style.scss            | 50 ++++++++++++++++++
 client/components/badge/test/index.js         | 52 +++++++++++++++++++
 packages/launchpad/src/badge/index.tsx        | 27 ++++++++++
 packages/launchpad/src/badge/style.scss       | 50 ++++++++++++++++++
 packages/launchpad/src/test/badge.tsx         | 50 ++++++++++++++++++
 9 files changed, 310 insertions(+)
 create mode 100644 client/components/badge/README.md
 create mode 100644 client/components/badge/docs/example.jsx
 create mode 100644 client/components/badge/index.jsx
 create mode 100644 client/components/badge/style.scss
 create mode 100644 client/components/badge/test/index.js
 create mode 100644 packages/launchpad/src/badge/index.tsx
 create mode 100644 packages/launchpad/src/badge/style.scss
 create mode 100644 packages/launchpad/src/test/badge.tsx

diff --git a/client/assets/stylesheets/shared/_variables.scss b/client/assets/stylesheets/shared/_variables.scss
index c0bb471e3b9e3..eb9b3c0afa62e 100644
--- a/client/assets/stylesheets/shared/_variables.scss
+++ b/client/assets/stylesheets/shared/_variables.scss
@@ -15,3 +15,11 @@
 	--sidebar-width-max: 272px;
 	--sidebar-width-min: 228px;
 }
+
+// =======================
+// Components
+// =======================
+
+// Badge
+$badge-padding-x: 11px;
+$badge-padding-y: 2px;
diff --git a/client/components/badge/README.md b/client/components/badge/README.md
new file mode 100644
index 0000000000000..f03659bba6dfc
--- /dev/null
+++ b/client/components/badge/README.md
@@ -0,0 +1,20 @@
+# Badge
+
+Badge is a component used to render a short piece of information that
+should stand out from the rest.
+
+## Usage
+
+```jsx
+import Badge from 'calypso/components/badge';
+
+function MyComponent() {
+	return <Badge type="warning">Only 6MB left!</Badge>;
+}
+```
+
+## Props
+
+The following props are available to customize the Badge:
+
+- `type`: `'warning'`, `'success'`, `'info'`, `'info-blue'`, `'error'`
diff --git a/client/components/badge/docs/example.jsx b/client/components/badge/docs/example.jsx
new file mode 100644
index 0000000000000..4461cc0d74959
--- /dev/null
+++ b/client/components/badge/docs/example.jsx
@@ -0,0 +1,20 @@
+import Badge from 'calypso/components/badge';
+
+const BadgeExample = () => this.props.exampleCode;
+
+Badge.displayName = 'Badge';
+BadgeExample.displayName = 'Badge';
+
+BadgeExample.defaultProps = {
+	exampleCode: (
+		<div>
+			<Badge type="info">Info Badge</Badge>
+			<Badge type="success">Success Badge</Badge>
+			<Badge type="warning">Warning Badge</Badge>
+			<Badge type="info-blue">Info Blue Badge</Badge>
+			<Badge type="error">Error Badge</Badge>
+		</div>
+	),
+};
+
+export default BadgeExample;
diff --git a/client/components/badge/index.jsx b/client/components/badge/index.jsx
new file mode 100644
index 0000000000000..04163ddb73bf9
--- /dev/null
+++ b/client/components/badge/index.jsx
@@ -0,0 +1,33 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { Component } from 'react';
+
+import './style.scss';
+
+export default class Badge extends Component {
+	static propTypes = {
+		type: PropTypes.oneOf( [
+			'warning',
+			'warning-clear',
+			'success',
+			'info',
+			'info-blue',
+			'info-green',
+			'info-purple',
+			'error',
+		] ).isRequired,
+	};
+
+	static defaultProps = {
+		type: 'warning',
+	};
+
+	render() {
+		const { className, type } = this.props;
+		return (
+			<div className={ classNames( `badge badge--${ type }`, className ) }>
+				{ this.props.children }
+			</div>
+		);
+	}
+}
diff --git a/client/components/badge/style.scss b/client/components/badge/style.scss
new file mode 100644
index 0000000000000..f5aa28ebe4de4
--- /dev/null
+++ b/client/components/badge/style.scss
@@ -0,0 +1,50 @@
+.badge {
+	display: inline-block;
+	// A number large enough to exceed height of any badge to make it look like a pill
+	border-radius: 1000px; /* stylelint-disable-line scales/radii */
+	padding: $badge-padding-y $badge-padding-x;
+	font-size: $font-body-small;
+	line-height: 17px;
+	height: 18px;
+}
+
+.badge--warning-clear {
+	color: var(--color-warning);
+	border: 1px solid var(--color-warning);
+	border-radius: 12px; /* stylelint-disable-line scales/radii */
+}
+
+.badge--warning {
+	color: var(--color-warning-80);
+	background-color: var(--color-warning-20);
+}
+
+.badge--success {
+	color: var(--color-text-inverted);
+	background-color: var(--color-success);
+}
+
+.badge--info {
+	color: var(--color-neutral-70);
+	background-color: var(--color-neutral-5);
+}
+
+.badge--info-blue {
+	background-color: var(--studio-blue-50);
+	color: var(--color-text-inverted);
+}
+
+.badge--info-green {
+	color: var(--studio-green-80);
+	background-color: rgba(184, 230, 191, 0.64);
+}
+
+.badge--info-purple {
+	color: var(--studio-woocommerce-purple-80);
+	background-color: var(--studio-woocommerce-purple-5);
+}
+
+.badge--error {
+	background-color: var(--color-error);
+	color: var(--color-text-inverted);
+}
diff --git a/client/components/badge/test/index.js b/client/components/badge/test/index.js
new file mode 100644
index 0000000000000..f242a261010e1
--- /dev/null
+++ b/client/components/badge/test/index.js
@@ -0,0 +1,52 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render, screen } from '@testing-library/react';
+import Badge from '../index';
+
+describe( 'Badge', () => {
+	test( 'should have badge class', () => {
+		const { container } = render( <Badge /> );
+		expect( container.getElementsByClassName( 'badge' ).length ).toBe( 1 );
+	} );
+
+	test( 'should have proper type class (warning)', () => {
+		const { container } = render( <Badge type="warning" /> );
+		expect( container.getElementsByClassName( 'badge badge--warning' ).length ).toBe( 1 );
+	} );
+
+	test( 'should have proper type class (success)', () => {
+		const { container } = render( <Badge type="success" /> );
+		expect( container.getElementsByClassName( 'badge badge--success' ).length ).toBe( 1 );
+	} );
+
+	test( 'should have proper type class (info)', () => {
+		const { container } = render( <Badge type="info" /> );
+		expect( container.getElementsByClassName( 'badge badge--info' ).length ).toBe( 1 );
+	} );
+
+	test( 'should have proper type class (info-blue)', () => {
+		const { container } = render( <Badge type="info-blue" /> );
+		expect( container.getElementsByClassName( 'badge badge--info-blue' ).length ).toBe( 1 );
+	} );
+
+	test( 'should have proper type class (error)', () => {
+		const { container } = render( <Badge type="error" /> );
+		expect( container.getElementsByClassName( 'badge badge--error' ).length ).toBe( 1 );
+	} );
+
+	test( 'should have proper type class (default)', () => {
+		const { container } = render( <Badge /> );
+		expect( container.getElementsByClassName( 'badge badge--warning' ).length ).toBe( 1 );
+	} );
+
+	test( 'should contains the passed children wrapped by a feature-example div', () => {
+		render(
+			<Badge>
+				<div>arbitrary-text-content</div>
+			</Badge>
+		);
+		expect( screen.getByText( 'arbitrary-text-content' ) ).toBeInTheDocument();
+	} );
+} );
diff --git a/packages/launchpad/src/badge/index.tsx b/packages/launchpad/src/badge/index.tsx
new file mode 100644
index 0000000000000..aa6db3bec007e
--- /dev/null
+++ b/packages/launchpad/src/badge/index.tsx
@@ -0,0 +1,27 @@
+import classNames from 'classnames';
+
+import './style.scss';
+
+export interface BadgeProps {
+	type?:
+		| 'warning'
+		| 'warning-clear'
+		| 'success'
+		| 'info'
+		| 'info-blue'
+		| 'info-green'
+		| 'info-purple'
+		| 'error';
+	className?: string;
+	children?: React.ReactNode;
+}
+
+const Badge: React.FunctionComponent< BadgeProps > = ( props ) => {
+	const className = props.className;
+	const type = props.type || 'warning';
+	return (
+		<div className={ classNames( `badge badge--${ type }`, className ) }>{ props.children }</div>
+	);
+};
+
+export default Badge;
diff --git a/packages/launchpad/src/badge/style.scss b/packages/launchpad/src/badge/style.scss
new file mode 100644
index 0000000000000..f5aa28ebe4de4
--- /dev/null
+++ b/packages/launchpad/src/badge/style.scss
@@ -0,0 +1,50 @@
+.badge {
+	display: inline-block;
+	// A number large enough to exceed height of any badge to make it look like a pill
+	border-radius: 1000px; /* stylelint-disable-line scales/radii */
+	padding: $badge-padding-y $badge-padding-x;
+	font-size: $font-body-small;
+	line-height: 17px;
+	height: 18px;
+}
+
+.badge--warning-clear {
+	color: var(--color-warning);
+	border: 1px solid var(--color-warning);
+	border-radius: 12px; /* stylelint-disable-line scales/radii */
+}
+
+.badge--warning {
+	color: var(--color-warning-80);
+	background-color: var(--color-warning-20);
+}
+
+.badge--success {
+	color: var(--color-text-inverted);
+	background-color: var(--color-success);
+}
+
+.badge--info {
+	color: var(--color-neutral-70);
+	background-color: var(--color-neutral-5);
+}
+
+.badge--info-blue {
+	background-color: var(--studio-blue-50);
+	color: var(--color-text-inverted);
+}
+
+.badge--info-green {
+	color: var(--studio-green-80);
+	background-color: rgba(184, 230, 191, 0.64);
+}
+
+.badge--info-purple {
+	color: var(--studio-woocommerce-purple-80);
+	background-color: var(--studio-woocommerce-purple-5);
+}
+
+.badge--error {
+	background-color: var(--color-error);
+	color: var(--color-text-inverted);
+}
diff --git a/packages/launchpad/src/test/badge.tsx b/packages/launchpad/src/test/badge.tsx
new file mode 100644
index 0000000000000..5623f7393c4f9
--- /dev/null
+++ b/packages/launchpad/src/test/badge.tsx
@@ -0,0 +1,50 @@
+import { Badge } from '@automattic/components';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import '@testing-library/jest-dom';
+
+describe( 'Badge', () => {
+	test( 'should have badge class', () => {
+		const { container } = render( <Badge /> );
+		expect( container.getElementsByClassName( 'badge' ).length ).toBe( 1 );
+	} );
+
+	test( 'should have proper type class (warning)', () => {
+		const { container } = render( <Badge type="warning" /> );
+		expect( container.getElementsByClassName( 'badge badge--warning' ).length ).toBe( 1 );
+	} );
+
+	test( 'should have proper type class (success)', () => {
+		const { container } = render( <Badge type="success" /> );
+		expect( container.getElementsByClassName( 'badge badge--success' ).length ).toBe( 1 );
+	} );
+
+	test( 'should have proper type class (info)', () => {
+		const { container } = render( <Badge type="info" /> );
+		expect( container.getElementsByClassName( 'badge badge--info' ).length ).toBe( 1 );
+	} );
+
+	test( 'should have proper type class (info-blue)', () => {
+		const { container } = render( <Badge type="info-blue" /> );
+		expect( container.getElementsByClassName( 'badge badge--info-blue' ).length ).toBe( 1 );
+	} );
+
+	test( 'should have proper type class (error)', () => {
+		const { container } = render( <Badge type="error" /> );
+		expect( container.getElementsByClassName( 'badge badge--error' ).length ).toBe( 1 );
+	} );
+
+	test( 'should have proper type class (default)', () => {
+		const { container } = render( <Badge /> );
+		expect( container.getElementsByClassName( 'badge badge--warning' ).length ).toBe( 1 );
+	} );
+
+	test( 'should contains the passed children wrapped by a feature-example div', () => {
+		render(
+			<Badge>
+				<div>arbitrary-text-content</div>
+			</Badge>
+		);
+		expect( screen.getByText( 'arbitrary-text-content' ) ).toBeInTheDocument();
+	} );
+} );