update order of elements following the design review

swisspost · Oct 9, 2024 · 959ec60 · 959ec60
1 parent 124ac50
commit 959ec60
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/...es/documentation/src/stories/components/forms/form-footer/form-footer.snapshot.stories.ts b/...es/documentation/src/stories/components/forms/form-footer/form-footer.snapshot.stories.ts
@@ -25,14 +25,7 @@ export const FormFooter: Story = {
               }).map(
                 args => html`
                   <div class="form-footer">
-                    ${args.tertiaryButton
-                      ? html`
-                          <button class="btn btn-tertiary">
-                            <post-icon aria-hidden="true" name="3024"></post-icon>Back
-                          </button>
-                        `
-                      : null}
-                    <div class="form-footer-right-actions">
+                    <div class="form-footer-primary-actions">
                       <button class="btn btn-primary">
                         Send<post-icon aria-hidden="true" name="3020"></post-icon>
                       </button>
@@ -41,6 +34,13 @@ export const FormFooter: Story = {
                         ? html` <button class="btn btn-secondary">Cancel</button> `
                         : null}
                     </div>
+                    ${args.tertiaryButton
+                      ? html`
+                          <button class="btn btn-tertiary">
+                            <post-icon aria-hidden="true" name="3024"></post-icon>Back
+                          </button>
+                        `
+                      : null}
                   </div>
                 `,
               )}

diff --git a/packages/documentation/src/stories/components/forms/form-footer/form-footer.stories.ts b/packages/documentation/src/stories/components/forms/form-footer/form-footer.stories.ts
@@ -59,10 +59,10 @@ type Story = StoryObj;
 export function render(args: Args) {
   return html`
     <div class="form-footer">
-      ${unsafeHTML(args.tertiaryButton)}
-      <div class="form-footer-right-actions">
+      <div class="form-footer-primary-actions">
         ${unsafeHTML(args.primaryButton)} ${unsafeHTML(args.secondaryButton)}
       </div>
+      ${unsafeHTML(args.tertiaryButton)}
     </div>
   `;
 }

diff --git a/packages/styles/src/components/form-footer.scss b/packages/styles/src/components/form-footer.scss
@@ -12,7 +12,7 @@ tokens.$default-map: components.$post-form-footer;
   padding-block-start: tokens.get('form-footer', 'padding-block-start');
   gap: tokens.get('form-footer', 'gap');
 
-  &-right-actions {
+  &-primary-actions {
     gap: tokens.get('form-footer', 'gap');
   }
 }
diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss
@@ -185,10 +185,10 @@
   justify-content: space-between;
 
   @include media-breakpoint-up(md) {
-    flex-direction: row;
+    flex-direction: row-reverse;
   }
 
-  &-right-actions {
+  &-primary-actions {
     display: flex;
     flex-direction: column;