@onewelcome/react-lib-components 8.10.0 → 8.11.0

package/src/components/Button/IconButton.tsx

@@ -28,13 +28,17 @@ export interface Props extends BaseButtonProps {
 }
 
 export const IconButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
-  { children, color = "primary", variant = "text", iconSize = "m", title, className, ...rest },
+  {
+    children,
+    color = "primary",
+    variant = "text",
+    iconSize = "m",
+    title = "Icon button",
+    className,
+    ...rest
+  },
   ref
 ) => {
-  if (!title) {
-    console.error("Please make sure to specify a 'title' prop to your IconButton component! ");
-  }
-
   const iconButtonClasses = [
     classes["icon-button"],
     classes[variant],

package/src/components/Icon/Icon.module.scss

@@ -373,6 +373,10 @@
   content: "\e94f";
   @include fontProperties();
 }
+.icon-arrow-left:before {
+  content: "\e954";
+  @include fontProperties();
+}
 .icon-external-link:before {
   content: "\e950";
   @include fontProperties();

package/src/components/Icon/Icon.tsx

@@ -100,6 +100,7 @@ export enum Icons {
   ZoomIn = "zoom-in",
   ZoomOut = "zoom-out",
   ArrowUp = "arrow-up",
+  ArrowLeft = "arrow-left",
   ExternalLink = "external-link",
   SideSheetHandle = "sidesheet-handle",
   PendingCircle = "pending-circle",

package/src/components/Layout/ContentHeader/ContentHeader.module.scss

@@ -13,11 +13,21 @@
     padding: 1rem 2rem 1rem 2rem;
     -webkit-transition: 0.5s;
     transition: 0.5s;
+
+    align-items: center;
   }
 
   &-background-color {
     background-color: var(--color-blue-grey25);
   }
+
+  & button.back-arrow {
+    width: 1rem;
+    height: 1rem;
+    display: block;
+
+    gap: 0.5rem;
+  }
 }
 
 .hide-text {
@@ -29,6 +39,36 @@
   font-weight: 500;
   color: var(--color-blue-grey900);
   line-height: 1.25;
+  display: flex;
+  align-items: center;
+  max-width: 65vw;
+
+  // This is a temporary solution making sure that the title is not gone on mobile.
+  @media screen and (max-width: 900px) {
+    max-width: unset;
+
+    div {
+      text-wrap: wrap;
+    }
+  }
+
+  div {
+    vertical-align: middle;
+    align-self: center;
+  }
+
+  & button.back-arrow {
+    margin-right: 0.5rem;
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+}
+
+.header-tags {
+  display: flex;
+
+  margin-left: 1rem;
+  gap: 0.5rem;
 }
 
 .header-subtitle {
@@ -36,6 +76,18 @@
   font-weight: 500;
 }
 
+.back-text {
+  font-size: 0.875rem;
+  font-weight: 400;
+  margin-left: 0.5rem;
+}
+
+.error-text {
+  color: var(--color-red500);
+  vertical-align: middle;
+  margin-left: 0.5rem;
+}
+
 .buttons-wrapper {
   display: flex;
   justify-content: flex-end;

package/src/components/Layout/ContentHeader/ContentHeader.tsx

@@ -14,17 +14,35 @@
  *    limitations under the License.
  */
 
-import React, { HTMLAttributes, ReactElement } from "react";
+import React, { HTMLAttributes, ReactElement, useMemo } from "react";
 import { Button, Props as ButtonProps } from "../../Button/Button";
 import { Typography } from "../../Typography/Typography";
 
 import classes from "./ContentHeader.module.scss";
+import { IconButton } from "../../Button/IconButton";
+import { Icon, Icons } from "../../Icon/Icon";
+import { NavigateFunction } from "react-router-dom";
+import { Tag, Props as TagProps } from "../../Tag/Tag";
+import { TextEllipsis } from "../../TextEllipsis/TextEllipsis";
+
+export interface ContentHeaderNavigationProps {
+  displayText?: string;
+  navigateFN: NavigateFunction;
+}
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
   title: string;
+  /**
+   * @deprecated pass text as children
+   */
   subtitle?: string;
   buttons?: ReactElement<ButtonProps, typeof Button> | ReactElement<ButtonProps, typeof Button>[];
   collapsed?: boolean;
+  navigation?: ContentHeaderNavigationProps;
+  tags?: ReactElement<TagProps, typeof Tag>[];
+  error?: boolean;
+  errorMessage?: string;
+  errorTagText?: string;
 }
 
 export const ContentHeaderComponent = ({
@@ -33,8 +51,30 @@ export const ContentHeaderComponent = ({
   buttons,
   collapsed,
   subtitle,
+  navigation,
+  tags,
+  error,
+  errorMessage,
+  errorTagText,
   ...rest
 }: Props) => {
+  const errorTag = (
+    <Tag icon={Icons.Forbidden} backgroundColor="var(--color-red50)" color="var(--color-red900)">
+      {errorTagText || "Blocked"}
+    </Tag>
+  );
+
+  const getTags = () => tags ?? [];
+
+  const renderTags = useMemo(() => {
+    if (error && collapsed) {
+      return [errorTag, ...getTags().filter(tag => tag.props.variant !== "enabled")];
+    } else if (error) {
+      return getTags().filter(tag => tag.props.variant !== "enabled");
+    }
+    return getTags();
+  }, [tags, error, collapsed]);
+
   return (
     <div className={classes["header-background-color"]}>
       <div
@@ -42,23 +82,59 @@ export const ContentHeaderComponent = ({
         {...rest}
       >
         <div>
+          {navigation && !collapsed && (
+            <IconButton
+              onClick={() => {
+                navigation.navigateFN(-1);
+              }}
+              className={classes["back-arrow"]}
+              iconSize="s"
+            >
+              <Icon icon={Icons.ArrowLeft} />
+              <span className={classes["back-text"]}>
+                {navigation.displayText ? navigation.displayText : "Back"}
+              </span>
+            </IconButton>
+          )}
           <Typography className={classes["header-text"]} variant={"h1"}>
-            {title}
+            {navigation && collapsed && (
+              <IconButton
+                onClick={() => {
+                  navigation.navigateFN(-1);
+                }}
+                className={classes["back-arrow"]}
+              >
+                <Icon icon={Icons.ArrowLeft} />
+              </IconButton>
+            )}
+            <TextEllipsis data-testid={"content-header-title"}>{title}</TextEllipsis>
+            <span className={classes["header-tags"]}>
+              {renderTags.map((tag, index) => (
+                <React.Fragment key={tag.key || index}>{tag}</React.Fragment>
+              ))}
+            </span>
           </Typography>
-          {subtitle && (
+          {subtitle && !error && (
             <Typography
               className={`${classes["header-subtitle"]} ${collapsed ? classes["hide-text"] : ""}`}
-              variant={"h4"}
+              variant="h4"
             >
               {subtitle}
             </Typography>
           )}
           <Typography
             className={`${collapsed ? classes["hide-text"] : ""}`}
-            variant={"body"}
+            variant="body"
             spacing={{ margin: 0 }}
           >
-            {children}
+            {error ? (
+              <>
+                {errorTag}
+                <span className={classes["error-text"]}>{errorMessage}</span>
+              </>
+            ) : (
+              children
+            )}
           </Typography>
         </div>
         {buttons && <div className={classes["buttons-wrapper"]}>{buttons}</div>}

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -53,11 +53,13 @@ export interface CSSProperties {
   colorOrange500?: string;
   colorOrange600?: string;
   colorOrange700?: string;
+  colorRed50?: string;
   colorRed100?: string;
   colorRed200?: string;
   colorRed500?: string;
   colorRed600?: string;
   colorRed700?: string;
+  colorRed900?: string;
   colorWhite?: string;
   colorBlack100?: string;
   colorBlack50?: string;
@@ -253,11 +255,13 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorOrange500: "#E07900",
     colorOrange600: "#B36100",
     colorOrange700: "#864900",
+    colorRed50: "#F9D2CC",
     colorRed100: "#FFCDD2",
     colorRed200: "#F3A599",
     colorRed500: "#E01E00",
     colorRed600: "#B31800",
     colorRed700: "#861200",
+    colorRed900: "#2D0600",
     colorBlack100: "#000000",
     colorBlack50: "rgba(0, 0, 0, 0.5)",
     colorBlack20: "rgba(0, 0, 0, 0.2)",

package/src/components/admin/layout/LeftNav/LeftNav.interfaces.ts

@@ -0,0 +1,30 @@
+/*
+ * 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 { ReactElement } from "react";
+
+export interface MenuItem {
+  key: string;
+  path?: string;
+  active?: boolean;
+  /**
+   * @deprecated it can be removed in next release
+   */
+  disabled?: boolean;
+  title: string;
+  iconComponent?: ReactElement;
+  items?: MenuItem[];
+}

package/src/components/admin/layout/LeftNav/LeftNav.module.scss

@@ -0,0 +1,52 @@
+/*!
+ * 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";
+
+.sidenavbar {
+  --margin-top: 4rem;
+  position: fixed;
+  z-index: 2;
+
+  background-color: white;
+  display: block;
+  overflow-y: auto;
+  flex-shrink: 0;
+  width: 15rem;
+  height: calc(100vh - var(--margin-top));
+  padding: 0;
+  margin: 0;
+
+  box-shadow:
+    0px 2px 2px 0px rgba(1, 5, 50, 0.02),
+    0px 3px 4px 0px rgba(1, 5, 50, 0.02),
+    0px 1px 5px 0px rgba(1, 5, 50, 0.04);
+
+  @include mixins.breakpoint("max", "medium") {
+    transition: transform 200ms ease-in-out;
+    box-shadow: 0 30px 50px #00000029;
+    transform: translateX(-110%);
+
+    &.hidden {
+      visibility: hidden;
+    }
+
+    &.open {
+      visibility: visible;
+      transform: translateX(0);
+    }
+  }
+}

package/src/components/admin/layout/LeftNav/LeftNav.tsx

@@ -0,0 +1,81 @@
+/*
+ * 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, {
+  ComponentPropsWithRef,
+  CSSProperties,
+  ForwardRefRenderFunction,
+  useState
+} from "react";
+import classes from "./LeftNav.module.scss";
+import { MenuItem } from "./LeftNav.interfaces";
+import { LeftNavItem } from "./LeftNavItem/LeftNavItem";
+import { useRefItems } from "./useRefItems";
+
+export interface Props extends ComponentPropsWithRef<"nav"> {
+  isSideMenuOpen?: boolean;
+  items: MenuItem[];
+  navigate: (path: string) => void;
+  onItemClick: (path?: string, button?: boolean) => void;
+  marginTop?: string;
+}
+
+const LeftNavComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
+  { isSideMenuOpen, items, navigate, onItemClick, marginTop, ...rest },
+  ref
+) => {
+  const [isSideNavbarVisible, setIsSideNavbarVisible] = useState(isSideMenuOpen);
+  const refItems = useRefItems({ items });
+
+  const onSideNavbarTransitionEnd: React.TransitionEventHandler<HTMLUListElement> = () => {
+    setIsSideNavbarVisible(isSideMenuOpen);
+  };
+
+  const renderMenuItems = () => {
+    if (!items.length) {
+      return null;
+    }
+
+    return items.map(item => {
+      return (
+        <LeftNavItem
+          ref={el => refItems.addElementReference(el, item.key)}
+          key={item.key}
+          item={item}
+          navigate={navigate}
+          onItemClick={onItemClick}
+          refItems={refItems}
+        />
+      );
+    });
+  };
+
+  return (
+    <nav {...rest} ref={ref}>
+      <ul
+        style={{ "--margin-top": marginTop } as CSSProperties}
+        className={`${classes["sidenavbar"]} ${isSideMenuOpen ? classes["open"] : ""} ${
+          !isSideNavbarVisible ? classes["hidden"] : ""
+        }`}
+        onTransitionEnd={onSideNavbarTransitionEnd}
+      >
+        {renderMenuItems()}
+      </ul>
+    </nav>
+  );
+};
+
+export const LeftNav = React.forwardRef(LeftNavComponent);

package/src/components/admin/layout/LeftNav/LeftNavItem/ButtonLeftNavItem.tsx

@@ -0,0 +1,153 @@
+/*
+ * 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, {
+  ForwardRefExoticComponent,
+  ForwardRefRenderFunction,
+  HTMLProps,
+  MouseEvent,
+  Ref,
+  useEffect,
+  useState
+} from "react";
+import classes from "./LeftNavItem.module.scss";
+import { Link as RouterLink } from "react-router-dom";
+import { MenuItem } from "../LeftNav.interfaces";
+import { Icon, Icons } from "../../../../Icon/Icon";
+import { useKeyboardNavigation } from "./useKeyboardNavigation";
+import { UseRefItemsReturnType } from "../useRefItems";
+import { LeftNavItemProps } from "./LeftNavItem.interface";
+
+export interface Props extends HTMLProps<HTMLElement> {
+  item: MenuItem;
+  navigate: (path: string) => void;
+  onItemClick: (path?: string, button?: boolean) => void;
+  refItems: UseRefItemsReturnType;
+  NestedComponent: ForwardRefExoticComponent<LeftNavItemProps>;
+  closeParentList?: () => void;
+}
+
+const chevronIconDataKey = { attributeKey: "chevron-icon", objectKey: "chevronIcon" };
+
+const ButtonLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
+  { item, navigate, onItemClick, refItems, NestedComponent, closeParentList },
+  ref
+) => {
+  const [expanded, setExpanded] = useState(false);
+  const isActiveParent = !!item.items?.find(menuItem => menuItem.active);
+  const { onKeyPressNavigation } = useKeyboardNavigation({ refItems, item, closeParentList });
+
+  const onButtonClickHandler = (event: MouseEvent<HTMLButtonElement>) => {
+    const isChevronIcon = !!(event.target as HTMLElement).dataset[chevronIconDataKey.objectKey];
+    if (!isChevronIcon && item.path && !item.disabled) {
+      event.preventDefault();
+      navigate(item.path);
+      onItemClick(item.path, true);
+    }
+  };
+
+  const onExpandIconClickHandler = () => {
+    setExpanded(expanded => !expanded);
+  };
+
+  const openParentWithActiveElement = () => {
+    if (isActiveParent) {
+      setExpanded(true);
+    }
+  };
+
+  useEffect(openParentWithActiveElement, [isActiveParent]);
+
+  const getStylingClasses = () => {
+    const buttonClasses = [classes["menu-item"], classes["menu-button"]];
+    expanded && buttonClasses.push(classes["expanded"]);
+    (item.active || isActiveParent) && buttonClasses.push(classes["menu-item-active"]);
+    item.disabled && buttonClasses.push(classes["disabled"]);
+    const buttonWrapperClasses = [classes["menu-button-wrapper"], classes["menu-list-item"]];
+    expanded && buttonWrapperClasses.push(classes["expanded"]);
+    item.active && buttonWrapperClasses.push(classes["menu-item-active"]);
+    return {
+      buttonClasses,
+      buttonWrapperClasses
+    };
+  };
+
+  const { buttonClasses, buttonWrapperClasses } = getStylingClasses();
+  const tabIndexActive = item.active ? 0 : -1;
+  const tabIndex = item.disabled ? -1 : tabIndexActive;
+
+  return (
+    <li className={buttonWrapperClasses.join(" ")} data-testid={item.key}>
+      <button
+        aria-controls={item.key}
+        data-testid={`tab-btn-${item.key}`}
+        aria-expanded={expanded}
+        ref={ref as Ref<HTMLButtonElement>}
+        onKeyDown={onKeyPressNavigation}
+        onClick={onButtonClickHandler}
+        className={buttonClasses.join(" ")}
+        disabled={item.disabled}
+        tabIndex={tabIndex}
+      >
+        <div className={classes["menu-item-text-wrapper"]}>
+          {item.iconComponent &&
+            React.cloneElement(item.iconComponent, { className: classes["menu-item-icon"] })}
+          {item.path ? (
+            <RouterLink
+              to={item.path}
+              aria-current={item.active ? "page" : false}
+              className={classes["menu-item-text"]}
+              tabIndex={-1}
+            >
+              {item.title}
+            </RouterLink>
+          ) : (
+            <span className={classes["menu-item-text"]}>{item.title}</span>
+          )}
+        </div>
+        <Icon
+          onClick={onExpandIconClickHandler}
+          className={classes["menu-item-expand-icon"]}
+          icon={Icons.ChevronDown}
+          {...{ [`data-${chevronIconDataKey.attributeKey}`]: "true" }}
+        />
+      </button>
+      <ul
+        id={item.key}
+        style={{ maxHeight: expanded ? undefined : 0 }}
+        className={classes["menu-list"]}
+      >
+        {!item.disabled &&
+          item.items?.map(item => (
+            <NestedComponent
+              ref={el => refItems.addElementReference(el, item.key)}
+              key={item.key}
+              closeParentList={() => setExpanded(false)}
+              onKeyUp={onKeyPressNavigation}
+              item={item}
+              navigate={navigate}
+              onItemClick={onItemClick}
+              refItems={refItems}
+            >
+              {item.title}
+            </NestedComponent>
+          ))}
+      </ul>
+    </li>
+  );
+};
+
+export const ButtonLeftNavItem = React.forwardRef(ButtonLeftNavItemComponent);

package/src/components/admin/layout/LeftNav/LeftNavItem/LeftNavItem.interface.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 { HTMLProps } from "react";
+import { MenuItem } from "../LeftNav.interfaces";
+import { UseRefItemsReturnType } from "../useRefItems";
+
+export interface LeftNavItemProps extends HTMLProps<HTMLElement> {
+  item: MenuItem;
+  navigate: (path: string) => void;
+  onItemClick: (path?: string, button?: boolean) => void;
+  refItems: UseRefItemsReturnType;
+  closeParentList?: () => void;
+}