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

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

@@ -0,0 +1,205 @@
+/*
+ * 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,
+  ReactNode,
+  useEffect
+} from "react";
+import { Icon, Icons } from "../../Icon/Icon";
+import { Props as FormHelperTextProps } from "../FormHelperText/FormHelperText";
+import classes from "./Checkbox.module.scss";
+import { useFormSelector } from "../../../hooks/useFormSelector";
+import {
+  FormSelectorWrapper,
+  Props as FormSelectorWrapperProps
+} 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">, 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,
+    helperProps,
+    indeterminate,
+    parentErrorId,
+    errorMessage,
+    errorMessageProps,
+    disabled,
+    label,
+    parentHelperId,
+    className,
+    error,
+    checked = false,
+    formSelectorWrapperProps,
+    required,
+    onChange,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const { errorId, identifier, describedBy } = useFormSelector({
+    name,
+    helperText,
+    parentErrorId,
+    errorMessage,
+    error,
+    parentHelperId
+  });
+
+  const { required: inlineRequired } = useInlineEditing();
+
+  useEffect(() => {
+    if (!name) {
+      throw new Error("Please pass a 'name' prop to your <Checkbox> component.");
+    }
+
+    if (typeof children === "object" && !isToggle(children) && indeterminate === undefined) {
+      throw new Error(
+        "If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop."
+      );
+    }
+  }, []);
+
+  const determineLabel = () => {
+    // this should be temporary, for backwards compatibility;
+    // once the components implementing checkboxes in microfrontends are updated, only label should be returned
+    if (label) {
+      return label;
+    } else if (typeof children === "string") {
+      return children;
+    }
+  };
+
+  const renderNestedCheckboxes = () => (
+    <ul className={classes["checkbox-list"]}>
+      {React.Children.map(children as ReactElement[], child => {
+        return (
+          <li>
+            <Checkbox
+              {...child.props}
+              parentHelperId={parentHelperId}
+              parentErrorId={parentErrorId}
+              error={error}
+              disabled={child.props.disabled ? child.props.disabled : disabled}
+            >
+              {child.props.children}
+            </Checkbox>
+          </li>
+        );
+      })}
+    </ul>
+  );
+
+  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (disabled) {
+      return;
+    }
+    onChange?.(event);
+  };
+
+  const renderToggle = () => React.Children.toArray(children).filter(isToggle);
+
+  const iconClasses = [classes["input"]];
+  const nativeInputClasses = [classes["native-input"]];
+  const wrapperClasses = [classes["checkbox-wrapper"]];
+  error && nativeInputClasses.push(classes["error"]);
+  disabled && nativeInputClasses.push(classes["disabled"]) && iconClasses.push(classes["disabled"]);
+  className && wrapperClasses.push(className);
+
+  return (
+    <FormSelectorWrapper
+      {...formSelectorWrapperProps}
+      className={wrapperClasses.join(" ")}
+      containerProps={{ className: classes["checkbox-container"] }}
+      helperText={helperText}
+      helperProps={helperProps}
+      parentErrorId={parentErrorId}
+      errorId={errorId}
+      errorMessage={errorMessage}
+      errorMessageProps={{
+        ...errorMessageProps,
+        className: `${errorMessageProps?.className} ${classes["error-message"]}`
+      }}
+      error={error}
+      disabled={disabled}
+      identifier={identifier}
+      required={inlineRequired}
+      nestedChildren={
+        typeof children === "object" && !isToggle(children) && renderNestedCheckboxes()
+      }
+    >
+      <input
+        {...rest}
+        ref={ref}
+        disabled={disabled}
+        className={nativeInputClasses.join(" ")}
+        checked={checked}
+        onChange={onChangeHandler}
+        aria-invalid={error as boolean}
+        aria-checked={indeterminate ? "mixed" : checked}
+        aria-describedby={describedBy}
+        aria-required={required || inlineRequired}
+        id={`${identifier}-checkbox`}
+        name={name}
+        type="checkbox"
+      />
+      {renderToggle()}
+
+      {indeterminate && (
+        <Icon
+          className={`${iconClasses.join(" ")} ${classes["indeterminate"]}`}
+          icon={Icons.MinusSquare}
+        />
+      )}
+      {checked && !indeterminate && (
+        <Icon
+          className={`${iconClasses.join(" ")} ${classes["checkmark"]}`}
+          icon={Icons.CheckmarkSquare}
+        />
+      )}
+      {!checked && !indeterminate && (
+        <Icon className={`${iconClasses.join(" ")} ${classes["square"]}`} icon={Icons.Square} />
+      )}
+      <label
+        className={`${required ? classes["required"] : ""}`}
+        htmlFor={`${identifier}-checkbox`}
+      >
+        {determineLabel()}
+      </label>
+    </FormSelectorWrapper>
+  );
+};
+
+export const Checkbox = withReadOnly(React.forwardRef(CheckboxComponent));

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

@@ -0,0 +1,49 @@
+/*!
+ * 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 "../../../variables.scss";
+@use "../../../functions" as *;
+
+.fieldset {
+  border: 0;
+  padding: relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-mobile);
+  border-radius: 0.5rem;
+  margin: 0;
+
+  &.no-padding {
+    padding: 0;
+  }
+
+  + .wrapper,
+  + .fieldset {
+    margin-top: 1rem;
+  }
+
+  .legend {
+    display: block;
+
+    &.required {
+      &:after {
+        content: " *";
+      }
+    }
+  }
+}
+@media only screen and (min-width: 30em) {
+  .fieldset {
+    padding: relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-desktop);
+  }
+}

package/src/components/Form/Fieldset/Fieldset.tsx

@@ -0,0 +1,128 @@
+/*
+ * 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 readyclasses from "../../../readyclasses.module.scss";
+import classes from "./Fieldset.module.scss";
+import { Typography, Variant } from "../../Typography/Typography";
+import { Input } from "../Input/Input";
+import { Select } from "../Select/SingleSelect/Select";
+import { MultiSelect } from "../Select/MultiSelect/MultiSelect";
+import { Radio } from "../Radio/Radio";
+import { Checkbox } from "../Checkbox/Checkbox";
+import { Textarea } from "../Textarea/Textarea";
+import { Toggle } from "../Toggle/Toggle";
+import { Label } from "../Label/Label";
+import { FormControl } from "../FormControl/FormControl";
+import { FormSelectorWrapper } from "../FormSelectorWrapper/FormSelectorWrapper";
+import { FormHelperText } from "../FormHelperText/FormHelperText";
+import { InputWrapper } from "../Wrapper/InputWrapper/InputWrapper";
+import { SelectWrapper } from "../Wrapper/SelectWrapper/SelectWrapper";
+import { TextareaWrapper } from "../Wrapper/TextareaWrapper/TextareaWrapper";
+import { withReadOnly } from "../../withReadOnly";
+
+export interface Props extends ComponentPropsWithRef<"fieldset"> {
+  children?: ReactElement | ReactElement[];
+  legend: string;
+  legendStyle?: Variant;
+  hideLegend?: boolean;
+  background?: string;
+  noPadding?: boolean;
+  noBackground?: boolean;
+  required?: boolean;
+  disablePropagation?: boolean;
+}
+
+const FieldsetComponent: ForwardRefRenderFunction<HTMLFieldSetElement, Props> = (
+  {
+    children,
+    className,
+    legend,
+    legendStyle = "body",
+    hideLegend = false,
+    noBackground,
+    background = noBackground ? "" : "#FFF",
+    noPadding = false,
+    disabled = false,
+    required = false,
+    disablePropagation = false,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const renderChildren = () => {
+    if (!children) {
+      return;
+    }
+
+    /* All right, so the issue is that whenever we try to add disabled prop to a component that doesn't accept it,
+            React will throw an error. However, it might occur that we want a component inside Fieldset because of aesthetic purposes
+            (fieldset applies a sort of container with white background and if we want to display it inside of this container... then yea).
+            So instead we supply an array of components that we want to add the disabled prop to and check if child.type equals one of these. */
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    const allowedComponents: React.ComponentPropsWithRef<any>[] = [
+      Input,
+      Select,
+      MultiSelect,
+      Radio,
+      Checkbox,
+      Textarea,
+      Toggle,
+      Label,
+      FormControl,
+      FormSelectorWrapper,
+      FormHelperText,
+      InputWrapper,
+      SelectWrapper,
+      TextareaWrapper
+    ];
+
+    return React.Children.map(children, (child: ReactElement) => {
+      if (allowedComponents.includes(child.type) && !disablePropagation) {
+        return React.cloneElement(child, {
+          disabled: child.props.disabled ?? disabled
+        });
+      }
+
+      return child;
+    });
+  };
+
+  return (
+    <fieldset
+      {...rest}
+      ref={ref}
+      disabled={disabled}
+      style={{ backgroundColor: background, ...rest.style }}
+      className={`${classes.fieldset} ${noPadding ? classes["no-padding"] : ""} ${className ?? ""}`}
+    >
+      {legend && <legend className={readyclasses["sr-only"]}>{legend}</legend>}
+      {legend && !hideLegend && (
+        <Typography
+          variant={legendStyle}
+          tag="span"
+          aria-hidden="true"
+          className={`${classes["legend"]} ${required ? classes["required"] : ""}`}
+        >
+          {legend}
+        </Typography>
+      )}
+      {renderChildren()}
+    </fieldset>
+  );
+};
+
+export const Fieldset = withReadOnly(React.forwardRef(FieldsetComponent));

