@astryxdesign/cli 0.5.2-canary.e4f8e4e → 0.5.2-canary.e678380
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/api/theme/targets/targets.test.mjs +15 -0
- package/assets/docs/typography.doc.mjs +2 -2
- package/assets/templates/blocks/components/DateTimeInput/DateTimeInputShowcase.tsx +4 -1
- package/assets/templates/blocks/components/Table/TableRowStatusTable.doc.mjs +3 -3
- package/assets/templates/blocks/components/Table/TableRowStatusTable.tsx +4 -4
- package/assets/templates/blocks/components/TimeInput/TimeInputShowcase.doc.mjs +1 -1
- package/assets/templates/blocks/components/TimeInput/TimeInputShowcase.tsx +12 -6
- package/assets/templates/pages/table-filter/page.tsx +897 -365
- package/foundation/discovery/__fixtures__/component-accessibility-overlay.doc.d.mts +16 -1
- package/foundation/discovery/__fixtures__/component-accessibility-overlay.doc.mjs +17 -2
- package/foundation/discovery/__fixtures__/component-anatomy-override.doc.d.mts +38 -0
- package/foundation/discovery/__fixtures__/component-anatomy-override.doc.mjs +45 -0
- package/foundation/discovery/component-loader.mjs +6 -2
- package/foundation/discovery/component-loader.test.mjs +36 -1
- package/foundation/discovery/componentDocOverlay.test.mjs +29 -2
- package/foundation/discovery/theming-targets.d.mts +8 -3
- package/foundation/discovery/theming-targets.mjs +58 -6
- package/foundation/discovery/theming-targets.test.mjs +71 -2
- package/package.json +9 -9
|
@@ -39,6 +39,21 @@ describe('themeTargets (api/theme/targets)', () => {
|
|
|
39
39
|
]);
|
|
40
40
|
}, 60_000);
|
|
41
41
|
|
|
42
|
+
it.each(['table-header', 'table-body', 'table-footer'])(
|
|
43
|
+
'%s appears once under the Table owner',
|
|
44
|
+
async target => {
|
|
45
|
+
const {data} = await themeTargets('Table');
|
|
46
|
+
const matches = data.targets.filter(entry => entry.key === target);
|
|
47
|
+
expect(data.componentCount).toBe(1);
|
|
48
|
+
expect(matches).toHaveLength(1);
|
|
49
|
+
expect(matches[0]).toMatchObject({
|
|
50
|
+
key: target,
|
|
51
|
+
component: 'Table',
|
|
52
|
+
});
|
|
53
|
+
},
|
|
54
|
+
60_000,
|
|
55
|
+
);
|
|
56
|
+
|
|
42
57
|
// Half the system's keys contain "button" (chat-send-button, toggle-button,
|
|
43
58
|
// …). A component name has to mean the component, or `theme targets Button`
|
|
44
59
|
// answers a different question than `component Button` and the two views
|
|
@@ -56,7 +56,7 @@ export const docs = {
|
|
|
56
56
|
{
|
|
57
57
|
type: 'code',
|
|
58
58
|
lang: 'html',
|
|
59
|
-
label: 'Google Fonts
|
|
59
|
+
label: 'Google Fonts: add to your document <head>',
|
|
60
60
|
code: `<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
61
61
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
62
62
|
<link
|
|
@@ -67,7 +67,7 @@ export const docs = {
|
|
|
67
67
|
{
|
|
68
68
|
type: 'code',
|
|
69
69
|
lang: 'css',
|
|
70
|
-
label: 'Self-hosted
|
|
70
|
+
label: 'Self-hosted: one @font-face per family and weight',
|
|
71
71
|
code: `@font-face {
|
|
72
72
|
font-family: 'Fraunces';
|
|
73
73
|
src: url('/fonts/fraunces.woff2') format('woff2');
|
|
@@ -13,7 +13,10 @@ export default function DateTimeInputShowcase() {
|
|
|
13
13
|
);
|
|
14
14
|
|
|
15
15
|
return (
|
|
16
|
-
<Stack
|
|
16
|
+
<Stack
|
|
17
|
+
direction="vertical"
|
|
18
|
+
width="100%"
|
|
19
|
+
style={{minWidth: 240, maxWidth: 400}}>
|
|
17
20
|
<DateTimeInput
|
|
18
21
|
label="Meeting time"
|
|
19
22
|
placeholder="Select a date"
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
export const doc = {
|
|
5
5
|
type: 'block',
|
|
6
6
|
exampleFor: 'useTableRowStatus',
|
|
7
|
-
name: 'useTableRowStatus - Status
|
|
8
|
-
displayName: 'useTableRowStatus - Status
|
|
7
|
+
name: 'useTableRowStatus - Status Icons',
|
|
8
|
+
displayName: 'useTableRowStatus - Status Icons',
|
|
9
9
|
description:
|
|
10
|
-
'A job table using useTableRowStatus
|
|
10
|
+
'A job table using useTableRowStatus. Semantic outcomes use the themed success, warning, and error icons; a palette-only queued state keeps the neutral dot.',
|
|
11
11
|
isReady: true,
|
|
12
12
|
aspectRatio: 16 / 9,
|
|
13
13
|
componentsUsed: ['Table'],
|
|
@@ -34,13 +34,13 @@ const columns: TableColumn<Job>[] = [
|
|
|
34
34
|
function jobStatus(job: Job): TableRowStatus | null {
|
|
35
35
|
switch (job.state) {
|
|
36
36
|
case 'failed':
|
|
37
|
-
return {color: 'error',
|
|
37
|
+
return {color: 'error', label: 'Failed'};
|
|
38
38
|
case 'running':
|
|
39
|
-
return {color: 'warning',
|
|
39
|
+
return {color: 'warning', label: 'Running'};
|
|
40
40
|
case 'queued':
|
|
41
41
|
return {color: 'gray', label: 'Queued'};
|
|
42
|
-
|
|
43
|
-
return
|
|
42
|
+
case 'succeeded':
|
|
43
|
+
return {color: 'success', label: 'Succeeded'};
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
|
|
@@ -4,15 +4,21 @@
|
|
|
4
4
|
|
|
5
5
|
import {useState} from 'react';
|
|
6
6
|
import {TimeInput, type ISOTimeString} from '@astryxdesign/core/TimeInput';
|
|
7
|
+
import {Stack} from '@astryxdesign/core/Layout';
|
|
7
8
|
|
|
8
9
|
export default function TimeInputShowcase() {
|
|
9
10
|
const [time, setTime] = useState<ISOTimeString | undefined>(undefined);
|
|
10
11
|
return (
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
<Stack
|
|
13
|
+
direction="vertical"
|
|
14
|
+
width="100%"
|
|
15
|
+
style={{minWidth: 240, maxWidth: 400}}>
|
|
16
|
+
<TimeInput
|
|
17
|
+
label="Time"
|
|
18
|
+
placeholder="Select a time"
|
|
19
|
+
value={time}
|
|
20
|
+
onChange={setTime}
|
|
21
|
+
/>
|
|
22
|
+
</Stack>
|
|
17
23
|
);
|
|
18
24
|
}
|