feat(pie-thumbnail): DSW-2583 2584 2585 Add disabled, has padding, backgroundColor and placeholder props

.changeset/selfish-walls-knock.md

@@ -0,0 +1,6 @@
+---
+"@justeattakeaway/pie-thumbnail": minor
+"pie-storybook": minor
+---
+
+[Added] - disabled, hasPadding, backgroundColor and placeholder properties to Thumbnail component

apps/pie-storybook/stories/pie-thumbnail.stories.ts

@@ -2,7 +2,9 @@ import { html } from 'lit';
 import { type Meta } from '@storybook/web-components';
 
 import '@justeattakeaway/pie-thumbnail';
-import { type ThumbnailProps, defaultProps, variants } from '@justeattakeaway/pie-thumbnail';
+import {
+    type ThumbnailProps, defaultProps, variants, backgroundColors,
+} from '@justeattakeaway/pie-thumbnail';
 
 import { createStory, type TemplateFunction } from '../utilities';
 
@@ -12,6 +14,10 @@ const defaultArgs: ThumbnailProps = {
     ...defaultProps,
     src: 'https://www.pie.design/assets/img/jet-logo-narrow.svg',
     alt: 'JET logo',
+    placeholder: {
+        src: 'https://www.pie.design/assets/img/404_narrow.png',
+        alt: 'Thumbnail placeholder image',
+    },
 };
 
 const thumbnailStoryMeta: ThumbnailStoryMeta = {
@@ -23,21 +29,50 @@ const thumbnailStoryMeta: ThumbnailStoryMeta = {
             control: 'select',
             options: variants,
             defaultValue: {
-                summary: defaultArgs.variant,
+                summary: defaultProps.variant,
             },
         },
         src: {
             description: 'Set the src attribute for the underlying image tag.',
             control: 'text',
             defaultValue: {
-                summary: defaultArgs.src,
+                summary: defaultProps.src,
             },
         },
         alt: {
             description: 'Set the alt attribute for the underlying image tag.',
             control: 'text',
             defaultValue: {
-                summary: defaultArgs.alt,
+                summary: defaultProps.alt,
+            },
+        },
+        disabled: {
+            description: 'Applies the disabled styling to the thumbnail component.',
+            control: 'boolean',
+            defaultValue: {
+                summary: defaultProps.disabled,
+            },
+        },
+        hasPadding: {
+            description: 'Adds extra space around the thumbnail container.',
+            control: 'boolean',
+            defaultValue: {
+                summary: defaultProps.hasPadding,
+            },
+        },
+        backgroundColor: {
+            description: 'Applies a background color to the thumbnail container.',
+            control: 'select',
+            options: backgroundColors,
+            defaultValue: {
+                summary: defaultProps.backgroundColor,
+            },
+        },
+        placeholder: {
+            description: 'If an image is unavailable, the placeholder prop can be used to ensure there is always something visible to users.',
+            control: 'object',
+            defaultValue: {
+                summary: defaultProps.placeholder,
             },
         },
     },
@@ -56,11 +91,19 @@ const Template: TemplateFunction<ThumbnailProps> = ({
     variant,
     src,
     alt,
+    disabled,
+    hasPadding,
+    backgroundColor,
+    placeholder,
 }) => html`
     <pie-thumbnail
         variant="${variant}"
         src="${src}"
-        alt="${alt}">
+        alt="${alt}"
+        ?disabled="${disabled}"
+        ?hasPadding="${hasPadding}"
+        backgroundColor="${backgroundColor}"
+        .placeholder="${placeholder}"
     </pie-thumbnail>`;
 
 const createThumbnailStory = createStory<ThumbnailProps>(Template, defaultArgs);

apps/pie-storybook/stories/testing/pie-thumbnail.test.stories.ts

@@ -1,17 +1,23 @@
 import { html } from 'lit';
 
 import '@justeattakeaway/pie-thumbnail';
