fix: pull request changes

swisspost · Oct 4, 2024 · 8085412 · 8085412
1 parent 2effa05
commit 8085412
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 38 deletions.
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
@@ -3,37 +3,51 @@ import { html } from 'lit';
 import { MetaComponent } from '@root/types';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
+export const ArgsFormFooter = {
+  primaryButton:
+    '<button class="btn btn-primary">Send<post-icon aria-hidden="true" name="3020"></post-icon></button>',
+  secondaryButton: '<button class="btn btn-secondary">Cancel</button>',
+  tertiaryButton:
+    '<button class="btn btn-tertiary"><post-icon aria-hidden="true" name="3024"></post-icon>Back</button>',
+};
+
 const meta: MetaComponent = {
   id: 'f2eddf67-2c3c-40c4-bfec-df49bd028001',
   title: 'Components/Forms/Form Footer',
   tags: ['package:HTML'],
-  render: render,
+  render: renderFormFooter,
   parameters: {
     badges: [],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=1498-28215',
     },
   },
-  args: {
-    primaryButton:
-      '<button class="btn btn-primary">Send<post-icon aria-hidden="true" name="3020"></post-icon></button>',
-    secondaryButton: '<button class="btn btn-secondary">Cancel</button>',
-    tertiaryButton:
-      '<button class="btn btn-tertiary"><post-icon aria-hidden="true" name="3024"></post-icon>Back</button>',
-  },
+  args: ArgsFormFooter,
   argTypes: {
     primaryButton: {
       name: 'Primary button',
+      description: 'First button on the right',
       control: { type: 'text' },
+      table: {
+        category: 'Right actions',
+      },
     },
     secondaryButton: {
       name: 'Secondary button',
+      description: 'Second button on the right (optional)',
       control: { type: 'text' },
+      table: {
+        category: 'Right actions',
+      },
     },
     tertiaryButton: {
       name: 'Tertiary button',
+      description: 'Button on the left (optional)',
       control: { type: 'text' },
+      table: {
+        category: 'Left action',
+      },
     },
   },
 };
@@ -42,7 +56,7 @@ export default meta;
 
 type Story = StoryObj;
 
-function render(args: Args) {
+export function renderFormFooter(args: Args) {
   return html`
     <div class="form-footer">
       ${unsafeHTML(args.tertiaryButton)}

diff --git a/packages/documentation/src/stories/patterns/forms/forms.stories.ts b/packages/documentation/src/stories/patterns/forms/forms.stories.ts
@@ -1,6 +1,10 @@
 import { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaExtended } from '@root/types';
+import {
+  ArgsFormFooter,
+  renderFormFooter,
+} from '../../components/forms/form-footer/form-footer.stories';
 
 const meta: MetaExtended = {
   id: 'd83829b2-7de2-48d2-be64-07a80c9caef3',
@@ -354,19 +358,6 @@ export const Hints: Story = {
 };
 
 export const Footer: Story = {
-  render: () => html`
-    <div class="form-footer">
-      <button class="btn btn-tertiary">
-        <post-icon aria-hidden="true" name="3024"></post-icon>
-        Back
-      </button>
-      <div class="form-footer-right-actions">
-        <button class="btn btn-primary">
-          Send
-          <post-icon aria-hidden="true" name="3020"></post-icon>
-        </button>
-        <button class="btn btn-secondary">Cancel</button>
-      </div>
-    </div>
-  `,
+  render: renderFormFooter,
+  args: ArgsFormFooter,
 };
diff --git a/packages/styles/src/components/form-footer.scss b/packages/styles/src/components/form-footer.scss
@@ -12,25 +12,21 @@
 tokens.$default-map: components.$post-form-footer;
 
 .form-footer {
-  border-top: tokens.get('post-form-footer', 'post-form-footer-border-top-width') solid
-    tokens.get('post-form-footer', 'post-form-footer-border-top-color');
-  padding-top: tokens.get('post-form-footer', 'post-form-footer-padding-top-s');
+  border-block-start: tokens.get('form-footer', 'border-block-start-width')
+    tokens.get('form-footer', 'border-block-start-color');
+  border-block-start-style: tokens.get('form-footer', 'border-block-start-style');
+  padding-block-start: tokens.get('form-footer', 'padding-block-start');
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  gap: tokens.get('post-form-footer', 'post-form-footer-gap');
+  gap: tokens.get('form-footer', 'gap');
 
   &-right-actions {
     @include utility-mx.responsive-actions();
-    gap: tokens.get('post-form-footer', 'post-form-footer-gap');
-
-    @include media-breakpoint-up(md) {
-      margin-left: auto;
-    }
+    gap: tokens.get('form-footer', 'gap');
   }
 
   @include media-breakpoint-up(md) {
-    padding-top: tokens.get('post-form-footer', 'post-form-footer-padding-top-m');
     flex-direction: row;
   }
 }
diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss
@@ -185,5 +185,6 @@
 
   @include media-breakpoint-up(md) {
     flex-direction: row-reverse;
+    margin-left: auto;
   }
 }
diff --git a/packages/styles/src/tokens/_temp-form-footer.scss b/packages/styles/src/tokens/_temp-form-footer.scss
@@ -1,7 +1,7 @@
 $post-form-footer: (
-  post-form-footer-border-top-width: var(--post-core-dimension-2),
-  post-form-footer-border-top-color: var(--post-core-color-brand-black),
-  post-form-footer-padding-top-s: var(--post-core-dimension-24),
-  post-form-footer-padding-top-m: var(--post-core-dimension-32),
+  post-form-footer-border-block-start-width: var(--post-core-dimension-2),
+  post-form-footer-border-block-start-style: var(--post-core-border-style-solid),
+  post-form-footer-border-block-start-color: var(--post-core-color-brand-black),
+  post-form-footer-padding-block-start: var(--post-core-dimension-24),
   post-form-footer-gap: var(--post-core-dimension-8),
 );