@onewelcome/react-lib-components 4.1.1 → 4.2.0

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

@@ -23,6 +23,7 @@ import userEvent from "@testing-library/user-event";
 const onChangeHandler = jest.fn();
 
 const defaultParams: Props = {
+  success: false,
   children: [
     <Option key="1" value="option1">
       Option 1

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

@@ -31,6 +31,7 @@ export interface Props
   error?: boolean;
   selectProps?: PartialSelectProps;
   onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  success?: boolean;
 }
 
 const SelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (

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

@@ -20,6 +20,7 @@ import { render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
+  success: false,
   name: "textarea",
   label: "textarea_label",
   value: "value",

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

@@ -34,13 +34,13 @@ export interface Props
   onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
   onMouseEnter?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
   onMouseLeave?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
+  success?: boolean;
 }
 
 const TextareaWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   {
     name,
     error,
-    success,
     value,
     label,
     placeholder,
@@ -52,6 +52,7 @@ const TextareaWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
     onMouseEnter,
     onMouseLeave,
     disabled,
+    success,
     ...rest
   }: Props,
   ref

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

@@ -33,7 +33,7 @@ export interface Props extends ComponentPropsWithRef<"div">, FormGroupProps {
 }
 
 /** For components that extend this component we create an interface (InputWrapper, SelectWrapper, etc.) */
-export interface WrapperProps extends FormElement {
+export interface WrapperProps extends Omit<FormElement, "success"> {
   errorMessage?: string;
   helperText?: string;
   helperProps?: HelperProps;

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

@@ -15,13 +15,13 @@
  */
 
 @use "../../../mixins.module.scss";
+@use "../../../variables.scss";
 
-$zIndex: 10;
 $marginTop: 3.125rem;
 
 .modal {
   position: fixed;
-  z-index: $zIndex;
+  z-index: variables.$modal-z-index;
   top: 0;
   left: 0;
   height: 100vh;
@@ -57,7 +57,7 @@ $marginTop: 3.125rem;
 .container {
   margin-top: $marginTop;
   background-color: var(--modal-background-color);
-  z-index: $zIndex + 1;
+  z-index: variables.$modal-z-index + 1;
   width: calc(100% - 2rem);
   height: auto;
   max-height: calc(90% - $marginTop);

package/src/components/Notifications/NotificationProvider/NotificationContext.test.tsx

@@ -31,6 +31,75 @@ jest.mock("../../../util/helper", () => ({
   })
 }));
 
+const renderSnackbarProvider = () => {
+  const AppComponent = () => {
+    const { addNotification } = useNotificationContext();
+    const [index, setIndex] = useState(0);
+    return (
+      <div>
+        content
+        <button
+          data-testid="show-success"
+          onClick={() => {
+            addNotification({
+              status: 200,
+              type: "success",
+              title: "Test Success",
+              message: "Test successful request"
+            });
+            setIndex(index + 1);
+          }}
+        >
+          Success
+        </button>
+        <button
+          data-testid="show-error"
+          onClick={() => {
+            addNotification({
+              status: 400,
+              type: "error",
+              title: "TestError",
+              message: "Test bad request"
+            });
+            setIndex(index + 1);
+          }}
+        >
+          Error
+        </button>
+      </div>
+    );
+  };
+
+  const queries = render(
+    <SnackbarProvider closeButtonTitle="close">
+      <NotificationProvider>
+        <AppComponent />
+      </NotificationProvider>
+    </SnackbarProvider>
+  );
+
+  const showSuccessSnackbarBtn = getByTestId(queries.container, "show-success");
+  const showErrorSnackbarBtn = getByTestId(queries.container, "show-error");
+
+  return {
+    ...queries,
+    showSuccessSnackbarBtn,
+    showErrorSnackbarBtn
+  };
+};
+
+describe("Actually shows the snackbars showing up", () => {
+  it("Shows the snackbars", async () => {
+    const { showSuccessSnackbarBtn, showErrorSnackbarBtn, getByText } = renderSnackbarProvider();
+
+    await userEvent.click(showSuccessSnackbarBtn);
+    await userEvent.click(showErrorSnackbarBtn);
+
+    await waitFor(() => expect(getByText("Test Success")).toBeInTheDocument());
+    await waitFor(() => expect(getByText("Test bad request")).toBeInTheDocument());
+  });
+});
+
 describe("Notification", () => {
   describe("useNotificationContext", () => {
     it("returns the correct context", () => {
@@ -378,72 +447,3 @@ describe("Notification", () => {
     });
   });
 });
-
-const renderSnackbarProvider = () => {
-  const AppComponent = () => {
-    const { addNotification } = useNotificationContext();
-    const [index, setIndex] = useState(0);
-    return (
-      <div>
-        content
-        <button
-          data-testid="show-success"
-          onClick={() => {
-            addNotification({
-              status: 200,
-              type: "success",
-              title: "Test Success",
-              message: "Test successful request"
-            });
-            setIndex(index + 1);
-          }}
-        >
-          Success
-        </button>
-        <button
-          data-testid="show-error"
-          onClick={() => {
-            addNotification({
-              status: 400,
-              type: "error",
-              title: "TestError",
-              message: "Test bad request"
-            });
-            setIndex(index + 1);
-          }}
-        >
-          Error
-        </button>
-      </div>
-    );
-  };
-
-  const queries = render(
-    <SnackbarProvider closeButtonTitle="close">
-      <NotificationProvider>
-        <AppComponent />
-      </NotificationProvider>
-    </SnackbarProvider>
-  );
-
-  const showSuccessSnackbarBtn = getByTestId(queries.container, "show-success");
-  const showErrorSnackbarBtn = getByTestId(queries.container, "show-error");
-
-  return {
-    ...queries,
-    showSuccessSnackbarBtn,
-    showErrorSnackbarBtn
-  };
-};
-
-describe("Actually shows the snackbars showing up", () => {
-  it("Shows the snackbars", async () => {
-    const { showSuccessSnackbarBtn, showErrorSnackbarBtn, getByText } = renderSnackbarProvider();
-
-    await userEvent.click(showSuccessSnackbarBtn);
-    await userEvent.click(showErrorSnackbarBtn);
-
-    await waitFor(() => expect(getByText("Test Success")).toBeInTheDocument());
-    await waitFor(() => expect(getByText("Test bad request")).toBeInTheDocument());
-  });
-});

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

@@ -14,10 +14,11 @@
  *    limitations under the License.
  */
 @use "../../../../mixins.module.scss";
+@use "../../../../variables.scss";
 
 .snackbars {
   position: fixed;
-  z-index: 20;
+  z-index: variables.$snackbar-z-index;
   width: 100%;
   display: flex;
   flex-direction: column;

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

@@ -14,7 +14,6 @@
  *    limitations under the License.
  */
 
-@use "../../../../readyclasses.module.scss";
 @use "../../../../mixins.module.scss";
 
 .snackbar {
@@ -143,7 +142,7 @@
       cursor: not-allowed;
     }
 
-    @include readyclasses.focusOutline(var(--snackbar-text-color));
+    @include mixins.focusVisibleOutline();
 
     &:not(:disabled):hover,
     &:not(:disabled):focus {

package/src/components/Popover/Popover.module.scss

@@ -15,16 +15,20 @@
  */
 
 @use "../../mixins.module.scss";
+@use "../../variables.scss";
 
 .popover {
   $transition-property: transform, opacity;
 
   position: fixed;
-  z-index: 100;
+  z-index: variables.$popover-z-index;
   pointer-events: none;
   background-color: var(--light);
-  border-radius: 8px;
-  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.29);
+  border-radius: 0.125rem;
+  box-shadow:
+    0px 4px 5px 0px rgba(1, 5, 50, 0.2),
+    0px 3px 14px 0px rgba(1, 5, 50, 0.12),
+    0px 8px 10px 0px rgba(1, 5, 50, 0.14);
   opacity: 0;
   transform: scale(0.5);
 

package/src/components/Tabs/Tab.tsx

@@ -21,6 +21,7 @@ export interface Props extends Omit<HTMLProps<HTMLDivElement>, "children"> {
   title: string;
   children?: any;
   tabActive?: boolean;
+  icon?: React.ReactNode;
 }
 
 export const Tab = ({ children, tabActive, ...rest }: Props) => {

package/src/components/Tabs/TabButton.module.scss

@@ -13,40 +13,73 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
+@use "../../mixins.module.scss";
 
 .tabbutton {
+  color: var(--tab-text-color);
   border: 0;
   border-radius: 0;
   font-size: var(--font-size);
   line-height: var(--default-line-height);
   margin: 0;
-  padding: 0.25rem 0 1rem 0;
-  min-height: 2.5rem;
+  padding: 0.5rem 1rem;
   cursor: pointer;
   font-family: var(--font-family);
   background-color: transparent;
   white-space: nowrap;
   position: relative;
   font-weight: normal;
-  color: transparent;
+  border-bottom-style: var(--tablist-border-style);
+  border-bottom-width: var(--tablist-border-width);
+  border-bottom-color: var(--tablist-border-color);
 
-  &:focus-visible {
-    outline-color: var(--color-focus);
+  @include mixins.focusVisibleOutline($outlineOffset: 0);
+  &:where(:focus-visible) {
+    z-index: 1;
   }
 
-  span {
-    color: var(--tab-text-color);
-    font-weight: normal;
-    position: absolute;
-    left: 0;
+  &:hover {
+    background-color: var(--tab-hover-color);
+  }
+
+  &:active {
+    background-color: var(--tab-pressed-color);
   }
 
   &.selected {
-    color: var(--color-primary);
+    color: var(--tab-active-text-color);
+  }
+
+  &.fluid {
+    flex: 1;
+  }
+
+  &.has-icon {
+    gap: 0.25rem;
+    display: inline-flex;
+    align-items: center;
+
+    i {
+      display: flex;
+    }
+
+    span[data-icon] {
+      display: inline-block;
+      font-size: 1.25rem;
+      width: 1.25rem;
+    }
+
+    &.top-icon,
+    &.bottom-icon {
+      flex-direction: column;
+    }
+
+    &.left-icon i {
+      order: -1;
+    }
 
-    span {
-      color: transparent;
-      visibility: hidden;
+    &.top-icon i {
+      order: -1;
     }
   }
 }

package/src/components/Tabs/TabButton.tsx

@@ -26,10 +26,13 @@ import classes from "./TabButton.module.scss";
 export interface Props extends ComponentPropsWithRef<"button"> {
   tabActive?: boolean;
   focused?: boolean;
+  fluid?: boolean;
+  icon?: React.ReactNode;
+  iconPosition?: "left" | "right" | "top" | "bottom";
 }
 
 const TabButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
-  { children, tabActive, focused, title, ...rest }: Props,
+  { children, tabActive, focused, title, fluid, icon, iconPosition, className, ...rest }: Props,
   ref
 ) => {
   let buttonRef = (ref as RefObject<HTMLButtonElement>) || createRef<HTMLButtonElement>();
@@ -40,18 +43,22 @@ const TabButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
     }
   }, [buttonRef.current, focused]);
 
+  const tabButtonClasses = [classes["tabbutton"]];
+  tabActive && tabButtonClasses.push(classes["selected"]);
+  fluid && tabButtonClasses.push(classes["fluid"]);
+  className && tabButtonClasses.push(className);
+  icon && tabButtonClasses.push(classes["has-icon"], classes[`${iconPosition}-icon`]);
+
   return (
     <button
       {...rest}
-      className={`${classes["tabbutton"]} ${tabActive ? classes["selected"] : ""} ${
-        rest.className ?? ""
-      }`}
+      className={tabButtonClasses.join(" ")}
       ref={buttonRef}
       role="tab"
       type="button"
     >
-      <span aria-hidden="true">{children}</span>
       {children}
+      {icon && <i>{icon}</i>}
     </button>
   );
 };

package/src/components/Tabs/Tabs.module.scss

@@ -31,31 +31,28 @@ $focus-width: 5px;
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
-  gap: 2rem;
   position: relative;
   margin: -$focus-width;
   padding: $focus-width;
   z-index: 0;
+
+  &.center {
+    justify-content: center;
+  }
+
+  &.right {
+    justify-content: flex-end;
+  }
 }
 
 .indicator {
   $transition-property: left, width;
 
   position: absolute;
-  height: var(--tab-active-border-height);
-  border-radius: 2px 2px 0 0;
+  height: calc(var(--tab-active-border-height) - var(--tablist-border-width));
+  border-radius: 0.125rem 0.125rem 0 0;
   background-color: var(--tab-active-border-color);
+  z-index: 2;
 
   @include mixins.transition($transition-property, 0.2s, ease-in-out);
 }
-
-.tabdivider {
-  border-bottom-style: var(--tablist-border-style);
-  border-bottom-width: var(--tablist-border-width);
-  border-bottom-color: var(--tablist-border-color);
-  width: calc(100% - ($focus-width * 2));
-  position: absolute;
-  bottom: $focus-width;
-  left: $focus-width;
-  z-index: -1;
-}

package/src/components/Tabs/Tabs.tsx

@@ -29,13 +29,27 @@ import { TabButton } from "./TabButton";
 import classes from "./Tabs.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
-  children: React.ReactElement<TabProps> | React.ReactElement<TabProps>[];
+  children: ReactElement<TabProps>[];
   selected?: number;
   onTabChange?: (index: number) => void;
+  fluid?: boolean;
+  align?: "left" | "center" | "right";
+  tabListClassName?: string;
+  iconsPosition?: "left" | "right" | "top" | "bottom";
 }
 
 const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, selected = 0, onTabChange, ...rest }: Props,
+  {
+    children,
+    selected = 0,
+    onTabChange,
+    className,
+    fluid,
+    tabListClassName,
+    align,
+    iconsPosition = "left",
+    ...rest
+  }: Props,
   ref
 ) => {
   const [renderedButtons, setRenderedButtons] = useState<ReactElement[]>([]);
@@ -92,7 +106,8 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
         top:
           selectedButton.offsetTop +
           selectedButton.offsetHeight -
-          indicatorRef.current!.offsetHeight,
+          indicatorRef.current!.offsetHeight -
+          parseInt(getComputedStyle(selectedButton).borderBottomWidth),
         width: selectedButton.offsetWidth
       });
     }
@@ -120,7 +135,11 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             focused: usingKeyboardNavigation && activeTabIndex === index,
             tabActive: activeTabIndex === index,
             "aria-controls": `tab_${index}`,
-            onClick: () => setActiveTabIndex(index)
+            onClick: () => setActiveTabIndex(index),
+            disabled: child.props.disabled,
+            fluid: fluid,
+            iconPosition: iconsPosition,
+            icon: child.props.icon
           },
           child.props.title
         );
