Merge branch 'master' into snippet-props

.all-contributorsrc

@@ -764,6 +764,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "szymonbrandys",
+      "name": "szymonbrandys",
+      "avatar_url": "https://avatars.githubusercontent.com/u/79149899?v=4",
+      "profile": "https://github.com/szymonbrandys",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

README.md

@@ -179,9 +179,12 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/sophiiae"><img src="https://avatars.githubusercontent.com/u/18622886?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Fei Z</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=sophiiae" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/IgnasA"><img src="https://avatars.githubusercontent.com/u/7099068?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ignas Ausiejus</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=IgnasA" title="Documentation">📖</a></td>
     <td align="center"><a href="https://ryanomackey.com/"><img src="https://avatars.githubusercontent.com/u/17710824?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ryan O. Mackey</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ryanomackey" title="Code">💻</a></td>
-    <td align="center"><a href="http://www.skateman.eu/"><img src="https://avatars.githubusercontent.com/u/649130?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Halász Dávid</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=skateman" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.skateman.eu/"><img src="https://avatars.githubusercontent.com/u/649130?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dávid Halász</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=skateman" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/guigueb"><img src="https://avatars1.githubusercontent.com/u/5973642?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bill Guigue</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=guigueb" title="Code">💻</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/szymonbrandys"><img src="https://avatars.githubusercontent.com/u/79149899?v=4?s=100" width="100px;" alt=""/><br /><sub><b>szymonbrandys</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=szymonbrandys" title="Code">💻</a></td>
+  </tr>
 </table>
 
 <!-- markdownlint-restore -->

packages/components/package.json

@@ -116,7 +116,7 @@
     "custom-event": "^1.0.0",
     "del": "~2.0.2",
     "diff": "^5.0.0",
-    "express-handlebars": "^3.0.0",
+    "express-handlebars": "^5.2.1",
     "fancy-log": "^1.3.0",
     "fibers": "^4.0.1",
     "glob": "^7.1.2",
@@ -155,7 +155,7 @@
     "mock-raf": "^1.0.0",
     "node-sass": "^4.13.1",
     "nodemon": "^1.18.7",
