refactor(batch-selection): refactor component to TS

src/components/batch-selection/batch-selection.component.js → src/components/batch-selection/batch-selection.component.tsx

@@ -1,18 +1,31 @@
 import React from "react";
-import PropTypes from "prop-types";
+
 import useLocale from "../../hooks/__internal__/useLocale";
 import {
   StyledBatchSelection,
   StyledSelectionCount,
 } from "./batch-selection.style";
 
-const BatchSelection = ({
+export interface BatchSelectionProps {
+  /** Content to be rendered after selected count */
+  children: React.ReactNode;
+  /** Color of the background, transparent if not defined */
+  colorTheme?: "dark" | "light" | "white" | "transparent";
+  /** If true disables all user interaction */
+  disabled?: boolean;
+  /** Hidden if true */
+  hidden?: boolean;
+  /** Number of selected elements */
+  selectedCount: number;
+}
+
+export const BatchSelection = ({
   disabled,
   children,
-  colorTheme,
+  colorTheme = "transparent",
   selectedCount,
   hidden,
-}) => {
+}: BatchSelectionProps) => {
   const l = useLocale();
 
   return (
@@ -30,21 +43,4 @@ const BatchSelection = ({
   );
 };
 
-BatchSelection.propTypes = {
-  /** Content to be rendered after selected count */
-  children: PropTypes.node.isRequired,
-  /** Number of selected elements */
-  selectedCount: PropTypes.number.isRequired,
-  /** Color of the background, transparent if not defined */
-  colorTheme: PropTypes.oneOf(["dark", "light", "white", "transparent"]),
-  /** If true disables all user interaction */
-  disabled: PropTypes.bool,
-  /** Hidden if true */
-  hidden: PropTypes.bool,
-};
-
-BatchSelection.defaultProps = {
-  colorTheme: "transparent",
-};
-
 export default BatchSelection;

src/components/batch-selection/batch-selection.spec.js → src/components/batch-selection/batch-selection.spec.tsx

@@ -1,20 +1,30 @@
 import React from "react";
-import { mount } from "enzyme";
-import TestRenderer from "react-test-renderer";
+import { mount, ReactWrapper, ShallowWrapper } from "enzyme";
+
+import BatchSelection, { BatchSelectionProps } from ".";
 import { assertStyleMatch } from "../../__spec_helper__/test-utils";
-import BatchSelection from ".";
+
 import Icon from "../icon";
 import IconButton from "../icon-button";
 import StyledIcon from "../icon/icon.style";
 import StyledIconButton from "../icon-button/icon-button.style";
 
-describe("BatchSelection component", () => {
-  let wrapper;
+function renderBatchSelection(
+  props: Omit<BatchSelectionProps, "children">,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  renderer: any = mount
+) {
+  return renderer(
+    <BatchSelection {...props}>
+      <IconButton onAction={() => {}}>
+        <Icon type="edit" />
+      </IconButton>
+    </BatchSelection>
+  );
+}
 
-  it("should render correctly", () => {
-    wrapper = renderBatchSelection({ selectedCount: 3 }, TestRenderer.create);
-    expect(wrapper).toMatchSnapshot();
-  });
+describe("BatchSelection component", () => {
+  let wrapper: ReactWrapper | ShallowWrapper;
 
   describe('when the colorTheme is "dark"', () => {
     beforeEach(() => {
@@ -120,13 +130,3 @@ describe("BatchSelection component", () => {
     });
   });
 });
-
-function renderBatchSelection(props = {}, renderer = mount) {
-  return renderer(
-    <BatchSelection {...props}>
-      <IconButton onAction={() => {}}>
-        <Icon type="edit" />
-      </IconButton>
-    </BatchSelection>
-  );
-}

src/components/batch-selection/batch-selection.style.js → src/components/batch-selection/batch-selection.style.ts

@@ -1,8 +1,12 @@
 import styled, { css } from "styled-components";
+
 import StyledIconButton from "../icon-button/icon-button.style";
 import StyledIcon from "../icon/icon.style";
+import { BatchSelectionProps } from ".";
 
-const StyledBatchSelection = styled.div`
+const StyledBatchSelection = styled.div<
+  Pick<BatchSelectionProps, "disabled" | "colorTheme" | "hidden">
+>`
   ${({ disabled, colorTheme, hidden }) => css`
     align-items: center;
     display: inline-flex;

src/components/batch-selection/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./batch-selection.component";
+export type { BatchSelectionProps } from "./batch-selection.component";