Merge branch 'main' into fix/add-index-scss-files

.all-contributorsrc

@@ -774,6 +774,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "adamalston",
+      "name": "Adam Alston",
+      "avatar_url": "https://avatars.githubusercontent.com/u/18297826?v=4",
+      "profile": "https://github.com/adamalston",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "commitConvention": "none"

.yarnrc

@@ -1,4 +1,4 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
 
-yarn-path ".yarn/releases/yarn-3.0.0-rc.1.cjs"
+yarn-path ".yarn/releases/yarn-3.0.0.cjs"

.yarnrc.yml

@@ -6,4 +6,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
     spec: "@yarnpkg/plugin-workspace-tools"
 
-yarnPath: .yarn/releases/yarn-3.0.0-rc.1.cjs
+yarnPath: .yarn/releases/yarn-3.0.0.cjs

packages/react/src/components/Accordion/__tests__/Accordion-test.e2e.js

@@ -10,15 +10,19 @@ import 'carbon-components/scss/components/accordion/_accordion.scss';
 import React from 'react';
 import { mount } from '@cypress/react';
 import { default as Accordion, AccordionItem } from '..';
+import AccordionSkeleton from '../Accordion.Skeleton';
 
 describe('Accordion', () => {
   beforeEach(() => {
     mount(
-      <Accordion>
-        <AccordionItem title="Section 1">Panel 1</AccordionItem>
-        <AccordionItem title="Section 2">Panel 2</AccordionItem>
-        <AccordionItem title="Section 3">Panel 3</AccordionItem>
-      </Accordion>
+      <>
+        <Accordion>
+          <AccordionItem title="Section 1">Panel 1</AccordionItem>
+          <AccordionItem title="Section 2">Panel 2</AccordionItem>
+          <AccordionItem title="Section 3">Panel 3</AccordionItem>
+        </Accordion>
+        <AccordionSkeleton count={3} />
+      </>
     );
   });
 

packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.e2e.js

@@ -10,17 +10,21 @@ import 'carbon-components/scss/components/breadcrumb/_breadcrumb.scss';
 import React from 'react';
 import { mount } from '@cypress/react';
 import { Breadcrumb, BreadcrumbItem } from '../index';
+import { BreadcrumbSkeleton } from '../';
 
 describe('Breadcrumb', () => {
   beforeEach(() => {
     mount(
-      <Breadcrumb>
-        <BreadcrumbItem>
-          <a href="/#">Breadcrumb 1</a>
-        </BreadcrumbItem>
-        <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
-        <BreadcrumbItem href="#">Breadcrumb 3</BreadcrumbItem>
-      </Breadcrumb>
+      <>
+        <Breadcrumb>
+          <BreadcrumbItem>
+            <a href="/#">Breadcrumb 1</a>
+          </BreadcrumbItem>
+          <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
+          <BreadcrumbItem href="#">Breadcrumb 3</BreadcrumbItem>
+        </Breadcrumb>
+        <BreadcrumbSkeleton />
+      </>
     );
   });
 

packages/react/src/components/Breadcrumb/index.js

@@ -11,5 +11,5 @@ import BreadcrumbSkeleton from './Breadcrumb.Skeleton';
 
 export { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton };
 
-// Maintain default export as Breadcrumb for backwards-compatability
+// Maintain default export as Breadcrumb for backwards-compatibility
 export default Breadcrumb;

packages/react/src/components/Button/Button-test.js

@@ -304,7 +304,7 @@ describe('DangerButton', () => {
 });
 
 describe('danger--primaryButton', () => {
-  describe('Renders as exptected', () => {
+  describe('Renders as expected', () => {
     const wrapper = shallow(
       <Button kind="danger--primary" className="extra-class" />
     );
@@ -320,7 +320,7 @@ describe('danger--primaryButton', () => {
 });
 
 describe('TertiaryButton', () => {
-  describe('Renders as exptected', () => {
+  describe('Renders as expected', () => {
     const wrapper = shallow(<Button kind="tertiary" className="extra-class" />);
 
     it('has the expected classes', () => {

packages/react/src/components/Button/button-avt.md

@@ -21,7 +21,7 @@ Each screen reader should be tested when paired with its preferred browser.
 
 ### JAWS on Edge/Chrome
 
-1. {tab} "Main fram, Button, button. To activate press SPACEBAR"
+1. {tab} "Main frame, Button, button. To activate press SPACEBAR"
 
 ### NVDA on Firefox (optional, but recommended)
 

packages/react/src/components/Checkbox/Checkbox-test.e2e.js

@@ -0,0 +1,57 @@
+/**
+ * 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 'carbon-components/scss/components/checkbox/_checkbox.scss';
+
+import React from 'react';
+import { mount } from '@cypress/react';
+import Checkbox from '../Checkbox';
+import CheckboxSkeleton from '../Checkbox/Checkbox.Skeleton';
+
+describe('Checkbox', () => {
+  beforeEach(() => {
+    mount(
+      <fieldset className={`fieldset`}>
+        <legend className={`label`}>Checkbox heading</legend>
+        <Checkbox labelText={`Checkbox label 1`} id="checkbox-label-1" />
+        <Checkbox labelText={`Checkbox label 2`} id="checkbox-label-2" />
+        <CheckboxSkeleton />
+      </fieldset>
+    );
+  });
+
+  it('should render unselected', () => {
+    cy.findByText(/Checkbox label 1/).should('be.visible');
+    cy.findByText(/Checkbox label 2/).should('be.visible');
+
+    // snapshots should always be taken _after_ an assertion that
+    // a element/component should be visible. This is to ensure
+    // the DOM has settled and the element has fully loaded.
+    cy.percySnapshot();
+  });
+
+  it('should be selected and focused on click', () => {
+    // must force the interaction because cypress detects the original
+    // input hidden due to how we style the checkbox
+    cy.findByLabelText('Checkbox label 1').click({ force: true });
+    cy.findByLabelText(/Checkbox label 1/)
+      .should('be.visible')
+      .and('have.focus')
+      .and('be.checked');
+
+    cy.findByLabelText('Checkbox label 2').click({ force: true });
+    cy.findByLabelText(/Checkbox label 2/)
+      .should('be.visible')
+      .and('have.focus')
+      .and('be.checked');
+
+    // snapshots should always be taken _after_ an assertion that
+    // a element/component should be visible. This is to ensure
+    // the DOM has settled and the element has fully loaded.
+    cy.percySnapshot();
+  });
+});

packages/react/src/components/Checkbox/Checkbox.mdx

@@ -83,7 +83,7 @@ input that is being exposed to the user and is a required prop.
 ### Checkbox onChange
 
 You can use the `onChange` prop to pass in a custom function for event handling.
-This prop recieves three arguements: a boolean, the checkbox id, and the dom
+This prop receives three arguments: a boolean, the checkbox id, and the dom
 event.
 
 ```jsx

packages/react/src/components/ComboBox/ComboBox-test.js

@@ -197,7 +197,7 @@ describe('ComboBox', () => {
       expect(findMenuNode(wrapper).length).toBe(1);
     });
 
-    it('should set `inputValue` to an empty string if a falsey-y value is given', () => {
+    it('should set `inputValue` to an empty string if a false-y value is given', () => {
       const wrapper = mount(<ComboBox {...mockProps} />);
       expect(wrapper.find('input').instance().value).toBe('');
     });

packages/react/src/components/ComboBox/ComboBox.js

@@ -447,7 +447,7 @@ ComboBox.propTypes = {
 
   /**
    * Optional function to render items as custom components instead of strings.
-   * Defaults to null and is overriden by a getter
+   * Defaults to null and is overridden by a getter
    */
   itemToElement: PropTypes.func,
 

packages/react/src/components/ComboBox/ComboBox.mdx

@@ -39,10 +39,10 @@ and is typically used when there are a large amount of options to choose from.
 
 ## Disabled
 
-A disabled comobobox is available but should not be used as the sole means of
+A disabled combobox is available but should not be used as the sole means of
 conveying information. For example, if the user must complete a previous form
 input before moving on to the combobox, make sure to make that clear to the user
-via an error state on the previous form element in adition to disabling the next
+via an error state on the previous form element in addition to disabling the next
 element.
 
 <Preview>

packages/react/src/components/ComposedModal/ComposedModal.mdx

@@ -113,11 +113,7 @@ There are four responsive
   <ModalHeader />
   <ModalBody>
     <p className="bx--modal-content__text">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-      cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis
-      quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero
-      in augue mattis, a molestie metus vestibulum. Aliquam placerat felis
-      ultrices lorem condimentum, nec ullamcorper felis porttitor.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor.
     </p>
   </ModalBody>
 </ComposedModal>
@@ -217,17 +213,17 @@ With `<ComposedModal>`, you can control the buttons with the following code.
       kind="secondary"
       onClick={() => { (Run some action...) setOpen(false); }}>
       Another button
-    </Buttton>
+    </Button>
     <Button
       kind="secondary"
       onClick={() => { (Run some action...) setOpen(false); }}>
       Secondary button
-    </Buttton>
+    </Button>
     <Button
       kind="primary"
       onClick={() => { (Run some action...) setOpen(false); }}>
-      Priamry button
-    </Buttton>
+      Primary button
+    </Button>
   </ModalFooter>
 </ComposedModal>
 ```
@@ -240,7 +236,7 @@ clarity to an otherwise repetitive title and body message.
 To use this pattern with `<Modal>`, you can omit the `children` prop.
 
 ```jsx
-const modalHeadding =
+const modalHeading =
   'Are you sure you want to add the "Speech to Text" service ' +
   'to the node-test app?';
 ...
@@ -255,7 +251,7 @@ To use this pattern with `<ComposedModal>`, you can omit `<ModalBody>`.
 
 ```jsx
 <ComposedModal>
-  <ModalHeader label="Modla label">
+  <ModalHeader label="Modal label">
     <h1>
       Are you sure you want to add the "Speech to Text" service to the node-test
       app?

packages/react/src/components/Copy/Copy.js

@@ -80,7 +80,7 @@ export default function Copy({
 
 Copy.propTypes = {
   /**
-   * Pass in content to be rendred in the underlying `<button>`
+   * Pass in content to be rendered in the underlying `<button>`
    */
   children: PropTypes.node,
 

packages/react/src/components/DataTable/TableBatchActions.js

@@ -79,7 +79,7 @@ TableBatchActions.propTypes = {
 
   /**
    * Hook required to listen for when the user initiates a cancel request
-   * through this comopnent
+   * through this component
    */
   onCancel: PropTypes.func.isRequired,
 
@@ -97,7 +97,7 @@ TableBatchActions.propTypes = {
 
   /**
    * Supply a method to translate internal strings with your i18n tool of
-   * choice. Translation keys are avabile on the `translationKeys` field for
+   * choice. Translation keys are available on the `translationKeys` field for
    * this component.
    */
   translateWithId: PropTypes.func,

packages/react/src/components/DataTable/TableExpandHeader.js

@@ -73,7 +73,7 @@ TableExpandHeader.propTypes = {
 
   /**
    * Specify whether this row is expanded or not. This helps coordinate data
-   * attributes so that `TableExpandRow` and `TableExapndedRow` work together
+   * attributes so that `TableExpandRow` and `TableExpandedRow` work together
    */
   isExpanded: requiredIfGivenPropIsTruthy('enableExpando', PropTypes.bool),
 

packages/react/src/components/DataTable/TableExpandRow.js

@@ -78,7 +78,7 @@ TableExpandRow.propTypes = {
 
   /**
    * Specify whether this row is expanded or not. This helps coordinate data
-   * attributes so that `TableExpandRow` and `TableExapndedRow` work together
+   * attributes so that `TableExpandRow` and `TableExpandedRow` work together
    */
   isExpanded: PropTypes.bool.isRequired,
 

packages/react/src/components/DataTable/TableHeader.js

@@ -172,7 +172,7 @@ TableHeader.propTypes = {
 
   /**
    * Supply a method to translate internal strings with your i18n tool of
-   * choice. Translation keys are avabile on the `translationKeys` field for
+   * choice. Translation keys are available on the `translationKeys` field for
    * this component.
    */
   translateWithId: PropTypes.func,

packages/react/src/components/DataTable/TableToolbarSearch.js

@@ -187,7 +187,7 @@ TableToolbarSearch.propTypes = {
   placeholder: PropTypes.string,
 
   /**
-   * Provide an optional className for the overal container of the Search
+   * Provide an optional className for the overall container of the Search
    */
   searchContainerClass: PropTypes.string,
 

packages/react/src/components/DataTable/migrate-to-7.x.md

@@ -23,5 +23,5 @@ import Download16 from '@carbon/icons-react/lib/download/16';
 
 ## `<TableExpandedRow>`
 
-- Now manages it's own TabelCell
+- Now manages it's own TableCell
 - Expects `colSpan` prop to determine width

packages/react/src/components/DataTable/state/sorting.js

@@ -66,7 +66,7 @@ export const getNextSortState = (props, state, { key }) => {
  * @param {object} state.cellsById Lookup object for cells by id
  * @param {Array<string>} state.initialRowOrder Initial row order for the
  * current set of rows
- * @param {string} key The key for the given header we are derving the
+ * @param {string} key The key for the given header we are serving the
  * sorted state for
  * @param {string} sortDirection The sortState that we want to order by
  * @returns {object}

packages/react/src/components/DataTable/tools/filter.js

@@ -6,7 +6,7 @@
  */
 
 /**
- * Default implemention of how we filter rows internally. The idea behind this
+ * Default implementation of how we filter rows internally. The idea behind this
  * implementation is to use the given list of row ids and headers to get the
  * individual cell values for a row. Then, we go through each cell value and see
  * if any of them includes the given inputValue.

packages/react/src/components/DatePicker/DatePicker-test.js

@@ -101,7 +101,7 @@ describe('DatePicker', () => {
       expect(wrapper.props().value).toEqual('11/08/2017');
     });
 
-    it('should not initalize a calendar', () => {
+    it('should not initialize a calendar', () => {
       expect(wrapper.cal).toEqual(undefined);
     });
   });
@@ -127,7 +127,7 @@ describe('DatePicker', () => {
       ).toBe(true);
     });
 
-    it('should initalize a calendar', () => {
+    it('should initialize a calendar', () => {
       expect(wrapper.instance().cal).toBeDefined();
     });
 
@@ -206,7 +206,7 @@ describe('DatePicker', () => {
       ).toBe(true);
     });
 
-    it('should initalize a calendar', () => {
+    it('should initialize a calendar', () => {
       expect(wrapper.instance().cal).toBeDefined();
     });
 

packages/react/src/components/DatePicker/plugins/appendToPlugin.js

@@ -13,7 +13,7 @@
  */
 export default (config) => (fp) => {
   /**
-   * Adjusts the floating meun position after Flatpicker sets it.
+   * Adjusts the floating menu position after Flatpicker sets it.
    */
   const handlePreCalendarPosition = () => {
     Promise.resolve().then(() => {
@@ -43,7 +43,7 @@ export default (config) => (fp) => {
           'Floating menu container must not have `position:static`.'
         );
       }
-      // `2` for negative mergin on calendar dropdown
+      // `2` for negative margin on calendar dropdown
       calendarContainer.style.top = `${refBottom - containerTop + 2}px`;
       calendarContainer.style.left = `${refLeft - containerLeft}px`;
     });