@onewelcome/react-lib-components 1.3.0 → 1.4.0

package/src/Skeleton/Skeleton.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
 import classes from "./Skeleton.module.scss";
 
 export interface Props extends Omit<ComponentPropsWithRef<"div">, "children"> {
@@ -23,23 +23,26 @@ export interface Props extends Omit<ComponentPropsWithRef<"div">, "children"> {
   width?: number | string;
 }
 
-export const Skeleton = React.forwardRef<HTMLDivElement, Props>(
-  ({ variant = "text", height, width, className, style, ...rest }: Props, ref) => {
-    const classNames = [classes["skeleton"]];
-    !height && classNames.push(classes["no-height"]);
-    variant === "text" && classNames.push(classes["text"]);
-    variant === "circular" && classNames.push(classes["circular"]);
-    className && classNames.push(className);
+const SkeletonComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { variant = "text", height, width, className, style, ...rest }: Props,
+  ref
+) => {
+  const classNames = [classes["skeleton"]];
+  !height && classNames.push(classes["no-height"]);
+  variant === "text" && classNames.push(classes["text"]);
+  variant === "circular" && classNames.push(classes["circular"]);
+  className && classNames.push(className);
 
-    return (
-      <span
-        {...rest}
-        aria-busy="true"
-        aria-hidden="true"
-        ref={ref}
-        style={{ ...style, width, height }}
-        className={classNames.join(" ")}
-      ></span>
-    );
-  }
-);
+  return (
+    <span
+      {...rest}
+      aria-busy="true"
+      aria-hidden="true"
+      ref={ref}
+      style={{ ...style, width, height }}
+      className={classNames.join(" ")}
+    ></span>
+  );
+};
+
+export const Skeleton = React.forwardRef(SkeletonComponent);

package/src/StatusIndicator/StatusIndicator.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, ReactNode } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactNode } from "react";
 import { Typography, Props as TypographyProps } from "../Typography/Typography";
 import classes from "./StatusIndicator.module.scss";
 
@@ -25,17 +25,20 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   typographyProps?: TypographyProps;
 }
 
-export const StatusIndicator = React.forwardRef<HTMLDivElement, Props>(
-  ({ children, status, badgeProps, typographyProps, ...rest }: Props, ref) => {
-    return (
-      <div {...rest} className={classes["status-indicator"]} ref={ref}>
-        <div
-          className={`${classes["status-badge"]} ${classes[status]} ${badgeProps?.className ?? ""}`}
-        />
-        <Typography {...typographyProps} spacing={{ margin: "0" }} variant="body" tag="div">
-          {typographyProps?.children || children}
-        </Typography>
-      </div>
-    );
-  }
-);
+const StatusIndicatorComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, status, badgeProps, typographyProps, ...rest }: Props,
+  ref
+) => {
+  return (
+    <div {...rest} className={classes["status-indicator"]} ref={ref}>
+      <div
+        className={`${classes["status-badge"]} ${classes[status]} ${badgeProps?.className ?? ""}`}
+      />
+      <Typography {...typographyProps} spacing={{ margin: "0" }} variant="body" tag="div">
+        {typographyProps?.children || children}
+      </Typography>
+    </div>
+  );
+};
+
+export const StatusIndicator = React.forwardRef(StatusIndicatorComponent);

