feat: support custom header elements

six-group · Nov 13, 2024 · 63804ad · 63804ad
1 parent 513eb55
commit 63804ad
Show file tree

Hide file tree

Showing 27 changed files with 1,186 additions and 307 deletions.
diff --git a/docs/components/component.tags.mts b/docs/components/component.tags.mts
@@ -1 +1 @@
-export const components = ["six-alert","six-avatar","six-badge","six-button","six-card","six-checkbox","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"];
+export const components = ["six-alert","six-avatar","six-badge","six-button","six-card","six-checkbox","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-header-item","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-logo","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"];
diff --git a/docs/components/six-header-item.md b/docs/components/six-header-item.md
@@ -0,0 +1,59 @@
+# six-header
+
+
+## Header Item
+
+<docs-demo-six-header-item-0></docs-demo-six-header-item-0>
+
+```html
+<six-header-item>
+  <six-icon-button name="search"></six-icon-button>
+</six-header-item>
+```
+
+
+### Active State
+
+<docs-demo-six-header-item-1></docs-demo-six-header-item-1>
+
+```html
+<six-header-item active>
+  <six-icon-button name="search"></six-icon-button>
+</six-header-item>
+```
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description                                     | Type      | Default |
+| -------- | --------- | ----------------------------------------------- | --------- | ------- |
+| `active` | `active`  | Whether the header item is displayed as active. | `boolean` | `false` |
+
+
+## Shadow Parts
+
+| Part     | Description |
+| -------- | ----------- |
+| `"base"` |             |
+
+
+## Dependencies
+
+### Used by
+
+ - [six-header](six-header.html)
+
+### Graph
+```mermaid
+graph TD;
+  six-header --> six-header-item
+  style six-header-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+Copyright © 2021-present SIX-Group
diff --git a/docs/components/six-header.md b/docs/components/six-header.md
@@ -243,7 +243,6 @@ You can enforce the search bar to be open or closed by setting the `open-search`
 ```
 
 
-
 ### Execute callback on logo clicked
 
 In case you want to e.g. navigate to the dashboard when the header logo is clicked simply listen to the `six-header-logo-clicked` event and set the `clickable-logo` attribute
