-
-
+
+
+
+
+
+
-
-
-
-
-
- generate qr
-
+
diff --git a/src/components/definition/d-definition.css b/src/components/definition/d-definition.css
new file mode 100644
index 0000000..a840477
--- /dev/null
+++ b/src/components/definition/d-definition.css
@@ -0,0 +1,13 @@
+:host > div {
+ @apply flex justify-between w-full border-b-on-alt border-b border-solid;
+}
+:host > dl {
+ @apply flex flex-col w-full h-11;
+}
+.title {
+ @apply text-on-alt text-xs not-italic font-normal leading-[150%] tracking-[-0.5px];
+}
+
+.definition {
+ @apply text-on not-italic text-xs font-medium leading-[150%] tracking-[-0.5px];
+}
diff --git a/src/components/definition/d-definition.tsx b/src/components/definition/d-definition.tsx
new file mode 100644
index 0000000..6f4a095
--- /dev/null
+++ b/src/components/definition/d-definition.tsx
@@ -0,0 +1,51 @@
+import { Component, Host, Prop, State, h } from '@stencil/core';
+
+@Component({
+ tag: 'd-definition',
+ styleUrl: 'd-definition.css',
+ shadow: true,
+})
+export class DDefinition {
+ @Prop({ reflect: true }) title: string;
+ @Prop({ reflect: true }) definition: string;
+ @Prop({ reflect: true }) hidable: boolean;
+ @State() hide: boolean = false;
+
+ render() {
+ const onClick = () => (this.hide = !this.hide);
+ const visibilityOn = (
+
+ );
+ const visibilityOff = (
+
+ );
+
+ return (
+
+
+
+ - {this.title}
+ - {!this.hide ? this.definition : '**********'}
+
+ {this.hidable &&
}
+
+ );
+ }
+}
diff --git a/src/components/definition/definition.stories.ts b/src/components/definition/definition.stories.ts
new file mode 100644
index 0000000..f13c802
--- /dev/null
+++ b/src/components/definition/definition.stories.ts
@@ -0,0 +1,49 @@
+import { DDefinition } from './d-definition';
+import { Meta, StoryObj } from '@storybook/html';
+
+const meta = {
+ title: 'Design System/Atoms/Definition',
+ render: args =>
+ `
+
+
+
+
+
+ `,
+} satisfies Meta
;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ title: 'issuer:',
+ definition: 'Italian Governament',
+ },
+ parameters: {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/Uxc5APvp9BsY9r71rF8HhQ/DIDWallet-UI-Trial?node-id=100%3A1839&mode=dev',
+ },
+ },
+};
+
+export const Hidable: Story = {
+ args: {
+ ...Default.args,
+ hidable: true,
+ },
+};
diff --git a/src/components/definition/readme.md b/src/components/definition/readme.md
new file mode 100644
index 0000000..36995b2
--- /dev/null
+++ b/src/components/definition/readme.md
@@ -0,0 +1,19 @@
+# d-definition
+
+
+
+
+
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ------------ | ------------ | ----------- | --------- | ----------- |
+| `definition` | `definition` | | `string` | `undefined` |
+| `hidable` | `hidable` | | `boolean` | `undefined` |
+| `title` | `title` | | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/definition/test/d-definition.e2e.ts b/src/components/definition/test/d-definition.e2e.ts
new file mode 100644
index 0000000..7d6d715
--- /dev/null
+++ b/src/components/definition/test/d-definition.e2e.ts
@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('d-definition', () => {
+ it('renders', async () => {
+ const page = await newE2EPage();
+ await page.setContent('');
+
+ const element = await page.find('d-definition');
+ expect(element).toHaveClass('hydrated');
+ });
+});
diff --git a/src/components/definition/test/d-definition.spec.tsx b/src/components/definition/test/d-definition.spec.tsx
new file mode 100644
index 0000000..8b1c537
--- /dev/null
+++ b/src/components/definition/test/d-definition.spec.tsx
@@ -0,0 +1,23 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { DDefinition } from '../d-definition';
+
+describe('d-definition', () => {
+ it('renders', async () => {
+ const page = await newSpecPage({
+ components: [DDefinition],
+ html: ``,
+ });
+ expect(page.root).toEqualHtml(`
+
+
+
+
+
+ `);
+ });
+});