From 7c6309531ed6225257461ea33bc880bc76e08c2d Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Thu, 28 Mar 2024 19:43:02 +0100
Subject: [PATCH 1/7] feat(documentation, styles): animated button left

---
 .../components/button/button.stories.ts       | 16 ++--
 packages/styles/src/components/button.scss    | 85 ++++++++++++++-----
 2 files changed, 76 insertions(+), 25 deletions(-)

diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
index 2b593de613..46a6b975c5 100644
--- a/packages/documentation/src/stories/components/button/button.stories.ts
+++ b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -21,7 +21,7 @@ const meta: MetaComponent = {
     type: 'button',
     variant: 'btn-primary',
     size: 'null',
-    animated: true,
+    animated: 'btn-animated',
     icon: 'null',
     iconOnly: false,
     iconPosition: 'start',
@@ -121,14 +121,20 @@ const meta: MetaComponent = {
     },
     animated: {
       name: 'Animated',
-      description: 'When set to `true`, the component animates on hover.',
+      description: 'Sets an animates on hover.',
       if: {
         arg: 'icon',
         eq: 'null',
       },
       control: {
-        type: 'boolean',
+        type: 'inline-radio',
+        labels: {
+          'null': 'None',
+          'btn-animated': 'Right',
+          'btn-animated-left': 'Left',
+        },
       },
+      options: ['null', 'btn-animated', 'btn-animated-left'],
       table: {
         category: 'General',
       },
@@ -215,7 +221,7 @@ type Story = StoryObj;
 const Template = {
   render: (args: Args) => {
     const tagName = unsafeStatic(args.tag);
-    const isAnimated = args.tag !== 'input' && args.animated;
+    const isAnimated = args.tag !== 'input' && args.animated !== 'none';
     const props = createProps(args, isAnimated);
 
     if (args.tag === 'input') {
@@ -244,7 +250,7 @@ function createProps(args: Args, isAnimated: boolean) {
       'btn',
       args.variant,
       args.size,
-      isAnimated && 'btn-animated',
+      args.animated,
       args.iconOnly && 'btn-icon',
       ...additionalClasses,
     ]
diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss
index 7ef0153f15..ff03f9f975 100644
--- a/packages/styles/src/components/button.scss
+++ b/packages/styles/src/components/button.scss
@@ -134,22 +134,48 @@
 }
 
 // Animated
+.btn-animated,
+.btn-animated-left {
+  &:not(.btn-link, .btn-tertiary) {
+    &::after {
+      content: '';
+      position: absolute;
+      width: 0.625em;
+      height: 0.625em;
+      transform-origin: center center;
+      transition:
+        opacity 250ms,
+        transform 250ms;
+      opacity: 0;
+    }
+
+    > span {
+      transition: transform 250ms;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      @include utilities.not-disabled-focus-hover() {
+        &::after {
+          transform: rotateZ(315deg) translate(0, 0);
+          opacity: 1;
+        }
+      }
+
+      > span {
+        // Initially transform to place text in the right rendering context for a smooth animation
+        transform: translateX(0);
+      }
+    }
+  }
+}
+
 .btn-animated:not(.btn-link, .btn-tertiary) {
   &::after {
-    content: '';
-    position: absolute;
     right: button.$btn-padding-x-md - button.$btn-animation-distance-md;
-    width: 0.625em;
-    height: 0.625em;
     transform: rotateZ(315deg)
       translate(button.$btn-border-width * -1, button.$btn-border-width * -1);
-    transform-origin: center center;
-    transition:
-      opacity 250ms,
-      transform 250ms;
     border-right: button.$btn-border-width solid currentColor;
     border-bottom: button.$btn-border-width solid currentColor;
-    opacity: 0;
   }
 
   @each $size in button.$btn-non-default-sizes {
@@ -161,10 +187,6 @@
     }
   }
 
-  > span {
-    transition: transform 250ms;
-  }
-
   // Only animate when user prefers to see animations
   @media (prefers-reduced-motion: no-preference) {
     @include utilities.not-disabled-focus-hover() {
@@ -177,16 +199,39 @@
           transform: translateX(map.get(button.$btn-animation-distance-map, $size) * -1);
         }
       }
+    }
+  }
+}
 
-      &::after {
-        transform: rotateZ(315deg) translate(0, 0);
-        opacity: 1;
-      }
+.btn-animated-left:not(.btn-link, .btn-tertiary) {
+  &::after {
+    left: button.$btn-padding-x-md - button.$btn-animation-distance-md;
+    transform: rotateZ(315deg) translate(button.$btn-border-width, button.$btn-border-width);
+    border-left: button.$btn-border-width solid currentColor;
+    border-top: button.$btn-border-width solid currentColor;
+  }
+
+  @each $size in button.$btn-non-default-sizes {
+    &.btn-#{$size}::after {
+      left: map.get(button.$btn-padding-x-map, $size) - map.get(
+          button.$btn-animation-distance-map,
+          $size
+        );
     }
+  }
 
-    > span {
-      // Initially transform to place text in the right rendering context for a smooth animation
-      transform: translateX(0);
+  // Only animate when user prefers to see animations
+  @media (prefers-reduced-motion: no-preference) {
+    @include utilities.not-disabled-focus-hover() {
+      > span {
+        transform: translateX(map.get(button.$btn-animation-distance-map, md));
+      }
+
+      @each $size in button.$btn-non-default-sizes {
+        &.btn-#{$size} > span {
+          transform: translateX(map.get(button.$btn-animation-distance-map, $size));
+        }
+      }
     }
   }
 }

