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

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

@@ -0,0 +1,97 @@
+/*
+ * 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 "./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> = (
+  {
+    error = false,
+    success = false,
+    disabled = false,
+    className,
+    rows = 4,
+    wrapperProps,
+    onFocus,
+    onBlur,
+    value,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const [focus, setFocus] = useState(false);
+
+  const wrapperClasses = [classes["textarea-wrapper"]];
+  const outlineClasses = [classes["outline"]];
+
+  wrapperProps?.className && wrapperClasses.push(wrapperProps.className);
+  disabled && wrapperClasses.push(classes["disabled"]) && outlineClasses.push(classes["disabled"]);
+  error && wrapperClasses.push(classes["error"]) && outlineClasses.push(classes["error"]);
+  focus && wrapperClasses.push(classes["focus"]) && outlineClasses.push(classes["focus"]);
+  success && wrapperClasses.push("success");
+
+  const icon = useDetermineStatusIcon({ success, error });
+
+  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}
+        rows={rows}
+        className={`${error ? classes["error"] : ""} ${classes["textarea"]} ${className ?? ""}`}
+        disabled={disabled}
+        onFocus={event => {
+          setFocus(true);
+          onFocus?.(event);
+        }}
+        onBlur={event => {
+          setFocus(false);
+          onBlur?.(event);
+        }}
+        value={value}
+      />
+    );
+  };
+
+  return (
+    <div {...wrapperProps} className={wrapperClasses.join(" ")}>
+      {renderTextarea()}
+      {icon}
+      <span className={outlineClasses.join(" ")}></span>
+    </div>
+  );
+};
+
+export const Textarea = withReadOnly(React.forwardRef(TextareaComponent));

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

@@ -0,0 +1,214 @@
+/*!
+ * 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.scss";
+@use "../../../variables.scss";
+@use "../../../functions" as *;
+
+$borderRadius: 2.5rem;
+
+.toggle-wrapper {
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  label {
+    white-space: nowrap;
+  }
+
+  &--left {
+    > div > div {
+      flex-direction: row-reverse;
+      position: relative;
+
+      input {
+        left: initial;
+        right: 0;
+      }
+
+      label {
+        margin-left: 0;
+        margin-right: 0.5rem;
+      }
+
+      + div {
+        margin-left: 0;
+      }
+    }
+  }
+
+  &--hide-label {
+    > div > div {
+      label {
+        display: none;
+      }
+
+      + div {
+        margin-left: 0;
+      }
+    }
+  }
+
+  &--wrap {
+    label {
+      white-space: normal;
+    }
+  }
+
+  &--neutral {
+    input:checked + span {
+      background-color: var(--color-blue-grey500);
+    }
+
+    input + span {
+      &:after {
+        color: var(--color-blue-grey500);
+      }
+    }
+  }
+
+  &--between {
+    width: 100%;
+
+    > div {
+      width: 100%;
+
+      > div {
+        justify-content: space-between;
+      }
+    }
+
+    &.toggle-wrapper--right {
+      > div > div {
+        + div {
+          margin-left: 0;
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &--disabled {
+    input + span {
+      background-color: var(--color-blue-grey50);
+
+      &:before {
+        background-color: var(--color-blue-grey200);
+      }
+
+      &:after {
+        color: var(--color-blue-grey50);
+      }
+    }
+
+    input:checked + span {
+      background-color: var(--color-blue-grey200);
+
+      &:before {
+        background-color: var(--color-blue-grey50);
+      }
+
+      &:after {
+        color: var(--color-blue-grey200);
+      }
+    }
+  }
+}
+
+.toggle {
+  width: relativeToBaseFontSize(2);
+  min-width: relativeToBaseFontSize(2);
+  height: var(--font-size-big);
+  background-color: var(--toggle-background-color);
+  border-radius: $borderRadius;
+  position: relative;
+  display: block;
+  pointer-events: none;
+
+  @include mixins.transition(background-color, 0.2s, ease-in-out);
+
+  &:before {
+    content: "";
+    width: var(--font-size);
+    height: var(--font-size);
+    border-radius: 50%;
+    display: block;
+    background-color: var(--light);
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%) translateX(0);
+    left: relativeToBaseFontSize(0.125);
+    @include mixins.transition(transform, 0.2s, ease-in-out);
+  }
+
+  &:after {
+    content: "\e927";
+    font-family: "icomoon";
+    position: absolute;
+    font-size: relativeToBaseFontSize(0.4375);
+    top: 47%;
+    left: relativeToBaseFontSize(0.4);
+    transform: translateY(-50%) translateX(0);
+    color: var(--color-primary);
+    @include mixins.transition(transform, 0.2s, ease-in-out);
+  }
+
+  &.checked {
+    background-color: var(--color-primary);
+
+    &:before {
+      transform: translateY(-50%) translateX(calc(100% - 0.25 * var(--font-size)));
+    }
+
+    &:after {
+      transform: translateY(-50%) translateX(calc(170%));
+      content: "\e938";
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+}
+
+.toggle-helper {
+  margin-left: 2.5rem;
+}
+
+.checkbox {
+  z-index: variables.$toggle-z-index;
+  position: static;
+  & > div:first-child {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  input {
+    width: relativeToBaseFontSize(2);
+  }
+
+  input ~ [data-icon][aria-hidden] {
+    display: none;
+  }
+
+  input:focus-visible {
+    + * {
+      border-radius: $borderRadius;
+      outline-offset: 0.125rem;
+      outline-width: 0.125rem;
+    }
+  }
+}

package/src/components/Form/Toggle/Toggle.tsx

@@ -0,0 +1,80 @@
+/*
+ * 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 } from "react";
+import { Checkbox, Props as CheckboxProps } from "../Checkbox/Checkbox";
+import classes from "./Toggle.module.scss";
+
+export interface Props
+  extends ComponentPropsWithRef<"input">,
+    Omit<CheckboxProps, "indeterminate" | "errorMessage" | "error" | "label"> {
+  label?: string | React.ReactElement;
+  labelPosition?: "left" | "right";
+  hideLabel?: boolean;
+  labelOverflow?: "wrap" | "nowrap";
+  version?: "emphasis" | "neutral";
+  spacing?: "packed" | "between";
+}
+
+const ToggleComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
+  {
+    checked,
+    disabled,
+    helperProps,
+    className,
+    label,
+    labelPosition = "right",
+    hideLabel = false,
+    labelOverflow = "nowrap",
+    version = "emphasis",
+    spacing = "packed",
+    ...rest
+  }: Props,
+  ref
+) => {
+  const classNames = [classes["toggle-wrapper"]];
+  className && classNames.push(className);
+  classNames.push(classes[`toggle-wrapper--${labelPosition}`]);
+  hideLabel && classNames.push(classes["toggle-wrapper--hide-label"]);
+  classNames.push(classes[`toggle-wrapper--${labelOverflow}`]);
+  classNames.push(classes[`toggle-wrapper--${version}`]);
+  classNames.push(classes[`toggle-wrapper--${spacing}`]);
+  disabled && classNames.push(classes["toggle-wrapper--disabled"]);
+
+  return (
+    <div className={classNames.join(" ")}>
+      <Checkbox
+        {...rest}
+        ref={ref}
+        checked={checked}
+        className={classes["checkbox"]}
+        helperProps={{ className: classes["toggle-helper"], ...helperProps }}
+        disabled={disabled}
+        label={label}
+      >
+        <span
+          data-toggle="true"
+          aria-hidden="true"
+          className={`${classes["toggle"]} ${checked ? classes["checked"] : ""} ${
+            disabled ? classes["disabled"] : ""
+          } `}
+        ></span>
+      </Checkbox>
+    </div>
+  );
+};
+
+export const Toggle = React.forwardRef(ToggleComponent);

package/src/components/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.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.
+ */
+
+@use "../../../../functions" as *;
+
+.checkbox-wrapper-helper {
+  margin-top: 1.25rem;
+}
+
+.checkbox-wrapper-error {
+  font-size: 1rem;
+  margin-left: 0;
+  line-height: unset;
+}
+
+.checkbox-wrapper-error [data-icon] {
+  font-size: relativeToBaseFontSize(1.375);
+  vertical-align: bottom;
+}

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

