feat(pie-thumbnail): DSW-2580 add basic thumbnail functionality

[bntsv]

Describe your changes (can list changeset entries if preferable)

Author Checklist (complete before requesting a review, do not delete any)

• I have performed a self-review of my code.
• I have added thorough tests where applicable (unit / component / visual).
• I have reviewed the PIE Storybook/PIE Docs PR preview.
• I have reviewed visual test updates properly before approving.
• If changes will affect consumers of the package, I have created a changeset entry.

Not-applicable Checklist items

Please move any Author checklist items that do not apply to this pull request here.

• If a changeset file has been created, I have tested these changes in PIE Aperture using the /test-aperture command.

---

Testing

How do I test my changes?

Task	Link
Aperture PR	🔗
NextJS 14 deployment	🔗
Nuxt 3 deployment	🔗
Vanilla deployment	🔗

Reviewer checklists (complete before approving)

Mark items as [-] N/A if not applicable.

Reviewer 1

• I have reviewed the PIE Storybook/PIE Docs PR preview.
• I have verified that all acceptance criteria for this ticket have been completed.
• I have reviewed the Aperture changes (if added)
• If there are visual test updates, I have reviewed them.

Reviewer 2

• I have reviewed the PIE Storybook/PIE Docs PR preview.
• I have verified that all acceptance criteria for this ticket have been completed.
• I have reviewed the Aperture changes (if added)
• If there are visual test updates, I have reviewed them.

[changeset-bot]

🦋 Changeset detected

Latest commit: 2444f43

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
@justeattakeaway/pie-thumbnail	Minor
pie-storybook	Minor
@justeattakeaway/pie-webc	Patch
wc-angular12	Patch
wc-nuxt2	Patch
wc-react17	Patch
wc-react18	Patch
wc-vue3	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pie-design-system-bot]

	Fails
🚫	You have unchecked checklist items outside the "Not-applicable Checklist items" section. Please ensure all unchecked checkboxes are moved to the appropriate section.
🚫	You have unchecked checklist items in Reviewer 1's section. Please ensure all items are addressed before approval.
🚫	You have unchecked checklist items in Reviewer 2's section. Please ensure all items are addressed before approval.

Generated by 🚫 dangerJS against 2444f43

[raoufswe]

i think we need to revert this line and assign the default values from the component itself

it will be something like

const defaultArgs: ThumbnailProps = { ...defaultProps, };

and defaultProps is imported from '@justeattakeaway/pie-thumbnail'

[bntsv]

The defaults for storybook are

const defaultArgs: ThumbnailProps = {
    ...defaultProps,
    src: 'https://www.takeaway.com/consumer-web/images/takeaway-brand.61e55e0b.svg',
    alt: 'JET logo',
};

do you think we should use the same for tests? (Component defaults for src and alt are now empty strings)

[raoufswe]

Yes we can use the same for tests

[raoufswe]

the classes names should be prefixed with .c-thumbnail where c stands for component. this should make it easier to search if someone would like to find a specific classname.

Suggested change

	'o-tn': true,
	[`o-tn--${variant}`]: true,
	'c-thumbnail': true,
	[`c-thumbnail--${variant}`]: true,

[bntsv]

Thats something I wanted to ask actually - what does the 'o-' prefix stand for in pie-button scss for example?
Is there a specific convention that you follow? I took it from there as is, also used abbreviation of 'tn' because of that, but was wondering about how classes should be named.

Will make the suggested updates!

[bntsv]

/test-aperture

[pie-design-system-bot]

Starting a new snapshot build. You can view the logs here.

[pie-design-system-bot]

@bntsv Your snapshots have been published to npm!

Test the snapshots by updating your package.json with the newly-published versions:

Note

If you have more than one of these packages installed, we suggest using the new snapshots for all of them to help avoid version conflicts.

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

Then finally:

yarn install