From 346d9358f123d07b7bbea6c3319936fbb29c1e8f Mon Sep 17 00:00:00 2001 From: Sebastian Duque Gutierrez <13395979+sebastiandg7@users.noreply.github.com> Date: Fri, 11 Nov 2022 18:28:33 -0500 Subject: [PATCH] feat(core): enable scss design tokens local usage (#37) --- packages/coral/project.json | 2 + packages/coral/src/components.d.ts | 63 ++----------------- .../components/crl-button/crl-button.e2e.ts | 28 +++++---- .../src/components/crl-button/crl-button.scss | 7 +++ .../components/crl-button/crl-button.spec.tsx | 17 ++--- .../src/components/crl-button/crl-button.tsx | 26 ++------ .../coral/src/components/crl-button/readme.md | 8 +-- .../my-component/my-component.e2e.ts | 32 ---------- .../components/my-component/my-component.scss | 3 - .../my-component/my-component.spec.ts | 36 ----------- .../components/my-component/my-component.tsx | 32 ---------- .../src/components/my-component/readme.md | 15 ----- packages/coral/src/index.html | 5 +- packages/coral/stencil.config.ts | 10 +-- packages/coral/stencil/config-utils.ts | 6 ++ 15 files changed, 60 insertions(+), 230 deletions(-) delete mode 100644 packages/coral/src/components/my-component/my-component.e2e.ts delete mode 100644 packages/coral/src/components/my-component/my-component.scss delete mode 100644 packages/coral/src/components/my-component/my-component.spec.ts delete mode 100644 packages/coral/src/components/my-component/my-component.tsx delete mode 100644 packages/coral/src/components/my-component/readme.md create mode 100644 packages/coral/stencil/config-utils.ts diff --git a/packages/coral/project.json b/packages/coral/project.json index ad25795..d39138f 100644 --- a/packages/coral/project.json +++ b/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", diff --git a/packages/coral/src/components.d.ts b/packages/coral/src/components.d.ts index 96c736c..c7a1676 100644 --- a/packages/coral/src/components.d.ts +++ b/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; - 'my-component': LocalJSX.MyComponent & - JSXBase.HTMLAttributes; } } } diff --git a/packages/coral/src/components/crl-button/crl-button.e2e.ts b/packages/coral/src/components/crl-button/crl-button.e2e.ts index f19e2f4..1c7bb38 100644 --- a/packages/coral/src/components/crl-button/crl-button.e2e.ts +++ b/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(''); + await page.setContent('Hello, World!'); + 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`); }); }); diff --git a/packages/coral/src/components/crl-button/crl-button.scss b/packages/coral/src/components/crl-button/crl-button.scss index 5d4e87f..f099fe3 100644 --- a/packages/coral/src/components/crl-button/crl-button.scss +++ b/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; +} diff --git a/packages/coral/src/components/crl-button/crl-button.spec.tsx b/packages/coral/src/components/crl-button/crl-button.spec.tsx index 458d818..5d9daf1 100644 --- a/packages/coral/src/components/crl-button/crl-button.spec.tsx +++ b/packages/coral/src/components/crl-button/crl-button.spec.tsx @@ -10,9 +10,9 @@ describe('crl-button', () => { expect(root).toEqualHtml(` -
- Hello, World! I'm -
+ `); @@ -21,15 +21,16 @@ describe('crl-button', () => { it('renders with values', async () => { const { root } = await newSpecPage({ components: [CrlButton], - html: ``, + html: `Hello, World!`, }); expect(root).toEqualHtml(` - + -
- Hello, World! I'm Stencil 'Don't call me a framework' JS -
+ + Hello, World! `); }); diff --git a/packages/coral/src/components/crl-button/crl-button.tsx b/packages/coral/src/components/crl-button/crl-button.tsx index 5a766a4..167c8c6 100644 --- a/packages/coral/src/components/crl-button/crl-button.tsx +++ b/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}` : '') + ); } - - render() { - return
Hello, World! I'm {this.getText()}
; - } } diff --git a/packages/coral/src/components/crl-button/readme.md b/packages/coral/src/components/crl-button/readme.md index 89ab680..c254700 100644 --- a/packages/coral/src/components/crl-button/readme.md +++ b/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` | --- diff --git a/packages/coral/src/components/my-component/my-component.e2e.ts b/packages/coral/src/components/my-component/my-component.e2e.ts deleted file mode 100644 index d7ff311..0000000 --- a/packages/coral/src/components/my-component/my-component.e2e.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -describe('my-component', () => { - it('renders', async () => { - const page = await newE2EPage(); - - await page.setContent(''); - const element = await page.find('my-component'); - expect(element).toHaveClass('hydrated'); - }); - - it('renders changes to the name data', async () => { - const page = await newE2EPage(); - - await page.setContent(''); - const component = await page.find('my-component'); - const element = await page.find('my-component >>> 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`); - }); -}); diff --git a/packages/coral/src/components/my-component/my-component.scss b/packages/coral/src/components/my-component/my-component.scss deleted file mode 100644 index 5d4e87f..0000000 --- a/packages/coral/src/components/my-component/my-component.scss +++ /dev/null @@ -1,3 +0,0 @@ -:host { - display: block; -} diff --git a/packages/coral/src/components/my-component/my-component.spec.ts b/packages/coral/src/components/my-component/my-component.spec.ts deleted file mode 100644 index c059984..0000000 --- a/packages/coral/src/components/my-component/my-component.spec.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { newSpecPage } from '@stencil/core/testing'; -import { MyComponent } from './my-component'; - -describe('my-component', () => { - it('renders', async () => { - const { root } = await newSpecPage({ - components: [MyComponent], - html: '', - }); - expect(root).toEqualHtml(` - - -
- Hello, World! I'm -
- - - `); - }); - - it('renders with values', async () => { - const { root } = await newSpecPage({ - components: [MyComponent], - html: ``, - }); - expect(root).toEqualHtml(` - - -
- Hello, World! I'm Stencil 'Don't call me a framework' JS -
- - - `); - }); -}); diff --git a/packages/coral/src/components/my-component/my-component.tsx b/packages/coral/src/components/my-component/my-component.tsx deleted file mode 100644 index f3c0f9c..0000000 --- a/packages/coral/src/components/my-component/my-component.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { Component, Prop, h } from '@stencil/core'; -import { format } from '../../utils/utils'; - -@Component({ - tag: 'my-component', - styleUrl: 'my-component.scss', - shadow: true, -}) -export class MyComponent { - /** - * The first name - */ - @Prop() first: string; - - /** - * The middle name - */ - @Prop() middle: string; - - /** - * The last name - */ - @Prop() last: string; - - private getText(): string { - return format(this.first, this.middle, this.last); - } - - render() { - return
Hello, World! I'm {this.getText()}
; - } -} diff --git a/packages/coral/src/components/my-component/readme.md b/packages/coral/src/components/my-component/readme.md deleted file mode 100644 index b927eea..0000000 --- a/packages/coral/src/components/my-component/readme.md +++ /dev/null @@ -1,15 +0,0 @@ -# my-component - - - -## 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` | - ---- - -_Built with [StencilJS](https://stenciljs.com/)_ diff --git a/packages/coral/src/index.html b/packages/coral/src/index.html index 1e6534b..1a39221 100644 --- a/packages/coral/src/index.html +++ b/packages/coral/src/index.html @@ -12,9 +12,6 @@ - + Click Me diff --git a/packages/coral/stencil.config.ts b/packages/coral/stencil.config.ts index 0c497f1..3729e55 100644 --- a/packages/coral/stencil.config.ts +++ b/packages/coral/stencil.config.ts @@ -1,20 +1,22 @@ import { Config } from '@stencil/core'; - import { sass } from '@stencil/sass'; - import { reactOutputTarget } from '@stencil/react-output-target'; - import { angularOutputTarget, ValueAccessorConfig, } from '@stencil/angular-output-target'; +import { getCoralPackagesDistPath } from './stencil/config-utils'; const angularValueAccessorBindings: ValueAccessorConfig[] = []; export const config: Config = { namespace: 'coral', taskQueue: 'async', - plugins: [sass()], + plugins: [ + sass({ + includePaths: [getCoralPackagesDistPath()], + }), + ], extras: { experimentalImportInjection: true, }, diff --git a/packages/coral/stencil/config-utils.ts b/packages/coral/stencil/config-utils.ts new file mode 100644 index 0000000..7bebc9e --- /dev/null +++ b/packages/coral/stencil/config-utils.ts @@ -0,0 +1,6 @@ +import { join, resolve } from 'path'; + +export function getCoralPackagesDistPath() { + const cwd = process.cwd(); + return resolve(join(cwd, 'dist', 'packages')); +}