From 329c2100f1b71f22ea0a1bd07cc57bca5fcc8ee2 Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Mon, 30 Dec 2024 16:33:16 +0100
Subject: [PATCH] fix(documentation): remove remaining sizing classes usage
 (#4357)

---
 .changeset/bright-coins-repeat.md             |  6 +++++
 .../.storybook/blocks/footer.tsx              |  6 ++---
 .../stories/components/avatar/avatar.docs.mdx |  8 +++----
 .../avatar/avatar.snapshot.stories.ts         |  2 +-
 .../components/button/button.stories.ts       |  2 +-
 .../dialog/dialog.snapshot.stories.ts         |  2 +-
 .../components/dialog/dialog.stories.ts       |  2 +-
 .../typography/link/link.snapshot.stories.ts  |  2 +-
 .../accessibility/accessibility.docs.mdx      |  4 ++--
 .../disabled-state/disabled-state.docs.mdx    | 24 +++++++++----------
 packages/nextjs-integration/src/app/page.tsx  | 10 ++++----
 11 files changed, 37 insertions(+), 31 deletions(-)
 create mode 100644 .changeset/bright-coins-repeat.md

diff --git a/.changeset/bright-coins-repeat.md b/.changeset/bright-coins-repeat.md
new file mode 100644
index 0000000000..8a4e206729
--- /dev/null
+++ b/.changeset/bright-coins-repeat.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-nextjs-integration': patch
+'@swisspost/design-system-documentation': patch
+---
+
+Removed remaining sizing classes usage.
diff --git a/packages/documentation/.storybook/blocks/footer.tsx b/packages/documentation/.storybook/blocks/footer.tsx
index c705f1bc2a..640512e18c 100644
--- a/packages/documentation/.storybook/blocks/footer.tsx
+++ b/packages/documentation/.storybook/blocks/footer.tsx
@@ -94,7 +94,7 @@ export default (params: { pathToStoryFile?: String }) => (
     <footer className="docs-footer mt-56">
       <div>
         <div className="container">
-          <div className="pt-big-r pb-big-r">
+          <div className="py-32">
             <h2 className="mt-0">Design System Team Members</h2>
             <ul className="list-profile">
               {TEAM_MEMBERS.sort(() => (Math.random() > 0.5 ? 1 : -1)).map((developer, index) => (
@@ -114,8 +114,8 @@ export default (params: { pathToStoryFile?: String }) => (
                 </li>
               ))}
             </ul>
-            <div className="row mt-regular-r">
-              <div className="col-12 col-sm-auto mt-regular-r">
+            <div className="row mt-24">
+              <div className="col-12 col-sm-auto mt-24">
                 <a
                   className="btn-primary btn"
                   href="https://github.com/swisspost/design-system/issues"
diff --git a/packages/documentation/src/stories/components/avatar/avatar.docs.mdx b/packages/documentation/src/stories/components/avatar/avatar.docs.mdx
index 67d9b14728..8041786479 100644
--- a/packages/documentation/src/stories/components/avatar/avatar.docs.mdx
+++ b/packages/documentation/src/stories/components/avatar/avatar.docs.mdx
@@ -55,20 +55,20 @@ Please notice, that if you combine several methods to show a picture, the compon
 The properties are used in the order as follows:
 
 1. If you use an `<img>` tag in the default slot (for example to show a self hosted image), this will override the other properties.<br/><br/>
-   <div className="mb-regular banner banner-info banner-md">
+   <div className="mb-16 banner banner-info banner-md">
      We do not check if the image can be loaded, so make sure the image is available!
    </div>
 2. If you use the `userid` property (to show a company internal user picture) and a picture is available, this will override the `email` property, as well as `firstname` and `lastname`.<br/><br/>
-   <div className="mb-regular banner banner-info banner-md">
+   <div className="mb-16 banner banner-info banner-md">
      This will only work on `post.ch` urls and only in internal projects.
    </div>
 3. If you use the `email` property (to show a users picture provided through gravatar.com) and a picture is available, this will override the `firstname` and `lastname` properties.<br/><br/>
-   <div className="mb-regular banner banner-info banner-md">
+   <div className="mb-16 banner banner-info banner-md">
      Don't know Gravatar or haven't set up a profile yet, let's change this:
      [Signup](https://gravatar.com) now!
    </div>
 4. As an overall fallback the `firstname` and `lastname` properties are used to show at least some initials. And as an addition, `firstname` and `lastname` (if defined) are also used on all the other methods to set the `alt` tag of the image (if not already defined).<br/><br/>
-   <div className="mb-regular banner banner-info banner-md">
+   <div className="mb-16 banner banner-info banner-md">
      Because of big differences in the naming convenions around the world, we only set the
      `firstname` as required property.
    </div>
diff --git a/packages/documentation/src/stories/components/avatar/avatar.snapshot.stories.ts b/packages/documentation/src/stories/components/avatar/avatar.snapshot.stories.ts
index 4979531ccd..1c7977384c 100644
--- a/packages/documentation/src/stories/components/avatar/avatar.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/avatar/avatar.snapshot.stories.ts
@@ -18,7 +18,7 @@ export const AvatarPicture: Story = {
     return schemes(
       () => html`
         <div class="mt-16">
-          <div class="d-flex flex-column gap-regular">
+          <div class="d-flex flex-column gap-16">
               ${bombArgs({
                 lastname: [null, 'Source'],
                 firstname: ['Open'],
diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
index 1cdcd7f4aa..06ec11e0eb 100644
--- a/packages/documentation/src/stories/components/button/button.stories.ts
+++ b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -238,7 +238,7 @@ const VariantsTemplate = {
   },
   decorators: [
     (story: StoryFn, context: StoryContext) =>
-      html` <div class="d-flex gap-small-r flex-wrap">${story(context.args, context)}</div> `,
+      html` <div class="d-flex gap-12 flex-wrap">${story(context.args, context)}</div> `,
   ],
   render: (args: Args) =>
     html`
diff --git a/packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts b/packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts
index b74488df7d..3f93583732 100644
--- a/packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts
@@ -24,7 +24,7 @@ export const Dialog: Story = {
             transition: none !important;
           }
         </style>
-        <div class="d-flex flex-wrap align-items-start gap-regular">
+        <div class="d-flex flex-wrap align-items-start gap-16">
           ${bombArgs({
             palette: ['palette-default', 'palette-accent', 'palette-alternate', 'palette-brand'],
             size: context.argTypes.size.options,
diff --git a/packages/documentation/src/stories/components/dialog/dialog.stories.ts b/packages/documentation/src/stories/components/dialog/dialog.stories.ts
index 6ef2fde293..94b24defda 100644
--- a/packages/documentation/src/stories/components/dialog/dialog.stories.ts
+++ b/packages/documentation/src/stories/components/dialog/dialog.stories.ts
@@ -210,7 +210,7 @@ const CustomContentTemplate = {
   render: () => {
     return html`
       <dialog>
-        <form method="dialog" onsubmit="console.log(event)" class="p-regular-r">
+        <form method="dialog" onsubmit="console.log(event)" class="p-16">
           <h2>Custom content</h2>
           <p>This is some other content, just placed inside the dialog.</p>
           <button class="btn btn-primary">Ok</button>
diff --git a/packages/documentation/src/stories/foundations/typography/link/link.snapshot.stories.ts b/packages/documentation/src/stories/foundations/typography/link/link.snapshot.stories.ts
index 37ad539715..6b42fe3b81 100644
--- a/packages/documentation/src/stories/foundations/typography/link/link.snapshot.stories.ts
+++ b/packages/documentation/src/stories/foundations/typography/link/link.snapshot.stories.ts
@@ -17,7 +17,7 @@ export const Link: Story = {
   render: (_args: Args, context: StoryContext) => {
     return schemes(
       () => html`
-        <div class="d-flex flex-column gap-regular">
+        <div class="d-flex flex-column gap-16">
           ${bombArgs({
             text: ['Link Text', 'Lorem ipsum dolor sit amet consectetur'],
             href: ['https://example.com', 'https://imgur.com/FKmX7dt'],
diff --git a/packages/documentation/src/stories/guidelines/accessibility/accessibility.docs.mdx b/packages/documentation/src/stories/guidelines/accessibility/accessibility.docs.mdx
index d3f6667f2d..04340a522b 100644
--- a/packages/documentation/src/stories/guidelines/accessibility/accessibility.docs.mdx
+++ b/packages/documentation/src/stories/guidelines/accessibility/accessibility.docs.mdx
@@ -7,12 +7,12 @@ import * as RegulationStories from './accessibility.stories';
 
 <figure>
   <blockquote class="blockquote" lang="de">
-    <p class="mb-regular">
+    <p class="mb-16">
       Die Postdienste müssen so angeboten werden, dass Menschen mit Behinderungen sie in
       qualitativer, quantitativer und wirtschaftlicher Hinsicht unter vergleichbaren Bedingungen wie
       Menschen ohne Behinderungen beanspruchen können.
     </p>
-    <p class="mb-regular">
+    <p class="mb-16">
       (EN) The postal services must be offered in such a way that people with disabilities can use
       them under comparable conditions to those without disabilities, both qualitatively,
       quantitatively, and economically.
diff --git a/packages/documentation/src/stories/guidelines/disabled-state/disabled-state.docs.mdx b/packages/documentation/src/stories/guidelines/disabled-state/disabled-state.docs.mdx
index ed8e278e62..8ecabdaa2c 100644
--- a/packages/documentation/src/stories/guidelines/disabled-state/disabled-state.docs.mdx
+++ b/packages/documentation/src/stories/guidelines/disabled-state/disabled-state.docs.mdx
@@ -7,24 +7,24 @@ import * as DisabledStateStories from './disabled-state.stories';
 
 Disabled states of input fields or buttons pose many accessibility issues.
 
-<ul class="list-unstyled ms-regular">
-  <li class="d-flex gap-mini">
+<ul class="list-unstyled ms-16">
+  <li class="d-flex gap-8">
     <div>❌</div>
     <div>Disabled fields cannot be reached by pressing tab</div>
   </li>
-  <li class="d-flex gap-mini">
+  <li class="d-flex gap-8">
     <div>❌</div>
     <div>It's often unclear why something is disabled</div>
   </li>
-  <li class="d-flex gap-mini">
+  <li class="d-flex gap-8">
     <div>❌</div>
     <div>It's often unclear how to enable a disabled field or button</div>
   </li>
-  <li class="d-flex gap-mini">
+  <li class="d-flex gap-8">
     <div>❌</div>
     <div>Disabled fields have low contrast</div>
   </li>
-  <li class="d-flex gap-mini">
+  <li class="d-flex gap-8">
     <div>❌</div>
     <div>
       The disabled state of a field is not always obvious (hard to discern from an enabled field)
@@ -48,7 +48,7 @@ Disabled states of input fields or buttons pose many accessibility issues.
       <tr>
         <td>
           <ul class="list-unstyled">
-            <li class="d-flex gap-mini">
+            <li class="d-flex gap-8">
               <div>❌</div>
               <div>
                 Forms with required fields tend to have the send button disabled until all required
@@ -60,7 +60,7 @@ Disabled states of input fields or buttons pose many accessibility issues.
         </td>
         <td>
           <ul class="list-unstyled">
-            <li class="d-flex gap-mini">
+            <li class="d-flex gap-8">
               <div>✔️</div>
               <div>
                 Let the user make mistakes and help them to correct them. Mark the required fields
@@ -79,7 +79,7 @@ Disabled states of input fields or buttons pose many accessibility issues.
       <tr>
         <td>
           <ul class="list-unstyled">
-            <li class="d-flex gap-mini">
+            <li class="d-flex gap-8">
               <div>❌</div>
               <div>
                 The user submits a form. While the client waits for the server response and to
@@ -91,7 +91,7 @@ Disabled states of input fields or buttons pose many accessibility issues.
         </td>
         <td>
           <ul class="list-unstyled">
-            <li class="d-flex gap-mini">
+            <li class="d-flex gap-8">
               <div>✔️</div>
               <div>
                 Provide a loading indicator or display a message that shows current progress when
@@ -112,7 +112,7 @@ Disabled states of input fields or buttons pose many accessibility issues.
       <tr>
         <td>
           <ul class="list-unstyled">
-            <li class="d-flex gap-mini">
+            <li class="d-flex gap-8">
               <div>❌</div>
               <div>
                 Some options in a radio button group or select field are disabled because they are
@@ -125,7 +125,7 @@ Disabled states of input fields or buttons pose many accessibility issues.
         </td>
         <td>
           <ul class="list-unstyled">
-            <li class="d-flex gap-mini">
+            <li class="d-flex gap-8">
               <div>✔️</div>
               <div>
                 There are multiple possible solutions, depending on the situation:
diff --git a/packages/nextjs-integration/src/app/page.tsx b/packages/nextjs-integration/src/app/page.tsx
index 8fe3fd197e..070dce4fc7 100644
--- a/packages/nextjs-integration/src/app/page.tsx
+++ b/packages/nextjs-integration/src/app/page.tsx
@@ -16,7 +16,7 @@ export default function Home() {
       <h1 className="visually-hidden">This is the homepage</h1>
 
       <section>
-        <h2 className="h4 mt-huge-r">Sendung Verfolgen</h2>
+        <h2 className="h4 mt-40">Sendung Verfolgen</h2>
         <form className="palette-brand mt-16 py-16 px-32 d-flex gap-24">
           <PostIcon name="1010" className="fs-small-huge"></PostIcon>
           <div className="form-floating" style={{ minWidth: '50%' }}>
@@ -38,7 +38,7 @@ export default function Home() {
         </form>
       </section>
 
-      <section className="mt-huge-r">
+      <section className="mt-40">
         <div className="row">
           <div className="col-xl-2 col-md-6">
             <a href="#" className="card h-full product-card">
@@ -108,7 +108,7 @@ export default function Home() {
         </a>
       </section>
 
-      <section className="pt-huge-r mb-huge-r">
+      <section className="pt-40 mb-40">
         <div className="row">
           <div className="col-lg-4 col-sm-6 col-12 mb-16">
             <div className="card elevation-0">
@@ -154,7 +154,7 @@ export default function Home() {
         </div>
       </section>
 
-      <section className="mt-huge-r">
+      <section className="mt-40">
         <h2>Testing a couple web components</h2>
         <PostTabs>
           <PostTabHeader panel="one" data-tooltip-target="tooltip-one">
@@ -190,7 +190,7 @@ export default function Home() {
           </PostTabPanel>
         </PostTabs>
         <h3>Frequently asked questions</h3>
-        <PostAccordion headingLevel={4} className="mt-big-r" multiple>
+        <PostAccordion headingLevel={4} className="mt-32" multiple>
           <PostAccordionItem>
             <span slot="header">Is this for real?</span>
             <p>No, this is just a fantasy.</p>