@iress-oss/ids-mcp-server 5.14.2 → 6.0.0-alpha.0

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