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

package/src/components/Form/FormGroup/FormGroup.tsx

@@ -0,0 +1,96 @@
+/*
+ * 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.
+ */
+
+/** The empty className property on FormHelperText is on purpose! We want to basically "filter" out the className from helperProps because we're adding this to the surrounding div. This makes it so also the errormessage receives this styling. */
+
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactElement } from "react";
+import classes from "./FormGroup.module.scss";
+import { FormHelperText, Props as HelperProps } from "../FormHelperText/FormHelperText";
+import { Icons } from "../../Icon/Icon";
+import { FormErrorText } from "../FormErrorText/FormErrorText";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  children: ReactElement[] | ReactElement | string | number[] | number;
+  error?: boolean;
+  errorMessageIcon?: Icons;
+  errorMessageIconPosition?: "before" | "after";
+  errorMessage?: string;
+  errorId?: string;
+  errorMessageProps?: ComponentPropsWithRef<"span">;
+  helperText?: string;
+  helperId?: string;
+  helperProps?: HelperProps;
+  disabled?: boolean;
+}
+
+const FormGroupComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    children,
+    className,
+    error,
+    errorMessage,
+    errorId,
+    errorMessageIcon,
+    errorMessageIconPosition = "before",
+    errorMessageProps,
+    helperText,
+    helperId,
+    helperProps,
+    disabled,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const disableHelperText = helperProps?.disabled ?? disabled;
+  const hasHelperText = helperText ?? helperProps?.children;
+  const showHelperText = hasHelperText && (!error || (error && !errorMessage));
+  const showErrorMessage = error && errorMessage && !errorMessageProps?.children;
+  const hasHelperContent = showHelperText || errorMessageProps?.children || showErrorMessage;
+
+  return (
+    <div {...rest} ref={ref} className={`${classes["form-group"]} ${className ?? ""}`}>
+      {children}
+
+      {hasHelperContent && (
+        <div className={`${classes["default-helper"]} ${helperProps?.className ?? ""}`}>
+          {showHelperText && (
+            <FormHelperText
+              {...helperProps}
+              className={""}
+              id={helperId}
+              disabled={disableHelperText}
+            >
+              {helperProps?.children || helperText}
+            </FormHelperText>
+          )}
+
+          {error && (
+            <FormErrorText
+              error={error}
+              errorMessage={errorMessage}
+              errorMessageProps={errorMessageProps}
+              errorId={errorId}
+              errorMessageIcon={errorMessageIcon}
+              errorMessageIconPosition={errorMessageIconPosition}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const FormGroup = React.forwardRef(FormGroupComponent);

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

@@ -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.
+ */
+
+div.form-helper-text {
+  color: var(--input-helper-text-color);
+  margin-bottom: 0;
+}
+
+div.disabled {
+  color: var(--greyed-out);
+}
+
+div.error {
+  color: var(--error);
+}
+
+[data-readonlyview="true"] div.form-helper-text {
+  display: none;
+}

package/src/components/Form/FormHelperText/FormHelperText.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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, ReactNode } from "react";
+import classes from "./FormHelperText.module.scss";
+import { Typography } from "../../Typography/Typography";
+import { FormElement } from "../form.interfaces";
+
+export interface Props extends ComponentPropsWithRef<"div">, FormElement {
+  children?: ReactNode;
+  disabled?: boolean;
+}
+
+const FormHelperTextComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, error, disabled, className, ...rest }: Props,
+  ref
+) => {
+  const classNames = [classes["form-helper-text"]];
+  error && classNames.push(classes["error"]);
+  disabled && classNames.push(classes["disabled"]);
+  className && classNames.push(className);
+
+  return (
+    <Typography {...rest} ref={ref} variant="sub-text" tag="div" className={classNames.join(" ")}>
+      {children}
+    </Typography>
+  );
+};
+
+export const FormHelperText = React.forwardRef(FormHelperTextComponent);

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

@@ -0,0 +1,12 @@
+.section-wrapper {
+  padding-bottom: 4rem;
+}
+
+.section-header-wrapper {
+  margin-bottom: 1rem;
+}
+
+.section-header {
+  line-height: 1.6;
+  color: var(--color-primary500);
+}

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

@@ -0,0 +1,68 @@
+/*!
+ * 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 "../../../functions" as *;
+
+.error input + span {
+  outline: var(--error) solid 1px;
+  outline-offset: -1px;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.helper-text {
+  margin-top: 0.25rem;
+  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);
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  label {
+    cursor: not-allowed;
+  }
+}
+
+.required {
+  color: var(--error);
+}

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

@@ -0,0 +1,117 @@
+/*
+ * 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,
+  createRef,
+  ReactNode
+} from "react";
+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;
+  nestedChildren?: ReactNode;
+  containerProps?: ComponentPropsWithRef<"div"> & KeyValuePair;
+  helperProps?: FormHelperTextProps;
+  disabled?: boolean;
+  errorId?: string;
+  identifier?: string;
+  required?: boolean;
+}
+
+const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    children,
+    className,
+    nestedChildren,
+    containerProps,
+    helperProps,
+    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;
+  const showErrorText = error && (errorMessage || errorMessageProps?.children);
+
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      className={`${error ? classes["error"] : ""} ${disabled ? classes["disabled"] : ""} ${
+        className ?? ""
+      }`}
+    >
+      <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}
+            errorMessage={errorMessage}
+            errorMessageProps={errorMessageProps}
+            errorId={errorId}
+          />
+        ) : (
+          <FormHelperText
+            {...helperProps}
+            ref={helperRef}
+            id={identifier}
+            className={`${classes["helper-text"]} ${helperProps?.className ?? ""}`}
+          >
+            {helperProps?.children || helperText}
+          </FormHelperText>
+        ))}
+      {nestedChildren}
+    </div>
+  );
+};
+
+export const FormSelectorWrapper = React.forwardRef(FormSelectorWrapperComponent);

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

@@ -0,0 +1,186 @@
+/*!
+ * 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";
+@use "../../../variables";
+@use "../../../functions" as *;
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 0;
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  padding: 0 relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-mobile);
+  @include mixins.transition(background-color, 0.2s, ease-in-out);
+
+  // General autofill styles
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    transition: background-color 5000s ease-in-out 0s !important;
+
+    ~ .outline {
+      &:after {
+        content: "";
+        position: absolute;
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: var(--input-border-radius);
+      }
+    }
+
+    // Chrome specific color
+    @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
+      ~ .outline {
+        &:after {
+          background-color: rgb(232, 240, 254);
+        }
+      }
+    }
+
+    // Safari specific color
+    @media not all and (min-resolution: 0.001dpcm) {
+      ~ .outline {
+        &:after {
+          background-color: rgb(250, 255, 189);
+        }
+      }
+    }
+  }
+
+  @include mixins.outlineStates;
+
+  [data-icon-status="success"],
+  [data-icon-status="error"] {
+    height: 100%;
+    width: relativeToBaseFontSize(1.25);
+    box-sizing: border-box;
+    font-size: var(--icon-font-big);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+
+    &:before {
+      font-size: var(--icon-font-big);
+      height: relativeToBaseFontSize(1.25);
+      width: relativeToBaseFontSize(1.25);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  [data-icon-status="success"] {
+    color: var(--success);
+  }
+
+  [data-icon-status="error"] {
+    color: var(--error);
+  }
+
+  &[data-readonlyview="true"] {
+    color: var(--read-only-text-color);
+
+    & .Input-module {
+      border-color: var(--read-only-border-color);
+    }
+
+    & span.outline {
+      color: var(--read-only-text-color);
+      border-color: var(--read-only-border-color);
+      background-color: var(--color-white);
+    }
+
+    &:hover {
+      & .outline {
+        color: var(--read-only-text-color);
+        background-color: var(--color-white);
+        border-color: var(--read-only-border-color);
+      }
+    }
+  }
+
+  & [data-prefix],
+  & [data-suffix] {
+    display: block;
+    z-index: 1;
+
+    @include mixins.transition(all, 0.2s, ease-in-out);
+  }
+
+  &.focus:not(.disabled):not([data-readonlyview="true"]),
+  &[data-readonlyview="true"]:focus:not(.disabled),
+  &[data-readonlyview="true"]:focus-visible:not(.disabled) {
+    position: relative;
+    z-index: 2;
+    @include mixins.focusVisibleOutline($selectors: null);
+  }
+}
+
+.input {
+  padding: 0;
+  height: relativeToBaseFontSize(2.75);
+  color: var(--color-blue-grey900);
+  font-size: var(--input-font-size);
+  font-family: var(--font-family);
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--input-border-radius);
+  background-color: transparent;
+  z-index: 1;
+
+  &:not(.shrink-width-for-date-icon) {
+    width: 100%;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--greyed-out);
+  }
+
+  &.shrink-width-for-date-icon {
+    width: auto;
+  }
+
+  & {
+    @include mixins.transition(all, 0.2s, ease-in-out);
+    @include mixins.browserOutlineDisabled;
+  }
+}
+
+@include mixins.outline;
+
+.error input {
+  padding-right: relativeToBaseFontSize(1.25);
+
+  &.remove-extra-indent {
+    padding-right: 0;
+  }
+}
+.success input {
+  padding-right: relativeToBaseFontSize(1.25);
+}
+
+@media only screen and (min-width: 30em) {
+  .input-wrapper {
+    padding: 0 relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-desktop);
+  }
+}