From 0f18a50866f26a131145ef9eb3adb1430a3ade16 Mon Sep 17 00:00:00 2001 From: Sabine Holler Date: Tue, 16 Jan 2024 16:59:48 +0100 Subject: [PATCH] Add tests settings file and fixtures for page header component --- CHANGELOG.md | 2 ++ .../organisms/page-header/_index.scss | 19 ++++++---- .../organisms/page-header/_settings.scss | 6 ++++ test/scss/fixtures/bitstyles-overrides.css | 35 +++++++++++++++++++ test/scss/fixtures/bitstyles.css | 35 +++++++++++++++++++ test/scss/test-use-all.scss | 1 + test/scss/test-use-each.scss | 4 ++- test/scss/test-use-layers.scss | 3 +- 8 files changed, 97 insertions(+), 8 deletions(-) create mode 100644 scss/bitstyles/organisms/page-header/_settings.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 6561757f8..829efdc3d 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/scss/bitstyles/organisms/page-header/_index.scss b/scss/bitstyles/organisms/page-header/_index.scss index b109ed81b..02470bfca 100644 --- a/scss/bitstyles/organisms/page-header/_index.scss +++ b/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; } } diff --git a/scss/bitstyles/organisms/page-header/_settings.scss b/scss/bitstyles/organisms/page-header/_settings.scss new file mode 100644 index 000000000..d0b694dc7 --- /dev/null +++ b/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; diff --git a/test/scss/fixtures/bitstyles-overrides.css b/test/scss/fixtures/bitstyles-overrides.css index 64aec8426..bf1752a34 100644 --- a/test/scss/fixtures/bitstyles-overrides.css +++ b/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; } diff --git a/test/scss/fixtures/bitstyles.css b/test/scss/fixtures/bitstyles.css index 123863e5f..fa652f110 100644 --- a/test/scss/fixtures/bitstyles.css +++ b/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; } diff --git a/test/scss/test-use-all.scss b/test/scss/test-use-all.scss index 002b139e2..1f072feed 100644 --- a/test/scss/test-use-all.scss +++ b/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: ( diff --git a/test/scss/test-use-each.scss b/test/scss/test-use-each.scss index 3950b6aac..f0bfd7389 100644 --- a/test/scss/test-use-each.scss +++ b/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 //////////////////////////////////// diff --git a/test/scss/test-use-layers.scss b/test/scss/test-use-layers.scss index b5c5466e1..5e279a1a7 100644 --- a/test/scss/test-use-layers.scss +++ b/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: (