feat: tab page layout

src/components.d.ts

@@ -116,6 +116,13 @@ export namespace Components {
         "hasAlert": boolean;
         "tab": 'home' | 'profile' | 'activity' | 'wallet';
     }
+    interface DTabPage {
+        "scanButtonHref": string | undefined;
+        "scanButtonText": string | undefined;
+        "settings": boolean;
+        "tab": string;
+        "title": string;
+    }
     interface DText {
         "color": Color;
         "size": Size;
@@ -285,6 +292,12 @@ declare global {
         prototype: HTMLDTabButtonElement;
         new (): HTMLDTabButtonElement;
     };
+    interface HTMLDTabPageElement extends Components.DTabPage, HTMLStencilElement {
+    }
+    var HTMLDTabPageElement: {
+        prototype: HTMLDTabPageElement;
+        new (): HTMLDTabPageElement;
+    };
     interface HTMLDTextElement extends Components.DText, HTMLStencilElement {
     }
     var HTMLDTextElement: {
@@ -317,6 +330,7 @@ declare global {
         "d-scan-button": HTMLDScanButtonElement;
         "d-session-card": HTMLDSessionCardElement;
         "d-tab-button": HTMLDTabButtonElement;
+        "d-tab-page": HTMLDTabPageElement;
         "d-text": HTMLDTextElement;
         "didroom-logo": HTMLDidroomLogoElement;
     }
@@ -435,6 +449,13 @@ declare namespace LocalJSX {
         "hasAlert"?: boolean;
         "tab"?: 'home' | 'profile' | 'activity' | 'wallet';
     }
+    interface DTabPage {
+        "scanButtonHref"?: string | undefined;
+        "scanButtonText"?: string | undefined;
+        "settings"?: boolean;
+        "tab"?: string;
+        "title"?: string;
+    }
     interface DText {
         "color"?: Color;
         "size"?: Size;
@@ -461,6 +482,7 @@ declare namespace LocalJSX {
         "d-scan-button": DScanButton;
         "d-session-card": DSessionCard;
         "d-tab-button": DTabButton;
+        "d-tab-page": DTabPage;
         "d-text": DText;
         "didroom-logo": DidroomLogo;
     }
@@ -488,6 +510,7 @@ declare module "@stencil/core" {
             "d-scan-button": LocalJSX.DScanButton & JSXBase.HTMLAttributes<HTMLDScanButtonElement>;
             "d-session-card": LocalJSX.DSessionCard & JSXBase.HTMLAttributes<HTMLDSessionCardElement>;
             "d-tab-button": LocalJSX.DTabButton & JSXBase.HTMLAttributes<HTMLDTabButtonElement>;
+            "d-tab-page": LocalJSX.DTabPage & JSXBase.HTMLAttributes<HTMLDTabPageElement>;
             "d-text": LocalJSX.DText & JSXBase.HTMLAttributes<HTMLDTextElement>;
             "didroom-logo": LocalJSX.DidroomLogo & JSXBase.HTMLAttributes<HTMLDidroomLogoElement>;
         }

src/components/header/d-header.css

@@ -3,4 +3,4 @@
 }
 ion-menu {
   --width: 340px;
-}
+}

src/components/header/readme.md

@@ -16,6 +16,10 @@
 
 ## Dependencies
 
+### Used by
+
+ - [d-tab-page](../tab-page)
+
 ### Depends on
 
 - ion-header
@@ -40,6 +44,7 @@ graph TD;
   d-header --> ion-content
   ion-button --> ion-ripple-effect
   ion-menu --> ion-backdrop
+  d-tab-page --> d-header
   style d-header fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/scan-button/readme.md

@@ -14,6 +14,10 @@
 
 ## Dependencies
 
+### Used by
+
+ - [d-tab-page](../tab-page)
+
 ### Depends on
 
 - [d-button](../button)
@@ -22,6 +26,7 @@
 ```mermaid
 graph TD;
   d-scan-button --> d-button
+  d-tab-page --> d-scan-button
   style d-scan-button fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/tab-page/d-tab-page.css

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+}
+

src/components/tab-page/d-tab-page.tsx

@@ -0,0 +1,32 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'd-tab-page',
+  styleUrl: 'd-tab-page.css',
+  shadow: false,
+})
+export class DTabPage {
+  @Prop() tab: string;
+  @Prop() title: string;
+  @Prop() settings: boolean = false;
+  @Prop() scanButtonText: string | undefined = undefined;
+  @Prop() scanButtonHref: string | undefined = undefined;
+
+  render() {
+    return (
+      <Host>
+        <ion-tab tab={this.tab} id={this.tab}>
+          <d-header backButton={false} settings={this.settings}>
+            {this.title}
+            <slot name="settings" slot="settings"></slot>
+          </d-header>
+          <ion-content fullscreen class="ion-padding" id="main-content">
+            <slot />
+            {this.scanButtonText && <d-scan-button href={this.scanButtonHref}>{this.scanButtonText}</d-scan-button>}
+            <div class="pb-24" />
+          </ion-content>
+        </ion-tab>
+      </Host>
+    );
+  }
+}

src/components/tab-page/readme.md

@@ -0,0 +1,51 @@
+# d-tab-page
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property         | Attribute          | Description | Type      | Default     |
+| ---------------- | ------------------ | ----------- | --------- | ----------- |
+| `scanButtonHref` | `scan-button-href` |             | `string`  | `undefined` |
+| `scanButtonText` | `scan-button-text` |             | `string`  | `undefined` |
+| `settings`       | `settings`         |             | `boolean` | `false`     |
+| `tab`            | `tab`              |             | `string`  | `undefined` |
+| `title`          | `title`            |             | `string`  | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- ion-tab
+- [d-header](../header)
+- ion-content
+- [d-scan-button](../scan-button)
+
+### Graph
+```mermaid
+graph TD;
+  d-tab-page --> ion-tab
+  d-tab-page --> d-header
+  d-tab-page --> ion-content
+  d-tab-page --> d-scan-button
+  d-header --> ion-header
+  d-header --> ion-toolbar
+  d-header --> ion-buttons
+  d-header --> ion-button
+  d-header --> ion-title
+  d-header --> ion-menu-toggle
+  d-header --> ion-menu
+  d-header --> ion-content
+  ion-button --> ion-ripple-effect
+  ion-menu --> ion-backdrop
+  d-scan-button --> d-button
+  style d-tab-page fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/tab-page/tab-page.stories.ts

@@ -0,0 +1,81 @@
+import { Meta, StoryObj } from '@storybook/html';
+import type { Components } from '../../components.js';
+
+const meta = {
+  title: 'Design System/Molecule/TabPage',
+  render: args => `
+  <ion-tabs>
+  <d-tab-page
+    tab="${args.tab}"
+    title="${args.title}"
+    settings=${args.settings}
+    ${args.scanButtonText ? `scan-button-text="${args.scanButtonText}"` : ''}
+    scan-button-href="${args.scanButtonHref}"
+  >
+    <div slot="settings" class="flex flex-col gap-4 ion-padding">
+        <d-buttons-group>
+            <d-button size="large" disabled>
+                Account settings
+            </d-button>
+            <d-button size="large" disabled>
+                Security and authentications
+            </d-button>
+            <d-button size="large">
+                notification settings
+            </d-button>
+            <d-button
+                size="large"
+            >
+                languages
+            </d-button>
+        </d-buttons-group>
+    </div>  
+  </d-tab-page>
+  <ion-tab-bar slot="bottom" class="ion-padding flex justify-between py-0">
+
+			<d-tab-button
+				tab="${args.tab}"
+				aria-hidden
+				active
+			>
+				home
+			</d-tab-button>
+	</ion-tab-bar>
+  </ion-tabs>
+
+  `,
+} satisfies Meta<Components.DTabPage>;
+
+export default meta;
+type Story = StoryObj<Components.DTabPage>;
+
+export const Default: Story = {
+  args: {
+    tab: 'home',
+    title: 'Title',
+    settings: false,
+    scanButtonText: 'Scan',
+    scanButtonHref: 'https://www.google.com',
+  },
+  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 WithSettings: Story = {
+  args: {
+    ...Default.args,
+    settings: true,
+  },
+};
+
+export const WithoutScanButton: Story = {
+  args: {
+    ...Default.args,
+    scanButtonText: undefined,
+    scanButtonHref: undefined,
+  },
+};

src/components/tab-page/test/d-tab-page.e2e.ts

@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('d-tab-page', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<d-tab-page></d-tab-page>');
+
+    const element = await page.find('d-tab-page');
+    expect(element).toHaveClass('hydrated');
+  });
+});

src/components/tab-page/test/d-tab-page.spec.tsx

@@ -0,0 +1,21 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { DTabPage } from '../d-tab-page';
+
+describe('d-tab-page', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [DTabPage],
+      html: `<d-tab-page></d-tab-page>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <d-tab-page>
+        <ion-tab>
+          <d-header></d-header>
+          <ion-content class="ion-padding" fullscreen="" id="main-content">
+            <div class="pb-24"></div>
+          </ion-content>
+        </ion-tab>
+      </d-tab-page>
+    `);
+  });
+});