@carbon/ibm-products 1.0.0-rc.2 → 1.2.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 (39) hide show
  1. package/README.md +12 -13
  2. package/css/index-full-carbon.css +34 -69
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +1 -1
  5. package/css/index-without-carbon-released-only.css +34 -6
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon.css +34 -69
  9. package/css/index-without-carbon.css.map +1 -1
  10. package/css/index-without-carbon.min.css +1 -1
  11. package/css/index.css +34 -69
  12. package/css/index.css.map +1 -1
  13. package/css/index.min.css +1 -1
  14. package/es/components/Card/Card.js +18 -4
  15. package/es/components/ExpressiveCard/ExpressiveCard.js +3 -2
  16. package/es/components/PageHeader/PageHeader.js +46 -36
  17. package/es/components/ProductiveCard/ProductiveCard.js +3 -2
  18. package/es/components/Toolbar/ToolbarButton.js +7 -5
  19. package/es/components/_Canary/Canary.js +1 -1
  20. package/es/components/index.js +0 -1
  21. package/es/global/js/package-settings.js +0 -1
  22. package/es/global/js/utils/story-helper.js +22 -0
  23. package/lib/components/Card/Card.js +18 -4
  24. package/lib/components/ExpressiveCard/ExpressiveCard.js +3 -2
  25. package/lib/components/PageHeader/PageHeader.js +46 -36
  26. package/lib/components/ProductiveCard/ProductiveCard.js +3 -2
  27. package/lib/components/Toolbar/ToolbarButton.js +6 -3
  28. package/lib/components/_Canary/Canary.js +1 -1
  29. package/lib/components/index.js +0 -8
  30. package/lib/global/js/package-settings.js +0 -1
  31. package/lib/global/js/utils/story-helper.js +29 -2
  32. package/package.json +5 -5
  33. package/scss/components/ButtonSetWithOverflow/_button-set-with-overflow.scss +1 -0
  34. package/scss/components/Card/_card.scss +1 -0
  35. package/scss/components/PageHeader/_page-header.scss +36 -6
  36. package/scss/components/PageHeader/_storybook-styles.scss +1 -0
  37. package/scss/components/ProductiveCard/_productive-card.scss +4 -0
  38. package/scss/components/Tearsheet/_tearsheet.scss +6 -0
  39. package/scss/components/_index.scss +0 -1
