@onewelcome/react-lib-components 9.8.0 → 10.0.0

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

@@ -1,162 +0,0 @@
-/*!
- * 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 "src/functions" as *;
-
-.pagination-wrapper {
-  font-family: var(--font-family);
-  font-size: var(--font-size-data-grid);
-  line-height: var(--data-grid-line-height);
-  color: var(--greyed-out);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  .left {
-    display: flex;
-  }
-
-  .form-element {
-    height: relativeToBaseFontSize(2.5);
-
-    .search-input-wrapper {
-      width: 2.75rem;
-    }
-
-    button {
-      min-height: relativeToBaseFontSize(2.5);
-    }
-  }
-
-  .total {
-    flex: 1 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    span {
-      color: var(--color-blue-grey500);
-    }
-  }
-
-  .pagination {
-    flex: 1 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 1rem;
-
-    .previous,
-    .next {
-      display: flex;
-      align-items: center;
-
-      button span:before {
-        font-size: var(--font-size-sub);
-      }
-    }
-  }
-
-  .per-page {
-    display: none;
-    align-items: center;
-    gap: 0.5rem;
-
-    label {
-      font-size: var(--font-size-data-grid);
-      line-height: var(--data-grid-line-height);
-      font-weight: 500;
-      color: var(--color-blue-grey900);
-    }
-
-    + .total {
-      padding-left: 0.9375rem;
-      border-left: 1px solid var(--color-blue-grey100);
-    }
-  }
-
-  .page {
-    display: flex;
-    align-items: center;
-    flex-basis: min-content;
-    padding-right: 1rem;
-
-    &-total {
-      display: inline-block;
-      margin-left: 0.5rem;
-      white-space: nowrap;
-      font-weight: 500;
-      color: var(--color-blue-grey900);
-    }
-
-    + .previous {
-      padding-left: 0.9375rem;
-      border-left: 1px solid var(--color-blue-grey100);
-    }
-  }
-
-  .page-size-select {
-    button {
-      min-width: relativeToBaseFontSize(4.25);
-      padding: 0;
-
-      div[data-display] {
-        left: 0.5rem;
-      }
-
-      div:not([data-display]) {
-        right: 0.5rem;
-      }
-    }
-  }
-}
-
-.current-page-select {
-  button {
-    min-width: relativeToBaseFontSize(3.75);
-    padding: 0;
-
-    div[data-display] {
-      left: 0.5rem;
-    }
-
-    div:not([data-display]) {
-      right: 0.5rem;
-    }
-  }
-}
-
-@media screen and (min-width: 30em) {
-  .pagination-wrapper {
-    flex-direction: row;
-
-    .total {
-      justify-content: flex-start;
-    }
-
-    .pagination {
-      margin-top: 0;
-      justify-content: flex-end;
-    }
-  }
-}
-
-@media screen and (min-width: 48em) {
-  .pagination-wrapper .per-page {
-    display: flex;
-    margin-right: 1rem;
-  }
-}

package/src/components/Pagination/Pagination.tsx

@@ -1,233 +0,0 @@
-/*
- * 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,
-  useEffect
-} 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 { Select } from "../Form/Select/SingleSelect/Select";
-import { Option } from "../Form/Select/SingleSelect/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 = "items in total",
-  itemsPerPage = "Items per page",
-  currentPage = "of %1 pages",
-  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
-) => {
-  const calculateAmountOfPages = () => {
-    if (!totalElements) {
-      return 1;
-    }
-
-    if (Math.ceil(totalElements / pageSize) < 1) {
-      return 1;
-    }
-
-    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);
-  };
-
-  const onPageChangeHandler = (pageToGoTo: number) => {
-    onPageChange(pageToGoTo);
-  };
-
-  useEffect(() => {
-    resetPageNoSelect && setResetPageNoSelect(false);
-  }, [resetPageNoSelect]);
-
-  return (
-    <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"
-              htmlFor="page-size-select"
-              className={classes["label"]}
-            >
-              {translate.itemsPerPage}
-            </Label>
-            <Select
-              name="page-size-select"
-              id="page-size-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>
-        )}
-        {totalElements && (
-          <div className={classes["total"]}>
-            <span tabIndex={0}>
-              {totalElements}&nbsp;{translate.totalItems}
-            </span>
-          </div>
-        )}
-      </div>
-      <div className={classes["pagination"]}>
-        <Fragment>
-          {totalElements && !!pagesAmount && (
-            <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
-                labeledBy="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"]}`}
-                search={{
-                  enabled: true,
-                  searchInputProps: {
-                    wrapperProps: { className: classes["search-input-wrapper"] },
-                    reset: resetPageNoSelect ? resetPageNoSelect : undefined,
-                    autoComplete: "off"
-                  }
-                }}
-              >
-                {Array.from(Array(pagesAmount).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"]}>
-              {
-                <IconButton
-                  disabled={currentPage <= 1}
-                  title="first"
-                  onClick={() => onPageChangeHandler(1)}
-                  data-paginate="first"
-                >
-                  <Icon icon={Icons.NavigationFirst} />
-                </IconButton>
-              }
-              {
-                <IconButton
-                  disabled={currentPage <= 1}
-                  title="previous"
-                  onClick={() => onPageChangeHandler(currentPage - 1)}
-                  data-paginate="previous"
-                >
-                  <Icon icon={Icons.ChevronLeft} />
-                </IconButton>
-              }
-            </div>
-          )}
-          <div className={classes["next"]}>
-            {(currentPage !== undefined || false) && (
-              <IconButton
-                disabled={currentPage >= pagesAmount}
-                title="next"
-                onClick={() => onPageChangeHandler(currentPage + 1)}
-                data-paginate="next"
-              >
-                <Icon icon={Icons.ChevronRight} />
-              </IconButton>
-            )}
-            {!!(currentPage && totalElements) && (
-              <IconButton
-                disabled={currentPage >= pagesAmount}
-                title="last"
-                onClick={() => onPageChangeHandler(Math.ceil(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

@@ -1,42 +0,0 @@
-/*!
- * 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";
-@use "../../variables.scss";
-
-.popover {
-  $transition-property: transform, opacity;
-
-  position: fixed;
-  z-index: variables.$popover-z-index;
-  pointer-events: none;
-  background-color: var(--light);
-  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);
-
-  @include mixins.transition($transition-property, 0.2s, ease-in-out);
-
-  &.show {
-    transform: scale(1);
-    pointer-events: auto;
-    opacity: 1;
-  }
-}

package/src/components/Popover/Popover.tsx

@@ -1,142 +0,0 @@
-/*
- * 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,
-  useState
-} from "react";
-import { Offset, Placement, PositionType, 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 [showPopover, setShowPopover] = useState(false);
-  const elToBePositioned = useRef<HTMLDivElement>(null);
-  const { top, left, right, bottom, calculatePosition, initialCalculationDone } = usePosition({
-    elementToBePositioned: elToBePositioned,
-    relativeElement: anchorEl,
-    offset: offset,
-    placement: placement,
-    transformOrigin: transformOrigin,
-    debounceAmount: debounceAmount ?? undefined
-  });
-
-  const normalizePosition = (value: PositionType) => {
-    if (value === "initial") {
-      return "initial";
-    }
-
-    if (isNaN(value)) {
-      return 0;
-    }
-
-    return Number(value);
-  };
-
-  useEffect(() => {
-    if (initialCalculationDone) {
-      setShowPopover(!!show);
-    }
-  }, [show, initialCalculationDone]);
-
-  useEffect(() => {
-    if (!showPopover) {
-      return;
-    }
-
-    window.addEventListener("resize", calculatePosition);
-    window.addEventListener("scroll", calculatePosition);
-
-    return () => {
-      window.removeEventListener("resize", calculatePosition);
-      window.removeEventListener("scroll", calculatePosition);
-    };
-  }, [showPopover]);
-
-  useEffect(() => {
-    calculatePosition();
-  }, [showPopover, elToBePositioned, anchorEl]);
-
-  useEffect(() => {
-    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?.();
-      }
-    }
-  }, [top, left, right, bottom]);
-
-  return (
-    <div ref={ref} {...rest}>
-      <div
-        ref={elToBePositioned}
-        className={`${classes.popover} ${className ?? ""} ${showPopover ? classes.show : ""}`}
-        style={{
-          top: normalizePosition(top),
-          left: normalizePosition(left),
-          right: normalizePosition(right),
-          bottom: normalizePosition(bottom)
-        }}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export const Popover = React.forwardRef(PopoverComponent);

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

@@ -1,95 +0,0 @@
-/*!
- * 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";
-
-$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.25rem;
-  width: 100%;
-  border-radius: 0.25rem;
-  background-color: var(--progress-bar-background-color);
-  overflow: hidden;
-
-  @media (prefers-reduced-motion: reduce) {
-    display: none;
-  }
-
-  .bar {
-    position: absolute;
-    height: 0.5rem;
-    border-radius: 0.25rem;
-    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: 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;
-
-  @media (prefers-reduced-motion: reduce) {
-    display: unset;
-  }
-}