Enhancement : Badge Component

docs/tool/manifest.js

@@ -18,6 +18,7 @@ const componentPaths = glob( 'packages/components/src/*/**/README.md', {
 		'packages/components/src/menu/README.md',
 		'packages/components/src/tabs/README.md',
 		'packages/components/src/custom-select-control-v2/README.md',
+		'packages/components/src/badge/README.md',
 	],
 } );
 const packagePaths = glob( 'packages/*/package.json' )

packages/components/src/badge/README.md

@@ -0,0 +1,37 @@
+# Badge
+
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
+
+<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-badge--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
+
+## Props
+
+### `as`
+
+Component type that will be used to render the badge component.
+
+ - Type: `ElementType`
+ - Required: No
+ - Default: `'div'`
+
+### `className`
+
+Additional classes for the badge component.
+
+ - Type: `string`
+ - Required: No
+
+### `context`
+
+Badge variant.
+
+ - Type: `"neutral" | "info" | "success" | "warning" | "error"`
+ - Required: No
+ - Default: `neutral`
+
+### `children`
+
+Element to display inside the badge.
+
+ - Type: `ReactNode`
+ - Required: Yes

packages/components/src/badge/docs-manifest.json

@@ -0,0 +1,5 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "Badge",
+	"filePath": "./index.tsx"
+}

packages/components/src/badge/index.tsx

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { info, caution, error, published } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import type { BadgeProps } from './types';
+import Icon from '../icon';
+
+function Badge( {
+	className,
+	as: Component = 'div',
+	context = 'neutral',
+	children,
+	...props
+}: BadgeProps ) {
+	/**
+	 * Returns an icon based on the badge context.
+	 *
+	 * @return {JSX.Element | null} The corresponding icon for the provided context.
+	 */
+	function contextBasedIcon(): JSX.Element | null {
+		switch ( context ) {
+			case 'info':
+				return info;
+			case 'warning':
+				return caution;
+			case 'error':
+				return error;
+			case 'success':
+				return published;
+			default:
+				return null;
+		}
+	}
+
+	return (
+		<Component
+			className={ clsx(
+				'components-badge',
+				`components-badge--${ context }`,
+				context !== 'neutral' && 'components-badge--has-icon',
+				className
+			) }
+			aria-label={ `${ context }-badge` }
+			{ ...props }
+		>
+			{ context !== 'neutral' && (
+				<Icon
+					icon={ contextBasedIcon() }
+					size={ 20 }
+					fill="currentColor"
+				/>
+			) }
+			{ children }
+		</Component>
+	);
+}
+
+export default Badge;

packages/components/src/badge/stories/index.story.tsx

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Badge from '..';
+
+const meta = {
+	component: Badge,
+	title: 'Components/Containers/Badge',
+	argTypes: {
+		className: {
+			control: { type: 'text' },
+		},
+		as: {
+			control: { type: 'select' },
+			options: [ 'div', 'span' ],
+		},
+		context: {
+			control: { type: 'select' },
+			options: [ 'neutral', 'info', 'warning', 'error', 'success' ],
+		},
+		children: {
+			control: { type: null },
+		},
+	},
+	tags: [ 'status-private' ],
+} satisfies Meta< typeof Badge >;
+
+export default meta;
+
+type Story = StoryObj< typeof meta >;
+
+export const Default: Story = {
+	args: {
+		children: 'Code is Poetry',
+		context: 'neutral',
+	},
+};
+
+export const WithContext: Story = {
+	args: {
+		children: 'Code is Poetry',
+		context: 'success',
+	},
+};

packages/components/src/badge/styles.scss

@@ -0,0 +1,38 @@
+@mixin badge-color-variant( $base-color ) {
+	background-color: mix($white, $base-color, 90%);
+	color: mix($black, $base-color, 50%);
+}
+
+$badge-colors: (
+	"info": #3858e9,
+	"warning": $alert-yellow,
+	"error": $alert-red,
+	"success": $alert-green,
+);
+
+.components-badge {
+	background: $gray-100;
+	color: $gray-800;
+	padding: 0 $grid-unit-10;
+	min-height: $grid-unit-30;
+	border-radius: $radius-small;
+	font-size: $font-size-small;
+	font-weight: 400;
+	flex-shrink: 0;
+	line-height: $font-line-height-small;
+	width: fit-content;
+	display: flex;
+	align-items: center;
+	gap: 2px;
+
+	&--has-icon {
+		padding-left: $grid-unit-05;
+	}
+
+	// Generate color variants
+	@each $type, $color in $badge-colors {
+		&.components-badge--#{$type} {
+			@include badge-color-variant( $color );
+		}
+	}
+}

