@onewelcome/react-lib-components 8.4.0 → 8.6.0

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

@@ -48,6 +48,26 @@
   }
 
   @include mixins.outlineStates();
+
+  div[data-readonlyview="true"] {
+    min-height: 4rem;
+    border: 1px solid var(--color-blue-grey100);
+    color: var(--read-only-text-color);
+    background-color: var(--color-white);
+    padding: 0.5rem 0.75rem;
+    font-family: var(--font-family);
+    font-size: var(--form-control-font-size);
+    position: relative;
+    border-radius: 0.125rem;
+
+    & ~ span.outline {
+      display: none;
+    }
+
+    &:has(~ [data-icon-status]) {
+      padding-right: 2.5rem;
+    }
+  }
 }
 
 .textarea {
@@ -77,6 +97,10 @@
     @include mixins.transition(all, 0.2s, ease-in-out);
     @include mixins.browserOutlineDisabled();
   }
+
+  &:has(~ [data-icon-status]) {
+    padding-right: 2.5rem;
+  }
 }
 
 .error {

package/src/components/Form/Textarea/Textarea.tsx

@@ -18,9 +18,11 @@ import React, { ForwardRefRenderFunction, ComponentPropsWithRef, useState } from
 import classes from "./Textarea.module.scss";
 import { FormElement } from "../form.interfaces";
 import { useDetermineStatusIcon } from "../../../hooks/useDetermineStatusIcon";
+import { withReadOnly } from "../../withReadOnly";
 
 export interface Props extends ComponentPropsWithRef<"textarea">, FormElement {
   wrapperProps?: ComponentPropsWithRef<"div">;
+  readOnlyView?: boolean;
 }
 
 const TextareaComponent: ForwardRefRenderFunction<HTMLTextAreaElement, Props> = (
@@ -33,6 +35,7 @@ const TextareaComponent: ForwardRefRenderFunction<HTMLTextAreaElement, Props> =
     wrapperProps,
     onFocus,
     onBlur,
+    value,
     ...rest
   }: Props,
   ref
@@ -50,8 +53,19 @@ const TextareaComponent: ForwardRefRenderFunction<HTMLTextAreaElement, Props> =
 
   const icon = useDetermineStatusIcon({ success, error });
 
-  return (
-    <div {...wrapperProps} className={wrapperClasses.join(" ")}>
+  const renderTextarea = () => {
+    if (rest["data-readonlyview"]) {
+      return (
+        <div
+          data-readonlyview={true}
+          tabIndex={0}
+          className={`${error ? classes["error"] : ""} ${success ? classes["success"] : ""}`}
+        >
+          {value}
+        </div>
+      );
+    }
+    return (
       <textarea
         {...rest}
         ref={ref}
@@ -66,11 +80,18 @@ const TextareaComponent: ForwardRefRenderFunction<HTMLTextAreaElement, Props> =
           setFocus(false);
           onBlur?.(event);
         }}
+        value={value}
       />
+    );
+  };
+
+  return (
+    <div {...wrapperProps} className={wrapperClasses.join(" ")}>
+      {renderTextarea()}
       {icon}
       <span className={outlineClasses.join(" ")}></span>
     </div>
   );
 };
 
-export const Textarea = React.forwardRef(TextareaComponent);
+export const Textarea = withReadOnly(React.forwardRef(TextareaComponent));

package/src/components/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.tsx

@@ -25,6 +25,7 @@ import { useWrapper } from "../../../../hooks/useWrapper";
 import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
 import { Icons } from "../../../Icon/Icon";
 import { Fieldset, Props as FieldsetProps } from "../../../Form/Fieldset/Fieldset";
+import { withReadOnly } from "../../../withReadOnly";
 
 export interface Props extends ComponentPropsWithRef<"div">, Omit<WrapperProps, "success"> {
   children: ReactElement[] | ReactElement;
@@ -80,7 +81,9 @@ const CheckboxWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
   );
 };
 
+const ForwardedCheckboxWrapper = React.forwardRef(CheckboxWrapperComponent);
+ForwardedCheckboxWrapper.displayName = "CheckboxWrapper";
 /**
  * @deprecated
  */