package/src/components/Form/FileUpload/FileItem/FileItem.module.scss

@@ -0,0 +1,204 @@
+/*!
+ * 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" as *;
+
+.file-item-wrapper {
+  padding: 0;
+  border-radius: var(--input-border-radius);
+  @include transition(all, 0.2s, ease-in-out);
+
+  [class*="icon"] {
+    font-size: var(--font-size-big);
+  }
+
+  & .file-list-container {
+    background-color: var(--color-blue-grey25);
+    padding: 0.25rem 0.75rem;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    min-height: 2.875rem;
+
+    .action-button-wrapper {
+      margin: 0.25rem 0;
+      display: flex;
+
+      button {
+        margin-left: 0.5rem;
+
+        span {
+          font-size: var(--button-font-size);
+          text-transform: capitalize;
+        }
+      }
+
+      a {
+        padding-left: 0.75rem;
+        padding-right: 1.25rem;
+        font-weight: 500;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        margin-left: 0.5rem;
+
+        span.action-icon {
+          display: flex;
+          justify-content: center;
+          width: calc(1.71 * var(--button-font-size));
+          margin-right: 0.25rem;
+          font-size: var(--button-font-size);
+          padding-left: 0;
+        }
+
+        span {
+          font-size: var(--button-font-size);
+          text-transform: capitalize;
+        }
+
+        &:hover {
+          color: var(--button-primary-hover-color);
+          background-color: var(--color-black10);
+        }
+
+        &:focus {
+          @include focusVisibleOutline($outlineOffset: 2px, $selectors: null);
+        }
+      }
+    }
+
+    .progress-with-action {
+      width: 100%;
+      display: flex;
+      align-items: center;
+
+      .progress-bar {
+        min-height: 3rem;
+        width: 100%;
+        background: transparent;
+
+        > span {
+          height: 0.3rem;
+          border-radius: var(--input-border-radius);
+        }
+
+        p {
+          font-size: var(--button-font-size);
+        }
+      }
+    }
+  }
+
+  .progress-bar {
+    background-color: var(--color-black10);
+  }
+
+  span[class*="bar--"] {
+    border-radius: var(--input-border-radius);
+    height: 1rem;
+  }
+
+  .file-name {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    font-size: var(--form-control-font-size);
+
+    .friendly-name {
+      overflow-wrap: anywhere;
+      text-overflow: ellipsis;
+      text-wrap: wrap;
+    }
+
+    &.error {
+      & span {
+        &::before {
+          color: var(--error);
+        }
+      }
+    }
+  }
+
+  .action-icon {
+    margin-left: auto;
+    color: var(--color-primary);
+    cursor: pointer;
+    padding-left: 1.25rem;
+    margin-right: 1rem;
+
+    & label,
+    & a {
+      text-transform: capitalize;
+      padding-left: 0.5rem;
+      cursor: pointer;
+      color: var(--color-primary);
+      text-decoration: none;
+    }
+  }
+
+  .file-icon {
+    margin-right: 0.5rem;
+
+    &::before {
+      color: var(--color-primary500);
+    }
+
+    &.retry {
+      &::before {
+        color: var(--error);
+      }
+    }
+  }
+
+  .file-subtitle,
+  .progress-bar {
+    display: block;
+    margin: 0.3125rem 1.75rem;
+    padding: 0;
+    overflow-wrap: anywhere;
+    text-overflow: ellipsis;
+    text-wrap: wrap;
+  }
+
+  .error,
+  .retry {
+    color: var(--error);
+  }
+
+  .readonly {
+    color: var(--greyed-out);
+  }
+
+  .file-subtitle {
+    margin-left: 0;
+  }
+
+  &[data-readonlyview="true"] {
+    & .file-list-container {
+      & p {
+        & span {
+          &:before {
+            color: var(--font-family);
+          }
+        }
+      }
+
+      & button {
+        visibility: hidden;
+      }
+    }
+  }
+}