fix: qr code card layout (#206)

* fix: qr code card layout * chore: update react/types * test: update qrcode test
ForkbombEu · Feb 12, 2025 · f689cda · f689cda
1 parent 5763322
commit f689cda
Show file tree

Hide file tree

Showing 8 changed files with 335 additions and 243 deletions.
diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
     "@storybook/test": "^7.6.10",
     "@types/jest": "^29.5.6",
     "@types/node": "^20.11.7",
-    "@types/react": "^18.0.0",
+    "@types/react": "^18.3.18",
     "fs-extra": "^11.2.0",
     "glob-promise": "^6.0.7",
     "jest": "^29.7.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -161,8 +161,10 @@ export namespace Components {
         "generationDate": string;
         "generationHour": string;
         "qr": string;
+        "relyingParty": string;
         "sessionId": string;
         "sessionIdLabel": string;
+        "verifierLabel": string;
     }
     interface DScanButton {
         "href": string;
@@ -781,8 +783,10 @@ declare namespace LocalJSX {
         "generationDate"?: string;
         "generationHour"?: string;
         "qr"?: string;
+        "relyingParty"?: string;
         "sessionId"?: string;
         "sessionIdLabel"?: string;
+        "verifierLabel"?: string;
     }
     interface DScanButton {
         "href"?: string;

diff --git a/src/components/feedback/readme.md b/src/components/feedback/readme.md
@@ -26,12 +26,14 @@
 ### Depends on
 
 - [d-text](../text)
+- [d-vertical-stack](../vertical-stack)
 - [d-copy-button](../copy-button)
 
 ### Graph
 ```mermaid
 graph TD;
   d-feedback --> d-text
+  d-feedback --> d-vertical-stack
   d-feedback --> d-copy-button
   d-copy-button --> d-button
   style d-feedback fill:#f9f,stroke:#333,stroke-width:4px

diff --git a/src/components/qr-code/d-qr-code.tsx b/src/components/qr-code/d-qr-code.tsx
@@ -11,11 +11,16 @@ export class DQrCode {
   @Prop() sessionId: string;
   @Prop() generationDate: string;
   @Prop() generationHour: string;
+  @Prop() relyingParty: string;
+  @Prop() verifierLabel: string = 'Verifier';
 
   render() {
     return (
       <Host>
         <div class="flex flex-col items-center justify-center rounded-lg bg-primary p-4">
+          <d-text size="l" class="w-max mb-2 line-clamp-1">
+            {this.verifierLabel}: {this.relyingParty}
+          </d-text>
           <div class="w-full pb-2">
             <img src={this.qr} alt="qrCode" class="w-full" />
           </div>
@@ -24,8 +29,9 @@ export class DQrCode {
             {this.sessionIdLabel}
           </d-text>
           <d-heading size="s">{this.sessionId}</d-heading>
-          <d-text size="m">{this.generationDate}</d-text>
-          <d-text size="m">{this.generationHour}</d-text>
+          <d-text size="m">
+            {this.generationDate} {this.generationHour}
+          </d-text>
         </div>
       </Host>
     );

diff --git a/src/components/qr-code/readme.md b/src/components/qr-code/readme.md
@@ -12,8 +12,10 @@
 | `generationDate` | `generation-date`  |             | `string` | `undefined`     |
 | `generationHour` | `generation-hour`  |             | `string` | `undefined`     |
 | `qr`             | `qr`               |             | `string` | `undefined`     |
+| `relyingParty`   | `relying-party`    |             | `string` | `undefined`     |
 | `sessionId`      | `session-id`       |             | `string` | `undefined`     |
 | `sessionIdLabel` | `session-id-label` |             | `string` | `'Session ID:'` |
+| `verifierLabel`  | `verifier-label`   |             | `string` | `'Verifier'`    |
 
 
 ## Dependencies

diff --git a/src/components/qr-code/test/d-qr-code.spec.tsx b/src/components/qr-code/test/d-qr-code.spec.tsx
@@ -11,6 +11,9 @@ describe('d-qr-code', () => {
       <d-qr-code>
         <mock:shadow-root>
         <div class="bg-primary flex flex-col items-center justify-center p-4 rounded-lg">
+          <d-text class="line-clamp-1 mb-2 w-max" size="l">
+             Verifier:
+          </d-text>
           <div class="pb-2 w-full">
             <img alt="qrCode" class="w-full">
           </div>
@@ -19,7 +22,6 @@ describe('d-qr-code', () => {
           </d-text>
           <d-heading size="s"></d-heading>
           <d-text size="m"></d-text>
-          <d-text size="m"></d-text>
         </div>
         </mock:shadow-root>
       </d-qr-code>

diff --git a/src/components/vertical-stack/readme.md b/src/components/vertical-stack/readme.md
@@ -16,12 +16,14 @@
 ### Used by
 
  - [d-checkbox](../checkbox)
+ - [d-feedback](../feedback)
  - [d-verification-card](../verification-card)
 
 ### Graph
 ```mermaid
 graph TD;
   d-checkbox --> d-vertical-stack
+  d-feedback --> d-vertical-stack
   d-verification-card --> d-vertical-stack
   style d-vertical-stack fill:#f9f,stroke:#333,stroke-width:4px
 ```