Merge branch 'main' into dependabot/npm_and_yarn/packages/react/examp…

…les/next/qs-6.5.3

packages/react/package.json

@@ -77,7 +77,7 @@
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
-    "@rollup/plugin-typescript": "^9.0.0",
+    "@rollup/plugin-typescript": "^10.0.0",
     "@storybook/addon-a11y": "^6.5.6",
     "@storybook/addon-actions": "^6.5.6",
     "@storybook/addon-docs": "^6.5.6",

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

@@ -11,39 +11,40 @@ import { screen, render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import SecondaryButton from '../SecondaryButton';
 
+const prefix = 'cds';
+
 describe('SecondaryButton', () => {
   describe('Renders as expected', () => {
-    const renderSecondaryButton = (props) => {
+    it('Renders children as expected', () => {
       render(
-        <SecondaryButton {...props} className="extra-class" size="sm">
+        <SecondaryButton>
           <div className="child">Test</div>
           <div className="child">Test</div>
         </SecondaryButton>
       );
-    };
-
-    it('Renders children as expected', () => {
-      renderSecondaryButton();
       expect(screen.getAllByText('Test').length).toBe(2);
     });
 
     it('Has the expected kind set to "secondary"', () => {
-      renderSecondaryButton();
-      expect(screen.getByRole('button')).toHaveClass('cds--btn--secondary');
+      render(<SecondaryButton />);
+      expect(screen.getByRole('button')).toHaveClass(
+        `${prefix}--btn--secondary`
+      );
     });
 
     it('Should add extra classes that are passed via className', () => {
-      renderSecondaryButton();
+      render(<SecondaryButton className="extra-class" />);
       expect(screen.getByRole('button')).toHaveClass('extra-class');
     });
 
     describe('Renders icon buttons', () => {
       it('should have the appropriate icon', () => {
-        renderSecondaryButton({
-          iconDescription: 'Search',
-          renderIcon: Search,
-        });
-        expect(screen.queryByLabelText('Search')).toHaveClass('cds--btn__icon');
+        render(
+          <SecondaryButton iconDescription={'Search'} renderIcon={Search} />
+        );
+        expect(screen.queryByLabelText('Search')).toHaveClass(
+          `${prefix}--btn__icon`
+        );
       });
     });
   });

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

@@ -18,67 +18,64 @@ import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 import Link from '../Link';
 
+const prefix = 'cds';
+
 describe('Tile', () => {
   describe('renders as expected - Component API', () => {
-    const renderTile = (props) =>
+    it('should spread extra props onto outermost element', () => {
+      render(<Tile carbon-name="test">Default tile</Tile>);
+      expect(screen.getByText('Default tile')).toHaveAttribute('carbon-name');
+    });
+
+    it('should render children as expected', () => {
       render(
-        <Tile data-testid="test-id" {...props}>
+        <Tile data-testid="test-id">
           Default tile
           <br data-testid="br-test-id" />
           <br data-testid="br-test-id" />
           <Link href="https://www.carbondesignsystem.com">Link</Link>
         </Tile>
       );
-
-    it('should spread extra props onto outermost element', () => {
-      renderTile({ 'carbon-name': 'test' });
-      expect(screen.getByText('Default tile')).toHaveAttribute('carbon-name');
-    });
-
-    it('should render children as expected', () => {
-      renderTile({ 'carbon-name': 'test' });
       expect(screen.getByText('Default tile')).toBeTruthy();
       expect(screen.getByText('Link')).toBeTruthy();
       expect(screen.getAllByTestId('br-test-id').length).toEqual(2);
     });
 
     it('should support a custom `className` prop on the outermost element', () => {
-      renderTile({ className: 'custom-tile-class' });
+      render(<Tile className="custom-tile-class">Default tile</Tile>);
       expect(screen.getByText('Default tile')).toHaveClass('custom-tile-class');
     });
   });
 
   describe('ClickableTile', () => {
-    const renderClickableTile = () =>
+    it('renders with a link', () => {
       render(
         <ClickableTile href="https://www.carbondesignsystem.com">
           Clickable Tile
         </ClickableTile>
       );
-
-    it('renders with a link', () => {
-      renderClickableTile();
       expect(screen.getByRole('link')).toBeInTheDocument();
     });
   });
 
   describe('Multi Select', () => {
-    const renderMultiSelectTile = (props) =>
+    it('does not invoke the click handler if SelectableTile is disabled', () => {
+      const onClick = jest.fn();
       render(
         <div role="group" aria-label="selectable tiles">
-          <SelectableTile id="tile-1" name="tiles" value="value" {...props}>
+          <SelectableTile
+            disabled
+            id="tile-1"
+            name="tiles"
+            onClick={onClick}
+            value="value">
             <span role="img" aria-label="vertical traffic light">
               🚦
             </span>
           </SelectableTile>
         </div>
       );
-
-    it('does not invoke the click handler if SelectableTile is disabled', () => {
-      const onClick = jest.fn();
-      renderMultiSelectTile({ disabled: true, onClick });
-      const tile = screen.getByText('🚦');
-      userEvent.click(tile);
+      userEvent.click(screen.getByText('🚦'));
       expect(onClick).not.toHaveBeenCalled();
     });
 
@@ -135,9 +132,10 @@ describe('Tile', () => {
   });
 
   describe('ExpandableTile', () => {
-    const renderExpandableTile = (props) => {
+    it('renders initial children as expected', () => {
+      const onClick = jest.fn();
       render(
-        <ExpandableTile className="extra-class" {...props}>
+        <ExpandableTile onClick={onClick}>
           <TileAboveTheFoldContent>
             <div>TestAbove</div>
           </TileAboveTheFoldContent>
@@ -146,35 +144,52 @@ describe('Tile', () => {
           </TileBelowTheFoldContent>
         </ExpandableTile>
       );
-    };
-
-    it('renders initial children as expected', () => {
-      const onClick = jest.fn();
-      renderExpandableTile({ onClick });
       expect(screen.getByText('TestAbove')).toBeTruthy();
       expect(screen.getByText('TestBelow')).toBeTruthy();
     });
 
     it('has the expected classes', () => {
-      renderExpandableTile();
-      expect(screen.getByRole('button')).toHaveClass(`cds--tile--expandable`);
+      render(<ExpandableTile className="extra-class" />);
+      expect(screen.getByRole('button')).toHaveClass(
+        `${prefix}--tile--expandable`
+      );
       expect(screen.getByRole('button')).toHaveClass(`extra-class`);
     });
 
     it('toggles the expandable class on click', () => {
       const onClick = jest.fn();
-      renderExpandableTile({ onClick });
+      render(
+        <ExpandableTile onClick={onClick}>
+          <TileAboveTheFoldContent>
+            <div>TestAbove</div>
+          </TileAboveTheFoldContent>
+          <TileBelowTheFoldContent>
+            <div>TestBelow</div>
+          </TileBelowTheFoldContent>
+        </ExpandableTile>
+      );
       expect(screen.getByRole('button')).not.toHaveClass(
-        `cds--tile--is-expanded`
+        `${prefix}--tile--is-expanded`
       );
       const tile = screen.getByText('TestAbove');
       userEvent.click(tile);
       expect(onClick).toHaveBeenCalled();
-      expect(screen.getByRole('button')).toHaveClass(`cds--tile--is-expanded`);
+      expect(screen.getByRole('button')).toHaveClass(
+        `${prefix}--tile--is-expanded`
+      );
     });
 
     it('contains the default tooltip for the button', async () => {
-      renderExpandableTile();
+      render(
+        <ExpandableTile>
+          <TileAboveTheFoldContent>
+            <div>TestAbove</div>
+          </TileAboveTheFoldContent>
+          <TileBelowTheFoldContent>
+            <div>TestBelow</div>
+          </TileBelowTheFoldContent>
+        </ExpandableTile>
+      );
       const expandableTile = screen.getByRole('button');
       expect(expandableTile.getAttribute('title')).toEqual(
         'Interact to expand Tile'
@@ -186,10 +201,18 @@ describe('Tile', () => {
     });
 
     it('displays the custom tooltips for the button depending on state', () => {
-      renderExpandableTile({
-        tileCollapsedIconText: 'Click To Expand',
-        tileExpandedIconText: 'Click To Collapse',
-      });
+      render(
+        <ExpandableTile
+          tileCollapsedIconText={'Click To Expand'}
+          tileExpandedIconText={'Click To Collapse'}>
+          <TileAboveTheFoldContent>
+            <div>TestAbove</div>
+          </TileAboveTheFoldContent>
+          <TileBelowTheFoldContent>
+            <div>TestBelow</div>
+          </TileBelowTheFoldContent>
+        </ExpandableTile>
+      );
 
       const expandableTile = screen.getByRole('button');
       expect(expandableTile.getAttribute('title')).toEqual('Click To Expand');
@@ -198,14 +221,35 @@ describe('Tile', () => {
     });
 
     it('supports setting expanded prop to true', () => {
-      renderExpandableTile({ expanded: true });
-      expect(screen.getByRole('button')).toHaveClass('cds--tile--is-expanded');
+      render(
+        <ExpandableTile expanded>
+          <TileAboveTheFoldContent>
+            <div>TestAbove</div>
+          </TileAboveTheFoldContent>
+          <TileBelowTheFoldContent>
+            <div>TestBelow</div>
+          </TileBelowTheFoldContent>
+        </ExpandableTile>
+      );
+
+      expect(screen.getByRole('button')).toHaveClass(
+        `${prefix}--tile--is-expanded`
+      );
     });
 
     it('supports setting expanded prop to false', () => {
-      renderExpandableTile({ expanded: false });
+      render(
+        <ExpandableTile expanded={false}>
+          <TileAboveTheFoldContent>
+            <div>TestAbove</div>
+          </TileAboveTheFoldContent>
+          <TileBelowTheFoldContent>
+            <div>TestBelow</div>
+          </TileBelowTheFoldContent>
+        </ExpandableTile>
+      );
       expect(screen.getByRole('button')).not.toHaveClass(
-        'cds--tile--is-expanded'
+        `${prefix}--tile--is-expanded`
       );
     });
   });

yarn.lock

@@ -2057,7 +2057,7 @@ __metadata:
     "@rollup/plugin-babel": ^6.0.0
     "@rollup/plugin-commonjs": ^21.0.0
     "@rollup/plugin-node-resolve": ^15.0.0
-    "@rollup/plugin-typescript": ^9.0.0
+    "@rollup/plugin-typescript": ^10.0.0
     "@storybook/addon-a11y": ^6.5.6
     "@storybook/addon-actions": ^6.5.6
     "@storybook/addon-docs": ^6.5.6
@@ -5142,9 +5142,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/plugin-typescript@npm:^9.0.0":
-  version: 9.0.2
-  resolution: "@rollup/plugin-typescript@npm:9.0.2"
+"@rollup/plugin-typescript@npm:^10.0.0":
+  version: 10.0.1
+  resolution: "@rollup/plugin-typescript@npm:10.0.1"
   dependencies:
     "@rollup/pluginutils": ^5.0.1
     resolve: ^1.22.1
@@ -5157,7 +5157,7 @@ __metadata:
       optional: true
     tslib:
       optional: true
-  checksum: 0b3a15e7402a8cf46a491003a0bfe6bf50294939133cf898c1dee0b9f1f8f4742242e81abd15effd8de2e9f3fe5fd81d01a03020341e1d3d0b7f4c6be21d989f
+  checksum: d3e85674b5ff56c4376bbd79fd2baced3e988b7110d60b1f818eb344721f5605eaa3b56a1668631d210399db7188a7cc4790bb423ad9e56144d015fd1591ccc3
   languageName: node
   linkType: hard