@carbon/ibm-products-web-components 0.27.0-rc.0 → 0.28.0-rc.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.
- package/README.md +85 -0
- package/custom-elements.json +128 -10
- package/es/components/about-modal/about-modal.d.ts +28 -16
- package/es/components/about-modal/about-modal.figma.d.ts +7 -0
- package/es/components/about-modal/about-modal.figma.js +52 -0
- package/es/components/about-modal/about-modal.figma.js.map +1 -0
- package/es/components/about-modal/about-modal.scss.js +1 -1
- package/es/components/checklist/checklist.scss.js +1 -1
- package/es/components/coachmark/coachmark-beacon/coachmark-beacon.d.ts +27 -11
- package/es/components/full-page-error/full-page-error.figma.d.ts +1 -0
- package/es/components/full-page-error/full-page-error.figma.js +69 -0
- package/es/components/full-page-error/full-page-error.figma.js.map +1 -0
- package/es/components/interstitial-screen/interstitial-screen-body-item.d.ts +27 -11
- package/es/components/interstitial-screen/interstitial-screen-body.d.ts +27 -11
- package/es/components/interstitial-screen/interstitial-screen-footer.d.ts +27 -11
- package/es/components/interstitial-screen/interstitial-screen-header.d.ts +27 -11
- package/es/components/interstitial-screen/interstitial-screen.d.ts +27 -11
- package/es/components/notification-panel/notification-footer.d.ts +27 -11
- package/es/components/notification-panel/notification-panel.d.ts +27 -11
- package/es/components/notification-panel/notification.d.ts +27 -11
- package/es/components/notification-panel/notification.scss.js +1 -1
- package/es/components/options-tile/options-tile.d.ts +27 -11
- package/es/components/page-header/_story-assets/2x1.jpg.js +11 -0
- package/es/components/page-header/_story-assets/2x1.jpg.js.map +1 -0
- package/es/components/page-header/_story-assets/3x2.jpg.js +11 -0
- package/es/components/page-header/_story-assets/3x2.jpg.js.map +1 -0
- package/es/components/page-header/_story-assets/set-of-breadcrumbs.scss.js +1 -1
- package/es/components/page-header/_story-assets/set-of-tags/set-of-tags.scss.js +1 -1
- package/es/components/page-header/page-header.scss.js +1 -1
- package/es/components/page-header/page-header.test.js +57 -69
- package/es/components/page-header/page-header.test.js.map +1 -1
- package/es/components/side-panel/side-panel.d.ts +27 -11
- package/es/components/side-panel/side-panel.scss.js +1 -1
- package/es/components/tearsheet/tearsheet.d.ts +27 -11
- package/es/components/tearsheet/tearsheet.scss.js +1 -1
- package/es/components/user-avatar/user-avatar.d.ts +27 -11
- package/es/components/user-avatar/user-avatar.figma.d.ts +7 -0
- package/es/components/user-avatar/user-avatar.figma.js +136 -0
- package/es/components/user-avatar/user-avatar.figma.js.map +1 -0
- package/es/node_modules/@carbon/layout/es/index.js +44 -0
- package/es/node_modules/@carbon/layout/es/index.js.map +1 -0
- package/es/packages/ibm-products-web-components/package.json.js +1 -1
- package/es-custom/components/about-modal/about-modal.d.ts +28 -16
- package/es-custom/components/about-modal/about-modal.figma.d.ts +7 -0
- package/es-custom/components/about-modal/about-modal.figma.js +52 -0
- package/es-custom/components/about-modal/about-modal.figma.js.map +1 -0
- package/es-custom/components/about-modal/about-modal.scss.js +1 -1
- package/es-custom/components/checklist/checklist.scss.js +1 -1
- package/es-custom/components/coachmark/coachmark-beacon/coachmark-beacon.d.ts +27 -11
- package/es-custom/components/full-page-error/full-page-error.figma.d.ts +1 -0
- package/es-custom/components/full-page-error/full-page-error.figma.js +69 -0
- package/es-custom/components/full-page-error/full-page-error.figma.js.map +1 -0
- package/es-custom/components/interstitial-screen/interstitial-screen-body-item.d.ts +27 -11
- package/es-custom/components/interstitial-screen/interstitial-screen-body.d.ts +27 -11
- package/es-custom/components/interstitial-screen/interstitial-screen-footer.d.ts +27 -11
- package/es-custom/components/interstitial-screen/interstitial-screen-header.d.ts +27 -11
- package/es-custom/components/interstitial-screen/interstitial-screen.d.ts +27 -11
- package/es-custom/components/notification-panel/notification-footer.d.ts +27 -11
- package/es-custom/components/notification-panel/notification-panel.d.ts +27 -11
- package/es-custom/components/notification-panel/notification.d.ts +27 -11
- package/es-custom/components/notification-panel/notification.scss.js +1 -1
- package/es-custom/components/options-tile/options-tile.d.ts +27 -11
- package/es-custom/components/page-header/_story-assets/2x1.jpg.js +11 -0
- package/es-custom/components/page-header/_story-assets/2x1.jpg.js.map +1 -0
- package/es-custom/components/page-header/_story-assets/3x2.jpg.js +11 -0
- package/es-custom/components/page-header/_story-assets/3x2.jpg.js.map +1 -0
- package/es-custom/components/page-header/_story-assets/set-of-breadcrumbs.scss.js +1 -1
- package/es-custom/components/page-header/_story-assets/set-of-tags/set-of-tags.scss.js +1 -1
- package/es-custom/components/page-header/page-header.scss.js +1 -1
- package/es-custom/components/page-header/page-header.test.js +57 -69
- package/es-custom/components/page-header/page-header.test.js.map +1 -1
- package/es-custom/components/side-panel/side-panel.d.ts +27 -11
- package/es-custom/components/side-panel/side-panel.scss.js +1 -1
- package/es-custom/components/tearsheet/tearsheet.d.ts +27 -11
- package/es-custom/components/tearsheet/tearsheet.scss.js +1 -1
- package/es-custom/components/user-avatar/user-avatar.d.ts +27 -11
- package/es-custom/components/user-avatar/user-avatar.figma.d.ts +7 -0
- package/es-custom/components/user-avatar/user-avatar.figma.js +136 -0
- package/es-custom/components/user-avatar/user-avatar.figma.js.map +1 -0
- package/es-custom/node_modules/@carbon/layout/es/index.js +44 -0
- package/es-custom/node_modules/@carbon/layout/es/index.js.map +1 -0
- package/es-custom/packages/ibm-products-web-components/package.json.js +1 -1
- package/lib/components/about-modal/about-modal.d.ts +28 -16
- package/lib/components/about-modal/about-modal.figma.d.ts +7 -0
- package/lib/components/coachmark/coachmark-beacon/coachmark-beacon.d.ts +27 -11
- package/lib/components/full-page-error/full-page-error.figma.d.ts +1 -0
- package/lib/components/interstitial-screen/interstitial-screen-body-item.d.ts +27 -11
- package/lib/components/interstitial-screen/interstitial-screen-body.d.ts +27 -11
- package/lib/components/interstitial-screen/interstitial-screen-footer.d.ts +27 -11
- package/lib/components/interstitial-screen/interstitial-screen-header.d.ts +27 -11
- package/lib/components/interstitial-screen/interstitial-screen.d.ts +27 -11
- package/lib/components/notification-panel/notification-footer.d.ts +27 -11
- package/lib/components/notification-panel/notification-panel.d.ts +27 -11
- package/lib/components/notification-panel/notification.d.ts +27 -11
- package/lib/components/options-tile/options-tile.d.ts +27 -11
- package/lib/components/side-panel/side-panel.d.ts +27 -11
- package/lib/components/tearsheet/tearsheet.d.ts +27 -11
- package/lib/components/user-avatar/user-avatar.d.ts +27 -11
- package/lib/components/user-avatar/user-avatar.figma.d.ts +7 -0
- package/package.json +14 -12
- package/scss/components/page-header/_story-assets/set-of-tags/set-of-tags.scss +2 -0
- package/scss/components/truncated-text/truncated-text.scss +0 -1
package/README.md
CHANGED
|
@@ -1,5 +1,90 @@
|
|
|
1
1
|
# @carbon/ibm-products-web-components
|
|
2
2
|
|
|
3
|
+
> Carbon for IBM Products web components
|
|
4
|
+
|
|
5
|
+
## Getting started
|
|
6
|
+
|
|
7
|
+
If you’re just getting started and looking to browse our web components, take a
|
|
8
|
+
look at
|
|
9
|
+
[our Storybook](https://ibm-products-web-components.carbondesignsystem.com/).
|
|
10
|
+
|
|
11
|
+
### 📦 Installing Carbon for IBM Products web components
|
|
12
|
+
|
|
13
|
+
To use Carbon for IBM Products web components, all you need to do is install the
|
|
14
|
+
`@carbon/ibm-products-web-components` package.
|
|
15
|
+
|
|
16
|
+
```shell
|
|
17
|
+
$ yarn add @carbon/ibm-products-web-components
|
|
18
|
+
|
|
19
|
+
# or
|
|
20
|
+
|
|
21
|
+
$ npm install @carbon/ibm-products-web-components
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Then you can import the component styles in your `index.js`.
|
|
25
|
+
|
|
26
|
+
```js
|
|
27
|
+
import '@carbon/ibm-products/css/index.min.css';
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Usage
|
|
31
|
+
|
|
32
|
+
To use a component, you can import it directly from the package:
|
|
33
|
+
|
|
34
|
+
```javascript
|
|
35
|
+
import '@carbon/ibm-products-web-components/es/components/about-modal.js';
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Once you've imported the component modules, you can use the components in the
|
|
39
|
+
same manner as native HTML tags:
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<c4p-about-modal
|
|
43
|
+
closeIconDescription="Close"
|
|
44
|
+
copyrightText="Copyright © IBM Corp. 2025"
|
|
45
|
+
.title="IBM Product Name"
|
|
46
|
+
.version="0.0.0"
|
|
47
|
+
></c4p-about-modal>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## 📖 API Documentation
|
|
51
|
+
|
|
52
|
+
If you're looking for `@carbon/ibm-products-web-components` API documentation,
|
|
53
|
+
check out:
|
|
54
|
+
|
|
55
|
+
- [Storybook](https://ibm-products-web-components.carbondesignsystem.com/)
|
|
56
|
+
|
|
57
|
+
### Building and running Storybook locally
|
|
58
|
+
|
|
59
|
+
To get started, run the following commands and Storybook will be built and then
|
|
60
|
+
served on port `3000` on your local machine.
|
|
61
|
+
|
|
62
|
+
If this is your first time running web components in Storybook, run the
|
|
63
|
+
following commands:
|
|
64
|
+
|
|
65
|
+
```shell
|
|
66
|
+
yarn
|
|
67
|
+
yarn build
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Then run Storybook:
|
|
71
|
+
|
|
72
|
+
```shell
|
|
73
|
+
yarn storybook-wc
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## 🙌 Contributing
|
|
77
|
+
|
|
78
|
+
We're always looking for contributors to help us fix bugs, build new features,
|
|
79
|
+
or help us improve the project documentation. If you're interested, definitely
|
|
80
|
+
check out our
|
|
81
|
+
[Contributing Guide](https://github.com/carbon-design-system/ibm-products/blob/main/.github/CONTRIBUTING.md)!
|
|
82
|
+
👀
|
|
83
|
+
|
|
84
|
+
## 📝 License
|
|
85
|
+
|
|
86
|
+
Licensed under the [Apache 2.0 License](/LICENSE).
|
|
87
|
+
|
|
3
88
|
## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry
|
|
4
89
|
|
|
5
90
|
This package uses IBM Telemetry to collect de-identified and anonymized metrics
|
package/custom-elements.json
CHANGED
|
@@ -146,6 +146,11 @@
|
|
|
146
146
|
{
|
|
147
147
|
"name": "set-of-users",
|
|
148
148
|
"type": "SetOfUsers"
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"name": "length",
|
|
152
|
+
"description": "Gets the length of the array. This is a number one higher than the highest element defined in an array.",
|
|
153
|
+
"type": "number"
|
|
149
154
|
}
|
|
150
155
|
],
|
|
151
156
|
"events": [
|
|
@@ -522,6 +527,11 @@
|
|
|
522
527
|
{
|
|
523
528
|
"name": "set-of-users",
|
|
524
529
|
"type": "SetOfUsers"
|
|
530
|
+
},
|
|
531
|
+
{
|
|
532
|
+
"name": "length",
|
|
533
|
+
"description": "Gets the length of the array. This is a number one higher than the highest element defined in an array.",
|
|
534
|
+
"type": "number"
|
|
525
535
|
}
|
|
526
536
|
],
|
|
527
537
|
"events": [
|
|
@@ -726,6 +736,11 @@
|
|
|
726
736
|
{
|
|
727
737
|
"name": "set-of-users",
|
|
728
738
|
"type": "SetOfUsers"
|
|
739
|
+
},
|
|
740
|
+
{
|
|
741
|
+
"name": "length",
|
|
742
|
+
"description": "Gets the length of the array. This is a number one higher than the highest element defined in an array.",
|
|
743
|
+
"type": "number"
|
|
729
744
|
}
|
|
730
745
|
]
|
|
731
746
|
},
|
|
@@ -801,6 +816,11 @@
|
|
|
801
816
|
{
|
|
802
817
|
"name": "set-of-users",
|
|
803
818
|
"type": "SetOfUsers"
|
|
819
|
+
},
|
|
820
|
+
{
|
|
821
|
+
"name": "length",
|
|
822
|
+
"description": "Gets the length of the array. This is a number one higher than the highest element defined in an array.",
|
|
823
|
+
"type": "number"
|
|
804
824
|
}
|
|
805
825
|
],
|
|
806
826
|
"events": [
|
|
@@ -997,6 +1017,11 @@
|
|
|
997
1017
|
"name": "set-of-users",
|
|
998
1018
|
"type": "SetOfUsers"
|
|
999
1019
|
},
|
|
1020
|
+
{
|
|
1021
|
+
"name": "length",
|
|
1022
|
+
"description": "Gets the length of the array. This is a number one higher than the highest element defined in an array.",
|
|
1023
|
+
"type": "number"
|
|
1024
|
+
},
|
|
1000
1025
|
{
|
|
1001
1026
|
"name": "hasThreeButtons",
|
|
1002
1027
|
"description": "`true` if this modal footer has more than two buttons.",
|
|
@@ -1195,6 +1220,11 @@
|
|
|
1195
1220
|
{
|
|
1196
1221
|
"name": "set-of-users",
|
|
1197
1222
|
"type": "SetOfUsers"
|
|
1223
|
+
},
|
|
1224
|
+
{
|
|
1225
|
+
"name": "length",
|
|
1226
|
+
"description": "Gets the length of the array. This is a number one higher than the highest element defined in an array.",
|
|
1227
|
+
"type": "number"
|
|
1198
1228
|
}
|
|
1199
1229
|
]
|
|
1200
1230
|
},
|
|
@@ -1341,6 +1371,11 @@
|
|
|
1341
1371
|
{
|
|
1342
1372
|
"name": "set-of-users",
|
|
1343
1373
|
"type": "SetOfUsers"
|
|
1374
|
+
},
|
|
1375
|
+
{
|
|
1376
|
+
"name": "length",
|
|
1377
|
+
"description": "Gets the length of the array. This is a number one higher than the highest element defined in an array.",
|
|
1378
|
+
"type": "number"
|
|
1344
1379
|
}
|
|
1345
1380
|
],
|
|
1346
1381
|
"events": [
|
|
@@ -1427,6 +1462,11 @@
|
|
|
1427
1462
|
{
|
|
1428
1463
|
"name": "set-of-users",
|
|
1429
1464
|
"type": "SetOfUsers"
|
|
1465
|
+
},
|
|
1466
|
+
{
|
|
1467
|
+
"name": "length",
|
|
1468
|
+
"description": "Gets the length of the array. This is a number one higher than the highest element defined in an array.",
|
|
1469
|
+
"type": "number"
|
|
1430
1470
|
}
|
|
1431
1471
|
],
|
|
1432
1472
|
"events": [
|
|
@@ -1585,6 +1625,11 @@
|
|
|
1585
1625
|
{
|
|
1586
1626
|
"name": "set-of-users",
|
|
1587
1627
|
"type": "SetOfUsers"
|
|
1628
|
+
},
|
|
1629
|
+
{
|
|
1630
|
+
"name": "length",
|
|
1631
|
+
"description": "Gets the length of the array. This is a number one higher than the highest element defined in an array.",
|
|
1632
|
+
"type": "number"
|
|
1588
1633
|
}
|
|
1589
1634
|
],
|
|
1590
1635
|
"events": [
|
|
@@ -1703,6 +1748,11 @@
|
|
|
1703
1748
|
{
|
|
1704
1749
|
"name": "set-of-users",
|
|
1705
1750
|
"type": "SetOfUsers"
|
|
1751
|
+
},
|
|
1752
|
+
{
|
|
1753
|
+
"name": "length",
|
|
1754
|
+
"description": "Gets the length of the array. This is a number one higher than the highest element defined in an array.",
|
|
1755
|
+
"type": "number"
|
|
1706
1756
|
}
|
|
1707
1757
|
],
|
|
1708
1758
|
"events": [
|
|
@@ -1826,6 +1876,11 @@
|
|
|
1826
1876
|
{
|
|
1827
1877
|
"name": "set-of-users",
|
|
1828
1878
|
"type": "SetOfUsers"
|
|
1879
|
+
},
|
|
1880
|
+
{
|
|
1881
|
+
"name": "length",
|
|
1882
|
+
"description": "Gets the length of the array. This is a number one higher than the highest element defined in an array.",
|
|
1883
|
+
"type": "number"
|
|
1829
1884
|
}
|
|
1830
1885
|
],
|
|
1831
1886
|
"events": [
|
|
@@ -2285,7 +2340,7 @@
|
|
|
2285
2340
|
},
|
|
2286
2341
|
{
|
|
2287
2342
|
"name": "shadowRootOptions",
|
|
2288
|
-
"type": "{ delegatesFocus: boolean; mode: ShadowRootMode; serializable?: boolean | undefined; slotAssignment?: SlotAssignmentMode | undefined; }"
|
|
2343
|
+
"type": "{ delegatesFocus: boolean; clonable?: boolean | undefined; customElementRegistry?: CustomElementRegistry | undefined; mode: ShadowRootMode; serializable?: boolean | undefined; slotAssignment?: SlotAssignmentMode | undefined; }"
|
|
2289
2344
|
},
|
|
2290
2345
|
{
|
|
2291
2346
|
"name": "styles"
|
|
@@ -2302,6 +2357,10 @@
|
|
|
2302
2357
|
"name": "autocapitalize",
|
|
2303
2358
|
"type": "string"
|
|
2304
2359
|
},
|
|
2360
|
+
{
|
|
2361
|
+
"name": "autocorrect",
|
|
2362
|
+
"type": "boolean"
|
|
2363
|
+
},
|
|
2305
2364
|
{
|
|
2306
2365
|
"name": "dir",
|
|
2307
2366
|
"type": "string"
|
|
@@ -2470,6 +2529,10 @@
|
|
|
2470
2529
|
"name": "tagName",
|
|
2471
2530
|
"type": "string"
|
|
2472
2531
|
},
|
|
2532
|
+
{
|
|
2533
|
+
"name": "textContent",
|
|
2534
|
+
"type": "string"
|
|
2535
|
+
},
|
|
2473
2536
|
{
|
|
2474
2537
|
"name": "baseURI",
|
|
2475
2538
|
"type": "string"
|
|
@@ -2518,10 +2581,6 @@
|
|
|
2518
2581
|
"name": "previousSibling",
|
|
2519
2582
|
"type": "ChildNode | null"
|
|
2520
2583
|
},
|
|
2521
|
-
{
|
|
2522
|
-
"name": "textContent",
|
|
2523
|
-
"type": "string | null"
|
|
2524
|
-
},
|
|
2525
2584
|
{
|
|
2526
2585
|
"name": "ELEMENT_NODE",
|
|
2527
2586
|
"type": "1"
|
|
@@ -2594,6 +2653,10 @@
|
|
|
2594
2653
|
"name": "DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC",
|
|
2595
2654
|
"type": "32"
|
|
2596
2655
|
},
|
|
2656
|
+
{
|
|
2657
|
+
"name": "ariaActiveDescendantElement",
|
|
2658
|
+
"type": "Element | null"
|
|
2659
|
+
},
|
|
2597
2660
|
{
|
|
2598
2661
|
"name": "ariaAtomic",
|
|
2599
2662
|
"type": "string | null"
|
|
@@ -2634,22 +2697,42 @@
|
|
|
2634
2697
|
"name": "ariaColSpan",
|
|
2635
2698
|
"type": "string | null"
|
|
2636
2699
|
},
|
|
2700
|
+
{
|
|
2701
|
+
"name": "ariaControlsElements",
|
|
2702
|
+
"type": "readonly Element[] | null"
|
|
2703
|
+
},
|
|
2637
2704
|
{
|
|
2638
2705
|
"name": "ariaCurrent",
|
|
2639
2706
|
"type": "string | null"
|
|
2640
2707
|
},
|
|
2708
|
+
{
|
|
2709
|
+
"name": "ariaDescribedByElements",
|
|
2710
|
+
"type": "readonly Element[] | null"
|
|
2711
|
+
},
|
|
2641
2712
|
{
|
|
2642
2713
|
"name": "ariaDescription",
|
|
2643
2714
|
"type": "string | null"
|
|
2644
2715
|
},
|
|
2716
|
+
{
|
|
2717
|
+
"name": "ariaDetailsElements",
|
|
2718
|
+
"type": "readonly Element[] | null"
|
|
2719
|
+
},
|
|
2645
2720
|
{
|
|
2646
2721
|
"name": "ariaDisabled",
|
|
2647
2722
|
"type": "string | null"
|
|
2648
2723
|
},
|
|
2724
|
+
{
|
|
2725
|
+
"name": "ariaErrorMessageElements",
|
|
2726
|
+
"type": "readonly Element[] | null"
|
|
2727
|
+
},
|
|
2649
2728
|
{
|
|
2650
2729
|
"name": "ariaExpanded",
|
|
2651
2730
|
"type": "string | null"
|
|
2652
2731
|
},
|
|
2732
|
+
{
|
|
2733
|
+
"name": "ariaFlowToElements",
|
|
2734
|
+
"type": "readonly Element[] | null"
|
|
2735
|
+
},
|
|
2653
2736
|
{
|
|
2654
2737
|
"name": "ariaHasPopup",
|
|
2655
2738
|
"type": "string | null"
|
|
@@ -2670,6 +2753,10 @@
|
|
|
2670
2753
|
"name": "ariaLabel",
|
|
2671
2754
|
"type": "string | null"
|
|
2672
2755
|
},
|
|
2756
|
+
{
|
|
2757
|
+
"name": "ariaLabelledByElements",
|
|
2758
|
+
"type": "readonly Element[] | null"
|
|
2759
|
+
},
|
|
2673
2760
|
{
|
|
2674
2761
|
"name": "ariaLevel",
|
|
2675
2762
|
"type": "string | null"
|
|
@@ -2694,6 +2781,10 @@
|
|
|
2694
2781
|
"name": "ariaOrientation",
|
|
2695
2782
|
"type": "string | null"
|
|
2696
2783
|
},
|
|
2784
|
+
{
|
|
2785
|
+
"name": "ariaOwnsElements",
|
|
2786
|
+
"type": "readonly Element[] | null"
|
|
2787
|
+
},
|
|
2697
2788
|
{
|
|
2698
2789
|
"name": "ariaPlaceholder",
|
|
2699
2790
|
"type": "string | null"
|
|
@@ -2710,6 +2801,10 @@
|
|
|
2710
2801
|
"name": "ariaReadOnly",
|
|
2711
2802
|
"type": "string | null"
|
|
2712
2803
|
},
|
|
2804
|
+
{
|
|
2805
|
+
"name": "ariaRelevant",
|
|
2806
|
+
"type": "string | null"
|
|
2807
|
+
},
|
|
2713
2808
|
{
|
|
2714
2809
|
"name": "ariaRequired",
|
|
2715
2810
|
"type": "string | null"
|
|
@@ -2840,16 +2935,20 @@
|
|
|
2840
2935
|
},
|
|
2841
2936
|
{
|
|
2842
2937
|
"name": "onauxclick",
|
|
2843
|
-
"type": "((this: GlobalEventHandlers, ev:
|
|
2938
|
+
"type": "((this: GlobalEventHandlers, ev: PointerEvent) => any) | null"
|
|
2844
2939
|
},
|
|
2845
2940
|
{
|
|
2846
2941
|
"name": "onbeforeinput",
|
|
2847
2942
|
"type": "((this: GlobalEventHandlers, ev: InputEvent) => any) | null"
|
|
2848
2943
|
},
|
|
2849
2944
|
{
|
|
2850
|
-
"name": "
|
|
2945
|
+
"name": "onbeforematch",
|
|
2851
2946
|
"type": "((this: GlobalEventHandlers, ev: Event) => any) | null"
|
|
2852
2947
|
},
|
|
2948
|
+
{
|
|
2949
|
+
"name": "onbeforetoggle",
|
|
2950
|
+
"type": "((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null"
|
|
2951
|
+
},
|
|
2853
2952
|
{
|
|
2854
2953
|
"name": "onblur",
|
|
2855
2954
|
"type": "((this: GlobalEventHandlers, ev: FocusEvent) => any) | null"
|
|
@@ -2872,7 +2971,7 @@
|
|
|
2872
2971
|
},
|
|
2873
2972
|
{
|
|
2874
2973
|
"name": "onclick",
|
|
2875
|
-
"type": "((this: GlobalEventHandlers, ev:
|
|
2974
|
+
"type": "((this: GlobalEventHandlers, ev: PointerEvent) => any) | null"
|
|
2876
2975
|
},
|
|
2877
2976
|
{
|
|
2878
2977
|
"name": "onclose",
|
|
@@ -2884,7 +2983,7 @@
|
|
|
2884
2983
|
},
|
|
2885
2984
|
{
|
|
2886
2985
|
"name": "oncontextmenu",
|
|
2887
|
-
"type": "((this: GlobalEventHandlers, ev:
|
|
2986
|
+
"type": "((this: GlobalEventHandlers, ev: PointerEvent) => any) | null"
|
|
2888
2987
|
},
|
|
2889
2988
|
{
|
|
2890
2989
|
"name": "oncontextrestored",
|
|
@@ -3074,6 +3173,10 @@
|
|
|
3074
3173
|
"name": "onpointerover",
|
|
3075
3174
|
"type": "((this: GlobalEventHandlers, ev: PointerEvent) => any) | null"
|
|
3076
3175
|
},
|
|
3176
|
+
{
|
|
3177
|
+
"name": "onpointerrawupdate",
|
|
3178
|
+
"type": "((this: GlobalEventHandlers, ev: Event) => any) | null"
|
|
3179
|
+
},
|
|
3077
3180
|
{
|
|
3078
3181
|
"name": "onpointerup",
|
|
3079
3182
|
"type": "((this: GlobalEventHandlers, ev: PointerEvent) => any) | null"
|
|
@@ -3148,7 +3251,7 @@
|
|
|
3148
3251
|
},
|
|
3149
3252
|
{
|
|
3150
3253
|
"name": "ontoggle",
|
|
3151
|
-
"type": "((this: GlobalEventHandlers, ev:
|
|
3254
|
+
"type": "((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null"
|
|
3152
3255
|
},
|
|
3153
3256
|
{
|
|
3154
3257
|
"name": "ontouchcancel",
|
|
@@ -3528,6 +3631,11 @@
|
|
|
3528
3631
|
{
|
|
3529
3632
|
"name": "set-of-users",
|
|
3530
3633
|
"type": "SetOfUsers"
|
|
3634
|
+
},
|
|
3635
|
+
{
|
|
3636
|
+
"name": "length",
|
|
3637
|
+
"description": "Gets the length of the array. This is a number one higher than the highest element defined in an array.",
|
|
3638
|
+
"type": "number"
|
|
3531
3639
|
}
|
|
3532
3640
|
],
|
|
3533
3641
|
"events": [
|
|
@@ -3789,6 +3897,11 @@
|
|
|
3789
3897
|
{
|
|
3790
3898
|
"name": "set-of-users",
|
|
3791
3899
|
"type": "SetOfUsers"
|
|
3900
|
+
},
|
|
3901
|
+
{
|
|
3902
|
+
"name": "length",
|
|
3903
|
+
"description": "Gets the length of the array. This is a number one higher than the highest element defined in an array.",
|
|
3904
|
+
"type": "number"
|
|
3792
3905
|
}
|
|
3793
3906
|
],
|
|
3794
3907
|
"events": [
|
|
@@ -4173,6 +4286,11 @@
|
|
|
4173
4286
|
{
|
|
4174
4287
|
"name": "set-of-users",
|
|
4175
4288
|
"type": "SetOfUsers"
|
|
4289
|
+
},
|
|
4290
|
+
{
|
|
4291
|
+
"name": "length",
|
|
4292
|
+
"description": "Gets the length of the array. This is a number one higher than the highest element defined in an array.",
|
|
4293
|
+
"type": "number"
|
|
4176
4294
|
}
|
|
4177
4295
|
]
|
|
4178
4296
|
}
|
|
@@ -17,6 +17,7 @@ declare const CDSAboutModal_base: {
|
|
|
17
17
|
accessKey: string;
|
|
18
18
|
readonly accessKeyLabel: string;
|
|
19
19
|
autocapitalize: string;
|
|
20
|
+
autocorrect: boolean;
|
|
20
21
|
dir: string;
|
|
21
22
|
draggable: boolean;
|
|
22
23
|
hidden: boolean;
|
|
@@ -38,17 +39,14 @@ declare const CDSAboutModal_base: {
|
|
|
38
39
|
click(): void;
|
|
39
40
|
hidePopover(): void;
|
|
40
41
|
showPopover(): void;
|
|
41
|
-
togglePopover(
|
|
42
|
-
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options
|
|
43
|
-
/**
|
|
44
|
-
* Determines if About Modal is open or not.
|
|
45
|
-
*/
|
|
46
|
-
?: boolean | AddEventListenerOptions): void;
|
|
42
|
+
togglePopover(options?: boolean): boolean;
|
|
43
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
47
44
|
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
48
45
|
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
49
46
|
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
50
47
|
readonly attributes: NamedNodeMap;
|
|
51
|
-
|
|
48
|
+
get classList(): DOMTokenList;
|
|
49
|
+
set classList(value: string): any;
|
|
52
50
|
className: string;
|
|
53
51
|
readonly clientHeight: number;
|
|
54
52
|
readonly clientLeft: number;
|
|
@@ -63,7 +61,8 @@ declare const CDSAboutModal_base: {
|
|
|
63
61
|
onfullscreenerror: ((this: Element, ev: Event) => any) | null;
|
|
64
62
|
outerHTML: string;
|
|
65
63
|
readonly ownerDocument: Document;
|
|
66
|
-
|
|
64
|
+
get part(): DOMTokenList;
|
|
65
|
+
set part(value: string): any;
|
|
67
66
|
readonly prefix: string | null;
|
|
68
67
|
readonly scrollHeight: number;
|
|
69
68
|
scrollLeft: number;
|
|
@@ -126,6 +125,8 @@ declare const CDSAboutModal_base: {
|
|
|
126
125
|
setPointerCapture(pointerId: number): void;
|
|
127
126
|
toggleAttribute(qualifiedName: string, force?: boolean): boolean;
|
|
128
127
|
webkitMatchesSelector(selectors: string): boolean;
|
|
128
|
+
get textContent(): string;
|
|
129
|
+
set textContent(value: string | null): any;
|
|
129
130
|
readonly baseURI: string;
|
|
130
131
|
readonly childNodes: NodeListOf<ChildNode>;
|
|
131
132
|
readonly firstChild: ChildNode | null;
|
|
@@ -138,9 +139,8 @@ declare const CDSAboutModal_base: {
|
|
|
138
139
|
readonly parentElement: HTMLElement | null;
|
|
139
140
|
readonly parentNode: ParentNode | null;
|
|
140
141
|
readonly previousSibling: ChildNode | null;
|
|
141
|
-
textContent: string | null;
|
|
142
142
|
appendChild<T_1 extends Node>(node: T_1): T_1;
|
|
143
|
-
cloneNode(
|
|
143
|
+
cloneNode(subtree?: boolean): Node;
|
|
144
144
|
compareDocumentPosition(other: Node): number;
|
|
145
145
|
contains(other: Node | null): boolean;
|
|
146
146
|
getRootNode(options?: GetRootNodeOptions): Node;
|
|
@@ -173,6 +173,7 @@ declare const CDSAboutModal_base: {
|
|
|
173
173
|
readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
|
|
174
174
|
readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
|
|
175
175
|
dispatchEvent(event: Event): boolean;
|
|
176
|
+
ariaActiveDescendantElement: Element | null;
|
|
176
177
|
ariaAtomic: string | null;
|
|
177
178
|
ariaAutoComplete: string | null;
|
|
178
179
|
ariaBrailleLabel: string | null;
|
|
@@ -183,25 +184,33 @@ declare const CDSAboutModal_base: {
|
|
|
183
184
|
ariaColIndex: string | null;
|
|
184
185
|
ariaColIndexText: string | null;
|
|
185
186
|
ariaColSpan: string | null;
|
|
187
|
+
ariaControlsElements: ReadonlyArray<Element> | null;
|
|
186
188
|
ariaCurrent: string | null;
|
|
189
|
+
ariaDescribedByElements: ReadonlyArray<Element> | null;
|
|
187
190
|
ariaDescription: string | null;
|
|
191
|
+
ariaDetailsElements: ReadonlyArray<Element> | null;
|
|
188
192
|
ariaDisabled: string | null;
|
|
193
|
+
ariaErrorMessageElements: ReadonlyArray<Element> | null;
|
|
189
194
|
ariaExpanded: string | null;
|
|
195
|
+
ariaFlowToElements: ReadonlyArray<Element> | null;
|
|
190
196
|
ariaHasPopup: string | null;
|
|
191
197
|
ariaHidden: string | null;
|
|
192
198
|
ariaInvalid: string | null;
|
|
193
199
|
ariaKeyShortcuts: string | null;
|
|
194
200
|
ariaLabel: string | null;
|
|
201
|
+
ariaLabelledByElements: ReadonlyArray<Element> | null;
|
|
195
202
|
ariaLevel: string | null;
|
|
196
203
|
ariaLive: string | null;
|
|
197
204
|
ariaModal: string | null;
|
|
198
205
|
ariaMultiLine: string | null;
|
|
199
206
|
ariaMultiSelectable: string | null;
|
|
200
207
|
ariaOrientation: string | null;
|
|
208
|
+
ariaOwnsElements: ReadonlyArray<Element> | null;
|
|
201
209
|
ariaPlaceholder: string | null;
|
|
202
210
|
ariaPosInSet: string | null;
|
|
203
211
|
ariaPressed: string | null;
|
|
204
212
|
ariaReadOnly: string | null;
|
|
213
|
+
ariaRelevant: string | null;
|
|
205
214
|
ariaRequired: string | null;
|
|
206
215
|
ariaRoleDescription: string | null;
|
|
207
216
|
ariaRowCount: string | null;
|
|
@@ -243,7 +252,8 @@ declare const CDSAboutModal_base: {
|
|
|
243
252
|
replaceChildren(...nodes: (Node | string)[]): void;
|
|
244
253
|
readonly assignedSlot: HTMLSlotElement | null;
|
|
245
254
|
readonly attributeStyleMap: StylePropertyMap;
|
|
246
|
-
|
|
255
|
+
get style(): CSSStyleDeclaration;
|
|
256
|
+
set style(cssText: string): any;
|
|
247
257
|
contentEditable: string;
|
|
248
258
|
enterKeyHint: string;
|
|
249
259
|
inputMode: string;
|
|
@@ -253,18 +263,19 @@ declare const CDSAboutModal_base: {
|
|
|
253
263
|
onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
254
264
|
onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
255
265
|
onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
256
|
-
onauxclick: ((this: GlobalEventHandlers, ev:
|
|
266
|
+
onauxclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
257
267
|
onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
|
|
258
|
-
|
|
268
|
+
onbeforematch: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
269
|
+
onbeforetoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
|
|
259
270
|
onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
|
|
260
271
|
oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
261
272
|
oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
262
273
|
oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
263
274
|
onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
264
|
-
onclick: ((this: GlobalEventHandlers, ev:
|
|
275
|
+
onclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
265
276
|
onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
266
277
|
oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
267
|
-
oncontextmenu: ((this: GlobalEventHandlers, ev:
|
|
278
|
+
oncontextmenu: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
268
279
|
oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
269
280
|
oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
270
281
|
oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
@@ -312,6 +323,7 @@ declare const CDSAboutModal_base: {
|
|
|
312
323
|
onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
313
324
|
onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
314
325
|
onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
326
|
+
onpointerrawupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
315
327
|
onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
316
328
|
onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
|
|
317
329
|
onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
@@ -330,7 +342,7 @@ declare const CDSAboutModal_base: {
|
|
|
330
342
|
onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
|
|
331
343
|
onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
332
344
|
ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
333
|
-
ontoggle: ((this: GlobalEventHandlers, ev:
|
|
345
|
+
ontoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
|
|
334
346
|
ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
335
347
|
ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
336
348
|
ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2024
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import figma, { html } from '@figma/code-connect/html';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Copyright IBM Corp. 2025, 2025
|
|
12
|
+
*
|
|
13
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
14
|
+
* LICENSE file in the root directory of this source tree.
|
|
15
|
+
*/
|
|
16
|
+
figma.connect('https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=9478%3A404998', {
|
|
17
|
+
props: {
|
|
18
|
+
aboutModalContentProps: figma.nestedProps('_About modal content', {
|
|
19
|
+
title: figma.string('Title text'),
|
|
20
|
+
version: figma.string('Version'),
|
|
21
|
+
content: figma.boolean('Content', {
|
|
22
|
+
true: figma.string('Content text'),
|
|
23
|
+
false: undefined,
|
|
24
|
+
}),
|
|
25
|
+
copyrightText: figma.string('Copyright text'),
|
|
26
|
+
links: figma.children(['Link group']),
|
|
27
|
+
}),
|
|
28
|
+
footerBaseProps: figma.boolean('Powered by logos', {
|
|
29
|
+
true: figma.nestedProps('_About modal footer base', {
|
|
30
|
+
additionalInfo: figma.children('Slot'),
|
|
31
|
+
}),
|
|
32
|
+
false: {
|
|
33
|
+
additionalInfo: undefined,
|
|
34
|
+
},
|
|
35
|
+
}),
|
|
36
|
+
},
|
|
37
|
+
example: (props) => html `<c4p-about-modal
|
|
38
|
+
closeIconDescription="close"
|
|
39
|
+
copyrightText=${props.aboutModalContentProps.copyrightText}
|
|
40
|
+
.logo=${props.aboutModalContentProps.logo}
|
|
41
|
+
.title=${props.aboutModalContentProps.title}
|
|
42
|
+
.version=${props.aboutModalContentProps.version}
|
|
43
|
+
.additionalInfo=${props.aboutModalContentProps.additionalInfo}
|
|
44
|
+
.content=${props.aboutModalContentProps.content}
|
|
45
|
+
.links=${props.aboutModalContentProps.links}
|
|
46
|
+
aria-label=""
|
|
47
|
+
></c4p-about-modal>`,
|
|
48
|
+
imports: [
|
|
49
|
+
"import '@carbon/ibm-products-web-components/es/components/about-modal/index.js'",
|
|
50
|
+
],
|
|
51
|
+
});
|
|
52
|
+
//# sourceMappingURL=about-modal.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"about-modal.figma.js","sources":["../../../src/components/about-modal/about-modal.figma.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAAA;;;;;AAKG;AAIH,KAAK,CAAC,OAAO,CACX,6HAA6H,EAC7H;AACE,IAAA,KAAK,EAAE;AACL,QAAA,sBAAsB,EAAE,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE;AAChE,YAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC;AACjC,YAAA,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;AAChC,YAAA,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE;AAChC,gBAAA,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC;AAClC,gBAAA,KAAK,EAAE,SAAS;aACjB,CAAC;AACF,YAAA,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC;YAC7C,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC,CAAC;SACtC,CAAC;AAEF,QAAA,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,EAAE;AACjD,YAAA,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE;AAClD,gBAAA,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC;aACvC,CAAC;AACF,YAAA,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,SAAS;AAC1B,aAAA;SACF,CAAC;AACH,KAAA;AACD,IAAA,OAAO,EAAE,CAAC,KAAK,KACb,IAAI,CAAA,CAAA;;wBAEc,KAAK,CAAC,sBAAsB,CAAC,aAAa;gBAClD,KAAK,CAAC,sBAAsB,CAAC,IAAI;iBAChC,KAAK,CAAC,sBAAsB,CAAC,KAAK;mBAChC,KAAK,CAAC,sBAAsB,CAAC,OAAO;0BAC7B,KAAK,CAAC,sBAAsB,CAAC,cAAc;mBAClD,KAAK,CAAC,sBAAsB,CAAC,OAAO;iBACtC,KAAK,CAAC,sBAAsB,CAAC,KAAK;;AAEzB,yBAAA,CAAA;AACtB,IAAA,OAAO,EAAE;QACP,iFAAiF;AAClF,KAAA;AACF,CAAA,CACF"}
|