Merge pull request #994 from Infineon/992-sidebar-links-should-be-rem…

…ovable Sidebar: links are now removable
Infineon · Feb 27, 2024 · 2f242ed · 2f242ed
2 parents f9c0a1e + 33c3cce
commit 2f242ed
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 24 deletions.
diff --git a/examples/stencil-components/vanilla-cdn/index.html b/examples/stencil-components/vanilla-cdn/index.html
@@ -250,7 +250,7 @@ <h2>Spinner</h2>
 
 
     <h2>Sidebar</h2>
-    <ifx-sidebar application-name="Application Name" initial-collapse = false>
+    <ifx-sidebar application-name="Application Name" initial-collapse = true copyright-text="">
       <ifx-sidebar-item>
         Header Section
         <ifx-sidebar-item icon="image-16">

diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts
@@ -404,13 +404,14 @@ export const IfxSelect = /*@__PURE__*/ defineContainer<JSX.IfxSelect>('ifx-selec
 
 export const IfxSidebar = /*@__PURE__*/ defineContainer<JSX.IfxSidebar>('ifx-sidebar', undefined, [
   'applicationName',
+  'initialCollapse',
+  'showFooter',
+  'showHeader',
   'termsOfUse',
   'imprint',
-  'initialCollapse',
   'privacyPolicy',
   'target',
-  'showFooter',
-  'showHeader'
+  'copyrightText'
 ]);
 
 

diff --git a/packages/components/src/components/sidebar/sidebar.scss b/packages/components/src/components/sidebar/sidebar.scss
@@ -129,6 +129,7 @@
       flex: none;
       order: 0;
       flex-grow: 0;
+      width: 100%;
 
       & .sidebar__footer-wrapper-top-links {
         display: flex;
@@ -195,7 +196,7 @@
         flex-direction: column;
         align-items: center;
 
-        & a {
+        & span {
           font-style: normal;
           font-weight: 400;
           font-size: tokens.$ifxFontSizeS;
@@ -209,11 +210,6 @@
           &:hover {
             cursor: initial;
           }
-
-          &:focus {
-            outline: none;
-            color: #08665C;
-          }
         }
       }
     }

diff --git a/packages/components/src/components/sidebar/sidebar.stories.ts b/packages/components/src/components/sidebar/sidebar.stories.ts
@@ -8,8 +8,12 @@ export default {
     icon: true,
     applicationName: 'Application Name',
     showFooter: true,
-    initialCollapse: true,
     showHeader: true,
+    initialCollapse: true,
+    termsOfUse: 'https://yourwebsite.com/terms',
+    imprint: 'https://yourwebsite.com/imprint',
+    privacyPolicy: 'https://yourwebsite.com/privacy-policy',
+    copyrightText: `© 1999 - ${new Date().getFullYear()} Infineon Technologies AG`
   },
 
   argTypes: {
@@ -25,6 +29,16 @@ export default {
       action: 'ifxSidebarMenu',
       description: 'Custom event emitted when a menu is expanded or closed',
     },
+    imprint: {
+      if: { arg: 'showFooter', eq: true}
+    },
+    termsOfUse: {
+      if: { arg: 'showFooter', eq: true}
+    },
+    privacyPolicy: {
+      if: { arg: 'showFooter', eq: true}
+    },
+
 
   },
 };
@@ -41,6 +55,11 @@ const DefaultTemplate = (args) => {
   sidebarElement.setAttribute('show-footer', args.showFooter);
   sidebarElement.setAttribute('initial-collapse', args.initialCollapse);
 
+  sidebarElement.setAttribute('terms-of-use', args.termsOfUse);
+  sidebarElement.setAttribute('imprint', args.imprint);
+  sidebarElement.setAttribute('privacy-policy', args.privacyPolicy);
+  sidebarElement.setAttribute('copyright-text', args.copyrightText);
+
   const items = ["Item One", "Item Two", "Item Three", "Item Four"];
 
   items.forEach(itemTitle => {

diff --git a/packages/components/src/components/sidebar/sidebar.tsx b/packages/components/src/components/sidebar/sidebar.tsx
@@ -13,16 +13,19 @@ const SIDEBAR_ITEM = '.sidebar__nav-item';
 export class Sidebar {
   @Element() el;
   @Prop() applicationName: string = ''
-  @Prop() termsOfUse: string = ""
-  @Prop() imprint: string = ""
   @Prop() initialCollapse: boolean = true
-  @Prop() privacyPolicy: string = ""
-  @Prop() target: string = "_self"
   @Prop() showFooter: boolean = true
   @Prop() showHeader: boolean = true;
+  @Prop() termsOfUse: string = "#"
+  @Prop() imprint: string = "#"
+  @Prop() privacyPolicy: string = "#"
+  @Prop() target: string = "_blank"
+  @State() currentYear: number = new Date().getFullYear()
+  @Prop() copyrightText: string = '© 1999 - ' + this.currentYear + ' Infineon Technologies AG'
   @State() internalTermsofUse: string = ""
   @State() internalImprint: string = ""
   @State() internalPrivacyPolicy: string = ""
+
   @State() activeItem: HTMLElement | null = null;
 
   expandActiveItems(){
@@ -297,9 +300,9 @@ export class Sidebar {
 
 
   componentWillLoad() {
-    this.internalTermsofUse = this.termsOfUse || 'Not available';
-    this.internalPrivacyPolicy = this.privacyPolicy || 'Not available';
-    this.internalImprint = this.imprint || 'Not available';
+    this.internalTermsofUse = this.termsOfUse.trim();
+    this.internalPrivacyPolicy = this.privacyPolicy.trim();
+    this.internalImprint = this.imprint.trim();
   }
 
   render() {
@@ -337,16 +340,26 @@ export class Sidebar {
             <div class="sidebar__footer-wrapper">
               <div class='sidebar__footer-wrapper-top-links'>
                 <div class="sidebar__footer-wrapper-top-line">
-                  <a target={this.target} href={this.internalTermsofUse}>Terms of use</a>
-                  <a target={this.target} href={this.internalImprint}>Imprint</a>
+                  {
+                    this.internalTermsofUse !== ''  && <a target={this.target} href={this.internalTermsofUse}>Terms of use</a>
+                  }
+                  {
+                    this.internalImprint !== '' && <a target={this.target} href={this.internalImprint}>Imprint</a>
+                  }
                 </div>
                 <div class="sidebar__footer-wrapper-bottom-line">
-                  <a target={this.target} href={this.internalPrivacyPolicy}>Privacy policy</a>
+                  {
+                    this.internalPrivacyPolicy !== '' && <a target={this.target} href={this.internalPrivacyPolicy}>Privacy policy</a>
+                  }
                 </div>
               </div>
-              <div class='sidebar__footer-wrapper-bottom-links'>
-                <a href='https://www.infineon.com/'>© 1999 - 2023 Infineon Technologies AG</a>
-              </div>
+
+              {
+                this.copyrightText &&
+                <div class='sidebar__footer-wrapper-bottom-links'>
+                    <span>{this.copyrightText}</span>
+                </div>
+              }
             </div>
           </div>
         }

diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -20,6 +20,7 @@
 </head>
 
 <body>
+
 </body>
 
 </html>