-export const CheckboxWrapper = React.forwardRef(CheckboxWrapperComponent);
+export const CheckboxWrapper = withReadOnly(ForwardedCheckboxWrapper);

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

@@ -37,6 +37,10 @@ input {
     justify-content: center;
 
     @include mixins.transition(all, 0.2s, ease-in-out);
+
+    &[data-readonlyview="true"] {
+      padding: auto;
+    }
   }
 
   [data-prefix],
@@ -61,4 +65,14 @@ input {
     cursor: not-allowed;
     color: var(--greyed-out);
   }
+
+  &[data-readonlyview="true"] {
+    & label {
+      color: var(--read-only-text-color);
+    }
+
+    & input {
+      color: var(--read-only-text-color);
+    }
+  }
 }

package/src/components/Form/Wrapper/InputWrapper/InputWrapper.tsx

@@ -19,6 +19,7 @@ import { Input, Type, Props as InputProps } from "../../Input/Input";
 import classes from "./InputWrapper.module.scss";
 import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
 import { useWrapper } from "../../../../hooks/useWrapper";
+import { withReadOnly } from "../../../withReadOnly";
 
 interface PartialInputProps extends Partial<InputProps> {}
 
@@ -63,7 +64,7 @@ const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   inputProps?.wrapperProps?.className &&
     inputWrapperClasses.push(inputProps?.wrapperProps?.className);
   disabled && inputWrapperClasses.push(classes["disabled"]);
-
+  const readValue = rest["data-readonlyview"] as boolean;
   return (
     <Wrapper
       {...rest}
@@ -88,6 +89,7 @@ const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
         {...inputProps}
         prefix={prefix}
         suffix={suffix}
+        readOnlyView={readValue}
         wrapperProps={{
           className: inputWrapperClasses.join(" ")
         }}
@@ -116,4 +118,4 @@ const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   );
 };
 
-export const InputWrapper = React.forwardRef(InputWrapperComponent);
+export const InputWrapper = withReadOnly(React.forwardRef(InputWrapperComponent));

package/src/components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper.tsx

@@ -20,6 +20,7 @@ import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
 import { useWrapper } from "../../../../hooks/useWrapper";
 import { MultiSelect } from "../../Select/MultiSelect/MultiSelect";
 import { MultiSelectProps } from "../../Select/Select.interfaces";
+import { withReadOnly } from "../../../withReadOnly";
 
 interface PartialSelectProps extends Partial<MultiSelectProps> {}
 
@@ -74,6 +75,7 @@ const MultiSelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Prop
         onChange={onChange}
         placeholder={placeholder}
         className={`${selectProps?.className ?? ""}`}
+        isReadOnlyView={!!rest["data-readonlyview"]}
       >
         {children as ReactElement[]}
       </MultiSelect>
@@ -81,4 +83,4 @@ const MultiSelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Prop
   );
 };
 
-export const MultiSelectWrapper = React.forwardRef(MultiSelectWrapperComponent);
+export const MultiSelectWrapper = withReadOnly(React.forwardRef(MultiSelectWrapperComponent));

package/src/components/Form/Wrapper/RadioWrapper/RadioWrapper.tsx

@@ -25,6 +25,7 @@ import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
 import { useWrapper } from "../../../../hooks/useWrapper";
 import { Icons } from "../../../Icon/Icon";
 import { Fieldset, Props as FieldsetProps } from "../../../Form/Fieldset/Fieldset";