package/src/Tabs/{TabPanel.module.scss → Tab.module.scss}

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-.tabpanel {
+.tab {
   display: none;
 
   &:focus-visible {

package/src/Tabs/Tab.test.tsx

@@ -14,8 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { useEffect, useRef } from "react";
-import { Tabs } from "./Tabs";
+import React from "react";
 import { Tab, Props } from "./Tab";
 import { render } from "@testing-library/react";
 
@@ -48,40 +47,3 @@ describe("Tab should render", () => {
     expect(tab).toBeTruthy();
   });
 });
-
-describe("Tab useRef should work for panel and button", () => {
-  it("gives us back the proper refs", () => {
-    type logRefsFunction = (
-      buttonRef: React.RefObject<HTMLButtonElement>,
-      panelRef: React.RefObject<HTMLDivElement>
-    ) => void;
-    const ExampleComponent = ({ logRefs }: { logRefs: logRefsFunction }) => {
-      const ref1 = useRef<HTMLButtonElement>(null);
-      const ref2 = useRef<HTMLDivElement>(null);
-
-      useEffect(() => {
-        if (ref1.current && ref2.current) {
-          logRefs(ref1, ref2);
-        }
-      }, [ref1, ref2]);
-
-      return (
-        <Tabs>
-          <Tab buttonRef={ref1} panelRef={ref2} title="ShouldBeButtonRef">
-            <span>Should be panel ref</span>
-          </Tab>
-        </Tabs>
-      );
-    };
-
-    const setCorrectText = (
-      buttonRef: React.RefObject<HTMLButtonElement>,
-      panelRef: React.RefObject<HTMLDivElement>
-    ) => {
-      expect(buttonRef.current?.innerHTML).toContain("ShouldBeButtonRef");
-      expect(panelRef.current?.innerHTML).toEqual("<span>Should be panel ref</span>");
-    };
-
-    render(<ExampleComponent logRefs={setCorrectText} />);
-  });
-});

package/src/Tabs/Tab.tsx

@@ -14,20 +14,26 @@
  *    limitations under the License.
  */
 
-import React from "react";
+import React, { HTMLProps } from "react";
+import classes from "./Tab.module.scss";
 
-export interface Props {
+export interface Props extends HTMLProps<HTMLDivElement> {
   title: string;
-  children?: React.ReactNode;
-  selected?: boolean;
-  focussed?: boolean;
-  buttonRef?: React.RefObject<HTMLButtonElement>;
-  panelRef?: React.RefObject<HTMLDivElement>;
-  onTabButtonClick?: () => void;
+  children?: unknown;
+  tabActive?: boolean;
 }
 
-export const Tab = (args: Props) => {
+export const Tab = ({ children, tabActive, ...rest }: Props) => {
   return (
-    <div {...args}>{`A <Tab /> component should only be used inside the <Tabs /> component.`}</div>
+    <div
+      {...rest}
+      aria-hidden={!tabActive}
+      role="tabpanel"
+      className={`${classes["tab"]} ${tabActive ? classes["selected"] : ""} ${
+        rest.className ?? ""
+      }`}
+    >
+      {children}
+    </div>
   );
 };

package/src/Tabs/TabButton.module.scss

@@ -34,10 +34,6 @@
     outline-color: var(--color-focus);
   }
 
-  &.focussed:not(:focus-visible) {
-    outline: none;
-  }
-
   span {
     color: var(--tab-text-color);
     font-weight: normal;

package/src/Tabs/TabButton.test.tsx

@@ -45,41 +45,13 @@ describe("Tab should render", () => {
     expect(tabButton).toBeTruthy();
   });
 
-  it("should be selected when prop selected is passed", () => {
+  it("should be focussed when prop focused is passed", () => {
     const { tabButton } = createTabButton(defaultParams => ({
       ...defaultParams,
-      selected: true
+      focused: true
     }));
 
-    expect(tabButton).toHaveAttribute("aria-selected", "true");
-    expect(tabButton).toHaveAttribute("tabIndex", "0");
-  });
-
-  it("should be focussed when prop focussed is passed", () => {
-    const { tabButton } = createTabButton(defaultParams => ({
-      ...defaultParams,
-      focussed: true
-    }));
-
-    expect(tabButton).toHaveClass("focussed");
-  });
-
-  it("should set accessibility attributes when prop tabPanelId is passed", () => {
-    const { tabButton } = createTabButton(defaultParams => ({
-      ...defaultParams,
-      tabPanelId: "fakeId"
-    }));
-
-    expect(tabButton).toHaveAttribute("aria-controls", "fakeId");
-  });
-
-  it("should set id attribute when prop tabId is passed", () => {
-    const { tabButton } = createTabButton(defaultParams => ({
-      ...defaultParams,
-      tabId: "fakeId"
-    }));
-
-    expect(tabButton).toHaveAttribute("id", "fakeId");
+    expect(tabButton).toHaveFocus();
   });
 
   it("should set class when prop className is passed", () => {

package/src/Tabs/TabButton.tsx

@@ -14,61 +14,47 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, useEffect } from "react";
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  createRef,
+  RefObject,
+  useEffect
+} from "react";
 import classes from "./TabButton.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"button"> {
   children?: string;
-  selected?: boolean;
-  focussed?: boolean;
-  tabId?: string;
-  tabPanelId?: string;
-  onTabButtonClick?: () => void;
+  tabActive?: boolean;
+  focused?: boolean;
 }
 
-export const TabButton = React.forwardRef<HTMLButtonElement, Props>(
-  (
-    {
-      children,
-      selected = false,
-      focussed = false,
-      tabId,
-      tabPanelId,
-      className,
-      onTabButtonClick,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    useEffect(() => {
-      if (focussed && ref) {
-        (ref as React.MutableRefObject<HTMLButtonElement>).current.focus();
-      }
-    }, [focussed]);
+const TabButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
+  { children, tabActive, focused, ...rest }: Props,
+  ref
+) => {
+  let buttonRef = (ref as RefObject<HTMLButtonElement>) || createRef<HTMLButtonElement>();
 
-    const classNames = [classes["tabbutton"]];
+  useEffect(() => {
+    if (focused && buttonRef.current) {
+      buttonRef.current.focus();
+    }
+  }, [buttonRef.current, focused]);
 
-    selected && classNames.push(classes["selected"]);
-    focussed && !selected && classNames.push(classes["focussed"]);
-    className && classNames.push(className);
+  return (
+    <button
+      {...rest}
+      className={`${classes["tabbutton"]} ${tabActive ? classes["selected"] : ""} ${
+        rest.className ?? ""
+      }`}
+      ref={buttonRef}
+      role="tab"
+      type="button"
+    >
+      <span aria-hidden="true">{children}</span>
+      {children}
+    </button>
+  );
+};
 
-    return (
-      <button
-        {...rest}
-        aria-selected={selected}
-        key={tabId}
-        className={classNames.join(" ")}
-        ref={ref}
-        role="tab"
-        tabIndex={selected ? 0 : -1}
-        type="button"
-        aria-controls={tabPanelId}
-        id={tabId}
-        onClick={onTabButtonClick}
-      >
-        <span aria-hidden="true">{children}</span>
-        {children}
-      </button>
-    );
-  }
-);
+export const TabButton = React.forwardRef(TabButtonComponent);

package/src/Tabs/Tabs.test.tsx

@@ -19,13 +19,19 @@ import { Tabs, Props } from "./Tabs";
 import { render } from "@testing-library/react";
 import { TabButton as Tab } from "./TabButton";
 import userEvent from "@testing-library/user-event";
+import { act } from "react-dom/test-utils";
 
 const defaultParams: Props = {
-  "aria-label": "Entertainment",
   children: [
-    <Tab title="Tab1">Tabpanel1 content</Tab>,
-    <Tab title="Tab2">Tabpanel2 content</Tab>,
-    <Tab title="Tab3">Tabpanel3 content</Tab>
+    <Tab key="tab1" title="Tab1">
+      Tabpanel1 content
+    </Tab>,
+    <Tab key="tab2" title="Tab2">
+      Tabpanel2 content
+    </Tab>,
+    <Tab key="tab3" title="Tab3">
+      Tabpanel3 content
+    </Tab>
   ]
 };
 
@@ -82,7 +88,7 @@ describe("Tabs should render", () => {
     expect(tabpanel3).toHaveClass("selected");
   });
 
-  it("switches to tab and tabpanel when tab is clicked", () => {
+  it("switches to tab and tabpanel when tab is clicked", async () => {
     const { tabs } = createTabs(defaultParams => ({
       ...defaultParams
     }));
@@ -103,7 +109,7 @@ describe("Tabs should render", () => {
     expect(tabpanel1).toHaveClass("selected");
     expect(tabpanel3).not.toHaveClass("selected");
 
-    userEvent.click(tab3);
+    await userEvent.click(tab3);
 
     tabButtons = tablist.querySelectorAll(".tabbutton");
 
@@ -120,7 +126,7 @@ describe("Tabs should render", () => {
     expect(tabpanel3).toHaveClass("selected");
   });
 
-  it("triggers the onTabChange when switching tabs", () => {
+  it("triggers the onTabChange when switching tabs", async () => {
     const onTabChangeHandler = jest.fn();
 
     const { tabs } = createTabs(defaultParams => ({
@@ -133,7 +139,7 @@ describe("Tabs should render", () => {
 
     let tab3 = tabButtons[2] as HTMLButtonElement;
 
-    userEvent.click(tab3);
+    await userEvent.click(tab3);
 
     expect(onTabChangeHandler).toHaveBeenCalled();
   });
@@ -149,7 +155,6 @@ describe("Tabs should not render other children then tab components", () => {
     );
 
     const tabs = queries.getByTestId("tabs");
-
     expect(tabs).toBeDefined();
     expect(tabs).toBeEmptyDOMElement;
   });
@@ -169,7 +174,9 @@ describe("Tabs should comply with accessibility rules", () => {
     let tabpanel1 = tabpanels.firstChild as HTMLDivElement;
     let tabpanel3 = tabpanels.lastChild as HTMLDivElement;
 
-    tab1.focus();
+    act(() => {
+      tab1.focus();
+    });
 
     tabButtons = tablist.querySelectorAll(".tabbutton");
     tab1 = tabButtons[0] as HTMLButtonElement;
@@ -179,14 +186,13 @@ describe("Tabs should comply with accessibility rules", () => {
 
     expect(tab1).toHaveFocus();
     expect(tab1).toHaveClass("selected");
-    expect(tab1).not.toHaveClass("focussed");
     expect(tab3).not.toHaveClass("selected");
-    expect(tab3).not.toHaveClass("focussed");
+    expect(tab3).not.toHaveFocus();
     expect(tabpanel1).toHaveClass("selected");
     expect(tabpanel3).not.toHaveClass("selected");
 
-    userEvent.keyboard("[ArrowLeft]");
-    userEvent.keyboard("[Space]");
+    await userEvent.keyboard("[ArrowLeft]");
+    await userEvent.keyboard("[Space]");
 
     tabButtons = tablist.querySelectorAll(".tabbutton");
     tab1 = tabButtons[0] as HTMLButtonElement;
@@ -197,12 +203,12 @@ describe("Tabs should comply with accessibility rules", () => {
     expect(tab3).toHaveFocus();
     expect(tab3).toHaveClass("selected");
     expect(tab1).not.toHaveClass("selected");
-    expect(tab1).not.toHaveClass("focussed");
+    expect(tab1).not.toHaveFocus();
     expect(tabpanel3).toHaveClass("selected");
     expect(tabpanel1).not.toHaveClass("selected");
 
-    userEvent.keyboard("[ArrowRight]");
-    userEvent.keyboard("[Enter]");
+    await userEvent.keyboard("[ArrowRight]");
+    await userEvent.keyboard("[Enter]");
 
     tabButtons = tablist.querySelectorAll(".tabbutton");
     tab1 = tabButtons[0] as HTMLButtonElement;
@@ -213,21 +219,21 @@ describe("Tabs should comply with accessibility rules", () => {
     expect(tab1).toHaveFocus();
     expect(tab1).toHaveClass("selected");
     expect(tab3).not.toHaveClass("selected");
-    expect(tab3).not.toHaveClass("focussed");
+    expect(tab3).not.toHaveFocus();
     expect(tabpanel1).toHaveClass("selected");
     expect(tabpanel3).not.toHaveClass("selected");
 
-    userEvent.keyboard("[End]");
+    await userEvent.keyboard("[End]");
 
     tabButtons = tablist.querySelectorAll(".tabbutton");
     tab1 = tabButtons[0] as HTMLButtonElement;
     tab3 = tabButtons[2] as HTMLButtonElement;
 
     expect(tab3).toHaveFocus();
-    expect(tab3).toHaveClass("focussed");
-    expect(tab1).not.toHaveClass("focussed");
+    expect(tab3).toHaveFocus();
+    expect(tab1).not.toHaveFocus();
 
-    userEvent.keyboard("[Home]");
+    await userEvent.keyboard("[Home]");
 
     tabButtons = tablist.querySelectorAll(".tabbutton");
     tab1 = tabButtons[0] as HTMLButtonElement;
@@ -235,10 +241,10 @@ describe("Tabs should comply with accessibility rules", () => {
 
     expect(tab1).toHaveFocus();
     expect(tab1).toHaveClass("selected");
-    expect(tab3).not.toHaveClass("focussed");
+    expect(tab3).not.toHaveFocus();
 
     // should have no effect
-    userEvent.keyboard("a");
+    await userEvent.keyboard("a");
 
     tabButtons = tablist.querySelectorAll(".tabbutton");
     tab1 = tabButtons[0] as HTMLButtonElement;
@@ -246,9 +252,9 @@ describe("Tabs should comply with accessibility rules", () => {
 
     expect(tab1).toHaveFocus();
     expect(tab1).toHaveClass("selected");
-    expect(tab3).not.toHaveClass("focussed");
+    expect(tab3).not.toHaveFocus();
 
-    userEvent.keyboard("[ArrowRight]");
+    await userEvent.keyboard("[ArrowRight]");
 
     tabButtons = tablist.querySelectorAll(".tabbutton");
     tab1 = tabButtons[0] as HTMLButtonElement;
@@ -256,10 +262,10 @@ describe("Tabs should comply with accessibility rules", () => {
 
     expect(tab1).not.toHaveFocus();
     expect(tab3).not.toHaveFocus();
-    expect(tab1).not.toHaveClass("focussed");
-    expect(tab3).not.toHaveClass("focussed");
+    expect(tab1).not.toHaveFocus();
+    expect(tab3).not.toHaveFocus();
 
-    userEvent.keyboard("[ArrowLeft]");
+    await userEvent.keyboard("[ArrowLeft]");
 
     tabButtons = tablist.querySelectorAll(".tabbutton");
     tab1 = tabButtons[0] as HTMLButtonElement;
@@ -267,18 +273,19 @@ describe("Tabs should comply with accessibility rules", () => {
 
     expect(tab1).toHaveFocus();
     expect(tab1).toHaveClass("selected");
-    expect(tab3).not.toHaveClass("focussed");
+    expect(tab3).not.toHaveFocus();
 
-    userEvent.keyboard("[ArrowLeft]");
+    await userEvent.keyboard("[ArrowLeft]");
 
     tabButtons = tablist.querySelectorAll(".tabbutton");
     tab1 = tabButtons[0] as HTMLButtonElement;
     tab3 = tabButtons[2] as HTMLButtonElement;
 
-    tab3.blur();
+    act(() => {
+      tab3.blur();
+    });
 
     expect(tab1).not.toHaveFocus();
     expect(tab3).not.toHaveFocus();
-    expect(tab1).toHaveClass("selected");
   });
 });