@carbon/ibm-products 1.0.0-rc.2 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
[![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
|
@@ -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);
|