fix: verification results card (#166)

* fix: verification results card * test: update session card spec
ForkbombEu · Oct 9, 2024 · 30f2261 · 30f2261
1 parent dd74ad2
commit 30f2261
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 60 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -150,8 +150,13 @@ export namespace Components {
     }
     interface DSessionCard {
         "date": string;
+        "failureMessage": string;
+        "inProgress": boolean;
+        "inProgressMessage": string;
+        "sessionMessage": string;
         "sid": string;
         "success": boolean;
+        "verifiedMessage": string;
     }
     interface DSettingsMenu {
         "accountSettings": string;
@@ -714,8 +719,13 @@ declare namespace LocalJSX {
     }
     interface DSessionCard {
         "date"?: string;
+        "failureMessage"?: string;
+        "inProgress"?: boolean;
+        "inProgressMessage"?: string;
+        "sessionMessage"?: string;
         "sid"?: string;
         "success"?: boolean;
+        "verifiedMessage"?: string;
     }
     interface DSettingsMenu {
         "accountSettings"?: string;

diff --git a/src/components/session-card/d-session-card.tsx b/src/components/session-card/d-session-card.tsx
@@ -9,52 +9,37 @@ export class DSessionCard {
   @Prop() sid: string;
   @Prop() date: string = '';
   @Prop() success: boolean = false;
+  @Prop() inProgress: boolean = false;
+  @Prop() sessionMessage: string = 'Session id:';
+  @Prop() verifiedMessage: string = 'Verified.';
+  @Prop() failureMessage: string = 'Failure.';
+  @Prop() inProgressMessage: string = 'In progress...';
 
   render() {
+    const isFailure = !(this.success || this.inProgress);
 
-    const failureIcon = (
-      <svg width="89" height="88" viewBox="0 0 89 88" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <g clip-path="url(#clip0_3625_37654)">
-          <g clip-path="url(#clip1_3625_37654)">
-            <path
-              d="M44 1C19.6996 1 0 20.4758 0 44.5C0 68.5256 19.6996 88 44 88C68.3018 88 88 68.5256 88 44.5C88 20.4758 68.3018 1 44 1ZM44 82.6481C22.7714 82.6481 5.5 65.4874 5.5 44.4998C5.5 23.5124 22.7714 6.43733 44 6.43733C65.2286 6.43733 82.5 23.5125 82.5 44.4998C82.5 65.4871 65.2286 82.6481 44 82.6481Z"
-              fill="currentColor"
-            />
-          </g>
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M25.7927 26.4994C26.9383 25.3669 28.7956 25.3669 29.9411 26.4994L62.5744 58.7619C63.72 59.8944 63.72 61.7306 62.5744 62.8631C61.4289 63.9957 59.5716 63.9957 58.4261 62.8631L25.7927 30.6006C24.6472 29.4681 24.6472 27.6319 25.7927 26.4994Z"
-            fill="currentColor"
-          />
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M62.574 26.4994C61.4284 25.3669 59.5711 25.3669 58.4256 26.4994L25.7923 58.7619C24.6467 59.8944 24.6467 61.7306 25.7923 62.8631C26.9378 63.9957 28.7951 63.9957 29.9406 62.8631L62.574 30.6006C63.7195 29.4681 63.7195 27.6319 62.574 26.4994Z"
-            fill="currentColor"
-          />
-        </g>
-        <defs>
-          <clipPath id="clip0_3625_37654">
-            <rect width="88" height="88" fill="white" transform="translate(0.5)" />
-          </clipPath>
-          <clipPath id="clip1_3625_37654">
-            <rect width="88" height="87" fill="white" transform="translate(0 1)" />
-          </clipPath>
-        </defs>
-      </svg>
-    );
+    const statusClasses = {
+      'text-success border-success': this.success,
+      'text-error border-error': isFailure,
+      'text-warning border-warning': this.inProgress,
+    };
+
+    const icon = this.success ? 'done' : isFailure ? 'close' : 'more';
+
+    const statusMessage = this.success ? this.verifiedMessage : isFailure ? this.failureMessage : this.inProgressMessage;
 
     return (
       <Host>
         <div class="flex flex-col items-center align-middle gap-8 w-52">
-          <span class={{ 'text-success': this.success, 'text-error': !this.success }}>{this.success ? <d-icon icon="done" outline /> : failureIcon}</span>
+          <span class={{ 'w-24 h-24 rounded-full border-4': true, ...statusClasses }}>
+            <d-icon icon={icon} outline size={88} />
+          </span>
           <d-heading size="xs" class="text-on">
-            {this.success ? 'Verified.' : 'Failure.'}
+            {statusMessage}
           </d-heading>
           <div class="flex flex-col items-center gap-1 bg-primary p-4 rounded-lg">
-            <d-text>Session id:</d-text>
-            <d-heading size="xl" class={{ 'text-success': this.success, 'text-error': !this.success }}>
+            <d-text>{this.sessionMessage}</d-text>
+            <d-heading size="xl" class={{ 'text-success': this.success, 'text-error': isFailure, 'text-warning': this.inProgress }}>
               {this.sid}
             </d-heading>
             <d-text>{this.date}</d-text>

diff --git a/src/components/session-card/readme.md b/src/components/session-card/readme.md
@@ -7,11 +7,16 @@
 
 ## Properties
 
-| Property  | Attribute | Description | Type      | Default     |
-| --------- | --------- | ----------- | --------- | ----------- |
-| `date`    | `date`    |             | `string`  | `''`        |
-| `sid`     | `sid`     |             | `string`  | `undefined` |
-| `success` | `success` |             | `boolean` | `false`     |
+| Property            | Attribute             | Description | Type      | Default            |
+| ------------------- | --------------------- | ----------- | --------- | ------------------ |
+| `date`              | `date`                |             | `string`  | `''`               |
+| `failureMessage`    | `failure-message`     |             | `string`  | `'Failure.'`       |
+| `inProgress`        | `in-progress`         |             | `boolean` | `false`            |
+| `inProgressMessage` | `in-progress-message` |             | `string`  | `'In progress...'` |
+| `sessionMessage`    | `session-message`     |             | `string`  | `'Session id:'`    |
+| `sid`               | `sid`                 |             | `string`  | `undefined`        |
+| `success`           | `success`             |             | `boolean` | `false`            |
+| `verifiedMessage`   | `verified-message`    |             | `string`  | `'Verified.'`      |
 
 
 ## Dependencies

diff --git a/src/components/session-card/session-card.stories.ts b/src/components/session-card/session-card.stories.ts
@@ -3,7 +3,16 @@ import type { Components } from '../../components.js';
 
 const meta = {
   title: 'Design System/DATA DISPLAY/SessionCard',
-  render: args => `<d-session-card sid='${args.sid}' date='${args.date}' success=${args.success}></d-session-card>`,
+  render: args => `<d-session-card 
+  sid='${args.sid}' 
+  date='${args.date}' 
+  success=${args.success}
+  ${args.sessionMessage ? `session-message='${args.sessionMessage}'` : ''}
+  ${args.verifiedMessage ? `verified-message='${args.verifiedMessage}'` : ''}
+  ${args.failureMessage ? `failure-message='${args.failureMessage}'` : ''}
+  ${args.inProgressMessage ? `in-progress-message='${args.inProgressMessage}'` : ''}
+  ${args.inProgress ? `in-progress` : ''}
+  ></d-session-card>`,
 } satisfies Meta<Components.DSessionCard>;
 
 export default meta;
@@ -29,3 +38,20 @@ export const Success: Story = {
     success: true,
   },
 };
+
+export const Translated: Story = {
+  args: {
+    ...Success.args,
+    sessionMessage: 'セッションID:',
+    verifiedMessage: '検証済み。',
+    failureMessage: '失敗。',
+  },
+};
+
+export const InProgress: Story = {
+  args: {
+    ...Default.args,
+    success: false,
+    inProgress: true,
+  },
+};
diff --git a/src/components/session-card/test/d-session-card.spec.tsx b/src/components/session-card/test/d-session-card.spec.tsx
@@ -11,24 +11,8 @@ describe('d-session-card', () => {
       <d-session-card>
         <mock:shadow-root>
          <div class="align-middle flex flex-col gap-8 items-center w-52">
-           <span class="text-error">
-             <svg fill="none" height="88" viewBox="0 0 89 88" width="89" xmlns="http://www.w3.org/2000/svg">
-               <g clip-path="url(#clip0_3625_37654)">
-                 <g clip-path="url(#clip1_3625_37654)">
-                   <path d="M44 1C19.6996 1 0 20.4758 0 44.5C0 68.5256 19.6996 88 44 88C68.3018 88 88 68.5256 88 44.5C88 20.4758 68.3018 1 44 1ZM44 82.6481C22.7714 82.6481 5.5 65.4874 5.5 44.4998C5.5 23.5124 22.7714 6.43733 44 6.43733C65.2286 6.43733 82.5 23.5125 82.5 44.4998C82.5 65.4871 65.2286 82.6481 44 82.6481Z" fill="currentColor"></path>
-                 </g>
-                 <path clip-rule="evenodd" d="M25.7927 26.4994C26.9383 25.3669 28.7956 25.3669 29.9411 26.4994L62.5744 58.7619C63.72 59.8944 63.72 61.7306 62.5744 62.8631C61.4289 63.9957 59.5716 63.9957 58.4261 62.8631L25.7927 30.6006C24.6472 29.4681 24.6472 27.6319 25.7927 26.4994Z" fill="currentColor" fill-rule="evenodd"></path>
-                 <path clip-rule="evenodd" d="M62.574 26.4994C61.4284 25.3669 59.5711 25.3669 58.4256 26.4994L25.7923 58.7619C24.6467 59.8944 24.6467 61.7306 25.7923 62.8631C26.9378 63.9957 28.7951 63.9957 29.9406 62.8631L62.574 30.6006C63.7195 29.4681 63.7195 27.6319 62.574 26.4994Z" fill="currentColor" fill-rule="evenodd"></path>
-               </g>
-               <defs>
-                 <clipPath id="clip0_3625_37654">
-                   <rect fill="white" height="88" transform="translate(0.5)" width="88"></rect>
-                 </clipPath>
-                 <clipPath id="clip1_3625_37654">
-                   <rect fill="white" height="87" transform="translate(0 1)" width="88"></rect>
-                 </clipPath>
-               </defs>
-             </svg>
+           <span class="border-4 border-error h-24 rounded-full text-error w-24">
+            <d-icon icon="close" outline="" size="88"></d-icon>
            </span>
            <d-heading class="text-on" size="xs">
              Failure.