From 53eacf79af5cf60b5f9e2ff433c822399b98bb38 Mon Sep 17 00:00:00 2001
From: David Ritter <141235163+davidritter-dotcom@users.noreply.github.com>
Date: Wed, 10 Apr 2024 09:55:32 +0200
Subject: [PATCH 2/7] Update
 packages/documentation/src/stories/components/button/button.stories.ts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .../src/stories/components/button/button.stories.ts             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
index 46a6b975c5..bec62799ed 100644
--- a/packages/documentation/src/stories/components/button/button.stories.ts
+++ b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -121,7 +121,7 @@ const meta: MetaComponent = {
     },
     animated: {
       name: 'Animated',
-      description: 'Sets an animates on hover.',
+      description: 'Sets an animation on hover.',
       if: {
         arg: 'icon',
         eq: 'null',

From a29c599a8a6fc9513a4afc004b4437eff5b9a6a2 Mon Sep 17 00:00:00 2001
From: David Ritter <141235163+davidritter-dotcom@users.noreply.github.com>
Date: Wed, 10 Apr 2024 09:55:47 +0200
Subject: [PATCH 3/7] Update packages/styles/src/components/button.scss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 packages/styles/src/components/button.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss
index ff03f9f975..8763c69f80 100644
--- a/packages/styles/src/components/button.scss
+++ b/packages/styles/src/components/button.scss
@@ -135,7 +135,7 @@
 
 // Animated
 .btn-animated,
-.btn-animated-left {
+.btn-animated-start {
   &:not(.btn-link, .btn-tertiary) {
     &::after {
       content: '';

From e2cd0607b0f9eab3d265e2f264566b9433dd7f49 Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Thu, 11 Apr 2024 09:48:27 +0200
Subject: [PATCH 4/7] feat(documentation): change request

---
 .../src/stories/components/button/button.stories.ts         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
index c054998316..3596cf95c3 100644
--- a/packages/documentation/src/stories/components/button/button.stories.ts
+++ b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -131,11 +131,11 @@ const meta: MetaComponent = {
         type: 'inline-radio',
         labels: {
           'null': 'None',
-          'btn-animated': 'Right',
-          'btn-animated-left': 'Left',
+          'btn-animated': 'End',
+          'btn-animated-start': 'Start',
         },
       },
-      options: ['null', 'btn-animated', 'btn-animated-left'],
+      options: ['null', 'btn-animated', 'btn-animated-start'],
       table: {
         category: 'General',
       },

From 5d8697dc15aa887ffc6138cedfe028c1a1569298 Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Thu, 11 Apr 2024 16:21:57 +0200
Subject: [PATCH 5/7] feat(styles): work in progress

---
 packages/styles/src/components/button.scss | 187 +++++++++++----------
 1 file changed, 96 insertions(+), 91 deletions(-)

diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss
index 6bf271aca3..78fd948bb1 100644
--- a/packages/styles/src/components/button.scss
+++ b/packages/styles/src/components/button.scss
@@ -8,7 +8,7 @@
 @use './../variables/type';
 @use './../variables/spacing';
 @use './../mixins/color' as color-mx;
-@use './../mixins/icons';
+@use './../mixins/icons' as icon-mx;
 @use './../mixins/utilities';
 @use './../mixins/forms';
 @use './../mixins/button' as button-mx;
@@ -138,103 +138,108 @@
 .btn-animated-start {
   &:not(.btn-link, .btn-tertiary) {
     &::after {
+      @include icon-mx.icon(2110);
       content: '';
-      position: absolute;
-      width: 0.625em;
+      display: block;
       height: 0.625em;
-      transform-origin: center center;
-      transition:
-        opacity 250ms,
-        transform 250ms;
-      opacity: 0;
-    }
-
-    > span {
-      transition: transform 250ms;
+      width: 0.625em;
+      // content: '';
+      // position: absolute;
+      // width: 0.625em;
+      // height: 0.625em;
+      // transform-origin: center center;
+      // transition:
+      //   opacity 250ms,
+      //   transform 250ms;
+      // opacity: 0;
     }
 
-    @media (prefers-reduced-motion: no-preference) {
-      @include utilities.not-disabled-focus-hover() {
-        &::after {
-          transform: rotateZ(315deg) translate(0, 0);
-          opacity: 1;
-        }
-      }
-
-      > span {
-        // Initially transform to place text in the right rendering context for a smooth animation
-        transform: translateX(0);
-      }
-    }
+    // > span {
+    //   transition: transform 250ms;
+    // }
+
+    // @media (prefers-reduced-motion: no-preference) {
+    //   @include utilities.not-disabled-focus-hover() {
+    //     &::after {
+    //       transform: rotateZ(315deg) translate(0, 0);
+    //       opacity: 1;
+    //     }
+    //   }
+
+    //   > span {
+    //     // Initially transform to place text in the right rendering context for a smooth animation
+    //     transform: translateX(0);
+    //   }
+    // }
   }
 }
 
-.btn-animated:not(.btn-link, .btn-tertiary) {
-  &::after {
-    right: button.$btn-padding-x-md - button.$btn-animation-distance-md;
-    transform: rotateZ(315deg)
-      translate(button.$btn-border-width * -1, button.$btn-border-width * -1);
-    border-right: button.$btn-border-width solid currentColor;
-    border-bottom: button.$btn-border-width solid currentColor;
-  }
-
-  @each $size in button.$btn-non-default-sizes {
-    &.btn-#{$size}::after {
-      right: map.get(button.$btn-padding-x-map, $size) - map.get(
-          button.$btn-animation-distance-map,
-          $size
-        );
-    }
-  }
-
-  // Only animate when user prefers to see animations
-  @media (prefers-reduced-motion: no-preference) {
-    @include utilities.not-disabled-focus-hover() {
-      > span {
-        transform: translateX(map.get(button.$btn-animation-distance-map, md) * -1);
-      }
-
-      @each $size in button.$btn-non-default-sizes {
-        &.btn-#{$size} > span {
-          transform: translateX(map.get(button.$btn-animation-distance-map, $size) * -1);
-        }
-      }
-    }
-  }
-}
-
-.btn-animated-left:not(.btn-link, .btn-tertiary) {
-  &::after {
-    left: button.$btn-padding-x-md - button.$btn-animation-distance-md;
-    transform: rotateZ(315deg) translate(button.$btn-border-width, button.$btn-border-width);
-    border-left: button.$btn-border-width solid currentColor;
-    border-top: button.$btn-border-width solid currentColor;
-  }
-
-  @each $size in button.$btn-non-default-sizes {
-    &.btn-#{$size}::after {
-      left: map.get(button.$btn-padding-x-map, $size) - map.get(
-          button.$btn-animation-distance-map,
-          $size
-        );
-    }
-  }
-
-  // Only animate when user prefers to see animations
-  @media (prefers-reduced-motion: no-preference) {
-    @include utilities.not-disabled-focus-hover() {
-      > span {
-        transform: translateX(map.get(button.$btn-animation-distance-map, md));
-      }
-
-      @each $size in button.$btn-non-default-sizes {
-        &.btn-#{$size} > span {
-          transform: translateX(map.get(button.$btn-animation-distance-map, $size));
-        }
-      }
-    }
-  }
-}
+// .btn-animated:not(.btn-link, .btn-tertiary) {
+//   &::after {
+//     right: button.$btn-padding-x-md - button.$btn-animation-distance-md;
+//     transform: rotateZ(315deg)
+//       translate(button.$btn-border-width * -1, button.$btn-border-width * -1);
+//     border-right: button.$btn-border-width solid currentColor;
+//     border-bottom: button.$btn-border-width solid currentColor;
+//   }
+
+//   @each $size in button.$btn-non-default-sizes {
+//     &.btn-#{$size}::after {
+//       right: map.get(button.$btn-padding-x-map, $size) - map.get(
+//           button.$btn-animation-distance-map,
+//           $size
+//         );
+//     }
+//   }
+
+//   // Only animate when user prefers to see animations
+//   @media (prefers-reduced-motion: no-preference) {
+//     @include utilities.not-disabled-focus-hover() {
+//       > span {
+//         transform: translateX(map.get(button.$btn-animation-distance-map, md) * -1);
+//       }
+
+//       @each $size in button.$btn-non-default-sizes {
+//         &.btn-#{$size} > span {
+//           transform: translateX(map.get(button.$btn-animation-distance-map, $size) * -1);
+//         }
+//       }
+//     }
+//   }
+// }
+
+// .btn-animated-start:not(.btn-link, .btn-tertiary) {
+//   &::after {
+//     left: button.$btn-padding-x-md - button.$btn-animation-distance-md;
+//     transform: rotateZ(315deg) translate(button.$btn-border-width, button.$btn-border-width);
+//     border-left: button.$btn-border-width solid currentColor;
+//     border-top: button.$btn-border-width solid currentColor;
+//   }
+
+//   @each $size in button.$btn-non-default-sizes {
+//     &.btn-#{$size}::after {
+//       left: map.get(button.$btn-padding-x-map, $size) - map.get(
+//           button.$btn-animation-distance-map,
+//           $size
+//         );
+//     }
+//   }
+
+//   // Only animate when user prefers to see animations
+//   @media (prefers-reduced-motion: no-preference) {
+//     @include utilities.not-disabled-focus-hover() {
+//       > span {
+//         transform: translateX(map.get(button.$btn-animation-distance-map, md));
+//       }
+
+//       @each $size in button.$btn-non-default-sizes {
+//         &.btn-#{$size} > span {
+//           transform: translateX(map.get(button.$btn-animation-distance-map, $size));
+//         }
+//       }
+//     }
+//   }
+// }
 
 // Size variants, default is rg
 @each $size in button.$btn-non-default-sizes {

From f9f31558de1afc789a165b007d57d9377be5f9f8 Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Tue, 16 Apr 2024 13:56:58 +0200
Subject: [PATCH 6/7] feat(styles): use icon for button animation

---
 packages/styles/src/components/button.scss | 187 ++++++++++-----------
 1 file changed, 92 insertions(+), 95 deletions(-)

diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss
index 78fd948bb1..30b590448b 100644
--- a/packages/styles/src/components/button.scss
+++ b/packages/styles/src/components/button.scss
@@ -134,112 +134,109 @@
 }
 
 // Animated
+
 .btn-animated,
 .btn-animated-start {
   &:not(.btn-link, .btn-tertiary) {
     &::after {
-      @include icon-mx.icon(2110);
+      @include icon-mx.icon(2111);
       content: '';
       display: block;
-      height: 0.625em;
-      width: 0.625em;
-      // content: '';
-      // position: absolute;
-      // width: 0.625em;
-      // height: 0.625em;
-      // transform-origin: center center;
-      // transition:
-      //   opacity 250ms,
-      //   transform 250ms;
-      // opacity: 0;
+      height: 2em;
+      width: 2em;
+      position: absolute;
+      transition:
+        opacity 250ms,
+        transform 250ms;
+      opacity: 0;
+    }
+
+    > span {
+      transition: transform 250ms;
     }
 
-    // > span {
-    //   transition: transform 250ms;
-    // }
-
-    // @media (prefers-reduced-motion: no-preference) {
-    //   @include utilities.not-disabled-focus-hover() {
-    //     &::after {
-    //       transform: rotateZ(315deg) translate(0, 0);
-    //       opacity: 1;
-    //     }
-    //   }
-
-    //   > span {
-    //     // Initially transform to place text in the right rendering context for a smooth animation
-    //     transform: translateX(0);
-    //   }
-    // }
+    @media (prefers-reduced-motion: no-preference) {
+      @include utilities.not-disabled-focus-hover() {
+        &::after {
+          transform: translateX(0);
+          opacity: 1;
+        }
+      }
+
+      > span {
+        // Initially transform to place text in the right rendering context for a smooth animation
+        transform: translateX(0);
+      }
+    }
+  }
+}
+
+.btn-animated:not(.btn-link, .btn-tertiary) {
+  &::after {
+    right: button.$btn-padding-x-md - button.$btn-animation-distance-md -
+      (button.$btn-font-size-md * 2 / 3);
+    transform: translateX(button.$btn-border-width * -1);
+  }
+
+  @each $size in button.$btn-non-default-sizes {
+    &.btn-#{$size}::after {
+      right: map.get(button.$btn-padding-x-map, $size) - map.get(
+          button.$btn-animation-distance-map,
+          $size
+        ) -
+        (map.get(button.$btn-font-size-map, $size) * 2 / 3);
+    }
+  }
+
+  // Only animate when user prefers to see animations
+  @media (prefers-reduced-motion: no-preference) {
+    @include utilities.not-disabled-focus-hover() {
+      > span {
+        transform: translateX(map.get(button.$btn-animation-distance-map, md) * -1);
+      }
+
+      @each $size in button.$btn-non-default-sizes {
+        &.btn-#{$size} > span {
+          transform: translateX(map.get(button.$btn-animation-distance-map, $size) * -1);
+        }
+      }
+    }
   }
 }
 
