feat: app details (#116)

src/components.d.ts

@@ -16,6 +16,10 @@ export namespace Components {
         "name": string;
         "type": 'error' | 'warning' | 'success';
     }
+    interface DAppDetails {
+        "developedBy": string;
+        "version": string;
+    }
     interface DAvatar {
         "name"?: string;
         "shape"?: Shape;
@@ -161,6 +165,12 @@ declare global {
         prototype: HTMLDActivityCardElement;
         new (): HTMLDActivityCardElement;
     };
+    interface HTMLDAppDetailsElement extends Components.DAppDetails, HTMLStencilElement {
+    }
+    var HTMLDAppDetailsElement: {
+        prototype: HTMLDAppDetailsElement;
+        new (): HTMLDAppDetailsElement;
+    };
     interface HTMLDAvatarElement extends Components.DAvatar, HTMLStencilElement {
     }
     var HTMLDAvatarElement: {
@@ -342,6 +352,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "d-activity-card": HTMLDActivityCardElement;
+        "d-app-details": HTMLDAppDetailsElement;
         "d-avatar": HTMLDAvatarElement;
         "d-button": HTMLDButtonElement;
         "d-buttons-group": HTMLDButtonsGroupElement;
@@ -377,6 +388,10 @@ declare namespace LocalJSX {
         "name"?: string;
         "type"?: 'error' | 'warning' | 'success';
     }
+    interface DAppDetails {
+        "developedBy"?: string;
+        "version"?: string;
+    }
     interface DAvatar {
         "name"?: string;
         "shape"?: Shape;
@@ -509,6 +524,7 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "d-activity-card": DActivityCard;
+        "d-app-details": DAppDetails;
         "d-avatar": DAvatar;
         "d-button": DButton;
         "d-buttons-group": DButtonsGroup;
@@ -540,6 +556,7 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "d-activity-card": LocalJSX.DActivityCard & JSXBase.HTMLAttributes<HTMLDActivityCardElement>;
+            "d-app-details": LocalJSX.DAppDetails & JSXBase.HTMLAttributes<HTMLDAppDetailsElement>;
             "d-avatar": LocalJSX.DAvatar & JSXBase.HTMLAttributes<HTMLDAvatarElement>;
             "d-button": LocalJSX.DButton & JSXBase.HTMLAttributes<HTMLDButtonElement>;
             "d-buttons-group": LocalJSX.DButtonsGroup & JSXBase.HTMLAttributes<HTMLDButtonsGroupElement>;

src/components/app-details/app-details.stories.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/html';
+import type { Components } from '../../components.js';
+
+const meta = {
+  title: 'Design System/Atoms/AppDetails',
+  render: args => `<d-app-details version="${args.version}"></d-app-details>`,
+} satisfies Meta<Components.DAppDetails>;
+
+export default meta;
+
+type Story = StoryObj<Components.DAppDetails>;
+
+export const Default: Story = {
+  args: {
+    version: "1.0.9",
+  }
+};

src/components/app-details/d-app-details.css

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

src/components/app-details/d-app-details.tsx

@@ -0,0 +1,22 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'd-app-details',
+  styleUrl: 'd-app-details.css',
+  shadow: true,
+})
+export class DAppDetails {
+  @Prop() version: string;
+  @Prop() developedBy: string = 'Develepoded by Forkbomb BV';
+
+  render() {
+    return (
+      <Host>
+        <div class="flex flex-col items-center gap-2 p-6">
+          <d-text size="l">{this.developedBy}</d-text>
+          <d-text size="m">v {this.version}</d-text>
+        </div>
+      </Host>
+    );
+  }
+}

src/components/app-details/readme.md

@@ -0,0 +1,31 @@
+# d-app-details
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute      | Description | Type     | Default                        |
+| ------------- | -------------- | ----------- | -------- | ------------------------------ |
+| `developedBy` | `developed-by` |             | `string` | `'Develepoded by Forkbomb BV'` |
+| `version`     | `version`      |             | `string` | `undefined`                    |
+
+
+## Dependencies
+
+### Depends on
+
+- [d-text](../text)
+
+### Graph
+```mermaid
+graph TD;
+  d-app-details --> d-text
+  style d-app-details fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/app-details/test/d-app-details.e2e.ts

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

src/components/app-details/test/d-app-details.spec.tsx

@@ -0,0 +1,25 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { DAppDetails } from '../d-app-details';
+
+describe('d-app-details', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [DAppDetails],
+      html: `<d-app-details></d-app-details>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <d-app-details>
+        <mock:shadow-root>
+          <div class="flex flex-col gap-2 items-center p-6">
+            <d-text size="l">
+              Develepoded by Forkbomb BV
+            </d-text>
+            <d-text size="m">
+              v
+            </d-text>
+          </div>
+        </mock:shadow-root>
+      </d-app-details>
+    `);
+  });
+});

src/components/text/readme.md

@@ -18,6 +18,7 @@
 ### Used by
 
  - [d-activity-card](../activity-card)
+ - [d-app-details](../app-details)
  - [d-credential-service](../credential-service)
  - [d-did-box](../d-did-box)
  - [d-empty-state](../empty-state)
@@ -31,6 +32,7 @@
 ```mermaid
 graph TD;
   d-activity-card --> d-text
+  d-app-details --> d-text
   d-credential-service --> d-text
   d-did-box --> d-text
   d-empty-state --> d-text