chore(tile): refactor to functional component (#9721)

* chore(tile): refactor to functional component * fix(tile): build errors * fix(tile): working with storybook * fix(tile): added prefixes * feat(tile): refactoring-feature-flags * feat(tile): removed custom styling * Update packages/react/.storybook/preview.js Co-authored-by: Josh Black <[email protected]> * Update packages/react/src/components/Tile/next/Tile.js Co-authored-by: Josh Black <[email protected]> * Update packages/react/src/components/Tile/next/Tile.js Co-authored-by: Josh Black <[email protected]> * Update packages/react/src/components/Tile/next/Tile.js Co-authored-by: Josh Black <[email protected]> * Update packages/react/src/components/Tile/next/Tile.js Co-authored-by: Josh Black <[email protected]> * Update packages/react/src/components/Tile/next/Tile.js Co-authored-by: Josh Black <[email protected]> * fix(tile): removed useEffect hook * fix(tile): alphabetized things * fix(tile): syntax * fix(Tile): added deprecation warning for the light prop * feat(tile): added tests * feat(tile): added rtl * feat(tile): removed debug * feat(tile): hammering on testing * feat(tile): added more tests * feat(tile): hammering on tests * feat(tile): fixed an aria-label Co-authored-by: Josh Black <[email protected]>
carbon-design-system · Oct 13, 2021 · 83f2658 · 83f2658
1 parent dd1d037
commit 83f2658
Show file tree

Hide file tree

Showing 4 changed files with 873 additions and 1 deletion.
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -34,6 +34,7 @@
     "postinstall": "carbon-telemetry collect --install",
     "prepublish": "yarn build",
     "start": "yarn storybook",
+    "start:v11": "CARBON_ENABLE_V11_RELEASE=true yarn storybook",
     "storybook": "rimraf node_modules/.cache/storybook && start-storybook -p 9000 -s ./.storybook/assets",
     "snapshot": "build-storybook && percy-storybook --widths=320,1280",
     "test:e2e": "cypress run-ct --config video=false,screenshotOnRunFailure=false"

diff --git a/packages/react/src/components/Tile/index.js b/packages/react/src/components/Tile/index.js
@@ -5,4 +5,45 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export * from './Tile';
+import * as FeatureFlags from '@carbon/feature-flags';
+import {
+  Tile as TileNext,
+  ClickableTile as ClickableTileNext,
+  SelectableTile as SelectableTileNext,
+  TileAboveTheFoldContent as TileAboveTheFoldContentNext,
+  TileBelowTheFoldContent as TileBelowTheFoldContentNext,
+} from './next/Tile';
+import {
+  Tile as TileClassic,
+  ClickableTile as ClickableTileClassic,
+  SelectableTile as SelectableTileClassic,
+  ExpandableTile,
+  TileAboveTheFoldContent as TileAboveTheFoldContentClassic,
+  TileBelowTheFoldContent as TileBelowTheFoldContentClassic,
+} from './Tile';
+
+export const Tile = FeatureFlags.enabled('enable-v11-release')
+  ? TileNext
+  : TileClassic;
+
+export const ClickableTile = FeatureFlags.enabled('enable-v11-release')
+  ? ClickableTileNext
+  : ClickableTileClassic;
+
+export const SelectableTile = FeatureFlags.enabled('enable-v11-release')
+  ? SelectableTileNext
+  : SelectableTileClassic;
+
+export { ExpandableTile };
+
+export const TileAboveTheFoldContent = FeatureFlags.enabled(
+  'enable-v11-release'
+)
+  ? TileAboveTheFoldContentNext
+  : TileAboveTheFoldContentClassic;
+
+export const TileBelowTheFoldContent = FeatureFlags.enabled(
+  'enable-v11-release'
+)
+  ? TileBelowTheFoldContentNext
+  : TileBelowTheFoldContentClassic;
diff --git a/packages/react/src/components/Tile/next/Tile-test.js b/packages/react/src/components/Tile/next/Tile-test.js
@@ -0,0 +1,126 @@
+/**
+ * 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 React from 'react';
+import { Tile, ClickableTile, SelectableTile } from './Tile';
+
+import Link from '../../Link';
+import { render, cleanup, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
+describe('Default', () => {
+  afterEach(cleanup);
+
+  it('adds extra classes that are passed via className', () => {
+    render(
+      <Tile className="🚀">
+        Default tile
+        <br />
+        <br />
+        <Link href="https://www.carbondesignsystem.com">Link</Link>
+      </Tile>
+    );
+
+    expect(screen.getByText('Default tile').classList.contains('🚀')).toBe(
+      true
+    );
+  });
+});
+
+describe('ClickableTile', () => {
+  afterEach(cleanup);
+
+  it('renders with a link', () => {
+    render(
+      <ClickableTile href="https://www.carbondesignsystem.com">
+        Clickable Tile
+      </ClickableTile>
+    );
+    expect(screen.getByRole('link')).toBeInTheDocument();
+  });
+});
+
+describe('Multi Select', () => {
+  afterEach(cleanup);
+
+  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"
+          onClick={onClick}
+          disabled>
+          <span role="img" aria-label="vertical traffic light">
+            🚦
+          </span>
+        </SelectableTile>
+      </div>
+    );
+    const tile = screen.getByText('🚦');
+    userEvent.click(tile);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('should cycle elements in document tab order', () => {
+    render(
+      <div role="group" aria-label="selectable tiles">
+        <SelectableTile
+          data-testid="element"
+          id="tile-1"
+          name="tiles"
+          value="value">
+          tile 1
+        </SelectableTile>
+        <SelectableTile
+          data-testid="element"
+          id="tile-2"
+          name="tiles"
+          value="value">
+          tile 2
+        </SelectableTile>
+        <SelectableTile
+          data-testid="element"
+          id="tile-3"
+          name="tiles"
+          value="value">
+          tile 3
+        </SelectableTile>
+      </div>
+    );
+    const [id1, id2, id3] = screen.getAllByTestId('element');
+    expect(document.body).toHaveFocus();
+
+    userEvent.tab();
+
+    expect(id1).toHaveFocus();
+
+    userEvent.tab();
+
+    expect(id2).toHaveFocus();
+
+    userEvent.tab();
+
+    expect(id3).toHaveFocus();
+
+    userEvent.tab();
+
+    // cycle goes back to the body element
+    expect(document.body).toHaveFocus();
+
+    userEvent.tab();
+
+    expect(id1).toHaveFocus();
+  });
+});
+
+// Todo: Testing for a disabled ClickableTile
+// Todo: Testing for ExpandableTile
+// Todo: Testing for RadioTile