@iress-oss/ids-mcp-server 5.15.0 → 5.20.1

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.
Files changed (132) hide show
  1. package/generated/docs/components_components-alert-docs.md +492 -0
  2. package/generated/docs/components_components-autocomplete-docs.md +3485 -0
  3. package/generated/docs/{components-autocomplete-recipes-docs.md → components_components-autocomplete-recipes-docs.md} +32 -14
  4. package/generated/docs/{components-badge-docs.md → components_components-badge-docs.md} +222 -30
  5. package/generated/docs/components_components-button-docs.md +2078 -0
  6. package/generated/docs/components_components-button-recipes-docs.md +37 -0
  7. package/generated/docs/components_components-buttongroup-docs.md +1045 -0
  8. package/generated/docs/components_components-card-docs.md +2276 -0
  9. package/generated/docs/{components-card-recipes-docs.md → components_components-card-recipes-docs.md} +131 -14
  10. package/generated/docs/components_components-checkbox-docs.md +1054 -0
  11. package/generated/docs/{components-checkboxgroup-docs.md → components_components-checkboxgroup-docs.md} +1000 -81
  12. package/generated/docs/{components-checkboxgroup-recipes-docs.md → components_components-checkboxgroup-recipes-docs.md} +101 -11
  13. package/generated/docs/{components-col-docs.md → components_components-col-docs.md} +331 -58
  14. package/generated/docs/components_components-combobox-docs.md +3767 -0
  15. package/generated/docs/{components-container-docs.md → components_components-container-docs.md} +61 -24
  16. package/generated/docs/{components-divider-docs.md → components_components-divider-docs.md} +83 -24
  17. package/generated/docs/{components-expander-docs.md → components_components-expander-docs.md} +264 -33
  18. package/generated/docs/{components-field-docs.md → components_components-field-docs.md} +814 -120
  19. package/generated/docs/components_components-filter-docs.md +4080 -0
  20. package/generated/docs/{components-form-docs.md → components_components-form-docs.md} +1515 -353
  21. package/generated/docs/{components-form-recipes-docs.md → components_components-form-recipes-docs.md} +170 -54
  22. package/generated/docs/components_components-hide-docs.md +293 -0
  23. package/generated/docs/components_components-icon-docs.md +1337 -0
  24. package/generated/docs/{components-inline-docs.md → components_components-inline-docs.md} +462 -42
  25. package/generated/docs/components_components-input-docs.md +1468 -0
  26. package/generated/docs/components_components-input-recipes-docs.md +367 -0
  27. package/generated/docs/components_components-inputcurrency-docs.md +432 -0
  28. package/generated/docs/{components-inputcurrency-recipes-docs.md → components_components-inputcurrency-recipes-docs.md} +110 -17
  29. package/generated/docs/components_components-label-docs.md +323 -0
  30. package/generated/docs/components_components-menu-docs.md +2345 -0
  31. package/generated/docs/components_components-menu-menuitem-docs.md +633 -0
  32. package/generated/docs/{components-modal-docs.md → components_components-modal-docs.md} +1625 -232
  33. package/generated/docs/components_components-navbar-docs.md +1847 -0
  34. package/generated/docs/{components-navbar-recipes-docs.md → components_components-navbar-recipes-docs.md} +697 -39
  35. package/generated/docs/{components-panel-docs.md → components_components-panel-docs.md} +754 -57
  36. package/generated/docs/components_components-placeholder-docs.md +92 -0
  37. package/generated/docs/components_components-popover-docs.md +1641 -0
  38. package/generated/docs/{components-popover-recipes-docs.md → components_components-popover-recipes-docs.md} +347 -17
  39. package/generated/docs/components_components-progress-docs.md +115 -0
  40. package/generated/docs/{components-provider-docs.md → components_components-provider-docs.md} +41 -32
  41. package/generated/docs/components_components-radio-docs.md +491 -0
  42. package/generated/docs/{components-radiogroup-docs.md → components_components-radiogroup-docs.md} +943 -75
  43. package/generated/docs/components_components-readonly-docs.md +263 -0
  44. package/generated/docs/components_components-richselect-docs.md +6497 -0
  45. package/generated/docs/{components-row-docs.md → components_components-row-docs.md} +353 -43
  46. package/generated/docs/{components-select-docs.md → components_components-select-docs.md} +719 -61
  47. package/generated/docs/components_components-skeleton-docs.md +480 -0
  48. package/generated/docs/{components-skeleton-recipes-docs.md → components_components-skeleton-recipes-docs.md} +50 -10
  49. package/generated/docs/{components-skiplink-docs.md → components_components-skiplink-docs.md} +53 -14
  50. package/generated/docs/components_components-slideout-docs.md +2262 -0
  51. package/generated/docs/components_components-slider-docs.md +1276 -0
  52. package/generated/docs/components_components-spinner-docs.md +82 -0
  53. package/generated/docs/{components-stack-docs.md → components_components-stack-docs.md} +223 -40
  54. package/generated/docs/components_components-table-docs.md +3651 -0
  55. package/generated/docs/components_components-tabset-docs.md +772 -0
  56. package/generated/docs/components_components-tabset-tab-docs.md +262 -0
  57. package/generated/docs/components_components-tag-docs.md +259 -0
  58. package/generated/docs/{components-text-docs.md → components_components-text-docs.md} +491 -51
  59. package/generated/docs/{components-toaster-docs.md → components_components-toaster-docs.md} +181 -79
  60. package/generated/docs/components_components-toaster-toast-docs.md +634 -0
  61. package/generated/docs/components_components-toggle-docs.md +461 -0
  62. package/generated/docs/{components-tooltip-docs.md → components_components-tooltip-docs.md} +286 -41
  63. package/generated/docs/{components-validationmessage-docs.md → components_components-validationmessage-docs.md} +230 -61
  64. package/generated/docs/components_contact-us-docs.md +12 -0
  65. package/generated/docs/{foundations-accessibility-docs.md → components_foundations-accessibility-docs.md} +11 -21
  66. package/generated/docs/{foundations-colours-docs.md → components_foundations-colour-030-colours.md} +8 -15
  67. package/generated/docs/{foundations-consistency-docs.md → components_foundations-consistency-docs.md} +12 -20
  68. package/generated/docs/{foundations-content-docs.md → components_foundations-content-docs.md} +6 -11
  69. package/generated/docs/components_foundations-introduction-docs.md +15 -0
  70. package/generated/docs/{foundations-principles-docs.md → components_foundations-principles-docs.md} +14 -24
  71. package/generated/docs/components_foundations-typography-docs.md +608 -0
  72. package/generated/docs/{foundations-user-experience-docs.md → components_foundations-user-experience-docs.md} +16 -26
  73. package/generated/docs/{foundations-visual-design-docs.md → components_foundations-visual-design-docs.md} +10 -17
  74. package/generated/docs/{frequently-asked-questions-docs.md → components_frequently-asked-questions-docs.md} +14 -23
  75. package/generated/docs/components_get-started-develop-docs.md +84 -0
  76. package/generated/docs/components_get-started-using-storybook-docs.md +55 -0
  77. package/generated/docs/components_introduction-docs.md +15 -0
  78. package/generated/docs/{patterns-loading-docs.md → components_patterns-loading-docs.md} +711 -143
  79. package/generated/docs/components_resources-changelog-docs.md +4 -0
  80. package/generated/docs/{resources-code-katas-docs.md → components_resources-code-katas-docs.md} +5 -9
  81. package/generated/docs/{resources-migration-guides-from-v4-to-v5-docs.md → components_resources-migration-guides-from-v4-to-v5-docs.md} +54 -239
  82. package/generated/docs/{versions-docs.md → components_versions-docs.md} +5 -8
  83. package/generated/docs/guidelines.md +484 -200
  84. package/generated/docs/introduction-docs.md +19 -30
  85. package/package.json +41 -45
  86. package/generated/docs/components-alert-docs.md +0 -130
  87. package/generated/docs/components-autocomplete-docs.md +0 -754
  88. package/generated/docs/components-button-docs.md +0 -362
  89. package/generated/docs/components-button-recipes-docs.md +0 -76
  90. package/generated/docs/components-buttongroup-docs.md +0 -310
  91. package/generated/docs/components-card-docs.md +0 -494
  92. package/generated/docs/components-checkbox-docs.md +0 -193
  93. package/generated/docs/components-combobox-docs.md +0 -1016
  94. package/generated/docs/components-filter-docs.md +0 -1109
  95. package/generated/docs/components-hide-docs.md +0 -265
  96. package/generated/docs/components-icon-docs.md +0 -553
  97. package/generated/docs/components-input-docs.md +0 -335
  98. package/generated/docs/components-input-recipes-docs.md +0 -140
  99. package/generated/docs/components-inputcurrency-docs.md +0 -157
  100. package/generated/docs/components-label-docs.md +0 -135
  101. package/generated/docs/components-menu-docs.md +0 -704
  102. package/generated/docs/components-menu-menuitem-docs.md +0 -193
  103. package/generated/docs/components-navbar-docs.md +0 -291
  104. package/generated/docs/components-placeholder-docs.md +0 -27
  105. package/generated/docs/components-popover-docs.md +0 -464
  106. package/generated/docs/components-progress-docs.md +0 -104
  107. package/generated/docs/components-radio-docs.md +0 -107
  108. package/generated/docs/components-readonly-docs.md +0 -89
  109. package/generated/docs/components-richselect-docs.md +0 -2433
  110. package/generated/docs/components-skeleton-docs.md +0 -214
  111. package/generated/docs/components-slideout-docs.md +0 -538
  112. package/generated/docs/components-slider-docs.md +0 -346
  113. package/generated/docs/components-spinner-docs.md +0 -59
  114. package/generated/docs/components-table-ag-grid-docs.md +0 -1074
  115. package/generated/docs/components-table-docs.md +0 -1305
  116. package/generated/docs/components-tabset-docs.md +0 -341
  117. package/generated/docs/components-tabset-tab-docs.md +0 -86
  118. package/generated/docs/components-tag-docs.md +0 -115
  119. package/generated/docs/components-toaster-toast-docs.md +0 -157
  120. package/generated/docs/components-toggle-docs.md +0 -158
  121. package/generated/docs/contact-us-docs.md +0 -27
  122. package/generated/docs/extensions-editor-docs.md +0 -288
  123. package/generated/docs/extensions-editor-recipes-docs.md +0 -39
  124. package/generated/docs/foundations-introduction-docs.md +0 -17
  125. package/generated/docs/foundations-typography-docs.md +0 -191
  126. package/generated/docs/get-started-develop-docs.md +0 -209
  127. package/generated/docs/get-started-using-storybook-docs.md +0 -68
  128. package/generated/docs/resources-changelog-docs.md +0 -6
  129. package/generated/docs/themes-available-themes-docs.md +0 -66
  130. package/generated/docs/themes-introduction-docs.md +0 -121
  131. package/generated/docs/themes-tokens-docs.md +0 -1200
  132. /package/{LICENSE.txt → LICENSE} +0 -0
