feat: update to Carbon 10.10.0 release (#417)

* feat: upgrade to carbon 10.10.0 release

* fix(filter-panel-search): update tests to use getplaceholdertext

* test(external-link): fix path to component

* test(snapshots): update snapshots to reflect carbon updates

* docs(progress-indicator): update story to reflect new vertical alignment prop

* chore: update yarn lock files

docs/themes/themes.md

@@ -17,6 +17,7 @@
 | `text-03`            | `cool-gray-40`    | `gray-60`         |
 | `text-04`            | `white-0`         | `white-0`         |
 | `text-05`            | `cool-gray-60`    | `gray-50`         |
+| `text-error`         | `red-60`          | `red-40`          |
 | `icon-01`            | `cool-gray-100`   | `gray-10`         |
 | `icon-02`            | `cool-gray-70`    | `gray-30`         |
 | `icon-03`            | `white-0`         | `white-0`         |
@@ -50,7 +51,7 @@
 | `selected-ui`        | `cool-gray-20`    | `gray-80`         |
 | `inverse-hover-ui`   | `#464c51`         | `#e5e5e5`         |
 | `hover-selected-ui`  | `#c4c9d1`         | `#4c4c4c`         |
-| `hover-danger`       | `#ba1b23`         | `#ba1b23`         |
+| `hover-danger`       | `#b81921`         | `#b81921`         |
 | `active-danger`      | `red-80`          | `red-80`          |
 | `hover-row`          | `#e0e4ea`         | `#353535`         |
 | `visited-link`       | `purple-60`       | `purple-40`       |

package.json

@@ -44,16 +44,16 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.4.3",
-    "@carbon/colors": "10.7.2",
-    "@carbon/grid": "10.8.2",
-    "@carbon/icons-react": "10.8.2",
+    "@carbon/colors": "10.8.0",
+    "@carbon/grid": "10.9.0",
+    "@carbon/icons-react": "10.9.0",
     "@carbon/import-once": "10.3.0",
-    "@carbon/layout": "10.7.3",
-    "@carbon/motion": "10.5.2",
-    "@carbon/themes": "10.9.3",
-    "@carbon/type": "10.8.3",
-    "carbon-components": "10.9.3",
-    "carbon-components-react": "7.9.3",
+    "@carbon/layout": "10.8.0",
+    "@carbon/motion": "10.6.0",
+    "@carbon/themes": "10.10.0",
+    "@carbon/type": "10.9.0",
+    "carbon-components": "10.10.0",
+    "carbon-components-react": "7.10.0",
     "classnames": "^2.2.5",
     "downshift": "^1.31.14",
     "export-to-csv": "^0.2.1",

src/components/DataTable/DataTablePagination/__tests__/__snapshots__/DataTablePagination.spec.js.snap

@@ -469,7 +469,7 @@ exports[`DataTablePagination Rendering renders the HTML of the node's subtree 1`
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M19 23L11 16 19 9 19 23z"
+            d="M20 24L10 16 20 8z"
           />
         </svg>
       </button>
@@ -489,7 +489,7 @@ exports[`DataTablePagination Rendering renders the HTML of the node's subtree 1`
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M13 9L21 16 13 23 13 9z"
+            d="M12 8L22 16 12 24z"
           />
         </svg>
       </button>

src/components/ExternalLink/__tests__/ExternalLink.spec.js

@@ -6,7 +6,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { ExternalLink } from '../../../..';
+import { ExternalLink } from '../../..';
 
 describe('ExternalLink', () => {
   test('should have no Axe or DAP violations', async () => {

src/components/FilterPanel/FilterPanelSearch/__tests__/FilterSearch.spec.js

@@ -29,24 +29,30 @@ describe('FilterPanelSearch', () => {
   });
 
   test('renders results content when keyboard focus is added', () => {
-    const { getByTestId, getByLabelText } = render(
-      <FilterPanelSearch labelText="search label">
+    const { getByTestId, getByPlaceholderText } = render(
+      <FilterPanelSearch
+        labelText="search label"
+        placeHolderText="search placeholder"
+      >
         <div data-testid="result-content" />
       </FilterPanelSearch>
     );
 
-    getByLabelText('search label').focus();
+    getByPlaceholderText('search placeholder').focus();
     expect(getByTestId('result-content')).toBeVisible();
   });
 
   test('does not render results content when keyboard focus is removed', async () => {
-    const { queryByTestId, getByLabelText } = render(
-      <FilterPanelSearch labelText="search label">
+    const { queryByTestId, getByPlaceholderText } = render(
+      <FilterPanelSearch
+        labelText="search label"
+        placeHolderText="search placeholder"
+      >
         <div data-testid="result-content" />
       </FilterPanelSearch>
     );
 
-    const searchInput = getByLabelText('search label');
+    const searchInput = getByPlaceholderText('search placeholder');
     searchInput.focus();
     searchInput.blur();
 
@@ -57,15 +63,18 @@ describe('FilterPanelSearch', () => {
 
   test('does not remove results content when keyboard focus transfers to results', () => {
     jest.useFakeTimers();
-    const { getByTestId, getByLabelText, container } = render(
-      <FilterPanelSearch labelText="search label">
+    const { getByTestId, getByPlaceholderText, container } = render(
+      <FilterPanelSearch
+        labelText="search label"
+        placeHolderText="search placeholder"
+      >
         <div data-testid="result-content">
           <Checkbox labelText="checkbox" id="checkbox" />
         </div>
       </FilterPanelSearch>
     );
 
-    const searchInput = getByLabelText('search label');
+    const searchInput = getByPlaceholderText('search placeholder');
     searchInput.focus();
     container.querySelector('#checkbox').focus();
 
@@ -78,10 +87,14 @@ describe('FilterPanelSearch', () => {
 
   test('invokes onChange when the user types a value into the search', () => {
     const onChangeMock = jest.fn();
-    const { getByLabelText } = render(
-      <FilterPanelSearch labelText="search label" onChange={onChangeMock} />
+    const { getByPlaceholderText } = render(
+      <FilterPanelSearch
+        labelText="search label"
+        placeHolderText="search placeholder"
+        onChange={onChangeMock}
+      />
     );
-    userEvent.type(getByLabelText(/search label/i), 'search term');
+    userEvent.type(getByPlaceholderText(/search placeholder/i), 'search term');
     expect(onChangeMock).toHaveBeenCalledTimes('search term'.length);
   });
 });

src/components/Icon/__tests__/__snapshots__/Icon.spec.js.snap

@@ -36,12 +36,12 @@ exports[`Icon Rendering renders the HTML of the node's subtree 1`] = `
   height="16"
   preserveAspectRatio="xMidYMid meet"
   style="will-change:transform"
-  viewBox="0 0 16 16"
+  viewBox="0 0 32 32"
   width="16"
   xmlns="http://www.w3.org/2000/svg"
 >
   <path
-    d="M9 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"
+    d="M17 15L17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z"
   />
 </svg>
 `;

src/components/ProgressIndicator/ProgressIndicator.stories.js

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { number } from '@storybook/addon-knobs';
+import { boolean, number, text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
 import { settings } from 'carbon-components';
@@ -26,10 +26,11 @@ storiesOf(components('ProgressIndicator'), module)
     'Default',
     () => (
       <ProgressIndicator
+        vertical={boolean('Vertical', false)}
         currentIndex={number('Current progress (currentIndex)', 1)}
       >
         <ProgressStep
-          label="First step"
+          label={text('Label', 'First step')}
           description="Step 1: Getting started with Carbon Design System"
           secondaryLabel="Optional label"
         />
@@ -84,10 +85,10 @@ storiesOf(components('ProgressIndicator'), module)
     {
       info: {
         text: `
-            For React usage, ProgressIndicator holds the currentIndex state to indicate which ProgressStep is the current step. The ProgressIndicator component should always be used with ProgressStep components as its children. Changing currentIndex prop will automatically set the ProgressStep components props (complete, incomplete, current).
-            For general usage, Progress Indicators display steps in a process. It should indicate when steps have been complete, the active step,
-            and the steps to come.
-          `,
+          For React usage, ProgressIndicator holds the currentIndex state to indicate which ProgressStep is the current step. The ProgressIndicator component should always be used with ProgressStep components as its children. Changing currentIndex prop will automatically set the ProgressStep components props (complete, incomplete, current).
+          For general usage, Progress Indicators display steps in a process. It should indicate when steps have been complete, the active step,
+          and the steps to come.
+        `,
       },
     }
   )
@@ -131,15 +132,15 @@ storiesOf(components('ProgressIndicator'), module)
     {
       info: {
         text: `
-           If you register an onChange handler, the Progress Indicator will become interactive.  Your parent component should update the currentIndex prop within the onChange handler.
-          `,
+         If you register an onChange handler, the Progress Indicator will become interactive.  Your parent component should update the currentIndex prop within the onChange handler.
+        `,
       },
     }
   )
   .add('skeleton', () => <ProgressIndicatorSkeleton />, {
     info: {
       text: `
-            Placeholder skeleton state to use when content is loading.
-        `,
+          Placeholder skeleton state to use when content is loading.
+      `,
     },
   });

src/components/StepIndicator/__tests__/__snapshots__/StepIndicator.spec.js.snap

@@ -33,18 +33,31 @@ exports[`StepIndicator render renders if \`currentIndex\` is null 1`] = `
   <li
     class="bx--progress-step bx--progress-step--incomplete security--step"
   >
-    <div
+    <button
       class="bx--progress-step-button bx--progress-step-button--unclickable"
-      role="button"
       tabindex="-1"
     >
-      <svg>
+      <span
+        class="bx--assistive-text"
+      >
+        Incomplete
+      </span>
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        height="16"
+        preserveAspectRatio="xMidYMid meet"
+        style="will-change:transform"
+        viewBox="0 0 32 32"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"
+        />
         <title>
           Step 2: Getting started with Carbon Design System
         </title>
-        <path
-          d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"
-        />
       </svg>
       <p
         class="bx--progress-label"
@@ -54,7 +67,7 @@ exports[`StepIndicator render renders if \`currentIndex\` is null 1`] = `
       <span
         class="bx--progress-line"
       />
-    </div>
+    </button>
   </li>
 </ul>
 `;
@@ -66,26 +79,30 @@ exports[`StepIndicator render renders the HTML of the node's subtree 1`] = `
   <li
     class="bx--progress-step bx--progress-step--complete security--step"
   >
-    <div
+    <button
       class="bx--progress-step-button bx--progress-step-button--unclickable"
-      role="button"
       tabindex="-1"
     >
+      <span
+        class="bx--assistive-text"
+      >
+        Complete
+      </span>
       <svg
         aria-hidden="true"
         focusable="false"
         height="16"
         preserveAspectRatio="xMidYMid meet"
         style="will-change:transform"
-        viewBox="0 0 16 16"
+        viewBox="0 0 32 32"
         width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M8,1C4.1,1,1,4.1,1,8s3.1,7,7,7s7-3.1,7-7S11.9,1,8,1z M8,14c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S11.3,14,8,14z"
+          d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"
         />
         <path
-          d="M7 10.8L4.5 8.3 5.3 7.5 7 9.2 10.7 5.5 11.5 6.3z"
+          d="M14 21.5L9 16.54 10.59 14.97 14 18.35 21.41 11 23 12.58 14 21.5z"
         />
         <title>
           Step 1: Getting started with Carbon Design System
@@ -99,19 +116,35 @@ exports[`StepIndicator render renders the HTML of the node's subtree 1`] = `
       <span
         class="bx--progress-line"
       />
-    </div>
+    </button>
   </li>
   <li
     class="bx--progress-step bx--progress-step--current security--step"
   >
-    <div
+    <button
       class="bx--progress-step-button bx--progress-step-button--unclickable"
-      role="button"
       tabindex="-1"
     >
-      <svg>
+      <span
+        class="bx--assistive-text"
+      >
+        Current
+      </span>
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        height="16"
+        preserveAspectRatio="xMidYMid meet"
+        style="will-change:transform"
+        viewBox="0 0 32 32"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"
+        />
         <path
-          d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0"
+          d="M16,10a6,6,0,1,0,6,6A6,6,0,0,0,16,10Z"
         />
         <title>
           Step 2: Getting started with Carbon Design System
@@ -125,7 +158,7 @@ exports[`StepIndicator render renders the HTML of the node's subtree 1`] = `
       <span
         class="bx--progress-line"
       />
-    </div>
+    </button>
   </li>
 </ul>
 `;