remove variant property from footer

Infineon · Sep 12, 2024 · 6d2b246 · 6d2b246
1 parent 6ec9165
commit 6d2b246
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 116 deletions.
diff --git a/packages/components/src/components/footer/footer.scss b/packages/components/src/components/footer/footer.scss
@@ -21,6 +21,10 @@
     flex-direction: column;
     width: 100%;
 
+    @media (max-width: 768px) {
+      margin-top: tokens.$ifxSpace600;
+    }
+
     & .footer__logo_top {
       svg {
         display: none; // Logo (when variant=large) is hidden by default
@@ -31,21 +35,28 @@
       }
     }
 
+    & .footer__logo_btm {
+      svg {
+        display: inline; // Logo is shown by default
+        vertical-align: bottom;
+      }
+    }
 
-    & .large {
+
+    & .col-wrapper {
       display: flex;
       align-items: flex-start;
       width: 100%;
       justify-content: space-between;
-
+      margin: tokens.$ifxSpace400 0;
 
       @media (max-width: 768px) {
         // Adjust this value to the breakpoint you want
         flex-wrap: wrap;
         justify-content: space-between; // Ensures that there is space between the columns if the width allows it
+        margin: tokens.$ifxSpace300 0;
       }
 
-
       & ::slotted([slot=col]) {
         display: flex;
         gap: tokens.$ifxSpace400;
@@ -66,7 +77,7 @@
       width: 100%;
       padding: 24px 0;
       border-bottom: 1px solid #BFBBBB;
-      margin-top: tokens.$ifxSpace600;
+      margin-top: tokens.$ifxSpace300;
 
       & .footer__logo_btm {
         svg {
@@ -75,48 +86,13 @@
 
           @media (max-width: 768px) {
             display: none; // Logo at the bottom (when variant=large) is hidden by default
-
           }
         }
       }
 
       @media (max-width: 768px) {
         // Adjust this value according to your design breakpoints
-        margin-top: tokens.$ifxSpace300;
-        flex-direction: column;
-        align-items: flex-start;
-      }
-
-      ::slotted([slot=socials]) {
-        display: flex;
-        gap: tokens.$ifxSpace400;
-
-        @media (max-width: 768px) {
-          // Adjust this value according to your design breakpoints
-          flex-wrap: wrap;
-          margin-top: tokens.$ifxSpace300;
-        }
-      }
-    }
-
-    & .medium {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 100%;
-      padding: 24px 0;
-      border-bottom: 1px solid #BFBBBB;
-
-
-
-      & .footer__logo_default {
-        & svg {
-          vertical-align: bottom;
-        }
-      }
-
-      @media (max-width: 768px) {
-        // Adjust this value according to your design breakpoints
+        margin-top: 0px;
         flex-direction: column;
         align-items: flex-start;
       }
@@ -128,18 +104,16 @@
         @media (max-width: 768px) {
           // Adjust this value according to your design breakpoints
           flex-wrap: wrap;
-          margin-top: tokens.$ifxSpace300;
         }
       }
     }
 
 
-
     & .footer__base {
       display: flex;
       justify-content: space-between;
       width: 100%;
-      padding: 28px 0;
+      padding: tokens.$ifxSpace300 0;
 
       & .footer__brand {
         font-style: normal;

diff --git a/packages/components/src/components/footer/footer.stories.ts b/packages/components/src/components/footer/footer.stories.ts
@@ -2,22 +2,16 @@ export default {
   title: 'Components/Footer',
   tags: ['autodocs'],
   args: {
-    variant: 'medium',
     copyrightText: '© 1999 - 2024 Infineon Technologies AG',
   },
   argTypes: {
-    variant: {
-      options: ['small', 'medium', 'large'],
-      control: { type: 'radio' },
-    },
     copyrightText: { control: 'text' },
   },
 };
 
 const DefaultTemplate = args => {
   return `
-    <ifx-footer variant="${args.variant}" 
-              copyright-text="${args.copyrightText}">
+    <ifx-footer copyright-text="${args.copyrightText}">
     <div slot="socials">
       <ifx-link variant="title" href="http://facebook.com/infineon">
         <ifx-icon icon="facebook"></ifx-icon>
@@ -49,12 +43,19 @@ const DefaultTemplate = args => {
 
 export const Medium = DefaultTemplate.bind({});
 
-const SmallTemplate = () => `<ifx-footer variant="small"></ifx-footer>`;
+const SmallTemplate = () => `<ifx-footer variant="small">
+    <div slot="info">
+      <ifx-link variant="menu" href="https://yourwebsite.com/terms" target="_blank">Terms</ifx-link>
+      <ifx-link variant="menu" href="https://yourwebsite.com/imprint" target="_blank">Imprint</ifx-link>
+      <ifx-link variant="menu" href="https://yourwebsite.com/privacy-policy" target="_blank">Privacy policy</ifx-link>
+      <ifx-link variant="menu" href="https://yourwebsite.com/glossary" target="_blank">Glossary</ifx-link>
+    </div>
+  </ifx-footer>`;
 
 export const Small = SmallTemplate.bind({});
 
 const LargeTemplate = () =>
-  `<ifx-footer variant="large">
+  `<ifx-footer>
   <ifx-footer-column slot="col">
     <h5 slot="title">Title</h5>
     <ifx-link href="#" variant="underlined" slot="link">Footer Link</ifx-link>
@@ -103,6 +104,12 @@ const LargeTemplate = () =>
       <ifx-icon icon="xing"></ifx-icon>
     </ifx-link>
   </div>
+  <div slot="info">
+    <ifx-link variant="menu" href="https://yourwebsite.com/terms" target="_blank">Terms</ifx-link>
+    <ifx-link variant="menu" href="https://yourwebsite.com/imprint" target="_blank">Imprint</ifx-link>
+    <ifx-link variant="menu" href="https://yourwebsite.com/privacy-policy" target="_blank">Privacy policy</ifx-link>
+    <ifx-link variant="menu" href="https://yourwebsite.com/glossary" target="_blank">Glossary</ifx-link>
+  </div>
 </ifx-footer>`;
 
 export const Large = LargeTemplate.bind({});