@onewelcome/react-lib-components 1.4.0 → 1.6.0

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

@@ -14,15 +14,14 @@
  *    limitations under the License.
  */
 
-@import "../../readyclasses.module.scss";
-@import "../../mixins.module.scss";
+@use "../../mixins.module.scss";
 
 $listItemHeight: 2.125rem;
 
 .select {
   position: relative;
   box-sizing: border-box;
-  @include transition(all, 0.2s, ease-in-out);
+  @include mixins.transition(all, 0.2s, ease-in-out);
   border: 0;
   border-radius: var(--input-border-radius);
   background-color: var(--input-background-color);
@@ -57,7 +56,6 @@ $listItemHeight: 2.125rem;
     position: relative;
     width: 100%;
     min-height: calc(4rem - (2 * var(--input-border-width)));
-    border: 0;
     padding: 0 1.25rem;
     background-color: transparent;
     border-color: var(--light-grey-border);
@@ -66,7 +64,7 @@ $listItemHeight: 2.125rem;
     border-radius: var(--input-border-radius);
     font-size: var(--font-size);
     cursor: pointer;
-    @include transition(all, 0.2s, ease-in-out);
+    @include mixins.transition(all, 0.2s, ease-in-out);
 
     &:focus {
       outline: 0;
@@ -173,7 +171,12 @@ $listItemHeight: 2.125rem;
   display: flex;
   align-items: center;
 
-  .warning {
+  [data-icon-status="success"] {
+    color: var(--success);
+    font-size: 1.25rem;
+  }
+
+  [data-icon-status="error"] {
     color: var(--error);
     font-size: 1.25rem;
   }

package/src/Form/Select/Select.test.tsx

@@ -119,6 +119,17 @@ describe("Select should render", () => {
     expect(button).toHaveAttribute("aria-invalid", "true");
     expect(select.querySelector("[data-clear]")).not.toBeInTheDocument();
   });
+
+  it("should have a success icon when success state", () => {
+    const { button } = createSelect(defaultParams => ({
+      ...defaultParams,
+      success: true
+    }));
+
+    const icon = button.querySelector("[class*='icon-checkmark-circle-breakout']");
+    expect(button).toHaveClass("success");
+    expect(icon).toBeDefined();
+  });
 });
 
 describe("ref should work", () => {

package/src/Form/Select/Select.tsx

@@ -33,6 +33,7 @@ import { useBodyClick } from "../../hooks/useBodyClick";
 import readyclasses from "../../readyclasses.module.scss";
 import { filterProps } from "../../util/helper";
 import { useArrowNavigation, useSelectPositionList } from "./SelectService";
+import { useDetermineStatusIcon } from "../../hooks/useDetermineStatusIcon";
 
 type PartialInputProps = Partial<InputProps>;
 
@@ -67,6 +68,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     selectButtonProps,
     className,
     error = false,
+    success = false,
     value,
     clearLabel = "Clear selection",
     onChange,
@@ -90,7 +92,6 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
   const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();
   const searchInputRef = useRef<HTMLInputElement>(null);
   const customSelectButtonRef = useRef<HTMLButtonElement>(null);
-
   const { onArrowNavigation } = useArrowNavigation({
     expanded,
     setExpanded,
@@ -183,13 +184,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     setFilter(event.currentTarget.value);
   };
 
-  const statusIcon = () => {
-    if (error) {
-      return <Icon className={classes["warning"]} icon={Icons.Warning} />;
-    }
-
-    return null;
-  };
+  const icon = useDetermineStatusIcon({ success, error });
 
   const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
     onChange && onChange(event);
@@ -214,6 +209,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
   error && additionalClasses.push(classes.error);
   disabled && additionalClasses.push(classes.disabled);
   className && additionalClasses.push(className);
+  success && additionalClasses.push(classes.success);
 
   /** 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 (
@@ -262,7 +258,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
             {value?.length > 0 && <span data-display-inner>{display}</span>}
           </div>
           <div className={classes["status"]}>
-            {statusIcon()}
+            {icon}
             <Icon className={classes["triangle-down"]} icon={Icons.TriangleDown} />
           </div>
         </button>

package/src/Form/Select/SelectService.ts

@@ -174,7 +174,7 @@ export const useSelectPositionList = ({
 
   const calculateOptionListMaxHeight = (position: Position) => {
     // Calculate max height if there's more space below the select
-    const listHeight = optionListReference.current!.getBoundingClientRect().height;
+    const listHeight = optionListReference.current?.getBoundingClientRect().height;
     const transformOrigin = position.top !== "initial" ? "top" : "bottom";
 
     const availableSpace =
@@ -184,7 +184,7 @@ export const useSelectPositionList = ({
           16
         : containerReference.current!.getBoundingClientRect()[transformOrigin] - 16;
 
-    if (availableSpace < listHeight) {
+    if (listHeight && availableSpace < listHeight) {
       setOptionsListMaxHeight(`${availableSpace}px`);
       setOpacity(100);
       return;

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

@@ -14,14 +14,30 @@
  *    limitations under the License.
  */
 
-@import "../../mixins.module.scss";
+@use "../../mixins.module.scss";
 
 .textarea-wrapper {
   position: relative;
   box-sizing: border-box;
   width: 100%;
+  [data-icon-status="success"],
+  [data-icon-status="error"] {
+    position: absolute;
+    right: 1.25rem;
+    z-index: 1;
+    top: 0.85rem;
+    font-size: 1.25rem;
+  }
+
+  [data-icon-status="success"] {
+    color: var(--success);
+  }
+
+  [data-icon-status="error"] {
+    color: var(--error);
+  }
 
-  @include outlineStates;
+  @include mixins.outlineStates();
 }
 
 .textarea {
@@ -29,7 +45,7 @@
   box-sizing: border-box;
   border: 0;
   border-radius: var(--input-border-radius);
-  @include transition(all, 0.2s, ease-in-out);
+  @include mixins.transition(all, 0.2s, ease-in-out);
   font-family: var(--font-family);
   font-size: var(--font-size);
   color: var(--greyed-out);
@@ -42,20 +58,12 @@
     cursor: not-allowed;
   }
 
-  @include browserOutlineDisabled;
+  @include mixins.browserOutlineDisabled();
 }
 
-@include outline;
+@include mixins.outline();
 
 .error {
   border-color: var(--error);
   color: var(--error);
 }
-
-.warning {
-  color: var(--error);
-  position: absolute;
-  right: 1.25rem;
-  top: 0.75rem;
-  font-size: 1.25rem;
-}

package/src/Form/Textarea/Textarea.test.tsx

@@ -116,3 +116,11 @@ describe("Error status", () => {
     expect(textarea.nextElementSibling).toHaveClass("icon-error-circle");
   });
 });
+
+describe("Success status", () => {
+  it("success icon should be visible", () => {
+    const { textarea } = createTextarea({ success: true });
+    const icon = textarea.parentElement?.querySelector(".icon-checkmark-circle-breakout");
+    expect(icon).toBeDefined();
+  });
+});

package/src/Form/Textarea/Textarea.tsx

@@ -15,25 +15,22 @@
  */
 
 import React, { ForwardRefRenderFunction, ComponentPropsWithRef, useState } from "react";
-import { Icon, Props as IconProps, Icons } from "../../Icon/Icon";
 import classes from "./Textarea.module.scss";
 import { FormElement } from "../form.interfaces";
-
-interface IconPropsPartial extends Omit<Partial<IconProps>, "ref"> {}
+import { useDetermineStatusIcon } from "../../hooks/useDetermineStatusIcon";
 
 export interface Props extends ComponentPropsWithRef<"textarea">, FormElement {
   wrapperProps?: ComponentPropsWithRef<"div">;
-  errorProps?: IconPropsPartial;
 }
 
 const TextareaComponent: ForwardRefRenderFunction<HTMLTextAreaElement, Props> = (
   {
     error = false,
+    success = false,
     disabled = false,
     className,
     rows = 4,
     wrapperProps,
-    errorProps,
     onFocus,
     onBlur,
     ...rest
@@ -49,6 +46,9 @@ const TextareaComponent: ForwardRefRenderFunction<HTMLTextAreaElement, Props> =
   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 });
 
   return (
     <div {...wrapperProps} className={wrapperClasses.join(" ")}>
@@ -67,13 +67,7 @@ const TextareaComponent: ForwardRefRenderFunction<HTMLTextAreaElement, Props> =
           onBlur && onBlur(event);
         }}
       />
