@onewelcome/react-lib-components 0.2.0 → 0.2.3

package/src/Tabs/Tab.test.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useRef } from 'react';
-import { Tabs } from './Tabs';
-import { Tab, Props } from './Tab';
-import { render } from '@testing-library/react';
+import React, { useEffect, useRef } from "react";
+import { Tabs } from "./Tabs";
+import { Tab, Props } from "./Tab";
+import { render } from "@testing-library/react";
 
 const defaultParams: Props = {
-  title: 'Title of tab',
+  title: "Title of tab"
 };
 
 const createTab = (params?: (defaultParams: Props) => Props) => {
@@ -17,24 +17,24 @@ const createTab = (params?: (defaultParams: Props) => Props) => {
       tab content
     </Tab>
   );
-  const tab = queries.getByTestId('tab');
+  const tab = queries.getByTestId("tab");
 
   return {
     ...queries,
-    tab,
+    tab
   };
 };
 
-describe('Tab should render', () => {
-  it('renders without crashing', () => {
+describe("Tab should render", () => {
+  it("renders without crashing", () => {
     const { tab } = createTab();
 
     expect(tab).toBeTruthy();
   });
 });
 
-describe('Tab useRef should work for panel and button', () => {
-  it('gives us back the proper refs', () => {
+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>
@@ -62,8 +62,8 @@ describe('Tab useRef should work for panel and button', () => {
       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>');
+      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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 export interface Props {
   title: string;

package/src/Tabs/TabButton.test.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Props, TabButton } from './TabButton';
-import { render } from '@testing-library/react';
+import React from "react";
+import { Props, TabButton } from "./TabButton";
+import { render } from "@testing-library/react";
 
 const defaultParams: Props = {};
 
@@ -14,64 +14,64 @@ const createTabButton = (params?: (defaultParams: Props) => Props) => {
       tab content
     </TabButton>
   );
-  const tabButton = queries.getByTestId('tabbutton');
+  const tabButton = queries.getByTestId("tabbutton");
 
   return {
     ...queries,
-    tabButton,
+    tabButton
   };
 };
 
-describe('Tab should render', () => {
-  it('renders without crashing', () => {
+describe("Tab should render", () => {
+  it("renders without crashing", () => {
     const { tabButton } = createTabButton();
 
     expect(tabButton).toBeTruthy();
   });
 
-  it('should be selected when prop selected is passed', () => {
-    const { tabButton } = createTabButton((defaultParams) => ({
+  it("should be selected when prop selected is passed", () => {
+    const { tabButton } = createTabButton(defaultParams => ({
       ...defaultParams,
-      selected: true,
+      selected: true
     }));
 
-    expect(tabButton).toHaveAttribute('aria-selected', 'true');
-    expect(tabButton).toHaveAttribute('tabIndex', '0');
+    expect(tabButton).toHaveAttribute("aria-selected", "true");
+    expect(tabButton).toHaveAttribute("tabIndex", "0");
   });
 
-  it('should be focussed when prop focussed is passed', () => {
-    const { tabButton } = createTabButton((defaultParams) => ({
+  it("should be focussed when prop focussed is passed", () => {
+    const { tabButton } = createTabButton(defaultParams => ({
       ...defaultParams,
-      focussed: true,
+      focussed: true
     }));
 
-    expect(tabButton).toHaveClass('focussed');
+    expect(tabButton).toHaveClass("focussed");
   });
 
-  it('should set accessibility attributes when prop tabPanelId is passed', () => {
-    const { tabButton } = createTabButton((defaultParams) => ({
+  it("should set accessibility attributes when prop tabPanelId is passed", () => {
+    const { tabButton } = createTabButton(defaultParams => ({
       ...defaultParams,
-      tabPanelId: 'fakeId',
+      tabPanelId: "fakeId"
     }));
 
-    expect(tabButton).toHaveAttribute('aria-controls', 'fakeId');
+    expect(tabButton).toHaveAttribute("aria-controls", "fakeId");
   });
 
-  it('should set id attribute when prop tabId is passed', () => {
-    const { tabButton } = createTabButton((defaultParams) => ({
+  it("should set id attribute when prop tabId is passed", () => {
+    const { tabButton } = createTabButton(defaultParams => ({
       ...defaultParams,
-      tabId: 'fakeId',
+      tabId: "fakeId"
     }));
 
-    expect(tabButton).toHaveAttribute('id', 'fakeId');
+    expect(tabButton).toHaveAttribute("id", "fakeId");
   });
 
-  it('should set class when prop className is passed', () => {
-    const { tabButton } = createTabButton((defaultParams) => ({
+  it("should set class when prop className is passed", () => {
+    const { tabButton } = createTabButton(defaultParams => ({
       ...defaultParams,
-      className: 'customclass',
+      className: "customclass"
     }));
 
-    expect(tabButton).toHaveClass('customclass');
+    expect(tabButton).toHaveClass("customclass");
   });
 });

package/src/Tabs/TabButton.tsx

@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithRef, useEffect } from 'react';
-import classes from './TabButton.module.scss';
+import React, { ComponentPropsWithRef, useEffect } from "react";
+import classes from "./TabButton.module.scss";
 
-export interface Props extends ComponentPropsWithRef<'button'> {
+export interface Props extends ComponentPropsWithRef<"button"> {
   children?: string;
   selected?: boolean;
   focussed?: boolean;
@@ -30,10 +30,10 @@ export const TabButton = React.forwardRef<HTMLButtonElement, Props>(
       }
     }, [focussed]);
 
-    const classNames = [classes['tabbutton']];
+    const classNames = [classes["tabbutton"]];
 
-    selected && classNames.push(classes['selected']);
-    focussed && !selected && classNames.push(classes['focussed']);
+    selected && classNames.push(classes["selected"]);
+    focussed && !selected && classNames.push(classes["focussed"]);
     className && classNames.push(className);
 
     return (
@@ -41,7 +41,7 @@ export const TabButton = React.forwardRef<HTMLButtonElement, Props>(
         {...rest}
         aria-selected={selected}
         key={tabId}
-        className={classNames.join(' ')}
+        className={classNames.join(" ")}
         ref={ref}
         role="tab"
         tabIndex={selected ? 0 : -1}

package/src/Tabs/TabPanel.test.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-import { TabPanel, Props } from './TabPanel';
-import { render } from '@testing-library/react';
+import React from "react";
+import { TabPanel, Props } from "./TabPanel";
+import { render } from "@testing-library/react";
 
 const defaultParams: Props = {
-  tabId: 'fakeTabId',
-  tabPanelId: 'fakeTabPanelId',
-  children: [],
+  tabId: "fakeTabId",
+  tabPanelId: "fakeTabPanelId",
+  children: []
 };
 
 const createTabPanel = (params?: (defaultParams: Props) => Props) => {
@@ -18,59 +18,59 @@ const createTabPanel = (params?: (defaultParams: Props) => Props) => {
       tabpanel content
     </TabPanel>
   );
-  const tabpanel = queries.getByTestId('tabpanel');
+  const tabpanel = queries.getByTestId("tabpanel");
 
   return {
     ...queries,
-    tabpanel,
+    tabpanel
   };
 };
 
-describe('TabPanel should render', () => {
-  it('renders without crashing', () => {
+describe("TabPanel should render", () => {
+  it("renders without crashing", () => {
     const { tabpanel } = createTabPanel();
 
     expect(tabpanel).toBeTruthy();
 
-    expect(tabpanel).toHaveAttribute('aria-hidden', 'true');
-    expect(tabpanel).toHaveAttribute('hidden');
+    expect(tabpanel).toHaveAttribute("aria-hidden", "true");
+    expect(tabpanel).toHaveAttribute("hidden");
   });
 
-  it('should be visible when prop selected is passed', () => {
-    const { tabpanel } = createTabPanel((defaultParams) => ({
+  it("should be visible when prop selected is passed", () => {
+    const { tabpanel } = createTabPanel(defaultParams => ({
       ...defaultParams,
-      selected: true,
+      selected: true
     }));
 
-    expect(tabpanel).toHaveClass('selected');
-    expect(tabpanel).toHaveAttribute('aria-hidden', 'false');
-    expect(tabpanel).not.toHaveAttribute('hidden');
+    expect(tabpanel).toHaveClass("selected");
+    expect(tabpanel).toHaveAttribute("aria-hidden", "false");
+    expect(tabpanel).not.toHaveAttribute("hidden");
   });
 
-  it('should set id when prop tabPanelId is passed', () => {
-    const { tabpanel } = createTabPanel((defaultParams) => ({
+  it("should set id when prop tabPanelId is passed", () => {
+    const { tabpanel } = createTabPanel(defaultParams => ({
       ...defaultParams,
-      tabPanelId: 'fakeId',
+      tabPanelId: "fakeId"
     }));
 
-    expect(tabpanel).toHaveAttribute('id', 'fakeId');
+    expect(tabpanel).toHaveAttribute("id", "fakeId");
   });
 
-  it('should set accessibility attributes when prop tabId is passed', () => {
-    const { tabpanel } = createTabPanel((defaultParams) => ({
+  it("should set accessibility attributes when prop tabId is passed", () => {
+    const { tabpanel } = createTabPanel(defaultParams => ({
       ...defaultParams,
-      tabId: 'fakeId',
+      tabId: "fakeId"
     }));
 
-    expect(tabpanel).toHaveAttribute('aria-labelledby', 'fakeId');
+    expect(tabpanel).toHaveAttribute("aria-labelledby", "fakeId");
   });
 
-  it('should set class when prop className is passed', () => {
-    const { tabpanel } = createTabPanel((defaultParams) => ({
+  it("should set class when prop className is passed", () => {
+    const { tabpanel } = createTabPanel(defaultParams => ({
       ...defaultParams,
-      className: 'customclass',
+      className: "customclass"
     }));
 
-    expect(tabpanel).toHaveClass('customclass');
+    expect(tabpanel).toHaveClass("customclass");
   });
 });

package/src/Tabs/TabPanel.tsx

@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithRef } from 'react';
-import classes from './TabPanel.module.scss';
+import React, { ComponentPropsWithRef } from "react";
+import classes from "./TabPanel.module.scss";
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   children: React.ReactNode;
   tabId: string;
   tabPanelId: string;
@@ -14,7 +14,7 @@ export const TabPanel = React.forwardRef<HTMLDivElement, Props>(
       {...rest}
       ref={ref}
       aria-labelledby={tabId}
-      className={`${classes['tabpanel']} ${selected ? classes['selected'] : ''} ${className ?? ''}`}
+      className={`${classes["tabpanel"]} ${selected ? classes["selected"] : ""} ${className ?? ""}`}
       id={tabPanelId}
       role="tabpanel"
       tabIndex={0}