Merge branch 'master' into data-table-fix

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js 14.x
-        uses: actions/[email protected].4
+        uses: actions/[email protected].5
         with:
           node-version: '14.x'
       - name: Run yarn dedupe
@@ -20,7 +20,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js 14.x
-        uses: actions/[email protected].4
+        uses: actions/[email protected].5
         with:
           node-version: '14.x'
       - name: Install dependencies
@@ -33,7 +33,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js 14.x
-        uses: actions/[email protected].4
+        uses: actions/[email protected].5
         with:
           node-version: '14.x'
       - name: Install dependencies

.github/workflows/deploy-react-storybook.yml

@@ -18,7 +18,7 @@ jobs:
     steps:
       - uses: actions/checkout@master
       - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2.1.5
         with:
           node-version: '14.x'
       - name: Install dependencies

.github/workflows/deploy-vanilla-devenv.yml

@@ -17,7 +17,7 @@ jobs:
     steps:
       - uses: actions/checkout@master
       - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2.1.5
         with:
           node-version: '14.x'
       - name: Install dependencies

.github/workflows/nightly-release.yml

@@ -11,7 +11,7 @@ jobs:
     steps:
       - uses: actions/checkout@master
       - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2.1.5
         with:
           node-version: '14.x'
       - name: Install dependencies

.github/workflows/release.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v1
 
       - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2.1.5
         with:
           node-version: '14.x'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/sync-generated-files.yml

@@ -9,7 +9,7 @@ jobs:
     steps:
       - uses: actions/checkout@v1
       - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2.1.5
         with:
           node-version: '14.x'
       - name: Install dependencies

packages/components/src/components/radio-button/_radio-button.scss

@@ -71,7 +71,7 @@
     flex-shrink: 0;
     width: rem(18px);
     height: rem(18px);
-    margin: 2px $carbon--spacing-03 2px $carbon--spacing-03;
+    margin: rem(2px) $carbon--spacing-03 rem(2px) rem(2px);
     background-color: transparent;
     border: $radio-border-width solid $icon-01;
     border-radius: 50%;

packages/react/.storybook/Container.js

@@ -10,7 +10,7 @@ import './polyfills';
 
 import React, { useEffect } from 'react';
 
