feat: activity card

src/components.d.ts

@@ -8,6 +8,14 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { Color, Shape, Size } from "./components/types";
 export { Color, Shape, Size } from "./components/types";
 export namespace Components {
+    interface DActivityCard {
+        "date": string;
+        "description": string;
+        "logo": string;
+        "message": string;
+        "name": string;
+        "type": 'error' | 'warning' | 'success';
+    }
     interface DAvatar {
         "name"?: string;
         "shape"?: Shape;
@@ -114,6 +122,12 @@ export interface DInputCustomEvent<T> extends CustomEvent<T> {
     target: HTMLDInputElement;
 }
 declare global {
+    interface HTMLDActivityCardElement extends Components.DActivityCard, HTMLStencilElement {
+    }
+    var HTMLDActivityCardElement: {
+        prototype: HTMLDActivityCardElement;
+        new (): HTMLDActivityCardElement;
+    };
     interface HTMLDAvatarElement extends Components.DAvatar, HTMLStencilElement {
     }
     var HTMLDAvatarElement: {
@@ -252,6 +266,7 @@ declare global {
         new (): HTMLDidroomLogoElement;
     };
     interface HTMLElementTagNameMap {
+        "d-activity-card": HTMLDActivityCardElement;
         "d-avatar": HTMLDAvatarElement;
         "d-button": HTMLDButtonElement;
         "d-buttons-group": HTMLDButtonsGroupElement;
@@ -272,6 +287,14 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    interface DActivityCard {
+        "date"?: string;
+        "description"?: string;
+        "logo"?: string;
+        "message"?: string;
+        "name"?: string;
+        "type"?: 'error' | 'warning' | 'success';
+    }
     interface DAvatar {
         "name"?: string;
         "shape"?: Shape;
@@ -370,6 +393,7 @@ declare namespace LocalJSX {
     interface DidroomLogo {
     }
     interface IntrinsicElements {
+        "d-activity-card": DActivityCard;
         "d-avatar": DAvatar;
         "d-button": DButton;
         "d-buttons-group": DButtonsGroup;
@@ -393,6 +417,7 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "d-activity-card": LocalJSX.DActivityCard & JSXBase.HTMLAttributes<HTMLDActivityCardElement>;
             "d-avatar": LocalJSX.DAvatar & JSXBase.HTMLAttributes<HTMLDAvatarElement>;
             "d-button": LocalJSX.DButton & JSXBase.HTMLAttributes<HTMLDButtonElement>;
             "d-buttons-group": LocalJSX.DButtonsGroup & JSXBase.HTMLAttributes<HTMLDButtonsGroupElement>;

src/components/activity-card/activity.stories.ts

@@ -0,0 +1,36 @@
+import { DActivityCard } from './d-activity-card';
+import { Meta, StoryObj } from '@storybook/html';
+
+const meta = {
+  title: 'Design System/Molecule/Activity',
+  render: args =>
+    `<d-activity-card
+      name="${args.name}" 
+      logo="${args.logo}" 
+      description="${args.description}" 
+      date="${args.date}" 
+      type="${args.type}" 
+    ${args.message && `message="${args.message}"`}>
+      <d-button size="small" color="accent">
+        action 1
+      </d-button>
+      <d-button size="small" color="primary">
+        action 2
+      </d-button> 
+    </d-activity-card>`,
+} satisfies Meta<DActivityCard>;
+
+export default meta;
+type Story = StoryObj<DActivityCard>;
+
+export const Default: Story = {
+  args: {
+    name: 'Proof of humanity is expired',
+    // placeholder logo
+    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',
+    type: 'error',
+  },
+};

src/components/activity-card/d-activity-card.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

src/components/activity-card/d-activity-card.tsx

@@ -0,0 +1,38 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'd-activity-card',
+  styleUrl: 'd-activity-card.css',
+  shadow: true,
+})
+export class DActivityCard {
+  @Prop({ reflect: true }) name: string;
+  @Prop({ reflect: true }) logo: string;
+  @Prop({ reflect: true }) message: string;
+  @Prop({ reflect: true }) description: string;
+  @Prop({ reflect: true }) date: string;
+  @Prop({ reflect: true }) type: 'error' | 'warning' | 'success';
+
+  render() {
+    return (
+      <Host>
+        <div class="items-start border-stroke flex gap-4 border-b py-2 w-fit">
+          <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} />
+              <d-text size="xs">{this.date}</d-text>
+            </div>
+            <div class="flex justify-end gap-2.5">
+              <slot></slot>
+            </div>
+          </div>
+        </div>
+      </Host>
+    );
+  }
+}

src/components/activity-card/readme.md

@@ -0,0 +1,40 @@
+# d-activity-card
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property        | Attribute        | Description | Type                                | Default     |
+| --------------- | ---------------- | ----------- | ----------------------------------- | ----------- |
+| `credentialSrc` | `credential-src` |             | `string`                            | `undefined` |
+| `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` |
+
+
+## Dependencies
+
+### Depends on
+
+- [d-avatar](../avatar)
+- [d-text](../text)
+- [d-info-led](../info-led)
+
+### Graph
+```mermaid
+graph TD;
+  d-activity-card --> d-avatar
+  d-activity-card --> d-text
+  d-activity-card --> d-info-led
+  style d-activity-card fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/activity-card/test/d-activity-card.e2e.ts

@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('d-activity-card', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<d-activity-card></d-activity-card>');
+
+    const element = await page.find('d-activity-card');
+    expect(element).toHaveClass('hydrated');
+  });
+});

src/components/activity-card/test/d-activity-card.spec.tsx

@@ -0,0 +1,18 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { DActivityCard } from '../d-activity-card';
+
+describe('d-activity-card', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [DActivityCard],
+      html: `<d-activity-card></d-activity-card>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <d-activity-card>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </d-activity-card>
+    `);
+  });
+});

src/components/avatar/readme.md

@@ -19,13 +19,15 @@
 
 ### Used by
 
+ - [d-activity-card](../activity-card)
  - [d-credential-card](../credential-card)
  - [d-credential-detail](../credential-detail)
  - [d-credential-service](../credential-service)
 
 ### Graph
 ```mermaid
 graph TD;
+  d-activity-card --> d-avatar
   d-credential-card --> d-avatar
   d-credential-detail --> d-avatar
   d-credential-service --> d-avatar

src/components/info-led/readme.md

@@ -12,6 +12,19 @@
 | `type`   | `type`    |             | `"error" \| "success" \| "warning"` | `'success'` |
 
 
+## Dependencies
+
+### Used by
+
+ - [d-activity-card](../activity-card)
+
+### Graph
+```mermaid
+graph TD;
+  d-activity-card --> d-info-led
+  style d-info-led fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

src/components/text/readme.md

@@ -17,6 +17,7 @@
 
 ### Used by
 
+ - [d-activity-card](../activity-card)
  - [d-credential-service](../credential-service)
  - [d-feedback](../feedback)
  - [d-input](../input)
@@ -26,6 +27,7 @@
 ### Graph
 ```mermaid
 graph TD;
+  d-activity-card --> d-text
   d-credential-service --> d-text
   d-feedback --> d-text
   d-input --> d-text