@onewelcome/react-lib-components 2.3.0 → 3.0.0

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

@@ -91,14 +91,6 @@ describe("Pagination events", () => {
     await userEvent.click(option25);
 
     await waitFor(() => expect(onPageSizeChange).toHaveBeenCalledWith(25));
-
-    await act(() => {
-      (currentPageInput as HTMLInputElement).focus();
-    });
-
-    await userEvent.keyboard("{backspace}{backspace}30{enter}");
-
-    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(30));
   });
 });
 
@@ -106,20 +98,17 @@ describe("different current pages and their effect on what renders", () => {
   it("is on the first page and does not render previous and first", () => {
     const { pagination } = createPagination();
 
-    expect(pagination.querySelector(".next")).toBeTruthy();
-    expect(pagination.querySelector(".previous")).toBeFalsy();
+    expect(pagination.querySelector('[data-paginate="next"]')).toBeTruthy();
+    expect(pagination.querySelector('[data-paginate="previous"]')).toHaveAttribute("disabled");
   });
 
-  it("is on the second page and does not render first", () => {
+  it("is on the second page and does not render first", async () => {
     const { pagination } = createPagination(defaultParams => ({
       ...defaultParams,
       currentPage: 2
     }));
 
-    expect(pagination.querySelector('[data-paginate="first"]')).toBeFalsy();
-    expect((pagination.querySelector(".current-value-input input") as HTMLInputElement).value).toBe(
-      "2"
-    );
+    expect(pagination.querySelector('[data-paginate="first"]')).toHaveAttribute("disabled");
   });
 
   it("is on the second to last page and does not render last", () => {
@@ -128,7 +117,7 @@ describe("different current pages and their effect on what renders", () => {
       currentPage: 499
     }));
 
-    expect(pagination.querySelector('[data-paginate="last"]')).toBeFalsy();
+    expect(pagination.querySelector('[data-paginate="last"]')).toHaveAttribute("disabled");
   });
 
   it("is on the last page and does not render next & last", () => {
@@ -137,8 +126,8 @@ describe("different current pages and their effect on what renders", () => {
       currentPage: 500
     }));
 
-    expect(pagination.querySelector('[data-paginate="last"]')).toBeFalsy();
-    expect(pagination.querySelector('[data-paginate="next"]')).toBeFalsy();
+    expect(pagination.querySelector('[data-paginate="last"]')).toHaveAttribute("disabled");
+    expect(pagination.querySelector('[data-paginate="next"]')).toHaveAttribute("disabled");
   });
 });
 
@@ -150,8 +139,8 @@ describe("omitted attributes still renders correctly", () => {
     }));
 
     expect(pagination.querySelector(".page")).toBeFalsy();
-    expect(pagination.querySelector(".next")).toBeTruthy();
-    expect(pagination.querySelector(".previous")).toBeFalsy();
+    expect(pagination.querySelector('[data-paginate="next"]')).toBeTruthy();
+    expect(pagination.querySelector('[data-paginate="previous"]')).toHaveAttribute("disabled");
   });
 
   it("still renders next if totalItems prop isn't given and we're on the first page", () => {
@@ -162,8 +151,8 @@ describe("omitted attributes still renders correctly", () => {
     }));
 
     expect(pagination.querySelector(".page")).toBeFalsy();
-    expect(pagination.querySelector(".next")).toBeTruthy();
-    expect(pagination.querySelector(".previous")).toBeTruthy();
+    expect(pagination.querySelector('[data-paginate="next"]')).toBeTruthy();
+    expect(pagination.querySelector('[data-paginate="previous"]')).toBeTruthy();
   });
 });
 

package/src/components/Pagination/Pagination.tsx

@@ -14,18 +14,11 @@
  *    limitations under the License.
  */
 
-import React, {
-  ForwardRefRenderFunction,
-  ComponentPropsWithRef,
-  Fragment,
-  useState,
-  useEffect
-} from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, Fragment } from "react";
 import classes from "./Pagination.module.scss";
 import readyclasses from "../../readyclasses.module.scss";
 import { IconButton } from "../Button/IconButton";
 import { Icons, Icon } from "../Icon/Icon";
-import { Input } from "../Form/Input/Input";
 import { Select } from "../Form/Select/Select";
 import { Option } from "../Form/Select/Option";
 import { Label } from "../Form/Label/Label";
