fix(documentation): width and height percentage sizing (#4328)

Co-authored-by: Oliver Schürch <[email protected]>

.changeset/good-spoons-tie.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-nextjs-integration': patch
+'@swisspost/design-system-documentation': patch
+---
+
+Aligned `width` and `height` percentage classes, after utility update.

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

@@ -38,7 +38,7 @@ To achieve that, you can use classes in the format:
 - `.w-{size}` for the xs breakpoint,
 - `.w-{breakpoint}-{size}` for breakpoints from sm to xl.
 
-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`.
+For example, a button with classes `w-full 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/20af6e2b-32b1-42ef-a187-b026aea7fe13--docs">Breakpoints documentation</a>.
 

packages/documentation/src/stories/components/card-control/card-control.docs.mdx

@@ -126,7 +126,7 @@ import SampleCardControlMethods from './web-component/card-control-methods.sampl
     ### Lined up
 
     Change the `width` of a `<card-control>` component, by putting it (for example) in a grid.
-    If you like to stretch all `<card-control>` components within a row to the same `height`, simply add the class `.h-100` to them.
+    If you like to stretch all `<card-control>` components within a row to the same `height`, simply add the class `.h-full` to them.
 
     <Canvas of={CardControlStories.LinedUp} />
     <div className="hide-col-default">

packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts

@@ -347,7 +347,7 @@ export const LinedUp: Story = {
           <div class="col-${12 / args.colCount}">
             ${Default.render?.(
               {
-                class: args.fullHeight ? 'h-100' : null,
+                class: args.fullHeight ? 'h-full' : null,
                 label: `Checkbox${i}`,
                 description: i === 6 ? '20.- per year' : null,
                 type: args.type,

packages/documentation/src/stories/components/card-product/card-product.docs.mdx

@@ -36,7 +36,7 @@ import ProductCardAngularSyncHeights from './card-product.sample.ts?raw';
 ### Product Card Group
 
 For organizing multiple product cards in a group, utilize the [grid system](/?path=/docs/7240f2ef-216a-490e-9bd8-c0cef19f7b31--docs).
-Ensure consistent height by applying the `.h-100` class to all product cards.
+Ensure consistent height by applying the `.h-full` class to all product cards.
 
 <Canvas of={ProductCardStories.Groupped} />
 

packages/documentation/src/stories/components/card-product/card-product.stories.ts

@@ -134,7 +134,7 @@ export const Groupped: Story = {
     </div>
   `,
   args: {
-    cardClasses: ' h-100',
+    cardClasses: ' h-full',
   },
 };
 
@@ -224,11 +224,11 @@ export const Multipart: Story = {
           </div>
 
           <div class="card-body palette-alternate">
-            <button class="btn btn-secondary w-100 mb-12">
+            <button class="btn btn-secondary w-full mb-12">
               <span>Order Sample Product</span>
             </button>
 
-            <button class="btn btn-primary w-100">
+            <button class="btn btn-primary w-full">
               <span>Print Sample Product</span>
             </button>
           </div>
@@ -311,11 +311,11 @@ export const Multipart: Story = {
           </div>
 
           <div class="card-body palette-alternate">
-            <button class="btn btn-secondary w-100 mb-12">
+            <button class="btn btn-secondary w-full mb-12">
               <span>Order Sample Product</span>
             </button>
 
-            <button class="btn btn-primary w-100">
+            <button class="btn btn-primary w-full">
               <span>Print Sample Product</span>
             </button>
           </div>

packages/documentation/src/stories/components/checkbox/checkbox.snapshot.stories.ts

@@ -56,7 +56,7 @@ export const Checkbox: Story = {
               </span>
             `;
           })}
-          <div class="mt-32 w-100"></div>
+          <div class="mt-32 w-full"></div>
           ${Inline.render?.({ ...context.args, ...Inline.args }, context)}
         </div>
       `,

packages/documentation/src/stories/components/rating/post-rating.snapshot.stories.ts

@@ -18,8 +18,8 @@ export const Rating: Story = {
     return schemes(
       () => html`
         <div class="d-flex gap-16 mb-16">
-          <div class="w-50 d-flex gap-4">readonly: false</div>
-          <div class="w-50 d-flex gap-4">readonly: true</div>
+          <div class="w-half d-flex gap-4">readonly: false</div>
+          <div class="w-half d-flex gap-4">readonly: true</div>
         </div>
         ${bombArgs({
           stars: [3, 5, 10],
@@ -30,10 +30,10 @@ export const Rating: Story = {
             (args: Args) =>
               html`
                 <div class="d-flex gap-16">
-                  <div class="w-50">
+                  <div class="w-half">
                     ${meta.render?.({ ...context.args, ...args, readonly: false }, context)}
                   </div>
-                  <div class="w-50">
+                  <div class="w-half">
                     ${meta.render?.({ ...context.args, ...args, readonly: true }, context)}
                   </div>
                 </div>

packages/documentation/src/stories/components/segmented-button/segmented-button.snapshot.stories.ts

@@ -18,7 +18,7 @@ export const SegmentedButton: Story = {
 
     return schemes(
       scheme => html`
-        <div class=" d-flex flex-column w-75 gap-16 p-16">
+        <div class=" d-flex flex-column w-three-quarters gap-16 p-16">
           ${labelCounts.map(count => {
             const labels = Array.from({ length: count }, (_, i) => `Label ${i + 1}`);
 

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 max-w-100" ngbDropdownMenu role="listbox">
+  <div aria-labelledby="customSelectButton" class="w-full max-w-full" ngbDropdownMenu role="listbox">
     <button
       (click)="toggle.focus()"
       (focus)="selectedOption = option"

packages/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 max-w-100" ngbDropdownMenu role="listbox">
+  <div aria-labelledby="customSelectLabel" class="w-full max-w-full" ngbDropdownMenu role="listbox">
     <button
       (click)="toggle.focus()"
       (focus)="selectedOption = option"

packages/documentation/src/stories/foundations/icons/icon.stories.ts

@@ -229,7 +229,7 @@ const renderAnimateVariants = (args: Args, customAttrs: { name: string; animatio
     ${customAttrs.map(
       variantArgs =>
         html`
-          <div class="w-50 py-16">
+          <div class="w-half py-16">
             <p class="text-muted fs-tiny">Animation: ${variantArgs.animation}</p>
             <post-icon ${spread(normalizeArgs(args))} ${spread(variantArgs)}></post-icon>
           </div>

packages/documentation/src/stories/foundations/layout/columns/columns.stories.ts

@@ -244,7 +244,7 @@ export const ColumnBreakExample: Story = {
       ${args.renderBreakingElement
         ? html`
             <!-- Force next columns to break to new line -->
-            <div class="w-100"></div>
+            <div class="w-full"></div>
           `
         : nothing}
       <div class="col-3">.col-3</div>

packages/documentation/src/stories/foundations/typography/typography.blocks.tsx

@@ -50,7 +50,7 @@ export function FontSizesAndLineheights() {
       <table className="table">
         <thead>
           <tr>
-            <th className="w-25">Name</th>
+            <th className="w-quarter">Name</th>
             <th>Class</th>
             <th>Scss variable</th>
             <th>Font Size</th>
@@ -125,7 +125,7 @@ export function Headings() {
       <table className="table">
         <thead>
           <tr>
-            <th className="w-25">Tag</th>
+            <th className="w-quarter">Tag</th>
             <th>Visual</th>
           </tr>
         </thead>
@@ -190,7 +190,7 @@ export function Paragraphs() {
       <table className="table">
         <thead>
           <tr>
-            <th className="w-25">Tag</th>
+            <th className="w-quarter">Tag</th>
             <th>Visual</th>
           </tr>
         </thead>
@@ -234,7 +234,7 @@ export function Links() {
       <table className="table">
         <thead>
           <tr>
-            <th className="w-25">Tag</th>
+            <th className="w-quarter">Tag</th>
             <th>Visual</th>
           </tr>
         </thead>
@@ -284,7 +284,7 @@ export function Inlines() {
       <table className="table">
         <thead>
           <tr>
-            <th className="w-25">Tag</th>
+            <th className="w-quarter">Tag</th>
             <th>Visual</th>
           </tr>
         </thead>
@@ -402,7 +402,7 @@ export function Lists() {
       <table className="table">
         <thead>
           <tr>
-            <th className="w-25">Tag</th>
+            <th className="w-quarter">Tag</th>
             <th>Visual</th>
           </tr>
         </thead>

packages/documentation/src/stories/introduction.docs.mdx

@@ -21,7 +21,7 @@ import { technologies } from './introduction.data';
     ))}
   </ul>
   <div className="mt-16 mb-16 d-flex gap-8 flex-wrap justify-content-center">
-    <div className="mt-32 mb-16 w-100">
+    <div className="mt-32 mb-16 w-full">
       <a
         className="btn btn-primary btn-lg"
         href="/?path=/docs/dfc70c3b-4726-406b-8a41-af5738c89d05--docs"

packages/documentation/src/stories/utilities/elevation/elevation.stories.ts

@@ -15,5 +15,5 @@ export default meta;
 type Story = StoryObj;
 
 export const Default: Story = {
-  render: () => html` <div class="w-50 rounded p-16 elevation-5">I'm elevated!</div> `,
+  render: () => html` <div class="w-half rounded p-16 elevation-5">I'm elevated!</div> `,
 };

packages/documentation/src/stories/utilities/text/text.stories.ts

@@ -63,12 +63,12 @@ export const TextAlign: Story = {
 
 export const TextWrapping: Story = {
   render: () => html`
-    <div class="my-container w-50">
+    <div class="my-container w-half">
       <p class="text-nowrap">
         This text should NOT wrap, saepe excepturi quas nihil repudiandae eius assumenda voluptatem.
       </p>
     </div>
-    <div class="my-container w-50 text-nowrap">
+    <div class="my-container w-half text-nowrap">
       <p class="text-wrap">
         This text should wrap, saepe excepturi quas nihil repudiandae eius assumenda voluptatem.
       </p>
@@ -78,7 +78,7 @@ export const TextWrapping: Story = {
 
 export const WordBreak: Story = {
   render: () => html`
-    <div class="my-container w-50">
+    <div class="my-container w-half">
       <p class="text-break">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
     </div>
   `,

packages/nextjs-integration/src/app/page.tsx

@@ -41,7 +41,7 @@ export default function Home() {
       <section className="mt-huge-r">
         <div className="row">
           <div className="col-xl-2 col-md-6">
-            <a href="#" className="card h-100 product-card">
+            <a href="#" className="card h-full product-card">
               <div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
                 <PostIcon name="2146" className="fs-bigger-big"></PostIcon>
                 <p className="mt-8 text-center text-muted fs-regular fw-normal">Umzug melden</p>
@@ -50,7 +50,7 @@ export default function Home() {
           </div>
 
           <div className="col-xl-2 col-md-6">
-            <a href="#" className="card h-100 product-card">
+            <a href="#" className="card h-full product-card">
               <div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
                 <PostIcon name="2026" className="fs-bigger-big"></PostIcon>
                 <p className="mt-8 text-center text-muted fs-regular fw-normal">Shop</p>
@@ -59,7 +59,7 @@ export default function Home() {
           </div>
 
           <div className="col-xl-2 col-md-6">
-            <a href="#" className="card h-100 product-card">
+            <a href="#" className="card h-full product-card">
               <div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
                 <PostIcon name="3140" className="fs-bigger-big"></PostIcon>
                 <p className="mt-8 text-center text-muted fs-regular fw-normal">
@@ -70,7 +70,7 @@ export default function Home() {
           </div>
 
           <div className="col-xl-2 col-md-6">
-            <a href="#" className="card h-100 product-card">
+            <a href="#" className="card h-full product-card">
               <div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
                 <PostIcon name="2456" className="fs-bigger-big"></PostIcon>
                 <p className="mt-8 text-center text-muted fs-regular fw-normal">
@@ -81,7 +81,7 @@ export default function Home() {
           </div>
 
           <div className="col-xl-2 col-md-6">
-            <a href="#" className="card h-100 product-card">
+            <a href="#" className="card h-full product-card">
               <div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
                 <PostIcon name="1012" className="fs-bigger-big"></PostIcon>
                 <p className="mt-8 text-center text-muted fs-regular fw-normal">
@@ -92,7 +92,7 @@ export default function Home() {
           </div>
 
           <div className="col-xl-2 col-md-6">
-            <a href="#" className="card h-100 product-card">
+            <a href="#" className="card h-full product-card">
               <div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
                 <PostIcon name="1024" className="fs-bigger-big"></PostIcon>
                 <p className="mt-8 text-center text-muted fs-regular fw-normal">