feat: qr code card (#174)

* feat: qr code card * tests
ForkbombEu · Oct 12, 2024 · b75f643 · b75f643
1 parent d5192ae
commit b75f643
Show file tree

Hide file tree

Showing 9 changed files with 170 additions and 0 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -145,6 +145,13 @@ export namespace Components {
         "description"?: string;
         "title": string;
     }
+    interface DQrCode {
+        "generationDate": string;
+        "generationHour": string;
+        "qr": string;
+        "sessionId": string;
+        "sessionIdLabel": string;
+    }
     interface DScanButton {
         "href": string;
     }
@@ -457,6 +464,12 @@ declare global {
         prototype: HTMLDPageDescriptionElement;
         new (): HTMLDPageDescriptionElement;
     };
+    interface HTMLDQrCodeElement extends Components.DQrCode, HTMLStencilElement {
+    }
+    var HTMLDQrCodeElement: {
+        prototype: HTMLDQrCodeElement;
+        new (): HTMLDQrCodeElement;
+    };
     interface HTMLDScanButtonElement extends Components.DScanButton, HTMLStencilElement {
     }
     var HTMLDScanButtonElement: {
@@ -558,6 +571,7 @@ declare global {
         "d-logo": HTMLDLogoElement;
         "d-organizations": HTMLDOrganizationsElement;
         "d-page-description": HTMLDPageDescriptionElement;
+        "d-qr-code": HTMLDQrCodeElement;
         "d-scan-button": HTMLDScanButtonElement;
         "d-session-card": HTMLDSessionCardElement;
         "d-settings-menu": HTMLDSettingsMenuElement;
@@ -714,6 +728,13 @@ declare namespace LocalJSX {
         "description"?: string;
         "title"?: string;
     }
+    interface DQrCode {
+        "generationDate"?: string;
+        "generationHour"?: string;
+        "qr"?: string;
+        "sessionId"?: string;
+        "sessionIdLabel"?: string;
+    }
     interface DScanButton {
         "href"?: string;
     }
@@ -803,6 +824,7 @@ declare namespace LocalJSX {
         "d-logo": DLogo;
         "d-organizations": DOrganizations;
         "d-page-description": DPageDescription;
+        "d-qr-code": DQrCode;
         "d-scan-button": DScanButton;
         "d-session-card": DSessionCard;
         "d-settings-menu": DSettingsMenu;
@@ -845,6 +867,7 @@ declare module "@stencil/core" {
             "d-logo": LocalJSX.DLogo & JSXBase.HTMLAttributes<HTMLDLogoElement>;
             "d-organizations": LocalJSX.DOrganizations & JSXBase.HTMLAttributes<HTMLDOrganizationsElement>;
             "d-page-description": LocalJSX.DPageDescription & JSXBase.HTMLAttributes<HTMLDPageDescriptionElement>;
+            "d-qr-code": LocalJSX.DQrCode & JSXBase.HTMLAttributes<HTMLDQrCodeElement>;
             "d-scan-button": LocalJSX.DScanButton & JSXBase.HTMLAttributes<HTMLDScanButtonElement>;
             "d-session-card": LocalJSX.DSessionCard & JSXBase.HTMLAttributes<HTMLDSessionCardElement>;
             "d-settings-menu": LocalJSX.DSettingsMenu & JSXBase.HTMLAttributes<HTMLDSettingsMenuElement>;

diff --git a/src/components/heading/readme.md b/src/components/heading/readme.md
@@ -22,6 +22,7 @@
  - [d-logo](../logo)
  - [d-organizations](../organizations)
  - [d-page-description](../page-description)
+ - [d-qr-code](../qr-code)
  - [d-session-card](../session-card)
  - [d-swipable-page](../swipable-page)
 
@@ -33,6 +34,7 @@ graph TD;
   d-logo --> d-heading
   d-organizations --> d-heading
   d-page-description --> d-heading
+  d-qr-code --> d-heading
   d-session-card --> d-heading
   d-swipable-page --> d-heading
   style d-heading fill:#f9f,stroke:#333,stroke-width:4px

diff --git a/src/components/qr-code/d-qr-code.css b/src/components/qr-code/d-qr-code.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/src/components/qr-code/d-qr-code.tsx b/src/components/qr-code/d-qr-code.tsx
@@ -0,0 +1,33 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'd-qr-code',
+  styleUrl: 'd-qr-code.css',
+  shadow: true,
+})
+export class DQrCode {
+  @Prop() qr: string;
+  @Prop() sessionIdLabel: string = 'Session ID:';
+  @Prop() sessionId: string;
+  @Prop() generationDate: string;
+  @Prop() generationHour: string;
+
+  render() {
+    return (
+      <Host>
+        <div class="flex flex-col items-center justify-center rounded-lg bg-primary p-4">
+          <div class="w-full pb-2">
+            <img src={this.qr} alt="qrCode" class="w-full" />
+          </div>
+
+          <d-text size="l" class="w-max">
+            {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>
+        </div>
+      </Host>
+    );
+  }
+}
diff --git a/src/components/qr-code/qr-code.stories.ts b/src/components/qr-code/qr-code.stories.ts
@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/html';
+import type { Components } from '../../components.js';
+
+const meta = {
+  title: 'Design System/DATA DISPLAY/QrCode',
+  render: args => `<d-qr-code
+    qr="${args.qr}"
+    session-id-label="${args.sessionIdLabel}"
+    session-id="${args.sessionId}"
+    generation-date="${args.generationDate}"
+    generation-hour="${args.generationHour}"
+  ></d-qr-code>`,
+} satisfies Meta<Components.DQrCode>;
+
+export default meta;
+type Story = StoryObj<Components.DQrCode>;
+
+export const Default: Story = {
+  args: {
+    sessionIdLabel: 'Session ID:',
+    sessionId: '12345',
+    generationDate: '05/09/2024', 
+    generationHour: '12:00:00',
+    qr: 'data:image/png;base64,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',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/pdwfO3dMKtaCAQakht0JE6/DIDRoom-%2B-Signroom---WF-and-GUI---Dyne.org?node-id=3603-35766&node-type=frame&t=tJgEDXcrsNlriD0U-0',
+    },
+  },
+};
diff --git a/src/components/qr-code/readme.md b/src/components/qr-code/readme.md
@@ -0,0 +1,36 @@
+# d-qr-code
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property         | Attribute          | Description | Type     | Default         |
+| ---------------- | ------------------ | ----------- | -------- | --------------- |
+| `generationDate` | `generation-date`  |             | `string` | `undefined`     |
+| `generationHour` | `generation-hour`  |             | `string` | `undefined`     |
+| `qr`             | `qr`               |             | `string` | `undefined`     |
+| `sessionId`      | `session-id`       |             | `string` | `undefined`     |
+| `sessionIdLabel` | `session-id-label` |             | `string` | `'Session ID:'` |
+
+
+## Dependencies
+
+### Depends on
+
+- [d-text](../text)
+- [d-heading](../heading)
+
+### Graph
+```mermaid
+graph TD;
+  d-qr-code --> d-text
+  d-qr-code --> d-heading
+  style d-qr-code fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*