@carbon/ibm-products 1.0.0-rc.2 → 1.2.0

package/README.md

@@ -1,12 +1,12 @@
-# @carbon/ibm-cloud-cognitive
+# @carbon/ibm-products
 
 > Carbon for IBM Products is an open-source implementation of the closed source
 > [Carbon for Cloud & Cognitive pattern asset library (PAL)](https://pages.github.ibm.com/cdai-design/pal/).
 > These PAL designs build on the foundation of IBM's open source Carbon Design
 > System and React implementation to offer components and patterns beyond the
 > typical component library. Carbon for IBM Products was previously known as
-> Carbon for IBM Cloud and Cognitive, and this name can still be encountered in
-> various places and historical logs.
+> Carbon for IBM Cloud and Cognitive (@carbon/ibm-cloud-cognitive), and this
+> name can still be encountered in various places and historical logs.
 
 [![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors-)
 [![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).
 ## 📦 Installing Carbon for IBM Products
 
 To use Carbon for IBM Products components, all you need to do is install the
-`@carbon/ibm-cloud-cognitive` package.
+`@carbon/ibm-products` package.
 
 ```shell
-$ yarn add @carbon/ibm-cloud-cognitive
+$ yarn add @carbon/ibm-products
 
 # or
 
-$ npm install @carbon/ibm-cloud-cognitive
+$ npm install @carbon/ibm-products
 ```
 
 Then you can import the component styles in your `index.js`.
 
 ```js
-import '@carbon/ibm-cloud-cognitive/css/index.min.css';
+import '@carbon/ibm-products/css/index.min.css';
 ```
 
 ### Carbon Components (Peer dependencies)
 
-@carbon/ibm-cloud-cognitive is built on top of Carbon components and has a
-number of dependencies which need to be installed. Follow the package
-instructions for:
+@carbon/ibm-products is built on top of Carbon components and has a number of
+dependencies which need to be installed. Follow the package instructions for:
 
 -. Install carbon-components-react as per that packages instructions
 <https://www.npmjs.com/package/carbon-components-react> -. Install
@@ -69,14 +68,14 @@ can be found here on
 ### Packages
 
 You can find example projects using the components in the
-[examples folder](../../packages/examples/cloud-cognitive).
+[examples folder](../../packages/examples/carbon-for-ibm-products).
 
 ## Usage
 
 To start using the components
 
 ```jsx
-import { AboutModal } from '@carbon/ibm-cloud-cognitive';
+import { AboutModal } from '@carbon/ibm-products';
 
 const App = () => {
   return <AboutModal />;
@@ -92,7 +91,7 @@ to be canary and require the consumer to enable via a feature flag in a
 For example, create a `config.js` in your `src` directory:
 
 ```js
-import { pkg } from '@carbon/ibm-cloud-cognitive';
+import { pkg } from '@carbon/ibm-products';
 
 // Enable 'canary' (not yet reviewed/released) components
 // that we want to make use of

package/css/index-full-carbon.css

@@ -13999,6 +13999,9 @@ a.bx--side-nav__link--current::before {
   border-right: 1px solid var(--cds-ui-03, #e0e0e0);
   overflow-y: auto;
 }
+.c4p--tearsheet .c4p--tearsheet__influencer.c4p--tearsheet__influencer p {
+  padding-right: 0;
+}
 .c4p--tearsheet .c4p--tearsheet__influencer--wide {
   flex-basis: 321px;
 }
@@ -14698,69 +14701,6 @@ a.bx--side-nav__link--current::before {
   display: block;
 }
 
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-/* stylelint-disable-line no-invalid-position-at-import-rule */
-.c4p--example-component {
-  display: flex;
-  justify-content: flex-end;
-  --c4p--example-component--border-color: transparent;
-}
-
-.c4p--example-component.c4p--example-component--boxed-set {
-  border: 10px solid var(--c4p--example-component--border-color);
-}
-
-.c4p--example-component.c4p--example-component--shadow-set {
-  margin: var(--cds-spacing-04, 0.75rem);
-  box-shadow: 0 0 10px var(--c4p--example-component--border-color);
-}
-
 /* stylelint-disable-line no-invalid-position-at-import-rule */
 /* stylelint-disable-line no-invalid-position-at-import-rule */
 /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -15392,6 +15332,7 @@ a.bx--side-nav__link--current::before {
 }
 
 .c4p--card__icon {
+  color: inherit;
   cursor: pointer;
 }
 
@@ -18871,6 +18812,7 @@ a.bx--side-nav__link--current::before {
 /* stylelint-disable-line no-invalid-position-at-import-rule */
 .c4p--button-set-with-overflow.c4p--button-set-with-overflow {
   display: flex;
+  width: 100%;
 }
 .c4p--button-set-with-overflow .c4p--button-set-with-overflow__space {
   position: relative;
@@ -18902,6 +18844,16 @@ a.bx--side-nav__link--current::before {
     background-color: var(--to-color);
   }
 }
+@keyframes background-and-shadow-appear {
+  from {
+    background-color: var(--from-color);
+    box-shadow: 0 1px 0 var(--from-color);
+  }
+  to {
+    background-color: var(--to-color);
+    box-shadow: 0 1px 0 var(--to-color-shadow);
+  }
+}
 .c4p--page-header.c4p--page-header {
   /* Bleed class for the background */
   position: sticky;
@@ -18929,16 +18881,16 @@ a.bx--side-nav__link--current::before {
 .c4p--page-header::before {
   --from-color: var(--cds-ui-background, #ffffff);
   --to-color: var(--cds-ui-01, #f4f4f4);
+  --to-color-shadow: var(--cds-ui-03, #e0e0e0);
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   height: 100%;
-  animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
+  animation: background-and-shadow-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
   content: "";
   z-index: -1;
-  box-shadow: 0 1px 0 var(--cds-ui-03, #e0e0e0);
 }
 .c4p--page-header .c4p--page-header--width--xl {
   padding-right: var(--cds-spacing-07, 2rem);
@@ -19068,6 +19020,7 @@ a.bx--side-nav__link--current::before {
 .c4p--page-header .c4p--page-header__action-bar-column--background::before {
   --from-color: var(--cds-ui-background, #ffffff);
   --to-color: var(--cds-ui-01, #f4f4f4);
+  --to-color-shadow: var(--cds-ui-03, #e0e0e0);
   position: absolute;
   top: 0;
   left: 0;
@@ -19238,6 +19191,7 @@ a.bx--side-nav__link--current::before {
 .c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions::before {
   --from-color: var(--cds-ui-background, #ffffff);
   --to-color: var(--cds-ui-01, #f4f4f4);
+  --to-color-shadow: var(--cds-ui-03, #e0e0e0);
   position: absolute;
   top: 0;
   left: 0;
@@ -19247,6 +19201,14 @@ a.bx--side-nav__link--current::before {
   animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
   content: "";
 }
+.c4p--page-header .c4p--page-header__page-actions-content {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  justify-content: flex-end;
+}
 .c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions--in-breadcrumb {
   opacity: 0;
   visibility: hidden;
@@ -19268,10 +19230,10 @@ a.bx--side-nav__link--current::before {
   height: var(--cds-spacing-05, 1rem);
 }
 .c4p--page-header .c4p--page-header__subtitle {
-  font-size: var(--cds-body-long-02-font-size, 1rem);
-  font-weight: var(--cds-body-long-02-font-weight, 400);
-  line-height: var(--cds-body-long-02-line-height, 1.5);
-  letter-spacing: var(--cds-body-long-02-letter-spacing, 0);
+  font-size: var(--cds-body-long-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-long-01-font-weight, 400);
+  line-height: var(--cds-body-long-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
 }
 .c4p--page-header .c4p--page-header__available-row {
   font-size: var(--cds-body-long-01-font-size, 0.875rem);
@@ -19467,6 +19429,9 @@ a.bx--side-nav__link--current::before {
   justify-content: space-between;
   border-top: 1px solid var(--cds-ui-03, #e0e0e0);
 }
+.c4p--card__productive .c4p--card__footer .bx--btn svg {
+  margin-left: var(--cds-spacing-03, 0.5rem);
+}
 .c4p--card__productive .c4p--card__footer-no-button {
   justify-content: flex-end;
 }