@onewelcome/react-lib-components 1.0.1 → 1.2.0

package/dist/util/helper.d.ts

@@ -3,4 +3,6 @@ declare type KeyValuePair = {
 };
 export declare const generateID: (length?: number, stringToWeaveIn?: string) => string;
 export declare const filterProps: (props: any, regexPattern: RegExp, returnFiltered?: boolean) => KeyValuePair;
+export declare const debounce: (fn: (...args: unknown[]) => unknown, delay: number) => (...args: unknown[]) => void;
+export declare const throttle: (fn: (...args: unknown[]) => unknown, delay: number) => () => void;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onewelcome/react-lib-components",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",

package/src/Form/Input/Input.module.scss

@@ -25,7 +25,7 @@
   border-radius: var(--input-border-radius);
   background-color: var(--input-background-color);
   padding: 0 1.25rem;
-  transition: all 0.2s ease-in-out;
+  @include transition(all, 0.2s, ease-in-out);
 
   // General autofill styles
   input:-webkit-autofill,
@@ -76,7 +76,7 @@
   box-sizing: border-box;
   border: 0;
   border-radius: var(--input-border-radius);
-  transition: all 0.2s ease-in-out;
+  @include transition(all, 0.2s, ease-in-out);
   background-color: transparent;
   z-index: 1;
 
@@ -103,7 +103,7 @@
   padding-right: 3.5rem;
 
   &.remove-extra-indent {
-    padding-right: 0rem;
+    padding-right: 0;
   }
 }
 
@@ -113,7 +113,7 @@
   height: 100%;
   width: 1.25rem;
   right: 1.25rem;
-  top: 0px;
+  top: 0;
   font-size: 1.125rem;
   display: flex;
   align-items: center;
@@ -127,7 +127,7 @@
 
 .input-wrapper [data-prefix],
 .input-wrapper [data-suffix] {
-  transition: all 0.2s ease-in-out;
+  @include transition(all, 0.2s, ease-in-out);
   display: block;
   z-index: 1;
 }

package/src/Form/Select/Select.module.scss

@@ -15,13 +15,14 @@
  */
 
 @import "../../readyclasses.module.scss";
