@onewelcome/react-lib-components 1.5.0 → 1.6.0

package/src/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.module.scss

@@ -13,7 +13,7 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-@import "../../../mixins.module.scss";
+@use "../../../mixins.module.scss";
 
 .snackbars {
   position: fixed;
@@ -21,7 +21,7 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  @include transition(height, 0.2s, ease-in-out);
+  @include mixins.transition(height, 0.2s, ease-in-out);
 
   &.bottom {
     bottom: 3.5rem;

package/src/Notifications/Snackbar/SnackbarItem/SnackbarItem.module.scss

@@ -14,8 +14,8 @@
  *    limitations under the License.
  */
 
-@import "../../../readyclasses.module.scss";
-@import "../../../mixins.module.scss";
+@use "../../../readyclasses.module.scss";
+@use "../../../mixins.module.scss";
 
 .snackbar {
   padding: 1rem 1.25rem;
@@ -23,7 +23,7 @@
   display: flex;
   width: 100%;
   box-sizing: border-box;
-  @include transition(height, 0.2s, ease-in-out);
+  @include mixins.transition(height, 0.2s, ease-in-out);
   flex-grow: 0;
 
   &.info {
@@ -114,7 +114,7 @@
       cursor: not-allowed;
     }
 
-    @include focusOutline(var(--snackbar-text-color));
+    @include readyclasses.focusOutline(var(--snackbar-text-color));
 
     &:not(:disabled):hover,
     &:not(:disabled):focus {

package/src/Notifications/Snackbar/SnackbarItem/SnackbarItem.tsx

@@ -96,9 +96,10 @@ export const SnackbarItem = ({
         onClose(id);
         actionProp.onClick && actionProp.onClick(e);
       }}
-      children={actionProp.label}
       className={classes["action-button"]}
-    ></button>
+    >
+      {actionProp.label}
+    </button>
   ));
 
   return (

package/src/Popover/Popover.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .popover {
   $transition-property: transform, opacity;
@@ -28,7 +28,7 @@
   opacity: 0;
   transform: scale(0.5);
 
-  @include transition($transition-property, 0.2s, ease-in-out);
+  @include mixins.transition($transition-property, 0.2s, ease-in-out);
 
   &.show {
     transform: scale(1);

package/src/Skeleton/Skeleton.module.scss

@@ -14,12 +14,12 @@
  *    limitations under the License.
  */
 
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .skeleton {
   display: block;
   height: auto;
-  @include skeletonLoading();
+  @include mixins.skeletonLoading();
 }
 
 .no-height::before {

package/src/Tabs/TabButton.tsx

@@ -24,13 +24,12 @@ import React, {
 import classes from "./TabButton.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"button"> {
-  children?: string;
   tabActive?: boolean;
   focused?: boolean;
 }
 
 const TabButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
-  { children, tabActive, focused, ...rest }: Props,
+  { children, tabActive, focused, title, ...rest }: Props,
   ref
 ) => {
   let buttonRef = (ref as RefObject<HTMLButtonElement>) || createRef<HTMLButtonElement>();

package/src/Tabs/Tabs.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 $focus-width: 5px;
 
@@ -45,7 +45,7 @@ $focus-width: 5px;
   height: var(--tab-active-border-height);
   background-color: var(--tab-active-border-color);
 
-  @include transition($transition-property, 0.2s, ease-in-out);
+  @include mixins.transition($transition-property, 0.2s, ease-in-out);
 }
 
 .tabdivider {

package/src/Tabs/Tabs.tsx

@@ -111,16 +111,19 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   useEffect(() => {
     const buttons = React.Children.map(children, (child, index) => {
       if (Object.prototype.hasOwnProperty.call(child.props, "title")) {
-        return React.createElement(TabButton, {
-          key: `${child.props.title.toLowerCase().replace(/\s/, "_")}_button`,
-          tabIndex: activeTabIndex === index ? 0 : -1,
-          "aria-selected": activeTabIndex === index,
-          focused: usingKeyboardNavigation && activeTabIndex === index,
-          tabActive: activeTabIndex === index,
-          "aria-controls": `tab_${index}`,
-          onClick: () => setActiveTabIndex(index),
-          children: child.props.title
-        });
+        return React.createElement(
+          TabButton,
+          {
+            key: `${child.props.title.toLowerCase().replace(/\s/, "_")}_button`,
+            tabIndex: activeTabIndex === index ? 0 : -1,
+            "aria-selected": activeTabIndex === index,
+            focused: usingKeyboardNavigation && activeTabIndex === index,
+            tabActive: activeTabIndex === index,
+            "aria-controls": `tab_${index}`,
+            onClick: () => setActiveTabIndex(index)
+          },
+          child.props.title
+        );
       }
       return null;
     });

package/src/Tiles/Tile.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .tile {
   border: 1px solid var(--light-grey-border);
@@ -22,7 +22,7 @@
   box-sizing: border-box;
   padding: 0 0 2rem;
   background-color: var(--light);
-  @include transition(box-shadow, 0.2s, ease-in-out);
+  @include mixins.transition(box-shadow, 0.2s, ease-in-out);
   font-family: var(--font-family);
 
   &:hover {
@@ -71,14 +71,14 @@
 
     .image {
       margin-top: 2.5rem;
-      @include skeletonLoading();
+      @include mixins.skeletonLoading();
       border-radius: 0.5rem;
       width: 3rem;
       height: 3rem;
     }
 
     .title {
-      @include skeletonLoading();
+      @include mixins.skeletonLoading();
       color: transparent;
       display: inline-block;
       width: 70%;

package/src/Tooltip/Tooltip.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .wrapper {
   display: flex;
@@ -24,7 +24,7 @@
 .tooltip-wrapper {
   .icon {
     margin-left: 0.5rem;
-    @include transition(all, 0.2s, ease-in-out);
+    @include mixins.transition(all, 0.2s, ease-in-out);
     color: var(--greyed-out);
 
     &:hover {
@@ -46,7 +46,7 @@
   transform-origin: center left;
   pointer-events: none;
 
-  @include transition($transition-property, 0.2s, ease-in-out);
+  @include mixins.transition($transition-property, 0.2s, ease-in-out);
 
   &.visible {
     opacity: 1;

package/src/_BaseStyling_/BaseStyling.tsx

@@ -49,6 +49,7 @@ interface CSSProperties {
   snackbarSuccessBackgroundColor?: string;
   snackbarErrorBackgroundColor?: string;
   snackbarBorderRadius?: string;
+  bannerBorderRadius?: string;
   dataGridRowBackgroundColor?: string;
   dataGridRowHoverBackgroundColor?: string;
   tabsBackgroundColor?: string;
@@ -61,6 +62,7 @@ interface CSSProperties {
   default?: string;
   success?: string;
   error?: string;
+  info?: string;
   disabled?: string;
   greyedOut?: string;
   lightGreyBorder?: string;
@@ -112,6 +114,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     snackbarSuccessBackgroundColor: "#008a28",
     snackbarErrorBackgroundColor: "#d9291c",
     snackbarBorderRadius: "8px",
+    bannerBorderRadius: "8px",
     dataGridRowBackgroundColor: "transparent",
     dataGridRowHoverBackgroundColor: "#f5e6f0",
     tabsBackgroundColor: "var(--light)",
@@ -124,6 +127,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     default: "#0f0f1e",
     success: "#008a28",
     error: "#d9291c",
+    info: "var(--color-secondary)",
     disabled: "#e9e9eb",
     greyedOut: "#6f6f76",
     lightGreyBorder: "#e9e9eb",

package/src/hooks/useDetermineStatusIcon.test.ts

@@ -0,0 +1,28 @@
+import { renderHook } from "@testing-library/react-hooks";
+import { useDetermineStatusIcon } from "./useDetermineStatusIcon";
+
+describe("it should return the correct icon", () => {
+  it("should return an icon of type success", () => {
+    const { result } = renderHook(useDetermineStatusIcon, {
+      initialProps: { success: true, error: false }
+    });
+
+    expect(result.current).toBeDefined();
+    expect(result.current?.props?.["data-icon-status"]).toEqual("success");
+  });
+
+  it("should return an icon of type error", () => {
+    const { result } = renderHook(useDetermineStatusIcon, {
+      initialProps: { success: true, error: true }
+    });
+
+    expect(result.current).toBeDefined();
+    expect(result.current?.props?.["data-icon-status"]).toEqual("error");
+  });
+
+  it("should return null", () => {
+    const { result } = renderHook(useDetermineStatusIcon);
+
+    expect(result.current).toBeNull();
+  });
+});

package/src/hooks/useDetermineStatusIcon.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { FormElement } from "../Form/form.interfaces";
+import React, { ReactElement, useRef } from "react";
+import { Icon, Icons } from "../Icon/Icon";
+export const useDetermineStatusIcon = (params: Partial<FormElement>): ReactElement | null => {
+  const { error, success } = params || false;
+  let icon = null;
+  const errorRef = useRef(null);
+  const successRef = useRef(null);
+
+  if (error) {
+    icon = <Icon ref={errorRef} data-icon-status="error" icon={Icons.Error} />;
+  } else if (success) {
+    icon = (
+      <Icon ref={successRef} data-icon-status="success" icon={Icons.CheckmarkCircleBreakout} />
+    );
+  }
+
+  return icon;
+};

package/src/index.ts

@@ -123,3 +123,4 @@ export { HeaderCell } from "./DataGrid/datagrid.interfaces";
 export { DataGrid, Props as DataGridProps } from "./DataGrid/DataGrid";
 export { DataGridRow, Props as DataGridRowProps } from "./DataGrid/DataGridBody/DataGridRow";
 export { DataGridCell, Props as DataGridCellProps } from "./DataGrid/DataGridBody/DataGridCell";
+export { Banner, Props as BannerProps } from "./Notifications/Banner/Banner";