@onewelcome/react-lib-components 9.7.1 → 9.8.0

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -31,20 +31,23 @@ import {
 } from "../FormSelectorWrapper/FormSelectorWrapper";
 import { FormSelector } from "../form.interfaces";
 import { withReadOnly } from "../../withReadOnly";
+import { useInlineEditing } from "../../InlineEditing/InlineEditingContext";
 
 const isToggle = (children: ReactNode) => !!(children as ReactElement)?.props?.["data-toggle"];
 
-export interface Props extends ComponentPropsWithRef<"input">, Omit<FormSelector, "success"> {
-  label?: string | React.ReactNode;
+export interface Props extends ComponentPropsWithRef<"input">, FormSelector {
+  label?: string | React.ReactElement;
   indeterminate?: boolean;
   required?: boolean;
   helperProps?: FormHelperTextProps;
   formSelectorWrapperProps?: FormSelectorWrapperProps;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  readOnlyView?: boolean;
 }
 
 const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   {
+    readOnly,
     children,
     name,
     helperText,
@@ -75,6 +78,8 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     parentHelperId
   });
 
+  const { required: inlineRequired } = useInlineEditing();
+
   useEffect(() => {
     if (!name) {
       throw new Error("Please pass a 'name' prop to your <Checkbox> component.");
@@ -150,6 +155,7 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
       error={error}
       disabled={disabled}
       identifier={identifier}
+      required={inlineRequired}
       nestedChildren={
         typeof children === "object" && !isToggle(children) && renderNestedCheckboxes()
       }
@@ -164,6 +170,7 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
         aria-invalid={error as boolean}
         aria-checked={indeterminate ? "mixed" : checked}
         aria-describedby={describedBy}
+        aria-required={required || inlineRequired}
         id={`${identifier}-checkbox`}
         name={name}
         type="checkbox"

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

@@ -28,6 +28,27 @@
   margin-left: relativeToBaseFontSize(1.75);
 }
 
+.children-container {
+  & > span:nth-of-type(2) {
+    margin-right: 0.5rem;
+  }
+
+  [data-icon-status="success"] {
+    color: var(--success);
+    font-size: var(--font-size-big);
+  }
+
+  [data-icon-status="error"] {
+    color: var(--error);
+    font-size: var(--font-size-big);
+  }
+
+  [data-icon-status="info"] {
+    color: var(--default);
+    font-size: var(--font-size-big);
+  }
+}
+
 .disabled {
   input {
     color: var(--disabled);
@@ -41,3 +62,7 @@
     cursor: not-allowed;
   }
 }
+
+.required {
+  color: var(--error);
+}

package/src/components/Form/FormSelectorWrapper/FormSelectorWrapper.tsx

@@ -24,7 +24,10 @@ import { KeyValuePair } from "../../../interfaces";
 import { FormSelector } from "../form.interfaces";
 import { FormHelperText, Props as FormHelperTextProps } from "../FormHelperText/FormHelperText";
 import classes from "./FormSelectorWrapper.module.scss";
+import { useInlineEditing } from "../../InlineEditing/InlineEditingContext";
+import { RequiredSign } from "../../RequiredSign/RequiredSign";
 import { FormErrorText } from "../FormErrorText/FormErrorText";
+import { FormStatusIndicator } from "../FormStatusIndicator/FormStatusIndicator";
 
 export interface Props extends ComponentPropsWithRef<"div">, FormSelector {
   children?: ReactNode;
@@ -34,6 +37,7 @@ export interface Props extends ComponentPropsWithRef<"div">, FormSelector {
   disabled?: boolean;
   errorId?: string;
   identifier?: string;
+  required?: boolean;
 }
 
 const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
@@ -46,16 +50,19 @@ const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Pro
     error,
     disabled,
     helperText,
+    success,
     errorMessage,
     errorMessageProps,
     parentErrorId,
     errorId,
     identifier,
+    required,
     ...rest
   }: Props,
   ref
 ) => {
   const helperRef = helperProps?.ref ?? createRef();
+  const { enabled } = useInlineEditing();
 
   const hasHelperText = helperText ?? helperProps?.children;
   const showHelperText = !error && hasHelperText;
@@ -69,8 +76,22 @@ const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Pro
         className ?? ""
       }`}
     >
-      <div {...containerProps}>{children}</div>
-      {(showHelperText || showErrorText) &&
+      <div
+        {...containerProps}
+        className={`${containerProps?.className} ${classes["children-container"]}`}
+      >
+        {children}
+        {enabled && (
+          <>
+            <RequiredSign className={classes["required"]} />
+            <FormStatusIndicator success={success} error={error}>
+              <></>
+            </FormStatusIndicator>
+          </>
+        )}
+      </div>
+      {!enabled &&
+        (showHelperText || showErrorText) &&
         (showErrorText ? (
           <FormErrorText
             error={error}

package/src/components/Form/FormStatusIndicator/FormStatusIndicator.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 from "react";
+import { useInlineEditing } from "../../InlineEditing/InlineEditingContext";
+import { useDetermineStatusIcon } from "../../../hooks/useDetermineStatusIcon";
+import { getStatusIcon, getStatusState } from "../../../utils/statusUtils";
+import { Tooltip } from "../../Tooltip/Tooltip";
+import { Icon } from "../../Icon/Icon";
+
+export interface FormStatusIndicatorProps {
+  isReadOnlyView?: boolean;
+  success?: boolean;
+  error?: boolean;
+  children: React.ReactNode;
+}
+
+export const FormStatusIndicator: React.FC<FormStatusIndicatorProps> = ({
+  isReadOnlyView,
+  success,
+  error,
+  children
+}) => {
+  const { enabled, tooltipText, ...restProps } = useInlineEditing();
+  const showTooltip = enabled && tooltipText;
+  const isSuccess = restProps.success ?? success;
+  const isError = restProps.error ?? error;
+  const statusIcon = useDetermineStatusIcon({
+    success: isSuccess,
+    error: isError
+  });
+
+  if (showTooltip && !isReadOnlyView) {
+    const status = getStatusState(
+      {
+        success: isSuccess,
+        error: isError
+      },
+      true
+    );
+    return (
+      <Tooltip
+        label={
+          <Icon
+            data-testid="tooltip-icon"
+            data-icon-status={status}
+            icon={getStatusIcon({
+              success: isSuccess,
+              error: isError
+            })}
+          />
+        }
+        location="right"
+        position="center"
+      >
+        {tooltipText}
+      </Tooltip>
+    );
+  }
+
+  return <>{statusIcon || (!isReadOnlyView && children)}</>;
+};

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

@@ -233,6 +233,9 @@ $listItemHeight: 2.5rem;
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
+  .required {
+    color: var(--error);
+  }
 }
 
 .status {
@@ -253,6 +256,11 @@ $listItemHeight: 2.5rem;
     font-size: var(--font-size-big);
   }
 
+  [data-icon-status="info"] {
+    color: var(--default);
+    font-size: var(--font-size-big);
+  }
+
   .chevron-icon {
     color: var(--default);
     font-size: var(--font-size-small);
@@ -327,3 +335,66 @@ $listItemHeight: 2.5rem;
     }
   }
 }
+
+.inlineEditing {
+  & .select {
+    background-color: transparent;
+    transition: none;
+    &:not(.expanded) {
+      button:focus:not(.error) {
+        border-width: 0;
+        border-radius: 0.3125rem;
+      }
+    }
+    &:focus {
+      & button {
+        &:focus {
+          border: 0.125rem solid var(--color-focus);
+        }
+      }
+    }
+    &:hover {
+      & button {
+        & .status {
+          span.chevron-icon {
+            visibility: visible;
+          }
+        }
+      }
+      &:not(.disabled):not(.expanded):not(.error) {
+        button:not(:focus) {
+          border: 0;
+          background-color: transparent;
+        }
+      }
+    }
+    & button {
+      border: 0;
+      &.expanded {
+        div.status {
+          span.chevron-icon {
+            visibility: visible;
+          }
+        }
+      }
+      &:focus-visible {
+        outline: 0.125rem solid var(--color-focus);
+        border-radius: 0.3125rem;
+        outline-offset: -1px;
+      }
+      &.error {
+        color: var(--color-default);
+      }
+      & .status {
+        span.chevron-icon {
+          visibility: hidden;
+        }
+      }
+    }
+    &[data-readonlyview="true"] {
+      & button {
+        background-color: transparent;
+      }
+    }
+  }
+}

package/src/components/Form/Select/SingleSelect/Select.tsx

@@ -25,7 +25,6 @@ import React, {
   useState
 } from "react";
 import { useClickOutside } from "../../../../hooks/useClickOutside";
-import { useDetermineStatusIcon } from "../../../../hooks/useDetermineStatusIcon";
 import readyclasses from "../../../../readyclasses.module.scss";
 import { filterProps } from "../../../../util/helper";
 import { Icon, Icons } from "../../../Icon/Icon";
@@ -35,6 +34,9 @@ import { useAddNewBtn } from "../useAddNewBtn";
 import { useSearch } from "./useSearch";
 import { useArrowNavigation } from "./useArrowNavigation";
 import { withReadOnly } from "../../../withReadOnly";
+import { RequiredSign } from "../../../RequiredSign/RequiredSign";
+import { FormStatusIndicator } from "../../FormStatusIndicator/FormStatusIndicator";
+import { useInlineEditing } from "../../../InlineEditing/InlineEditingContext";
 
 const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectProps> = (
   {
@@ -91,6 +93,9 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
     searchInputRef
   });
 
+  const { inlineClassNames } = useInlineEditing();
+  const rootClassNames = inlineClassNames ? ` ${inlineClassNames}` : "";
+
   const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();
 
   const onOptionChangeHandler = (optionElement: HTMLElement | null) => {
@@ -181,8 +186,6 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
     );
   };
 
-  const icon = useDetermineStatusIcon({ success, error });
-
   const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
     onChange?.(event);
   };
@@ -223,7 +226,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
 
   /** The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */
   return (
-    <div ref={myElementRef} className={classes["root"]}>
+    <div ref={myElementRef} className={`${classes["root"]}${rootClassNames}`}>
       <select
         {...filterProps(rest, /^data-/, false)}
         tabIndex={-1}
@@ -266,8 +269,13 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
           <div data-display className={classes["selected"]}>
             {!value && placeholder && <span className={classes["placeholder"]}>{placeholder}</span>}
             {value?.length > 0 && <span data-display-inner>{display}</span>}
+            <RequiredSign className={classes["required"]} />
+          </div>
+          <div className={classes["status"]}>
+            <FormStatusIndicator isReadOnlyView={isReadOnlyView} success={success} error={error}>
+              {renderChevronIcon()}
+            </FormStatusIndicator>
           </div>
-          <div className={classes["status"]}>{icon || renderChevronIcon()}</div>
         </button>
         <div className="list-wrapper-container">
           <div

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

@@ -71,6 +71,7 @@
     font-size: var(--input-font-size);
     position: relative;
     border-radius: 0.125rem;
+    word-wrap: break-word;
 
     &:focus {
       outline: none;

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

@@ -70,6 +70,7 @@
     font-size: var(--form-control-font-size);
     position: relative;
     border-radius: 0.125rem;
+    word-wrap: break-word;
 
     & [data-icon-status] {
       position: absolute;

package/src/components/InlineEditing/InlineCheckbox/InlineCheckbox.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 { Checkbox, CheckboxProps } from "../../..";
+import { InlineEditingProvider } from "../InlineEditingContext";
+
+export interface InlineCheckboxProps extends CheckboxProps {
+  tooltipText?: string;
+}
+
+export const InlineCheckbox = (props: InlineCheckboxProps) => {
+  const { error, success, tooltipText, required, ...rest } = props;
+  const inlineEditingValues = {
+    enabled: true,
+    error: error,
+    success: success,
+    required: required,
+    tooltipText: tooltipText
+  };
+
+  return (
+    <InlineEditingProvider value={inlineEditingValues}>
+      <Checkbox {...rest} />
+    </InlineEditingProvider>
+  );
+};

package/src/components/InlineEditing/InlineEditingContext.tsx

@@ -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.
+ */
+
+import { createContext, useContext } from "react";
+
+export interface InlineEditingInterface {
+  enabled: boolean;
+  required?: boolean;
+  error?: boolean;
+  success?: boolean;
+  tooltipText?: string;
+  inlineClassNames?: string;
+}
+
+const InlineEditingContext = createContext<InlineEditingInterface>({ enabled: false });
+
+export const InlineEditingProvider = InlineEditingContext.Provider;
+
+export const useInlineEditing = () => useContext(InlineEditingContext);

package/src/components/InlineEditing/InlineEditingSelect/InlineSelect.tsx

@@ -0,0 +1,44 @@
+/*
+ * 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 { SingleSelectProps } from "../../Form/Select/Select.interfaces";
+import { Select } from "../../Form/Select/SingleSelect/Select";
+import { InlineEditingProvider } from "../InlineEditingContext";
+import selectClasses from "../../Form/Select/SingleSelect/Select.module.scss";
+
+export interface InlineSelectProps extends SingleSelectProps {
+  tooltipText?: string;
+}
+
+export const InlineSelect = (props: InlineSelectProps) => {
+  const { className, error, success, tooltipText, required, ...rest } = props;
+  const finalClassName = [className, selectClasses.inlineEditing].filter(Boolean).join(" ");
+  const inlineEditingValues = {
+    enabled: true,
+    error: error,
+    success: success,
+    required: required,
+    tooltipText: tooltipText,
+    inlineClassNames: finalClassName
+  };
+
+  return (
+    <InlineEditingProvider value={inlineEditingValues}>
+      <Select {...rest} />
+    </InlineEditingProvider>
+  );
+};

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/TextEllipsis/TextEllipsis.module.scss

@@ -27,6 +27,7 @@
 
   box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.29);
   white-space: pre-wrap;
+  word-wrap: break-word;
 
   transition-property: opacity;
   transform: scale(1);

package/src/components/Tooltip/Tooltip.module.scss

@@ -156,6 +156,10 @@
     &:hover {
       color: var(--default);
     }
+
+    &.error {
+      color: var(--error);
+    }
   }
 }
 
@@ -175,6 +179,7 @@
   pointer-events: none;
   box-shadow: 0 0.0625rem 0.3125rem 0 rgba(1, 5, 50, 0.3);
   word-break: break-word;
+  z-index: var(--tooltip-index);
 
   @include mixins.transition($transition-property, 0.2s, ease-in-out);
 

package/src/components/Tooltip/Tooltip.tsx

@@ -39,6 +39,7 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   title?: string;
   children: ReactNode;
   domRoot?: HTMLElement;
+  icon?: Icons;
   location?: "left" | "right" | "top" | "bottom";
   color?: "black" | "blue";
   position?: "start" | "center" | "end";
@@ -126,6 +127,7 @@ const TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     location = "right",
     position = "center",
     color = "black",
+    icon,
     ...rest
   }: Props,
   ref
@@ -218,7 +220,8 @@ const TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             onMouseEnter={() => setVisible(true)}
             onMouseLeave={() => setVisible(false)}
             icon={Icons.InfoCircle}
-            className={classes.icon}
+            aria-describedby={identifier}
+            className={`${classes.icon}`}
           />
         )}
         {createPortal(

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -102,7 +102,6 @@ export interface CSSProperties extends ButtonColorProps {
   inputHoverBackgroundColor?: string;
   inputDisabledBackgroundColor?: string;
   inputFontSize?: string;
-  iconFontBig?: string;
   dragBorderStyle?: string;
   modalTitleColor?: string;
   modalShadowColor?: string;
@@ -229,6 +228,8 @@ export interface CSSProperties extends ButtonColorProps {
   fontSizeDataGrid?: string;
   readOnlyBorderColor?: string;
   readOnlyTextColor?: string;
+  iconFontBig?: string;
+  tooltipIndex?: string;
 }
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -319,7 +320,6 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     inputHoverBackgroundColor: "var(--default-hover-color)",
     inputDisabledBackgroundColor: "var(--input-hover-background-color)",
     inputFontSize: "0.875rem",
-    iconFontBig: "1.125rem",
     dragBorderStyle: "solid",
     modalTitleColor: "var(--font-color-h4)",
     modalShadowColor: "rgba(0, 0, 0, 0.16)",
@@ -376,7 +376,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     stepperCaptionDisabledColor: "var(--color-blue-grey400)",
     stepperCaptionErrorDisabledColor: "var(--color-red200)",
     bannerBorderRadius: "2px",
-    bannerBorderWidth: "0 0 0 4px",
+    bannerBorderWidth: "4px",
     dataGridRowBackgroundColor: "transparent",
     dataGridRowHoverBackgroundColor: "var(--default-hover-color)",
     progressBarBackgroundColor: "var(--disabled)",
@@ -444,7 +444,9 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     readOnlyBorderColor: "var(--color-blue-grey100)",
     readOnlyTextColor: "var(--color-blue-grey900)",
     formControlFontSize: "0.875rem",
-    fontSizeDataGrid: "0.875rem"
+    fontSizeDataGrid: "0.875rem",
+    iconFontBig: "1.125rem",
+    tooltipIndex: "12"
   };
 
   /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */

package/src/index.ts

@@ -133,6 +133,10 @@ export type { Props as SideSheetHeaderProps } from "./components/Notifications/S
 /** Form components */
 export { Checkbox } from "./components/Form/Checkbox/Checkbox";
 export type { Props as CheckboxProps } from "./components/Form/Checkbox/Checkbox";
+export {
+  InlineCheckbox,
+  InlineCheckboxProps
+} from "./components/InlineEditing/InlineCheckbox/InlineCheckbox";
 export { Fieldset } from "./components/Form/Fieldset/Fieldset";
 export type { Props as FieldsetProps } from "./components/Form/Fieldset/Fieldset";
 export { Form } from "./components/Form/Form";
@@ -154,6 +158,10 @@ export type { Props as RadioProps } from "./components/Form/Radio/Radio";
 export { RadioWrapper } from "./components/Form/Wrapper/RadioWrapper/RadioWrapper";
 export type { Props as RadioWrapperProps } from "./components/Form/Wrapper/RadioWrapper/RadioWrapper";
 export { Select } from "./components/Form/Select/SingleSelect/Select";
+export {
+  InlineSelect,
+  InlineSelectProps
+} from "./components/InlineEditing/InlineEditingSelect/InlineSelect";
 export { MultiSelect } from "./components/Form/Select/MultiSelect/MultiSelect";
 export type {
   SingleSelectProps,