@onewelcome/react-lib-components 4.1.0 → 4.2.0

package/src/components/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.tsx

@@ -26,7 +26,7 @@ import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
 import { Icons } from "../../../Icon/Icon";
 import { Fieldset, Props as FieldsetProps } from "../../../Form/Fieldset/Fieldset";
 
-export interface Props extends ComponentPropsWithRef<"div">, WrapperProps {
+export interface Props extends ComponentPropsWithRef<"div">, Omit<WrapperProps, "success"> {
   children: ReactElement[] | ReactElement;
   fieldsetProps: FieldsetProps;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -80,4 +80,7 @@ const CheckboxWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
   );
 };
 
+/**
+ * @deprecated
+ */
 export const CheckboxWrapper = React.forwardRef(CheckboxWrapperComponent);

package/src/components/Form/Wrapper/InputWrapper/InputWrapper.test.tsx

@@ -20,6 +20,7 @@ import { render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
+  success: false,
   label: "Example label",
   type: "text",
   name: "Example input",

package/src/components/Form/Wrapper/InputWrapper/InputWrapper.tsx

@@ -31,6 +31,7 @@ export interface Props extends ComponentPropsWithRef<"div">, WrapperProps {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  success?: boolean;
 }
 
 const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (

package/src/components/Form/Wrapper/RadioWrapper/RadioWrapper.module.scss

@@ -24,5 +24,5 @@
 
 .radio-wrapper-error [data-icon] {
   font-size: 1.25rem;
-  vertical-align: bottom;
+  vertical-align: text-bottom;
 }

package/src/components/Form/Wrapper/SelectWrapper/SelectWrapper.test.tsx

@@ -23,6 +23,7 @@ import userEvent from "@testing-library/user-event";
 const onChangeHandler = jest.fn();
 
 const defaultParams: Props = {
+  success: false,
   children: [
     <Option key="1" value="option1">
       Option 1

package/src/components/Form/Wrapper/SelectWrapper/SelectWrapper.tsx

@@ -31,6 +31,7 @@ export interface Props
   error?: boolean;
   selectProps?: PartialSelectProps;
   onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  success?: boolean;
 }
 
 const SelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (

package/src/components/Form/Wrapper/TextareaWrapper/TextareaWrapper.test.tsx

@@ -20,6 +20,7 @@ import { render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
+  success: false,
   name: "textarea",
   label: "textarea_label",
   value: "value",

package/src/components/Form/Wrapper/TextareaWrapper/TextareaWrapper.tsx

@@ -34,13 +34,13 @@ export interface Props
   onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
   onMouseEnter?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
   onMouseLeave?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
+  success?: boolean;
 }
 
 const TextareaWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   {
     name,
     error,
-    success,
     value,
     label,
     placeholder,
@@ -52,6 +52,7 @@ const TextareaWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
     onMouseEnter,
     onMouseLeave,
     disabled,
+    success,
     ...rest
   }: Props,
   ref

package/src/components/Form/Wrapper/Wrapper/Wrapper.tsx

@@ -33,7 +33,7 @@ export interface Props extends ComponentPropsWithRef<"div">, FormGroupProps {
 }
 
 /** For components that extend this component we create an interface (InputWrapper, SelectWrapper, etc.) */
-export interface WrapperProps extends FormElement {
+export interface WrapperProps extends Omit<FormElement, "success"> {
   errorMessage?: string;
   helperText?: string;
   helperProps?: HelperProps;

package/src/components/Notifications/BaseModal/BaseModal.module.scss

@@ -15,13 +15,13 @@
  */
 
 @use "../../../mixins.module.scss";
+@use "../../../variables.scss";
 
-$zIndex: 10;
 $marginTop: 3.125rem;
 
 .modal {
   position: fixed;
-  z-index: $zIndex;
+  z-index: variables.$modal-z-index;
   top: 0;
   left: 0;
   height: 100vh;
@@ -57,7 +57,7 @@ $marginTop: 3.125rem;
 .container {
   margin-top: $marginTop;
   background-color: var(--modal-background-color);
-  z-index: $zIndex + 1;
+  z-index: variables.$modal-z-index + 1;
   width: calc(100% - 2rem);
   height: auto;
   max-height: calc(90% - $marginTop);

package/src/components/Notifications/NotificationProvider/NotificationContext.test.tsx

@@ -31,6 +31,75 @@ jest.mock("../../../util/helper", () => ({
   })
 }));
 
+const renderSnackbarProvider = () => {
+  const AppComponent = () => {
+    const { addNotification } = useNotificationContext();
+    const [index, setIndex] = useState(0);
+    return (
+      <div>
+        content
+        <button
+          data-testid="show-success"
+          onClick={() => {
+            addNotification({
+              status: 200,
+              type: "success",
+              title: "Test Success",
+              message: "Test successful request"
+            });
+            setIndex(index + 1);
+          }}
+        >
+          Success
+        </button>
+        <button
+          data-testid="show-error"
+          onClick={() => {
+            addNotification({
+              status: 400,
+              type: "error",
+              title: "TestError",
+              message: "Test bad request"
+            });
+            setIndex(index + 1);
+          }}
+        >
+          Error
+        </button>
+      </div>
+    );
+  };
+
+  const queries = render(
+    <SnackbarProvider closeButtonTitle="close">
+      <NotificationProvider>
+        <AppComponent />
+      </NotificationProvider>
+    </SnackbarProvider>
+  );
+
+  const showSuccessSnackbarBtn = getByTestId(queries.container, "show-success");
+  const showErrorSnackbarBtn = getByTestId(queries.container, "show-error");
+
+  return {
+    ...queries,
+    showSuccessSnackbarBtn,
+    showErrorSnackbarBtn
+  };
+};
+
+describe("Actually shows the snackbars showing up", () => {
+  it("Shows the snackbars", async () => {
+    const { showSuccessSnackbarBtn, showErrorSnackbarBtn, getByText } = renderSnackbarProvider();
+
+    await userEvent.click(showSuccessSnackbarBtn);
+    await userEvent.click(showErrorSnackbarBtn);
+
+    await waitFor(() => expect(getByText("Test Success")).toBeInTheDocument());
+    await waitFor(() => expect(getByText("Test bad request")).toBeInTheDocument());
+  });
+});
+
 describe("Notification", () => {
   describe("useNotificationContext", () => {
     it("returns the correct context", () => {
@@ -378,72 +447,3 @@ describe("Notification", () => {
     });
   });
 });
-
-const renderSnackbarProvider = () => {
-  const AppComponent = () => {
-    const { addNotification } = useNotificationContext();
-    const [index, setIndex] = useState(0);
-    return (
-      <div>
-        content
-        <button
-          data-testid="show-success"
-          onClick={() => {
-            addNotification({
-              status: 200,
-              type: "success",
-              title: "Test Success",
-              message: "Test successful request"
-            });
-            setIndex(index + 1);
-          }}
-        >
-          Success
-        </button>
-        <button
-          data-testid="show-error"
-          onClick={() => {
-            addNotification({
-              status: 400,
-              type: "error",
-              title: "TestError",
-              message: "Test bad request"
-            });
-            setIndex(index + 1);
-          }}
-        >
-          Error
-        </button>
-      </div>
-    );
-  };
-
-  const queries = render(
-    <SnackbarProvider closeButtonTitle="close">
-      <NotificationProvider>
-        <AppComponent />
-      </NotificationProvider>
-    </SnackbarProvider>
-  );
-
-  const showSuccessSnackbarBtn = getByTestId(queries.container, "show-success");
-  const showErrorSnackbarBtn = getByTestId(queries.container, "show-error");
-
-  return {
-    ...queries,
-    showSuccessSnackbarBtn,
-    showErrorSnackbarBtn
-  };
-};
-
-describe("Actually shows the snackbars showing up", () => {
-  it("Shows the snackbars", async () => {
-    const { showSuccessSnackbarBtn, showErrorSnackbarBtn, getByText } = renderSnackbarProvider();
-
-    await userEvent.click(showSuccessSnackbarBtn);
-    await userEvent.click(showErrorSnackbarBtn);
-
-    await waitFor(() => expect(getByText("Test Success")).toBeInTheDocument());
-    await waitFor(() => expect(getByText("Test bad request")).toBeInTheDocument());
-  });
-});

package/src/components/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.module.scss

@@ -14,10 +14,11 @@
  *    limitations under the License.
  */
 @use "../../../../mixins.module.scss";
+@use "../../../../variables.scss";
 
 .snackbars {
   position: fixed;
-  z-index: 20;
+  z-index: variables.$snackbar-z-index;
   width: 100%;
   display: flex;
   flex-direction: column;

package/src/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.module.scss

@@ -14,7 +14,6 @@
  *    limitations under the License.
  */
 
-@use "../../../../readyclasses.module.scss";
 @use "../../../../mixins.module.scss";
 
 .snackbar {
@@ -143,7 +142,7 @@
       cursor: not-allowed;
     }
 
-    @include readyclasses.focusOutline(var(--snackbar-text-color));
+    @include mixins.focusVisibleOutline();
 
     &:not(:disabled):hover,
     &:not(:disabled):focus {

package/src/components/Pagination/Pagination.module.scss

@@ -34,6 +34,10 @@
   .form-element {
     height: 2.5rem;
 
+    .search-input-wrapper {
+      width: 2.75rem;
+    }
+
     button {
       min-height: 2.5rem;
     }

package/src/components/Pagination/Pagination.test.tsx

@@ -16,7 +16,7 @@
 
 import React, { useEffect, useRef } from "react";
 import { Pagination, Props } from "./Pagination";
-import { act, render, waitFor } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
@@ -60,8 +60,8 @@ describe("Pagination events", () => {
     const { pagination } = createPagination(defaultParams => ({
       ...defaultParams,
       currentPage: 10,
-      onPageChange: onPageChange,
-      onPageSizeChange: onPageSizeChange
+      onPageChange,
+      onPageSizeChange
     }));
 
     const next = pagination.querySelector('[data-paginate="next"]')!;
@@ -79,7 +79,7 @@ describe("Pagination events", () => {
     await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(9));
 
     await userEvent.click(first);
-    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(0));
+    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(1));
 
     await userEvent.click(last);
     await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(50));
@@ -102,28 +102,28 @@ describe("different current pages and their effect on what renders", () => {
     expect(pagination.querySelector('[data-paginate="previous"]')).toHaveAttribute("disabled");
   });
 
-  it("is on the second page and does not render first", async () => {
+  it("is on the second page and does render first", async () => {
     const { pagination } = createPagination(defaultParams => ({
       ...defaultParams,
       currentPage: 2
     }));
 
-    expect(pagination.querySelector('[data-paginate="first"]')).toHaveAttribute("disabled");
+    expect(pagination.querySelector('[data-paginate="first"]')).not.toHaveAttribute("disabled");
   });
 
-  it("is on the second to last page and does not render last", () => {
+  it("is on the second to last page and does render last", () => {
     const { pagination } = createPagination(defaultParams => ({
       ...defaultParams,
-      currentPage: 499
+      currentPage: 49
     }));
 
-    expect(pagination.querySelector('[data-paginate="last"]')).toHaveAttribute("disabled");
+    expect(pagination.querySelector('[data-paginate="last"]')).not.toHaveAttribute("disabled");
   });
 
   it("is on the last page and does not render next & last", () => {
     const { pagination } = createPagination(defaultParams => ({
       ...defaultParams,
-      currentPage: 500
+      currentPage: 50
     }));
 
     expect(pagination.querySelector('[data-paginate="last"]')).toHaveAttribute("disabled");

package/src/components/Pagination/Pagination.tsx

@@ -14,7 +14,13 @@
  *    limitations under the License.
  */
 
-import React, { ForwardRefRenderFunction, ComponentPropsWithRef, Fragment } from "react";
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  Fragment,
+  useState,
+  useEffect
+} from "react";
 import classes from "./Pagination.module.scss";
 import readyclasses from "../../readyclasses.module.scss";
 import { IconButton } from "../Button/IconButton";
@@ -74,9 +80,12 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
 
     return Math.ceil(totalElements / pageSize);
   };
+  const pagesAmount = calculateAmountOfPages();
+  const [resetPageNoSelect, setResetPageNoSelect] = useState(false);
 
   const onPageSizeChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const pageSizeNumber = Number(event.target.value) as PageSize;
+    setResetPageNoSelect(true);
     onPageSizeChange(pageSizeNumber);
   };
 
@@ -84,6 +93,10 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     onPageChange(pageToGoTo);
   };
 
+  useEffect(() => {
+    resetPageNoSelect && setResetPageNoSelect(false);
+  }, [resetPageNoSelect]);
+
   return (
     <div {...rest} ref={ref} className={`${classes["pagination-wrapper"]} ${className ?? ""}`}>
       <div className={classes["left"]}>
@@ -112,7 +125,7 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       </div>
       <div className={classes["pagination"]}>
         <Fragment>
-          {totalElements && !!calculateAmountOfPages() && (
+          {totalElements && !!pagesAmount && (
             <div className={classes["page"]}>
               <Label
                 id="current-value-input-label"
@@ -122,18 +135,23 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
                 {translate.currentPageLabel}
               </Label>
               <Select
-                aria-labelledby="current-value-input-label"
+                labeledBy="current-value-input-label"
                 key="input"
                 id="current-value-input"
-                size={currentPage?.toString().length}
+                size={currentPage.toString().length}
                 onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
                   onPageChangeHandler(Number(e.target.value))
                 }
                 name="current-value-input"
                 value={currentPage.toString()}
                 className={`${classes["form-element"]} ${classes["current-page-select"]}`}
+                searchInputProps={{
+                  wrapperProps: { className: classes["search-input-wrapper"] },
+                  reset: resetPageNoSelect,
+                  autoComplete: "off"
+                }}
               >
-                {Array.from(Array(calculateAmountOfPages()!).keys()).map(page => (
+                {Array.from(Array(pagesAmount).keys()).map(page => (
                   <Option key={page} value={(page + 1).toString()}>
                     {(page + 1).toString()}
                   </Option>
@@ -151,9 +169,9 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             <div className={classes["previous"]}>
               {
                 <IconButton
-                  disabled={currentPage <= 2}
+                  disabled={currentPage <= 1}
                   title="first"
-                  onClick={() => onPageChangeHandler(0)}
+                  onClick={() => onPageChangeHandler(1)}
                   data-paginate="first"
                 >
                   <Icon icon={Icons.NavigationFirst} />
@@ -174,7 +192,7 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
           <div className={classes["next"]}>
             {!!(currentPage !== undefined || (currentPage !== undefined && !totalElements)) && (
               <IconButton
-                disabled={currentPage >= calculateAmountOfPages()!}
+                disabled={currentPage >= pagesAmount}
                 title="next"
                 onClick={() => onPageChangeHandler(currentPage + 1)}
                 data-paginate="next"
@@ -184,7 +202,7 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             )}
             {!!(currentPage && totalElements) && (
               <IconButton
-                disabled={currentPage >= calculateAmountOfPages()! - 1}
+                disabled={currentPage >= pagesAmount}
                 title="last"
                 onClick={() => onPageChangeHandler(Math.ceil(totalElements / pageSize))}
                 data-paginate="last"

package/src/components/Popover/Popover.module.scss

@@ -15,16 +15,20 @@
  */
 
 @use "../../mixins.module.scss";
+@use "../../variables.scss";
 
 .popover {
   $transition-property: transform, opacity;
 
   position: fixed;
-  z-index: 100;
+  z-index: variables.$popover-z-index;
   pointer-events: none;
   background-color: var(--light);
-  border-radius: 8px;
-  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.29);
+  border-radius: 0.125rem;
+  box-shadow:
+    0px 4px 5px 0px rgba(1, 5, 50, 0.2),
+    0px 3px 14px 0px rgba(1, 5, 50, 0.12),
+    0px 8px 10px 0px rgba(1, 5, 50, 0.14);
   opacity: 0;
   transform: scale(0.5);
 

package/src/components/Tabs/Tab.tsx

@@ -21,6 +21,7 @@ export interface Props extends Omit<HTMLProps<HTMLDivElement>, "children"> {
   title: string;
   children?: any;
   tabActive?: boolean;
+  icon?: React.ReactNode;
 }
 
 export const Tab = ({ children, tabActive, ...rest }: Props) => {

package/src/components/Tabs/TabButton.module.scss

@@ -13,40 +13,73 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
+@use "../../mixins.module.scss";
 
 .tabbutton {
+  color: var(--tab-text-color);
   border: 0;
   border-radius: 0;
   font-size: var(--font-size);
   line-height: var(--default-line-height);
   margin: 0;
-  padding: 0.25rem 0 1rem 0;
-  min-height: 2.5rem;
+  padding: 0.5rem 1rem;
   cursor: pointer;
   font-family: var(--font-family);
   background-color: transparent;
   white-space: nowrap;
   position: relative;
   font-weight: normal;
-  color: transparent;
+  border-bottom-style: var(--tablist-border-style);
+  border-bottom-width: var(--tablist-border-width);
+  border-bottom-color: var(--tablist-border-color);
 
-  &:focus-visible {
-    outline-color: var(--color-focus);
+  @include mixins.focusVisibleOutline($outlineOffset: 0);
+  &:where(:focus-visible) {
+    z-index: 1;
   }
 
-  span {
-    color: var(--tab-text-color);
-    font-weight: normal;
-    position: absolute;
-    left: 0;
+  &:hover {
+    background-color: var(--tab-hover-color);
+  }
+
+  &:active {
+    background-color: var(--tab-pressed-color);
   }
 
   &.selected {
-    color: var(--color-primary);
+    color: var(--tab-active-text-color);
+  }
+
+  &.fluid {
+    flex: 1;
+  }
+
+  &.has-icon {
+    gap: 0.25rem;
+    display: inline-flex;
+    align-items: center;
+
+    i {
+      display: flex;
+    }
+
+    span[data-icon] {
+      display: inline-block;
+      font-size: 1.25rem;
+      width: 1.25rem;
+    }
+
+    &.top-icon,
+    &.bottom-icon {
+      flex-direction: column;
+    }
+
+    &.left-icon i {
+      order: -1;
+    }
 
-    span {
-      color: transparent;
-      visibility: hidden;
+    &.top-icon i {
+      order: -1;
     }
   }
 }

package/src/components/Tabs/TabButton.tsx

@@ -26,10 +26,13 @@ import classes from "./TabButton.module.scss";
 export interface Props extends ComponentPropsWithRef<"button"> {
   tabActive?: boolean;
   focused?: boolean;
+  fluid?: boolean;
+  icon?: React.ReactNode;
+  iconPosition?: "left" | "right" | "top" | "bottom";
 }
 
 const TabButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
-  { children, tabActive, focused, title, ...rest }: Props,
+  { children, tabActive, focused, title, fluid, icon, iconPosition, className, ...rest }: Props,
   ref
 ) => {
   let buttonRef = (ref as RefObject<HTMLButtonElement>) || createRef<HTMLButtonElement>();
@@ -40,18 +43,22 @@ const TabButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
     }
   }, [buttonRef.current, focused]);
 
+  const tabButtonClasses = [classes["tabbutton"]];
+  tabActive && tabButtonClasses.push(classes["selected"]);
+  fluid && tabButtonClasses.push(classes["fluid"]);
+  className && tabButtonClasses.push(className);
+  icon && tabButtonClasses.push(classes["has-icon"], classes[`${iconPosition}-icon`]);
+
   return (
     <button
       {...rest}
-      className={`${classes["tabbutton"]} ${tabActive ? classes["selected"] : ""} ${
-        rest.className ?? ""
-      }`}
+      className={tabButtonClasses.join(" ")}
       ref={buttonRef}
       role="tab"
       type="button"
     >
-      <span aria-hidden="true">{children}</span>
       {children}
+      {icon && <i>{icon}</i>}
     </button>
   );
 };