From 601ce271e308fb462c8890d82eb3465e7014f1cf Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Wed, 2 Oct 2024 17:28:49 +0200
Subject: [PATCH] chore:use tokens and rename file

---
 .../form-footer.docs.mdx}                        | 10 +++++-----
 .../form-footer.stories.ts}                      |  2 +-
 packages/styles/src/components/form-footer.scss  | 16 ++++++++++------
 3 files changed, 16 insertions(+), 12 deletions(-)
 rename packages/documentation/src/stories/components/forms/{footer/footer.docs.mdx => form-footer/form-footer.docs.mdx} (62%)
 rename packages/documentation/src/stories/components/forms/{footer/footer.stories.ts => form-footer/form-footer.stories.ts} (96%)

diff --git a/packages/documentation/src/stories/components/forms/footer/footer.docs.mdx b/packages/documentation/src/stories/components/forms/form-footer/form-footer.docs.mdx
similarity index 62%
rename from packages/documentation/src/stories/components/forms/footer/footer.docs.mdx
rename to packages/documentation/src/stories/components/forms/form-footer/form-footer.docs.mdx
index 3c27856f88..c76cbddae2 100644
--- a/packages/documentation/src/stories/components/forms/footer/footer.docs.mdx
+++ b/packages/documentation/src/stories/components/forms/form-footer/form-footer.docs.mdx
@@ -1,14 +1,14 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
-import * as FooterStories from './footer.stories';
+import * as FormFooterStories from './form-footer.stories';
 import StylesPackageImport from '@/shared/styles-package-import.mdx';
 
-<Meta of={FooterStories} />
+<Meta of={FormFooterStories} />
 
 <div className="docs-title">
   # Footer
 
   <nav>
-    <link-design of={JSON.stringify(FooterStories)}></link-design>
+    <link-design of={JSON.stringify(FormFooterStories)}></link-design>
   </nav>
 </div>
 
@@ -16,7 +16,7 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
   The form footer is placed at the end/bottom of a form or a form step, in case the form is splitted with a stepper. It provides workflow-related actions to the form or form step.
 </div>
 
-<Canvas sourceState="shown" of={FooterStories.Default} />
+<Canvas sourceState="shown" of={FormFooterStories.Default} />
 <div className="hide-col-default">
-  <Controls of={FooterStories.Default} />
+  <Controls of={FormFooterStories.Default} />
 </div>
diff --git a/packages/documentation/src/stories/components/forms/footer/footer.stories.ts b/packages/documentation/src/stories/components/forms/form-footer/form-footer.stories.ts
similarity index 96%
rename from packages/documentation/src/stories/components/forms/footer/footer.stories.ts
rename to packages/documentation/src/stories/components/forms/form-footer/form-footer.stories.ts
index fa0933dbcb..d1c7d5e97c 100644
--- a/packages/documentation/src/stories/components/forms/footer/footer.stories.ts
+++ b/packages/documentation/src/stories/components/forms/form-footer/form-footer.stories.ts
@@ -5,7 +5,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 const meta: MetaComponent = {
   id: 'f2eddf67-2c3c-40c4-bfec-df49bd028001',
-  title: 'Components/Forms/Footer',
+  title: 'Components/Forms/Form Footer',
   tags: ['package:HTML'],
   render: render,
   parameters: {
diff --git a/packages/styles/src/components/form-footer.scss b/packages/styles/src/components/form-footer.scss
index 97687e62a9..911e130715 100644
--- a/packages/styles/src/components/form-footer.scss
+++ b/packages/styles/src/components/form-footer.scss
@@ -6,23 +6,27 @@
 @use '../variables/spacing';
 @use './../variables/breakpoints';
 @use '../mixins/utilities' as utility-mx;
+@use '../tokens/components' as components;
+@use '../functions/tokens' as tokens;
+
+tokens.$default-map: components.$post-form-footer;
 
 .form-footer {
-  border-top: $border-thick solid $black;
-  padding-top: $size-large;
+  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');
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  gap: $size-mini;
+  gap: tokens.get('post-form-footer', 'post-form-footer-gap');
 
   &-right-actions {
     @include utility-mx.responsive-actions();
-    gap: $size-mini;
+    gap: tokens.get('post-form-footer', 'post-form-footer-gap');
   }
 
   @include media-breakpoint-up(md) {
-    padding-top: $size-big;
+    padding-top: tokens.get('post-form-footer', 'post-form-footer-padding-top-m');
     flex-direction: row;
   }
 }
-