feat: add the credential-service components (WIP the a.styling) and r…

…efactor the d-avatar

src/components.d.ts

@@ -8,40 +8,63 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { Shape, Size } from "./components/types";
 export { Shape, Size } from "./components/types";
 export namespace Components {
-    interface DidroomAvatar {
+    interface DAvatar {
         "name"?: string;
         "shape"?: Shape;
         "size"?: Size;
         "src"?: string;
     }
+    interface DCredentialService {
+        "description"?: string;
+        "href"?: string;
+        "issuer": string;
+        "logoSrc"?: string;
+        "name": string;
+    }
 }
 declare global {
-    interface HTMLDidroomAvatarElement extends Components.DidroomAvatar, HTMLStencilElement {
+    interface HTMLDAvatarElement extends Components.DAvatar, HTMLStencilElement {
+    }
+    var HTMLDAvatarElement: {
+        prototype: HTMLDAvatarElement;
+        new (): HTMLDAvatarElement;
+    };
+    interface HTMLDCredentialServiceElement extends Components.DCredentialService, HTMLStencilElement {
     }
-    var HTMLDidroomAvatarElement: {
-        prototype: HTMLDidroomAvatarElement;
-        new (): HTMLDidroomAvatarElement;
+    var HTMLDCredentialServiceElement: {
+        prototype: HTMLDCredentialServiceElement;
+        new (): HTMLDCredentialServiceElement;
     };
     interface HTMLElementTagNameMap {
-        "didroom-avatar": HTMLDidroomAvatarElement;
+        "d-avatar": HTMLDAvatarElement;
+        "d-credential-service": HTMLDCredentialServiceElement;
     }
 }
 declare namespace LocalJSX {
-    interface DidroomAvatar {
+    interface DAvatar {
         "name"?: string;
         "shape"?: Shape;
         "size"?: Size;
         "src"?: string;
     }
+    interface DCredentialService {
+        "description"?: string;
+        "href"?: string;
+        "issuer"?: string;
+        "logoSrc"?: string;
+        "name"?: string;
+    }
     interface IntrinsicElements {
-        "didroom-avatar": DidroomAvatar;
+        "d-avatar": DAvatar;
+        "d-credential-service": DCredentialService;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
-            "didroom-avatar": LocalJSX.DidroomAvatar & JSXBase.HTMLAttributes<HTMLDidroomAvatarElement>;
+            "d-avatar": LocalJSX.DAvatar & JSXBase.HTMLAttributes<HTMLDAvatarElement>;
+            "d-credential-service": LocalJSX.DCredentialService & JSXBase.HTMLAttributes<HTMLDCredentialServiceElement>;
         }
     }
 }

src/components/avatar/avatar.stories.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from "@storybook/html";
-import type { Components } from "../../components.js";
+import { Meta, StoryObj } from '@storybook/html';
+import type { Components } from '../../components.js';
 import { ShapeArgTypes, SizeArgTypes } from '../types.js';
 
 const meta = {
@@ -9,10 +9,10 @@ const meta = {
     size: SizeArgTypes,
     shape: ShapeArgTypes,
   },
-} satisfies Meta<Components.DidroomAvatar>;
+} satisfies Meta<Components.DAvatar>;
 
 export default meta;
-type Story = StoryObj<Components.DidroomAvatar>;
+type Story = StoryObj<Components.DAvatar>;
 
 export const Rounded: Story = {
   args: {

src/components/avatar/avatar.tsx

@@ -2,7 +2,7 @@ import { Component, Host, Prop, State, h } from '@stencil/core';
 import { Shape, Size } from '../types';
 
 @Component({
-  tag: 'didroom-avatar',
+  tag: 'd-avatar',
   styleUrl: 'avatar.css',
   shadow: true,
 })

src/components/avatar/readme.md

@@ -15,6 +15,19 @@
 | `src`    | `src`     |             | `string` | `undefined` |
 
 
+## Dependencies
+
+### Used by
+
+ - [d-credential-service](../credential-service)
+
+### Graph
+```mermaid
+graph TD;
+  d-credential-service --> d-avatar
+  style d-avatar fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

src/components/credential-service/credential-services.stories.ts

@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from '@storybook/html';
+import type { Components } from '../../components.js';
+
+const meta = {
+  title: 'Design System/Molecule/CredentialService',
+  render: args => `<d-credential-service name="${args.name}" issuer="${args.issuer}" description="${args.description}" href="${args.href}"></didroom-avatar>`,
+} satisfies Meta<Components.DCredentialService>;
+
+export default meta;
+type Story = StoryObj<Components.DCredentialService>;
+
+export const Default: Story = {
+  args: {
+    name: 'Over 18',
+    description: 'This credential proves that you are over 18 years old',
+    issuer: 'Italian Government',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/pdwfO3dMKtaCAQakht0JE6/DIDRoom-%2B-Signroom---WF-and-GUI---Dyne.org?type=design&node-id=2005-930&mode=design&t=uW8kvn2nKPMvUzX7-0',
+    },
+  },
+};
+
+export const WithoutLink: Story = {
+  args: {
+    ...Default.args,
+    href: '',
+  },
+};
+
+export const WithLink: Story = {
+  args: {
+    ...Default.args,
+    href: 'https://dyne.org',
+  },
+};

src/components/credential-service/d-credential-service.css

@@ -0,0 +1,16 @@
+:host > div,
+:host > a > div {
+  @apply w-full rounded-lg p-5 flex gap-5 bg-primary no-underline;
+}
+
+.name {
+  @apply block overflow-hidden text-on-primary text-ellipsis whitespace-nowrap text-base not-italic font-bold leading-[20.5px] tracking-[-0.5px];
+}
+
+.issuer {
+  @apply block overflow-hidden text-on-primary-2 text-ellipsis text-xs not-italic font-normal leading-[normal] tracking-[-0.5px];
+}
+
+.description {
+  @apply block overflow-hidden text-on-primary-2 text-ellipsis text-xs not-italic font-medium leading-[normal] tracking-[-0.5px];
+}

src/components/credential-service/d-credential-service.tsx

@@ -0,0 +1,40 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'd-credential-service',
+  styleUrl: 'd-credential-service.css',
+  shadow: true,
+})
+export class DCredentialService {
+  @Prop({ reflect: true }) name: string;
+  @Prop({ reflect: true }) issuer: string;
+  @Prop({ reflect: true }) logoSrc?: string;
+  @Prop({ reflect: true }) description?: string;
+  @Prop({ reflect: true }) href?: string;
+
+  render() {
+    const content = (
+      <div>
+        <d-avatar name={this.name} src={this.logoSrc}></d-avatar>
+        <div class="info">
+          <span class="name">{this.name}</span>
+          <span class="issuer">{this.issuer}</span>
+          <span class="description">{this.description}</span>
+          <ion-button fill="clear" size="small" color="primary">
+            dokodk
+          </ion-button>
+        </div>
+      </div>
+    );
+
+    if (this.href) {
+      return (
+        <Host>
+          <a href={this.href}>{content}</a>
+        </Host>
+      );
+    } else {
+      return <Host>{content}</Host>;
+    }
+  }
+}

src/components/credential-service/readme.md

@@ -0,0 +1,37 @@
+# d-credential-service
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute     | Description | Type     | Default     |
+| ------------- | ------------- | ----------- | -------- | ----------- |
+| `description` | `description` |             | `string` | `undefined` |
+| `href`        | `href`        |             | `string` | `undefined` |
+| `issuer`      | `issuer`      |             | `string` | `undefined` |
+| `logoSrc`     | `logo-src`    |             | `string` | `undefined` |
+| `name`        | `name`        |             | `string` | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [d-avatar](../avatar)
+- ion-button
+
+### Graph
+```mermaid
+graph TD;
+  d-credential-service --> d-avatar
+  d-credential-service --> ion-button
+  ion-button --> ion-ripple-effect
+  style d-credential-service fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/credential-service/test/d-credential-service.e2e.ts

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

src/components/credential-service/test/d-credential-service.spec.tsx

@@ -0,0 +1,18 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { DCredentialService } from '../d-credential-service';
+
+describe('d-credential-service', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [DCredentialService],
+      html: `<d-credential-service></d-credential-service>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <d-credential-service>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </d-credential-service>
+    `);
+  });
+});

src/index.html

@@ -16,13 +16,14 @@
       }
     </script>
   </head>
-  <body>
+  <body class="p-10">
     <label class="relative inline-flex items-center cursor-pointer">
       <input type="checkbox" value="" class="sr-only peer" onchange="toggleDarkMode()">
       <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
       <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">Dark mode</span>
     </label>
     <h1 class="text-3xl font-sans font-bold py-8">Test page</h1>
-    <didroom-avatar name="Fortis Fortuy"></didroom-avatar>
+    <d-avatar name="Fortis Fortuy"></d-avatar>
+    <d-credential-service href="asoijasoij" name="Over 18" issuer="Dyne.org" description="Some words to explain the service"></d-credential-service>
   </body>
 </html>