Merge remote-tracking branch 'upstream/master' into HEAD

.github/CODEOWNERS

@@ -1,7 +1,5 @@
-# This file determines the code owners for various directories within the IBM Carbon website.
-
-# Default to the aux team
-* @carbon-design-system/developers-auxiliary
+# Default to the system team
+* @carbon-design-system/developers-system
 
 *.conf @vpicone
 

src/gatsby-theme-carbon/templates/Homepage.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { HomepageCallout, ResourceCard } from 'gatsby-theme-carbon';
 import HomepageTemplate from 'gatsby-theme-carbon/src/templates/Homepage';
-import { calloutLink } from './Homepage.module.scss';
+import styles from './Homepage.module.scss';
 import HomepageVideo from '../../components/HomepageVideo/HomepageVideo';
 
 const FirstLeftText = () => <p>Carbon Design System</p>;
@@ -29,7 +29,7 @@ const SecondRightText = () => (
     possible experience for our users. If you’re interested in contributing,
     check out our contributing guidelines to get started.
     <a
-      className={calloutLink}
+      className={styles.calloutLink}
       href="https://www.carbondesignsystem.com/how-to-contribute/overview/"
     >
       Start contributing →
@@ -46,12 +46,12 @@ const customProps = {
           <div className="bx--row">
             <div className="bx--col-lg-4 bx--col-md-4 bx--col-sm-2 bx--offset-lg-8 bx--offset-md-4 bx--offset-sm-2 homepage--tile-header">
               <ResourceCard
+                className={styles.callToAction}
                 subTitle="Read"
                 title="Migration guide"
                 href="/updates/migration-guide/overview"
                 color="dark"
                 actionIcon="arrowRight"
-                onClick={() => fathom('trackGoal', '0GXPXZKE', 0)}
               />
             </div>
             <HomepageVideo />

src/gatsby-theme-carbon/templates/Homepage.module.scss

@@ -1,3 +1,7 @@
+.call-to-action {
+  z-index: 1;
+}
+
 .callout-link {
   @include carbon--type-style("body-long-02");
   margin-top: $spacing-06;

src/pages/components/accordion/code.mdx

@@ -1,36 +1,208 @@
 ---
 title: Accordion
-description: The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.
+description:
+  The accordion component delivers large amounts of content in a small space
+  through progressive disclosure. The user gets key details about the underlying
+  content and can choose to expand that content.
 tabs: ["Usage", "Style", "Code", "Accessibility"]
 ---
 
-<ComponentDemo
-  components={[
-    {
-      id: "accordion",
-      label: "Accordion",
-    },
-  ]}
->
-  <ComponentVariant
-    id="accordion"
-    knobs={{ Accordion: ["align"], AccordionItem: ["open"] }}
-    links={{
-      React:
-        "http://react.carbondesignsystem.com/?path=/story/accordion--default",
-      Angular:
-        "https://angular.carbondesignsystem.com/?path=/story/components-accordion--basic",
-      Vue:
-        "http://vue.carbondesignsystem.com/?path=/story/components-cvaccordion--default",
-      Vanilla: "https://the-carbon-components.netlify.com/?nav=accordion",
-    }}
-  >
-    {`
-  <Accordion>
-    <AccordionItem title="Title 1"><p>The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion. Accordions work especially well on mobile interfaces or whenever vertical space is at a premium.</p></AccordionItem>
-    <AccordionItem title="Title 2"><p>The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion. Accordions work especially well on mobile interfaces or whenever vertical space is at a premium.</p></AccordionItem>
-    <AccordionItem title="Title 3"><p>The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion. Accordions work especially well on mobile interfaces or whenever vertical space is at a premium.</p></AccordionItem>
-  </Accordion>
-  `}
-  </ComponentVariant>
-</ComponentDemo>
+<PageDescription>
+
+How to build an accordion using React. For code usage with other frameworks, please follow the links in the live demo on the usage tab.
+
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>Overview</AnchorLink>
+<AnchorLink>Skeleton state</AnchorLink>
+<AnchorLink>Component API</AnchorLink>
+<AnchorLink>References</AnchorLink>
+<AnchorLink>Feedback</AnchorLink>
+
+</AnchorLinks>
+
+## Overview
+
+You can build an accordion using a combination of the `Accordion` and
+`AccordionItem` components. The `Accordion` components accepts a list of
+`AccordionItem` components as `children` and each `AccordionItem` is responsible
+for displaying the accordion's heading and panel content.
+
+You can configure the accordion item's heading using the `title` prop.
+Everything you pass in as a child of `AccordionItem` will be rendered in the
+accordion's panel.
+
+```jsx
+import { Accordion, AccordionItem } from "carbon-components-react";
+
+function MyComponent() {
+  return (
+    <Accordion>
+      <AccordionItem title="Panel A">Panel A</AccordionItem>
+      <AccordionItem title="Panel B">Panel B</AccordionItem>
+      <AccordionItem title="Panel C">Panel C</AccordionItem>
+    </Accordion>
+  );
+}
+```
+
+## Skeleton state
+
+You can use the `AccordionSkeleton` component to render a skeleton variant of an
+accordion. This is useful to display while content in your accordion is being
+fetched from an external resource like an API.
+
+```jsx
+import {
+  Accordion,
+  AccordionItem,
+  AccordionSkeleton,
+} from "carbon-components-react";
+
+function MyComponent({ isLoading }) {
+  if (isLoading) {
+    return <AccordionSkeleton open count={3} />;
+  }
+
+  return (
+    <Accordion>
+      <AccordionItem title="Panel A">Panel A</AccordionItem>
+      <AccordionItem title="Panel B">Panel B</AccordionItem>
+      <AccordionItem title="Panel C">Panel C</AccordionItem>
+    </Accordion>
+  );
+}
+```
+
+## Component API
+
+### Accordion props
+
+| Prop      | Type                     | Required | Default | Description                                                       |
+| --------- | ------------------------ | -------- | ------- | ----------------------------------------------------------------- |
+| align     | `'start'` &#124; `'end'` | –        | –       | Specify the alignment of the accordion heading title and chevron  |
+| children  | `node`                   | `true`   | –       | –                                                                 |
+| className | `string`                 | –        | –       | Specify an optional className to be applied to the container node |
+
+Additional props passed into `Accordion` will be forwarded along to the
+underlying accordion container.
+
+### Accordion align
+
+In rare cases, you may need to specify the alignment of the icon in the
+accordion. You can use the `align` prop to specify the side where the icon
+should be placed.
+
+_Note: This prop must not be used to create a tree view or set of nested
+accordions._
+
+```jsx
+<Accordion align="start">
+  <AccordionItem title="Panel A">Panel A</AccordionItem>
+  <AccordionItem title="Panel B">Panel B</AccordionItem>
+  <AccordionItem title="Panel C">Panel C</AccordionItem>
+</Accordion>
+```
+
+### Accordion className
+
+The `className` prop passed into `Accordion` will be forwarded along to the
+underlying accordion container. This is useful for specifying a custom class
+name for layout.
+
+```jsx
+<Accordion className="custom-class">
+  <AccordionItem title="Panel A">Panel A</AccordionItem>
+  <AccordionItem title="Panel B">Panel B</AccordionItem>
+  <AccordionItem title="Panel C">Panel C</AccordionItem>
+</Accordion>
+```
+
+### AccordionItem props
+
+| Prop      | Type      | Required | Default | Description                                                       |
+| --------- | --------- | -------- | ------- | ----------------------------------------------------------------- |
+| children  | `node`    | `true`   | –       | –                                                                 |
+| className | `string`  | –        | –       | Provide an optional className to be applied to the container node |
+| open      | `boolean` | –        | –       | Specify whether the `AccordionItem` should be open                |
+| title     | `node`    | –        | –       | Provide the value of the accordion item heading                   |
+
+Additional props passed into `AccordionItem`, such as `onClick`, will be passed
+through to the underlying accordion header.
+
+### AccordionItem className
+
+The `className` prop passed into `AccordionItem` will be forwarded along to the
+underlying accordion header. This is useful for specifying a custom class name
+for layout.
+
+```jsx
+<Accordion>
+  <AccordionItem title="Panel A" className="custom-class">
+    Panel A
+  </AccordionItem>
+  <AccordionItem title="Panel B">Panel B</AccordionItem>
+  <AccordionItem title="Panel C">Panel C</AccordionItem>
+</Accordion>
+```
+
+### AccordionItem title
+
+You can use the `title` prop to specify the accordion item's heading. The
+default behavior is to pass in a `string` as the title, however you can also
+pass in a `node`.
+
+_Note: A custom title prop that renders an interactive element is considered an
+accessibility violation. For more information, visit our [reference
+section](#why-is-interactive-content-in-a-heading-considered-an-accessibility-violation) below._
+
+```jsx
+<Accordion align="start">
+  <AccordionItem title={() => <span>Panel A</span>}>Panel A</AccordionItem>
+  <AccordionItem title="Panel B">Panel B</AccordionItem>
+  <AccordionItem title="Panel C">Panel C</AccordionItem>
+</Accordion>
+```
+
+### AccordionSkeleton props
+
+| Prop      | Type                     | Required | Default | Description                                                        |
+| --------- | ------------------------ | -------- | ------- | ------------------------------------------------------------------ |
+| align     | `'start'` &#124; `'end'` | –        | `'end'` | Specify the alignment of the accordion heading title and chevron   |
+| className | `string`                 | –        | –       | Provide an optional className to be applied to the container node  |
+| count     | `boolean`                | –        | `4`     | Specify the number of items to render                              |
+| open      | `boolean`                | –        | `true`  | Specify whether the skeleton should display the first item as open |
+
+Additional props passed into `AccordionSkeleton` will be forwarded along to the
+underlying skeleton container.
+
+### AccordionSkeleton className
+
+The `className` prop passed into `AccordionSkeleton` will be forwarded along to
+the underlying skeleton container. This is useful for specifying a custom class
+name for layout.
+
+```jsx
+<AccordionSkeleton className="custom-class" open count={3} />
+```
+
+## References
+
+<h3 id="why-is-interactive-content-in-a-heading-considered-an-accessibility-violation">
+  Why is interactive content in a heading considered an accessibility violation?
+</h3>
+
+When using the `title` prop from `Accordion`, it is possible to render arbitrary
+markup within the accordion header. The accordion header itself is rendered as a
+`<button>` and is considered an interactive element.
+
+If you render an interactive element inside this header, then it becomes
+nested inside the `<button>`. Common examples of this are buttons or links.
+Rendering interactive content inside the accordion heading is not reachable
+via a keyboard or screen reader.
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions, and leaving any other comments on [GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).

src/pages/components/breadcrumb/code.mdx

@@ -6,7 +6,7 @@ tabs: ["Usage", "Style", "Code", "Accessibility"]
 
 <PageDescription>
 
-How to build a breadcrumb using React. For code usage with other frameworks, please follow the links in the [live demo](https://www.carbondesignsystem.com/components/breadcrumb/usage#live-demo).
+How to build a breadcrumb using React. For code usage with other frameworks, please follow the links in the live demo on the usage tab.
 
 </PageDescription>
 

src/pages/components/checkbox/usage.mdx

@@ -237,6 +237,30 @@ Use the indeterminate state when the checkbox contains a sublist of selections,
 </Column>
 </Row>
 
+### Nesting
+
+Checkboxes can be nested when a parent and child relationship is needed. Users can either select an entire set of options or only a subset.
+
+Checking the parent checkbox automatically selects all of the nested children checkboxes. Unchecking the parent checkbox automatically deselects all of the children checkboxes.
+
+<Row>
+<Column colLg={8}>
+
+![Checking and unchecking the parent checkbox.](images/checkbox-usage-9a.png)
+
+</Column>
+</Row>
+
+Checking a child checkbox, if at least one other child checkbox is not selected, automatically puts the parent checkbox into the indeterminate state. Unchecking a child checkbox, when all other children checkboxes remain selected, switches the parent checkbox from the default checked state to the indeterminate state.
+
+<Row>
+<Column colLg={8}>
+
+![Checking and unchecking a child checkbox.](images/checkbox-usage-9b.png)
+
+</Column>
+</Row>
+
 ### Interactions
 
 #### Mouse