-import { type ThumbnailProps, defaultProps, variants } from '@justeattakeaway/pie-thumbnail';
+import {
+    type ThumbnailProps, defaultProps, variants, backgroundColors,
+} from '@justeattakeaway/pie-thumbnail';
 
 import { type Meta } from '@storybook/web-components';
-import { createVariantStory, type TemplateFunction } from '../../utilities';
+import { createStory, createVariantStory, type TemplateFunction } from '../../utilities';
 
 type ThumbnailStoryMeta = Meta<ThumbnailProps>;
 
 const defaultArgs: ThumbnailProps = {
     ...defaultProps,
     src: 'https://www.pie.design/assets/img/jet-logo-narrow.svg',
     alt: 'JET logo',
+    placeholder: {
+        src: 'https://www.pie.design/assets/img/404_narrow.png',
+        alt: 'Thumbnail placeholder image',
+    },
 };
 
 const thumbnailStoryMeta: ThumbnailStoryMeta = {
@@ -23,21 +29,50 @@ const thumbnailStoryMeta: ThumbnailStoryMeta = {
             control: 'select',
             options: variants,
             defaultValue: {
-                summary: defaultArgs.variant,
+                summary: defaultProps.variant,
             },
         },
         src: {
             description: 'Set the src attribute for the underlying image tag.',
             control: 'text',
             defaultValue: {
-                summary: defaultArgs.src,
+                summary: defaultProps.src,
             },
         },
         alt: {
             description: 'Set the alt attribute for the underlying image tag.',
             control: 'text',
             defaultValue: {
-                summary: defaultArgs.alt,
+                summary: defaultProps.alt,
+            },
+        },
+        disabled: {
+            description: 'Applies the disabled styling to the thumbnail component.',
+            control: 'boolean',
+            defaultValue: {
+                summary: defaultProps.disabled,
+            },
+        },
+        hasPadding: {
+            description: 'Adds extra space around the thumbnail container.',
+            control: 'boolean',
+            defaultValue: {
+                summary: defaultProps.hasPadding,
+            },
+        },
+        backgroundColor: {
+            description: 'Applies a background color to the thumbnail container.',
+            control: 'select',
+            options: backgroundColors,
+            defaultValue: {
+                summary: defaultProps.backgroundColor,
+            },
+        },
+        placeholder: {
+            description: 'If an image is unavailable, the placeholder prop can be used to ensure there is always something visible to users.',
+            control: 'object',
+            defaultValue: {
+                summary: defaultProps.placeholder,
             },
         },
     },
@@ -50,28 +85,67 @@ const Template: TemplateFunction<ThumbnailProps> = ({
     variant,
     src,
     alt,
+    disabled,
+    hasPadding,
+    backgroundColor,
+    placeholder,
 }) => html`
     <pie-thumbnail
         variant="${variant}"
         src="${src}"
-        alt="${alt}">
+        alt="${alt}"
+        ?disabled="${disabled}"
+        ?hasPadding="${hasPadding}"
+        backgroundColor="${backgroundColor}"
+        .placeholder="${placeholder}">
     </pie-thumbnail>`;
 
 // Define the prop options for the matrix
