@onewelcome/react-lib-components 1.9.2 → 2.0.0-alpha.1

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,235 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, Fragment, useState } 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";
+
+export type PaginationTranslations = {
+  totalItems: string;
+  itemsPerPage: string;
+  itemsPerPageLabel: string;
+  currentPage: string;
+  currentPageLabel: string;
+};
+
+export type PageChangeLabels = "next" | "previous" | "first" | "last";
+
+enum DefaultTranslations {
+  totalItems = "Total items",
+  itemsPerPage = "Items per page",
+  currentPage = "Page %1 of %2",
+  itemsPerPageLabel = "Select how many items per page you want to see.",
+  currentPageLabel = "What page you are currently on."
+}
+
+export type PageSize = 10 | 25 | 50;
+
+export interface Props extends Omit<ComponentPropsWithRef<"div">, "translate"> {
+  currentPage?: number;
+  totalElements?: number;
+  pageSize?: PageSize;
+  translate?: PaginationTranslations;
+  onPageChange: (pageToGoTo: number) => void;
+  onPageSizeChange: (pageSize: PageSize) => void;
+}
+
+const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    totalElements,
+    pageSize = 10,
+    translate = DefaultTranslations,
+    currentPage,
+    className,
+    onPageChange,
+    onPageSizeChange,
+    ...rest
+  }: 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;
+
+    if (Math.ceil(totalElements / pageSize) < 1) {
+      return 1;
+    }
+
+    return Math.ceil(totalElements / pageSize);
+  };
+
+  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);
+  };
+
+  const onPageChangeHandler = (pageToGoTo: number) => {
+    onPageChange(pageToGoTo);
+  };
+
+  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"]}>
+        {pageSize && (
+          <div className={classes["per-page"]}>
+            <Label id="page-size-select-label">{translate.itemsPerPage}</Label>
+            <Select
+              labeledBy="page-size-select-label"
+              className={`${classes["form-element"]} ${classes["page-size-select"]}`}
+              value={pageSize.toString()}
+              onChange={onPageSizeChangeHandler}
+            >
+              <Option value="10">10</Option>
+              <Option value="25">25</Option>
+              <Option value="50">50</Option>
+            </Select>
+          </div>
+        )}
+        <Fragment>
+          {!!((currentPage && currentPage > 2) || (currentPage && currentPage > 1)) && (
+            <div className={classes["previous"]}>
+              {currentPage > 2 && (
+                <IconButton
+                  title="first"
+                  onClick={() => onPageChangeHandler(0)}
+                  data-paginate="first"
+                >
+                  <Icon icon={Icons.NavigationFirst} />
+                </IconButton>
+              )}
+              {currentPage > 1 && (
+                <IconButton
+                  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)
+            ) && (
+              <IconButton
+                title="next"
+                onClick={() => onPageChangeHandler(currentPage + 1)}
+                data-paginate="next"
+              >
+                <Icon icon={Icons.ChevronRight} />
+              </IconButton>
+            )}
+            {!!(currentPage && totalElements && currentPage < calculateAmountOfPages()! - 1) && (
+              <IconButton
+                title="last"
+                onClick={() => onPageChangeHandler(totalElements / pageSize)}
+                data-paginate="last"
+              >
+                <Icon icon={Icons.NavigationLast} />
+              </IconButton>
+            )}
+          </div>
+        </Fragment>
+      </div>
+    </div>
+  );
+};
+
+export const Pagination = React.forwardRef(PaginationComponent);

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

@@ -0,0 +1,38 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+@use "../../mixins.module.scss";
+
+.popover {
+  $transition-property: transform, opacity;
+
+  position: fixed;
+  z-index: 1;
+  pointer-events: none;
+  background-color: var(--light);
+  border-radius: 8px;
+  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.29);
+  opacity: 0;
+  transform: scale(0.5);
+
+  @include mixins.transition($transition-property, 0.2s, ease-in-out);
+
+  &.show {
+    transform: scale(1);
+    pointer-events: auto;
+    opacity: 1;
+  }
+}

package/src/components/Popover/Popover.test.tsx

