feat(SideNav): Implementation, Documentation, Tests

.changeset/red-bats-allow.md

@@ -0,0 +1,7 @@
+---
+"@razorpay/blade": minor
+---
+
+feat(SideNav): add SideNav component
+
+Checkout [SideNav Documentation](https://blade.razorpay.com/?path=/docs/components-sidenav--docs)

packages/blade/.storybook/react/preview.tsx

@@ -145,7 +145,8 @@ const StoryCanvas = styled.div<{ context }>(
         context.kind.includes('/Dropdown/With Button') ||
         context.kind.includes('/Dropdown/With AutoComplete') ||
         context.kind.includes('/Carousel') ||
-        context.kind.includes('/Examples')
+        context.kind.includes('/Examples') ||
+        context.kind.includes('/SideNav')
           ? '0rem'
           : '2rem'
       };

packages/blade/src/components/Accordion/AccordionItem.tsx

@@ -124,6 +124,7 @@ const AccordionItem = ({
           onExpandChange={handleExpandChange}
           // Accordion has its own width restrictions
           _shouldApplyWidthRestrictions={false}
+          _dangerouslyDisableValidations={true}
         >
           <AccordionButton
             index={_index}

packages/blade/src/components/Collapsible/Collapsible.tsx

@@ -50,6 +50,10 @@ type CollapsibleProps = {
    */
   onExpandChange?: ({ isExpanded }: { isExpanded: boolean }) => void;
 
+  /**
+   * **Internal**: disables trigger validations. Used for AccordionButton and SideNavLink internally
+   */
+  _dangerouslyDisableValidations?: boolean;
   /**
    * **Internal**: used to override responsive width restrictions
    */
@@ -67,6 +71,7 @@ const Collapsible = ({
   onExpandChange,
   testID,
   _shouldApplyWidthRestrictions = true,
+  _dangerouslyDisableValidations = false,
   ...styledProps
 }: CollapsibleProps): ReactElement => {
   const [isBodyExpanded, setIsBodyExpanded] = useState(isExpanded ?? defaultIsExpanded);
@@ -110,9 +115,9 @@ const Collapsible = ({
         !(
           isValidAllowedChildren(child, MetaConstants.CollapsibleBody) ||
           isValidAllowedChildren(child, MetaConstants.CollapsibleButton) ||
-          isValidAllowedChildren(child, MetaConstants.CollapsibleLink) ||
-          isValidAllowedChildren(child, MetaConstants.AccordionButton)
-        )
+          isValidAllowedChildren(child, MetaConstants.CollapsibleLink)
+        ) &&
+        !_dangerouslyDisableValidations
       ) {
         throwBladeError({
           message: `only the following are supported as valid children: CollapsibleBody, CollapsibleButton, CollapsibleLink`,

packages/blade/src/components/Collapsible/CollapsibleBody.tsx

@@ -1,19 +1,18 @@
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactElement } from 'react';
 import { CollapsibleBodyContent } from './CollapsibleBodyContent';
 import { useCollapsible } from './CollapsibleContext';
-import type { BaseBoxProps } from '~components/Box/BaseBox';
+import type { CollapsibleBodyProps } from './types';
 import BaseBox from '~components/Box/BaseBox';
-import type { TestID } from '~utils/types';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 import { makeAccessible } from '~utils/makeAccessible';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 
-type CollapsibleBodyProps = {
-  children: ReactNode;
-  width?: BaseBoxProps['width'];
-} & TestID;
-
-const _CollapsibleBody = ({ children, testID, width }: CollapsibleBodyProps): ReactElement => {
+const _CollapsibleBody = ({
+  children,
+  testID,
+  width,
+  _hasMargin = true,
+}: CollapsibleBodyProps): ReactElement => {
   const { collapsibleBodyId, isExpanded } = useCollapsible();
   return (
     <BaseBox
@@ -22,7 +21,7 @@ const _CollapsibleBody = ({ children, testID, width }: CollapsibleBodyProps): Re
       {...makeAccessible({ role: 'region', hidden: !isExpanded })}
       {...metaAttribute({ name: MetaConstants.CollapsibleBody, testID })}
     >
-      <CollapsibleBodyContent>{children}</CollapsibleBodyContent>
+      <CollapsibleBodyContent _hasMargin={_hasMargin}>{children}</CollapsibleBodyContent>
     </BaseBox>
   );
 };

packages/blade/src/components/Collapsible/CollapsibleBodyContent.native.tsx

@@ -34,7 +34,10 @@ const AnimatedStyledCollapsibleBodyContent = styled(
   };
 });
 
-const CollapsibleBodyContent = ({ children }: CollapsibleBodyContentProps): ReactElement => {
+const CollapsibleBodyContent = ({
+  children,
+  _hasMargin,
+}: CollapsibleBodyContentProps): ReactElement => {
   const { isExpanded, direction } = useCollapsible();
   const { theme } = useTheme();
 
@@ -125,7 +128,7 @@ const CollapsibleBodyContent = ({ children }: CollapsibleBodyContentProps): Reac
             : nativeStyles.collapsibleBodyCollapsed
         }
       >
-        <Box {...getCollapsibleBodyContentBoxProps({ direction })}>{children}</Box>
+        <Box {...getCollapsibleBodyContentBoxProps({ direction, _hasMargin })}>{children}</Box>
       </View>
     </AnimatedStyledCollapsibleBodyContent>
   );

packages/blade/src/components/Collapsible/CollapsibleBodyContent.web.tsx

@@ -49,7 +49,10 @@ const StyledCollapsibleBodyContent = styled(BaseBox)<StyledCollapsibleBodyConten
   };
 });
 
-const CollapsibleBodyContent = ({ children }: CollapsibleBodyContentProps): ReactElement => {
+const CollapsibleBodyContent = ({
+  children,
+  _hasMargin,
+}: CollapsibleBodyContentProps): ReactElement => {
   const { isExpanded, defaultIsExpanded, direction } = useCollapsible();
   const collapsibleBodyContentRef = useRef<HTMLDivElement>(null);
 
@@ -126,7 +129,7 @@ const CollapsibleBodyContent = ({ children }: CollapsibleBodyContentProps): Reac
       defaultIsExpanded={defaultIsExpanded}
       onTransitionEnd={onTransitionEnd}
     >
-      <Box {...getCollapsibleBodyContentBoxProps({ direction })}>{children}</Box>
+      <Box {...getCollapsibleBodyContentBoxProps({ direction, _hasMargin })}>{children}</Box>
     </StyledCollapsibleBodyContent>
   );
 };

packages/blade/src/components/Collapsible/CollapsibleLink.tsx

@@ -6,18 +6,23 @@ import type { LinkProps } from '~components/Link';
 import { MetaConstants } from '~utils/metaAttribute';
 import { BaseLink } from '~components/Link/BaseLink';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
+import type { StyledPropsBlade } from '~components/Box/styledProps';
+import { getStyledProps } from '~components/Box/styledProps';
 
 type CollapsibleLinkProps = Pick<
   LinkProps,
-  'size' | 'isDisabled' | 'testID' | 'accessibilityLabel' | 'children'
->;
+  'color' | 'size' | 'isDisabled' | 'testID' | 'accessibilityLabel' | 'children'
+> &
+  StyledPropsBlade;
 
 const _CollapsibleLink = ({
   children,
   size,
+  color = 'primary',
   isDisabled,
   testID,
   accessibilityLabel,
+  ...styledProps
 }: CollapsibleLinkProps): ReactElement => {
   const { onExpandChange, isExpanded, collapsibleBodyId } = useCollapsible();
 
@@ -30,6 +35,7 @@ const _CollapsibleLink = ({
     <BaseLink
       variant="button"
       size={size}
+      color={color}
       icon={CollapsibleChevronIcon}
       iconPosition="right"
       isDisabled={isDisabled}
@@ -40,6 +46,7 @@ const _CollapsibleLink = ({
         controls: collapsibleBodyId,
         expanded: isExpanded,
       }}
+      {...getStyledProps(styledProps)}
     >
       {children}
     </BaseLink>

packages/blade/src/components/Collapsible/commonStyles.ts

@@ -1,20 +1,29 @@
 import type { CollapsibleProps } from './Collapsible';
+import type { CollapsibleBodyProps } from './types';
 import type { Theme } from '~components/BladeProvider';
 import type { BoxProps } from '~components/Box';
 import { makeMotionTime } from '~utils';
 
 const getCollapsibleBodyContentBoxProps = ({
   direction,
+  _hasMargin,
 }: {
   direction: CollapsibleProps['direction'];
-}): BoxProps => ({
-  /**
-   * Need a margin inside the outside wrapper so this is
-   * included in height calculations and prevents jank
-   */
-  marginTop: direction === 'bottom' ? 'spacing.5' : 'spacing.0',
-  marginBottom: direction === 'top' ? 'spacing.5' : 'spacing.0',
-});
+  _hasMargin: CollapsibleBodyProps['_hasMargin'];
+}): BoxProps => {
+  if (!_hasMargin) {
+    return {};
+  }
+
+  return {
+    /**
+     * Need a margin inside the outside wrapper so this is
+     * included in height calculations and prevents jank
+     */
+    marginTop: direction === 'bottom' ? 'spacing.5' : 'spacing.0',
+    marginBottom: direction === 'top' ? 'spacing.5' : 'spacing.0',
+  };
+};
 
 const getOpacity = ({ isExpanded }: { isExpanded: boolean }): number => (isExpanded ? 1 : 0.8);
 

packages/blade/src/components/Collapsible/types.ts

@@ -1,5 +1,21 @@
 import type { ReactNode } from 'react';
+import type { BaseBoxProps } from '~components/Box/BaseBox';
+import type { TestID } from '~utils/types';
 
-export type CollapsibleBodyContentProps = {
+type CollapsibleBodyProps = {
   children: ReactNode;
+  width?: BaseBoxProps['width'];
+  /**
+   * Internal
+   *
+   * Set to false to remove margin of CollapsibleBody
+   */
+  _hasMargin?: boolean;
+} & TestID;
+
+type CollapsibleBodyContentProps = {
+  children: ReactNode;
+  _hasMargin?: CollapsibleBodyProps['_hasMargin'];
 };
+
+export type { CollapsibleBodyProps, CollapsibleBodyContentProps };

packages/blade/src/components/Drawer/Drawer.web.tsx

@@ -72,6 +72,7 @@ const _Drawer = ({
   accessibilityLabel,
   showOverlay = true,
   initialFocusRef,
+  isLazy = true,
   testID,
 }: DrawerProps): React.ReactElement => {
   const closeButtonRef = React.useRef<HTMLDivElement>(null);
@@ -87,18 +88,18 @@ const _Drawer = ({
   const drawerId = useId('drawer');
   const { drawerStack, addToDrawerStack, removeFromDrawerStack } = useDrawerStack();
 
-  const { isMounted, isVisible } = usePresence(isOpen, {
+  const { isMounted, isVisible, isExiting } = usePresence(isOpen, {
     enterTransitionDuration: theme.motion.duration.gentle,
     exitTransitionDuration: theme.motion.duration.xmoderate,
     initialEnter: true,
   });
 
   const { stackingLevel, isFirstDrawerInStack } = React.useMemo(() => {
     // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-    const level = drawerStack.indexOf(drawerId) + 1;
+    const level = Object.keys(drawerStack).indexOf(drawerId) + 1;
     return {
       stackingLevel: level,
-      isFirstDrawerInStack: level === 1 && drawerStack.length > 1,
+      isFirstDrawerInStack: level === 1 && Object.keys(drawerStack).length > 1,
     };
   }, [drawerId, drawerStack]);
 
@@ -108,9 +109,9 @@ const _Drawer = ({
 
   React.useEffect(() => {
     if (isOpen) {
-      addToDrawerStack(drawerId);
+      addToDrawerStack({ elementId: drawerId, onDismiss });
     } else {
-      removeFromDrawerStack(drawerId);
+      removeFromDrawerStack({ elementId: drawerId });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
@@ -123,12 +124,23 @@ const _Drawer = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMounted]);
 
+  const contextValue = React.useMemo(
+    () => ({
+      close: onDismiss,
+      closeButtonRef,
+      stackingLevel,
+      isExiting,
+    }),
+    [isExiting, onDismiss, stackingLevel],
+  );
+
   return (
-    <DrawerContext.Provider value={{ close: onDismiss, closeButtonRef }}>
+    <DrawerContext.Provider value={contextValue}>
       <FloatingPortal>
-        {isMounted ? (
+        {isMounted || !isLazy ? (
           <FloatingFocusManager context={context} initialFocus={initialFocusRef ?? closeButtonRef}>
             <BaseBox
+              display={isLazy ? undefined : isMounted ? 'block' : 'none'}
               position="fixed"
               {...metaAttribute({
                 name: MetaConstants.Drawer,

packages/blade/src/components/Drawer/DrawerContext.ts

@@ -1,10 +1,17 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 
-const DrawerContext = React.createContext<{
+type DrawerContextType = {
   close: () => void;
   closeButtonRef?: React.MutableRefObject<any>;
+  stackingLevel?: number;
+  isExiting: boolean;
+};
+
+const DrawerContext = React.createContext<DrawerContextType>({
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-}>({ close: () => {} });
+  close: () => {},
+  isExiting: false,
+});
 
 export { DrawerContext };

packages/blade/src/components/Drawer/DrawerSubcomponents.web.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { drawerComponentIds } from './drawerComponentIds';
 import { DrawerContext } from './DrawerContext';
 import type { DrawerHeaderProps } from './types';
+import { useDrawerStack } from './StackProvider';
 import { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';
 import { Box } from '~components/Box';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
@@ -13,13 +14,28 @@ const _DrawerHeader = ({
   trailing,
   titleSuffix,
 }: DrawerHeaderProps): React.ReactElement => {
-  const { close, closeButtonRef } = React.useContext(DrawerContext);
+  const { close, closeButtonRef, stackingLevel, isExiting } = React.useContext(DrawerContext);
+  const { drawerStack } = useDrawerStack();
+  const closeAllDrawers = (): void => {
+    for (const onDismiss of Object.values(drawerStack)) {
+      onDismiss();
+    }
+  };
+
+  const isStackedDrawer = stackingLevel && stackingLevel > 1;
+
+  const isAtleastOneDrawerOpen = Object.keys(drawerStack).length > 0;
+  // This condition is to avoid back button disappear while stacked drawer is in the exiting transition
+  const isDrawerExiting = isAtleastOneDrawerOpen && isExiting && stackingLevel !== 1;
 
   return (
     <BaseHeader
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      showBackButton={isStackedDrawer || isDrawerExiting}
       showCloseButton={true}
       closeButtonRef={closeButtonRef}
-      onCloseButtonClick={() => close()}
+      onCloseButtonClick={() => closeAllDrawers()}
+      onBackButtonClick={() => close()}
       title={title}
       titleSuffix={titleSuffix}
       subtitle={subtitle}
@@ -47,9 +63,11 @@ const DrawerHeader = assignWithoutSideEffects(_DrawerHeader, {
   componentId: drawerComponentIds.DrawerHeader,
 });
 
+const drawerPadding = 'spacing.6';
+
 const _DrawerBody = ({ children }: { children: React.ReactNode }): React.ReactElement => {
   return (
-    <Box padding="spacing.6" overflow="auto" flex="1">
+    <Box padding={drawerPadding} overflow="auto" flex="1">
       {children}
     </Box>
   );
@@ -58,4 +76,4 @@ const DrawerBody = assignWithoutSideEffects(_DrawerBody, {
   componentId: drawerComponentIds.DrawerBody,
 });
 
-export { DrawerHeader, DrawerBody };
+export { DrawerHeader, DrawerBody, drawerPadding };