Skip to content

Commit 35fa2f6

Browse files
mirkamirka
committed
DS Site: Add @wordpress/components reference
1 parent 989f420 commit 35fa2f6

File tree

12 files changed

+291
-3
lines changed

12 files changed

+291
-3
lines changed

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

Lines changed: 0 additions & 3 deletions
This file was deleted.

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
export type ComponentStatus = 'stable' | 'use-with-caution' | 'not-recommended' | 'unaudited';
2+
export type ComponentWhereUsed = 'global' | 'editor';
3+
4+
export type ComponentData = {
5+
id: string;
6+
name: string;
7+
whereUsed: ComponentWhereUsed;
8+
status: ComponentStatus;
9+
figma?: string;
10+
docs: string;
11+
notes?: string;
12+
};
13+
14+
export const statuses: {
15+
value: ComponentStatus;
16+
label: string;
17+
description: string;
18+
icon: string;
19+
}[] = [
20+
{
21+
value: 'stable',
22+
label: 'Stable',
23+
description: 'This component can be used safely.',
24+
icon: '✅',
25+
},
26+
{
27+
value: 'use-with-caution',
28+
label: 'Use with caution',
29+
description: 'See notes.',
30+
icon: '⚠️',
31+
},
32+
{
33+
value: 'not-recommended',
34+
label: 'Not recommended',
35+
description: 'Do not use this component.',
36+
icon: '🚫',
37+
},
38+
{
39+
value: 'unaudited',
40+
label: 'Unaudited',
41+
description:
42+
'This component has not been audited yet, and is not necessarily recommended for use.',
43+
icon: '❓',
44+
},
45+
];
46+
47+
export const data: ComponentData[] = [
48+
{
49+
id: 'alignment-matrix-control',
50+
name: 'AlignmentMatrixControl',
51+
whereUsed: 'editor',
52+
status: 'stable',
53+
figma:
54+
'https://www.figma.com/design/804HN2REV2iap2ytjRQ055/WordPress-Design-System?node-id=16471-139353',
55+
docs: 'https://wordpress.github.io/gutenberg/?path=/docs/components-alignmentmatrixcontrol--docs',
56+
},
57+
{
58+
id: 'angle-picker-control',
59+
name: 'AnglePickerControl',
60+
whereUsed: 'editor',
61+
status: 'stable',
62+
figma:
63+
'https://www.figma.com/design/804HN2REV2iap2ytjRQ055/WordPress-Design-System?node-id=16471-149161',
64+
docs: 'https://wordpress.github.io/gutenberg/?path=/docs/components-anglepickercontrol--docs',
65+
},
66+
{
67+
id: 'animate',
68+
name: 'Animate',
69+
whereUsed: 'global',
70+
status: 'not-recommended',
71+
docs: 'https://wordpress.github.io/gutenberg/?path=/docs/components-animate--docs',
72+
notes: 'Planned for deprecation.',
73+
},
74+
];

