diff --git a/.changeset/good-spoons-tie.md b/.changeset/good-spoons-tie.md new file mode 100644 index 0000000000..757d40ce10 --- /dev/null +++ b/.changeset/good-spoons-tie.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-nextjs-integration': patch +'@swisspost/design-system-documentation': patch +--- + +Aligned `width` and `height` percentage classes, after utility update. diff --git a/.changeset/warm-walls-stare.md b/.changeset/warm-walls-stare.md new file mode 100644 index 0000000000..8ec7a47d0a --- /dev/null +++ b/.changeset/warm-walls-stare.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': patch +--- + +Refactored icon declarations to comply with Angular 18's new build system requirements. diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss index cbded0ac45..2b22afd3ed 100644 --- a/packages/components/src/components/post-header/post-header.scss +++ b/packages/components/src/components/post-header/post-header.scss @@ -110,6 +110,10 @@ slot[name='post-logo'] { z-index: 1; inset-block-start: var(--global-header-height); padding-inline: var(--post-core-dimension-8) var(--post-core-dimension-16); + + &.title-header-mobile-extended { + border-bottom: 1px solid var(--post-core-color-sandgrey-012); + } } } diff --git a/packages/components/src/components/post-header/post-header.tsx b/packages/components/src/components/post-header/post-header.tsx index 9e04361563..fa1d21ecb1 100644 --- a/packages/components/src/components/post-header/post-header.tsx +++ b/packages/components/src/components/post-header/post-header.tsx @@ -150,7 +150,12 @@ export class PostHeader { -
+
diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.scss b/packages/components/src/components/post-megadropdown/post-megadropdown.scss index 3871f4d11c..c489f8c48b 100644 --- a/packages/components/src/components/post-megadropdown/post-megadropdown.scss +++ b/packages/components/src/components/post-megadropdown/post-megadropdown.scss @@ -45,6 +45,7 @@ post-popovercontainer { left: 0; width: 100%; height: auto; + border-top: unset; &.slide-in { animation: slide-in; diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/button/button.docs.mdx index 59f10871de..d8743a3ebb 100644 --- a/packages/documentation/src/stories/components/button/button.docs.mdx +++ b/packages/documentation/src/stories/components/button/button.docs.mdx @@ -38,7 +38,7 @@ To achieve that, you can use classes in the format: - `.w-{size}` for the xs breakpoint, - `.w-{breakpoint}-{size}` for breakpoints from sm to xl. -For example, a button with classes `w-100 w-lg-auto` will use all available space only when the viewport size is smaller than `lg`. +For example, a button with classes `w-full w-lg-auto` will use all available space only when the viewport size is smaller than `lg`. To learn more about breakpoints, see the Breakpoints documentation. diff --git a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx index 9cd2c98798..d163752e5c 100644 --- a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx +++ b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx @@ -126,7 +126,7 @@ import SampleCardControlMethods from './web-component/card-control-methods.sampl ### Lined up Change the `width` of a `` component, by putting it (for example) in a grid. - If you like to stretch all `` components within a row to the same `height`, simply add the class `.h-100` to them. + If you like to stretch all `` components within a row to the same `height`, simply add the class `.h-full` to them.
diff --git a/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts index eb5f0a4275..f913fb1705 100644 --- a/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts +++ b/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts @@ -347,7 +347,7 @@ export const LinedUp: Story = {
${Default.render?.( { - class: args.fullHeight ? 'h-100' : null, + class: args.fullHeight ? 'h-full' : null, label: `Checkbox${i}`, description: i === 6 ? '20.- per year' : null, type: args.type, diff --git a/packages/documentation/src/stories/components/card-product/card-product.docs.mdx b/packages/documentation/src/stories/components/card-product/card-product.docs.mdx index b1692e8273..a88c363129 100644 --- a/packages/documentation/src/stories/components/card-product/card-product.docs.mdx +++ b/packages/documentation/src/stories/components/card-product/card-product.docs.mdx @@ -36,7 +36,7 @@ import ProductCardAngularSyncHeights from './card-product.sample.ts?raw'; ### Product Card Group For organizing multiple product cards in a group, utilize the [grid system](/?path=/docs/7240f2ef-216a-490e-9bd8-c0cef19f7b31--docs). -Ensure consistent height by applying the `.h-100` class to all product cards. +Ensure consistent height by applying the `.h-full` class to all product cards. diff --git a/packages/documentation/src/stories/components/card-product/card-product.stories.ts b/packages/documentation/src/stories/components/card-product/card-product.stories.ts index 69ddfe4f01..624a9030da 100644 --- a/packages/documentation/src/stories/components/card-product/card-product.stories.ts +++ b/packages/documentation/src/stories/components/card-product/card-product.stories.ts @@ -134,7 +134,7 @@ export const Groupped: Story = {
`, args: { - cardClasses: ' h-100', + cardClasses: ' h-full', }, }; @@ -224,11 +224,11 @@ export const Multipart: Story = {
- -
@@ -311,11 +311,11 @@ export const Multipart: Story = {
- -
diff --git a/packages/documentation/src/stories/components/checkbox/checkbox.snapshot.stories.ts b/packages/documentation/src/stories/components/checkbox/checkbox.snapshot.stories.ts index a3bc447d70..ff4778d2c1 100644 --- a/packages/documentation/src/stories/components/checkbox/checkbox.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/checkbox/checkbox.snapshot.stories.ts @@ -56,7 +56,7 @@ export const Checkbox: Story = { `; })} -
+
${Inline.render?.({ ...context.args, ...Inline.args }, context)}
`, diff --git a/packages/documentation/src/stories/components/rating/post-rating.snapshot.stories.ts b/packages/documentation/src/stories/components/rating/post-rating.snapshot.stories.ts index 6b43d11484..f4da0bc246 100644 --- a/packages/documentation/src/stories/components/rating/post-rating.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/rating/post-rating.snapshot.stories.ts @@ -18,8 +18,8 @@ export const Rating: Story = { return schemes( () => html`
-
readonly: false
-
readonly: true
+
readonly: false
+
readonly: true
${bombArgs({ stars: [3, 5, 10], @@ -30,10 +30,10 @@ export const Rating: Story = { (args: Args) => html`
-
+
${meta.render?.({ ...context.args, ...args, readonly: false }, context)}
-
+
${meta.render?.({ ...context.args, ...args, readonly: true }, context)}
diff --git a/packages/documentation/src/stories/components/segmented-button/segmented-button.snapshot.stories.ts b/packages/documentation/src/stories/components/segmented-button/segmented-button.snapshot.stories.ts index 309d2a5182..1045932fce 100644 --- a/packages/documentation/src/stories/components/segmented-button/segmented-button.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/segmented-button/segmented-button.snapshot.stories.ts @@ -18,7 +18,7 @@ export const SegmentedButton: Story = { return schemes( scheme => html` -
+
${labelCounts.map(count => { const labels = Array.from({ length: count }, (_, i) => `Label ${i + 1}`); diff --git a/packages/documentation/src/stories/components/select-custom/select-custom-basic.sample.html b/packages/documentation/src/stories/components/select-custom/select-custom-basic.sample.html index 0a98a341b4..4ad7a02e91 100644 --- a/packages/documentation/src/stories/components/select-custom/select-custom-basic.sample.html +++ b/packages/documentation/src/stories/components/select-custom/select-custom-basic.sample.html @@ -12,7 +12,7 @@ Default custom-select -
+