@justeattakeaway/pie-icon-button 0.1.0 → 0.2.0

package/dist/types/index.d.ts

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

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

@@ -0,0 +1,11 @@
+/**
+ * Icon Button style variants
+ */
+export declare enum ICON_BUTTON_VARIANT {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    OUTLINE = "outline",
+    GHOST = "ghost",
+    GHOST_TERTIARY = "ghost-tertiary"
+}
+//# sourceMappingURL=defs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,oBAAY,mBAAmB;IAC3B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,cAAc,mBAAmB;CACpC"}

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

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+import { ICON_BUTTON_VARIANT } from './defs';
+export { ICON_BUTTON_VARIANT };
+declare const componentSelector = "pie-icon-button";
+export declare class PieIconButton extends LitElement {
+    variant: ICON_BUTTON_VARIANT;
+    disabled: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieIconButton;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAI7C,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,QAAA,MAAM,iBAAiB,oBAAoB,CAAC;AAE5C,qBAAa,aAAc,SAAQ,UAAU;IAGrC,OAAO,EAAG,mBAAmB,CAA+B;IAG5D,QAAQ,UAAS;IAErB,MAAM;IAiBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,aAAa,CAAC;KACtC;CACJ"}

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

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

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

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

package/dist/types/react.d.ts

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

package/package.json

@@ -1,18 +1,22 @@
 {
   "name": "@justeattakeaway/pie-icon-button",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "PIE Design System Icon 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",
-    "test": "echo \"Error: no test specified\" && exit 0"
+    "build": "yarn build:wrapper pie-icon-button && run -T vite build --config ../../../configs/pie-components-config/vite.config.js",
+    "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"
   },
   "author": "JustEatTakeaway - Design System Web Team",
   "license": "Apache-2.0",
+  "dependencies": {
+    "@justeattakeaway/pie-webc-core": "workspace:*"
+  },
   "volta": {
     "extends": "../../../package.json"
   }

package/src/defs.ts

@@ -0,0 +1,10 @@
+/**
+ * Icon Button style variants
+ */
+export enum ICON_BUTTON_VARIANT {
+    PRIMARY = 'primary',
+    SECONDARY = 'secondary',
+    OUTLINE = 'outline',
+    GHOST = 'ghost',
+    GHOST_TERTIARY = 'ghost-tertiary',
+}

package/src/iconButton.scss

@@ -0,0 +1,122 @@
+:host {
+    --btn-border-radius: var(--dt-radius-rounded-e);
+
+    // The base values are set to the size default, which is for the medium button size
+    --btn-height: 48px;
+    --btn-width: var(--btn-height);
+
+    // 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-icon-fill: var(--dt-color-content-interactive-primary);
+    --btn-focus: var(--dt-color-focus-outer);
+}
+
+@mixin button-interactive-states($bg-color) {
+    & .o-iconBtn:hover:not(:disabled) {
+        background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-hover-01)));
+    }
+
+    & .o-iconBtn: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-iconBtn {
+    min-block-size: var(--btn-height);
+    aspect-ratio: 1 / 1;
+
+    @supports not (aspect-ratio: 1 / 1) {
+        min-inline-size: var(--btn-width);
+    }
+
+    border: none;
+    border-radius: var(--btn-border-radius);
+    outline: none;
+    background-color: var(--btn-bg-color);
+    cursor: pointer;
+    user-select: none;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:focus-visible {
+        // TODO - Need to update to use the latest focus styling
+        outline: 2px solid var(--btn-focus);
+    }
+
+    svg {
+        height: 24.5px;
+        width: 24.5px;
+    }
+
+    svg, path {
+        fill: var(--btn-icon-fill);
+    }
+}
+
+// Variants
+:host([variant='primary']) {
+    @include button-interactive-states('--dt-color-interactive-brand');
+}
+
+:host([variant='secondary']) {
+    --btn-bg-color: var(--dt-color-interactive-secondary);
+    --btn-icon-fill: var(--dt-color-content-interactive-secondary);
+
+    @include button-interactive-states('--dt-color-interactive-secondary');
+}
+
+:host([variant='outline']) {
+    --btn-bg-color: var(--dt-color-container-default);
+    --btn-icon-fill: var(--dt-color-content-interactive-brand);
+
+    & .o-iconBtn {
+        border: 1px solid var(--dt-color-border-strong);
+    }
+
+    @include button-interactive-states('--dt-color-container-default');
+}
+
+:host([variant='ghost']) {
+    --btn-bg-color: var(--dt-color-container-default);
+    --btn-icon-fill: var(--dt-color-content-interactive-brand);
+
+    @include button-interactive-states('--dt-color-container-default');
+}
+
+:host([variant='ghost-tertiary']) {
+    --btn-bg-color: var(--dt-color-container-default);
+    --btn-icon-fill: var(--dt-color-content-interactive-tertiary);
+
+    @include button-interactive-states('--dt-color-container-default');
+}
+
+:host([disabled]) {
+    --btn-bg-color: var(--dt-color-disabled-01);
+    --btn-icon-fill: var(--dt-color-content-disabled);
+
+    & .o-iconBtn {
+        border: 1px solid var(--dt-color-disabled-01);
+        cursor: not-allowed;
+    }
+}
+
+:host([disabled][variant='outline']) {
+    & .o-iconBtn {
+        outline: none;
+    }
+}
+
+:host([disabled][variant='ghost']),
+:host([disabled][variant='ghost-tertiary']) {
+    --btn-bg-color: transparent;
+    --btn-icon-fill: var(--dt-color-content-default);
+
+    & .o-iconBtn {
+        outline: none;
+        border: none;
+    }
+}

