npm - @justeattakeaway/pie-button - Versions diffs - 0.12.1 → 0.13.0 - Mend

@justeattakeaway/pie-button 0.12.1 → 0.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/.turbo/turbo-build.log +7 -4
package/CHANGELOG.md +28 -0
package/README.md +10 -0
package/dist/index.js +56 -65
package/dist/react.js +1605 -0
package/dist/types/index.d.ts +1 -1
package/dist/types/{src → packages/components/pie-button/src}/defs.d.ts +0 -0
package/dist/types/{src → packages/components/pie-button/src}/defs.d.ts.map +0 -0
package/dist/types/{src → packages/components/pie-button/src}/index.d.ts +2 -1
package/dist/types/packages/components/pie-button/src/index.d.ts.map +1 -0
package/dist/types/packages/components/pie-button/src/react.d.ts +3 -0
package/dist/types/packages/components/pie-button/src/react.d.ts.map +1 -0
package/dist/types/react.d.ts +1 -0
package/package.json +13 -3
package/playwright/index.html +40 -38
package/playwright-lit-visual.config.ts +4 -51
package/playwright-lit.config.ts +4 -51
package/src/button.scss +93 -126
package/src/index.ts +12 -18
package/tsconfig.json +3 -25
package/dist/types/src/decorators.d.ts +0 -9
package/dist/types/src/decorators.d.ts.map +0 -1
package/dist/types/src/index.d.ts.map +0 -1
package/src/decorators.ts +0 -34
package/vite.config.js +0 -21

package/dist/types/index.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export * from './src/index'
1	+ export * from './packages/components/pie-button/src/index'

package/dist/types/{src → packages/components/pie-button/src}/defs.d.ts RENAMED Viewed

File without changes

package/dist/types/{src → packages/components/pie-button/src}/defs.d.ts.map RENAMED Viewed

File without changes

package/dist/types/{src → packages/components/pie-button/src}/index.d.ts RENAMED Viewed

