App-button component

src/components.d.ts

@@ -6,6 +6,10 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
+    interface AppButton {
+        "label": string;
+        "variant": 'primary' | 'secondary';
+    }
     interface AppHome {
     }
     interface AppProfile {
@@ -15,6 +19,12 @@ export namespace Components {
     }
 }
 declare global {
+    interface HTMLAppButtonElement extends Components.AppButton, HTMLStencilElement {
+    }
+    var HTMLAppButtonElement: {
+        prototype: HTMLAppButtonElement;
+        new (): HTMLAppButtonElement;
+    };
     interface HTMLAppHomeElement extends Components.AppHome, HTMLStencilElement {
     }
     var HTMLAppHomeElement: {
@@ -34,12 +44,17 @@ declare global {
         new (): HTMLAppRootElement;
     };
     interface HTMLElementTagNameMap {
+        "app-button": HTMLAppButtonElement;
         "app-home": HTMLAppHomeElement;
         "app-profile": HTMLAppProfileElement;
         "app-root": HTMLAppRootElement;
     }
 }
 declare namespace LocalJSX {
+    interface AppButton {
+        "label"?: string;
+        "variant"?: 'primary' | 'secondary';
+    }
     interface AppHome {
     }
     interface AppProfile {
@@ -48,6 +63,7 @@ declare namespace LocalJSX {
     interface AppRoot {
     }
     interface IntrinsicElements {
+        "app-button": AppButton;
         "app-home": AppHome;
         "app-profile": AppProfile;
         "app-root": AppRoot;
@@ -57,6 +73,7 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "app-button": LocalJSX.AppButton & JSXBase.HTMLAttributes<HTMLAppButtonElement>;
             "app-home": LocalJSX.AppHome & JSXBase.HTMLAttributes<HTMLAppHomeElement>;
             "app-profile": LocalJSX.AppProfile & JSXBase.HTMLAttributes<HTMLAppProfileElement>;
             "app-root": LocalJSX.AppRoot & JSXBase.HTMLAttributes<HTMLAppRootElement>;

src/components/app-button/app-button.css

@@ -0,0 +1,23 @@
+:host {
+  display: block;
+}
+
+::slotted([slot='label'])
+{
+  display: flex;
+  gap: 8px;
+}
+
+.btn-primary {
+  background-color: red;
+  color: white;
+}
+.btn-secondary {
+  background-color: black;
+  color: white;
+}
+
+.button-content {
+  display: flex;
+  gap: 8px;
+}

src/components/app-button/app-button.tsx

@@ -0,0 +1,25 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'app-button',
+  styleUrl: 'app-button.css',
+  shadow: true,
+})
+export class AppButton {
+  @Prop() label: string
+  @Prop() variant: 'primary' | 'secondary'
+  render() {
+    return (
+      <Host>
+        <button class={`btn-${this.variant}`}>
+          <div class="button-content">
+            {this.variant}
+            <div>
+              <slot name="label">{this.label}</slot>
+            </div>
+          </div>
+        </button>
+      </Host>
+    );
+  }
+}

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

@@ -0,0 +1,26 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('app-button component', () => {
+  it('should render successfully', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<app-button></app-button>');
+
+    const element = await page.find('app-button');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('should apply primary variant class', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<app-button variant="primary"></app-button>');
+
+    const element = await page.find('app-button');
+    // / Ensures component is rendered
+    expect(element).toHaveClass('hydrated');
+
+    // Find the shadow DOM button element
+    const button = await page.find('app-button >>> button');
+
+    // Check if the button inside shadow DOM has the class `btn-primary`
+    expect(button).toHaveClass('btn-primary');
+  });
+});

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

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

src/components/app-home/app-home.tsx

@@ -19,6 +19,10 @@ export class AppHome {
         >
           Profile Page
         </button>
+
+        <app-button label='Machado' variant='primary'>
+          Rudis
+        </app-button>
       </div>
     );
   }