From 89e536beb844e191c0c712ab60b3b4789c3ae63e Mon Sep 17 00:00:00 2001 From: Lars Rickert Date: Thu, 23 Jan 2025 19:06:58 +0100 Subject: [PATCH] feat(OnyxHeadline): support `showAs` property (#2587) Relates to #2451 Add new `showAs` property to allow defining a different visual size instead of the semantical type. ## Checklist - [x] The added / edited code has been documented with [JSDoc](https://jsdoc.app/about-getting-started) - [x] All changes are documented in the documentation app (folder `apps/docs`) - [x] If a new component is added, at least one [Playwright screenshot test](https://github.com/SchwarzIT/onyx/actions/workflows/playwright-screenshots.yml) is added - [x] A changeset is added with `npx changeset add` if your changes should be released as npm package (because they affect the library usage) --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .changeset/great-walls-juggle.md | 5 +++++ .../.vitepress/components/ComponentCard.vue | 2 +- .../.vitepress/components/OnyxTypography.vue | 18 ++++++++++++++++-- .../Headline-visual-sizes--edge-linux.png | Bin 0 -> 61272 bytes .../Headline-visual-sizes--firefox-linux.png | Bin 0 -> 73262 bytes .../Headline-visual-sizes--webkit-linux.png | Bin 0 -> 80725 bytes ...-disabled-loading-skeleton--edge-linux.png | Bin 36340 -> 36318 bytes .../OnyxHeadline/OnyxHeadline.ct.tsx | 13 +++++++++++++ .../components/OnyxHeadline/OnyxHeadline.vue | 5 +++-- .../src/components/OnyxHeadline/types.ts | 8 ++++++-- 10 files changed, 44 insertions(+), 7 deletions(-) create mode 100644 .changeset/great-walls-juggle.md create mode 100644 packages/sit-onyx/playwright/snapshots/components/OnyxHeadline/Headline-visual-sizes--edge-linux.png create mode 100644 packages/sit-onyx/playwright/snapshots/components/OnyxHeadline/Headline-visual-sizes--firefox-linux.png create mode 100644 packages/sit-onyx/playwright/snapshots/components/OnyxHeadline/Headline-visual-sizes--webkit-linux.png diff --git a/.changeset/great-walls-juggle.md b/.changeset/great-walls-juggle.md new file mode 100644 index 0000000000..94cadedde4 --- /dev/null +++ b/.changeset/great-walls-juggle.md @@ -0,0 +1,5 @@ +--- +"sit-onyx": minor +--- + +feat(OnyxHeadline): support `showAs` property diff --git a/apps/docs/src/.vitepress/components/ComponentCard.vue b/apps/docs/src/.vitepress/components/ComponentCard.vue index 84a4b339b2..75101f3db0 100644 --- a/apps/docs/src/.vitepress/components/ComponentCard.vue +++ b/apps/docs/src/.vitepress/components/ComponentCard.vue @@ -33,7 +33,7 @@ const props = defineProps(); :href="props.href" :target="props.href?.startsWith('http') ? '_blank' : '_self'" > - {{ props.name }} + {{ props.name }} diff --git a/apps/docs/src/.vitepress/components/OnyxTypography.vue b/apps/docs/src/.vitepress/components/OnyxTypography.vue index 6a95bb345d..6a5193b268 100644 --- a/apps/docs/src/.vitepress/components/OnyxTypography.vue +++ b/apps/docs/src/.vitepress/components/OnyxTypography.vue @@ -1,5 +1,11 @@