@@ -1,6 +1,7 @@
 import { LitElement } from 'lit';
 import { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './defs';
 export { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT };
+declare const componentSelector = "pie-button";
 export declare class PieButton extends LitElement {
     size: BUTTON_SIZE;
     type: BUTTON_TYPE;
@@ -12,7 +13,7 @@ export declare class PieButton extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'pie-button': PieButton;
+        [componentSelector]: PieButton;
     }
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/types/packages/components/pie-button/src/index.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAKlD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAGlE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC;AAEpD,QAAA,MAAM,iBAAiB,eAAe,CAAC;AAEvC,qBAAa,SAAU,SAAQ,UAAU;IAGjC,IAAI,EAAG,WAAW,CAAsB;IAIxC,IAAI,EAAG,WAAW,CAAsB;IAIxC,OAAO,EAAG,cAAc,CAA0B;IAGlD,QAAQ,UAAS;IAGjB,WAAW,UAAS;IAExB,MAAM;IAgBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;KAClC;CACJ"}

package/dist/types/packages/components/pie-button/src/react.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { PieButton as PieButtonReact } from './index';
+export declare const PieButton: import("@lit-labs/react").ReactWebComponent<PieButtonReact, {}>;
+//# sourceMappingURL=react.d.ts.map

package/dist/types/packages/components/pie-button/src/react.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,IAAI,cAAc,EAAE,MAAM,SAAS,CAAC;AAGtD,eAAO,MAAM,SAAS,iEAMpB,CAAC"}

package/dist/types/react.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './packages/components/pie-button/src/react'

package/package.json CHANGED Viewed

@@ -1,15 +1,18 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "scripts": {
-    "build": "run -T vite build",
-    "watch": "run -T vite build --watch",
+    "build": "yarn build:wrapper pie-button && run -T vite build --config ../../../configs/pie-components-config/vite.config.js",
+    "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
+    "lint:style:fix": "yarn lint:style --fix",
+    "watch": "run -T vite build --config ../../../configs/pie-components-config/vite.config.js --watch",
     "test": "echo \"Error: no test specified\" && exit 0",
+    "test:ci": "yarn test",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",
     "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_BUTTON} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
@@ -17,6 +20,13 @@
   },
   "author": "JustEatTakeaway - Design System Web Team",
   "license": "Apache-2.0",
+  "dependencies": {
+    "@justeattakeaway/pie-webc-core": "workspace:*"
+  },
+  "devDependencies": {
+    "@justeat/pie-design-tokens": "5.1.0",
+    "@justeattakeaway/pie-components-config": "workspace:*"
+  },
   "volta": {
     "extends": "../../../package.json"
   }

package/playwright/index.html CHANGED Viewed

@@ -1,51 +1,53 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2" as="font" type="font/woff2" crossorigin>
-<style>
-    @font-face {
-        font-family: JETSansDigital;
-        src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2') format("woff2"),
-        url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff') format("woff");
-        font-weight: 400;
-        font-display: swap;
-    }
-    @font-face {
-        font-family: JETSansDigital;
-        src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2') format("woff2"),
-        url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff') format("woff");
-        font-weight: 700;
-        font-display: swap;
-    }
-    @font-face {
-        font-family: JETSansDigital;
-        src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2') format("woff2"),
-        url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff') format("woff");
-        font-weight: 800;
-        font-display: swap;
-    }
-    body {
-        font-feature-settings: "tnum"; /* Enable tabular numbers */
-    }
-    /* basic styles to center align components and give them some spacing */
-    #root {
-        padding: 1em;
-    }
+    <style>
+        @font-face {
+            font-family: JETSansDigital;
+            src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2') format("woff2"),
+            url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff') format("woff");
+            font-weight: 400;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: JETSansDigital;
+            src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2') format("woff2"),
+            url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff') format("woff");
+            font-weight: 700;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: JETSansDigital;
+            src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2') format("woff2"),
+            url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff') format("woff");
+            font-weight: 800;
+            font-display: swap;
+        }
+        body {
+            font-feature-settings: "tnum"; /* Enable tabular numbers */
+        }
+        /* basic styles to center align components and give them some spacing */
+        #root {
+            padding: 1em;
+        }
-    #root > * {
-        display: block;
-        margin-inline: auto;
-    }
+        #root > * {
+            display: block;
+            margin-inline: auto;
+        }
-    #root > * + * {
-        margin-top: 1em;
-    }
-</style>
+        #root > * + * {
+            margin-top: 1em;
+        }
+    </style>
     <title>Testing Page</title>
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@justeat/pie-design-tokens/dist/jet.css" />
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@justeat/pie-design-tokens/dist/jet-hsl-colors.css" />
 </head>
 <body>
     <div id="root"></div>

package/playwright-lit-visual.config.ts CHANGED Viewed

@@ -1,52 +1,5 @@
-import { defineConfig, devices } from '@sand4rt/experimental-ct-web';
-import { resolve } from 'path';
+import { defineConfig } from '@sand4rt/experimental-ct-web';
+import { getPlaywrightVisualConfig } from '@justeattakeaway/pie-components-config';
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-export default defineConfig({
-  /* Maximum time one test can run for. */
-  timeout: 10 * 1000,
-  /* Run tests in files in parallel */
-  fullyParallel: true,
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
-  /* Opt out of parallel tests on CI. */
-  workers: '50%',
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: [['html', { outputFolder: 'lit-visual-report' }]],
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
-  use: {
-    ctViteConfig: {
-      resolve: {
-        alias: {
-          '@': resolve('./src'),
-        },
-      },
-    },
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on',
-  },
-  /* Configure projects for major browsers */
-  projects: [
-    {
-      name: 'visual:desktop',
-      grepInvert: /@mobile/,
-      use: {
-        ...devices['Desktop Chrome'],
-      },
-      testMatch: ['**/test/visual/*.spec.ts']
-    },
-    {
-      name: 'visual:mobile',
-      grep: /@mobile/,
-      use: {
-        ...devices['Pixel 5'],
-      },
-      testMatch: ['**/test/visual/*.spec.ts']
-    },
-  ],
-});
+// @ts-ignore
+export default defineConfig(getPlaywrightVisualConfig());

