fix: add logo to verification card (#164)

ForkbombEu · Oct 8, 2024 · c82f8a5 · c82f8a5
1 parent a8c5081
commit c82f8a5
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 2 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -188,6 +188,7 @@ export namespace Components {
     }
     interface DVerificationCard {
         "flow": string;
+        "logo": string;
         "relyingParty": string;
         "selected": boolean;
         "verifier": string;
@@ -755,6 +756,7 @@ declare namespace LocalJSX {
     }
     interface DVerificationCard {
         "flow"?: string;
+        "logo"?: string;
         "relyingParty"?: string;
         "selected"?: boolean;
         "verifier"?: string;

diff --git a/src/components/verification-card/d-verification-card.tsx b/src/components/verification-card/d-verification-card.tsx
@@ -10,14 +10,15 @@ export class DVerificationCard {
   @Prop({ reflect: true }) relyingParty: string;
   @Prop({ reflect: true }) verifier: string;
   @Prop({ reflect: true }) flow: string;
+  @Prop({ reflect: true }) logo: string;
 
   render() {
     return (
       <Host>
         <div class={{ 'w-full rounded-lg p-5 flex gap-3 bg-primary no-underline items-start': true, 'border border-success': this.selected }}>
           <d-vertical-stack class="w-full">
             <d-horizontal-stack class="justify-between items-start w-full">
-              <d-avatar name="John Doe" size="l" shape="square"></d-avatar>
+              <d-avatar name={this.verifier} size="l" shape="square" src={this.logo}></d-avatar>
               <div class={{ 'rounded-full h-6 w-6': true, 'bg-success': this.selected, 'border border-accent': !this.selected }}>
                 {this.selected && <d-icon icon="check" outline size={22} />}
               </div>

diff --git a/src/components/verification-card/readme.md b/src/components/verification-card/readme.md
@@ -10,6 +10,7 @@
 | Property       | Attribute       | Description | Type      | Default     |
 | -------------- | --------------- | ----------- | --------- | ----------- |
 | `flow`         | `flow`          |             | `string`  | `undefined` |
+| `logo`         | `logo`          |             | `string`  | `undefined` |
 | `relyingParty` | `relying-party` |             | `string`  | `undefined` |
 | `selected`     | `selected`      |             | `boolean` | `false`     |
 | `verifier`     | `verifier`      |             | `string`  | `undefined` |

diff --git a/src/components/verification-card/test/d-verification-card.spec.tsx b/src/components/verification-card/test/d-verification-card.spec.tsx
@@ -13,7 +13,7 @@ describe('d-verification-card', () => {
          <div class="bg-primary flex gap-3 items-start no-underline p-5 rounded-lg w-full">
            <d-vertical-stack class="w-full">
              <d-horizontal-stack class="items-start justify-between w-full">
-               <d-avatar name="John Doe" shape="square" size="l"></d-avatar>
+               <d-avatar name="" shape="square" size="l"></d-avatar>
                <div class="border border-accent h-6 rounded-full w-6"></div>
              </d-horizontal-stack>
              <d-vertical-stack class="w-full" gap="0">

diff --git a/src/components/verification-card/verification-card.stories.ts b/src/components/verification-card/verification-card.stories.ts
@@ -8,6 +8,7 @@ const meta = {
   relying-party="${args.relyingParty}"
   verifier="${args.verifier}"
   flow="${args.flow}"
+  logo="${args.logo}"
   >
     <d-definition title="Date of Birth:" definition="24/05/1986" dotted></d-definition>
     <d-definition title="Address" definition="Via Da Milano, 23" dotted ></d-definition>
@@ -24,6 +25,7 @@ export const Default: Story = {
     relyingParty: 'dyne.org',
     verifier: 'John Doe',
     flow: 'Age verification',
+    logo: `https://api.dicebear.com/7.x/open-peeps/svg?seed=${new Date()}`,
   },
   parameters: {
     design: {