Add subtitle to page-title #2030

mictro · 2022-02-02T11:34:04Z

Which issue does this PR close?

This PR closes #811

What is the new behavior?

Extends the page-template with support for adding a subtitle that places itself below the title.
-Facilitates simple subtitles with default styling by adding the subtitle input property (similar to the title input property).
-Facilitates custom subtitles by adding the KirbyPageSubtitle directive to the element that should be used as the subtitle of the page (similar to the KirbyPageTitle directive).

Does this PR introduce a breaking change?

Yes
No

The current spacing below the h1 title heading used with custom title elements (title element with KirbyPageTitle directive) has now been removed.
In cases where a text block immediately following the h1 title heading within a custom title element has lost its intended spacing, the text can be moved to the new custom subtitle element.

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

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

Review

Do a self-review.
Request that the changes are code-reviewed
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 automatically merged to master via automerge.

…/811-subtitle-on-page-title

MadsBuchmann

Got some questions and request for changes. Mostly nitpicky stuff 😄

Looks good tho! Has it been UX reviewed?

libs/designsystem/src/lib/components/page/page.component.ts

libs/designsystem/src/lib/components/page/page.component.spec.ts

apps/cookbook/src/app/examples/page-example/advanced/page-advanced-example.component.ts

apps/cookbook/src/app/showcase/page-showcase/page-showcase.component.html

apps/cookbook/src/app/showcase/page-showcase/page-showcase.component.ts

libs/core/src/scss/base/_typography.scss

libs/designsystem/src/lib/components/page/page.component.scss

Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk>

…ponent.ts Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk>

…nced-example.component.ts Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk>

MadsBuchmann

Looks good to me!

* Added subtitle concept to page component * Remove realtion-bank example * Update libs/designsystem/src/lib/components/page/page.component.spec.ts Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * Update libs/designsystem/src/lib/components/page/page.component.spec.ts Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * Update libs/designsystem/src/lib/components/page/page.component.spec.ts Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * Update libs/designsystem/src/lib/components/page/page.component.spec.ts Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * Update libs/designsystem/src/lib/components/page/page.component.spec.ts Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * Update apps/cookbook/src/app/showcase/page-showcase/page-showcase.component.ts Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * Update apps/cookbook/src/app/examples/page-example/advanced/page-advanced-example.component.ts Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * Correct Inpection Findings Co-authored-by: Michael Troelsen <mxt@bankdata.dk> Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk>

