@onewelcome/react-lib-components 9.3.0 → 9.5.0

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

@@ -34,10 +34,20 @@ export interface Props extends ComponentPropsWithRef<"nav"> {
   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, ...rest },
+  {
+    isSideMenuOpen,
+    onScreenSizeChange,
+    items,
+    navigate,
+    onItemClick,
+    marginTop,
+    internalLinkPrefix,
+    ...rest
+  },
   ref
 ) => {
   const [isSideNavbarVisible, setIsSideNavbarVisible] = useState(isSideMenuOpen);
@@ -62,6 +72,7 @@ const LeftNavComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
           navigate={navigate}
           onItemClick={onItemClick}
           refItems={refItems}
+          internalLinkPrefix={internalLinkPrefix}
         />
       );
     });

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

@@ -37,17 +37,36 @@ export interface Props extends HTMLProps<HTMLElement> {
   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 },
+  {
+    item,
+    navigate,
+    onItemClick,
+    refItems,
+    NestedComponent,
+    closeParentList,
+    internalLinkPrefix = ""
+  },
   ref
 ) => {
   const [expanded, setExpanded] = useState(false);
   const isActiveParent = !!item.items?.find(menuItem => menuItem.active);
-  const { onKeyPressNavigation } = useKeyboardNavigation({ refItems, item, closeParentList });
+
+  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];
@@ -62,10 +81,6 @@ const ButtonLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> =
     event.preventDefault();
   };
 
