@carbon/ibm-products 1.0.0-rc.2 → 1.0.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 +11 -12
- package/css/index-full-carbon.css +23 -6
- 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 +23 -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 +23 -6
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index.css +23 -6
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/es/components/PageHeader/PageHeader.js +8 -8
- package/es/components/_Canary/Canary.js +1 -1
- package/es/global/js/utils/story-helper.js +22 -0
- package/lib/components/PageHeader/PageHeader.js +8 -8
- package/lib/components/_Canary/Canary.js +1 -1
- package/lib/global/js/utils/story-helper.js +29 -2
- package/package.json +2 -2
- package/scss/components/PageHeader/_page-header.scss +33 -6
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
|
[](#contributors-)
|
12
12
|
[](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
|
@@ -76,7 +75,7 @@ You can find example projects using the components in the
|
|
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
|
@@ -18902,6 +18902,16 @@ a.bx--side-nav__link--current::before {
|
|
18902
18902
|
background-color: var(--to-color);
|
18903
18903
|
}
|
18904
18904
|
}
|
18905
|
+
@keyframes background-and-shadow-appear {
|
18906
|
+
from {
|
18907
|
+
background-color: var(--from-color);
|
18908
|
+
box-shadow: 0 1px 0 var(--from-color);
|
18909
|
+
}
|
18910
|
+
to {
|
18911
|
+
background-color: var(--to-color);
|
18912
|
+
box-shadow: 0 1px 0 var(--to-color-shadow);
|
18913
|
+
}
|
18914
|
+
}
|
18905
18915
|
.c4p--page-header.c4p--page-header {
|
18906
18916
|
/* Bleed class for the background */
|
18907
18917
|
position: sticky;
|
@@ -18929,16 +18939,16 @@ a.bx--side-nav__link--current::before {
|
|
18929
18939
|
.c4p--page-header::before {
|
18930
18940
|
--from-color: var(--cds-ui-background, #ffffff);
|
18931
18941
|
--to-color: var(--cds-ui-01, #f4f4f4);
|
18942
|
+
--to-color-shadow: var(--cds-ui-03, #e0e0e0);
|
18932
18943
|
position: absolute;
|
18933
18944
|
top: 0;
|
18934
18945
|
left: 0;
|
18935
18946
|
display: block;
|
18936
18947
|
width: 100%;
|
18937
18948
|
height: 100%;
|
18938
|
-
animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
|
18949
|
+
animation: background-and-shadow-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
|
18939
18950
|
content: "";
|
18940
18951
|
z-index: -1;
|
18941
|
-
box-shadow: 0 1px 0 var(--cds-ui-03, #e0e0e0);
|
18942
18952
|
}
|
18943
18953
|
.c4p--page-header .c4p--page-header--width--xl {
|
18944
18954
|
padding-right: var(--cds-spacing-07, 2rem);
|
@@ -19068,6 +19078,7 @@ a.bx--side-nav__link--current::before {
|
|
19068
19078
|
.c4p--page-header .c4p--page-header__action-bar-column--background::before {
|
19069
19079
|
--from-color: var(--cds-ui-background, #ffffff);
|
19070
19080
|
--to-color: var(--cds-ui-01, #f4f4f4);
|
19081
|
+
--to-color-shadow: var(--cds-ui-03, #e0e0e0);
|
19071
19082
|
position: absolute;
|
19072
19083
|
top: 0;
|
19073
19084
|
left: 0;
|
@@ -19238,6 +19249,7 @@ a.bx--side-nav__link--current::before {
|
|
19238
19249
|
.c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions::before {
|
19239
19250
|
--from-color: var(--cds-ui-background, #ffffff);
|
19240
19251
|
--to-color: var(--cds-ui-01, #f4f4f4);
|
19252
|
+
--to-color-shadow: var(--cds-ui-03, #e0e0e0);
|
19241
19253
|
position: absolute;
|
19242
19254
|
top: 0;
|
19243
19255
|
left: 0;
|
@@ -19247,6 +19259,11 @@ a.bx--side-nav__link--current::before {
|
|
19247
19259
|
animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
|
19248
19260
|
content: "";
|
19249
19261
|
}
|
19262
|
+
.c4p--page-header .c4p--page-header__page-actions-content {
|
19263
|
+
position: relative;
|
19264
|
+
width: 100%;
|
19265
|
+
height: 100%;
|
19266
|
+
}
|
19250
19267
|
.c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions--in-breadcrumb {
|
19251
19268
|
opacity: 0;
|
19252
19269
|
visibility: hidden;
|
@@ -19268,10 +19285,10 @@ a.bx--side-nav__link--current::before {
|
|
19268
19285
|
height: var(--cds-spacing-05, 1rem);
|
19269
19286
|
}
|
19270
19287
|
.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-
|
19288
|
+
font-size: var(--cds-body-long-01-font-size, 0.875rem);
|
19289
|
+
font-weight: var(--cds-body-long-01-font-weight, 400);
|
19290
|
+
line-height: var(--cds-body-long-01-line-height, 1.42857);
|
19291
|
+
letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
|
19275
19292
|
}
|
19276
19293
|
.c4p--page-header .c4p--page-header__available-row {
|
19277
19294
|
font-size: var(--cds-body-long-01-font-size, 0.875rem);
|