From 1277f4b7cfa50fb2e941a6bee3fcff93cf8e390d Mon Sep 17 00:00:00 2001
From: Sabine Holler <sabine@bitcrowd.net>
Date: Tue, 16 Jan 2024 15:24:44 +0100
Subject: [PATCH] Review feedback, use grid-areas.

---
 .../organisms/page-header/PageHeader.js       |  4 +-
 .../organisms/page-header/_index.scss         | 87 +++++++------------
 .../page-header/page-header.stories.js        |  6 +-
 3 files changed, 37 insertions(+), 60 deletions(-)

diff --git a/scss/bitstyles/organisms/page-header/PageHeader.js b/scss/bitstyles/organisms/page-header/PageHeader.js
index 937a5009e..b495500f4 100644
--- a/scss/bitstyles/organisms/page-header/PageHeader.js
+++ b/scss/bitstyles/organisms/page-header/PageHeader.js
@@ -26,10 +26,10 @@ const PageHeader = ({
   ];
 
   contentPositions.forEach((item) => {
-    if (item) {
+    if (item.content) {
       const contentElement = document.createElement('div');
       contentElement.classList.add(`o-page-header__${item.position}`);
-      if (item.content) contentElement.appendChild(item.content);
+      contentElement.appendChild(item.content);
       content.appendChild(contentElement);
     }
   });
diff --git a/scss/bitstyles/organisms/page-header/_index.scss b/scss/bitstyles/organisms/page-header/_index.scss
index 9f4ab90c4..b109ed81b 100644
--- a/scss/bitstyles/organisms/page-header/_index.scss
+++ b/scss/bitstyles/organisms/page-header/_index.scss
@@ -5,62 +5,39 @@
 #{classname.get($classname-items: 'page-header', $layer: 'organism')} {
   padding-top: var(design-token.get('size', 'm'));
   background-color: var(design-token.get('color', 'grayscale', 'light-3'));
-}
-
-.o-page-header__content {
-  @include media-query.get('m') {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-.o-page-header__top-left {
-  @include media-query.get('m') {
-    grid-column: 1;
-    grid-row: 1;
-  }
-}
-
-.o-page-header__top-right {
-  display: flex;
-
-  @include media-query.get('m') {
-    grid-column: 2;
-    grid-row: 1;
-    justify-content: flex-end;
-  }
-}
-
-.o-page-header__center-left {
-  @include media-query.get('m') {
-    grid-column: 1;
-    grid-row: 2;
-  }
-}
-
-.o-page-header__center-right {
-  display: flex;
-
-  @include media-query.get('m') {
-    grid-column: 2;
-    grid-row: 2;
-    justify-content: flex-end;
-  }
-}
-
-.o-page-header__bottom-left {
-  @include media-query.get('m') {
-    grid-column: 1;
-    grid-row: 3;
-  }
-}
-
-.o-page-header__bottom-right {
-  display: flex;
 
   @include media-query.get('m') {
-    grid-column: 2;
-    grid-row: 3;
-    justify-content: flex-end;
+    &__content {
+      display: grid;
+      grid-template-areas:
+        'top-left top-right'
+        'center-left center-right'
+        'bottom-left bottom-right';
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    &__top-left {
+      grid-area: top-left;
+    }
+    &__top-right {
+      grid-area: top-right;
+      display: flex;
+      justify-content: flex-end;
+    }
+    &__center-left {
+      grid-area: center-left;
+    }
+    &__center-right {
+      grid-area: center-right;
+      display: flex;
+      justify-content: flex-end;
+    }
+    &__bottom-left {
+      grid-area: bottom-left;
+    }
+    &__bottom-right {
+      grid-area: bottom-right;
+      display: flex;
+      justify-content: flex-end;
+    }
   }
 }
diff --git a/scss/bitstyles/organisms/page-header/page-header.stories.js b/scss/bitstyles/organisms/page-header/page-header.stories.js
index 0f26006d6..029d84296 100644
--- a/scss/bitstyles/organisms/page-header/page-header.stories.js
+++ b/scss/bitstyles/organisms/page-header/page-header.stories.js
@@ -14,13 +14,13 @@ export default {
       description: 'The center left of the header',
     },
     centerRight: {
-      description: 'The top left area of the header',
+      description: 'The center right area of the header',
     },
     bottomLeft: {
-      description: 'The top left area of the header',
+      description: 'The bottom left area of the header',
     },
     bottomRight: {
-      description: 'The top left area of the header',
+      description: 'The bottom right area of the header',
     },
   },
 };