@@ -264,21 +263,135 @@ In case you want to e.g. navigate to the dashboard when the header logo is click
 ```
 
 
+### Custom Header
+
+If you'd like more flexibility in customizing the header content, you can create your own layout using `six-header-item` elements rather than using the default slots. Just be sure to follow the SIX corporate styling guidelines.
+
+<docs-demo-six-header-5></docs-demo-six-header-5>
+
+```html
+<six-header custom>
+  <six-header-item>
+    <six-icon-button name="menu"></six-icon-button>
+  </six-header-item>
+  <six-header-item>
+    <six-logo></six-logo>
+  </six-header-item>
+  <six-header-item class="custom-header-item">
+    <div class="custom-item">
+      <six-input class="custom-part-child"></six-input>
+      <six-button type="secondary" class="custom-part-child">Start</six-button>
+    </div>
+  </six-header-item>
+
+  
+  <six-header-item>
+    <six-icon-button name="settings"></six-icon-button>
+  </six-header-item>
+
+  
+  <six-header-item id="custom-app-header-item">
+    <six-dropdown id="custom-app-dropdown" hoist distance="14" skidding="20" placement="bottom-end">
+      <six-button type="secondary" slot="trigger" class="app-trigger">
+        <span slot="suffix"><six-icon>apps</six-icon></span>
+        Custody
+      </six-button>
+      <six-menu>
+        <six-menu-item checked>Custody</six-menu-item>
+        <six-menu-item>Swiss Interbank Clearing</six-menu-item>
+        <six-menu-item>Tri-Party Agent</six-menu-item>
+        <six-menu-item>Financial Information</six-menu-item>
+      </six-menu>
+    </six-dropdown>
+  </six-header-item>
+
+  
+  <six-header-item id="custom-profile-header-item">
+    <six-dropdown id="custom-profile-dropdown" hoist distance="18" skidding="20" placement="bottom-end">
+      <six-icon-button slot="trigger">
+        <six-avatar                   image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
+        >
+        </six-avatar>
+      </six-icon-button>
+      <six-menu>
+        <six-menu-item><b>Cat Kittens</b><br>cat.kitty.kittens@themCatsBeCool.com</six-menu-item>
+        <six-menu-item><b>Language</b><br><six-language-switcher></six-language-switcher></six-menu-item>
+        <six-menu-item>Change password</six-menu-item>
+        <six-menu-item>Logout</six-menu-item>
+      </six-menu>
+    </six-dropdown>
+  </six-header-item>
+</six-header>
+<style>
+  six-header-item.custom-header-item,
+  six-header-item.custom-header-item::part(base) {
+    flex: 1 0 0;
+  }
+  .custom-item {
+    flex: 1 0 0;
+    display: flex;
+    gap: var(--six-spacing-medium);
+  }
+  .custom-item six-input {
+    flex: 1 0 0;
+  }
+  six-button.app-trigger::part(base) {
+    border: none;
+    padding-right: 0;
+  }
+  six-button.app-trigger::part(label) {
+    border: none;
+    font-weight: var(--six-font-weight-bold);
+    font-size: var(--six-font-size-small);
+    padding-left: 0;
+  }
+  .app-trigger:focus::part(base),
+  .app-trigger:hover::part(base),
+  .app-trigger:active::part(base) {
+    background-color: initial;
+    border-color: initial;
+  }
+  .app-trigger:hover::part(base),
+  .app-trigger:active::part(base) {
+    color: var(--six-header-selected-app-color-hover);
+  }
+
+  six-header[custom] {
+    margin-bottom: 10rem;
+  }
+</style>
+<script type="module">
+  function setupActiveState(headerItem, dropdown) {
+    dropdown.addEventListener('six-dropdown-show', () => (headerItem.active = true));
+    dropdown.addEventListener('six-dropdown-hide', () => (headerItem.active = false));
+  }
+  setupActiveState(
+    document.getElementById('custom-app-header-item'),
+    document.getElementById('custom-app-dropdown')
+  );
+  setupActiveState(
+    document.getElementById('custom-profile-header-item'),
+    document.getElementById('custom-profile-dropdown')
+  );
+</script>
+```
+
 
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property            | Attribute             | Description                                                               | Type             | Default |
-| ------------------- | --------------------- | ------------------------------------------------------------------------- | ---------------- | ------- |
-| `clickableLogo`     | `clickable-logo`      | Set whether the logo should be clickable                                  | `boolean`        | `false` |
-| `hideHamburgerMenu` | `hide-hamburger-menu` | Set whether the hamburger menu should be visible or not                   | `boolean`        | `false` |
-| `logo`              | `logo`                | The displayed logo. Either six or bme. Defaults to six.                   | `"bme" \| "six"` | `'six'` |
-| `openHamburgerMenu` | `open-hamburger-menu` | Set the hamburger menu icon to open or closed state                       | `boolean`        | `false` |
-| `openSearch`        | `open-search`         | Set the header search to be in an open or closed state                    | `boolean`        | `false` |
-| `shiftContent`      | `shift-content`       | Indicates if content should be shifted down when search field is visible. | `boolean`        | `false` |
+| Property            | Attribute             | Description                                                                                                                                                                     | Type             | Default |
+| ------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ------- |
+| `clickableLogo`     | `clickable-logo`      | Set whether the logo should be clickable                                                                                                                                        | `boolean`        | `false` |
+| `custom`            | `custom`              | Set `custom` to `true` for complete control over the header content. When enabled, all other properties and slots are ignored.  Use `six-header-item` to structure the content. | `boolean`        | `false` |
+| `hideHamburgerMenu` | `hide-hamburger-menu` | Set whether the hamburger menu should be visible or not                                                                                                                         | `boolean`        | `false` |
+| `logo`              | `logo`                | The displayed logo. Either six or bme. Defaults to six.                                                                                                                         | `"bme" \| "six"` | `'six'` |
+| `openHamburgerMenu` | `open-hamburger-menu` | Set the hamburger menu icon to open or closed state                                                                                                                             | `boolean`        | `false` |
+| `openSearch`        | `open-search`         | Set the header search to be in an open or closed state                                                                                                                          | `boolean`        | `false` |
+| `shiftContent`      | `shift-content`       | Indicates if content should be shifted down when search field is visible.                                                                                                       | `boolean`        | `false` |
 
 
 ## Events
@@ -345,14 +458,18 @@ Type: `Promise<void>`
 
 ### Depends on
 
+- [six-header-item](six-header-item.html)
 - [six-icon-button](six-icon-button.html)
 - [six-dropdown](six-dropdown.html)
+- [six-logo](six-logo.html)
 
 ### Graph
 ```mermaid
 graph TD;
+  six-header --> six-header-item
   six-header --> six-icon-button
   six-header --> six-dropdown
+  six-header --> six-logo
   six-icon-button --> six-icon
   six-dropdown --> six-menu-item
   six-dropdown --> six-input

diff --git a/docs/components/six-logo.md b/docs/components/six-logo.md
@@ -0,0 +1,70 @@
+# six-header
+
+
+## SIX Logo
+
+SIX or BME Logo as as svg.
+
+### Default Logo
+
+<docs-demo-six-logo-0></docs-demo-six-logo-0>
+
+```html
+<six-logo brand="six" ></six-logo>
+```
+
+
+### BME Logo
+
+<docs-demo-six-logo-1></docs-demo-six-logo-1>
+
+```html
+<six-logo brand="bme" ></six-logo>
+```
+
+
+### Custom Height
+
+Use the `--height` css variable to set a custom height.
+
+<docs-demo-six-logo-2></docs-demo-six-logo-2>
+
+```html
+<six-logo brand="six" style="--height: 40px" ></six-logo>
+```
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description                                                | Type             | Default |
+| -------- | --------- | ---------------------------------------------------------- | ---------------- | ------- |
+| `brand`  | `brand`   | The brand of the logo. Either six or bme. Defaults to six. | `"bme" \| "six"` | `'six'` |
+
+
+## CSS Custom Properties
+
+| Name       | Description             |
+| ---------- | ----------------------- |
+| `--height` | The height of the logo. |
+
+
+## Dependencies
+
+### Used by
+
+ - [six-header](six-header.html)
+
+### Graph
+```mermaid
+graph TD;
+  six-header --> six-logo
+  style six-logo fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+Copyright © 2021-present SIX-Group
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export const components = ["six-alert","six-avatar","six-badge","six-button","six-card","six-checkbox","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"];
		export const components = ["six-alert","six-avatar","six-badge","six-button","six-card","six-checkbox","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-header-item","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-logo","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"];