@iress-oss/ids-mcp-server 5.14.2 → 6.0.0-alpha.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/generated/docs/components-alert-docs.md +579 -7
- package/generated/docs/components-autocomplete-docs.md +694 -15
- package/generated/docs/components-autocomplete-recipes-docs.md +1 -1
- package/generated/docs/components-badge-docs.md +442 -59
- package/generated/docs/components-button-docs.md +1150 -70
- package/generated/docs/components-buttongroup-docs.md +441 -3
- package/generated/docs/components-card-docs.md +487 -37
- package/generated/docs/components-checkbox-docs.md +506 -5
- package/generated/docs/components-checkboxgroup-docs.md +586 -191
- package/generated/docs/components-checkboxgroup-recipes-docs.md +3 -3
- package/generated/docs/components-col-docs.md +451 -36
- package/generated/docs/components-container-docs.md +32 -0
- package/generated/docs/components-divider-docs.md +427 -27
- package/generated/docs/components-expander-docs.md +487 -108
- package/generated/docs/components-field-docs.md +1400 -68
- package/generated/docs/components-filter-docs.md +269 -56
- package/generated/docs/components-hide-docs.md +447 -10
- package/generated/docs/components-icon-docs.md +522 -259
- package/generated/docs/components-image-docs.md +493 -0
- package/generated/docs/components-inline-docs.md +1179 -44
- package/generated/docs/components-input-docs.md +544 -12
- package/generated/docs/components-input-recipes-docs.md +4 -4
- package/generated/docs/components-inputcurrency-docs.md +532 -0
- package/generated/docs/components-inputcurrency-recipes-docs.md +4 -5
- package/generated/docs/components-introduction-docs.md +450 -0
- package/generated/docs/components-label-docs.md +454 -27
- package/generated/docs/components-link-docs.md +586 -0
- package/generated/docs/components-menu-docs.md +531 -89
- package/generated/docs/components-menu-menuitem-docs.md +556 -10
- package/generated/docs/components-modal-docs.md +814 -55
- package/generated/docs/components-panel-docs.md +418 -198
- package/generated/docs/components-placeholder-docs.md +420 -1
- package/generated/docs/components-popover-docs.md +1097 -32
- package/generated/docs/components-popover-recipes-docs.md +39 -73
- package/generated/docs/components-progress-docs.md +464 -0
- package/generated/docs/components-provider-docs.md +160 -0
- package/generated/docs/components-radio-docs.md +460 -4
- package/generated/docs/components-radiogroup-docs.md +586 -116
- package/generated/docs/components-readonly-docs.md +450 -4
- package/generated/docs/components-richselect-docs.md +4660 -1257
- package/generated/docs/components-row-docs.md +2065 -588
- package/generated/docs/components-select-docs.md +489 -5
- package/generated/docs/components-skeleton-docs.md +399 -16
- package/generated/docs/components-skeleton-recipes-docs.md +7 -7
- package/generated/docs/components-skiplink-docs.md +548 -27
- package/generated/docs/components-slideout-docs.md +648 -150
- package/generated/docs/components-slider-docs.md +515 -33
- package/generated/docs/components-spinner-docs.md +393 -2
- package/generated/docs/components-stack-docs.md +732 -74
- package/generated/docs/components-table-ag-grid-docs.md +501 -1723
- package/generated/docs/components-table-docs.md +1049 -27
- package/generated/docs/components-tabset-docs.md +454 -27
- package/generated/docs/components-tabset-tab-docs.md +464 -0
- package/generated/docs/components-tag-docs.md +452 -19
- package/generated/docs/components-text-docs.md +322 -131
- package/generated/docs/components-toaster-docs.md +512 -51
- package/generated/docs/components-toggle-docs.md +476 -20
- package/generated/docs/components-tooltip-docs.md +443 -7
- package/generated/docs/components-validationmessage-docs.md +933 -13
- package/generated/docs/extensions-editor-docs.md +906 -13
- package/generated/docs/extensions-editor-recipes-docs.md +51 -1
- package/generated/docs/foundations-accessibility-docs.md +1 -23
- package/generated/docs/foundations-grid-docs.md +74 -0
- package/generated/docs/foundations-introduction-docs.md +6 -4
- package/generated/docs/foundations-responsive-breakpoints-docs.md +193 -0
- package/generated/docs/foundations-tokens-colour-docs.md +564 -0
- package/generated/docs/foundations-tokens-elevation-docs.md +155 -0
- package/generated/docs/foundations-tokens-introduction-docs.md +190 -0
- package/generated/docs/foundations-tokens-radius-docs.md +71 -0
- package/generated/docs/foundations-tokens-spacing-docs.md +89 -0
- package/generated/docs/foundations-tokens-typography-docs.md +322 -0
- package/generated/docs/foundations-z-index-stacking-docs.md +31 -0
- package/generated/docs/get-started-develop-docs.md +177 -16
- package/generated/docs/guidelines.md +1537 -295
- package/generated/docs/introduction-docs.md +65 -21
- package/generated/docs/news-version-6-docs.md +93 -0
- package/generated/docs/patterns-form-docs.md +3902 -0
- package/generated/docs/patterns-form-recipes-docs.md +1370 -0
- package/generated/docs/patterns-introduction-docs.md +24 -0
- package/generated/docs/patterns-loading-docs.md +2942 -203
- package/generated/docs/resources-introduction-docs.md +38 -0
- package/generated/docs/resources-mcp-server-docs.md +27 -0
- package/generated/docs/styling-props-colour-docs.md +172 -0
- package/generated/docs/styling-props-elevation-docs.md +88 -0
- package/generated/docs/styling-props-radius-docs.md +86 -0
- package/generated/docs/styling-props-reference-docs.md +160 -0
- package/generated/docs/styling-props-screen-readers-docs.md +71 -0
- package/generated/docs/styling-props-sizing-docs.md +627 -0
- package/generated/docs/styling-props-spacing-docs.md +2282 -0
- package/generated/docs/styling-props-typography-docs.md +121 -0
- package/generated/docs/themes-available-themes-docs.md +29 -29
- package/generated/docs/themes-introduction-docs.md +1 -1
- package/package.json +3 -22
- package/generated/docs/components-button-recipes-docs.md +0 -76
- package/generated/docs/components-card-recipes-docs.md +0 -89
- package/generated/docs/components-combobox-docs.md +0 -1016
- package/generated/docs/components-form-docs.md +0 -2442
- package/generated/docs/components-form-recipes-docs.md +0 -892
- package/generated/docs/components-navbar-docs.md +0 -291
- package/generated/docs/components-navbar-recipes-docs.md +0 -413
- package/generated/docs/components-toaster-toast-docs.md +0 -157
- package/generated/docs/foundations-colours-docs.md +0 -257
- package/generated/docs/foundations-typography-docs.md +0 -191
- package/generated/docs/resources-changelog-docs.md +0 -6
- package/generated/docs/themes-tokens-docs.md +0 -1200
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
[](#typography)Typography
|
|
2
|
+
=========================
|
|
3
|
+
|
|
4
|
+
These are all styling props related to changing the typography of a component.
|
|
5
|
+
|
|
6
|
+
[](#textstyle)`textStyle`
|
|
7
|
+
-------------------------
|
|
8
|
+
|
|
9
|
+
The `textStyle` prop allows you to change the default text style of a component. For more control and nested element styling, it is recommended to use `IressText` instead.
|
|
10
|
+
|
|
11
|
+
A panel with large text
|
|
12
|
+
|
|
13
|
+
Hide code
|
|
14
|
+
|
|
15
|
+
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
16
|
+
|
|
17
|
+
<IressPanel
|
|
18
|
+
bg\="alt"
|
|
19
|
+
textStyle\="typography.body.lg"
|
|
20
|
+
\>
|
|
21
|
+
A panel with large text
|
|
22
|
+
</IressPanel\>
|
|
23
|
+
|
|
24
|
+
Copy
|
|
25
|
+
|
|
26
|
+
#### [](#textStyle-props)Props
|
|
27
|
+
|
|
28
|
+
| Name | Description | Default | Control |
|
|
29
|
+
| --- | --- | --- | --- |
|
|
30
|
+
| textAlign |
|
|
31
|
+
The **`text-align`** CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
|
|
32
|
+
|
|
33
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
34
|
+
| --- | --- | --- | --- | --- |
|
|
35
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
36
|
+
|
|
37
|
+
ResponsiveProp<"center" | "left" | "right" | "inherit" | "justify"> | undefined
|
|
38
|
+
|
|
39
|
+
| \- | Set object |
|
|
40
|
+
| textStyle |
|
|
41
|
+
|
|
42
|
+
Select the typography to be used using the **`textStyle`** prop. These are connected to the typography tokens in the design system.'
|
|
43
|
+
|
|
44
|
+
* `typography.body.sm` - Use for small components such as badges and disclaimers, as well as compact variations of tables and lists.
|
|
45
|
+
* `typography.body.md` - The most commonly used body text size, used for most text content in the product and the default state of all components in the design system.
|
|
46
|
+
* `typography.body.lg` - Use for tag lines, subtitles, and other large text content in the product.
|
|
47
|
+
* `typography.heading.1` - Use for the main page title to establish a clear hierarchy. There is typically only one H1 per screen, emphasising the primary purpose or context of the page.
|
|
48
|
+
* `typography.heading.2` - Use for primary section headings within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with body.md or body.lg.
|
|
49
|
+
* `typography.heading.3` - Use for sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
|
|
50
|
+
* `typography.heading.4` - Use for supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
|
|
51
|
+
* `typography.heading.5` - Use for minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.
|
|
52
|
+
* `typography.code` - Used to display code snippets in the product, such as in the API documentation.
|
|
53
|
+
|
|
54
|
+
ResponsiveProp<"typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | "typography.body.sm" | "typography.body.sm.regular" | ... 10 more ... | "typography.code"> | undefined
|
|
55
|
+
|
|
56
|
+
| \- |
|
|
57
|
+
|
|
58
|
+
"typography.body.lg"
|
|
59
|
+
|
|
60
|
+
|
|
|
61
|
+
|
|
62
|
+
[](#textalign)`textAlign`
|
|
63
|
+
-------------------------
|
|
64
|
+
|
|
65
|
+
The `textAlign` prop allows you to change the alignment of text inside a component. For more control, it is recommended to use `IressText` instead.
|
|
66
|
+
|
|
67
|
+
A panel with centered text
|
|
68
|
+
|
|
69
|
+
Hide code
|
|
70
|
+
|
|
71
|
+
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
72
|
+
|
|
73
|
+
<IressPanel
|
|
74
|
+
bg\="alt"
|
|
75
|
+
textAlign\="center"
|
|
76
|
+
\>
|
|
77
|
+
A panel with centered text
|
|
78
|
+
</IressPanel\>
|
|
79
|
+
|
|
80
|
+
Copy
|
|
81
|
+
|
|
82
|
+
#### [](#textAlign-props)Props
|
|
83
|
+
|
|
84
|
+
| Name | Description | Default | Control |
|
|
85
|
+
| --- | --- | --- | --- |
|
|
86
|
+
| textAlign |
|
|
87
|
+
The **`text-align`** CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
|
|
88
|
+
|
|
89
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
90
|
+
| --- | --- | --- | --- | --- |
|
|
91
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
92
|
+
|
|
93
|
+
ResponsiveProp<"center" | "left" | "right" | "inherit" | "justify"> | undefined
|
|
94
|
+
|
|
95
|
+
| \- |
|
|
96
|
+
|
|
97
|
+
"center"
|
|
98
|
+
|
|
99
|
+
|
|
|
100
|
+
| textStyle |
|
|
101
|
+
|
|
102
|
+
Select the typography to be used using the **`textStyle`** prop. These are connected to the typography tokens in the design system.'
|
|
103
|
+
|
|
104
|
+
* `typography.body.sm` - Use for small components such as badges and disclaimers, as well as compact variations of tables and lists.
|
|
105
|
+
* `typography.body.md` - The most commonly used body text size, used for most text content in the product and the default state of all components in the design system.
|
|
106
|
+
* `typography.body.lg` - Use for tag lines, subtitles, and other large text content in the product.
|
|
107
|
+
* `typography.heading.1` - Use for the main page title to establish a clear hierarchy. There is typically only one H1 per screen, emphasising the primary purpose or context of the page.
|
|
108
|
+
* `typography.heading.2` - Use for primary section headings within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with body.md or body.lg.
|
|
109
|
+
* `typography.heading.3` - Use for sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
|
|
110
|
+
* `typography.heading.4` - Use for supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
|
|
111
|
+
* `typography.heading.5` - Use for minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.
|
|
112
|
+
* `typography.code` - Used to display code snippets in the product, such as in the API documentation.
|
|
113
|
+
|
|
114
|
+
ResponsiveProp<"typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | "typography.body.sm" | "typography.body.sm.regular" | ... 10 more ... | "typography.code"> | undefined
|
|
115
|
+
|
|
116
|
+
| \- | Set object |
|
|
117
|
+
|
|
118
|
+
On this page
|
|
119
|
+
|
|
120
|
+
* [textStyle](#textstyle)
|
|
121
|
+
* [textAlign](#textalign)
|
|
@@ -17,11 +17,11 @@ Themes are no longer connected to the version of IDS you are using. Instead they
|
|
|
17
17
|
[](#list)List
|
|
18
18
|
-------------
|
|
19
19
|
|
|
20
|
-
Version: 5.5.0-
|
|
20
|
+
Version: 5.5.0-30735
|
|
21
21
|
|
|
22
22
|
* * *
|
|
23
23
|
|
|
24
|
-
5.5.0-
|
|
24
|
+
5.5.0-30735Latest5.4.8-262445.4.7-261205.4.6-260525.4.5-260275.4.4-260225.4.3-259955.4.2-259585.4.1-259415.4.0-294265.3.2-290865.3.1-29028
|
|
25
25
|
|
|
26
26
|
None selected
|
|
27
27
|
|
|
@@ -29,36 +29,36 @@ Latest build only
|
|
|
29
29
|
|
|
30
30
|
* * *
|
|
31
31
|
|
|
32
|
-
### Version: 5.5.0-
|
|
33
|
-
|
|
34
|
-
* [css/demo-theme-1--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
35
|
-
* [css/demo-theme-1.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
36
|
-
* [css/demo-theme-2--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
37
|
-
* [css/demo-theme-2.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
38
|
-
* [css/demo-theme-3--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
39
|
-
* [css/demo-theme-3.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
40
|
-
* [css/demo-theme-4--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
41
|
-
* [css/demo-theme-4.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
42
|
-
* [css/demo-theme-5--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
43
|
-
* [css/demo-theme-5.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
44
|
-
* [css/demo-theme-6--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
45
|
-
* [css/demo-theme-6.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
46
|
-
* [css/hostplus-theme-light--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
47
|
-
* [css/hostplus-theme-light.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
48
|
-
* [css/iress-beta-theme-dark--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
49
|
-
* [css/iress-beta-theme-dark.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
50
|
-
* [css/iress-beta-theme-light--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
51
|
-
* [css/iress-beta-theme-light.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
52
|
-
* [css/iress-theme-dark--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
53
|
-
* [css/iress-theme-dark.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
54
|
-
* [css/iress-theme-light--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
55
|
-
* [css/iress-theme-light.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
56
|
-
* [css/iress-theme-wealth--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
57
|
-
* [css/iress-theme-wealth.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
32
|
+
### Version: 5.5.0-30735
|
|
33
|
+
|
|
34
|
+
* [css/demo-theme-1--touch.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/demo-theme-1--touch.css)
|
|
35
|
+
* [css/demo-theme-1.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/demo-theme-1.css)
|
|
36
|
+
* [css/demo-theme-2--touch.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/demo-theme-2--touch.css)
|
|
37
|
+
* [css/demo-theme-2.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/demo-theme-2.css)
|
|
38
|
+
* [css/demo-theme-3--touch.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/demo-theme-3--touch.css)
|
|
39
|
+
* [css/demo-theme-3.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/demo-theme-3.css)
|
|
40
|
+
* [css/demo-theme-4--touch.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/demo-theme-4--touch.css)
|
|
41
|
+
* [css/demo-theme-4.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/demo-theme-4.css)
|
|
42
|
+
* [css/demo-theme-5--touch.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/demo-theme-5--touch.css)
|
|
43
|
+
* [css/demo-theme-5.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/demo-theme-5.css)
|
|
44
|
+
* [css/demo-theme-6--touch.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/demo-theme-6--touch.css)
|
|
45
|
+
* [css/demo-theme-6.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/demo-theme-6.css)
|
|
46
|
+
* [css/hostplus-theme-light--touch.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/hostplus-theme-light--touch.css)
|
|
47
|
+
* [css/hostplus-theme-light.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/hostplus-theme-light.css)
|
|
48
|
+
* [css/iress-beta-theme-dark--touch.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/iress-beta-theme-dark--touch.css)
|
|
49
|
+
* [css/iress-beta-theme-dark.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/iress-beta-theme-dark.css)
|
|
50
|
+
* [css/iress-beta-theme-light--touch.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/iress-beta-theme-light--touch.css)
|
|
51
|
+
* [css/iress-beta-theme-light.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/iress-beta-theme-light.css)
|
|
52
|
+
* [css/iress-theme-dark--touch.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/iress-theme-dark--touch.css)
|
|
53
|
+
* [css/iress-theme-dark.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/iress-theme-dark.css)
|
|
54
|
+
* [css/iress-theme-light--touch.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/iress-theme-light--touch.css)
|
|
55
|
+
* [css/iress-theme-light.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/iress-theme-light.css)
|
|
56
|
+
* [css/iress-theme-wealth--touch.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/iress-theme-wealth--touch.css)
|
|
57
|
+
* [css/iress-theme-wealth.css](https://cdn-staging.iress.com/ids/5.5.0-30735/themes/css/iress-theme-wealth.css)
|
|
58
58
|
|
|
59
59
|
#### Theme mappings
|
|
60
60
|
|
|
61
|
-
* [ag-theme-iress-lite.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
61
|
+
* [ag-theme-iress-lite.css](https://cdn-staging.iress.com/ids/5.5.0-30735/ag-theme-iress-lite.css)
|
|
62
62
|
|
|
63
63
|
On this page
|
|
64
64
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@iress-oss/ids-mcp-server",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.0-alpha.0",
|
|
4
4
|
"description": "Model Context Protocol (MCP) server for Iress Design System (IDS) component library - provides AI assistants with contextual information about IDS components, design tokens, and usage patterns",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"publishConfig": {
|
|
@@ -32,17 +32,7 @@
|
|
|
32
32
|
"author": "Iress",
|
|
33
33
|
"license": "Apache-2.0",
|
|
34
34
|
"scripts": {
|
|
35
|
-
"
|
|
36
|
-
"clean": "rimraf dist coverage generated .nyc_output",
|
|
37
|
-
"dev": "tsc --watch",
|
|
38
|
-
"generate": "tsx scripts/generate.ts",
|
|
39
|
-
"lint": "eslint . --ext ts,tsx,mdx --report-unused-disable-directives --max-warnings 0",
|
|
40
|
-
"lint:fix": "eslint . --fix",
|
|
41
|
-
"start": "node dist/index.js",
|
|
42
|
-
"test": "vitest run --coverage",
|
|
43
|
-
"test:dev": "chmod +x ./scripts/test-dev-server.sh && ./scripts/test-dev-server.sh",
|
|
44
|
-
"test:watch": "vitest watch",
|
|
45
|
-
"typecheck": "tsc --noEmit"
|
|
35
|
+
"generate": "tsx scripts/generate.ts"
|
|
46
36
|
},
|
|
47
37
|
"files": [
|
|
48
38
|
"dist",
|
|
@@ -57,24 +47,15 @@
|
|
|
57
47
|
"devDependencies": {
|
|
58
48
|
"@types/node": "^22.15.21",
|
|
59
49
|
"@types/turndown": "^5.0.5",
|
|
60
|
-
"@typescript-eslint/eslint-plugin": "^8.0.0",
|
|
61
|
-
"@typescript-eslint/parser": "~8.34.0",
|
|
62
50
|
"@vitest/coverage-v8": "^3.2.4",
|
|
63
51
|
"commander": "^12.0.0",
|
|
64
52
|
"dotenv": "^16.5.0",
|
|
65
|
-
"eslint": "^8.56.0",
|
|
66
|
-
"eslint-config-prettier": "^10.0.0",
|
|
67
|
-
"eslint-plugin-file-progress": "^1.4.0",
|
|
68
|
-
"eslint-plugin-prettier": "^5.1.3",
|
|
69
|
-
"eslint-plugin-sonarjs": "^3.0.0",
|
|
70
53
|
"playwright": "^1",
|
|
71
|
-
"prettier": "^3.3.3",
|
|
72
|
-
"prettier-plugin-sh": "^0.17.0",
|
|
73
54
|
"rimraf": "^6.0.1",
|
|
74
55
|
"tsx": "^4.20.3",
|
|
75
56
|
"turndown": "^7.1.3",
|
|
76
57
|
"turndown-plugin-gfm": "^1.0.2",
|
|
77
58
|
"typescript": "^5.8.3",
|
|
78
|
-
"vitest": "^3.
|
|
59
|
+
"vitest": "^3.1.3"
|
|
79
60
|
}
|
|
80
61
|
}
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
[](#recipes)Recipes
|
|
2
|
-
===================
|
|
3
|
-
|
|
4
|
-
[](#using-with-react-router)Using with React Router
|
|
5
|
-
---------------------------------------------------
|
|
6
|
-
|
|
7
|
-
To use the `IressButton` component with React Router, you can use the `useHref` hook to get the `href` prop to pass to the `IressButton` component.
|
|
8
|
-
|
|
9
|
-
Learn more about the `useHref` hook in the [React Router documentation](https://reactrouter.com/docs/en/v6/api#usehref).
|
|
10
|
-
|
|
11
|
-
\[data-radix-scroll-area-viewport\] {
|
|
12
|
-
scrollbar-width: none;
|
|
13
|
-
-ms-overflow-style: none;
|
|
14
|
-
-webkit-overflow-scrolling: touch;
|
|
15
|
-
}
|
|
16
|
-
\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
|
|
17
|
-
display: none;
|
|
18
|
-
}
|
|
19
|
-
:where(\[data-radix-scroll-area-viewport\]) {
|
|
20
|
-
display: flex;
|
|
21
|
-
flex-direction: column;
|
|
22
|
-
align-items: stretch;
|
|
23
|
-
}
|
|
24
|
-
:where(\[data-radix-scroll-area-content\]) {
|
|
25
|
-
flex-grow: 1;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
import { IressButton } from '@iress/components';
|
|
29
|
-
import { useHref } from 'react-router-dom';
|
|
30
|
-
const ReactRouterButton \= () \=> {
|
|
31
|
-
const href \= useHref('/path/to/page');
|
|
32
|
-
return <IressButton href\={href}\>Go to page</IressButton\>;
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
Copy
|
|
36
|
-
|
|
37
|
-
[](#using-with-nextjs)Using with Next.js
|
|
38
|
-
----------------------------------------
|
|
39
|
-
|
|
40
|
-
To use the `IressButton` component with Next.js, you can use the `legacyBehavior` and `passHref` props to pass the `href` prop to the `IressButton` component.
|
|
41
|
-
|
|
42
|
-
Learn more about the `Link` component in the [Next.js documentation](https://nextjs.org/docs/pages/api-reference/components/link#nesting-a-functional-component).
|
|
43
|
-
|
|
44
|
-
\[data-radix-scroll-area-viewport\] {
|
|
45
|
-
scrollbar-width: none;
|
|
46
|
-
-ms-overflow-style: none;
|
|
47
|
-
-webkit-overflow-scrolling: touch;
|
|
48
|
-
}
|
|
49
|
-
\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
|
|
50
|
-
display: none;
|
|
51
|
-
}
|
|
52
|
-
:where(\[data-radix-scroll-area-viewport\]) {
|
|
53
|
-
display: flex;
|
|
54
|
-
flex-direction: column;
|
|
55
|
-
align-items: stretch;
|
|
56
|
-
}
|
|
57
|
-
:where(\[data-radix-scroll-area-content\]) {
|
|
58
|
-
flex-grow: 1;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
import { IressButton } from '@iress/components';
|
|
62
|
-
import Link from 'next/link';
|
|
63
|
-
const NextButton \= () \=> {
|
|
64
|
-
return (
|
|
65
|
-
<Link href\="/path/to/page" legacyBehavior passHref\>
|
|
66
|
-
<IressButton\>Go to page</IressButton\>
|
|
67
|
-
</Link\>
|
|
68
|
-
);
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
Copy
|
|
72
|
-
|
|
73
|
-
On this page
|
|
74
|
-
|
|
75
|
-
* [Using with React Router](#using-with-react-router)
|
|
76
|
-
* [Using with Next.js](#using-with-nextjs)
|
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
[](#recipes)Recipes
|
|
2
|
-
===================
|
|
3
|
-
|
|
4
|
-
Under construction
|
|
5
|
-
------------------
|
|
6
|
-
|
|
7
|
-
This documentation is still under construction. If you have any questions, please reach out to the design system team.
|
|
8
|
-
|
|
9
|
-
[](#compose-functions)Compose functions
|
|
10
|
-
---------------------------------------
|
|
11
|
-
|
|
12
|
-
Beneath the surface, the `IressCard` component uses a compose helper to manage its styling. These helpers are exposed as `composeIDSCard` and `composeIDSCardSlots` and can be used to create custom cards.
|
|
13
|
-
|
|
14
|
-
They accept a subset of `IressCardProps`. They also accept an optional second argument if you want to override the default styles with your own CSS module, or other `style` object (eg. CSS-in-JS).
|
|
15
|
-
|
|
16
|
-
### [](#use-cases)Use cases
|
|
17
|
-
|
|
18
|
-
1. You are using a third-party routing library with its own `Link` component and want to use it as a clickable card. This is similar to `IressButtonCard` and `IressLinkCard`.
|
|
19
|
-
2. You need a different base component to meet your requirements, such as `<article />` when displaying on a news page.
|
|
20
|
-
3. You need to add some additional styling to the internals of the card, such as a custom footer or a custom image.
|
|
21
|
-
|
|
22
|
-
Article mark-up, with custom classes for border
|
|
23
|
-
-----------------------------------------------
|
|
24
|
-
|
|
25
|
-
Prepend
|
|
26
|
-
|
|
27
|
-
TopRight
|
|
28
|
-
|
|
29
|
-
Media
|
|
30
|
-
|
|
31
|
-
Heading
|
|
32
|
-
-------
|
|
33
|
-
|
|
34
|
-
Children (default slot)
|
|
35
|
-
|
|
36
|
-
Footer
|
|
37
|
-
|
|
38
|
-
Hide code
|
|
39
|
-
|
|
40
|
-
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
41
|
-
|
|
42
|
-
import {
|
|
43
|
-
CardSlotClass,
|
|
44
|
-
composeIDSCard,
|
|
45
|
-
composeIDSCardSlots,
|
|
46
|
-
IressCardProps,
|
|
47
|
-
IressStack,
|
|
48
|
-
IressText,
|
|
49
|
-
} from '@iress-oss/ids-components';
|
|
50
|
-
import styles from '@iress-storybook/styles.module.scss';
|
|
51
|
-
export const CardUsingHook \= () \=> {
|
|
52
|
-
const cardProps \= composeIDSCard({
|
|
53
|
-
prepend: 'Prepend',
|
|
54
|
-
heading: 'Heading',
|
|
55
|
-
topRight: 'TopRight',
|
|
56
|
-
media: 'Media',
|
|
57
|
-
children: 'Children (default slot)',
|
|
58
|
-
footer: 'Footer',
|
|
59
|
-
});
|
|
60
|
-
const cardChildren \= composeIDSCardSlots({
|
|
61
|
-
prepend: 'Prepend',
|
|
62
|
-
heading: 'Heading',
|
|
63
|
-
topRight: 'TopRight',
|
|
64
|
-
media: 'Media',
|
|
65
|
-
children: 'Children (default slot)',
|
|
66
|
-
footer: 'Footer',
|
|
67
|
-
}, {
|
|
68
|
-
...Object.fromEntries(
|
|
69
|
-
Object.entries(CardSlotClass).map((\[key, value\]) \=> \[
|
|
70
|
-
key,
|
|
71
|
-
\`${value} ${styles.addBorder}\`,
|
|
72
|
-
\]),
|
|
73
|
-
),
|
|
74
|
-
});
|
|
75
|
-
return (
|
|
76
|
-
<IressStack gutter\="md"\>
|
|
77
|
-
<IressText element\="h2"\>
|
|
78
|
-
Article mark-up, with custom classes for border </IressText\>
|
|
79
|
-
<article {...cardProps}\>{cardChildren}</article\>
|
|
80
|
-
</IressStack\>
|
|
81
|
-
);
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
Copy
|
|
85
|
-
|
|
86
|
-
On this page
|
|
87
|
-
|
|
88
|
-
* [Compose functions](#compose-functions)
|
|
89
|
-
* [Use cases](#use-cases)
|