@carbon/ibm-products 2.38.0 → 2.39.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (103) hide show
  1. package/css/index-full-carbon.css +227 -0
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon.css +227 -0
  6. package/css/index-without-carbon.css.map +1 -1
  7. package/css/index-without-carbon.min.css +1 -1
  8. package/css/index-without-carbon.min.css.map +1 -1
  9. package/css/index.css +227 -0
  10. package/css/index.css.map +1 -1
  11. package/css/index.min.css +1 -1
  12. package/css/index.min.css.map +1 -1
  13. package/es/components/Card/Card.js +50 -9
  14. package/es/components/Card/CardFooter.d.ts +5 -1
  15. package/es/components/Card/CardFooter.js +11 -1
  16. package/es/components/Carousel/Carousel.d.ts +6 -2
  17. package/es/components/Checklist/Checklist.d.ts +100 -2
  18. package/es/components/Checklist/Checklist.js +9 -5
  19. package/es/components/Checklist/Checklist.types.d.ts +19 -0
  20. package/es/components/Checklist/Checklist.types.js +22 -0
  21. package/es/components/Checklist/ChecklistChart.d.ts +5 -1
  22. package/es/components/Checklist/ChecklistChart.js +9 -4
  23. package/es/components/Checklist/ChecklistIcon.d.ts +5 -1
  24. package/es/components/Checklist/ChecklistIcon.js +9 -4
  25. package/es/components/CoachmarkButton/CoachmarkButton.d.ts +19 -2
  26. package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts +46 -2
  27. package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +5 -4
  28. package/es/components/CreateInfluencer/CreateInfluencer.d.ts +55 -17
  29. package/es/components/DataSpreadsheet/DataSpreadsheet.d.ts +67 -2
  30. package/es/components/DataSpreadsheet/DataSpreadsheet.js +48 -27
  31. package/es/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +139 -2
  32. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +46 -31
  33. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +89 -2
  34. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +34 -25
  35. package/es/components/DataSpreadsheet/types/index.d.ts +30 -0
  36. package/es/components/GetStartedCard/GetStartedCard.d.ts +5 -0
  37. package/es/components/GetStartedCard/GetStartedCard.js +82 -0
  38. package/es/components/GetStartedCard/index.d.ts +1 -0
  39. package/es/components/Guidebanner/Guidebanner.js +2 -2
  40. package/es/components/NotificationsPanel/NotificationsPanel.d.ts +162 -1
  41. package/es/components/NotificationsPanel/NotificationsPanel.js +10 -10
  42. package/es/components/SidePanel/SidePanel.js +1 -1
  43. package/es/components/TagOverflow/TagOverflow.d.ts +5 -0
  44. package/es/components/TagOverflow/TagOverflow.js +153 -29
  45. package/es/components/TagOverflow/TagOverflowModal.d.ts +29 -0
  46. package/es/components/TagOverflow/TagOverflowModal.js +112 -0
  47. package/es/components/TagOverflow/TagOverflowPopover.d.ts +2 -0
  48. package/es/components/TagOverflow/TagOverflowPopover.js +135 -0
  49. package/es/components/index.d.ts +1 -0
  50. package/es/global/js/package-settings.d.ts +1 -0
  51. package/es/global/js/package-settings.js +1 -0
  52. package/es/index.js +1 -0
  53. package/es/settings.d.ts +1 -0
  54. package/lib/components/Card/Card.js +50 -9
  55. package/lib/components/Card/CardFooter.d.ts +5 -1
  56. package/lib/components/Card/CardFooter.js +11 -1
  57. package/lib/components/Carousel/Carousel.d.ts +6 -2
  58. package/lib/components/Checklist/Checklist.d.ts +100 -2
  59. package/lib/components/Checklist/Checklist.js +9 -5
  60. package/lib/components/Checklist/Checklist.types.d.ts +19 -0
  61. package/lib/components/Checklist/Checklist.types.js +27 -0
  62. package/lib/components/Checklist/ChecklistChart.d.ts +5 -1
  63. package/lib/components/Checklist/ChecklistChart.js +14 -9
  64. package/lib/components/Checklist/ChecklistIcon.d.ts +5 -1
  65. package/lib/components/Checklist/ChecklistIcon.js +9 -4
  66. package/lib/components/CoachmarkButton/CoachmarkButton.d.ts +19 -2
  67. package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts +46 -2
  68. package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +5 -4
  69. package/lib/components/CreateInfluencer/CreateInfluencer.d.ts +55 -17
  70. package/lib/components/DataSpreadsheet/DataSpreadsheet.d.ts +67 -2
  71. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +48 -27
  72. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.d.ts +139 -2
  73. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +46 -31
  74. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts +89 -2
  75. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +34 -25
  76. package/lib/components/DataSpreadsheet/types/index.d.ts +30 -0
  77. package/lib/components/GetStartedCard/GetStartedCard.d.ts +5 -0
  78. package/lib/components/GetStartedCard/GetStartedCard.js +88 -0
  79. package/lib/components/GetStartedCard/index.d.ts +1 -0
  80. package/lib/components/Guidebanner/Guidebanner.js +2 -2
  81. package/lib/components/NotificationsPanel/NotificationsPanel.d.ts +162 -1
  82. package/lib/components/NotificationsPanel/NotificationsPanel.js +10 -10
  83. package/lib/components/SidePanel/SidePanel.js +1 -1
  84. package/lib/components/TagOverflow/TagOverflow.d.ts +5 -0
  85. package/lib/components/TagOverflow/TagOverflow.js +154 -28
  86. package/lib/components/TagOverflow/TagOverflowModal.d.ts +29 -0
  87. package/lib/components/TagOverflow/TagOverflowModal.js +121 -0
  88. package/lib/components/TagOverflow/TagOverflowPopover.d.ts +2 -0
  89. package/lib/components/TagOverflow/TagOverflowPopover.js +144 -0
  90. package/lib/components/index.d.ts +1 -0
  91. package/lib/global/js/package-settings.d.ts +1 -0
  92. package/lib/global/js/package-settings.js +1 -0
  93. package/lib/index.js +5 -0
  94. package/lib/settings.d.ts +1 -0
  95. package/package.json +3 -3
  96. package/scss/components/GetStartedCard/_carbon-imports.scss +9 -0
  97. package/scss/components/GetStartedCard/_get-started-card.scss +135 -0
  98. package/scss/components/GetStartedCard/_index-with-carbon.scss +9 -0
  99. package/scss/components/GetStartedCard/_index.scss +8 -0
  100. package/scss/components/TagOverflow/_tag-overflow.scss +157 -0
  101. package/scss/components/_index-with-carbon.scss +1 -0
  102. package/scss/components/_index.scss +1 -0
  103. package/telemetry.yml +23 -16
