feat: credential card (#26)

* feat: credential card * fix: tests for all components * chore: Docs --------- Co-authored-by: phoebus-84 <ennio@dyne.org> Co-authored-by: puria <puria@dyne.org>
ForkbombEu · Jan 25, 2024 · 1200fd0 · 1200fd0
1 parent b971b1d
commit 1200fd0
Show file tree

Hide file tree

Showing 12 changed files with 318 additions and 17 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -14,6 +14,14 @@ export namespace Components {
         "size"?: Size;
         "src"?: string;
     }
+    interface DCredentialCard {
+        "description"?: string;
+        "expirationDate"?: string;
+        "issuer": string;
+        "logoSrc"?: string;
+        "name": string;
+        "verified"?: boolean;
+    }
     interface DCredentialService {
         "description"?: string;
         "href"?: string;
@@ -29,6 +37,12 @@ declare global {
         prototype: HTMLDAvatarElement;
         new (): HTMLDAvatarElement;
     };
+    interface HTMLDCredentialCardElement extends Components.DCredentialCard, HTMLStencilElement {
+    }
+    var HTMLDCredentialCardElement: {
+        prototype: HTMLDCredentialCardElement;
+        new (): HTMLDCredentialCardElement;
+    };
     interface HTMLDCredentialServiceElement extends Components.DCredentialService, HTMLStencilElement {
     }
     var HTMLDCredentialServiceElement: {
@@ -37,6 +51,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "d-avatar": HTMLDAvatarElement;
+        "d-credential-card": HTMLDCredentialCardElement;
         "d-credential-service": HTMLDCredentialServiceElement;
     }
 }
@@ -47,6 +62,14 @@ declare namespace LocalJSX {
         "size"?: Size;
         "src"?: string;
     }
+    interface DCredentialCard {
+        "description"?: string;
+        "expirationDate"?: string;
+        "issuer"?: string;
+        "logoSrc"?: string;
+        "name"?: string;
+        "verified"?: boolean;
+    }
     interface DCredentialService {
         "description"?: string;
         "href"?: string;
@@ -56,6 +79,7 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "d-avatar": DAvatar;
+        "d-credential-card": DCredentialCard;
         "d-credential-service": DCredentialService;
     }
 }
@@ -64,6 +88,7 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "d-avatar": LocalJSX.DAvatar & JSXBase.HTMLAttributes<HTMLDAvatarElement>;
+            "d-credential-card": LocalJSX.DCredentialCard & JSXBase.HTMLAttributes<HTMLDCredentialCardElement>;
             "d-credential-service": LocalJSX.DCredentialService & JSXBase.HTMLAttributes<HTMLDCredentialServiceElement>;
         }
     }

diff --git a/src/components/avatar/readme.md b/src/components/avatar/readme.md
@@ -19,11 +19,13 @@
 
 ### Used by
 
+ - [d-credential-card](../credential-card)
  - [d-credential-service](../credential-service)
 
 ### Graph
 ```mermaid
 graph TD;
+  d-credential-card --> d-avatar
   d-credential-service --> d-avatar
   style d-avatar fill:#f9f,stroke:#333,stroke-width:4px
 ```

