feat(internet-header): expose CSS custom properties

swisspost · Jul 1, 2024 · a03c6be · a03c6be
1 parent 10b906c
commit a03c6be
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 12 deletions.
diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json
@@ -27,7 +27,7 @@
     "loader/"
   ],
   "scripts": {
-    "dev": "stencil build --serve --port 9310 --watch --docs-readme --dev",
+    "dev": "stencil build --serve --port 9310 --watch --docs-readme --dev --config stencil.config.dev.ts",
     "start": "stencil build --watch --docs-readme",
     "build": "stencil build --docs-readme",
     "clean": "rimraf www dist loader",

diff --git a/packages/internet-header/src/components/post-internet-header/post-internet-header.scss b/packages/internet-header/src/components/post-internet-header/post-internet-header.scss
@@ -2,6 +2,7 @@
 @use '@swisspost/design-system-styles/placeholders/color' as color-ph;
 @use '../../utils/utils.scss';
 @use '../../utils/mixins.scss';
+@use '../../utils/variables.scss';
 @use './logo-animation/logo-animation.scss';
 
 :host {
@@ -13,18 +14,10 @@
   font-weight: 300;
   z-index: var(--header-z-index, 10);
 
-  --header-height: 3.5rem; // 56px
-  --meta-header-height: 0px; // Not visible on mobile
   --language-dropdown-margin-top: 0px;
 
-  @include mixins.min(lg) {
-    --meta-header-height: 3rem; // 48px
-    --header-height: 4rem; // 64px
-  }
-
-  @include mixins.min(xl) {
-    --header-height: 4.5rem; // 72px
-  }
+  @include mixins.set-custom-property(--meta-header-height, variables.$meta-header-height);
+  @include mixins.set-custom-property(--header-height, variables.$header-height);
 }
 
 // Set height to 0 if meta is never visible

diff --git a/packages/internet-header/src/components/post-internet-header/post-internet-header.tsx b/packages/internet-header/src/components/post-internet-header/post-internet-header.tsx
@@ -223,6 +223,12 @@ export class PostInternetHeader {
       this.host.classList.add('header-loaded');
       if (this.meta && this.metaNav) {
         this.updateLogoAnimation = registerLogoAnimationObserver(this.metaNav, this.host);
+      } else {
+        // Set height to 0 if meta is never visible and global variables are defined
+        const rootStyles = window.getComputedStyle(document.documentElement);
+        if (rootStyles.getPropertyValue('--post-meta-header-height') !== '') {
+          document.documentElement.style.setProperty('--post-meta-header-height', '0px');
+        }
       }
     });
 

diff --git a/packages/internet-header/src/root.scss b/packages/internet-header/src/root.scss
@@ -0,0 +1,7 @@
+@use 'utils/mixins';
+@use 'utils/variables';
+
+:root {
+  @include mixins.set-custom-property(--post-meta-header-height, variables.$meta-header-height);
+  @include mixins.set-custom-property(--post-header-height, variables.$header-height);
+}
diff --git a/packages/internet-header/src/utils/mixins.scss b/packages/internet-header/src/utils/mixins.scss
@@ -1,4 +1,6 @@
 @use "sass:map";
+@use 'sass:selector';
+@use 'sass:string';
 @use "@swisspost/design-system-styles/variables/breakpoints";
 
 @mixin min($point) {
@@ -45,3 +47,23 @@
     padding-left: 40px;
   }
 }
+
+@mixin set-custom-property($var, $sizes) {
+  $is-root: selector.is-superselector(&, ':root');
+  $previous-size: null;
+  @each $breakpoint, $size in $sizes {
+    $value: if($is-root, $size, var(#{string.insert($var, "post-", 3)}, $size));
+
+    @if($size == $previous-size) {
+      // no styles
+    } @else if($breakpoint == xs) {
+      #{$var}: $value;
+    } @else {
+      @include min($breakpoint) {
+        #{$var}: $value;
+      }
+    }
+
+    $previous-size: $size;
+  }
+}
diff --git a/packages/internet-header/src/utils/variables.scss b/packages/internet-header/src/utils/variables.scss
@@ -0,0 +1,19 @@
+$meta-header-height: (
+  xs: 0px,
+  sm: 0px,
+  rg: 0px,
+  md: 0px,
+  lg: 3rem,
+  xl: 3rem,
+  xxl: 3rem,
+);
+
+$header-height: (
+  xs: 3.5rem,
+  sm: 3.5rem,
+  rg: 3.5rem,
+  md: 3.5rem,
+  lg: 4rem,
+  xl: 4.5rem,
+  xxl: 4.5rem,
+);
diff --git a/packages/internet-header/stencil.config.dev.ts b/packages/internet-header/stencil.config.dev.ts
@@ -0,0 +1,13 @@
+import { Config } from '@stencil/core';
+import { sass } from '@stencil/sass';
+import { config as prodConfig } from './stencil.config';
+
+export const config: Config = {
+  ...prodConfig,
+  globalStyle: 'src/styles.scss',
+  plugins: [
+    sass({
+      includePaths: ['node_modules'],
+    }),
+  ],
+};
diff --git a/packages/internet-header/stencil.config.ts b/packages/internet-header/stencil.config.ts
@@ -4,7 +4,7 @@ import scss from 'rollup-plugin-scss';
 
 export const config: Config = {
   namespace: 'swisspost-internet-header',
-  globalStyle: 'src/styles.scss',
+  globalStyle: 'src/root.scss',
   buildEs5: 'prod',
   sourceMap: false,
   bundles: [