@synergy-design-system/metadata 3.8.0 → 3.10.0
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/CHANGELOG.md +21 -0
- package/data/core/component/component:syn-chart.json +181 -0
- package/data/core/setup/setup:angular-components-module.json +1 -1
- package/data/core/setup/setup:angular-forms-module.json +1 -1
- package/data/core/setup/setup:angular-package.json +2 -2
- package/data/core/setup/setup:angular-validators-module.json +1 -1
- package/data/core/setup/setup:components-package.json +2 -2
- package/data/core/setup/setup:react-package.json +2 -2
- package/data/core/setup/setup:tokens-package.json +10 -2
- package/data/core/setup/setup:vue-package.json +2 -2
- package/data/core/token/token:tokens-charts-js-index-d-ts.json +31 -0
- package/data/core/token/token:tokens-charts-js-index-js.json +31 -0
- package/data/core/token/token:tokens-charts-scss-tokens-scss.json +31 -0
- package/data/core/token/token:tokens-charts-themes-sick2025-dark-css.json +32 -0
- package/data/core/token/token:tokens-charts-themes-sick2025-light-css.json +32 -0
- package/data/core/token/token:tokens-figma-variables-sick2018-dark-json.json +1 -1
- package/data/core/token/token:tokens-figma-variables-sick2018-light-json.json +1 -1
- package/data/core/token/token:tokens-figma-variables-sick2025-dark-json.json +1 -1
- package/data/core/token/token:tokens-figma-variables-sick2025-light-json.json +1 -1
- package/data/core/token/token:tokens-js-index-d-ts.json +1 -1
- package/data/core/token/token:tokens-js-index-js.json +1 -1
- package/data/core/token/token:tokens-scss-tokens-scss.json +1 -1
- package/data/core/token/token:tokens-themes-sick2018-dark-css.json +1 -1
- package/data/core/token/token:tokens-themes-sick2018-light-css.json +1 -1
- package/data/core/token/token:tokens-themes-sick2025-dark-css.json +1 -1
- package/data/core/token/token:tokens-themes-sick2025-light-css.json +1 -1
- package/data/index.json +108 -1
- package/data/layers/examples/component/component:syn-chart.md +191 -0
- package/data/layers/full/component/component:syn-accordion/angular/accordion.component.ts +1 -1
- package/data/layers/full/component/component:syn-accordion/vue/SynVueAccordion.vue +1 -1
- package/data/layers/full/component/component:syn-alert/angular/alert.component.ts +1 -1
- package/data/layers/full/component/component:syn-alert/vue/SynVueAlert.vue +1 -1
- package/data/layers/full/component/component:syn-badge/angular/badge.component.ts +1 -1
- package/data/layers/full/component/component:syn-badge/vue/SynVueBadge.vue +1 -1
- package/data/layers/full/component/component:syn-breadcrumb/angular/breadcrumb.component.ts +1 -1
- package/data/layers/full/component/component:syn-breadcrumb/vue/SynVueBreadcrumb.vue +1 -1
- package/data/layers/full/component/component:syn-breadcrumb-item/angular/breadcrumb-item.component.ts +1 -1
- package/data/layers/full/component/component:syn-breadcrumb-item/vue/SynVueBreadcrumbItem.vue +1 -1
- package/data/layers/full/component/component:syn-button/angular/button.component.ts +1 -1
- package/data/layers/full/component/component:syn-button/vue/SynVueButton.vue +1 -1
- package/data/layers/full/component/component:syn-button-group/angular/button-group.component.ts +1 -1
- package/data/layers/full/component/component:syn-button-group/vue/SynVueButtonGroup.vue +1 -1
- package/data/layers/full/component/component:syn-card/angular/card.component.ts +1 -1
- package/data/layers/full/component/component:syn-card/vue/SynVueCard.vue +1 -1
- package/data/layers/full/component/component:syn-chart/angular/chart.component.ts +84 -0
- package/data/layers/full/component/component:syn-chart/components/chart.component.ts +181 -0
- package/data/layers/full/component/component:syn-chart/components/chart.palettes.ts +110 -0
- package/data/layers/full/component/component:syn-chart/components/chart.styles.ts +15 -0
- package/data/layers/full/component/component:syn-chart/components/chart.ts +14 -0
- package/data/layers/full/component/component:syn-chart/components/types.ts +5 -0
- package/data/layers/full/component/component:syn-chart/react/SynChartJSXElement.ts +1 -0
- package/data/layers/full/component/component:syn-chart/react/chart.ts +28 -0
- package/data/layers/full/component/component:syn-chart/vue/SynVueChart.vue +76 -0
- package/data/layers/full/component/component:syn-checkbox/angular/checkbox.component.ts +1 -1
- package/data/layers/full/component/component:syn-checkbox/vue/SynVueCheckbox.vue +1 -1
- package/data/layers/full/component/component:syn-combobox/angular/combobox.component.ts +1 -1
- package/data/layers/full/component/component:syn-combobox/vue/SynVueCombobox.vue +1 -1
- package/data/layers/full/component/component:syn-details/angular/details.component.ts +1 -1
- package/data/layers/full/component/component:syn-details/vue/SynVueDetails.vue +1 -1
- package/data/layers/full/component/component:syn-dialog/angular/dialog.component.ts +1 -1
- package/data/layers/full/component/component:syn-dialog/vue/SynVueDialog.vue +1 -1
- package/data/layers/full/component/component:syn-divider/angular/divider.component.ts +1 -1
- package/data/layers/full/component/component:syn-divider/vue/SynVueDivider.vue +1 -1
- package/data/layers/full/component/component:syn-drawer/angular/drawer.component.ts +1 -1
- package/data/layers/full/component/component:syn-drawer/vue/SynVueDrawer.vue +1 -1
- package/data/layers/full/component/component:syn-dropdown/angular/dropdown.component.ts +1 -1
- package/data/layers/full/component/component:syn-dropdown/vue/SynVueDropdown.vue +1 -1
- package/data/layers/full/component/component:syn-file/angular/file.component.ts +1 -1
- package/data/layers/full/component/component:syn-file/vue/SynVueFile.vue +1 -1
- package/data/layers/full/component/component:syn-header/angular/header.component.ts +1 -1
- package/data/layers/full/component/component:syn-header/vue/SynVueHeader.vue +1 -1
- package/data/layers/full/component/component:syn-icon/angular/icon.component.ts +1 -1
- package/data/layers/full/component/component:syn-icon/vue/SynVueIcon.vue +1 -1
- package/data/layers/full/component/component:syn-icon-button/angular/icon-button.component.ts +1 -1
- package/data/layers/full/component/component:syn-icon-button/vue/SynVueIconButton.vue +1 -1
- package/data/layers/full/component/component:syn-input/angular/input.component.ts +1 -1
- package/data/layers/full/component/component:syn-input/vue/SynVueInput.vue +1 -1
- package/data/layers/full/component/component:syn-menu/angular/menu.component.ts +1 -1
- package/data/layers/full/component/component:syn-menu/vue/SynVueMenu.vue +1 -1
- package/data/layers/full/component/component:syn-menu-item/angular/menu-item.component.ts +1 -1
- package/data/layers/full/component/component:syn-menu-item/vue/SynVueMenuItem.vue +1 -1
- package/data/layers/full/component/component:syn-menu-label/angular/menu-label.component.ts +1 -1
- package/data/layers/full/component/component:syn-menu-label/vue/SynVueMenuLabel.vue +1 -1
- package/data/layers/full/component/component:syn-nav-item/angular/nav-item.component.ts +1 -1
- package/data/layers/full/component/component:syn-nav-item/vue/SynVueNavItem.vue +1 -1
- package/data/layers/full/component/component:syn-optgroup/angular/optgroup.component.ts +1 -1
- package/data/layers/full/component/component:syn-optgroup/vue/SynVueOptgroup.vue +1 -1
- package/data/layers/full/component/component:syn-option/angular/option.component.ts +1 -1
- package/data/layers/full/component/component:syn-option/vue/SynVueOption.vue +1 -1
- package/data/layers/full/component/component:syn-pagination/angular/pagination.component.ts +1 -1
- package/data/layers/full/component/component:syn-pagination/vue/SynVuePagination.vue +1 -1
- package/data/layers/full/component/component:syn-popup/angular/popup.component.ts +1 -1
- package/data/layers/full/component/component:syn-popup/vue/SynVuePopup.vue +1 -1
- package/data/layers/full/component/component:syn-prio-nav/angular/prio-nav.component.ts +1 -1
- package/data/layers/full/component/component:syn-prio-nav/vue/SynVuePrioNav.vue +1 -1
- package/data/layers/full/component/component:syn-progress-bar/angular/progress-bar.component.ts +1 -1
- package/data/layers/full/component/component:syn-progress-bar/vue/SynVueProgressBar.vue +1 -1
- package/data/layers/full/component/component:syn-progress-ring/angular/progress-ring.component.ts +1 -1
- package/data/layers/full/component/component:syn-progress-ring/vue/SynVueProgressRing.vue +1 -1
- package/data/layers/full/component/component:syn-radio/angular/radio.component.ts +1 -1
- package/data/layers/full/component/component:syn-radio/vue/SynVueRadio.vue +1 -1
- package/data/layers/full/component/component:syn-radio-button/angular/radio-button.component.ts +1 -1
- package/data/layers/full/component/component:syn-radio-button/vue/SynVueRadioButton.vue +1 -1
- package/data/layers/full/component/component:syn-radio-group/angular/radio-group.component.ts +1 -1
- package/data/layers/full/component/component:syn-radio-group/vue/SynVueRadioGroup.vue +1 -1
- package/data/layers/full/component/component:syn-range/angular/range.component.ts +1 -1
- package/data/layers/full/component/component:syn-range/vue/SynVueRange.vue +1 -1
- package/data/layers/full/component/component:syn-range-tick/angular/range-tick.component.ts +1 -1
- package/data/layers/full/component/component:syn-range-tick/vue/SynVueRangeTick.vue +1 -1
- package/data/layers/full/component/component:syn-select/angular/select.component.ts +1 -1
- package/data/layers/full/component/component:syn-select/vue/SynVueSelect.vue +1 -1
- package/data/layers/full/component/component:syn-side-nav/angular/side-nav.component.ts +1 -1
- package/data/layers/full/component/component:syn-side-nav/vue/SynVueSideNav.vue +1 -1
- package/data/layers/full/component/component:syn-spinner/angular/spinner.component.ts +1 -1
- package/data/layers/full/component/component:syn-spinner/vue/SynVueSpinner.vue +1 -1
- package/data/layers/full/component/component:syn-switch/angular/switch.component.ts +1 -1
- package/data/layers/full/component/component:syn-switch/vue/SynVueSwitch.vue +1 -1
- package/data/layers/full/component/component:syn-tab/angular/tab.component.ts +1 -1
- package/data/layers/full/component/component:syn-tab/vue/SynVueTab.vue +1 -1
- package/data/layers/full/component/component:syn-tab-group/angular/tab-group.component.ts +1 -1
- package/data/layers/full/component/component:syn-tab-group/vue/SynVueTabGroup.vue +1 -1
- package/data/layers/full/component/component:syn-tab-panel/angular/tab-panel.component.ts +1 -1
- package/data/layers/full/component/component:syn-tab-panel/vue/SynVueTabPanel.vue +1 -1
- package/data/layers/full/component/component:syn-tag/angular/tag.component.ts +1 -1
- package/data/layers/full/component/component:syn-tag/vue/SynVueTag.vue +1 -1
- package/data/layers/full/component/component:syn-tag-group/angular/tag-group.component.ts +1 -1
- package/data/layers/full/component/component:syn-tag-group/vue/SynVueTagGroup.vue +1 -1
- package/data/layers/full/component/component:syn-textarea/angular/textarea.component.ts +1 -1
- package/data/layers/full/component/component:syn-textarea/vue/SynVueTextarea.vue +1 -1
- package/data/layers/full/component/component:syn-tooltip/angular/tooltip.component.ts +1 -1
- package/data/layers/full/component/component:syn-tooltip/vue/SynVueTooltip.vue +1 -1
- package/data/layers/full/component/component:syn-validate/angular/validate.component.ts +1 -1
- package/data/layers/full/component/component:syn-validate/vue/SynVueValidate.vue +1 -1
- package/data/layers/full/setup/setup:angular-package/angular/CHANGELOG.md +19 -0
- package/data/layers/full/setup/setup:angular-package/angular/README.md +4 -0
- package/data/layers/full/setup/setup:angular-package/angular/package.json +1 -1
- package/data/layers/full/setup/setup:components-package/components/CHANGELOG.md +18 -0
- package/data/layers/full/setup/setup:components-package/components/README.md +84 -2
- package/data/layers/full/setup/setup:components-package/components/package.json +8 -5
- package/data/layers/full/setup/setup:react-package/react/CHANGELOG.md +19 -0
- package/data/layers/full/setup/setup:react-package/react/README.md +4 -0
- package/data/layers/full/setup/setup:react-package/react/package.json +1 -1
- package/data/layers/full/setup/setup:react-package/react/syn-jsx-elements.ts +19 -0
- package/data/layers/full/setup/setup:tokens-package/tokens/CHANGELOG.md +16 -0
- package/data/layers/full/setup/setup:tokens-package/tokens/README.md +119 -19
- package/data/layers/full/setup/setup:tokens-package/tokens/package.json +11 -6
- package/data/layers/full/setup/setup:vue-package/vue/CHANGELOG.md +19 -0
- package/data/layers/full/setup/setup:vue-package/vue/README.md +4 -0
- package/data/layers/full/setup/setup:vue-package/vue/package.json +9 -2
- package/data/layers/full/tokens/charts/js/index.d.ts +664 -0
- package/data/layers/full/tokens/charts/js/index.js +664 -0
- package/data/layers/full/tokens/charts/scss/_tokens.scss +136 -0
- package/data/layers/full/tokens/charts/themes/sick2025_dark.css +142 -0
- package/data/layers/full/tokens/charts/themes/sick2025_light.css +142 -0
- package/data/layers/full/tokens/figma-variables/sick2025-light.json +12 -12
- package/data/layers/full/tokens/js/index.d.ts +1 -1
- package/data/layers/full/tokens/js/index.js +1 -1
- package/data/layers/full/tokens/scss/_tokens.scss +1 -1
- package/data/layers/full/tokens/themes/sick2018_dark.css +1 -1
- package/data/layers/full/tokens/themes/sick2018_light.css +1 -1
- package/data/layers/full/tokens/themes/sick2025_dark.css +1 -1
- package/data/layers/full/tokens/themes/sick2025_light.css +12 -12
- package/data/layers/interface/component/component:syn-chart.json +51 -0
- package/data/layers/interface/component/component:syn-chart.md +61 -0
- package/data/layers/rules/component/component:syn-chart.md +39 -0
- package/data/manifest.json +3 -3
- package/package.json +5 -5
- package/dist/intentPolicy/capabilities/action.d.ts +0 -2
- package/dist/intentPolicy/capabilities/action.js +0 -26
- package/dist/intentPolicy/capabilities/assistance.d.ts +0 -2
- package/dist/intentPolicy/capabilities/assistance.js +0 -10
- package/dist/intentPolicy/capabilities/disclosure.d.ts +0 -2
- package/dist/intentPolicy/capabilities/disclosure.js +0 -14
- package/dist/intentPolicy/capabilities/feedback.d.ts +0 -2
- package/dist/intentPolicy/capabilities/feedback.js +0 -42
- package/dist/intentPolicy/capabilities/index.d.ts +0 -6
- package/dist/intentPolicy/capabilities/index.js +0 -22
- package/dist/intentPolicy/capabilities/input.d.ts +0 -2
- package/dist/intentPolicy/capabilities/input.js +0 -38
- package/dist/intentPolicy/capabilities/navigation.d.ts +0 -2
- package/dist/intentPolicy/capabilities/navigation.js +0 -54
- package/dist/intentPolicy/capabilities/status.d.ts +0 -2
- package/dist/intentPolicy/capabilities/status.js +0 -14
- package/dist/intentPolicy/capabilities/structure.d.ts +0 -2
- package/dist/intentPolicy/capabilities/structure.js +0 -22
- package/dist/intentPolicy/categories/action.d.ts +0 -2
- package/dist/intentPolicy/categories/action.js +0 -4
- package/dist/intentPolicy/categories/assistance.d.ts +0 -2
- package/dist/intentPolicy/categories/assistance.js +0 -4
- package/dist/intentPolicy/categories/disclosure.d.ts +0 -2
- package/dist/intentPolicy/categories/disclosure.js +0 -4
- package/dist/intentPolicy/categories/feedback.d.ts +0 -2
- package/dist/intentPolicy/categories/feedback.js +0 -4
- package/dist/intentPolicy/categories/index.d.ts +0 -5
- package/dist/intentPolicy/categories/index.js +0 -22
- package/dist/intentPolicy/categories/input.d.ts +0 -2
- package/dist/intentPolicy/categories/input.js +0 -4
- package/dist/intentPolicy/categories/navigation.d.ts +0 -2
- package/dist/intentPolicy/categories/navigation.js +0 -4
- package/dist/intentPolicy/categories/status.d.ts +0 -2
- package/dist/intentPolicy/categories/status.js +0 -4
- package/dist/intentPolicy/categories/structure.d.ts +0 -2
- package/dist/intentPolicy/categories/structure.js +0 -4
- package/dist/intentPolicy/intents/action.d.ts +0 -2
- package/dist/intentPolicy/intents/action.js +0 -38
- package/dist/intentPolicy/intents/assistance.d.ts +0 -2
- package/dist/intentPolicy/intents/assistance.js +0 -14
- package/dist/intentPolicy/intents/disclosure.d.ts +0 -2
- package/dist/intentPolicy/intents/disclosure.js +0 -20
- package/dist/intentPolicy/intents/feedback.d.ts +0 -2
- package/dist/intentPolicy/intents/feedback.js +0 -32
- package/dist/intentPolicy/intents/index.d.ts +0 -7
- package/dist/intentPolicy/intents/index.js +0 -23
- package/dist/intentPolicy/intents/input.d.ts +0 -2
- package/dist/intentPolicy/intents/input.js +0 -62
- package/dist/intentPolicy/intents/navigation.d.ts +0 -2
- package/dist/intentPolicy/intents/navigation.js +0 -44
- package/dist/intentPolicy/intents/status.d.ts +0 -2
- package/dist/intentPolicy/intents/status.js +0 -26
- package/dist/intentPolicy/intents/structure.d.ts +0 -2
- package/dist/intentPolicy/intents/structure.js +0 -32
- package/dist/intentPolicy/patterns/action.d.ts +0 -2
- package/dist/intentPolicy/patterns/action.js +0 -195
- package/dist/intentPolicy/patterns/assistance.d.ts +0 -2
- package/dist/intentPolicy/patterns/assistance.js +0 -13
- package/dist/intentPolicy/patterns/disclosure.d.ts +0 -2
- package/dist/intentPolicy/patterns/disclosure.js +0 -23
- package/dist/intentPolicy/patterns/feedback.d.ts +0 -2
- package/dist/intentPolicy/patterns/feedback.js +0 -44
- package/dist/intentPolicy/patterns/index.d.ts +0 -6
- package/dist/intentPolicy/patterns/index.js +0 -22
- package/dist/intentPolicy/patterns/input.d.ts +0 -2
- package/dist/intentPolicy/patterns/input.js +0 -99
- package/dist/intentPolicy/patterns/navigation.d.ts +0 -2
- package/dist/intentPolicy/patterns/navigation.js +0 -192
- package/dist/intentPolicy/patterns/status.d.ts +0 -2
- package/dist/intentPolicy/patterns/status.js +0 -32
- package/dist/intentPolicy/patterns/structure.d.ts +0 -2
- package/dist/intentPolicy/patterns/structure.js +0 -107
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
export const actionIntents = [
|
|
2
|
-
{
|
|
3
|
-
category: 'action',
|
|
4
|
-
description: 'Use when the component should present the primary action in a context.',
|
|
5
|
-
id: 'action.primary',
|
|
6
|
-
userGoal: 'Highlight the most important next action for the user.',
|
|
7
|
-
},
|
|
8
|
-
{
|
|
9
|
-
category: 'action',
|
|
10
|
-
description: 'Use when the component submits form data.',
|
|
11
|
-
id: 'action.submit',
|
|
12
|
-
userGoal: 'Submit user-provided data to a form handler.',
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
category: 'action',
|
|
16
|
-
description: 'Use when the component resets form state to defaults.',
|
|
17
|
-
id: 'action.reset',
|
|
18
|
-
userGoal: 'Clear or reset user-entered data.',
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
category: 'action',
|
|
22
|
-
description: 'Use when the component should navigate to another location.',
|
|
23
|
-
id: 'action.navigation',
|
|
24
|
-
userGoal: 'Move the user to another destination.',
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
category: 'action',
|
|
28
|
-
description: 'Use icon-only buttons for compact actions where space is constrained.',
|
|
29
|
-
id: 'action.button.icon',
|
|
30
|
-
userGoal: 'Provide a compact action trigger while preserving quick recognition.',
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
category: 'action',
|
|
34
|
-
description: 'Use grouped actions when related actions should be presented as one unit.',
|
|
35
|
-
id: 'action.grouped',
|
|
36
|
-
userGoal: 'Present related actions with clear grouping and consistent alignment.',
|
|
37
|
-
},
|
|
38
|
-
];
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
export const assistanceIntents = [
|
|
2
|
-
{
|
|
3
|
-
category: 'assistance',
|
|
4
|
-
description: 'Use tooltip guidance for short, non-critical contextual help.',
|
|
5
|
-
id: 'assistance.tooltip.contextual',
|
|
6
|
-
userGoal: 'Clarify a nearby control or value with concise supplemental text.',
|
|
7
|
-
},
|
|
8
|
-
{
|
|
9
|
-
category: 'assistance',
|
|
10
|
-
description: 'Use contextual icons to visually support meaning near controls or status text.',
|
|
11
|
-
id: 'assistance.icon.contextual',
|
|
12
|
-
userGoal: 'Improve scannability and comprehension with compact visual cues.',
|
|
13
|
-
},
|
|
14
|
-
];
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
export const disclosureIntents = [
|
|
2
|
-
{
|
|
3
|
-
category: 'disclosure',
|
|
4
|
-
description: 'Use details to progressively reveal one block of optional content.',
|
|
5
|
-
id: 'disclosure.details.on-demand',
|
|
6
|
-
userGoal: 'Show extra information only when requested by the user.',
|
|
7
|
-
},
|
|
8
|
-
{
|
|
9
|
-
category: 'disclosure',
|
|
10
|
-
description: 'Use accordions to reveal grouped sections and reduce information overload.',
|
|
11
|
-
id: 'disclosure.accordion.grouped',
|
|
12
|
-
userGoal: 'Organize larger content into scannable, expandable sections.',
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
category: 'disclosure',
|
|
16
|
-
description: 'Use popups to reveal related secondary content on demand near a trigger.',
|
|
17
|
-
id: 'disclosure.popup.on-demand',
|
|
18
|
-
userGoal: 'Show contextual secondary content without navigating away.',
|
|
19
|
-
},
|
|
20
|
-
];
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
export const feedbackIntents = [
|
|
2
|
-
{
|
|
3
|
-
category: 'feedback',
|
|
4
|
-
description: 'Use when contextual feedback should remain near the affected content.',
|
|
5
|
-
id: 'feedback.inline',
|
|
6
|
-
userGoal: 'Explain outcome directly in the current workflow context.',
|
|
7
|
-
},
|
|
8
|
-
{
|
|
9
|
-
category: 'feedback',
|
|
10
|
-
description: 'Use when a short, non-blocking overlay notification is sufficient.',
|
|
11
|
-
id: 'feedback.toast',
|
|
12
|
-
userGoal: 'Acknowledge an event without interrupting the current task.',
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
category: 'feedback',
|
|
16
|
-
description: 'Use badges to communicate compact status or count information inline.',
|
|
17
|
-
id: 'feedback.badge.status',
|
|
18
|
-
userGoal: 'Expose concise status signals without interrupting surrounding content.',
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
category: 'feedback',
|
|
22
|
-
description: 'Use tag labels to communicate categorization or state in compact form.',
|
|
23
|
-
id: 'feedback.tag.label',
|
|
24
|
-
userGoal: 'Help users identify and scan categories or states quickly.',
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
category: 'feedback',
|
|
28
|
-
description: 'Use generic validation feedback to explain invalid or missing input.',
|
|
29
|
-
id: 'feedback.validation.generic',
|
|
30
|
-
userGoal: 'Guide users to correct invalid form input with clear feedback.',
|
|
31
|
-
},
|
|
32
|
-
];
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import type { IntentDefinition } from '../types.js';
|
|
2
|
-
/**
|
|
3
|
-
* A comprehensive list of intent definitions, categorized by their respective intent categories.
|
|
4
|
-
* Each intent definition includes detailed information about the intent's purpose, usage guidelines, and examples to illustrate how it can be effectively implemented within a user interface.
|
|
5
|
-
* This collection serves as a valuable resource for designers and developers seeking to create intuitive and user-friendly interfaces that align with established best practices for intent usage.
|
|
6
|
-
*/
|
|
7
|
-
export declare const intents: IntentDefinition[];
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { actionIntents } from './action.js';
|
|
2
|
-
import { assistanceIntents } from './assistance.js';
|
|
3
|
-
import { disclosureIntents } from './disclosure.js';
|
|
4
|
-
import { feedbackIntents } from './feedback.js';
|
|
5
|
-
import { inputIntents } from './input.js';
|
|
6
|
-
import { navigationIntents } from './navigation.js';
|
|
7
|
-
import { statusIntents } from './status.js';
|
|
8
|
-
import { structureIntents } from './structure.js';
|
|
9
|
-
/**
|
|
10
|
-
* A comprehensive list of intent definitions, categorized by their respective intent categories.
|
|
11
|
-
* Each intent definition includes detailed information about the intent's purpose, usage guidelines, and examples to illustrate how it can be effectively implemented within a user interface.
|
|
12
|
-
* This collection serves as a valuable resource for designers and developers seeking to create intuitive and user-friendly interfaces that align with established best practices for intent usage.
|
|
13
|
-
*/
|
|
14
|
-
export const intents = [
|
|
15
|
-
...actionIntents,
|
|
16
|
-
...feedbackIntents,
|
|
17
|
-
...inputIntents,
|
|
18
|
-
...navigationIntents,
|
|
19
|
-
...disclosureIntents,
|
|
20
|
-
...statusIntents,
|
|
21
|
-
...assistanceIntents,
|
|
22
|
-
...structureIntents,
|
|
23
|
-
];
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
export const inputIntents = [
|
|
2
|
-
{
|
|
3
|
-
category: 'input',
|
|
4
|
-
description: 'Use when a user should provide short, single-line text input.',
|
|
5
|
-
id: 'input.text.short',
|
|
6
|
-
userGoal: 'Capture compact textual or numeric values in a form field.',
|
|
7
|
-
},
|
|
8
|
-
{
|
|
9
|
-
category: 'input',
|
|
10
|
-
description: 'Use when a user should provide longer, multi-line input.',
|
|
11
|
-
id: 'input.text.long',
|
|
12
|
-
userGoal: 'Capture detailed comments, descriptions, or narrative responses.',
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
category: 'input',
|
|
16
|
-
description: 'Use when one option should be selected from predefined choices.',
|
|
17
|
-
id: 'input.selection.single',
|
|
18
|
-
userGoal: 'Make one explicit selection from a known set.',
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
category: 'input',
|
|
22
|
-
description: 'Use when multiple options should be selected from predefined choices.',
|
|
23
|
-
id: 'input.selection.multiple',
|
|
24
|
-
userGoal: 'Select multiple relevant options in one control.',
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
category: 'input',
|
|
28
|
-
description: 'Use when options are numerous and should be filtered by typing.',
|
|
29
|
-
id: 'input.selection.searchable',
|
|
30
|
-
userGoal: 'Find and select options quickly through live filtering.',
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
category: 'input',
|
|
34
|
-
description: 'Use for binary choices that apply immediately on toggle.',
|
|
35
|
-
id: 'input.binary.immediate',
|
|
36
|
-
userGoal: 'Enable or disable a setting with instant effect.',
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
category: 'input',
|
|
40
|
-
description: 'Use for binary choices that are submitted later with the form.',
|
|
41
|
-
id: 'input.binary.deferred',
|
|
42
|
-
userGoal: 'Record a binary preference without immediate side effects.',
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
category: 'input',
|
|
46
|
-
description: 'Use when files or folders must be attached or uploaded.',
|
|
47
|
-
id: 'input.file.upload',
|
|
48
|
-
userGoal: 'Provide one or more local files for processing.',
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
category: 'input',
|
|
52
|
-
description: 'Use sliders when selecting a numeric value within a bounded range.',
|
|
53
|
-
id: 'input.range.slider',
|
|
54
|
-
userGoal: 'Pick a value quickly with immediate visual feedback across a range.',
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
category: 'input',
|
|
58
|
-
description: 'Use grouped options to organize long option lists into logical clusters.',
|
|
59
|
-
id: 'input.selection.grouped-options',
|
|
60
|
-
userGoal: 'Find and choose options faster through labeled option groupings.',
|
|
61
|
-
},
|
|
62
|
-
];
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
export const navigationIntents = [
|
|
2
|
-
{
|
|
3
|
-
category: 'navigation',
|
|
4
|
-
description: 'Use link-list styles to present grouped navigation links with consistent spacing.',
|
|
5
|
-
id: 'navigation.link-list.grouped',
|
|
6
|
-
userGoal: 'Scan and navigate related links quickly in a vertical list.',
|
|
7
|
-
},
|
|
8
|
-
{
|
|
9
|
-
category: 'navigation',
|
|
10
|
-
description: 'Use tabs to switch between related content sections in-place.',
|
|
11
|
-
id: 'navigation.tabs.section',
|
|
12
|
-
userGoal: 'Move between grouped views without leaving the current page.',
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
category: 'navigation',
|
|
16
|
-
description: 'Use menus to provide grouped actions or destinations.',
|
|
17
|
-
id: 'navigation.menu.actions',
|
|
18
|
-
userGoal: 'Access frequently used commands through a structured action list.',
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
category: 'navigation',
|
|
22
|
-
description: 'Use pagination controls for large datasets split across pages.',
|
|
23
|
-
id: 'navigation.pagination.dataset',
|
|
24
|
-
userGoal: 'Navigate through bounded result sets efficiently.',
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
category: 'navigation',
|
|
28
|
-
description: 'Use dropdowns to reveal compact, related options from a trigger.',
|
|
29
|
-
id: 'navigation.dropdown.compact-options',
|
|
30
|
-
userGoal: 'Access secondary options while preserving layout space.',
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
category: 'navigation',
|
|
34
|
-
description: 'Use breadcrumb trails to show hierarchy and support quick backtracking.',
|
|
35
|
-
id: 'navigation.breadcrumb.trail',
|
|
36
|
-
userGoal: 'Understand current location and navigate to ancestor levels quickly.',
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
category: 'navigation',
|
|
40
|
-
description: 'Use side navigation to expose primary navigation sections in vertical layouts.',
|
|
41
|
-
id: 'navigation.sidenav.menu',
|
|
42
|
-
userGoal: 'Move between major sections in an app shell efficiently.',
|
|
43
|
-
},
|
|
44
|
-
];
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
export const statusIntents = [
|
|
2
|
-
{
|
|
3
|
-
category: 'status',
|
|
4
|
-
description: 'Use loading indicators inside a specific region while content is fetched.',
|
|
5
|
-
id: 'status.loading.section',
|
|
6
|
-
userGoal: 'Communicate in-progress loading without blocking the full interface.',
|
|
7
|
-
},
|
|
8
|
-
{
|
|
9
|
-
category: 'status',
|
|
10
|
-
description: 'Use loading indicators inside actions while a command is processing.',
|
|
11
|
-
id: 'status.loading.action',
|
|
12
|
-
userGoal: 'Signal ongoing processing for a submitted user action.',
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
category: 'status',
|
|
16
|
-
description: 'Use linear progress bars to communicate determinate progress in workflows.',
|
|
17
|
-
id: 'status.progress.linear',
|
|
18
|
-
userGoal: 'Show measurable progress toward completion over time.',
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
category: 'status',
|
|
22
|
-
description: 'Use circular progress rings for compact determinate progress indicators.',
|
|
23
|
-
id: 'status.progress.circular',
|
|
24
|
-
userGoal: 'Show measurable progress in compact UI regions.',
|
|
25
|
-
},
|
|
26
|
-
];
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
export const structureIntents = [
|
|
2
|
-
{
|
|
3
|
-
category: 'structure',
|
|
4
|
-
description: 'Use when confirming a risky or destructive operation in a dialog.',
|
|
5
|
-
id: 'structure.confirmation',
|
|
6
|
-
userGoal: 'Require clear user confirmation before executing a destructive action.',
|
|
7
|
-
},
|
|
8
|
-
{
|
|
9
|
-
category: 'structure',
|
|
10
|
-
description: 'Use drawers to reveal supplemental panels from an edge overlay.',
|
|
11
|
-
id: 'structure.drawer.overlay',
|
|
12
|
-
userGoal: 'Present secondary workflows without leaving the current context.',
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
category: 'structure',
|
|
16
|
-
description: 'Use headers to establish a consistent top-level page shell structure.',
|
|
17
|
-
id: 'structure.header.shell',
|
|
18
|
-
userGoal: 'Provide a consistent frame for branding, navigation, and meta actions.',
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
category: 'structure',
|
|
22
|
-
description: 'Use card containers to group related content into a bounded section.',
|
|
23
|
-
id: 'structure.content.container',
|
|
24
|
-
userGoal: 'Improve scannability by grouping related information and actions.',
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
category: 'structure',
|
|
28
|
-
description: 'Use dividers to separate adjacent sections and improve visual hierarchy.',
|
|
29
|
-
id: 'structure.content.separator',
|
|
30
|
-
userGoal: 'Clarify boundaries between groups of content.',
|
|
31
|
-
},
|
|
32
|
-
];
|
|
@@ -1,195 +0,0 @@
|
|
|
1
|
-
export const actionPatterns = [
|
|
2
|
-
{
|
|
3
|
-
description: 'Primary action button styling for default primary interaction.',
|
|
4
|
-
intent: 'action.primary',
|
|
5
|
-
structure: {
|
|
6
|
-
component: 'syn-button',
|
|
7
|
-
config: {
|
|
8
|
-
contentRules: [
|
|
9
|
-
{
|
|
10
|
-
code: 'REQUIRED_CONTENT_BUTTON_LABEL',
|
|
11
|
-
kind: 'requiredContent',
|
|
12
|
-
message: 'syn-button must contain visible content (text and/or child nodes).',
|
|
13
|
-
rationale: 'An empty button is inaccessible and provides no affordance to the user.',
|
|
14
|
-
suggestedFix: 'Add a label, text, or child element such as syn-icon inside the button.',
|
|
15
|
-
},
|
|
16
|
-
],
|
|
17
|
-
propRules: [
|
|
18
|
-
{
|
|
19
|
-
code: 'REQUIRED_PROP_BUTTON_TYPE',
|
|
20
|
-
kind: 'requiredEquals',
|
|
21
|
-
message: 'type property must be set to "button" for primary action intent.',
|
|
22
|
-
prop: 'type',
|
|
23
|
-
rationale: 'The semantic button type ensures proper HTML behavior and accessibility.',
|
|
24
|
-
suggestedFix: 'Set type property to "button".',
|
|
25
|
-
value: 'button',
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
code: 'REQUIRED_PROP_FILLED_VARIANT',
|
|
29
|
-
kind: 'requiredEquals',
|
|
30
|
-
message: 'variant property should be set to "filled" for primary action emphasis.',
|
|
31
|
-
prop: 'variant',
|
|
32
|
-
rationale: 'Filled variant provides clear visual priority for primary actions.',
|
|
33
|
-
suggestedFix: 'Set variant property to "filled".',
|
|
34
|
-
value: 'filled',
|
|
35
|
-
},
|
|
36
|
-
],
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
target: { id: 'component:syn-button', kind: 'component', name: 'syn-button' },
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
description: 'Submit action with semantic submit type and filled emphasis.',
|
|
43
|
-
intent: 'action.submit',
|
|
44
|
-
notes: ['Do not combine submit intent with href-based navigation behavior.'],
|
|
45
|
-
structure: {
|
|
46
|
-
component: 'syn-button',
|
|
47
|
-
config: {
|
|
48
|
-
contentRules: [
|
|
49
|
-
{
|
|
50
|
-
code: 'REQUIRED_CONTENT_BUTTON_LABEL',
|
|
51
|
-
kind: 'requiredContent',
|
|
52
|
-
message: 'syn-button must contain visible content (text and/or child nodes).',
|
|
53
|
-
rationale: 'An empty button is inaccessible and provides no affordance to the user.',
|
|
54
|
-
suggestedFix: 'Add a label, text, or child element such as syn-icon inside the button.',
|
|
55
|
-
},
|
|
56
|
-
],
|
|
57
|
-
propRules: [
|
|
58
|
-
{
|
|
59
|
-
code: 'REQUIRED_PROP_SUBMIT_TYPE',
|
|
60
|
-
kind: 'requiredEquals',
|
|
61
|
-
message: 'type property must be set to "submit" for submit action intent.',
|
|
62
|
-
prop: 'type',
|
|
63
|
-
rationale: 'The semantic submit type ensures proper form submission behavior.',
|
|
64
|
-
suggestedFix: 'Set type property to "submit".',
|
|
65
|
-
value: 'submit',
|
|
66
|
-
},
|
|
67
|
-
{
|
|
68
|
-
code: 'REQUIRED_PROP_FILLED_VARIANT',
|
|
69
|
-
kind: 'requiredEquals',
|
|
70
|
-
message: 'variant property should be set to "filled" for action emphasis.',
|
|
71
|
-
prop: 'variant',
|
|
72
|
-
rationale: 'Filled variant provides clear visual priority for actions.',
|
|
73
|
-
suggestedFix: 'Set variant property to "filled".',
|
|
74
|
-
value: 'filled',
|
|
75
|
-
},
|
|
76
|
-
{
|
|
77
|
-
code: 'FORBIDDEN_PROP_HREF',
|
|
78
|
-
kind: 'forbidden',
|
|
79
|
-
message: 'href property is not compatible with submit action intent.',
|
|
80
|
-
prop: 'href',
|
|
81
|
-
rationale: 'Submit intent uses form submission semantics, not navigation. Use action.navigation for link-based navigation.',
|
|
82
|
-
suggestedFix: 'Remove href property and use a form or event handler for submission.',
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
code: 'INTENT_TEMPORARILY_BLOCKED',
|
|
86
|
-
kind: 'warnWhenEquals',
|
|
87
|
-
message: 'Submit intent is currently blocked because the control is disabled.',
|
|
88
|
-
prop: 'disabled',
|
|
89
|
-
rationale: 'This can be intentional in gated flows where the control is enabled after form input becomes valid.',
|
|
90
|
-
severity: 'warning',
|
|
91
|
-
suggestedFix: 'Enable the control once the form becomes valid so users can complete submission.',
|
|
92
|
-
value: true,
|
|
93
|
-
},
|
|
94
|
-
],
|
|
95
|
-
},
|
|
96
|
-
},
|
|
97
|
-
target: { id: 'component:syn-button', kind: 'component', name: 'syn-button' },
|
|
98
|
-
},
|
|
99
|
-
{
|
|
100
|
-
description: 'Reset action styling for secondary importance.',
|
|
101
|
-
intent: 'action.reset',
|
|
102
|
-
structure: {
|
|
103
|
-
component: 'syn-button',
|
|
104
|
-
config: {
|
|
105
|
-
contentRules: [
|
|
106
|
-
{
|
|
107
|
-
code: 'REQUIRED_CONTENT_BUTTON_LABEL',
|
|
108
|
-
kind: 'requiredContent',
|
|
109
|
-
message: 'syn-button must contain visible content (text and/or child nodes).',
|
|
110
|
-
rationale: 'An empty button is inaccessible and provides no affordance to the user.',
|
|
111
|
-
suggestedFix: 'Add a label, text, or child element such as syn-icon inside the button.',
|
|
112
|
-
},
|
|
113
|
-
],
|
|
114
|
-
propRules: [
|
|
115
|
-
{
|
|
116
|
-
code: 'REQUIRED_PROP_RESET_TYPE',
|
|
117
|
-
kind: 'requiredEquals',
|
|
118
|
-
message: 'type property must be set to "reset" for reset action intent.',
|
|
119
|
-
prop: 'type',
|
|
120
|
-
rationale: 'The semantic reset type ensures proper form reset behavior.',
|
|
121
|
-
suggestedFix: 'Set type property to "reset".',
|
|
122
|
-
value: 'reset',
|
|
123
|
-
},
|
|
124
|
-
{
|
|
125
|
-
code: 'REQUIRED_PROP_TEXT_VARIANT',
|
|
126
|
-
kind: 'requiredEquals',
|
|
127
|
-
message: 'variant property should be set to "text" for secondary action styling.',
|
|
128
|
-
prop: 'variant',
|
|
129
|
-
rationale: 'Text variant provides lower visual priority appropriate for reset actions.',
|
|
130
|
-
suggestedFix: 'Set variant property to "text".',
|
|
131
|
-
value: 'text',
|
|
132
|
-
},
|
|
133
|
-
],
|
|
134
|
-
},
|
|
135
|
-
},
|
|
136
|
-
target: { id: 'component:syn-button', kind: 'component', name: 'syn-button' },
|
|
137
|
-
},
|
|
138
|
-
{
|
|
139
|
-
description: 'Navigation action uses href and text variant.',
|
|
140
|
-
intent: 'action.navigation',
|
|
141
|
-
structure: {
|
|
142
|
-
component: 'syn-button',
|
|
143
|
-
config: {
|
|
144
|
-
contentRules: [
|
|
145
|
-
{
|
|
146
|
-
code: 'REQUIRED_CONTENT_BUTTON_LABEL',
|
|
147
|
-
kind: 'requiredContent',
|
|
148
|
-
message: 'syn-button must contain visible content (text and/or child nodes).',
|
|
149
|
-
rationale: 'An empty button is inaccessible and provides no affordance to the user.',
|
|
150
|
-
suggestedFix: 'Add a label, text, or ch------ild element such as syn-icon inside the button.',
|
|
151
|
-
},
|
|
152
|
-
],
|
|
153
|
-
propRules: [
|
|
154
|
-
{
|
|
155
|
-
code: 'REQUIRED_PROP_HREF',
|
|
156
|
-
kind: 'requiredEquals',
|
|
157
|
-
message: 'href property must be set for navigation action intent.',
|
|
158
|
-
prop: 'href',
|
|
159
|
-
rationale: 'The href property provides the navigation target for semantic link behavior.',
|
|
160
|
-
suggestedFix: 'Set href property to the target URL or route.',
|
|
161
|
-
value: '#',
|
|
162
|
-
},
|
|
163
|
-
{
|
|
164
|
-
code: 'REQUIRED_PROP_TEXT_VARIANT',
|
|
165
|
-
kind: 'requiredEquals',
|
|
166
|
-
message: 'variant property should be set to "text" for navigation action styling.',
|
|
167
|
-
prop: 'variant',
|
|
168
|
-
rationale: 'Text variant provides unstyled appearance appropriate for link-like navigation.',
|
|
169
|
-
suggestedFix: 'Set variant property to "text".',
|
|
170
|
-
value: 'text',
|
|
171
|
-
},
|
|
172
|
-
],
|
|
173
|
-
},
|
|
174
|
-
},
|
|
175
|
-
target: { id: 'component:syn-button', kind: 'component', name: 'syn-button' },
|
|
176
|
-
},
|
|
177
|
-
{
|
|
178
|
-
description: 'Compact icon-only action button with accessible label requirements.',
|
|
179
|
-
intent: 'action.button.icon',
|
|
180
|
-
notes: ['Provide an accessible label (for example aria-label) because no visible text is shown.'],
|
|
181
|
-
structure: {
|
|
182
|
-
component: 'syn-icon-button',
|
|
183
|
-
},
|
|
184
|
-
target: { id: 'component:syn-icon-button', kind: 'component', name: 'syn-icon-button' },
|
|
185
|
-
},
|
|
186
|
-
{
|
|
187
|
-
description: 'Group related actions into one aligned unit for consistent interaction.',
|
|
188
|
-
intent: 'action.grouped',
|
|
189
|
-
notes: ['Prefer grouping actions with related intent and similar importance.'],
|
|
190
|
-
structure: {
|
|
191
|
-
component: 'syn-button-group',
|
|
192
|
-
},
|
|
193
|
-
target: { id: 'component:syn-button-group', kind: 'component', name: 'syn-button-group' },
|
|
194
|
-
},
|
|
195
|
-
];
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export const assistancePatterns = [
|
|
2
|
-
{
|
|
3
|
-
description: 'Short non-critical contextual help tied to a nearby trigger.',
|
|
4
|
-
intent: 'assistance.tooltip.contextual',
|
|
5
|
-
target: { id: 'component:syn-tooltip', kind: 'component', name: 'syn-tooltip' },
|
|
6
|
-
},
|
|
7
|
-
{
|
|
8
|
-
description: 'Contextual icon used as a compact visual hint near related content.',
|
|
9
|
-
intent: 'assistance.icon.contextual',
|
|
10
|
-
notes: ['Use alongside text or tooltips when meaning is not universally obvious.'],
|
|
11
|
-
target: { id: 'component:syn-icon', kind: 'component', name: 'syn-icon' },
|
|
12
|
-
},
|
|
13
|
-
];
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
export const disclosurePatterns = [
|
|
2
|
-
{
|
|
3
|
-
description: 'On-demand disclosure for one optional information block.',
|
|
4
|
-
intent: 'disclosure.details.on-demand',
|
|
5
|
-
target: { id: 'component:syn-details', kind: 'component', name: 'syn-details' },
|
|
6
|
-
},
|
|
7
|
-
{
|
|
8
|
-
description: 'Grouped progressive disclosure for multiple related sections.',
|
|
9
|
-
intent: 'disclosure.accordion.grouped',
|
|
10
|
-
preset: {
|
|
11
|
-
props: {
|
|
12
|
-
'close-others': true,
|
|
13
|
-
},
|
|
14
|
-
},
|
|
15
|
-
target: { id: 'component:syn-accordion', kind: 'component', name: 'syn-accordion' },
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
description: 'On-demand popup disclosure anchored to a trigger element.',
|
|
19
|
-
intent: 'disclosure.popup.on-demand',
|
|
20
|
-
notes: ['Keep popup content concise and directly related to the trigger context.'],
|
|
21
|
-
target: { id: 'component:syn-popup', kind: 'component', name: 'syn-popup' },
|
|
22
|
-
},
|
|
23
|
-
];
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
export const feedbackPatterns = [
|
|
2
|
-
{
|
|
3
|
-
description: 'Inline alert for contextual feedback near related content.',
|
|
4
|
-
intent: 'feedback.inline',
|
|
5
|
-
preset: {
|
|
6
|
-
props: {
|
|
7
|
-
duration: 0,
|
|
8
|
-
variant: 'warning',
|
|
9
|
-
},
|
|
10
|
-
},
|
|
11
|
-
target: { id: 'component:syn-alert', kind: 'component', name: 'syn-alert' },
|
|
12
|
-
},
|
|
13
|
-
{
|
|
14
|
-
description: 'Toast alert for brief, non-blocking status acknowledgement.',
|
|
15
|
-
intent: 'feedback.toast',
|
|
16
|
-
preset: {
|
|
17
|
-
props: {
|
|
18
|
-
duration: 4000,
|
|
19
|
-
variant: 'success',
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
target: { id: 'component:syn-alert', kind: 'component', name: 'syn-alert' },
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
description: 'Compact status or count feedback using badge visuals.',
|
|
26
|
-
intent: 'feedback.badge.status',
|
|
27
|
-
target: { id: 'component:syn-badge', kind: 'component', name: 'syn-badge' },
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
description: 'Compact categorical or state labeling using tags.',
|
|
31
|
-
intent: 'feedback.tag.label',
|
|
32
|
-
target: { id: 'component:syn-tag', kind: 'component', name: 'syn-tag' },
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
description: 'Grouped tags for concise display of multiple labels or states.',
|
|
36
|
-
intent: 'feedback.tag.label',
|
|
37
|
-
target: { id: 'component:syn-tag-group', kind: 'component', name: 'syn-tag-group' },
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
description: 'Generic validation feedback for incorrect or missing user input.',
|
|
41
|
-
intent: 'feedback.validation.generic',
|
|
42
|
-
target: { id: 'component:syn-validate', kind: 'component', name: 'syn-validate' },
|
|
43
|
-
},
|
|
44
|
-
];
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { IntentUsagePattern } from '../types.js';
|
|
2
|
-
/**
|
|
3
|
-
* A comprehensive list of intent usage patterns, categorized by their respective intent categories.
|
|
4
|
-
* Each pattern provides a specific example of how an intent can be implemented within a user interface, demonstrating best practices and common use cases for that category.
|
|
5
|
-
*/
|
|
6
|
-
export declare const usagePatterns: IntentUsagePattern[];
|