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

Co-authored-by: Alizé Debray <[email protected]>

.changeset/gold-chairs-walk.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-styles': patch
+---
+
+Added breakpoint specific utility classes to set width to `25%`, `50%`, `75%`, `100%`, or `auto`.

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

@@ -44,3 +44,18 @@ 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 width,
+for example when the button is displayed on mobile and stacked vertically with others.
+
+To achieve that, you can use classes in the format:
+- `.w-{size}` for the xs breakpoint,
+- `.w-{breakpoint}-{size}` for breakpoints from sm to xxl.
+
+For example, a button with classes `w-100 w-lg-auto` will use all available space only when the viewport size is smaller than `lg`.
+
+To learn more about breakpoints, see the <a href="/?path=/docs/foundations-layout-breakpoints--docs">Breakpoints documentation</a>.
+
+<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-{breakpoint}-{size}` 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) {
+    @if $breakpoint != 'xs' {
+      @each $prop, $abbrev in (width: w) {
+        @each $size, $length in spacing.$sizes {
+          .#{$abbrev}-#{$breakpoint}-#{$size} {
+            #{$prop}: $length !important;
+          }
+        }
+      }
+    }
+  }
+}
+
 // Generate responsive spacing utility classes, a lot of them
 $cache: ();