-// .btn-animated:not(.btn-link, .btn-tertiary) {
-//   &::after {
-//     right: button.$btn-padding-x-md - button.$btn-animation-distance-md;
-//     transform: rotateZ(315deg)
-//       translate(button.$btn-border-width * -1, button.$btn-border-width * -1);
-//     border-right: button.$btn-border-width solid currentColor;
-//     border-bottom: button.$btn-border-width solid currentColor;
-//   }
-
-//   @each $size in button.$btn-non-default-sizes {
-//     &.btn-#{$size}::after {
-//       right: map.get(button.$btn-padding-x-map, $size) - map.get(
-//           button.$btn-animation-distance-map,
-//           $size
-//         );
-//     }
-//   }
-
-//   // Only animate when user prefers to see animations
-//   @media (prefers-reduced-motion: no-preference) {
-//     @include utilities.not-disabled-focus-hover() {
-//       > span {
-//         transform: translateX(map.get(button.$btn-animation-distance-map, md) * -1);
-//       }
-
-//       @each $size in button.$btn-non-default-sizes {
-//         &.btn-#{$size} > span {
-//           transform: translateX(map.get(button.$btn-animation-distance-map, $size) * -1);
-//         }
-//       }
-//     }
-//   }
-// }
-
-// .btn-animated-start:not(.btn-link, .btn-tertiary) {
-//   &::after {
-//     left: button.$btn-padding-x-md - button.$btn-animation-distance-md;
-//     transform: rotateZ(315deg) translate(button.$btn-border-width, button.$btn-border-width);
-//     border-left: button.$btn-border-width solid currentColor;
-//     border-top: button.$btn-border-width solid currentColor;
-//   }
-
-//   @each $size in button.$btn-non-default-sizes {
-//     &.btn-#{$size}::after {
-//       left: map.get(button.$btn-padding-x-map, $size) - map.get(
-//           button.$btn-animation-distance-map,
-//           $size
-//         );
-//     }
-//   }
-
-//   // Only animate when user prefers to see animations
-//   @media (prefers-reduced-motion: no-preference) {
-//     @include utilities.not-disabled-focus-hover() {
-//       > span {
-//         transform: translateX(map.get(button.$btn-animation-distance-map, md));
-//       }
-
-//       @each $size in button.$btn-non-default-sizes {
-//         &.btn-#{$size} > span {
-//           transform: translateX(map.get(button.$btn-animation-distance-map, $size));
-//         }
-//       }
-//     }
-//   }
-// }
+.btn-animated-start:not(.btn-link, .btn-tertiary) {
+  &::after {
+    @include icon-mx.icon(2110);
+    left: button.$btn-padding-x-md - button.$btn-animation-distance-md -
+      (button.$btn-font-size-md * 2 / 3);
+    transform: translateX(button.$btn-border-width);
+  }
+
+  @each $size in button.$btn-non-default-sizes {
+    &.btn-#{$size}::after {
+      left: map.get(button.$btn-padding-x-map, $size) - map.get(
+          button.$btn-animation-distance-map,
+          $size
+        ) -
+        (map.get(button.$btn-font-size-map, $size) * 2 / 3);
+    }
+  }
+
+  // Only animate when user prefers to see animations
+  @media (prefers-reduced-motion: no-preference) {
+    @include utilities.not-disabled-focus-hover() {
+      > span {
+        transform: translateX(map.get(button.$btn-animation-distance-map, md));
+      }
+
+      @each $size in button.$btn-non-default-sizes {
+        &.btn-#{$size} > span {
+          transform: translateX(map.get(button.$btn-animation-distance-map, $size));
+        }
+      }
+    }
+  }
+}
 
 // Size variants, default is rg
 @each $size in button.$btn-non-default-sizes {

From 4e3bb8c2cd3cee71cd28e781a32b673661960630 Mon Sep 17 00:00:00 2001
From: davidritter-dotcom <david.ritter.1@post.ch>
Date: Wed, 17 Apr 2024 16:33:06 +0200
Subject: [PATCH 7/7] feat(documentation, styles): add change set

---
 .changeset/six-owls-cry.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/six-owls-cry.md

diff --git a/.changeset/six-owls-cry.md b/.changeset/six-owls-cry.md
new file mode 100644
index 0000000000..46f219c0a9
--- /dev/null
+++ b/.changeset/six-owls-cry.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added the option for a Button animation to the left.