package/src/index.ts

@@ -1,20 +1,46 @@
-import { LitElement, html } from 'lit'; // eslint-disable-line import/no-extraneous-dependencies
-import { customElement } from 'lit/decorators.js'; // eslint-disable-line import/no-extraneous-dependencies
+import { LitElement, html, unsafeCSS } from 'lit'; // eslint-disable-line import/no-extraneous-dependencies
+import { property } from 'lit/decorators.js'; // eslint-disable-line import/no-extraneous-dependencies
+import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
+import { ICON_BUTTON_VARIANT } from './defs';
+import styles from './iconButton.scss?inline';
+
+// Valid values available to consumers
+export { ICON_BUTTON_VARIANT };
+
+const componentSelector = 'pie-icon-button';
 
-@customElement('pie-icon-button')
 export class PieIconButton extends LitElement {
-    // eslint-disable-next-line class-methods-use-this
+    @property()
+    @validPropertyValues(componentSelector, Object.values(ICON_BUTTON_VARIANT), ICON_BUTTON_VARIANT.PRIMARY)
+        variant : ICON_BUTTON_VARIANT = ICON_BUTTON_VARIANT.PRIMARY;
+
+    @property({ type: Boolean })
+        disabled = false;
+
     render () {
+        const {
+            disabled,
+        } = this;
+
+        // The inline SVG is temporary until we have a proper icon integration
         return html`
-            <button>
-                I am a pie-icon-button
-                <slot></slot>
+            <button
+                class="o-iconBtn"
+                ?disabled=${disabled}>
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M11.8676 3.20496L8.0001 7.07248L4.13258 3.20496L3.20508 4.13246L7.0726 7.99998L3.20508 11.8675L4.13258 12.795L8.0001 8.92748L11.8676 12.795L12.7951 11.8675L8.92761 7.99998L12.7951 4.13246L11.8676 3.20496Z" fill="#242E30"/>
+                </svg>
             </button>`;
     }
+
+    // Renders a `CSSResult` generated from SCSS by Vite
+    static styles = unsafeCSS(styles);
 }
 
+customElements.define(componentSelector, PieIconButton);
+
 declare global {
     interface HTMLElementTagNameMap {
-        'pie-icon-button': PieIconButton;
+        [componentSelector]: PieIconButton;
     }
 }

package/tsconfig.json

@@ -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/vite.config.js

@@ -6,8 +6,10 @@ import dts from 'vite-plugin-dts';
 export default defineConfig({
     build: {
         lib: {
-            entry: 'src/index.ts',
-            fileName: 'index',
+            entry: {
+                index: 'src/index.ts',
+                react: 'src/react.ts',
+            },
             formats: ['es'],
         },
         rollupOptions: {

package/dist/types/src/index.d.ts

@@ -1,10 +0,0 @@
-import { LitElement } from 'lit';
-export declare class PieIconButton extends LitElement {
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'pie-icon-button': PieIconButton;
-    }
-}
-//# sourceMappingURL=index.d.ts.map

package/dist/types/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,EAAQ,MAAM,KAAK,CAAC;AAGvC,qBACa,aAAc,SAAQ,UAAU;IAEzC,MAAM;CAOT;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,iBAAiB,EAAE,aAAa,CAAC;KACpC;CACJ"}