From 37a1b7c6160a1b23c648a6a28cd37becaa1c323b Mon Sep 17 00:00:00 2001 From: leagrdv Date: Wed, 8 Jan 2025 11:36:06 +0100 Subject: [PATCH 1/2] chore(styles, documentation): add only breakpoint mixin and update documentation --- .changeset/wise-hornets-happen.md | 6 +++++ .../breakpoints-between.sample.scss | 2 +- .../breakpoints-max-width.sample.scss | 2 +- .../breakpoints-min-width.sample.scss | 2 +- .../breakpoints-single.sample.scss | 2 +- .../styles/src/functions/_breakpoint.scss | 9 ++++++++ packages/styles/src/mixins/_media.scss | 22 +++++++++++++++++++ 7 files changed, 41 insertions(+), 4 deletions(-) create mode 100644 .changeset/wise-hornets-happen.md diff --git a/.changeset/wise-hornets-happen.md b/.changeset/wise-hornets-happen.md new file mode 100644 index 0000000000..432257b2c3 --- /dev/null +++ b/.changeset/wise-hornets-happen.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-documentation': patch +'@swisspost/design-system-styles': patch +--- + +Added breakpoint mixin "only" and updated documentation to reflect new breakpoint mixin naming. diff --git a/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-between.sample.scss b/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-between.sample.scss index f1d8a8c71a..1c9d6b51e3 100644 --- a/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-between.sample.scss +++ b/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-between.sample.scss @@ -1,6 +1,6 @@ @use '@swisspost/design-system-styles/core' as post; -@include post.media-breakpoint-between(sm, lg) { +@include post.between(sm, lg) { .custom-class { display: block; } diff --git a/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-max-width.sample.scss b/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-max-width.sample.scss index 5db268f38a..0e69b5731a 100644 --- a/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-max-width.sample.scss +++ b/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-max-width.sample.scss @@ -1,7 +1,7 @@ @use '@swisspost/design-system-styles/core' as post; // No media query necessary for xs breakpoint as it's effectively @media (max-width: 0) { ... } -@include post.media-breakpoint-down(lg) { +@include post.max(lg) { .custom-class { display: none; } diff --git a/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-min-width.sample.scss b/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-min-width.sample.scss index 20603a62c9..fd3e4d2e1d 100644 --- a/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-min-width.sample.scss +++ b/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-min-width.sample.scss @@ -5,7 +5,7 @@ display: none; } -@include post.media-breakpoint-up(lg) { +@include post.min(lg) { .custom-class { display: block; } diff --git a/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-single.sample.scss b/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-single.sample.scss index 6cce81517c..cb5cac8fe0 100644 --- a/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-single.sample.scss +++ b/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-single.sample.scss @@ -1,6 +1,6 @@ @use '@swisspost/design-system-styles/core' as post; -@include post.media-breakpoint-only(xs) { +@include post.only(xs) { .custom-class { display: block; } diff --git a/packages/styles/src/functions/_breakpoint.scss b/packages/styles/src/functions/_breakpoint.scss index 0d409c7872..dc3a6c5860 100644 --- a/packages/styles/src/functions/_breakpoint.scss +++ b/packages/styles/src/functions/_breakpoint.scss @@ -14,3 +14,12 @@ @function infix($key) { @return if(min-width($key) == 0, '', '-#{$key}'); } + +/** +* Gets the next breakpoint key +*/ +@function next($key) { + $breakpoint-names: map-keys(breakpoints.$grid-breakpoints); + $n: index($breakpoint-names, $key); + @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); +} diff --git a/packages/styles/src/mixins/_media.scss b/packages/styles/src/mixins/_media.scss index 475321853b..3e8d497696 100644 --- a/packages/styles/src/mixins/_media.scss +++ b/packages/styles/src/mixins/_media.scss @@ -53,3 +53,25 @@ $offset: 0.01; @content; } } + +/** + Creates a breakpoint with only the given value + @param $size A key for the breakpoint to target +*/ +@mixin only($size) { + @if (meta.type-of($size) == 'string') { + $min-size: breakpoint.min-width($size); + $next: breakpoint.next($size); + $max-size: breakpoint.min-width($next); + + @if $max-size != null { + @media screen and (min-width: $min-size) and (max-width: ($max-size - $offset)) { + @content; + } + } @else if $max-size == null { + @media screen and (min-width: $min-size) { + @content; + } + } + } +} From d89652682943fcc1e9436ed6f7ef480a30ec866e Mon Sep 17 00:00:00 2001 From: leagrdv Date: Wed, 8 Jan 2025 12:13:15 +0100 Subject: [PATCH 2/2] fix lint --- packages/styles/src/functions/_breakpoint.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/styles/src/functions/_breakpoint.scss b/packages/styles/src/functions/_breakpoint.scss index dc3a6c5860..fa09d2184a 100644 --- a/packages/styles/src/functions/_breakpoint.scss +++ b/packages/styles/src/functions/_breakpoint.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:list'; @use '../variables/breakpoints'; /** @@ -19,7 +20,7 @@ * Gets the next breakpoint key */ @function next($key) { - $breakpoint-names: map-keys(breakpoints.$grid-breakpoints); - $n: index($breakpoint-names, $key); - @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); + $breakpoint-names: map.keys(breakpoints.$grid-breakpoints); + $n: list.index($breakpoint-names, $key); + @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null); }