@onewelcome/react-lib-components 0.0.0-experimental-8e3a0fd

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

@@ -0,0 +1,95 @@
+/*!
+ * 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" as *;
+
+$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;
+  }
+}

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,75 @@
+/*
+ * 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 } from "react";
+import { Typography } from "../Typography/Typography";
+import classes from "./ProgressBar.module.scss";
+
+export interface Props extends Omit<ComponentPropsWithRef<"span">, "children"> {
+  label?: string;
+  caption?: string;
+  completed?: number;
+  percentage?: number;
+  accessibilityTitle?: string;
+}
+
+const ProgressBarComponent: ForwardRefRenderFunction<HTMLSpanElement, Props> = (
+  { label, caption, completed, percentage, accessibilityTitle = "Progress bar", ...rest }: Props,
+  ref
+) => {
+  return (
+    <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["loading-state"]}`}
+          style={{ width: `${completed}%` }}
+        />
+        <span className={`${classes["bar2"]} ${completed ? "" : classes["loading-state"]}`} />
+      </span>
+      {caption && (
+        <Typography className={classes["caption"]} spacing={{ marginBottom: 2 }} variant="sub-text">
+          {caption}
+        </Typography>
+      )}
+    </span>
+  );
+};
+
+export const ProgressBar = React.forwardRef(ProgressBarComponent);

package/src/components/RequiredSign/RequiredSign.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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 from "react";
+import { useInlineEditing } from "../InlineEditing/InlineEditingContext";
+
+export interface Props {
+  className: string;
+}
+
+export const RequiredSign: React.FC<Props> = ({ className }) => {
+  const { enabled, required } = useInlineEditing();
+
+  return enabled && required ? <span className={className}> *</span> : null;
+};

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/Skeleton/Skeleton.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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 } from "react";
+import classes from "./Skeleton.module.scss";
+
+export interface Props extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  variant?: "circular" | "rectangle" | "text";
+  height?: number | string;
+  width?: number | string;
+}
+
+const SkeletonComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { variant = "text", height, width, className, style, ...rest }: Props,
+  ref
+) => {
+  const classNames = [classes["skeleton"]];
+  !height && classNames.push(classes["no-height"]);
+  variant === "text" && classNames.push(classes["text"]);
+  variant === "circular" && classNames.push(classes["circular"]);
+  className && classNames.push(className);
+
+  return (
+    <span
+      {...rest}
+      aria-busy="true"
+      aria-hidden="true"
+      ref={ref}
+      style={{ ...style, width, height }}
+      className={classNames.join(" ")}
+    ></span>
+  );
+};
+
+export const Skeleton = React.forwardRef(SkeletonComponent);

package/src/components/Spinner/Spinner.module.scss

@@ -0,0 +1,33 @@
+/*!
+ * 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" as *;
+
+.spinner {
+  --orbit-color: var(--color-blue-grey100);
+  --arch-color: var(--color-blue-grey900);
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  .arch {
+    animation: rotate 1s linear infinite;
+    transform-origin: center;
+  }
+}

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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 from "react";
+import classes from "./Spinner.module.scss";
+
+export interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  thickness?: number;
+}
+
+export const Spinner: React.FC<SpinnerProps> = ({ size = 32, thickness, ...props }) => {
+  if (!thickness) {
+    thickness = size / 16;
+  }
+  return (
+    <svg
+      {...props}
+      className={classes["spinner"]}
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={(size - thickness) / 2}
+        stroke="var(--orbit-color)"
+        strokeWidth={thickness}
+        fill="none"
+      ></circle>
+      <circle
+        className={classes["arch"]}
+        cx={size / 2}
+        cy={size / 2}
+        r={(size - thickness) / 2}
+        stroke="var(--arch-color)"
+        strokeWidth={thickness}
+        strokeLinecap="round"
+        fill="none"
+        strokeDasharray={`${size}`}
+        transform="rotate(-90 25 25)"
+      />
+    </svg>
+  );
+};

package/src/components/Stepper/Step.module.scss

@@ -0,0 +1,301 @@
+/*
+ * 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";
+
+@mixin stepState($status: "waiting") {
+  & .step {
+    color: var(--stepper-default-text-color);
+
+    @if $status == "current" {
+      background-color: var(--stepper-current-color);
+      border-color: var(--stepper-current-color);
+    } @else if $status == "done" {
+      background-color: var(--stepper-done-color);
+      border-color: var(--stepper-done-color);
+    } @else if $status == "error" {
+      background-color: var(--stepper-error-color);
+      border-color: var(--stepper-error-color);
+    } @else if $status == "waiting" {
+      color: var(--stepper-waiting-color);
+    }
+  }
+
+  & .stepper-line {
+    @if $status == "done" {
+      background-color: var(--stepper-line-bold-color);
+    }
+  }
+
+  &:hover {
+    & .step {
+      @if $status == "current" {
+        border-color: var(--stepper-current-hover-color);
+        background-color: var(--stepper-current-hover-color);
+      } @else if $status == "done" {
+        border-color: var(--stepper-done-hover-color);
+        background-color: var(--stepper-done-hover-color);
+      } @else if $status == "error" {
+        border-color: var(--stepper-error-hover-color);
+        background-color: var(--stepper-error-hover-color);
+      } @else if $status == "waiting" {
+        border: 2px solid var(--stepper-waiting-hover-color);
+        color: var(--stepper-waiting-hover-color);
+      }
+    }
+  }
+
+  &:active {
+    & .step {
+      @if $status == "current" {
+        border-color: var(--stepper-current-active-color);
+        background-color: var(--stepper-current-active-color);
+      } @else if $status == "done" {
+        border-color: var(--stepper-done-active-color);
+        background-color: var(--stepper-done-active-color);
+      } @else if $status == "error" {
+        border-color: var(--stepper-error-active-color);
+        background-color: var(--stepper-error-active-color);
+      } @else if $status == "waiting" {
+        border: 2px solid var(--stepper-waiting-active-color);
+        color: var(--stepper-waiting-active-color);
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    & .step {
+      cursor: not-allowed;
+      @if $status == "current" {
+        border-color: var(--stepper-current-disabled-color);
+        background-color: var(--stepper-current-disabled-color);
+      } @else if $status == "done" {
+        border-color: var(--stepper-done-disabled-color);
+        background-color: var(--stepper-done-disabled-color);
+      } @else if $status == "error" {
+        border-color: var(--stepper-error-disabled-color);
+        background-color: var(--stepper-error-disabled-color);
+      } @else if $status == "waiting" {
+        border: 2px solid var(--stepper-waiting-disabled-color);
+        color: var(--stepper-waiting-disabled-color);
+      }
+    }
+
+    & .label {
+      cursor: not-allowed;
+      color: var(--stepper-label-disabled-color);
+
+      & .caption {
+        color: if(
+          $status == "error",
+          var(--stepper-caption-error-disabled-color),
+          var(--stepper-caption-disabled-color)
+        );
+      }
+    }
+    & .stepper-line {
+      background-color: if(
+        $status == "done",
+        var(--stepper-line-bold-disabled-color),
+        var(--stepper-line-disabled-color)
+      );
+    }
+  }
+}
+
+.step-wrapper {
+  pointer-events: none; //turn off pointer-events beside .label and .step where we turn it on
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: 1.875rem 1fr;
+  grid-template-rows: auto 1fr;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+
+  &.horizontal {
+    grid-template-columns: 1.875rem auto 1fr;
+    grid-template-rows: auto 1fr;
+    align-items: start;
+    width: 100%;
+
+    .stepper-line {
+      background-color: var(--stepper-line-color);
+      min-height: auto;
+      height: 2px;
+      width: 100%;
+      min-width: 1rem;
+      border-radius: 2px;
+      margin-top: 0.8125rem;
+    }
+
+    .label {
+      margin-top: 0.25rem;
+    }
+
+    &.text-bottom {
+      grid-template-columns: 5rem 1fr;
+      gap: 0;
+
+      .step {
+        justify-self: center;
+      }
+
+      .label {
+        justify-self: center;
+        text-align: center;
+        grid-column-start: 1;
+        grid-column-end: 1;
+        grid-row-start: 2;
+        grid-row-end: 2;
+      }
+
+      .stepper-line {
+        margin-right: -1.125rem;
+        margin-left: -1.125rem;
+        width: calc(100% + 2.25rem);
+      }
+
+      .label-inner-wrapper {
+        display: inline;
+      }
+
+      &.last-step {
+        justify-content: center;
+        grid-template-columns: 5rem;
+        grid-template-rows: auto 1fr;
+        flex: 1 0 5rem;
+        display: grid;
+
+        .label {
+          width: auto;
+        }
+      }
+    }
+
+    &.last-step {
+      display: flex;
+      width: max-content;
+
+      .label {
+        width: max-content;
+      }
+    }
+
+    .label-inner-wrapper {
+      display: flex;
+    }
+
+    .stepper-line-extender {
+      display: block;
+      flex: 1;
+      margin-left: 0.4375rem;
+      margin-right: -1rem;
+      margin-top: 0.5625rem;
+    }
+  }
+
+  .stepper-line {
+    pointer-events: none;
+    justify-self: center;
+    background-color: var(--stepper-line-color);
+    min-height: 0.375rem; //on design pixes used in rounding does not count, so that's why it's not 4px but 6px
+    height: 100%;
+    width: 2px;
+    border-radius: 2px;
+  }
+
+  &.vertical.has-caption .stepper-line {
+    min-height: 1.375rem; //on design pixes used in rounding does not count, so that's why it's not 20px but 22px
+  }
+
+  &.waiting {
+    @include stepState($status: "waiting");
+  }
+
+  &.current {
+    @include stepState($status: "current");
+
+    & .label {
+      font-weight: 700;
+      & .caption {
+        font-weight: 400;
+      }
+    }
+  }
+
+  &.done {
+    @include stepState($status: "done");
+  }
+
+  &.error {
+    @include stepState($status: "error");
+
+    & .label .caption {
+      color: var(--stepper-caption-error-color);
+    }
+  }
+}
+
+.step {
+  pointer-events: visible;
+  cursor: pointer;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: 2px solid var(--stepper-waiting-color);
+  border-radius: 50%;
+  font-size: var(--font-size-form-label);
+  font-family: var(--font-family);
+  font-weight: 700;
+}
+
+.label {
+  pointer-events: visible;
+  cursor: pointer;
+  grid-column-start: 2;
+  grid-column-end: 2;
+  grid-row-start: 1;
+  grid-row-end: span 2;
+  align-self: start;
+
+  margin: 0.25rem 0 0;
+  padding: 0;
+  background-color: initial;
+  border: none;
+  text-align: left;
+  color: var(--stepper-label-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size-form-label);
+  line-height: 1.25rem;
+
+  @include mixins.focusVisibleOutline($outlineOffset: "1px");
+}
+
+.caption {
+  display: block;
+  color: var(--stepper-caption-color);
+  font-family: var(--font-family);
+  font-size: 0.75rem;
+  line-height: 1rem;
+}