+import { withReadOnly } from "../../../withReadOnly";
 
 export interface Props extends ComponentPropsWithRef<"div">, WrapperProps {
   children: ReactElement | ReactElement[];
@@ -49,6 +50,7 @@ const RadioWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   ref
 ) => {
   const { errorId, helperId } = useWrapper();
+  const readOnlyView = !!rest["data-readonlyview"];
 
   useEffect(() => {
     if (fieldsetProps.legend === undefined) {
@@ -59,17 +61,20 @@ const RadioWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   }, []);
 
   const renderChildren = () =>
-    React.Children.map(children, child =>
-      React.cloneElement(child, {
-        parentErrorId: errorId,
-        error: error,
-        checked: child.props.value === value,
-        name: name,
-        parentHelperId: helperText ? helperId : false,
-        onChange: onChange,
-        disabled: child.props.disabled !== undefined ? child.props.disabled : disabled
-      })
-    );
+    React.Children.map(children, child => {
+      if (!readOnlyView || child.props.value === value) {
+        return React.cloneElement(child, {
+          parentErrorId: errorId,
+          error: error,
+          checked: child.props.value === value,
+          name: name,
+          parentHelperId: helperText ? helperId : false,
+          onChange: onChange,
+          disabled: child.props.disabled !== undefined ? child.props.disabled : disabled
+        });
+      }
+      return null;
+    });
 
   return (
     <Fieldset {...fieldsetProps} disabled={disabled}>
@@ -96,4 +101,4 @@ const RadioWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   );
 };
 
-export const RadioWrapper = React.forwardRef(RadioWrapperComponent);
+export const RadioWrapper = withReadOnly(React.forwardRef(RadioWrapperComponent));

package/src/components/Form/Wrapper/SelectWrapper/SelectWrapper.tsx

@@ -20,6 +20,7 @@ import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
 import { Select } from "../../Select/SingleSelect/Select";
 import { useWrapper } from "../../../../hooks/useWrapper";
 import { SingleSelectProps } from "../../Select/Select.interfaces";
+import { withReadOnly } from "../../../withReadOnly";
 
 interface PartialSelectProps extends Partial<SingleSelectProps> {}
 
@@ -74,6 +75,7 @@ const SelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> =
         onChange={onChange}
         placeholder={placeholder}
         className={`${selectProps?.className ?? ""}`}
+        isReadOnlyView={!!rest["data-readonlyview"]}
       >
         {children as ReactElement[]}
       </Select>
@@ -81,4 +83,7 @@ const SelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> =
   );
 };
 
-export const SelectWrapper = React.forwardRef(SelectWrapperComponent);
+const forwardedSelectWrapper = React.forwardRef(SelectWrapperComponent);
+forwardedSelectWrapper.displayName = "SelectWrapper";
+
+export const SelectWrapper = withReadOnly(forwardedSelectWrapper);

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

@@ -48,9 +48,52 @@
     &:focus:not(:disabled) {
       outline: none;
     }
+
+    &:has([data-icon-status]) {
+      padding-right: 2.5rem;
+    }
   }
 }
 
 .textarea-helper-text {
   margin-top: 0.14rem;
 }
+
+[data-readonlyview="true"] {
+  & ~ span.error {
+    background-color: var(--color-white);
+  }
+
+  & label + div:not(:has(input)) {
+    min-height: 4rem;
+    border: 1px solid var(--color-blue-grey100);
+    color: var(--read-only-text-color);
+    background-color: var(--color-white);
+    padding: 0.5rem 0.75rem;
+    font-family: var(--font-family);
+    font-size: var(--form-control-font-size);
+    position: relative;
+    border-radius: 0.125rem;
+
+    & [data-icon-status] {
+      position: absolute;
+      right: 1.25rem;
+      top: 0.8rem;
+      font-size: 1.125rem;
+      height: 1.25rem;
+      width: 1.25rem;
+    }
+
+    & [data-icon-status="error"] {
+      color: var(--error);
+    }
+
+    & [data-icon-status="success"] {
+      color: var(--success);
+    }
+
+    &:has([data-icon-status]) {
+      padding-right: 2.5rem;
+    }
+  }
+}

package/src/components/Form/Wrapper/TextareaWrapper/TextareaWrapper.tsx

@@ -19,6 +19,8 @@ import classes from "./TextareaWrapper.module.scss";
 import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
 import { Textarea, Props as TextareaProps } from "../../Textarea/Textarea";
 import { useWrapper } from "../../../../hooks/useWrapper";
+import { withReadOnly } from "../../../withReadOnly";
+import { useDetermineStatusIcon } from "../../../../hooks/useDetermineStatusIcon";
 
 export interface Props
   extends Omit<
@@ -35,6 +37,7 @@ export interface Props
   onMouseEnter?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
   onMouseLeave?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
   success?: boolean;
+  readOnlyView?: boolean;
 }
 
 const TextareaWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
