feat(utilities): rename viewport-based sizing utility classes

.changeset/upset-hats-care.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Aligned viewport-based utility classes with named percentage sizes.

packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts

@@ -6,7 +6,7 @@ describe('Sizing', () => {
     cy.percySnapshot('Sizing', { widths: [320, 1440] });
   });
 
-  // Percentage sizing classes relative to viewport [e.g. vh-25, vw-33, min-vh-50, max-vw-100, etc.]
+  //sizing classes relative to viewport [e.g. vh-quarter, vw-third, min-vh-half, max-vw-full, etc.]
   it('Sizing Viewport Percentages', () => {
     cy.visit('/iframe.html?id=snapshots--percentage-vp-sizing');
     cy.get('.snapshot', { timeout: 30000 }).should('be.visible');

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

@@ -54,9 +54,10 @@ See <a href="/?path=/docs/eb78afcb-ce92-4990-94b6-6536d5ec6af4--docs#full-width"
 
 ### Viewport Based
 
-There is the possibility to set the width and height as a percentage relative to the viewport. Available percentages: `25`, `33`, `50`, `66`, `75`, `100`.
+You can set width and height relative to the viewport.
+Available suffixes: `quarter`, `third`, `half`, `two-thirds`, `three-quarters`, `full`.
 
-> - `min-vh-100`
-> - `min-vw-100`
-> - `vh-100`
-> - `vw-100`
+> - `vw-quarter`, `vw-third`, `vw-half`, `vw-two-thirds`, `vw-three-quarters`, `vw-full`
+> - `vh-quarter`, `vh-third`, `vh-half`, `vh-two-thirds`, `vh-three-quarters`, `vh-full`
+> - `min-vw-{suffix}`, `min-vh-{suffix}`
+> - `max-vw-{suffix}`, `max-vh-{suffix}`

packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts

@@ -26,21 +26,6 @@ const samples = [
   { w: 'full', h: 'half', maxW: 'full', minW: 'third', maxH: 'auto', minH: 'auto' },
 ];
 
-const vpSamples = [
-  { w: '33', h: '100', maxvW: '33', minvW: '100', maxvH: '50', minvH: '66' },
-  { w: '50', h: '50', maxvW: '25', minvW: '50', maxvH: '100', minvH: '25' },
-  { w: '50', h: '25', maxvW: '50', minvW: '25', maxvH: '66', minvH: '33' },
-  {
-    w: '75',
-    h: '25',
-    maxvW: '75',
-    minvW: '25',
-    maxvH: '50',
-    minvH: '25',
-  },
-  { w: '100', h: '50', maxvW: '100', minvW: '33', maxvH: 'auto', minvH: 'auto' },
-];
-
 const pxSamples = [
   { w: '12', h: '16', maxW: '32', minW: '12', maxH: '48', minH: '16' },
   { w: '24', h: '32', maxW: '32', minW: '12', maxH: '40', minH: '24' },
@@ -102,21 +87,19 @@ export const PercentageSizing: StoryObj = {
 export const PercentageVpSizing: StoryObj = {
   render() {
     return schemes(
-      () => {
-        return html`
+      () => html`
+        <div class="sizing-example">
           <div class="grid">
-            ${vpSamples.map(sample => {
-              return html`
-                <div class="grid-item">
-                  <div class="sizing-example snapshot">
-                    <div class="${generateClassNames(sample, true)}"></div>
-                  </div>
+            ${samples.map(
+              sample => html`
+                <div class="grid-item snapshot">
+                  <div class="${generateClassNames(sample, true)}"></div>
                 </div>
-              `;
-            })}
+              `,
+            )}
           </div>
-        `;
-      },
+        </div>
+      `,
       { filter: scheme => scheme === COLOR_SCHEMES.light },
     );
   },

packages/styles/src/utilities/_variables.scss

@@ -30,26 +30,6 @@ $position-values: (
   100: 100%,
 );
 
-$vw-values: (
-  0: 0,
-  25: 25vw,
-  33: 25vw,
-  50: 50vw,
-  66: 66vw,
-  75: 75vw,
-  100: 100vw,
-);
-
-$vh-values: (
-  0: 0,
-  25: 25vh,
-  33: 33vh,
-  50: 50vh,
-  66: 66vh,
-  75: 75vh,
-  100: 100vh,
-);
-
 $utilities: (
   'border': (
     property: border,
@@ -214,37 +194,42 @@ $utilities: (
     responsive: true,
     property: width,
     class: vw,
-    values: $vw-values,
+    values: $post-viewport-width-sizes,
   ),
+
   'viewport-height': (
     responsive: true,
     property: height,
     class: vh,
-    values: $vh-values,
+    values: $post-viewport-height-sizes,
   ),
+
   'min-viewport-width': (
     responsive: true,
     property: min-width,
     class: min-vw,
-    values: $vw-values,
+    values: $post-viewport-width-sizes,
   ),
+
   'min-viewport-height': (
     responsive: true,
     property: min-height,
     class: min-vh,
-    values: $vh-values,
+    values: $post-viewport-height-sizes,
   ),
+
   'max-viewport-width': (
     responsive: true,
     property: max-width,
     class: max-vw,
-    values: $vw-values,
+    values: $post-viewport-width-sizes,
   ),
+
   'max-viewport-height': (
     responsive: true,
     property: max-height,
     class: max-vh,
-    values: $vh-values,
+    values: $post-viewport-height-sizes,
   ),
   'align': (
     property: vertical-align,

packages/styles/src/variables/_sizing.scss

@@ -15,3 +15,29 @@ $post-percentage-sizes: map.merge(
   ),
   $post-percentage-sizes
 );
+
+$post-viewport-height-sizes: () !default;
+$post-viewport-height-sizes: map.merge(
+  (
+    'quarter': 25vh,
+    'third': 33vh,
+    'half': 50vh,
+    'two-thirds': 66vh,
+    'three-quarters': 75vh,
+    'full': 100vh,
+  ),
+  $post-viewport-height-sizes
+);
+
+$post-viewport-width-sizes: () !default;
+$post-viewport-width-sizes: map.merge(
+  (
+    'quarter': 25vw,
+    'third': 33vw,
+    'half': 50vw,
+    'two-thirds': 66vw,
+    'three-quarters': 75vw,
+    'full': 100vw,
+  ),
+  $post-viewport-width-sizes
+);