package/playwright-lit.config.ts CHANGED Viewed

@@ -1,52 +1,5 @@
-import { defineConfig, devices } from '@sand4rt/experimental-ct-web';
-import { resolve } from 'path';
+import { defineConfig } from '@sand4rt/experimental-ct-web';
+import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config'
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-export default defineConfig({
-  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
-  snapshotDir: './__snapshots__',
-  /* Maximum time one test can run for. */
-  timeout: 10 * 1000,
-  /* Run tests in files in parallel */
-  fullyParallel: true,
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
-  /* Opt out of parallel tests on CI. */
-  workers: '50%',
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: [['html', { outputFolder: 'lit-browsers-report' }]],
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
-  use: {
-    ctViteConfig: {
-      resolve: {
-        alias: {
-          '@': resolve('./src'),
-        },
-      },
-    },
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on',
-  },
-  /* Configure projects for major browsers */
-  projects: [
-    {
-      name: 'component:chrome',
-      use: {
-        ...devices['Desktop Chrome'],
-      },
-      testMatch: ['**/test/component/*.spec.ts']
-    },
-    {
-      name: 'a11y:chrome',
-      use: {
-        ...devices['Desktop Chrome'],
-      },
-      testMatch: ['**/test/accessibility/*.spec.ts']
-    },
-  ],
-});
+// @ts-ignore
+export default defineConfig(getPlaywrightConfig());

package/src/button.scss CHANGED Viewed

@@ -1,160 +1,127 @@
-@use '@justeat/pie-design-tokens/dist/jet.scss' as dt;
-$button-height-xs: 32px;
-$button-height-s: 40px;
-$button-height-m: 48px;
-$button-height-l: 56px;
-$button-border-radius: dt.$radius-rounded-e;
-$button-font: dt.$font-interactive-m-family;
-$button-focus: dt.$color-focus;
-$button-bg-color-primary: dt.$color-interactive-brand;
-$button-text-color-primary: dt.$color-content-interactive-primary;
-$button-bg-color-secondary: dt.$color-interactive-secondary;
-$button-text-color-secondary: dt.$color-content-interactive-secondary;
-$button-bg-color-outline: dt.$color-container-default;
-$button-text-color-outline: dt.$color-content-interactive-tertiary;
-$button-outline-color-outline: dt.$color-border-strong;
-$button-bg-color-ghost: dt.$color-container-default;
-$button-text-color-ghost: dt.$color-content-link;
-$button-disabled-bg-color-ghost: dt.$color-container-default;
-$button-bg-color-disabled: dt.$color-disabled-01;
-$button-text-color-disabled: dt.$color-content-disabled;
-$button-outline-color-disabled: dt.$color-disabled-01;
-// Sets up the size of a button such as xsmall or large
-@mixin button-sizing($min-block-size, $padding-block, $padding-inline, $font-size, $font-weight, $line-height) {
-    min-block-size: $min-block-size;
-    padding: $padding-block $padding-inline;
-    font-size: $font-size * 1px;
-    font-weight: $font-weight;
-    line-height: $line-height * 1px;
+:host {
+    --btn-border-radius: var(--dt-radius-rounded-e);
+    --btn-font-family: var(--dt-font-interactive-m-family);
+    --btn-font-weight: var(--dt-font-interactive-m-weight);
+    // The base values are set to the size default, which is for the medium button size
+    --btn-padding: 10px var(--dt-spacing-e);
+    --btn-min-height: 48px;
+    --btn-font-size: calc(var(--dt-font-size-20) * 1px);
+    --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
+    // The following values set to default background and color
+    // currently this sets the primary button styles
+    --btn-bg-color: var(--dt-color-interactive-brand);
+    --btn-text-color: var(--dt-color-content-interactive-primary);
+    --btn-focus: var(--dt-color-focus-outer);
 }
-// 'Themes' a button for it's particular variant, such as primary, secondary, outline, ghost
-@mixin button-variant($bg-color, $text-color, $outline-color: null) {
-    background-color: $bg-color;
-    color: $text-color;
-    &:hover:not(:disabled) {
-        background-color: darken($bg-color, dt.$color-hover-01);
-    }
-    &:active:not(:disabled) {
-        background-color: darken($bg-color, dt.$color-active-01);
+@mixin button-interactive-states($bg-color) {
+    & .o-btn:hover:not(:disabled) {
+        background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-hover-01)));
     }
-    @if $outline-color != null {
-        border: 1px solid $outline-color;
+    & .o-btn:active:not(:disabled) {
+        background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-active-01)));
     }
 }
 // Base button styles
 .o-btn {
-    border-radius: $button-border-radius;
+    min-block-size: var(--btn-min-block-size);
+    padding: var(--btn-padding);
     border: none;
-    font-family: $button-font;
+    border-radius: var(--btn-border-radius);
+    outline: none;
+    background-color: var(--btn-bg-color);
+    font-family: var(--btn-font-family);
+    font-size: var(--btn-font-size);
+    font-weight: var(--btn-font-weight);
+    color: var(--btn-text-color);
+    line-height: var(--btn-line-height);
     cursor: pointer;
     user-select: none;
-    outline: none;
     &:focus-visible {
-        outline: 2px solid $button-focus;
+        // TODO - Need to update to use the latest focus styling
+        outline: 2px solid var(--btn-focus);
     }
 }
