Image Banner: add slots for title and body text

troelslenda commented 1 month ago

Which issue does this PR close?

This PR closes #3670

What is the new behavior?

Title and body text can now be provided as custom/slotted content if title and bodyText string inputs do not suffice. Additionally an option to adjust min-height is fix

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Are there any additional context?

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Reminders

[x] Make sure you have implemented tests following the guidelines in: "The good: Test".
[x] Make sure you have updated the cookbook with examples and showcases (for bug fixes, enhancements & new components).

Review

[x] Determine if your changes are a fix, feature or breaking-change, and add the matching label to your PR. If it is tooling, dependency updates or similar, add ignore-for-release.
[x] Do a self-review.
[x] Request that the changes are code-reviewed
[x] Request that the changes are UX reviewed (only necessary if your PR introduces visual changes)

When the pull request has been approved it will be merged to develop by Team Kirby.

RasmusKjeldgaard commented 1 month ago

I think these are some solid improvements!

But as you also hint at in the issue, individual inputs for the component can become bloated over time - later we might need to add hasMaximumHeight, onlyTruncateOnSmallScreen etc.

Instead we could allow users to compose this, if they need something else than the default behavior. So for instance for the title, we can add <ng-content select="[title]"></ng-content>, and then consumers can do

<kirby-x-image-banner>
    <p title>My custom title!</p>
</kirby-x-image-banner>

Same approach can be used for body text.

Will get back to you on the min-height issue after talking with @henrikvoetmand.

troelslenda commented 3 weeks ago

@RasmusKjeldgaard The changes were approved by @henrikvoetmand I have updated the PR to use slotted properties instead.

kirbydesign / designsystem