fix_avatars_in_cards (#169)

* fix_avatars_in_cards * fix: stories placeholder image * fix: use icons for credentials logo * fix: extend uniform cards width * tests: update activity card spec * Update credential-card.stories.ts --------- Co-authored-by: Puria Nafisi Azizi <[email protected]>
ForkbombEu · Oct 11, 2024 · a51cf41 · a51cf41
1 parent 6323fb1
commit a51cf41
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 13 deletions.
diff --git a/src/components/activity-card/activity.stories.ts b/src/components/activity-card/activity.stories.ts
@@ -27,7 +27,7 @@ type Story = StoryObj<DActivityCard>;
 export const Default: Story = {
   args: {
     name: 'Proof of humanity is expired',
-    logo: 'https://via.placeholder.com/150',
+    logo: `https://api.dicebear.com/7.x/open-peeps/svg?seed=${new Date()}`,
     message: 'Proof of humanity is expired',
     description: 'Your proof of humanity has expired. Please renew it if you need it.',
     date: '1 day ago',
@@ -36,11 +36,7 @@ export const Default: Story = {
 
 export const Read: Story = {
   args: {
-    name: 'Proof of humanity is expired',
-    logo: 'https://via.placeholder.com/150',
-    message: 'Proof of humanity is expired',
-    description: 'Your proof of humanity has expired. Please renew it if you need it.',
-    date: '1 day ago',
+    ...Default.args,
     read: true,
   },
 };
diff --git a/src/components/activity-card/d-activity-card.css b/src/components/activity-card/d-activity-card.css
@@ -1,3 +1,4 @@
 :host {
   display: block;
+  @apply w-full;
 }
diff --git a/src/components/activity-card/d-activity-card.tsx b/src/components/activity-card/d-activity-card.tsx
@@ -18,7 +18,7 @@ export class DActivityCard {
       <Host>
         <div class="items-start border-stroke flex gap-4 border-b p-2 rounded-lg w-full max-w-screen-sm">
           <d-avatar src={this.logo} name={this.name} shape="square" />
-          <div class="flex flex-col gap-2">
+          <div class="flex flex-col gap-2 self-stretch w-full">
             <h2>{this.message}</h2>
             <d-text size="s" class="text-on-alt">
               {this.description}

diff --git a/src/components/activity-card/test/d-activity-card.spec.tsx b/src/components/activity-card/test/d-activity-card.spec.tsx
@@ -12,7 +12,7 @@ describe('d-activity-card', () => {
         <mock:shadow-root>
           <div class="border-b border-stroke flex gap-4 items-start max-w-screen-sm p-2 rounded-lg w-full">
             <d-avatar shape="square"></d-avatar>
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-2 self-stretch w-full">
               <h2></h2>
               <d-text class="text-on-alt" size="s"></d-text>
               <div class="flex gap-2.5 items-center">

diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx
@@ -15,7 +15,7 @@ export class Avatar {
 
   render() {
     const iconSizes: Record<Size, number> = { 'xs': 16, 's': 24, 'm': 28, 'l': 40, 'xl': 48, '2xl': 56 };
-
+    console.log('error rendering avatar', this.error);
     if (this.src && !this.error) {
       return (
         <Host>

diff --git a/src/components/credential-card/credential-card.stories.ts b/src/components/credential-card/credential-card.stories.ts
@@ -10,7 +10,9 @@ const meta = {
     expiration-date="${args.expirationDate}" 
     issued-by-label="${args.issuedByLabel}"
     expiration-label="${args.expirationLabel}"
-    verified="${args.verified}">
+    verified="${args.verified}"
+    logo-src="${args.logoSrc}"
+    >
     <d-badge>address</d-badge>
     <d-badge>email</d-badge>
     </d-credential-card>`,
@@ -27,6 +29,7 @@ export const Default: Story = {
     expirationLabel: 'exp',
     expirationDate: '2017-01-01',
     verified: false,
+    logoSrc: `https://api.dicebear.com/9.x/shapes/svg?seed=${new Date()}`,
   },
   parameters: {
     design: {

diff --git a/src/components/credential-card/d-credential-card.tsx b/src/components/credential-card/d-credential-card.tsx
@@ -37,7 +37,7 @@ import { Component, Host, Prop, h } from '@stencil/core';
 export class DCredentialCard {
   @Prop() name: string;
   @Prop() issuer: string;
-  @Prop() logoSrc?: string;
+  @Prop({ attribute: 'logo-src' }) logoSrc?: string;
   @Prop() verified?: boolean = false;
   @Prop() expirationDate?: string;
   @Prop() issuedByLabel: string;

diff --git a/src/components/credential-service/credential-services.stories.ts b/src/components/credential-service/credential-services.stories.ts
@@ -3,7 +3,13 @@ import type { Components } from '../../components.js';
 
 const meta = {
   title: 'Design System/DATA DISPLAY/CredentialService',
-  render: args => `<d-credential-service name="${args.name}" issuer="${args.issuer}" description="${args.description}" href="${args.href}"></d-credential-service>`,
+  render: args => `<d-credential-service 
+  name="${args.name}" 
+  issuer="${args.issuer}" 
+  description="${args.description}" 
+  href="${args.href}" 
+  logo-src="${args.logoSrc}"
+  ></d-credential-service>`,
 } satisfies Meta<Components.DCredentialService>;
 
 export default meta;
@@ -14,6 +20,7 @@ export const Default: Story = {
     name: 'Over 18',
     description: 'Age Validation',
     issuer: 'Italian Government',
+    logoSrc: `https://api.dicebear.com/9.x/icons/svg?seed=${new Date()}`,
   },
   parameters: {
     design: {

diff --git a/src/components/credential-service/d-credential-service.tsx b/src/components/credential-service/d-credential-service.tsx
@@ -8,7 +8,7 @@ import { Component, Host, Prop, h } from '@stencil/core';
 export class DCredentialService {
   @Prop() name: string;
   @Prop() issuer: string;
-  @Prop() logoSrc?: string;
+  @Prop({attribute:"logo-src"}) logoSrc?: string;
   @Prop() organization?: string;
   @Prop() description?: string;
   @Prop({ reflect: true }) href?: string;