-// Sizes
-$button-sizes: (
-    'xsmall': (
-        'min-block-size': $button-height-xs,
-        'padding-block': 6px,
-        'padding-inline': dt.$spacing-b,
-        'font-size': dt.$font-interactive-xs-size,
-        'font-weight': dt.$font-interactive-xs-weight,
-        'line-height': dt.$font-interactive-xs-line-height
-    ),
-    'small-productive': (
-        'min-block-size': $button-height-s,
-        'padding-block': dt.$spacing-b,
-        'padding-inline': dt.$spacing-d,
-        'font-size': dt.$font-interactive-s-size,
-        'font-weight': dt.$font-interactive-s-weight,
-        'line-height': dt.$font-interactive-s-line-height
-    ),
-    'small-expressive': (
-        'min-block-size': $button-height-s,
-        'padding-block': 6px,
-        'padding-inline': dt.$spacing-d,
-        'font-size': dt.$font-interactive-l-size,
-        'font-weight': dt.$font-interactive-l-weight,
-        'line-height': dt.$font-interactive-l-line-height
-    ),
-    'medium': (
-        'min-block-size': $button-height-m,
-        'padding-block': 10px,
-        'padding-inline': dt.$spacing-e,
-        'font-size': dt.$font-interactive-l-size,
-        'font-weight': dt.$font-interactive-l-weight,
-        'line-height': dt.$font-interactive-l-line-height
-    ),
-    'large': (
-        'min-block-size': $button-height-l,
-        'padding-block': 14px,
-        'padding-inline': dt.$spacing-e,
-        'font-size': dt.$font-interactive-l-size,
-        'font-weight': dt.$font-interactive-l-weight,
-        'line-height': dt.$font-interactive-l-line-height
-    )
-);
-@each $size, $values in $button-sizes {
-    .o-btn--#{$size} {
-        @include button-sizing(
-            map-get($values, 'min-block-size'),
-            map-get($values, 'padding-block'),
-            map-get($values, 'padding-inline'),
-            map-get($values, 'font-size'),
-            map-get($values, 'font-weight'),
-            map-get($values, 'line-height')
-        );
-    }
+// Variants
+:host([variant='primary']) {
+    @include button-interactive-states('--dt-color-interactive-brand');
 }
