@justeattakeaway/pie-thumbnail 0.3.0 → 0.5.0

package/custom-elements.json

@@ -36,13 +36,26 @@
           },
           "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": "aspectRatios",
+          "type": {
+            "text": "['1by1', '4by3', '16by9']"
+          },
+          "default": "['1by1', '4by3', '16by9']"
+        },
+        {
+          "kind": "variable",
+          "name": "sizes",
+          "default": "Object.freeze(Array.from(\n    { length: (SIZE_MAX - SIZE_MIN) / SIZE_INCREMENT_BY + 1 },\n    (_, i) => SIZE_MIN + i * SIZE_INCREMENT_BY,\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}"
+          "default": "{\n    variant: 'default',\n    size: 48,\n    src: '',\n    alt: '',\n    disabled: false,\n    hasPadding: false,\n    backgroundColor: 'default',\n    aspectRatio: '1by1',\n    placeholder: {\n        src: '',\n        alt: '',\n    },\n}"
         }
       ],
       "exports": [
@@ -70,6 +83,22 @@
             "module": "src/defs.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "aspectRatios",
+          "declaration": {
+            "name": "aspectRatios",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "sizes",
+          "declaration": {
+            "name": "sizes",
+            "module": "src/defs.js"
+          }
+        },
         {
           "kind": "js",
           "name": "defaultProps",
@@ -95,6 +124,18 @@
               "privacy": "public",
               "attribute": "variant"
             },
+            {
+              "kind": "field",
+              "name": "size",
+              "privacy": "public",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "aspectRatio",
+              "privacy": "public",
+              "attribute": "aspectRatio"
+            },
             {
               "kind": "field",
               "name": "src",
@@ -142,6 +183,17 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "_generateSizeStyles",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "description": "Assigns the thumbnail size and border radius CSS variables\nbased on the size prop."
+            },
             {
               "kind": "method",
               "name": "_handleImageError",
@@ -160,6 +212,14 @@
               "name": "variant",
               "fieldName": "variant"
             },
+            {
+              "name": "size",
+              "fieldName": "size"
+            },
+            {
+              "name": "aspectRatio",
+              "fieldName": "aspectRatio"
+            },
             {
               "name": "src",
               "fieldName": "src"

package/dist/index.d.ts

@@ -3,11 +3,13 @@ import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { TemplateResult } from 'lit-html';
 
+export declare const aspectRatios: readonly ["1by1", "4by3", "16by9"];
+
 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 type DefaultProps = ComponentDefaultProps<ThumbnailProps>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -16,6 +18,8 @@ export declare const defaultProps: DefaultProps;
  */
 export declare class PieThumbnail extends LitElement implements ThumbnailProps {
     variant: "default" | "outline";
+    size: number;
+    aspectRatio: "1by1" | "4by3" | "16by9";
     src: string;
     alt: string;
     disabled: boolean;
@@ -23,6 +27,11 @@ export declare class PieThumbnail extends LitElement implements ThumbnailProps {
     backgroundColor: "default" | "subtle" | "strong" | "dark" | "inverse" | "inverse-alternative";
     placeholder: ThumbnailProps['placeholder'];
     private img;
+    /**
+     * Assigns the thumbnail size and border radius CSS variables
+     * based on the size prop.
+     */
+    private _generateSizeStyles;
     /**
      * Handles image load errors by replacing the src and alt props
      * with the placeholder props.
@@ -43,14 +52,45 @@ declare type PlaceholderProps = {
     alt?: string;
 };
 
+export declare const sizes: readonly number[];
+
 export declare interface ThumbnailProps {
+    /**
+     * What style variant the thumbnail should be such as default or outline.
+     */
     variant?: typeof variants[number];
+    /**
+     * Specify the size as a number between 24 and 128 (inclusive) and a multiple of 8.
+     */
+    size?: typeof sizes[number];
+    /**
+     * The src attribute for the underlying image tag.
+     */
     src?: string;
+    /**
+     * The alt attribute for the underlying image tag.
+     */
     alt?: string;
+    /**
+     * When true, the disabled styles are applied.
+     */
     disabled?: boolean;
+    /**
+     * When true, an extra spacing around the thumbnail container is applied.
+     */
     hasPadding?: boolean;
+    /**
+     * What background color the thumbnail should be.
+     */
     backgroundColor?: typeof backgroundColors[number];
+    /**
+     * What placeholder should be used when the image fails to load.
+     */
     placeholder?: PlaceholderProps;
+    /**
+     * Sets the aspect-ratio of the thumbnail image.
+     */
+    aspectRatio?: typeof aspectRatios[number];
 }
 
 export declare const variants: readonly ["default", "outline"];

package/dist/index.js

@@ -1,52 +1,69 @@
-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 { LitElement as f, html as k, unsafeCSS as S } from "lit";
+import { validPropertyValues as d, defineCustomElement as z } from "@justeattakeaway/pie-webc-core";
+import { classMap as _ } from "lit/directives/class-map.js";
 import { property as n, query as C } from "lit/decorators.js";
-const S = [
+const E = [
   "default",
   "outline"
-], E = [
+], I = [
   "default",
   "subtle",
   "strong",
   "dark",
   "inverse",
   "inverse-alternative"
-], I = {
+], R = {
   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 = {
+}, $ = ["1by1", "4by3", "16by9"], m = 8, p = 24, x = 128, P = Object.freeze(Array.from(
+  { length: (x - p) / m + 1 },
+  (u, t) => p + t * m
+)), r = {
   variant: "default",
+  size: 48,
   src: "",
   alt: "",
   disabled: !1,
   hasPadding: !1,
   backgroundColor: "default",
+  aspectRatio: "1by1",
   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;
+}, A = ".c-thumbnail{--thumbnail-size: 48px;--thumbnail-border-radius: var(--dt-radius-rounded-b);--thumbnail-bg-color: var(--dt-color-container-default);--thumbnail-padding: calc(var(--dt-spacing-a) / 2);--thumbnail-img-border-radius: unset;display:flex;justify-content:center;align-items:center;box-sizing:border-box;overflow:hidden;width:var(--thumbnail-size);height:var(--thumbnail-size);border-radius:var(--thumbnail-border-radius);background-color:var(--thumbnail-bg-color)}.c-thumbnail.c-thumbnail--outline{border:1px solid 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{--thumbnail-img-border-radius: calc(var(--thumbnail-border-radius) - var(--thumbnail-padding));padding:var(--thumbnail-padding)}.c-thumbnail.c-thumbnail--4by3{height:calc(var(--thumbnail-size) * 3 / 4)}.c-thumbnail.c-thumbnail--16by9{height:calc(var(--thumbnail-size) * 9 / 16)}.c-thumbnail .c-thumbnail-img{width:100%;height:100%;border-radius:var(--thumbnail-img-border-radius);object-fit:cover}";
+var j = Object.defineProperty, i = (u, t, a, b) => {
+  for (var o = void 0, l = u.length - 1, c; l >= 0; l--)
+    (c = u[l]) && (o = c(t, a, o) || o);
+  return o && j(t, a, o), o;
 };
-const s = "pie-thumbnail", u = class u extends p {
+const s = "pie-thumbnail", h = class h extends f {
   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;
+    super(...arguments), this.variant = r.variant, this.size = r.size, this.aspectRatio = r.aspectRatio, this.src = r.src, this.alt = r.alt, this.disabled = r.disabled, this.hasPadding = r.hasPadding, this.backgroundColor = r.backgroundColor, this.placeholder = r.placeholder;
+  }
+  /**
+   * Assigns the thumbnail size and border radius CSS variables
+   * based on the size prop.
+   */
+  _generateSizeStyles() {
+    const { size: t } = this;
+    let a = "--dt-radius-rounded-c";
+    return t <= 40 ? a = "--dt-radius-rounded-a" : t <= 56 && (a = "--dt-radius-rounded-b"), `
+            --thumbnail-size: ${t}px;
+            --thumbnail-border-radius: var(${a});
+        `;
   }
   /**
    * 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);
+    var t, a;
+    (t = this.placeholder) != null && t.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.
@@ -54,8 +71,8 @@ const s = "pie-thumbnail", u = class u extends p {
    */
   _checkImageError() {
     if (this.img) {
-      const { complete: r, naturalHeight: a } = this.img;
-      r && a === 0 && this._handleImageError.call(this);
+      const { complete: t, naturalHeight: a } = this.img;
+      t && a === 0 && this._handleImageError.call(this);
     }
   }
   firstUpdated() {
@@ -63,66 +80,79 @@ const s = "pie-thumbnail", u = class u extends p {
   }
   render() {
     const {
-      variant: r,
+      variant: t,
       src: a,
-      alt: d,
+      alt: b,
       disabled: o,
       hasPadding: l,
       backgroundColor: c,
-      _handleImageError: m
-    } = this, g = {
+      aspectRatio: g
+    } = this, v = {
       "c-thumbnail": !0,
-      [`c-thumbnail--${r}`]: !0,
-      [I[c]]: !0,
+      [`c-thumbnail--${t}`]: !0,
+      [`c-thumbnail--${g}`]: !0,
+      [R[c]]: !0,
       "c-thumbnail--disabled": o,
       "c-thumbnail--padding": l
-    };
-    return v`
-            <div data-test-id="pie-thumbnail" class="${y(g)}">
+    }, y = this._generateSizeStyles();
+    return k`
+            <div data-test-id="pie-thumbnail"
+             class="${_(v)}"
+             style="${y}">
                 <img
                     data-test-id="pie-thumbnail-img"
                     src="${a}"
                     class="c-thumbnail-img"
-                    alt="${d}"
-                    @error="${m}"
+                    alt="${b}"
+                    @error="${this._handleImageError}"
                 />
             </div>
         `;
   }
 };
-u.styles = f(_);
-let t = u;
+h.styles = S(A);
+let e = h;
+i([
+  n({ type: String }),
+  d(s, E, r.variant)
+], e.prototype, "variant");
+i([
+  n({ type: Number }),
+  d(s, P, r.size)
+], e.prototype, "size");
 i([
   n({ type: String }),
-  h(s, S, e.variant)
-], t.prototype, "variant");
+  d(s, $, r.aspectRatio)
+], e.prototype, "aspectRatio");
 i([
   n({ type: String })
-], t.prototype, "src");
+], e.prototype, "src");
 i([
   n({ type: String })
-], t.prototype, "alt");
+], e.prototype, "alt");
 i([
   n({ type: Boolean })
-], t.prototype, "disabled");
+], e.prototype, "disabled");
 i([
   n({ type: Boolean })
-], t.prototype, "hasPadding");
+], e.prototype, "hasPadding");
 i([
   n({ type: String }),
-  h(s, E, e.backgroundColor)
-], t.prototype, "backgroundColor");
+  d(s, I, r.backgroundColor)
+], e.prototype, "backgroundColor");
 i([
   n({ type: Object })
-], t.prototype, "placeholder");
+], e.prototype, "placeholder");
 i([
   C("img")
-], t.prototype, "img");
-k(s, t);
+], e.prototype, "img");
+z(s, e);
 export {
-  t as PieThumbnail,
-  I as backgroundColorClassNames,
-  E as backgroundColors,
-  e as defaultProps,
-  S as variants
+  e as PieThumbnail,
+  $ as aspectRatios,
+  R as backgroundColorClassNames,
+  I as backgroundColors,
+  r as defaultProps,
+  P as sizes,
+  E as variants
 };

package/dist/react.d.ts

@@ -4,11 +4,13 @@ import type { LitElement } from 'lit';
 import * as React_2 from 'react';
 import type { TemplateResult } from 'lit-html';
 
+export declare const aspectRatios: readonly ["1by1", "4by3", "16by9"];
+
 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 type DefaultProps = ComponentDefaultProps<ThumbnailProps>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -19,6 +21,8 @@ export declare const PieThumbnail: React_2.ForwardRefExoticComponent<ThumbnailPr
  */
 declare class PieThumbnail_2 extends LitElement implements ThumbnailProps {
     variant: "default" | "outline";
+    size: number;
+    aspectRatio: "1by1" | "4by3" | "16by9";
     src: string;
     alt: string;
     disabled: boolean;
@@ -26,6 +30,11 @@ declare class PieThumbnail_2 extends LitElement implements ThumbnailProps {
     backgroundColor: "default" | "subtle" | "strong" | "dark" | "inverse" | "inverse-alternative";
     placeholder: ThumbnailProps['placeholder'];
     private img;
+    /**
+     * Assigns the thumbnail size and border radius CSS variables
+     * based on the size prop.
+     */
+    private _generateSizeStyles;
     /**
      * Handles image load errors by replacing the src and alt props
      * with the placeholder props.
@@ -48,14 +57,45 @@ declare type PlaceholderProps = {
 
 declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
 
+export declare const sizes: readonly number[];
+
 export declare interface ThumbnailProps {
+    /**
+     * What style variant the thumbnail should be such as default or outline.
+     */
     variant?: typeof variants[number];
+    /**
+     * Specify the size as a number between 24 and 128 (inclusive) and a multiple of 8.
+     */
+    size?: typeof sizes[number];
+    /**
+     * The src attribute for the underlying image tag.
+     */
     src?: string;
+    /**
+     * The alt attribute for the underlying image tag.
+     */
     alt?: string;
+    /**
+     * When true, the disabled styles are applied.
+     */
     disabled?: boolean;
+    /**
+     * When true, an extra spacing around the thumbnail container is applied.
+     */
     hasPadding?: boolean;
+    /**
+     * What background color the thumbnail should be.
+     */
     backgroundColor?: typeof backgroundColors[number];
+    /**
+     * What placeholder should be used when the image fails to load.
+     */
     placeholder?: PlaceholderProps;
+    /**
+     * Sets the aspect-ratio of the thumbnail image.
+     */
+    aspectRatio?: typeof aspectRatios[number];
 }
 
 export declare const variants: readonly ["default", "outline"];

package/dist/react.js

@@ -1,18 +1,20 @@
 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({
+import { aspectRatios as l, backgroundColorClassNames as p, backgroundColors as c, defaultProps as u, sizes as b, variants as h } from "./index.js";
+const t = e({
   displayName: "PieThumbnail",
   elementClass: o,
   react: a,
   tagName: "pie-thumbnail",
   events: {}
-}), r = m;
+}), s = t;
 export {
-  r as PieThumbnail,
-  l as backgroundColorClassNames,
-  p as backgroundColors,
+  s as PieThumbnail,
+  l as aspectRatios,
+  p as backgroundColorClassNames,
+  c as backgroundColors,
   u as defaultProps,
-  b as variants
+  b as sizes,
+  h as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-thumbnail",
   "description": "PIE Design System Thumbnail built using Web Components",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs.ts

@@ -17,30 +17,72 @@ export const backgroundColorClassNames: Record<typeof backgroundColors[number],
     'inverse-alternative': 'c-thumbnail--backgroundInverseAlternative',
 };
 
+export const aspectRatios = ['1by1', '4by3', '16by9'] as const;
+
+const SIZE_INCREMENT_BY = 8;
+const SIZE_MIN = 24;
+const SIZE_MAX = 128;
+
+export const sizes = Object.freeze(Array.from(
+    { length: (SIZE_MAX - SIZE_MIN) / SIZE_INCREMENT_BY + 1 },
+    (_, i) => SIZE_MIN + i * SIZE_INCREMENT_BY,
+)) as readonly number[];
+
 type PlaceholderProps = {
     src?: string;
     alt?: string;
 }
 
 export interface ThumbnailProps {
+    /**
+     * What style variant the thumbnail should be such as default or outline.
+     */
     variant?: typeof variants[number];
+    /**
+     * Specify the size as a number between 24 and 128 (inclusive) and a multiple of 8.
+     */
+    size?: typeof sizes[number];
+    /**
+     * The src attribute for the underlying image tag.
+     */
     src?: string;
+    /**
+     * The alt attribute for the underlying image tag.
+     */
     alt?: string;
+    /**
+     * When true, the disabled styles are applied.
+     */
     disabled?: boolean;
+    /**
+     * When true, an extra spacing around the thumbnail container is applied.
+     */
     hasPadding?: boolean;
+    /**
+     * What background color the thumbnail should be.
+     */
     backgroundColor?: typeof backgroundColors[number];
+    /**
+     * What placeholder should be used when the image fails to load.
+     */
     placeholder?: PlaceholderProps;
+     /**
+     * Sets the aspect-ratio of the thumbnail image.
+     */
+     aspectRatio?: typeof aspectRatios[number];
 }
 
-export type DefaultProps = ComponentDefaultProps<ThumbnailProps, 'variant' | 'src' | 'alt' | 'disabled' | 'hasPadding' | 'backgroundColor' | 'placeholder'>;
+export type DefaultProps = ComponentDefaultProps<ThumbnailProps>;
 
 export const defaultProps: DefaultProps = {
     variant: 'default',
+    size: 48,
     src: '',
     alt: '',
     disabled: false,
     hasPadding: false,
     backgroundColor: 'default',
+    aspectRatio: '1by1',
     placeholder: {
         src: '',
         alt: '',

package/src/index.ts

@@ -12,6 +12,8 @@ import {
     variants,
     backgroundColors,
     backgroundColorClassNames,
+    sizes,
+    aspectRatios,
 } from './defs';
 import styles from './thumbnail.scss?inline';
 
@@ -28,6 +30,14 @@ export class PieThumbnail extends LitElement implements ThumbnailProps {
     @validPropertyValues(componentSelector, variants, defaultProps.variant)
     public variant = defaultProps.variant;
 
+    @property({ type: Number })
+    @validPropertyValues(componentSelector, sizes, defaultProps.size)
+    public size = defaultProps.size;
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, aspectRatios, defaultProps.aspectRatio)
+    public aspectRatio = defaultProps.aspectRatio;
+
     @property({ type: String })
     public src = defaultProps.src;
 
@@ -50,6 +60,25 @@ export class PieThumbnail extends LitElement implements ThumbnailProps {
     @query('img')
     private img!: HTMLImageElement;
 
+    /**
+     * Assigns the thumbnail size and border radius CSS variables
+     * based on the size prop.
+     */
+    private _generateSizeStyles (): string {
+        const { size } = this;
+        let borderRadius = '--dt-radius-rounded-c';
+        if (size <= 40) {
+            borderRadius = '--dt-radius-rounded-a';
+        } else if (size <= 56) {
+            borderRadius = '--dt-radius-rounded-b';
+        }
+
+        return `
+            --thumbnail-size: ${size}px;
+            --thumbnail-border-radius: var(${borderRadius});
+        `;
+    }
+
     /**
      * Handles image load errors by replacing the src and alt props
      * with the placeholder props.
@@ -83,25 +112,30 @@ export class PieThumbnail extends LitElement implements ThumbnailProps {
             disabled,
             hasPadding,
             backgroundColor,
-            _handleImageError,
+            aspectRatio,
         } = this;
 
         const wrapperClasses = {
             'c-thumbnail': true,
             [`c-thumbnail--${variant}`]: true,
+            [`c-thumbnail--${aspectRatio}`]: true,
             [backgroundColorClassNames[backgroundColor]]: true,
             'c-thumbnail--disabled': disabled,
             'c-thumbnail--padding': hasPadding,
         };
 
+        const sizeStyles = this._generateSizeStyles();
+
         return html`
-            <div data-test-id="pie-thumbnail" class="${classMap(wrapperClasses)}">
+            <div data-test-id="pie-thumbnail"
+             class="${classMap(wrapperClasses)}"
+             style="${sizeStyles}">
                 <img
                     data-test-id="pie-thumbnail-img"
                     src="${src}"
                     class="c-thumbnail-img"
                     alt="${alt}"
-                    @error="${_handleImageError}"
+                    @error="${this._handleImageError}"
                 />
             </div>
         `;

package/src/thumbnail.scss

@@ -1,20 +1,22 @@
 .c-thumbnail {
-  --thumbnail-size: var(--dt-spacing-g);
+  --thumbnail-size: 48px;
   --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);
+  --thumbnail-img-border-radius: unset;
 
+  display: flex;
+  justify-content: center;
+  align-items: center;
   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);
+    border: 1px solid var(--dt-color-border-default);
   }
 
   &.c-thumbnail--disabled {
@@ -42,13 +44,22 @@
   }
 
   &.c-thumbnail--padding {
+    --thumbnail-img-border-radius: calc(var(--thumbnail-border-radius) - var(--thumbnail-padding));
     padding: var(--thumbnail-padding);
   }
 
+  &.c-thumbnail--4by3 {
+    height: calc(var(--thumbnail-size) * 3 / 4)
+  }
+
+  &.c-thumbnail--16by9 {
+    height: calc(var(--thumbnail-size) * 9 / 16)
+  }
+
   .c-thumbnail-img {
     width: 100%;
     height: 100%;
-    object-fit: contain;
-    display: block;
+    border-radius: var(--thumbnail-img-border-radius);
+    object-fit: cover;
   }
 }