@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 CHANGED
@@ -1,12 +1,12 @@
1
- # @carbon/ibm-cloud-cognitive
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 name can still be encountered in
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-cloud-cognitive` package.
28
+ `@carbon/ibm-products` package.
29
29
 
30
30
  ```shell
31
- $ yarn add @carbon/ibm-cloud-cognitive
31
+ $ yarn add @carbon/ibm-products
32
32
 
33
33
  # or
34
34
 
35
- $ npm install @carbon/ibm-cloud-cognitive
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-cloud-cognitive/css/index.min.css';
41
+ import '@carbon/ibm-products/css/index.min.css';
42
42
  ```
43
43
 
44
44
  ### Carbon Components (Peer dependencies)
45
45
 
46
- @carbon/ibm-cloud-cognitive is built on top of Carbon components and has a
47
- number of dependencies which need to be installed. Follow the package
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-cloud-cognitive';
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-cloud-cognitive';
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-02-font-size, 1rem);
19272
- font-weight: var(--cds-body-long-02-font-weight, 400);
19273
- line-height: var(--cds-body-long-02-line-height, 1.5);
19274
- letter-spacing: var(--cds-body-long-02-letter-spacing, 0);
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);