Add tests settings file and fixtures for page header component

CHANGELOG.md

@@ -10,6 +10,8 @@
 
 - Page Header Organism, added a page header organism component and storybook docs for it.
 
+- Sidebar component updates
+
 - Badge with Label, added an example showing a text label rendered next to a badge component, to the badge docs.
 - A new layout component at `atoms/switcher`, that lays out its children in a horizontal row with consistent spacing between children. The layout switches to a vertical stack once the width of the component passes below a threshold, or the number of children goes over a limit.
 - A new layout component at `atoms/stack`, that lays out its children vertically, with consistent spacing between children.

scss/bitstyles/organisms/page-header/_index.scss

@@ -1,10 +1,11 @@
+@forward 'settings';
+@use './settings';
 @use '../../tools/media-query';
 @use '../../tools/classname';
-@use '../../tools/design-token';
 
 #{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'));
+  padding-top: settings.$padding-top;
+  background-color: settings.$background-color;
 
   @include media-query.get('m') {
     &__content {
@@ -15,28 +16,34 @@
         '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;
+      grid-area: top-right;
       justify-content: flex-end;
     }
+
     &__center-left {
       grid-area: center-left;
     }
+
     &__center-right {
-      grid-area: center-right;
       display: flex;
+      grid-area: center-right;
       justify-content: flex-end;
     }
+
     &__bottom-left {
       grid-area: bottom-left;
     }
+
     &__bottom-right {
-      grid-area: bottom-right;
       display: flex;
+      grid-area: bottom-right;
       justify-content: flex-end;
     }
   }

scss/bitstyles/organisms/page-header/_settings.scss

@@ -0,0 +1,6 @@
+@use '../../tools/design-token';
+
+$padding-top: var(design-token.get('size', 'm')) !default;
+$background-color: var(
+  design-token.get('color', 'grayscale', 'light-3')
+) !default;

test/scss/fixtures/bitstyles-overrides.css

@@ -2250,6 +2250,41 @@ table {
   --bscpn-button-border-bottom-left-radius: 0;
   margin-right: calc(var(--bscpn-button-border-width) * -1);
 }
+.bs-or-page-header {
+    background-color: var(--bscpn-color-grayscale-light-3);
+    padding-top: 10rem;
+   }
+  @media screen and (min-width: 30em) {
+    .bs-or-page-header__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));
+    }
+    .bs-or-page-header__top-left {
+      grid-area: top-left;
+    }
+    .bs-or-page-header__top-right {
+      display: flex;
+      grid-area: top-right;
+      justify-content: flex-end;
+    }
+    .bs-or-page-header__center-left {
+      grid-area: center-left;
+    }
+    .bs-or-page-header__center-right {
+      display: flex;
+      grid-area: center-right;
+      justify-content: flex-end;
+    }
+    .bs-or-page-header__bottom-left {
+      grid-area: bottom-left;
+    }
+    .bs-or-page-header__bottom-right {
+      display: flex;
+      grid-area: bottom-right;
+      justify-content: flex-end;
+    }
+  }
 .bs-aspect-ratio-10-10 {
   aspect-ratio: 1/1;
 }

test/scss/fixtures/bitstyles.css

@@ -2677,6 +2677,41 @@ table {
   --bs-button-border-bottom-left-radius: 0;
   margin-right: calc(var(--bs-button-border-width) * -1);
 }
+.o-page-header {
+  background-color: var(--bs-color-grayscale-light-3);
+  padding-top: var(--bs-size-m);
+  }
+@media screen and (min-width: 30em) {
+  .o-page-header__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));
+  }
+  .o-page-header__top-left {
+    grid-area: top-left;
+  }
+  .o-page-header__top-right {
+    display: flex;
+    grid-area: top-right;
+    justify-content: flex-end;
+  }
+  .o-page-header__center-left {
+    grid-area: center-left;
+  }
+  .o-page-header__center-right {
+    display: flex;
+    grid-area: center-right;
+    justify-content: flex-end;
+  }
+  .o-page-header__bottom-left {
+    grid-area: bottom-left;
+  }
+  .o-page-header__bottom-right {
+    display: flex;
+    grid-area: bottom-right;
+    justify-content: flex-end;
+  }
+}
 .u-aspect-ratio-1-1 {
   aspect-ratio: 1/1;
 }

test/scss/test-use-all.scss

@@ -175,6 +175,7 @@
   $sidebar-small-location: right,
   $table-color-th: #f00,
   $joined-ui-border-radius: 10rem,
+  $page-header-padding-top: 10rem,
   // utilities
   $aspect-ratio-values:
     (

test/scss/test-use-each.scss

@@ -286,7 +286,9 @@
 @use '../../scss/bitstyles/organisms/joined-ui' with (
   $border-radius: 10rem
 );
-
+@use '../../scss/bitstyles/organisms/page-header' with (
+  $padding-top: 10rem
+);
 //
 // Utilities ////////////////////////////////////
 

test/scss/test-use-layers.scss

@@ -189,7 +189,8 @@
   $sidebar-large-width: 1rem,
   $sidebar-small-location: right,
   $table-color-th: #f00,
-  $joined-ui-border-radius: 10rem
+  $joined-ui-border-radius: 10rem,
+  $page-header-padding-top: 10rem
 );
 @use '../../scss/bitstyles/utilities' with (
   $aspect-ratio-values: (