feat(link): creates link component

libs/core/src/components.d.ts

@@ -20,6 +20,16 @@ export namespace Components {
          */
         "middle": string;
     }
+    interface SageLink {
+        /**
+          * The URL that the hyperlink points to.
+         */
+        "href": string;
+        /**
+          * The text content that is rendered.
+         */
+        "text": string;
+    }
 }
 declare global {
     interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement {
@@ -28,8 +38,15 @@ declare global {
         prototype: HTMLMyComponentElement;
         new (): HTMLMyComponentElement;
     };
+    interface HTMLSageLinkElement extends Components.SageLink, HTMLStencilElement {
+    }
+    var HTMLSageLinkElement: {
+        prototype: HTMLSageLinkElement;
+        new (): HTMLSageLinkElement;
+    };
     interface HTMLElementTagNameMap {
         "my-component": HTMLMyComponentElement;
+        "sage-link": HTMLSageLinkElement;
     }
 }
 declare namespace LocalJSX {
@@ -47,15 +64,27 @@ declare namespace LocalJSX {
          */
         "middle"?: string;
     }
+    interface SageLink {
+        /**
+          * The URL that the hyperlink points to.
+         */
+        "href": string;
+        /**
+          * The text content that is rendered.
+         */
+        "text": string;
+    }
     interface IntrinsicElements {
         "my-component": MyComponent;
+        "sage-link": SageLink;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "my-component": LocalJSX.MyComponent & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
+            "sage-link": LocalJSX.SageLink & JSXBase.HTMLAttributes<HTMLSageLinkElement>;
         }
     }
 }

libs/core/src/components/sage-link/readme.md

@@ -0,0 +1,14 @@
+# sage-link
+
+Link is mainly used as navigational element and usually appear within or directly following a paragraph or sentence. The "plain link" is used for interactive user generated text like product, post, and offer titles.
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property            | Attribute | Description                           | Type     | Default     |
+| ------------------- | --------- | ------------------------------------- | -------- | ----------- |
+| `href` _(required)_ | `href`    | The URL that the hyperlink points to. | `string` | `undefined` |
+| `text` _(required)_ | `text`    | The text content that is rendered.    | `string` | `undefined` |
+
+---

libs/core/src/components/sage-link/sage-link.e2e.ts

@@ -0,0 +1,32 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('sage-link', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<sage-link></sage-link>');
+    const element = await page.find('sage-link');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('renders changes to the name data', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<sage-link></sage-link>');
+    const component = await page.find('sage-link');
+    const element = await page.find('sage-link >>> div');
+    expect(element.textContent).toEqual(`Hello, World! I'm `);
+
+    component.setProperty('first', 'James');
+    await page.waitForChanges();
+    expect(element.textContent).toEqual(`Hello, World! I'm James`);
+
+    component.setProperty('last', 'Quincy');
+    await page.waitForChanges();
+    expect(element.textContent).toEqual(`Hello, World! I'm James Quincy`);
+
+    component.setProperty('middle', 'Earl');
+    await page.waitForChanges();
+    expect(element.textContent).toEqual(`Hello, World! I'm James Earl Quincy`);
+  });
+});

libs/core/src/components/sage-link/sage-link.scss

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+
+  a {
+    color: #202327;
+  }
+}

libs/core/src/components/sage-link/sage-link.spec.tsx

@@ -0,0 +1,35 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { SageLink } from './sage-link';
+
+describe('sage-link', () => {
+  it('renders', async () => {
+    const { root } = await newSpecPage({
+      components: [SageLink],
+      html: '<sage-link></sage-link>',
+    });
+    expect(root).toEqualHtml(`
+      <sage-link>
+        <mock:shadow-root>
+          <a>
+          </a>
+        </mock:shadow-root>
+      </sage-link>
+    `);
+  });
+
+  it('renders with values', async () => {
+    const { root } = await newSpecPage({
+      components: [SageLink],
+      html: `<sage-link href="#" text="'Don't call me a framework' JS"></sage-link>`,
+    });
+    expect(root).toEqualHtml(`
+      <sage-link href="#" text="'Don't call me a framework' JS">
+        <mock:shadow-root>
+          <a href="#">
+            'Don't call me a framework' JS
+          </a>
+        </mock:shadow-root>
+      </sage-link>
+    `);
+  });
+});

libs/core/src/components/sage-link/sage-link.stories.tsx

@@ -0,0 +1,12 @@
+import { h } from '@stencil/core';
+import { SageLink } from '@sage/core/sage-link';
+
+export default {
+  title: 'webcomponents/Link',
+  component: SageLink,
+};
+
+const Template = args => <sage-link href={args.href} text={args.text}></sage-link>;
+
+export const Plain = Template.bind({});
+Plain.args = { text: 'Sage Link' };

libs/core/src/components/sage-link/sage-link.tsx

@@ -0,0 +1,23 @@
+import { Component, h, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'sage-link',
+  styleUrl: 'sage-link.scss',
+  shadow: true,
+})
+export class SageLink {
+  /**
+   * The URL that the hyperlink points to.
+   */
+
+  @Prop() href!: string;
+
+  /**
+   * The text content that is rendered.
+   */
+  @Prop() text!: string;
+
+  render() {
+    return <a href={this.href}>{this.text}</a>;
+  }
+}

libs/react/src/components/proxies.ts

@@ -9,3 +9,4 @@ import { applyPolyfills, defineCustomElements } from '@sage/core/loader';
 
 applyPolyfills().then(() => defineCustomElements());
 export const MyComponent = /*@__PURE__*/createReactComponent<JSX.MyComponent, HTMLMyComponentElement>('my-component');
+export const SageLink = /*@__PURE__*/createReactComponent<JSX.SageLink, HTMLSageLinkElement>('sage-link');