package/css/index.css CHANGED
@@ -13998,6 +13998,9 @@ a.bx--side-nav__link--current::before {
13998
13998
  border-right: 1px solid var(--cds-ui-03, #e0e0e0);
13999
13999
  overflow-y: auto;
14000
14000
  }
14001
+ .c4p--tearsheet .c4p--tearsheet__influencer.c4p--tearsheet__influencer p {
14002
+ padding-right: 0;
14003
+ }
14001
14004
  .c4p--tearsheet .c4p--tearsheet__influencer--wide {
14002
14005
  flex-basis: 321px;
14003
14006
  }
@@ -14697,69 +14700,6 @@ a.bx--side-nav__link--current::before {
14697
14700
  display: block;
14698
14701
  }
14699
14702
 
14700
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14701
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14702
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14703
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14704
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14705
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14706
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14707
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14708
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14709
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14710
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14711
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14712
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14713
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14714
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14715
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14716
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14717
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14718
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14719
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14720
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14721
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14722
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14723
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14724
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14725
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14726
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14727
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14728
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14729
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14730
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14731
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14732
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14733
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14734
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14735
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14736
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14737
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14738
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14739
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14740
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14741
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14742
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14743
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14744
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14745
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14746
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14747
- /* stylelint-disable-line no-invalid-position-at-import-rule */
14748
- .c4p--example-component {
14749
- display: flex;
14750
- justify-content: flex-end;
14751
- --c4p--example-component--border-color: transparent;
14752
- }
14753
-
14754
- .c4p--example-component.c4p--example-component--boxed-set {
14755
- border: 10px solid var(--c4p--example-component--border-color);
14756
- }
14757
-
14758
- .c4p--example-component.c4p--example-component--shadow-set {
14759
- margin: var(--cds-spacing-04, 0.75rem);
14760
- box-shadow: 0 0 10px var(--c4p--example-component--border-color);
14761
- }
14762
-
14763
14703
  /* stylelint-disable-line no-invalid-position-at-import-rule */
14764
14704
  /* stylelint-disable-line no-invalid-position-at-import-rule */
14765
14705
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -15391,6 +15331,7 @@ a.bx--side-nav__link--current::before {
15391
15331
  }
15392
15332
 
15393
15333
  .c4p--card__icon {
15334
+ color: inherit;
15394
15335
  cursor: pointer;
15395
15336
  }
15396
15337
 
@@ -18870,6 +18811,7 @@ a.bx--side-nav__link--current::before {
18870
18811
  /* stylelint-disable-line no-invalid-position-at-import-rule */
18871
18812
  .c4p--button-set-with-overflow.c4p--button-set-with-overflow {
18872
18813
  display: flex;
18814
+ width: 100%;
18873
18815
  }
18874
18816
  .c4p--button-set-with-overflow .c4p--button-set-with-overflow__space {
18875
18817
  position: relative;
@@ -18901,6 +18843,16 @@ a.bx--side-nav__link--current::before {
18901
18843
  background-color: var(--to-color);
18902
18844
  }
18903
18845
  }
18846
+ @keyframes background-and-shadow-appear {
18847
+ from {
18848
+ background-color: var(--from-color);
18849
+ box-shadow: 0 1px 0 var(--from-color);
18850
+ }
18851
+ to {
18852
+ background-color: var(--to-color);
18853
+ box-shadow: 0 1px 0 var(--to-color-shadow);
18854
+ }
18855
+ }
18904
18856
  .c4p--page-header.c4p--page-header {
18905
18857
  /* Bleed class for the background */
18906
18858
  position: sticky;
@@ -18928,16 +18880,16 @@ a.bx--side-nav__link--current::before {
18928
18880
  .c4p--page-header::before {
18929
18881
  --from-color: var(--cds-ui-background, #ffffff);
18930
18882
  --to-color: var(--cds-ui-01, #f4f4f4);
18883
+ --to-color-shadow: var(--cds-ui-03, #e0e0e0);
18931
18884
  position: absolute;
18932
18885
  top: 0;
18933
18886
  left: 0;
18934
18887
  display: block;
18935
18888
  width: 100%;
18936
18889
  height: 100%;
18937
- animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
18890
+ animation: background-and-shadow-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
18938
18891
  content: "";
18939
18892
  z-index: -1;
18940
- box-shadow: 0 1px 0 var(--cds-ui-03, #e0e0e0);
18941
18893
  }
18942
18894
  .c4p--page-header .c4p--page-header--width--xl {
18943
18895
  padding-right: var(--cds-spacing-07, 2rem);
@@ -19067,6 +19019,7 @@ a.bx--side-nav__link--current::before {
19067
19019
  .c4p--page-header .c4p--page-header__action-bar-column--background::before {
19068
19020
  --from-color: var(--cds-ui-background, #ffffff);
19069
19021
  --to-color: var(--cds-ui-01, #f4f4f4);
19022
+ --to-color-shadow: var(--cds-ui-03, #e0e0e0);
19070
19023
  position: absolute;
19071
19024
  top: 0;
19072
19025
  left: 0;
@@ -19237,6 +19190,7 @@ a.bx--side-nav__link--current::before {
19237
19190
  .c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions::before {
19238
19191
  --from-color: var(--cds-ui-background, #ffffff);
19239
19192
  --to-color: var(--cds-ui-01, #f4f4f4);
19193
+ --to-color-shadow: var(--cds-ui-03, #e0e0e0);
19240
19194
  position: absolute;
19241
19195
  top: 0;
19242
19196
  left: 0;
@@ -19246,6 +19200,14 @@ a.bx--side-nav__link--current::before {
19246
19200
  animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
19247
19201
  content: "";
19248
19202
  }
19203
+ .c4p--page-header .c4p--page-header__page-actions-content {
19204
+ position: relative;
19205
+ display: flex;
19206
+ overflow: hidden;
19207
+ width: 100%;
19208
+ height: 100%;
19209
+ justify-content: flex-end;
19210
+ }
19249
19211
  .c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions--in-breadcrumb {
19250
19212
  opacity: 0;
19251
19213
  visibility: hidden;
@@ -19267,10 +19229,10 @@ a.bx--side-nav__link--current::before {
19267
19229
  height: var(--cds-spacing-05, 1rem);
19268
19230
  }
19269
19231
  .c4p--page-header .c4p--page-header__subtitle {
19270
- font-size: var(--cds-body-long-02-font-size, 1rem);
19271
- font-weight: var(--cds-body-long-02-font-weight, 400);
19272
- line-height: var(--cds-body-long-02-line-height, 1.5);
19273
- letter-spacing: var(--cds-body-long-02-letter-spacing, 0);
19232
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
19233
+ font-weight: var(--cds-body-long-01-font-weight, 400);
19234
+ line-height: var(--cds-body-long-01-line-height, 1.42857);
19235
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
19274
19236
  }
19275
19237
  .c4p--page-header .c4p--page-header__available-row {
19276
19238
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
@@ -19466,6 +19428,9 @@ a.bx--side-nav__link--current::before {
19466
19428
  justify-content: space-between;
19467
19429
  border-top: 1px solid var(--cds-ui-03, #e0e0e0);
19468
19430
  }
19431
+ .c4p--card__productive .c4p--card__footer .bx--btn svg {
19432
+ margin-left: var(--cds-spacing-03, 0.5rem);
19433
+ }
19469
19434
  .c4p--card__productive .c4p--card__footer-no-button {
19470
19435
  justify-content: flex-end;
19471
19436
  }