@@ -0,0 +1,99 @@
+/*
+ * 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,
+  useEffect
+} from "react";
+import classes from "./CheckboxWrapper.module.scss";
+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;
+  fieldsetProps: FieldsetProps;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const CheckboxWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    children,
+    error = false,
+    helperText,
+    helperProps,
+    errorMessageProps,
+    fieldsetProps,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const { errorId, helperId } = useWrapper();
+
+  useEffect(() => {
+    if (fieldsetProps.legend === undefined) {
+      console.error(
+        `You should give your Fieldset component a legend prop so a legend element is rendered. This error was thrown in CheckboxWrapper. You can add this legend prop through the fieldsetProps prop by passing an object (fieldsetProps={{ legend: "legend here" }})`
+      );
+    }
+  }, []);
+
+  const renderChildren = () =>
+    React.Children.map(children, child =>
+      React.cloneElement(child, {
+        parentErrorId: errorId,
+        error: error,
+        parentHelperId: helperText ? helperId : false,
+        disabled: rest.disabled
+      })
+    );
+
+  return (
+    <Fieldset {...fieldsetProps} required={rest.required}>
+      <Wrapper
+        {...rest}
+        ref={ref}
+        label=""
+        helperId={helperId}
+        helperText={helperText}
+        helperProps={{
+          ...helperProps,
+          className: `${classes["checkbox-wrapper-helper"]}  ${helperProps?.className ?? ""}`
+        }}
+        errorMessageProps={{
+          ...errorMessageProps,
+          className: `${error ? classes["checkbox-wrapper-error"] : ""}`
+        }}
+        error={error}
+        errorMessageIcon={Icons.Error}
+        errorId={errorId}
+      >
+        {renderChildren()}
+      </Wrapper>
+    </Fieldset>
+  );
+};
+
+const ForwardedCheckboxWrapper = React.forwardRef(CheckboxWrapperComponent);
+ForwardedCheckboxWrapper.displayName = "CheckboxWrapper";
+/**
+ * @deprecated
+ */
+export const CheckboxWrapper = withReadOnly(ForwardedCheckboxWrapper, { isWrapperComponent: true });

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