@@ -41,9 +34,9 @@ export type PaginationTranslations = {
 export type PageChangeLabels = "next" | "previous" | "first" | "last";
 
 enum DefaultTranslations {
-  totalItems = "Total items",
+  totalItems = "items in total",
   itemsPerPage = "Items per page",
-  currentPage = "Page %1 of %2",
+  currentPage = "of %1 pages",
   itemsPerPageLabel = "Select how many items per page you want to see.",
   currentPageLabel = "What page you are currently on."
 }
@@ -51,7 +44,7 @@ enum DefaultTranslations {
 export type PageSize = 10 | 25 | 50;
 
 export interface Props extends Omit<ComponentPropsWithRef<"div">, "translate"> {
-  currentPage?: number;
+  currentPage: number;
   totalElements?: number;
   pageSize?: PageSize;
   translate?: PaginationTranslations;
@@ -72,8 +65,6 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   }: Props,
   ref
 ) => {
-  /** We use an internal state variable, because we don't want to fire onCurrentPageChange whenever onChange fires on the input. Rather, only when the Enter key is pressed. */
-  const [internalCurrentPage, setInternalCurrentPage] = useState(currentPage?.toString() ?? "1");
   const calculateAmountOfPages = () => {
     if (!totalElements) return 1;
 
@@ -84,71 +75,6 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     return Math.ceil(totalElements / pageSize);
   };
 
-  useEffect(() => {
-    setInternalCurrentPage(currentPage?.toString() ?? "1");
-  }, [currentPage]);
-
-  const onEnterListener = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.code === "Enter") {
-      onPageChange(Number(internalCurrentPage));
-    }
-  };
-
-  const renderCurrentPageTranslation = () => {
-    const amountOfPages = calculateAmountOfPages();
-
-    if (amountOfPages) {
-      const splitCurrentPageTranslation = translate.currentPage.split(" ");
-
-      return splitCurrentPageTranslation.map(string => {
-        if (string.includes("%1")) {
-          return (
-            <Fragment key={string}>
-              <Label
-                id="current-value-input-label"
-                htmlFor="current-value-input"
-                className={`${readyclasses["sr-only"]} ${classes["current-value-input-label"]}`}
-              >
-                {translate.currentPageLabel}
-              </Label>
-              <Input
-                aria-labelledby="current-value-input-label"
-                key="input"
-                id="current-value-input"
-                type="text"
-                size={currentPage?.toString().length}
-                max={calculateAmountOfPages()}
-                wrapperProps={{ className: classes["current-value-input"] }}
-                onKeyUp={onEnterListener}
-                onBlur={(event: React.ChangeEvent<HTMLInputElement>) =>
-                  onPageChange(Number(event.target.value))
-                }
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  setInternalCurrentPage(e.target.value)
-                }
-                name="current-value-input"
-                value={internalCurrentPage}
-                className={`${classes["form-element"]} ${classes["current-page-input"]}`}
-              />
-            </Fragment>
-          );
-        }
-
-        if (string.includes("%2")) {
-          return (
-            <div key={string}>
-              <strong>{string.replace("%2", amountOfPages.toString())}</strong>&nbsp;
-            </div>
-          );
-        }
-
-        return <div key={string}>{string}&nbsp;</div>;
-      });
-    }
-
-    return null;
-  };
-
   const onPageSizeChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const pageSizeNumber = Number(event.target.value) as PageSize;
     onPageSizeChange(pageSizeNumber);
