feat(core): enable scss design tokens local usage

packages/coral/project.json

@@ -13,6 +13,7 @@
   "targets": {
     "build-stencil": {
       "executor": "@nxext/stencil:build",
+      "dependsOn": ["^build"],
       "outputs": [
         "{options.outputPath}",
         "{workspaceRoot}/packages/coral-react/src/generated",
@@ -65,6 +66,7 @@
     },
     "e2e": {
       "executor": "@nxext/stencil:e2e",
+      "dependsOn": ["^build"],
       "outputs": ["{options.outputPath}"],
       "options": {
         "projectType": "library",

packages/coral/src/components.d.ts

@@ -8,31 +8,9 @@ import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
 export namespace Components {
   interface CrlButton {
     /**
-     * The first name
+     * The variant of button to be used
      */
-    first: string;
-    /**
-     * The last name
-     */
-    last: string;
-    /**
-     * The middle name
-     */
-    middle: string;
-  }
-  interface MyComponent {
-    /**
-     * The first name
-     */
-    first: string;
-    /**
-     * The last name
-     */
-    last: string;
-    /**
-     * The middle name
-     */
-    middle: string;
+    variant: string;
   }
 }
 declare global {
@@ -43,50 +21,19 @@ declare global {
     prototype: HTMLCrlButtonElement;
     new (): HTMLCrlButtonElement;
   };
-  interface HTMLMyComponentElement
-    extends Components.MyComponent,
-      HTMLStencilElement {}
-  var HTMLMyComponentElement: {
-    prototype: HTMLMyComponentElement;
-    new (): HTMLMyComponentElement;
-  };
   interface HTMLElementTagNameMap {
     'crl-button': HTMLCrlButtonElement;
-    'my-component': HTMLMyComponentElement;
   }
 }
 declare namespace LocalJSX {
   interface CrlButton {
     /**
-     * The first name
-     */
-    first?: string;
-    /**
-     * The last name
-     */
-    last?: string;
-    /**
-     * The middle name
-     */
-    middle?: string;
-  }
-  interface MyComponent {
-    /**
-     * The first name
-     */
-    first?: string;
-    /**
-     * The last name
-     */
-    last?: string;
-    /**
-     * The middle name
+     * The variant of button to be used
      */
-    middle?: string;
+    variant?: string;
   }
   interface IntrinsicElements {
     'crl-button': CrlButton;
-    'my-component': MyComponent;
   }
 }
 export { LocalJSX as JSX };
@@ -95,8 +42,6 @@ declare module '@stencil/core' {
     interface IntrinsicElements {
       'crl-button': LocalJSX.CrlButton &
         JSXBase.HTMLAttributes<HTMLCrlButtonElement>;
-      'my-component': LocalJSX.MyComponent &
-        JSXBase.HTMLAttributes<HTMLMyComponentElement>;
     }
   }
 }

packages/coral/src/components/crl-button/crl-button.e2e.ts

@@ -12,21 +12,25 @@ describe('crl-button', () => {
   it('renders changes to the name data', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<crl-button></crl-button>');
+    await page.setContent('<crl-button>Hello, World!</crl-button>');
+
     const component = await page.find('crl-button');
-    const element = await page.find('crl-button >>> div');
-    expect(element.textContent).toEqual(`Hello, World! I'm `);
+    const element = await page.find('crl-button >>> button');
+
+    expect(component).toHaveClass('hydrated');
+    expect(component.textContent).toEqual(`Hello, World!`);
+    expect(element).toHaveClass('crl-button');
 
-    component.setProperty('first', 'James');
-    await page.waitForChanges();
-    expect(element.textContent).toEqual(`Hello, World! I'm James`);
+    // 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('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`);
+    // component.setProperty('middle', 'Earl');
+    // await page.waitForChanges();
+    // expect(element.textContent).toEqual(`Hello, World! I'm James Earl Quincy`);
   });
 });

packages/coral/src/components/crl-button/crl-button.scss

@@ -1,3 +1,10 @@
+@use 'coral-tokens/scss/colors';
+
 :host {
   display: block;
 }
+
+.crl-button {
+  background-color: colors.$color-primary-0;
+  color: #ffffff;
+}

packages/coral/src/components/crl-button/crl-button.spec.tsx

@@ -10,9 +10,9 @@ describe('crl-button', () => {
     expect(root).toEqualHtml(`
       <crl-button>
         <mock:shadow-root>
-          <div>
-            Hello, World! I'm
-          </div>
+          <button class="crl-button">
+            <slot></slot>
+          </button>
         </mock:shadow-root>
       </crl-button>
     `);
@@ -21,15 +21,16 @@ describe('crl-button', () => {
   it('renders with values', async () => {
     const { root } = await newSpecPage({
       components: [CrlButton],
-      html: `<crl-button first="Stencil" last="'Don't call me a framework' JS"></crl-button>`,
+      html: `<crl-button>Hello, World!</crl-button>`,
     });
     expect(root).toEqualHtml(`
-      <crl-button first="Stencil" last="'Don't call me a framework' JS">
+      <crl-button>
         <mock:shadow-root>
-          <div>
-            Hello, World! I'm Stencil 'Don't call me a framework' JS
-          </div>
+          <button class="crl-button">
+            <slot></slot>
+          </button>
         </mock:shadow-root>
+        Hello, World!
       </crl-button>
     `);
   });

packages/coral/src/components/crl-button/crl-button.tsx

@@ -7,29 +7,15 @@ import { Component, h, Prop } from '@stencil/core';
 })
 export class CrlButton {
   /**
-   * The first name
+   * The variant of button to be used
    */
-  @Prop() first: string;
+  @Prop() variant: string;
 
-  /**
-   * The middle name
-   */
-  @Prop() middle: string;
-
-  /**
-   * The last name
-   */
-  @Prop() last: string;
-
-  private getText(): string {
+  render() {
     return (
-      (this.first || '') +
-      (this.middle ? ` ${this.middle}` : '') +
-      (this.last ? ` ${this.last}` : '')
+      <button class="crl-button">
+        <slot />
+      </button>
     );
   }
-
-  render() {
-    return <div>Hello, World! I'm {this.getText()}</div>;
-  }
 }

packages/coral/src/components/crl-button/readme.md

@@ -4,11 +4,9 @@
 
 ## Properties
 
-| Property | Attribute | Description     | Type     | Default     |
-| -------- | --------- | --------------- | -------- | ----------- |
-| `first`  | `first`   | The first name  | `string` | `undefined` |
-| `last`   | `last`    | The last name   | `string` | `undefined` |
-| `middle` | `middle`  | The middle name | `string` | `undefined` |
+| Property  | Attribute | Description                      | Type     | Default     |
+| --------- | --------- | -------------------------------- | -------- | ----------- |
+| `variant` | `variant` | The variant of button to be used | `string` | `undefined` |
 
 ---
 

packages/coral/src/index.html

@@ -12,9 +12,6 @@
     <script nomodule src="/build/coral.js"></script>
   </head>
   <body>
-    <my-component
-      first="Stencil"
-      last="'Don't call me a framework' JS"
-    ></my-component>
+    <crl-button>Click Me</crl-button>
   </body>
 </html>