@onewelcome/react-lib-components 0.0.0-experimental-8e3a0fd

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

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

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

@@ -0,0 +1,96 @@
+/*
+ * 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";
+import { ScreenSize } from "../../../../variables";
+import { useScreenSize } from "../../../../hooks/useScreenSize";
+
+export interface Props extends ComponentPropsWithRef<"nav"> {
+  isSideMenuOpen?: boolean;
+  onScreenSizeChange?: (nextScreenSize: ScreenSize, prevScreenSize?: ScreenSize) => void;
+  items: MenuItem[];
+  navigate: (path: string) => void;
+  onItemClick?: (path?: string, button?: boolean) => void;
+  marginTop?: string;
+  internalLinkPrefix?: string;
+}
+
+const LeftNavComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
+  {
+    isSideMenuOpen,
+    onScreenSizeChange,
+    items,
+    navigate,
+    onItemClick,
+    marginTop,
+    internalLinkPrefix,
+    ...rest
+  },
+  ref
+) => {
+  const [isSideNavbarVisible, setIsSideNavbarVisible] = useState(isSideMenuOpen);
+  useScreenSize({ onScreenSizeChange });
+  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}
+          internalLinkPrefix={internalLinkPrefix}
+        />
+      );
+    });
+  };
+
+  return (
+    <nav {...rest} ref={ref}>
+      <ul
+        style={{ "--margin-top": marginTop } as CSSProperties}
+        className={`${classes["sidenavbar"]} ${!isSideMenuOpen ? classes["sidenavbar--collapsed"] : ""} ${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,173 @@
+/*
+ * 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 { 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;
+  internalLinkPrefix?: string;
+}
+
+const chevronIconDataKey = { attributeKey: "chevron-icon", objectKey: "chevronIcon" };
+
+const ButtonLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
+  {
+    item,
+    navigate,
+    onItemClick,
+    refItems,
+    NestedComponent,
+    closeParentList,
+    internalLinkPrefix = ""
+  },
+  ref
+) => {
+  const [expanded, setExpanded] = useState(false);
+  const isActiveParent = !!item.items?.find(menuItem => menuItem.active);
+
+  const onExpandIconClickHandler = () => {
+    setExpanded(expanded => !expanded);
+  };
+
+  const { onKeyPressNavigation } = useKeyboardNavigation({
+    refItems,
+    item,
+    closeParentList,
+    onExpandIconClickHandler
+  });
+
+  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 onLinkClickHandler = (event: MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+  };
+
+  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={`left-nav-item-${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 ? (
+            <a
+              href={item.path ? internalLinkPrefix + item.path : ""}
+              aria-current={item.active ? "page" : false}
+              className={classes["menu-item-text"]}
+              onClick={onLinkClickHandler}
+              tabIndex={-1}
+            >
+              {item.title}
+            </a>
+          ) : (
+            <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}
+              internalLinkPrefix={internalLinkPrefix}
+            >
+              {item.title}
+            </NestedComponent>
+          ))}
+      </ul>
+    </li>
+  );
+};
+
+export const ButtonLeftNavItem = React.forwardRef(ButtonLeftNavItemComponent);

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

@@ -0,0 +1,28 @@
+/*
+ * 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;
+  internalLinkPrefix?: string;
+}

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

@@ -0,0 +1,222 @@
+/*
+ * 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.
+ */
+
+.menu-button {
+  background-color: transparent;
+  border: 0;
+  font-family: var(--font-family);
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: inherit;
+    }
+  }
+}
+
+.menu-link {
+  text-decoration: none;
+}
+
+.menu-button-wrapper {
+  > .menu-button + ul > .menu-button-wrapper,
+  > .menu-button + ul > a {
+    opacity: 0;
+    transform: translateY(-60px);
+  }
+
+  $maxElementsOnOneSubLevel: 20;
+  &.expanded {
+    > .menu-button + ul > .menu-button-wrapper,
+    > .menu-button + ul > li {
+      opacity: 0;
+      animation-name: item-fade-in;
+      animation-duration: 250ms;
+      animation-fill-mode: forwards;
+
+      @for $i from 1 to $maxElementsOnOneSubLevel {
+        &:nth-child(#{$i}) {
+          animation-delay: (100ms * ($i - 1));
+        }
+      }
+    }
+  }
+
+  .menu-button-wrapper .menu-link {
+    padding-left: 2.5rem;
+  }
+}
+
+.menu-list {
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  max-height: 100000px; /* because transition does not work on 'height:auto', we use 'max-height' with very large value to just run transition */
+
+  list-style: none;
+  text-align: left;
+
+  transition: max-height 0.15s ease-in-out;
+
+  .menu-item-text-wrapper {
+    padding-left: 2rem;
+  }
+
+  a,
+  button {
+    &:focus-visible {
+      outline-offset: -0.0625rem;
+    }
+  }
+}
+
+.menu-item {
+  box-sizing: border-box;
+  display: flex;
+  padding: 1.125rem 1rem;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  color: var(--color-blue-grey900);
+
+  line-height: 1.5rem;
+  font-size: 1rem;
+  font-weight: 400;
+
+  transition: all 0.15s ease-in-out;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline-offset: -0.0625rem;
+  }
+
+  .menu-item-text-wrapper {
+    display: flex;
+  }
+
+  .menu-item-expand-icon {
+    padding: 0.375rem;
+    margin: -0.375rem;
+  }
+
+  & &-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    margin-right: 0.5rem;
+    font-size: 1.125rem;
+  }
+
+  &-text {
+    display: flex;
+    align-items: center;
+  }
+
+  &-expand-icon {
+    font-size: 0.75rem;
+    color: var(--color-blue-grey900);
+    transition: all 0.15s ease-in-out;
+  }
+
+  &.expanded .menu-item-expand-icon {
+    transform: rotate(180deg);
+  }
+
+  a {
+    color: inherit;
+  }
+
+  &:hover {
+    background-color: var(--color-blue-grey50);
+  }
+
+  &:focus,
+  &:active {
+    color: inherit;
+    background-color: var(--color-blue-grey100);
+  }
+
+  &.disabled {
+    color: var(--color-blue-grey400);
+    background-color: var(--color-blue-grey25);
+    pointer-events: none;
+  }
+}
+
+.menu-list-item {
+  position: relative;
+
+  a.menu-item {
+    padding: 0.75rem 1rem;
+    color: var(--color-blue-grey900);
+  }
+
+  a.menu-item-active {
+    background-color: var(--left-nav-item-active-background-color);
+
+    &:hover {
+      background-color: var(--color-blue-grey50);
+    }
+
+    &:focus,
+    &:active {
+      background-color: var(--color-blue-grey100);
+    }
+
+    &:before {
+      content: "";
+      height: 100%;
+      position: absolute;
+      left: 0;
+      z-index: 2;
+      border-top-right-radius: 0.125rem;
+      border-bottom-right-radius: 0.125rem;
+      border-left: 0.25rem solid var(--left-nav-item-active-ribbon-color);
+    }
+
+    .menu-item-text {
+      font-weight: 700;
+    }
+  }
+
+  button.menu-item-active {
+    .menu-item-text {
+      font-weight: 700;
+    }
+  }
+}
+
+@keyframes item-fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(-60px);
+  }
+
+  80% {
+    opacity: 0.6;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}

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

@@ -0,0 +1,34 @@
+/*
+ * 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, { ForwardRefRenderFunction } from "react";
+import { ButtonLeftNavItem } from "./ButtonLeftNavItem";
+import { LinkLeftNavItem } from "./LinkLeftNavItem";
+import { LeftNavItemProps } from "./LeftNavItem.interface";
+
+const LeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, LeftNavItemProps> = (
+  props,
+  ref
+) => {
+  const shouldBeButton = !!(props.item.items?.length ?? 0 >= 1);
+  return shouldBeButton ? (
+    <ButtonLeftNavItem {...props} ref={ref} NestedComponent={LeftNavItem} />
+  ) : (
+    <LinkLeftNavItem {...props} ref={ref} />
+  );
+};
+
+export const LeftNavItem = React.forwardRef(LeftNavItemComponent);