-      {error && (
-        <Icon
-          {...errorProps}
-          className={`${classes["warning"]} ${errorProps?.className ?? ""}`}
-          icon={Icons.Error}
-        />
-      )}
+      {icon}
       <span className={outlineClasses.join(" ")}></span>
     </div>
   );

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

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../../mixins.module.scss";
+@use "../../mixins.module.scss";
 
 $borderRadius: 2.5rem;
 
@@ -31,7 +31,7 @@ $borderRadius: 2.5rem;
   background-color: var(--default);
   border-radius: $borderRadius;
   position: relative;
-  @include transition(background-color, 0.2s, ease-in-out);
+  @include mixins.transition(background-color, 0.2s, ease-in-out);
   display: block;
   pointer-events: none;
 
@@ -46,7 +46,7 @@ $borderRadius: 2.5rem;
     top: 50%;
     transform: translateY(-50%) translateX(0);
     left: 0.125rem;
-    @include transition(transform, 0.2s, ease-in-out);
+    @include mixins.transition(transform, 0.2s, ease-in-out);
   }
 
   &.checked {

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

@@ -14,9 +14,9 @@
  *    limitations under the License.
  */
 
-@import "../../../mixins.module.scss";
+@use "../../../mixins.module.scss";
 
-@include inputLabelPrimaryColorOnFocus("label.input-label.focus");
+@include mixins.inputLabelPrimaryColorOnFocus("label.input-label.focus");
 
 input {
   &.floating-label {
@@ -30,7 +30,7 @@ input {
 
 .input-wrapper {
   [data-icon]:before {
-    @include transition(all, 0.2s, ease-in-out);
+    @include mixins.transition(all, 0.2s, ease-in-out);
     transform: translateY(0px);
     font-size: 1.125rem;
   }
@@ -48,6 +48,10 @@ input {
     padding-left: 0.5rem;
   }
 
+  [data-suffix] {
+    padding-left: 1.25rem;
+  }
+
   input + [data-suffix] {
     padding-left: 0.5rem;
   }

package/src/Form/Wrapper/InputWrapper/InputWrapper.tsx

@@ -74,6 +74,7 @@ const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     value,
     className,
     error,
+    success,
     onChange,
     onBlur,
     onFocus,
@@ -164,6 +165,7 @@ const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
           inputProps?.className ?? ""
         }`}
         name={name}
+        success={success}
         error={error}
         id={name}
         value={value}

package/src/Form/Wrapper/SelectWrapper/SelectWrapper.tsx

@@ -39,7 +39,17 @@ export interface Props
 }
 
 const SelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, error, value, placeholder, selectProps, helperProps, onChange, ...rest }: Props,
+  {
+    children,
+    error,
+    success,
+    value,
+    placeholder,
+    selectProps,
+    helperProps,
+    onChange,
+    ...rest
+  }: Props,
   ref
 ) => {
   const { errorId, floatingLabelActive, helperId, labelId } = useWrapper(value, placeholder);
@@ -63,6 +73,7 @@ const SelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> =
         value={value}
         labeledBy={labelId}
         error={error}
+        success={success}
         describedBy={error ? errorId : helperId}
         onChange={onChange}
         placeholder={placeholder}

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

@@ -14,14 +14,14 @@
  *    limitations under the License.
  */
 
-@import "../../../mixins.module.scss";
+@use "../../../mixins.module.scss";
 
-@include inputLabelPrimaryColorOnFocus("label.textarea-label");
+@include mixins.inputLabelPrimaryColorOnFocus("label.textarea-label");
 
 .textarea-wrapper {
   &:after {
     content: "";
-    @include transition(all, 0.15s, ease-in-out);
+    @include mixins.transition(all, 0.15s, ease-in-out);
     display: block;
     width: calc(95%);
     height: 1.625rem;
@@ -41,17 +41,22 @@
     left: 2px;
     top: 2px;
   }
-}
 
-.textarea {
-  padding-top: 1.625rem;
+  .textarea {
+    padding-top: 1.625rem;
+
+    &:active:not(:disabled) {
+      border-color: var(--color-primary);
+    }
 
-  &:active:not(:disabled) {
-    border-color: var(--color-primary);
+    &:focus:not(:disabled) {
+      outline: none;
+    }
   }
 
-  &:focus:not(:disabled) {
-    outline: none;
+  [data-icon-status="success"],
+  [data-icon-status="error"] {
+    top: 1.75rem;
   }
 }
 
@@ -59,7 +64,3 @@
   margin-top: 0.25rem;
   margin-left: 1.25rem;
 }
-
-.error-icon {
-  top: 1.75rem;
-}

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

@@ -40,6 +40,7 @@ const TextareaWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
   {
     name,
     error,
+    success,
     value,
     label,
     placeholder,
@@ -102,6 +103,7 @@ const TextareaWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
         name={name}
         id={name}
         value={value}
+        success={success}
         onChange={onChange}
         onFocus={e => {
           onFocus && onFocus(e);
@@ -127,7 +129,6 @@ const TextareaWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
         wrapperProps={{
           className: `${wrapperClasses.join(" ")} ${classes["textarea-wrapper"]}`
         }}
-        errorProps={{ className: classes["error-icon"] }}
       />
     </Wrapper>
   );

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

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../../../mixins.module.scss";
+@use "../../../mixins.module.scss";
 
 .floating-wrapper {
   position: relative;
@@ -27,7 +27,7 @@
     top: 1.3125rem;
     left: 1.25rem;
     transform-origin: left top;
-    @include transition(all, 0.2s, ease-in-out);
+    @include mixins.transition(all, 0.2s, ease-in-out);
     pointer-events: none;
 
     &.floating-label-active {

package/src/Form/form.interfaces.ts

@@ -27,5 +27,6 @@ export interface FormSelector extends FormElement {
 /** Default form elements */
 export interface FormElement {
   error?: boolean;
+  success?: boolean;
   [dataAttribute: DataAttributeKey]: unknown;
 }

package/src/Link/Link.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .link {
   font-family: var(--font-family);
@@ -64,19 +64,19 @@
 }
 
 .button {
-  @include buttonBase("link");
+  @include mixins.buttonBase("link");
 
   text-decoration: none;
 
   &.fill {
-    @include button("fill", "link");
+    @include mixins.button("fill", "link");
   }
 
   &.outline {
-    @include button("outline", "link");
+    @include mixins.button("outline", "link");
   }
 
   &.text {
-    @include button("text", "link");
+    @include mixins.button("text", "link");
   }
 }

package/src/Link/Link.tsx

@@ -17,15 +17,13 @@
 import React, {
   ForwardRefRenderFunction,
   ComponentPropsWithRef,
-  ForwardRefExoticComponent,
-  ReactNode
+  ForwardRefExoticComponent
 } from "react";
 import classes from "./Link.module.scss";
 
 export type AnchorType = "external" | "internal" | "download";
 
 export interface Props extends ComponentPropsWithRef<"a"> {
-  children?: ReactNode;
   color?: "primary" | "secondary" | "tertiary";
   display?: "link" | "button";
   buttonVariant?: "outline" | "text" | "fill";
@@ -69,17 +67,20 @@ const LinkComponent: ForwardRefRenderFunction<HTMLAnchorElement, Props> = (
   className && classNames.push(className);
 
   if (component) {
-    return React.createElement(component, {
-      ...rest,
-      ref: ref,
-      to: to,
-      className: classNames.join(" "),
-      "aria-disabled": disabled,
-      style: {
-        ...rest.style
+    return React.createElement(
+      component,
+      {
+        ...rest,
+        ref: ref,
+        to: to,
+        className: classNames.join(" "),
+        "aria-disabled": disabled,
+        style: {
+          ...rest.style
+        }
       },
-      children: children
-    });
+      children
+    );
   }
 
   return (

package/src/Notifications/Banner/Banner.module.scss

@@ -0,0 +1,76 @@
+/*!
+ * 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.
+ */
+
+.banner {
+  padding: 1rem 1.25rem;
+  background-color: var(--light);
+  display: flex;
+  border-width: 1px;
+  border-style: solid;
+  flex-grow: 0;
+  border-radius: var(--banner-border-radius);
+
+  .container {
+    display: block;
+    margin-left: 1rem;
+    flex: 1;
+    color: var(--default);
+  }
+
+  .headline {
+    margin-bottom: 0.25rem;
+  }
+  .content {
+    margin-bottom: 0;
+  }
+
+  .icon {
+    margin-top: 0.1rem;
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+  }
+
+  &.info {
+    border-color: var(--info);
+    .icon {
+      color: var(--info);
+    }
+    .headline {
+      color: var(--info);
+    }
+  }
+
+  &.warning {
+    border-color: var(--error);
+    .icon {
+      color: var(--warning);
+    }
+
+    .headline {
+      color: var(--warning);
+    }
+  }
+  &.error {
+    border-color: var(--error);
+    .icon {
+      color: var(--error);
+    }
+
+    .headline {
+      color: var(--error);
+    }
+  }
+}