@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.
- package/generated/docs/components_components-alert-docs.md +492 -0
- package/generated/docs/components_components-autocomplete-docs.md +3485 -0
- package/generated/docs/{components-autocomplete-recipes-docs.md → components_components-autocomplete-recipes-docs.md} +32 -14
- package/generated/docs/{components-badge-docs.md → components_components-badge-docs.md} +222 -30
- package/generated/docs/components_components-button-docs.md +2078 -0
- package/generated/docs/components_components-button-recipes-docs.md +37 -0
- package/generated/docs/components_components-buttongroup-docs.md +1045 -0
- package/generated/docs/components_components-card-docs.md +2276 -0
- package/generated/docs/{components-card-recipes-docs.md → components_components-card-recipes-docs.md} +131 -14
- package/generated/docs/components_components-checkbox-docs.md +1054 -0
- package/generated/docs/{components-checkboxgroup-docs.md → components_components-checkboxgroup-docs.md} +1000 -81
- package/generated/docs/{components-checkboxgroup-recipes-docs.md → components_components-checkboxgroup-recipes-docs.md} +101 -11
- package/generated/docs/{components-col-docs.md → components_components-col-docs.md} +331 -58
- package/generated/docs/components_components-combobox-docs.md +3767 -0
- package/generated/docs/{components-container-docs.md → components_components-container-docs.md} +61 -24
- package/generated/docs/{components-divider-docs.md → components_components-divider-docs.md} +83 -24
- package/generated/docs/{components-expander-docs.md → components_components-expander-docs.md} +264 -33
- package/generated/docs/{components-field-docs.md → components_components-field-docs.md} +814 -120
- package/generated/docs/components_components-filter-docs.md +4080 -0
- package/generated/docs/{components-form-docs.md → components_components-form-docs.md} +1515 -353
- package/generated/docs/{components-form-recipes-docs.md → components_components-form-recipes-docs.md} +170 -54
- package/generated/docs/components_components-hide-docs.md +293 -0
- package/generated/docs/components_components-icon-docs.md +1337 -0
- package/generated/docs/{components-inline-docs.md → components_components-inline-docs.md} +462 -42
- package/generated/docs/components_components-input-docs.md +1468 -0
- package/generated/docs/components_components-input-recipes-docs.md +367 -0
- package/generated/docs/components_components-inputcurrency-docs.md +432 -0
- package/generated/docs/{components-inputcurrency-recipes-docs.md → components_components-inputcurrency-recipes-docs.md} +110 -17
- package/generated/docs/components_components-label-docs.md +323 -0
- package/generated/docs/components_components-menu-docs.md +2345 -0
- package/generated/docs/components_components-menu-menuitem-docs.md +633 -0
- package/generated/docs/{components-modal-docs.md → components_components-modal-docs.md} +1625 -232
- package/generated/docs/components_components-navbar-docs.md +1847 -0
- package/generated/docs/{components-navbar-recipes-docs.md → components_components-navbar-recipes-docs.md} +697 -39
- package/generated/docs/{components-panel-docs.md → components_components-panel-docs.md} +754 -57
- package/generated/docs/components_components-placeholder-docs.md +92 -0
- package/generated/docs/components_components-popover-docs.md +1641 -0
- package/generated/docs/{components-popover-recipes-docs.md → components_components-popover-recipes-docs.md} +347 -17
- package/generated/docs/components_components-progress-docs.md +115 -0
- package/generated/docs/{components-provider-docs.md → components_components-provider-docs.md} +41 -32
- package/generated/docs/components_components-radio-docs.md +491 -0
- package/generated/docs/{components-radiogroup-docs.md → components_components-radiogroup-docs.md} +943 -75
- package/generated/docs/components_components-readonly-docs.md +263 -0
- package/generated/docs/components_components-richselect-docs.md +6497 -0
- package/generated/docs/{components-row-docs.md → components_components-row-docs.md} +353 -43
- package/generated/docs/{components-select-docs.md → components_components-select-docs.md} +719 -61
- package/generated/docs/components_components-skeleton-docs.md +480 -0
- package/generated/docs/{components-skeleton-recipes-docs.md → components_components-skeleton-recipes-docs.md} +50 -10
- package/generated/docs/{components-skiplink-docs.md → components_components-skiplink-docs.md} +53 -14
- package/generated/docs/components_components-slideout-docs.md +2262 -0
- package/generated/docs/components_components-slider-docs.md +1276 -0
- package/generated/docs/components_components-spinner-docs.md +82 -0
- package/generated/docs/{components-stack-docs.md → components_components-stack-docs.md} +223 -40
- package/generated/docs/components_components-table-docs.md +3651 -0
- package/generated/docs/components_components-tabset-docs.md +772 -0
- package/generated/docs/components_components-tabset-tab-docs.md +262 -0
- package/generated/docs/components_components-tag-docs.md +259 -0
- package/generated/docs/{components-text-docs.md → components_components-text-docs.md} +491 -51
- package/generated/docs/{components-toaster-docs.md → components_components-toaster-docs.md} +181 -79
- package/generated/docs/components_components-toaster-toast-docs.md +634 -0
- package/generated/docs/components_components-toggle-docs.md +461 -0
- package/generated/docs/{components-tooltip-docs.md → components_components-tooltip-docs.md} +286 -41
- package/generated/docs/{components-validationmessage-docs.md → components_components-validationmessage-docs.md} +230 -61
- package/generated/docs/components_contact-us-docs.md +12 -0
- package/generated/docs/{foundations-accessibility-docs.md → components_foundations-accessibility-docs.md} +11 -21
- package/generated/docs/{foundations-colours-docs.md → components_foundations-colour-030-colours.md} +8 -15
- package/generated/docs/{foundations-consistency-docs.md → components_foundations-consistency-docs.md} +12 -20
- package/generated/docs/{foundations-content-docs.md → components_foundations-content-docs.md} +6 -11
- package/generated/docs/components_foundations-introduction-docs.md +15 -0
- package/generated/docs/{foundations-principles-docs.md → components_foundations-principles-docs.md} +14 -24
- package/generated/docs/components_foundations-typography-docs.md +608 -0
- package/generated/docs/{foundations-user-experience-docs.md → components_foundations-user-experience-docs.md} +16 -26
- package/generated/docs/{foundations-visual-design-docs.md → components_foundations-visual-design-docs.md} +10 -17
- package/generated/docs/{frequently-asked-questions-docs.md → components_frequently-asked-questions-docs.md} +14 -23
- package/generated/docs/components_get-started-develop-docs.md +84 -0
- package/generated/docs/components_get-started-using-storybook-docs.md +55 -0
- package/generated/docs/components_introduction-docs.md +15 -0
- package/generated/docs/{patterns-loading-docs.md → components_patterns-loading-docs.md} +711 -143
- package/generated/docs/components_resources-changelog-docs.md +4 -0
- package/generated/docs/{resources-code-katas-docs.md → components_resources-code-katas-docs.md} +5 -9
- package/generated/docs/{resources-migration-guides-from-v4-to-v5-docs.md → components_resources-migration-guides-from-v4-to-v5-docs.md} +54 -239
- package/generated/docs/{versions-docs.md → components_versions-docs.md} +5 -8
- package/generated/docs/guidelines.md +484 -200
- package/generated/docs/introduction-docs.md +19 -30
- package/package.json +41 -45
- package/generated/docs/components-alert-docs.md +0 -130
- package/generated/docs/components-autocomplete-docs.md +0 -754
- package/generated/docs/components-button-docs.md +0 -362
- package/generated/docs/components-button-recipes-docs.md +0 -76
- package/generated/docs/components-buttongroup-docs.md +0 -310
- package/generated/docs/components-card-docs.md +0 -494
- package/generated/docs/components-checkbox-docs.md +0 -193
- package/generated/docs/components-combobox-docs.md +0 -1016
- package/generated/docs/components-filter-docs.md +0 -1109
- package/generated/docs/components-hide-docs.md +0 -265
- package/generated/docs/components-icon-docs.md +0 -553
- package/generated/docs/components-input-docs.md +0 -335
- package/generated/docs/components-input-recipes-docs.md +0 -140
- package/generated/docs/components-inputcurrency-docs.md +0 -157
- package/generated/docs/components-label-docs.md +0 -135
- package/generated/docs/components-menu-docs.md +0 -704
- package/generated/docs/components-menu-menuitem-docs.md +0 -193
- package/generated/docs/components-navbar-docs.md +0 -291
- package/generated/docs/components-placeholder-docs.md +0 -27
- package/generated/docs/components-popover-docs.md +0 -464
- package/generated/docs/components-progress-docs.md +0 -104
- package/generated/docs/components-radio-docs.md +0 -107
- package/generated/docs/components-readonly-docs.md +0 -89
- package/generated/docs/components-richselect-docs.md +0 -2433
- package/generated/docs/components-skeleton-docs.md +0 -214
- package/generated/docs/components-slideout-docs.md +0 -538
- package/generated/docs/components-slider-docs.md +0 -346
- package/generated/docs/components-spinner-docs.md +0 -59
- package/generated/docs/components-table-ag-grid-docs.md +0 -1074
- package/generated/docs/components-table-docs.md +0 -1305
- package/generated/docs/components-tabset-docs.md +0 -341
- package/generated/docs/components-tabset-tab-docs.md +0 -86
- package/generated/docs/components-tag-docs.md +0 -115
- package/generated/docs/components-toaster-toast-docs.md +0 -157
- package/generated/docs/components-toggle-docs.md +0 -158
- package/generated/docs/contact-us-docs.md +0 -27
- package/generated/docs/extensions-editor-docs.md +0 -288
- package/generated/docs/extensions-editor-recipes-docs.md +0 -39
- package/generated/docs/foundations-introduction-docs.md +0 -17
- package/generated/docs/foundations-typography-docs.md +0 -191
- package/generated/docs/get-started-develop-docs.md +0 -209
- package/generated/docs/get-started-using-storybook-docs.md +0 -68
- package/generated/docs/resources-changelog-docs.md +0 -6
- package/generated/docs/themes-available-themes-docs.md +0 -66
- package/generated/docs/themes-introduction-docs.md +0 -121
- package/generated/docs/themes-tokens-docs.md +0 -1200
- /package/{LICENSE.txt → LICENSE} +0 -0
package/generated/docs/{foundations-principles-docs.md → components_foundations-principles-docs.md}
RENAMED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
Core Design Principles
|
|
2
|
+
======================
|
|
3
3
|
|
|
4
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
###
|
|
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
|
-
###
|
|
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 |
|