chore:use tokens and rename file

swisspost · Oct 2, 2024 · 601ce27 · 601ce27
1 parent eb67ee0
commit 601ce27
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 12 deletions.
diff --git a/...s/components/forms/footer/footer.docs.mdx → ...ts/forms/form-footer/form-footer.docs.mdx b/...s/components/forms/footer/footer.docs.mdx → ...ts/forms/form-footer/form-footer.docs.mdx
@@ -1,22 +1,22 @@
 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>
 
 <div className="lead">
   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/...components/forms/footer/footer.stories.ts → .../forms/form-footer/form-footer.stories.ts b/...components/forms/footer/footer.stories.ts → .../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
@@ -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;
   }
 }
-