Merge pull request #1011 from Infineon/967-sidebar-implement-header-c…

…omponent Implemented sidebar header component
Infineon · Feb 27, 2024 · 2250104 · 2250104
2 parents 3ef5cd2 + bd3ee10
commit 2250104
Show file tree

Hide file tree

Showing 16 changed files with 73 additions and 123 deletions.
diff --git a/.github/workflows/github_pages_storybook_preview.yml b/.github/workflows/github_pages_storybook_preview.yml
@@ -38,7 +38,7 @@ jobs:
 
       - name: Install and Build
         run: |
-          npm i
+          npm install --scope=@infineon/infineon-design-system-stencil
           npm run build:storybook
 
       - name: Deploy preview

diff --git a/.github/workflows/shipit_pr_and_example_apps_deployment.yml b/.github/workflows/shipit_pr_and_example_apps_deployment.yml
@@ -35,7 +35,7 @@ jobs:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
         run: | 
-          npm install
+          npm install --scope=@infineon/infineon-design-system-stencil
           npm run build:components
           cd packages/components
           CANARY_VERSION=$(auto shipit --dry-run --quiet)

diff --git a/.gitignore b/.gitignore
@@ -117,5 +117,6 @@ packages/components/package-lock.json
 packages/components/stencil-components/
 packages/components/src/components.d.ts
 packages/components-vue/lib/components.ts
+packages/components-react/lib/components/stencil-generated/index.ts
 packages/components-angular/projects/component-library/src/lib/stencil-generated/components.ts
 packages/components/public-storybook/fonts/*
diff --git a/examples/stencil-components/vanilla-cdn/index.html b/examples/stencil-components/vanilla-cdn/index.html
@@ -24,7 +24,7 @@
       <ifx-navbar-item slot="left-item">Menu Item</ifx-navbar-item>
 
       <ifx-navbar-menu slot="menu">
-        <ifx-navbar-menu-item href="https://google.com" target="_blank">Item 1</ifx-navbar-menu-item>
+        <ifx-navbar-menu-item hrefs="https://google.com" target="_blank">Item 1</ifx-navbar-menu-item>
         <ifx-navbar-menu-item href="https://google.com">Item 2</ifx-navbar-menu-item>
         <ifx-navbar-menu-item href="https://google.com">Item 3</ifx-navbar-menu-item>
       </ifx-navbar-menu>
@@ -250,6 +250,7 @@ <h2>Spinner</h2>
 
 
     <h2>Sidebar</h2>
+
     <ifx-sidebar application-name="Application Name" initial-collapse = true copyright-text="">
       <ifx-sidebar-item>
         Header Section
@@ -262,25 +263,7 @@ <h2>Sidebar</h2>
           </ifx-sidebar-item>
         </ifx-sidebar-item>
       </ifx-sidebar-item>
-      <ifx-sidebar-item>
-        Header Section
-        <ifx-sidebar-item icon="image-16">
-          Menu Item
-          <ifx-sidebar-item id="sidebarItemClickable" target="_blank" icon="image-16">Click
-            me</ifx-sidebar-item>
-          <ifx-sidebar-item icon="image-16" active="true">
-            Menu Item 2
-          </ifx-sidebar-item>
-        </ifx-sidebar-item>
-        <ifx-sidebar-item icon="image-16">
-          Menu Item
-          <ifx-sidebar-item id="sidebarItemClickable" target="_blank" icon="image-16">Click
-            me</ifx-sidebar-item>
-          <ifx-sidebar-item icon="image-16" active="true">
-            Menu Item 2
-          </ifx-sidebar-item>
-        </ifx-sidebar-item>
-      </ifx-sidebar-item>
+      <ifx-sidebar-title>Item Header</ifx-sidebar-title>
       <ifx-sidebar-item href="http://google.com" target="_blank" icon="image-16">Item One</ifx-sidebar-item>
       <ifx-sidebar-item href="http://google.com" target="_blank" icon="image-16">Item Two</ifx-sidebar-item>
       <ifx-sidebar-item href="http://google.com" target="_blank" icon="image-16">Item Three</ifx-sidebar-item>

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components-angular/projects/component-library/src/lib/stencil-generated/index.ts b/packages/components-angular/projects/component-library/src/lib/stencil-generated/index.ts
@@ -51,6 +51,7 @@ export const DIRECTIVES = [
   d.IfxSelect,
   d.IfxSidebar,
   d.IfxSidebarItem,
+  d.IfxSidebarTitle,
   d.IfxSlider,
   d.IfxSpinner,
   d.IfxStatus,

diff --git a/packages/components-react/lib/components/stencil-generated/index.ts b/packages/components-react/lib/components/stencil-generated/index.ts
@@ -56,6 +56,7 @@ export const IfxSearchField = /*@__PURE__*/createReactComponent<JSX.IfxSearchFie
 export const IfxSelect = /*@__PURE__*/createReactComponent<JSX.IfxSelect, HTMLIfxSelectElement>('ifx-select');
 export const IfxSidebar = /*@__PURE__*/createReactComponent<JSX.IfxSidebar, HTMLIfxSidebarElement>('ifx-sidebar');
 export const IfxSidebarItem = /*@__PURE__*/createReactComponent<JSX.IfxSidebarItem, HTMLIfxSidebarItemElement>('ifx-sidebar-item');
