@onewelcome/react-lib-components 1.5.0 → 1.6.0

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);
+    }
+  }
+}

package/src/Notifications/Banner/Banner.test.tsx

@@ -0,0 +1,84 @@
+/*
+ * 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 { Banner, Props } from "./Banner";
+import { render } from "@testing-library/react";
+
+const defaultParams: Props = {
+  children: "The service will not be available between 02:00 and 03:00.",
+  title: "Maintenance is scheduled for next weekend",
+  type: "info"
+};
+
+const createBanner = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <Banner {...parameters} data-testid="BannerTest">
+      {defaultParams.children}
+    </Banner>
+  );
+  const BannerComponent = queries.getByTestId("BannerTest");
+
+  return {
+    ...queries,
+    BannerComponent
+  };
+};
+
+describe("Banner should render", () => {
+  it("renders without crashing", () => {
+    const { BannerComponent } = createBanner();
+    expect(BannerComponent).toBeDefined();
+    const title = BannerComponent.querySelector(".headline");
+    const content = BannerComponent.querySelector(".content");
+    const icon = BannerComponent.querySelector(".icon");
+    expect(BannerComponent).toHaveClass("info");
+    expect(title).toBeDefined();
+    expect(title).toHaveTextContent(defaultParams.title);
+    expect(content).toBeDefined();
+    expect(content).toHaveTextContent(defaultParams.children);
+    expect(icon).toBeDefined();
+  });
+
+  it("renders ariaLabel correctly", () => {
+    const ariaLabel = "Information regarding your information";
+    const { BannerComponent } = createBanner(defaultParams => ({ ...defaultParams, ariaLabel }));
+    expect(BannerComponent).toBeDefined();
+    expect(BannerComponent).toHaveAttribute("aria-label", ariaLabel);
+  });
+
+  it("renders ariaLive correctly", () => {
+    const ariaLive = "polite";
+    const { BannerComponent } = createBanner(defaultParams => ({ ...defaultParams, ariaLive }));
+    expect(BannerComponent).toBeDefined();
+    expect(BannerComponent).toHaveAttribute("aria-live", ariaLive);
+  });
+
+  it("renders ariaRole correctly", () => {
+    const ariaRole = "alert";
+    const { BannerComponent } = createBanner(defaultParams => ({
+      ...defaultParams,
+      type: "error",
+      ariaRole
+    }));
+    expect(BannerComponent).toBeDefined();
+    expect(BannerComponent).toHaveAttribute("role", ariaRole);
+  });
+});

package/src/Notifications/Banner/Banner.tsx

@@ -0,0 +1,78 @@
+/*
+ * 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, {
+  AriaAttributes,
+  AriaRole,
+  ComponentPropsWithRef,
+  ForwardRefRenderFunction
+} from "react";
+import { Typography } from "../../Typography/Typography";
+import { Icon, Icons } from "../../Icon/Icon";
+import classes from "./Banner.module.scss";
+
+export type BannerType = "error" | "warning" | "info";
+export interface Props extends ComponentPropsWithRef<"section"> {
+  children: string;
+  ariaRole?: AriaRole;
+  ariaLive?: AriaAttributes["aria-live"];
+  ariaLabel?: AriaAttributes["aria-label"];
+  type: BannerType;
+  title: string;
+}
+
+const BannerComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
+  { children, ariaLabel, ariaRole, ariaLive, type, title, ...rest }: Props,
+  ref
+) => {
+  const getIconVariant = (type: BannerType): Icons | null => {
+    switch (type) {
+      case "info":
+        return Icons.InfoCircle;
+      case "error":
+        return Icons.Error;
+      case "warning":
+        return Icons.Warning;
+      default:
+        return null;
+    }
+  };
+
+  const icon = getIconVariant(type);
+
+  return (
+    <section
+      {...rest}
+      ref={ref}
+      aria-live={ariaLive}
+      aria-label={ariaLabel}
+      role={ariaRole}
+      className={`${classes["banner"]} ${classes[type]}`}
+    >
+      {icon && <Icon icon={icon} className={classes["icon"]} />}
+      <div className={classes["container"]}>
+        <Typography variant={"h4"} className={classes["headline"]}>
+          {title}
+        </Typography>
+        <Typography variant={"body"} className={classes["content"]} tag={"p"}>
+          {children}
+        </Typography>
+      </div>
+    </section>
+  );
+};
+
+export const Banner = React.forwardRef(BannerComponent);

package/src/Notifications/BaseModal/BaseModal.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../../mixins.module.scss";
+@use "../../mixins.module.scss";
 
 $zIndex: 10;
 $marginTop: 3.125rem;
@@ -41,7 +41,7 @@ $marginTop: 3.125rem;
     left: 0;
     top: 0;
     background-color: transparent;
-    @include transition(background-color, 0.5s, ease);
+    @include mixins.transition(background-color, 0.5s, ease);
   }
 
   &.visible {