@carbon/ibm-products 1.0.0-rc.2 → 1.2.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +12 -13
- package/css/index-full-carbon.css +34 -69
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-without-carbon-released-only.css +34 -6
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon.css +34 -69
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index.css +34 -69
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/es/components/Card/Card.js +18 -4
- package/es/components/ExpressiveCard/ExpressiveCard.js +3 -2
- package/es/components/PageHeader/PageHeader.js +46 -36
- package/es/components/ProductiveCard/ProductiveCard.js +3 -2
- package/es/components/Toolbar/ToolbarButton.js +7 -5
- package/es/components/_Canary/Canary.js +1 -1
- package/es/components/index.js +0 -1
- package/es/global/js/package-settings.js +0 -1
- package/es/global/js/utils/story-helper.js +22 -0
- package/lib/components/Card/Card.js +18 -4
- package/lib/components/ExpressiveCard/ExpressiveCard.js +3 -2
- package/lib/components/PageHeader/PageHeader.js +46 -36
- package/lib/components/ProductiveCard/ProductiveCard.js +3 -2
- package/lib/components/Toolbar/ToolbarButton.js +6 -3
- package/lib/components/_Canary/Canary.js +1 -1
- package/lib/components/index.js +0 -8
- package/lib/global/js/package-settings.js +0 -1
- package/lib/global/js/utils/story-helper.js +29 -2
- package/package.json +5 -5
- package/scss/components/ButtonSetWithOverflow/_button-set-with-overflow.scss +1 -0
- package/scss/components/Card/_card.scss +1 -0
- package/scss/components/PageHeader/_page-header.scss +36 -6
- package/scss/components/PageHeader/_storybook-styles.scss +1 -0
- package/scss/components/ProductiveCard/_productive-card.scss +4 -0
- package/scss/components/Tearsheet/_tearsheet.scss +6 -0
- package/scss/components/_index.scss +0 -1
package/README.md
CHANGED
@@ -1,12 +1,12 @@
|
|
1
|
-
# @carbon/ibm-
|
1
|
+
# @carbon/ibm-products
|
2
2
|
|
3
3
|
> Carbon for IBM Products is an open-source implementation of the closed source
|
4
4
|
> [Carbon for Cloud & Cognitive pattern asset library (PAL)](https://pages.github.ibm.com/cdai-design/pal/).
|
5
5
|
> These PAL designs build on the foundation of IBM's open source Carbon Design
|
6
6
|
> System and React implementation to offer components and patterns beyond the
|
7
7
|
> typical component library. Carbon for IBM Products was previously known as
|
8
|
-
> Carbon for IBM Cloud and Cognitive, and this
|
9
|
-
> various places and historical logs.
|
8
|
+
> Carbon for IBM Cloud and Cognitive (@carbon/ibm-cloud-cognitive), and this
|
9
|
+
> name can still be encountered in various places and historical logs.
|
10
10
|
|
11
11
|
[![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors-)
|
12
12
|
[![Licensed under the Apache License, Version 2.0](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](https://github.com/carbon-design-system/ibm-cloud-cognitive/blob/master/LICENSE)
|
@@ -25,27 +25,26 @@ a look at [our Storybook](https://ibm-cloud-cognitive.netlify.app).
|
|
25
25
|
## 📦 Installing Carbon for IBM Products
|
26
26
|
|
27
27
|
To use Carbon for IBM Products components, all you need to do is install the
|
28
|
-
`@carbon/ibm-
|
28
|
+
`@carbon/ibm-products` package.
|
29
29
|
|
30
30
|
```shell
|
31
|
-
$ yarn add @carbon/ibm-
|
31
|
+
$ yarn add @carbon/ibm-products
|
32
32
|
|
33
33
|
# or
|
34
34
|
|
35
|
-
$ npm install @carbon/ibm-
|
35
|
+
$ npm install @carbon/ibm-products
|
36
36
|
```
|
37
37
|
|
38
38
|
Then you can import the component styles in your `index.js`.
|
39
39
|
|
40
40
|
```js
|
41
|
-
import '@carbon/ibm-
|
41
|
+
import '@carbon/ibm-products/css/index.min.css';
|
42
42
|
```
|
43
43
|
|
44
44
|
### Carbon Components (Peer dependencies)
|
45
45
|
|
46
|
-
@carbon/ibm-
|
47
|
-
|
48
|
-
instructions for:
|
46
|
+
@carbon/ibm-products is built on top of Carbon components and has a number of
|
47
|
+
dependencies which need to be installed. Follow the package instructions for:
|
49
48
|
|
50
49
|
-. Install carbon-components-react as per that packages instructions
|
51
50
|
<https://www.npmjs.com/package/carbon-components-react> -. Install
|
@@ -69,14 +68,14 @@ can be found here on
|
|
69
68
|
### Packages
|
70
69
|
|
71
70
|
You can find example projects using the components in the
|
72
|
-
[examples folder](../../packages/examples/
|
71
|
+
[examples folder](../../packages/examples/carbon-for-ibm-products).
|
73
72
|
|
74
73
|
## Usage
|
75
74
|
|
76
75
|
To start using the components
|
77
76
|
|
78
77
|
```jsx
|
79
|
-
import { AboutModal } from '@carbon/ibm-
|
78
|
+
import { AboutModal } from '@carbon/ibm-products';
|
80
79
|
|
81
80
|
const App = () => {
|
82
81
|
return <AboutModal />;
|
@@ -92,7 +91,7 @@ to be canary and require the consumer to enable via a feature flag in a
|
|
92
91
|
For example, create a `config.js` in your `src` directory:
|
93
92
|
|
94
93
|
```js
|
95
|
-
import { pkg } from '@carbon/ibm-
|
94
|
+
import { pkg } from '@carbon/ibm-products';
|
96
95
|
|
97
96
|
// Enable 'canary' (not yet reviewed/released) components
|
98
97
|
// that we want to make use of
|
@@ -13999,6 +13999,9 @@ a.bx--side-nav__link--current::before {
|
|
13999
13999
|
border-right: 1px solid var(--cds-ui-03, #e0e0e0);
|
14000
14000
|
overflow-y: auto;
|
14001
14001
|
}
|
14002
|
+
.c4p--tearsheet .c4p--tearsheet__influencer.c4p--tearsheet__influencer p {
|
14003
|
+
padding-right: 0;
|
14004
|
+
}
|
14002
14005
|
.c4p--tearsheet .c4p--tearsheet__influencer--wide {
|
14003
14006
|
flex-basis: 321px;
|
14004
14007
|
}
|
@@ -14698,69 +14701,6 @@ a.bx--side-nav__link--current::before {
|
|
14698
14701
|
display: block;
|
14699
14702
|
}
|
14700
14703
|
|
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
|
-
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
14749
|
-
.c4p--example-component {
|
14750
|
-
display: flex;
|
14751
|
-
justify-content: flex-end;
|
14752
|
-
--c4p--example-component--border-color: transparent;
|
14753
|
-
}
|
14754
|
-
|
14755
|
-
.c4p--example-component.c4p--example-component--boxed-set {
|
14756
|
-
border: 10px solid var(--c4p--example-component--border-color);
|
14757
|
-
}
|
14758
|
-
|
14759
|
-
.c4p--example-component.c4p--example-component--shadow-set {
|
14760
|
-
margin: var(--cds-spacing-04, 0.75rem);
|
14761
|
-
box-shadow: 0 0 10px var(--c4p--example-component--border-color);
|
14762
|
-
}
|
14763
|
-
|
14764
14704
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
14765
14705
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
14766
14706
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
@@ -15392,6 +15332,7 @@ a.bx--side-nav__link--current::before {
|
|
15392
15332
|
}
|
15393
15333
|
|
15394
15334
|
.c4p--card__icon {
|
15335
|
+
color: inherit;
|
15395
15336
|
cursor: pointer;
|
15396
15337
|
}
|
15397
15338
|
|
@@ -18871,6 +18812,7 @@ a.bx--side-nav__link--current::before {
|
|
18871
18812
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
18872
18813
|
.c4p--button-set-with-overflow.c4p--button-set-with-overflow {
|
18873
18814
|
display: flex;
|
18815
|
+
width: 100%;
|
18874
18816
|
}
|
18875
18817
|
.c4p--button-set-with-overflow .c4p--button-set-with-overflow__space {
|
18876
18818
|
position: relative;
|
@@ -18902,6 +18844,16 @@ a.bx--side-nav__link--current::before {
|
|
18902
18844
|
background-color: var(--to-color);
|
18903
18845
|
}
|
18904
18846
|
}
|
18847
|
+
@keyframes background-and-shadow-appear {
|
18848
|
+
from {
|
18849
|
+
background-color: var(--from-color);
|
18850
|
+
box-shadow: 0 1px 0 var(--from-color);
|
18851
|
+
}
|
18852
|
+
to {
|
18853
|
+
background-color: var(--to-color);
|
18854
|
+
box-shadow: 0 1px 0 var(--to-color-shadow);
|
18855
|
+
}
|
18856
|
+
}
|
18905
18857
|
.c4p--page-header.c4p--page-header {
|
18906
18858
|
/* Bleed class for the background */
|
18907
18859
|
position: sticky;
|
@@ -18929,16 +18881,16 @@ a.bx--side-nav__link--current::before {
|
|
18929
18881
|
.c4p--page-header::before {
|
18930
18882
|
--from-color: var(--cds-ui-background, #ffffff);
|
18931
18883
|
--to-color: var(--cds-ui-01, #f4f4f4);
|
18884
|
+
--to-color-shadow: var(--cds-ui-03, #e0e0e0);
|
18932
18885
|
position: absolute;
|
18933
18886
|
top: 0;
|
18934
18887
|
left: 0;
|
18935
18888
|
display: block;
|
18936
18889
|
width: 100%;
|
18937
18890
|
height: 100%;
|
18938
|
-
animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
|
18891
|
+
animation: background-and-shadow-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
|
18939
18892
|
content: "";
|
18940
18893
|
z-index: -1;
|
18941
|
-
box-shadow: 0 1px 0 var(--cds-ui-03, #e0e0e0);
|
18942
18894
|
}
|
18943
18895
|
.c4p--page-header .c4p--page-header--width--xl {
|
18944
18896
|
padding-right: var(--cds-spacing-07, 2rem);
|
@@ -19068,6 +19020,7 @@ a.bx--side-nav__link--current::before {
|
|
19068
19020
|
.c4p--page-header .c4p--page-header__action-bar-column--background::before {
|
19069
19021
|
--from-color: var(--cds-ui-background, #ffffff);
|
19070
19022
|
--to-color: var(--cds-ui-01, #f4f4f4);
|
19023
|
+
--to-color-shadow: var(--cds-ui-03, #e0e0e0);
|
19071
19024
|
position: absolute;
|
19072
19025
|
top: 0;
|
19073
19026
|
left: 0;
|
@@ -19238,6 +19191,7 @@ a.bx--side-nav__link--current::before {
|
|
19238
19191
|
.c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions::before {
|
19239
19192
|
--from-color: var(--cds-ui-background, #ffffff);
|
19240
19193
|
--to-color: var(--cds-ui-01, #f4f4f4);
|
19194
|
+
--to-color-shadow: var(--cds-ui-03, #e0e0e0);
|
19241
19195
|
position: absolute;
|
19242
19196
|
top: 0;
|
19243
19197
|
left: 0;
|
@@ -19247,6 +19201,14 @@ a.bx--side-nav__link--current::before {
|
|
19247
19201
|
animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
|
19248
19202
|
content: "";
|
19249
19203
|
}
|
19204
|
+
.c4p--page-header .c4p--page-header__page-actions-content {
|
19205
|
+
position: relative;
|
19206
|
+
display: flex;
|
19207
|
+
overflow: hidden;
|
19208
|
+
width: 100%;
|
19209
|
+
height: 100%;
|
19210
|
+
justify-content: flex-end;
|
19211
|
+
}
|
19250
19212
|
.c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions--in-breadcrumb {
|
19251
19213
|
opacity: 0;
|
19252
19214
|
visibility: hidden;
|
@@ -19268,10 +19230,10 @@ a.bx--side-nav__link--current::before {
|
|
19268
19230
|
height: var(--cds-spacing-05, 1rem);
|
19269
19231
|
}
|
19270
19232
|
.c4p--page-header .c4p--page-header__subtitle {
|
19271
|
-
font-size: var(--cds-body-long-
|
19272
|
-
font-weight: var(--cds-body-long-
|
19273
|
-
line-height: var(--cds-body-long-
|
19274
|
-
letter-spacing: var(--cds-body-long-
|
19233
|
+
font-size: var(--cds-body-long-01-font-size, 0.875rem);
|
19234
|
+
font-weight: var(--cds-body-long-01-font-weight, 400);
|
19235
|
+
line-height: var(--cds-body-long-01-line-height, 1.42857);
|
19236
|
+
letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
|
19275
19237
|
}
|
19276
19238
|
.c4p--page-header .c4p--page-header__available-row {
|
19277
19239
|
font-size: var(--cds-body-long-01-font-size, 0.875rem);
|
@@ -19467,6 +19429,9 @@ a.bx--side-nav__link--current::before {
|
|
19467
19429
|
justify-content: space-between;
|
19468
19430
|
border-top: 1px solid var(--cds-ui-03, #e0e0e0);
|
19469
19431
|
}
|
19432
|
+
.c4p--card__productive .c4p--card__footer .bx--btn svg {
|
19433
|
+
margin-left: var(--cds-spacing-03, 0.5rem);
|
19434
|
+
}
|
19470
19435
|
.c4p--card__productive .c4p--card__footer-no-button {
|
19471
19436
|
justify-content: flex-end;
|
19472
19437
|
}
|