First draft new layout table page

packages/pxweb2/src/app/components/ContentTop/ContentTop.module.scss

@@ -30,6 +30,11 @@
   align-items: flex-start;
   gap: fixed.$spacing-4;
   align-self: stretch;
+
+  // Offset anchor jump only for desktop widths where TableViewer header is sticky.
+  @media (min-width: fixed.$breakpoints-large-min-width) {
+    scroll-margin-top: var(--px-skip-to-main-sticky-offset, 0px);
+  }
 }
 .information {
   display: flex;

packages/pxweb2/src/app/components/ContentTop/ContentTop.spec.tsx

@@ -321,9 +321,13 @@ let mockIsXXLargeDesktop = true;
 vi.mock('../../context/useApp', () => ({
   default: () => ({
     isXXLargeDesktop: mockIsXXLargeDesktop,
+    isTablet: false,
     setTitle: () => {
       vi.fn();
     },
+    setTableInformationWantsToHidePageScrollbar: () => {
+      vi.fn();
+    },
   }),
 }));
 

packages/pxweb2/src/app/components/ContentTop/ContentTop.tsx

@@ -115,7 +115,12 @@ export function ContentTop({
   const { pxTableMetadata, selectedVBValues } = useVariables();
   const selectedMetadata = useTableData().data?.metadata;
   const buildTableTitle = useTableData().buildTableTitle;
-  const { setTitle, isXXLargeDesktop, isTablet } = useApp();
+  const {
+    setTitle,
+    isXXLargeDesktop,
+    isTablet,
+    setTableInformationWantsToHidePageScrollbar,
+  } = useApp();
 
   const openInformationButtonRef = useRef<HTMLButtonElement>(null);
   const openInformationLinkRef = useRef<HTMLAnchorElement>(null);
@@ -128,6 +133,7 @@ export function ContentTop({
       setActiveTab(selectedTab);
     }
     setIsTableInformationOpen(true);
+    setTableInformationWantsToHidePageScrollbar(true);
   };
 
   const noteInfo =
@@ -166,6 +172,13 @@ export function ContentTop({
     });
   }, [isTableInformationOpen, tableInformationOpener, accessibility]);
 
+  // Release table info lock on unmount.
+  useEffect(() => {
+    return () => {
+      setTableInformationWantsToHidePageScrollbar(false);
+    };
+  }, [setTableInformationWantsToHidePageScrollbar]);
+
   let tableTitle = '';
   if (selectedMetadata) {
     const titleBy = t('presentation_page.common.table_title_by');
@@ -279,6 +292,7 @@ export function ContentTop({
           selectedTab={activeTab}
           onClose={() => {
             setIsTableInformationOpen(false);
+            setTableInformationWantsToHidePageScrollbar(false);
           }}
         ></TableInformation>
       )}

packages/pxweb2/src/app/components/Errors/NotFound/NotFound.spec.tsx

@@ -41,6 +41,7 @@ vi.mock('@pxweb2/pxweb2-ui', () => ({
     </div>
   ),
   BreakpointsXsmallMaxWidth: '575px',
+  BreakpointsSmallMaxWidth: '600px',
   BreakpointsMediumMaxWidth: '767px',
   BreakpointsLargeMaxWidth: '991px',
   BreakpointsXlargeMaxWidth: '1199px',

packages/pxweb2/src/app/components/Footer/Footer.tsx

@@ -21,12 +21,12 @@ function useSafeLocation(): { pathname: string } {
 }
 
 type FooterProps = {
-  containerRef?: React.RefObject<HTMLDivElement | null>;
+  containerRef?: React.RefObject<HTMLElement | null>;
   variant?: 'generic' | 'tableview';
   enableWindowScroll?: boolean;
 };
 
-export function scrollToTop(ref?: React.RefObject<HTMLDivElement | null>) {
+export function scrollToTop(ref?: React.RefObject<HTMLElement | null>) {
   if (ref?.current) {
     const container = ref.current;
     const start = container.scrollTop;

packages/pxweb2/src/app/components/NavigationDrawer/NavigationDrawer.module.scss

@@ -18,74 +18,68 @@
 
   @media ((min-width: fixed.$breakpoints-small-min-width) and (max-width: fixed.$breakpoints-medium-max-width)) {
     width: 428px;
-    padding-left: fixed.$spacing-8;
-    padding-right: fixed.$spacing-8;
-    padding-top: fixed.$spacing-6;
-    padding-bottom: fixed.$spacing-6;
+    padding: fixed.$spacing-6 fixed.$spacing-8;
   }
 
   // xsmall, small and medium
-  @media (min-width: fixed.$breakpoints-xsmall-min-width) and (max-width: fixed.$breakpoints-small-max-width) {
+  @media (min-width: fixed.$breakpoints-xsmall-min-width) and (max-width: fixed.$breakpoints-medium-max-width) {
     height: 100vh;
     // Handle rtl languages
     border-start-start-radius: var(--px-border-radius-none);
     border-start-end-radius: var(--px-border-radius-xlarge);
     border-end-end-radius: var(--px-border-radius-xlarge);
     border-end-start-radius: var(--px-border-radius-none);
-
-    // Not from Figma
-    position: absolute;
-    top: 0;
-    z-index: 999;
-  }
-
-  @media (min-width: fixed.$breakpoints-medium-min-width) and (max-width: fixed.$breakpoints-medium-max-width) {
-    height: calc(100vh - 80px);
-    // Handle rtl languages
-    border-start-start-radius: var(--px-border-radius-none);
-    border-start-end-radius: var(--px-border-radius-xlarge);
-    border-end-end-radius: var(--px-border-radius-xlarge);
-    border-end-start-radius: var(--px-border-radius-none);
-
     // Not from Figma
-    position: absolute;
+    position: fixed;
     top: 0;
-    z-index: 999;
+    z-index: 70;
   }
 
   // large
   @media (min-width: fixed.$breakpoints-large-min-width) and (max-width: fixed.$breakpoints-large-max-width) {
     width: 428px;
-    padding: fixed.$spacing-8;
+    padding-inline-start: fixed.$spacing-8;
+    padding-inline-end: fixed.$spacing-8;
+    padding-top: fixed.$spacing-5;
+    padding-bottom: fixed.$spacing-8;
 
     // Calculate height of main container, minus the header height
-    height: calc(100vh - fixed.$spacing-22);
+    height: calc(100vh - fixed.$spacing-20);
 
     // Handle rtl languages
-    border-start-start-radius: var(--px-border-radius-xlarge);
-    border-start-end-radius: var(--px-border-radius-xlarge);
     border-end-end-radius: var(--px-border-radius-xlarge);
     border-end-start-radius: var(--px-border-radius-none);
 
     // Not from Figma
-    position: absolute;
-    inset-inline-start: 120px; // Instead of "left" to handle rtl languages
-    z-index: 999;
-
-    // Position NavigationDrawer below the header
-    top: fixed.$spacing-22;
+    position: fixed;
+    top: fixed.$spacing-20;
+    inset-inline-start: 100px; // Instead of "left" to handle rtl languages
+    z-index: 60;
 
     &.skipToMainContentVisible {
       // Calculate position of NavigationDrawer below the header and SkipToMainContent
-      top: calc(fixed.$spacing-22 + var(--skip-to-main-content-height));
+      top: calc(fixed.$spacing-20 + var(--skip-to-main-content-height));
     }
   }
 
   // xlarge and xxlarge
   @media ((min-width: fixed.$breakpoints-xlarge-min-width) and (max-width: fixed.$breakpoints-xlarge-max-width)) or ((min-width: fixed.$breakpoints-xxlarge-min-width)) {
-    width: 396px;
-    padding: 0px fixed.$spacing-8 fixed.$spacing-8 0px;
-    border-radius: var(--px-border-radius-none);
+    width: 428px;
+    padding-inline-start: fixed.$spacing-8;
+    padding-inline-end: fixed.$spacing-8;
+    padding-top: fixed.$spacing-5;
+    padding-bottom: fixed.$spacing-8;
+
+    // Calculate height of main container, minus the header height
+    height: calc(100vh - fixed.$spacing-20);
+    position: sticky;
+    top: fixed.$spacing-20;
+    z-index: 60;
+
+    &.skipToMainContentVisible {
+      // Calculate position of NavigationDrawer below the header and SkipToMainContent
+      top: calc(fixed.$spacing-20 + var(--skip-to-main-content-height));
+    }
   }
 }
 
@@ -151,14 +145,14 @@
 
 // Not from Figma
 .backdrop {
-  @media (min-width: fixed.$breakpoints-xsmall-min-width) and (max-width: fixed.$breakpoints-small-max-width) {
+  @media (min-width: fixed.$breakpoints-xsmall-min-width) and (max-width: fixed.$breakpoints-medium-max-width) {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: var(--px-color-surface-scrim);
-    z-index: 999;
+    z-index: 50;
   }
 }
 

packages/pxweb2/src/app/components/NavigationMenu/NavigationBar/NavigationBar.module.scss

@@ -10,12 +10,12 @@
   align-items: center;
   gap: fixed.$spacing-2;
   flex-shrink: 0;
-  background-color: var(--px-color-surface-subtle);
+  background-color: var(--px-color-surface-default);
 
   // fix the navigation bar to the bottom of the screen
   position: fixed;
   bottom: 0;
-  z-index: 2; // 2 to fix gradient issue with table
+  z-index: 40;
   border-top: 1px solid var(--px-color-border-subtle);
 
   // xsmall, small and medium

packages/pxweb2/src/app/components/NavigationMenu/NavigationItem/NavigationItem.tsx

@@ -1,5 +1,5 @@
 import cl from 'clsx';
-import { m } from 'motion/react';
+import { m, type Transition, type Variants } from 'motion/react';
 import { forwardRef, MouseEvent } from 'react';
 
 import { Icon, IconProps, Label } from '@pxweb2/pxweb2-ui';
@@ -11,7 +11,7 @@ const springConfig = {
   mass: 1,
   stiffness: 200,
   damping: 30,
-};
+} satisfies Transition;
 
 interface ItemProps {
   label: string;
@@ -24,10 +24,7 @@ interface ItemProps {
 export const Item = forwardRef<HTMLButtonElement, ItemProps>(
   ({ label, parentName, selected, icon, onClick }, ref) => {
     const btnId = 'px-' + parentName + '-' + label;
-    const initialBaseBackgroundColor =
-      parentName === 'navBar'
-        ? 'var(--px-color-surface-subtle)'
-        : 'var(--px-color-surface-default)';
+    const initialBaseBackgroundColor = 'var(--px-color-surface-default)';
     const initialBackgroundColor = selected
       ? 'var(--px-color-surface-action-subtle-active)'
       : initialBaseBackgroundColor;
@@ -50,7 +47,7 @@ export const Item = forwardRef<HTMLButtonElement, ItemProps>(
         ],
         transition: springConfig,
       },
-    };
+    } satisfies Variants;
 
     return (
       <li className={cl(styles.navigationBarListItem, styles.fadein)}>

packages/pxweb2/src/app/components/NavigationMenu/NavigationRail/NavigationRail.module.scss

@@ -8,18 +8,24 @@
 }
 
 .navigationRail {
-  width: 120px;
+  width: 100px;
   height: 100%;
-  padding: fixed.$spacing-8 0px fixed.$spacing-14 0px;
+  padding: fixed.$spacing-6 0px fixed.$spacing-14 0px;
   flex-direction: column;
   align-items: center;
   flex-shrink: 0;
   background: var(--px-color-surface-default);
+  border-inline-end: 1px solid var(--px-color-border-subtle);
   gap: 24px;
 
   // large, xlarge and xxlarge
   @media ((min-width: fixed.$breakpoints-large-min-width) and (max-width: fixed.$breakpoints-xlarge-max-width)) or ((min-width: fixed.$breakpoints-xxlarge-min-width)) {
     display: flex;
+    position: sticky;
+    top: fixed.$spacing-20;
+    height: calc(100vh - fixed.$spacing-20);
+    z-index: 10;
+    align-self: flex-start;
   }
 
   &:focus-visible {

packages/pxweb2/src/app/components/Presentation/Presentation.tsx

@@ -14,7 +14,7 @@ import { getConfig } from '../../util/config/getConfig';
 
 type propsType = {
   readonly selectedTabId: string;
-  readonly scrollRef?: React.Ref<HTMLDivElement>;
+  readonly scrollRef?: React.RefObject<HTMLElement | null>;
   isExpanded: boolean;
   setIsExpanded: (expanded: boolean) => void;
 };

packages/pxweb2/src/app/components/RootLayout.tsx

@@ -3,14 +3,12 @@ import { Outlet } from 'react-router';
 import useLocalizeDocumentAttributes from '../../i18n/useLocalizeDocumentAttributes';
 import { Title, CanonicalUrl, HrefLang } from '../util/seo/headTags';
 import ErrorBoundary from './ErrorBoundary/ErrorBoundary';
-import WipStatusMessage from '../components/Banners/WipStatusMessage';
 
 export default function RootLayout() {
   useLocalizeDocumentAttributes();
 
   return (
     <>
-      <WipStatusMessage />
       <Title />
       <CanonicalUrl />
       <HrefLang />

packages/pxweb2/src/app/components/Selection/Selection.tsx

@@ -235,7 +235,7 @@ export function Selection({
 }: SelectionProps) {
   const variables = useVariables();
   const app = useApp();
-  const { isTablet } = useApp();
+  const { isTablet, isMobile, setSelectionWantsToHidePageScrollbar } = useApp();
   const {
     selectedVBValues,
     setSelectedVBValues,
@@ -590,6 +590,26 @@ export function Selection({
     />
   );
 
+  useEffect(() => {
+    if (selectedNavigationView !== 'none' && (isTablet || isMobile)) {
+      setSelectionWantsToHidePageScrollbar(true);
+    } else {
+      setSelectionWantsToHidePageScrollbar(false);
+    }
+  }, [
+    selectedNavigationView,
+    isTablet,
+    isMobile,
+    setSelectionWantsToHidePageScrollbar,
+  ]);
+
+  // Release selection lock on unmount.
+  useEffect(() => {
+    return () => {
+      setSelectionWantsToHidePageScrollbar(false);
+    };
+  }, [setSelectionWantsToHidePageScrollbar]);
+
   return (
     selectedNavigationView !== 'none' && (
       <NavigationDrawer

packages/pxweb2/src/app/components/SkipToContent/SkipToContent.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { HTMLAttributes, Ref } from 'react';
 import cl from 'clsx';
 import { useLocation, useSearchParams } from 'react-router';
 import { useTranslation } from 'react-i18next';
@@ -8,18 +8,22 @@ import { Link } from '@pxweb2/pxweb2-ui';
 import { getConfig } from '../../util/config/getConfig';
 import { getLanguagePath } from '../../util/language/getLanguagePath';
 
-export type SkipToContentProps = React.HTMLAttributes<HTMLDivElement> & {
+export type SkipToContentProps = HTMLAttributes<HTMLDivElement> & {
   // Jump to
   targetId?: string;
 
   // label for the link
   label?: string;
 
-  containerRef?: React.Ref<HTMLDivElement>;
+  containerRef?: Ref<HTMLDivElement>;
 };
 
-export function SkipToContent(props: SkipToContentProps) {
-  const { targetId, label, containerRef, ...rest } = props;
+export function SkipToContent({
+  targetId,
+  label,
+  containerRef,
+  ...rest
+}: SkipToContentProps) {
   const { i18n } = useTranslation();
   const config = getConfig();
   const location = useLocation().pathname;