feat: info led (#79)

* feat: info led

* test: fix info led test

src/components.d.ts

@@ -61,6 +61,9 @@ export namespace Components {
         "color": Color;
         "size": Size;
     }
+    interface DInfoLed {
+        "type": 'success' | 'warning' | 'error';
+    }
     interface DInput {
         "autoFocus": boolean;
         "clearButton": boolean;
@@ -171,6 +174,12 @@ declare global {
         prototype: HTMLDHeadingElement;
         new (): HTMLDHeadingElement;
     };
+    interface HTMLDInfoLedElement extends Components.DInfoLed, HTMLStencilElement {
+    }
+    var HTMLDInfoLedElement: {
+        prototype: HTMLDInfoLedElement;
+        new (): HTMLDInfoLedElement;
+    };
     interface HTMLDInputElementEventMap {
         "dInput": string;
         "dChange": string;
@@ -222,6 +231,7 @@ declare global {
         "d-definition": HTMLDDefinitionElement;
         "d-feedback": HTMLDFeedbackElement;
         "d-heading": HTMLDHeadingElement;
+        "d-info-led": HTMLDInfoLedElement;
         "d-input": HTMLDInputElement;
         "d-logo": HTMLDLogoElement;
         "d-session-card": HTMLDSessionCardElement;
@@ -286,6 +296,9 @@ declare namespace LocalJSX {
         "color"?: Color;
         "size"?: Size;
     }
+    interface DInfoLed {
+        "type"?: 'success' | 'warning' | 'error';
+    }
     interface DInput {
         "autoFocus"?: boolean;
         "clearButton"?: boolean;
@@ -322,6 +335,7 @@ declare namespace LocalJSX {
         "d-definition": DDefinition;
         "d-feedback": DFeedback;
         "d-heading": DHeading;
+        "d-info-led": DInfoLed;
         "d-input": DInput;
         "d-logo": DLogo;
         "d-session-card": DSessionCard;
@@ -341,6 +355,7 @@ declare module "@stencil/core" {
             "d-definition": LocalJSX.DDefinition & JSXBase.HTMLAttributes<HTMLDDefinitionElement>;
             "d-feedback": LocalJSX.DFeedback & JSXBase.HTMLAttributes<HTMLDFeedbackElement>;
             "d-heading": LocalJSX.DHeading & JSXBase.HTMLAttributes<HTMLDHeadingElement>;
+            "d-info-led": LocalJSX.DInfoLed & JSXBase.HTMLAttributes<HTMLDInfoLedElement>;
             "d-input": LocalJSX.DInput & JSXBase.HTMLAttributes<HTMLDInputElement>;
             "d-logo": LocalJSX.DLogo & JSXBase.HTMLAttributes<HTMLDLogoElement>;
             "d-session-card": LocalJSX.DSessionCard & JSXBase.HTMLAttributes<HTMLDSessionCardElement>;

src/components/info-led/d-info-led.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

src/components/info-led/d-info-led.tsx

@@ -0,0 +1,22 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'd-info-led',
+  styleUrl: 'd-info-led.css',
+  shadow: true,
+})
+export class DInfoLed {
+  @Prop() type: 'success' | 'warning' | 'error' = 'success';
+
+  render() {
+    return (
+      <Host>
+        <div class={{'h-[5px] w-[5px] shrink-0 rounded-full border border-solid':true,
+          'bg-success border-success': this.type === 'success',
+          'bg-warning border-warning': this.type === 'warning',
+          'bg-error border-error': this.type === 'error',
+        }} />
+      </Host>
+    );
+  }
+}

src/components/info-led/feedback.stories.ts

@@ -0,0 +1,37 @@
+import { DInfoLed } from './d-info-led';
+import { Meta, StoryObj } from '@storybook/html';
+
+const meta = {
+  title: 'Design System/Atoms/InfoLed',
+  render: args =>
+    `<d-info-led 
+    type="${args.type}"
+    </d-info-led>`,
+} satisfies Meta<DInfoLed>;
+
+export default meta;
+type Story = StoryObj<DInfoLed>;
+
+export const Default: Story = {
+  args: {
+    type: 'success',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/pdwfO3dMKtaCAQakht0JE6/DIDRoom-%2B-Signroom---WF-and-GUI---Dyne.org?node-id=3449%3A48602&mode=dev',
+    },
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    type: 'warning',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    type: 'error',
+  },
+};

src/components/info-led/readme.md

@@ -0,0 +1,17 @@
+# d-info-led
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type                                | Default     |
+| -------- | --------- | ----------- | ----------------------------------- | ----------- |
+| `type`   | `type`    |             | `"error" \| "success" \| "warning"` | `'success'` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/info-led/test/d-info-led.e2e.ts

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

src/components/info-led/test/d-info-led.spec.tsx

@@ -0,0 +1,18 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { DInfoLed } from '../d-info-led';
+
+describe('d-info-led', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [DInfoLed],
+      html: `<d-info-led></d-info-led>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <d-info-led>
+        <mock:shadow-root>
+          <div class="bg-success border border-solid border-success h-[5px] rounded-full shrink-0 w-[5px]"></div>
+        </mock:shadow-root>
+      </d-info-led>
+    `);
+  });
+});