feat: add expand button to the sd-teaser media

[balco0110]

Description:

Closes #2508

Definition of Reviewable:

• Documentation is created/updated

• Stories (features, a11y) are created/updated
• relevant tickets are linked

[changeset-bot]

🦋 Changeset detected

Latest commit: 9b960a5

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

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

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package or glob expression "@solid-design-system/components" specified in the `fixed` option does not match any package in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@solid-design-system/styles" specified in the `fixed` option does not match any package in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@solid-design-system/tokens" specified in the `fixed` option does not match any package in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

[github-actions]

🚀 Storybook has been deployed for branch feat_add-expand-button-to-sd-teaser-media-expandable-slot

• View Storybook

[MartaPintoTeixeira]

teaser-media docs - Expandable Slot:

• description should be: Use the “expandable slot” to add content that only shows up on hover. This slot cannot contain any action since it is not shown on mobile devices due to hover interaction.
• the slot color is too dark. use the same color as the "Meta slot" from the story above.
• when i mouse hover and then mouse off there is something breaking.
• chevron in figma is 24x24
• padding bottom should be 16

screenshots tests: Samples: Teaser-Media

• sample 2: if expandable is active the other text should not be visible (delete: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.)
• sample 2: delete copyright and button

screenshots tests: Samples: Teaser-Media

• sample 1: check the high of the button (lg button in 48 high by default)

template:

• check responsiveness on smaller screens the 1st teaser starts to have the title aligned right and it should always be centered.

Once this is done another review will be needed.

[balco0110]

teaser-media docs - Expandable Slot:

• description should be: Use the “expandable slot” to add content that only shows up on hover. This slot cannot contain any action since it is not shown on mobile devices due to hover interaction.
• the slot color is too dark. use the same color as the "Meta slot" from the story above.
• when i mouse hover and then mouse off there is something breaking.
• chevron in figma is 24x24
• padding bottom should be 16

screenshots tests: Samples: Teaser-Media

• sample 2: if expandable is active the other text should not be visible (delete: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.)
• sample 2: delete copyright and button

screenshots tests: Samples: Teaser-Media

• sample 1: check the high of the button (lg button in 48 high by default)

template:

• check responsiveness on smaller screens the 1st teaser starts to have the title aligned right and it should always be centered.

Once this is done another review will be needed.

I have resolved the comments

[MartaPintoTeixeira]

1 = This is still not working properly:

teaser-media docs - Expandable Slot:

• when i mouse hover and then mouse off there is something breaking.

2 = New feedback to be changed

teaser-media docs - 1st sample

• please compare what we currently have with what you did (it should look like before)

teaser-media docs - variant

• please compare what we currently have with what you did (it should look like before).

teaser-media docs - Default, Media and Headline Slot

• please compare what we currently have with what you did (it should look like before).

teaser-media docs - Meta Slot

• please compare what we currently have with what you did (it should look like before).

teaser-media docs - Expandable Slot

• there is a weire behaviour on mouse hover.
• name the story "Expandable"
• please insert content in the sample as in figma
• check the space between headline and chevron (before interaction). in figma we have gap 16.

teaser-media template - sample 1

• button: View research
• please compare what we currently have with what you did (it should look like before).

teaser-media template - sample 2

• please compare what we currently have with what you did (it should look like before).

teaser-media template - sample 3

• please compare what we currently have with what you did (it should look like before).

teaser-media template - sample 4

• please compare what we currently have with what you did (it should look like before).

teaser-media template - Teaser Media Expandable

• space between title and chevron not as in figma.