feat: header component (#78)

* feat: header component * fix: use the rights icons for the header
ForkbombEu · May 8, 2024 · 8c5a159 · 8c5a159
1 parent 547b993
commit 8c5a159
Show file tree

Hide file tree

Showing 9 changed files with 251 additions and 0 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -57,6 +57,10 @@ export namespace Components {
         "message": string | undefined;
         "type": 'success' | 'error';
     }
+    interface DHeader {
+        "backButton": boolean;
+        "settings": boolean;
+    }
     interface DHeading {
         "color": Color;
         "size": Size;
@@ -172,6 +176,12 @@ declare global {
         prototype: HTMLDFeedbackElement;
         new (): HTMLDFeedbackElement;
     };
+    interface HTMLDHeaderElement extends Components.DHeader, HTMLStencilElement {
+    }
+    var HTMLDHeaderElement: {
+        prototype: HTMLDHeaderElement;
+        new (): HTMLDHeaderElement;
+    };
     interface HTMLDHeadingElement extends Components.DHeading, HTMLStencilElement {
     }
     var HTMLDHeadingElement: {
@@ -240,6 +250,7 @@ declare global {
         "d-credential-service": HTMLDCredentialServiceElement;
         "d-definition": HTMLDDefinitionElement;
         "d-feedback": HTMLDFeedbackElement;
+        "d-header": HTMLDHeaderElement;
         "d-heading": HTMLDHeadingElement;
         "d-info-led": HTMLDInfoLedElement;
         "d-input": HTMLDInputElement;
@@ -303,6 +314,10 @@ declare namespace LocalJSX {
         "onDClose"?: (event: DFeedbackCustomEvent<void>) => void;
         "type"?: 'success' | 'error';
     }
+    interface DHeader {
+        "backButton"?: boolean;
+        "settings"?: boolean;
+    }
     interface DHeading {
         "color"?: Color;
         "size"?: Size;
@@ -349,6 +364,7 @@ declare namespace LocalJSX {
         "d-credential-service": DCredentialService;
         "d-definition": DDefinition;
         "d-feedback": DFeedback;
+        "d-header": DHeader;
         "d-heading": DHeading;
         "d-info-led": DInfoLed;
         "d-input": DInput;
@@ -370,6 +386,7 @@ declare module "@stencil/core" {
             "d-credential-service": LocalJSX.DCredentialService & JSXBase.HTMLAttributes<HTMLDCredentialServiceElement>;
             "d-definition": LocalJSX.DDefinition & JSXBase.HTMLAttributes<HTMLDDefinitionElement>;
             "d-feedback": LocalJSX.DFeedback & JSXBase.HTMLAttributes<HTMLDFeedbackElement>;
+            "d-header": LocalJSX.DHeader & JSXBase.HTMLAttributes<HTMLDHeaderElement>;
             "d-heading": LocalJSX.DHeading & JSXBase.HTMLAttributes<HTMLDHeadingElement>;
             "d-info-led": LocalJSX.DInfoLed & JSXBase.HTMLAttributes<HTMLDInfoLedElement>;
             "d-input": LocalJSX.DInput & JSXBase.HTMLAttributes<HTMLDInputElement>;

diff --git a/src/components/header/d-header.css b/src/components/header/d-header.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/src/components/header/d-header.tsx b/src/components/header/d-header.tsx
@@ -0,0 +1,88 @@
+import { Component, Host, Prop, State, h } from '@stencil/core';
+
+@Component({
+  tag: 'd-header',
+  styleUrl: 'd-header.css',
+  shadow: true,
+})
+export class DHeader {
+  @Prop() backButton: boolean = false;
+  @Prop() settings: boolean = false;
+  @State() isSettingsOpen: boolean = false;
+
+  render() {
+    const openSettings = () => {
+      this.isSettingsOpen = !this.isSettingsOpen;
+    };
+    const arrowBack = (
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g id="Icon/outline/arrow-back">
+          <path
+            id="Vector"
+            d="M7.37305 12.75L12.5423 17.9192C12.691 18.0679 12.7644 18.242 12.7625 18.4413C12.7606 18.6407 12.682 18.8179 12.5269 18.973C12.3718 19.1179 12.1962 19.1929 12 19.198C11.8039 19.2032 11.6282 19.1282 11.4731 18.973L5.13273 12.6327C5.03914 12.5391 4.97312 12.4404 4.93465 12.3365C4.89619 12.2327 4.87695 12.1205 4.87695 12C4.87695 11.8795 4.89619 11.7673 4.93465 11.6635C4.97312 11.5596 5.03914 11.4609 5.13273 11.3673L11.4731 5.02693C11.6116 4.88847 11.783 4.81763 11.9875 4.81443C12.192 4.81123 12.3718 4.88207 12.5269 5.02693C12.682 5.18205 12.7596 5.36025 12.7596 5.56153C12.7596 5.76282 12.682 5.94102 12.5269 6.09614L7.37305 11.25H18.75C18.9628 11.25 19.141 11.3218 19.2846 11.4654C19.4282 11.609 19.5 11.7872 19.5 12C19.5 12.2128 19.4282 12.391 19.2846 12.5346C19.141 12.6782 18.9628 12.75 18.75 12.75H7.37305Z"
+            fill="currentColor"
+          />
+        </g>
+      </svg>
+    );
+
+    const more = (
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g id="Icon/outline/more">
+          <path
+            id="Vector"
+            d="M6.23079 13.5C5.8183 13.5 5.46518 13.3531 5.17143 13.0594C4.8777 12.7656 4.73083 12.4125 4.73083 12C4.73083 11.5875 4.8777 11.2344 5.17143 10.9407C5.46518 10.6469 5.8183 10.5 6.23079 10.5C6.64329 10.5 6.9964 10.6469 7.29014 10.9407C7.58389 11.2344 7.73076 11.5875 7.73076 12C7.73076 12.4125 7.58389 12.7656 7.29014 13.0594C6.9964 13.3531 6.64329 13.5 6.23079 13.5ZM12 13.5C11.5875 13.5 11.2344 13.3531 10.9407 13.0594C10.6469 12.7656 10.5 12.4125 10.5 12C10.5 11.5875 10.6469 11.2344 10.9407 10.9407C11.2344 10.6469 11.5875 10.5 12 10.5C12.4125 10.5 12.7656 10.6469 13.0594 10.9407C13.3531 11.2344 13.5 11.5875 13.5 12C13.5 12.4125 13.3531 12.7656 13.0594 13.0594C12.7656 13.3531 12.4125 13.5 12 13.5ZM17.7692 13.5C17.3567 13.5 17.0036 13.3531 16.7099 13.0594C16.4161 12.7656 16.2693 12.4125 16.2693 12C16.2693 11.5875 16.4161 11.2344 16.7099 10.9407C17.0036 10.6469 17.3567 10.5 17.7692 10.5C18.1817 10.5 18.5348 10.6469 18.8286 10.9407C19.1223 11.2344 19.2692 11.5875 19.2692 12C19.2692 12.4125 19.1223 12.7656 18.8286 13.0594C18.5348 13.3531 18.1817 13.5 17.7692 13.5Z"
+            fill="currentColor"
+          />
+        </g>
+      </svg>
+    );
+
+    return (
+      <Host>
+        <div>
+          <ion-header class="shadow-none" translucent>
+            <ion-toolbar>
+              {this.backButton && (
+                <ion-buttons slot="start">
+                  <ion-button onClick={() => window.history.back()} aria-hidden>
+                    <div class="w-6 h-6 text-on" slot="icon-only">
+                      {arrowBack}
+                    </div>
+                  </ion-button>
+                </ion-buttons>
+              )}
+              <ion-title class="text-center">
+                <slot />
+              </ion-title>
+              {this.settings && (
+                <ion-buttons slot="end">
+                  <ion-button onClick={openSettings} aria-hidden>
+                    <div class="w-6 h-6 text-on">{more}</div>
+                  </ion-button>
+                </ion-buttons>
+              )}
+            </ion-toolbar>
+          </ion-header>
+          <ion-modal is-open={this.isSettingsOpen}>
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>
+                  <d-heading size="s"> Settings </d-heading>
+                </ion-title>
+                <ion-buttons slot="end">
+                  <ion-button onClick={openSettings} aria-hidden>
+                    Close
+                  </ion-button>
+                </ion-buttons>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content class="ion-padding">
+              <slot name="settings"></slot>
+            </ion-content>
+          </ion-modal>
+        </div>
+      </Host>
+    );
+  }
+}
diff --git a/src/components/header/header.stories.ts b/src/components/header/header.stories.ts
@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/html';
+import type { Components } from '../../components.js';
+
+const meta = {
+  title: 'Design System/Molecule/Header',
+  render: args => `<d-header back-button='${args.backButton}'  settings='${args.settings}'>title</d-header>`,
+} satisfies Meta<Components.DHeader>;
+
+export default meta;
+type Story = StoryObj<Components.DHeader>;
+
+export const Default: Story = {
+  args: {
+    backButton: false,
+    settings: false
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/pdwfO3dMKtaCAQakht0JE6/DIDRoom-%2B-Signroom---WF-and-GUI---Dyne.org?node-id=3825-34382',
+    },
+  },
+};
+
+export const BackButton: Story = {
+  args: {
+    backButton: true,
+    settings: false
+  }
+};
+
+export const Settings: Story = {
+  args: {
+    backButton: false,
+    settings: true
+  }
+};
diff --git a/src/components/header/readme.md b/src/components/header/readme.md
@@ -0,0 +1,47 @@
+# d-header
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute     | Description | Type      | Default |
+| ------------ | ------------- | ----------- | --------- | ------- |
+| `backButton` | `back-button` |             | `boolean` | `false` |
+| `settings`   | `settings`    |             | `boolean` | `false` |
+
+
+## Dependencies
+
+### Depends on
+
+- ion-header
+- ion-toolbar
+- ion-buttons
+- ion-button
+- ion-title
+- ion-modal
+- [d-heading](../heading)
+- ion-content
+
+### Graph
+```mermaid
+graph TD;
+  d-header --> ion-header
+  d-header --> ion-toolbar
+  d-header --> ion-buttons
+  d-header --> ion-button
+  d-header --> ion-title
+  d-header --> ion-modal
+  d-header --> d-heading
+  d-header --> ion-content
+  ion-button --> ion-ripple-effect
+  ion-modal --> ion-backdrop
+  style d-header fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/header/test/d-header.e2e.ts b/src/components/header/test/d-header.e2e.ts
@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('d-header', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<d-header></d-header>');
+
+    const element = await page.find('d-header');
+    expect(element).toHaveClass('hydrated');
+  });
+});
diff --git a/src/components/header/test/d-header.spec.tsx b/src/components/header/test/d-header.spec.tsx
@@ -0,0 +1,45 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { DHeader } from '../d-header';
+
+describe('d-header', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [DHeader],
+      html: `<d-header></d-header>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <d-header>
+        <mock:shadow-root>
+         <div>
+           <ion-header class="shadow-none" translucent="">
+             <ion-toolbar>
+               <ion-title class="text-center">
+                 <slot></slot>
+               </ion-title>
+             </ion-toolbar>
+           </ion-header>
+           <ion-modal>
+             <ion-header>
+               <ion-toolbar>
+                 <ion-title>
+                   <d-heading size="s">
+                     Settings
+                   </d-heading>
+                 </ion-title>
+                 <ion-buttons slot="end">
+                   <ion-button aria-hidden="">
+                     Close
+                   </ion-button>
+                 </ion-buttons>
+               </ion-toolbar>
+             </ion-header>
+             <ion-content class="ion-padding">
+               <slot name="settings"></slot>
+             </ion-content>
+           </ion-modal>
+         </div>
+       </mock:shadow-root>
+      </d-header>
+    `);
+  });
+});
diff --git a/src/components/heading/readme.md b/src/components/heading/readme.md
@@ -18,13 +18,15 @@
 ### Used by
 
  - [d-credential-card](../credential-card)
+ - [d-header](../header)
  - [d-logo](../logo)
  - [d-session-card](../session-card)
 
 ### Graph
 ```mermaid
 graph TD;
   d-credential-card --> d-heading
+  d-header --> d-heading
   d-logo --> d-heading
   d-session-card --> d-heading
   style d-heading fill:#f9f,stroke:#333,stroke-width:4px

diff --git a/src/index.html b/src/index.html
@@ -28,6 +28,7 @@ <h1 class="text-3xl font-sans font-bold py-8">Test page</h1>
     <d-avatar name="Fortis Fortuy"></d-avatar>
     <d-avatar role="figure" shape="round" size="m"></d-avatar>
     <d-avatar aria-label="" role="figure" shape="square" size="m"></d-avatar>
+    <d-header settings={true}>pippo</d-header>
     <d-credential-service name="Over 18" issuer="Dyne.org" description="Some words to explain the service"></d-credential-service>
     <div class="bg-accent w-full">
       <d-heading size="l" color="accent">Typography</d-heading>