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

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

@@ -0,0 +1,154 @@
+/*
+ * 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, useState } from "react";
+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<
+      ComponentPropsWithRef<"div">,
+      "onFocus" | "onChange" | "onBlur" | "onMouseEnter" | "onMouseLeave"
+    >,
+    Omit<WrapperProps, "onFocus" | "onChange" | "onBlur" | "onMouseEnter" | "onMouseLeave"> {
+  placeholder?: string;
+  textareaProps?: TextareaProps;
+  value: string;
+  onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+  onMouseEnter?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
+  onMouseLeave?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
+  success?: boolean;
+  readOnlyView?: boolean;
+}
+
+const TextareaWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    name,
+    error,
+    value,
+    label,
+    placeholder,
+    textareaProps,
+    helperProps,
+    onChange,
+    onFocus,
+    onBlur,
+    onMouseEnter,
+    onMouseLeave,
+    disabled,
+    success,
+    className,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const { errorId, hasFocus, setHasFocus, helperId, labelId } = useWrapper();
+  const [hover, setHover] = useState(false);
+
+  const wrapperClasses: string[] = [];
+
+  hasFocus && wrapperClasses.push(classes["focus"]);
+  hover && wrapperClasses.push(classes["hover"]);
+  disabled && wrapperClasses.push(classes["disabled"]);
+  error && wrapperClasses.push(classes["error"]);
+
+  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}
+        aria-labelledby={label && labelId}
+        aria-describedby={error ? errorId : helperId}
+        placeholder={placeholder}
+        name={name}
+        id={name}
+        value={value}
+        success={success}
+        onChange={onChange}
+        onFocus={e => {
+          onFocus?.(e);
+          setHasFocus(true);
+        }}
+        onBlur={e => {
+          onBlur?.(e);
+          setHasFocus(false);
+        }}
+        onMouseEnter={e => {
+          onMouseEnter?.(e);
+          setHover(true);
+        }}
+        onMouseLeave={e => {
+          onMouseLeave?.(e);
+          setHover(false);
+        }}
+        className={`${classes["textarea"]} ${error ? classes["error"] : ""}`}
+        wrapperProps={{
+          className: `${wrapperClasses.join(" ")} ${classes["textarea-wrapper"]}`
+        }}
+      />
+    );
+  };
+
+  return (
+    <Wrapper
+      {...rest}
+      ref={ref}
+      className={`${classes["wrapper"]} ${className ?? ""}`}
+      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 = withReadOnly(React.forwardRef(TextareaWrapperComponent), {
+  isWrapperComponent: true
+});

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

@@ -0,0 +1,87 @@
+/*!
+ * 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 *;
+
+.wrapper {
+  font-family: var(--font-family);
+  font-weight: normal;
+}
+
+.floating-wrapper {
+  position: relative;
+
+  .floating-label {
+    font-family: var(--font-family);
+    font-size: 1rem;
+    position: absolute;
+    z-index: 2;
+    top: 1.3125rem;
+    left: relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-mobile);
+    transform-origin: left top;
+    pointer-events: none;
+    @include mixins.transition(all, 0.2s, ease-in-out);
+
+    &.error {
+      color: var(--error);
+    }
+
+    &.disabled {
+      color: var(--greyed-out);
+    }
+  }
+}
+
+.form-input-label {
+  font-family: var(--font-family);
+  font-size: var(--form-control-font-size);
+  line-height: var(--default-line-height);
+  color: var(--color-blue-grey900);
+  margin-bottom: relativeToBaseFontSize(0.25);
+  display: inline-block;
+
+  &.disabled {
+    color: var(--greyed-out);
+  }
+}
+
+.wrapper + fieldset,
+.wrapper + .wrapper {
+  margin-top: relativeToBaseFontSize(1);
+}
+
+.required {
+  &:after {
+    content: " *";
+    color: var(--error);
+  }
+}
+
+.wrapper[data-readonlyview="true"] {
+  & label {
+    color: var(--read-only-text-color);
+  }
+}
+
+@media only screen and (min-width: 30em) {
+  .floating-wrapper {
+    .floating-label {
+      left: relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-mobile);
+    }
+  }
+}

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

@@ -0,0 +1,116 @@
+/*
+ * 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, ReactElement } from "react";
+import { FormGroup, Props as FormGroupProps } from "../../FormGroup/FormGroup";
+import { Label, Props as LabelProps } from "../../Label/Label";
+import classes from "./Wrapper.module.scss";
+import { Props as HelperProps } from "../../FormHelperText/FormHelperText";
+import { FormElement } from "../../form.interfaces";
+
+export interface Props extends ComponentPropsWithRef<"div">, FormGroupProps {
+  children: ReactElement | ReactElement[];
+  helperIndent?: number;
+  label?: string;
+  labelProps?: LabelProps;
+  name: string;
+  /** This does NOT add validation! It simply adds an asterix on the Label! */
+  required?: boolean;
+  innerClassName?: string;
+}
+
+/** For components that extend this component we create an interface (InputWrapper, SelectWrapper, etc.) */
+export interface WrapperProps extends Omit<FormElement, "success"> {
+  errorMessage?: string;
+  helperText?: string;
+  helperProps?: HelperProps;
+  errorMessageProps?: ComponentPropsWithRef<"span">;
+  label?: string;
+  name: string;
+  required?: boolean;
+  disabled?: boolean;
+}
+
+const WrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    children,
+    className,
+    error,
+    errorMessage,
+    errorId,
+    errorMessageIcon,
+    errorMessageIconPosition,
+    errorMessageProps,
+    helperText,
+    helperId,
+    required,
+    helperProps,
+    helperIndent,
+    labelProps,
+    label,
+    disabled,
+    name,
+    innerClassName,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const renderChildren = () =>
+    React.Children.map(children, child =>
+      React.cloneElement(child, {
+        disabled
+      })
+    );
+
+  const labelClasses = [classes["form-input-label"]];
+
+  labelProps?.className && labelClasses.push(labelProps.className);
+  required && labelClasses.push(classes["required"]);
+  error && labelClasses.push(classes["error"]);
+  disabled && labelClasses.push(classes["disabled"]);
+
+  return (
+    <div {...rest} ref={ref} className={`${classes.wrapper} ${className ?? ""}`}>
+      <FormGroup
+        disabled={disabled}
+        error={error}
+        errorMessage={errorMessage}
+        errorId={errorId}
+        errorMessageIcon={errorMessageIcon}
+        errorMessageIconPosition={errorMessageIconPosition}
+        errorMessageProps={errorMessageProps}
+        helperText={helperText}
+        helperId={helperId}
+        helperProps={helperProps}
+      >
+        <div className={` ${innerClassName ? innerClassName : ""}`}>
+          {label && (
+            <Label
+              {...labelProps}
+              className={`${classes.label} ${labelClasses.join(" ")}`}
+              htmlFor={name}
+            >
+              {label}
+            </Label>
+          )}
+          {renderChildren()}
+        </div>
+      </FormGroup>
+    </div>
+  );
+};
+
+export const Wrapper = React.forwardRef(WrapperComponent);

package/src/components/Form/form.interfaces.ts

@@ -0,0 +1,34 @@
+/*
+ * 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 { ComponentPropsWithRef } from "react";
+import { DataAttributeKey } from "../../interfaces";
+
+/** Radios */
+export interface FormSelector extends FormElement {
+  helperText?: string;
+  errorMessage?: string;
+  errorMessageProps?: ComponentPropsWithRef<"span">;
+  parentHelperId?: string;
+  parentErrorId?: string;
+}
+
+/** Default form elements */
+export interface FormElement {
+  error?: boolean;
+  success?: boolean;
+  [dataAttribute: DataAttributeKey]: unknown;
+}