@onewelcome/react-lib-components 1.0.1 → 1.1.0

package/package.json

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

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/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 {