fix: readed activity cards (#104)

* fix: readed activity cards * fix: read status is rendered just as a dot * fix: actvity max width * test: update activity card test --------- Co-authored-by: Puria Nafisi Azizi <[email protected]>
ForkbombEu · Jul 29, 2024 · 0e3bb42 · 0e3bb42
1 parent 895144c
commit 0e3bb42
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 18 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -14,7 +14,7 @@ export namespace Components {
         "logo": string;
         "message": string;
         "name": string;
-        "type": 'error' | 'warning' | 'success';
+        "read": boolean;
     }
     interface DAppDetails {
         "developedBy": string;
@@ -411,7 +411,7 @@ declare namespace LocalJSX {
         "logo"?: string;
         "message"?: string;
         "name"?: string;
-        "type"?: 'error' | 'warning' | 'success';
+        "read"?: boolean;
     }
     interface DAppDetails {
         "developedBy"?: string;

diff --git a/src/components/activity-card/activity.stories.ts b/src/components/activity-card/activity.stories.ts
@@ -9,8 +9,9 @@ const meta = {
       logo="${args.logo}" 
       description="${args.description}" 
       date="${args.date}" 
-      type="${args.type}" 
-    ${args.message && `message="${args.message}"`}>
+    ${args.message && `message="${args.message}"`}
+    ${args.read && `read="${args.read}"`}
+    >
       <d-button size="small" color="accent">
         action 1
       </d-button>
@@ -30,6 +31,16 @@ export const Default: Story = {
     message: 'Proof of humanity is expired',
     description: 'Your proof of humanity has expired. Please renew it if you need it.',
     date: '1 day ago',
-    type: 'error',
+  },
+};
+
+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',
+    read: true,
   },
 };
diff --git a/src/components/activity-card/d-activity-card.tsx b/src/components/activity-card/d-activity-card.tsx
@@ -11,20 +11,20 @@ export class DActivityCard {
   @Prop({ reflect: true }) message: string;
   @Prop({ reflect: true }) description: string;
   @Prop({ reflect: true }) date: string;
-  @Prop({ reflect: true }) type: 'error' | 'warning' | 'success';
+  @Prop({ reflect: true }) read: boolean = false;
 
   render() {
     return (
       <Host>
-        <div class="items-start border-stroke flex gap-4 border-b py-2 w-fit">
+        <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">
             <h2>{this.message}</h2>
             <d-text size="s" class="text-on-alt">
               {this.description}
             </d-text>
             <div class="flex items-center gap-2.5">
-              <d-info-led type={this.type} />
+              {!this.read && <d-info-led type="warning" />}
               <d-text size="xs">{this.date}</d-text>
             </div>
             <div class="flex justify-end gap-2.5">

diff --git a/src/components/activity-card/readme.md b/src/components/activity-card/readme.md
@@ -7,14 +7,14 @@
 
 ## Properties
 
-| Property      | Attribute     | Description | Type                                | Default     |
-| ------------- | ------------- | ----------- | ----------------------------------- | ----------- |
-| `date`        | `date`        |             | `string`                            | `undefined` |
-| `description` | `description` |             | `string`                            | `undefined` |
-| `logo`        | `logo`        |             | `string`                            | `undefined` |
-| `message`     | `message`     |             | `string`                            | `undefined` |
-| `name`        | `name`        |             | `string`                            | `undefined` |
-| `type`        | `type`        |             | `"error" \| "success" \| "warning"` | `undefined` |
+| Property      | Attribute     | Description | Type      | Default     |
+| ------------- | ------------- | ----------- | --------- | ----------- |
+| `date`        | `date`        |             | `string`  | `undefined` |
+| `description` | `description` |             | `string`  | `undefined` |
+| `logo`        | `logo`        |             | `string`  | `undefined` |
+| `message`     | `message`     |             | `string`  | `undefined` |
+| `name`        | `name`        |             | `string`  | `undefined` |
+| `read`        | `read`        |             | `boolean` | `false`     |
 
 
 ## Dependencies

diff --git a/src/components/activity-card/test/d-activity-card.spec.tsx b/src/components/activity-card/test/d-activity-card.spec.tsx
@@ -10,13 +10,13 @@ describe('d-activity-card', () => {
     expect(page.root).toEqualHtml(`
       <d-activity-card>
         <mock:shadow-root>
-          <div class="border-b border-stroke flex gap-4 items-start py-2 w-fit">
+          <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">
               <h2></h2>
               <d-text class="text-on-alt" size="s"></d-text>
               <div class="flex gap-2.5 items-center">
-                <d-info-led></d-info-led>
+                <d-info-led type="warning"></d-info-led>
                 <d-text size="xs"></d-text>
               </div>
               <div class="flex gap-2.5 justify-end">