fix: update credential card style (#124)

* fix: update credential card style

---------

Co-authored-by: Puria Nafisi Azizi <puria@dyne.org>

src/components.d.ts

@@ -26,6 +26,8 @@ export namespace Components {
         "size"?: Size;
         "src"?: string;
     }
+    interface DBadge {
+    }
     interface DButton {
         "buttonType": string;
         "clear"?: boolean;
@@ -40,8 +42,9 @@ export namespace Components {
     interface DButtonsGroup {
     }
     interface DCredentialCard {
-        "description"?: string;
         "expirationDate"?: string;
+        "expirationLabel": string;
+        "issuedByLabel": string;
         "issuer": string;
         "logoSrc"?: string;
         "name": string;
@@ -182,6 +185,12 @@ declare global {
         prototype: HTMLDAvatarElement;
         new (): HTMLDAvatarElement;
     };
+    interface HTMLDBadgeElement extends Components.DBadge, HTMLStencilElement {
+    }
+    var HTMLDBadgeElement: {
+        prototype: HTMLDBadgeElement;
+        new (): HTMLDBadgeElement;
+    };
     interface HTMLDButtonElementEventMap {
         "dFocus": void;
         "dBlur": void;
@@ -370,6 +379,7 @@ declare global {
         "d-activity-card": HTMLDActivityCardElement;
         "d-app-details": HTMLDAppDetailsElement;
         "d-avatar": HTMLDAvatarElement;
+        "d-badge": HTMLDBadgeElement;
         "d-button": HTMLDButtonElement;
         "d-buttons-group": HTMLDButtonsGroupElement;
         "d-credential-card": HTMLDCredentialCardElement;
@@ -414,6 +424,8 @@ declare namespace LocalJSX {
         "size"?: Size;
         "src"?: string;
     }
+    interface DBadge {
+    }
     interface DButton {
         "buttonType"?: string;
         "clear"?: boolean;
@@ -430,8 +442,9 @@ declare namespace LocalJSX {
     interface DButtonsGroup {
     }
     interface DCredentialCard {
-        "description"?: string;
         "expirationDate"?: string;
+        "expirationLabel"?: string;
+        "issuedByLabel"?: string;
         "issuer"?: string;
         "logoSrc"?: string;
         "name"?: string;
@@ -544,6 +557,7 @@ declare namespace LocalJSX {
         "d-activity-card": DActivityCard;
         "d-app-details": DAppDetails;
         "d-avatar": DAvatar;
+        "d-badge": DBadge;
         "d-button": DButton;
         "d-buttons-group": DButtonsGroup;
         "d-credential-card": DCredentialCard;
@@ -576,6 +590,7 @@ declare module "@stencil/core" {
             "d-activity-card": LocalJSX.DActivityCard & JSXBase.HTMLAttributes<HTMLDActivityCardElement>;
             "d-app-details": LocalJSX.DAppDetails & JSXBase.HTMLAttributes<HTMLDAppDetailsElement>;
             "d-avatar": LocalJSX.DAvatar & JSXBase.HTMLAttributes<HTMLDAvatarElement>;
+            "d-badge": LocalJSX.DBadge & JSXBase.HTMLAttributes<HTMLDBadgeElement>;
             "d-button": LocalJSX.DButton & JSXBase.HTMLAttributes<HTMLDButtonElement>;
             "d-buttons-group": LocalJSX.DButtonsGroup & JSXBase.HTMLAttributes<HTMLDButtonsGroupElement>;
             "d-credential-card": LocalJSX.DCredentialCard & JSXBase.HTMLAttributes<HTMLDCredentialCardElement>;

src/components/badge/badge.stories.ts

@@ -0,0 +1,23 @@
+import { DBadge } from './d-badge';
+import { Meta, StoryObj } from '@storybook/html';
+
+const meta = {
+  title: 'Design System/Atoms/Badge',
+  render: () =>
+    `<d-badge>
+      Address
+    </d-badge>`,
+} satisfies Meta<DBadge>;
+
+export default meta;
+type Story = StoryObj<DBadge>;
+
+export const Default: Story = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/pdwfO3dMKtaCAQakht0JE6/DIDRoom-%2B-Signroom---WF-and-GUI---Dyne.org?node-id=3449-47234&m=dev',
+    },
+  },
+};
+

src/components/badge/d-badge.css

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

src/components/badge/d-badge.tsx

@@ -0,0 +1,20 @@
+import { Component, Host, h } from '@stencil/core';
+
+@Component({
+  tag: 'd-badge',
+  styleUrl: 'd-badge.css',
+  shadow: true,
+})
+export class DBadge {
+  render() {
+    return (
+      <Host>
+        <div class="flex w-fit justify-center items-center bg-accent px-2 py-0.5 rounded-md">
+          <span class="text-on-accent text-center text-sm font-normal leading-5">
+            <slot></slot>
+          </span>
+        </div>
+      </Host>
+    );
+  }
+}

src/components/badge/readme.md

@@ -0,0 +1,10 @@
+# d-badge
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/badge/test/d-badge.e2e.ts

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

src/components/badge/test/d-badge.spec.tsx

@@ -0,0 +1,22 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { DBadge } from '../d-badge';
+
+describe('d-badge', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [DBadge],
+      html: `<d-badge></d-badge>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <d-badge>
+        <mock:shadow-root>
+         <div class="bg-accent flex items-center justify-center px-2 py-0.5 rounded-md w-fit">
+           <span class="font-normal leading-5 text-center text-on-accent text-sm">
+             <slot></slot>
+           </span>
+         </div>
+        </mock:shadow-root>
+      </d-badge>
+    `);
+  });
+});

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

@@ -7,9 +7,12 @@ const meta = {
     `<d-credential-card 
     name="${args.name}" 
     issuer="${args.issuer}" 
-    description="${args.description}" 
     expiration-date="${args.expirationDate}" 
+    issued-by-label="${args.issuedByLabel}"
+    expiration-label="${args.expirationLabel}"
     verified="${args.verified}">
+    <d-badge>address</d-badge>
+    <d-badge>email</d-badge>
     </d-credential-card>`,
 } satisfies Meta<DCredentialCard>;
 
@@ -19,8 +22,9 @@ type Story = StoryObj<DCredentialCard>;
 export const Default: Story = {
   args: {
     name: 'Over 18',
-    description: 'This credential proves that you are over 18 years old',
     issuer: 'Italian Government',
+    issuedByLabel: 'issued by',
+    expirationLabel: 'exp',
     expirationDate: '2017-01-01',
     verified: false
   },

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

@@ -1,32 +1,35 @@
-:host {
-  @apply w-full inline-flex flex-col items-start gap-2.5 px-5 py-5 rounded-lg bg-no-repeat bg-primary bg-cover;
+.main {
+  @apply w-full inline-flex flex-col items-start justify-between gap-2.5 px-5 py-5 rounded-2xl bg-no-repeat bg-primary bg-cover aspect-[2] border border-solid border-white self-stretch;
+}
+
+.main.bg1 {
   background-image: var(--background-card-url);
 }
 
-.between {
-  @apply w-full flex justify-between items-start;
+.main.bg2 {
+  background-image: var(--background-card-url-2);
 }
 
-.heading {
-  @apply flex items-center gap-2;
+.main.bg3 {
+  background-image: var(--background-card-url-3);
 }
 
-.name {
-  @apply text-2xl not-italic font-semibold leading-[22.5px] tracking-[-0.5px];
+.main.bg4 {
+  background-image: var(--background-card-url-4);
 }
 
-.info {
-  @apply inline-flex flex-col items-start gap-2 min-h-32;
+.main.bg5 {
+  background-image: var(--background-card-url-5);
 }
 
-.description {
-  @apply text-xl not-italic font-medium leading-[20.5px] tracking-[-0.5px];
+.main.bg6 {
+  background-image: var(--background-card-url-6);
 }
 
-.labeled-text {
-  @apply flex flex-col gap-0.5 whitespace-nowrap text-lg not-italic leading-[130%] tracking-[-0.5px];
+.main.bg7 {
+  background-image: var(--background-card-url-7);
 }
 
-.label {
-  @apply font-bold;
+.main.bg8 {
+  background-image: var(--background-card-url-8);
 }

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

@@ -28,7 +28,6 @@ const verifiedUser = (
   </svg>
 );
 
-
 @Component({
   tag: 'd-credential-card',
   styleUrl: 'd-credential-card.css',
@@ -40,30 +39,45 @@ export class DCredentialCard {
   @Prop() issuer: string;
   @Prop() logoSrc?: string;
   @Prop() verified?: boolean = false;
-  @Prop() description?: string;
   @Prop() expirationDate?: string;
+  @Prop() issuedByLabel: string;
+  @Prop() expirationLabel: string;
+
+  //random background
+  private getRandomBg = () => {
+    const bg = ['bg1', 'bg2', 'bg3', 'bg4', 'bg5', 'bg6', 'bg7', 'bg8'];
+    return bg[Math.floor(Math.random() * bg.length)];
+  };
 
   render() {
     return (
       <Host>
-        <div class="between">
-          <div class="info">
-            <div class="heading">
-              <d-avatar name={this.name} src={this.logoSrc}></d-avatar>
-              <d-heading class="name line-clamp-2">{this.name}</d-heading>
+        <div class={`main ${this.getRandomBg()}`}>
+          <div class="w-full flex flex-col gap-2">
+            <div class="w-full flex justify-between items-start">
+              <div class="inline-flex flex-col gap-3">
+                <div class="flex gap-2 items-start">
+                  <d-avatar name={this.name} src={this.logoSrc} size="s"></d-avatar>
+                  <d-text size="xl" class="not-italic font-normal leading-7">
+                    {this.name}
+                  </d-text>
+                </div>
+              </div>
+              {this.verified && verifiedUser}
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <slot></slot>
             </div>
-            <span class="description">{this.description}</span>
-          </div>
-          {this.verified && verifiedUser}
-        </div>
-        <div class="between">
-          <div class="labeled-text">
-            <span class="label">Issued by</span>
-            <span>{this.issuer}</span>
           </div>
-          <div class="labeled-text items-end">
-            <span class="label">Exp</span>
-            <span>{this.expirationDate}</span>
+          <div class="w-full flex justify-between items-start">
+            <div class="flex flex-col gap-0.5 whitespace-nowrap text-xs font-normal not-italic leading-[130%] tracking-[-0.5px]">
+              <span>{this.issuedByLabel}</span>
+              <span>{this.issuer}</span>
+            </div>
+            <div class="flex flex-col gap-0.5 whitespace-nowrap text-xs font-normal not-italic leading-[130%] tracking-[-0.5px] items-end">
+              <span>{this.expirationLabel}</span>
+              <span>{this.expirationDate}</span>
+            </div>
           </div>
         </div>
       </Host>

src/components/credential-card/readme.md

@@ -7,28 +7,29 @@
 
 ## Properties
 
-| Property         | Attribute         | Description | Type      | Default     |
-| ---------------- | ----------------- | ----------- | --------- | ----------- |
-| `description`    | `description`     |             | `string`  | `undefined` |
-| `expirationDate` | `expiration-date` |             | `string`  | `undefined` |
-| `issuer`         | `issuer`          |             | `string`  | `undefined` |
-| `logoSrc`        | `logo-src`        |             | `string`  | `undefined` |
-| `name`           | `name`            |             | `string`  | `undefined` |
-| `verified`       | `verified`        |             | `boolean` | `false`     |
+| Property          | Attribute          | Description | Type      | Default     |
+| ----------------- | ------------------ | ----------- | --------- | ----------- |
+| `expirationDate`  | `expiration-date`  |             | `string`  | `undefined` |
+| `expirationLabel` | `expiration-label` |             | `string`  | `undefined` |
+| `issuedByLabel`   | `issued-by-label`  |             | `string`  | `undefined` |
+| `issuer`          | `issuer`           |             | `string`  | `undefined` |
+| `logoSrc`         | `logo-src`         |             | `string`  | `undefined` |
+| `name`            | `name`             |             | `string`  | `undefined` |
+| `verified`        | `verified`         |             | `boolean` | `false`     |
 
 
 ## Dependencies
 
 ### Depends on
 
 - [d-avatar](../avatar)
-- [d-heading](../heading)
+- [d-text](../text)
 
 ### Graph
 ```mermaid
 graph TD;
   d-credential-card --> d-avatar
-  d-credential-card --> d-heading
+  d-credential-card --> d-text
   style d-credential-card fill:#f9f,stroke:#333,stroke-width:4px
 ```