-// Variants
-.o-btn--primary {
-    @include button-variant($button-bg-color-primary, $button-text-color-primary);
+:host([variant='secondary']) {
+    --btn-bg-color: var(--dt-color-interactive-secondary);
+    --btn-text-color: var(--dt-color-content-interactive-secondary);
+    @include button-interactive-states('--dt-color-interactive-secondary');
 }
-.o-btn--secondary {
-    @include button-variant($button-bg-color-secondary, $button-text-color-secondary);
+:host([variant='outline']) {
+    --btn-bg-color: var(--dt-color-container-default);
+    --btn-text-color: var(--dt-color-content-interactive-tertiary);
+    & .o-btn {
+        border: 1px solid var(--dt-color-border-strong);
+    }
+    @include button-interactive-states('--dt-color-container-default');
 }
-.o-btn--outline {
-    @include button-variant($button-bg-color-outline, $button-text-color-outline, $button-outline-color-outline);
+:host([variant='ghost']) {
+    --btn-bg-color: var(--dt-color-container-default);
+    --btn-text-color: var(--dt-color-content-link);
+    @include button-interactive-states('--dt-color-container-default');
 }
-.o-btn--ghost {
-    @include button-variant($button-bg-color-ghost, $button-text-color-ghost);
+:host([disabled]) {
+    --btn-bg-color: var(--dt-color-disabled-01);
+    --btn-text-color: var(--dt-color-content-disabled);
+    & .o-btn {
+        border: 1px solid var(--dt-color-disabled-01);
+        cursor: not-allowed;
+    }
 }
-.o-btn.o-btn--is-disabled {
-    @include button-variant($button-bg-color-disabled, $button-text-color-disabled, $button-outline-color-disabled);
+// Additional modifiers
+:host([isFullWidth]) .o-btn {
+    inline-size: 100%;
+}
-    cursor: not-allowed;
+:host([disabled][variant='ghost']) {
+    --btn-bg-color: var(--dt-color-container-default);
-    &.o-btn--ghost {
-        background-color: $button-disabled-bg-color-ghost;
+    & .o-btn {
         outline: none;
     }
 }
-// Additional modifiers
-.o-btn--fullWidth {
-    inline-size: 100%;
+:host([size='xsmall']) {
+    --btn-padding: 6px var(--dt-spacing-b);
+    --btn-min-block-size: 32px;
+    --btn-font-size: calc(var(--dt-font-size-14) * 1px);
+    --btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
+}
+:host([size='small']) {
+    --btn-padding: 8px var(--dt-spacing-d);
+    --btn-min-block-size: 40px;
+    --btn-font-size: calc(var(--dt-font-size-19) * 1px);
+    --btn-line-height: calc(var(--dt-font-size-19-line-height) * 1px);
+}
+:host([size='medium']) {
+    /* Same as default styles */
+}
+:host([size='large']) {
+    --btn-padding: 14px var(--dt-spacing-e);
+    --btn-min-block-size: 56px;
+    --btn-font-size: calc(var(--dt-font-size-20) * 1px);
+    --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
 }

package/src/index.ts CHANGED Viewed

@@ -1,26 +1,26 @@
 import { LitElement, html, unsafeCSS } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
+import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
 import styles from './button.scss?inline';
-import { validPropertyValues } from './decorators';
 import { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './defs';
 // Valid values available to consumers
 export { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT };
-@customElement('pie-button')
+const componentSelector = 'pie-button';
 export class PieButton extends LitElement {
     @property()
-    @validPropertyValues(Object.values(BUTTON_SIZE), BUTTON_SIZE.MEDIUM)
+    @validPropertyValues(componentSelector, Object.values(BUTTON_SIZE), BUTTON_SIZE.MEDIUM)
         size : BUTTON_SIZE = BUTTON_SIZE.MEDIUM;
     @property()
-    @validPropertyValues(Object.values(BUTTON_TYPE), BUTTON_TYPE.SUBMIT)
+    @validPropertyValues(componentSelector, Object.values(BUTTON_TYPE), BUTTON_TYPE.SUBMIT)
         type : BUTTON_TYPE = BUTTON_TYPE.SUBMIT;
     @property()
-    @validPropertyValues(Object.values(BUTTON_VARIANT), BUTTON_VARIANT.PRIMARY)
+    @validPropertyValues(componentSelector, Object.values(BUTTON_VARIANT), BUTTON_VARIANT.PRIMARY)
         variant : BUTTON_VARIANT = BUTTON_VARIANT.PRIMARY;
     @property({ type: Boolean, reflect: true })
@@ -31,20 +31,12 @@ export class PieButton extends LitElement {
     render () {
         const {
-            size, type, variant, disabled, isFullWidth,
+            type, disabled, isFullWidth,
         } = this;
-        const classes = {
-            'o-btn': true,
-            [`o-btn--${size}`]: size,
-            [`o-btn--${variant}`]: variant,
-            'o-btn--is-disabled': disabled,
-            'o-btn--fullWidth': isFullWidth,
-        };
         return html`
             <button
-                class=${classMap(classes)}
+                class="o-btn"
                 type=${type}
                 ?disabled=${disabled}
                 ?isFullWidth=${isFullWidth}>
@@ -56,8 +48,10 @@ export class PieButton extends LitElement {
     static styles = unsafeCSS(styles);
 }
+customElements.define(componentSelector, PieButton);
 declare global {
     interface HTMLElementTagNameMap {
-        'pie-button': PieButton;
+        [componentSelector]: PieButton;
     }
 }

package/tsconfig.json CHANGED Viewed

@@ -1,30 +1,8 @@
 {
+  "extends": "../../../configs/pie-components-config/tsconfig.json",
   "compilerOptions": {
-      "target": "ES6",
-      "module": "ES2022",
-      "lib": ["es2020", "DOM", "DOM.Iterable"],
-      "declaration": true,
-      "declarationMap": true,
-      "sourceMap": true,
-      "inlineSources": true,
-      "outDir": "./compiled",
-      "baseUrl": ".",
-      "paths": {
-        "@/*": ["./src/*"]
-      },
-      "rootDir": ".",
-      "strict": true,
-      "noUnusedLocals": true,
-      "noUnusedParameters": true,
-      "noImplicitReturns": true,
-      "noFallthroughCasesInSwitch": true,
-      "noImplicitAny": true,
-      "noImplicitThis": true,
-      "moduleResolution": "node",
-      "allowSyntheticDefaultImports": true,
-      "experimentalDecorators": true,
-      "forceConsistentCasingInFileNames": true
+    "baseUrl": ".",
+    "rootDir": ".",
   },
   "include": ["src/**/*.ts","./declaration.d.ts", "test/**/*.ts"],
-  "exclude": []
 }

package/dist/types/src/decorators.d.ts DELETED Viewed

@@ -1,9 +0,0 @@
-/**
- * A decorator for specifying a list of valid values for a property.
- * If this property's setter is called with an invalid value, an error is logged and the default value will be assigned instead.
- * @param validValues - The array of valid values
- * @param defaultValue - The value to fall back on
- * @returns
- */
-export declare const validPropertyValues: (validValues: any[], defaultValue: any) => (target: any, propertyKey: string) => void;
-//# sourceMappingURL=decorators.d.ts.map

package/dist/types/src/decorators.d.ts.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"decorators.d.ts","sourceRoot":"","sources":["../../../src/decorators.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,gBAAiB,GAAG,EAAE,gBAAgB,GAAG,cAC5C,GAAG,eAAe,MAAM,KAAI,IAyBxD,CAAC"}