✨ feat: add basic Header component + scss modules setup

Author: switchnollie

.eslintrc.js

@@ -1,9 +1,11 @@
 module.exports = {
+  root: true,
   extends: [
     "@porscheofficial/eslint-config-porschedigital-react",
     "plugin:@next/next/core-web-vitals",
   ],
   parserOptions: {
+    tsconfigRootDir: __dirname,
     project: "./tsconfig.json",
   },
   rules: {

.vscode/settings.json

@@ -0,0 +1,21 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "eslint.packageManager": "yarn",
+  "eslint.options": {
+    "extensions": [".js", ".jsx", ".html", ".ts", ".tsx"]
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "html"
+  ],
+  "[typescript]": {
+    "editor.formatOnSave": false
+  },
+  "[typescriptreact]": {
+    "editor.formatOnSave": false
+  }
+}

package.json

@@ -17,10 +17,12 @@
     "test:ci": "yarn prettier:ci && yarn tsc --noEmit --noEmitHelpers && yarn lint:ci"
   },
   "dependencies": {
-    "@porsche-design-system/components-react": "3.0.0-rc.2",
+    "@porsche-design-system/components-js": "^3.0.0",
+    "@porsche-design-system/components-react": "^3.0.0",
     "@types/node": "20.1.2",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
+    "classnames": "^2.3.2",
     "next": "13.4.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -35,6 +37,7 @@
     "@porscheofficial/prettier-config-porschedigital": "3.0.1",
     "@types/mdx": "2.0.5",
     "eslint": "8.40.0",
-    "prettier": "2.8.8"
+    "prettier": "2.8.8",
+    "typescript-plugin-css-modules": "^5.0.1"
   }
 }

src/components/02_molecules/header/Header.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable react/require-default-props */
+import c from "classnames";
+import { Children } from "react";
+import s from "./header.module.scss";
+import { HeaderLogo } from "./HeaderLogo";
+
+export interface HeaderProps {
+  logoSrc?: string;
+  logoAlt?: string;
+  logoHref?: string;
+  logo?: JSX.Element;
+  children: React.ReactNode;
+}
+
+export const Header = ({
+  logoSrc,
+  logoAlt,
+  logoHref,
+  logo,
+  children,
+}: HeaderProps): JSX.Element => {
+  let logoEl: JSX.Element;
+  const logoElDefault = <HeaderLogo src={logoSrc} alt={logoAlt} />;
+  if (logo) {
+    logoEl = logo;
+  } else if (logoHref) {
+    logoEl = <a href={logoHref}>{logoElDefault}</a>;
+  } else {
+    logoEl = logoElDefault;
+  }
+
+  const withSplitLayout = Children.count(children) > 0;
+
+  return (
+    <header
+      className={c(s["header-container"], {
+        [s["with-split-layout"]]: withSplitLayout,
+      })}>
+      {logoEl}
+      {children && (
+        <div className={s["secondary-header-content"]}>{children}</div>
+      )}
+    </header>
+  );
+};

src/components/02_molecules/header/HeaderLogo.tsx

@@ -0,0 +1,12 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable @next/next/no-img-element */
+import s from "./header.module.scss";
+
+export interface HeaderLogoProps {
+  src?: string;
+  alt?: string;
+}
+
+export const HeaderLogo = ({ src, alt }: HeaderLogoProps): JSX.Element => (
+  <img className={s["header-logo"]} src={src} alt={alt} />
+);

src/components/02_molecules/header/header.module.scss

@@ -0,0 +1,70 @@
+@use "@porsche-design-system/components-js/styles" as *;
+
+.header-container {
+  @mixin centered-layout-header {
+    & > * {
+      grid-column: $pds-grid-wide-column-start / $pds-grid-wide-column-end;
+    }
+  }
+  @mixin split-layout-header {
+    & > *:first-of-type {
+      grid-column: $pds-grid-wide-column-start / span 11;
+    }
+
+    & > *:nth-child(2) {
+      grid-column: span 5 / $pds-grid-wide-column-end;
+      justify-self: end;
+    }
+  }
+
+  @include pds-grid;
+  align-items: center;
+  background: $pds-theme-dark-background-base;
+  z-index: 99;
+  position: relative;
+  height: 4.375rem;
+
+  @include centered-layout-header;
+
+  & > * {
+    grid-row: 1;
+  }
+
+  &.with-split-layout {
+    @include split-layout-header;
+  }
+
+  @include pds-media-query-min("xl") {
+    height: 5rem;
+  }
+}
+
+.header-logo {
+  display: block;
+  width: auto;
+  height: 1rem;
+  &.as-link {
+    cursor: pointer;
+  }
+
+  @include pds-media-query-min("s") {
+    height: 1.14rem;
+  }
+
+  @include pds-media-query-min("m") {
+    height: 1.4875rem;
+  }
+
+  @include pds-media-query-min("l") {
+    height: 1.7rem;
+  }
+}
+
+.secondary-header-content {
+  display: flex;
+  gap: 1.5rem;
+
+  @include pds-media-query-min("s") {
+    gap: 3rem;
+  }
+}

src/types.scss.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.scss" {
+  const classes: { [key: string]: string };
+  export default classes;
+}

tsconfig.json

@@ -15,6 +15,7 @@
     "jsx": "preserve",
     "incremental": true,
     "plugins": [
+      { "name": "typescript-plugin-css-modules" },
       {
         "name": "next"
       }