@@ -19113,9 +19113,18 @@ a.cds--side-nav__link--current::before {
19113
19113
  width: 100%;
19114
19114
  min-width: 6rem;
19115
19115
  align-items: center;
19116
+ justify-content: flex-start;
19116
19117
  white-space: nowrap;
19117
19118
  }
19118
19119
 
19120
+ .c4p--tag-overflow--align-end {
19121
+ justify-content: flex-end;
19122
+ }
19123
+
19124
+ .c4p--tag-overflow--align-center {
19125
+ justify-content: center;
19126
+ }
19127
+
19119
19128
  .c4p--tag-overflow--multiline {
19120
19129
  flex-wrap: wrap;
19121
19130
  }
@@ -19141,6 +19150,119 @@ a.cds--side-nav__link--current::before {
19141
19150
  max-width: 3rem;
19142
19151
  }
19143
19152
 
19153
+ .c4p--tag-overflow-popover {
19154
+ display: inline-block;
19155
+ vertical-align: bottom;
19156
+ }
19157
+ .c4p--tag-overflow-popover .cds--tag.cds--tag--interactive {
19158
+ border: 0;
19159
+ }
19160
+ .c4p--tag-overflow-popover .cds--popover .cds--popover-content {
19161
+ padding: 1rem;
19162
+ }
19163
+
19164
+ .c4p--tag-overflow-popover--hidden {
19165
+ overflow: hidden;
19166
+ max-width: 0;
19167
+ visibility: hidden;
19168
+ }
19169
+
19170
+ .c4p--tag-overflow-popover__el.c4p--tag-overflow-popover__el {
19171
+ min-width: initial;
19172
+ text-align: left;
19173
+ }
19174
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__trigger {
19175
+ font-family: inherit;
19176
+ }
19177
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__show-all-tags-link.cds--link:visited {
19178
+ display: inline-block;
19179
+ margin: 0.5rem 0 0.25rem;
19180
+ color: var(--cds-link-inverse, #78a9ff);
19181
+ }
19182
+ .c4p--tag-overflow-popover__el .cds--link:active,
19183
+ .c4p--tag-overflow-popover__el .cds--link:active:visited,
19184
+ .c4p--tag-overflow-popover__el .cds--link:active:visited:hover {
19185
+ color: var(--cds-text-inverse, #ffffff);
19186
+ }
19187
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__tag-list {
19188
+ display: flex;
19189
+ flex-direction: column;
19190
+ }
19191
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__show-all-tags-link {
19192
+ margin-top: 0.5rem;
19193
+ color: var(--cds-link-inverse, #78a9ff);
19194
+ }
19195
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__tag-item.c4p--tag-overflow-popover__tag-item--tag .cds--tag {
19196
+ background-color: var(--cds-background-inverse-hover, #474747);
19197
+ }
19198
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__tag-item.c4p--tag-overflow-popover__tag-item--default,
19199
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__tag-item.c4p--tag-overflow-popover__tag-item--default .cds--tag {
19200
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
19201
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
19202
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
19203
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
19204
+ display: block;
19205
+ overflow: hidden;
19206
+ min-width: initial;
19207
+ min-height: initial;
19208
+ padding: 0;
19209
+ border-radius: 0;
19210
+ margin: 0;
19211
+ background-color: inherit;
19212
+ color: inherit;
19213
+ text-overflow: ellipsis;
19214
+ white-space: nowrap;
19215
+ }
19216
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__tag .cds--tag__close-icon {
19217
+ padding: 0;
19218
+ }
19219
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__tag .cds--tag--high-contrast {
19220
+ background-color: var(--cds-background, #ffffff);
19221
+ color: var(--cds-text-primary, #161616);
19222
+ }
19223
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__tag .cds--tag__close-icon:hover {
19224
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
19225
+ }
19226
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__tag .cds--tag__close-icon:focus {
19227
+ box-shadow: inset 0 0 0 0.125rem var(--cds-focus, #0f62fe);
19228
+ }
19229
+
19230
+ .c4p--tag-overflow-modal.c4p--tag-overflow-modal {
19231
+ text-align: initial;
19232
+ white-space: initial;
19233
+ }
19234
+ @media (min-width: 42rem) {
19235
+ .c4p--tag-overflow-modal .c4p--tag-overflow-modal__container {
19236
+ height: 90%;
19237
+ max-height: 450px;
19238
+ }
19239
+ }
19240
+ .c4p--tag-overflow-modal .c4p--tag-overflow-modal__search {
19241
+ margin-top: 1rem;
19242
+ margin-bottom: 0;
19243
+ }
19244
+ .c4p--tag-overflow-modal.c4p--tag-overflow-modal .c4p--tag-overflow-modal__fade {
19245
+ position: relative;
19246
+ margin-right: 1rem;
19247
+ margin-left: 1rem;
19248
+ }
19249
+ .c4p--tag-overflow-modal .c4p--tag-overflow-modal__body {
19250
+ padding-bottom: 1.5rem;
19251
+ }
19252
+ .c4p--tag-overflow-modal .c4p--tag-overflow-modal__header {
19253
+ padding-right: 0;
19254
+ margin-right: 1rem;
19255
+ }
19256
+ .c4p--tag-overflow-modal.c4p--tag-overflow-modal .c4p--tag-overflow-modal__fade::after {
19257
+ position: absolute;
19258
+ top: calc(-1 * 5rem);
19259
+ left: 0;
19260
+ width: 100%;
19261
+ height: 2rem;
19262
+ background: linear-gradient(to bottom, transparent, var(--cds-layer-01, #f4f4f4));
19263
+ content: "";
19264
+ }
19265
+
19144
19266
  /* stylelint-disable max-nesting-depth */
19145
19267
  .c4p--filter-panel__title {
19146
19268
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
@@ -20080,6 +20202,111 @@ c4p--condition-builder__condition-builder-item-time {
20080
20202
  flex-direction: row;
20081
20203
  }
20082
20204
 
20205
+ /* stylelint-disable carbon/layout-token-use */
20206
+ /* stylelint-disable max-nesting-depth */
20207
+ .c4p--card__get-started {
20208
+ border-width: 1px;
20209
+ border-style: solid;
20210
+ background: linear-gradient(to bottom, #491d8b 40%, #6929c4);
20211
+ border-image: linear-gradient(to bottom, #8a3ffc, #a56eff) 1;
20212
+ color: var(--cds-text-on-color, #ffffff);
20213
+ }
20214
+ .c4p--card__get-started:hover {
20215
+ background: linear-gradient(#7c3dd6, #7c3dd6);
20216
+ }
20217
+ .c4p--card__get-started:focus {
20218
+ border: 2px solid var(--cds-focus, #0f62fe);
20219
+ outline: 1px solid var(--cds-focus-inset, #ffffff);
20220
+ outline-offset: -3px;
20221
+ }
20222
+ .c4p--card__get-started .c4p--card__sequence {
20223
+ font-size: var(--cds-heading-05-font-size, 2rem);
20224
+ font-weight: var(--cds-heading-05-font-weight, 400);
20225
+ line-height: var(--cds-heading-05-line-height, 1.25);
20226
+ letter-spacing: var(--cds-heading-05-letter-spacing, 0);
20227
+ padding-top: 1rem;
20228
+ padding-left: 1rem;
20229
+ }
20230
+ .c4p--card__get-started .c4p--card__status {
20231
+ position: absolute;
20232
+ z-index: 2;
20233
+ top: 1rem;
20234
+ right: 1rem;
20235
+ }
20236
+ .c4p--card__get-started .c4p--card__header-body-container {
20237
+ display: flex;
20238
+ }
20239
+ .c4p--card__get-started .c4p--card__header {
20240
+ padding-right: 3rem;
20241
+ }
20242
+ @media (max-width: 65.98rem) {
20243
+ .c4p--card__get-started .c4p--card__header {
20244
+ padding-bottom: 0;
20245
+ }
20246
+ }
20247
+ @media (max-width: 65.98rem) {
20248
+ .c4p--card__get-started .c4p--card__body {
20249
+ padding: 0;
20250
+ }
20251
+ }
20252
+ .c4p--card__get-started .c4p--card__media {
20253
+ align-content: center;
20254
+ }
20255
+ @media (max-width: 65.98rem) {
20256
+ .c4p--card__get-started .c4p--card__media {
20257
+ display: none;
20258
+ }
20259
+ }
20260
+ .c4p--card__get-started .c4p--card__pictogram ~ .c4p--card__content-container .c4p--card__media {
20261
+ /* stylelint-disable-next-line function-no-unknown */
20262
+ margin-top: -3.125rem;
20263
+ margin-bottom: -3rem;
20264
+ }
20265
+ .c4p--card__get-started .c4p--card__sequence ~ .c4p--card__content-container .c4p--card__media {
20266
+ /* stylelint-disable-next-line function-no-unknown */
20267
+ margin-top: -3.5rem;
20268
+ margin-bottom: -3rem;
20269
+ }
20270
+ .c4p--card__get-started .c4p--card__actions {
20271
+ padding: 1rem;
20272
+ gap: 0.75rem;
20273
+ font-size: var(--cds-label-01-font-size, 0.75rem);
20274
+ font-weight: var(--cds-label-01-font-weight, 400);
20275
+ line-height: var(--cds-label-01-line-height, 1.33333);
20276
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
20277
+ }
20278
+ .c4p--card__get-started .c4p--card__actions .c4p--card__icon {
20279
+ display: flex;
20280
+ padding: 0;
20281
+ margin-right: 0;
20282
+ }
20283
+ .c4p--card__get-started .c4p--card__actions .c4p--card__icon svg {
20284
+ margin-right: 0.25rem;
20285
+ }
20286
+ .c4p--card__get-started .c4p--card__actions .c4p--card__icon:hover {
20287
+ background: none;
20288
+ }
20289
+ .c4p--card__get-started .c4p--card__footer {
20290
+ position: relative;
20291
+ z-index: 1;
20292
+ justify-content: space-between;
20293
+ border: none;
20294
+ }
20295
+ .c4p--card__get-started .c4p--card__footer .c4p--card__action-icon {
20296
+ display: flex;
20297
+ align-self: center;
20298
+ padding-right: 1rem;
20299
+ }
20300
+
20301
+ .c4p--card__disabled:focus,
20302
+ .c4p--card__disabled:hover,
20303
+ .c4p--card__disabled {
20304
+ border: 1px solid var(--cds-border-disabled, #c6c6c6);
20305
+ background: var(--cds-layer-02, #ffffff);
20306
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
20307
+ cursor: default;
20308
+ }
20309
+
20083
20310
  html,
20084
20311
  body,
20085
20312
  div,