@justeattakeaway/pie-thumbnail 0.1.0 → 0.3.0

package/custom-elements.json

@@ -11,8 +11,74 @@
     {
       "kind": "javascript-module",
       "path": "src/defs.js",
-      "declarations": [],
-      "exports": []
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "variants",
+          "type": {
+            "text": "[\n    'default', 'outline',\n]"
+          },
+          "default": "[\n    'default', 'outline',\n]"
+        },
+        {
+          "kind": "variable",
+          "name": "backgroundColors",
+          "type": {
+            "text": "[\n    'default', 'subtle', 'strong', 'dark', 'inverse', 'inverse-alternative'\n]"
+          },
+          "default": "[\n    'default', 'subtle', 'strong', 'dark', 'inverse', 'inverse-alternative'\n]"
+        },
+        {
+          "kind": "variable",
+          "name": "backgroundColorClassNames",
+          "type": {
+            "text": "Record<typeof backgroundColors[number], string>"
+          },
+          "default": "{\n    default: 'c-thumbnail--backgroundDefault',\n    subtle: 'c-thumbnail--backgroundSubtle',\n    strong: 'c-thumbnail--backgroundStrong',\n    dark: 'c-thumbnail--backgroundDark',\n    inverse: 'c-thumbnail--backgroundInverse',\n    'inverse-alternative': 'c-thumbnail--backgroundInverseAlternative',\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{\n    variant: 'default',\n    src: '',\n    alt: '',\n    disabled: false,\n    hasPadding: false,\n    backgroundColor: 'default',\n    placeholder: {\n        src: '',\n        alt: '',\n    },\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "variants",
+          "declaration": {
+            "name": "variants",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "backgroundColors",
+          "declaration": {
+            "name": "backgroundColors",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "backgroundColorClassNames",
+          "declaration": {
+            "name": "backgroundColorClassNames",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
@@ -22,7 +88,106 @@
           "kind": "class",
           "description": "",
           "name": "PieThumbnail",
-          "members": [],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "privacy": "public",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "src",
+              "privacy": "public",
+              "attribute": "src"
+            },
+            {
+              "kind": "field",
+              "name": "alt",
+              "privacy": "public",
+              "attribute": "alt"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "hasPadding",
+              "privacy": "public",
+              "attribute": "hasPadding"
+            },
+            {
+              "kind": "field",
+              "name": "backgroundColor",
+              "privacy": "public",
+              "attribute": "backgroundColor"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "ThumbnailProps['placeholder']"
+              },
+              "privacy": "public",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "img",
+              "type": {
+                "text": "HTMLImageElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_handleImageError",
+              "privacy": "private",
+              "description": "Handles image load errors by replacing the src and alt props\nwith the placeholder props."
+            },
+            {
+              "kind": "method",
+              "name": "_checkImageError",
+              "privacy": "private",
+              "description": "Detects image load status and applies the placeholder on failure.\nThis is needed as the `onerror` event is not triggered in SSR."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "fieldName": "variant"
+            },
+            {
+              "name": "src",
+              "fieldName": "src"
+            },
+            {
+              "name": "alt",
+              "fieldName": "alt"
+            },
+            {
+              "name": "disabled",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "hasPadding",
+              "fieldName": "hasPadding"
+            },
+            {
+              "name": "backgroundColor",
+              "fieldName": "backgroundColor"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "ThumbnailProps['placeholder']"
+              },
+              "fieldName": "placeholder"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"

package/dist/index.d.ts

@@ -1,16 +1,58 @@
+import type { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { TemplateResult } from 'lit-html';
 
+export declare const backgroundColorClassNames: Record<typeof backgroundColors[number], string>;
+
+export declare const backgroundColors: readonly ["default", "subtle", "strong", "dark", "inverse", "inverse-alternative"];
+
+export declare type DefaultProps = ComponentDefaultProps<ThumbnailProps, 'variant' | 'src' | 'alt' | 'disabled' | 'hasPadding' | 'backgroundColor' | 'placeholder'>;
+
+export declare const defaultProps: DefaultProps;
+
 /**
  * @tagname pie-thumbnail
  */
 export declare class PieThumbnail extends LitElement implements ThumbnailProps {
+    variant: "default" | "outline";
+    src: string;
+    alt: string;
+    disabled: boolean;
+    hasPadding: boolean;
+    backgroundColor: "default" | "subtle" | "strong" | "dark" | "inverse" | "inverse-alternative";
+    placeholder: ThumbnailProps['placeholder'];
+    private img;
+    /**
+     * Handles image load errors by replacing the src and alt props
+     * with the placeholder props.
+     */
+    private _handleImageError;
+    /**
+     * Detects image load status and applies the placeholder on failure.
+     * This is needed as the `onerror` event is not triggered in SSR.
+     */
+    private _checkImageError;
+    protected firstUpdated(): void;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
+declare type PlaceholderProps = {
+    src?: string;
+    alt?: string;
+};
+
 export declare interface ThumbnailProps {
+    variant?: typeof variants[number];
+    src?: string;
+    alt?: string;
+    disabled?: boolean;
+    hasPadding?: boolean;
+    backgroundColor?: typeof backgroundColors[number];
+    placeholder?: PlaceholderProps;
 }
 
+export declare const variants: readonly ["default", "outline"];
+
 export { }

package/dist/index.js

@@ -1,13 +1,128 @@
-import { LitElement as o, html as s, unsafeCSS as r } from "lit";
-import { defineCustomElement as n } from "@justeattakeaway/pie-webc-core";
-const i = "*,*:after,*:before{box-sizing:inherit}", l = "pie-thumbnail", e = class e extends o {
+import { LitElement as p, html as v, unsafeCSS as f } from "lit";
+import { validPropertyValues as h, defineCustomElement as k } from "@justeattakeaway/pie-webc-core";
+import { classMap as y } from "lit/directives/class-map.js";
+import { property as n, query as C } from "lit/decorators.js";
+const S = [
+  "default",
+  "outline"
+], E = [
+  "default",
+  "subtle",
+  "strong",
+  "dark",
+  "inverse",
+  "inverse-alternative"
+], I = {
+  default: "c-thumbnail--backgroundDefault",
+  subtle: "c-thumbnail--backgroundSubtle",
+  strong: "c-thumbnail--backgroundStrong",
+  dark: "c-thumbnail--backgroundDark",
+  inverse: "c-thumbnail--backgroundInverse",
+  "inverse-alternative": "c-thumbnail--backgroundInverseAlternative"
+}, e = {
+  variant: "default",
+  src: "",
+  alt: "",
+  disabled: !1,
+  hasPadding: !1,
+  backgroundColor: "default",
+  placeholder: {
+    src: "",
+    alt: ""
+  }
+}, _ = ".c-thumbnail{--thumbnail-size: var(--dt-spacing-g);--thumbnail-border-radius: var(--dt-radius-rounded-b);--thumbnail-bg-color: var(--dt-color-container-default);--thumbnail-border-color: transparent;--thumbnail-padding: calc(var(--dt-spacing-a) / 2);box-sizing:border-box;overflow:hidden;width:var(--thumbnail-size);height:var(--thumbnail-size);border-radius:var(--thumbnail-border-radius);border:1px solid var(--thumbnail-border-color);background-color:var(--thumbnail-bg-color)}.c-thumbnail.c-thumbnail--outline{--thumbnail-border-color: var(--dt-color-border-default)}.c-thumbnail.c-thumbnail--disabled{opacity:.5}.c-thumbnail.c-thumbnail--backgroundSubtle{--thumbnail-bg-color: var(--dt-color-container-subtle)}.c-thumbnail.c-thumbnail--backgroundStrong{--thumbnail-bg-color: var(--dt-color-container-strong)}.c-thumbnail.c-thumbnail--backgroundDark{--thumbnail-bg-color: var(--dt-color-container-dark)}.c-thumbnail.c-thumbnail--backgroundInverse{--thumbnail-bg-color: var(--dt-color-container-inverse)}.c-thumbnail.c-thumbnail--backgroundInverseAlternative{--thumbnail-bg-color: var(--dt-color-container-inverse-alternative)}.c-thumbnail.c-thumbnail--padding{padding:var(--thumbnail-padding)}.c-thumbnail .c-thumbnail-img{width:100%;height:100%;object-fit:contain;display:block}";
+var P = Object.defineProperty, i = (b, r, a, d) => {
+  for (var o = void 0, l = b.length - 1, c; l >= 0; l--)
+    (c = b[l]) && (o = c(r, a, o) || o);
+  return o && P(r, a, o), o;
+};
+const s = "pie-thumbnail", u = class u extends p {
+  constructor() {
+    super(...arguments), this.variant = e.variant, this.src = e.src, this.alt = e.alt, this.disabled = e.disabled, this.hasPadding = e.hasPadding, this.backgroundColor = e.backgroundColor, this.placeholder = e.placeholder;
+  }
+  /**
+   * Handles image load errors by replacing the src and alt props
+   * with the placeholder props.
+   */
+  _handleImageError() {
+    var r, a;
+    (r = this.placeholder) != null && r.src && this.setAttribute("src", this.placeholder.src), (a = this.placeholder) != null && a.alt && this.setAttribute("alt", this.placeholder.alt);
+  }
+  /**
+   * Detects image load status and applies the placeholder on failure.
+   * This is needed as the `onerror` event is not triggered in SSR.
+   */
+  _checkImageError() {
+    if (this.img) {
+      const { complete: r, naturalHeight: a } = this.img;
+      r && a === 0 && this._handleImageError.call(this);
+    }
+  }
+  firstUpdated() {
+    this._checkImageError();
+  }
   render() {
-    return s`<h1 data-test-id="pie-thumbnail">Hello world!</h1>`;
+    const {
+      variant: r,
+      src: a,
+      alt: d,
+      disabled: o,
+      hasPadding: l,
+      backgroundColor: c,
+      _handleImageError: m
+    } = this, g = {
+      "c-thumbnail": !0,
+      [`c-thumbnail--${r}`]: !0,
+      [I[c]]: !0,
+      "c-thumbnail--disabled": o,
+      "c-thumbnail--padding": l
+    };
+    return v`
+            <div data-test-id="pie-thumbnail" class="${y(g)}">
+                <img
+                    data-test-id="pie-thumbnail-img"
+                    src="${a}"
+                    class="c-thumbnail-img"
+                    alt="${d}"
+                    @error="${m}"
+                />
+            </div>
+        `;
   }
 };
-e.styles = r(i);
-let t = e;
-n(l, t);
+u.styles = f(_);
+let t = u;
+i([
+  n({ type: String }),
+  h(s, S, e.variant)
+], t.prototype, "variant");
+i([
+  n({ type: String })
+], t.prototype, "src");
+i([
+  n({ type: String })
+], t.prototype, "alt");
+i([
+  n({ type: Boolean })
+], t.prototype, "disabled");
+i([
+  n({ type: Boolean })
+], t.prototype, "hasPadding");
+i([
+  n({ type: String }),
+  h(s, E, e.backgroundColor)
+], t.prototype, "backgroundColor");
+i([
+  n({ type: Object })
+], t.prototype, "placeholder");
+i([
+  C("img")
+], t.prototype, "img");
+k(s, t);
 export {
-  t as PieThumbnail
+  t as PieThumbnail,
+  I as backgroundColorClassNames,
+  E as backgroundColors,
+  e as defaultProps,
+  S as variants
 };

package/dist/react.d.ts

@@ -1,21 +1,63 @@
+import type { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import * as React_2 from 'react';
 import type { TemplateResult } from 'lit-html';
 
+export declare const backgroundColorClassNames: Record<typeof backgroundColors[number], string>;
+
+export declare const backgroundColors: readonly ["default", "subtle", "strong", "dark", "inverse", "inverse-alternative"];
+
+export declare type DefaultProps = ComponentDefaultProps<ThumbnailProps, 'variant' | 'src' | 'alt' | 'disabled' | 'hasPadding' | 'backgroundColor' | 'placeholder'>;
+
+export declare const defaultProps: DefaultProps;
+
 export declare const PieThumbnail: React_2.ForwardRefExoticComponent<ThumbnailProps & React_2.RefAttributes<PieThumbnail_2> & ReactBaseType>;
 
 /**
  * @tagname pie-thumbnail
  */
 declare class PieThumbnail_2 extends LitElement implements ThumbnailProps {
+    variant: "default" | "outline";
+    src: string;
+    alt: string;
+    disabled: boolean;
+    hasPadding: boolean;
+    backgroundColor: "default" | "subtle" | "strong" | "dark" | "inverse" | "inverse-alternative";
+    placeholder: ThumbnailProps['placeholder'];
+    private img;
+    /**
+     * Handles image load errors by replacing the src and alt props
+     * with the placeholder props.
+     */
+    private _handleImageError;
+    /**
+     * Detects image load status and applies the placeholder on failure.
+     * This is needed as the `onerror` event is not triggered in SSR.
+     */
+    private _checkImageError;
+    protected firstUpdated(): void;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
+declare type PlaceholderProps = {
+    src?: string;
+    alt?: string;
+};
+
 declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
 
 export declare interface ThumbnailProps {
+    variant?: typeof variants[number];
+    src?: string;
+    alt?: string;
+    disabled?: boolean;
+    hasPadding?: boolean;
+    backgroundColor?: typeof backgroundColors[number];
+    placeholder?: PlaceholderProps;
 }
 
+export declare const variants: readonly ["default", "outline"];
+
 export { }

package/dist/react.js

@@ -1,13 +1,18 @@
-import * as e from "react";
-import { createComponent as a } from "@lit/react";
-import { PieThumbnail as i } from "./index.js";
-const m = a({
+import * as a from "react";
+import { createComponent as e } from "@lit/react";
+import { PieThumbnail as o } from "./index.js";
+import { backgroundColorClassNames as l, backgroundColors as p, defaultProps as u, variants as b } from "./index.js";
+const m = e({
   displayName: "PieThumbnail",
-  elementClass: i,
-  react: e,
+  elementClass: o,
+  react: a,
   tagName: "pie-thumbnail",
   events: {}
-}), o = m;
+}), r = m;
 export {
-  o as PieThumbnail
+  r as PieThumbnail,
+  l as backgroundColorClassNames,
+  p as backgroundColors,
+  u as defaultProps,
+  b as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-thumbnail",
   "description": "PIE Design System Thumbnail built using Web Components",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -36,7 +36,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.18.0",
-    "@justeattakeaway/pie-css": "0.13.1",
+    "@justeattakeaway/pie-css": "0.14.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {

package/src/defs.ts

@@ -1,3 +1,48 @@
-// TODO - please remove the eslint disable comment below when you add props to this interface
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface ThumbnailProps {}
+import type { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+
+export const variants = [
+    'default', 'outline',
+] as const;
+
+export const backgroundColors = [
+    'default', 'subtle', 'strong', 'dark', 'inverse', 'inverse-alternative'
+] as const;
+
+export const backgroundColorClassNames: Record<typeof backgroundColors[number], string> = {
+    default: 'c-thumbnail--backgroundDefault',
+    subtle: 'c-thumbnail--backgroundSubtle',
+    strong: 'c-thumbnail--backgroundStrong',
+    dark: 'c-thumbnail--backgroundDark',
+    inverse: 'c-thumbnail--backgroundInverse',
+    'inverse-alternative': 'c-thumbnail--backgroundInverseAlternative',
+};
+
+type PlaceholderProps = {
+    src?: string;
+    alt?: string;
+}
+
+export interface ThumbnailProps {
+    variant?: typeof variants[number];
+    src?: string;
+    alt?: string;
+    disabled?: boolean;
+    hasPadding?: boolean;
+    backgroundColor?: typeof backgroundColors[number];
+    placeholder?: PlaceholderProps;
+}
+
+export type DefaultProps = ComponentDefaultProps<ThumbnailProps, 'variant' | 'src' | 'alt' | 'disabled' | 'hasPadding' | 'backgroundColor' | 'placeholder'>;
+
+export const defaultProps: DefaultProps = {
+    variant: 'default',
+    src: '',
+    alt: '',
+    disabled: false,
+    hasPadding: false,
+    backgroundColor: 'default',
+    placeholder: {
+        src: '',
+        alt: '',
+    },
+};

package/src/index.ts

@@ -1,8 +1,19 @@
-import { LitElement, html, unsafeCSS } from 'lit';
-
-import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import {
+    LitElement,
+    html,
+    unsafeCSS,
+} from 'lit';
+import { defineCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
+import { classMap } from 'lit/directives/class-map.js';
+import { property, query } from 'lit/decorators.js';
+import {
+    type ThumbnailProps,
+    defaultProps,
+    variants,
+    backgroundColors,
+    backgroundColorClassNames,
+} from './defs';
 import styles from './thumbnail.scss?inline';
-import { type ThumbnailProps } from './defs';
 
 // Valid values available to consumers
 export * from './defs';
@@ -13,8 +24,87 @@ const componentSelector = 'pie-thumbnail';
  * @tagname pie-thumbnail
  */
 export class PieThumbnail extends LitElement implements ThumbnailProps {
+    @property({ type: String })
+    @validPropertyValues(componentSelector, variants, defaultProps.variant)
+    public variant = defaultProps.variant;
+
+    @property({ type: String })
+    public src = defaultProps.src;
+
+    @property({ type: String })
+    public alt = defaultProps.alt;
+
+    @property({ type: Boolean })
+    public disabled = defaultProps.disabled;
+
+    @property({ type: Boolean })
+    public hasPadding = defaultProps.hasPadding;
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, backgroundColors, defaultProps.backgroundColor)
+    public backgroundColor = defaultProps.backgroundColor;
+
+    @property({ type: Object })
+    public placeholder: ThumbnailProps['placeholder'] = defaultProps.placeholder;
+
+    @query('img')
+    private img!: HTMLImageElement;
+
+    /**
+     * Handles image load errors by replacing the src and alt props
+     * with the placeholder props.
+     */
+    private _handleImageError () {
+        if (this.placeholder?.src) this.setAttribute('src', this.placeholder.src);
+        if (this.placeholder?.alt) this.setAttribute('alt', this.placeholder.alt);
+    }
+
+    /**
+     * Detects image load status and applies the placeholder on failure.
+     * This is needed as the `onerror` event is not triggered in SSR.
+     */
+    private _checkImageError () {
+        if (this.img) {
+            const { complete, naturalHeight } = this.img;
+            const hasError = complete && naturalHeight === 0;
+            if (hasError) this._handleImageError.call(this);
+        }
+    }
+
+    protected firstUpdated (): void {
+        this._checkImageError();
+    }
+
     render () {
-        return html`<h1 data-test-id="pie-thumbnail">Hello world!</h1>`;
+        const {
+            variant,
+            src,
+            alt,
+            disabled,
+            hasPadding,
+            backgroundColor,
+            _handleImageError,
+        } = this;
+
+        const wrapperClasses = {
+            'c-thumbnail': true,
+            [`c-thumbnail--${variant}`]: true,
+            [backgroundColorClassNames[backgroundColor]]: true,
+            'c-thumbnail--disabled': disabled,
+            'c-thumbnail--padding': hasPadding,
+        };
+
+        return html`
+            <div data-test-id="pie-thumbnail" class="${classMap(wrapperClasses)}">
+                <img
+                    data-test-id="pie-thumbnail-img"
+                    src="${src}"
+                    class="c-thumbnail-img"
+                    alt="${alt}"
+                    @error="${_handleImageError}"
+                />
+            </div>
+        `;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite

package/src/thumbnail.scss

@@ -1 +1,54 @@
-@use '@justeattakeaway/pie-css/scss' as p;
+.c-thumbnail {
+  --thumbnail-size: var(--dt-spacing-g);
+  --thumbnail-border-radius: var(--dt-radius-rounded-b);
+  --thumbnail-bg-color: var(--dt-color-container-default);
+  --thumbnail-border-color: transparent;
+  --thumbnail-padding: calc(var(--dt-spacing-a) / 2);
+
+  box-sizing: border-box;
+  overflow: hidden;
+  width: var(--thumbnail-size);
+  height: var(--thumbnail-size);
+  border-radius: var(--thumbnail-border-radius);
+  border: 1px solid var(--thumbnail-border-color);
+  background-color: var(--thumbnail-bg-color);
+
+  &.c-thumbnail--outline {
+    --thumbnail-border-color: var(--dt-color-border-default);
+  }
+
+  &.c-thumbnail--disabled {
+    opacity: 0.5;
+  }
+
+  &.c-thumbnail--backgroundSubtle {
+    --thumbnail-bg-color: var(--dt-color-container-subtle);
+  }
+
+  &.c-thumbnail--backgroundStrong {
+    --thumbnail-bg-color: var(--dt-color-container-strong);
+  }
+
+  &.c-thumbnail--backgroundDark {
+    --thumbnail-bg-color: var(--dt-color-container-dark);
+  }
+
+  &.c-thumbnail--backgroundInverse {
+    --thumbnail-bg-color: var(--dt-color-container-inverse);
+  }
+
+  &.c-thumbnail--backgroundInverseAlternative {
+    --thumbnail-bg-color: var(--dt-color-container-inverse-alternative);
+  }
+
+  &.c-thumbnail--padding {
+    padding: var(--thumbnail-padding);
+  }
+
+  .c-thumbnail-img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+  }
+}