@@ -1,16 +1,16 @@
1
- [](#core-design-principles)Core Design Principles
2
- =================================================
1
+ Core Design Principles
2
+ ======================
3
3
 
4
- [](#consistency)Consistency
5
- ---------------------------
4
+ Consistency
5
+ -----------
6
6
 
7
7
  * Maintain brand consistency across all applications and experiences
8
8
  * Use standardised component naming conventions (all components start with `Iress` prefix)
9
9
  * Leverage shared design tokens for spacing, colours, typography, and interactive states
10
10
  * Ensure consistent behaviour patterns across similar components
11
11
 
12
- [](#accessibility-first)Accessibility First
13
- -------------------------------------------
12
+ Accessibility First
13
+ -------------------
14
14
 
15
15
  * Meet or exceed WCAG 2.1 Level AA Accessibility Guidelines
16
16
  * Provide proper colour contrast ratios (minimum 4.5:1 for AA, 7:1 for AAA)
@@ -19,16 +19,16 @@
19
19
  * Support focus management and skip navigation patterns
20
20
  * Document accessibility considerations and requirements
21
21
 
22
- [](#clarity-and-usability)Clarity and Usability
23
- -----------------------------------------------
22
+ Clarity and Usability
23
+ ---------------------
24
24
 
25
25
  * Prioritise clear visual hierarchy through typography scales and spacing systems
26
26
  * Use progressive disclosure to manage complexity
27
27
  * Provide immediate feedback for user actions (loading states, validation, etc.)
28
28
  * Design for touch-friendly interfaces with adequate target sizes
29
29
 
30
- [](#developer-experience)Developer Experience
31
- ---------------------------------------------
30
+ Developer Experience
31
+ --------------------
32
32
 
33
33
  * Maintain clean component APIs with predictable prop patterns
34
34
  * Provide comprehensive documentation with usage examples
@@ -37,34 +37,24 @@
37
37
  * Enable efficient testing strategies with semantic roles and accessible queries
38
38
  * Maintain up-to-date prop documentation and type definitions
39
39
 
40
- [](#quality-assurance)Quality assurance
41
- ---------------------------------------
40
+ Quality assurance
41
+ -----------------
42
42
 
43
43
  * Test components across supported browsers and devices
44
44
  * Validate accessibility compliance with automated and manual testing
45
45
  * Ensure proper keyboard navigation functionality
46
46
  * Test with assistive technologies (screen readers, voice control)
47
47
 
48
- ### [](#code-standards)Code Standards
48
+ ### Code Standards
49
49
 
50
50
  * Follow consistent naming conventions for CSS classes and component props
51
51
  * Use semantic HTML elements where appropriate
52
52
  * Implement proper TypeScript typing for better developer experience
53
53
  * Maintain clean separation between presentation and logic
54
54
 
55
- ### [](#performance-considerations)Performance Considerations
55
+ ### Performance Considerations
56
56
 
57
57
  * Optimise component rendering and re-rendering
58
58
  * Implement appropriate code splitting strategies
59
59
  * Use efficient animation and transition patterns
60
60
  * Consider bundle size impact of component dependencies
61
-
62
- On this page
63
-
64
- * [Consistency](#consistency)
65
- * [Accessibility First](#accessibility-first)
66
- * [Clarity and Usability](#clarity-and-usability)
67
- * [Developer Experience](#developer-experience)
68
- * [Quality assurance](#quality-assurance)
69
- * [Code Standards](#code-standards)
70
- * [Performance Considerations](#performance-considerations)
@@ -0,0 +1,608 @@
1
+ Typography
2
+ ==========
3
+
4
+ Typography is set up as part of the theming. Typography is controlled by the `IressText` component and the `iress-u-text` utility class. They implement consistent line heights and font weights.
5
+
6
+ Typography styles are designed to be encapsulated. If you want text to pick up the Iress styling, you'll need to wrap it in an `IressText` component.
7
+
8
+ Body
9
+ ----
10
+
11
+ This is the default text variant, and is designed to be clear and easy to read.
12
+
13
+ [](./iframe.html?id=foundations-typography--body)
14
+
15
+ Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita.
16
+
17
+ * Voluptatem assumenda soluta!
18
+ * Illum et atque alias possimus maiores rem in corrupti consectetur!
19
+ * Dolorum, repellat expedita!
20
+
21
+ ```
22
+
23
+ <IressText\>
24
+ <p\>
25
+ Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita. </p\>
26
+ <ul\>
27
+ <li\>
28
+ Voluptatem assumenda soluta! </li\>
29
+ <li\>
30
+ Illum et atque alias possimus maiores rem in corrupti consectetur! </li\>
31
+ <li\>
32
+ Dolorum, repellat expedita! </li\>
33
+ </ul\>
34
+ </IressText\>
35
+
36
+ ```
37
+
38
+ #### Props
39
+
40
+ | Name | Description | Default | Control |
41
+ | --- | --- | --- | --- |
42
+ | align |
43
+ Text alignment.
44
+
45
+ union
46
+
47
+
48
+
49
+ | \- | Set object |
50
+ | children |
51
+
52
+ The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
53
+
54
+ union
55
+
56
+
57
+
58
+ | \- |
59
+
60
+ RAW
61
+
62
+ * children :
63
+
64
+ \[
65
+
66
+ * 0 :
67
+
68
+ {...} 6 keys
69
+
70
+ * 1 :
71
+
72
+ {...} 6 keys
73
+
74
+
75
+ \]
76
+
77
+
78
+
79
+
80
+ |
81
+ | element |
82
+
83
+ The HTML element that should be rendered.
84
+
85
+ union
86
+
87
+
88
+
89
+ |
90
+
91
+ 'div'
92
+
93
+ | Set object |
94
+ | mode |
95
+
96
+ Allows control of the text color.
97
+
98
+ **Note**: The body mode has been deprecated and will be removed in a future version. Please use the body variant instead.
99
+
100
+ union
101
+
102
+
103
+
104
+ | \- | Set object |
105
+ | noGutter |
106
+
107
+ Removes bottom margin from last child of the text element if true.
108
+
109
+ boolean
110
+
111
+
112
+
113
+ | \- | Set boolean |
114
+ | variant |
115
+
116
+ The typographic style to be rendered.
117
+
118
+ union
119
+
120
+
121
+
122
+ | \- | Set object |
123
+
124
+ Headings
125
+ --------
126
+
127
+ Headings form the structure of a web page. They're designed to stand out visually, drawing a user's eye to distinct sections of the document. They can be set in a variety of sizes based on systematic font sizing with native heading scales (H1-H6).
128
+
129
+ [](./iframe.html?id=foundations-typography--headings)
130
+
131
+ Hello, we are a company that puts clients first.
132
+ ================================================
133
+
134
+ Hello, we are a company that puts clients first.
135
+ ------------------------------------------------
136
+
137
+ ### Hello, we are a company that puts clients first.
138
+
139
+ #### Hello, we are a company that puts clients first.
140
+
141
+ ##### Hello, we are a company that puts clients first.
142
+
143
+ An H2 styled as an H3.
144
+ ----------------------
145
+
146
+ ```
147
+
148
+ <IressStack gutter\="md"\>
149
+ <IressText element\="h1"\>
150
+ Hello, we are a company that puts clients first. </IressText\>
151
+ <IressText element\="h2"\>
152
+ Hello, we are a company that puts clients first. </IressText\>
153
+ <IressText element\="h3"\>
154
+ Hello, we are a company that puts clients first. </IressText\>
155
+ <IressText element\="h4"\>
156
+ Hello, we are a company that puts clients first. </IressText\>
157
+ <IressText element\="h5"\>
158
+ Hello, we are a company that puts clients first. </IressText\>
159
+ <IressText
160
+ element\="h2"
161
+ variant\="h3"
162
+ \>
163
+ An H2 styled as an H3. </IressText\>
164
+ </IressStack\>
165
+
166
+ ```
167
+
168
+ #### Props
169
+
170
+ | Name | Description | Default | Control |
171
+ | --- | --- | --- | --- |
172
+ | align |
173
+ Text alignment.
174
+
175
+ union
176
+
177
+
178
+
179
+ | \- | Set object |
180
+ | children |
181
+
182
+ The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
183
+
184
+ union
185
+
186
+
187
+
188
+ | \- | \- |
189
+ | element |
190
+
191
+ The HTML element that should be rendered.
192
+
193
+ union
194
+
195
+
196
+
197
+ |
198
+
199
+ 'div'
200
+
201
+ | Set object |
202
+ | mode |
203
+
204
+ Allows control of the text color.
205
+
206
+ **Note**: The body mode has been deprecated and will be removed in a future version. Please use the body variant instead.
207
+
208
+ union
209
+
210
+
211
+
212
+ | \- | Set object |
213
+ | noGutter |
214
+
215
+ Removes bottom margin from last child of the text element if true.
216
+
217
+ boolean
218
+
219
+
220
+
221
+ | \- | Set boolean |
222
+ | variant |
223
+
224
+ The typographic style to be rendered.
225
+
226
+ union
227
+
228
+
229
+
230
+ | \- | Set object |
231
+
232
+ Display
233
+ -------
234
+
235
+ Display text is used to draw attention to specific pieces of content, like introductory text on a landing page. It has larger font sizes than the heading variants, and a lighter font weight.
236
+
237
+ [](./iframe.html?id=foundations-typography--display)
238
+
239
+ Hello, we are a company that puts clients first.
240
+
241
+ Hello, we are a company that puts clients first.
242
+
243
+ Hello, we are a company that puts clients first.
244
+
245
+ Hello, we are a company that puts clients first.
246
+
247
+ ```
248
+
249
+ <IressStack gutter\="md"\>
250
+ <IressText variant\="display1"\>
251
+ Hello, we are a company that puts clients first. </IressText\>
252
+ <IressText variant\="display2"\>
253
+ Hello, we are a company that puts clients first. </IressText\>
254
+ <IressText variant\="display3"\>
255
+ Hello, we are a company that puts clients first. </IressText\>
256
+ <IressText variant\="display4"\>
257
+ Hello, we are a company that puts clients first. </IressText\>
258
+ </IressStack\>
259
+
260
+ ```
261
+
262
+ #### Props
263
+
264
+ | Name | Description | Default | Control |
265
+ | --- | --- | --- | --- |
266
+ | align |
267
+ Text alignment.
268
+
269
+ union
270
+
271
+
272
+
273
+ | \- | Set object |
274
+ | children |
275
+
276
+ The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
277
+
278
+ union
279
+
280
+
281
+
282
+ | \- | \- |
283
+ | element |
284
+
285
+ The HTML element that should be rendered.
286
+
287
+ union
288
+
289
+
290
+
291
+ |
292
+
293
+ 'div'
294
+
295
+ | Set object |
296
+ | mode |
297
+
298
+ Allows control of the text color.
299
+
300
+ **Note**: The body mode has been deprecated and will be removed in a future version. Please use the body variant instead.
301
+
302
+ union
303
+
304
+
305
+
306
+ | \- | Set object |
307
+ | noGutter |
308
+
309
+ Removes bottom margin from last child of the text element if true.
310
+
311
+ boolean
312
+
313
+
314
+
315
+ | \- | Set boolean |
316
+ | variant |
317
+
318
+ The typographic style to be rendered.
319
+
320
+ union
321
+
322
+
323
+
324
+ | \- | Set object |
325
+
326
+ Lead
327
+ ----
328
+
329
+ Lead text is used to introduce users to a new section, and often gives a brief summary of a section. It has a larger font size than body text, but a lighter font weight so that it doesn't clash with headings.
330
+
331
+ [](./iframe.html?id=foundations-typography--lead)
332
+
333
+ Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita.
334
+
335
+ ```
336
+
337
+ <IressText
338
+ element\="p"
339
+ variant\="lead"
340
+ \>
341
+ Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita.
342
+ </IressText\>
343
+
344
+ ```
345
+
346
+ #### Props
347
+
348
+ | Name | Description | Default | Control |
349
+ | --- | --- | --- | --- |
350
+ | align |
351
+ Text alignment.
352
+
353
+ union
354
+
355
+
356
+
357
+ | \- | Set object |
358
+ | children |
359
+
360
+ The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
361
+
362
+ union
363
+
364
+
365
+
366
+ | \- |
367
+
368
+ "Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita."
369
+
370
+ |
371
+ | element |
372
+
373
+ The HTML element that should be rendered.
374
+
375
+ union
376
+
377
+
378
+
379
+ |
380
+
381
+ 'div'
382
+
383
+ |
384
+
385
+ "p"
386
+
387
+ |
388
+ | mode |
389
+
390
+ Allows control of the text color.
391
+
392
+ **Note**: The body mode has been deprecated and will be removed in a future version. Please use the body variant instead.
393
+
394
+ union
395
+
396
+
397
+
398
+ | \- | Set object |
399
+ | noGutter |
400
+
401
+ Removes bottom margin from last child of the text element if true.
402
+
403
+ boolean
404
+
405
+
406
+
407
+ | \- | Set boolean |
408
+ | variant |
409
+
410
+ The typographic style to be rendered.
411
+
412
+ union
413
+
414
+
415
+
416
+ | \- |
417
+
418
+ "lead"
419
+
420
+ |
421
+
422
+ Caption
423
+ -------
424
+
425
+ The caption variant is used for small text that provides additional information about a table or image. It has a smaller font size than body text, and a lighter font weight.
426
+
427
+ [](./iframe.html?id=foundations-typography--caption)
428
+
429
+ Example caption
430
+
431
+ ```
432
+
433
+ <IressText element\="caption"\>
434
+ Example caption
435
+ </IressText\>
436
+
437
+ ```
438
+
439
+ #### Props
440
+
441
+ | Name | Description | Default | Control |
442
+ | --- | --- | --- | --- |
443
+ | align |
444
+ Text alignment.
445
+
446
+ union
447
+
448
+
449
+
450
+ | \- | Set object |
451
+ | children |
452
+
453
+ The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
454
+
455
+ union
456
+
457
+
458
+
459
+ | \- |
460
+
461
+ "Example caption"
462
+
463
+ |
464
+ | element |
465
+
466
+ The HTML element that should be rendered.
467
+
468
+ union
469
+
470
+
471
+
472
+ |
473
+
474
+ 'div'
475
+
476
+ |
477
+
478
+ "caption"
479
+
480
+ |
481
+ | mode |
482
+
483
+ Allows control of the text color.
484
+
485
+ **Note**: The body mode has been deprecated and will be removed in a future version. Please use the body variant instead.
486
+
487
+ union
488
+
489
+
490
+
491
+ | \- | Set object |
492
+ | noGutter |
493
+
494
+ Removes bottom margin from last child of the text element if true.
495
+
496
+ boolean
497
+
498
+
499
+
500
+ | \- | Set boolean |
501
+ | variant |
502
+
503
+ The typographic style to be rendered.
504
+
505
+ union
506
+
507
+
508
+
509
+ | \- | Set object |
510
+
511
+ Other variants
512
+ --------------
513
+
514
+ IDS also includes bold, italic and small text variants.
515
+
516
+ * Bold text should be used to **draw attention** to part of a sentence, or to provide a visual label for readonly text.
517
+ * Italic text should be used to add _emphasis_ to content, or to add stress to part of a sentence.
518
+ * Small text is used for side comments or for text that's secondary to the main content.
519
+ * Muted text is used to de-emphasise content, such as when displaying informative text that is not critical to the user experience.
520
+
521
+ [](./iframe.html?id=foundations-typography--other)
522
+
523
+ Bold text
524
+
525
+ Italic text
526
+
527
+ Small text
528
+
529
+ Muted text
530
+
531
+ ```
532
+
533
+ <IressStack gutter\="md"\>
534
+ <IressText variant\="bold"\>
535
+ Bold text </IressText\>
536
+ <IressText variant\="italic"\>
537
+ Italic text </IressText\>
538
+ <IressText variant\="small"\>
539
+ Small text </IressText\>
540
+ <IressText mode\="muted"\>
541
+ Muted text </IressText\>
542
+ </IressStack\>
543
+
544
+ ```
545
+
546
+ #### Props
547
+
548
+ | Name | Description | Default | Control |
549
+ | --- | --- | --- | --- |
550
+ | align |
551
+ Text alignment.
552
+
553
+ union
554
+
555
+
556
+
557
+ | \- | Set object |
558
+ | children |
559
+
560
+ The content to be rendered; can be a string or a ReactNode (e.g. IressIcon).
561
+
562
+ union
563
+
564
+
565
+
566
+ | \- | \- |
567
+ | element |
568
+
569
+ The HTML element that should be rendered.
570
+
571
+ union
572
+
573
+
574
+
575
+ |
576
+
577
+ 'div'
578
+
579
+ | Set object |
580
+ | mode |
581
+
582
+ Allows control of the text color.
583
+
584
+ **Note**: The body mode has been deprecated and will be removed in a future version. Please use the body variant instead.
585
+
586
+ union
587
+
588
+
589
+
590
+ | \- | Set object |
591
+ | noGutter |
592
+
593
+ Removes bottom margin from last child of the text element if true.
594
+
595
+ boolean
596
+
597
+
598
+
599
+ | \- | Set boolean |
600
+ | variant |
601
+
602
+ The typographic style to be rendered.
603
+
604
+ union
605
+
606
+
607
+
608
+ | \- | Set object |