@onewelcome/react-lib-components 8.5.0 → 8.6.0

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/_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
   };

package/src/components/withReadOnly.tsx

@@ -0,0 +1,112 @@
+/*
+ * 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, { ComponentType, ForwardedRef, PropsWithChildren } from "react";
+
+export interface WithReadOnlyProps {
+  readOnlyView?: boolean;
+  required?: boolean;
+  helperText?: string;
+  type?: string;
+}
+
+const componentsWithKeyEventsToPrevent: string[] = ["CheckboxWrapper"];
+
+const getDisplayName = <P,>(WrappedComponent: ComponentType<P>) => {
+  return WrappedComponent.displayName ?? WrappedComponent.name ?? "Component";
+};
+
+const getConditionalProps = (readOnlyView: boolean, type: string, helperText?: string) => {
+  const props: Record<string, any> = {};
+
+  if (readOnlyView) {
+    props.style = { pointerEvents: "none", userSelect: "text" };
+    if (helperText) {
+      props.helperText = "";
+    }
+  } else {
+    props.helperText = helperText;
+  }
+
+  if (type) {
+    props.type = type;
+  }
+
+  return props;
+};
+
+export const withReadOnly = <P extends object>(WrappedComponent: ComponentType<P>) => {
+  const preventKeyUpAndKeyDownHandlerForSpecificComponents = (readOnlyView: boolean) => {
+    const preventSubmissionKeys = (e: KeyboardEvent) => {
+      const isEnterOrSpace = (e: KeyboardEvent) => e.key === "Enter" || e.key === " ";
+      if (isEnterOrSpace(e)) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    };
+
+    if (
+      readOnlyView &&
+      componentsWithKeyEventsToPrevent.includes(
+        WrappedComponent.displayName || WrappedComponent.name
+      )
+    ) {
+      const props: Record<string, any> = {};
+
+      props.onKeyUp = (e: KeyboardEvent) => {
+        preventSubmissionKeys(e);
+      };
+
+      props.onKeyDown = (e: KeyboardEvent) => {
+        preventSubmissionKeys(e);
+      };
+
+      return props;
+    }
+
+    return {};
+  };
+
+  const WithReadOnlyComponent = React.forwardRef(
+    (props: PropsWithChildren<P & WithReadOnlyProps>, ref: ForwardedRef<any>) => {
+      const {
+        readOnlyView = false,
+        required,
+        children,
+        helperText,
+        type = "",
+        ...restProps
+      } = props;
+
+      return (
+        <WrappedComponent
+          ref={ref}
+          {...(restProps as P)}
+          data-readonlyview={readOnlyView}
+          aria-readonly={readOnlyView}
+          required={readOnlyView ? false : required}
+          {...getConditionalProps(readOnlyView, type, helperText)}
+          {...preventKeyUpAndKeyDownHandlerForSpecificComponents(readOnlyView)}
+        >
+          {children}
+        </WrappedComponent>
+      );
+    }
+  );
+
+  WithReadOnlyComponent.displayName = `withReadOnly_${getDisplayName(WrappedComponent)}`;
+  return WithReadOnlyComponent;
+};

package/src/index.ts

@@ -178,6 +178,7 @@ export { FILE_ACTION, ACTION_STATUS } from "./components/Form/FileUpload/FileIte
 
 export { MultiSelectWrapper } from "./components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper";
 export type { Props as MultiSelectWrapperProps } from "./components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper";
+export { useMultiSelect } from "./components/Form/Select/MultiSelect/useMultiSelect";
 export { ContentHeader } from "./components/Layout/ContentHeader/ContentHeader";
 export type { Props as ContentHeaderProps } from "./components/Layout/ContentHeader/ContentHeader";
 export { FormStepper } from "./components/Layout/FormPage/FormWithStepper/FormStepper/FormStepper";

package/src/mixins.module.scss

@@ -195,6 +195,12 @@
   $borderRadius: var(--input-border-radius),
   $backgroundColor: ""
 ) {
+  [data-readonlyview="true"] {
+    .outline {
+      border-color: var(--read-only-border-color);
+    }
+  }
+
   .outline {
     pointer-events: none;
     position: absolute;

package/src/util/unitTestUtils.ts

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+export class MockDOMRect implements DOMRect {
+  constructor(
+    public x: number = 0,
+    public y: number = 0,
+    public width: number = 0,
+    public height: number = 0,
+    public top: number = y,
+    public right: number = x + width,
+    public bottom: number = y + height,
+    public left: number = x
+  ) {}
+
+  toJSON() {
+    return { ...this };
+  }
+}