Merge branch 'master' into fix/link-list-end-header

packages/react/package.json

@@ -58,7 +58,7 @@
     "@carbon/ibmdotcom-styles": "1.15.0",
     "@carbon/ibmdotcom-utilities": "1.15.0",
     "autosuggest-highlight": "^3.1.1",
-    "carbon-components": "10.27.0",
+    "carbon-components": "10.28.0",
     "carbon-components-react": "7.27.0",
     "carbon-icons": "7.0.7",
     "classnames": "2.2.6",
@@ -79,7 +79,7 @@
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.10.1",
-    "@carbon/icons-react": "10.24.0",
+    "@carbon/icons-react": "10.25.0",
     "@carbon/pictograms-react": "11.2.0",
     "@carbon/storybook-addon-theme": "1.9.0",
     "@percy-io/in-percy": "^0.1.11",
@@ -118,7 +118,7 @@
     "babel-plugin-transform-define": "^2.0.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.0",
     "browserslist-config-carbon": "10.3.0",
-    "carbon-components": "10.27.0",
+    "carbon-components": "10.28.0",
     "chalk": "^2.3.0",
     "child-process-promise": "^2.2.0",
     "chromedriver": "^87.0.0",

packages/react/src/components/DotcomShell/__stories__/data/content.js

@@ -39,7 +39,7 @@ import React from 'react';
  */
 const Content = () => (
   <>
-    <TableOfContents menuLabel="Jump to" theme="white">
+    <TableOfContents menuLabel="Jump to" theme="white" stickyOffset="48">
       <a name="section-1" data-title="Lorem ipsum dolor sit amet" />
       <Layout type="2-1">
         <div>

packages/react/src/components/Masthead/README.stories.mdx

@@ -26,7 +26,7 @@ Here's a quick example to get you started.
 @import '@carbon/type/scss/font-face/sans';
 @include carbon--font-face-mono();
 @include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/masthead/masthead';
+@import '@carbon/ibmdotcom-styles/scss/components/masthead/index';
 ```
 
 > 💡 Only import fonts once per usage. Don't forget to import the Masthead

packages/services-store/package.json

@@ -41,7 +41,7 @@
   "dependencies": {
     "@carbon/ibmdotcom-services": "1.15.0",
     "@carbon/ibmdotcom-utilities": "1.15.0",
-    "carbon-components": "10.27.0",
+    "carbon-components": "10.28.0",
     "redux": "^4.0.0",
     "redux-logger": "^3.0.0",
     "redux-thunk": "^2.3.0",

packages/styles/package.json

@@ -33,14 +33,14 @@
     "visual-snapshot": "yarn build-storybook && percy-storybook --widths=320,1280"
   },
   "dependencies": {
-    "@carbon/grid": "10.18.0",
-    "@carbon/icons-react": "10.24.0",
-    "@carbon/import-once": "10.4.0",
-    "@carbon/layout": "10.16.0",
-    "@carbon/motion": "10.11.0",
-    "@carbon/themes": "10.25.0",
-    "@carbon/type": "10.19.0",
-    "carbon-components": "10.27.0"
+    "@carbon/grid": "10.20.0",
+    "@carbon/icons-react": "10.25.0",
+    "@carbon/import-once": "10.5.0",
+    "@carbon/layout": "10.17.0",
+    "@carbon/motion": "10.12.0",
+    "@carbon/themes": "10.26.0",
+    "@carbon/type": "10.20.0",
+    "carbon-components": "10.28.0"
   },
   "devDependencies": {
     "@babel/core": "^7.7.4",
@@ -59,7 +59,7 @@
     "autoprefixer": "^9.8.0",
     "babel-loader": "^8.0.6",
     "browserslist-config-carbon": "^10.4.0",
-    "carbon-components": "10.26.0",
+    "carbon-components": "10.28.0",
     "carbon-components-react": "7.27.0",
     "del": "^3.0.0",
     "fast-sass-loader": "^1.5.0",

packages/utilities/package.json

@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
-    "carbon-components": "10.27.0",
+    "carbon-components": "10.28.0",
     "isomorphic-dompurify": "0.4.0",
     "js-cookie": "^2.2.1",
     "marked": "1.1.0",
@@ -69,7 +69,7 @@
     "babel-plugin-transform-inline-environment-variables": "^0.4.0",
     "babel-polyfill": "^6.26.0",
     "browserslist-config-carbon": "10.3.0",
-    "carbon-components": "10.27.0",
+    "carbon-components": "10.28.0",
     "chalk": "^2.3.0",
     "cli-table": "^0.3.0",
     "core-js": "^3.1.3",

packages/web-components/IMPLEMENTATION_NOTES.md

@@ -387,6 +387,16 @@ Both of above use [RTLCSS](https://rtlcss.com) to generate the RTL version. RTLC
 
 How to use the RTL version of CSS can be seen at [the usage documentation](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/docs/enable-rtl.md).
 
+## Storybook CSF integration
+
+Storybook introduced a new story format in `5.x` timeframe, called Component Story Format (CSF). It makes stories an ECMAScript import, that is great for reusing stories.
+
+Unfortunately, knobs still require imperative API embedded in stories, which means as soon as we define knobs in stories any code calling stories depends on such knobs.
+
+To make sure that we can reuse stories for unit tests without depending on knobs, we define knobs somewhere outside stories, which is, in story parameters (`parameters.knobs`), like [here](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/src/components/card/__stories__/card.stories.ts#L116-L146). Such `parameters.knobs` is evaluated in a [global story decorator](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/.storybook/decorator-knobs.ts) and put into `parameters.props`, so that stories can refer to like [this](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/src/components/card/__stories__/card.stories.ts#L26).
+
+In this way, test can specify its own `parameters.props`, without being interfered by knobs. An example can be found [here](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/src/components/card/__tests__/card.test.ts#L14-L21).
+
 ## License header
 
 We ensure that our source code has appropriate licence header, with two mechanisms:

packages/web-components/package.json

@@ -78,8 +78,8 @@
     "@carbon/ibmdotcom-services": "1.15.0",
     "@carbon/ibmdotcom-styles": "1.15.0",
     "@carbon/ibmdotcom-utilities": "1.15.0",
-    "@carbon/layout": "10.16.0",
-    "carbon-components": "10.27.0",
+    "@carbon/layout": "10.17.0",
+    "carbon-components": "10.28.0",
     "carbon-web-components": "1.11.1",
     "lodash-es": "^4.17.0",
     "redux": "^4.0.0",
@@ -88,7 +88,7 @@
     "window-or-global": "^1.0.0"
   },
   "optionalDependencies": {
-    "@carbon/icons-react": "10.24.0",
+    "@carbon/icons-react": "10.25.0",
     "lodash.pickby": "^4.6.0",
     "prop-types": "^15.7.0",
     "react": "^16.10.0 || ^17.0.0",
@@ -112,8 +112,8 @@
     "@babel/template": "^7.8.0",
     "@babel/traverse": "^7.8.0",
     "@carbon/ibmdotcom-services-store": "1.15.0",
-    "@carbon/icon-helpers": "10.12.0",
-    "@carbon/icons": "10.24.0",
+    "@carbon/icon-helpers": "10.13.0",
+    "@carbon/icons": "10.25.0",
     "@open-wc/semantic-dom-diff": "^0.15.0",
     "@percy-io/in-percy": "^0.1.11",
     "@percy/storybook": "^3.3.0",
@@ -139,7 +139,7 @@
     "babel-loader": "^8.0.0",
     "babel-plugin-istanbul": "^4.1.0",
     "babel-plugin-template-html-minifier": "^4.1.0",
-    "carbon-components": "10.27.0",
+    "carbon-components": "10.28.0",
     "carbon-web-components": "1.11.0",
     "chalk": "^2.3.0",
     "child-process-promise": "^2.2.0",
@@ -202,7 +202,7 @@
     "lit-element": "^2.3.0",
     "lit-html": "^1.2.0",
     "magic-string": "^0.25.0",
-    "marked": "^1.1.0",
+    "marked": "^2.0.0",
     "mini-css-extract-plugin": "^0.5.0",
     "mkdirp": "^0.5.0",
     "node-sass": "^4.12.0",

packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts

@@ -51,6 +51,9 @@ export default {
   title: 'Components/Callout with Media',
   parameters: {
     ...readme.parameters,
+    hasGrid: true,
+    hasVerticalSpacingInComponent: true,
+    gridContentClasses: 'dds-ce-demo-devenv--simple-grid--callout',
     'carbon-theme': { disabled: true },
     knobs: {
       CalloutWithMedia: ({ groupId }) => ({
@@ -67,13 +70,11 @@ export default {
       }),
     },
     decorators: [
-      story => html`
+      (story, { parameters }) => html`
         <style>
           ${styles}
         </style>
-        <div class="bx--grid" style="width:100%">
-          <div class="bx--row">
-            <div class="bx--offset-lg-4 bx--col-lg-12">
+            <div class="dds-ce-demo-devenv--simple-grid ${parameters.gridContentClasses}">
               ${story()}
             </div>
           </div>

packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts

@@ -94,7 +94,7 @@ const StoryContent = () => html`
     <div class="bx--grid">
       <div class="bx--row">
         <div class="bx--offset-lg-3 bx--col-lg-13">
-          <dds-table-of-contents>
+          <dds-table-of-contents stickyOffset="48">
             <a name="1" data-title="Lorem ipsum dolor sit amet"></a>
             <dds-leadspace-block>
               <dds-leadspace-block-heading>Lorem ipsum dolor sit amet</dds-leadspace-block-heading>