@@ -0,0 +1,103 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { Fragment, useRef } from "react";
+import { Popover, Props } from "./Popover";
+import { render } from "@testing-library/react";
+import { usePosition } from "../../hooks/usePosition";
+
+const createPopover = (params?: (defaultParams: Props) => Props) => {
+  const Component = () => {
+    const relativeElement = useRef<HTMLButtonElement>(null);
+    const elementToBePositioned = useRef<HTMLDivElement>(null);
+
+    const defaultParams: Props = {
+      children: (
+        <ul>
+          <li>Test</li>
+          <li>Test</li>
+          <li>Test</li>
+        </ul>
+      ),
+      show: true,
+      placement: { vertical: "top", horizontal: "left" }
+    };
+    let parameters: Props = defaultParams;
+
+    if (params) {
+      parameters = params(defaultParams);
+    }
+
+    const { top, left, bottom, right, calculatePosition } = usePosition({
+      elementToBePositioned: elementToBePositioned,
+      relativeElement: relativeElement,
+      ...parameters
+    });
+
+    return (
+      <Fragment>
+        <button data-testid="button" onClick={calculatePosition} ref={relativeElement}>
+          Test
+        </button>
+        <Popover
+          {...defaultParams}
+          data-testid="popover"
+          style={{ top: top, left: left, bottom: bottom, right: right }}
+          ref={elementToBePositioned}
+        >
+          Test
+        </Popover>
+      </Fragment>
+    );
+  };
+
+  const queries = render(<Component />);
+  const button = queries.getByTestId("button");
+  const popover = queries.getByTestId("popover");
+
+  /** Let the hacking begin */
+  Object.defineProperty(button, "offsetHeight", { configurable: true, value: 500 });
+  Object.defineProperty(button, "offsetWidth", { configurable: true, value: 500 });
+
+  Object.defineProperty(window, "innerHeight", {
+    configurable: true,
+    value: 1000
+  });
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    value: 1000
+  });
+
+  Object.defineProperty(popover, "offsetHeight", { configurable: true, value: 100 });
+  Object.defineProperty(popover, "offsetWidth", { configurable: true, value: 100 });
+
+  return {
+    ...queries,
+    popover,
+    button
+  };
+};
+
+describe("Popover should render", () => {
+  it("renders without crashing and has default left and top attributes", () => {
+    const { popover } = createPopover();
+
+    window.dispatchEvent(new Event("resize"));
+    window.dispatchEvent(new Event("scroll"));
+
+    expect(popover).toBeTruthy();
+  });
+});

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,110 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  ReactNode,
+  RefObject,
+  useEffect,
+  useRef
+} from "react";
+import { Offset, Placement, usePosition } from "../../hooks/usePosition";
+import classes from "./Popover.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  children?: ReactNode;
+  show?: boolean;
+  anchorEl?: RefObject<HTMLOrSVGElement>; //eslint-disable-line no-undef
+  placement?: Placement;
+  offset?: Offset;
+  debounceAmount?: number;
+  transformOrigin?: Placement;
+  onAnchorOutOfView?: () => void;
+}
+
+const PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    children,
+    className,
+    show,
+    placement,
+    offset,
+    debounceAmount,
+    transformOrigin,
+    anchorEl,
+    onAnchorOutOfView,
+    ...rest
+  },
+  ref
+) => {
+  const elToBePositioned = useRef<HTMLDivElement>(null);
+
+  const { top, left, right, bottom, calculatePosition } = usePosition({
+    elementToBePositioned: elToBePositioned,
+    relativeElement: anchorEl,
+    offset: offset,
+    placement: placement,
+    transformOrigin: transformOrigin,
+    debounceAmount: debounceAmount ?? undefined
+  });
+
+  useEffect(() => {
+    if (!show) {
+      return;
+    }
+
+    window.addEventListener("resize", calculatePosition);
+    window.addEventListener("scroll", calculatePosition);
+
+    return () => {
+      window.removeEventListener("resize", calculatePosition);
+      window.removeEventListener("scroll", calculatePosition);
+    };
+  }, [show]);
+
+  useEffect(() => {
+    calculatePosition();
+  }, [show]);
+
+  useEffect(() => {
+    const isAnchorOffscreen =
+      show &&
+      (top === 0 ||
+        left === 0 ||
+        right === 0 ||
+        bottom === 0 ||
+        window.innerHeight - (elToBePositioned.current as HTMLElement).offsetHeight === top);
+
+    if (isAnchorOffscreen) {
+      onAnchorOutOfView?.();
+    }
+  }, [top, left, right, bottom]);
+
+  return (
+    <div ref={ref} {...rest}>
+      <div
+        ref={elToBePositioned}
+        className={`${classes.popover} ${className ?? ""} ${show ? classes.show : ""}`}
+        style={{ top: top, left: left, right: right, bottom: bottom }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export const Popover = React.forwardRef(PopoverComponent);

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

@@ -0,0 +1,58 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+@import "../../mixins.module.scss";
+
+.progress-bar {
+  position: relative;
+  display: block;
+  height: 0.5rem;
+  width: 100%;
+  border-radius: 0.25rem;
+  background-color: var(--disabled);
+  overflow: hidden;
+
+  @media (prefers-reduced-motion: reduce) {
+    display: none;
+  }
+
+  .bar {
+    position: absolute;
+    height: 0.5rem;
+    border-radius: 0.25rem;
+    background-color: var(--color-primary);
+    &.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%;
+        }
+      }
+    }
+  }
+}
+
+.placeholder {
+  display: none;
+
+  @media (prefers-reduced-motion: reduce) {
+    display: unset;
+  }
+}

package/src/components/Skeleton/Skeleton.module.scss

@@ -0,0 +1,36 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+@use "../../mixins.module.scss";
+
+.skeleton {
+  display: block;
+  height: auto;
+  @include mixins.skeletonLoading();
+}
+
+.no-height::before {
+  content: " ";
+  white-space: pre-wrap;
+}
+
+.text {
+  border-radius: 0.5rem;
+}
+
+.circular {
+  border-radius: 50%;
+}

package/src/components/StatusIndicator/StatusIndicator.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactNode } from "react";
+import { Typography, Props as TypographyProps } from "../Typography/Typography";
+import classes from "./StatusIndicator.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  children?: ReactNode;
+  status: "active" | "error" | "neutral" | "warning";
+  badgeProps?: ComponentPropsWithRef<"div">;
+  typographyProps?: TypographyProps;
+}
+
+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/components/Tabs/Tab.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { HTMLProps } from "react";
+import classes from "./Tab.module.scss";
+
+export interface Props extends Omit<HTMLProps<HTMLDivElement>, "children"> {
+  title: string;
+  children?: any;
+  tabActive?: boolean;
+}
+
+export const Tab = ({ children, tabActive, ...rest }: Props) => {
+  return (
+    <div
+      {...rest}
+      aria-hidden={!tabActive}
+      role="tabpanel"
+      className={`${classes["tab"]} ${tabActive ? classes["selected"] : ""} ${
+        rest.className ?? ""
+      }`}
+    >
+      {children}
+    </div>
+  );
+};