-const sharedPropOptions = {
-    src: ['https://www.pie.design/assets/img/jet-logo-narrow.svg'],
-    alt: ['JET logo'],
+const sharedPropOptions: Partial<Record<keyof ThumbnailProps, unknown[]>> = {
+    src: [defaultArgs.src],
+    alt: [defaultArgs.alt],
+    disabled: [true, false],
+    hasPadding: [true, false],
+    backgroundColor: [defaultArgs.backgroundColor],
+    placeholder: [defaultArgs.placeholder],
 };
 
-const defaultPropOptions = {
+const defaultPropOptions: Partial<Record<keyof ThumbnailProps, unknown[]>> = {
     ...sharedPropOptions,
     variant: ['default'],
 };
 
-const outlinePropOptions = {
+const outlinePropOptions: Partial<Record<keyof ThumbnailProps, unknown[]>> = {
     ...sharedPropOptions,
     variant: ['outline'],
 };
 
+const backgroundPropOptions: Partial<Record<keyof ThumbnailProps, unknown[]>> = {
+    backgroundColor: backgroundColors,
+    variant: variants,
+    src: ['https://www.pie.design/assets/img/404_narrow.png'],
+};
+
+export const Default = createStory<ThumbnailProps>(Template, defaultArgs)();
+
+export const InvalidSrc = createStory<ThumbnailProps>(Template, {
+    placeholder: {
+        src: 'https://www.pie.design/assets/img/404_narrow.png',
+        alt: 'Placeholder Alt',
+    },
+    src: 'invalid-url.com',
+    alt: 'Invalid text',
+})();
+
+export const InvalidPlaceholder = createStory<ThumbnailProps>(Template, {
+    placeholder: {
+        src: 'https://www.pie.design/assets/img/404_narrow.png',
+        alt: 'Placeholder Alt',
+    },
+    src: 'https://www.pie.design/assets/img/jet-logo-narrow.svg',
+    alt: 'JET Logo',
+})();
+
 export const DefaultPropVariations = createVariantStory<ThumbnailProps>(Template, defaultPropOptions);
 export const OutlinePropVariations = createVariantStory<ThumbnailProps>(Template, outlinePropOptions);
+export const BackgroundPropVariations = createVariantStory<ThumbnailProps>(Template, backgroundPropOptions);

packages/components/pie-thumbnail/src/defs.ts

@@ -4,16 +4,36 @@ export const variants = [
     'default', 'outline',
 ] as const;
 
+export const backgroundColors = [
+    'default', 'subtle', 'strong', 'dark', 'inverse', 'inverse-alternative'
+]as const;
+
+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'>;
+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: '',
+    },
 };

packages/components/pie-thumbnail/src/index.ts

@@ -5,7 +5,9 @@ import {
 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 {
+    type ThumbnailProps, defaultProps, variants, backgroundColors,
+} from './defs';
 import styles from './thumbnail.scss?inline';
 
 // Valid values available to consumers
@@ -27,21 +29,46 @@ export class PieThumbnail extends LitElement implements ThumbnailProps {
     @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'];
+
+    private handleImageError = () => {
+        if (this.placeholder?.src) this.src = this.placeholder.src as string;
+        if (this.placeholder?.alt) this.alt = this.placeholder.alt as string;
+    };
+
     render () {
         const {
             variant,
             src,
             alt,
+            disabled,
+            hasPadding,
+            backgroundColor,
+            handleImageError,
         } = this;
 
         const wrapperClasses = {
             'c-thumbnail': true,
             [`c-thumbnail--${variant}`]: true,
+            [`c-thumbnail--background-${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}">
+                <img data-test-id="pie-thumbnail-img" src="${src}" class="c-thumbnail-img" alt="${alt}" @error="${handleImageError}">
             </div>
         `;
     }

packages/components/pie-thumbnail/src/thumbnail.scss

@@ -3,6 +3,7 @@
   --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;
@@ -16,6 +17,34 @@
     --thumbnail-border-color: var(--dt-color-border-default);
   }
 
+  &.c-thumbnail--disabled {
+    opacity: 0.5;
+  }
+
+  &.c-thumbnail--background-subtle {
+    --thumbnail-bg-color: var(--dt-color-container-subtle);
+  }
+
+  &.c-thumbnail--background-strong {
+    --thumbnail-bg-color: var(--dt-color-container-strong);
+  }
+
+  &.c-thumbnail--background-dark {
+    --thumbnail-bg-color: var(--dt-color-container-dark);
+  }
+
+  &.c-thumbnail--background-inverse {
+    --thumbnail-bg-color: var(--dt-color-container-inverse);
+  }
+
+  &.c-thumbnail--background-inverse-alternative {
+    --thumbnail-bg-color: var(--dt-color-container-inverse-alternative);
+  }
+
+  &.c-thumbnail--padding {
+    padding: var(--thumbnail-padding);
+  }
+
   .c-thumbnail-img {
     width: 100%;
     height: 100%;