@@ -159,19 +85,8 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   };
 
   return (
-    <div
-      {...rest}
-      ref={ref}
-      className={`${classes["pagination-wrapper"]} ${className ? className : ""}`}
-    >
-      {totalElements && (
-        <div className={classes["total"]}>
-          <span tabIndex={0}>
-            {translate.totalItems}: <span>{totalElements}</span>
-          </span>
-        </div>
-      )}
-      <div className={classes["pagination"]}>
+    <div {...rest} ref={ref} className={`${classes["pagination-wrapper"]} ${className ?? ""}`}>
+      <div className={classes["left"]}>
         {pageSize && (
           <div className={classes["per-page"]}>
             <Label id="page-size-select-label">{translate.itemsPerPage}</Label>
@@ -187,38 +102,79 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             </Select>
           </div>
         )}
+        {totalElements && (
+          <div className={classes["total"]}>
+            <span tabIndex={0}>
+              {totalElements}&nbsp;{translate.totalItems}
+            </span>
+          </div>
+        )}
+      </div>
+      <div className={classes["pagination"]}>
         <Fragment>
-          {!!((currentPage && currentPage > 2) || (currentPage && currentPage > 1)) && (
+          {totalElements && !!calculateAmountOfPages() && (
+            <div className={classes["page"]}>
+              <Label
+                id="current-value-input-label"
+                htmlFor="current-value-input"
+                className={`${readyclasses["sr-only"]} ${classes["current-value-select-label"]}`}
+              >
+                {translate.currentPageLabel}
+              </Label>
+              <Select
+                aria-labelledby="current-value-input-label"
+                key="input"
+                id="current-value-input"
+                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"]}`}
+              >
+                {Array.from(Array(calculateAmountOfPages()!).keys()).map(page => (
+                  <Option key={page} value={(page + 1).toString()}>
+                    {(page + 1).toString()}
+                  </Option>
+                ))}
+              </Select>
+              <span className={classes["page-total"]}>
+                {translate.currentPage.replace(
+                  "%1",
+                  Math.ceil(totalElements / pageSize).toString()
+                )}
+              </span>
+            </div>
+          )}
+          {!!currentPage && (
             <div className={classes["previous"]}>
-              {currentPage > 2 && (
+              {
                 <IconButton
+                  disabled={currentPage <= 2}
                   title="first"
                   onClick={() => onPageChangeHandler(0)}
                   data-paginate="first"
                 >
                   <Icon icon={Icons.NavigationFirst} />
                 </IconButton>
-              )}
-              {currentPage > 1 && (
+              }
+              {
                 <IconButton
+                  disabled={currentPage <= 1}
                   title="previous"
                   onClick={() => onPageChangeHandler(currentPage - 1)}
                   data-paginate="previous"
                 >
                   <Icon icon={Icons.ChevronLeft} />
                 </IconButton>
-              )}
+              }
             </div>
           )}
-          {totalElements && !!calculateAmountOfPages() && (
-            <div className={classes["page"]}>{renderCurrentPageTranslation()}</div>
-          )}
           <div className={classes["next"]}>
-            {!!(
-              (currentPage !== undefined && currentPage < calculateAmountOfPages()!) ||
-              (currentPage !== undefined && !totalElements)
-            ) && (
+            {!!(currentPage !== undefined || (currentPage !== undefined && !totalElements)) && (
               <IconButton
+                disabled={currentPage >= calculateAmountOfPages()!}
                 title="next"
                 onClick={() => onPageChangeHandler(currentPage + 1)}
                 data-paginate="next"
@@ -226,10 +182,11 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
                 <Icon icon={Icons.ChevronRight} />
               </IconButton>
             )}
-            {!!(currentPage && totalElements && currentPage < calculateAmountOfPages()! - 1) && (
+            {!!(currentPage && totalElements) && (
               <IconButton
+                disabled={currentPage >= calculateAmountOfPages()! - 1}
                 title="last"
-                onClick={() => onPageChangeHandler(totalElements / pageSize)}
+                onClick={() => onPageChangeHandler(Math.ceil(totalElements / pageSize))}
                 data-paginate="last"
               >
                 <Icon icon={Icons.NavigationLast} />

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

@@ -20,7 +20,7 @@
   $transition-property: transform, opacity;
 
   position: fixed;
-  z-index: 1;
+  z-index: 100;
   pointer-events: none;
   background-color: var(--light);
   border-radius: 8px;

package/src/components/Popover/Popover.tsx

@@ -20,7 +20,8 @@ import React, {
   ReactNode,
   RefObject,
   useEffect,
-  useRef
+  useRef,
+  useState
 } from "react";
 import { Offset, Placement, usePosition } from "../../hooks/usePosition";
 import classes from "./Popover.module.scss";
@@ -51,9 +52,9 @@ const PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   },
   ref
 ) => {
+  const [showPopover, setShowPopover] = useState(false);
   const elToBePositioned = useRef<HTMLDivElement>(null);
-
-  const { top, left, right, bottom, calculatePosition } = usePosition({
+  const { top, left, right, bottom, calculatePosition, initialCalculationDone } = usePosition({
     elementToBePositioned: elToBePositioned,
     relativeElement: anchorEl,
     offset: offset,
@@ -63,7 +64,13 @@ const PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   });
 
   useEffect(() => {
-    if (!show) {
+    if (initialCalculationDone) {
+      setShowPopover(!!show);
+    }
+  }, [show, initialCalculationDone]);
+
+  useEffect(() => {
+    if (!showPopover) {
       return;
     }
 
@@ -74,23 +81,31 @@ const PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       window.removeEventListener("resize", calculatePosition);
       window.removeEventListener("scroll", calculatePosition);
     };
-  }, [show]);
+  }, [showPopover]);
 
   useEffect(() => {
     calculatePosition();
-  }, [show]);
+  }, [showPopover]);
 
   useEffect(() => {
-    const isAnchorOffscreen =
-      show &&
-      (top === 0 ||
-        left === 0 ||
-        right === 0 ||
-        bottom === 0 ||
-        window.innerHeight - (elToBePositioned.current as HTMLElement).offsetHeight === top);
+    const anchor = anchorEl?.current as HTMLElement;
+
+    if (anchor) {
+      const anchorTop = anchor.getBoundingClientRect().top;
+      const anchorBottom = anchor.getBoundingClientRect().bottom;
+
+      const isAnchorOffscreen =
+        showPopover &&
+        (Number(top) < 0 ||
+          Number(left) < 0 ||
+          Number(right) < 0 ||
+          Number(bottom) < 0 ||
+          anchorTop < 0 ||
+          anchorBottom > window.innerHeight);
 
-    if (isAnchorOffscreen) {
-      onAnchorOutOfView?.();
+      if (isAnchorOffscreen) {
+        onAnchorOutOfView?.();
+      }
     }
   }, [top, left, right, bottom]);
 
@@ -98,7 +113,7 @@ const PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     <div ref={ref} {...rest}>
       <div
         ref={elToBePositioned}
-        className={`${classes.popover} ${className ?? ""} ${show ? classes.show : ""}`}
+        className={`${classes.popover} ${className ?? ""} ${showPopover ? classes.show : ""}`}
         style={{ top: top, left: left, right: right, bottom: bottom }}
       >
         {children}

package/src/components/ProgressBar/ProgressBar.module.scss

@@ -15,10 +15,29 @@
  */
 @import "../../mixins.module.scss";
 
+$speed: 1.5s;
+
+.header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.label,
+.percentage {
+  font-weight: 500;
+}
+
+.caption {
+  color: var(--color-blue-grey500);
+  line-height: var(--default-line-height);
+  margin-top: 0.25rem;
+  display: block;
+}
+
 .progress-bar {
   position: relative;
   display: block;
-  height: 0.5rem;
+  height: 0.25rem;
   width: 100%;
   border-radius: 0.25rem;
   background-color: var(--progress-bar-background-color);
@@ -32,23 +51,41 @@
     position: absolute;
     height: 0.5rem;
     border-radius: 0.25rem;
-    background-color: var(--color-primary);
+    background-color: var(--color-primary500);
+    transition: width 0.2s ease-in-out;
+    &.loading-state {
+      width: 33.3%;
+      animation: linear $speed slide-in infinite;
+    }
+  }
+
+  .bar2 {
+    position: absolute;
+    left: -30%;
+    height: 0.5rem;
+    border-radius: 0.25rem;
+    background-color: var(--color-primary500);
+    opacity: 0;
     &.loading-state {
-      width: 50%;
-      animation: cubic-bezier(0.23, 0.78, 0.78, 0.23) 1s slide-in infinite;
-      @keyframes slide-in {
-        0% {
-          left: -50%;
-        }
-
-        100% {
-          left: 100%;
-        }
-      }
+      width: 33.3%;
+      animation: linear $speed slide-in infinite;
+      animation-delay: calc($speed / 2);
     }
   }
 }
 
+@keyframes slide-in {
+  0% {
+    opacity: 1;
+    left: -50%;
+  }
+
+  100% {
+    opacity: 1;
+    left: 150%;
+  }
+}
+
 .placeholder {
   display: none;
 

package/src/components/ProgressBar/ProgressBar.test.tsx

@@ -3,7 +3,10 @@ import { ProgressBar, Props } from "./ProgressBar";
 import { render } from "@testing-library/react";
 
 const defaultParams: Props = {
-  placeholderText: "Loading"
+  label: "Loading...",
+  percentage: 0,
+  accessibilityTitle: "Progress bar",
+  caption: "One moment please..."
 };
 
 const createProgressBar = (params?: (defaultParams: Props) => Props) => {
@@ -22,13 +25,22 @@ const createProgressBar = (params?: (defaultParams: Props) => Props) => {
 
 describe("ProgressBar should render", () => {
   it("renders without crashing", () => {
-    const { ProgressBarComponent } = createProgressBar(defaultParams => ({
+    const { ProgressBarComponent, getByText } = createProgressBar(defaultParams => ({
       ...defaultParams,
       className: "test"
     }));
 
     expect(ProgressBarComponent).toBeDefined();
     expect(ProgressBarComponent).toHaveClass(`test`, { exact: true });
+    expect(ProgressBarComponent).toHaveAttribute("role", "progressbar");
+    expect(ProgressBarComponent).toHaveAttribute("aria-valuemin", "0");
+    expect(ProgressBarComponent).toHaveAttribute("aria-valuemax", "100");
+    expect(ProgressBarComponent).toHaveAttribute("aria-valuenow", "0");
+    expect(ProgressBarComponent).toHaveAttribute("title", "Progress bar");
+    expect(getByText("Loading...")).toBeDefined();
+    expect(getByText("Loading...")).toHaveClass("label");
+    expect(getByText("One moment please...")).toBeDefined();
+    expect(getByText("One moment please...")).toHaveClass("caption");
   });
 });
 
@@ -65,7 +77,7 @@ describe("ProgressBar should change styles depending on props", () => {
     }));
 
     const bar = ProgressBarComponent.querySelector(".bar");
-    expect(bar).toHaveClass("w-40");
+    expect(bar).toHaveStyle("width: 40%");
   });
 
   it("should show a loading effect when 'completed' prop is not provided", () => {

package/src/components/ProgressBar/ProgressBar.tsx

@@ -19,26 +19,55 @@ import { Typography } from "../Typography/Typography";
 import classes from "./ProgressBar.module.scss";
 
 export interface Props extends Omit<ComponentPropsWithRef<"span">, "children"> {
-  placeholderText: string;
+  label?: string;
+  caption?: string;
   completed?: number;
+  percentage?: number;
+  accessibilityTitle?: string;
 }
 
 const ProgressBarComponent: ForwardRefRenderFunction<HTMLSpanElement, Props> = (
-  { placeholderText, completed, ...rest }: Props,
+  { label, caption, completed, percentage, accessibilityTitle = "Progress bar", ...rest }: Props,
   ref
 ) => {
   return (
-    <span {...rest} ref={ref} role="progressbar">
+    <span
+      {...rest}
+      ref={ref}
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={percentage}
+      title={accessibilityTitle}
+    >
+      <div className={classes["header"]}>
+        {label && (
+          <Typography className={classes["label"]} spacing={{ marginBottom: 2 }} variant="body">
+            {label}
+          </Typography>
+        )}
+        {percentage !== undefined && (
+          <Typography
+            className={classes["percentage"]}
+            spacing={{ marginBottom: 2 }}
+            variant="body"
+          >
+            {percentage}%
+          </Typography>
+        )}
+      </div>
       <span className={classes["progress-bar"]}>
         <span
-          className={`${classes["bar"]} ${
-            completed ? classes[`w-${5 * Math.round(completed / 5)}`] : classes["loading-state"]
-          }`}
+          className={`${classes["bar"]} ${completed ? "" : classes["loading-state"]}`}
+          style={{ width: `${completed}%` }}
         />
+        <span className={`${classes["bar2"]} ${completed ? "" : classes["loading-state"]}`} />
       </span>
-      <Typography className={classes["placeholder"]} spacing={{ marginBottom: 0 }} variant="body">
-        {placeholderText}
-      </Typography>
+      {caption && (
+        <Typography className={classes["caption"]} spacing={{ marginBottom: 2 }} variant="sub-text">
+          {caption}
+        </Typography>
+      )}
     </span>
   );
 };

package/src/components/Tag/Tag.module.scss

@@ -0,0 +1,24 @@
+$tagFontSize: 0.75rem;
+
+.tag {
+  font-size: $tagFontSize;
+  padding: 0.375rem 0.7rem;
+  border-radius: 3.125rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+
+  &.tag-enabled {
+    background-color: var(--color-green100);
+  }
+
+  &.tag-disabled {
+    background-color: var(--color-blue-grey100);
+  }
+
+  .label {
+    line-height: $tagFontSize;
+    font-size: inherit;
+    color: inherit;
+  }
+}