@@ -67,25 +70,24 @@ const TextareaWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
   disabled && wrapperClasses.push(classes["disabled"]);
   error && wrapperClasses.push(classes["error"]);
 
-  return (
-    <Wrapper
-      {...rest}
-      ref={ref}
-      disabled={disabled}
-      labelProps={{
-        id: labelId,
-        className: `${classes["textarea-label"]} ${wrapperClasses.join(" ")}`
-      }}
-      name={name}
-      label={label}
-      helperId={helperId}
-      helperProps={{
-        ...helperProps,
-        className: classes["textarea-helper-text"]
-      }}
-      error={error}
-      errorId={errorId}
-    >
+  const icon = useDetermineStatusIcon({ success, error });
+
+  const getTextareaWrapper = () => {
+    if (rest["data-readonlyview"]) {
+      return (
+        <div
+          aria-labelledby={label && labelId}
+          aria-describedby={error ? errorId : helperId}
+          id={name}
+          tabIndex={0}
+          className={`${error ? classes["error"] : ""} ${success ? classes["success"] : ""}`}
+        >
+          {icon}
+          {value}
+        </div>
+      );
+    }
+    return (
       <Textarea
         {...textareaProps}
         error={error}
@@ -118,8 +120,31 @@ const TextareaWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
           className: `${wrapperClasses.join(" ")} ${classes["textarea-wrapper"]}`
         }}
       />
+    );
+  };
+
+  return (
+    <Wrapper
+      {...rest}
+      ref={ref}
+      disabled={disabled}
+      labelProps={{
+        id: labelId,
+        className: `${classes["textarea-label"]} ${wrapperClasses.join(" ")}`
+      }}
+      name={name}
+      label={label}
+      helperId={helperId}
+      helperProps={{
+        ...helperProps,
+        className: classes["textarea-helper-text"]
+      }}
+      error={error}
+      errorId={errorId}
+    >
+      {getTextareaWrapper()}
     </Wrapper>
   );
 };
 
-export const TextareaWrapper = React.forwardRef(TextareaWrapperComponent);
+export const TextareaWrapper = withReadOnly(React.forwardRef(TextareaWrapperComponent));

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

@@ -66,6 +66,12 @@
   }
 }
 
+[data-readonlyview="true"] {
+  & label {
+    color: var(--read-only-text-color);
+  }
+}
+
 @media only screen and (min-width: 30em) {
   .floating-wrapper {
     .floating-label {

package/src/components/Icon/Icon.module.scss

@@ -377,8 +377,15 @@
   content: "\e950";
   @include fontProperties();
 }
-
 .icon-sidesheet-handle:before {
   content: "\e951";
   @include fontProperties();
 }
+.icon-pending-circle:before {
+  content: "\e952";
+  @include fontProperties();
+}
+.icon-minus-circle:before {
+  content: "\e953";
+  @include fontProperties();
+}

package/src/components/Icon/Icon.tsx

@@ -101,7 +101,9 @@ export enum Icons {
   ZoomOut = "zoom-out",
   ArrowUp = "arrow-up",
   ExternalLink = "external-link",
-  SideSheetHandle = "sidesheet-handle"
+  SideSheetHandle = "sidesheet-handle",
+  PendingCircle = "pending-circle",
+  MinusCircle = "minus-circle"
 }
 
 type Tag = "span" | "div" | "i";

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.
+ */
+@import "../../mixins.module.scss";
+
+.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/_BaseStyling_/BaseStyling.tsx

@@ -208,6 +208,8 @@ interface CSSProperties {
   fileUploadBorderWidth?: string;
   dragDropBorderStyle?: string;
   fontSizeDataGrid?: string;
+  readOnlyBorderColor?: string;
+  readOnlyTextColor?: string;
 }
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -403,6 +405,8 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     fontSizeH4: "1.25rem",
     fontSizeSub: ".75rem",
     fontSizeCode: "1rem",
+    readOnlyBorderColor: "var(--color-blue-grey100)",
+    readOnlyTextColor: "var(--color-blue-grey900)",
     formControlFontSize: "0.875rem", //FIXME: UCL-395
     fontSizeDataGrid: "0.875rem" //FIXME: UCL-395
   };