-  const onExpandIconClickHandler = () => {
-    setExpanded(expanded => !expanded);
-  };
-
   const openParentWithActiveElement = () => {
     if (isActiveParent) {
       setExpanded(true);
@@ -110,7 +125,7 @@ const ButtonLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> =
             React.cloneElement(item.iconComponent, { className: classes["menu-item-icon"] })}
           {item.path ? (
             <a
-              href={item.path}
+              href={item.path ? internalLinkPrefix + item.path : ""}
               aria-current={item.active ? "page" : false}
               className={classes["menu-item-text"]}
               onClick={onLinkClickHandler}
@@ -145,6 +160,7 @@ const ButtonLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> =
               navigate={navigate}
               onItemClick={onItemClick}
               refItems={refItems}
+              internalLinkPrefix={internalLinkPrefix}
             >
               {item.title}
             </NestedComponent>

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

@@ -24,4 +24,5 @@ export interface LeftNavItemProps extends HTMLProps<HTMLElement> {
   onItemClick?: (path?: string, button?: boolean) => void;
   refItems: UseRefItemsReturnType;
   closeParentList?: () => void;
+  internalLinkPrefix?: string;
 }

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

@@ -171,7 +171,7 @@
   }
 
   a.menu-item-active {
-    background-color: var(--color-primary50);
+    background-color: var(--left-nav-item-active-background-color);
 
     &:hover {
       background-color: var(--color-blue-grey50);
@@ -190,7 +190,7 @@
       z-index: 2;
       border-top-right-radius: 0.125rem;
       border-bottom-right-radius: 0.125rem;
-      border-left: 0.25rem solid var(--color-primary500);
+      border-left: 0.25rem solid var(--left-nav-item-active-ribbon-color);
     }
 
     .menu-item-text {

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

@@ -27,10 +27,11 @@ export interface Props extends HTMLProps<HTMLElement> {
   onItemClick?: (path?: string, button?: boolean) => void;
   refItems: UseRefItemsReturnType;
   closeParentList?: () => void;
+  internalLinkPrefix?: string;
 }
 
 const LinkLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
-  { item, onItemClick, refItems, closeParentList, navigate },
+  { item, onItemClick, refItems, closeParentList, navigate, internalLinkPrefix = "" },
   ref
 ) => {
   const { onKeyPressNavigation } = useKeyboardNavigation({ refItems, item, closeParentList });
@@ -88,7 +89,7 @@ const LinkLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
           aria-current={item.active ? "page" : false}
           aria-disabled={item.disabled}
           className={menuItemLinkClasses.join(" ")}
-          href={item.path ?? ""}
+          href={item.path ? internalLinkPrefix + item.path : ""}
           tabIndex={tabIndex}
         >
           <div className={classes["menu-item-text-wrapper"]}>

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

@@ -22,11 +22,17 @@ interface Props {
   item: MenuItem;
   refItems: UseRefItemsReturnType;
   closeParentList?: () => void;
+  onExpandIconClickHandler?: () => void;
 }
 
-export const useKeyboardNavigation = ({ refItems, item, closeParentList }: Props) => {
+export const useKeyboardNavigation = ({
+  refItems,
+  item,
+  closeParentList,
+  onExpandIconClickHandler
+}: Props) => {
   const onKeyPressNavigation = (e: KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>) => {
-    if (e.code === "Escape") {
+    if (e.code === "Escape" || e.code === "ArrowLeft") {
       e.preventDefault();
       e.stopPropagation();
       closeParentList?.();
@@ -58,6 +64,10 @@ export const useKeyboardNavigation = ({ refItems, item, closeParentList }: Props
       refItems.getNextElement(item.key, true)?.focus();
       e.currentTarget.click();
     }
+    if (e.code === "ArrowRight") {
+      onExpandIconClickHandler?.();
+      refItems.getNextElement(item.key, true)?.focus();
+    }
   };
 
   return { onKeyPressNavigation };

package/src/components/miscellaneous/IdentityProviderButton.tsx

@@ -54,14 +54,16 @@ export const IdentityProviderButton: ForwardRefRenderFunction<HTMLButtonElement,
 
   const generateCSSProperties = () => {
     return {
-      "--button-primary-default-color": customization?.backgroundColor ?? DEFAULT_BACKGROUND_COLOR,
+      "--button-fill-primary-default-color":
+        customization?.backgroundColor ?? DEFAULT_BACKGROUND_COLOR,
       borderColor: customization?.borderColor ?? DEFAULT_BORDER_COLOR,
       "--button-fill-text-color": customization?.textColor ?? DEFAULT_TEXT_COLOR,
       "--color-focus": customization?.focusBorderColor ?? DEFAULT_FOCUS_OUTLINE_COLOR,
-      "--button-primary-focused-color":
+      "--button-fill-primary-focused-color":
         customization?.focusBackgroundColor ?? DEFAULT_BACKGROUND_COLOR,
-      "--button-primary-hover-color": customization?.hoverBackgroundColor ?? DEFAULT_HOVER_COLOR,
-      "--button-primary-pressed-color":
+      "--button-fill-primary-hover-color":
+        customization?.hoverBackgroundColor ?? DEFAULT_HOVER_COLOR,
+      "--button-fill-primary-pressed-color":
         customization?.pressedBackgroundColor ?? DEFAULT_PRESSED_COLOR
     } as CSSProperties;
   };

package/src/mixins.module.scss

@@ -28,14 +28,6 @@
   } @else if $variant == "fill" {
     &:not(#{$disabledSelector}) {
       color: var(--button-fill-text-color);
-      @include buttonStyles(
-        var(--button-primary-default-color),
-        var(--button-primary-hover-color),
-        var(--button-primary-focused-color),
-        var(--button-primary-pressed-color),
-        $variant,
-        $type
-      );
     }
   } @else if $variant == "outline" {
     background-color: var(--white);
@@ -43,30 +35,30 @@
 
   &.primary:not(#{$disabledSelector}) {
     @include buttonStyles(
-      var(--button-primary-default-color),
-      var(--button-primary-hover-color),
-      var(--button-primary-focused-color),
-      var(--button-primary-pressed-color),
+      var(--button-#{$variant}-primary-default-color),
+      var(--button-#{$variant}-primary-hover-color),
+      var(--button-#{$variant}-primary-focused-color),
+      var(--button-#{$variant}-primary-pressed-color),
       $variant,
       $type
     );
   }
   &.success:not(#{$disabledSelector}) {
     @include buttonStyles(
-      var(--button-success-default-color),
-      var(--button-success-hover-color),
-      var(--button-success-focused-color),
-      var(--button-success-pressed-color),
+      var(--button-#{$variant}-success-default-color),
+      var(--button-#{$variant}-success-hover-color),
+      var(--button-#{$variant}-success-focused-color),
+      var(--button-#{$variant}-success-pressed-color),
       $variant,
       $type
     );
   }
   &.danger:not(#{$disabledSelector}) {
     @include buttonStyles(
-      var(--button-danger-default-color),
-      var(--button-danger-hover-color),
-      var(--button-danger-focused-color),
-      var(--button-danger-pressed-color),
+      var(--button-#{$variant}-danger-default-color),
+      var(--button-#{$variant}-danger-hover-color),
+      var(--button-#{$variant}-danger-focused-color),
+      var(--button-#{$variant}-danger-pressed-color),
       $variant,
       $type
     );
@@ -191,7 +183,7 @@
 }
 
 @mixin outline(
-  $color: var(--light-border-color),
+  $color: var(--input-border-color),
   $style: var(--input-border-style),
   $width: var(--input-border-width),
   $borderRadius: var(--input-border-radius),
@@ -222,7 +214,7 @@
 
 @mixin outlineStates {
   &:hover .outline {
-    border-color: var(--default);
+    border-color: var(--input-border-color);
     background-color: var(--input-hover-background-color);
   }
 
@@ -333,7 +325,13 @@
   }
 }
 
-@mixin fontProperties($fontFamily, $fontSize, $fontWeight, $lineHeight) {
+@mixin fontProperties(
+  $fontFamily: var(--font-family),
+  $fontSize: var(--font-size),
+  $fontWeight: 400,
+  $lineHeight: var(--default-line-height),
+  $color: var(--default)
+) {
   font-family: $fontFamily;
   font-size: $fontSize;
   font-style: normal;
@@ -342,7 +340,7 @@
   font-weight: $fontWeight;
   text-transform: none;
   letter-spacing: 0;
-  color: var(--default);
+  color: $color;
   margin: 0 0 relativeToBaseFontSize(1) 0;
 }