ForkbombEu · puria · Aug 27, 2024 · Aug 16, 2024 · Aug 16, 2024
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -98,6 +98,9 @@ export namespace Components {
         "color": Color;
         "size": Size;
     }
+    interface DHorizontalStack {
+        "gap": 2 | 4 | 8;
+    }
     interface DIcon {
         "icon": string;
         "outline": boolean;
@@ -124,9 +127,6 @@ export namespace Components {
         "type": 'text' | 'password' | 'email' | 'number';
         "value": string;
     }
-    interface DList {
-        "gap": 2 | 4 | 8;
-    }
     interface DLoading {
         "loading": boolean;
         "message": string;
@@ -185,6 +185,9 @@ export namespace Components {
         "color": Color;
         "size": Size;
     }
+    interface DVerticalStack {
+        "gap": 2 | 4 | 8;
+    }
     interface DidroomLogo {
     }
 }
@@ -335,6 +338,12 @@ declare global {
         prototype: HTMLDHeadingElement;
         new (): HTMLDHeadingElement;
     };
+    interface HTMLDHorizontalStackElement extends Components.DHorizontalStack, HTMLStencilElement {
+    }
+    var HTMLDHorizontalStackElement: {
+        prototype: HTMLDHorizontalStackElement;
+        new (): HTMLDHorizontalStackElement;
+    };
     interface HTMLDIconElement extends Components.DIcon, HTMLStencilElement {
     }
     var HTMLDIconElement: {
@@ -371,12 +380,6 @@ declare global {
         prototype: HTMLDInputElement;
         new (): HTMLDInputElement;
     };
-    interface HTMLDListElement extends Components.DList, HTMLStencilElement {
-    }
-    var HTMLDListElement: {
-        prototype: HTMLDListElement;
-        new (): HTMLDListElement;
-    };
     interface HTMLDLoadingElement extends Components.DLoading, HTMLStencilElement {
     }
     var HTMLDLoadingElement: {
@@ -443,6 +446,12 @@ declare global {
         prototype: HTMLDTextElement;
         new (): HTMLDTextElement;
     };
+    interface HTMLDVerticalStackElement extends Components.DVerticalStack, HTMLStencilElement {
+    }
+    var HTMLDVerticalStackElement: {
+        prototype: HTMLDVerticalStackElement;
+        new (): HTMLDVerticalStackElement;
+    };
     interface HTMLDidroomLogoElement extends Components.DidroomLogo, HTMLStencilElement {
     }
     var HTMLDidroomLogoElement: {
@@ -466,11 +475,11 @@ declare global {
         "d-feedback": HTMLDFeedbackElement;
         "d-header": HTMLDHeaderElement;
         "d-heading": HTMLDHeadingElement;
+        "d-horizontal-stack": HTMLDHorizontalStackElement;
         "d-icon": HTMLDIconElement;
         "d-illustration": HTMLDIllustrationElement;
         "d-info-led": HTMLDInfoLedElement;
         "d-input": HTMLDInputElement;
-        "d-list": HTMLDListElement;
         "d-loading": HTMLDLoadingElement;
         "d-logo": HTMLDLogoElement;
         "d-organizations": HTMLDOrganizationsElement;
@@ -482,6 +491,7 @@ declare global {
         "d-tab-button": HTMLDTabButtonElement;
         "d-tab-page": HTMLDTabPageElement;
         "d-text": HTMLDTextElement;
+        "d-vertical-stack": HTMLDVerticalStackElement;
         "didroom-logo": HTMLDidroomLogoElement;
     }
 }
@@ -578,6 +588,9 @@ declare namespace LocalJSX {
         "color"?: Color;
         "size"?: Size;
     }
+    interface DHorizontalStack {
+        "gap"?: 2 | 4 | 8;
+    }
     interface DIcon {
         "icon"?: string;
         "outline"?: boolean;
@@ -606,9 +619,6 @@ declare namespace LocalJSX {
         "type"?: 'text' | 'password' | 'email' | 'number';
         "value"?: string;
     }
-    interface DList {
-        "gap"?: 2 | 4 | 8;
-    }
     interface DLoading {
         "loading"?: boolean;
         "message"?: string;
@@ -667,6 +677,9 @@ declare namespace LocalJSX {
         "color"?: Color;
         "size"?: Size;
     }
+    interface DVerticalStack {
+        "gap"?: 2 | 4 | 8;
+    }
     interface DidroomLogo {
     }
     interface IntrinsicElements {
@@ -686,11 +699,11 @@ declare namespace LocalJSX {
         "d-feedback": DFeedback;
         "d-header": DHeader;
         "d-heading": DHeading;
+        "d-horizontal-stack": DHorizontalStack;
         "d-icon": DIcon;
         "d-illustration": DIllustration;
         "d-info-led": DInfoLed;
         "d-input": DInput;
-        "d-list": DList;
         "d-loading": DLoading;
         "d-logo": DLogo;
         "d-organizations": DOrganizations;
@@ -702,6 +715,7 @@ declare namespace LocalJSX {
         "d-tab-button": DTabButton;
         "d-tab-page": DTabPage;
         "d-text": DText;
+        "d-vertical-stack": DVerticalStack;
         "didroom-logo": DidroomLogo;
     }
 }
@@ -725,11 +739,11 @@ declare module "@stencil/core" {
             "d-feedback": LocalJSX.DFeedback & JSXBase.HTMLAttributes<HTMLDFeedbackElement>;
             "d-header": LocalJSX.DHeader & JSXBase.HTMLAttributes<HTMLDHeaderElement>;
             "d-heading": LocalJSX.DHeading & JSXBase.HTMLAttributes<HTMLDHeadingElement>;
+            "d-horizontal-stack": LocalJSX.DHorizontalStack & JSXBase.HTMLAttributes<HTMLDHorizontalStackElement>;
             "d-icon": LocalJSX.DIcon & JSXBase.HTMLAttributes<HTMLDIconElement>;
             "d-illustration": LocalJSX.DIllustration & JSXBase.HTMLAttributes<HTMLDIllustrationElement>;
             "d-info-led": LocalJSX.DInfoLed & JSXBase.HTMLAttributes<HTMLDInfoLedElement>;
             "d-input": LocalJSX.DInput & JSXBase.HTMLAttributes<HTMLDInputElement>;
-            "d-list": LocalJSX.DList & JSXBase.HTMLAttributes<HTMLDListElement>;
             "d-loading": LocalJSX.DLoading & JSXBase.HTMLAttributes<HTMLDLoadingElement>;
             "d-logo": LocalJSX.DLogo & JSXBase.HTMLAttributes<HTMLDLogoElement>;
             "d-organizations": LocalJSX.DOrganizations & JSXBase.HTMLAttributes<HTMLDOrganizationsElement>;
@@ -741,6 +755,7 @@ declare module "@stencil/core" {
             "d-tab-button": LocalJSX.DTabButton & JSXBase.HTMLAttributes<HTMLDTabButtonElement>;
             "d-tab-page": LocalJSX.DTabPage & JSXBase.HTMLAttributes<HTMLDTabPageElement>;
             "d-text": LocalJSX.DText & JSXBase.HTMLAttributes<HTMLDTextElement>;
+            "d-vertical-stack": LocalJSX.DVerticalStack & JSXBase.HTMLAttributes<HTMLDVerticalStackElement>;
             "didroom-logo": LocalJSX.DidroomLogo & JSXBase.HTMLAttributes<HTMLDidroomLogoElement>;
         }
     }

diff --git a/src/components/activity-card/activity.stories.ts b/src/components/activity-card/activity.stories.ts
@@ -2,7 +2,7 @@ import { DActivityCard } from './d-activity-card';
 import { Meta, StoryObj } from '@storybook/html';
 
 const meta = {
-  title: 'Design System/Molecule/Activity',
+  title: 'Design System/FEEDBACK & STATUS/Activity',
   render: args =>
     `<d-activity-card
       name="${args.name}" 

diff --git a/src/components/app-details/app-details.stories.ts b/src/components/app-details/app-details.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/html';
 import type { Components } from '../../components.js';
 
 const meta = {
-  title: 'Design System/Atoms/AppDetails',
+  title: 'Design System/DATA DISPLAY/AppDetails',
   render: args => `<d-app-details version="${args.version}"></d-app-details>`,
 } satisfies Meta<Components.DAppDetails>;
 
@@ -12,6 +12,6 @@ type Story = StoryObj<Components.DAppDetails>;
 
 export const Default: Story = {
   args: {
-    version: "1.0.9",
-  }
+    version: '1.0.9',
+  },
 };
diff --git a/src/components/avatar/avatar.stories.ts b/src/components/avatar/avatar.stories.ts
@@ -3,7 +3,7 @@ import type { Components } from '../../components.js';
 import { ShapeArgTypes, SizeArgTypes } from '../types.js';
 
 const meta = {
-  title: 'Design System/Atoms/Avatar',
+  title: 'Design System/MEDIA & ICONS/Avatar',
   render: args => `<d-avatar name="${args.name}" src="${args.src}" size="${args.size}" shape="${args.shape}"></d-avatar>`,
   argTypes: {
     size: SizeArgTypes,

diff --git a/src/components/background-illustration/background-illustration.stories.ts b/src/components/background-illustration/background-illustration.stories.ts
@@ -2,7 +2,7 @@ import { DBackgroundIllustration } from './d-background-illustration';
 import { Meta, StoryObj } from '@storybook/html';
 
 const meta = {
-  title: 'Design System/Molecule/Background-illustration',
+  title: 'Design System/MEDIA & ICONS/Background-illustration',
   render: args => {
     console.log(args);
     return `<d-background-illustration background="${args.background}">

diff --git a/src/components/badge/badge.stories.ts b/src/components/badge/badge.stories.ts
@@ -2,7 +2,7 @@ import { DBadge } from './d-badge';
 import { Meta, StoryObj } from '@storybook/html';
 
 const meta = {
-  title: 'Design System/Atoms/Badge',
+  title: 'Design System/DATA DISPLAY/Badge',
   render: () =>
     `<d-badge>
       Address
@@ -20,4 +20,3 @@ export const Default: Story = {
     },
   },
 };
-
diff --git a/src/components/button/button.stories.ts b/src/components/button/button.stories.ts
@@ -3,7 +3,7 @@ import type { Components } from '../../components.js';
 import { ColorArgTypes } from '../types.js';
 
 const meta = {
-  title: 'Design System/Atoms/Button',
+  title: 'Design System/FORMS/Button',
   render: (args, story) => `<d-button color=${args.color} clear=${args.clear ? "true" : "false"} disabled=${args.disabled} ${args.href ? `href=${args.href}` : ''} size=${args.size} ${args.expand ? 'expand' : ''}>
   ${Boolean(story.parameters.slot) ? `<div slot="${story.parameters.slot.position}">${story.parameters.slot.icon}</div>` : ''}
   ${Boolean(story.parameters.slot?.position == 'icon-only') ? '' : 'BUTTON'}</d-button>`,

diff --git a/src/components/buttons-group/buttons-group.stories.ts b/src/components/buttons-group/buttons-group.stories.ts
@@ -3,7 +3,7 @@ import type { Components } from '../../components.js';
 import { ColorArgTypes } from '../types.js';
 
 const meta = {
-  title: 'Design System/Atoms/Buttons-group',
+  title: 'Design System/FORMS/Buttons-group',
   render: () => `<d-buttons-group>
   <d-button href='/' size="large">
     button 1

diff --git a/src/components/credential-card/credential-card.stories.ts b/src/components/credential-card/credential-card.stories.ts
@@ -2,7 +2,7 @@ import { DCredentialCard } from './d-credential-card';
 import { Meta, StoryObj } from '@storybook/html';
 
 const meta = {
-  title: 'Design System/Molecule/CredentialCard',
+  title: 'Design System/DATA DISPLAY/CredentialCard',
   render: args =>
     `<d-credential-card 
     name="${args.name}" 
@@ -26,7 +26,7 @@ export const Default: Story = {
     issuedByLabel: 'issued by',
     expirationLabel: 'exp',
     expirationDate: '2017-01-01',
-    verified: false
+    verified: false,
   },
   parameters: {
     design: {
@@ -42,5 +42,3 @@ export const Verified: Story = {
     verified: true,
   },
 };
-
-
diff --git a/src/components/credential-detail/credential-detail.stories.ts b/src/components/credential-detail/credential-detail.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/html';
 import type { Components } from '../../components.js';
 
 const meta = {
-  title: 'Design System/Molecule/CredentialDetail',
+  title: 'Design System/DATA DISPLAY/CredentialDetail',
   render: (args, story) =>
     Boolean(story.parameters.slot)
       ? `<d-credential-detail name="${args.name}" issuer="${args.issuer}" description="${args.description}" ${

diff --git a/src/components/credential-service/credential-services.stories.ts b/src/components/credential-service/credential-services.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/html';
 import type { Components } from '../../components.js';
 
 const meta = {
-  title: 'Design System/Molecule/CredentialService',
+  title: 'Design System/DATA DISPLAY/CredentialService',
   render: args => `<d-credential-service name="${args.name}" issuer="${args.issuer}" description="${args.description}" href="${args.href}"></d-credential-service>`,
 } satisfies Meta<Components.DCredentialService>;
 

diff --git a/src/components/d-did-box/did-box.stories.ts b/src/components/d-did-box/did-box.stories.ts
@@ -2,7 +2,7 @@ import { DDidBox } from './d-did-box';
 import { Meta, StoryObj } from '@storybook/html';
 
 const meta = {
-  title: 'Design System/Atoms/DidBox',
+  title: 'Design System/DATA DISPLAY/DidBox',
   render: args =>
     `<d-did-box 
     did="${args.did}" 
@@ -17,4 +17,3 @@ export const Default: Story = {
     did: 'did:dyne:sandbox.signroom:JAomV7KF3NjjagBEnTrRNG28DjepXM9XHEyGNYwJS7ke',
   },
 };
-
diff --git a/src/components/definition/definition.stories.ts b/src/components/definition/definition.stories.ts
@@ -2,7 +2,7 @@ import { DDefinition } from './d-definition';
 import { Meta, StoryObj } from '@storybook/html';
 
 const meta = {
-  title: 'Design System/Atoms/Definition',
+  title: 'Design System/DATA DISPLAY/Definition',
   render: args =>
     `<d-definition 
     title="${args.title}" 

diff --git a/src/components/empty-state/empty-state.stories.ts b/src/components/empty-state/empty-state.stories.ts
@@ -2,7 +2,7 @@ import { DEmptyState } from './d-empty-state';
 import { Meta, StoryObj } from '@storybook/html';
 
 const meta = {
-  title: 'Design System/Molecule/EmptyState',
+  title: 'Design System/FEEDBACK & STATUS/EmptyState',
   render: (args, parameters) =>
     `<d-empty-state 
     heading="${args.heading}" 

diff --git a/src/components/feedback/feedback.stories.ts b/src/components/feedback/feedback.stories.ts
@@ -2,7 +2,7 @@ import { DFeedback } from './d-feedback';
 import { Meta, StoryObj } from '@storybook/html';
 
 const meta = {
-  title: 'Design System/Molecule/Feedback',
+  title: 'Design System/FEEDBACK & STATUS/Feedback',
   render: args =>
     `<d-feedback 
     feedback="${args.feedback}"

diff --git a/src/components/header/header.stories.ts b/src/components/header/header.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/html';
 import type { Components } from '../../components.js';
 
 const meta = {
-  title: 'Design System/Molecule/Header',
+  title: 'Design System/LAYOUT/Header',
   render: args =>
     `<d-header back-button='${args.backButton}'  settings='${args.settings}'>
       title

diff --git a/src/components/list/d-list.css → ...s/horizontal-stack/d-horizontal-stack.css b/src/components/list/d-list.css → ...s/horizontal-stack/d-horizontal-stack.css
diff --git a/src/components/horizontal-stack/d-horizontal-stack.tsx b/src/components/horizontal-stack/d-horizontal-stack.tsx
@@ -0,0 +1,20 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'd-horizontal-stack',
+  styleUrl: 'd-horizontal-stack.css',
+  shadow: true,
+})
+export class DHorizontalStack {
+  @Prop() gap: 2 | 4 | 8 = 2;
+
+  render() {
+    return (
+      <Host>
+        <div class={{ 'flex flex-row': true, 'gap-2': this.gap == 2, 'gap-4': this.gap == 4, 'gap-8': this.gap == 8 }}>
+          <slot></slot>
+        </div>
+      </Host>
+    );
+  }
+}
diff --git a/src/components/horizontal-stack/horizontal-stack.stories.ts b/src/components/horizontal-stack/horizontal-stack.stories.ts
@@ -0,0 +1,31 @@
+import { DHorizontalStack } from './d-horizontal-stack';
+import { Meta, StoryObj } from '@storybook/html';
+
+const meta = {
+  title: 'Design System/LAYOUT/horizontal-stack',
+  render: args =>
+    `<d-horizontal-stack ${args.gap && `gap=${args.gap}`}>
+    <d-credential-service name="credential 1" issuer="issuer 1"  organization="org 1"></d-credential-service>
+    <d-credential-service name="credential 2" issuer="issuer 2"  organization="org 2"></d-credential-service>
+    <d-credential-service name="credential 3" issuer="issuer 3"  organization="org 3"></d-credential-service>
+    </d-horizontal-stack>`,
+} satisfies Meta<DHorizontalStack>;
+
+export default meta;
+type Story = StoryObj<DHorizontalStack>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithGap4: Story = {
+  args: {
+    gap: 4,
+  },
+};
+
+export const WithGap8: Story = {
+  args: {
+    gap: 8,
+  },
+};
diff --git a/src/components/list/readme.md → src/components/horizontal-stack/readme.md b/src/components/list/readme.md → src/components/horizontal-stack/readme.md
@@ -1,6 +1,4 @@
-# d-list
-
-
+# d-vertical-stack
 
 <!-- Auto Generated Below -->