feat: make offsetTop a overwritable property

contentful · Sep 18, 2024 · be14bb9 · be14bb9
1 parent 2cdaa74
commit be14bb9
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 34 deletions.
diff --git a/packages/components/layout/package.json b/packages/components/layout/package.json
@@ -9,7 +9,6 @@
     "@contentful/f36-core": "^4.68.1",
     "@contentful/f36-header": "^4.69.2",
     "@contentful/f36-tokens": "^4.0.5",
-    "@contentful/f36-navbar-alpha": "npm:@contentful/f36-navbar@5.0.0-alpha.36",
     "emotion": "^10.0.17"
   },
   "peerDependencies": {

diff --git a/packages/components/layout/src/Layout.styles.ts b/packages/components/layout/src/Layout.styles.ts
@@ -2,13 +2,12 @@ import tokens from '@contentful/f36-tokens';
 import { css } from 'emotion';
 import type { LayoutProps } from './Layout';
 import { HEADER_HEIGHT } from '@contentful/f36-header';
-import { NAVBAR_HEIGHT } from '@contentful/f36-navbar-alpha';
 
 export const SIDEBAR_WIDTH = '340px';
 
-//header + navbar + 1px border or navbar
-const getMainOffset = (withHeader: boolean) =>
-  withHeader ? HEADER_HEIGHT + 1 + NAVBAR_HEIGHT + 'px' : NAVBAR_HEIGHT + 'px';
+//header + offsetTop + 1px border or offsetTop
+const getMainOffset = (withHeader: boolean, offsetTop: number) =>
+  withHeader ? HEADER_HEIGHT + 1 + offsetTop + 'px' : offsetTop + 'px';
 
 export const getLayoutMaxWidthStyles = ({
   variant,
@@ -68,17 +67,19 @@ export const getLayoutStyles = ({
   withBoxShadow,
   withLeftSidebar,
   withRightSidebar,
+  offsetTop,
 }: {
   variant: LayoutProps['variant'];
   withBoxShadow?: boolean;
   withLeftSidebar?: boolean;
   withRightSidebar?: boolean;
+  offsetTop: number;
 }) => ({
   layoutMainContainer: css(
     getLayoutMaxWidthStyles({ variant, withBoxShadow }),
     {
       backgroundColor: tokens.colorWhite,
-      minHeight: `calc(100vh - ${NAVBAR_HEIGHT}px)`,
+      minHeight: `calc(100vh - ${offsetTop}px)`,
     },
   ),
   layoutContentContainer: css(
@@ -94,25 +95,31 @@ export const getLayoutStyles = ({
   ),
 });
 
-export const getLayoutBodyStyles = (withHeader: boolean) => ({
+export const getLayoutBodyStyles = (
+  withHeader: boolean,
+  offsetTop: number,
+) => ({
   layoutBodyContainer: css({
     width: '100%',
     padding: `${tokens.spacingL} ${tokens.spacingL} 0`,
     overflowY: 'auto',
-    height: `calc(100vh - ${getMainOffset(withHeader)})`,
+    height: `calc(100vh - ${getMainOffset(withHeader, offsetTop)})`,
   }),
   layoutBodyInner: css({
     maxWidth: '900px',
     margin: '0 auto',
   }),
 });
 
-export const getLayoutSidebarStyles = (withHeader: boolean) => ({
+export const getLayoutSidebarStyles = (
+  withHeader: boolean,
+  offsetTop: number,
+) => ({
   layoutSidebar: css({
     padding: `${tokens.spacingL} ${tokens.spacingS} 0`,
     width: SIDEBAR_WIDTH,
     overflowY: 'auto',
-    height: `calc(100vh - ${getMainOffset(withHeader)})`,
+    height: `calc(100vh - ${getMainOffset(withHeader, offsetTop)})`,
     '&:first-child': {
       borderRight: `1px solid ${tokens.gray200}`,
     },

diff --git a/packages/components/layout/src/Layout.tsx b/packages/components/layout/src/Layout.tsx
@@ -29,6 +29,7 @@ export type LayoutProps = {
    */
   contentClassName?: string;
   contentTestId?: string;
+  offsetTop?: number;
 } & CommonProps &
   HTMLAttributes<HTMLDivElement>;
 
@@ -44,12 +45,14 @@ const _Layout = (props: LayoutProps, ref: Ref<HTMLDivElement>) => {
     testId = 'cf-ui-layout',
     contentTestId = 'cf-layout-content-container',
     contentClassName,
+    offsetTop = 0,
     ...otherProps
   } = props;
 
   const withLeftSidebar = Boolean(leftSidebar);
   const withRightSidebar = Boolean(rightSidebar);
   const styles = getLayoutStyles({
+    offsetTop,
     variant,
     withBoxShadow,
     withLeftSidebar,
@@ -60,8 +63,9 @@ const _Layout = (props: LayoutProps, ref: Ref<HTMLDivElement>) => {
     () => ({
       variant,
       withHeader: Boolean(header),
+      offsetTop,
     }),
-    [variant, header],
+    [variant, header, offsetTop],
   );
 
   return (

diff --git a/packages/components/layout/src/LayoutBody.tsx b/packages/components/layout/src/LayoutBody.tsx
@@ -16,8 +16,8 @@ const _LayoutBody = (props: LayoutBodyProps, ref: Ref<HTMLDivElement>) => {
     testId = 'cf-layout-body',
     ...otherProps
   } = props;
-  const { variant, withHeader } = useLayoutContext();
-  const styles = getLayoutBodyStyles(withHeader);
+  const { variant, withHeader, offsetTop } = useLayoutContext();
+  const styles = getLayoutBodyStyles(withHeader, offsetTop);
 
   return (
     <Box

diff --git a/packages/components/layout/src/LayoutContext.ts b/packages/components/layout/src/LayoutContext.ts
@@ -4,6 +4,7 @@ import { LayoutProps } from './Layout';
 export type LayoutContextType = {
   variant: NonNullable<LayoutProps['variant']>;
   withHeader: boolean;
+  offsetTop: number;
 };
 
 const LayoutContext = React.createContext<LayoutContextType | undefined>(

diff --git a/packages/components/layout/src/LayoutSidebar.tsx b/packages/components/layout/src/LayoutSidebar.tsx
@@ -19,8 +19,8 @@ export const _LayoutSidebar = (
     testId = 'cf-layout-sidebar',
     ...otherProps
   } = props;
-  const { withHeader } = useLayoutContext();
-  const styles = getLayoutSidebarStyles(withHeader);
+  const { withHeader, offsetTop } = useLayoutContext();
+  const styles = getLayoutSidebarStyles(withHeader, offsetTop);
 
   return (
     <Box

diff --git a/packages/components/layout/stories/Layout.stories.tsx b/packages/components/layout/stories/Layout.stories.tsx
@@ -7,6 +7,7 @@ import { Layout } from '../src/CompoundLayout';
 import { Button, DisplayText, Header } from '@contentful/f36-components';
 import { LayoutProps } from '../src';
 import { LayoutBody } from '../src/LayoutBody';
+import { NAVBAR_HEIGHT } from '@contentful/f36-navbar-alpha';
 
 export default {
   title: 'Layout/Layout',
@@ -16,7 +17,7 @@ export default {
   },
 } as Meta;
 
-const ExampleWrapper = ({ children }) => (
+const ExampleWrapper = ({ withNavbar = true, children }) => (
   <div
     className={css({
       position: 'relative',
@@ -31,16 +32,17 @@ const ExampleWrapper = ({ children }) => (
       flexDirection: 'column',
     })}
   >
-    <div
-      className={css({
-        width: '100vw',
-        height: '60px',
-        backgroundColor: 'lavender',
-      })}
-    >
-      Navbar
-    </div>
-
+    {withNavbar && (
+      <div
+        className={css({
+          width: '100vw',
+          height: '60px',
+          backgroundColor: 'lavender',
+        })}
+      >
+        Navbar
+      </div>
+    )}
     {children}
   </div>
 );
@@ -69,10 +71,10 @@ const LayoutSidebarComp = ({ content }) => (
   </Layout.Sidebar>
 );
 
-export const basic: Story<LayoutProps> = (args) => {
+export const basic: Story<LayoutProps> = () => {
   return (
-    <ExampleWrapper>
-      <Layout {...args}>
+    <ExampleWrapper withNavbar={false}>
+      <Layout>
         <LayoutBody>
           <Box
             className={css({
@@ -89,10 +91,10 @@ export const basic: Story<LayoutProps> = (args) => {
   );
 };
 
-export const withHeader: Story<LayoutProps> = (args) => {
+export const withHeader: Story<LayoutProps> = () => {
   return (
     <ExampleWrapper>
-      <Layout header={<LayoutHeaderComp />} {...args}>
+      <Layout header={<LayoutHeaderComp />} offsetTop={NAVBAR_HEIGHT}>
         <Layout.Body>
           <Box
             className={css({
@@ -132,7 +134,10 @@ export const withHeader: Story<LayoutProps> = (args) => {
 export const withLeftSidebar: Story<LayoutProps> = () => {
   return (
     <ExampleWrapper>
-      <Layout leftSidebar={<LayoutSidebarComp content="Left Sidebar" />}>
+      <Layout
+        leftSidebar={<LayoutSidebarComp content="Left Sidebar" />}
+        offsetTop={NAVBAR_HEIGHT}
+      >
         <Layout.Body>
           <Box
             className={css({
@@ -152,7 +157,10 @@ export const withLeftSidebar: Story<LayoutProps> = () => {
 export const withRightSidebar: Story<LayoutProps> = () => {
   return (
     <ExampleWrapper>
-      <Layout rightSidebar={<LayoutSidebarComp content="Right Sidebar" />}>
+      <Layout
+        rightSidebar={<LayoutSidebarComp content="Right Sidebar" />}
+        offsetTop={NAVBAR_HEIGHT}
+      >
         <Layout.Body>
           <Box
             className={css({
@@ -172,6 +180,7 @@ export const withHeaderAndSidebars: Story<LayoutProps> = () => {
   return (
     <ExampleWrapper>
       <Layout
+        offsetTop={NAVBAR_HEIGHT}
         header={<LayoutHeaderComp />}
         leftSidebar={<LayoutSidebarComp content="Left Sidebar" />}
         rightSidebar={<LayoutSidebarComp content="Right Sidebar" />}
@@ -196,6 +205,7 @@ export const withHeaderAndLongSidebars: Story<LayoutProps> = () => {
   return (
     <ExampleWrapper>
       <Layout
+        offsetTop={NAVBAR_HEIGHT}
         header={<LayoutHeaderComp />}
         leftSidebar={
           <Layout.Sidebar>
@@ -262,6 +272,7 @@ export const withLongContentAndLongSidebars: Story<LayoutProps> = () => {
   return (
     <ExampleWrapper>
       <Layout
+        offsetTop={NAVBAR_HEIGHT}
         rightSidebar={
           <Layout.Sidebar>
             <Box
@@ -358,6 +369,7 @@ export const variantFullscreen: Story<LayoutProps> = () => {
   return (
     <ExampleWrapper>
       <Layout
+        offsetTop={NAVBAR_HEIGHT}
         header={<LayoutHeaderComp />}
         leftSidebar={<LayoutSidebarComp content="Left Sidebar" />}
         rightSidebar={<LayoutSidebarComp content="Right Sidebar" />}
@@ -381,7 +393,7 @@ export const variantFullscreen: Story<LayoutProps> = () => {
 export const variantNarrow: Story<LayoutProps> = () => {
   return (
     <ExampleWrapper>
-      <Layout variant="narrow">
+      <Layout variant="narrow" offsetTop={NAVBAR_HEIGHT}>
         <Layout.Body>
           <Box
             className={css({
@@ -405,6 +417,7 @@ export const variantNarrowWithSidebar: Story<LayoutProps> = () => {
         variant="narrow"
         leftSidebar={<LayoutSidebarComp content="Left Sidebar" />}
         header={<LayoutHeaderComp />}
+        offsetTop={NAVBAR_HEIGHT}
       >
         <Layout.Body>
           <Box
@@ -426,6 +439,7 @@ export const variantNarrowWithRightSidebar: Story<LayoutProps> = () => {
   return (
     <ExampleWrapper>
       <Layout
+        offsetTop={NAVBAR_HEIGHT}
         variant="narrow"
         rightSidebar={
           <Layout.Sidebar>