Merge branch 'master' into addIconElementClassNamesForAnimation

packages/storybook-addon-carbon-theme/react.js → config/storybook-preset-carbon/.babelrc.js

@@ -1,7 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2018
+ * Copyright IBM Corp. 2021, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-module.exports = require('./dist/react');
+
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+};

packages/react/.storybook/addon-carbon-theme/components/Panel.js → config/storybook-preset-carbon/carbon-theme-addon/src/components/Panel.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2018
+ * Copyright IBM Corp. 2021, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,7 +8,7 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Form } from '@storybook/components';
-import { CARBON_TYPE_TOKEN } from '../shared';
+import { CARBON_CURRENT_THEME, CARBON_TYPE_TOKEN } from '../shared';
 
 const typeTokenPairings = [
   '12-16',
@@ -36,15 +36,69 @@ const typeTokenDefaults = {
   'productive-heading-04': '28-36',
 };
 
-/**
- * Storybook add-on panel for Carbon type token switcher.
- */
+export const CarbonThemePanel = ({ api, active }) => {
+  const [currentTheme, setCurrentTheme] = useState('white');
+  const handleChange = useCallback(
+    (event) => {
+      const { value } = event.target;
+      setCurrentTheme(value);
+      api.getChannel().emit(CARBON_CURRENT_THEME, value);
+    },
+    [api]
+  );
+  return (
+    active && (
+      <Form>
+        <Form.Field label="Select Carbon theme:">
+          <Form.Select
+            name="carbon-theme"
+            value={currentTheme}
+            onChange={handleChange}
+            size="flex">
+            <option key="white" value="white">
+              white
+            </option>
+            <option key="g10" value="g10">
+              g10
+            </option>
+            <option key="g90" value="g90">
+              g90
+            </option>
+            <option key="g100" value="g100">
+              g100
+            </option>
+          </Form.Select>
+        </Form.Field>
+      </Form>
+    )
+  );
+};
+
+CarbonThemePanel.propTypes = {
+  /**
+   * `true` if this Storybook add-on panel is active.
+   */
+  active: PropTypes.bool.isRequired,
+
+  /**
+   * The Storybook API object.
+   */
+  api: PropTypes.shape({
+    getChannel: PropTypes.func,
+  }).isRequired,
+};
+
 export const CarbonTypePanel = ({ api, active }) => {
   const [currentTypeTokens, setCurrentTypeTokens] = useState(typeTokenDefaults);
   const handleTokenChange = useCallback(
     (event) => {
       const { name: tokenName, value: tokenValue } = event.target;
-      setCurrentTypeTokens({ ...currentTypeTokens, [tokenName]: tokenValue });
+      setCurrentTypeTokens((currentTypeTokens) => {
+        return {
+          ...currentTypeTokens,
+          [tokenName]: tokenValue,
+        };
+      });
       api.getChannel().emit(CARBON_TYPE_TOKEN, { tokenName, tokenValue });
     },
     [api]
@@ -76,15 +130,15 @@ export const CarbonTypePanel = ({ api, active }) => {
 };
 
 CarbonTypePanel.propTypes = {
+  /**
+   * `true` if this Storybook add-on panel is active.
+   */
+  active: PropTypes.bool.isRequired,
+
   /**
    * The Storybook API object.
    */
   api: PropTypes.shape({
     getChannel: PropTypes.func,
   }).isRequired,
-
-  /**
-   * `true` if this Storybook add-on panel is active.
-   */
-  active: PropTypes.bool.isRequired,
 };

config/storybook-preset-carbon/carbon-theme-addon/src/preset.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+module.exports = {
+  managerEntries(entry = []) {
+    return [...entry, require.resolve('./register')];
+  },
+};

config/storybook-preset-carbon/carbon-theme-addon/src/register.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * 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 { addons } from '@storybook/addons';
+import { CarbonThemePanel, CarbonTypePanel } from './components/Panel';
+import {
+  CARBON_THEMES_ADDON_ID,
+  CARBON_THEME_PANEL_ID,
+  CARBON_TYPE_ADDON_ID,
+  CARBON_TYPE_PANEL_ID,
+} from './shared';
+
+// Disabling because storybook addons doesn't provide proptypes or display names for these panels
+/* eslint-disable react/display-name, react/prop-types */
+addons.register(CARBON_THEMES_ADDON_ID, (api) => {
+  addons.addPanel(CARBON_THEME_PANEL_ID, {
+    title: 'Carbon Theme',
+    render: ({ active, key }) => (
+      <CarbonThemePanel api={api} key={key} active={active} />
+    ),
+  });
+});
+
+addons.register(CARBON_TYPE_ADDON_ID, (api) => {
+  addons.addPanel(CARBON_TYPE_PANEL_ID, {
+    title: 'Carbon Type',
+    render: ({ active, key }) => (
+      <CarbonTypePanel api={api} key={key} active={active} />
+    ),
+  });
+});

config/storybook-preset-carbon/carbon-theme-addon/src/shared.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export const CARBON_THEMES_ADDON_ID = 'carbon-theme';
+export const CARBON_CURRENT_THEME = `${CARBON_THEMES_ADDON_ID}/current`;
+export const CARBON_THEME_PANEL_ID = `${CARBON_THEMES_ADDON_ID}/panel`;
+export const CARBON_TYPE_ADDON_ID = 'carbon-type';
+export const CARBON_TYPE_TOKEN = `${CARBON_TYPE_ADDON_ID}/type`;
+export const CARBON_TYPE_PANEL_ID = `${CARBON_TYPE_ADDON_ID}/panel`;

config/storybook-preset-carbon/index.js

@@ -26,12 +26,12 @@ module.exports = {
     '@storybook/addon-storysource',
     '@storybook/addon-knobs',
     '@storybook/addon-actions',
-    '@storybook/addon-links',
     '@storybook/addon-docs',
     '@storybook/addon-notes/register',
     'storybook-readme/register',
-
-    // Phase 3: port over custom panels/add-ons
+    '@storybook/addon-links',
+    CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES === 'true' &&
+      require.resolve('./dist/preset.js'),
   ],
 
   webpack(config) {

config/storybook-preset-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "storybook-preset-carbon",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.2.0-rc.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {
@@ -17,10 +17,18 @@
     "components",
     "react"
   ],
+  "scripts": {
+    "build": "babel ./carbon-theme-addon/src --out-dir ./dist",
+    "clean": "rimraf ./dist"
+  },
   "peerDependencies": {
-    "@storybook/react": "^5.3.19"
+    "@storybook/react": "^5.3.19",
+    "react": "^16.8.6 || ^17.0.1",
+    "react-dom": "^16.8.6 || ^17.0.1"
   },
   "dependencies": {
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
     "@storybook/addon-actions": "^5.3.19",
     "@storybook/addon-docs": "^5.3.19",
     "@storybook/addon-knobs": "^5.3.19",
@@ -29,9 +37,14 @@
     "@storybook/addon-storysource": "^5.3.19",
     "@storybook/addons": "^5.3.19",
     "@storybook/source-loader": "^5.3.19",
+    "react-is": "^16.8.6",
     "storybook-readme": "^5.0.8"
   },
   "devDependencies": {
-    "@storybook/react": "^5.3.19"
+    "@storybook/react": "^5.3.19",
+    "babel-loader": "^8.2.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "webpack": "^4.41.5"
   }
 }

docs/migration/11.x-type.md

@@ -0,0 +1,24 @@
+# @carbon/type
+
+**Note: everything in this file is a work-in-progress and will be changed.**
+
+## Changes
+
+| Filename                 | v10                               | v11                               |
+| ------------------------ | --------------------------------- | --------------------------------- |
+| `scss/_scale.scss`       | `@function carbon--get-type-size` | Removed, use `type-scale` instead |
+|                          | `$carbon--type-scale`             | `$type-scale`                     |
+|                          | `@function carbon--type-scale`    | `@function type-scale`            |
+|                          | `@mixin carbon--type-scale`       | `@mixin type-scale`               |
+|                          | `@mixin carbon--font-size`        | `@mixin font-size`                |
+| `scss/_font-family.scss` | `$carbon--font-families`          | `$font-families`                  |
+|                          | `@function carbon--font-family`   | `font-family`                     |
+|                          | `@mixin carbon--font-family`      | `font-family`                     |
+|                          | `$carbon--font-weights`           | `$font-weights`                   |
+|                          | `@function carbon--font-weight`   | `font-weight`                     |
+|                          | `@mixin carbon--font-weight`      | `font-weight`                     |
+| `scss/_prefix.scss`      |                                   | No Changes                        |
+| `scss/_styles.scss`      | `@mixin carbon--type-style`       | `@mixin type-style`               |
+| `scss/_reset.scss`       | `@mixin carbon--default-type`     | `@mixin default-type`             |
+|                          | `@mixin carbon--type-reset`       | `@mixin type-reset`               |
+| `scss/_classes.scss`     | `@mixin carbon--type-classes`     | `@mixin type-classes`             |