-function Container({ story }) {
+function Container({ story, id }) {
   useEffect(() => {
     const originalDirection = document.documentElement.dir;
     if (process.env.CARBON_REACT_STORYBOOK_USE_RTL === 'true') {
@@ -28,6 +28,7 @@ function Container({ story }) {
   return (
     <React.StrictMode>
       <div
+        className={id.toLowerCase()}
         data-floating-menu-container
         role="main"
         style={{

packages/react/.storybook/Welcome/Welcome.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import bg from './carbon_bg.png';
+import './welcome.scss';
+import PackageInfo from './../../package.json';
+
+export const Welcome = () => {
+  return (
+    <div
+      className="welcome__container"
+      style={{
+        background: `url(${bg}) no-repeat center center fixed`,
+        backgroundSize: 'cover',
+      }}>
+      <h2 className="welcome__heading">Carbon Components</h2>
+      <h4 className="welcome__heading welcome__heading--subtitle">{`React v${PackageInfo.version}`}</h4>
+    </div>
+  );
+};

packages/react/.storybook/Welcome/Welcome.stories.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+import { Welcome as Intro } from './Welcome';
+
+export default {
+  title: ' Getting Started/ Welcome',
+  component: Intro,
+};
+
+export const Welcome = () => <Intro />;

packages/react/.storybook/Welcome/welcome.scss

@@ -0,0 +1,22 @@
+@import '~carbon-components/scss/globals/scss/typography';
+
+.container-welcome {
+  /* stylelint-disable-next-line declaration-no-important */
+  padding: 0 !important;
+}
+
+.welcome__container {
+  width: 100vw;
+  height: 100vh;
+  padding: 3rem;
+}
+
+.welcome__heading {
+  @include type-style('productive-heading-07');
+
+  color: $inverse-01;
+}
+
+.welcome__heading--subtitle {
+  font-weight: 600;
+}

packages/react/.storybook/main.js

@@ -9,5 +9,9 @@
 
 module.exports = {
   addons: ['storybook-preset-carbon'],
-  stories: ['../src/**/*-story.js', '../src/**/*.stories.mdx'],
+  stories: [
+    './Welcome/Welcome.stories.js',
+    '../src/**/*-story.js',
+    '../src/**/*.stories.mdx',
+  ],
 };

packages/react/.storybook/manager-head.html

@@ -1,19 +1,55 @@
-<meta name="keywords" content="IBM, design, system, Carbon, design system, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, React, React.js">
-<meta name="description" content="This is the React implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs.">
+<meta
+  name="keywords"
+  content="IBM, design, system, Carbon, design system, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, React, React.js"
+/>
+<meta
+  name="description"
+  content="This is the React implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs."
+/>
 
 <!-- Open Graph -->
-<meta property="og:title" content="Carbon Components React">
-<meta property="og:site_name" content="Carbon Components React">
-<meta property="og:description" content="This is the React implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs.">
-<meta property="og:image" content="https://media.github.ibm.com/user/525/files/59e3bfde-b990-11e7-87ef-072e89a87719">
-<meta property="og:url" content="http://react.carbondesignsystem.com">
+<meta property="og:title" content="Carbon Components React" />
+<meta property="og:site_name" content="Carbon Components React" />
+<meta
+  property="og:description"
+  content="This is the React implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs."
+/>
+<meta
+  property="og:image"
+  content="https://media.github.ibm.com/user/525/files/59e3bfde-b990-11e7-87ef-072e89a87719"
+/>
+<meta property="og:url" content="http://react.carbondesignsystem.com" />
+
+<!-- Favicon -->
+<link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any" />
 
 <!-- Social -->
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:image:alt" content="Carbon Design System">
-<meta name="twitter:site" content="@_carbondesign">
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:image:alt" content="Carbon Design System" />
+<meta name="twitter:site" content="@_carbondesign" />
 
 <!-- Storybook override -->
 <script>
-  document.title = 'Carbon Components React';
+  setTimeout(function () {
+    document.title = 'Carbon Components React';
+  }, 1000);
 </script>
+
+<!-- Style overrides -->
+<style>
+  body a[href='/?path=/settings/about'] {
+    display: none;
+  }
+
+  .simplebar-content form span {
+    font-weight: 600;
+  }
+
+  .simplebar-content a button {
+    color: #161616;
+  }
+
+  .simplebar-content .sidebar-item.selected {
+    color: #161616;
+  }
+</style>

packages/react/.storybook/manager.js

@@ -4,6 +4,12 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { addons } from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});
 
 // These options used by storybook often conflict with developer tools,
 // conditional panels, or other things that get in the way of our workflow

packages/react/.storybook/preview-head.html

@@ -0,0 +1,22 @@
+<!-- <link
+  href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600&display=swap"
+  rel="stylesheet"
+/> -->
+<style>
+  .sbdocs-li {
+    list-style: circle;
+  }
+
+  .sbdocs-wrapper .sbdocs-a {
+    color: #0f62fe;
+  }
+
+  .sbdocs-wrapper .sbdocs-a:hover {
+    color: #0353e9;
+  }
+
+  .sbdocs-wrapper .sbdocs-h2 {
+    margin-bottom: 0;
+    padding-bottom: 12px;
+  }
+</style>

packages/react/.storybook/preview.js

@@ -12,12 +12,14 @@ import { themes } from '@storybook/theming';
 import { configureActions } from '@storybook/addon-actions';
 import { CARBON_CURRENT_THEME, CARBON_TYPE_TOKEN } from './shared';
 import Container from './Container';
-import PackageInfo from './../package.json';
+import carbonTheme from './theme';
 
 const customPropertyPrefix = 'cds';
 
 addParameters({
   options: {
+    theme: carbonTheme,
+    showRoots: true,
     /**
      * We sort our stories by default alphabetically, however there are specific
      * keywords that will be sorted further down the sidebar, including
@@ -39,6 +41,7 @@ addParameters({
       // determine order later on.
       const UNKNOWN_KEYWORD = 3;
       const keywords = new Map([
+        ['welcome', 0],
         ['default', 1],
         ['usage', 2],
         ['playground', 4],
@@ -85,12 +88,6 @@ addParameters({
       // two ids
       return idA.localeCompare(idB);
     },
-    theme: {
-      ...themes.light,
-      brandTitle: `Carbon Components React v${PackageInfo.version}`,
-      brandUrl:
-        'https://github.com/carbon-design-system/carbon/tree/master/packages/react',
-    },
   },
 });
 
@@ -99,7 +96,11 @@ configureActions({
   limit: 10,
 });
 
-addDecorator((story) => <Container story={story} />);
+addDecorator((story, i) => {
+  return (
+    <Container id={`container-${story().type?.displayName}`} story={story} />
+  );
+});
 
 addons.getChannel().on(CARBON_CURRENT_THEME, (theme) => {
   document.documentElement.setAttribute('storybook-carbon-theme', theme);

packages/react/.storybook/styles.scss

@@ -104,7 +104,3 @@ $prefix: 'bx';
     }
   }
 }
-
-.sbdocs-li {
-  list-style: circle;
-}

packages/react/.storybook/theme.js

@@ -0,0 +1,51 @@
+import { create } from '@storybook/theming';
+import { g10 } from '@carbon/themes';
+import PackageInfo from './../package.json';
+
+const {
+  field01,
+  interactive01,
+  selectedUI,
+  text01,
+  inverse01,
+  ui01,
+  ui03,
+  ui04,
+  uiBackground,
+} = g10;
+
+export default create({
+  base: 'light',
+
+  colorPrimary: interactive01,
+  colorSecondary: selectedUI,
+
+  // UI
+  appBg: uiBackground,
+  appContentBg: ui01,
+  appBorderColor: ui03,
+  appBorderRadius: 0,
+
+  // Typography
+  fontBase: '"IBM Plex Sans", sans-serif',
+  fontCode: '"IBM Plex Mono", monospace',
+
+  // Text colors
+  textColor: text01,
+  textInverseColor: inverse01,
+
+  // Toolbar default and active colors
+  barTextColor: text01,
+  barSelectedColor: interactive01,
+  barBg: uiBackground,
+
+  // Form colors
+  inputBg: field01,
+  inputBorder: ui03,
+  inputTextColor: text01,
+  inputBorderRadius: 0,
+
+  brandTitle: `Carbon Components React v${PackageInfo.version}`,
+  brandUrl:
+    'https://github.com/carbon-design-system/carbon/tree/master/packages/react',
+});