packages/components/src/badge/test/index.tsx

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import Badge from '..';
+
+describe( 'Badge', () => {
+	it( 'should render correctly with default props', () => {
+		render( <Badge>Code is Poetry</Badge> );
+		const badge = screen.getByText( 'Code is Poetry' );
+		expect( badge ).toBeInTheDocument();
+		expect( badge.tagName ).toBe( 'DIV' ); // Default element should be a div
+		expect( badge ).toHaveClass( 'components-badge' );
+	} );
+
+	it( 'should render as a span when specified', () => {
+		render( <Badge as="span">Code is Poetry</Badge> );
+		const badge = screen.getByText( 'Code is Poetry' );
+		expect( badge.tagName ).toBe( 'SPAN' );
+		expect( badge ).toHaveClass( 'components-badge' );
+	} );
+
+	it( 'should render as a custom element when specified', () => {
+		render( <Badge as="article">Code is Poetry</Badge> );
+		const badge = screen.getByText( 'Code is Poetry' );
+		expect( badge.tagName ).toBe( 'ARTICLE' );
+		expect( badge ).toHaveClass( 'components-badge' );
+	} );
+
+	it( 'should combine custom className with default class', () => {
+		render( <Badge className="custom-class">Code is Poetry</Badge> );
+		const badge = screen.getByText( 'Code is Poetry' );
+		expect( badge ).toHaveClass( 'components-badge' );
+		expect( badge ).toHaveClass( 'custom-class' );
+	} );
+
+	it( 'should render children correctly', () => {
+		render(
+			<Badge>
+				<span>Nested</span> Content
+			</Badge>
+		);
+
+		const badge = screen.getByText( ( content, element ) => {
+			return element?.classList?.contains( 'components-badge' ) ?? false;
+		} );
+
+		expect( badge ).toBeInTheDocument();
+		expect( badge ).toHaveClass( 'components-badge' );
+		expect( badge ).toHaveTextContent( 'Nested Content' );
+
+		const nestedSpan = screen.getByText( 'Nested' );
+		expect( nestedSpan.tagName ).toBe( 'SPAN' );
+	} );
+
+	it( 'should pass through additional props', () => {
+		render( <Badge data-testid="custom-badge">Code is Poetry</Badge> );
+		const badge = screen.getByTestId( 'custom-badge' );
+		expect( badge ).toHaveTextContent( 'Code is Poetry' );
+		expect( badge ).toHaveClass( 'components-badge' );
+	} );
+} );

packages/components/src/badge/types.ts

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import type { ElementType, ReactNode } from 'react';
+
+export type BadgeProps = {
+	/**
+	 * Additional classes for the badge component.
+	 */
+	className?: string;
+	/**
+	 * Component type that will be used to render the badge component.
+	 *
+	 * @default 'div'
+	 */
+	as?: ElementType;
+	/**
+	 * Badge variant.
+	 *
+	 * @default 'generic'
+	 */
+	context?: 'neutral' | 'info' | 'success' | 'warning' | 'error';
+	/**
+	 * Element to display inside the badge.
+	 */
+	children: ReactNode;
+};

packages/components/src/index.ts

@@ -241,6 +241,7 @@ export {
 } from './higher-order/with-focus-return';
 export { default as withNotices } from './higher-order/with-notices';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
+export { default as Badge } from './badge';
 
 // Private APIs.
 export { privateApis } from './private-apis';

packages/components/src/private-apis.ts

@@ -8,6 +8,7 @@ import Theme from './theme';
 import { Tabs } from './tabs';
 import { kebabCase } from './utils/strings';
 import { lock } from './lock-unlock';
+import Badge from './badge';
 
 export const privateApis = {};
 lock( privateApis, {
@@ -17,4 +18,5 @@ lock( privateApis, {
 	Theme,
 	Menu,
 	kebabCase,
+	Badge,
 } );

packages/components/src/style.scss

@@ -10,6 +10,7 @@
 // Components
 @import "./animate/style.scss";
 @import "./autocomplete/style.scss";
+@import "./badge/styles.scss";
 @import "./button-group/style.scss";
 @import "./button/style.scss";
 @import "./checkbox-control/style.scss";

packages/icons/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+-   Add new `caution` icon.
+-   Add new `error` icon.
+
 ## 10.13.0 (2024-11-27)
 
 ## 10.12.0 (2024-11-16)

packages/icons/src/index.js

@@ -37,6 +37,7 @@ export { default as caption } from './library/caption';
 export { default as capturePhoto } from './library/capture-photo';
 export { default as captureVideo } from './library/capture-video';
 export { default as category } from './library/category';
+export { default as caution } from './library/caution';
 export { default as chartBar } from './library/chart-bar';
 export { default as check } from './library/check';
 export { default as chevronDown } from './library/chevron-down';
@@ -84,6 +85,7 @@ export { default as download } from './library/download';
 export { default as edit } from './library/edit';
 export { default as envelope } from './library/envelope';
 export { default as external } from './library/external';
+export { default as error } from './library/error';
 export { default as file } from './library/file';
 export { default as filter } from './library/filter';
 export { default as flipHorizontal } from './library/flip-horizontal';

packages/icons/src/library/caution.js

@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const caution = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  		<Path 
+			fill-rule="evenodd" 
+			clip-rule="evenodd" 
+			d="M5.5 12a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0ZM12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 12v-1.5h1.5V16h-1.5Zm0-8v5h1.5V8h-1.5Z"
+		/>
+	</SVG>
+);
+
+export default caution;

packages/icons/src/library/error.js

@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const error = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  		<Path 
+			fill-rule="evenodd" 
+			clip-rule="evenodd" 
+			d="M12.218 5.377a.25.25 0 0 0-.436 0l-7.29 12.96a.25.25 0 0 0 .218.373h14.58a.25.25 0 0 0 .218-.372l-7.29-12.96Zm-1.743-.735c.669-1.19 2.381-1.19 3.05 0l7.29 12.96a1.75 1.75 0 0 1-1.525 2.608H4.71a1.75 1.75 0 0 1-1.525-2.608l7.29-12.96ZM12.75 17.46h-1.5v-1.5h1.5v1.5Zm-1.5-3h1.5v-5h-1.5v5Z"
+		/>
+	</SVG>
+);
+
+export default error;