+export const IfxSidebarTitle = /*@__PURE__*/createReactComponent<JSX.IfxSidebarTitle, HTMLIfxSidebarTitleElement>('ifx-sidebar-title');
 export const IfxSlider = /*@__PURE__*/createReactComponent<JSX.IfxSlider, HTMLIfxSliderElement>('ifx-slider');
 export const IfxSpinner = /*@__PURE__*/createReactComponent<JSX.IfxSpinner, HTMLIfxSpinnerElement>('ifx-spinner');
 export const IfxStatus = /*@__PURE__*/createReactComponent<JSX.IfxStatus, HTMLIfxStatusElement>('ifx-status');

diff --git a/packages/components-react/package.json b/packages/components-react/package.json
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.2",
-    "@infineon/infineon-design-system-stencil": "^20.44.1--canary.952.e2740b8e640aa78a0a199512580d52d96004104f.0"
+    "@infineon/infineon-design-system-stencil": "^20.44.1--canary.952.29ea2a18eefabbef614e5db57fc3998b4734a85a.0"
   },
   "auto": {
     "plugins": [

diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts
@@ -430,6 +430,9 @@ export const IfxSidebarItem = /*@__PURE__*/ defineContainer<JSX.IfxSidebarItem>(
 ]);
 
 
+export const IfxSidebarTitle = /*@__PURE__*/ defineContainer<JSX.IfxSidebarTitle>('ifx-sidebar-title', undefined);
+
+
 export const IfxSlider = /*@__PURE__*/ defineContainer<JSX.IfxSlider>('ifx-slider', undefined, [
   'min',
   'max',

diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.2",
-    "@infineon/infineon-design-system-stencil": "^20.44.1--canary.952.e2740b8e640aa78a0a199512580d52d96004104f.0"
+    "@infineon/infineon-design-system-stencil": "^20.44.1--canary.952.29ea2a18eefabbef614e5db57fc3998b4734a85a.0"
   },
   "auto": {
     "plugins": [

diff --git a/packages/components/src/components/sidebar/readme.md b/packages/components/src/components/sidebar/readme.md
@@ -5,77 +5,6 @@
 <!-- Auto Generated Below -->
 
 
-## Properties
-
-| Property          | Attribute          | Description | Type                          | Default     |
-| ----------------- | ------------------ | ----------- | ----------------------------- | ----------- |
-| `active`          | `active`           |             | `boolean`                     | `false`     |
-| `handleItemClick` | --                 |             | `(item: HTMLElement) => void` | `undefined` |
-| `href`            | `href`             |             | `string`                      | `""`        |
-| `icon`            | `icon`             |             | `string`                      | `""`        |
-| `isActionItem`    | `is-action-item`   |             | `boolean`                     | `false`     |
-| `numberIndicator` | `number-indicator` |             | `number`                      | `undefined` |
-| `target`          | `target`           |             | `string`                      | `"_self"`   |
-| `value`           | `value`            |             | `string`                      | `""`        |
-
-
-## Events
-
-| Event                      | Description | Type               |
-| -------------------------- | ----------- | ------------------ |
-| `ifxSidebarActionItem`     |             | `CustomEvent<any>` |
-| `ifxSidebarMenu`           |             | `CustomEvent<any>` |
-| `ifxSidebarNavigationItem` |             | `CustomEvent<any>` |
-
-
-## Methods
-
-### `expandMenu(ac: boolean) => Promise<void>`
-
-
-
-#### Returns
-
-Type: `Promise<void>`
-
-
-
-### `isItemExpandable() => Promise<boolean>`
-
-
-
-#### Returns
-
-Type: `Promise<boolean>`
-
-
-
-### `setActiveClasses() => Promise<void>`
-
-
-
-#### Returns
-
-Type: `Promise<void>`
-
-
-
-
-## Dependencies
-
-### Depends on
-
-- [ifx-icon](../icon)
-- [ifx-number-indicator](../number-indicator)
-
-### Graph
-```mermaid
-graph TD;
-  ifx-sidebar-item --> ifx-icon
-  ifx-sidebar-item --> ifx-number-indicator
-  style ifx-sidebar-item fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/sidebar/sidebar-title.scss b/packages/components/src/components/sidebar/sidebar-title.scss
@@ -0,0 +1,21 @@
+@use "~@infineon/design-system-tokens/dist/tokens";
+@use "../../global/font.scss";
+
+:host {
+    position: relative;
+}
+
+.sidebar__title {
+    width: 100%;
+    height: fit-content;
+    border-top: 1px solid tokens.$ifxColorEngineering200;
+    padding: 12px 0;
+}
+
+.sidebar__title-label {
+    height: 20px;
+    font: tokens.$ifxEyebrowEyebrow02;
+    text-transform: uppercase;
+    color: tokens.$ifxColorEngineering500;
+    letter-spacing: 3px;
+}
diff --git a/packages/components/src/components/sidebar/sidebar-title.tsx b/packages/components/src/components/sidebar/sidebar-title.tsx
@@ -0,0 +1,21 @@
+import { Component, h, Element } from '@stencil/core';
+
+@Component({
+    tag: 'ifx-sidebar-title',
+    styleUrl: 'sidebar-title.scss',
+    shadow: true
+})
+
+export class SidebarTitle {
+    @Element() el;
+
+    render() {
+        return(
+            <div class = 'sidebar__title'>
+                <div class = 'sidebar__title-label'>
+                    <slot />
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/packages/components/src/components/sidebar/sidebar.scss b/packages/components/src/components/sidebar/sidebar.scss
@@ -99,7 +99,7 @@
       flex: 1 1 auto;
       order: 1;
       width: 100%;
-      overflow-y: auto;
+      // overflow-y: auto;
 
       & ::slotted(*) {
         width: 100%;

diff --git a/packages/components/src/components/sidebar/sidebar.stories.ts b/packages/components/src/components/sidebar/sidebar.stories.ts
@@ -53,48 +53,38 @@ const DefaultTemplate = (args) => {
   sidebarElement.addEventListener('ifxSidebarMenu', action(`ifxSidebarMenu`));
   sidebarElement.setAttribute('show-header', args.showHeader);
   sidebarElement.setAttribute('show-footer', args.showFooter);
+
+  const sidebarTitleElement = document.createElement('ifx-sidebar-title');
+  sidebarTitleElement.innerHTML = 'Title';
+  sidebarElement.appendChild(sidebarTitleElement);
   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 => {
     const itemElement = document.createElement('ifx-sidebar-item') as HTMLIfxSidebarItemElement;
     itemElement.setAttribute('href', "http://google.com");
     itemElement.setAttribute('target', "_blank");
     itemElement.setAttribute('is-action-item', "false");
-    
+
     if (args.icon) {
       itemElement.setAttribute('icon', 'image-16');
     }
     itemElement.textContent = itemTitle;
-    
+
     // Append the item to the sidebar
     sidebarElement.appendChild(itemElement);
   });
-
-  const subItemElement1 = document.createElement('ifx-sidebar-item') as HTMLIfxSidebarItemElement;
-  subItemElement1.setAttribute('href', "http://google.com");
-  subItemElement1.setAttribute('target', "_blank");
-  subItemElement1.setAttribute('is-action-item', "false");
-  subItemElement1.textContent = 'Sub Item 1';
-  subItemElement1.setAttribute('active', 'true')
-  const subItemElement2 = document.createElement('ifx-sidebar-item') as HTMLIfxSidebarItemElement;
-  subItemElement2.setAttribute('href', "http://google.com");
-  subItemElement2.setAttribute('target', "_blank");
-  subItemElement2.setAttribute('is-action-item', "false");
-  subItemElement2.textContent = 'Sub Item 2';
-
-  const firstItem = sidebarElement.querySelectorAll('ifx-sidebar-item')[0];
-  firstItem.append(subItemElement1, subItemElement2)
-  firstItem.setAttribute('href', '');
-  // thirdItem.setAttribute('active', 'true') //first submenu item
-
-
+
+
+  const thirdItem = sidebarElement.querySelectorAll('ifx-sidebar-item')[2];
+  thirdItem.setAttribute('active', 'true') //first submenu item
+
+
   return sidebarElement;
 };
 
@@ -111,7 +101,7 @@ const SubmenuTemplate = (args) => {
   sidebarElement.addEventListener('ifxSidebarActionItem', action('ifxSidebarActionItem'));
   sidebarElement.addEventListener('ifxSidebarMenu', action('ifxSidebarMenu'));
   sidebarElement.setAttribute('initial-collapse', args.initialCollapse);
-  
+
   // Create 3 sections
   for (let i = 0; i < 3; i++) {
     const sectionElement = document.createElement('ifx-sidebar-item');

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