DS Site: Reflect move to @automattic/ui (#104328)

* DS Site: Reflect move to `@automattic/ui`

* Improve package descriptions

Author: mirka

apps/design-system-docs/docs/components/packages/a8c-ui.mdx

@@ -1,3 +1,12 @@
-# `@automattic/ui`
+# @automattic/ui
 
-Coming soon.
+[![NPM Version](https://img.shields.io/npm/v/%40automattic%2Fui)](https://www.npmjs.com/package/@automattic/ui)
+
+Used on top of the [WordPress Design System](./wp-components/) layer.
+
+This package of Automattic UI components is designed to be safe for bundling anywhere.
+
+- No dependency on `@wordpress/components`.
+- No CSS collisions when multiple versions of the package are loaded in the same page.
+- No need for a separate RTL stylesheet.
+- SSR-friendly.

apps/design-system-docs/docs/components/packages/index.mdx

@@ -3,5 +3,3 @@ sidebar_position: 2
 ---
 
 # Package Reference
-
-Add content here.

apps/design-system-docs/docs/components/packages/wp-components/data.ts

@@ -66,6 +66,16 @@ export const data: ComponentData[] = [
 		docs: 'https://wordpress.github.io/gutenberg/?path=/docs/components-animate--docs',
 		notes: 'Planned for deprecation.',
 	},
+	{
+		id: 'badge',
+		name: 'Badge',
+		whereUsed: 'global',
+		status: 'stable',
+		figma:
+			'https://www.figma.com/design/804HN2REV2iap2ytjRQ055/WordPress-Design-System?node-id=19297-39220&t=YhMXMUEdznvUwLv9-4',
+		docs: 'https://wordpress.github.io/gutenberg/?path=/docs/components-badge--docs',
+		notes: 'Still a private API. If possible, use `Badge` from `@automattic/ui` instead.',
+	},
 	{
 		id: 'base-control',
 		name: 'BaseControl',
@@ -200,7 +210,7 @@ export const data: ComponentData[] = [
 		whereUsed: 'global',
 		status: 'use-with-caution',
 		docs: 'https://wordpress.github.io/gutenberg/?path=/docs/components-datepicker--docs',
-		notes: 'If possible, use `DateCalendar` from `@automattic/components` instead.',
+		notes: 'If possible, use `DateCalendar` from `@automattic/ui` instead.',
 	},
 	{
 		id: 'date-time-picker',
@@ -209,7 +219,7 @@ export const data: ComponentData[] = [
 		status: 'use-with-caution',
 		docs: 'https://wordpress.github.io/gutenberg/?path=/docs/components-datetimepicker--docs',
 		notes:
-			'If possible, use `DateCalendar` from `@automattic/components` instead. For the input fields, consider using an `TextControl` with `type="date"` or `type="datetime-local"`.',
+			'If possible, use `DateCalendar` from `@automattic/ui` instead. For the input fields, consider using an `TextControl` with `type="date"` or `type="datetime-local"`.',
 	},
 	{
 		id: 'disabled',

apps/design-system-docs/docs/components/packages/wp-components/index.mdx

@@ -6,4 +6,8 @@ import { WPComponentsTable } from './wp-components-table';
 
 # @wordpress/components
 
+[![NPM Version](https://img.shields.io/npm/v/%40wordpress%2Fcomponents)](https://www.npmjs.com/package/@wordpress/components)
+
+Used as the base layer for the Automattic Design System.
+
 <WPComponentsTable />