feat(styles): updated sizing utility (no tokens) (#4012)

Co-authored-by: Alizé Debray <[email protected]> Co-authored-by: Oliver Schürch <[email protected]>
swisspost · Dec 13, 2024 · d7e1172 · d7e1172
1 parent fe50ee2
commit d7e1172
Show file tree

Hide file tree

Showing 22 changed files with 548 additions and 146 deletions.
diff --git a/.changeset/soft-pugs-dream.md b/.changeset/soft-pugs-dream.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor 
+---
+
+Updated the utility classes for sizing.
diff --git a/.changeset/violet-poems-attend.md b/.changeset/violet-poems-attend.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Implemented new pixel based sizes.
diff --git a/packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts b/packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts
@@ -0,0 +1,22 @@
+describe('Sizing', () => {
+  // Parent based sizing classes [e.g. .quarter, .third, .half, etc.]
+  it('Sizing Percentages', () => {
+    cy.visit('/iframe.html?id=snapshots--percentage-sizing');
+    cy.get('.snapshot', { timeout: 30000 }).should('be.visible');
+    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.]
+  it('Sizing Viewport Percentages', () => {
+    cy.visit('/iframe.html?id=snapshots--percentage-vp-sizing');
+    cy.get('.snapshot', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Sizing', { widths: [320, 1440] });
+  });
+
+  // Pixel based sizing classes [e.g. h-80, w-56, max-w-24, min-h-24, etc.]
+  it('Sizing Pixel Based', () => {
+    cy.visit('/iframe.html?id=snapshots--pixel-sizing');
+    cy.get('.snapshot', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Sizing', { widths: [320, 1440] });
+  });
+});
diff --git a/packages/documentation/src/stories/components/select-custom/select-custom-basic.sample.html b/packages/documentation/src/stories/components/select-custom/select-custom-basic.sample.html
@@ -12,7 +12,7 @@
     <span [class.visually-hidden]="selectedOption">Default custom-select</span>
     <span *ngIf="selectedOption" aria-hidden="true">{{ selectedOption.label }}</span>
   </button>
-  <div aria-labelledby="customSelectButton" class="w-100 mw-100" ngbDropdownMenu role="listbox">
+  <div aria-labelledby="customSelectButton" class="w-100 max-w-100" ngbDropdownMenu role="listbox">
     <button
       (click)="toggle.focus()"
       (focus)="selectedOption = option"

diff --git a/...ges/documentation/src/stories/components/select-custom/select-custom-floating.sample.html b/...ges/documentation/src/stories/components/select-custom/select-custom-floating.sample.html
@@ -14,7 +14,7 @@
   <label class="form-label" id="customSelectLabel">
     Floatinglabel custom-select {{ infoText }}
   </label>
-  <div aria-labelledby="customSelectLabel" class="w-100 mw-100" ngbDropdownMenu role="listbox">
+  <div aria-labelledby="customSelectLabel" class="w-100 max-w-100" ngbDropdownMenu role="listbox">
     <button
       (click)="toggle.focus()"
       (focus)="selectedOption = option"

diff --git a/packages/documentation/src/stories/components/slider/slider.stories.ts b/packages/documentation/src/stories/components/slider/slider.stories.ts
@@ -215,7 +215,7 @@ function render(args: Args, context: StoryContext) {
           <label class="form-label visually-hidden" for="${inputId}">Range controller</label>
           <input
             id="${inputId}"
-            class="form-control mw-giant"
+            class="form-control min-w-80"
             type="text"
             inputmode="decimal"
             value="${args.value}"

diff --git a/packages/documentation/src/stories/foundations/logo/logo.snapshot.stories.ts b/packages/documentation/src/stories/foundations/logo/logo.snapshot.stories.ts
@@ -23,7 +23,7 @@ export const PostLogo: Story = {
                 <p>${url ? 'Links' : 'Images'}</p>
                 <div class="row">
                   <div class="col">
-                    ${['big', 'huge', 'giant'].map(
+                    ${['32', '56', '80'].map(
                       (height, i) => html`
                         <div class="h-${height} ${i === 0 ? 'my' : 'mb'}-16">
                           ${meta.render?.({ ...context.args, url }, context)}

diff --git a/packages/documentation/src/stories/foundations/logo/logo.stories.ts b/packages/documentation/src/stories/foundations/logo/logo.stories.ts
@@ -24,7 +24,7 @@ export default meta;
 
 // DECORATORS
 function containerWithHeight(story: StoryFn, context: StoryContext) {
-  return html` <div class="h-giant">${story(context.args, context)}</div> `;
+  return html` <div class="h-80">${story(context.args, context)}</div> `;
 }
 
 // RENDERER
@@ -57,5 +57,5 @@ export const Link: Story = {
 };
 
 export const Height: Story = {
-  render: () => html` <post-logo class="h-huge">Logo of the Post</post-logo> `,
+  render: () => html` <post-logo class="h-56">Logo of the Post</post-logo> `,
 };
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
@@ -13,60 +13,49 @@ import * as SizingStories from './sizing.stories';
 
 ## Height & Width
 
-Height and width can be set using `h-*` and `w-*` prefixes, max-height and max-width can be set using prefixes `mh-*` and `mw-*` .
+Height and width can be set using our utility classes `h-{size}` and `w-{size}`, max-height and max-width can be set with `max-h-{size}` and `max-w-{size}` and min-height and min-width can be set with `min-h-{size}` and `min-w-{size}`.
 
 ### Parent Based
 
-Bootstrap offers sizing classes with the suffixes bellow. They allow you to set a height / width as a percentage of the parent element (see [Bootstrap Sizing](https://getbootstrap.com/docs/5.3/utilities/sizing/) for reference).
+The design system offers classes for percentage based sizing with the suffixes bellow. They allow you to set a height / width as a percentage of the parent element.
 
-> - `*-25`
-> - `*-50`
-> - `*-75`
-> - `*-100`
+- `*-auto`
+- `*-quarter`
+- `*-third`
+- `*-half`
+- `*-two-thirds`
+- `*-three-quarters`
+- `*-full`
 
-#### Example
+### Example
 
-<Canvas sourceState="shown" of={SizingStories.SizesPercent} />
+<Canvas sourceState="shown" of={SizingStories.PercentSizes} />
 <div className="hide-col-default">
-  <Controls of={SizingStories.SizesPercent} />
+  <Controls of={SizingStories.PercentSizes} />
 </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.
+### Pixel Based
 
-See <a href="/?path=/docs/eb78afcb-ce92-4990-94b6-6536d5ec6af4--docs#full-width">Full-width button</a> for a practical example.
+Additional pixel-based sizing classes allow precise height `h-{size}` and width `w-{size}` definitions in pixels (e.g., `w-12` for 12px width and `h-26` for 26px height).
 
-### Post-Sizes
+See all available sizes in the example bellow.
 
-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.
+### Example
 
-#### Sass variables
-
-{/* prettier-ignore */}
-<div className="banner banner-warning mb-40">
-  <h2 className="banner-heading">Sizing variables are deprecated</h2>
-  <p>The current set of the post-specific sizing variables is deprecated in favour of a new naming system that is consistent with the Design. For further information, please read the <a href="https://github.com/swisspost/design-system/discussions/588">discussion on sizing variables on GitHub</a> and have a look at the <a href="https://www.figma.com/file/ojCcgC5Zd12eUSzq6V5m24/Foundations?node-id=3%3A2&t=l8qimsXlxeMLOzs6-0">implementation in Figma</a>.</p>
-  <p>There is a new solution with updated naming system up coming for spacing sizes.</p>
+<Canvas sourceState="shown" of={SizingStories.PxSizes} />
+<div className="hide-col-default">
+  <Controls of={SizingStories.PxSizes} />
 </div>
 
-<Source
-  language="scss"
-  dark
-  code={Object.entries(SizingStories.SCSS_VARIABLES)
-    .filter(([key, value]) => key !== 'parameters')
-    .map(([key, value]) => `$${key}: ${formatAsMap(value)};`)
-    .join('\n')}
-></Source>
+### Relative to breakpoints
 
-<Canvas of={SizingStories.Sizes} />
-<div className="hide-col-default">
-  <Controls of={SizingStories.Sizes} />
-</div>
+For width and height, the design system provides additionally `.w-{breakpoint}-{size}` classes (e.g. `w-md-full`, `h-md-56`) so that you can set different sizes for specific breakpoints.
+
+See <a href="/?path=/docs/eb78afcb-ce92-4990-94b6-6536d5ec6af4--docs#full-width">Full-width button</a> for a practical example.
 
-## Viewport Based
+### Viewport Based
 
-There is the possibility to set the width and height relative to the viewport.
+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`.
 
 > - `min-vh-100`
 > - `min-vw-100`

diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.module.scss b/packages/documentation/src/stories/utilities/sizing/sizing.module.scss
@@ -1,7 +1,21 @@
+@use 'sass:list';
+@use 'sass:map';
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/variables/sizing' as tokens;
 
 :export {
-  @each $key, $value in post.$post-sizes {
-    #{$key}: #{$value};
+  @each $key, $value in tokens.$post-percentage-sizes {
+    pcsizes_#{$key}: #{$value};
+  }
+  @each $key, $value in tokens.$post-px-sizes {
+    pxsizes_#{$key}: #{$value};
+  }
+  @each $breakpoint in post.$grid-breakpoints-list {
+    @if (map.get(post.$grid-breakpoints, $breakpoint) == 0) {
+      firstBreakpoint_#{$breakpoint}: $breakpoint;
+    }
+    @if (map.get(post.$grid-breakpoints, $breakpoint) != 0) {
+      breakpoints_#{$breakpoint}: $breakpoint;
+    }
   }
 }
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts b/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts
@@ -0,0 +1,139 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './sizing.styles.scss';
+import meta from './sizing.stories';
+import { COLOR_SCHEMES, schemes } from '@/shared/snapshots/schemes';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+const samples = [
+  { w: 'third', h: 'full', maxW: 'third', minW: 'full', maxH: 'half', minH: 'two-thirds' },
+  { w: 'quarter', h: 'half', maxW: 'quarter', minW: 'half', maxH: 'full', minH: 'quarter' },
+  { w: 'half', h: 'quarter', maxW: 'half', minW: 'quarter', maxH: 'two-thirds', minH: 'third' },
+  {
+    w: 'three-quarters',
+    h: 'quarter',
+    maxW: 'three-quarters',
+    minW: 'three-quarters',
+    maxH: 'quarter',
+    minH: 'half',
+  },
+  { 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: '18', maxW: '33', minW: '12', maxH: '48', minH: '22' },
+  { w: '24', h: '36', maxW: '32', minW: '20', maxH: '40', minH: '24' },
+  { w: '40', h: '56', maxW: '48', minW: '24', maxH: '56', minH: '32' },
+  { w: '28', h: '64', maxW: '80', minW: '56', maxH: '96', minH: '36' },
+  { w: '96', h: '48', maxW: '100', minW: '40', maxH: '112', minH: '48' },
+  { w: '64', h: '56', maxW: '80', minW: '32', maxH: '78', minH: '64' },
+  { w: '20', h: '15', maxW: '22', minW: '12', maxH: '32', minH: '18' },
+  { w: '32', h: '22', maxW: '40', minW: '24', maxH: '36', minH: '20' },
+  { w: '78', h: '96', maxW: '80', minW: '40', maxH: '112', minH: '56' },
+  { w: '48', h: '80', maxW: '96', minW: '50', maxH: '112', minH: '56' },
+  { w: '80', h: '96', maxW: '112', minW: '64', maxH: '100', minH: '36' },
+];
+function generateClassNames(sample: Record<string, string>, isViewport = false) {
+  const prefix = isViewport ? 'v' : '';
+
+  const classNames = ['content'];
+
+  classNames.push(prefix + 'h-' + sample.h);
+  classNames.push(prefix + 'w-' + sample.w);
+
+  if (sample['max' + prefix + 'H'] && sample['max' + prefix + 'H'] !== 'none') {
+    classNames.push('max-vh-' + sample['max' + prefix + 'H']);
+  }
+
+  if (sample['max' + prefix + 'W'] && sample['max' + prefix + 'W'] !== 'none') {
+    classNames.push('max-vw-' + sample['max' + prefix + 'W']);
+  }
+
+  if (sample['min' + prefix + 'H'] && sample['min' + prefix + 'H'] !== 'none') {
+    classNames.push('min-vh-' + sample['min' + prefix + 'H']);
+  }
+
+  if (sample['min' + prefix + 'W'] && sample['min' + prefix + 'W'] !== 'none') {
+    classNames.push('min-vw-' + sample['min' + prefix + 'W']);
+  }
+
+  return classNames.filter(Boolean).join(' ');
+}
+
+export const PercentageSizing: StoryObj = {
+  render() {
+    return schemes(
+      () => {
+        return html`
+          ${samples.map(sample => {
+            return html`<div class="sizing-example snapshot">
+              <div class="${generateClassNames(sample)}"></div>
+            </div>`;
+          })};
+        `;
+      },
+      { filter: scheme => scheme === COLOR_SCHEMES.light },
+    );
+  },
+};
+
+export const PercentageVpSizing: StoryObj = {
+  render() {
+    return schemes(
+      () => {
+        return html`
+          <div class="grid">
+            ${vpSamples.map(sample => {
+              return html`
+                <div class="grid-item">
+                  <div class="sizing-example snapshot">
+                    <div class="${generateClassNames(sample, true)}"></div>
+                  </div>
+                </div>
+              `;
+            })}
+          </div>
+        `;
+      },
+      { filter: scheme => scheme === COLOR_SCHEMES.light },
+    );
+  },
+};
+
+export const PixelSizing: StoryObj = {
+  render() {
+    return schemes(
+      () => {
+        return html`
+          ${pxSamples.map(sample => {
+            return html`<div class="sizing-px-example snapshot">
+              <div class="${generateClassNames(sample)}"></div>
+            </div>`;
+          })}
+        `;
+      },
+      { filter: scheme => scheme === COLOR_SCHEMES.light },
+    );
+  },
+};