‎apps/design-system-docs/docs/components/packages/wp-components/icon-link/icon-figma.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
export const IconFigma = () => {
2+
return (
3+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
4+
<g clip-path="url(#clip0_2162_27)">
5+
<path
6+
d="M6.83594 17.9688C6.83594 16.4586 8.10389 15.2344 9.66797 15.2344H12.5V17.9688C12.5 19.4789 11.232 20.7031 9.66797 20.7031C8.10389 20.7031 6.83594 19.4789 6.83594 17.9688Z"
7+
fill="#24CB71"
8+
/>
9+
<path
10+
d="M12.5 4.29688V9.76562H15.332C16.8961 9.76562 18.1641 8.54139 18.1641 7.03125C18.1641 5.52111 16.8961 4.29688 15.332 4.29688H12.5Z"
11+
fill="#FF7237"
12+
/>
13+
<path
14+
d="M15.3084 15.2344C16.8725 15.2344 18.1404 14.0102 18.1404 12.5C18.1404 10.9898 16.8725 9.76562 15.3084 9.76562C13.7443 9.76562 12.4764 10.9898 12.4764 12.5C12.4764 14.0102 13.7443 15.2344 15.3084 15.2344Z"
15+
fill="#00B6FF"
16+
/>
17+
<path
18+
d="M6.83594 7.03125C6.83594 8.54139 8.10389 9.76562 9.66797 9.76562H12.5V4.29688H9.66797C8.10389 4.29688 6.83594 5.52111 6.83594 7.03125Z"
19+
fill="#FF3737"
20+
/>
21+
<path
22+
d="M6.83594 12.5C6.83594 14.0101 8.10389 15.2344 9.66797 15.2344H12.5V9.76562H9.66797C8.10389 9.76562 6.83594 10.9899 6.83594 12.5Z"
23+
fill="#874FFF"
24+
/>
25+
</g>
26+
<defs>
27+
<clipPath id="clip0_2162_27">
28+
<rect width="24" height="24" fill="white" />
29+
</clipPath>
30+
</defs>
31+
</svg>
32+
);
33+
};

‎apps/design-system-docs/docs/components/packages/wp-components/icon-link/icon-storybook.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
export const IconStorybook = () => {
2+
return (
3+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
4+
<g clip-path="url(#clip0_2162_28)">
5+
<path
6+
d="M18.8042 4.98071C18.8053 4.9969 18.8059 5.01311 18.8059 5.02933V18.9707C18.8059 19.4011 18.4263 19.75 17.9579 19.75C17.9453 19.75 17.9326 19.7497 17.9199 19.7492L6.60159 19.282C6.16078 19.2638 5.80883 18.938 5.79229 18.5327L5.26983 5.73869C5.25258 5.31615 5.6051 4.95806 6.06429 4.93168L15.3457 4.3985L15.265 6.1552C15.2641 6.17545 15.269 6.19545 15.279 6.21326L15.2906 6.23028C15.3329 6.28143 15.4122 6.29145 15.4679 6.25264L16.2103 5.73505L16.8374 6.18905C16.8609 6.20606 16.8902 6.21487 16.9201 6.21391C16.9899 6.21167 17.0445 6.15783 17.0421 6.09367L16.9719 4.305L17.9051 4.25154C18.3725 4.2247 18.775 4.55116 18.8042 4.98071Z"
7+
fill="#FF4785"
8+
/>
9+
<mask id="mask0_2162_28" maskUnits="userSpaceOnUse" x="5" y="4" width="14" height="16">
10+
<path
11+
d="M5.79229 18.5327L5.26983 5.73869C5.25258 5.31615 5.6051 4.95806 6.06429 4.93168L17.9051 4.25154C18.3725 4.2247 18.775 4.55116 18.8042 4.98071C18.8053 4.9969 18.8059 5.01311 18.8059 5.02933V18.9707C18.8059 19.4011 18.4263 19.75 17.9579 19.75C17.9453 19.75 17.9326 19.7497 17.9199 19.7492L6.60159 19.282C6.16078 19.2638 5.80883 18.938 5.79229 18.5327Z"
12+
fill="white"
13+
/>
14+
</mask>
15+
<g mask="url(#mask0_2162_28)">
16+
<path
17+
d="M13.1854 10.0922C13.1854 10.3954 15.4076 10.25 15.7059 10.0371C15.7059 7.9724 14.5005 6.88745 12.2931 6.88745C10.0857 6.88745 8.84899 7.98928 8.84899 9.64203C8.84899 12.5206 13.0758 12.5757 13.0758 14.1458C13.0758 14.5865 12.841 14.8482 12.3244 14.8482C11.6512 14.8482 11.3851 14.5322 11.4164 13.458C11.4164 13.2249 8.84899 13.1522 8.77071 13.458C8.57139 16.0613 10.3362 16.8122 12.3557 16.8122C14.3126 16.8122 15.8468 15.8536 15.8468 14.1182C15.8468 11.0331 11.5573 11.1157 11.5573 9.58694C11.5573 8.96716 12.0583 8.88452 12.3557 8.88452C12.6688 8.88452 13.2324 8.93524 13.1854 10.0922Z"
18+
fill="white"
19+
/>
20+
</g>
21+
<mask id="mask1_2162_28" maskUnits="userSpaceOnUse" x="5" y="4" width="14" height="16">
22+
<path
23+
d="M5.79229 18.5327L5.26983 5.73869C5.25258 5.31615 5.6051 4.95806 6.06429 4.93168L17.9051 4.25154C18.3725 4.2247 18.775 4.55116 18.8042 4.98071C18.8053 4.9969 18.8059 5.01311 18.8059 5.02933V18.9707C18.8059 19.4011 18.4263 19.75 17.9579 19.75C17.9453 19.75 17.9326 19.7497 17.9199 19.7492L6.60159 19.282C6.16078 19.2638 5.80883 18.938 5.79229 18.5327Z"
24+
fill="white"
25+
/>
26+
</mask>
27+
<g mask="url(#mask1_2162_28)">
28+
<path
29+
d="M15.265 6.15531L15.3459 4.39801L16.972 4.30469L17.042 6.09379C17.0445 6.15795 16.9898 6.21178 16.92 6.21402C16.8901 6.21498 16.8608 6.20617 16.8373 6.18916L16.2103 5.73516L15.4678 6.25276C15.4122 6.29156 15.3328 6.28155 15.2906 6.2304C15.2728 6.20886 15.2638 6.18231 15.265 6.15531Z"
30+
fill="white"
31+
/>
32+
</g>
33+
</g>
34+
<defs>
35+
<clipPath id="clip0_2162_28">
36+
<rect width="14" height="16" fill="white" transform="translate(5 4)" />
37+
</clipPath>
38+
</defs>
39+
</svg>
40+
);
41+
};