+@import "../../mixins.module.scss";
 
 $listItemHeight: 2.125rem;
 
 .select {
   position: relative;
   box-sizing: border-box;
-  transition: all 0.2s ease-in-out;
+  @include transition(all, 0.2s, ease-in-out);
   border: 0;
   border-radius: var(--input-border-radius);
   background-color: var(--input-background-color);
@@ -65,7 +66,7 @@ $listItemHeight: 2.125rem;
     border-radius: var(--input-border-radius);
     font-size: var(--font-size);
     cursor: pointer;
-    transition: all 0.2s ease-in-out;
+    @include transition(all, 0.2s, ease-in-out);
 
     &:focus {
       outline: 0;

package/src/Form/Textarea/Textarea.module.scss

@@ -29,7 +29,7 @@
   box-sizing: border-box;
   border: 0;
   border-radius: var(--input-border-radius);
-  transition: all 0.2s ease-in-out;
+  @include transition(all, 0.2s, ease-in-out);
   font-family: var(--font-family);
   font-size: var(--font-size);
   color: var(--greyed-out);

package/src/Form/Toggle/Toggle.module.scss

@@ -14,6 +14,8 @@
  *    limitations under the License.
  */
 
+@import "../../mixins.module.scss";
+
 $borderRadius: 2.5rem;
 
 .toggle-wrapper {
@@ -29,7 +31,7 @@ $borderRadius: 2.5rem;
   background-color: var(--default);
   border-radius: $borderRadius;
   position: relative;
-  transition: background-color 0.2s ease-in-out;
+  @include transition(background-color, 0.2s, ease-in-out);
   display: block;
   pointer-events: none;
 
@@ -44,7 +46,7 @@ $borderRadius: 2.5rem;
     top: 50%;
     transform: translateY(-50%) translateX(0);
     left: 0.125rem;
-    transition: transform 0.2s ease-in-out;
+    @include transition(transform, 0.2s, ease-in-out);
   }
 
   &.checked {

package/src/Form/Wrapper/InputWrapper/InputWrapper.module.scss

@@ -30,7 +30,7 @@ input {
 
 .input-wrapper {
   [data-icon]:before {
-    transition: 0.2s ease-in-out;
+    @include transition(all, 0.2s, ease-in-out);
     transform: translateY(0px);
     font-size: 1.125rem;
   }

package/src/Form/Wrapper/TextareaWrapper/TextareaWrapper.module.scss

@@ -21,7 +21,7 @@
 .textarea-wrapper {
   &:after {
     content: "";
-    transition: all 0.15s ease-in-out;
+    @include transition(all, 0.15s, ease-in-out);
     display: block;
     width: calc(95%);
     height: 1.625rem;

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

@@ -14,6 +14,8 @@
  *    limitations under the License.
  */
 
+@import "../../../mixins.module.scss";
+
 .floating-wrapper {
   position: relative;
 
@@ -25,7 +27,7 @@
     top: 1.3125rem;
     left: 1.25rem;
     transform-origin: left top;
-    transition: all 0.2s ease-in-out;
+    @include transition(all, 0.2s, ease-in-out);
     pointer-events: none;
 
     &.floating-label-active {

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

@@ -14,6 +14,8 @@
  *    limitations under the License.
  */
 
+@import "../../mixins.module.scss";
+
 $zIndex: 10;
 $marginTop: 3.125rem;
 
@@ -39,7 +41,7 @@ $marginTop: 3.125rem;
     left: 0;
     top: 0;
     background-color: transparent;
-    transition: background-color 0.5s ease;
+    @include transition(background-color, 0.5s, ease);
   }
 
   &.visible {

package/src/Notifications/SlideInModal/SlideInModal.module.scss

@@ -14,12 +14,14 @@
  *    limitations under the License.
  */
 
+@import "../../mixins.module.scss";
+
 .slide-in-modal {
   justify-content: flex-end;
 
   visibility: visible;
 
-  transition: transform 0.5s ease-in-out;
+  @include transition(transform, 0.5s, ease-in-out);
   transform: translate(120%);
 
   &.hidden {

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

@@ -13,14 +13,15 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
+@import "../../../mixins.module.scss";
 
 .snackbars {
   position: fixed;
   z-index: 20;
   width: 100%;
-  transition: height 0.2s ease-in-out;
   display: flex;
   flex-direction: column;
+  @include transition(height, 0.2s, ease-in-out);
 
   &.bottom {
     bottom: 3.5rem;

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

@@ -15,6 +15,7 @@
  */
 
 @import "../../../readyclasses.module.scss";
+@import "../../../mixins.module.scss";
 
 .snackbar {
   padding: 1rem 1.25rem;
@@ -22,7 +23,7 @@
   display: flex;
   width: 100%;
   box-sizing: border-box;
-  transition: height 0.2s ease-in-out;
+  @include transition(height, 0.2s, ease-in-out);
   flex-grow: 0;
 
   &.info {
@@ -122,8 +123,7 @@
 
     &:active {
       position: relative;
-      border-color: transparent;
-      border: 0;
+      border: 0 transparent;
       padding: calc(0.625rem + var(--button-border-width))
         calc(1.25rem + var(--button-border-width));
 

package/src/Popover/Popover.module.scss

@@ -14,17 +14,20 @@
  *    limitations under the License.
  */
 
+@import "../mixins.module.scss";
+
 .popover {
+  $transition-property: transform, opacity;
+
   position: fixed;
   pointer-events: none;
   background-color: var(--light);
   border-radius: 8px;
-  box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.29);
+  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.29);
   opacity: 0;
   transform: scale(0.5);
-  transition-property: transform, opacity;
-  transition-duration: 0.2s;
-  transition-timing-function: ease-in-out;
+
+  @include transition($transition-property, 0.2s, ease-in-out);
 
   &.show {
     transform: scale(1);

package/src/ProgressBar/ProgressBar.module.scss

@@ -0,0 +1,56 @@
+/*!
+ * 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.
+ */
+
+.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;
+    width: 50%;
+    border-radius: 0.25rem;
+    background-color: var(--color-primary);
+    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/ProgressBar/ProgressBar.test.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useRef } from "react";
+import { ProgressBar, Props } from "./ProgressBar";
+import { render } from "@testing-library/react";
+
+const defaultParams: Props = {
+  placeholderText: "Loading"
+};
+
+const createProgressBar = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<ProgressBar {...parameters} data-testid="ProgressBar" />);
+  const ProgressBarComponent = queries.getByTestId("ProgressBar");
+
+  return {
+    ...queries,
+    ProgressBarComponent
+  };
+};
+
+describe("ProgressBar should render", () => {
+  it("renders without crashing", () => {
+    const { ProgressBarComponent } = createProgressBar(defaultParams => ({
+      ...defaultParams,
+      className: "test"
+    }));
+
+    expect(ProgressBarComponent).toBeDefined();
+    expect(ProgressBarComponent).toHaveClass(`test`, { exact: true });
+  });
+});
+
+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: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        propagateRef(ref);
+      }, [ref]);
+
+      return <ProgressBar {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
+    };
+
+    const container = document.createElement("div");
+    render(<ExampleComponent propagateRef={refCheck} />, { container });
+  });
+});

package/src/ProgressBar/ProgressBar.tsx

@@ -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.
+ */
+
+import React, { ComponentPropsWithRef } from "react";
+import { Typography } from "../Typography/Typography";
+import classes from "./ProgressBar.module.scss";
+
+export interface Props extends Omit<ComponentPropsWithRef<"span">, "children"> {
+  placeholderText: string;
+}
+
+export const ProgressBar = React.forwardRef<HTMLSpanElement, Props>(
+  ({ placeholderText, ...rest }: Props, ref) => {
+    return (
+      <span {...rest} ref={ref} role="progressbar">
+        <span className={classes["progress-bar"]}>
+          <span className={classes["bar"]} />
+        </span>
+        <Typography className={classes["placeholder"]} spacing={{ marginBottom: 0 }} variant="body">
+          {placeholderText}
+        </Typography>
+      </span>
+    );
+  }
+);

package/src/Tabs/Tabs.module.scss

@@ -14,6 +14,8 @@
  *    limitations under the License.
  */
 
+@import "../mixins.module.scss";
+
 $focus-width: 5px;
 
 .tabs {
@@ -37,12 +39,13 @@ $focus-width: 5px;
 }
 
 .indicator {
+  $transition-property: left, width;
+
   position: absolute;
   height: var(--tab-active-border-height);
   background-color: var(--tab-active-border-color);
-  transition-property: left, width;
-  transition-duration: 0.2s;
-  transition-timing-function: ease-in-out;
+
+  @include transition($transition-property, 0.2s, ease-in-out);
 }
 
 .tabdivider {

package/src/TextEllipsis/TextEllipsis.module.scss

@@ -25,7 +25,7 @@
   padding: 0.6875rem 0.6875rem 0.6875rem 0.875rem;
   border-radius: 0.25rem;
 
-  box-shadow: 0rem 0.1875rem 0.375rem rgba(0, 0, 0, 0.29);
+  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.29);
   white-space: pre-wrap;
 
   transition-property: opacity;

package/src/Tiles/Tile.module.scss

@@ -22,7 +22,7 @@
   box-sizing: border-box;
   padding: 0 0 2rem;
   background-color: var(--light);
-  transition: box-shadow 0.2s ease-in-out;
+  @include transition(box-shadow, 0.2s, ease-in-out);
   font-family: var(--font-family);
 
   &:hover {

package/src/Tooltip/Tooltip.module.scss

@@ -14,6 +14,8 @@
  *    limitations under the License.
  */
 
+@import "../mixins.module.scss";
+
 .wrapper {
   display: flex;
   align-items: center;
@@ -22,7 +24,7 @@
 .tooltip-wrapper {
   .icon {
     margin-left: 0.5rem;
-    transition: all 0.2s ease-in-out;
+    @include transition(all, 0.2s, ease-in-out);
     color: var(--greyed-out);
 
     &:hover {
@@ -32,6 +34,8 @@
 }
 
 .tooltip {
+  $transition-property: opacity, transform;
+
   position: fixed;
   background-color: var(--default);
   padding: 0.1875rem 0.5rem;
@@ -39,12 +43,11 @@
   max-width: 330px;
   opacity: 0;
   transform: scale(0);
-  transition-duration: 0.2s;
-  transition-timing-function: ease-in-out;
-  transition-property: opacity, transform;
   transform-origin: center left;
   pointer-events: none;
 
+  @include transition($transition-property, 0.2s, ease-in-out);
+
   &.visible {
     opacity: 1;
     transform: scale(1);

package/src/_BaseStyling_/BaseStyling.tsx

@@ -140,7 +140,6 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
   /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */
   const [isLoading, setIsLoading] = useState(true);
 
-  /** Set the actual CSS properties on the HTML :root object */
   const setCSSProperties = (CSSPropertiesObject: CSSProperties) => {
     for (const [key, value] of Object.entries(CSSPropertiesObject)) {
       const formattedPropertyName = key.replace(/([A-Z])/g, val => `-${val.toLowerCase()}`);
@@ -148,7 +147,6 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     }
   };
 
-  /** Check if the properties prop object is filled with anything. If it is, we want to shallow merge it with the default BaseStyling. */
   useEffect(() => {
     if (Object.keys(properties).length !== 0) {
       const mergedState = { ...defaultProperties, ...properties };
@@ -159,6 +157,5 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     setIsLoading(false);
   }, [properties]);
 
-  /** Only render if we're not loading */
   return !isLoading ? <Fragment>{children}</Fragment> : null;
 };

package/src/index.ts

@@ -30,6 +30,7 @@ export { Tile, Props as TileProps } from "./Tiles/Tile";
 export { Tiles, Props as TilesProps } from "./Tiles/Tiles";
 export { Tooltip, Props as TooltipProps } from "./Tooltip/Tooltip";
 export { Typography, Variant, Props as TypographyProps } from "./Typography/Typography";
+export { ProgressBar, Props as ProgressBarProps } from "./ProgressBar/ProgressBar";
 export { Skeleton, Props as SkeletonProps } from "./Skeleton/Skeleton";
 export { StatusIndicator, Props as StatusIndicatorProps } from "./StatusIndicator/StatusIndicator";
 export {
@@ -42,7 +43,7 @@ export {
 
 /* Utils */
 export { useRepeater } from "./hooks/useRepeater";
-export { generateID } from "./util/helper";
+export { generateID, debounce, throttle } from "./util/helper";
 
 /* Notifications */
 export { Modal, Props as ModalProps } from "./Notifications/Modal/Modal";

package/src/mixins.module.scss

@@ -133,6 +133,7 @@
 }
 
 @mixin buttonBase($type: "default") {
+  $transition-property: color, background-color, border-color;
   $disabledSelector: if($type == "link", ".disabled", ":disabled");
 
   border-width: var(--button-border-width);
@@ -144,9 +145,9 @@
   padding: 0.5rem 1.25rem;
   min-height: 2.5rem;
   cursor: pointer;
-  transition-property: color, background-color, border-color;
-  transition-duration: 0.2s;
-  transition-timing-function: ease-in-out;
+
+  @include transition($transition-property, 0.2s, ease-in-out);
+
   font-family: var(--font-family);
 
   &#{$disabledSelector} {
@@ -166,7 +167,7 @@
     border-style: var(--input-border-style);
     border-width: var(--input-border-width);
     border-radius: var(--input-border-radius);
-    transition: all 0.2s ease-in-out;
+    @include transition(all, 0.2s, ease-in-out);
   }
 }
 
@@ -223,8 +224,13 @@
       rgba(#fff, 0.5) 60%,
       rgba(#fff, 0)
     );
-    animation: shimmer 2s infinite;
     content: "";
+
+    animation: shimmer 2s infinite;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   }
 
   @keyframes shimmer {
@@ -233,3 +239,13 @@
     }
   }
 }
+
+@mixin transition($property, $duration, $function) {
+  transition-property: $property;
+  transition-duration: $duration;
+  transition-timing-function: $function;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0.1ms;
+  }
+}

package/src/readyclasses.module.scss

@@ -31,10 +31,18 @@
 
 .slide-in {
   animation: slide-in 0.5s forwards;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.1ms;
+  }
 }
 
 .slide-out {
   animation: slide-out 0.5s forwards;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.1ms;
+  }
 }
 
 @keyframes slide-in {