@justeattakeaway/pie-button 0.24.1 → 0.26.0

package/package.json

@@ -1,13 +1,18 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.24.1",
+  "version": "0.26.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",
+  "types": "dist/index.d.ts",
+  "files": [
+    "src",
+    "dist",
+    "**/*.d.ts"
+  ],
   "scripts": {
-    "build": "yarn build:wrapper pie-button && run -T vite build ",
+    "build": "yarn build:wrapper pie-button && run -T vite build",
     "lint:scripts": "run -T eslint .",
     "lint:scripts:fix": "run -T eslint . --fix",
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",

package/src/button.scss

@@ -214,13 +214,18 @@
         @include spinner-base-colors('--dt-color-content-interactive-secondary');
     }
 
-    &[variant='ghost-inverse'] {
+    &[variant='ghost-inverse'],
+    &[variant='outline-inverse'] {
         --btn-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-interactive-primary);
 
         @include button-interactive-states('--dt-color-container-inverse', true);
     }
 
+    &[variant='outline-inverse'] {
+        border: 1px solid var(--dt-color-border-strong);
+    }
+
     &[variant='destructive'] {
         --btn-bg-color: var(--dt-color-support-error);
 
@@ -258,7 +263,7 @@
 
     &[size='xsmall'] {
         --btn-padding: 6px var(--dt-spacing-b);
-        --btn-font-size: calc(var(--dt-font-size-14) * 1px);
+        --btn-font-size: #{p.font-size(--dt-font-size-14)};
         --btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
         --btn-icon-size: 16px;
         --spinner-size: var(--spinner-size-s);
@@ -267,7 +272,7 @@
 
     &[size='small-expressive'] {
         --btn-padding: 6px var(--dt-spacing-d);
-        --btn-font-size: calc(var(--dt-font-size-20) * 1px);
+        --btn-font-size: #{p.font-size(--dt-font-size-20)};
         --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
         --btn-icon-size: 20px;
         --spinner-size: var(--spinner-size-s);
@@ -276,7 +281,7 @@
 
     &[size='small-productive'] {
         --btn-padding: 8px var(--dt-spacing-d);
-        --btn-font-size: calc(var(--dt-font-size-16) * 1px);
+        --btn-font-size: #{p.font-size(--dt-font-size-16)};
         --btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
         --btn-icon-size: 20px;
         --spinner-size: var(--spinner-size-s);
@@ -289,7 +294,7 @@
 
     &[size='large'] {
         --btn-padding: 14px var(--dt-spacing-e);
-        --btn-font-size: calc(var(--dt-font-size-20) * 1px);
+        --btn-font-size: #{p.font-size(--dt-font-size-20)};
         --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
         --spinner-size: var(--spinner-size-m);
         --spinner-border-width: var(--spinner-border-width-m);

package/src/defs.ts

@@ -1,7 +1,8 @@
 export const sizes = ['xsmall', 'small-productive', 'small-expressive', 'medium', 'large'] as const;
 export const types = ['submit', 'button', 'reset', 'menu'] as const;
 export const variants = [
-    'primary', 'secondary', 'outline', 'ghost', 'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',
+    'primary', 'secondary', 'outline', 'outline-inverse', 'ghost',
+    'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',
 ] as const;
 
 export type Variant = typeof variants[number];

package/src/index.ts

@@ -7,12 +7,7 @@ import {
 } from './defs';
 
 // Valid values available to consumers
-export {
-    type ButtonProps,
-    sizes,
-    types,
-    variants,
-};
+export * from './defs';
 
 const componentSelector = 'pie-button';
 

package/.eslintignore

@@ -1,5 +0,0 @@
-.turbo
-dist
-node_modules
-lit-browsers-report
-lit-visual-report

package/.turbo/turbo-build.log

@@ -1,14 +0,0 @@
-[2:03:50 PM] @custom-elements-manifest/analyzer: Created new manifest.
-react wrapper has been added!
-vite v4.3.9 building for production...
-transforming...
-✓ 22 modules transformed.
-rendering chunks...
-computing gzip size...
-dist/index.js  14.78 kB │ gzip:  2.72 kB
-dist/react.js  59.01 kB │ gzip: 15.91 kB
-
-[vite:dts] Start generate declaration files...
-✓ built in 46.23s
-[vite:dts] Declaration files built in 42885ms.
-

package/CHANGELOG.md

@@ -1,306 +0,0 @@
-# Changelog
-
-## 0.24.1
-
-### Patch Changes
-
-- [Changed] - use latest pie-design-tokens ([#716](https://github.com/justeattakeaway/pie/pull/716)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-## 0.24.0
-
-### Minor Changes
-
-- [Added] - destructive and destructive-ghost button variants ([#686](https://github.com/justeattakeaway/pie/pull/686)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-  [Fixed] - hover and active colours for ghost-inverse variant
-  [Added] - mixin for reassigning button spinner HSL custom properties
-
-- [Added] - `font-size` function added & tests ([#681](https://github.com/justeattakeaway/pie/pull/681)) by [@ashleynolan](https://github.com/ashleynolan)
-
-  [Added] - adding pie-css to pie-button
-
-### Patch Changes
-
-- [Changed] - use latest pie-design-tokens ([#694](https://github.com/justeattakeaway/pie/pull/694)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-## 0.23.0
-
-### Minor Changes
-
-- [Added] - axe builder to be shared as a base instance across broswer accessibility tests ([#669](https://github.com/justeattakeaway/pie/pull/669)) by [@raoufswe](https://github.com/raoufswe)
-
-## 0.22.0
-
-### Minor Changes
-
-- [Fixed] - Prevent tree-shaking of components in storybook ([#667](https://github.com/justeattakeaway/pie/pull/667)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-  [Removed] - Built webc icons from source control
-  [Added] - Type declaration files for components
-  [Added] - Types for pie-icons
-  [Added] - TS version of pie-icons-configs/config.js (Will be used after DSW-1025)
-  [Added] - Webc icon tests for width, height and base classes
-  [Changed] - Update pie-icons-webc build to generate a slightly different template for regular and large icons (using different types, etc.)
-  [Changed] - Update pie-icons-webc rollup config to remove commonjs build
-  [Changed] - Use `just-kebab-case` and `just-pascal-case` instead of `kebab-case` and `pascal-case` to simplify usage (and they're more recently maintained)
-
-## 0.21.0
-
-### Minor Changes
-
-- [Changed] - Add js/ts linting and fix errors ([#653](https://github.com/justeattakeaway/pie/pull/653)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.20.0
-
-### Minor Changes
-
-- [Added] - Slots for leading and trailing icons ([#634](https://github.com/justeattakeaway/pie/pull/634)) by [@ashleynolan](https://github.com/ashleynolan)
-
-## 0.19.0
-
-### Minor Changes
-
-- [Added] - pie-button loading state ([#603](https://github.com/justeattakeaway/pie/pull/603)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.18.0
-
-### Minor Changes
-
-- [Added] - inverse and ghost-inverse variants to pie-button ([#596](https://github.com/justeattakeaway/pie/pull/596)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Changed] - Set all component props to public ([#597](https://github.com/justeattakeaway/pie/pull/597)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.17.0
-
-### Minor Changes
-
-- [Changed] - Styles updated to fully match design updates ([#581](https://github.com/justeattakeaway/pie/pull/581)) by [@ashleynolan](https://github.com/ashleynolan)
-
-  - Focus styles have been updated to the new style
-  - Padding, font-size and line-heights adjusted inline with designs
-  - Outline button text colour updated from `color-content-interactive-tertiary` to `color-content-interactive-secondary`
-  - Primary buttons at `xsmall` and `small-productive` now have darker background
-  - `ghost` variant background colour changed to `transparent` (rather than #fff)
-
-## 0.16.1
-
-### Patch Changes
-
-- [Changed] - Updated defs to use different array type syntax ([#566](https://github.com/justeattakeaway/pie/pull/566)) by [@ashleynolan](https://github.com/ashleynolan)
-
-## 0.16.0
-
-### Minor Changes
-
-- [Updated] - enum types to string union types to string union types ([#508](https://github.com/justeattakeaway/pie/pull/508)) by [@FayeCarter](https://github.com/FayeCarter)
-
-## 0.15.0
-
-### Minor Changes
-
-- [Changed] - Refactor visual tests to have labels showing props ([#519](https://github.com/justeattakeaway/pie/pull/519)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Changed] - use prop variant helper for simpler and more extensive visual tests ([#499](https://github.com/justeattakeaway/pie/pull/499)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Changed] - moved pie-webc-core dependency to devDependencies in each component ([#499](https://github.com/justeattakeaway/pie/pull/499)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Added] - Additional notes on visual tests and environment variables ([#525](https://github.com/justeattakeaway/pie/pull/525)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Added] Read me percy config examples ([#529](https://github.com/justeattakeaway/pie/pull/529)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
-
-### Patch Changes
-
-- [Changed] - Use `componentSelector` to define the custom element ([#530](https://github.com/justeattakeaway/pie/pull/530)) by [@raoufswe](https://github.com/raoufswe)
-
-## 0.14.0
-
-### Minor Changes
-
-- [Changed] - customElement.define parameter to string ([#507](https://github.com/justeattakeaway/pie/pull/507)) by [@LTurns](https://github.com/LTurns)
-
-- [Fixed] – Encapsulated styles and removed reflect ([#507](https://github.com/justeattakeaway/pie/pull/507)) by [@LTurns](https://github.com/LTurns)
-
-## 0.13.0
-
-### Minor Changes
-
-- [Changed] - Build script to include generating react wrapper ([#426](https://github.com/justeattakeaway/pie/pull/426)) by [@LTurns](https://github.com/LTurns)
-
-- [Changed] - Deleted old prop validation decorator to replace with shared one from the core package ([#491](https://github.com/justeattakeaway/pie/pull/491)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Changed] - Changed styles to use CSS Custom Props and host attrs ([#482](https://github.com/justeattakeaway/pie/pull/482)) by [@ashleynolan](https://github.com/ashleynolan)
-
-### Patch Changes
-
-- [Added] - Missing `test:ci` scripts to package.json ([#492](https://github.com/justeattakeaway/pie/pull/492)) by [@siggerzz](https://github.com/siggerzz)
-
-- [Fixed] - Resolved TS Build errors ([#482](https://github.com/justeattakeaway/pie/pull/482)) by [@ashleynolan](https://github.com/ashleynolan)
-
-- [Updated] - components to use the shared configurations ([#487](https://github.com/justeattakeaway/pie/pull/487)) by [@fernandofranca](https://github.com/fernandofranca)
-
-- Updated dependencies [[`090354733`](https://github.com/justeattakeaway/pie/commit/090354733f24f0aa52ce287db7f8d13648414150)]:
-  - @justeattakeaway/pie-webc-core@0.2.0
-
-## 0.12.2
-
-### Patch Changes
-
-- Updated dependencies [[`1f79d9d1a`](https://github.com/justeattakeaway/pie/commit/1f79d9d1a6fe9160b244e82d956290136b87187b)]:
-  - @justeattakeaway/pie-webc-core@0.1.0
-
-## 0.12.1
-
-### Patch Changes
-
-- [Changed] - Added missing newline at the end of tsconfig.json ([#439](https://github.com/justeattakeaway/pie/pull/439)) by [@fernandofranca](https://github.com/fernandofranca)
-
-  [Changed] - Updated README.md
-  [Removed] - Removed npm `dev` script
-
-## 0.12.0
-
-### Minor Changes
-
-- [Changed] - extended readme file to mention props, events and enum exports ([#434](https://github.com/justeattakeaway/pie/pull/434)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Changed] - Prevent hover and active status on disabled btns and change outline to border for safari support ([#434](https://github.com/justeattakeaway/pie/pull/434)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Removed] - custom event handler and updated tests accordingly ([#434](https://github.com/justeattakeaway/pie/pull/434)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Added] - isFullWidth prop to button ([#434](https://github.com/justeattakeaway/pie/pull/434)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.11.0
-
-### Minor Changes
-
-- [Changed] - Improved readme files ([#418](https://github.com/justeattakeaway/pie/pull/418)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Changed] - Refactor SCSS to reduce duplication ([#416](https://github.com/justeattakeaway/pie/pull/416)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Changed] - Copy playwright projects from monorepo root ([#416](https://github.com/justeattakeaway/pie/pull/416)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Changed] - Split small size into expressive and productive ([#416](https://github.com/justeattakeaway/pie/pull/416)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-### Patch Changes
-
-- [Removed] the custom decorator and uses the native `customElement` decorator instead ([#417](https://github.com/justeattakeaway/pie/pull/417)) by [@fernandofranca](https://github.com/fernandofranca)
-
-## 0.10.2
-
-### Patch Changes
-
-- [Added] Declare global statement back in. ([#393](https://github.com/justeattakeaway/pie/pull/393)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
-
-## 0.10.1
-
-### Patch Changes
-
-- [Fixed] - Added module entry for component ([#378](https://github.com/justeattakeaway/pie/pull/378)) by [@ashleynolan](https://github.com/ashleynolan)
-
-## 0.10.0
-
-### Minor Changes
-
-- [Removed] Global declare statement ([#371](https://github.com/justeattakeaway/pie/pull/371)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
-
-## 0.9.0
-
-### Minor Changes
-
-- [Added] - HTMLElementTagNameMap entry for pie-button element ([#364](https://github.com/justeattakeaway/pie/pull/364)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Added] - Slot functionality to pie-button component and associated SB and example app integrations ([#364](https://github.com/justeattakeaway/pie/pull/364)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.8.0
-
-### Minor Changes
-
-- [Updated] - Register approach for button web component ([#346](https://github.com/justeattakeaway/pie/pull/346)) by [@fernandofranca](https://github.com/fernandofranca)
-
-  [Added] - "types" field in package.json for better DX and IDE TypesScript support
-  [Updated] - Provide Vite settings for generating TypeScript declaration files during build
-
-## 0.7.0
-
-### Minor Changes
-
-- [Updated] button to handle custom events ([#309](https://github.com/justeattakeaway/pie/pull/309)) by [@FayeCarter](https://github.com/FayeCarter)
-
-### Patch Changes
-
-- Add missing Volta settings to package.json ([#322](https://github.com/justeattakeaway/pie/pull/322)) by [@fernandofranca](https://github.com/fernandofranca)
-
-## 0.6.1
-
-### Patch Changes
-
-- [Added] `watch` script in `package.json` ([#233](https://github.com/justeattakeaway/pie/pull/233)) by [@LTurns](https://github.com/LTurns)
-
-  [Added] README content for `yarn watch` script
-
-## 0.6.0
-
-### Minor Changes
-
-- [Added] - state styling to button (focus/hover/active/disabled) ([#234](https://github.com/justeattakeaway/pie/pull/234)) by [@raoufswe](https://github.com/raoufswe)
-
-## 0.5.1
-
-### Patch Changes
-
-- [Changed] - Replaced hard-coded font values with scss variables ([#226](https://github.com/justeattakeaway/pie/pull/226)) by [@LTurns](https://github.com/LTurns)
-
-## 0.5.0
-
-### Minor Changes
-
-- [Changed] - Bring button styles into the component ([#178](https://github.com/justeattakeaway/pie/pull/178)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-- [Added] - Size property to pie-button component ([#178](https://github.com/justeattakeaway/pie/pull/178)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-- [Removed] - index.html file in favour of Storybook ([#178](https://github.com/justeattakeaway/pie/pull/178)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-## 0.4.0
-
-### Minor Changes
-
-- [Changed] - Set TSconfig target to ES6 to allow modern syntax such as property accessors ([#171](https://github.com/justeattakeaway/pie/pull/171)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Added] Create decorator for validating property values ([#171](https://github.com/justeattakeaway/pie/pull/171)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Added] - `variant` property to decide how we style the button ([#171](https://github.com/justeattakeaway/pie/pull/171)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Added] - Lit `classmap` directive to handle conditional css class logic and rendering ([#171](https://github.com/justeattakeaway/pie/pull/171)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Changed] - Refactored props to include validation based on enums and add console errors for invalid values ([#171](https://github.com/justeattakeaway/pie/pull/171)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Changed] - Renamed `actionType` property to `type` ([#171](https://github.com/justeattakeaway/pie/pull/171)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
-and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
-
-## v0.3.0
-
-_January 24, 2023_
-
-### Added
-
-- Button default styling (medium).
-- JET font family to html file.
-
-## v0.2.0
-
-_January 23, 2023_
-
-### Added
-
-- `actionType` property mapped to `type` attribute.
-
-## v0.1.0
-
-_January 19, 2023_
-
-### Added
-
-- Basic button using Lit
-- Initial TypeScript and Vite config

package/dist/types/index.d.ts

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

package/dist/types/packages/components/pie-button/src/defs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,gFAAiF,CAAC;AACpG,eAAO,MAAM,KAAK,gDAAiD,CAAC;AACpE,eAAO,MAAM,QAAQ,uHAEX,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;AAE9C,MAAM,WAAW,WAAW;IACxB;;OAEG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B;;OAEG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACtB"}

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

@@ -1,26 +0,0 @@
-import { LitElement } from 'lit';
-import { ButtonProps, sizes, types, variants } from './defs';
-export { type ButtonProps, sizes, types, variants, };
-declare const componentSelector = "pie-button";
-/**
- * @slot icon-leading - Leading icon
- * @slot icon-trailing - Trailing icon
- * @slot - Default slot
- */
-export declare class PieButton extends LitElement implements ButtonProps {
-    size: ButtonProps['size'];
-    type: ButtonProps['type'];
-    variant: ButtonProps['variant'];
-    disabled: boolean;
-    isLoading: boolean;
-    isFullWidth: boolean;
-    render(): import("lit-html").TemplateResult<1>;
-    focus(): void;
-    static styles: import("lit").CSSResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        [componentSelector]: PieButton;
-    }
-}
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,OAAO,EACH,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EACtC,MAAM,QAAQ,CAAC;AAGhB,OAAO,EACH,KAAK,WAAW,EAChB,KAAK,EACL,KAAK,EACL,QAAQ,GACX,CAAC;AAEF,QAAA,MAAM,iBAAiB,eAAe,CAAC;AAEvC;;;;GAIG;AACH,qBAAa,SAAU,SAAQ,UAAW,YAAW,WAAW;IAGrD,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAY;IAIrC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAY;IAIrC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAa;IAG5C,QAAQ,UAAS;IAGjB,SAAS,UAAS;IAGlB,WAAW,UAAS;IAE3B,MAAM;IAoBN,KAAK;IAKL,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

@@ -1,3 +0,0 @@
-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

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

package/dist/types/react.d.ts

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

package/playwright/index.html

@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<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;
-        }
-
-        #root > * {
-            display: block;
-            margin-inline: auto;
-        }
-
-        #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>
-    <script type="module" src="./index.ts"></script>
-</body>
-</html>

package/playwright/index.ts

@@ -1 +0,0 @@
-// Import common styles here

package/playwright-lit-visual.config.ts

@@ -1,4 +0,0 @@
-import { defineConfig } from '@sand4rt/experimental-ct-web';
-import { getPlaywrightVisualConfig } from '@justeattakeaway/pie-components-config';
-
-export default defineConfig(getPlaywrightVisualConfig());

package/playwright-lit.config.ts

@@ -1,4 +0,0 @@
-import { defineConfig } from '@sand4rt/experimental-ct-web';
-import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config';
-
-export default defineConfig(getPlaywrightConfig());

package/test/accessibility/pie-button.spec.ts

@@ -1,35 +0,0 @@
-import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/fixtures.ts';
-import { getAllPropCombinations, splitCombinationsByPropertyValue } from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos.ts';
-import { PropObject, WebComponentPropValues } from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
-import { PieButton } from '@/index';
-import { sizes, variants } from '@/defs';
-
-const props: PropObject = {
-    variant: variants,
-    size: sizes,
-    type: 'button', // Changing the type does not affect the appearance of the button
-    isFullWidth: [true, false],
-    disabled: [true, false],
-};
-
-const componentPropsMatrix : WebComponentPropValues[] = getAllPropCombinations(props);
-const componentPropsMatrixByVariant: Record<string, WebComponentPropValues[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
-const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
-
-componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ makeAxeBuilder, mount }) => {
-    await Promise.all(componentPropsMatrixByVariant[variant].map(async (combo: WebComponentPropValues) => {
-        await mount(
-            PieButton,
-            {
-                props: { ...combo },
-                slots: {
-                    default: 'Hello world',
-                },
-            },
-        );
-    }));
-
-    const results = await makeAxeBuilder().analyze();
-
-    expect(results.violations).toEqual([]);
-}));

package/test/component/pie-button.spec.ts

@@ -1,30 +0,0 @@
-import { test, expect } from '@sand4rt/experimental-ct-web';
-import { PieButton, ButtonProps } from '@/index';
-
-const props: ButtonProps = {
-    size: 'large',
-    variant: 'primary',
-};
-
-test('should correctly work with native click events', async ({ mount }) => {
-    const messages: string[] = [];
-    const expectedEventMessage = 'Native event dispatched';
-    const component = await mount(
-        PieButton,
-        {
-            props,
-            slots: {
-                default: 'Click me!',
-            },
-            on: {
-                click: () => {
-                    messages.push(expectedEventMessage);
-                },
-            },
-        },
-    );
-
-    await component.click();
-
-    expect(messages).toEqual([expectedEventMessage]);
-});