‎apps/design-system-docs/docs/components/packages/wp-components/icon-link/index.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Button } from '@wordpress/components';
2+
import { IconFigma } from './icon-figma';
3+
import { IconStorybook } from './icon-storybook';
4+
5+
export const IconLink = ( { href, type }: { href?: string; type: 'figma' | 'storybook' } ) => {
6+
if ( ! href ) {
7+
return null;
8+
}
9+
10+
return (
11+
<Button
12+
__next40pxDefaultSize
13+
accessibleWhenDisabled
14+
href={ href }
15+
target="_blank"
16+
rel="noreferrer"
17+
icon={ type === 'figma' ? <IconFigma /> : <IconStorybook /> }
18+
label={ `Open in ${ type.charAt( 0 ).toUpperCase() + type.slice( 1 ) }` }
19+
size="compact"
20+
/>
21+
);
22+
};

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
hide_table_of_contents: true
3+
---
4+
5+
import { WPComponentsTable } from './wp-components-table';
6+
7+
# @wordpress/components
8+
9+
<WPComponentsTable />

‎apps/design-system-docs/docs/components/packages/wp-components/status-indicator.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Tooltip } from '@wordpress/components';
2+
import { ComponentStatus, statuses } from './data';
3+
import styles from './style.module.scss';
4+
5+
export const StatusIndicator = ( { status }: { status: ComponentStatus } ) => {
6+
return (
7+
<Tooltip text={ statuses.find( ( s ) => s.value === status )?.label }>
8+
<div
9+
className={ styles[ 'status-indicator' ] }
10+
aria-label={ statuses.find( ( s ) => s.value === status )?.label }
11+
>
12+
{ statuses.find( ( s ) => s.value === status )?.icon }
13+
</div>
14+
</Tooltip>
15+
);
16+
};

‎apps/design-system-docs/docs/components/packages/wp-components/style.module.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@use '@wordpress/base-styles/variables';
2+
3+
.status-indicator {
4+
width: variables.$button-size-compact;
5+
aspect-ratio: 1;
6+
font-size: 16px;
7+
display: flex;
8+
align-items: center;
9+
justify-content: center;
10+
cursor: help;
11+
}

