Merge branch 'main' into revert-12094-toggle-fix

packages/react/examples/create-react-app/yarn.lock

@@ -6014,8 +6014,8 @@ qs@6.7.0:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
 
 qs@~6.4.0:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.1.tgz#2bad97710a5b661c366b378b1e3a44a592ff45e6"
 
 qs@~6.5.1:
   version "6.5.1"

packages/react/examples/next/yarn.lock

@@ -4374,9 +4374,9 @@ punycode@^2.1.0:
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
 qs@~6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
-  integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad"
+  integrity sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==
 
 querystring-es3@^0.2.0:
   version "0.2.1"

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`
       );
     });
   });