@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
@@ -19112,9 +19112,18 @@ a.cds--side-nav__link--current::before {
19112
19112
  width: 100%;
19113
19113
  min-width: 6rem;
19114
19114
  align-items: center;
19115
+ justify-content: flex-start;
19115
19116
  white-space: nowrap;
19116
19117
  }
19117
19118
 
19119
+ .c4p--tag-overflow--align-end {
19120
+ justify-content: flex-end;
19121
+ }
19122
+
19123
+ .c4p--tag-overflow--align-center {
19124
+ justify-content: center;
19125
+ }
19126
+
19118
19127
  .c4p--tag-overflow--multiline {
19119
19128
  flex-wrap: wrap;
19120
19129
  }
@@ -19140,6 +19149,119 @@ a.cds--side-nav__link--current::before {
19140
19149
  max-width: 3rem;
19141
19150
  }
19142
19151
 
19152
+ .c4p--tag-overflow-popover {
19153
+ display: inline-block;
19154
+ vertical-align: bottom;
19155
+ }
19156
+ .c4p--tag-overflow-popover .cds--tag.cds--tag--interactive {
19157
+ border: 0;
19158
+ }
19159
+ .c4p--tag-overflow-popover .cds--popover .cds--popover-content {
19160
+ padding: 1rem;
19161
+ }
19162
+
19163
+ .c4p--tag-overflow-popover--hidden {
19164
+ overflow: hidden;
19165
+ max-width: 0;
19166
+ visibility: hidden;
19167
+ }
19168
+
19169
+ .c4p--tag-overflow-popover__el.c4p--tag-overflow-popover__el {
19170
+ min-width: initial;
19171
+ text-align: left;
19172
+ }
19173
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__trigger {
19174
+ font-family: inherit;
19175
+ }
19176
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__show-all-tags-link.cds--link:visited {
19177
+ display: inline-block;
19178
+ margin: 0.5rem 0 0.25rem;
19179
+ color: var(--cds-link-inverse, #78a9ff);
19180
+ }
19181
+ .c4p--tag-overflow-popover__el .cds--link:active,
19182
+ .c4p--tag-overflow-popover__el .cds--link:active:visited,
19183
+ .c4p--tag-overflow-popover__el .cds--link:active:visited:hover {
19184
+ color: var(--cds-text-inverse, #ffffff);
19185
+ }
19186
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__tag-list {
19187
+ display: flex;
19188
+ flex-direction: column;
19189
+ }
19190
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__show-all-tags-link {
19191
+ margin-top: 0.5rem;
19192
+ color: var(--cds-link-inverse, #78a9ff);
19193
+ }
19194
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__tag-item.c4p--tag-overflow-popover__tag-item--tag .cds--tag {
19195
+ background-color: var(--cds-background-inverse-hover, #474747);
19196
+ }
19197
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__tag-item.c4p--tag-overflow-popover__tag-item--default,
19198
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__tag-item.c4p--tag-overflow-popover__tag-item--default .cds--tag {
19199
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
19200
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
19201
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
19202
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
19203
+ display: block;
19204
+ overflow: hidden;
19205
+ min-width: initial;
19206
+ min-height: initial;
19207
+ padding: 0;
19208
+ border-radius: 0;
19209
+ margin: 0;
19210
+ background-color: inherit;
19211
+ color: inherit;
19212
+ text-overflow: ellipsis;
19213
+ white-space: nowrap;
19214
+ }
19215
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__tag .cds--tag__close-icon {
19216
+ padding: 0;
19217
+ }
19218
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__tag .cds--tag--high-contrast {
19219
+ background-color: var(--cds-background, #ffffff);
19220
+ color: var(--cds-text-primary, #161616);
19221
+ }
19222
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__tag .cds--tag__close-icon:hover {
19223
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
19224
+ }
19225
+ .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__tag .cds--tag__close-icon:focus {
19226
+ box-shadow: inset 0 0 0 0.125rem var(--cds-focus, #0f62fe);
19227
+ }
19228
+
19229
+ .c4p--tag-overflow-modal.c4p--tag-overflow-modal {
19230
+ text-align: initial;
19231
+ white-space: initial;
19232
+ }
19233
+ @media (min-width: 42rem) {
19234
+ .c4p--tag-overflow-modal .c4p--tag-overflow-modal__container {
19235
+ height: 90%;
19236
+ max-height: 450px;
19237
+ }
19238
+ }
19239
+ .c4p--tag-overflow-modal .c4p--tag-overflow-modal__search {
19240
+ margin-top: 1rem;
19241
+ margin-bottom: 0;
19242
+ }
19243
+ .c4p--tag-overflow-modal.c4p--tag-overflow-modal .c4p--tag-overflow-modal__fade {
19244
+ position: relative;
19245
+ margin-right: 1rem;
19246
+ margin-left: 1rem;
19247
+ }
19248
+ .c4p--tag-overflow-modal .c4p--tag-overflow-modal__body {
19249
+ padding-bottom: 1.5rem;
19250
+ }
19251
+ .c4p--tag-overflow-modal .c4p--tag-overflow-modal__header {
19252
+ padding-right: 0;
19253
+ margin-right: 1rem;
19254
+ }
19255
+ .c4p--tag-overflow-modal.c4p--tag-overflow-modal .c4p--tag-overflow-modal__fade::after {
19256
+ position: absolute;
19257
+ top: calc(-1 * 5rem);
19258
+ left: 0;
19259
+ width: 100%;
19260
+ height: 2rem;
19261
+ background: linear-gradient(to bottom, transparent, var(--cds-layer-01, #f4f4f4));
19262
+ content: "";
19263
+ }
19264
+
19143
19265
  /* stylelint-disable max-nesting-depth */
19144
19266
  .c4p--filter-panel__title {
19145
19267
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
@@ -20079,4 +20201,109 @@ c4p--condition-builder__condition-builder-item-time {
20079
20201
  flex-direction: row;
20080
20202
  }
20081
20203
 
20204
+ /* stylelint-disable carbon/layout-token-use */
20205
+ /* stylelint-disable max-nesting-depth */
20206
+ .c4p--card__get-started {
20207
+ border-width: 1px;
20208
+ border-style: solid;
20209
+ background: linear-gradient(to bottom, #491d8b 40%, #6929c4);
20210
+ border-image: linear-gradient(to bottom, #8a3ffc, #a56eff) 1;
20211
+ color: var(--cds-text-on-color, #ffffff);
20212
+ }
20213
+ .c4p--card__get-started:hover {
20214
+ background: linear-gradient(#7c3dd6, #7c3dd6);
20215
+ }
20216
+ .c4p--card__get-started:focus {
20217
+ border: 2px solid var(--cds-focus, #0f62fe);
20218
+ outline: 1px solid var(--cds-focus-inset, #ffffff);
20219
+ outline-offset: -3px;
20220
+ }
20221
+ .c4p--card__get-started .c4p--card__sequence {
20222
+ font-size: var(--cds-heading-05-font-size, 2rem);
20223
+ font-weight: var(--cds-heading-05-font-weight, 400);
20224
+ line-height: var(--cds-heading-05-line-height, 1.25);
20225
+ letter-spacing: var(--cds-heading-05-letter-spacing, 0);
20226
+ padding-top: 1rem;
20227
+ padding-left: 1rem;
20228
+ }
20229
+ .c4p--card__get-started .c4p--card__status {
20230
+ position: absolute;
20231
+ z-index: 2;
20232
+ top: 1rem;
20233
+ right: 1rem;
20234
+ }
20235
+ .c4p--card__get-started .c4p--card__header-body-container {
20236
+ display: flex;
20237
+ }
20238
+ .c4p--card__get-started .c4p--card__header {
20239
+ padding-right: 3rem;
20240
+ }
20241
+ @media (max-width: 65.98rem) {
20242
+ .c4p--card__get-started .c4p--card__header {
20243
+ padding-bottom: 0;
20244
+ }
20245
+ }
20246
+ @media (max-width: 65.98rem) {
20247
+ .c4p--card__get-started .c4p--card__body {
20248
+ padding: 0;
20249
+ }
20250
+ }
20251
+ .c4p--card__get-started .c4p--card__media {
20252
+ align-content: center;
20253
+ }
20254
+ @media (max-width: 65.98rem) {
20255
+ .c4p--card__get-started .c4p--card__media {
20256
+ display: none;
20257
+ }
20258
+ }
20259
+ .c4p--card__get-started .c4p--card__pictogram ~ .c4p--card__content-container .c4p--card__media {
20260
+ /* stylelint-disable-next-line function-no-unknown */
20261
+ margin-top: -3.125rem;
20262
+ margin-bottom: -3rem;
20263
+ }
20264
+ .c4p--card__get-started .c4p--card__sequence ~ .c4p--card__content-container .c4p--card__media {
20265
+ /* stylelint-disable-next-line function-no-unknown */
20266
+ margin-top: -3.5rem;
20267
+ margin-bottom: -3rem;
20268
+ }
20269
+ .c4p--card__get-started .c4p--card__actions {
20270
+ padding: 1rem;
20271
+ gap: 0.75rem;
20272
+ font-size: var(--cds-label-01-font-size, 0.75rem);
20273
+ font-weight: var(--cds-label-01-font-weight, 400);
20274
+ line-height: var(--cds-label-01-line-height, 1.33333);
20275
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
20276
+ }
20277
+ .c4p--card__get-started .c4p--card__actions .c4p--card__icon {
20278
+ display: flex;
20279
+ padding: 0;
20280
+ margin-right: 0;
20281
+ }
20282
+ .c4p--card__get-started .c4p--card__actions .c4p--card__icon svg {
20283
+ margin-right: 0.25rem;
20284
+ }
20285
+ .c4p--card__get-started .c4p--card__actions .c4p--card__icon:hover {
20286
+ background: none;
20287
+ }
20288
+ .c4p--card__get-started .c4p--card__footer {
20289
+ position: relative;
20290
+ z-index: 1;
20291
+ justify-content: space-between;
20292
+ border: none;
20293
+ }
20294
+ .c4p--card__get-started .c4p--card__footer .c4p--card__action-icon {
20295
+ display: flex;
20296
+ align-self: center;
20297
+ padding-right: 1rem;
20298
+ }
20299
+
20300
+ .c4p--card__disabled:focus,
20301
+ .c4p--card__disabled:hover,
20302
+ .c4p--card__disabled {
20303
+ border: 1px solid var(--cds-border-disabled, #c6c6c6);
20304
+ background: var(--cds-layer-02, #ffffff);
20305
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
20306
+ cursor: default;
20307
+ }
20308
+
20082
20309
  /*# sourceMappingURL=index-without-carbon.css.map */