feat: credential-offer and definitions

src/components/button/readme.md

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

src/components/credential-detail/credential-detail.stories.ts

@@ -3,8 +3,14 @@ import type { Components } from '../../components.js';
 
 const meta = {
   title: 'Design System/Molecule/CredentialDetail',
-  render: args =>
-    `<d-credential-detail name="${args.name}" issuer="${args.issuer}" description="${args.description}" long-description="${args.longDescription}" href="${args.href}"></d-credential-detail>`,
+  render: (args, story) =>
+    Boolean(story.parameters.slot)
+      ? `<d-credential-detail name="${args.name}" issuer="${args.issuer}" description="${args.description}" ${
+          args.longDescription && `long-description="${args.longDescription}"`
+        }}>${story.parameters.slot}</d-credential-detail>`
+      : `<d-credential-detail name="${args.name}" issuer="${args.issuer}" description="${args.description}" ${
+          args.longDescription && `long-description="${args.longDescription}"`
+        }}></d-credential-detail>`,
 } satisfies Meta<Components.DCredentialDetail>;
 
 export default meta;
@@ -14,10 +20,21 @@ export const Default: Story = {
   args: {
     name: 'Over 18',
     description: 'Age Validation',
+    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 WithLongDescription: Story = {
+  args: {
+    ...Default.args,
     longDescription:
       'Service description (optional). Lorem ipsum dolor sit amet consectetur. Leo ultricies pellentesque morbi in eu metus commodo felis. Pellentesque facilisis a auctor enim lectus. Nulla dolor cras viverra massa.',
-    issuer: 'Italian Government',
-    href: 'http://en.wikipedia.org/wiki/',
   },
   parameters: {
     design: {
@@ -26,3 +43,38 @@ export const Default: Story = {
     },
   },
 };
+
+export const WithList: Story = {
+  args: {
+    ...Default.args,
+    longDescription:
+      'Service description (optional). Lorem ipsum dolor sit amet consectetur. Leo ultricies pellentesque morbi in eu metus commodo felis. Pellentesque facilisis a auctor enim lectus. Nulla dolor cras viverra massa.',
+  },
+  parameters: {
+    slot: `<d-definition title="Holder name" definition="Karla John" hidable></d-definition>
+    <d-definition title="Holder DID" definition="VxRbAYUkAnsJtVsu9F4grJOW88sios45w" hidable></d-definition>
+          <d-definition title="issuer" definition="Italian Governament" ></d-definition>
+          <d-definition title="issuer DID" definition="DxNbADPkQnsJuTsu7E4orFYT175sios3Ku" hidable></d-definition>
+          `,
+    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 WithButton: Story = {
+  args: {
+    ...Default.args,
+    longDescription: undefined,
+  },
+  parameters: {
+    slot: `<d-button color="accent" href="/generate-qr">
+              generate qr
+            </d-button>`,
+    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',
+    },
+  },
+};

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

@@ -1,21 +1,34 @@
 :host {
-  @apply flex w-full flex-col items-start gap-2.5 px-0 py-5 rounded-md bg-primary;
+  @apply w-full inline-flex flex-col items-start gap-2.5 px-0 py-5 rounded-lg bg-primary;
 }
-:host > div {
-  @apply flex flex-col items-start gap-6 self-stretch px-6 py-0;
+
+.frame {
+  @apply w-full flex flex-col items-start gap-6 px-5 py-0 bg-primary;
 }
+
+.name {
+  @apply text-on text-2xl not-italic font-semibold leading-[20.5px] tracking-[-0.5px];
+}
+
 .heading {
-  @apply flex flex-row  text-xl not-italic font-semibold items-center gap-2;
+  @apply flex text-on text-xl not-italic font-semibold items-center gap-2;
 }
-.name {
-  @apply text-3xl not-italic font-semibold leading-[20.5px] tracking-[-0.5px];
+
+.info {
+  @apply flex flex-col items-start gap-2;
 }
-.description {
-  @apply text-on text-xl not-italic font-normal leading-7;
+
+.short-description {
+  @apply text-on text-base not-italic font-medium leading-[20.5px] tracking-[-0.5px];
 }
-.issuer {
-  @apply self-stretch overflow-hidden text-on text-ellipsis text-xs not-italic font-normal leading-4;
+
+.details {
+  @apply flex flex-col items-start gap-4;
 }
+
 .long-description {
-  @apply self-stretch text-on-alt text-sm not-italic font-normal leading-5;
+  @apply text-on-alt text-xs not-italic font-normal leading-[150%] tracking-[-0.5px];
+}
+.issuer {
+  @apply self-stretch overflow-hidden text-on text-ellipsis text-xs not-italic font-normal leading-4;
 }

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

@@ -10,25 +10,27 @@ export class DCredentialDetail {
   @Prop({ reflect: true }) description: string;
   @Prop({ reflect: true }) issuer: string;
   @Prop({ reflect: true }) longDescription?: string;
-  @Prop({ reflect: true }) href?: string;
   @Prop({ reflect: true }) logoSrc?: string;
 
+
   render() {
+    const longDescription = this.longDescription ? this.longDescription : '';
     return (
       <Host>
-        <div>
+        <div class="frame">
           <div class="heading">
             <d-avatar name={this.name} src={this.logoSrc}></d-avatar>
             <span class="name">{this.name}</span>
           </div>
-          <span class="description">{this.description}</span>
-          <span class="long-description">{this.longDescription}</span>
-          <span class="issuer">{this.issuer}</span>
+          <div class="info">
+            <span class="short-description">{this.description}</span>
+            <div class="details">
+              <span class="long-description">{longDescription}</span>
+              <span class="issuer">{this.issuer}</span>
+            </div>
+          </div>
           <div class="w-full">
-          <slot></slot>
-            <d-button color="accent" href={this.href}>
-              generate qr
-            </d-button>
+            <slot></slot>
           </div>
         </div>
       </Host>

src/components/credential-detail/readme.md

@@ -10,7 +10,6 @@
 | Property          | Attribute          | Description | Type     | Default     |
 | ----------------- | ------------------ | ----------- | -------- | ----------- |
 | `description`     | `description`      |             | `string` | `undefined` |
-| `href`            | `href`             |             | `string` | `undefined` |
 | `issuer`          | `issuer`           |             | `string` | `undefined` |
 | `logoSrc`         | `logo-src`         |             | `string` | `undefined` |
 | `longDescription` | `long-description` |             | `string` | `undefined` |
@@ -22,13 +21,11 @@
 ### Depends on
 
 - [d-avatar](../avatar)
-- [d-button](../button)
 
 ### Graph
 ```mermaid
 graph TD;
   d-credential-detail --> d-avatar
-  d-credential-detail --> d-button
   style d-credential-detail fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

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

@@ -10,19 +10,20 @@ describe('d-credential-detail', () => {
     expect(page.root).toEqualHtml(`
       <d-credential-detail>
         <mock:shadow-root>
-         <div>
-           <div class="heading">
-             <d-avatar></d-avatar>
-             <span class="name"></span>
+         <div class="frame">
+            <div class="heading">
+              <d-avatar></d-avatar>
+              <span class="name"></span>
+            </div>
+           <div class="info">
+             <span class="short-description"></span>
+             <div class="details">
+               <span class="long-description"></span>
+               <span class="issuer"></span>
+             </div>
            </div>
-           <span class="description"></span>
-           <span class="long-description"></span>
-           <span class="issuer"></span>
            <div class="w-full">
-           <slot></slot>
-             <d-button color="accent">
-               generate qr
-             </d-button>
+             <slot></slot>
            </div>
          </div>
         </mock:shadow-root>

src/components/definition/d-definition.css

@@ -0,0 +1,13 @@
+:host > div {
+  @apply flex justify-between w-full border-b-on-alt border-b border-solid;
+}
+:host > dl {
+  @apply flex flex-col w-full h-11;
+}
+.title {
+  @apply text-on-alt text-xs not-italic font-normal leading-[150%] tracking-[-0.5px];
+}
+
+.definition {
+  @apply text-on not-italic text-xs font-medium leading-[150%] tracking-[-0.5px];
+}

src/components/definition/d-definition.tsx

@@ -0,0 +1,51 @@
+import { Component, Host, Prop, State, h } from '@stencil/core';
+
+@Component({
+  tag: 'd-definition',
+  styleUrl: 'd-definition.css',
+  shadow: true,
+})
+export class DDefinition {
+  @Prop({ reflect: true }) title: string;
+  @Prop({ reflect: true }) definition: string;
+  @Prop({ reflect: true }) hidable: boolean;
+  @State() hide: boolean = false;
+
+  render() {
+    const onClick = () => (this.hide = !this.hide);
+    const visibilityOn = (
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g id="visibility_FILL0_wght200_GRAD0_opsz24">
+          <path
+            id="Vector"
+            d="M12.0045 15.1538C13.0207 15.1538 13.883 14.7982 14.5913 14.0868C15.2997 13.3755 15.6538 12.5117 15.6538 11.4955C15.6538 10.4793 15.2982 9.61698 14.5868 8.90865C13.8755 8.20032 13.0117 7.84615 11.9955 7.84615C10.9792 7.84615 10.117 8.20182 9.40863 8.91317C8.7003 9.62452 8.34613 10.4883 8.34613 11.5045C8.34613 12.5207 8.7018 13.383 9.41315 14.0913C10.1245 14.7997 10.9883 15.1538 12.0045 15.1538ZM12 14.2C11.25 14.2 10.6125 13.9375 10.0875 13.4125C9.56248 12.8875 9.29998 12.25 9.29998 11.5C9.29998 10.75 9.56248 10.1125 10.0875 9.5875C10.6125 9.0625 11.25 8.8 12 8.8C12.75 8.8 13.3875 9.0625 13.9125 9.5875C14.4375 10.1125 14.7 10.75 14.7 11.5C14.7 12.25 14.4375 12.8875 13.9125 13.4125C13.3875 13.9375 12.75 14.2 12 14.2ZM12.0027 18C9.8368 18 7.8628 17.4106 6.08075 16.2317C4.29869 15.0529 2.96407 13.4756 2.0769 11.5C2.96407 9.52435 4.29777 7.94711 6.078 6.76828C7.85822 5.58943 9.8313 5 11.9972 5C14.1632 5 16.1372 5.58943 17.9192 6.76828C19.7013 7.94711 21.0359 9.52435 21.9231 11.5C21.0359 13.4756 19.7022 15.0529 17.922 16.2317C16.1417 17.4106 14.1687 18 12.0027 18ZM12 17C13.8833 17 15.6125 16.5042 17.1875 15.5125C18.7625 14.5208 19.9666 13.1833 20.8 11.5C19.9666 9.81667 18.7625 8.47917 17.1875 7.4875C15.6125 6.49583 13.8833 6 12 6C10.1166 6 8.38748 6.49583 6.81248 7.4875C5.23748 8.47917 4.03331 9.81667 3.19998 11.5C4.03331 13.1833 5.23748 14.5208 6.81248 15.5125C8.38748 16.5042 10.1166 17 12 17Z"
+            fill="#C0C0CA"
+          />
+        </g>
+      </svg>
+    );
+    const visibilityOff = (
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g id="visibility_off_FILL0_wght200_GRAD0_opsz24">
+          <path
+            id="Vector"
+            d="M15.4461 12.6463L14.65 11.8501C14.8 10.977 14.5525 10.2213 13.9077 9.58281C13.2628 8.94434 12.5102 8.70011 11.65 8.85011L10.8538 8.05396C11.0218 7.98473 11.1971 7.9328 11.3798 7.89819C11.5625 7.86357 11.7692 7.84626 12 7.84626C13.0192 7.84626 13.883 8.20043 14.5913 8.90876C15.2997 9.61709 15.6538 10.4809 15.6538 11.5001C15.6538 11.7309 15.6365 11.944 15.6019 12.1395C15.5673 12.3351 15.5154 12.504 15.4461 12.6463ZM18.6077 15.7193L17.85 15.0501C18.4833 14.5668 19.0458 14.0376 19.5375 13.4626C20.0291 12.8876 20.45 12.2334 20.8 11.5001C19.9666 9.81678 18.7708 8.47928 17.2125 7.48761C15.6541 6.49594 13.9166 6.00011 12 6.00011C11.5166 6.00011 11.0416 6.03344 10.575 6.10011C10.1083 6.16678 9.64998 6.26678 9.19998 6.40011L8.4192 5.61934C8.99997 5.4001 9.591 5.24209 10.1923 5.14529C10.7936 5.0485 11.3961 5.00011 12 5.00011C14.1705 5.00011 16.1558 5.59659 17.9558 6.78954C19.7558 7.98249 21.0782 9.55268 21.9231 11.5001C21.5654 12.304 21.1125 13.0594 20.5644 13.7665C20.0163 14.4735 19.3641 15.1245 18.6077 15.7193ZM19.7231 21.1386L15.8308 17.2578C15.3884 17.454 14.8394 17.6267 14.1836 17.7761C13.5279 17.9254 12.8 18.0001 12 18.0001C9.81665 18.0001 7.83139 17.4036 6.0442 16.2107C4.25702 15.0177 2.93459 13.4475 2.0769 11.5001C2.46535 10.6168 2.97753 9.78954 3.61343 9.01839C4.24933 8.24724 4.92818 7.60012 5.64998 7.07704L2.8615 4.27704L3.5692 3.56934L20.4308 20.4309L19.7231 21.1386ZM6.35765 7.78474C5.78459 8.19242 5.1987 8.72831 4.59998 9.39241C4.00126 10.0565 3.5346 10.7591 3.19998 11.5001C4.03331 13.1834 5.22915 14.5209 6.78748 15.5126C8.34581 16.5043 10.0833 17.0001 12 17.0001C12.5769 17.0001 13.1583 16.944 13.7442 16.8318C14.3301 16.7197 14.7705 16.6065 15.0654 16.4924L13.4346 14.8501C13.2769 14.9386 13.057 15.0113 12.775 15.0684C12.4929 15.1254 12.2346 15.154 12 15.154C10.9807 15.154 10.117 14.7998 9.40863 14.0915C8.7003 13.3831 8.34613 12.5193 8.34613 11.5001C8.34613 11.2783 8.37465 11.0296 8.4317 10.754C8.48875 10.4783 8.56151 10.2488 8.64998 10.0655L6.35765 7.78474Z"
+            fill="#C0C0CA"
+          />
+        </g>
+      </svg>
+    );
+
+    return (
+      <Host>
+        <div>
+          <dl>
+            <dt class="title">{this.title}</dt>
+            <dd class="definition">{!this.hide ? this.definition : '**********'}</dd>
+          </dl>
+          {this.hidable && <button onClick={onClick}>{this.hide ? visibilityOn : visibilityOff}</button>}
+        </div>
+      </Host>
+    );
+  }
+}

src/components/definition/definition.stories.ts

@@ -0,0 +1,49 @@
+import { DDefinition } from './d-definition';
+import { Meta, StoryObj } from '@storybook/html';
+
+const meta = {
+  title: 'Design System/Atoms/Definition',
+  render: args =>
+    `<d-definition 
+    title="${args.title}" 
+    definition="${args.definition}"
+    ${args.hidable && 'hidable'}
+    >
+    </d-definition>
+    <d-definition 
+    title="${args.title}" 
+    definition="${args.definition}"
+    ${args.hidable && 'hidable'}
+    >
+    </d-definition>
+    <d-definition 
+    title="${args.title}" 
+    definition="${args.definition}"
+    ${args.hidable && 'hidable'}
+    >
+    </d-definition>
+    `,
+} satisfies Meta<DDefinition>;
+
+export default meta;
+type Story = StoryObj<DDefinition>;
+
+export const Default: Story = {
+  args: {
+    title: 'issuer:',
+    definition: 'Italian Governament',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Uxc5APvp9BsY9r71rF8HhQ/DIDWallet-UI-Trial?node-id=100%3A1839&mode=dev',
+    },
+  },
+};
+
+export const Hidable: Story = {
+  args: {
+    ...Default.args,
+    hidable: true,
+  },
+};

src/components/definition/readme.md

@@ -0,0 +1,19 @@
+# d-definition
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute    | Description | Type      | Default     |
+| ------------ | ------------ | ----------- | --------- | ----------- |
+| `definition` | `definition` |             | `string`  | `undefined` |
+| `hidable`    | `hidable`    |             | `boolean` | `undefined` |
+| `title`      | `title`      |             | `string`  | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/definition/test/d-definition.e2e.ts

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