‎apps/design-system-docs/docs/components/packages/wp-components/wp-components-table.tsx

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { DataViews, filterSortAndPaginate, type Field, type View } from '@wordpress/dataviews';
2+
import { useState } from 'react';
3+
import { data, statuses, type ComponentData } from './data';
4+
import { IconLink } from './icon-link';
5+
import { StatusIndicator } from './status-indicator';
6+
7+
const FIELDS: Field< ComponentData >[] = [
8+
{
9+
id: 'status',
10+
label: 'Status',
11+
enableHiding: true,
12+
elements: statuses,
13+
render: ( { item } ) => {
14+
return <StatusIndicator status={ item.status } />;
15+
},
16+
},
17+
{
18+
id: 'name',
19+
label: 'Name',
20+
enableHiding: false,
21+
enableGlobalSearch: true,
22+
},
23+
{
24+
id: 'whereUsed',
25+
label: 'Where used',
26+
enableHiding: true,
27+
elements: [
28+
{ value: 'global', label: 'Global' },
29+
{ value: 'editor', label: 'Editor' },
30+
],
31+
},
32+
{
33+
id: 'docs',
34+
label: 'Docs',
35+
enableHiding: true,
36+
enableSorting: false,
37+
render: ( { item } ) => {
38+
return <IconLink href={ item.docs } type="storybook" />;
39+
},
40+
},
41+
{
42+
id: 'figma',
43+
label: 'Figma',
44+
enableHiding: true,
45+
enableSorting: false,
46+
render: ( { item } ) => {
47+
return <IconLink href={ item.figma } type="figma" />;
48+
},
49+
},
50+
{
51+
id: 'notes',
52+
label: 'Notes',
53+
enableHiding: true,
54+
enableSorting: false,
55+
},
56+
];
57+
58+
export function WPComponentsTable() {
59+
const [ view, setView ] = useState< View >( {
60+
type: 'table',
61+
page: 1,
62+
sort: {
63+
field: 'name',
64+
direction: 'asc',
65+
},
66+
titleField: 'name',
67+
fields: [ 'status', 'whereUsed', 'docs', 'figma', 'notes' ],
68+
} );
69+
70+
const { data: filteredData, paginationInfo } = filterSortAndPaginate( data, view, FIELDS );
71+
72+
return (
73+
<DataViews
74+
data={ filteredData ?? [] }
75+
fields={ FIELDS }
76+
view={ view }
77+
onChangeView={ setView }
78+
paginationInfo={ paginationInfo }
79+
defaultLayouts={ {} }
80+
/>
81+
);
82+
}

‎apps/design-system-docs/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"@docusaurus/preset-classic": "^3.7.0",
2828
"@mdx-js/react": "^3.1.0",
2929
"@wordpress/components": "^29.9.0",
30+
"@wordpress/dataviews": "^4.19.0",
3031
"prism-react-renderer": "^2.3.0",
3132
"react": "^18.3.1",
3233
"react-dom": "^18.3.1"

‎apps/design-system-docs/src/css/custom.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
*/
66

77
@import '@wordpress/components/build-style/style.css';
8+
@import '@wordpress/dataviews/build-style/style.css';
89

910
/* You can override the default Infima variables here. */
1011
:root {

‎yarn.lock

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1124,6 +1124,7 @@ __metadata:
11241124
"@wordpress/base-styles": "npm:^5.23.0"
11251125
"@wordpress/browserslist-config": "npm:^6.23.0"
11261126
"@wordpress/components": "npm:^29.9.0"
1127+
"@wordpress/dataviews": "npm:^4.19.0"
11271128
docusaurus-plugin-sass: "npm:^0.2.6"
11281129
prism-react-renderer: "npm:^2.3.0"
11291130
react: "npm:^18.3.1"

0 commit comments

Comments
 (0)