fix: avoid necessity for overwriting height and scrolling behavior [C…

…FISO-1861] (#2859)

* docs: show different layout variations

* docs: improve storybook examples

* docs: extend examples

* refactor: layout component html structure and styling

* refactor: use grid instead of flexbox for column arrangement

* refactor: change scroll container for narrow variant

* refactor: only scroll content, never header

* chore: optimize code for sidebar

* chore: import sizes from dependent component packages

* fix: adjust size for border

* style: adjust outer spacing for smaller screens


style: adjust outer spacing for smaller screens

* chore: fix ci build run

* Update packages/components/layout/src/Layout.styles.ts

Co-authored-by: Rémy Lenoir <103024358+cf-remylenoir@users.noreply.github.com>

* Update packages/components/layout/src/Layout.styles.ts

Co-authored-by: Rémy Lenoir <103024358+cf-remylenoir@users.noreply.github.com>

* Update packages/components/layout/src/Layout.styles.ts

Co-authored-by: Rémy Lenoir <103024358+cf-remylenoir@users.noreply.github.com>

* feat: forward overwriting styles to main container

* docs: add comment to code

* fix: reset package.json

* chore: update package-lock

* feat: make offsetTop a overwritable property
fix: story import

* chore: bump to reflect current published version

* refactor: define default top offset to navbar height

* feat: introduce sidebar variants

---------

Co-authored-by: Rémy Lenoir <103024358+cf-remylenoir@users.noreply.github.com>
Co-authored-by: Rémy Lenoir <remy.lenoir@contentful.com>

packages/components/layout/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@contentful/f36-layout",
-  "version": "5.0.0-alpha.15",
+  "version": "5.0.0-alpha.18",
   "description": "Forma 36: Layout component",
   "scripts": {
     "build": "tsup"
   },
   "dependencies": {
     "@contentful/f36-core": "^4.68.1",
+    "@contentful/f36-header": "^4.69.2",
     "@contentful/f36-tokens": "^4.0.5",
     "emotion": "^10.0.17"
   },

packages/components/layout/src/Layout.styles.ts

@@ -1,6 +1,16 @@
 import tokens from '@contentful/f36-tokens';
 import { css } from 'emotion';
-import type { LayoutProps } from './Layout';
+import { HEADER_HEIGHT } from '@contentful/f36-header';
+import type { LayoutProps, LayoutSidebarVariant } from './Layout';
+
+const SIDEBAR_WIDTHS: Record<LayoutSidebarVariant, `${number}px`> = {
+  narrow: '280px',
+  wide: '340px',
+};
+
+//header + offsetTop + 1px border or offsetTop
+const getMainOffset = (withHeader: boolean, offsetTop: number) =>
+  withHeader ? HEADER_HEIGHT + 1 + offsetTop + 'px' : offsetTop + 'px';
 
 export const getLayoutMaxWidthStyles = ({
   variant,
@@ -12,6 +22,7 @@ export const getLayoutMaxWidthStyles = ({
   if (variant === 'fullscreen') {
     return css({
       maxWidth: '100%',
+      width: '100%',
     });
   }
 
@@ -20,28 +31,122 @@ export const getLayoutMaxWidthStyles = ({
     boxShadow: withBoxShadow
       ? '0px 6px 16px -2px rgba(25, 37, 50, 0.1), 0px 3px 6px -3px rgba(25, 37, 50, 0.15)'
       : 'unset',
-    borderRadius: `10px 10px 0 0`,
-    margin: `0 ${tokens.spacingM}`,
+    borderRadius: '10px 10px 0 0',
+    margin: `0 auto`,
+    width: `calc(100% - ${tokens.spacingM} * 2)`, // 100% - desired space to the browser border
+  });
+};
+
+const getContentContainerGridTemplateColumns = ({
+  variant,
+  withLeftSidebar,
+  leftSidebarVariant,
+  withRightSidebar,
+  rightSidebarVariant,
+}: {
+  variant: LayoutProps['variant'];
+  withLeftSidebar?: boolean;
+  leftSidebarVariant?: LayoutSidebarVariant;
+  withRightSidebar?: boolean;
+  rightSidebarVariant?: LayoutSidebarVariant;
+}) => {
+  let gridTemplateColumns = 'auto';
+
+  if (withLeftSidebar) {
+    gridTemplateColumns = `${SIDEBAR_WIDTHS[leftSidebarVariant]} auto`;
+  }
+
+  if (withRightSidebar) {
+    gridTemplateColumns = `auto ${SIDEBAR_WIDTHS[rightSidebarVariant]}`;
+  }
+
+  if (variant !== 'narrow' && withLeftSidebar && withRightSidebar) {
+    gridTemplateColumns = `${SIDEBAR_WIDTHS[leftSidebarVariant]} auto ${SIDEBAR_WIDTHS[rightSidebarVariant]}`;
+  }
+
+  return css({
+    gridTemplateColumns: gridTemplateColumns,
   });
 };
 
 export const getLayoutStyles = ({
   variant,
   withBoxShadow,
+  withLeftSidebar,
+  leftSidebarVariant,
+  withRightSidebar,
+  rightSidebarVariant,
+  offsetTop,
 }: {
   variant: LayoutProps['variant'];
   withBoxShadow?: boolean;
+  withLeftSidebar?: boolean;
+  leftSidebarVariant?: LayoutSidebarVariant;
+  withRightSidebar?: boolean;
+  rightSidebarVariant?: LayoutSidebarVariant;
+  offsetTop: number;
 }) => ({
-  root: css({
+  layoutMainContainer: css(
+    getLayoutMaxWidthStyles({ variant, withBoxShadow }),
+    {
+      backgroundColor: tokens.colorWhite,
+      minHeight: `calc(100vh - ${offsetTop}px)`,
+    },
+  ),
+  layoutContentContainer: css(
+    getContentContainerGridTemplateColumns({
+      variant,
+      withLeftSidebar,
+      leftSidebarVariant,
+      withRightSidebar,
+      rightSidebarVariant,
+    }),
+    {
+      width: '100%',
+      display: 'grid',
+    },
+  ),
+});
+
+export const getLayoutBodyStyles = (
+  withHeader: boolean,
+  offsetTop: number,
+) => ({
+  layoutBodyContainer: css({
     width: '100%',
-    minHeight: '100%',
+    padding: `${tokens.spacingL} ${tokens.spacingL} 0`,
+    overflowY: 'auto',
+    height: `calc(100vh - ${getMainOffset(withHeader, offsetTop)})`,
   }),
-  mainContainer: css(getLayoutMaxWidthStyles({ variant, withBoxShadow }), {
-    width: '100%',
-    backgroundColor: tokens.colorWhite,
+  layoutBodyInner: css({
+    maxWidth: '900px',
+    margin: '0 auto',
+  }),
+});
+
+export const getLayoutSidebarStyles = (
+  withHeader: boolean,
+  offsetTop: number,
+) => ({
+  layoutSidebar: css({
+    padding: `${tokens.spacingL} ${tokens.spacingS} 0`,
+    overflowY: 'auto',
+    height: `calc(100vh - ${getMainOffset(withHeader, offsetTop)})`,
+    '&:first-child': {
+      borderRight: `1px solid ${tokens.gray200}`,
+    },
+    '&:last-child': {
+      borderLeft: `1px solid ${tokens.gray200}`,
+    },
   }),
-  contentContainer: css({
+});
+
+export const getLayoutHeaderStyles = (variant: LayoutProps['variant']) => ({
+  layoutHeader: css({
+    borderBottom: `1px solid ${tokens.gray200}`,
+    padding: `0 ${tokens.spacingL}`,
     width: '100%',
-    minHeight: '200px',
+    maxWidth: variant === 'fullscreen' ? '100%' : '1920px',
   }),
+  layoutHeaderInner: css({ width: '100%' }),
 });