@onewelcome/react-lib-components 0.2.0 → 0.2.3

package/src/Notifications/BaseModal/BaseModalActions/BaseModalActions.test.tsx

@@ -1,24 +1,24 @@
-import React, { useEffect, useRef } from 'react';
-import { BaseModalActions } from './BaseModalActions';
-import { render } from '@testing-library/react';
+import React, { useEffect, useRef } from "react";
+import { BaseModalActions } from "./BaseModalActions";
+import { render } from "@testing-library/react";
 
-describe('BaseModalActions', () => {
-  it('renders without crashing', () => {
-    const children = 'Content';
-    const classNames = ['class1', 'class2'];
+describe("BaseModalActions", () => {
+  it("renders without crashing", () => {
+    const children = "Content";
+    const classNames = ["class1", "class2"];
     const { container } = render(
-      <BaseModalActions className={classNames.join(' ')}>{children}</BaseModalActions>
+      <BaseModalActions className={classNames.join(" ")}>{children}</BaseModalActions>
     );
 
     const dialogActionsContainer = container.children[0];
-    expect(dialogActionsContainer).toHaveClass('actions', classNames[0], classNames[1]);
+    expect(dialogActionsContainer).toHaveClass("actions", classNames[0], classNames[1]);
     expect(dialogActionsContainer).toHaveTextContent(children);
   });
 });
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -34,7 +34,7 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);

package/src/Notifications/BaseModal/BaseModalActions/BaseModalActions.tsx

@@ -1,14 +1,14 @@
-import React, { ComponentPropsWithRef } from 'react';
-import classes from './BaseModalActions.module.scss';
+import React, { ComponentPropsWithRef } from "react";
+import classes from "./BaseModalActions.module.scss";
 
-export interface Props extends ComponentPropsWithRef<'footer'> {
+export interface Props extends ComponentPropsWithRef<"footer"> {
   children?: React.ReactNode;
 }
 
 export const BaseModalActions = React.forwardRef<HTMLElement, Props>(
-  ({ children, className = '', ...rest }: Props, ref) => {
+  ({ children, className = "", ...rest }: Props, ref) => {
     return (
-      <footer {...rest} ref={ref} className={`${classes['actions']} ${className}`}>
+      <footer {...rest} ref={ref} className={`${classes["actions"]} ${className}`}>
         {children}
       </footer>
     );

package/src/Notifications/BaseModal/BaseModalContent/BaseModalContent.test.tsx

@@ -1,29 +1,29 @@
-import React, { useEffect, useRef } from 'react';
-import { BaseModalContent, Props } from './BaseModalContent';
-import { render } from '@testing-library/react';
-import { descriptionId } from '../BaseModalContext';
+import React, { useEffect, useRef } from "react";
+import { BaseModalContent, Props } from "./BaseModalContent";
+import { render } from "@testing-library/react";
+import { descriptionId } from "../BaseModalContext";
 
-const classNames = ['class1', 'class2'];
+const classNames = ["class1", "class2"];
 const initParams: Props = {
-  id: descriptionId('modal'),
-  className: classNames.join(' '),
-  children: 'This is example dialog content.',
+  id: descriptionId("modal"),
+  className: classNames.join(" "),
+  children: "This is example dialog content."
 };
 
-describe('BaseModalContent', () => {
-  it('renders without crashing', () => {
+describe("BaseModalContent", () => {
+  it("renders without crashing", () => {
     const { container } = render(<BaseModalContent {...initParams} />);
 
     const dialogContentContainer = container.children[0];
-    expect(dialogContentContainer).toHaveClass('content', classNames[0], classNames[1]);
+    expect(dialogContentContainer).toHaveClass("content", classNames[0], classNames[1]);
     expect(dialogContentContainer).toHaveTextContent(initParams.children as string);
     expect(dialogContentContainer).toEqual(document.activeElement);
   });
 
-  describe('ref should work', () => {
-    it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+  describe("ref should work", () => {
+    it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
       const ExampleComponent = ({
-        propagateRef,
+        propagateRef
       }: {
         propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
       }) => {
@@ -39,14 +39,14 @@ describe('BaseModalContent', () => {
       };
 
       const refCheck = (ref: React.RefObject<HTMLElement>) => {
-        expect(ref.current).toHaveAttribute('data-ref', 'testing');
+        expect(ref.current).toHaveAttribute("data-ref", "testing");
       };
 
       render(<ExampleComponent propagateRef={refCheck} />);
     });
   });
 
-  it('should renders not focused div', () => {
+  it("should renders not focused div", () => {
     const { container } = render(<BaseModalContent {...initParams} disableAutoFocus />);
 
     const dialogContentContainer = container.children[0];

package/src/Notifications/BaseModal/BaseModalContent/BaseModalContent.tsx

@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithRef, createRef, useEffect } from 'react';
-import classes from './BaseModalContent.module.scss';
+import React, { ComponentPropsWithRef, createRef, useEffect } from "react";
+import classes from "./BaseModalContent.module.scss";
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   id?: string;
   children: React.ReactNode;
   className?: string;
@@ -9,7 +9,7 @@ export interface Props extends ComponentPropsWithRef<'div'> {
 }
 
 export const BaseModalContent = React.forwardRef<HTMLDivElement, Props>(
-  ({ id, children, className = '', disableAutoFocus = false, ...rest }: Props, ref) => {
+  ({ id, children, className = "", disableAutoFocus = false, ...rest }: Props, ref) => {
     const contentRef = createRef<HTMLDivElement>();
 
     useEffect(() => {
@@ -26,7 +26,7 @@ export const BaseModalContent = React.forwardRef<HTMLDivElement, Props>(
         {...rest}
         ref={ref || contentRef}
         id={id}
-        className={`${classes['content']} ${className}`}
+        className={`${classes["content"]} ${className}`}
         tabIndex={-1}
       >
         {children}

package/src/Notifications/BaseModal/BaseModalHeader/BaseModalHeader.test.tsx

@@ -1,38 +1,38 @@
-import React, { useEffect, useRef } from 'react';
-import { BaseModalHeader, Props } from './BaseModalHeader';
-import { render, getByRole, getByTestId, getByText } from '@testing-library/react';
-import { labelId } from '../BaseModalContext';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { BaseModalHeader, Props } from "./BaseModalHeader";
+import { render, getByRole, getByTestId, getByText } from "@testing-library/react";
+import { labelId } from "../BaseModalContext";
+import userEvent from "@testing-library/user-event";
 
-const additionalContent = 'Additional content';
+const additionalContent = "Additional content";
 const initParams: Props = {
-  id: labelId('modal'),
-  title: 'Example title',
+  id: labelId("modal"),
+  title: "Example title",
   onClose: jest.fn(),
-  children: <div data-testid="additional-content">{additionalContent}</div>,
+  children: <div data-testid="additional-content">{additionalContent}</div>
 };
 
-describe('BaseModalHeader', () => {
-  it('renders without crashing', () => {
+describe("BaseModalHeader", () => {
+  it("renders without crashing", () => {
     const { container } = render(<BaseModalHeader {...initParams} />);
-    const closeBtn = getByRole(container, 'button');
+    const closeBtn = getByRole(container, "button");
     expect(initParams.onClose).toBeCalledTimes(0);
 
     userEvent.click(closeBtn);
 
     const dialogContentContainer = container.children[0];
     const titleContainer = getByText(container, initParams.title);
-    expect(dialogContentContainer).toHaveClass('header');
-    expect(titleContainer).toHaveAttribute('id', 'modal-label');
-    expect(getByTestId(container, 'additional-content')).toHaveTextContent(additionalContent);
+    expect(dialogContentContainer).toHaveClass("header");
+    expect(titleContainer).toHaveAttribute("id", "modal-label");
+    expect(getByTestId(container, "additional-content")).toHaveTextContent(additionalContent);
     expect(initParams.onClose).toBeCalledTimes(1);
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -50,7 +50,7 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);

package/src/Notifications/BaseModal/BaseModalHeader/BaseModalHeader.tsx

@@ -1,10 +1,10 @@
-import React, { ComponentPropsWithRef } from 'react';
-import classes from './BaseModalHeader.module.scss';
-import { IconButton } from '../../../Button/IconButton';
-import { Icon, Icons } from '../../../Icon/Icon';
-import { Typography } from '../../../Typography/Typography';
+import React, { ComponentPropsWithRef } from "react";
+import classes from "./BaseModalHeader.module.scss";
+import { IconButton } from "../../../Button/IconButton";
+import { Icon, Icons } from "../../../Icon/Icon";
+import { Typography } from "../../../Typography/Typography";
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   id: string;
   title: string;
   children?: React.ReactNode;
@@ -14,12 +14,12 @@ export interface Props extends ComponentPropsWithRef<'div'> {
 export const BaseModalHeader = React.forwardRef<HTMLDivElement, Props>(
   ({ id, title, children, onClose, ...rest }: Props, ref) => {
     return (
-      <div {...rest} ref={ref} className={classes['header']}>
-        <div className={classes['headline']}>
-          <Typography id={id} className={classes['title']} tag="h1" variant="h4">
+      <div {...rest} ref={ref} className={classes["header"]}>
+        <div className={classes["headline"]}>
+          <Typography id={id} className={classes["title"]} tag="h1" variant="h4">
             {title}
           </Typography>
-          <IconButton onClick={onClose} className={classes['closeBtn']} title="close modal">
+          <IconButton onClick={onClose} className={classes["closeBtn"]} title="close modal">
             <Icon icon={Icons.Times} />
           </IconButton>
         </div>

package/src/Notifications/Dialog/Dialog.test.tsx

@@ -1,71 +1,71 @@
-import React, { useEffect, useRef } from 'react';
-import { Dialog, Props } from './Dialog';
-import { render, getAllByRole } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { Dialog, Props } from "./Dialog";
+import { render, getAllByRole } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 const initParams: Props = {
-  id: 'modal',
+  id: "modal",
   open: true,
   onClose: jest.fn(),
-  alignActions: 'left',
-  title: 'Example dialog',
+  alignActions: "left",
+  title: "Example dialog",
   primaryAction: {
-    label: 'Save',
-    onClick: jest.fn(),
+    label: "Save",
+    onClick: jest.fn()
   },
   secondaryAction: {
-    label: 'Cancel',
-    onClick: jest.fn(),
+    label: "Cancel",
+    onClick: jest.fn()
   },
-  children: 'This is example dialog content.',
+  children: "This is example dialog content."
 };
 
-const getButtons = (container: HTMLElement) => getAllByRole(container, 'button');
+const getButtons = (container: HTMLElement) => getAllByRole(container, "button");
 
-describe('Dialog', () => {
-  it('renders without crashing', () => {
+describe("Dialog", () => {
+  it("renders without crashing", () => {
     const { getByText } = render(<Dialog {...initParams} />);
     const [primaryButton, secondaryButton] = getButtons(document.body);
 
     expect(getByText(initParams.title)).toBeDefined();
     expect(getByText(initParams.children as string)).toBeDefined();
-    const actionsDiv = primaryButton.closest('footer');
-    expect(actionsDiv).toHaveClass('left');
+    const actionsDiv = primaryButton.closest("footer");
+    expect(actionsDiv).toHaveClass("left");
     expect(actionsDiv?.children[0]).toEqual(primaryButton);
     expect(actionsDiv?.children[1]).toEqual(secondaryButton);
-    expect(primaryButton).toHaveClass('fill');
-    expect(secondaryButton).toHaveClass('text');
+    expect(primaryButton).toHaveClass("fill");
+    expect(secondaryButton).toHaveClass("text");
   });
 
-  it('renders action aligned to right', () => {
+  it("renders action aligned to right", () => {
     render(<Dialog {...initParams} alignActions="right" />);
     const [secondaryButton, primaryButton] = getButtons(document.body);
 
-    const actionsDiv = primaryButton.closest('footer');
-    expect(actionsDiv).not.toHaveClass('left');
+    const actionsDiv = primaryButton.closest("footer");
+    expect(actionsDiv).not.toHaveClass("left");
     expect(actionsDiv?.children[0]).toEqual(secondaryButton);
     expect(actionsDiv?.children[1]).toEqual(primaryButton);
-    expect(primaryButton).toHaveClass('fill');
-    expect(secondaryButton).toHaveClass('text');
+    expect(primaryButton).toHaveClass("fill");
+    expect(secondaryButton).toHaveClass("text");
   });
 
-  it('renders only one button', () => {
+  it("renders only one button", () => {
     render(<Dialog {...initParams} secondaryAction={undefined} />);
     const buttons = getButtons(document.body);
 
     expect(buttons).toHaveLength(1);
-    expect(buttons[0]).toHaveClass('fill');
+    expect(buttons[0]).toHaveClass("fill");
   });
 
-  it('should handle clicking on buttons and ENTER press', () => {
+  it("should handle clicking on buttons and ENTER press", () => {
     render(<Dialog {...initParams} />);
     const [primaryButton, secondaryButton] = getButtons(document.body);
     expect(initParams.primaryAction.onClick).toHaveBeenCalledTimes(0);
     expect(initParams.secondaryAction?.onClick).toHaveBeenCalledTimes(0);
     expect(initParams.onClose).toHaveBeenCalledTimes(0);
 
-    const autoSummissionInput = document.body.querySelector('input') as HTMLElement;
-    userEvent.type(autoSummissionInput, '{enter}');
+    const autoSummissionInput = document.body.querySelector("input") as HTMLElement;
+    userEvent.type(autoSummissionInput, "{enter}");
     expect(initParams.primaryAction.onClick).toHaveBeenCalledTimes(1);
 
     userEvent.click(primaryButton);
@@ -75,10 +75,10 @@ describe('Dialog', () => {
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -94,9 +94,9 @@ describe('ref should work', () => {
         <Dialog
           children="test"
           open={false}
-          alignActions={'left'}
+          alignActions={"left"}
           onClose={jest.fn()}
-          primaryAction={{ label: 'test', onClick: jest.fn() }}
+          primaryAction={{ label: "test", onClick: jest.fn() }}
           title="test"
           id="test"
           data-ref="testing"
@@ -106,7 +106,7 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);

package/src/Notifications/Dialog/Dialog.tsx

@@ -1,18 +1,18 @@
-import React, { ComponentPropsWithRef, useState } from 'react';
-import { BaseModal } from '../BaseModal/BaseModal';
-import { BaseModalContent } from '../BaseModal/BaseModalContent/BaseModalContent';
-import { DialogActions } from './DialogActions/DialogActions';
-import classes from './Dialog.module.scss';
-import { DialogTitle } from './DialogTitle/DialogTitle';
-import { Button, Props as ButtonProps } from '../../Button/Button';
-import { labelId, descriptionId } from '../BaseModal/BaseModalContext';
-import { generateID } from '../../util/helper';
+import React, { ComponentPropsWithRef, useState } from "react";
+import { BaseModal } from "../BaseModal/BaseModal";
+import { BaseModalContent } from "../BaseModal/BaseModalContent/BaseModalContent";
+import { DialogActions } from "./DialogActions/DialogActions";
+import classes from "./Dialog.module.scss";
+import { DialogTitle } from "./DialogTitle/DialogTitle";
+import { Button, Props as ButtonProps } from "../../Button/Button";
+import { labelId, descriptionId } from "../BaseModal/BaseModalContext";
+import { generateID } from "../../util/helper";
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   id?: string;
   open: boolean;
   children: React.ReactNode;
-  alignActions: 'left' | 'right';
+  alignActions: "left" | "right";
   onClose: () => void;
   title: string;
   primaryAction: Action;
@@ -21,7 +21,7 @@ export interface Props extends ComponentPropsWithRef<'div'> {
   disableEscapeKeyDown?: boolean;
 }
 
-export interface Action extends Omit<ButtonProps, 'variant' | 'ref'> {
+export interface Action extends Omit<ButtonProps, "variant" | "ref"> {
   label: string;
   onClick: (event?: React.MouseEvent<HTMLButtonElement>) => unknown;
 }
@@ -63,7 +63,7 @@ export const Dialog = React.forwardRef<HTMLDivElement, Props>(
 
     const onHiddenInputKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
       /** It has to be here because then we will need to check if user doesn't click tab to select action button and want to do another action then primary one? */
-      if (event.key === 'Enter') {
+      if (event.key === "Enter") {
         primaryAction.onClick();
       }
     };
@@ -73,8 +73,8 @@ export const Dialog = React.forwardRef<HTMLDivElement, Props>(
         {...rest}
         ref={ref}
         id={dialogId}
-        className={classes['dialog']}
-        containerProps={{ className: classes['container'] }}
+        className={classes["dialog"]}
+        containerProps={{ className: classes["container"] }}
         open={open}
         disableBackdrop
         onClose={onClose}
@@ -84,13 +84,13 @@ export const Dialog = React.forwardRef<HTMLDivElement, Props>(
         <DialogTitle id={labelId(dialogId)} title={title} />
         <BaseModalContent
           id={descriptionId(dialogId)}
-          className={classes['content']}
+          className={classes["content"]}
           disableAutoFocus
         >
           {children}
         </BaseModalContent>
         <DialogActions align={alignActions}>
-          {alignActions === 'left'
+          {alignActions === "left"
             ? [PrimaryButton, TertiaryButton]
             : [TertiaryButton, PrimaryButton]}
         </DialogActions>
@@ -98,10 +98,10 @@ export const Dialog = React.forwardRef<HTMLDivElement, Props>(
           autoFocus
           aria-hidden={true}
           style={{
-            position: 'absolute',
+            position: "absolute",
             width: 0,
             height: 0,
-            opacity: 0,
+            opacity: 0
           }}
           maxLength={0}
           tabIndex={-1}

package/src/Notifications/Dialog/DialogActions/DialogActions.test.tsx

@@ -1,33 +1,33 @@
-import React, { useEffect, useRef } from 'react';
-import { DialogActions, Props } from './DialogActions';
-import { render } from '@testing-library/react';
+import React, { useEffect, useRef } from "react";
+import { DialogActions, Props } from "./DialogActions";
+import { render } from "@testing-library/react";
 
 const initParams: Props = {
-  align: 'right',
-  children: 'Content',
+  align: "right",
+  children: "Content"
 };
 
-describe('DialogActions', () => {
-  it('renders without crashing', () => {
+describe("DialogActions", () => {
+  it("renders without crashing", () => {
     const { container } = render(<DialogActions {...initParams} />);
 
     const dialogActionsContainer = container.children[0];
-    expect(dialogActionsContainer).toHaveClass('actions');
+    expect(dialogActionsContainer).toHaveClass("actions");
     expect(dialogActionsContainer).toHaveTextContent(initParams.children as string);
   });
 
-  it('should align items to left', () => {
+  it("should align items to left", () => {
     const { container } = render(<DialogActions {...initParams} align="left" />);
 
     const dialogActionsContainer = container.children[0];
-    expect(dialogActionsContainer).toHaveClass('actions', 'left');
+    expect(dialogActionsContainer).toHaveClass("actions", "left");
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -43,7 +43,7 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);

package/src/Notifications/Dialog/DialogActions/DialogActions.tsx

@@ -1,12 +1,12 @@
-import React, { ComponentPropsWithRef } from 'react';
+import React, { ComponentPropsWithRef } from "react";
 import {
   BaseModalActions,
-  Props as BaseModalActionsProps,
-} from '../../BaseModal/BaseModalActions/BaseModalActions';
-import classes from './DialogActions.module.scss';
+  Props as BaseModalActionsProps
+} from "../../BaseModal/BaseModalActions/BaseModalActions";
+import classes from "./DialogActions.module.scss";
 
 export interface Props extends ComponentPropsWithRef<any>, BaseModalActionsProps {
-  align: 'left' | 'right';
+  align: "left" | "right";
 }
 
 export const DialogActions = React.forwardRef<HTMLElement, Props>(
@@ -15,7 +15,7 @@ export const DialogActions = React.forwardRef<HTMLElement, Props>(
       <BaseModalActions
         {...rest}
         ref={ref}
-        className={`${classes['actions']}${align === 'left' ? ' ' + classes['left'] : ''}`}
+        className={`${classes["actions"]}${align === "left" ? " " + classes["left"] : ""}`}
       >
         {children}
       </BaseModalActions>

package/src/Notifications/Dialog/DialogTitle/DialogTitle.test.tsx

@@ -1,26 +1,26 @@
-import React, { useEffect, useRef } from 'react';
-import { DialogTitle, Props } from './DialogTitle';
-import { render, getByText } from '@testing-library/react';
+import React, { useEffect, useRef } from "react";
+import { DialogTitle, Props } from "./DialogTitle";
+import { render, getByText } from "@testing-library/react";
 
 const initParams: Props = {
-  id: 'dialog-label',
-  title: 'Example title',
+  id: "dialog-label",
+  title: "Example title"
 };
 
-describe('DialogTitle', () => {
-  it('renders without crashing', () => {
+describe("DialogTitle", () => {
+  it("renders without crashing", () => {
     const { container } = render(<DialogTitle {...initParams} />);
 
     const dialogTitleContainer = container.children[0];
-    expect(dialogTitleContainer).toHaveClass('header');
+    expect(dialogTitleContainer).toHaveClass("header");
     expect(getByText(container, initParams.title));
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -36,7 +36,7 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);

package/src/Notifications/Dialog/DialogTitle/DialogTitle.tsx

@@ -1,8 +1,8 @@
-import React, { ComponentPropsWithRef } from 'react';
-import { Typography } from '../../../Typography/Typography';
-import classes from './DialogTitle.module.scss';
+import React, { ComponentPropsWithRef } from "react";
+import { Typography } from "../../../Typography/Typography";
+import classes from "./DialogTitle.module.scss";
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   id: string;
   title: string;
 }
@@ -10,8 +10,8 @@ export interface Props extends ComponentPropsWithRef<'div'> {
 export const DialogTitle = React.forwardRef<HTMLDivElement, Props>(
   ({ id, title, ...rest }: Props, ref) => {
     return (
-      <div {...rest} ref={ref} className={classes['header']}>
-        <Typography id={id} className={classes['title']} tag="h1" variant="h4">
+      <div {...rest} ref={ref} className={classes["header"]}>
+        <Typography id={id} className={classes["title"]} tag="h1" variant="h4">
           {title}
         </Typography>
       </div>