feat(styles): Add width-breakpoints-sizes utility classes

.changeset/gold-chairs-walk.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-styles': patch
+---
+
+Added `w-breakpoints-sizes` utility classes.

packages/documentation/src/stories/components/button/button.docs.mdx

@@ -44,3 +44,12 @@ Besides the usual and the accent button variations, there are also contextual bu
 <p className="alert alert-warning">These are only allowed for intranet applications!</p>
 
 <Canvas of={ButtonStories.ContextualColors} />
+
+### Full-width
+
+In some situation, it is desirable to display a button using the full available space width,
+for example when the button is displayed on mobile and stacked vertically with others.
+
+To achieve that, you can use `.w-breakpoint-sizes`. e.g. `.w-sm-100` to use the full available space from `sm` viewport size.
+
+<Canvas of={ButtonStories.FullWidth} />

packages/documentation/src/stories/components/button/button.stories.ts

@@ -222,7 +222,7 @@ const Template = {
       `;
     } else {
       const icon = html`
-        <post-icon aria-hidden="true" name=${args.icon}></post-icon>
+        <post-icon aria-hidden="true" name="${args.icon}"></post-icon>
       `;
       const iconOnlyContent = html`
         <span class="visually-hidden">${args.text}</span>
@@ -246,13 +246,15 @@ const Template = {
 };
 
 function createProps(args: Args, isAnimated: boolean) {
+  const additionalClasses = args.additionalClasses ?? [];
   return {
     class: [
       'btn',
       args.variant,
       args.size,
       isAnimated && 'btn-animated',
       args.iconOnly && 'btn-icon',
+      ...additionalClasses,
     ]
       .filter(c => c && c !== 'null')
       .join(' '),
@@ -326,3 +328,11 @@ export const ContextualColors: Story = {
     variants: ['btn-success', 'btn-info', 'btn-warning', 'btn-danger'],
   },
 };
+
+export const FullWidth: Story = {
+  ...VariantsTemplate,
+  args: {
+    variants: ['btn-primary'],
+    additionalClasses: ['w-sm-100', 'w-md-auto'],
+  },
+};

packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx

@@ -25,13 +25,17 @@ Bootstrap offers sizing classes with the suffixes bellow. They allow you to set
 > - `*-75`
 > - `*-100`
 
-#### Example
-
 <Canvas of={SizingStories.SizesPercent} />
 <div className="hide-col-default">
   <Controls of={SizingStories.SizesPercent} />
 </div>
 
+### Relative to breakpoints
+
+For width, we offer additionally `w-breakpoints-*` classes (e.g. `w-md-100`) so that you can size only for some specific breakpoints.
+
+See <a href="/?path=/docs/components-button--docs#full-width">Full-width button</a> for a practical example.
+
 ### Post-Sizes
 
 Post sizes can be used as suffixes in the same way. To find out which size name to use, see the "Size name in classes" column in the reference table above or use the "Example Post-Sizes" below.
@@ -54,8 +58,6 @@ Post sizes can be used as suffixes in the same way. To find out which size name
     .join('\n')}
 ></Source>
 
-#### Example
-
 <Canvas of={SizingStories.Sizes} />
 <div className="hide-col-default">
   <Controls of={SizingStories.Sizes} />

packages/styles/src/components/sizing.scss

@@ -55,6 +55,21 @@
   }
 }
 
+// Post breakpoints width - e.g. w-sm-100
+@each $breakpoint in map-keys(breakpoints.$grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: if($breakpoint == 'xs', '', '-#{$breakpoint}');
+
+    @each $prop, $abbrev in (width: w) {
+      @each $size, $length in spacing.$sizes {
+        .#{$abbrev}#{$infix}-#{$size} {
+          #{$prop}: $length !important;
+        }
+      }
+    }
+  }
+}
+
 // Generate responsive spacing utility classes, a lot of them
 $cache: ();