fix: improve activity items (#191)

* feat; create abstract component list-item * chore: export stencil vscode config * refactor: use list-item in credential-service and activity-card * test: edit activity and credential service * test: fix list-item and vertical-stack tests
ForkbombEu · Dec 12, 2024 · ce32daa · ce32daa
1 parent b8516cd
commit ce32daa
Show file tree

Hide file tree

Showing 23 changed files with 274 additions and 122 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -5,17 +5,16 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { Color, Shape, Size } from "./components/types";
+import { Color, Gap, Shape, Size } from "./components/types";
 import { Tab } from "./components/tab-button/d-tab-button";
-export { Color, Shape, Size } from "./components/types";
+export { Color, Gap, Shape, Size } from "./components/types";
 export { Tab } from "./components/tab-button/d-tab-button";
 export namespace Components {
     interface DActivityCard {
         "date": string;
         "description": string;
         "logo": string;
         "message": string;
-        "name": string;
         "read": boolean;
     }
     interface DAppDetails {
@@ -131,6 +130,14 @@ export namespace Components {
         "type": 'text' | 'password' | 'email' | 'number';
         "value": string;
     }
+    interface DListItem {
+        "background"?: boolean;
+        "description"?: string;
+        "href"?: string;
+        "issuer"?: string;
+        "logoSrc"?: string;
+        "name": string;
+    }
     interface DLoading {
         "loading": boolean;
         "message": string;
@@ -209,7 +216,8 @@ export namespace Components {
         "verifier": string;
     }
     interface DVerticalStack {
-        "gap": 0 | 2 | 4 | 8;
+        "gap": Gap;
+        "separator"?: boolean;
     }
     interface DidroomLogo {
     }
@@ -443,6 +451,12 @@ declare global {
         prototype: HTMLDInputElement;
         new (): HTMLDInputElement;
     };
+    interface HTMLDListItemElement extends Components.DListItem, HTMLStencilElement {
+    }
+    var HTMLDListItemElement: {
+        prototype: HTMLDListItemElement;
+        new (): HTMLDListItemElement;
+    };
     interface HTMLDLoadingElement extends Components.DLoading, HTMLStencilElement {
     }
     var HTMLDLoadingElement: {
@@ -576,6 +590,7 @@ declare global {
         "d-illustration": HTMLDIllustrationElement;
         "d-info-led": HTMLDInfoLedElement;
         "d-input": HTMLDInputElement;
+        "d-list-item": HTMLDListItemElement;
         "d-loading": HTMLDLoadingElement;
         "d-logo": HTMLDLogoElement;
         "d-organizations": HTMLDOrganizationsElement;
@@ -600,7 +615,6 @@ declare namespace LocalJSX {
         "description"?: string;
         "logo"?: string;
         "message"?: string;
-        "name"?: string;
         "read"?: boolean;
     }
     interface DAppDetails {
@@ -724,6 +738,14 @@ declare namespace LocalJSX {
         "type"?: 'text' | 'password' | 'email' | 'number';
         "value"?: string;
     }
+    interface DListItem {
+        "background"?: boolean;
+        "description"?: string;
+        "href"?: string;
+        "issuer"?: string;
+        "logoSrc"?: string;
+        "name"?: string;
+    }
     interface DLoading {
         "loading"?: boolean;
         "message"?: string;
@@ -806,7 +828,8 @@ declare namespace LocalJSX {
         "verifier"?: string;
     }
     interface DVerticalStack {
-        "gap"?: 0 | 2 | 4 | 8;
+        "gap"?: Gap;
+        "separator"?: boolean;
     }
     interface DidroomLogo {
     }
@@ -833,6 +856,7 @@ declare namespace LocalJSX {
         "d-illustration": DIllustration;
         "d-info-led": DInfoLed;
         "d-input": DInput;
+        "d-list-item": DListItem;
         "d-loading": DLoading;
         "d-logo": DLogo;
         "d-organizations": DOrganizations;
@@ -877,6 +901,7 @@ declare module "@stencil/core" {
             "d-illustration": LocalJSX.DIllustration & JSXBase.HTMLAttributes<HTMLDIllustrationElement>;
             "d-info-led": LocalJSX.DInfoLed & JSXBase.HTMLAttributes<HTMLDInfoLedElement>;
             "d-input": LocalJSX.DInput & JSXBase.HTMLAttributes<HTMLDInputElement>;
+            "d-list-item": LocalJSX.DListItem & JSXBase.HTMLAttributes<HTMLDListItemElement>;
             "d-loading": LocalJSX.DLoading & JSXBase.HTMLAttributes<HTMLDLoadingElement>;
             "d-logo": LocalJSX.DLogo & JSXBase.HTMLAttributes<HTMLDLogoElement>;
             "d-organizations": LocalJSX.DOrganizations & JSXBase.HTMLAttributes<HTMLDOrganizationsElement>;

diff --git a/src/components/activity-card/activity.stories.ts b/src/components/activity-card/activity.stories.ts
@@ -2,10 +2,10 @@ import { DActivityCard } from './d-activity-card';
 import { Meta, StoryObj } from '@storybook/html';
 
 const meta = {
-  title: 'Design System/FEEDBACK & STATUS/Activity',
+  title: 'Design System/DATA DISPLAY/Activity',
   render: args =>
-    `<d-activity-card
-      name="${args.name}" 
+    `<d-vertical-stack separator> <d-activity-card
+      message="${args.message}" 
       logo="${args.logo}" 
       description="${args.description}" 
       date="${args.date}" 
@@ -18,15 +18,30 @@ const meta = {
       <d-button size="small" color="primary">
         action 2
       </d-button> 
-    </d-activity-card>`,
+    </d-activity-card>
+    <d-activity-card
+      message="${args.message}"
+      logo="${args.logo}" 
+      description="${args.description}" 
+      date="${args.date}" 
+    ${args.message && `message="${args.message}"`}
+    ${args.read && `read="${args.read}"`}
+    >
+      <d-button size="small" color="accent">
+        action 1
+      </d-button>
+      <d-button size="small" color="primary">
+        action 2
+      </d-button> 
+    </d-activity-card>
+    </d-vertical-stack>`,
 } satisfies Meta<DActivityCard>;
 
 export default meta;
 type Story = StoryObj<DActivityCard>;
 
 export const Default: Story = {
   args: {
-    name: 'Proof of humanity is expired',
     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.',

diff --git a/src/components/activity-card/d-activity-card.tsx b/src/components/activity-card/d-activity-card.tsx
@@ -6,32 +6,25 @@ import { Component, Host, Prop, h } from '@stencil/core';
   shadow: true,
 })
 export class DActivityCard {
-  @Prop({ reflect: true }) name: string;
-  @Prop({ reflect: true }) logo: string;
   @Prop({ reflect: true }) message: string;
+  @Prop({ reflect: true }) logo: string;
   @Prop({ reflect: true }) description: string;
   @Prop({ reflect: true }) date: string;
   @Prop({ reflect: true }) read: boolean = false;
 
   render() {
     return (
       <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 self-stretch w-full">
-            <h2>{this.message}</h2>
-            <d-text size="s" class="text-on-alt">
-              {this.description}
-            </d-text>
+        <d-list-item name={this.message} logo-src={this.logo} href="#" description={this.description}>
+          <div slot="date">
             <div class="flex items-center gap-2.5">
               {!this.read && <d-info-led type="warning" />}
-              <d-text size="xs">{this.date}</d-text>
-            </div>
-            <div class="flex justify-end gap-2.5">
-              <slot></slot>
+              <d-text size="xs" class="!text-on-alt">
+                {this.date}
+              </d-text>
             </div>
           </div>
-        </div>
+        </d-list-item>
       </Host>
     );
   }

diff --git a/src/components/activity-card/readme.md b/src/components/activity-card/readme.md
@@ -13,24 +13,26 @@
 | `description` | `description` |             | `string`  | `undefined` |
 | `logo`        | `logo`        |             | `string`  | `undefined` |
 | `message`     | `message`     |             | `string`  | `undefined` |
-| `name`        | `name`        |             | `string`  | `undefined` |
 | `read`        | `read`        |             | `boolean` | `false`     |
 
 
 ## Dependencies
 
 ### Depends on
 
-- [d-avatar](../avatar)
-- [d-text](../text)
+- [d-list-item](../d-list-item)
 - [d-info-led](../info-led)
+- [d-text](../text)
 
 ### Graph
 ```mermaid
 graph TD;
-  d-activity-card --> d-avatar
-  d-activity-card --> d-text
+  d-activity-card --> d-list-item
   d-activity-card --> d-info-led
+  d-activity-card --> d-text
+  d-list-item --> d-avatar
+  d-list-item --> d-text
+  d-list-item --> d-icon
   d-avatar --> d-icon
   style d-activity-card fill:#f9f,stroke:#333,stroke-width:4px
 ```

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,20 +10,14 @@ 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 max-w-screen-sm p-2 rounded-lg w-full">
-            <d-avatar shape="square"></d-avatar>
-            <div class="flex flex-col gap-2 self-stretch w-full">
-              <h2></h2>
-              <d-text class="text-on-alt" size="s"></d-text>
+         <d-list-item href="#">
+            <div slot="date">
               <div class="flex gap-2.5 items-center">
                 <d-info-led type="warning"></d-info-led>
-                <d-text size="xs"></d-text>
-              </div>
-              <div class="flex gap-2.5 justify-end">
-                <slot></slot>
+                <d-text class="!text-on-alt" size="xs"></d-text>
               </div>
             </div>
-         </div>
+         </d-list-item>
         </mock:shadow-root>
       </d-activity-card>
     `);

diff --git a/src/components/avatar/readme.md b/src/components/avatar/readme.md
@@ -10,7 +10,7 @@
 | Property | Attribute | Description | Type                                         | Default     |
 | -------- | --------- | ----------- | -------------------------------------------- | ----------- |
 | `name`   | `name`    |             | `string`                                     | `undefined` |
-| `shape`  | `shape`   |             | `string`                                     | `'round'`   |
+| `shape`  | `shape`   |             | `"round" \| "square"`                        | `'round'`   |
 | `size`   | `size`    |             | `"2xl" \| "l" \| "m" \| "s" \| "xl" \| "xs"` | `'m'`       |
 | `src`    | `src`     |             | `string`                                     | `undefined` |
 
@@ -19,9 +19,8 @@
 
 ### Used by
 
- - [d-activity-card](../activity-card)
  - [d-credential-card](../credential-card)
- - [d-credential-service](../credential-service)
+ - [d-list-item](../d-list-item)
  - [d-verification-card](../verification-card)
 
 ### Depends on
@@ -32,9 +31,8 @@
 ```mermaid
 graph TD;
   d-avatar --> d-icon
-  d-activity-card --> d-avatar
   d-credential-card --> d-avatar
-  d-credential-service --> d-avatar
+  d-list-item --> d-avatar
   d-verification-card --> d-avatar
   style d-avatar fill:#f9f,stroke:#333,stroke-width:4px
 ```

diff --git a/src/components/button/readme.md b/src/components/button/readme.md
@@ -7,17 +7,17 @@
 
 ## Properties
 
-| Property     | Attribute     | Description | Type                              | Default     |
-| ------------ | ------------- | ----------- | --------------------------------- | ----------- |
-| `buttonType` | `button-type` |             | `string`                          | `'button'`  |
-| `clear`      | `clear`       |             | `boolean`                         | `undefined` |
-| `color`      | `color`       |             | `string`                          | `'primary'` |
-| `disabled`   | `disabled`    |             | `boolean`                         | `false`     |
-| `expand`     | `expand`      |             | `boolean`                         | `undefined` |
-| `form`       | `form`        |             | `HTMLFormElement \| string`       | `undefined` |
-| `href`       | `href`        |             | `string`                          | `undefined` |
-| `size`       | `size`        |             | `"default" \| "large" \| "small"` | `undefined` |
-| `type`       | `type`        |             | `"button" \| "reset" \| "submit"` | `'button'`  |
+| Property     | Attribute     | Description | Type                                                                      | Default     |
+| ------------ | ------------- | ----------- | ------------------------------------------------------------------------- | ----------- |
+| `buttonType` | `button-type` |             | `string`                                                                  | `'button'`  |
+| `clear`      | `clear`       |             | `boolean`                                                                 | `undefined` |
+| `color`      | `color`       |             | `"accent" \| "error" \| "outline" \| "primary" \| "success" \| "warning"` | `'primary'` |
+| `disabled`   | `disabled`    |             | `boolean`                                                                 | `false`     |
+| `expand`     | `expand`      |             | `boolean`                                                                 | `undefined` |
+| `form`       | `form`        |             | `HTMLFormElement \| string`                                               | `undefined` |
+| `href`       | `href`        |             | `string`                                                                  | `undefined` |
+| `size`       | `size`        |             | `"default" \| "large" \| "small"`                                         | `undefined` |
+| `type`       | `type`        |             | `"button" \| "reset" \| "submit"`                                         | `'button'`  |
 
 
 ## Events

diff --git a/src/components/credential-service/d-credential-service.tsx b/src/components/credential-service/d-credential-service.tsx
@@ -8,38 +8,30 @@ import { Component, Host, Prop, h } from '@stencil/core';
 export class DCredentialService {
   @Prop() name: string;
   @Prop() issuer: string;
-  @Prop({attribute:"logo-src"}) logoSrc?: string;
+  @Prop({ attribute: 'logo-src' }) logoSrc?: string;
   @Prop() organization?: string;
   @Prop() description?: string;
   @Prop({ reflect: true }) href?: string;
 
+
   render() {
-    const content = (
-      <div class="w-full rounded-lg p-5 flex gap-3 bg-primary no-underline items-center">
-        <div class="flex flex-grow items-start gap-3">
-          <d-avatar name={this.name} src={this.logoSrc} size="l" shape="square"></d-avatar>
-          <div class="h-full min-h-[60px] flex flex-col grow justify-between">
-            <d-text size="l">{this.name}</d-text>
-            <d-text size="s"  class="!text-on-alt">{this.organization}</d-text>
-            <d-text class="!text-on-alt">{this.issuer}</d-text>
-          </div>
-        </div>
-        {this.href && (
-          <div class="shrink-0">
-            <d-icon icon="arrow-forward" outline/>
+    return (
+      <Host>
+        <d-list-item
+          name={this.name}
+          issuer={this.issuer}
+          logo-src={this.logoSrc}
+          description={this.description}
+          href={this.href}
+          background
+        >
+          <div slot="organization">
+            <d-text size="s" class="!text-on-alt">
+            {this.organization}
+            </d-text>
           </div>
-        )}
-      </div>
+        </d-list-item>
+      </Host>
     );
-
-    if (this.href) {
-      return (
-        <Host>
-          <a href={this.href}>{content}</a>
-        </Host>
-      );
-    } else {
-      return <Host>{content}</Host>;
-    }
   }
 }
diff --git a/src/components/credential-service/readme.md b/src/components/credential-service/readme.md
@@ -21,16 +21,17 @@
 
 ### Depends on
 
-- [d-avatar](../avatar)
+- [d-list-item](../d-list-item)
 - [d-text](../text)
-- [d-icon](../icon)
 
 ### Graph
 ```mermaid
 graph TD;
-  d-credential-service --> d-avatar
+  d-credential-service --> d-list-item
   d-credential-service --> d-text
-  d-credential-service --> d-icon
+  d-list-item --> d-avatar
+  d-list-item --> d-text
+  d-list-item --> d-icon
   d-avatar --> d-icon
   style d-credential-service fill:#f9f,stroke:#333,stroke-width:4px
 ```