@@ -0,0 +1,79 @@
+/*!
+ * 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.scss";
+@use "../../../../functions" as *;
+
+@include mixins.searchInputPointer("search", ".input-wrapper");
+
+input {
+  &.floating-label {
+    padding-top: 1rem;
+  }
+}
+
+.input-wrapper-helper {
+  margin-top: relativeToBaseFontSize(0.14);
+}
+
+.input-wrapper {
+  [data-icon]:before {
+    transform: translateY(0px);
+    font-size: var(--icon-font-big);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @include mixins.transition(all, 0.2s, ease-in-out);
+
+    &[data-readonlyview="true"] {
+      padding: auto;
+    }
+  }
+
+  [data-prefix],
+  [data-suffix] {
+    font-size: var(--input-font-size);
+  }
+
+  [data-prefix] + input {
+    padding-left: relativeToBaseFontSize(0.5);
+  }
+
+  [data-suffix] {
+    padding-left: relativeToBaseFontSize(1.25);
+  }
+
+  input + [data-suffix] {
+    padding-left: relativeToBaseFontSize(0.5);
+  }
+
+  .disabled {
+    background-color: var(--disabled);
+    cursor: not-allowed;
+    color: var(--greyed-out);
+  }
+
+  &[data-readonlyview="true"] {
+    & label {
+      color: var(--read-only-text-color);
+    }
+
+    & input {
+      color: var(--read-only-text-color);
+    }
+  }
+}