@iress-oss/ids-mcp-server 6.0.0-alpha.2 → 6.0.0-alpha.3
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 +7 -7
- package/generated/docs/components_components-autocomplete-docs.md +18 -18
- package/generated/docs/components_components-autocomplete-recipes-docs.md +9 -2
- package/generated/docs/components_components-badge-docs.md +4 -4
- package/generated/docs/components_components-button-docs.md +16 -14
- package/generated/docs/components_components-buttongroup-docs.md +9 -9
- package/generated/docs/components_components-card-docs.md +32 -17
- package/generated/docs/components_components-checkbox-docs.md +7 -7
- package/generated/docs/components_components-checkboxgroup-docs.md +10 -10
- package/generated/docs/components_components-checkboxgroup-recipes-docs.md +2 -2
- package/generated/docs/components_components-col-docs.md +38 -38
- package/generated/docs/components_components-container-docs.md +5 -5
- package/generated/docs/components_components-divider-docs.md +5 -5
- package/generated/docs/components_components-expander-docs.md +6 -4
- package/generated/docs/components_components-field-docs.md +28 -28
- package/generated/docs/components_components-filter-docs.md +19 -19
- package/generated/docs/components_components-hide-docs.md +9 -9
- package/generated/docs/components_components-icon-docs.md +9 -9
- package/generated/docs/components_components-image-docs.md +2 -2
- package/generated/docs/components_components-inline-docs.md +76 -388
- package/generated/docs/components_components-input-docs.md +9 -9
- package/generated/docs/components_components-input-recipes-docs.md +4 -4
- package/generated/docs/components_components-inputcurrency-docs.md +7 -7
- package/generated/docs/components_components-inputcurrency-recipes-docs.md +5 -2
- package/generated/docs/components_components-label-docs.md +4 -4
- package/generated/docs/components_components-link-docs.md +6 -4
- package/generated/docs/components_components-menu-docs.md +13 -13
- package/generated/docs/components_components-menu-menuitem-docs.md +12 -12
- package/generated/docs/components_components-modal-docs.md +32 -13
- package/generated/docs/components_components-panel-docs.md +6 -6
- package/generated/docs/components_components-placeholder-docs.md +1 -1
- package/generated/docs/components_components-popover-docs.md +11 -9
- package/generated/docs/components_components-popover-recipes-docs.md +4 -2
- package/generated/docs/components_components-progress-docs.md +1 -1
- package/generated/docs/components_components-provider-docs.md +2 -2
- package/generated/docs/components_components-radio-docs.md +5 -5
- package/generated/docs/components_components-radiogroup-docs.md +8 -8
- package/generated/docs/components_components-readonly-docs.md +3 -3
- package/generated/docs/components_components-richselect-docs.md +69 -28
- package/generated/docs/components_components-row-docs.md +60 -492
- package/generated/docs/components_components-select-docs.md +8 -8
- package/generated/docs/components_components-skeleton-docs.md +9 -9
- package/generated/docs/components_components-skeleton-recipes-docs.md +2 -2
- package/generated/docs/components_components-skiplink-docs.md +1 -1
- package/generated/docs/components_components-slideout-docs.md +34 -13
- package/generated/docs/components_components-slider-docs.md +8 -8
- package/generated/docs/components_components-spinner-docs.md +3 -3
- package/generated/docs/components_components-stack-docs.md +63 -175
- package/generated/docs/components_components-table-docs.md +31 -24
- package/generated/docs/components_components-tabset-docs.md +10 -10
- package/generated/docs/components_components-tabset-tab-docs.md +4 -4
- package/generated/docs/components_components-tag-docs.md +14 -5
- package/generated/docs/components_components-text-docs.md +21 -9
- package/generated/docs/components_components-toaster-docs.md +12 -12
- package/generated/docs/components_components-toggle-docs.md +6 -6
- package/generated/docs/components_components-tooltip-docs.md +4 -4
- package/generated/docs/components_components-validationmessage-docs.md +5 -5
- package/generated/docs/components_foundations-responsive-layout-docs.md +16 -15
- package/generated/docs/components_foundations-z-index-stacking-docs.md +1 -1
- package/generated/docs/components_introduction-docs.md +1 -1
- package/generated/docs/components_patterns-form-docs.md +96 -57
- package/generated/docs/components_patterns-form-recipes-docs.md +144 -19
- package/generated/docs/components_patterns-loading-docs.md +98 -17
- package/generated/docs/components_patterns-shadow-docs.md +2 -2
- package/generated/docs/components_sandbox-docs.md +226 -0
- package/generated/docs/components_styling-props-colour-docs.md +2 -2
- package/generated/docs/components_styling-props-elevation-docs.md +2 -2
- package/generated/docs/components_styling-props-radius-docs.md +3 -3
- package/generated/docs/components_styling-props-reference-docs.md +3 -3
- package/generated/docs/components_styling-props-screen-readers-docs.md +2 -2
- package/generated/docs/components_styling-props-sizing-docs.md +3 -3
- package/generated/docs/components_styling-props-spacing-docs.md +19 -19
- package/generated/docs/components_styling-props-typography-docs.md +2 -2
- package/generated/docs/guidelines.md +17 -16
- package/generated/docs/tokens_colour-docs.md +72 -0
- package/generated/docs/tokens_introduction-docs.md +15 -18
- package/generated/docs/tokens_sandbox-docs.md +1 -0
- package/generated/docs/tokens_spacing-docs.md +10 -40
- package/generated/docs/tokens_typography-docs.md +43 -1
- package/package.json +3 -2
|
@@ -28,7 +28,7 @@ Employment information goes here
|
|
|
28
28
|
|
|
29
29
|
Medical history goes here
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
Hide codedrawOpen in CodeSandbox
|
|
32
32
|
|
|
33
33
|
<IressTabSet\>
|
|
34
34
|
<IressTab label\="Address"\>
|
|
@@ -130,7 +130,7 @@ You can use the `IressTabSet` component to create tab navigation to control an a
|
|
|
130
130
|
|
|
131
131
|
[Google](https://google.com)
|
|
132
132
|
|
|
133
|
-
|
|
133
|
+
Hide codedrawOpen in CodeSandbox
|
|
134
134
|
|
|
135
135
|
<IressTabSet\>
|
|
136
136
|
<IressTab
|
|
@@ -236,7 +236,7 @@ Employment information goes here
|
|
|
236
236
|
|
|
237
237
|
Medical history goes here
|
|
238
238
|
|
|
239
|
-
|
|
239
|
+
Hide codedrawOpen in CodeSandbox
|
|
240
240
|
|
|
241
241
|
<IressTabSet\>
|
|
242
242
|
<IressTab label\="Address"\>
|
|
@@ -335,7 +335,7 @@ If you would like to set a tab by default, use the `defaultSelected` prop.
|
|
|
335
335
|
|
|
336
336
|
[Google](https://google.com)
|
|
337
337
|
|
|
338
|
-
|
|
338
|
+
Hide codedrawOpen in CodeSandbox
|
|
339
339
|
|
|
340
340
|
<IressTabSet defaultSelected\={1}\>
|
|
341
341
|
<IressTab
|
|
@@ -447,7 +447,7 @@ Employment information goes here
|
|
|
447
447
|
|
|
448
448
|
Medical history goes here
|
|
449
449
|
|
|
450
|
-
|
|
450
|
+
Hide codedrawOpen in CodeSandbox
|
|
451
451
|
|
|
452
452
|
import {
|
|
453
453
|
IressButton,
|
|
@@ -455,7 +455,7 @@ import {
|
|
|
455
455
|
IressTab,
|
|
456
456
|
IressTabSet,
|
|
457
457
|
type IressTabSetProps,
|
|
458
|
-
} from '
|
|
458
|
+
} from '@/main';
|
|
459
459
|
import { useState } from 'react';
|
|
460
460
|
export const TabsUsingState \= () \=> {
|
|
461
461
|
const \[selected, setSelected\] \= useState<number\>();
|
|
@@ -603,7 +603,7 @@ Employment information goes here
|
|
|
603
603
|
|
|
604
604
|
Medical history goes here
|
|
605
605
|
|
|
606
|
-
|
|
606
|
+
Hide codedrawOpen in CodeSandbox
|
|
607
607
|
|
|
608
608
|
<IressStack gap\="md"\>
|
|
609
609
|
<IressPanel\>
|
|
@@ -723,7 +723,7 @@ Tabs can be lazy loaded via state, allowing you to add/remove tabs as needed.
|
|
|
723
723
|
|
|
724
724
|
Toggle tabs
|
|
725
725
|
|
|
726
|
-
|
|
726
|
+
Hide codedrawOpen in CodeSandbox
|
|
727
727
|
|
|
728
728
|
import {
|
|
729
729
|
IressButton,
|
|
@@ -731,7 +731,7 @@ import {
|
|
|
731
731
|
IressTab,
|
|
732
732
|
IressTabSet,
|
|
733
733
|
type IressTabSetProps,
|
|
734
|
-
} from '
|
|
734
|
+
} from '@/main';
|
|
735
735
|
import { useState } from 'react';
|
|
736
736
|
export const TabsLazyLoading \= () \=> {
|
|
737
737
|
const \[loadTabs, setLoadTabs\] \= useState<boolean\>();
|
|
@@ -864,7 +864,7 @@ Employment information goes here
|
|
|
864
864
|
|
|
865
865
|
Medical history goes here
|
|
866
866
|
|
|
867
|
-
|
|
867
|
+
Hide codedrawOpen in CodeSandbox
|
|
868
868
|
|
|
869
869
|
<IressTabSet\>
|
|
870
870
|
<IressBadge
|
|
@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
|
|
|
18
18
|
|
|
19
19
|
Tab
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
Hide codedrawOpen in CodeSandbox
|
|
22
22
|
|
|
23
23
|
<IressTab label\="Tab" />
|
|
24
24
|
|
|
@@ -100,7 +100,7 @@ The tab can be set to active using the `active` prop.
|
|
|
100
100
|
|
|
101
101
|
Tab
|
|
102
102
|
|
|
103
|
-
|
|
103
|
+
Hide codedrawOpen in CodeSandbox
|
|
104
104
|
|
|
105
105
|
<IressTab
|
|
106
106
|
active
|
|
@@ -179,7 +179,7 @@ A tab can have a unique value set to it, used to determine its active state in a
|
|
|
179
179
|
|
|
180
180
|
Tab with value
|
|
181
181
|
|
|
182
|
-
|
|
182
|
+
Hide codedrawOpen in CodeSandbox
|
|
183
183
|
|
|
184
184
|
<IressTabSet\>
|
|
185
185
|
<IressTab
|
|
@@ -266,7 +266,7 @@ Tab
|
|
|
266
266
|
|
|
267
267
|
Some content for this tab
|
|
268
268
|
|
|
269
|
-
|
|
269
|
+
Hide codedrawOpen in CodeSandbox
|
|
270
270
|
|
|
271
271
|
<IressTabSet\>
|
|
272
272
|
<IressTab label\="Tab"\>
|
|
@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
|
|
|
18
18
|
|
|
19
19
|
Tag
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
Hide codedrawOpen in CodeSandbox
|
|
22
22
|
|
|
23
23
|
<IressTag\>
|
|
24
24
|
Tag
|
|
@@ -93,8 +93,17 @@ The text a screen reader will announce defaults to "Delete" but can be changed u
|
|
|
93
93
|
|
|
94
94
|
Tag 1Tag 2Tag 3
|
|
95
95
|
|
|
96
|
-
|
|
97
|
-
|
|
96
|
+
Hide codedrawOpen in CodeSandbox
|
|
97
|
+
|
|
98
|
+
import {
|
|
99
|
+
IressButton,
|
|
100
|
+
type IressButtonProps,
|
|
101
|
+
IressIcon,
|
|
102
|
+
IressInline,
|
|
103
|
+
IressTag,
|
|
104
|
+
type IressTagProps,
|
|
105
|
+
} from '@/main';
|
|
106
|
+
import { useState } from 'react';
|
|
98
107
|
export const TagDeletion \= (args: IressTagProps) \=> {
|
|
99
108
|
const \[tags, setTags\] \= useState(\['Tag 1', 'Tag 2', 'Tag 3'\]);
|
|
100
109
|
const handleAdd: IressButtonProps\['onClick'\] \= () \=> {
|
|
@@ -185,7 +194,7 @@ Tag
|
|
|
185
194
|
|
|
186
195
|
Some actions go in here
|
|
187
196
|
|
|
188
|
-
|
|
197
|
+
Hide codedrawOpen in CodeSandbox
|
|
189
198
|
|
|
190
199
|
<IressTag deleteButton\={<IressPopover activator\={<IressButton mode\="tertiary"\><IressIcon name\="chevron-circle-down" screenreaderText\="Actions"/></IressButton\>} align\="bottom-start"\><IressPanel\>Some actions go in here</IressPanel\></IressPopover\>}\>
|
|
191
200
|
Tag
|
|
@@ -289,7 +298,7 @@ If you need to manage tags that are selected from a existing list, use `IressRic
|
|
|
289
298
|
|
|
290
299
|
Tag
|
|
291
300
|
|
|
292
|
-
|
|
301
|
+
Hide codedrawOpen in CodeSandbox
|
|
293
302
|
|
|
294
303
|
<IressTagInput
|
|
295
304
|
defaultValue\={\[
|
|
@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
|
|
|
18
18
|
|
|
19
19
|
The quick brown fox jumps over the lazy dog
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
Hide codedrawOpen in CodeSandbox
|
|
22
22
|
|
|
23
23
|
<IressText\>
|
|
24
24
|
The quick brown fox jumps over the lazy dog
|
|
@@ -75,9 +75,9 @@ This is a h2 element.
|
|
|
75
75
|
|
|
76
76
|
This is a pre element.
|
|
77
77
|
|
|
78
|
-
|
|
78
|
+
Hide codedrawOpen in CodeSandbox
|
|
79
79
|
|
|
80
|
-
<IressStack gap\="spacing.
|
|
80
|
+
<IressStack gap\="spacing.1"\>
|
|
81
81
|
<IressText element\="p"\>
|
|
82
82
|
This is a p element. </IressText\>
|
|
83
83
|
<IressText element\="div"\>
|
|
@@ -142,6 +142,8 @@ This is the typography.body.sm text style.
|
|
|
142
142
|
|
|
143
143
|
This is the typography.body.sm.regular text style.
|
|
144
144
|
|
|
145
|
+
This is the typography.body.sm.medium text style.
|
|
146
|
+
|
|
145
147
|
This is the typography.body.sm.strong text style.
|
|
146
148
|
|
|
147
149
|
This is the typography.body.sm.em text style.
|
|
@@ -150,6 +152,8 @@ This is the typography.body.md.regular text style.
|
|
|
150
152
|
|
|
151
153
|
This is the typography.body.md text style.
|
|
152
154
|
|
|
155
|
+
This is the typography.body.md.medium text style.
|
|
156
|
+
|
|
153
157
|
This is the typography.body.md.strong text style.
|
|
154
158
|
|
|
155
159
|
This is the typography.body.md.em text style.
|
|
@@ -158,13 +162,15 @@ This is the typography.body.lg text style.
|
|
|
158
162
|
|
|
159
163
|
This is the typography.body.lg.regular text style.
|
|
160
164
|
|
|
165
|
+
This is the typography.body.lg.medium text style.
|
|
166
|
+
|
|
161
167
|
This is the typography.body.lg.strong text style.
|
|
162
168
|
|
|
163
169
|
This is the typography.body.lg.em text style.
|
|
164
170
|
|
|
165
171
|
This is the typography.code text style.
|
|
166
172
|
|
|
167
|
-
|
|
173
|
+
Hide codedrawOpen in CodeSandbox
|
|
168
174
|
|
|
169
175
|
<IressStack gap\="md"\>
|
|
170
176
|
<IressText textStyle\="typography.heading.1"\>
|
|
@@ -181,6 +187,8 @@ This is the typography.code text style.
|
|
|
181
187
|
This is the typography.body.sm text style. </IressText\>
|
|
182
188
|
<IressText textStyle\="typography.body.sm.regular"\>
|
|
183
189
|
This is the typography.body.sm.regular text style. </IressText\>
|
|
190
|
+
<IressText textStyle\="typography.body.sm.medium"\>
|
|
191
|
+
This is the typography.body.sm.medium text style. </IressText\>
|
|
184
192
|
<IressText textStyle\="typography.body.sm.strong"\>
|
|
185
193
|
This is the typography.body.sm.strong text style. </IressText\>
|
|
186
194
|
<IressText textStyle\="typography.body.sm.em"\>
|
|
@@ -189,6 +197,8 @@ This is the typography.code text style.
|
|
|
189
197
|
This is the typography.body.md.regular text style. </IressText\>
|
|
190
198
|
<IressText textStyle\="typography.body.md"\>
|
|
191
199
|
This is the typography.body.md text style. </IressText\>
|
|
200
|
+
<IressText textStyle\="typography.body.md.medium"\>
|
|
201
|
+
This is the typography.body.md.medium text style. </IressText\>
|
|
192
202
|
<IressText textStyle\="typography.body.md.strong"\>
|
|
193
203
|
This is the typography.body.md.strong text style. </IressText\>
|
|
194
204
|
<IressText textStyle\="typography.body.md.em"\>
|
|
@@ -197,6 +207,8 @@ This is the typography.code text style.
|
|
|
197
207
|
This is the typography.body.lg text style. </IressText\>
|
|
198
208
|
<IressText textStyle\="typography.body.lg.regular"\>
|
|
199
209
|
This is the typography.body.lg.regular text style. </IressText\>
|
|
210
|
+
<IressText textStyle\="typography.body.lg.medium"\>
|
|
211
|
+
This is the typography.body.lg.medium text style. </IressText\>
|
|
200
212
|
<IressText textStyle\="typography.body.lg.strong"\>
|
|
201
213
|
This is the typography.body.lg.strong text style. </IressText\>
|
|
202
214
|
<IressText textStyle\="typography.body.lg.em"\>
|
|
@@ -301,7 +313,7 @@ Nested text mode demonstration:
|
|
|
301
313
|
|
|
302
314
|
I am nested, and return to the original colour
|
|
303
315
|
|
|
304
|
-
|
|
316
|
+
Hide codedrawOpen in CodeSandbox
|
|
305
317
|
|
|
306
318
|
<IressStack gap\="md"\>
|
|
307
319
|
<IressText color\="colour.primary.fill"\>
|
|
@@ -413,7 +425,7 @@ The quick brown fox jumps over the lazy dog
|
|
|
413
425
|
|
|
414
426
|
The quick brown fox jumps over the lazy dog
|
|
415
427
|
|
|
416
|
-
|
|
428
|
+
Hide codedrawOpen in CodeSandbox
|
|
417
429
|
|
|
418
430
|
<IressStack gap\="md"\>
|
|
419
431
|
<IressText textAlign\="left"\>
|
|
@@ -457,7 +469,7 @@ H2 heading with icons
|
|
|
457
469
|
|
|
458
470
|
###### H6 heading with icons
|
|
459
471
|
|
|
460
|
-
|
|
472
|
+
Hide codedrawOpen in CodeSandbox
|
|
461
473
|
|
|
462
474
|
<IressStack\>
|
|
463
475
|
<IressText element\="h1"\>
|
|
@@ -538,12 +550,12 @@ Iress has continued to innovate with cloud-based solutions, artificial intellige
|
|
|
538
550
|
|
|
539
551
|
Some code in here
|
|
540
552
|
|
|
541
|
-
|
|
553
|
+
Hide codedrawOpen in CodeSandbox
|
|
542
554
|
|
|
543
555
|
<IressText
|
|
544
556
|
maxWidth\="container.md"
|
|
545
557
|
mx\="auto"
|
|
546
|
-
px\="spacing.
|
|
558
|
+
px\="spacing.2"
|
|
547
559
|
\>
|
|
548
560
|
<h2\>
|
|
549
561
|
History </h2\>
|
|
@@ -20,14 +20,14 @@ This component has been recently updated with new props. The props have been mar
|
|
|
20
20
|
|
|
21
21
|
Show toast using provider
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
Hide codedrawOpen in CodeSandbox
|
|
24
24
|
|
|
25
25
|
import {
|
|
26
26
|
IressButton,
|
|
27
27
|
IressToasterProvider,
|
|
28
28
|
type IressToasterProviderProps,
|
|
29
29
|
useToaster,
|
|
30
|
-
} from '
|
|
30
|
+
} from '@/main';
|
|
31
31
|
const ToastWithTrigger \= () \=> {
|
|
32
32
|
const toaster \= useToaster();
|
|
33
33
|
return (
|
|
@@ -85,14 +85,14 @@ You can use the `success`, `info` and `error` methods from the hook to trigger t
|
|
|
85
85
|
|
|
86
86
|
Show toast using provider
|
|
87
87
|
|
|
88
|
-
|
|
88
|
+
Hide codedrawOpen in CodeSandbox
|
|
89
89
|
|
|
90
90
|
import {
|
|
91
91
|
IressButton,
|
|
92
92
|
IressToasterProvider,
|
|
93
93
|
type IressToasterProviderProps,
|
|
94
94
|
useToaster,
|
|
95
|
-
} from '
|
|
95
|
+
} from '@/main';
|
|
96
96
|
const ToastWithTrigger \= () \=> {
|
|
97
97
|
const toaster \= useToaster();
|
|
98
98
|
return (
|
|
@@ -144,7 +144,7 @@ If you want to dismiss a toast programmatically, you can use the `close` method
|
|
|
144
144
|
|
|
145
145
|
Show toast using provider
|
|
146
146
|
|
|
147
|
-
|
|
147
|
+
Hide codedrawOpen in CodeSandbox
|
|
148
148
|
|
|
149
149
|
import {
|
|
150
150
|
IressButton,
|
|
@@ -152,7 +152,7 @@ import {
|
|
|
152
152
|
IressToasterProvider,
|
|
153
153
|
type IressToasterProviderProps,
|
|
154
154
|
useToaster,
|
|
155
|
-
} from '
|
|
155
|
+
} from '@/main';
|
|
156
156
|
import { useState } from 'react';
|
|
157
157
|
const ToastWithTrigger \= () \=> {
|
|
158
158
|
const toaster \= useToaster();
|
|
@@ -217,7 +217,7 @@ The toast offers three status that set a distinctive colour and icon. They can b
|
|
|
217
217
|
|
|
218
218
|
errorinfosuccess
|
|
219
219
|
|
|
220
|
-
|
|
220
|
+
Hide codedrawOpen in CodeSandbox
|
|
221
221
|
|
|
222
222
|
import {
|
|
223
223
|
IressButton,
|
|
@@ -226,7 +226,7 @@ import {
|
|
|
226
226
|
type IressToasterProviderProps,
|
|
227
227
|
type ToastStatus,
|
|
228
228
|
useToaster,
|
|
229
|
-
} from '
|
|
229
|
+
} from '@/main';
|
|
230
230
|
const ToastWithTrigger \= ({ status }: { status: ToastStatus }) \=> {
|
|
231
231
|
const toaster \= useToaster();
|
|
232
232
|
return (
|
|
@@ -281,14 +281,14 @@ Timeouts must be set in milliseconds; as an example, if you want a timeout of fi
|
|
|
281
281
|
|
|
282
282
|
1000ms timeout
|
|
283
283
|
|
|
284
|
-
|
|
284
|
+
Hide codedrawOpen in CodeSandbox
|
|
285
285
|
|
|
286
286
|
import {
|
|
287
287
|
IressButton,
|
|
288
288
|
IressToasterProvider,
|
|
289
289
|
type IressToasterProviderProps,
|
|
290
290
|
useToaster,
|
|
291
|
-
} from '
|
|
291
|
+
} from '@/main';
|
|
292
292
|
const ToastWithTrigger \= () \=> {
|
|
293
293
|
const toaster \= useToaster();
|
|
294
294
|
return (
|
|
@@ -345,7 +345,7 @@ Toaster positions
|
|
|
345
345
|
|
|
346
346
|
bottom-startbottom-centerbottom-end
|
|
347
347
|
|
|
348
|
-
|
|
348
|
+
Hide codedrawOpen in CodeSandbox
|
|
349
349
|
|
|
350
350
|
import {
|
|
351
351
|
IressButton,
|
|
@@ -357,7 +357,7 @@ import {
|
|
|
357
357
|
type IressToasterProviderProps,
|
|
358
358
|
type NewToast,
|
|
359
359
|
useToaster,
|
|
360
|
-
} from '
|
|
360
|
+
} from '@/main';
|
|
361
361
|
const DEFAULT\_TOAST: NewToast \= {
|
|
362
362
|
content: 'Message sent successfully',
|
|
363
363
|
heading: 'Success',
|
|
@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
|
|
|
18
18
|
|
|
19
19
|
Toggle
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
Hide codedrawOpen in CodeSandbox
|
|
22
22
|
|
|
23
23
|
<IressToggle
|
|
24
24
|
layout\="inline"
|
|
@@ -117,7 +117,7 @@ Toggles should always have a label, which is set via its `children`.
|
|
|
117
117
|
|
|
118
118
|
Toggle
|
|
119
119
|
|
|
120
|
-
|
|
120
|
+
Hide codedrawOpen in CodeSandbox
|
|
121
121
|
|
|
122
122
|
<IressToggle
|
|
123
123
|
layout\="inline"
|
|
@@ -203,7 +203,7 @@ Labels can be hidden via the `hiddenLabel` prop; this will hide the label from v
|
|
|
203
203
|
|
|
204
204
|
Toggle
|
|
205
205
|
|
|
206
|
-
|
|
206
|
+
Hide codedrawOpen in CodeSandbox
|
|
207
207
|
|
|
208
208
|
<IressToggle
|
|
209
209
|
hiddenLabel
|
|
@@ -290,9 +290,9 @@ The on / off state of the toggle can be controlled by setting the `checked` prop
|
|
|
290
290
|
|
|
291
291
|
Controlled Toggle
|
|
292
292
|
|
|
293
|
-
|
|
293
|
+
Hide codedrawOpen in CodeSandbox
|
|
294
294
|
|
|
295
|
-
import { IressToggle, type IressToggleProps } from '
|
|
295
|
+
import { IressToggle, type IressToggleProps } from '@/main';
|
|
296
296
|
import { useState } from 'react';
|
|
297
297
|
export const ControlledToggle \= (props: IressToggleProps) \=> {
|
|
298
298
|
const \[isChecked, setIsChecked\] \= useState(true);
|
|
@@ -402,7 +402,7 @@ Toggle
|
|
|
402
402
|
|
|
403
403
|
Toggle
|
|
404
404
|
|
|
405
|
-
|
|
405
|
+
Hide codedrawOpen in CodeSandbox
|
|
406
406
|
|
|
407
407
|
<IressStack gap\="lg"\>
|
|
408
408
|
<IressText\>
|
|
@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
|
|
|
18
18
|
|
|
19
19
|
Hover me
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
Hide codedrawOpen in CodeSandbox
|
|
22
22
|
|
|
23
23
|
<IressTooltip tooltipText\="Hello! This is a really long tooltip to try and see if it goes behind the scrollbar"\>
|
|
24
24
|
<IressButton\>
|
|
@@ -108,7 +108,7 @@ Single line
|
|
|
108
108
|
|
|
109
109
|
Multi line
|
|
110
110
|
|
|
111
|
-
|
|
111
|
+
Hide codedrawOpen in CodeSandbox
|
|
112
112
|
|
|
113
113
|
<div
|
|
114
114
|
style\={{
|
|
@@ -256,7 +256,7 @@ Bottom
|
|
|
256
256
|
|
|
257
257
|
Bottom End
|
|
258
258
|
|
|
259
|
-
|
|
259
|
+
Hide codedrawOpen in CodeSandbox
|
|
260
260
|
|
|
261
261
|
<div
|
|
262
262
|
style\={{
|
|
@@ -458,7 +458,7 @@ The `delay` prop requires a number that is the number of milliseconds that pass
|
|
|
458
458
|
|
|
459
459
|
2000ms
|
|
460
460
|
|
|
461
|
-
|
|
461
|
+
Hide codedrawOpen in CodeSandbox
|
|
462
462
|
|
|
463
463
|
<div
|
|
464
464
|
style\={{
|
|
@@ -20,7 +20,7 @@ Error:
|
|
|
20
20
|
|
|
21
21
|
Validation message
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
Hide codedrawOpen in CodeSandbox
|
|
24
24
|
|
|
25
25
|
<IressValidationMessage\>
|
|
26
26
|
Validation message
|
|
@@ -124,7 +124,7 @@ Warning:
|
|
|
124
124
|
|
|
125
125
|
Something could go wrong.
|
|
126
126
|
|
|
127
|
-
|
|
127
|
+
Hide codedrawOpen in CodeSandbox
|
|
128
128
|
|
|
129
129
|
<IressStack\>
|
|
130
130
|
<IressValidationMessage status\="danger"\>
|
|
@@ -230,7 +230,7 @@ Prefix:
|
|
|
230
230
|
|
|
231
231
|
Something could go wrong.
|
|
232
232
|
|
|
233
|
-
|
|
233
|
+
Hide codedrawOpen in CodeSandbox
|
|
234
234
|
|
|
235
235
|
<IressStack\>
|
|
236
236
|
<IressValidationMessage
|
|
@@ -366,7 +366,7 @@ Something could go wrong.
|
|
|
366
366
|
|
|
367
367
|
* * *
|
|
368
368
|
|
|
369
|
-
|
|
369
|
+
Hide codedrawOpen in CodeSandbox
|
|
370
370
|
|
|
371
371
|
<IressStack gap\="md"\>
|
|
372
372
|
<IressStack\>
|
|
@@ -492,7 +492,7 @@ Messages can be passed programmatically as a `ValidationMessageObj[]` using the
|
|
|
492
492
|
Something went right.
|
|
493
493
|
|
|
494
494
|
|
|
495
|
-
|
|
495
|
+
Hide codedrawOpen in CodeSandbox
|
|
496
496
|
|
|
497
497
|
<IressValidationSummary
|
|
498
498
|
messages\={\[
|
|
@@ -24,7 +24,7 @@ Breakpoints
|
|
|
24
24
|
| xl | 1200px - 1499px | (min-width: 1200px) and (max-width: 1499px) | 1280px | 1366px width |
|
|
25
25
|
| xxl | 1500px and above | (min-width: 1500px) | 1280px | 1920px width |
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
Hide codedrawOpen in CodeSandbox
|
|
28
28
|
|
|
29
29
|
<IressTable
|
|
30
30
|
caption\={<IressText element\="h3" textAlign\="left"\>Breakpoints supported by IDS</IressText\>}
|
|
@@ -306,7 +306,7 @@ To ensure the best usability and accessibility, please do not use grids with mor
|
|
|
306
306
|
|
|
307
307
|
You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your screen to view different breakpoints.
|
|
308
308
|
|
|
309
|
-
|
|
309
|
+
Hide codedrawOpen in CodeSandbox
|
|
310
310
|
|
|
311
311
|
<IressStack gap\="lg"\>
|
|
312
312
|
<IressInline
|
|
@@ -360,7 +360,7 @@ You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your s
|
|
|
360
360
|
<p\>
|
|
361
361
|
To ensure the best usability and accessibility, please do not use grids with more than 4 columns maximum on extra small screens. For developers, this means the minimum span on mobile devices is 3. </p\>
|
|
362
362
|
<IressPanel bg\="alt"\>
|
|
363
|
-
<
|
|
363
|
+
<Ln renderLabel\="viewing" />
|
|
364
364
|
</IressPanel\>
|
|
365
365
|
</IressText\>
|
|
366
366
|
<IressContainer
|
|
@@ -563,7 +563,7 @@ To ensure the best usability and accessibility, please do not use grids with mor
|
|
|
563
563
|
|
|
564
564
|
You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your screen to view different breakpoints.
|
|
565
565
|
|
|
566
|
-
|
|
566
|
+
Hide codedrawOpen in CodeSandbox
|
|
567
567
|
|
|
568
568
|
<IressStack gap\="lg"\>
|
|
569
569
|
<IressInline
|
|
@@ -617,7 +617,7 @@ You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your s
|
|
|
617
617
|
<p\>
|
|
618
618
|
To ensure the best usability and accessibility, please do not use grids with more than 4 columns maximum on small screens. For developers, this means the minimum span on mobile devices is 3. </p\>
|
|
619
619
|
<IressPanel bg\="alt"\>
|
|
620
|
-
<
|
|
620
|
+
<Ln renderLabel\="viewing" />
|
|
621
621
|
</IressPanel\>
|
|
622
622
|
</IressText\>
|
|
623
623
|
<IressContainer
|
|
@@ -855,7 +855,7 @@ To ensure the best usability and accessibility, please do not use grids with mor
|
|
|
855
855
|
|
|
856
856
|
You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your screen to view different breakpoints.
|
|
857
857
|
|
|
858
|
-
|
|
858
|
+
Hide codedrawOpen in CodeSandbox
|
|
859
859
|
|
|
860
860
|
<IressStack gap\="lg"\>
|
|
861
861
|
<IressInline
|
|
@@ -909,7 +909,7 @@ You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your s
|
|
|
909
909
|
<p\>
|
|
910
910
|
To ensure the best usability and accessibility, please do not use grids with more than 6 columns maximum on medium screens. For developers, this means the minimum span on medium screems is 2. </p\>
|
|
911
911
|
<IressPanel bg\="alt"\>
|
|
912
|
-
<
|
|
912
|
+
<Ln renderLabel\="viewing" />
|
|
913
913
|
</IressPanel\>
|
|
914
914
|
</IressText\>
|
|
915
915
|
<IressContainer
|
|
@@ -1187,7 +1187,7 @@ From large screens onwards, all 12 columns of the grid can be used. For develope
|
|
|
1187
1187
|
|
|
1188
1188
|
You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your screen to view different breakpoints.
|
|
1189
1189
|
|
|
1190
|
-
|
|
1190
|
+
Hide codedrawOpen in CodeSandbox
|
|
1191
1191
|
|
|
1192
1192
|
<IressStack gap\="lg"\>
|
|
1193
1193
|
<IressInline
|
|
@@ -1241,7 +1241,7 @@ You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your s
|
|
|
1241
1241
|
<p\>
|
|
1242
1242
|
From large screens onwards, all 12 columns of the grid can be used. For developers, this means the minimum span on large screens is 1. </p\>
|
|
1243
1243
|
<IressPanel bg\="alt"\>
|
|
1244
|
-
<
|
|
1244
|
+
<Ln renderLabel\="viewing" />
|
|
1245
1245
|
</IressPanel\>
|
|
1246
1246
|
</IressText\>
|
|
1247
1247
|
<IressContainer
|
|
@@ -1615,7 +1615,7 @@ From large screens onwards, all 12 columns of the grid can be used. For develope
|
|
|
1615
1615
|
|
|
1616
1616
|
You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your screen to view different breakpoints.
|
|
1617
1617
|
|
|
1618
|
-
|
|
1618
|
+
Hide codedrawOpen in CodeSandbox
|
|
1619
1619
|
|
|
1620
1620
|
<IressStack gap\="lg"\>
|
|
1621
1621
|
<IressInline
|
|
@@ -1673,7 +1673,7 @@ You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your s
|
|
|
1673
1673
|
{' '}prop. It is recommended to keep the max width in most scenarios to ensure optimal readability.
|
|
1674
1674
|
</p\>
|
|
1675
1675
|
<IressPanel bg\="alt"\>
|
|
1676
|
-
<
|
|
1676
|
+
<Ln renderLabel\="viewing" />
|
|
1677
1677
|
</IressPanel\>
|
|
1678
1678
|
</IressText\>
|
|
1679
1679
|
<IressContainer\>
|
|
@@ -2043,7 +2043,7 @@ From large screens onwards, all 12 columns of the grid can be used. For develope
|
|
|
2043
2043
|
|
|
2044
2044
|
You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your screen to view different breakpoints.
|
|
2045
2045
|
|
|
2046
|
-
|
|
2046
|
+
Hide codedrawOpen in CodeSandbox
|
|
2047
2047
|
|
|
2048
2048
|
<IressStack gap\="lg"\>
|
|
2049
2049
|
<IressInline
|
|
@@ -2101,7 +2101,7 @@ You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your s
|
|
|
2101
2101
|
{' '}prop. It is recommended to keep the max width in most scenarios to ensure optimal readability.
|
|
2102
2102
|
</p\>
|
|
2103
2103
|
<IressPanel bg\="alt"\>
|
|
2104
|
-
<
|
|
2104
|
+
<Ln renderLabel\="viewing" />
|
|
2105
2105
|
</IressPanel\>
|
|
2106
2106
|
</IressText\>
|
|
2107
2107
|
<IressContainer\>
|
|
@@ -2463,7 +2463,7 @@ For developers
|
|
|
2463
2463
|
If you are using the IDS components, the breakpoints have already been mapped out to their respective props. You can use props such as `gap` to change the visual properties of the component at certain breakpoints.
|
|
2464
2464
|
|
|
2465
2465
|
import { IressStack } from '@iress-oss/ids-components';
|
|
2466
|
-
<IressStack gap\={{ xs: 'spacing.
|
|
2466
|
+
<IressStack gap\={{ xs: 'spacing.1', md: 'spacing.2' }} />;
|
|
2467
2467
|
|
|
2468
2468
|
```
|
|
2469
2469
|
|
|
@@ -2509,8 +2509,9 @@ Resize the screen to see the columns change
|
|
|
2509
2509
|
| Princess Leia | 19 |
|
|
2510
2510
|
| Han Solo | 32 |
|
|
2511
2511
|
|
|
2512
|
-
|
|
2512
|
+
Hide codedrawOpen in CodeSandbox
|
|
2513
2513
|
|
|
2514
|
+
import { IressText, useResponsiveProps, IressTable } from '@/main';
|
|
2514
2515
|
export const ResponsiveTableColumns \= () \=> {
|
|
2515
2516
|
const { value } \= useResponsiveProps({
|
|
2516
2517
|
base: \[{ key: 'name', label: 'Name' }\],
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
Iress Design System
|
|
2
2
|
===================
|
|
3
3
|
|
|
4
|
-
6.0.0-alpha.
|
|
4
|
+
6.0.0-alpha.3
|
|
5
5
|
|
|
6
6
|
The Iress Design System (IDS) serves as a shared visual language, working code, design tools and resources, human interface guidelines, and a community. It supports designers and developers building digital products for both B2B (Financial Advisors, Paraplanners) and B2B2C (client customers) segments.
|
|
7
7
|
|