@justeattakeaway/pie-thumbnail 0.0.0 → 0.2.0

package/custom-elements.json

@@ -11,8 +11,42 @@
     {
       "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": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{\n    variant: 'default',\n    src: '',\n    alt: '',\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "variants",
+          "declaration": {
+            "name": "variants",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
@@ -22,7 +56,40 @@
           "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"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "fieldName": "variant"
+            },
+            {
+              "name": "src",
+              "fieldName": "src"
+            },
+            {
+              "name": "alt",
+              "fieldName": "alt"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"

package/dist/index.d.ts

@@ -1,16 +1,29 @@
+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 type DefaultProps = ComponentDefaultProps<ThumbnailProps, 'variant' | 'src' | 'alt'>;
+
+export declare const defaultProps: DefaultProps;
+
 /**
  * @tagname pie-thumbnail
  */
 export declare class PieThumbnail extends LitElement implements ThumbnailProps {
+    variant: "default" | "outline";
+    src: string;
+    alt: string;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
 export declare interface ThumbnailProps {
+    variant?: typeof variants[number];
+    src?: string;
+    alt?: string;
 }
 
+export declare const variants: readonly ["default", "outline"];
+
 export { }

package/dist/index.js

@@ -1,13 +1,55 @@
-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 m, html as h, unsafeCSS as p } from "lit";
+import { validPropertyValues as v, defineCustomElement as f } from "@justeattakeaway/pie-webc-core";
+import { classMap as g } from "lit/directives/class-map.js";
+import { property as n } from "lit/decorators.js";
+const y = [
+  "default",
+  "outline"
+], e = {
+  variant: "default",
+  src: "",
+  alt: ""
+}, S = ".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;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-img{width:100%;height:100%;object-fit:contain;display:block}";
+var x = Object.defineProperty, l = (d, a, i, u) => {
+  for (var t = void 0, o = d.length - 1, c; o >= 0; o--)
+    (c = d[o]) && (t = c(a, i, t) || t);
+  return t && x(a, i, t), t;
+};
+const b = "pie-thumbnail", s = class s extends m {
+  constructor() {
+    super(...arguments), this.variant = e.variant, this.src = e.src, this.alt = e.alt;
+  }
   render() {
-    return s`<h1 data-test-id="pie-thumbnail">Hello world!</h1>`;
+    const {
+      variant: a,
+      src: i,
+      alt: u
+    } = this, t = {
+      "c-thumbnail": !0,
+      [`c-thumbnail--${a}`]: !0
+    };
+    return h`
+            <div data-test-id="pie-thumbnail" class="${g(t)}">
+                <img data-test-id="pie-thumbnail-img" src="${i}" class="c-thumbnail-img" alt="${u}">
+            </div>
+        `;
   }
 };
-e.styles = r(i);
-let t = e;
-n(l, t);
+s.styles = p(S);
+let r = s;
+l([
+  n({ type: String }),
+  v(b, y, e.variant)
+], r.prototype, "variant");
+l([
+  n({ type: String })
+], r.prototype, "src");
+l([
+  n({ type: String })
+], r.prototype, "alt");
+f(b, r);
 export {
-  t as PieThumbnail
+  r as PieThumbnail,
+  e as defaultProps,
+  y as variants
 };

package/dist/react.d.ts

@@ -1,14 +1,22 @@
+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 type DefaultProps = ComponentDefaultProps<ThumbnailProps, 'variant' | 'src' | 'alt'>;
+
+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;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
@@ -16,6 +24,11 @@ declare class PieThumbnail_2 extends LitElement implements ThumbnailProps {
 declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
 
 export declare interface ThumbnailProps {
+    variant?: typeof variants[number];
+    src?: string;
+    alt?: string;
 }
 
+export declare const variants: readonly ["default", "outline"];
+
 export { }

package/dist/react.js

@@ -1,13 +1,16 @@
 import * as e from "react";
 import { createComponent as a } from "@lit/react";
-import { PieThumbnail as i } from "./index.js";
-const m = a({
+import { PieThumbnail as t } from "./index.js";
+import { defaultProps as s, variants as p } from "./index.js";
+const i = a({
   displayName: "PieThumbnail",
-  elementClass: i,
+  elementClass: t,
   react: e,
   tagName: "pie-thumbnail",
   events: {}
-}), o = m;
+}), n = i;
 export {
-  o as PieThumbnail
+  n as PieThumbnail,
+  s as defaultProps,
+  p as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-thumbnail",
   "description": "PIE Design System Thumbnail built using Web Components",
-  "version": "0.0.0",
+  "version": "0.2.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.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {

package/src/defs.ts

@@ -1,3 +1,19 @@
-// 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 interface ThumbnailProps {
+    variant?: typeof variants[number];
+    src?: string;
+    alt?: string;
+}
+
+export type DefaultProps = ComponentDefaultProps<ThumbnailProps, 'variant' | 'src' | 'alt'>;
+
+export const defaultProps: DefaultProps = {
+    variant: 'default',
+    src: '',
+    alt: '',
+};

package/src/index.ts

@@ -1,8 +1,12 @@
-import { LitElement, html, unsafeCSS } from 'lit';
+import {
+    LitElement, html, unsafeCSS,
+} from 'lit';
 
-import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import { defineCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
+import { classMap } from 'lit/directives/class-map.js';
+import { property } from 'lit/decorators.js';
+import { type ThumbnailProps, defaultProps, variants } from './defs';
 import styles from './thumbnail.scss?inline';
-import { type ThumbnailProps } from './defs';
 
 // Valid values available to consumers
 export * from './defs';
@@ -13,8 +17,33 @@ 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;
+
     render () {
-        return html`<h1 data-test-id="pie-thumbnail">Hello world!</h1>`;
+        const {
+            variant,
+            src,
+            alt,
+        } = this;
+
+        const wrapperClasses = {
+            'c-thumbnail': true,
+            [`c-thumbnail--${variant}`]: true,
+        };
+
+        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}">
+            </div>
+        `;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite

package/src/thumbnail.scss

@@ -1 +1,25 @@
-@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;
+
+  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-img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+  }
+}