Skip to content

Commit 8e70354

Browse files
committed
✨ feat: add basic Header component + scss modules setup
1 parent 00103ab commit 8e70354

File tree

9 files changed

+1368
-34
lines changed

9 files changed

+1368
-34
lines changed

.eslintrc.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
module.exports = {
2+
root: true,
23
extends: [
34
"@porscheofficial/eslint-config-porschedigital-react",
45
"plugin:@next/next/core-web-vitals",
56
],
67
parserOptions: {
8+
tsconfigRootDir: __dirname,
79
project: "./tsconfig.json",
810
},
911
rules: {

.vscode/settings.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"typescript.tsdk": "node_modules/typescript/lib",
3+
"typescript.enablePromptUseWorkspaceTsdk": true,
4+
"eslint.packageManager": "yarn",
5+
"eslint.options": {
6+
"extensions": [".js", ".jsx", ".html", ".ts", ".tsx"]
7+
},
8+
"eslint.validate": [
9+
"javascript",
10+
"javascriptreact",
11+
"typescript",
12+
"typescriptreact",
13+
"html"
14+
],
15+
"[typescript]": {
16+
"editor.formatOnSave": false
17+
},
18+
"[typescriptreact]": {
19+
"editor.formatOnSave": false
20+
}
21+
}

package.json

+5-2
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,12 @@
1717
"test:ci": "yarn prettier:ci && yarn tsc --noEmit --noEmitHelpers && yarn lint:ci"
1818
},
1919
"dependencies": {
20-
"@porsche-design-system/components-react": "3.0.0-rc.2",
20+
"@porsche-design-system/components-js": "^3.0.0",
21+
"@porsche-design-system/components-react": "^3.0.0",
2122
"@types/node": "20.1.2",
2223
"@types/react": "18.2.6",
2324
"@types/react-dom": "18.2.4",
25+
"classnames": "^2.3.2",
2426
"next": "13.4.1",
2527
"react": "18.2.0",
2628
"react-dom": "18.2.0",
@@ -35,6 +37,7 @@
3537
"@porscheofficial/prettier-config-porschedigital": "3.0.1",
3638
"@types/mdx": "2.0.5",
3739
"eslint": "8.40.0",
38-
"prettier": "2.8.8"
40+
"prettier": "2.8.8",
41+
"typescript-plugin-css-modules": "^5.0.1"
3942
}
4043
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/* eslint-disable react/require-default-props */
2+
import c from "classnames";
3+
import { Children } from "react";
4+
import s from "./header.module.scss";
5+
import { HeaderLogo } from "./HeaderLogo";
6+
7+
export interface HeaderProps {
8+
logoSrc?: string;
9+
logoAlt?: string;
10+
logoHref?: string;
11+
logo?: JSX.Element;
12+
children: React.ReactNode;
13+
}
14+
15+
export const Header = ({
16+
logoSrc,
17+
logoAlt,
18+
logoHref,
19+
logo,
20+
children,
21+
}: HeaderProps): JSX.Element => {
22+
let logoEl: JSX.Element;
23+
const logoElDefault = <HeaderLogo src={logoSrc} alt={logoAlt} />;
24+
if (logo) {
25+
logoEl = logo;
26+
} else if (logoHref) {
27+
logoEl = <a href={logoHref}>{logoElDefault}</a>;
28+
} else {
29+
logoEl = logoElDefault;
30+
}
31+
32+
const withSplitLayout = Children.count(children) > 0;
33+
34+
return (
35+
<header
36+
className={c(s["header-container"], {
37+
[s["with-split-layout"]]: withSplitLayout,
38+
})}>
39+
{logoEl}
40+
{children && (
41+
<div className={s["secondary-header-content"]}>{children}</div>
42+
)}
43+
</header>
44+
);
45+
};
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/* eslint-disable react/require-default-props */
2+
/* eslint-disable @next/next/no-img-element */
3+
import s from "./header.module.scss";
4+
5+
export interface HeaderLogoProps {
6+
src?: string;
7+
alt?: string;
8+
}
9+
10+
export const HeaderLogo = ({ src, alt }: HeaderLogoProps): JSX.Element => (
11+
<img className={s["header-logo"]} src={src} alt={alt} />
12+
);
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
@use "@porsche-design-system/components-js/styles" as *;
2+
3+
.header-container {
4+
@mixin centered-layout-header {
5+
& > * {
6+
grid-column: $pds-grid-wide-column-start / $pds-grid-wide-column-end;
7+
}
8+
}
9+
@mixin split-layout-header {
10+
& > *:first-of-type {
11+
grid-column: $pds-grid-wide-column-start / span 11;
12+
}
13+
14+
& > *:nth-child(2) {
15+
grid-column: span 5 / $pds-grid-wide-column-end;
16+
justify-self: end;
17+
}
18+
}
19+
20+
@include pds-grid;
21+
align-items: center;
22+
background: $pds-theme-dark-background-base;
23+
z-index: 99;
24+
position: relative;
25+
height: 4.375rem;
26+
27+
@include centered-layout-header;
28+
29+
& > * {
30+
grid-row: 1;
31+
}
32+
33+
&.with-split-layout {
34+
@include split-layout-header;
35+
}
36+
37+
@include pds-media-query-min("xl") {
38+
height: 5rem;
39+
}
40+
}
41+
42+
.header-logo {
43+
display: block;
44+
width: auto;
45+
height: 1rem;
46+
&.as-link {
47+
cursor: pointer;
48+
}
49+
50+
@include pds-media-query-min("s") {
51+
height: 1.14rem;
52+
}
53+
54+
@include pds-media-query-min("m") {
55+
height: 1.4875rem;
56+
}
57+
58+
@include pds-media-query-min("l") {
59+
height: 1.7rem;
60+
}
61+
}
62+
63+
.secondary-header-content {
64+
display: flex;
65+
gap: 1.5rem;
66+
67+
@include pds-media-query-min("s") {
68+
gap: 3rem;
69+
}
70+
}

src/types.scss.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module "*.module.scss" {
2+
const classes: { [key: string]: string };
3+
export default classes;
4+
}

tsconfig.json

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"jsx": "preserve",
1616
"incremental": true,
1717
"plugins": [
18+
{ "name": "typescript-plugin-css-modules" },
1819
{
1920
"name": "next"
2021
}

0 commit comments

Comments
 (0)