@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,63 +1,53 @@
1
- [](#user-experience)User experience
2
- ===================================
1
+ User experience
2
+ ===============
3
3
 
4
4
  We use heuristic guidelines to assess the usability and user-centred design quality of all Iress products.
5
5
 
6
- [](#system-feedback)System Feedback
7
- -----------------------------------
6
+ System Feedback
7
+ ---------------
8
8
 
9
9
  * Always show users where they are, what just happened, and what’s possible next.
10
10
  * Provide immediate visual and textual feedback for all actions and states.
11
11
  * Ensure feedback is clear, contextual, and proportionate to the importance of the action.
12
12
 
13
- [](#language-and-mental-models)Language and Mental Models
14
- ---------------------------------------------------------
13
+ Language and Mental Models
14
+ --------------------------
15
15
 
16
16
  * Use user-centred language and avoid technical jargon.
17
17
  * Follow cultural and industry conventions for colour, iconography, terminology, and layout.
18
18
  * Align interaction patterns with real-world analogues wherever feasible.
19
19
 
20
- [](#control-and-forgiveness)Control and Forgiveness
21
- ---------------------------------------------------
20
+ Control and Forgiveness
21
+ -----------------------
22
22
 
23
23
  * Make actions reversible and provide undo where errors may occur.
24
24
  * Let users easily backtrack, edit inputs, or abandon flows.
25
25
  * Provide escape hatches from any process without penalty.
26
26
 
27
- [](#standards-and-consistency)Standards and Consistency
28
- -------------------------------------------------------
27
+ Standards and Consistency
28
+ -------------------------
29
29
 
30
30
  * Use consistent layout, labelling, iconography, and grammar.
31
31
  * Reinforce expectations by placing similar elements in predictable positions.
32
32
  * Apply colour, spacing, and visual patterns consistently across all screens.
33
33
 
34
- [](#error-prevention-and-recovery)Error Prevention and Recovery
35
- ---------------------------------------------------------------
34
+ Error Prevention and Recovery
35
+ -----------------------------
36
36
 
37
37
  * Prevent errors by anticipating misuse and validating early.
38
38
  * Phrase error messages with clarity, empathy, and constructive suggestions.
39
39
  * Where errors occur, explain why and how they can be resolved.
40
40
 
41
- [](#recognition-over-recall)Recognition Over Recall
42
- ---------------------------------------------------
41
+ Recognition Over Recall
42
+ -----------------------
43
43
 
44
44
  * Display necessary information at the point of decision.
45
45
  * Use visual grouping, spacing, and affordance to reveal hierarchy.
46
46
  * Prioritise visual clarity over novelty.
47
47
 
48
- [](#simplicity-and-minimalism)Simplicity and Minimalism
49
- -------------------------------------------------------
48
+ Simplicity and Minimalism
49
+ -------------------------
50
50
 
51
51
  * Remove unnecessary detail—every word, element, or feature should earn its place.
52
52
  * Design for clarity of purpose with visually distinct, semantically meaningful UI components.
53
53
  * Use whitespace, clean alignment, and simplified flows to reduce cognitive load.
54
-
55
- On this page
56
-
57
- * [System Feedback](#system-feedback)
58
- * [Language and Mental Models](#language-and-mental-models)
59
- * [Control and Forgiveness](#control-and-forgiveness)
60
- * [Standards and Consistency](#standards-and-consistency)
61
- * [Error Prevention and Recovery](#error-prevention-and-recovery)
62
- * [Recognition Over Recall](#recognition-over-recall)
63
- * [Simplicity and Minimalism](#simplicity-and-minimalism)
@@ -1,16 +1,16 @@
1
- [](#visual-design-standards)Visual Design Standards
2
- ===================================================
1
+ Visual Design Standards
2
+ =======================
3
3
 
4
- [](#typography)Typography
5
- -------------------------
4
+ Typography
5
+ ----------
6
6
 
7
7
  * Use systematic font sizing with heading scales (H1-H6)
8
8
  * Implement consistent line heights and font weights
9
9
  * Provide text colour hierarchies (primary, muted, success, warning, danger)
10
10
  * Support responsive typography scaling
11
11
 
12
- [](#colour-system)Colour System
13
- -------------------------------
12
+ Colour System
13
+ -------------
14
14
 
15
15
  * Maintain semantic colour meanings:
16
16
  * **Primary**: Main call-to-action colour with high contrast
@@ -22,25 +22,18 @@
22
22
  * Ensure all colour combinations meet accessibility contrast requirements
23
23
  * Provide consistent hover and active state colours
24
24
 
25
- [](#spacing-and-layout)Spacing and Layout
26
- -----------------------------------------
25
+ Spacing and Layout
26
+ ------------------
27
27
 
28
28
  * Use systematic spacing scale (xs, sm, md, lg, xl)
29
29
  * Apply consistent gutter systems for layout components
30
30
  * Implement responsive breakpoints for adaptive layouts
31
31
  * Maintain proper margin and padding relationships
32
32
 
33
- [](#interactive-states)Interactive States
34
- -----------------------------------------
33
+ Interactive States
34
+ ------------------
35
35
 
36
36
  * Provide clear hover, focus, active, and disabled states
37
37
  * Use consistent transition timing and easing
38
38
  * Implement proper focus indicators for keyboard navigation
39
39
  * Show loading states for asynchronous operations
40
-
41
- On this page
42
-
43
- * [Typography](#typography)
44
- * [Colour System](#colour-system)
45
- * [Spacing and Layout](#spacing-and-layout)
46
- * [Interactive States](#interactive-states)
@@ -1,29 +1,29 @@
1
- [](#frequently-asked-questions)Frequently asked questions
2
- =========================================================
1
+ Frequently asked questions
2
+ ==========================
3
3
 
4
4
  Some of the most frequently asked questions related to IDS are answered here.
5
5
 
6
6
  * * *
7
7
 
8
- [](#how-long-will-version-4-be-supported)How long will version 4 be supported?
9
- ------------------------------------------------------------------------------
8
+ How long will version 4 be supported?
9
+ -------------------------------------
10
10
 
11
11
  We will continue to support version 4.x until the end of 2024. This means there will be security patches and critical bug fixes, but no new enhancements will be added to version 4.
12
12
 
13
- [](#does-this-mean-we-need-to-upgrade-now)Does this mean we need to upgrade now?
14
- --------------------------------------------------------------------------------
13
+ Does this mean we need to upgrade now?
14
+ --------------------------------------
15
15
 
16
16
  No, you do not need to upgrade now. However, we recommend that you start planning your migration to version 5 and use it for new projects. Support for version 4 will continue until the end of 2024.
17
17
 
18
- [](#what-support-will-there-be-to-help-us-upgrade)What support will there be to help us upgrade?
19
- ------------------------------------------------------------------------------------------------
18
+ What support will there be to help us upgrade?
19
+ ----------------------------------------------
20
20
 
21
21
  If you are moving from version 4 to version 5, a [migration guide](?path=/docs/resources-migration-guides-from-v4-to-v5--docs) is available. This guide will help you understand the changes between the two versions, how to migrate your code, and how to use them side by side while you are migrating.
22
22
 
23
23
  If you plan to migrate soon, we would like to partner with you. Please reach out to the design system team via Iress channels.
24
24
 
25
- [](#what-will-happen-if-we-do-not-upgrade-by-the-end-of-2024)What will happen if we do not upgrade by the end of 2024?
26
- ----------------------------------------------------------------------------------------------------------------------
25
+ What will happen if we do not upgrade by the end of 2024?
26
+ ---------------------------------------------------------
27
27
 
28
28
  After the end of 2024, we will no longer provide support for version 4. This means that we will not provide any security patches or critical bug fixes, which may leave the rest of your application vulnerable to security threats. There are several ways to handle this:
29
29
 
@@ -31,23 +31,14 @@ After the end of 2024, we will no longer provide support for version 4. This mea
31
31
  * Create a PR to fix the issue in version 4 and submit it to IDS for review.
32
32
  * Update nested dependencies to the secure version using `yarn audit` and `resolutions` in your `package.json`.
33
33
 
34
- [](#will-the-documentation-for-version-4-still-be-available)Will the documentation for version 4 still be available?
35
- --------------------------------------------------------------------------------------------------------------------
34
+ Will the documentation for version 4 still be available?
35
+ --------------------------------------------------------
36
36
 
37
37
  Yes, we will host the documentation for version 4 indefinitely. The documentation will be available on the [Versions page](?path=/docs/versions--docs).
38
38
 
39
- [](#can-i-contribute-to-version-4)Can I contribute to version 4?
40
- ----------------------------------------------------------------
39
+ Can I contribute to version 4?
40
+ ------------------------------
41
41
 
42
42
  Yes! We will continue to accept pull requests for version 4, but only until the end of 2024. To do so, please use `4.x` as the base branch for your pull request.
43
43
 
44
44
  After this time, we will only accept pull requests regarding critical security patches or critical bug fixes.
45
-
46
- On this page
47
-
48
- * [How long will version 4 be supported?](#how-long-will-version-4-be-supported)
49
- * [Does this mean we need to upgrade now?](#does-this-mean-we-need-to-upgrade-now)
50
- * [What support will there be to help us upgrade?](#what-support-will-there-be-to-help-us-upgrade)
51
- * [What will happen if we do not upgrade by the end of 2024?](#what-will-happen-if-we-do-not-upgrade-by-the-end-of-2024)
52
- * [Will the documentation for version 4 still be available?](#will-the-documentation-for-version-4-still-be-available)
53
- * [Can I contribute to version 4?](#can-i-contribute-to-version-4)
@@ -0,0 +1,84 @@
1
+ Develop
2
+ =======
3
+
4
+ Set up your environment to use the latest version of the Iress Design System (IDS). You can use this library to build React applications that align to IDS, and ensure a consistent and modern look and feel across all Iress products.
5
+
6
+ Requirements
7
+ ------------
8
+
9
+ * [React 17 or later](https://reactjs.org/)
10
+ * Access to Iress Artifactory
11
+
12
+ Set up the component library
13
+ ----------------------------
14
+
15
+ 1. Install using the command line:
16
+
17
+ yarn add @iress-oss/ids-components
18
+
19
+ ```
20
+
21
+ 2. Import the styles:
22
+
23
+ import '@iress-oss/ids-components/dist/style.css';
24
+
25
+ ```
26
+
27
+ 3. Import the components. The provider is optional, but recommended for most applications. It sets up the design system and provides a consistent container for components like modals, slideouts, and toasts.
28
+
29
+ import { IressProvider, IressButton } from '@iress-oss/ids-components';
30
+
31
+ ```
32
+
33
+ 4. Use the components:
34
+
35
+ const App \= () \=> (
36
+ <IressButton onClick\={() \=> success({ children: 'Toast triggered' })}\>
37
+ Trigger toast </IressButton\>
38
+ );
39
+ ReactDOM.createRoot(document.getElementById('root')!).render(
40
+ <IressProvider\>
41
+ <App />
42
+ </IressProvider\>,
43
+ );
44
+
45
+ ```
46
+
47
+
48
+ * * *
49
+
50
+ Set up the theme
51
+ ----------------
52
+
53
+ The component library comes with the white label theme by default. You can add a theme by importing the theme file and including it in your application.
54
+
55
+ Microfrontends
56
+ --------------
57
+
58
+ If you are building a React App that is intended to be used as a microfrontend, please skip this step. Microfrontends should inherit the parent application's theme, and not define a theme itself, as it may conflict with other microfrontends in the same parent application.
59
+
60
+ 1. Install using the command line:
61
+
62
+ yarn add @iress/ids-themes
63
+
64
+ ```
65
+
66
+ 2. Import the component:
67
+
68
+ import { IressTheme } from '@iress-oss/ids-components';
69
+
70
+ ```
71
+
72
+ 3. Add the component to your application:
73
+
74
+ ReactDOM.createRoot(document.getElementById('root')!).render(
75
+ <IressProvider\>
76
+ <IressTheme />
77
+ <App />
78
+ </IressProvider\>,
79
+ );
80
+
81
+ ```
82
+
83
+
84
+ For alternative ways to import the theme, see the [Themes documentation](/docs/themes-introduction--docs).
@@ -0,0 +1,55 @@
1
+ Using Storybook
2
+ ===============
3
+
4
+ The Frontend Enablement team uses Storybook to develop and document our components. Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. It is most likely what you are looking at right now.
5
+
6
+ Here we have just highlighted a few of our top tips on how you can use Storybook more efficiently. We have separated it by different stages of the product delivery cycle, but you can use these tips at any stage.
7
+
8
+ * * *
9
+
10
+ First-time users
11
+ ----------------
12
+
13
+ When you first come to the IDS Storybook, you may notice the pages look un-styled. This is the default theme of IDS. You can change the theme to the theme you normally use in your product by clicking the \`brush\` icon in the top left, right above this page.
14
+
15
+ You can also change to use the dark theme of Storybook itself by clicking the \`moon\` icon in the top left, right above this page.
16
+
17
+ These settings are saved so the next time you come back to Storybook, it will remember your preferences.
18
+
19
+ Scoping work
20
+ ------------
21
+
22
+ If you are scoping work, you can use Storybook to see what components are available to you. You can also see how they are used and what states they can be in. This can help you to understand what is possible and what is not.
23
+
24
+ Every IDS component has a `Docs` page and a`Guidelines` (coming soon) page. The `Docs` page will show you how to use the component and what props it accepts, helping you understand what is available, and how each property behaves to allow you to understand the final user experience of your feature.
25
+
26
+ The `Guidelines` page will show you how to use the component in a way that is consistent with other Iress applications. It covers things like accessibility, usability, and design principles, as well as which scenario to use which component and common pitfalls.
27
+
28
+ Design
29
+ ------
30
+
31
+ When designing a new feature, you can use Storybook to see how your designs will look and behave in a real application.
32
+
33
+ `Docs` and `Guidelines` (coming soon) pages will help you understand how to use the components and what is possible, and help you align to any design decisions made previously.
34
+
35
+ `Stories` are a good way to see how variations of a component look and behave. You can see how a component looks in different states, and how it behaves with different props. If there is a variation that is not shown in the `Stories`, you can use the `Controls` tab to change the props of the component to see how it behaves with different values. You can also toggle how each component looks at different breakpoints (screen sizes/devices), how they look to users with certain eyesight conditions, and how they look in different states.
36
+
37
+ Development
38
+ -----------
39
+
40
+ During development, you can refer to Storybook for code examples and understand the API available to you.
41
+
42
+ If you are using Typescript, majority of the API is available in your IDE. However, Storybook provides more than just the API. It provides examples of how to use and combine the properties, as well as which components were designed to work with each other.
43
+
44
+ `Docs` covers the API of the component, and also discusses `Examples (stories)`in detail alongside code examples.
45
+
46
+ If you want to see how a component looks and behaves with different props, you can use the `Controls` tab to change the props of the component to see how it behaves with different values. You can also toggle how each component looks at different breakpoints (screen sizes/devices), how they look to users with certain eyesight conditions, and how they look in different states.
47
+
48
+ IDS is a starting point for your application development. It provides the foundations to make your application look and behave in a consistent way to other Iress products. However, not everything is covered here. It is good to discuss with designers and other developers to understand any constraints or guidelines that are not covered by IDS.
49
+
50
+ Common issues
51
+ -------------
52
+
53
+ ### I can't find the `Controls`, `Actions` or `Accessibility` tab
54
+
55
+ These tabs are only shown in the component `Stories`, which can be toggled to display using the bookmark icon on the top right of the screen. If you click on an stories and still cannot see it, you may need to toggle the orientation of the addon. You can do this by tapping the `d` key twice, or using the settings as shown in the video.
@@ -0,0 +1,15 @@
1
+ Iress Design System
2
+ ===================
3
+
4
+ 5.20.2
5
+
6
+ * * *
7
+
8
+ The Iress Design System (IDS) serves as a shared visual language, working code, design tools and resources, human interface guidelines, and a community of contributors. It supports designers and developers building digital products for both B2B (Financial Advisors, Paraplanners) and B2B2C (client customers) segments.
9
+
10
+ Ready to dive in?
11
+ -----------------
12
+
13
+ Start shipping faster with IDS.
14
+
15
+ [Get started](/?path=/docs/get-started-develop--docs)