-    "path-to-regexp": "^2.2.0",
+    "path-to-regexp": "^6.2.0",
     "portscanner": "^2.2.0",
     "postcss-custom-properties": "^9.0.0",
     "postcss-loader": "^3.0.0",

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -655,6 +655,9 @@ Map {
       "aria-label": Object {
         "type": "string",
       },
+      "aria-labelledby": Object {
+        "type": "string",
+      },
       "children": Object {
         "type": "node",
       },

packages/react/src/components/ComposedModal/ComposedModal.js

@@ -38,6 +38,11 @@ export default class ComposedModal extends Component {
      */
     ['aria-label']: PropTypes.string,
 
+    /**
+     * Specify the aria-labelledby for bx--modal-container
+     */
+    ['aria-labelledby']: PropTypes.string,
+
     /**
      * Specify the content to be placed in the ComposedModal
      */
@@ -221,6 +226,7 @@ export default class ComposedModal extends Component {
   render() {
     const { open } = this.state;
     const {
+      ['aria-labelledby']: ariaLabelledBy,
       ['aria-label']: ariaLabel,
       className,
       containerClassName,
@@ -287,7 +293,8 @@ export default class ComposedModal extends Component {
           className={containerClass}
           role="dialog"
           aria-modal="true"
-          aria-label={ariaLabel ? ariaLabel : generatedAriaLabel}>
+          aria-label={ariaLabel ? ariaLabel : generatedAriaLabel}
+          aria-labelledby={ariaLabelledBy}>
           {childrenWithProps}
         </div>
         {/* Non-translatable: Focus-wrap code makes this `<span>` not actually read by screen readers */}

packages/react/src/components/CopyButton/CopyButton-story.js

@@ -37,11 +37,10 @@ export default {
   },
 };
 
-export const Default = () => <CopyButton {...props()} />;
+export const _Default = () => <CopyButton />;
 
-Default.parameters = {
-  info: {
-    text:
-      'The copy button can be used when the user needs to copy information, such as a code snippet, to their clipboard.',
-  },
+_Default.story = {
+  name: 'Copy Button',
 };
+
+export const Playground = () => <CopyButton {...props()} />;

packages/react/src/components/CopyButton/CopyButton.mdx

@@ -1,4 +1,4 @@
-import { Props } from '@storybook/addon-docs/blocks';
+import { Props, Story, Preview } from '@storybook/addon-docs/blocks';
 
 # CopyButton
 
@@ -13,13 +13,20 @@ import { Props } from '@storybook/addon-docs/blocks';
 
 - [Overview](#overview)
 - [Component API](#component-api)
-- [References](#references)
 - [Feedback](#feedback)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 ## Overview
 
+The copy button should be accompanied by a tooltip. Tooltip feedback text should
+be concise and describe the action taken when the user clicks the copy button.
+By default we display the text “Copied!”.
+
+<Preview>
+  <Story id="copybutton--default" />
+</Preview>
+
 ## Component API
 
 <Props />

packages/react/src/components/FormLabel/FormLabel-story.js

@@ -9,37 +9,33 @@ import React from 'react';
 
 import FormLabel from './FormLabel';
 import Tooltip from '../Tooltip';
-
-const additionalProps = {
-  className: 'some-class',
-};
+import mdx from './FormLabel.mdx';
 
 export default {
   title: 'FormLabel',
 
   parameters: {
     component: FormLabel,
+    docs: {
+      page: mdx,
+    },
   },
 };
 
-export const Default = () => <FormLabel {...additionalProps}>Label</FormLabel>;
+export const _Default = () => <FormLabel>Form label</FormLabel>;
 
-Default.parameters = {
-  info: {
-    text: 'Form label.',
-  },
+_Default.story = {
+  name: 'Form Label',
 };
 
 export const WithTooltip = () => (
-  <FormLabel {...additionalProps}>
-    <Tooltip triggerText="Label">This is the content of the tooltip.</Tooltip>
+  <FormLabel>
+    <Tooltip triggerText="Form label">
+      This can be used to provide more information about a field.
+    </Tooltip>
   </FormLabel>
 );
 
-WithTooltip.storyName = 'With tooltip';
-
-WithTooltip.parameters = {
-  info: {
-    text: 'Form label with tooltip.',
-  },
+WithTooltip.story = {
+  name: 'Form Label with Tooltip',
 };

packages/react/src/components/FormLabel/FormLabel.mdx

@@ -0,0 +1,36 @@
+import { Props, Story, Preview } from '@storybook/addon-docs/blocks';
+import Tooltip from '../Tooltip';
+
+# FormLabel
+
+[Source code](https://github.com/carbon-design-system/carbon/tree/master/packages/react/src/components/FormLabel)
+ | 
+[Usage guidelines](https://www.carbondesignsystem.com/components/form/usage)
+[Accessibility](https://www.carbondesignsystem.com/components/form/accessibility)
+
+## Table of Contents
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [Overview](#overview)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Overview
+
+<Preview>
+  <Story id="formlabel--default" />
+</Preview>
+
+## Component API
+
+<Props />
+
+## Feedback
+
+Help us improve this component by providing feedback through, asking questions
+on Slack, or updating this file on GitHub
+[GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/Modal/Modal.mdx).

packages/react/src/components/Link/Link-story.js

@@ -42,13 +42,12 @@ export default {
   },
 };
 
-export const Default = () => <Link {...props()}>Link</Link>;
-
-Default.parameters = {
-  info: {
-    text: `
-            Links are typically used as a means of navigation either within the application, to a place outside, or to a resource.
-            For anything else, especially things that change data, you should be using a button.
-          `,
-  },
+export const _Default = () => (
+  <Link href="http://www.carbondesignsystem.com">Link</Link>
+);
+
+_Default.story = {
+  name: 'Link',
 };
+
+export const Playground = () => <Link {...props()}>Link</Link>;

packages/react/src/components/Link/Link.mdx

@@ -1,4 +1,4 @@
-import { Props } from '@storybook/addon-docs/blocks';
+import { Props, Preview, Story } from '@storybook/addon-docs/blocks';
 
 # Link
 
@@ -10,8 +10,22 @@ import { Props } from '@storybook/addon-docs/blocks';
 
 ## Table of Contents
 
+- [Overview](#overview)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
 ## Overview
 
+Links are used as navigational elements and can be used on their own or inline
+with text. They provide a lightweight option for navigation but like other
+interactive elements, too many links will clutter a page and make it difficult
+for users to identify their next steps. This is especially true for inline
+links, which should be used sparingly.
+
+<Preview>
+  <Story id="link--default" />
+</Preview>
+
 ## Component API
 
 <Props />