* Add "backgroundImageUrl" and custom css properties for controlling background of the card component (#2047) * ✨ Make it possible to set & control card bg image * ✨ Add 'backgroundImageUrl' input property to card * 📝 Document background-image related API * 📝 Reword table text & remove type column * 📝 Add card with background image examples * 🚚 Move all card examples to a shared module * ✅ Add tests for backgroundImageUrl * 🖊️ Uppercase CSS in documentation Co-authored-by: Jesper Kaltoft Vind <git@jesperkaltoft.dk> * 📝 Expand documentation on card background image I've attempted expanding the documentation such that it explains the pros and cons of each method. * 📝 Modify css background example to use media queries Co-authored-by: Jesper Kaltoft Vind <git@jesperkaltoft.dk> * 🤡 Add missing input properties to mocks (#2084) * Make it possible to use time scale as a custom option for chart (#2082) * Reintroduce TimeScale for ChartJS With stock charts we need Time Cartesian Axis for comparison of securities. When using time as X scale type we need a way providing zero labels (an empty array), since these are autogenerated by TimeScale. In chart-js.service the method labelsToApply needs a way of returning [] * ✨ Allow an empty array to disable labels * 🔥 Remove log statements * ✨ Make it possible to bypass default labels for stock Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * 📝 Remove big Kirby v1 notice (#2086) * ✨ Allow usePopover to be turned on in calendar (#2102) * 📝 Fix dead links to annotation plugin docs (#2110) * 🐛 Push scaling of header to next cycle (#2111) With setTimeout we can avoid ResizeObserver loop exceeded warnings. These are hidden by browsers, but can be picked up by frontend error logging services. It most likely happens because the ResizeObserver observes repeated size changes before the original scaleHeader callback has finished. * ⬆️ Bump follow-redirects from 1.14.7 to 1.14.8 (#2049) Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.14.7 to 1.14.8. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](follow-redirects/follow-redirects@v1.14.7...v1.14.8) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * ⬆️ Bump prismjs from 1.25.0 to 1.27.0 (#2070) Bumps [prismjs](https://github.com/PrismJS/prism) from 1.25.0 to 1.27.0. - [Release notes](https://github.com/PrismJS/prism/releases) - [Changelog](https://github.com/PrismJS/prism/blob/master/CHANGELOG.md) - [Commits](PrismJS/prism@v1.25.0...v1.27.0) --- updated-dependencies: - dependency-name: prismjs dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * ⬆️ Bump url-parse from 1.5.3 to 1.5.10 (#2071) Bumps [url-parse](https://github.com/unshiftio/url-parse) from 1.5.3 to 1.5.10. - [Release notes](https://github.com/unshiftio/url-parse/releases) - [Commits](unshiftio/url-parse@1.5.3...1.5.10) --- updated-dependencies: - dependency-name: url-parse dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * 🔖Bumping version to 5.2.0 (designsystem) * Remove deprecated chart components & highcharts dependencies (#2069) * 🔥 Remove chart-deprecated components folder * 🔥 Remove ChartDeprecated mocks * 🔥 Remove deprecated chart examples * 🔥 Remove deprecated chart showcase * 🔥 Remove deprecated stock chart component * 🔥 Remove deprecated stock chart examples * 🔥 Remove deprecated stock chart showcase * ➖ Remove dependency to highcharts * 📌 Generate new lock file * 📝 Remove highcharts license notice * Add subtitle to page-title (#2030) * Added subtitle concept to page component * Remove realtion-bank example * Update libs/designsystem/src/lib/components/page/page.component.spec.ts Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * Update libs/designsystem/src/lib/components/page/page.component.spec.ts Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * Update libs/designsystem/src/lib/components/page/page.component.spec.ts Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * Update libs/designsystem/src/lib/components/page/page.component.spec.ts Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * Update libs/designsystem/src/lib/components/page/page.component.spec.ts Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * Update apps/cookbook/src/app/showcase/page-showcase/page-showcase.component.ts Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * Update apps/cookbook/src/app/examples/page-example/advanced/page-advanced-example.component.ts Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * Correct Inpection Findings Co-authored-by: Michael Troelsen <mxt@bankdata.dk> Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * 🐛 Reintroduce accidentally removed module import (#2126) * Revert "Remove deprecated chart components & highcharts dependencies (#2069)" (#2127) This reverts commit 6188ee5. * Update Angular to v12 (#2140) * ⬆️ Angular 12 upgrade * 🔨 Use default value for aot comp in cookbook * ⬆️ Upgrade stencil to match support jest v27 * 🚨 Enable Ivy compilation View Engine Compilation is going to be removed in Angular 13. By enabling Ivy, consumers will not have to compile our designsystem with ngcc. See more here: https://blog.angular.io/upcoming-improvements-to-angular-library-distribution-76c02f782aa4. The Ivy engine now catches errors where a module or directive is exposed through KirbyModule, without at the same time being exported by the top level index.ts barrel file. These missing exports are now added. * ✅ Use toHaveComputedStyles to get custom prop * 🚨 Add missing mocks to top level entry point * 👷 Change exports to match generated mocks * 👷 Move badge export We no longer needs to compile with NGCC as we have enabled Ivy compilation. Hooray! * 💚 Add missing mock export * 🔥 Remove TODO. Replaced by issue #2152 * Calculate UTC offset based on correct date (#2115) * 🚧 UTC time experiment * ⚗️ Do not use subtractTimezoneOffset() * 🐛 Remove unneccessary timezone offset * 🐛 Add back offset to preserve existing functionality It seems that the original intent was to simply format a local time as its UTC equivalent, and not adjust it to any specific UTC zone. This is done by consumers, so something like 02:00:00 GMT+0200 becomes 00:00:00 GMT on their end. * ⏪ Revert changes to showcase component Co-authored-by: Jesper Kaltoft <git@jesperkaltoft.dk> * Upgrade prettier and stylelint (#2146) * ⬆️ Upgrade prettier * 💄 Lint and prettify cookbook styles * 🎨 Lint and prettify cookbook ts files * 🎨 Lint and prettify cookbook templates * 🔧 Update prettier and stylelint config * 🎨 Lint and prettify misc project files * 🎨 Lint and prettify designsystem styles * 🤡 Use same line endings across mocks * 🎨 Lint and prettify designsystem spec files * 🎨 Lint and prettify designsystem ts files * 💄 Rename css-class in template * ✅ Fix tab test according to changed css * 🙈 Update ignore files with newline at EOF * ♻️ Increase readability of span * 🔧 Prettify .stylelintrc (whoa, meta!) * ➖ Remove unused depencency * 💄 Replace duplicate ::after with ::before for print * ⏪ Revert unintentional prettier change * 🔥 Remove vendor prefix This is handled by Angular via auto-prefixer. * ⏪ Revert unintentional change to line clamp styles * Allow non-enum Input in components: template literal type solution (#2099) * Enable non-enum input * Update button.component.ts * Use values when enum is mapping * allow use of string values for enum input props * 🏷️ Allow non-enum input types * 🏷️ Update mocks to use template literal types Co-authored-by: Morten Bjerg Gregersen <mgr@bankdata.dk> * Add unit back on item safe area custom property (#2160) * 💄 Add unit back on item safe area custom property * 💄 Make stylelint ignore 0px for custom properties * 💡 Remove stylelint ignores * Add badge mock and update line-endings for page mock (#2170) * 🤡 Run prettier on page mock * 🤡 Run mock gen. script so mocks are up to date * Remove option to inject IconSettings via IconRegistryService constructor (#2171) * 🔥 Remove unused icon config These custom icons are registered in the module (examples.module.ts) and this is most likely leftover functionality from before that. * 🔥 Remove option for injecting icons via ctor * 🔥 Remove injected IconSettings * Remove deprecated okBtnText and cancelBtnText from AlertConfig (#2175) * ♻️ Use correct config properties in examples * ♻️ Rename and use correct properties in alert * 🔥 Remove deprecated config properties * ♻️ Simplify cancelBtn config * ♻️ Rename getter for okBtn to match property name * 🔥 Remove deprecated dim property on ModalConfig (#2177) * 🔥 Remove deprecated 'dataLabels' property (#2178) * Remove deprecated toast danger MessageType (#2181) * 🔥 Remove danger-specific messageType tests * 🔥 Remover danger messageType from Toast * 🔥 Remove use of danger type for toast in cookbook * Remove deprecated list directives (#2184) * 🔥 Remove deprecated list directives * 🔥 Remove outdated section in readme * OnPush change detection for simplest components (#2169) * ⚡️ Use OnPush CD for comps with immutable inputs * ⚡️ Add strategy to additional dumb components * ✅ Migrate tests to use spectator Directly setting the input on the component did not work with OnPush change detection, so spectator is used in alert test now, while we were at it. This way we can interact with the component via setInput(). * ✅ Remove unused provider from alert * ⏪ Revert OnPush for tabs State can be changed internally because 'tabBarBottomHidden' is public, but not an input decorator - while still being used in the template. * ✅ Clean up alert test * ✅ Migrate toggle tests to use spectator Directly setting the input on the component did not work with OnPush change detection, so spectator is used in toggle test now, while we were at it. This way we can interact with the component via setInput(). * ⏪ Revert to default change detection for card * ⏪ Remove default strategy - it is the default * ⏪ Remove unused import Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> Co-authored-by: Troels Strand <troelslenda@gmail.com> Co-authored-by: RasmusKjeldgaard <rkk@bankdata.dk> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Michael T <micbittro@gmail.com> Co-authored-by: Michael Troelsen <mxt@bankdata.dk> Co-authored-by: Morten Bjerg Gregersen <mgr@bankdata.dk>

github-actions bot temporarily deployed to pr-811-subtitle-on-page-title February 2, 2022 11:41 Inactive

mictro self-assigned this Feb 2, 2022

mictro changed the title ~~Added subtitle concept to page component~~ Add subtitle to page-title Feb 2, 2022

mictro linked an issue Feb 2, 2022 that may be closed by this pull request

[BUG] Wrong color of cancel button on action sheet #2018

Closed

8 tasks

mictro removed a link to an issue Feb 2, 2022

[BUG] Wrong color of cancel button on action sheet #2018

Closed

8 tasks

mictro marked this pull request as draft February 2, 2022 11:53

mictro added component:Page enhancement New feature or request 🧑‍🎨 Needs UX labels Feb 2, 2022

mictro force-pushed the enhancement/811-subtitle-on-page-title branch from 20fb0ea to e4ba4be Compare February 3, 2022 09:38

github-actions bot temporarily deployed to pr-811-subtitle-on-page-title February 3, 2022 09:43 Inactive

mictro force-pushed the enhancement/811-subtitle-on-page-title branch from e4ba4be to b7b24d9 Compare February 4, 2022 08:17

github-actions bot temporarily deployed to pr-811-subtitle-on-page-title February 4, 2022 08:23 Inactive

Added subtitle concept to page component

cb5b96e

mictro force-pushed the enhancement/811-subtitle-on-page-title branch from b7b24d9 to cb5b96e Compare February 4, 2022 15:39

github-actions bot temporarily deployed to pr-811-subtitle-on-page-title February 4, 2022 15:44 Inactive

github-actions bot temporarily deployed to pr-811-subtitle-on-page-title February 9, 2022 14:23 Inactive

Remove realtion-bank example

1a47b1e

mictro force-pushed the enhancement/811-subtitle-on-page-title branch from 61aa084 to 1a47b1e Compare February 10, 2022 14:25

github-actions bot temporarily deployed to pr-811-subtitle-on-page-title February 10, 2022 14:31 Inactive

MadsBuchmann linked an issue Feb 14, 2022 that may be closed by this pull request

[Enhancement] Subtitle on page-title #811

Closed

Merge remote-tracking branch 'origin/release/v6.0.0' into enhancement…

6393512

…/811-subtitle-on-page-title

github-actions bot temporarily deployed to pr-811-subtitle-on-page-title February 24, 2022 09:47 Inactive

mictro changed the base branch from main to release/v6.0.0 February 24, 2022 11:45

mictro marked this pull request as ready for review February 24, 2022 12:58

mictro requested a review from MadsBuchmann February 24, 2022 12:59

MadsBuchmann mentioned this pull request Feb 24, 2022

[Enhancement] Modal title should support long titles #843

Closed

MadsBuchmann suggested changes Mar 3, 2022

View reviewed changes

mictro and others added 2 commits March 3, 2022 12:03

Update libs/designsystem/src/lib/components/page/page.component.spec.ts

987ee48

Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk>

Update libs/designsystem/src/lib/components/page/page.component.spec.ts

c8322a2

Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk>

mictro and others added 4 commits March 3, 2022 12:04

Update libs/designsystem/src/lib/components/page/page.component.spec.ts

a4ca959

Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk>

Update libs/designsystem/src/lib/components/page/page.component.spec.ts

9f33add

Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk>

Update libs/designsystem/src/lib/components/page/page.component.spec.ts

728de92

Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk>

Update apps/cookbook/src/app/showcase/page-showcase/page-showcase.com…

cbb4b1d

…ponent.ts Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk>

mictro removed the 🧑‍🎨 Needs UX label Mar 3, 2022

mictro and others added 2 commits March 3, 2022 14:32

Update apps/cookbook/src/app/examples/page-example/advanced/page-adva…

f6e3d9d

…nced-example.component.ts Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk>

Correct Inpection Findings

d9a5d15

MadsBuchmann approved these changes Mar 4, 2022

View reviewed changes

MadsBuchmann merged commit 2898070 into release/v6.0.0 Mar 4, 2022

MadsBuchmann deleted the enhancement/811-subtitle-on-page-title branch March 4, 2022 13:17

This was referenced Jun 14, 2022

Prepare version 6.0.0 #2193

Merged

Release version 6.0.0 #2337

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add subtitle to page-title #2030

Add subtitle to page-title #2030

mictro commented Feb 2, 2022 •

edited

Loading

MadsBuchmann left a comment

MadsBuchmann left a comment

Add subtitle to page-title #2030

Add subtitle to page-title #2030

Conversation

mictro commented Feb 2, 2022 • edited Loading

Which issue does this PR close?

What is the new behavior?

Does this PR introduce a breaking change?

Are there any additional context?

Checklist:

Reminders

Review

MadsBuchmann left a comment

Choose a reason for hiding this comment

MadsBuchmann left a comment

Choose a reason for hiding this comment

mictro commented Feb 2, 2022 •

edited

Loading