fix: several ui fixies (#129)

* fix: several ui fixies * feat: add d-list component * fix: add prop for gap in d-list * test: make them work
ForkbombEu · Aug 2, 2024 · 43f37dc · 43f37dc
1 parent 45e46c3
commit 43f37dc
Show file tree

Hide file tree

Showing 16 changed files with 138 additions and 14 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -62,6 +62,7 @@ export namespace Components {
         "issuer": string;
         "logoSrc"?: string;
         "name": string;
+        "organization"?: string;
     }
     interface DDefinition {
         "definition": string;
@@ -108,6 +109,9 @@ export namespace Components {
         "type": 'text' | 'password' | 'email' | 'number';
         "value": string;
     }
+    interface DList {
+        "gap": 2 | 4 | 8;
+    }
     interface DLoading {
         "loading": boolean;
         "message": string;
@@ -314,6 +318,12 @@ 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: {
@@ -392,6 +402,7 @@ declare global {
         "d-heading": HTMLDHeadingElement;
         "d-info-led": HTMLDInfoLedElement;
         "d-input": HTMLDInputElement;
+        "d-list": HTMLDListElement;
         "d-loading": HTMLDLoadingElement;
         "d-logo": HTMLDLogoElement;
         "d-organizations": HTMLDOrganizationsElement;
@@ -461,6 +472,7 @@ declare namespace LocalJSX {
         "issuer"?: string;
         "logoSrc"?: string;
         "name"?: string;
+        "organization"?: string;
     }
     interface DDefinition {
         "definition"?: string;
@@ -511,6 +523,9 @@ declare namespace LocalJSX {
         "type"?: 'text' | 'password' | 'email' | 'number';
         "value"?: string;
     }
+    interface DList {
+        "gap"?: 2 | 4 | 8;
+    }
     interface DLoading {
         "loading"?: boolean;
         "message"?: string;
@@ -569,6 +584,7 @@ declare namespace LocalJSX {
         "d-heading": DHeading;
         "d-info-led": DInfoLed;
         "d-input": DInput;
+        "d-list": DList;
         "d-loading": DLoading;
         "d-logo": DLogo;
         "d-organizations": DOrganizations;
@@ -602,6 +618,7 @@ declare module "@stencil/core" {
             "d-heading": LocalJSX.DHeading & JSXBase.HTMLAttributes<HTMLDHeadingElement>;
             "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>;

diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css
@@ -1,5 +1,5 @@
 :host {
-  @apply inline-flex items-center justify-center relative overflow-hidden h-10 w-10 bg-surface rounded-full shrink-0;
+  @apply inline-flex items-center justify-center relative overflow-hidden h-10 w-10 bg-accent rounded-full shrink-0;
 }
 
 :host span {

diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx
@@ -11,7 +11,6 @@ export class Avatar {
   @Prop({ reflect: true }) size?: Size = 'm';
   @Prop({ reflect: true }) shape?: Shape = 'round';
   @Prop({ reflect: true }) src?: string;
-
   @State() error: boolean = false;
 
   render() {

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

diff --git a/src/components/credential-service/d-credential-service.tsx b/src/components/credential-service/d-credential-service.tsx
@@ -9,6 +9,7 @@ export class DCredentialService {
   @Prop() name: string;
   @Prop() issuer: string;
   @Prop() logoSrc?: string;
+  @Prop() organization?: string;
   @Prop() description?: string;
   @Prop({ reflect: true }) href?: string;
 
@@ -19,6 +20,7 @@ export class DCredentialService {
           <d-avatar name={this.name} src={this.logoSrc} size="l" shape="square"></d-avatar>
           <div class="h-full min-h-[60px] flex flex-col grow justify-between">
             <d-text size="l">{this.name}</d-text>
+            <d-text size="s"  class="!text-on-alt">{this.organization}</d-text>
             <d-text class="!text-on-alt">{this.issuer}</d-text>
           </div>
         </div>

diff --git a/src/components/credential-service/readme.md b/src/components/credential-service/readme.md
@@ -7,14 +7,14 @@
 
 ## Properties
 
-| Property      | Attribute      | Description | Type     | Default      |
-| ------------- | -------------- | ----------- | -------- | ------------ |
-| `description` | `description`  |             | `string` | `undefined`  |
-| `href`        | `href`         |             | `string` | `undefined`  |
-| `issuer`      | `issuer`       |             | `string` | `undefined`  |
-| `issuerLabel` | `issuer-label` |             | `string` | `'Issuer_L'` |
-| `logoSrc`     | `logo-src`     |             | `string` | `undefined`  |
-| `name`        | `name`         |             | `string` | `undefined`  |
+| Property       | Attribute      | Description | Type     | Default     |
+| -------------- | -------------- | ----------- | -------- | ----------- |
+| `description`  | `description`  |             | `string` | `undefined` |
+| `href`         | `href`         |             | `string` | `undefined` |
+| `issuer`       | `issuer`       |             | `string` | `undefined` |
+| `logoSrc`      | `logo-src`     |             | `string` | `undefined` |
+| `name`         | `name`         |             | `string` | `undefined` |
+| `organization` | `organization` |             | `string` | `undefined` |
 
 
 ## Dependencies

diff --git a/src/components/credential-service/test/d-credential-service.spec.tsx b/src/components/credential-service/test/d-credential-service.spec.tsx
@@ -15,6 +15,7 @@ describe('d-credential-service', () => {
               <d-avatar shape="square" size="l"></d-avatar>
               <div class="flex flex-col grow h-full justify-between min-h-[60px]">
                 <d-text size="l"></d-text>
+                <d-text class="!text-on-alt" size="s"></d-text>
                 <d-text class="!text-on-alt">
                 </d-text>
               </div>

diff --git a/src/components/list/d-list.css b/src/components/list/d-list.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/src/components/list/d-list.tsx b/src/components/list/d-list.tsx
@@ -0,0 +1,20 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'd-list',
+  styleUrl: 'd-list.css',
+  shadow: true,
+})
+export class DList {
+  @Prop() gap: 2 | 4 | 8 = 2;
+
+  render() {
+    return (
+      <Host>
+        <div class={{ 'flex flex-col': 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/list/list.stories.ts b/src/components/list/list.stories.ts
@@ -0,0 +1,31 @@
+import { DList } from './d-list';
+import { Meta, StoryObj } from '@storybook/html';
+
+const meta = {
+  title: 'Design System/Atoms/List',
+  render: args =>
+    `<d-list ${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-list>`,
+} satisfies Meta<DList>;
+
+export default meta;
+type Story = StoryObj<DList>;
+
+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 b/src/components/list/readme.md
@@ -0,0 +1,17 @@
+# d-list
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type          | Default |
+| -------- | --------- | ----------- | ------------- | ------- |
+| `gap`    | `gap`     |             | `2 \| 4 \| 8` | `2`     |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/list/test/d-list.e2e.ts b/src/components/list/test/d-list.e2e.ts
@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('d-list', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<d-list></d-list>');
+
+    const element = await page.find('d-list');
+    expect(element).toHaveClass('hydrated');
+  });
+});
diff --git a/src/components/list/test/d-list.spec.tsx b/src/components/list/test/d-list.spec.tsx
@@ -0,0 +1,20 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { DList } from '../d-list';
+
+describe('d-list', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [DList],
+      html: `<d-list></d-list>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <d-list>
+        <mock:shadow-root>
+          <div class="flex flex-col gap-2">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </d-list>
+    `);
+  });
+});
diff --git a/src/components/page-description/d-page-description.css b/src/components/page-description/d-page-description.css
@@ -1,3 +1,4 @@
 :host {
   display: block;
+  @apply pb-8 pt-1
 }
diff --git a/src/components/page-description/d-page-description.tsx b/src/components/page-description/d-page-description.tsx
@@ -11,8 +11,10 @@ export class DPageDescription {
 
   render() {
     return (
-      <Host class="pb-4">
-        <d-heading size="xs" class="font-semibold">{this.title}</d-heading>
+      <Host>
+        <d-heading size="xs" class="font-semibold">
+          {this.title}
+        </d-heading>
         <d-text size="m">
           <p>{this.description}</p>
         </d-text>

diff --git a/src/components/page-description/test/d-page-description.spec.tsx b/src/components/page-description/test/d-page-description.spec.tsx
@@ -8,7 +8,7 @@ describe('d-page-description', () => {
       html: `<d-page-description></d-page-description>`,
     });
     expect(page.root).toEqualHtml(`
-    <d-page-description class="pb-4">
+    <d-page-description>
         <mock:shadow-root>
           <d-heading class="font-semibold" size="xs"></d-heading>
           <d-text size="m">