v1.9.1

Note: v1.9.0 didn't generate a release so we're including the combined notes here in the v1.9.1 release.

This release introduces a new Table implementation in beta, a rework of our Multiple Choice pattern (also in beta), and significantly improves our documentation! Let's look at some of the highlights.

First Pattern: Multiple Choice 🎉

Multiple Choice is our first pattern, a new concept to the Norton Design System. Patterns give us a way to ship solutions to more narrow business problems than components. If components are the building blocks of our system, then patterns are the predefined build sets and accompanying instructions that you might follow to accomplish your goal more quickly. They compose together multiple components into views or flows in an opinionated, accessible way.

We chose Multiple Choice as our first pattern because it's common to Norton's courseware, and are eager to gather more feedback about it before we remove the beta flag!

New Component: Table 📈

Table is ready for use, but is still in beta as we gather feedback about the developer experience of integrating it in more data-intensive workloads. It includes both a composition API and a data-driven API to support different use-cases.

import React from 'react';
import {
	Table,
	TableHeader,
	TableHeaderCell,
	TableBody,
	TableRow,
	TableCell,
} from '@wwnds/react';
import type { TableData } from '@wwnds/react';

// Compose a table with components!
export function MyComposedTable() {
	return (
		<Table>
			<TableHeader>
				<TableHeaderCell>First Name</TableHeaderCell>
				<TableHeaderCell>Last Name</TableHeaderCell>
				<TableHeaderCell sorted='asc'>Years</TableHeaderCell>
			</TableHeader>
			<TableBody>
				<TableRow>
					<TableCell>Clara</TableCell>
					<TableCell>Schumann</TableCell>
					<TableCell>1819–1896</TableCell>
				</TableRow>
				<TableRow>
					<TableCell>Fryderyk</TableCell>
					<TableCell>Chopin</TableCell>
					<TableCell>1810–1849</TableCell>
				</TableRow>
			</TableBody>
		</Table>
	);
}

// Build a table with data!
export function MyDataTable() {
	// pro tip: memoize your data to avoid unnecessary renders
	const myData: TableData = React.useMemo(() => ({
		headers: [
			{ children: 'First Name' },
			{ children: 'Last Name' },
			{ children: 'Years', sorted: 'asc' },
		],
		rows: [
			[{ value: 'Clara' }, { value: 'Schumann' }, { value: '1819–1896' }],
			[{ value: 'Fryderyk' }, { value: 'Chopin' }, { value: '1810–1849' }],
		],
	}), []);

	return <Table data={myData} />;
}

1.9.1 (2024-12-17)

🐛 Bug Fixes

• fix react types mismatch (0d4dfb3)

1.9.0 (2024-12-16)

✨ Features

• react,core: add Table component (cfbc194)

🐛 Bug Fixes

• fix type react types mismatch (0d4dfb3)

📝 Documentation

• add component anatomy images (#361) (7bdedc5)
• add initial accessibility guide intro (#360) (e154c41)
• Multiple Choice Updates (#362) (d4e9fd6), closes #2
• website: refresh table docs to reflect the new implementation (#364) (36975a8)

♻️ Refactor

• update multiple choice to reflect anatomy (#366) (17fd382)