@@ -128,10 +147,6 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       return null;
     });
 
-    setRenderedButtons(buttons);
-  }, [activeTabIndex]);
-
-  useEffect(() => {
     const tabs = React.Children.map(children, (child, index) => {
       if (Object.prototype.hasOwnProperty.call(child.props, "title")) {
         return React.cloneElement(child, {
@@ -147,13 +162,17 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     });
 
     setRenderedTabs(tabs);
-  }, [activeTabIndex]);
+    setRenderedButtons(buttons);
+  }, [activeTabIndex, fluid, align, iconsPosition]);
+
+  const tabListClasses = [classes["tablist"]];
+  align && tabListClasses.push(classes[align]);
+  tabListClassName && tabListClasses.push(tabListClassName);
 
   return (
-    <div {...rest} ref={tabsRef} className={`${classes["tabs"]} ${rest.className ?? ""}`}>
-      <div role="tablist" className={classes["tablist"]} onKeyDown={handleKeyDown}>
+    <div {...rest} ref={tabsRef} className={`${classes["tabs"]} ${className ?? ""}`}>
+      <div role="tablist" className={tabListClasses.join(" ")} onKeyDown={handleKeyDown}>
         {renderedButtons}
-        <div className={classes["tabdivider"]} />
         <div
           className={classes["indicator"]}
           ref={indicatorRef}