Revert "Remove unused badge files (#78814)"

This reverts commit aefc7f3.

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;

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'`

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;

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>
+		);
+	}
+}

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);
+}

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();
+	} );
+} );

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;

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);
+}

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();
+	} );
+} );