buttons

.storybook/preview-head.html

@@ -1,3 +1,8 @@
+<style>
+  * {
+    color: var(--on);
+  }
+</style>
 <link rel="stylesheet" href="./didroom-components/didroom-components.css" />
 <script type="module" src="./didroom-components/didroom-components.esm.js"></script>
 <link rel="stylesheet" href="./dist/didroom-components/didroom-components.css" />

src/components.d.ts

@@ -5,15 +5,20 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { Shape, Size } from "./components/types";
-export { Shape, Size } from "./components/types";
+import { Color, Shape, Size } from "./components/types";
+export { Color, Shape, Size } from "./components/types";
 export namespace Components {
     interface DAvatar {
         "name"?: string;
         "shape"?: Shape;
         "size"?: Size;
         "src"?: string;
     }
+    interface DButton {
+        "color"?: Color;
+        "disabled"?: boolean;
+        "href"?: string;
+    }
     interface DCredentialCard {
         "description"?: string;
         "expirationDate"?: string;
@@ -37,6 +42,12 @@ declare global {
         prototype: HTMLDAvatarElement;
         new (): HTMLDAvatarElement;
     };
+    interface HTMLDButtonElement extends Components.DButton, HTMLStencilElement {
+    }
+    var HTMLDButtonElement: {
+        prototype: HTMLDButtonElement;
+        new (): HTMLDButtonElement;
+    };
     interface HTMLDCredentialCardElement extends Components.DCredentialCard, HTMLStencilElement {
     }
     var HTMLDCredentialCardElement: {
@@ -51,6 +62,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "d-avatar": HTMLDAvatarElement;
+        "d-button": HTMLDButtonElement;
         "d-credential-card": HTMLDCredentialCardElement;
         "d-credential-service": HTMLDCredentialServiceElement;
     }
@@ -62,6 +74,11 @@ declare namespace LocalJSX {
         "size"?: Size;
         "src"?: string;
     }
+    interface DButton {
+        "color"?: Color;
+        "disabled"?: boolean;
+        "href"?: string;
+    }
     interface DCredentialCard {
         "description"?: string;
         "expirationDate"?: string;
@@ -79,6 +96,7 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "d-avatar": DAvatar;
+        "d-button": DButton;
         "d-credential-card": DCredentialCard;
         "d-credential-service": DCredentialService;
     }
@@ -88,6 +106,7 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "d-avatar": LocalJSX.DAvatar & JSXBase.HTMLAttributes<HTMLDAvatarElement>;
+            "d-button": LocalJSX.DButton & JSXBase.HTMLAttributes<HTMLDButtonElement>;
             "d-credential-card": LocalJSX.DCredentialCard & JSXBase.HTMLAttributes<HTMLDCredentialCardElement>;
             "d-credential-service": LocalJSX.DCredentialService & JSXBase.HTMLAttributes<HTMLDCredentialServiceElement>;
         }

src/components/avatar/avatar.stories.ts

@@ -23,7 +23,7 @@ export const Rounded: Story = {
   parameters: {
     design: {
       type: 'figma',
-      url: 'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/@storybook/addon-designs-sample',
+      url: 'https://www.figma.com/file/pdwfO3dMKtaCAQakht0JE6/DIDRoom-%2B-Signroom---WF-and-GUI---Dyne.org?type=design&node-id=2005-930&mode=dev',
     },
   },
 };

src/components/avatar/avatar.tsx

@@ -7,10 +7,11 @@ import { Shape, Size } from '../types';
   shadow: true,
 })
 export class Avatar {
+  @Prop() name?: string;
+  @Prop() size?: Size = 'm';
+  @Prop() shape?: Shape = 'round';
   @Prop({ reflect: true }) src?: string;
-  @Prop({ reflect: true }) name?: string;
-  @Prop({ reflect: true }) size?: Size = 'm';
-  @Prop({ reflect: true }) shape?: Shape = 'round';
+
   @State() error: boolean = false;
 
   render() {

src/components/avatar/test/avatar.spec.tsx

@@ -8,7 +8,7 @@ describe('d-avatar', () => {
       html: `<d-avatar></d-avatar>`,
     });
     expect(page.root).toEqualHtml(`
-      <d-avatar role="figure" shape="round" size="m">
+      <d-avatar role="figure">
         <mock:shadow-root>
           <svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg">
             <path clip-rule="evenodd" d="M14.0015 16.2796C11.9477 16.2795 9.68689 16.8564 8 18C6.31311 19.1436 5.28077 20.7992 4.5638 22.6777C4.30879 23.3422 4.85297 24 5.5793 24H22.4192C23.1478 24 23.6897 23.3422 23.437 22.6777C22.72 20.7992 21.6869 19.1436 20 18C18.3131 16.8564 16.0554 16.2795 14.0015 16.2796ZM19.0289 8.9125C19.0289 10.2154 18.4987 11.4649 17.5548 12.3862C16.6109 13.3074 15.3307 13.825 13.9959 13.825C12.661 13.825 11.3808 13.3074 10.4369 12.3862C9.49304 11.4649 8.96277 10.2154 8.96277 8.9125C8.96277 7.60962 9.49304 6.36011 10.4369 5.43884C11.3808 4.51756 12.661 4 13.9959 4C15.3307 4 16.6109 4.51756 17.5548 5.43884C18.4987 6.36011 19.0289 7.60962 19.0289 8.9125Z" fill="#F8FAFE" fill-rule="evenodd"></path>
@@ -24,7 +24,7 @@ describe('d-avatar', () => {
       html: `<d-avatar name="Maccio Capatonda"></d-avatar>`,
     });
     expect(root).toEqualHtml(`
-    <d-avatar aria-label="Maccio Capatonda" name="Maccio Capatonda" role="figure" shape="round" size="m">
+    <d-avatar aria-label="Maccio Capatonda" name="Maccio Capatonda" role="figure">
       <mock:shadow-root>
         <span class="font-medium uppercase">
           MC
@@ -40,7 +40,7 @@ describe('d-avatar', () => {
       html: `<d-avatar shape="square" name=""></d-avatar>`,
     });
     expect(root).toEqualHtml(`
-    <d-avatar aria-label="" name="" role="figure" shape="square" size="m">
+    <d-avatar aria-label="" role="figure" shape="square">
       <mock:shadow-root>
         <svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg">
           <path clip-rule="evenodd" d="M14.0015 16.2796C11.9477 16.2795 9.68689 16.8564 8 18C6.31311 19.1436 5.28077 20.7992 4.5638 22.6777C4.30879 23.3422 4.85297 24 5.5793 24H22.4192C23.1478 24 23.6897 23.3422 23.437 22.6777C22.72 20.7992 21.6869 19.1436 20 18C18.3131 16.8564 16.0554 16.2795 14.0015 16.2796ZM19.0289 8.9125C19.0289 10.2154 18.4987 11.4649 17.5548 12.3862C16.6109 13.3074 15.3307 13.825 13.9959 13.825C12.661 13.825 11.3808 13.3074 10.4369 12.3862C9.49304 11.4649 8.96277 10.2154 8.96277 8.9125C8.96277 7.60962 9.49304 6.36011 10.4369 5.43884C11.3808 4.51756 12.661 4 13.9959 4C15.3307 4 16.6109 4.51756 17.5548 5.43884C18.4987 6.36011 19.0289 7.60962 19.0289 8.9125Z" fill="#F8FAFE" fill-rule="evenodd"></path>

src/components/button/button.stories.ts

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/html';
+import type { Components } from '../../components.js';
+import { ColorArgTypes } from '../types.js';
+
+const meta = {
+  title: 'Design System/Atoms/Button',
+  render: args => `<d-button color=${args.color} disabled=${args.disabled}>BUTTON</d-button>`,
+  argTypes: {
+    disabled: { control: 'boolean', description: 'Disable the button' },
+    color: ColorArgTypes,
+  },
+} satisfies Meta<Components.DButton>;
+
+export default meta;
+type Story = StoryObj<Components.DButton>;
+
+export const Default: Story = {
+  args: {
+    color: 'primary',
+    href: '#',
+    disabled: false,
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/pdwfO3dMKtaCAQakht0JE6/DIDRoom-%2B-Signroom---WF-and-GUI---Dyne.org?type=design&node-id=2584-15529&mode=design&t=7gAir6gIxMq07ebE-0',
+    },
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    ...Default.args,
+    color: 'primary',
+  },
+};
+export const Accent: Story = {
+  args: {
+    ...Default.args,
+    color: 'accent',
+  },
+};
+export const AccentDisabled: Story = {
+  args: {
+    ...Default.args,
+    color: 'accent',
+    disabled: true,
+  },
+};
+export const PrimaryDisabled: Story = {
+  args: {
+    ...Default.args,
+    color: 'primary',
+    disabled: true,
+  },
+};
+export const Link: Story = {
+  args: {
+    ...Default.args,
+    href: '/',
+  },
+};

src/components/button/d-button.scss

@@ -0,0 +1,37 @@
+:host > a,
+:host > button {
+  @apply flex w-full justify-center items-center shrink-0 rounded px-0 py-2 text-center text-base not-italic font-semibold leading-8 tracking-[0.16px] uppercase;
+}
+
+:host([disabled]:not([disabled='false'])) > a,
+:host([disabled]:not([disabled='false'])) > button {
+  pointer-events: none;
+  cursor: not-allowed;
+  &.accent {
+    @apply opacity-30 text-opacity-30;
+  }
+
+  &.primary {
+    @apply opacity-60 text-opacity-60;
+  }
+}
+
+.accent {
+  @apply bg-accent text-on-accent;
+  * {
+    @apply text-on-accent;
+  }
+  &:active {
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%), var(--accent);
+  }
+}
+
+.primary {
+  @apply bg-primary text-on;
+  * {
+    @apply text-on;
+  }
+  &:active {
+    background: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), var(--primary);
+  }
+}

src/components/button/d-button.tsx

@@ -0,0 +1,34 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+import { Color } from '../types';
+
+@Component({
+  tag: 'd-button',
+  styleUrl: 'd-button.scss',
+  shadow: true,
+})
+export class DButton {
+  @Prop() color?: Color = 'primary';
+  // @Prop() outline?: boolean = false;
+  @Prop({ reflect: true }) href?: string;
+  @Prop({ reflect: true }) disabled?: boolean = false;
+
+  render() {
+    if (this.href) {
+      return (
+        <Host>
+          <a class={this.color} href={this.href}>
+            <slot></slot>
+          </a>
+        </Host>
+      );
+    } else {
+      return (
+        <Host>
+          <button class={this.color} disabled={this.disabled} aria-disabled={this.disabled}>
+            <slot></slot>
+          </button>
+        </Host>
+      );
+    }
+  }
+}

src/components/button/readme.md

@@ -0,0 +1,19 @@
+# d-button
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description | Type      | Default     |
+| ---------- | ---------- | ----------- | --------- | ----------- |
+| `color`    | `color`    |             | `string`  | `'primary'` |
+| `disabled` | `disabled` |             | `boolean` | `false`     |
+| `href`     | `href`     |             | `string`  | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/button/test/d-button.e2e.ts

@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('d-button', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<d-button></d-button>');
+
+    const element = await page.find('d-button');
+    expect(element).toHaveClass('hydrated');
+  });
+});

src/components/button/test/d-button.spec.tsx

@@ -0,0 +1,20 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { DButton } from '../d-button';
+
+describe('d-button', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [DButton],
+      html: `<d-button></d-button>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <d-button>
+        <mock:shadow-root>
+          <button class="primary"> 
+            <slot></slot>
+          </button>
+        </mock:shadow-root>
+      </d-button>
+    `);
+  });
+});

src/components/credential-card/d-credential-card.tsx

@@ -32,15 +32,15 @@ const verifiedUser = (
   tag: 'd-credential-card',
   styleUrl: 'd-credential-card.css',
   shadow: true,
-  assetsDirs: ['assets']
+  assetsDirs: ['assets'],
 })
 export class DCredentialCard {
-  @Prop({ reflect: true }) name: string;
-  @Prop({ reflect: true }) issuer: string;
-  @Prop({ reflect: true }) logoSrc?: string;
-  @Prop({ reflect: true }) description?: string;
-  @Prop({ reflect: true }) expirationDate?: string;
-  @Prop({ reflect: true }) verified?: boolean = false;
+  @Prop() name: string;
+  @Prop() issuer: string;
+  @Prop() logoSrc?: string;
+  @Prop() verified?: boolean = false;
+  @Prop() description?: string;
+  @Prop() expirationDate?: string;
 
   render() {
     // const imageSrc = getAssetPath(`./assets/Rectangle.png`);

src/components/credential-service/d-credential-service.tsx

@@ -10,7 +10,7 @@ export class DCredentialService {
   @Prop() issuer: string;
   @Prop() logoSrc?: string;
   @Prop() description?: string;
-  @Prop() href?: string;
+  @Prop({ reflect: true }) href?: string;
 
   render() {
     const content = (

src/components/types.ts

@@ -12,3 +12,13 @@ export const ShapeArgTypes = {
   control: { type: 'inline-radio' },
 };
 export type Shape = (typeof ShapeOptions)[number];
+
+const ColorOptions = 'primary accent'.split(' ');
+export const ColorArgTypes = {
+  options: ColorOptions,
+  description: 'Color of the button',
+  defaultValue: 'primary',
+  default: 'primary',
+  control: { type: 'inline-radio' },
+};
+export type Color = (typeof ColorOptions)[number];

src/global/global.css

@@ -68,3 +68,7 @@
 * {
   @apply text-on;
 }
+
+body {
+  @apply bg-surface;
+}

vscode-data.json

@@ -26,6 +26,27 @@
         }
       ]
     },
+    {
+      "name": "d-button",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "color",
+          "description": ""
+        },
+        {
+          "name": "disabled",
+          "description": ""
+        },
+        {
+          "name": "href",
+          "description": ""
+        }
+      ]
+    },
     {
       "name": "d-credential-card",
       "description": {