From be14bb9dc091b580bbc3562416b76b82129fd5d7 Mon Sep 17 00:00:00 2001 From: Kathrin Date: Wed, 18 Sep 2024 13:38:14 +0200 Subject: [PATCH] feat: make offsetTop a overwritable property --- packages/components/layout/package.json | 1 - .../components/layout/src/Layout.styles.ts | 25 +++++---- packages/components/layout/src/Layout.tsx | 6 ++- packages/components/layout/src/LayoutBody.tsx | 4 +- .../components/layout/src/LayoutContext.ts | 1 + .../components/layout/src/LayoutSidebar.tsx | 4 +- .../layout/stories/Layout.stories.tsx | 52 ++++++++++++------- 7 files changed, 59 insertions(+), 34 deletions(-) diff --git a/packages/components/layout/package.json b/packages/components/layout/package.json index 8472bd3469..6f586c0ddd 100644 --- 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 index 054b85e452..eab11b5ea5 100644 --- 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,12 +95,15 @@ 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', @@ -107,12 +111,15 @@ export const getLayoutBodyStyles = (withHeader: boolean) => ({ }), }); -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 index d8f205ff09..f048f2c6c1 100644 --- 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; @@ -44,12 +45,14 @@ const _Layout = (props: LayoutProps, ref: Ref) => { 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) => { () => ({ 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 index 9c0aa0f6af..1f50e73b50 100644 --- a/packages/components/layout/src/LayoutBody.tsx +++ b/packages/components/layout/src/LayoutBody.tsx @@ -16,8 +16,8 @@ const _LayoutBody = (props: LayoutBodyProps, ref: Ref) => { 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 ( ; withHeader: boolean; + offsetTop: number; }; const LayoutContext = React.createContext( diff --git a/packages/components/layout/src/LayoutSidebar.tsx b/packages/components/layout/src/LayoutSidebar.tsx index 5e07278c8a..621b0bb7ce 100644 --- 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 ( ( +const ExampleWrapper = ({ withNavbar = true, children }) => (
( flexDirection: 'column', })} > -
- Navbar -
- + {withNavbar && ( +
+ Navbar +
+ )} {children}
); @@ -69,10 +71,10 @@ const LayoutSidebarComp = ({ content }) => ( ); -export const basic: Story = (args) => { +export const basic: Story = () => { return ( - - + + = (args) => { ); }; -export const withHeader: Story = (args) => { +export const withHeader: Story = () => { return ( - } {...args}> + } offsetTop={NAVBAR_HEIGHT}> = (args) => { export const withLeftSidebar: Story = () => { return ( - }> + } + offsetTop={NAVBAR_HEIGHT} + > = () => { export const withRightSidebar: Story = () => { return ( - }> + } + offsetTop={NAVBAR_HEIGHT} + > = () => { return ( } leftSidebar={} rightSidebar={} @@ -196,6 +205,7 @@ export const withHeaderAndLongSidebars: Story = () => { return ( } leftSidebar={ @@ -262,6 +272,7 @@ export const withLongContentAndLongSidebars: Story = () => { return ( = () => { return ( } leftSidebar={} rightSidebar={} @@ -381,7 +393,7 @@ export const variantFullscreen: Story = () => { export const variantNarrow: Story = () => { return ( - + = () => { variant="narrow" leftSidebar={} header={} + offsetTop={NAVBAR_HEIGHT} > = () => { return (