diff --git a/src/components/avatar/test/avatar.e2e.ts b/src/components/avatar/test/avatar.e2e.ts
@@ -1,20 +1,20 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-describe('didroom-avatar', () => {
+describe('d-avatar', () => {
   it('renders', async () => {
     const page = await newE2EPage();
-    await page.setContent('<didroom-avatar></didroom-avatar>');
+    await page.setContent('<d-avatar></d-avatar>');
 
-    const element = await page.find('didroom-avatar');
+    const element = await page.find('d-avatar');
     expect(element).toHaveClass('hydrated');
   });
 
   it('renders changes to the name data', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<didroom-avatar name="mickey mouse"></didroom-avatar>');
-    const component = await page.find('didroom-avatar');
-    const element = await page.find('didroom-avatar >>> span');
+    await page.setContent('<d-avatar name="mickey mouse"></d-avatar>');
+    const component = await page.find('d-avatar');
+    const element = await page.find('d-avatar >>> span');
     expect(element.textContent).toEqual(`mm`);
 
     component.setProperty('name', 'duffy duck');

diff --git a/src/components/avatar/test/avatar.spec.tsx b/src/components/avatar/test/avatar.spec.tsx
@@ -1,52 +1,52 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { Avatar } from '../avatar';
 
-describe('didroom-avatar', () => {
+describe('d-avatar', () => {
   it('renders', async () => {
     const page = await newSpecPage({
       components: [Avatar],
-      html: `<didroom-avatar></didroom-avatar>`,
+      html: `<d-avatar></d-avatar>`,
     });
     expect(page.root).toEqualHtml(`
-      <didroom-avatar role="figure" shape="round" size="m">
+      <d-avatar role="figure" shape="round" size="m">
        <mock:shadow-root>
          <svg class="absolute text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path clip-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" fill-rule="evenodd"></path>
          </svg>
         </mock:shadow-root>
-      </didroom-avatar>
+      </d-avatar>
     `);
   });
 
   it('renders with values', async () => {
     const { root } = await newSpecPage({
       components: [Avatar],
-      html: `<didroom-avatar name="Maccio Capatonda"></didroom-avatar>`,
+      html: `<d-avatar name="Maccio Capatonda"></d-avatar>`,
     });
     expect(root).toEqualHtml(`
-    <didroom-avatar aria-label="Maccio Capatonda" name="Maccio Capatonda" role="figure" shape="round" size="m">
+    <d-avatar aria-label="Maccio Capatonda" name="Maccio Capatonda" role="figure" shape="round" size="m">
       <mock:shadow-root>
         <span class="font-medium uppercase">
           MC
         </span>
       </mock:shadow-root>
-    </didroom-avatar>
+    </d-avatar>
     `);
   });
 
   it('renders with shape and icon', async () => {
     const { root } = await newSpecPage({
       components: [Avatar],
-      html: `<didroom-avatar shape="square" name=""></didroom-avatar>`,
+      html: `<d-avatar shape="square" name=""></d-avatar>`,
     });
     expect(root).toEqualHtml(`
-    <didroom-avatar aria-label="" name="" role="figure" shape="square" size="m">
+    <d-avatar aria-label="" name="" role="figure" shape="square" size="m">
        <mock:shadow-root>
          <svg class="absolute text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path clip-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" fill-rule="evenodd"></path>
          </svg>
        </mock:shadow-root>
-    </didroom-avatar>
+    </d-avatar>
     `);
   });
 });
diff --git a/src/components/credential-card/credential-card.stories.ts b/src/components/credential-card/credential-card.stories.ts
@@ -0,0 +1,42 @@
+import { DCredentialCard } from './d-credential-card';
+import { Meta, StoryObj } from '@storybook/html';
+
+const meta = {
+  title: 'Design System/Molecule/CredentialCard',
+  render: args =>
+    `<d-credential-card 
+    name="${args.name}" 
+    issuer="${args.issuer}" 
+    description="${args.description}" 
+    expiration-date="${args.expirationDate}" 
+    verified="${args.verified}">
+    </d-credential-card>`,
+} satisfies Meta<DCredentialCard>;
+
+export default meta;
+type Story = StoryObj<DCredentialCard>;
+
+export const Default: Story = {
+  args: {
+    name: 'Over 18',
+    description: 'This credential proves that you are over 18 years old',
+    issuer: 'Italian Government',
+    expirationDate: '2017-01-01',
+    verified: false
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/pdwfO3dMKtaCAQakht0JE6/DIDRoom-%2B-Signroom---WF-and-GUI---Dyne.org?node-id=2053%3A11527&mode=dev',
+    },
+  },
+};
+
+export const Verified: Story = {
+  args: {
+    ...Default.args,
+    verified: true,
+  },
+};
+
+
diff --git a/src/components/credential-card/d-credential-card.css b/src/components/credential-card/d-credential-card.css
diff --git a/src/components/credential-card/d-credential-card.tsx b/src/components/credential-card/d-credential-card.tsx
@@ -0,0 +1,72 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+
+const verifiedUser = (
+  <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="ic:round-verified-user" clip-path="url(#clip0_2053_11538)">
+      <g id="Vector" filter="url(#filter0_d_2053_11538)">
+        <path
+          d="M10.2575 1.19L3.84083 3.91125C3.18083 4.19125 2.75 4.82125 2.75 5.5125V9.625C2.75 14.4812 6.27 19.0225 11 20.125C15.73 19.0225 19.25 14.4812 19.25 9.625V5.5125C19.25 4.82125 18.8192 4.19125 18.1592 3.91125L11.7425 1.19C11.275 0.98875 10.725 0.98875 10.2575 1.19ZM8.51583 14.2538L6.14167 11.9875C6.0568 11.9065 5.98948 11.8103 5.94355 11.7045C5.89762 11.5986 5.87398 11.4852 5.87398 11.3706C5.87398 11.2561 5.89762 11.1426 5.94355 11.0368C5.98948 10.9309 6.0568 10.8348 6.14167 10.7537C6.22653 10.6727 6.32728 10.6085 6.43817 10.5646C6.54905 10.5208 6.6679 10.4982 6.78792 10.4982C6.90794 10.4982 7.02678 10.5208 7.13766 10.5646C7.24855 10.6085 7.3493 10.6727 7.43417 10.7537L9.16667 12.3988L14.5567 7.25375C14.6415 7.17274 14.7423 7.10848 14.8532 7.06464C14.9641 7.0208 15.0829 6.99823 15.2029 6.99823C15.3229 6.99823 15.4418 7.0208 15.5527 7.06464C15.6635 7.10848 15.7643 7.17274 15.8492 7.25375C15.934 7.33476 16.0014 7.43093 16.0473 7.53677C16.0932 7.64262 16.1169 7.75606 16.1169 7.87063C16.1169 7.98519 16.0932 8.09863 16.0473 8.20448C16.0014 8.31032 15.934 8.40649 15.8492 8.4875L9.80833 14.2538C9.72353 14.3349 9.6228 14.3992 9.51191 14.4431C9.40101 14.487 9.28214 14.5096 9.16208 14.5096C9.04203 14.5096 8.92315 14.487 8.81226 14.4431C8.70137 14.3992 8.60064 14.3349 8.51583 14.2538Z"
+          fill="#4ECB71"
+        />
+      </g>
+    </g>
+    <defs>
+      <filter id="filter0_d_2053_11538" x="1.75" y="1.03906" width="18.5" height="22.0859" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+        <feOffset dy="2" />
+        <feGaussianBlur stdDeviation="0.5" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2053_11538" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2053_11538" result="shape" />
+      </filter>
+      <clipPath id="clip0_2053_11538">
+        <rect width="22" height="21" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+@Component({
+  tag: 'd-credential-card',
+  styleUrl: 'd-credential-card.css',
+  shadow: true,
+  assetsDirs: ['assets']
+})
+export class DCredentialCard {
+  @Prop({ reflect: true }) name: string;
+  @Prop({ reflect: true }) issuer: string;
+  @Prop({ reflect: true }) logoSrc?: string;
+  @Prop({ reflect: true }) description?: string;
+  @Prop({ reflect: true }) expirationDate?: string;
+  @Prop({ reflect: true }) verified?: boolean = false;
+
+  render() {
+    // const imageSrc = getAssetPath(`./assets/Rectangle.png`);
+    return (
+      <Host>
+        <div class="between">
+          <div class="info">
+            <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>
+          </div>
+          {this.verified && verifiedUser}
+        </div>
+        <div class="between">
+          <div class="labeled-text">
+            <span class="label">Issued by</span>
+            <span>{this.issuer}</span>
+          </div>
+          <div class="labeled-text items-end">
+            <span class="label">Exp</span>
+            <span>{this.expirationDate}</span>
+          </div>
+        </div>
+      </Host>
+    );
+  }
+}
diff --git a/src/components/credential-card/readme.md b/src/components/credential-card/readme.md
@@ -0,0 +1,35 @@
+# d-credential-card
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property         | Attribute         | Description | Type      | Default     |
+| ---------------- | ----------------- | ----------- | --------- | ----------- |
+| `description`    | `description`     |             | `string`  | `undefined` |
+| `expirationDate` | `expiration-date` |             | `string`  | `undefined` |
+| `issuer`         | `issuer`          |             | `string`  | `undefined` |
+| `logoSrc`        | `logo-src`        |             | `string`  | `undefined` |
+| `name`           | `name`            |             | `string`  | `undefined` |
+| `verified`       | `verified`        |             | `boolean` | `false`     |
+
+
+## Dependencies
+
+### Depends on
+
+- [d-avatar](../avatar)
+
+### Graph
+```mermaid
+graph TD;
+  d-credential-card --> d-avatar
+  style d-credential-card fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/credential-card/test/d-credential-card.e2e.ts b/src/components/credential-card/test/d-credential-card.e2e.ts
@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('d-credential-card', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<d-credential-card></d-credential-card>');
+
+    const element = await page.find('d-credential-card');
+    expect(element).toHaveClass('hydrated');
+  });
+});