fix: credential-service restyle (#121)

* fix: credential-service restyle * fix: fix credential-service material design compliant
ForkbombEu · Jul 22, 2024 · c1cf8c7 · c1cf8c7
1 parent fe2dc1f
commit c1cf8c7
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 41 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -57,6 +57,7 @@ export namespace Components {
         "description"?: string;
         "href"?: string;
         "issuer": string;
+        "issuerLabel": string;
         "logoSrc"?: string;
         "name": string;
     }
@@ -446,6 +447,7 @@ declare namespace LocalJSX {
         "description"?: string;
         "href"?: string;
         "issuer"?: string;
+        "issuerLabel"?: string;
         "logoSrc"?: string;
         "name"?: string;
     }

diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css
@@ -23,7 +23,7 @@
 
 :host([size='l']) svg,
 :host([size='l']) {
-  @apply h-20 w-20 text-lg;
+  @apply h-[60px] w-[60px] text-lg;
 }
 
 :host([size='xl']) svg,

diff --git a/src/components/credential-service/d-credential-service.css b/src/components/credential-service/d-credential-service.css
@@ -1,20 +1 @@
-:host > div,
-:host > a > div {
-  @apply w-full rounded-lg p-5 flex gap-5 bg-primary no-underline items-center;
-}
 
-.name {
-  @apply block overflow-hidden text-ellipsis whitespace-nowrap not-italic font-bold leading-[20.5px] tracking-[-0.5px] pb-2 text-lg;
-}
-
-.issuer {
-  @apply block overflow-hidden text-on-alt text-ellipsis not-italic font-normal leading-[normal] tracking-[-0.5px];
-}
-
-.description {
-  @apply block overflow-hidden text-on-alt text-ellipsis not-italic font-medium leading-[normal] tracking-[-0.5px];
-}
-
-svg {
-  @apply w-6 h-6 fill-current stroke-on;
-}
diff --git a/src/components/credential-service/d-credential-service.tsx b/src/components/credential-service/d-credential-service.tsx
@@ -10,20 +10,22 @@ export class DCredentialService {
   @Prop() issuer: string;
   @Prop() logoSrc?: string;
   @Prop() description?: string;
+  @Prop() issuerLabel: string = 'Issuer_L';
   @Prop({ reflect: true }) href?: string;
 
   render() {
     const content = (
-      <div>
-        <d-avatar name={this.name} src={this.logoSrc} size="l"></d-avatar>
-        <div class="flex flex-col grow">
-          <d-text size="l">{this.name}</d-text>
-          <d-text size="s">{this.description}</d-text>
-          <d-text size="xs">{this.issuer}</d-text>
+      <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 class="!text-on-alt">{this.issuerLabel}: {this.issuer}</d-text>
+          </div>
         </div>
         {this.href && (
           <div class="shrink-0">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" class="w-6 h-6 fill-current stroke-on">
               <path d="M3 12L21 12M21 12L12.5 20.5M21 12L12.5 3.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
             </svg>
           </div>

diff --git a/src/components/credential-service/readme.md b/src/components/credential-service/readme.md
@@ -7,13 +7,14 @@
 
 ## Properties
 
-| Property      | Attribute     | Description | Type     | Default     |
-| ------------- | ------------- | ----------- | -------- | ----------- |
-| `description` | `description` |             | `string` | `undefined` |
-| `href`        | `href`        |             | `string` | `undefined` |
-| `issuer`      | `issuer`      |             | `string` | `undefined` |
-| `logoSrc`     | `logo-src`    |             | `string` | `undefined` |
-| `name`        | `name`        |             | `string` | `undefined` |
+| Property      | Attribute      | Description | Type     | Default      |
+| ------------- | -------------- | ----------- | -------- | ------------ |
+| `description` | `description`  |             | `string` | `undefined`  |
+| `href`        | `href`         |             | `string` | `undefined`  |
+| `issuer`      | `issuer`       |             | `string` | `undefined`  |
+| `issuerLabel` | `issuer-label` |             | `string` | `'Issuer_L'` |
+| `logoSrc`     | `logo-src`     |             | `string` | `undefined`  |
+| `name`        | `name`         |             | `string` | `undefined`  |
 
 
 ## Dependencies

diff --git a/src/components/credential-service/test/d-credential-service.spec.tsx b/src/components/credential-service/test/d-credential-service.spec.tsx
@@ -10,15 +10,18 @@ describe('d-credential-service', () => {
     expect(page.root).toEqualHtml(`
       <d-credential-service>
         <mock:shadow-root>
-          <div>
-            <d-avatar size="l"></d-avatar>
-            <div class="flex flex-col grow">
-              <d-text size="l"></d-text>
-              <d-text size="s"></d-text>
-              <d-text size="xs"></d-text>
+          <div class="bg-primary flex gap-3 items-center no-underline p-5 rounded-lg w-full">
+            <div class="flex flex-grow gap-3 items-start">
+              <d-avatar shape="square" size="l"></d-avatar>
+              <div class="flex flex-col grow h-full justify-between min-h-[60px]">
+                <d-text size="l"></d-text>
+                <d-text class="!text-on-alt">
+                  Issuer_L:
+                </d-text>
+              </div>
             </div>
           </div>
-        </mock:shadow-root>
+       </mock:shadow-root>
       </d-credential-service>
     `);
   });