From 6b02f8cd3774ddeb8e190c7c3239777f853e6454 Mon Sep 17 00:00:00 2001 From: Swiss Post Bot <103635272+swisspost-bot@users.noreply.github.com> Date: Mon, 11 Nov 2024 11:18:36 +0100 Subject: [PATCH 01/18] chore(tokens): :art: update tokens (#3953) Merge this PR to update the tokens in the main branch. --------- Co-authored-by: Travaglini Alessio <158268546+Vandapanda@users.noreply.github.com> --- .../tokens/tokensstudio-generated/tokens.json | 950 ++++++++++++------ 1 file changed, 645 insertions(+), 305 deletions(-) diff --git a/packages/tokens/tokensstudio-generated/tokens.json b/packages/tokens/tokensstudio-generated/tokens.json index 027dc57011..75599a9cd8 100644 --- a/packages/tokens/tokensstudio-generated/tokens.json +++ b/packages/tokens/tokensstudio-generated/tokens.json @@ -49,6 +49,14 @@ "blue-light": { "$type": "color", "$value": "#BFD3E7" + }, + "green-night": { + "$type": "color", + "$value": "#55E543" + }, + "red-night": { + "$type": "color", + "$value": "#FFC2C2" } }, "sandgrey": { @@ -265,7 +273,7 @@ }, "17": { "$type": "dimension", - "$value": "17px" + "$value": "17" }, "18": { "$type": "dimension", @@ -285,7 +293,7 @@ }, "23": { "$type": "dimension", - "$value": "23px" + "$value": "23" }, "24": { "$type": "dimension", @@ -389,7 +397,7 @@ }, "n2": { "$type": "dimension", - "$value": "-2px" + "$value": "-2" }, "15-5": { "$type": "dimension", @@ -405,7 +413,15 @@ }, "26-5": { "$type": "dimension", - "$value": "26.5px" + "$value": "26.5" + }, + "25-5": { + "$type": "dimension", + "$value": "25.5" + }, + "24-5": { + "$type": "dimension", + "$value": "24.5" } }, "font-weight": { @@ -752,6 +768,14 @@ "neutral": { "$type": "color", "$value": "{post.core.color.sandgrey.006}" + }, + "success-solo": { + "$type": "color", + "$value": "{post.core.color.notification.green}" + }, + "error-solo": { + "$type": "color", + "$value": "{post.core.color.notification.red}" } }, "interactive": { @@ -1510,6 +1534,14 @@ "information-light": { "$type": "color", "$value": "{post.core.color.notification.blue-light}" + }, + "success-solo": { + "$type": "color", + "$value": "{post.core.color.notification.green-night}" + }, + "error-solo": { + "$type": "color", + "$value": "{post.core.color.notification.red-night}" } }, "interactive": { @@ -2148,7 +2180,7 @@ } }, "accent": { - "color-scheme": { + "bg-scheme": { "1": { "$type": "text", "$value": "{post.core.bg-scheme.dark}" @@ -2617,6 +2649,14 @@ "27": { "$type": "spacing", "$value": "{post.core.dimension.17}" + }, + "28": { + "$type": "spacing", + "$value": "{post.core.dimension.17}" + }, + "29": { + "$type": "spacing", + "$value": "{post.core.dimension.25-5}" } } }, @@ -2910,6 +2950,16 @@ } } } + }, + "position": { + "1": { + "$type": "dimension", + "$value": "{post.core.dimension.32}" + }, + "2": { + "$type": "dimension", + "$value": "{post.core.dimension.18}" + } } } } @@ -3203,6 +3253,14 @@ "27": { "$type": "spacing", "$value": "{post.core.dimension.12}" + }, + "28": { + "$type": "spacing", + "$value": "{post.core.dimension.16}" + }, + "29": { + "$type": "spacing", + "$value": "{post.core.dimension.23}" } }, "inline": { @@ -3454,6 +3512,12 @@ "$type": "borderWidth", "$value": "{post.core.dimension.6}" } + }, + "position": { + "1": { + "$type": "dimension", + "$value": "{post.core.dimension.24}" + } } } } @@ -3781,6 +3845,14 @@ "27": { "$type": "spacing", "$value": "{post.core.dimension.17-5}" + }, + "28": { + "$type": "spacing", + "$value": "{post.core.dimension.17-5}" + }, + "29": { + "$type": "spacing", + "$value": "{post.core.dimension.24-5}" } } }, @@ -4008,6 +4080,12 @@ "$type": "borderWidth", "$value": "{post.core.dimension.4}" } + }, + "position": { + "1": { + "$type": "dimension", + "$value": "{post.core.dimension.16}" + } } } } @@ -4047,7 +4125,7 @@ "Theme/Post": { "post": { "theme": { - "accent": { + "palettes": { "bg-scheme": { "brand": { "$type": "text", @@ -4055,7 +4133,7 @@ }, "emphasis": { "$type": "text", - "$value": "{post.core.bg-scheme.dark}" + "$value": "{post.scheme.accent.bg-scheme.2}" }, "default": { "$type": "text", @@ -4063,12 +4141,12 @@ }, "alternate": { "$type": "text", - "$value": "{post.scheme.accent.bg-scheme.2}" + "$value": "{post.scheme.accent.bg-scheme.1}" } } }, "color": { - "accent": { + "palettes": { "default": { "bg": { "$type": "color", @@ -4089,7 +4167,7 @@ "$value": "{post.scheme.color.surface.brand.fg}" } }, - "emphasis": { + "accent": { "bg": { "$type": "color", "$value": "{post.scheme.color.surface.emphasis.bg}" @@ -4117,7 +4195,7 @@ "Theme/Cargo": { "post": { "theme": { - "accent": { + "palettes": { "bg-scheme": { "brand": { "$type": "text", @@ -4126,11 +4204,39 @@ "emphasis": { "$type": "text", "$value": "{post.core.bg-scheme.light}" + }, + "default": { + "$type": "text", + "$value": "{post.scheme.accent.bg-scheme.1}" + }, + "alternate": { + "$type": "text", + "$value": "{post.scheme.accent.bg-scheme.1}" } } }, "color": { - "accent": { + "palettes": { + "default": { + "bg": { + "$type": "color", + "$value": "{post.scheme.color.surface.default.bg}" + }, + "fg": { + "$type": "color", + "$value": "{post.scheme.color.surface.default.fg}" + } + }, + "alternate": { + "bg": { + "$type": "color", + "$value": "{post.scheme.color.surface.alternate.bg}" + }, + "fg": { + "$type": "color", + "$value": "{post.scheme.color.surface.alternate.fg}" + } + }, "brand": { "bg": { "$type": "color", @@ -4141,7 +4247,7 @@ "$value": "{post.cargo.scheme.color.surface.brand.fg-accent}" } }, - "emphasis": { + "accent": { "bg": { "$type": "color", "$value": "{post.cargo.scheme.color.surface.emphasis.bg}" @@ -4865,6 +4971,66 @@ } } }, + "Components/Blockquote": { + "post": { + "blockquote": { + "border-width": { + "left": { + "$type": "borderWidth", + "$value": "{post.device.border-width.quote}" + } + }, + "border": { + "left": { + "color": { + "$type": "color", + "$value": "{post.scheme.color.surface.default.stroke}" + }, + "style": { + "$type": "other", + "$value": "{post.core.border-style.solid}" + } + } + }, + "margin": { + "block": { + "$type": "spacing", + "$value": "{post.device.spacing.margin.5}" + }, + "inline": { + "$type": "spacing", + "$value": "{post.device.spacing.margin.6}" + } + }, + "padding": { + "inline": { + "start": { + "$type": "spacing", + "$value": "{post.core.dimension.20}" + }, + "end": { + "$type": "spacing", + "$value": "{post.core.dimension.24}" + } + } + }, + "gap": { + "inline": { + "$type": "spacing", + "$value": "{post.core.dimension.16}" + } + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{post.device.font-weight.bold}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{post.device.font-size.5}" + } + } + } + }, "Components/Breadcrumb": { "post": { "breadcrumb": { @@ -5340,14 +5506,6 @@ "$type": "color", "$value": "{post.scheme.color.interactive.primary.disabled.fg1}" }, - "selected-bg": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.selected.bg1}" - }, - "selected-fg": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.selected.fg1}" - }, "enabled-stroke": { "$type": "color", "$value": "{post.scheme.color.interactive.primary.enabled.stroke}" @@ -5356,10 +5514,6 @@ "$type": "color", "$value": "{post.scheme.color.interactive.primary.hover.stroke}" }, - "selected-stroke": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.selected.stroke1}" - }, "disabled-stroke": { "$type": "color", "$value": "{post.scheme.color.interactive.primary.disabled.stroke}" @@ -5479,6 +5633,60 @@ } } }, + "Components/Container": { + "post": { + "grid": { + "gutter": { + "xl": { + "$type": "spacing", + "$value": "{post.core.dimension.24}" + }, + "lg": { + "$type": "spacing", + "$value": "{post.core.dimension.24}" + }, + "md": { + "$type": "spacing", + "$value": "{post.core.dimension.16}" + }, + "sm": { + "$type": "spacing", + "$value": "{post.core.dimension.16}" + }, + "xs": { + "$type": "spacing", + "$value": "{post.core.dimension.16}" + } + }, + "margin": { + "xl": { + "$type": "spacing", + "$value": "auto" + }, + "lg": { + "$type": "spacing", + "$value": "{post.core.dimension.40}" + }, + "md": { + "$type": "spacing", + "$value": "{post.core.dimension.40}" + }, + "sm": { + "$type": "spacing", + "$value": "{post.core.dimension.16}" + }, + "xs": { + "$type": "spacing", + "$value": "{post.core.dimension.16}" + } + }, + "max-width": { + "$type": "spacing", + "$value": "{post.core.dimension.1280}" + } + } + } + }, "Components/Dropdown": { "post": { "dropdown": { @@ -6526,72 +6734,20 @@ } } }, - "Components/Quote": { + "Components/Radio button": { "post": { - "quote": { - "border-width": { - "left": { - "$type": "borderWidth", - "$value": "{post.device.border-width.quote}" - } - }, - "border": { - "left": { - "color": { - "$type": "color", - "$value": "{post.scheme.color.surface.default.stroke}" - }, - "style": { - "$type": "other", - "$value": "{post.core.border-style.solid}" - } - } + "radio-button": { + "enabled-bg": { + "$type": "color", + "$value": "{post.scheme.color.interactive.primary.enabled.bg1}" }, - "margin": { - "block": { - "$type": "spacing", - "$value": "{post.device.spacing.margin.5}" - }, - "inline": { - "$type": "spacing", - "$value": "{post.device.spacing.margin.6}" - } + "enabled-fg": { + "$type": "color", + "$value": "{post.scheme.color.interactive.primary.enabled.fg1}" }, - "padding": { - "inline": { - "start": { - "$type": "spacing", - "$value": "{post.core.dimension.20}" - }, - "end": { - "$type": "spacing", - "$value": "{post.core.dimension.24}" - } - } - }, - "gap": { - "inline": { - "$type": "spacing", - "$value": "{post.core.dimension.16}" - } - } - } - } - }, - "Components/Radio button": { - "post": { - "radio-button": { - "enabled-bg": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.enabled.bg1}" - }, - "enabled-fg": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.enabled.fg1}" - }, - "hover-bg": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.hover.bg}" + "hover-bg": { + "$type": "color", + "$value": "{post.scheme.color.interactive.primary.hover.bg}" }, "hover-fg": { "$type": "color", @@ -6605,14 +6761,6 @@ "$type": "color", "$value": "{post.scheme.color.interactive.primary.disabled.fg1}" }, - "selected-bg": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.selected.bg1}" - }, - "selected-fg": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.selected.fg1}" - }, "enabled-stroke": { "$type": "color", "$value": "{post.scheme.color.interactive.primary.enabled.stroke}" @@ -6625,10 +6773,6 @@ "$type": "color", "$value": "{post.scheme.color.interactive.primary.disabled.stroke}" }, - "selected-stroke": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.selected.stroke1}" - }, "gap": { "block": { "group": { @@ -6640,10 +6784,6 @@ "text-start": { "$type": "spacing", "$value": "{post.device.spacing.gap.inline.12}" - }, - "group": { - "$type": "spacing", - "$value": "tbd" } } }, @@ -7587,51 +7727,49 @@ } } }, - "spacing": { - "gap": { - "inline": { - "1": { - "$type": "spacing", - "$value": "{post.device.spacing.gap.1}" - }, - "2": { - "$type": "spacing", - "$value": "{post.device.spacing.gap.inline.4}" - } + "gap": { + "inline": { + "1": { + "$type": "spacing", + "$value": "{post.device.spacing.gap.1}" + }, + "2": { + "$type": "spacing", + "$value": "{post.device.spacing.gap.inline.4}" + } + } + }, + "padding": { + "block": { + "text1": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.1}" + }, + "text2": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.3}" + }, + "text-assist": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.5}" + }, + "text5": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.2}" } }, - "padding": { - "block": { - "text1": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.block.1}" - }, - "text2": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.block.3}" - }, - "text-assist": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.block.5}" - }, - "text5": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.block.2}" - } + "inline": { + "start": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.inline.1}" }, - "inline": { - "text-start": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.inline.1}" - }, - "text-end": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.3}" - }, - "text-assist": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.2}" - } + "end": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.3}" + }, + "text-assist": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.2}" } } }, @@ -7646,6 +7784,88 @@ "$type": "borderRadius", "$value": "{post.device.border-radius.1}" } + }, + "border-width": { + "$type": "borderWidth", + "$value": "{post.device.border-width.default}" + }, + "border-style": { + "default": { + "$type": "other", + "$value": "{post.core.border-style.solid}" + }, + "disabled": { + "$type": "other", + "$value": "{post.core.border-style.dash}" + } + }, + "empty": { + "padding": { + "block": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.1}" + } + } + }, + "label": { + "empty": { + "padding": { + "block": { + "start": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.28}" + } + }, + "inline": { + "start": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.5}" + }, + "end": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.inline.4}" + } + } + } + }, + "validated": { + "padding": { + "inline": { + "end": { + "$type": "spacing", + "$value": "{post.core.dimension.48}" + } + } + } + } + }, + "filled": { + "padding": { + "block": { + "start": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.29}" + }, + "end": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.3}" + } + } + } + } + } + }, + "input": { + "validation": { + "icon": { + "position": { + "inline": { + "end": { + "$type": "dimension", + "$value": "{post.device.position.2}" + } + } + } } } } @@ -7758,10 +7978,74 @@ } } }, + "Components/Floating button": { + "post": { + "floating-button": { + "position": { + "right": { + "$type": "dimension", + "$value": "{post.device.grid.padding.inline.container}" + }, + "top": { + "$type": "dimension", + "$value": "{post.device.position.1}" + } + }, + "enabled-fg": { + "$type": "color", + "$value": "{post.scheme.color.interactive.button.secondary.enabled.fg}" + }, + "enabled-bg": { + "$type": "color", + "$value": "{post.scheme.color.interactive.button.secondary.enabled.bg}" + }, + "enabled-border": { + "$type": "color", + "$value": "{post.scheme.color.interactive.button.secondary.enabled.stroke}" + }, + "hover-fg": { + "$type": "color", + "$value": "{post.scheme.color.interactive.button.secondary.hover.fg}" + }, + "hover-bg": { + "$type": "color", + "$value": "{post.scheme.color.interactive.button.secondary.hover.bg}" + }, + "hover-border": { + "$type": "color", + "$value": "{post.scheme.color.interactive.button.secondary.hover.stroke}" + }, + "size": { + "outer": { + "$type": "sizing", + "$value": "{post.device.sizing.interactive.button.height.2}" + }, + "icon": { + "$type": "sizing", + "$value": "{post.device.sizing.interactive.button.icon.3}" + } + }, + "border-width": { + "$type": "borderWidth", + "$value": "{post.device.border-width.default}" + }, + "border-radius": { + "round": { + "$type": "borderRadius", + "$value": "{post.device.border-radius.round}" + } + }, + "elevation": { + "$type": "boxShadow", + "$value": "{post.device.elevation.300}" + } + } + } + }, "Components/Validation": { "post": { "validation": { - "list": { + "group": { "gap": { "inline": { "$type": "spacing", @@ -7775,15 +8059,41 @@ "$value": "{post.device.spacing.padding.12}" } } + }, + "icon": { + "size": { + "$type": "sizing", + "$value": "{post.device.sizing.interactive.icon.size}" + }, + "padding": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.1}" + } } }, "error": { "$type": "color", - "$value": "{post.scheme.color.signal.error-dark}" + "$value": "{post.scheme.color.signal.error-solo}" }, "success": { "$type": "color", - "$value": "{post.scheme.color.signal.success-dark}" + "$value": "{post.scheme.color.signal.success-solo}" + }, + "input": { + "padding": { + "block": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.5}" + }, + "inline": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.2}" + } + } + }, + "font-size": { + "$type": "fontSizes", + "$value": "{post.device.font-size.9}" } } } @@ -7961,11 +8271,11 @@ "small": { "$type": "typography", "$value": { - "fontFamily": "{post.device.font-family.default}", - "fontWeight": "{post.device.font-weight.regular}", + "fontFamily": "{post.body.font-family}", + "fontWeight": "{post.body.font-weight}", "fontSize": "{post.device.font-size.9}", - "lineHeight": "{post.device.line-height.label}", - "letterSpacing": "{post.core.letter-spacing.default}" + "lineHeight": "{post.body.line-height}", + "letterSpacing": "{post.body.letter-spacing}" } }, "smaller": { @@ -8208,7 +8518,7 @@ }, "auto": { "$type": "spacing", - "$value": "\"auto\"" + "$value": "auto" } }, "padding": { @@ -8581,64 +8891,76 @@ } } }, - "Helpers/Palette": { + "Palettes": { "post": { - "helper": { + "palettes": { "color": { "default": { "bg": { "$type": "color", - "$value": "{post.theme.color.accent.default.bg}" + "$value": "{post.theme.color.palettes.default.bg}" }, "fg": { "$type": "color", - "$value": "{post.theme.color.accent.default.fg}" - }, - "bg-scheme": { - "$type": "text", - "$value": "{post.theme.accent.bg-scheme.default}" + "$value": "{post.theme.color.palettes.default.fg}" } }, "alternate": { "bg": { "$type": "color", - "$value": "{post.theme.color.accent.alternate.bg}" + "$value": "{post.theme.color.palettes.alternate.bg}" }, "fg": { "$type": "color", - "$value": "{post.theme.color.accent.alternate.fg}" - }, - "bg-scheme": { - "$type": "text", - "$value": "{post.theme.accent.bg-scheme.alternate}" + "$value": "{post.theme.color.palettes.alternate.fg}" } }, "brand": { "bg": { "$type": "color", - "$value": "{post.theme.color.accent.brand.bg}" + "$value": "{post.theme.color.palettes.brand.bg}" }, "fg": { "$type": "color", - "$value": "{post.theme.color.accent.brand.fg}" - }, - "bg-scheme": { - "$type": "text", - "$value": "{post.theme.accent.bg-scheme.brand}" + "$value": "{post.theme.color.palettes.brand.fg}" } }, - "emphasis": { + "accent": { "bg": { "$type": "color", - "$value": "{post.theme.color.accent.emphasis.bg}" + "$value": "{post.theme.color.palettes.accent.bg}" }, "fg": { "$type": "color", - "$value": "{post.theme.color.accent.emphasis.fg}" - }, + "$value": "{post.theme.color.palettes.accent.fg}" + } + } + } + }, + "helper": { + "color": { + "default": { + "bg-scheme": { + "$type": "text", + "$value": "{post.theme.palettes.bg-scheme.default}" + } + }, + "alternate": { "bg-scheme": { "$type": "text", - "$value": "{post.theme.accent.bg-scheme.emphasis}" + "$value": "{post.theme.palettes.bg-scheme.alternate}" + } + }, + "brand": { + "bg-scheme": { + "$type": "text", + "$value": "{post.theme.palettes.bg-scheme.brand}" + } + }, + "accent": { + "bg-scheme": { + "$type": "text", + "$value": "{post.theme.palettes.bg-scheme.emphasis}" } } } @@ -8690,8 +9012,7 @@ "post.core.elevation.5": "S:abb94bfe7966ae2690516196d25db0b65df759e2," }, "selectedTokenSets": { - "core": "enabled", - "Helpers/Palette": "disabled" + "core": "enabled" }, "$figmaCollectionId": "VariableCollectionId:718:1595", "$figmaModeId": "718:0", @@ -8707,6 +9028,8 @@ "post.core.color.notification.red-light": "dc8a3f925a29ec749bed302314c141a7483ca160", "post.core.color.notification.orange-light": "d5f216e93abaa8bd3b7be2708846595265f69acb", "post.core.color.notification.blue-light": "96e994c2e2920dcba3de3f9a2ba7b43bf914cb79", + "post.core.color.notification.green-night": "3199517b27ac3fe0ab99e52e1b4721f07491796d", + "post.core.color.notification.red-night": "f6e214da94b642f7eb2b0593c1e2da44e88749ba", "post.core.color.sandgrey.100": "3f0c5233089d823bb75769a5e022748cef8d6beb", "post.core.color.sandgrey.000": "0f66c4e1b53dbf13095454ed0247b0e8c3d889e0", "post.core.color.sandgrey.002": "e9a3ff986fba3d9d8d34a948ee34993b206ddf1c", @@ -8827,8 +9150,7 @@ "$figmaStyleReferences": {}, "selectedTokenSets": { "core": "source", - "Scheme/Light": "enabled", - "Helpers/Palette": "disabled" + "Scheme/Light": "enabled" }, "group": "Scheme", "$figmaCollectionId": "VariableCollectionId:718:1666", @@ -8842,6 +9164,8 @@ "post.scheme.color.signal.warning-light": "89302ce07bdf3dda8857ae055241ba5e55af16c7", "post.scheme.color.signal.information-dark": "04907dc5972eef19d828ea38aafba62220824b5c", "post.scheme.color.signal.information-light": "92a36e527934b27f741ef1d21ccd77f46081bcea", + "post.scheme.color.signal.success-solo": "005074d4749ba0d64a11e8a5c742c48631c98dca", + "post.scheme.color.signal.error-solo": "93e0cd4e7a5f9b2a33a76c9c0f3ab60dc5543f66", "post.scheme.color.interactive.button.primary.enabled.fg": "2a55e0da7a6a77af2ab682cfee46da43264624cf", "post.scheme.color.interactive.button.primary.enabled.bg": "cb811102b963d3ff5f0cfd0cdadb6d1de116e562", "post.scheme.color.interactive.button.primary.enabled.stroke": "0a8ee2da5e2d582cb354ee8710efaef60c332a75", @@ -8980,10 +9304,10 @@ "post.scheme.color.notification.badge.fg": "48ff724df33b9947e7e74a729c5dc4a7c930f58c", "post.scheme.color.notification.badge.stroke": "3b53b100fef4f7aa9a97b64e7d2fa8fc9c51aba2", "post.scheme.color.notification.popover.hover": "9e2793c01c18d6947c2d4e898afcb379426d952c", - "post.scheme.color.signal.neutral-dark": "790da7ad43fa67de3b2da99582d332791fb09e9f", - "post.scheme.color.signal.neutral": "daad7eeff08d93aeed6c1ad67af23e58bdffd198", "post.scheme.accent.bg-scheme.1": "a7a55881dbc34e6d6b85f0bd30188fb164677678", "post.scheme.accent.bg-scheme.2": "a343e732fc434c2a0b9c1597748d8e12a1755aed", + "post.scheme.color.signal.neutral-dark": "790da7ad43fa67de3b2da99582d332791fb09e9f", + "post.scheme.color.signal.neutral": "daad7eeff08d93aeed6c1ad67af23e58bdffd198", "post.cargo.scheme.color.surface.default.bg": "41eb3ffd4461ead71c3379a48099d9c674aab882", "post.cargo.scheme.color.surface.default.fg": "d42f699b9bbf506aee792a6a5d28a01f8fdc3078", "post.cargo.scheme.color.surface.default.stroke": "68a8156f2b87010e07a024843e8efbbdf62022d3", @@ -9006,8 +9330,7 @@ "selectedTokenSets": { "core": "source", "Scheme/Light": "enabled", - "Scheme/Dark": "enabled", - "Helpers/Palette": "disabled" + "Scheme/Dark": "enabled" }, "group": "Scheme", "$figmaCollectionId": "VariableCollectionId:718:1666", @@ -9023,6 +9346,8 @@ "post.scheme.color.signal.information-light": "92a36e527934b27f741ef1d21ccd77f46081bcea", "post.scheme.color.signal.neutral-dark": "790da7ad43fa67de3b2da99582d332791fb09e9f", "post.scheme.color.signal.neutral": "daad7eeff08d93aeed6c1ad67af23e58bdffd198", + "post.scheme.color.signal.success-solo": "005074d4749ba0d64a11e8a5c742c48631c98dca", + "post.scheme.color.signal.error-solo": "93e0cd4e7a5f9b2a33a76c9c0f3ab60dc5543f66", "post.scheme.color.interactive.button.primary.enabled.fg": "2a55e0da7a6a77af2ab682cfee46da43264624cf", "post.scheme.color.interactive.button.primary.enabled.bg": "cb811102b963d3ff5f0cfd0cdadb6d1de116e562", "post.scheme.color.interactive.button.primary.enabled.stroke": "0a8ee2da5e2d582cb354ee8710efaef60c332a75", @@ -9175,9 +9500,7 @@ "post.cargo.scheme.color.surface.brand.fg-accent": "15eac3957d30e8b21001a30f17a62fd362e0c5f0", "post.cargo.scheme.color.surface.emphasis.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6", "post.cargo.scheme.color.surface.emphasis.fg": "e724294b65aca52dcb29118010534f0482bd0881", - "post.cargo.scheme.color.surface.emphasis.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2", - "post.scheme.accent.color-scheme.1": "d839255ce134d92f7329c05fa6de12dbf8070dae", - "post.scheme.accent.color-scheme.2": "96cf7a6141a4e43c6fe044888d7d04c367bf89bc" + "post.cargo.scheme.color.surface.emphasis.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2" } }, { @@ -9186,8 +9509,7 @@ "$figmaStyleReferences": {}, "selectedTokenSets": { "core": "source", - "Device/Desktop": "enabled", - "Helpers/Palette": "disabled" + "Device/Desktop": "enabled" }, "group": "Device", "$figmaCollectionId": "VariableCollectionId:718:1733", @@ -9261,6 +9583,8 @@ "post.device.spacing.padding.inline.7": "119d660b20f161bb94da756fdf2bc0c889115aaa", "post.device.spacing.padding.inline.9": "cc8ef1e866b261b2cd183c99e60f5eb3ee64b724", "post.device.spacing.margin.4": "da53f4155b9f08ff30bddf3a07a176a6d7eeb94b", + "post.device.spacing.margin.5": "6b9e8903badb94a863a91be42b4cc6c9468c6038", + "post.device.spacing.margin.6": "b2fad29f5f794f25b5ad4b6969e8e19bbd1b62aa", "post.device.sizing.interactive.icon.height": "23ca5ccbf3e98e4780aa20aef636cb50fad8809e", "post.device.sizing.interactive.icon.width": "8fea35207b61496ef007e6cf83e7983d1386be76", "post.device.sizing.interactive.icon.size": "a7269590e4d43349d7c74194f91278bacc6d7955", @@ -9298,8 +9622,7 @@ "post.device.grid.sizing.gutter": "c96f1602983aa56f2a1a13cbba9b908b06fd0e05", "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c", "post.device.border-width.quote": "1c2f3d93f282058f554db3737d1b131c886b81f4", - "post.device.spacing.margin.5": "6b9e8903badb94a863a91be42b4cc6c9468c6038", - "post.device.spacing.margin.6": "b2fad29f5f794f25b5ad4b6969e8e19bbd1b62aa", + "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288", "post.device.spacing.gap.4": "18a97621a6b8cd79f7f4424a6afbc99f49a4104e", "post.device.spacing.gap.5": "cd8bc19de4a06c78cf89a9c2ee34309a0f517e9b", "post.device.spacing.gap.6": "d3f0e06bad0472f9dec52560b44068444b9f9676", @@ -9360,8 +9683,7 @@ "selectedTokenSets": { "core": "source", "Device/Desktop": "enabled", - "Device/Tablet": "enabled", - "Helpers/Palette": "disabled" + "Device/Tablet": "enabled" }, "group": "Device", "$figmaCollectionId": "VariableCollectionId:718:1733", @@ -9441,6 +9763,8 @@ "post.device.spacing.margin.2": "a03e875bcb67b48b5fe0cd53d733c77d6824e86f", "post.device.spacing.margin.3": "eaf0d9d533154fc10cd38699804e027093e4d482", "post.device.spacing.margin.4": "da53f4155b9f08ff30bddf3a07a176a6d7eeb94b", + "post.device.spacing.margin.5": "6b9e8903badb94a863a91be42b4cc6c9468c6038", + "post.device.spacing.margin.6": "b2fad29f5f794f25b5ad4b6969e8e19bbd1b62aa", "post.device.sizing.interactive.icon.height": "23ca5ccbf3e98e4780aa20aef636cb50fad8809e", "post.device.sizing.interactive.icon.width": "8fea35207b61496ef007e6cf83e7983d1386be76", "post.device.sizing.interactive.icon.size": "a7269590e4d43349d7c74194f91278bacc6d7955", @@ -9475,8 +9799,7 @@ "post.device.font-weight.black": "e4cfc49770e938bbde9dd1499500d3c90db21bbf", "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c", "post.device.border-width.quote": "1c2f3d93f282058f554db3737d1b131c886b81f4", - "post.device.spacing.margin.5": "6b9e8903badb94a863a91be42b4cc6c9468c6038", - "post.device.spacing.margin.6": "b2fad29f5f794f25b5ad4b6969e8e19bbd1b62aa", + "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288", "post.device.spacing.gap.1": "303b065d5f8bf9049661db8845f2d1e59a4c08b0", "post.device.spacing.gap.2": "0e3be5c3cc6b23c8827bc5fb005a234c558199fc", "post.device.spacing.gap.3": "91cd08dcbce598d4f63e04fc4e646796d943a377", @@ -9541,8 +9864,7 @@ "core": "source", "Device/Desktop": "enabled", "Device/Tablet": "enabled", - "Device/Mobile": "enabled", - "Helpers/Palette": "disabled" + "Device/Mobile": "enabled" }, "group": "Device", "$figmaCollectionId": "VariableCollectionId:718:1733", @@ -9655,6 +9977,8 @@ "post.device.spacing.margin.2": "a03e875bcb67b48b5fe0cd53d733c77d6824e86f", "post.device.spacing.margin.3": "eaf0d9d533154fc10cd38699804e027093e4d482", "post.device.spacing.margin.4": "da53f4155b9f08ff30bddf3a07a176a6d7eeb94b", + "post.device.spacing.margin.5": "6b9e8903badb94a863a91be42b4cc6c9468c6038", + "post.device.spacing.margin.6": "b2fad29f5f794f25b5ad4b6969e8e19bbd1b62aa", "post.device.sizing.interactive.icon.height": "23ca5ccbf3e98e4780aa20aef636cb50fad8809e", "post.device.sizing.interactive.icon.width": "8fea35207b61496ef007e6cf83e7983d1386be76", "post.device.sizing.interactive.icon.size": "a7269590e4d43349d7c74194f91278bacc6d7955", @@ -9700,12 +10024,11 @@ "post.device.border-width.focus": "36b85b12779fa51b466bbb29ec9f9a54b1ab7dcc", "post.device.border-width.alternative2": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30", "post.device.border-width.alternative1": "3304b579ebb55075ec45251e69d38c803cecf378", + "post.device.border-width.quote": "1c2f3d93f282058f554db3737d1b131c886b81f4", "post.device.grid.sizing.gutter": "c96f1602983aa56f2a1a13cbba9b908b06fd0e05", "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9", "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c", - "post.device.border-width.quote": "1c2f3d93f282058f554db3737d1b131c886b81f4", - "post.device.spacing.margin.5": "6b9e8903badb94a863a91be42b4cc6c9468c6038", - "post.device.spacing.margin.6": "b2fad29f5f794f25b5ad4b6969e8e19bbd1b62aa" + "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288" } }, { @@ -9719,8 +10042,7 @@ "Device/Mobile": "source", "Channel/EDK": "enabled", "Scheme/Light": "source", - "Scheme/Dark": "source", - "Helpers/Palette": "disabled" + "Scheme/Dark": "source" }, "group": "Channel", "$figmaCollectionId": "VariableCollectionId:718:1734", @@ -9741,8 +10063,7 @@ "Channel/EDK": "enabled", "Channel/IDK": "enabled", "Scheme/Light": "source", - "Scheme/Dark": "source", - "Helpers/Palette": "disabled" + "Scheme/Dark": "source" }, "group": "Channel", "$figmaCollectionId": "VariableCollectionId:718:1734", @@ -9773,8 +10094,7 @@ "Elements/ListBullet": "enabled", "Elements/ListNumber": "enabled", "Scheme/Light": "source", - "Scheme/Dark": "source", - "Helpers/Palette": "disabled" + "Scheme/Dark": "source" }, "$figmaCollectionId": "VariableCollectionId:3180:16769", "$figmaModeId": "3180:1", @@ -9843,8 +10163,7 @@ "Theme/Post": "source", "Utilities/Color": "enabled", "Scheme/Light": "source", - "Scheme/Dark": "source", - "Helpers/Palette": "disabled" + "Scheme/Dark": "source" }, "$figmaCollectionId": "VariableCollectionId:3180:16768", "$figmaModeId": "3180:0", @@ -10033,8 +10352,9 @@ "Scheme/Dark": "source", "Components/Close": "enabled", "Components/Accordion": "enabled", - "Components/Quote": "enabled", - "Helpers/Palette": "disabled" + "Components/Container": "enabled", + "Components/Floating button": "enabled", + "Components/Blockquote": "enabled" }, "$figmaCollectionId": "VariableCollectionId:808:5504", "$figmaModeId": "808:0", @@ -10198,11 +10518,8 @@ "post.checkbox.hover-fg": "4cd3a35c6d41c8bf0f327dc00edce076b43375f9", "post.checkbox.disabled-bg": "17a75265c1ba9ab24f81d178854bcc374d386772", "post.checkbox.disabled-fg": "f67e1029d1f7c3fc93b33b2c7662af38106ac1a7", - "post.checkbox.selected-bg": "dfc50424925d3bb701a5e28e2ee112ca1fb13c4a", - "post.checkbox.selected-fg": "fd045802c80e76ee3028a5299bd519c39b479a46", "post.checkbox.enabled-stroke": "baeb6a8bfd531712283a81c79867de6406094263", "post.checkbox.hover-stroke": "09fd9bb754b50d6b5d66a08cb9b5aa02b81f1eb1", - "post.checkbox.selected-stroke": "9f457bf24e972f9f8a7d551d304675edee096461", "post.checkbox.disabled-stroke": "450e5256bebdcb568e9093e4dd3bfaa329f76d39", "post.checkbox.gap.block.group": "c87709f94c2c59282e5bcfc93d28ea57339d29be", "post.checkbox.gap.inline.text-start": "6a0ccb17874af047442e69a9ea84440679f3a4e7", @@ -10222,6 +10539,17 @@ "post.close.hover-bg": "04ed00d9ede124919214337431759bc5c75816a3", "post.close.border-radius": "5ff209f6925d4bc352a576c50751a96b71d67617", "post.close.icon.size": "ea8353a741be98ec8b070be1ea1bedbb49292b8c", + "post.grid.gutter.xl": "09cf49132842775a8c5dc4a9e2342b146ed4d222", + "post.grid.gutter.lg": "cb2be84fab85873639d9f51d869bbe3f00fc626f", + "post.grid.gutter.md": "7d1d3b0ffd0f973df1455b0addd7edd6d4a9a148", + "post.grid.gutter.sm": "8cbc257669fa886554d3ec8976367eb2d1c64f90", + "post.grid.gutter.xs": "cb095450965e3eb35560d2ee9afee14da7543238", + "post.grid.margin.xl": "a0941427502b638381a2a96f75850d0dccb0c0e7", + "post.grid.margin.lg": "bd3682259dffed2a2fedb59efd7e882cdd8e2276", + "post.grid.margin.md": "a34831a53f06e84a574e6c960511c78d5cc1790d", + "post.grid.margin.sm": "b69e811ae4854fed0ef53f5ccbaf57daeeff407b", + "post.grid.margin.xs": "ca98cb9916a8d625ceb1d0cf79a9cb8f3d4c0d1b", + "post.grid.max-width": "2a1752769b46f42590f2f73e8cdb7c4629ecf4fd", "post.dropdown.multi-select.menu.category-title.padding.block.outer": "ee99f5a05a5b1c84a69b677a1834d61fead11820", "post.dropdown.multi-select.menu.category-title.padding.block.inner": "0c237bda42bc614b0d40c3063b8cd837f6764301", "post.dropdown.multi-select.menu.category-title.padding.inline.inner": "3818d730a903399bea6f0a252a8fcad51001a230", @@ -10409,28 +10737,26 @@ "post.popover.text.selected-fg": "963b9d422b963ed3acdf1500f4aebfd93e4e98fc", "post.popover.paragraph.font-size": "753ab6d39cf4d2df84fe359b6d932172e31f0fab", "post.popover.legend.font-size": "ca32c490ebb5bc14ebf424aba54246f56931bde2", - "post.quote.border-width.left": "6568787d70363b299117e8c52095eeb14451fe89", - "post.quote.border.left.color": "adc2d5072c255eb50d74db7d8d3513930191b527", - "post.quote.margin.block": "bd08d047e4f9a0f40d6fc329ffcfe35605868fa1", - "post.quote.margin.inline": "e74d12dbeafe66a04d4429241a8c0018b2bd3892", - "post.quote.padding.inline.start": "7a1872b53d95b09254aedb9c83134c16f257d859", - "post.quote.padding.inline.end": "4aaac936d03e419c78861c16341f44cc5aa12c27", - "post.quote.gap.inline": "dc6aadb7c7375ca7445e8e3a7123c31a62ad9b63", + "post.blockquote.border-width.left": "6568787d70363b299117e8c52095eeb14451fe89", + "post.blockquote.border.left.color": "adc2d5072c255eb50d74db7d8d3513930191b527", + "post.blockquote.margin.block": "bd08d047e4f9a0f40d6fc329ffcfe35605868fa1", + "post.blockquote.margin.inline": "e74d12dbeafe66a04d4429241a8c0018b2bd3892", + "post.blockquote.padding.inline.start": "7a1872b53d95b09254aedb9c83134c16f257d859", + "post.blockquote.padding.inline.end": "4aaac936d03e419c78861c16341f44cc5aa12c27", + "post.blockquote.gap.inline": "dc6aadb7c7375ca7445e8e3a7123c31a62ad9b63", + "post.blockquote.font-weight": "bbbd5bcf6682a14dd804110603e0f781f880f819", + "post.blockquote.font-size": "0ca009d91f5f9572660f874598908a4c2f0fdaa2", "post.radio-button.enabled-bg": "981537511aa6b68e6575007cd1724da013be2dcc", "post.radio-button.enabled-fg": "ad56c5542bcfd074a5baf4037297d0884420cd6d", "post.radio-button.hover-bg": "f8df140d31e8b662762a8ad65af72207185e25a6", "post.radio-button.hover-fg": "317132a0c272589edf4a4b14e0ae72f2f7ce18a4", "post.radio-button.disabled-bg": "c09bc9b42df8004a531165fe1745cfd79cdb9a3e", "post.radio-button.disabled-fg": "02139795f587accc9430208032da5a645a1917e9", - "post.radio-button.selected-bg": "3897745b964bb30eb717691a728002a210ba7e90", - "post.radio-button.selected-fg": "575b9dbb58033e0ae4a7c879cac441faf4ec5236", "post.radio-button.enabled-stroke": "d478c213676bcf2eb1ea055a37705d9f6eb33c26", "post.radio-button.hover-stroke": "efd5e0b0f302879c355da5d057adaf8ffe41471e", "post.radio-button.disabled-stroke": "5b28478865af1ccb34fa372cc316bba7c0eec8c2", - "post.radio-button.selected-stroke": "e97845dba6dea97d27e389675a9f4ad2073ad586", "post.radio-button.gap.block.group": "9c16987226587efbda8b6ca5dac00608be1e4408", "post.radio-button.gap.inline.text-start": "54a8f76477a5a63522d360c6816e113b363647a5", - "post.radio-button.gap.inline.group": "0d348d17ca88dc80d153be265c58c3ff2c501b4f", "post.radio-button.icon.padding.block.inner": "f32af0ee66b9ed5d12d8b4f13d7c53e4c3d917e7", "post.radio-button.icon.padding.block.container": "7226e0dc94e9d28902b5f19ffc2849b9a09a3e96", "post.radio-button.icon.padding.inline.inner": "5002aa9fc58b02f27ae1920ed02a8eb25171ffe6", @@ -10607,15 +10933,6 @@ "post.input.color.selected-stroke": "cd6d5766d9f136e44719c7a28eb250c545556c35", "post.input.color.signal.error": "7ddc0bfe846c295b5a215c45e423a2fdddf6959a", "post.input.color.signal.success": "0157a5c40c9a4eb6f87cfddd9a5c3f3a8a67282e", - "post.input.spacing.gap.inline.1": "ea0f287f910901d9a2754175427d33874636908d", - "post.input.spacing.gap.inline.2": "e17ec3bfeef8ad59d33f8ed4028bcbeffb3c2e65", - "post.input.spacing.padding.block.text1": "a2dbf734944c2720e08b06ba2f0d4446807214a7", - "post.input.spacing.padding.block.text2": "16e43ccd63e09b43f7078bfdc6bee6432ea4fe9a", - "post.input.spacing.padding.block.text-assist": "74fa0091e635d194f2726e8a49d63029f797d7b1", - "post.input.spacing.padding.block.text5": "be118ff83da708f6758b8dda877fadaea5a24e3d", - "post.input.spacing.padding.inline.text-start": "95d346d8cf0d15d92cbb0d838ad1d21e2196d909", - "post.input.spacing.padding.inline.text-end": "251080d245b6ce91ef6947cedb9d8710871c1e45", - "post.input.spacing.padding.inline.text-assist": "e265e8a8f1e63ac91a7c044560f1c84736e1167f", "post.input.sizing.icon": "d8468d53a31f1ff5e298f2e6783a215bc1a9902c", "post.input.border-radius.surface": "d06c0dd30f742b0d6cd4cbddcf2ee20dc059be64", "post.toast.spacing.padding.action": "7b789908238cacf3f7c6b327401296ec0a1da28c", @@ -10641,10 +10958,36 @@ "post.toast.color.error-fg": "3cd318ecaa756db2fe98be4cd0c2d2c5a9f231d0", "post.toast.color.error-stroke": "3432663173b4389104a12a668043e3681e2faa69", "post.toast.color.error-icon": "3096bb0553257be18a766df213ba83685ab63040", - "post.validation.list.gap.inline": "a76607434c393d743d38b71824d9d76e533acca2", - "post.validation.list.padding.block.text": "37b3685608b0a7ee4bdc297d80ea55c77856c2ee", + "post.floating-button.position.right": "5f5f7a00e0660158923bd57ee08d5f10c4074526", + "post.floating-button.position.top": "ff8db193bebd896a1c226be5aa69b28b3729c785", + "post.floating-button.enabled-fg": "77f009565576cc049046b990ef2b0688a43becd7", + "post.floating-button.enabled-bg": "491d5f34dd817b87c813955d6aa84eae900a5f5a", + "post.floating-button.enabled-border": "fced80ecb14d12d7a312fb54984a6af601983225", + "post.floating-button.hover-fg": "a5e426e2322345c0f300633465e4d73b4d5a5750", + "post.floating-button.hover-bg": "519c5bcb2886492720446c365d4f5c3fa85ad996", + "post.floating-button.hover-border": "54e694dd7772f673e1e7bee834f5dc211887faf2", + "post.floating-button.size.outer": "5e349e3dfa6c657612a01f07c5c7259dc97a93ef", + "post.floating-button.size.icon": "6f2ead50c9777b5b55aece34c2e65d4c4f9dd05d", + "post.floating-button.border-width": "780bc7b400761532094e6fd9dacf8c0d92c69383", + "post.floating-button.border-radius.round": "40f3a56c25ca39dec619b9bea5f19a4c2e0e4a50", + "post.validation.group.gap.inline": "a76607434c393d743d38b71824d9d76e533acca2", + "post.validation.group.padding.block.text": "37b3685608b0a7ee4bdc297d80ea55c77856c2ee", + "post.validation.group.icon.size": "ce5d0ae47c1f80a7ea39a6e5b25a00055c450e7d", + "post.validation.group.icon.padding": "4c33e15ce67a9e7398af3f45682774c919629a17", "post.validation.error": "796bdb2fc917b5948438070371ae60d214216795", - "post.validation.success": "b59a525aa81840396e6310baa880de4a66d23371" + "post.validation.success": "b59a525aa81840396e6310baa880de4a66d23371", + "post.validation.input.padding.block": "4006573d3a03f1b053a844aaf89e14742a3d3646", + "post.validation.input.padding.inline": "8df0e5f5587acbb1f7acb67a97e200e2175d6469", + "post.validation.font-size": "67f550629b478f48c1579f8acb13edceabbaee4f", + "post.input.gap.inline.1": "ea0f287f910901d9a2754175427d33874636908d", + "post.input.gap.inline.2": "e17ec3bfeef8ad59d33f8ed4028bcbeffb3c2e65", + "post.input.padding.block.text1": "a2dbf734944c2720e08b06ba2f0d4446807214a7", + "post.input.padding.block.text2": "16e43ccd63e09b43f7078bfdc6bee6432ea4fe9a", + "post.input.padding.block.text-assist": "74fa0091e635d194f2726e8a49d63029f797d7b1", + "post.input.padding.block.text5": "be118ff83da708f6758b8dda877fadaea5a24e3d", + "post.input.padding.inline.text-assist": "e265e8a8f1e63ac91a7c044560f1c84736e1167f", + "post.input.padding.inline.start": "95d346d8cf0d15d92cbb0d838ad1d21e2196d909", + "post.input.padding.inline.end": "251080d245b6ce91ef6947cedb9d8710871c1e45" } }, { @@ -10695,8 +11038,7 @@ "Utilities/Spacing": "source", "Utilities/Typo": "source", "Scheme/Light": "source", - "Scheme/Dark": "source", - "Helpers/Palette": "disabled" + "Scheme/Dark": "source" } }, { @@ -10712,25 +11054,24 @@ "Channel/IDK": "source", "Theme/Post": "enabled", "Scheme/Light": "source", - "Scheme/Dark": "source", - "Helpers/Palette": "disabled" + "Scheme/Dark": "source" }, "group": "Theme", "$figmaCollectionId": "VariableCollectionId:4178:5613", "$figmaModeId": "4178:0", "$figmaVariableReferences": { - "post.theme.accent.bg-scheme.brand": "ac9cc556351b9d9b72ce01e166e148b74b25de3f", - "post.theme.accent.bg-scheme.emphasis": "f37d68c8d5ee579997a1a1b403162484c8cff869", - "post.theme.color.accent.brand.bg": "2f0b9e90b3d7117a9d7037b325deac970c3bee16", - "post.theme.color.accent.brand.fg": "8ce342d323f6022375641c1f92d265636eda0015", - "post.theme.color.accent.emphasis.bg": "36c62b7057d0d665572ef3d4be91dd81c61fb13b", - "post.theme.color.accent.emphasis.fg": "8d3dab1f80eb4d3b22f62613a3c3f80d5609538d", - "post.theme.accent.bg-scheme.default": "9504f02cdfa20b1afd02c21b95c5e8753ac50340", - "post.theme.accent.bg-scheme.alternate": "bb955dc5c7061bd23cb6c735b2d5f01b727625d0", - "post.theme.color.accent.default.bg": "dc69a147a83c9da5d6b52a3e1999082ac7405009", - "post.theme.color.accent.default.fg": "17e7f1199980448c9e431b59ac934c0ef11c5e1b", - "post.theme.color.accent.alternate.bg": "47e0f61a01f52edc65e7fcfb6ba1237495959eb2", - "post.theme.color.accent.alternate.fg": "96a7f4c12efb74f3da27770f2014a52032056121" + "post.theme.palettes.bg-scheme.brand": "ac9cc556351b9d9b72ce01e166e148b74b25de3f", + "post.theme.palettes.bg-scheme.emphasis": "f37d68c8d5ee579997a1a1b403162484c8cff869", + "post.theme.color.palettes.brand.bg": "2f0b9e90b3d7117a9d7037b325deac970c3bee16", + "post.theme.color.palettes.brand.fg": "8ce342d323f6022375641c1f92d265636eda0015", + "post.theme.color.palettes.accent.bg": "36c62b7057d0d665572ef3d4be91dd81c61fb13b", + "post.theme.color.palettes.accent.fg": "8d3dab1f80eb4d3b22f62613a3c3f80d5609538d", + "post.theme.palettes.bg-scheme.default": "9504f02cdfa20b1afd02c21b95c5e8753ac50340", + "post.theme.palettes.bg-scheme.alternate": "bb955dc5c7061bd23cb6c735b2d5f01b727625d0", + "post.theme.color.palettes.default.bg": "dc69a147a83c9da5d6b52a3e1999082ac7405009", + "post.theme.color.palettes.default.fg": "17e7f1199980448c9e431b59ac934c0ef11c5e1b", + "post.theme.color.palettes.alternate.bg": "47e0f61a01f52edc65e7fcfb6ba1237495959eb2", + "post.theme.color.palettes.alternate.fg": "96a7f4c12efb74f3da27770f2014a52032056121" } }, { @@ -10747,59 +11088,26 @@ "Theme/Post": "enabled", "Theme/Cargo": "enabled", "Scheme/Light": "source", - "Scheme/Dark": "source", - "Helpers/Palette": "disabled" + "Scheme/Dark": "source" }, "group": "Theme", "$figmaCollectionId": "VariableCollectionId:4178:5613", "$figmaModeId": "4178:1", "$figmaVariableReferences": { - "post.theme.accent.bg-scheme.brand": "ac9cc556351b9d9b72ce01e166e148b74b25de3f", - "post.theme.accent.bg-scheme.emphasis": "f37d68c8d5ee579997a1a1b403162484c8cff869", - "post.theme.accent.bg-scheme.default": "9504f02cdfa20b1afd02c21b95c5e8753ac50340", - "post.theme.accent.bg-scheme.alternate": "bb955dc5c7061bd23cb6c735b2d5f01b727625d0", - "post.theme.color.accent.default.bg": "dc69a147a83c9da5d6b52a3e1999082ac7405009", - "post.theme.color.accent.default.fg": "17e7f1199980448c9e431b59ac934c0ef11c5e1b", - "post.theme.color.accent.brand.bg": "2f0b9e90b3d7117a9d7037b325deac970c3bee16", - "post.theme.color.accent.brand.fg": "8ce342d323f6022375641c1f92d265636eda0015", - "post.theme.color.accent.emphasis.bg": "36c62b7057d0d665572ef3d4be91dd81c61fb13b", - "post.theme.color.accent.emphasis.fg": "8d3dab1f80eb4d3b22f62613a3c3f80d5609538d", - "post.theme.color.accent.alternate.bg": "47e0f61a01f52edc65e7fcfb6ba1237495959eb2", - "post.theme.color.accent.alternate.fg": "96a7f4c12efb74f3da27770f2014a52032056121" + "post.theme.palettes.bg-scheme.brand": "ac9cc556351b9d9b72ce01e166e148b74b25de3f", + "post.theme.palettes.bg-scheme.emphasis": "f37d68c8d5ee579997a1a1b403162484c8cff869", + "post.theme.palettes.bg-scheme.default": "9504f02cdfa20b1afd02c21b95c5e8753ac50340", + "post.theme.palettes.bg-scheme.alternate": "bb955dc5c7061bd23cb6c735b2d5f01b727625d0", + "post.theme.color.palettes.default.bg": "dc69a147a83c9da5d6b52a3e1999082ac7405009", + "post.theme.color.palettes.default.fg": "17e7f1199980448c9e431b59ac934c0ef11c5e1b", + "post.theme.color.palettes.brand.bg": "2f0b9e90b3d7117a9d7037b325deac970c3bee16", + "post.theme.color.palettes.brand.fg": "8ce342d323f6022375641c1f92d265636eda0015", + "post.theme.color.palettes.accent.bg": "36c62b7057d0d665572ef3d4be91dd81c61fb13b", + "post.theme.color.palettes.accent.fg": "8d3dab1f80eb4d3b22f62613a3c3f80d5609538d", + "post.theme.color.palettes.alternate.bg": "47e0f61a01f52edc65e7fcfb6ba1237495959eb2", + "post.theme.color.palettes.alternate.fg": "96a7f4c12efb74f3da27770f2014a52032056121" } }, - { - "id": "5c4385f51d1d6b16489886f5e10e35906b66e2d2", - "name": "Palette", - "$figmaStyleReferences": {}, - "selectedTokenSets": { - "core": "source", - "Scheme/Light": "source", - "Scheme/Dark": "source", - "Channel/EDK": "source", - "Channel/IDK": "source", - "Theme/Post": "source", - "Theme/Cargo": "source", - "Helpers/Palette": "enabled" - }, - "$figmaVariableReferences": { - "post.helper.color.default.bg": "78e4de909d2083079acd570d14ec5711bcfd767e", - "post.helper.color.default.fg": "1119ec593790541d7462d13d5b0921203eb2f306", - "post.helper.color.default.bg-scheme": "b6c306cfa928090412bf2cb11cc10d9cdffcab5f", - "post.helper.color.alternate.bg": "68b59e1f466cfabba4034dd98eb36d149dcea898", - "post.helper.color.alternate.fg": "1de537d276551eb2e4405949d04ac2235953687b", - "post.helper.color.alternate.bg-scheme": "9652e919941b0d2ee51f75f3cf8f09709a8e3529", - "post.helper.color.brand.bg": "154c666338ba0bbaa6b937440b16ea6379c921f1", - "post.helper.color.brand.fg": "662e59cf84b469528b4912250de6c6b4e63e6fbe", - "post.helper.color.brand.bg-scheme": "35e3fb74f1d179155ceaa634eac2125de1201f6d", - "post.helper.color.emphasis.bg": "804b4156a383d9664e9c8554dda79db09e5e43ad", - "post.helper.color.emphasis.fg": "b51ad3628fe85ca59f9af070f7fbc3f631b3a124", - "post.helper.color.emphasis.bg-scheme": "5dff219fb8818db014a49bdfe6fa579a8cd34590" - }, - "$figmaCollectionId": "VariableCollectionId:6402:53852", - "$figmaModeId": "6402:0", - "group": "Helpers" - }, { "id": "de151f32ac85175085c129c9d55429225636cfb7", "name": "Focus", @@ -10815,8 +11123,7 @@ "Channel/IDK": "source", "Theme/Post": "source", "Theme/Cargo": "source", - "Helpers/Focus": "enabled", - "Helpers/Palette": "disabled" + "Helpers/Focus": "enabled" }, "group": "Helpers", "$figmaCollectionId": "VariableCollectionId:6402:53868", @@ -10828,6 +11135,37 @@ "post.focus.outline-width": "7eae4d3dc8a5c281265a9fe998fde649dbeaaba0", "post.focus.border-radius": "2b7975894777de84247e467a8210fcefac597616" } + }, + { + "id": "4fce02b2d68c0ae155900265b9454f5be46d8e41", + "name": "Palettes", + "$figmaStyleReferences": {}, + "selectedTokenSets": { + "core": "source", + "Scheme/Light": "source", + "Scheme/Dark": "source", + "Channel/EDK": "source", + "Channel/IDK": "source", + "Theme/Post": "source", + "Theme/Cargo": "source", + "Palettes": "enabled" + }, + "$figmaVariableReferences": { + "post.palettes.color.default.bg": "5f2f435ea49163621af38ad9798447b33aad773f", + "post.palettes.color.default.fg": "80efe4f04b5e45d5cc9e52ae9c3e8dda513be416", + "post.palettes.color.alternate.bg": "6aafe2ec830a8e40b6527e4e7ce747020c52fd5c", + "post.palettes.color.alternate.fg": "c153f71f5f8d3f3764c30f8c0a48bdbdabc6a315", + "post.palettes.color.brand.bg": "f7dc423347aa56d02ae018041c30012f0f03f705", + "post.palettes.color.brand.fg": "2993fc79c7cb6c8e21304ce9402f982c307b3ef5", + "post.palettes.color.accent.bg": "bebb902555f6fd7e56bb27beb353c67b57c67300", + "post.palettes.color.accent.fg": "b3152bf53241705ef5d7b1ed6b4cc337168dbc8b", + "post.helper.color.default.bg-scheme": "bffc748a647519df3ac363c7689959d519e20c12", + "post.helper.color.alternate.bg-scheme": "35ca2ec5aa7df847d668c0794c39418031aa4af3", + "post.helper.color.brand.bg-scheme": "6ab3cbe158c483c535915d83468581ba23976c37", + "post.helper.color.accent.bg-scheme": "4447066e00815b7cb14e6f681a879db7a1ef4d15" + }, + "$figmaCollectionId": "VariableCollectionId:6959:10217", + "$figmaModeId": "6959:0" } ], "$metadata": { @@ -10854,10 +11192,12 @@ "Components/Avatar", "Components/Badge", "Components/Banner", + "Components/Blockquote", "Components/Breadcrumb", "Components/Button", "Components/Checkbox", "Components/Close", + "Components/Container", "Components/Dropdown", "Components/Form footer", "Components/Grid", @@ -10868,7 +11208,6 @@ "Components/List simple", "Components/Notifications", "Components/Popover", - "Components/Quote", "Components/Radio button", "Components/Segmented button", "Components/Select", @@ -10879,12 +11218,13 @@ "Components/Text highlighted", "Components/Text input", "Components/Toast", + "Components/Floating button", "Components/Validation", "FigmaOnly", "Utilities/Spacing", "Utilities/Color", "Utilities/Typo", - "Helpers/Palette", + "Palettes", "Helpers/Focus" ] } From e1207f3a6038b11275a1dc651723c263d18c71c1 Mon Sep 17 00:00:00 2001 From: Myrta Sakellariou <66249294+myrta2302@users.noreply.github.com> Date: Mon, 11 Nov 2024 12:33:12 +0200 Subject: [PATCH 02/18] feat(styles): set initial component visibility to hidden to prevent flickering (#3814) Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> --- packages/components/CONTRIBUTING.md | 4 +++ packages/styles/src/utilities/_index.scss | 1 + .../styles/src/utilities/_not-defined.scss | 25 +++++++++++++++++++ 3 files changed, 30 insertions(+) create mode 100644 packages/styles/src/utilities/_not-defined.scss diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md index 2355ec2939..2975071b22 100644 --- a/packages/components/CONTRIBUTING.md +++ b/packages/components/CONTRIBUTING.md @@ -113,6 +113,10 @@ By setting a component's name as a `component` property in your stories' metadat All components should have automated tests. These tests are available in the `cypress/e2e` folder. +### Set inital component Visibility to hidden + +To prevent flickering while components load, add each new component to the list in `packages/styles/src/utilities/_not-defined.scss`, which applies `visibility: hidden` to all listed components until they are registered by the browser (when the hydrated attribute actually starts to take effect). + ## Stencil ![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square) diff --git a/packages/styles/src/utilities/_index.scss b/packages/styles/src/utilities/_index.scss index 54e154f001..7e4688b794 100644 --- a/packages/styles/src/utilities/_index.scss +++ b/packages/styles/src/utilities/_index.scss @@ -6,6 +6,7 @@ @use './mixins' as *; @use './variables' as *; +@use './not-defined' as *; @use './temp/legacy'; diff --git a/packages/styles/src/utilities/_not-defined.scss b/packages/styles/src/utilities/_not-defined.scss new file mode 100644 index 0000000000..fa9113df7e --- /dev/null +++ b/packages/styles/src/utilities/_not-defined.scss @@ -0,0 +1,25 @@ +/* + Initial visibility of the components is set to hidden to prevent 'flickering' effect due to stencil js/scss delay. +*/ + +:where( + post-list, + post-list-item, + post-accordion, + post-accordion-item, + post-alert, + post-card-control, + post-collapsible, + post-icon, + post-logo, + post-popover, + post-popovercontainer, + post-rating, + post-tab-header, + post-tab-panel, + post-tabs, + post-tag, + post-tooltip + ):not(:defined) { + visibility: hidden; +} From 13ac05757b7d117ddc301ed809a4b1cd6ed06c95 Mon Sep 17 00:00:00 2001 From: Myrta Sakellariou <66249294+myrta2302@users.noreply.github.com> Date: Mon, 11 Nov 2024 14:35:41 +0200 Subject: [PATCH 03/18] feat(styles): updated vertical-align utility (#3805) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Oliver Schürch --- .changeset/new-goats-impress.md | 6 ++ .../utilities/vertical-align.snapshot.ts | 7 ++ .../vertical-align/vertical-align.docs.mdx | 29 ++++++++ .../vertical-align.snapshot.stories.ts | 33 +++++++++ .../vertical-align/vertical-align.stories.ts | 68 +++++++++++++++++++ .../vertical-align/vertical-align.styles.scss | 61 +++++++++++++++++ .../src/themes/bootstrap/_utilities.scss | 2 + packages/styles/src/utilities/_variables.scss | 7 +- 8 files changed, 211 insertions(+), 2 deletions(-) create mode 100644 .changeset/new-goats-impress.md create mode 100644 packages/documentation/cypress/snapshots/utilities/vertical-align.snapshot.ts create mode 100644 packages/documentation/src/stories/utilities/vertical-align/vertical-align.docs.mdx create mode 100644 packages/documentation/src/stories/utilities/vertical-align/vertical-align.snapshot.stories.ts create mode 100644 packages/documentation/src/stories/utilities/vertical-align/vertical-align.stories.ts create mode 100644 packages/documentation/src/stories/utilities/vertical-align/vertical-align.styles.scss diff --git a/.changeset/new-goats-impress.md b/.changeset/new-goats-impress.md new file mode 100644 index 0000000000..d1bd841e3c --- /dev/null +++ b/.changeset/new-goats-impress.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-documentation': minor +'@swisspost/design-system-styles': minor +--- + +Updated vertical-align utility diff --git a/packages/documentation/cypress/snapshots/utilities/vertical-align.snapshot.ts b/packages/documentation/cypress/snapshots/utilities/vertical-align.snapshot.ts new file mode 100644 index 0000000000..6d2235f46d --- /dev/null +++ b/packages/documentation/cypress/snapshots/utilities/vertical-align.snapshot.ts @@ -0,0 +1,7 @@ +describe('Vetical Align', () => { + it('vertica-align', () => { + cy.visit('/iframe.html?id=snapshots--vertical-align'); + cy.get('.vertical-align-example', { timeout: 30000 }).should('be.visible'); + cy.percySnapshot('Vertical Align', { widths: [1440] }); + }); +}); diff --git a/packages/documentation/src/stories/utilities/vertical-align/vertical-align.docs.mdx b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.docs.mdx new file mode 100644 index 0000000000..48fcfe4a04 --- /dev/null +++ b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.docs.mdx @@ -0,0 +1,29 @@ +import { Canvas, Controls, Meta, Source } from '@storybook/blocks'; +import { formatAsMap } from '@/utils/sass-export'; +import * as VerticalAlignStories from './vertical-align.stories'; + + + +# Vertical Alignment + +
+ Use the vertical alignment utilities to adjust the alignment of elements. +
+ +Note that vertical-align applies only to `inline`, `inline-block, `inline-table`, and `table-cell` elements. + +## Examples + +With inline elements: + + +
+ +
+ +With table cells: + + +
+ +
diff --git a/packages/documentation/src/stories/utilities/vertical-align/vertical-align.snapshot.stories.ts b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.snapshot.stories.ts new file mode 100644 index 0000000000..31e346cb88 --- /dev/null +++ b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.snapshot.stories.ts @@ -0,0 +1,33 @@ +import type { StoryObj, StoryFn, StoryContext } from '@storybook/web-components'; +import { html } from 'lit'; +import meta from './vertical-align.stories'; +import './vertical-align.styles.scss'; + +const { id, ...metaWithoutId } = meta; + +export default { + ...metaWithoutId, + title: 'Snapshots', +}; + +type Story = StoryObj; + +export const VerticalAlign: Story = { + render: () => { + return html` + ${meta?.argTypes?.align?.options?.map( + align => + html`
+ ${align ? `align-${align}` : 'text'} + +
`, + )} + `; + }, + decorators: [ + (story: StoryFn, context: StoryContext) => { + const storyTemplate = html`
${story(context.args, context)}
`; + return storyTemplate; + }, + ], +}; diff --git a/packages/documentation/src/stories/utilities/vertical-align/vertical-align.stories.ts b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.stories.ts new file mode 100644 index 0000000000..db879df901 --- /dev/null +++ b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.stories.ts @@ -0,0 +1,68 @@ +import type { Args, StoryObj, StoryFn, StoryContext } from '@storybook/web-components'; +import { html, nothing } from 'lit'; +import './vertical-align.styles.scss'; +import { MetaExtended } from '@root/types'; + +const alignOptions = ['baseline', 'top', 'middle', 'bottom', 'text-bottom', 'text-top']; + +const meta: MetaExtended = { + id: 'cf01f6d1-970f-444e-aaa9-8a96c25cc8b2', + title: 'Utilities/Vertical Align', + args: { + align: '', + }, + argTypes: { + align: { + name: 'align', + description: 'Set the vertical alignment of the text', + control: { + type: 'select', + }, + options: alignOptions, + }, + }, + render: (args: Args) => { + return html`baseline + top + middle + bottom + text-bottom + text-top + ${args.align || 'text'}`; + }, + decorators: [ + (story: StoryFn, context: StoryContext) => { + const storyTemplate = html`
+ ${story(context.args, context)} +
`; + return storyTemplate; + }, + ], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; + +export const tableVersion: Story = { + argTypes: { + align: { + options: alignOptions.filter(o => !o.includes('text-')), + }, + }, + render: (args: Args) => { + return html` + + + + + + + + + +
baselinetopmiddlebottom${args.align || 'text'}
`; + }, +}; diff --git a/packages/documentation/src/stories/utilities/vertical-align/vertical-align.styles.scss b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.styles.scss new file mode 100644 index 0000000000..1100f28378 --- /dev/null +++ b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.styles.scss @@ -0,0 +1,61 @@ +.vertical-align-example { + :not(:has(table)) & { + border: 1px solid rgb(204, 204, 204); + line-height: 3; + } + + table { + margin: 0; + height: 100px; + td:nth-of-type(5) { + color: red; + } + } + + span { + padding-inline: 0.5rem; + &:nth-of-type(7) { + padding-inline-start: 2rem; + color: red; + } + } + + .logo { + width: 1rem; + height: 1rem; + display: inline-block; + } + + .snapshot { + gap: 2rem; + display: flex; + flex-direction: column; + + & > div { + border: 1px solid rgb(204, 204, 204); + width: 320px; + + span { + min-width: 150px; + } + + span:nth-of-type(2) { + color: gray; + } + } + } + + .box { + border: 1px solid rgb(204, 204, 204); + height: 50px; + width: 50px; + display: inline-block; + text-align: center; + } +} + +#storybook-root .vertical-align-example { + &:not(:has(table)) { + border: none; + } +} diff --git a/packages/styles/src/themes/bootstrap/_utilities.scss b/packages/styles/src/themes/bootstrap/_utilities.scss index 88efc41434..7a575257c7 100644 --- a/packages/styles/src/themes/bootstrap/_utilities.scss +++ b/packages/styles/src/themes/bootstrap/_utilities.scss @@ -39,6 +39,8 @@ $utilities: map.remove($utilities, 'justify-content'); $utilities: map.remove($utilities, 'display'); +$utilities: map.remove($utilities, 'vertical-align'); + $utilities: map.remove($utilities, 'float'); $utilities: map.remove($utilities, 'opacity'); diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss index 7902d738b2..52ad221068 100644 --- a/packages/styles/src/utilities/_variables.scss +++ b/packages/styles/src/utilities/_variables.scss @@ -22,6 +22,11 @@ */ $utilities: ( + 'align': ( + property: vertical-align, + class: align, + values: baseline top middle bottom text-bottom text-top, + ), 'float': ( responsive: true, property: float, @@ -83,7 +88,6 @@ $utilities: ( class: ms, values: from-tokens('spacing', 'margin'), ), - 'padding': ( responsive: true, property: padding, @@ -126,7 +130,6 @@ $utilities: ( class: ps, values: from-tokens('spacing', 'padding'), ), - 'gap': ( responsive: true, property: gap, From dbefaead4f151f640f1b40b0815d7be82b89db3b Mon Sep 17 00:00:00 2001 From: Swiss Post Bot <103635272+swisspost-bot@users.noreply.github.com> Date: Mon, 11 Nov 2024 14:23:27 +0100 Subject: [PATCH 04/18] chore(tokens): :art: update tokens (#3958) Merge this PR to update the tokens in the main branch. --------- Co-authored-by: Travaglini Alessio <158268546+Vandapanda@users.noreply.github.com> --- .../tokens/tokensstudio-generated/tokens.json | 246 +++++++++++++----- 1 file changed, 183 insertions(+), 63 deletions(-) diff --git a/packages/tokens/tokensstudio-generated/tokens.json b/packages/tokens/tokensstudio-generated/tokens.json index 75599a9cd8..ee04454f8b 100644 --- a/packages/tokens/tokensstudio-generated/tokens.json +++ b/packages/tokens/tokensstudio-generated/tokens.json @@ -235,6 +235,10 @@ "$type": "dimension", "$value": "6" }, + "7": { + "$type": "dimension", + "$value": "7" + }, "8": { "$type": "dimension", "$value": "8" @@ -1375,7 +1379,7 @@ "$value": "{post.core.color.sandgrey.100}" } }, - "emphasis": { + "accent": { "bg": { "$type": "color", "$value": "{post.core.color.sandgrey.080}" @@ -1478,7 +1482,7 @@ "$value": "{post.core.color.cargo.blue}" } }, - "emphasis": { + "accent": { "bg": { "$type": "color", "$value": "{post.core.color.cargo.blue}" @@ -2141,7 +2145,7 @@ "$value": "{post.core.color.sandgrey.100}" } }, - "emphasis": { + "accent": { "bg": { "$type": "color", "$value": "{post.core.color.sandgrey.002}" @@ -2191,6 +2195,76 @@ } } } + }, + "cargo": { + "scheme": { + "color": { + "surface": { + "default": { + "bg": { + "$type": "color", + "$value": "{post.core.color.sandgrey.080}" + }, + "fg": { + "$type": "color", + "$value": "{post.core.color.brand.white}" + }, + "stroke": { + "$type": "color", + "$value": "{post.core.color.brand.white}" + } + }, + "accent1": { + "bg": { + "$type": "color", + "$value": "{post.core.color.sandgrey.100}" + }, + "fg": { + "$type": "color", + "$value": "{post.core.color.brand.white}" + } + }, + "alternate": { + "bg": { + "$type": "color", + "$value": "{post.core.color.sandgrey.100}" + }, + "fg": { + "$type": "color", + "$value": "{post.core.color.brand.white}" + } + }, + "brand": { + "bg": { + "$type": "color", + "$value": "{post.core.color.cargo.green}" + }, + "fg": { + "$type": "color", + "$value": "{post.core.color.brand.white}" + }, + "fg-accent": { + "$type": "color", + "$value": "{post.core.color.cargo.blue}" + } + }, + "accent": { + "bg": { + "$type": "color", + "$value": "{post.core.color.cargo.blue}" + }, + "fg": { + "$type": "color", + "$value": "{post.core.color.sandgrey.100}" + }, + "fg-accent": { + "$type": "color", + "$value": "{post.core.color.cargo.green}" + } + } + } + } + } } } }, @@ -2657,6 +2731,10 @@ "29": { "$type": "spacing", "$value": "{post.core.dimension.25-5}" + }, + "30": { + "$type": "spacing", + "$value": "{post.core.dimension.6-5}" } } }, @@ -3261,6 +3339,10 @@ "29": { "$type": "spacing", "$value": "{post.core.dimension.23}" + }, + "30": { + "$type": "spacing", + "$value": "{post.core.dimension.7}" } }, "inline": { @@ -3853,6 +3935,10 @@ "29": { "$type": "spacing", "$value": "{post.core.dimension.24-5}" + }, + "30": { + "$type": "spacing", + "$value": "{post.core.dimension.8-5}" } } }, @@ -4170,11 +4256,11 @@ "accent": { "bg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.bg}" + "$value": "{post.scheme.color.surface.accent.bg}" }, "fg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.fg}" + "$value": "{post.scheme.color.surface.accent.fg}" } }, "alternate": { @@ -4220,21 +4306,21 @@ "default": { "bg": { "$type": "color", - "$value": "{post.scheme.color.surface.default.bg}" + "$value": "{post.cargo.scheme.color.surface.default.bg}" }, "fg": { "$type": "color", - "$value": "{post.scheme.color.surface.default.fg}" + "$value": "{post.cargo.scheme.color.surface.default.fg}" } }, "alternate": { "bg": { "$type": "color", - "$value": "{post.scheme.color.surface.alternate.bg}" + "$value": "{post.cargo.scheme.color.surface.alternate.bg}" }, "fg": { "$type": "color", - "$value": "{post.scheme.color.surface.alternate.fg}" + "$value": "{post.cargo.scheme.color.surface.alternate.fg}" } }, "brand": { @@ -4250,11 +4336,11 @@ "accent": { "bg": { "$type": "color", - "$value": "{post.cargo.scheme.color.surface.emphasis.bg}" + "$value": "{post.cargo.scheme.color.surface.accent.bg}" }, "fg": { "$type": "color", - "$value": "{post.cargo.scheme.color.surface.emphasis.fg-accent}" + "$value": "{post.cargo.scheme.color.surface.accent.fg-accent}" } } } @@ -6442,11 +6528,11 @@ "color": { "icon-bg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.bg}" + "$value": "{post.scheme.color.surface.accent.bg}" }, "icon-fg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.fg}" + "$value": "{post.scheme.color.surface.accent.fg}" }, "text-fg": { "$type": "color", @@ -6612,15 +6698,15 @@ "close-button": { "enabled-fg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.fg}" + "$value": "{post.scheme.color.surface.accent.fg}" }, "selected-fg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.fg}" + "$value": "{post.scheme.color.surface.accent.fg}" }, "hover-fg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.fg}" + "$value": "{post.scheme.color.surface.accent.fg}" }, "hover-bg": { "$type": "color", @@ -6640,11 +6726,11 @@ }, "enabled-fg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.fg}" + "$value": "{post.scheme.color.surface.accent.fg}" }, "selected-fg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.fg}" + "$value": "{post.scheme.color.surface.accent.fg}" }, "hover-fg": { "$type": "color", @@ -6676,11 +6762,11 @@ "surface": { "bg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.bg}" + "$value": "{post.scheme.color.surface.accent.bg}" }, "fg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.fg}" + "$value": "{post.scheme.color.surface.accent.fg}" }, "border-radius": { "$type": "borderRadius", @@ -6712,7 +6798,7 @@ "text": { "selected-fg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.fg}" + "$value": "{post.scheme.color.surface.accent.fg}" } }, "elevation": { @@ -7837,6 +7923,16 @@ } } } + }, + "filled": { + "padding": { + "block": { + "start": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.30}" + } + } + } } }, "filled": { @@ -9071,6 +9167,7 @@ "post.core.dimension.4": "652e6941eb5ffe7b11b4919943eaa82985cea887", "post.core.dimension.5": "4948cef0547c7028ae2b54d67888730ae50a7a51", "post.core.dimension.6": "2fb4138c6e29828418c6e0d8c3bb0730efb65c1a", + "post.core.dimension.7": "b425da6d6f562134ae5a90e3354c1dd426d7a6dc", "post.core.dimension.8": "32a49eb9f6a3706172348bdf0fd51703bdecc0e9", "post.core.dimension.9": "ca8146c7e9870c3cf4e15aa0cd4141b129e2a5b5", "post.core.dimension.10": "0b8ab9e8f85d59a203c115bacd0e1467302b37d8", @@ -9116,6 +9213,8 @@ "post.core.dimension.16-5": "18a30d47473c6776f526d6695a08ebe450ef9fef", "post.core.dimension.17-5": "de25828e578f9363bd50fec54426f989e8d618e1", "post.core.dimension.26-5": "fc0f8d331a3a6869de95d2f1031974fbc926e0c4", + "post.core.dimension.25-5": "52d70e1c63622fee6eeb2d8a176796da6bb60233", + "post.core.dimension.24-5": "b4bfb43876d1f47a6b0c4e965437a2f29327ff8c", "post.core.font-weight.300": "4436d559d2383ae1a0ad88d57da9ce6360a7aef7", "post.core.font-weight.400": "2e0dea0ce52e09ecf1ea56fc61739b5dfd4c1335", "post.core.font-weight.500": "b4f03965c86694b373279706e6a7abd0f85ef831", @@ -9297,9 +9396,6 @@ "post.scheme.color.surface.alternate.fg": "c301615214e1cca28102b3a651f3b8c9da42ca5c", "post.scheme.color.surface.brand.bg": "5882e06454efa138fece081c28b7788f52e81621", "post.scheme.color.surface.brand.fg": "962f01542da03311583047fbea671773938b354f", - "post.scheme.color.surface.emphasis.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d", - "post.scheme.color.surface.emphasis.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a", - "post.scheme.color.surface.emphasis.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5", "post.scheme.color.notification.badge.bg": "0de95de05ec88e26525f4211c81f0f8dbe321ebb", "post.scheme.color.notification.badge.fg": "48ff724df33b9947e7e74a729c5dc4a7c930f58c", "post.scheme.color.notification.badge.stroke": "3b53b100fef4f7aa9a97b64e7d2fa8fc9c51aba2", @@ -9318,9 +9414,12 @@ "post.cargo.scheme.color.surface.brand.bg": "8ac0a07d302c92c052a22bb1fd904776139683c2", "post.cargo.scheme.color.surface.brand.fg": "45dd08b4fe3f397ab01e14e3ac0df31ba570ea21", "post.cargo.scheme.color.surface.brand.fg-accent": "15eac3957d30e8b21001a30f17a62fd362e0c5f0", - "post.cargo.scheme.color.surface.emphasis.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6", - "post.cargo.scheme.color.surface.emphasis.fg": "e724294b65aca52dcb29118010534f0482bd0881", - "post.cargo.scheme.color.surface.emphasis.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2" + "post.cargo.scheme.color.surface.accent.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6", + "post.cargo.scheme.color.surface.accent.fg": "e724294b65aca52dcb29118010534f0482bd0881", + "post.cargo.scheme.color.surface.accent.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2", + "post.scheme.color.surface.accent.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d", + "post.scheme.color.surface.accent.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a", + "post.scheme.color.surface.accent.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5" } }, { @@ -9329,10 +9428,8 @@ "$figmaStyleReferences": {}, "selectedTokenSets": { "core": "source", - "Scheme/Light": "enabled", "Scheme/Dark": "enabled" }, - "group": "Scheme", "$figmaCollectionId": "VariableCollectionId:718:1666", "$figmaModeId": "718:2", "$figmaVariableReferences": { @@ -9479,9 +9576,6 @@ "post.scheme.color.surface.alternate.fg": "c301615214e1cca28102b3a651f3b8c9da42ca5c", "post.scheme.color.surface.brand.bg": "5882e06454efa138fece081c28b7788f52e81621", "post.scheme.color.surface.brand.fg": "962f01542da03311583047fbea671773938b354f", - "post.scheme.color.surface.emphasis.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d", - "post.scheme.color.surface.emphasis.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a", - "post.scheme.color.surface.emphasis.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5", "post.scheme.color.notification.badge.bg": "0de95de05ec88e26525f4211c81f0f8dbe321ebb", "post.scheme.color.notification.badge.fg": "48ff724df33b9947e7e74a729c5dc4a7c930f58c", "post.scheme.color.notification.badge.stroke": "3b53b100fef4f7aa9a97b64e7d2fa8fc9c51aba2", @@ -9498,10 +9592,14 @@ "post.cargo.scheme.color.surface.brand.bg": "8ac0a07d302c92c052a22bb1fd904776139683c2", "post.cargo.scheme.color.surface.brand.fg": "45dd08b4fe3f397ab01e14e3ac0df31ba570ea21", "post.cargo.scheme.color.surface.brand.fg-accent": "15eac3957d30e8b21001a30f17a62fd362e0c5f0", - "post.cargo.scheme.color.surface.emphasis.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6", - "post.cargo.scheme.color.surface.emphasis.fg": "e724294b65aca52dcb29118010534f0482bd0881", - "post.cargo.scheme.color.surface.emphasis.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2" - } + "post.cargo.scheme.color.surface.accent.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6", + "post.cargo.scheme.color.surface.accent.fg": "e724294b65aca52dcb29118010534f0482bd0881", + "post.cargo.scheme.color.surface.accent.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2", + "post.scheme.color.surface.accent.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d", + "post.scheme.color.surface.accent.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a", + "post.scheme.color.surface.accent.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5" + }, + "group": "Scheme" }, { "id": "0ce712c559607fae28cbd844cac1884d8f961af2", @@ -9623,6 +9721,9 @@ "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c", "post.device.border-width.quote": "1c2f3d93f282058f554db3737d1b131c886b81f4", "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288", + "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967", + "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9", + "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2", "post.device.spacing.gap.4": "18a97621a6b8cd79f7f4424a6afbc99f49a4104e", "post.device.spacing.gap.5": "cd8bc19de4a06c78cf89a9c2ee34309a0f517e9b", "post.device.spacing.gap.6": "d3f0e06bad0472f9dec52560b44068444b9f9676", @@ -9673,7 +9774,8 @@ "post.device.border-width.focus": "36b85b12779fa51b466bbb29ec9f9a54b1ab7dcc", "post.device.border-width.alternative2": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30", "post.device.border-width.alternative1": "3304b579ebb55075ec45251e69d38c803cecf378", - "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9" + "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9", + "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc" } }, { @@ -9800,6 +9902,9 @@ "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c", "post.device.border-width.quote": "1c2f3d93f282058f554db3737d1b131c886b81f4", "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288", + "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967", + "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9", + "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2", "post.device.spacing.gap.1": "303b065d5f8bf9049661db8845f2d1e59a4c08b0", "post.device.spacing.gap.2": "0e3be5c3cc6b23c8827bc5fb005a234c558199fc", "post.device.spacing.gap.3": "91cd08dcbce598d4f63e04fc4e646796d943a377", @@ -9847,7 +9952,8 @@ "post.device.border-width.alternative2": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30", "post.device.border-width.alternative1": "3304b579ebb55075ec45251e69d38c803cecf378", "post.device.grid.sizing.gutter": "c96f1602983aa56f2a1a13cbba9b908b06fd0e05", - "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9" + "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9", + "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc" } }, { @@ -10028,7 +10134,11 @@ "post.device.grid.sizing.gutter": "c96f1602983aa56f2a1a13cbba9b908b06fd0e05", "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9", "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c", - "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288" + "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288", + "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967", + "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc", + "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9", + "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2" } }, { @@ -10426,6 +10536,15 @@ "post.banner.neutral.border.color": "0ff562d88f3593f563203f317655ee7fb4c0e6fe", "post.banner.neutral.icon.color": "2e59130401db212ad37cb342a250ee6bc7d859e2", "post.banner.neutral.bg-scheme": "34ed982b500a8a935ee38321ce5a07ba49fd2e22", + "post.blockquote.border-width.left": "6568787d70363b299117e8c52095eeb14451fe89", + "post.blockquote.border.left.color": "adc2d5072c255eb50d74db7d8d3513930191b527", + "post.blockquote.margin.block": "bd08d047e4f9a0f40d6fc329ffcfe35605868fa1", + "post.blockquote.margin.inline": "e74d12dbeafe66a04d4429241a8c0018b2bd3892", + "post.blockquote.padding.inline.start": "7a1872b53d95b09254aedb9c83134c16f257d859", + "post.blockquote.padding.inline.end": "4aaac936d03e419c78861c16341f44cc5aa12c27", + "post.blockquote.gap.inline": "dc6aadb7c7375ca7445e8e3a7123c31a62ad9b63", + "post.blockquote.font-weight": "bbbd5bcf6682a14dd804110603e0f781f880f819", + "post.blockquote.font-size": "0ca009d91f5f9572660f874598908a4c2f0fdaa2", "post.breadcrumb.enabled-fg": "2baf0e7b11623e8bfb266ffb3a8cf71cc6c4dbd4", "post.breadcrumb.hover-fg": "9848a57f5708dd944ac7a829f5031edcc927f7ba", "post.breadcrumb.selected-fg": "11ba9dc52d4c5ff12c180643b18255c8f570da7a", @@ -10737,15 +10856,6 @@ "post.popover.text.selected-fg": "963b9d422b963ed3acdf1500f4aebfd93e4e98fc", "post.popover.paragraph.font-size": "753ab6d39cf4d2df84fe359b6d932172e31f0fab", "post.popover.legend.font-size": "ca32c490ebb5bc14ebf424aba54246f56931bde2", - "post.blockquote.border-width.left": "6568787d70363b299117e8c52095eeb14451fe89", - "post.blockquote.border.left.color": "adc2d5072c255eb50d74db7d8d3513930191b527", - "post.blockquote.margin.block": "bd08d047e4f9a0f40d6fc329ffcfe35605868fa1", - "post.blockquote.margin.inline": "e74d12dbeafe66a04d4429241a8c0018b2bd3892", - "post.blockquote.padding.inline.start": "7a1872b53d95b09254aedb9c83134c16f257d859", - "post.blockquote.padding.inline.end": "4aaac936d03e419c78861c16341f44cc5aa12c27", - "post.blockquote.gap.inline": "dc6aadb7c7375ca7445e8e3a7123c31a62ad9b63", - "post.blockquote.font-weight": "bbbd5bcf6682a14dd804110603e0f781f880f819", - "post.blockquote.font-size": "0ca009d91f5f9572660f874598908a4c2f0fdaa2", "post.radio-button.enabled-bg": "981537511aa6b68e6575007cd1724da013be2dcc", "post.radio-button.enabled-fg": "ad56c5542bcfd074a5baf4037297d0884420cd6d", "post.radio-button.hover-bg": "f8df140d31e8b662762a8ad65af72207185e25a6", @@ -10933,8 +11043,27 @@ "post.input.color.selected-stroke": "cd6d5766d9f136e44719c7a28eb250c545556c35", "post.input.color.signal.error": "7ddc0bfe846c295b5a215c45e423a2fdddf6959a", "post.input.color.signal.success": "0157a5c40c9a4eb6f87cfddd9a5c3f3a8a67282e", + "post.input.gap.inline.1": "ea0f287f910901d9a2754175427d33874636908d", + "post.input.gap.inline.2": "e17ec3bfeef8ad59d33f8ed4028bcbeffb3c2e65", + "post.input.padding.block.text1": "a2dbf734944c2720e08b06ba2f0d4446807214a7", + "post.input.padding.block.text2": "16e43ccd63e09b43f7078bfdc6bee6432ea4fe9a", + "post.input.padding.block.text-assist": "74fa0091e635d194f2726e8a49d63029f797d7b1", + "post.input.padding.block.text5": "be118ff83da708f6758b8dda877fadaea5a24e3d", + "post.input.padding.inline.start": "95d346d8cf0d15d92cbb0d838ad1d21e2196d909", + "post.input.padding.inline.end": "251080d245b6ce91ef6947cedb9d8710871c1e45", + "post.input.padding.inline.text-assist": "e265e8a8f1e63ac91a7c044560f1c84736e1167f", "post.input.sizing.icon": "d8468d53a31f1ff5e298f2e6783a215bc1a9902c", "post.input.border-radius.surface": "d06c0dd30f742b0d6cd4cbddcf2ee20dc059be64", + "post.input.border-width": "1ade7245040a677b64153d2cdf6651fcea38bf0e", + "post.input.empty.padding.block": "5e8222cbe4c364dc01d3f3a4bdc58faa38f2056c", + "post.input.label.empty.padding.block.start": "d62b407bf1b5948a054a4f578b2cddaeb4c37c34", + "post.input.label.empty.padding.inline.start": "b51731dc964c610165cf1ae964d243ad78df81e5", + "post.input.label.empty.padding.inline.end": "3717013c982ae87b4a055205377945bfd6f49e68", + "post.input.label.validated.padding.inline.end": "e48ddec27eff926626a3b10a7861ec56e487e335", + "input.validation.icon.position.inline.end": "b57f1666c23edfb6f677c04e41bc20ebaae726cc", + "post.input.filled.padding.block.start": "2924bedf122ccb4ab278a3ce28e06a8337c84059", + "post.input.filled.padding.block.end": "66ffd33591a7dcb8d7d81b4a9ceb90cb563652d2", + "post.input.label.filled.padding.block.start": "25bb881879bcfa6f8fc16fbda7cd5164a5083252", "post.toast.spacing.padding.action": "7b789908238cacf3f7c6b327401296ec0a1da28c", "post.toast.spacing.padding.inline": "014e44c5cc1c44d944c9d6df6c213c429f99c76d", "post.toast.spacing.padding.block": "8588d5bd126b4227934aec9c655f6dbcb10a84b7", @@ -10978,16 +11107,7 @@ "post.validation.success": "b59a525aa81840396e6310baa880de4a66d23371", "post.validation.input.padding.block": "4006573d3a03f1b053a844aaf89e14742a3d3646", "post.validation.input.padding.inline": "8df0e5f5587acbb1f7acb67a97e200e2175d6469", - "post.validation.font-size": "67f550629b478f48c1579f8acb13edceabbaee4f", - "post.input.gap.inline.1": "ea0f287f910901d9a2754175427d33874636908d", - "post.input.gap.inline.2": "e17ec3bfeef8ad59d33f8ed4028bcbeffb3c2e65", - "post.input.padding.block.text1": "a2dbf734944c2720e08b06ba2f0d4446807214a7", - "post.input.padding.block.text2": "16e43ccd63e09b43f7078bfdc6bee6432ea4fe9a", - "post.input.padding.block.text-assist": "74fa0091e635d194f2726e8a49d63029f797d7b1", - "post.input.padding.block.text5": "be118ff83da708f6758b8dda877fadaea5a24e3d", - "post.input.padding.inline.text-assist": "e265e8a8f1e63ac91a7c044560f1c84736e1167f", - "post.input.padding.inline.start": "95d346d8cf0d15d92cbb0d838ad1d21e2196d909", - "post.input.padding.inline.end": "251080d245b6ce91ef6947cedb9d8710871c1e45" + "post.validation.font-size": "67f550629b478f48c1579f8acb13edceabbaee4f" } }, { @@ -11062,16 +11182,16 @@ "$figmaVariableReferences": { "post.theme.palettes.bg-scheme.brand": "ac9cc556351b9d9b72ce01e166e148b74b25de3f", "post.theme.palettes.bg-scheme.emphasis": "f37d68c8d5ee579997a1a1b403162484c8cff869", + "post.theme.color.palettes.default.bg": "dc69a147a83c9da5d6b52a3e1999082ac7405009", + "post.theme.color.palettes.default.fg": "17e7f1199980448c9e431b59ac934c0ef11c5e1b", + "post.theme.color.palettes.alternate.bg": "47e0f61a01f52edc65e7fcfb6ba1237495959eb2", + "post.theme.color.palettes.alternate.fg": "96a7f4c12efb74f3da27770f2014a52032056121", "post.theme.color.palettes.brand.bg": "2f0b9e90b3d7117a9d7037b325deac970c3bee16", "post.theme.color.palettes.brand.fg": "8ce342d323f6022375641c1f92d265636eda0015", "post.theme.color.palettes.accent.bg": "36c62b7057d0d665572ef3d4be91dd81c61fb13b", "post.theme.color.palettes.accent.fg": "8d3dab1f80eb4d3b22f62613a3c3f80d5609538d", "post.theme.palettes.bg-scheme.default": "9504f02cdfa20b1afd02c21b95c5e8753ac50340", - "post.theme.palettes.bg-scheme.alternate": "bb955dc5c7061bd23cb6c735b2d5f01b727625d0", - "post.theme.color.palettes.default.bg": "dc69a147a83c9da5d6b52a3e1999082ac7405009", - "post.theme.color.palettes.default.fg": "17e7f1199980448c9e431b59ac934c0ef11c5e1b", - "post.theme.color.palettes.alternate.bg": "47e0f61a01f52edc65e7fcfb6ba1237495959eb2", - "post.theme.color.palettes.alternate.fg": "96a7f4c12efb74f3da27770f2014a52032056121" + "post.theme.palettes.bg-scheme.alternate": "bb955dc5c7061bd23cb6c735b2d5f01b727625d0" } }, { From 5738e12fb6ec33170b83e8d89f10c5d5c3c1db78 Mon Sep 17 00:00:00 2001 From: Swiss Post Bot <103635272+swisspost-bot@users.noreply.github.com> Date: Mon, 11 Nov 2024 14:50:53 +0100 Subject: [PATCH 05/18] chore(tokens): :art: update tokens (#3959) Merge this PR to update the tokens in the main branch. --------- Co-authored-by: Travaglini Alessio <158268546+Vandapanda@users.noreply.github.com> --- .../tokens/tokensstudio-generated/tokens.json | 119 ++++++++++-------- 1 file changed, 64 insertions(+), 55 deletions(-) diff --git a/packages/tokens/tokensstudio-generated/tokens.json b/packages/tokens/tokensstudio-generated/tokens.json index ee04454f8b..d953769d56 100644 --- a/packages/tokens/tokensstudio-generated/tokens.json +++ b/packages/tokens/tokensstudio-generated/tokens.json @@ -2826,6 +2826,10 @@ "5": { "$type": "sizing", "$value": "{post.core.dimension.48}" + }, + "6": { + "$type": "sizing", + "$value": "{post.core.dimension.64}" } }, "appstore": { @@ -3432,6 +3436,10 @@ "5": { "$type": "sizing", "$value": "{post.core.dimension.40}" + }, + "6": { + "$type": "sizing", + "$value": "{post.core.dimension.56}" } }, "appstore": { @@ -7786,19 +7794,19 @@ "$type": "color", "$value": "{post.scheme.color.interactive.primary.enabled.fg2}" }, - "enabled-stroke": { + "enabled-border": { "$type": "color", "$value": "{post.scheme.color.interactive.primary.enabled.stroke}" }, - "hover-stroke": { + "hover-border": { "$type": "color", "$value": "{post.scheme.color.interactive.primary.hover.stroke}" }, - "disabled-stroke": { + "disabled-border": { "$type": "color", "$value": "{post.scheme.color.interactive.primary.disabled.stroke}" }, - "selected-stroke": { + "selected-border": { "$type": "color", "$value": "{post.scheme.color.interactive.primary.selected.stroke1}" }, @@ -7827,21 +7835,9 @@ }, "padding": { "block": { - "text1": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.block.1}" - }, - "text2": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.block.3}" - }, - "text-assist": { + "assist": { "$type": "spacing", "$value": "{post.device.spacing.padding.block.5}" - }, - "text5": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.block.2}" } }, "inline": { @@ -7853,7 +7849,7 @@ "$type": "spacing", "$value": "{post.device.spacing.padding.3}" }, - "text-assist": { + "assist": { "$type": "spacing", "$value": "{post.device.spacing.padding.2}" } @@ -7863,6 +7859,10 @@ "icon": { "$type": "sizing", "$value": "{post.device.sizing.notification.1}" + }, + "height": { + "$type": "sizing", + "$value": "{post.device.sizing.interactive.button.height.6}" } }, "border-radius": { @@ -7932,6 +7932,22 @@ "$value": "{post.device.spacing.padding.block.30}" } } + }, + "font-size": { + "$type": "fontSizes", + "$value": "{post.device.font-size.10}" + } + } + }, + "validation": { + "icon": { + "position": { + "inline": { + "end": { + "$type": "dimension", + "$value": "{post.device.position.2}" + } + } } } }, @@ -7948,19 +7964,11 @@ } } } - } - } - }, - "input": { - "validation": { - "icon": { - "position": { - "inline": { - "end": { - "$type": "dimension", - "$value": "{post.device.position.2}" - } - } + }, + "assist": { + "font-size": { + "$type": "fontSizes", + "$value": "{post.device.font-size.10}" } } } @@ -9396,14 +9404,15 @@ "post.scheme.color.surface.alternate.fg": "c301615214e1cca28102b3a651f3b8c9da42ca5c", "post.scheme.color.surface.brand.bg": "5882e06454efa138fece081c28b7788f52e81621", "post.scheme.color.surface.brand.fg": "962f01542da03311583047fbea671773938b354f", + "post.scheme.color.surface.accent.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d", + "post.scheme.color.surface.accent.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a", + "post.scheme.color.surface.accent.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5", "post.scheme.color.notification.badge.bg": "0de95de05ec88e26525f4211c81f0f8dbe321ebb", "post.scheme.color.notification.badge.fg": "48ff724df33b9947e7e74a729c5dc4a7c930f58c", "post.scheme.color.notification.badge.stroke": "3b53b100fef4f7aa9a97b64e7d2fa8fc9c51aba2", "post.scheme.color.notification.popover.hover": "9e2793c01c18d6947c2d4e898afcb379426d952c", "post.scheme.accent.bg-scheme.1": "a7a55881dbc34e6d6b85f0bd30188fb164677678", "post.scheme.accent.bg-scheme.2": "a343e732fc434c2a0b9c1597748d8e12a1755aed", - "post.scheme.color.signal.neutral-dark": "790da7ad43fa67de3b2da99582d332791fb09e9f", - "post.scheme.color.signal.neutral": "daad7eeff08d93aeed6c1ad67af23e58bdffd198", "post.cargo.scheme.color.surface.default.bg": "41eb3ffd4461ead71c3379a48099d9c674aab882", "post.cargo.scheme.color.surface.default.fg": "d42f699b9bbf506aee792a6a5d28a01f8fdc3078", "post.cargo.scheme.color.surface.default.stroke": "68a8156f2b87010e07a024843e8efbbdf62022d3", @@ -9417,9 +9426,8 @@ "post.cargo.scheme.color.surface.accent.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6", "post.cargo.scheme.color.surface.accent.fg": "e724294b65aca52dcb29118010534f0482bd0881", "post.cargo.scheme.color.surface.accent.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2", - "post.scheme.color.surface.accent.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d", - "post.scheme.color.surface.accent.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a", - "post.scheme.color.surface.accent.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5" + "post.scheme.color.signal.neutral-dark": "790da7ad43fa67de3b2da99582d332791fb09e9f", + "post.scheme.color.signal.neutral": "daad7eeff08d93aeed6c1ad67af23e58bdffd198" } }, { @@ -9441,8 +9449,6 @@ "post.scheme.color.signal.warning-light": "89302ce07bdf3dda8857ae055241ba5e55af16c7", "post.scheme.color.signal.information-dark": "04907dc5972eef19d828ea38aafba62220824b5c", "post.scheme.color.signal.information-light": "92a36e527934b27f741ef1d21ccd77f46081bcea", - "post.scheme.color.signal.neutral-dark": "790da7ad43fa67de3b2da99582d332791fb09e9f", - "post.scheme.color.signal.neutral": "daad7eeff08d93aeed6c1ad67af23e58bdffd198", "post.scheme.color.signal.success-solo": "005074d4749ba0d64a11e8a5c742c48631c98dca", "post.scheme.color.signal.error-solo": "93e0cd4e7a5f9b2a33a76c9c0f3ab60dc5543f66", "post.scheme.color.interactive.button.primary.enabled.fg": "2a55e0da7a6a77af2ab682cfee46da43264624cf", @@ -9576,6 +9582,9 @@ "post.scheme.color.surface.alternate.fg": "c301615214e1cca28102b3a651f3b8c9da42ca5c", "post.scheme.color.surface.brand.bg": "5882e06454efa138fece081c28b7788f52e81621", "post.scheme.color.surface.brand.fg": "962f01542da03311583047fbea671773938b354f", + "post.scheme.color.surface.accent.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d", + "post.scheme.color.surface.accent.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a", + "post.scheme.color.surface.accent.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5", "post.scheme.color.notification.badge.bg": "0de95de05ec88e26525f4211c81f0f8dbe321ebb", "post.scheme.color.notification.badge.fg": "48ff724df33b9947e7e74a729c5dc4a7c930f58c", "post.scheme.color.notification.badge.stroke": "3b53b100fef4f7aa9a97b64e7d2fa8fc9c51aba2", @@ -9594,10 +9603,7 @@ "post.cargo.scheme.color.surface.brand.fg-accent": "15eac3957d30e8b21001a30f17a62fd362e0c5f0", "post.cargo.scheme.color.surface.accent.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6", "post.cargo.scheme.color.surface.accent.fg": "e724294b65aca52dcb29118010534f0482bd0881", - "post.cargo.scheme.color.surface.accent.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2", - "post.scheme.color.surface.accent.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d", - "post.scheme.color.surface.accent.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a", - "post.scheme.color.surface.accent.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5" + "post.cargo.scheme.color.surface.accent.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2" }, "group": "Scheme" }, @@ -9724,6 +9730,7 @@ "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967", "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9", "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2", + "post.device.sizing.interactive.button.height.6": "78caf6ef8cec35dc5ab0dc663c9d2747595bc9a6", "post.device.spacing.gap.4": "18a97621a6b8cd79f7f4424a6afbc99f49a4104e", "post.device.spacing.gap.5": "cd8bc19de4a06c78cf89a9c2ee34309a0f517e9b", "post.device.spacing.gap.6": "d3f0e06bad0472f9dec52560b44068444b9f9676", @@ -9953,7 +9960,8 @@ "post.device.border-width.alternative1": "3304b579ebb55075ec45251e69d38c803cecf378", "post.device.grid.sizing.gutter": "c96f1602983aa56f2a1a13cbba9b908b06fd0e05", "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9", - "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc" + "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc", + "post.device.sizing.interactive.button.height.6": "78caf6ef8cec35dc5ab0dc663c9d2747595bc9a6" } }, { @@ -10138,7 +10146,8 @@ "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967", "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc", "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9", - "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2" + "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2", + "post.device.sizing.interactive.button.height.6": "78caf6ef8cec35dc5ab0dc663c9d2747595bc9a6" } }, { @@ -11037,21 +11046,12 @@ "post.input.color.selected-bg": "8bd7235f1399a9bc166130edce1af72427cfb8ed", "post.input.color.selected-fg": "1ae0d7346c71e3c28fd3ebe05123a3ea04b3fbe6", "post.input.color.helptext-fg": "cc1db7dbc95596ee0f941b44c4b55712ba6625e2", - "post.input.color.enabled-stroke": "e8fb5159e5c020c2919c12ad157578d1083b1cc2", - "post.input.color.hover-stroke": "5a5615016cc59292e11a683669369db7182dafb9", - "post.input.color.disabled-stroke": "c65628869cf318afba36f149d035a6ad6291e0d3", - "post.input.color.selected-stroke": "cd6d5766d9f136e44719c7a28eb250c545556c35", "post.input.color.signal.error": "7ddc0bfe846c295b5a215c45e423a2fdddf6959a", "post.input.color.signal.success": "0157a5c40c9a4eb6f87cfddd9a5c3f3a8a67282e", "post.input.gap.inline.1": "ea0f287f910901d9a2754175427d33874636908d", "post.input.gap.inline.2": "e17ec3bfeef8ad59d33f8ed4028bcbeffb3c2e65", - "post.input.padding.block.text1": "a2dbf734944c2720e08b06ba2f0d4446807214a7", - "post.input.padding.block.text2": "16e43ccd63e09b43f7078bfdc6bee6432ea4fe9a", - "post.input.padding.block.text-assist": "74fa0091e635d194f2726e8a49d63029f797d7b1", - "post.input.padding.block.text5": "be118ff83da708f6758b8dda877fadaea5a24e3d", "post.input.padding.inline.start": "95d346d8cf0d15d92cbb0d838ad1d21e2196d909", "post.input.padding.inline.end": "251080d245b6ce91ef6947cedb9d8710871c1e45", - "post.input.padding.inline.text-assist": "e265e8a8f1e63ac91a7c044560f1c84736e1167f", "post.input.sizing.icon": "d8468d53a31f1ff5e298f2e6783a215bc1a9902c", "post.input.border-radius.surface": "d06c0dd30f742b0d6cd4cbddcf2ee20dc059be64", "post.input.border-width": "1ade7245040a677b64153d2cdf6651fcea38bf0e", @@ -11060,10 +11060,13 @@ "post.input.label.empty.padding.inline.start": "b51731dc964c610165cf1ae964d243ad78df81e5", "post.input.label.empty.padding.inline.end": "3717013c982ae87b4a055205377945bfd6f49e68", "post.input.label.validated.padding.inline.end": "e48ddec27eff926626a3b10a7861ec56e487e335", - "input.validation.icon.position.inline.end": "b57f1666c23edfb6f677c04e41bc20ebaae726cc", + "post.input.validation.icon.position.inline.end": "b57f1666c23edfb6f677c04e41bc20ebaae726cc", "post.input.filled.padding.block.start": "2924bedf122ccb4ab278a3ce28e06a8337c84059", "post.input.filled.padding.block.end": "66ffd33591a7dcb8d7d81b4a9ceb90cb563652d2", "post.input.label.filled.padding.block.start": "25bb881879bcfa6f8fc16fbda7cd5164a5083252", + "post.input.sizing.height": "82cf75a7b82a124c9b1d42cdbc0e9e84e3b11b9b", + "post.input.label.filled.font-size": "a12f8c5b97bd1f6bf59bf7da851dba7386e1396e", + "post.input.assist.font-size": "69317593d3b185baf0fb132ac414e643e3c95ae1", "post.toast.spacing.padding.action": "7b789908238cacf3f7c6b327401296ec0a1da28c", "post.toast.spacing.padding.inline": "014e44c5cc1c44d944c9d6df6c213c429f99c76d", "post.toast.spacing.padding.block": "8588d5bd126b4227934aec9c655f6dbcb10a84b7", @@ -11107,7 +11110,13 @@ "post.validation.success": "b59a525aa81840396e6310baa880de4a66d23371", "post.validation.input.padding.block": "4006573d3a03f1b053a844aaf89e14742a3d3646", "post.validation.input.padding.inline": "8df0e5f5587acbb1f7acb67a97e200e2175d6469", - "post.validation.font-size": "67f550629b478f48c1579f8acb13edceabbaee4f" + "post.validation.font-size": "67f550629b478f48c1579f8acb13edceabbaee4f", + "post.input.color.enabled-border": "e8fb5159e5c020c2919c12ad157578d1083b1cc2", + "post.input.color.hover-border": "5a5615016cc59292e11a683669369db7182dafb9", + "post.input.color.disabled-border": "c65628869cf318afba36f149d035a6ad6291e0d3", + "post.input.color.selected-border": "cd6d5766d9f136e44719c7a28eb250c545556c35", + "post.input.padding.inline.assist": "e265e8a8f1e63ac91a7c044560f1c84736e1167f", + "post.input.padding.block.assist": "74fa0091e635d194f2726e8a49d63029f797d7b1" } }, { From ae19d69da70b4f42bf54533baf334cb90309f860 Mon Sep 17 00:00:00 2001 From: Lea Date: Mon, 11 Nov 2024 14:52:22 +0100 Subject: [PATCH 06/18] feat(components): close button web component (#3880) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Oliver Schürch --- .changeset/shy-walls-exercise.md | 7 ++++ .../components/cypress/e2e/closebutton.cy.ts | 22 +++++++++++ packages/components/src/components.d.ts | 13 +++++++ .../post-closebutton/post-closebutton.tsx | 26 +++++++++++++ .../src/components/post-closebutton/readme.md | 30 ++++++++++++++ .../src/components/post-icon/readme.md | 2 + packages/components/src/index.ts | 1 + .../components/close-button.snapshot.ts | 7 ++++ .../{ => buttons}/button/button.docs.mdx | 0 .../button/button.snapshot.stories.ts | 0 .../{ => buttons}/button/button.stories.ts | 2 +- .../close-button/close-button.docs.mdx | 24 ++++++++++++ .../close-button.snapshot.stories.ts | 26 +++++++++++++ .../close-button/close-button.stories.ts | 39 +++++++++++++++++++ packages/styles/src/components/_index.scss | 1 + .../src/components/icon-close-button.scss | 28 +++++++++++++ 16 files changed, 227 insertions(+), 1 deletion(-) create mode 100644 .changeset/shy-walls-exercise.md create mode 100644 packages/components/cypress/e2e/closebutton.cy.ts create mode 100644 packages/components/src/components/post-closebutton/post-closebutton.tsx create mode 100644 packages/components/src/components/post-closebutton/readme.md create mode 100644 packages/documentation/cypress/snapshots/components/close-button.snapshot.ts rename packages/documentation/src/stories/components/{ => buttons}/button/button.docs.mdx (100%) rename packages/documentation/src/stories/components/{ => buttons}/button/button.snapshot.stories.ts (100%) rename packages/documentation/src/stories/components/{ => buttons}/button/button.stories.ts (99%) create mode 100644 packages/documentation/src/stories/components/buttons/close-button/close-button.docs.mdx create mode 100644 packages/documentation/src/stories/components/buttons/close-button/close-button.snapshot.stories.ts create mode 100644 packages/documentation/src/stories/components/buttons/close-button/close-button.stories.ts create mode 100644 packages/styles/src/components/icon-close-button.scss diff --git a/.changeset/shy-walls-exercise.md b/.changeset/shy-walls-exercise.md new file mode 100644 index 0000000000..ba712642c4 --- /dev/null +++ b/.changeset/shy-walls-exercise.md @@ -0,0 +1,7 @@ +--- +'@swisspost/design-system-documentation': minor +'@swisspost/design-system-components': minor +'@swisspost/design-system-styles': minor +--- + +Added close button web component. diff --git a/packages/components/cypress/e2e/closebutton.cy.ts b/packages/components/cypress/e2e/closebutton.cy.ts new file mode 100644 index 0000000000..275adfb50a --- /dev/null +++ b/packages/components/cypress/e2e/closebutton.cy.ts @@ -0,0 +1,22 @@ +const CLOSE_BTN_ID = 'de313349-0c0b-4baf-adc6-cb8c2e36fc1a'; + +describe('Close button', () => { + describe('default', () => { + beforeEach(() => { + cy.getComponent('post-closebutton', CLOSE_BTN_ID); + }); + + it('should render with a close button and a11y label', () => { + cy.get('@closebutton').should('exist'); + cy.get('@closebutton').find('.btn-icon-close').should('exist'); + cy.get('@closebutton').find('span.visually-hidden').should('exist'); + }); + }); +}); + +describe('Accessibility', () => { + it('Has no detectable a11y violations on load for all variants', () => { + cy.getSnapshots('post-closebutton'); + cy.checkA11y('#root-inner'); + }); +}); diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index 5fb886f66a..3056034100 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -148,6 +148,8 @@ export namespace Components { */ "value": string; } + interface PostClosebutton { + } interface PostCollapsible { /** * If `true`, the element is collapsed otherwise it is displayed. @@ -475,6 +477,12 @@ declare global { prototype: HTMLPostCardControlElement; new (): HTMLPostCardControlElement; }; + interface HTMLPostClosebuttonElement extends Components.PostClosebutton, HTMLStencilElement { + } + var HTMLPostClosebuttonElement: { + prototype: HTMLPostClosebuttonElement; + new (): HTMLPostClosebuttonElement; + }; interface HTMLPostCollapsibleElementEventMap { "postToggle": boolean; } @@ -631,6 +639,7 @@ declare global { "post-avatar": HTMLPostAvatarElement; "post-breadcrumb-item": HTMLPostBreadcrumbItemElement; "post-card-control": HTMLPostCardControlElement; + "post-closebutton": HTMLPostClosebuttonElement; "post-collapsible": HTMLPostCollapsibleElement; "post-collapsible-trigger": HTMLPostCollapsibleTriggerElement; "post-icon": HTMLPostIconElement; @@ -769,6 +778,8 @@ declare namespace LocalJSX { */ "value"?: string; } + interface PostClosebutton { + } interface PostCollapsible { /** * If `true`, the element is collapsed otherwise it is displayed. @@ -973,6 +984,7 @@ declare namespace LocalJSX { "post-avatar": PostAvatar; "post-breadcrumb-item": PostBreadcrumbItem; "post-card-control": PostCardControl; + "post-closebutton": PostClosebutton; "post-collapsible": PostCollapsible; "post-collapsible-trigger": PostCollapsibleTrigger; "post-icon": PostIcon; @@ -1003,6 +1015,7 @@ declare module "@stencil/core" { * @class PostCardControl - representing a stencil component */ "post-card-control": LocalJSX.PostCardControl & JSXBase.HTMLAttributes; + "post-closebutton": LocalJSX.PostClosebutton & JSXBase.HTMLAttributes; "post-collapsible": LocalJSX.PostCollapsible & JSXBase.HTMLAttributes; "post-collapsible-trigger": LocalJSX.PostCollapsibleTrigger & JSXBase.HTMLAttributes; /** diff --git a/packages/components/src/components/post-closebutton/post-closebutton.tsx b/packages/components/src/components/post-closebutton/post-closebutton.tsx new file mode 100644 index 0000000000..68d13ef51a --- /dev/null +++ b/packages/components/src/components/post-closebutton/post-closebutton.tsx @@ -0,0 +1,26 @@ +import { Component, Element, h, Host } from '@stencil/core'; +import { version } from '@root/package.json'; + +/** + * @slot default - Slot for placing visually hidden label in the close button. + */ +@Component({ + tag: 'post-closebutton', + shadow: false, +}) +export class PostClosebutton { + @Element() host: HTMLPostClosebuttonElement; + + render() { + return ( + + + + ); + } +} diff --git a/packages/components/src/components/post-closebutton/readme.md b/packages/components/src/components/post-closebutton/readme.md new file mode 100644 index 0000000000..ca0053c6df --- /dev/null +++ b/packages/components/src/components/post-closebutton/readme.md @@ -0,0 +1,30 @@ +# post-closebutton + + + + + + +## Slots + +| Slot | Description | +| ----------- | ----------------------------------------------------------- | +| `"default"` | Slot for placing visually hidden label in the close button. | + + +## Dependencies + +### Depends on + +- [post-icon](../post-icon) + +### Graph +```mermaid +graph TD; + post-closebutton --> post-icon + style post-closebutton fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/components/src/components/post-icon/readme.md b/packages/components/src/components/post-icon/readme.md index 92d1a4bacb..afb94ab2e7 100644 --- a/packages/components/src/components/post-icon/readme.md +++ b/packages/components/src/components/post-icon/readme.md @@ -25,6 +25,7 @@ some content - [post-alert](../post-alert) - [post-breadcrumb-item](../post-breadcrumb-item) - [post-card-control](../post-card-control) + - [post-closebutton](../post-closebutton) - [post-rating](../post-rating) - [post-tag](../post-tag) @@ -34,6 +35,7 @@ graph TD; post-alert --> post-icon post-breadcrumb-item --> post-icon post-card-control --> post-icon + post-closebutton --> post-icon post-rating --> post-icon post-tag --> post-icon style post-icon fill:#f9f,stroke:#333,stroke-width:4px diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 2644481576..a2734c8e80 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -7,6 +7,7 @@ export { PostAlert } from './components/post-alert/post-alert'; export { PostBreadcrumbItem } from './components/post-breadcrumb-item/post-breadcrumb-item'; export { PostAvatar } from './components/post-avatar/post-avatar'; export { PostCardControl } from './components/post-card-control/post-card-control'; +export { PostClosebutton } from './components/post-closebutton/post-closebutton'; export { PostCollapsible } from './components/post-collapsible/post-collapsible'; export { PostCollapsibleTrigger } from './components/post-collapsible-trigger/post-collapsible-trigger'; export { PostIcon } from './components/post-icon/post-icon'; diff --git a/packages/documentation/cypress/snapshots/components/close-button.snapshot.ts b/packages/documentation/cypress/snapshots/components/close-button.snapshot.ts new file mode 100644 index 0000000000..82da359c4c --- /dev/null +++ b/packages/documentation/cypress/snapshots/components/close-button.snapshot.ts @@ -0,0 +1,7 @@ +describe('Close button', () => { + it('post-closebutton', () => { + cy.visit('/iframe.html?id=snapshots--post-closebutton'); + cy.get('post-closebutton[data-hydrated]', { timeout: 30000 }).should('be.visible'); + cy.percySnapshot('Close button (Web Component)', { widths: [1440] }); + }); +}); diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/buttons/button/button.docs.mdx similarity index 100% rename from packages/documentation/src/stories/components/button/button.docs.mdx rename to packages/documentation/src/stories/components/buttons/button/button.docs.mdx diff --git a/packages/documentation/src/stories/components/button/button.snapshot.stories.ts b/packages/documentation/src/stories/components/buttons/button/button.snapshot.stories.ts similarity index 100% rename from packages/documentation/src/stories/components/button/button.snapshot.stories.ts rename to packages/documentation/src/stories/components/buttons/button/button.snapshot.stories.ts diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/buttons/button/button.stories.ts similarity index 99% rename from packages/documentation/src/stories/components/button/button.stories.ts rename to packages/documentation/src/stories/components/buttons/button/button.stories.ts index 1b707a53a3..5e8ba415d2 100644 --- a/packages/documentation/src/stories/components/button/button.stories.ts +++ b/packages/documentation/src/stories/components/buttons/button/button.stories.ts @@ -6,7 +6,7 @@ import { MetaComponent } from '@root/types'; const meta: MetaComponent = { id: 'eb78afcb-ce92-4990-94b6-6536d5ec6af4', - title: 'Components/Button', + title: 'Components/Buttons/Button', tags: ['package:HTML'], parameters: { badges: [], diff --git a/packages/documentation/src/stories/components/buttons/close-button/close-button.docs.mdx b/packages/documentation/src/stories/components/buttons/close-button/close-button.docs.mdx new file mode 100644 index 0000000000..6e3948c7de --- /dev/null +++ b/packages/documentation/src/stories/components/buttons/close-button/close-button.docs.mdx @@ -0,0 +1,24 @@ +import { Canvas, Controls, Meta, Source } from '@storybook/blocks'; +import * as CloseButtonStories from './close-button.stories'; + + + +
+ # Close button + + +
+ +
+ The close button is a web component. It is a slightly adapted version of the icon button, intended + for a specific use case. +
+ +The value inside the `` element will be rendered inside the button as a visually hidden text so make sure to only insert inline content there. + + +
+ +
diff --git a/packages/documentation/src/stories/components/buttons/close-button/close-button.snapshot.stories.ts b/packages/documentation/src/stories/components/buttons/close-button/close-button.snapshot.stories.ts new file mode 100644 index 0000000000..d6b21d0b46 --- /dev/null +++ b/packages/documentation/src/stories/components/buttons/close-button/close-button.snapshot.stories.ts @@ -0,0 +1,26 @@ +import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; +import meta, { Default } from './close-button.stories'; +import { html } from 'lit'; + +const { id, ...metaWithoutId } = meta; + +export default { + ...metaWithoutId, + title: 'Snapshots', +}; + +type Story = StoryObj; + +export const PostClosebutton: Story = { + render: (_args: Args, context: StoryContext) => { + return html` + ${['bg-white', 'bg-dark'].map( + bg => html` +
+ ${Default.render?.({ ...context.args }, context)} +
+ `, + )} + `; + }, +}; diff --git a/packages/documentation/src/stories/components/buttons/close-button/close-button.stories.ts b/packages/documentation/src/stories/components/buttons/close-button/close-button.stories.ts new file mode 100644 index 0000000000..7b947e99a0 --- /dev/null +++ b/packages/documentation/src/stories/components/buttons/close-button/close-button.stories.ts @@ -0,0 +1,39 @@ +import type { Args, StoryObj } from '@storybook/web-components'; +import { html } from 'lit/static-html.js'; +import { MetaComponent } from '@root/types'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; + +const meta: MetaComponent = { + id: 'de313349-0c0b-4baf-adc6-cb8c2e36fc1a', + title: 'Components/Buttons/Close button', + component: 'post-closebutton', + tags: ['package:WebComponents'], + parameters: { + badges: [], + design: { + type: 'figma', + url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=2514-18516&t=gCGlckfBEobCTna3-4', + }, + }, + args: { + 'slots-default': 'Close button', + }, + argTypes: { + 'slots-default': { + name: 'Label', + control: { + type: 'text', + }, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: (args: Args) => { + return html`${unsafeHTML(args['slots-default'])} `; + }, +}; diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss index b75e0b8370..41d7eacdf6 100644 --- a/packages/styles/src/components/_index.scss +++ b/packages/styles/src/components/_index.scss @@ -25,6 +25,7 @@ @use 'forms'; @use 'grid'; @use 'icon-button'; +@use 'icon-close-button'; @use 'icons'; @use 'lead'; @use 'list-group'; diff --git a/packages/styles/src/components/icon-close-button.scss b/packages/styles/src/components/icon-close-button.scss new file mode 100644 index 0000000000..c8eb34d175 --- /dev/null +++ b/packages/styles/src/components/icon-close-button.scss @@ -0,0 +1,28 @@ +@use '../functions/tokens'; +@use '../tokens/components'; +@use './../mixins/utilities'; + +tokens.$default-map: components.$post-close; + +.btn-icon-close { + padding: 0; + border: unset; + min-height: unset; + min-width: unset; + width: tokens.get('close-size'); + height: tokens.get('close-size'); + border-radius: tokens.get('close-border-radius'); + background-color: tokens.get('close-enabled-bg'); + color: tokens.get('close-enabled-fg'); + + > post-icon { + width: tokens.get('close-icon-size'); + height: tokens.get('close-icon-size'); + } + + @include utilities.not-disabled-hover() { + cursor: pointer; + background-color: tokens.get('close-hover-bg'); + color: tokens.get('close-hover-fg'); + } +} From e45d72fef68e1d407f5ba392e51ebfc2a86a4298 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Date: Mon, 11 Nov 2024 15:53:50 +0100 Subject: [PATCH 07/18] feat(styles): enabled media mixins with string params (#3836) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This allows to call the media mixins with keys from the breakpoint list directly, e.g. `@include media.max(lg) { }`. --- packages/styles/src/mixins/_media.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/styles/src/mixins/_media.scss b/packages/styles/src/mixins/_media.scss index 340afbaeee..475321853b 100644 --- a/packages/styles/src/mixins/_media.scss +++ b/packages/styles/src/mixins/_media.scss @@ -2,6 +2,8 @@ @use 'sass:meta'; @use '../functions/breakpoint'; +$offset: 0.01; + /** Creates a min-width breakpoint with the given value @param $device-size A pixel value or a key for the breakpoints map @@ -29,7 +31,7 @@ $device-size: breakpoint.min-width($device-size); } - @media screen and (max-width: ($device-size - 0.01)) { + @media screen and (max-width: ($device-size - $offset)) { @content; } } @@ -47,7 +49,7 @@ $max-size: breakpoint.min-width($max-size); } - @media screen and (min-width: $min-size) and (max-width: ($max-size - 0.01)) { + @media screen and (min-width: $min-size) and (max-width: ($max-size - $offset)) { @content; } } From 6486d60abbbd423c5b854500aa4e42325df04a57 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Date: Mon, 11 Nov 2024 15:54:08 +0100 Subject: [PATCH 08/18] chore: set tokens package to public (#3960) --- packages/tokens/package.json | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/tokens/package.json b/packages/tokens/package.json index 5781f6b8d7..4df4e27669 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -1,8 +1,7 @@ { "name": "@swisspost/design-system-tokens", "version": "9.0.0-next.3", - "private": true, - "description": "Design Tokens for the Swiss Post.", + "description": "Design Tokens for the Swiss Post Design System.", "author": "Swiss Post ", "license": "Apache-2.0", "repository": { @@ -29,7 +28,7 @@ ], "publishConfig": { "directory": "./dist", - "access": "restricted", + "access": "public", "linkDirectory": true }, "devDependencies": { From 3077ab4626387837bb9cb8b87352bd11de38d452 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Date: Mon, 11 Nov 2024 15:54:59 +0100 Subject: [PATCH 09/18] chore: update component issue template (#3951) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR is adding a design tasks section to the component v2 issue template. --------- Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .github/ISSUE_TEMPLATE/component-v2.yml | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/component-v2.yml b/.github/ISSUE_TEMPLATE/component-v2.yml index dfefd7c352..ace2c22cfb 100644 --- a/.github/ISSUE_TEMPLATE/component-v2.yml +++ b/.github/ISSUE_TEMPLATE/component-v2.yml @@ -28,14 +28,31 @@ body: options: - label: Tokens for this component are ready - type: textarea - id: tasks + id: tasksdesign attributes: - label: Tasks + label: Tasks design + description: Default tasks for the design team. Can be edited later according to needs. + value: | + ```[tasklist] + ### 🎨 Design + - [ ] Design component according to WIKIT + - [ ] Update dependencies + - [ ] Add & test compo in layout examples + - [ ] Designer review + - [ ] Documentation: Overview and usage (about, compo overview, compo props, usage, examples) + - [ ] Documentation: Technical documentation (anatomy, accessibility) + - [ ] Documentation: Review (content correctness, understandability, gaps) + ``` + - type: textarea + id: tasksdev + attributes: + label: Tasks development description: Default tasks for the dev team. Can be edited later according to needs. value: | ```[tasklist] - ### 💻 Tasks + ### 💻 Development - [ ] Review Design (All states present? Possible to implement?) + - [ ] Tokenization - [ ] HTML/CSS implementation - [ ] Web component implementation - [ ] Documentation in Storybook From 62c6e12995802d3b868bd39abc20c9c819961316 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Date: Mon, 11 Nov 2024 15:55:23 +0100 Subject: [PATCH 10/18] chore(icons): :point_up: update icons (#3948) (#3952) # Design system icons are now up to date! ## Added icons 2632 --------- Co-authored-by: Swiss Post Bot <103635272+swisspost-bot@users.noreply.github.com> Co-authored-by: github-actions[bot] --- .changeset/2024-11-10-update-icons.md | 6 + packages/icons/public/post-icons/2632.svg | 3 + packages/icons/public/report.json | 146 +++++++++++++--------- packages/styles/src/_svg-icon-map.scss | 2 + 4 files changed, 98 insertions(+), 59 deletions(-) create mode 100644 .changeset/2024-11-10-update-icons.md create mode 100644 packages/icons/public/post-icons/2632.svg diff --git a/.changeset/2024-11-10-update-icons.md b/.changeset/2024-11-10-update-icons.md new file mode 100644 index 0000000000..58d8ed8161 --- /dev/null +++ b/.changeset/2024-11-10-update-icons.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-icons': minor +--- + +Added icon number 2632. + diff --git a/packages/icons/public/post-icons/2632.svg b/packages/icons/public/post-icons/2632.svg new file mode 100644 index 0000000000..a906fca2d3 --- /dev/null +++ b/packages/icons/public/post-icons/2632.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/public/report.json b/packages/icons/public/report.json index be46312c96..51a74ee2e7 100644 --- a/packages/icons/public/report.json +++ b/packages/icons/public/report.json @@ -11385,50 +11385,6 @@ "createdAt": "2020-12-18T07:32:42.000Z", "modifiedAt": "2024-10-18T07:14:11.000Z" }, - { - "uuid": "88307300-5bef-11eb-9f99-005056873709", - "id": 539481, - "type": "picture.pictogram.", - "typeFilter": "pictograms", - "meta": { - "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/539481/storage/NTM5NDg5LzAvbWFzdGVy", - "keywords": [ - "LAD", - "Leistung am Domizil", - "Prestazione a domicilio", - "Service at home", - "Prestation à domicile", - "Wegweiser", - "Sign", - "Segno", - "Signer", - "Sinnbild", - "Symbol", - "Simbolo", - "Symbole", - "Strassenschild", - "Road Sign", - "Segnale stradale", - "Panneau De Signalisation" - ], - "year": [ - "2021" - ] - }, - "file": { - "mime": "image/svg+xml", - "name": "2205.svg", - "basename": "2205", - "ext": ".svg", - "size": { - "width": 0, - "dpi": 72, - "height": 0 - } - }, - "createdAt": "2021-01-21T13:49:50.000Z", - "modifiedAt": "2024-10-24T05:04:06.000Z" - }, { "uuid": "4cc7c010-5bf0-11eb-9f99-005056873709", "id": 539487, @@ -11475,6 +11431,50 @@ "createdAt": "2021-01-21T13:55:20.000Z", "modifiedAt": "2024-10-18T07:14:11.000Z" }, + { + "uuid": "88307300-5bef-11eb-9f99-005056873709", + "id": 539481, + "type": "picture.pictogram.", + "typeFilter": "pictograms", + "meta": { + "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/539481/storage/NTM5NDg5LzAvbWFzdGVy", + "keywords": [ + "LAD", + "Leistung am Domizil", + "Prestazione a domicilio", + "Service at home", + "Prestation à domicile", + "Wegweiser", + "Sign", + "Segno", + "Signer", + "Sinnbild", + "Symbol", + "Simbolo", + "Symbole", + "Strassenschild", + "Road Sign", + "Segnale stradale", + "Panneau De Signalisation" + ], + "year": [ + "2021" + ] + }, + "file": { + "mime": "image/svg+xml", + "name": "2205.svg", + "basename": "2205", + "ext": ".svg", + "size": { + "width": 0, + "dpi": 72, + "height": 0 + } + }, + "createdAt": "2021-01-21T13:49:50.000Z", + "modifiedAt": "2024-10-24T05:04:06.000Z" + }, { "uuid": "044e0500-5bf1-11eb-9f99-005056873709", "id": 539492, @@ -29138,6 +29138,34 @@ "createdAt": "2024-10-24T12:09:32.000Z", "modifiedAt": "2024-10-25T12:05:09.317Z" }, + { + "uuid": "ae649aa0-9b5c-11ef-9712-005056873709", + "id": 820602, + "type": "picture.pictogram.", + "typeFilter": "pictograms", + "meta": { + "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/820602/storage/ODIwNjAxLzAvbWFzdGVy", + "keywords": [ + "shoot photo", + "scattare foto", + "Foto aufnehmen", + "photo prise" + ] + }, + "file": { + "mime": "image/svg+xml", + "name": "2632.svg", + "basename": "2632", + "ext": ".svg", + "size": { + "width": 0, + "dpi": 72, + "height": 0 + } + }, + "createdAt": "2024-11-05T09:59:43.000Z", + "modifiedAt": "2024-11-05T10:11:18.000Z" + }, { "uuid": "6faf6ef0-c5ff-11e7-a943-005056a94f4a", "id": 352241, @@ -41636,12 +41664,12 @@ "wrongViewBox": [], "noKeywords": [ { - "uuid": "717dc650-c5ff-11e7-a943-005056a94f4a", - "id": 352314, + "uuid": "711a4990-c5ff-11e7-a943-005056a94f4a", + "id": 352299, "type": "picture.pictogram.", "typeFilter": "pictograms", "meta": { - "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/352314/storage/NTM3MjI0LzAvbWFzdGVy", + "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/352299/storage/NTM3MTkxLzAvbWFzdGVy", "businessfield": [ "kommunikation" ], @@ -41654,8 +41682,8 @@ }, "file": { "mime": "image/svg+xml", - "name": "3073.svg", - "basename": "3073", + "name": "3058.svg", + "basename": "3058", "ext": ".svg", "size": { "width": 0, @@ -41664,15 +41692,15 @@ } }, "createdAt": "2017-11-10T10:11:07.000Z", - "modifiedAt": "2024-03-12T14:51:51.000Z" + "modifiedAt": "2024-03-12T14:51:50.000Z" }, { - "uuid": "711a4990-c5ff-11e7-a943-005056a94f4a", - "id": 352299, + "uuid": "717dc650-c5ff-11e7-a943-005056a94f4a", + "id": 352314, "type": "picture.pictogram.", "typeFilter": "pictograms", "meta": { - "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/352299/storage/NTM3MTkxLzAvbWFzdGVy", + "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/352314/storage/NTM3MjI0LzAvbWFzdGVy", "businessfield": [ "kommunikation" ], @@ -41685,8 +41713,8 @@ }, "file": { "mime": "image/svg+xml", - "name": "3058.svg", - "basename": "3058", + "name": "3073.svg", + "basename": "3073", "ext": ".svg", "size": { "width": 0, @@ -41695,7 +41723,7 @@ } }, "createdAt": "2017-11-10T10:11:07.000Z", - "modifiedAt": "2024-03-12T14:51:50.000Z" + "modifiedAt": "2024-03-12T14:51:51.000Z" }, { "uuid": "6b09bf30-9901-11eb-935b-005056873709", @@ -41809,11 +41837,11 @@ ], "noSVG": [], "errored": [], - "created": "2024-10-27T01:40:29.123Z", + "created": "2024-11-10T01:37:42.898Z", "stats": { "errors": 0, "notFound": 0, - "success": 961 + "success": 962 }, - "version": "8.3.0" + "version": "8.4.0" } \ No newline at end of file diff --git a/packages/styles/src/_svg-icon-map.scss b/packages/styles/src/_svg-icon-map.scss index 634df00619..182f3cdb19 100644 --- a/packages/styles/src/_svg-icon-map.scss +++ b/packages/styles/src/_svg-icon-map.scss @@ -559,6 +559,8 @@ $svg-icon-map: ( "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.6 24h-9.7v-1.5c4-3.5 7.8-7.6 7.8-10.3 0-4.2-6.3-2.4-6.9-2l-.3-1.4c.6-.3 8.8-3.1 8.8 3.4 0 3.8-7.3 10.1-7.8 10.4h8.1z'/%3E%3C/svg%3E", '3000': "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Crect/%3E%3Cpath d='M17.4 8.2V24h-1.6V9.9c-.2.2-.5.5-.9.8-.3.3-.7.6-1 .9l-.9.8-.8-1L16 8.2z'/%3E%3C/svg%3E", + '2632': + "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16s7.16 16 16 16 16-7.16 16-16S24.84 0 16 0m0 30.67C7.91 30.67 1.33 24.09 1.33 16S7.91 1.33 16 1.33 30.67 7.91 30.67 16 24.09 30.67 16 30.67M9.18 10.66c-3.35 3.35-3.35 8.81 0 12.16 1.68 1.68 3.88 2.51 6.08 2.51s4.4-.84 6.08-2.51a8.7 8.7 0 0 0 2.21-3.81L24.3 7.7l-11.24.73a8.6 8.6 0 0 0-3.88 2.23m13.68-1.53-.64 9.65a7.16 7.16 0 0 1-1.83 3.09c-1.37 1.37-3.19 2.12-5.14 2.12s-3.77-.75-5.14-2.12c-2.83-2.83-2.83-7.44 0-10.27.87-.87 1.96-1.51 3.16-1.85l9.58-.62Zm-7.6 10.83a3.2 3.2 0 0 0 2.28-.94 3.223 3.223 0 0 0 0-4.56c-.63-.63-1.45-.94-2.28-.94s-1.65.31-2.28.94a3.223 3.223 0 0 0 0 4.56 3.2 3.2 0 0 0 2.28.94m-1.34-4.56c.36-.36.83-.55 1.34-.55s.98.2 1.34.55c.36.36.55.83.55 1.34s-.2.98-.55 1.34c-.36.36-.83.55-1.34.55s-.98-.2-1.34-.55-.55-.83-.55-1.34.2-.98.55-1.34'/%3E%3C/svg%3E", '2631': "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.99 24.54h-4.07v-4.82h4.07v-1.34h-7.76c-.37.5-.79.94-1.25 1.34h3.56v4.82h-6.28V21.3c-.44.16-.88.28-1.33.36v2.88h-6.32v-4.03a8 8 0 0 1-1.19-.92c-.04-.04-.08-.07-.12-.1-.36-.35-.69-.72-.98-1.11H.02v1.34h3.54v4.82H.01v7.49H32v-7.49zM4.95 19.72h6.32v4.82H4.95zm2.73 10.97H1.35v-4.82h6.33zm7.66 0H9.01v-4.82h6.33zm7.66 0h-6.33v-4.82H23zm7.67 0h-6.33v-4.82h6.33zM17.42 20.46c3.63 0 7.28-2.75 7.28-7.84-.01-2.46-.77-4.67-2.16-6.82 0 2.54-1.49 3.67-2.54 3.67C21.06 1.93 15.62.1 15.62.1c0 5.5-5.8 6.41-5.8 13.04 0 1.39 1.17 7.33 7.6 7.33Zm-2.36-3.77c.23.08.47.11.71.11h1.33v-1.34c0-.68.12-1.22.29-1.64.25.35.53.64.77.9.64.67 1.05 1.11 1.05 2.17 0 .02-.09 2.02-2.15 2.02-.96 0-1.99-.7-2-2.23Zm-1.11-9.88c1.05-1.25 2.19-2.63 2.72-4.52 1.18 1.05 2.55 3.13 2.02 6.99l-.21 1.52h1.53c1.02 0 2.05-.53 2.8-1.51.38 1.09.56 2.19.57 3.33 0 2.93-1.42 4.88-3.26 5.83.33-.65.44-1.28.44-1.55 0-3.03-2.66-3.08-2.66-5.6 0 0-2.12.98-2.12 4.17-.8 0-1.05-.98-1.05-1.93-.63.99-.99 2-.99 3.13 0 .6.11 1.12.31 1.58-2.66-1.66-2.88-5.07-2.88-5.11 0-2.98 1.36-4.6 2.79-6.32Z'/%3E%3C/svg%3E", '2630': From c1adae5db03af2bb5519174094fc417a293dcbb8 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Date: Mon, 11 Nov 2024 16:13:24 +0100 Subject: [PATCH 11/18] chore: copy files on tokens build (#3962) This is required for the publish command to work properly because only files in dist are included in the package. --- packages/tokens/package.json | 4 +++- pnpm-lock.yaml | 41 ++++++++++++++++++++++++------------ 2 files changed, 30 insertions(+), 15 deletions(-) diff --git a/packages/tokens/package.json b/packages/tokens/package.json index 4df4e27669..955eb99ef5 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -14,7 +14,8 @@ }, "type": "module", "scripts": { - "build": "pnpm clean && node ./build.js", + "copy-files": "copyfiles -f package.json README.md CONTRIBUTING.md CHANGELOG.md LICENSE dist", + "build": "pnpm clean && node ./build.js && pnpm copy-files", "clean": "rimraf dist", "build:verbose": "node ./build.js --verbosity=verbose" }, @@ -33,6 +34,7 @@ }, "devDependencies": { "@tokens-studio/sd-transforms": "1.2.2", + "copyfiles": "2.4.1", "rimraf": "6.0.1", "style-dictionary": "4.0.1" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c97d7a1e8a..4848de421f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -612,7 +612,7 @@ importers: version: 2.0.5 ts-jest: specifier: 29.2.4 - version: 29.2.4(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.14.14)(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(typescript@5.5.4) + version: 29.2.4(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.14.14))(typescript@5.5.4) typescript: specifier: 5.5.4 version: 5.5.4 @@ -1060,6 +1060,9 @@ importers: '@tokens-studio/sd-transforms': specifier: 1.2.2 version: 1.2.2(style-dictionary@4.0.1) + copyfiles: + specifier: 2.4.1 + version: 2.4.1 rimraf: specifier: 6.0.1 version: 6.0.1 @@ -15491,7 +15494,7 @@ snapshots: axios@1.7.7: dependencies: - follow-redirects: 1.15.6(debug@4.3.6) + follow-redirects: 1.15.6(debug@4.3.7) form-data: 4.0.0 proxy-from-env: 1.1.0 transitivePeerDependencies: @@ -18182,7 +18185,7 @@ snapshots: http-proxy-middleware@2.0.6(@types/express@4.17.21): dependencies: '@types/http-proxy': 1.17.15 - http-proxy: 1.18.1 + http-proxy: 1.18.1(debug@4.3.7) is-glob: 4.0.3 is-plain-obj: 3.0.0 micromatch: 4.0.8 @@ -18202,14 +18205,6 @@ snapshots: transitivePeerDependencies: - supports-color - http-proxy@1.18.1: - dependencies: - eventemitter3: 4.0.7 - follow-redirects: 1.15.6(debug@4.3.6) - requires-port: 1.0.0 - transitivePeerDependencies: - - debug - http-proxy@1.18.1(debug@4.3.7): dependencies: eventemitter3: 4.0.7 @@ -18225,7 +18220,7 @@ snapshots: corser: 2.0.1 he: 1.2.0 html-encoding-sniffer: 3.0.0 - http-proxy: 1.18.1 + http-proxy: 1.18.1(debug@4.3.7) mime: 1.6.0 minimist: 1.2.8 opener: 1.5.2 @@ -19099,7 +19094,6 @@ snapshots: - babel-plugin-macros - supports-color - ts-node - optional: true jest@29.7.0(@types/node@20.14.14)(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)): dependencies: @@ -19357,7 +19351,7 @@ snapshots: dom-serialize: 2.2.1 glob: 7.2.3 graceful-fs: 4.2.11 - http-proxy: 1.18.1 + http-proxy: 1.18.1(debug@4.3.7) isbinaryfile: 4.0.10 lodash: 4.17.21 log4js: 6.9.1 @@ -22882,6 +22876,25 @@ snapshots: '@jest/types': 29.6.3 babel-jest: 29.7.0(@babel/core@7.25.2) + ts-jest@29.2.4(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.14.14))(typescript@5.5.4): + dependencies: + bs-logger: 0.2.6 + ejs: 3.1.10 + fast-json-stable-stringify: 2.1.0 + jest: 29.7.0(@types/node@20.14.14) + jest-util: 29.7.0 + json5: 2.2.3 + lodash.memoize: 4.1.2 + make-error: 1.3.6 + semver: 7.6.2 + typescript: 5.5.4 + yargs-parser: 21.1.1 + optionalDependencies: + '@babel/core': 7.25.2 + '@jest/transform': 29.7.0 + '@jest/types': 29.6.3 + babel-jest: 29.7.0(@babel/core@7.25.2) + ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4): dependencies: '@cspotcode/source-map-support': 0.8.1 From dc99b63000a59a561de8b8486432d3b0b88fae17 Mon Sep 17 00:00:00 2001 From: Swiss Post Bot <103635272+swisspost-bot@users.noreply.github.com> Date: Mon, 11 Nov 2024 16:43:00 +0100 Subject: [PATCH 12/18] =?UTF-8?q?chore(changesets):=20=F0=9F=A6=8B?= =?UTF-8?q?=F0=9F=93=A6=20publish=20packages=20(main)=20(next)=20(#3848)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. ⚠️⚠️⚠️⚠️⚠️⚠️ `main` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `main`. ⚠️⚠️⚠️⚠️⚠️⚠️ # Releases ## @swisspost/design-system-components@9.0.0-next.4 ### Major Changes - Removed the `.breadcrumb-item` class, which previously handled styling for breadcrumb items. Introduced a new `post-breadcrumb-item` that should be used in place of the `.breadcrumb-item` class. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3659](https://github.com/swisspost/design-system/pull/3659)) ### Minor Changes - Created the `post-list` and `post-list-item` components. (by [@myrta2302](https://github.com/myrta2302) with [#3812](https://github.com/swisspost/design-system/pull/3812)) - Added close button web component. (by [@leagrdv](https://github.com/leagrdv) with [#3880](https://github.com/swisspost/design-system/pull/3880)) ### Patch Changes - Fixed an issue with the post-collapsible throwing an invalid selector error. (by [@alizedebray](https://github.com/alizedebray) with [#3726](https://github.com/swisspost/design-system/pull/3726)) - Updated dependencies: - @swisspost/design-system-styles@9.0.0-next.4 ## @swisspost/design-system-styles@9.0.0-next.4 ### Major Changes - Removed regular button size. Buttons that were previously using `btn-rg` will now fall back to the default `btn-md` size. (by [@leagrdv](https://github.com/leagrdv) with [#3849](https://github.com/swisspost/design-system/pull/3849)) - Updated list group to v2 and added new options: list links, list documents and list switches. (by [@leagrdv](https://github.com/leagrdv) with [#3740](https://github.com/swisspost/design-system/pull/3740)) - Removed the `btn-animated` class. It no longer has any effect and can be removed from existing buttons. (by [@leagrdv](https://github.com/leagrdv) with [#3849](https://github.com/swisspost/design-system/pull/3849)) - Removed the `.breadcrumb-item` class, which previously handled styling for breadcrumb items. Introduced a new `post-breadcrumb-item` that should be used in place of the `.breadcrumb-item` class. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3659](https://github.com/swisspost/design-system/pull/3659)) ### Minor Changes - Added Form Footer component. (by [@leagrdv](https://github.com/leagrdv) with [#3616](https://github.com/swisspost/design-system/pull/3616)) - Created token-based styles for `
    ` elements. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#3859](https://github.com/swisspost/design-system/pull/3859)) - Updated vertical-align utility (by [@myrta2302](https://github.com/myrta2302) with [#3805](https://github.com/swisspost/design-system/pull/3805)) - Updated button component to v2. (by [@leagrdv](https://github.com/leagrdv) with [#3849](https://github.com/swisspost/design-system/pull/3849)) - Added the skiplinks component to styles and documentation. (by [@leagrdv](https://github.com/leagrdv) with [#3875](https://github.com/swisspost/design-system/pull/3875)) - Added close button web component. (by [@leagrdv](https://github.com/leagrdv) with [#3880](https://github.com/swisspost/design-system/pull/3880)) - Internalized bootstraps floating utilities into the design system. (by [@myrta2302](https://github.com/myrta2302) with [#3752](https://github.com/swisspost/design-system/pull/3752)) ## @swisspost/design-system-icons@9.0.0-next.4 ### Minor Changes - Added icon number 2632. (by [@gfellerph](https://github.com/gfellerph) with [#3952](https://github.com/swisspost/design-system/pull/3952)) ## @swisspost/design-system-components-angular@9.0.0-next.4 ### Patch Changes - Updated dependencies: - @swisspost/design-system-components@9.0.0-next.4 ## @swisspost/design-system-components-react@9.0.0-next.4 ### Patch Changes - Updated dependencies: - @swisspost/design-system-components@9.0.0-next.4 ## @swisspost/design-system-intranet-header@9.0.0-next.4 ### Patch Changes - Updated dependencies: - @swisspost/design-system-styles@9.0.0-next.4 ## @swisspost/design-system-styles-primeng@9.0.0-next.4 ### Patch Changes - Updated dependencies: - @swisspost/design-system-styles@9.0.0-next.4 ## @swisspost/design-system-migrations@9.0.0-next.4 ## @swisspost/design-system-tokens@9.0.0-next.4 ## @swisspost/design-system-documentation@6.0.0-next.5 ### Minor Changes - Updated list group to v2 and added new options: list links, list documents and list switches. (by [@leagrdv](https://github.com/leagrdv) with [#3740](https://github.com/swisspost/design-system/pull/3740)) - Created the `post-list` and `post-list-item` components. (by [@myrta2302](https://github.com/myrta2302) with [#3812](https://github.com/swisspost/design-system/pull/3812)) - Updated the Accessibility documentation section with Form Labels guidelines. (by [@myrta2302](https://github.com/myrta2302) with [#3835](https://github.com/swisspost/design-system/pull/3835)) - Added Form Footer component. (by [@leagrdv](https://github.com/leagrdv) with [#3616](https://github.com/swisspost/design-system/pull/3616)) - Updated vertical-align utility (by [@myrta2302](https://github.com/myrta2302) with [#3805](https://github.com/swisspost/design-system/pull/3805)) - Added the skiplinks component to styles and documentation. (by [@leagrdv](https://github.com/leagrdv) with [#3875](https://github.com/swisspost/design-system/pull/3875)) - Added close button web component. (by [@leagrdv](https://github.com/leagrdv) with [#3880](https://github.com/swisspost/design-system/pull/3880)) - Internalized bootstraps floating utilities into the design system. (by [@myrta2302](https://github.com/myrta2302) with [#3752](https://github.com/swisspost/design-system/pull/3752)) ### Patch Changes - Updated basic `
      ` element docs and moved them from `Utilities/Lists` to `Foundation/Typography/Lists`. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#3859](https://github.com/swisspost/design-system/pull/3859)) - Updated dependencies: - @swisspost/design-system-icons@9.0.0-next.4 - @swisspost/design-system-styles@9.0.0-next.4 - @swisspost/design-system-components@9.0.0-next.4 - @swisspost/internet-header@2.0.0-next.4 - @swisspost/design-system-components-react@9.0.0-next.4 ## @swisspost/design-system-components-angular-workspace@1.1.10-next.4 ### Patch Changes - Updated dependencies: - @swisspost/design-system-styles@9.0.0-next.4 - @swisspost/design-system-components@9.0.0-next.4 ## @swisspost/internet-header@2.0.0-next.4 ### Patch Changes - Updated dependencies: - @swisspost/design-system-styles@9.0.0-next.4 ## @swisspost/design-system-intranet-header-workspace@3.0.22-next.4 ### Patch Changes - Updated dependencies: - @swisspost/design-system-styles@9.0.0-next.4 ## @swisspost/design-system-intranet-header-showcase@1.0.10-next.4 ### Patch Changes - Updated dependencies: - @swisspost/design-system-intranet-header@9.0.0-next.4 ## @swisspost/design-system-nextjs-integration@0.1.14-next.4 ### Patch Changes - Updated dependencies: - @swisspost/design-system-styles@9.0.0-next.4 - @swisspost/internet-header@2.0.0-next.4 - @swisspost/design-system-components-react@9.0.0-next.4 ## @swisspost/design-system-styles-primeng-workspace@1.0.6-next.4 ### Patch Changes - Updated dependencies: - @swisspost/design-system-styles@9.0.0-next.4 --------- Co-authored-by: github-actions[bot] --- .changeset/pre.json | 16 +++++ packages/components-angular/CHANGELOG.md | 8 +++ packages/components-angular/package.json | 6 +- .../projects/components/CHANGELOG.md | 7 ++ .../projects/components/package.json | 4 +- packages/components-react/CHANGELOG.md | 7 ++ packages/components-react/package.json | 4 +- packages/components/CHANGELOG.md | 18 ++++++ packages/components/package.json | 4 +- packages/documentation/CHANGELOG.md | 30 +++++++++ packages/documentation/package.json | 16 ++--- packages/documentation/public/_redirects | 1 + .../documentation/public/assets/versions.json | 62 +++++++++++++----- packages/icons/CHANGELOG.md | 6 ++ packages/icons/package.json | 2 +- packages/internet-header/CHANGELOG.md | 7 ++ packages/internet-header/package.json | 4 +- .../intranet-header-workspace/CHANGELOG.md | 7 ++ .../intranet-header-workspace/package.json | 4 +- .../intranet-header-showcase/CHANGELOG.md | 7 ++ .../intranet-header-showcase/package.json | 4 +- .../projects/intranet-header/CHANGELOG.md | 7 ++ .../projects/intranet-header/package.json | 6 +- packages/migrations/CHANGELOG.md | 2 + packages/migrations/package.json | 2 +- packages/nextjs-integration/CHANGELOG.md | 9 +++ packages/nextjs-integration/package.json | 8 +-- .../styles-primeng-workspace/CHANGELOG.md | 7 ++ .../styles-primeng-workspace/package.json | 4 +- .../projects/styles-primeng/CHANGELOG.md | 7 ++ .../projects/styles-primeng/package.json | 4 +- packages/styles/CHANGELOG.md | 28 ++++++++ packages/styles/package.json | 6 +- packages/tokens/CHANGELOG.md | 2 + packages/tokens/package.json | 2 +- pnpm-lock.yaml | 64 +++++++++++-------- 36 files changed, 297 insertions(+), 85 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 5169ad951f..a948833b59 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -24,6 +24,7 @@ "changesets": [ "2024-10-17-update-icons", "2024-10-27-update-icons", + "2024-11-10-update-icons", "beige-jobs-do", "big-frogs-admire", "breezy-cups-add", @@ -32,17 +33,25 @@ "cold-baboons-appear", "cold-panthers-vanish", "cuddly-bears-check", + "cuddly-gifts-film", + "dirty-mayflies-taste", "eight-turkeys-matter", "eleven-keys-work", "empty-islands-kneel", "fair-actors-scream", + "fast-bats-poke", "fast-fans-wash", + "fifty-dodos-wait", + "fifty-students-call", "five-hornets-sin", "friendly-insects-breathe", "funny-shrimps-care", "giant-games-swim", + "gold-chairs-grin", + "gold-chefs-rule", "gorgeous-flowers-flow", "great-humans-talk", + "grumpy-parrots-wonder", "heavy-rats-explode", "kind-buses-trade", "kind-papayas-provide", @@ -51,26 +60,33 @@ "loud-dingos-remember", "lovely-deers-itch", "lovely-mirrors-travel", + "neat-suits-provide", "nervous-rocks-shop", + "new-goats-impress", "ninety-nails-float", "pink-weeks-relate", "plenty-apricots-raise", "popular-games-rush", "proud-actors-knock", + "proud-cheetahs-act", "proud-moons-impress", "quick-eagles-watch", "quiet-apes-rhyme", + "rare-dryers-count", "red-cobras-cry", "red-lies-lick", + "rich-timers-listen", "selfish-bats-run", "selfish-ways-know", "shaggy-experts-give", "sharp-baboons-smile", "sharp-crews-watch", "shiny-ears-care", + "shy-walls-exercise", "silver-coins-invent", "six-spiders-smoke", "sixty-items-promise", + "slimy-rockets-pull", "strange-bottles-impress", "tame-terms-push", "three-lies-do", diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/CHANGELOG.md index 11eca2d195..14bd6d34d2 100644 --- a/packages/components-angular/CHANGELOG.md +++ b/packages/components-angular/CHANGELOG.md @@ -1,5 +1,13 @@ # @swisspost/design-system-components-angular-workspace +## 1.1.10-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-styles@9.0.0-next.4 + - @swisspost/design-system-components@9.0.0-next.4 + ## 1.1.10-next.3 ### Patch Changes diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json index 06c7e9eb61..04519844ac 100644 --- a/packages/components-angular/package.json +++ b/packages/components-angular/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-components-angular-workspace", - "version": "1.1.10-next.3", + "version": "1.1.10-next.4", "scripts": { "start": "ng serve --port 9210", "build": "ng build components", @@ -18,8 +18,8 @@ "@angular/platform-browser": "18.2.10", "@angular/platform-browser-dynamic": "18.2.10", "@angular/router": "18.2.10", - "@swisspost/design-system-components": "workspace:9.0.0-next.3", - "@swisspost/design-system-styles": "workspace:9.0.0-next.3", + "@swisspost/design-system-components": "workspace:9.0.0-next.4", + "@swisspost/design-system-styles": "workspace:9.0.0-next.4", "rxjs": "7.8.1", "tslib": "2.6.3", "zone.js": "0.14.8" diff --git a/packages/components-angular/projects/components/CHANGELOG.md b/packages/components-angular/projects/components/CHANGELOG.md index c897490ffa..8a2305d0ef 100644 --- a/packages/components-angular/projects/components/CHANGELOG.md +++ b/packages/components-angular/projects/components/CHANGELOG.md @@ -1,5 +1,12 @@ # @swisspost/design-system-components-angular +## 9.0.0-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-components@9.0.0-next.4 + ## 9.0.0-next.3 ### Minor Changes diff --git a/packages/components-angular/projects/components/package.json b/packages/components-angular/projects/components/package.json index e82f5da166..040548d639 100644 --- a/packages/components-angular/projects/components/package.json +++ b/packages/components-angular/projects/components/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-components-angular", - "version": "9.0.0-next.3", + "version": "9.0.0-next.4", "description": "Swiss Post Design System - Angular Wrapper Components", "author": "Swiss Post ", "license": "Apache-2.0", @@ -19,7 +19,7 @@ }, "dependencies": { "tslib": "2.6.3", - "@swisspost/design-system-components": "workspace:9.0.0-next.3" + "@swisspost/design-system-components": "workspace:9.0.0-next.4" }, "peerDependencies": { "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0", diff --git a/packages/components-react/CHANGELOG.md b/packages/components-react/CHANGELOG.md index 2345d27a43..e1503d21ca 100644 --- a/packages/components-react/CHANGELOG.md +++ b/packages/components-react/CHANGELOG.md @@ -1,5 +1,12 @@ # @swisspost/design-system-components-react +## 9.0.0-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-components@9.0.0-next.4 + ## 9.0.0-next.3 ### Patch Changes diff --git a/packages/components-react/package.json b/packages/components-react/package.json index 8238f83559..76bb2f2ae5 100644 --- a/packages/components-react/package.json +++ b/packages/components-react/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-components-react", - "version": "9.0.0-next.3", + "version": "9.0.0-next.4", "description": "Design System React Components for easy integration with the React ecosystem", "author": "Swiss Post ", "license": "Apache-2.0", @@ -29,7 +29,7 @@ "lint": "eslint src/**/*.ts" }, "dependencies": { - "@swisspost/design-system-components": "workspace:9.0.0-next.3" + "@swisspost/design-system-components": "workspace:9.0.0-next.4" }, "devDependencies": { "@types/node": "20.14.14", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 4eb3171fc0..2f4eb8c9fb 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,23 @@ # @swisspost/design-system-components +## 9.0.0-next.4 + +### Major Changes + +- Removed the `.breadcrumb-item` class, which previously handled styling for breadcrumb items. Introduced a new `post-breadcrumb-item` that should be used in place of the `.breadcrumb-item` class. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3659](https://github.com/swisspost/design-system/pull/3659)) + +### Minor Changes + +- Created the `post-list` and `post-list-item` components. (by [@myrta2302](https://github.com/myrta2302) with [#3812](https://github.com/swisspost/design-system/pull/3812)) + +- Added close button web component. (by [@leagrdv](https://github.com/leagrdv) with [#3880](https://github.com/swisspost/design-system/pull/3880)) + +### Patch Changes + +- Fixed an issue with the post-collapsible throwing an invalid selector error. (by [@alizedebray](https://github.com/alizedebray) with [#3726](https://github.com/swisspost/design-system/pull/3726)) +- Updated dependencies: + - @swisspost/design-system-styles@9.0.0-next.4 + ## 9.0.0-next.3 ### Major Changes diff --git a/packages/components/package.json b/packages/components/package.json index f2591ed525..221a556679 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-components", - "version": "9.0.0-next.3", + "version": "9.0.0-next.4", "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.", "license": "Apache-2.0", "main": "dist/index.cjs.js", @@ -40,7 +40,7 @@ "dependencies": { "@floating-ui/dom": "1.6.8", "@oddbird/popover-polyfill": "0.3.7", - "@swisspost/design-system-styles": "workspace:9.0.0-next.3", + "@swisspost/design-system-styles": "workspace:9.0.0-next.4", "ally.js": "1.4.1", "long-press-event": "2.5.0" }, diff --git a/packages/documentation/CHANGELOG.md b/packages/documentation/CHANGELOG.md index 4d4645f460..027ce55b6d 100644 --- a/packages/documentation/CHANGELOG.md +++ b/packages/documentation/CHANGELOG.md @@ -1,5 +1,35 @@ # @swisspost/design-system-documentation +## 6.0.0-next.5 + +### Minor Changes + +- Updated list group to v2 and added new options: list links, list documents and list switches. (by [@leagrdv](https://github.com/leagrdv) with [#3740](https://github.com/swisspost/design-system/pull/3740)) + +- Created the `post-list` and `post-list-item` components. (by [@myrta2302](https://github.com/myrta2302) with [#3812](https://github.com/swisspost/design-system/pull/3812)) + +- Updated the Accessibility documentation section with Form Labels guidelines. (by [@myrta2302](https://github.com/myrta2302) with [#3835](https://github.com/swisspost/design-system/pull/3835)) + +- Added Form Footer component. (by [@leagrdv](https://github.com/leagrdv) with [#3616](https://github.com/swisspost/design-system/pull/3616)) + +- Updated vertical-align utility (by [@myrta2302](https://github.com/myrta2302) with [#3805](https://github.com/swisspost/design-system/pull/3805)) + +- Added the skiplinks component to styles and documentation. (by [@leagrdv](https://github.com/leagrdv) with [#3875](https://github.com/swisspost/design-system/pull/3875)) + +- Added close button web component. (by [@leagrdv](https://github.com/leagrdv) with [#3880](https://github.com/swisspost/design-system/pull/3880)) + +- Internalized bootstraps floating utilities into the design system. (by [@myrta2302](https://github.com/myrta2302) with [#3752](https://github.com/swisspost/design-system/pull/3752)) + +### Patch Changes + +- Updated basic `
        ` element docs and moved them from `Utilities/Lists` to `Foundation/Typography/Lists`. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#3859](https://github.com/swisspost/design-system/pull/3859)) +- Updated dependencies: + - @swisspost/design-system-icons@9.0.0-next.4 + - @swisspost/design-system-styles@9.0.0-next.4 + - @swisspost/design-system-components@9.0.0-next.4 + - @swisspost/internet-header@2.0.0-next.4 + - @swisspost/design-system-components-react@9.0.0-next.4 + ## 6.0.0-next.4 ### Patch Changes diff --git a/packages/documentation/package.json b/packages/documentation/package.json index 1e6d5bbd3e..054769c301 100644 --- a/packages/documentation/package.json +++ b/packages/documentation/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-documentation", - "version": "6.0.0-next.4", + "version": "6.0.0-next.5", "description": "Swiss Post Design System Documentation.", "author": "Swiss Post ", "license": "Apache-2.0", @@ -28,11 +28,11 @@ "lint": "eslint **/*.{ts,tsx,mdx}" }, "dependencies": { - "@swisspost/design-system-components": "workspace:9.0.0-next.3", - "@swisspost/design-system-components-react": "workspace:9.0.0-next.3", - "@swisspost/design-system-icons": "workspace:9.0.0-next.3", - "@swisspost/design-system-styles": "workspace:9.0.0-next.3", - "@swisspost/internet-header": "workspace:2.0.0-next.3", + "@swisspost/design-system-components": "workspace:9.0.0-next.4", + "@swisspost/design-system-components-react": "workspace:9.0.0-next.4", + "@swisspost/design-system-icons": "workspace:9.0.0-next.4", + "@swisspost/design-system-styles": "workspace:9.0.0-next.4", + "@swisspost/internet-header": "workspace:2.0.0-next.4", "bootstrap": "5.3.3" }, "devDependencies": { @@ -53,8 +53,8 @@ "@storybook/types": "8.3.6", "@storybook/web-components": "8.3.6", "@storybook/web-components-vite": "8.3.6", - "@swisspost/design-system-components-angular": "workspace:9.0.0-next.3", - "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.3", + "@swisspost/design-system-components-angular": "workspace:9.0.0-next.4", + "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.4", "@types/css-modules": "1.0.5", "@types/mdx": "2.0.13", "@types/react": "18.3.3", diff --git a/packages/documentation/public/_redirects b/packages/documentation/public/_redirects index 72890d6c5b..554f386e14 100644 --- a/packages/documentation/public/_redirects +++ b/packages/documentation/public/_redirects @@ -7,3 +7,4 @@ /v8 https://design-system-version-8.netlify.app /v9 https://swisspost-design-system-version-9.netlify.app + diff --git a/packages/documentation/public/assets/versions.json b/packages/documentation/public/assets/versions.json index 3c264439ed..e9ffa81f97 100644 --- a/packages/documentation/public/assets/versions.json +++ b/packages/documentation/public/assets/versions.json @@ -1,7 +1,7 @@ [ { "title": "Version 9", - "version": "9.0.0-next.3", + "version": "9.0.0-next.4", "description": "Pattern documentation, code snippets and implementation guidelines for the Design System Styles.", "url": "https://design-system.post.ch", "dependencies": { @@ -9,22 +9,50 @@ "@ng-bootstrap/ng-bootstrap": "^17.0.0", "bootstrap": "~5.3.0", "@swisspost/design-system-changelog-github": "1.0.2", - "@swisspost/design-system-components": "9.0.0-next.3", - "@swisspost/design-system-components-angular-workspace": "1.1.10-next.3", - "@swisspost/design-system-components-angular": "9.0.0-next.3", - "@swisspost/design-system-components-react": "9.0.0-next.3", - "@swisspost/design-system-documentation": "6.0.0-next.3", - "@swisspost/design-system-icons": "9.0.0-next.3", - "@swisspost/internet-header": "2.0.0-next.3", - "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.3", - "@swisspost/design-system-intranet-header": "9.0.0-next.3", - "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.3", - "@swisspost/design-system-migrations": "9.0.0-next.3", - "@swisspost/design-system-nextjs-integration": "0.1.14-next.3", - "@swisspost/design-system-styles": "9.0.0-next.3", - "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.3", - "@swisspost/design-system-styles-primeng": "9.0.0-next.3", - "@swisspost/design-system-tokens": "9.0.0-next.3" + "@swisspost/design-system-components": "9.0.0-next.4", + "@swisspost/design-system-components-angular-workspace": "1.1.10-next.4", + "@swisspost/design-system-components-angular": "9.0.0-next.4", + "@swisspost/design-system-components-react": "9.0.0-next.4", + "@swisspost/design-system-documentation": "6.0.0-next.5", + "@swisspost/design-system-icons": "9.0.0-next.4", + "@swisspost/internet-header": "2.0.0-next.4", + "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.4", + "@swisspost/design-system-intranet-header": "9.0.0-next.4", + "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.4", + "@swisspost/design-system-migrations": "9.0.0-next.4", + "@swisspost/design-system-nextjs-integration": "0.1.14-next.4", + "@swisspost/design-system-styles": "9.0.0-next.4", + "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.4", + "@swisspost/design-system-styles-primeng": "9.0.0-next.4", + "@swisspost/design-system-tokens": "9.0.0-next.4" + } + }, + { + "title": "Version 9", + "version": "9.0.0-next.3", + "description": "Pattern documentation, code snippets and implementation guidelines for the Design System Styles.", + "url": "https://swisspost-design-system-version-9.netlify.app", + "dependencies": { + "@angular/core": "^18.0.0", + "@ng-bootstrap/ng-bootstrap": "^17.0.0", + "bootstrap": "~5.3.0", + "@swisspost/design-system-changelog-github": "1.0.2", + "@swisspost/design-system-components": "9.0.0-next.2", + "@swisspost/design-system-components-angular-workspace": "1.1.10-next.2", + "@swisspost/design-system-components-angular": "9.0.0-next.2", + "@swisspost/design-system-components-react": "9.0.0-next.2", + "@swisspost/design-system-documentation": "6.0.0-next.2", + "@swisspost/design-system-icons": "9.0.0-next.2", + "@swisspost/internet-header": "1.14.6-next.2", + "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.2", + "@swisspost/design-system-intranet-header": "9.0.0-next.2", + "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.2", + "@swisspost/design-system-migrations": "9.0.0-next.2", + "@swisspost/design-system-nextjs-integration": "0.1.14-next.2", + "@swisspost/design-system-styles": "9.0.0-next.2", + "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.2", + "@swisspost/design-system-styles-primeng": "9.0.0-next.2", + "@swisspost/design-system-tokens": "9.0.0-next.2" } }, { diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 9884c38702..266f90b48c 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,11 @@ # @swisspost/design-system-icons +## 9.0.0-next.4 + +### Minor Changes + +- Added icon number 2632. (by [@gfellerph](https://github.com/gfellerph) with [#3952](https://github.com/swisspost/design-system/pull/3952)) + ## 9.0.0-next.3 ### Minor Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index a99c408c8e..bfab4bb763 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-icons", - "version": "9.0.0-next.3", + "version": "9.0.0-next.4", "description": "A collection of Swiss Post icons intended for use with the Design System.", "author": "Swiss Post ", "license": "Apache-2.0", diff --git a/packages/internet-header/CHANGELOG.md b/packages/internet-header/CHANGELOG.md index 6045c62d48..191aa04061 100644 --- a/packages/internet-header/CHANGELOG.md +++ b/packages/internet-header/CHANGELOG.md @@ -1,5 +1,12 @@ # @swisspost/internet-header +## 2.0.0-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-styles@9.0.0-next.4 + ## 2.0.0-next.3 ### Major Changes diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json index b2f9d12ab1..3fc3baad3d 100644 --- a/packages/internet-header/package.json +++ b/packages/internet-header/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/internet-header", - "version": "2.0.0-next.3", + "version": "2.0.0-next.4", "description": "The header for client facing applications.", "author": "Swiss Post ", "license": "Apache-2.0", @@ -43,7 +43,7 @@ "generate": "stencil generate" }, "dependencies": { - "@swisspost/design-system-styles": "workspace:9.0.0-next.3", + "@swisspost/design-system-styles": "workspace:9.0.0-next.4", "body-scroll-lock": "4.0.0-beta.0", "iframe-resizer": "4.4.5", "jquery": "3.7.1", diff --git a/packages/intranet-header-workspace/CHANGELOG.md b/packages/intranet-header-workspace/CHANGELOG.md index 91492befb9..9089734bf1 100644 --- a/packages/intranet-header-workspace/CHANGELOG.md +++ b/packages/intranet-header-workspace/CHANGELOG.md @@ -1,5 +1,12 @@ # @swisspost/design-system-intranet-header-workspace +## 3.0.22-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-styles@9.0.0-next.4 + ## 3.0.22-next.3 ### Patch Changes diff --git a/packages/intranet-header-workspace/package.json b/packages/intranet-header-workspace/package.json index 0de925c6c9..4765f5d611 100644 --- a/packages/intranet-header-workspace/package.json +++ b/packages/intranet-header-workspace/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-intranet-header-workspace", - "version": "3.0.22-next.3", + "version": "3.0.22-next.4", "license": "Apache-2.0", "private": true, "scripts": { @@ -23,7 +23,7 @@ "@angular/router": "18.2.10", "@ng-bootstrap/ng-bootstrap": "17.0.0", "@popperjs/core": "2.11.8", - "@swisspost/design-system-styles": "workspace:9.0.0-next.3", + "@swisspost/design-system-styles": "workspace:9.0.0-next.4", "rxjs": "7.8.1", "tslib": "2.6.3", "watch": "1.0.2", diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md b/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md index 079e480e30..59a093b10e 100644 --- a/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md +++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md @@ -1,5 +1,12 @@ # @swisspost/design-system-intranet-header-showcase +## 1.0.10-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-intranet-header@9.0.0-next.4 + ## 1.0.10-next.3 ### Patch Changes diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json b/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json index d46ae766af..8a6a4aa998 100644 --- a/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json +++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json @@ -1,9 +1,9 @@ { "name": "@swisspost/design-system-intranet-header-showcase", - "version": "1.0.10-next.3", + "version": "1.0.10-next.4", "license": "Apache-2.0", "private": true, "dependencies": { - "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.3" + "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.4" } } diff --git a/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md b/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md index fdf8cfd7e4..80c03b908e 100644 --- a/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md +++ b/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md @@ -1,5 +1,12 @@ # @swisspost/design-system-intranet-header +## 9.0.0-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-styles@9.0.0-next.4 + ## 9.0.0-next.3 ### Patch Changes diff --git a/packages/intranet-header-workspace/projects/intranet-header/package.json b/packages/intranet-header-workspace/projects/intranet-header/package.json index e140974e8c..6b514d97bf 100644 --- a/packages/intranet-header-workspace/projects/intranet-header/package.json +++ b/packages/intranet-header-workspace/projects/intranet-header/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-intranet-header", - "version": "9.0.0-next.3", + "version": "9.0.0-next.4", "description": "Intranet header for internal Swiss Post applications as an Angular component.", "author": "Swiss Post ", "license": "Apache-2.0", @@ -18,11 +18,11 @@ "linkDirectory": true }, "dependencies": { - "@swisspost/design-system-styles": "workspace:9.0.0-next.3", + "@swisspost/design-system-styles": "workspace:9.0.0-next.4", "tslib": "2.6.3" }, "devDependencies": { - "@swisspost/design-system-intranet-header-workspace": "workspace:3.0.22-next.3" + "@swisspost/design-system-intranet-header-workspace": "workspace:3.0.22-next.4" }, "peerDependencies": { "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0", diff --git a/packages/migrations/CHANGELOG.md b/packages/migrations/CHANGELOG.md index ff686a4cb5..2a14a52f7a 100644 --- a/packages/migrations/CHANGELOG.md +++ b/packages/migrations/CHANGELOG.md @@ -1,5 +1,7 @@ # @swisspost/design-system-migrations +## 9.0.0-next.4 + ## 9.0.0-next.3 ## 9.0.0-next.2 diff --git a/packages/migrations/package.json b/packages/migrations/package.json index bc96131ef3..2cf92879b2 100644 --- a/packages/migrations/package.json +++ b/packages/migrations/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-migrations", - "version": "9.0.0-next.3", + "version": "9.0.0-next.4", "description": "Scripts to migrate an Angular application from one Design System version to another.", "author": "Swiss Post ", "license": "Apache-2.0", diff --git a/packages/nextjs-integration/CHANGELOG.md b/packages/nextjs-integration/CHANGELOG.md index 87b1330cee..85e09490e7 100644 --- a/packages/nextjs-integration/CHANGELOG.md +++ b/packages/nextjs-integration/CHANGELOG.md @@ -1,5 +1,14 @@ # @swisspost/design-system-nextjs-integration +## 0.1.14-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-styles@9.0.0-next.4 + - @swisspost/internet-header@2.0.0-next.4 + - @swisspost/design-system-components-react@9.0.0-next.4 + ## 0.1.14-next.3 ### Patch Changes diff --git a/packages/nextjs-integration/package.json b/packages/nextjs-integration/package.json index d1377d9510..11fe8acd03 100644 --- a/packages/nextjs-integration/package.json +++ b/packages/nextjs-integration/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-nextjs-integration", - "version": "0.1.14-next.3", + "version": "0.1.14-next.4", "private": true, "scripts": { "dev": "next dev", @@ -9,9 +9,9 @@ "lint": "next lint" }, "dependencies": { - "@swisspost/design-system-components-react": "workspace:9.0.0-next.3", - "@swisspost/design-system-styles": "workspace:9.0.0-next.3", - "@swisspost/internet-header": "workspace:2.0.0-next.3", + "@swisspost/design-system-components-react": "workspace:9.0.0-next.4", + "@swisspost/design-system-styles": "workspace:9.0.0-next.4", + "@swisspost/internet-header": "workspace:2.0.0-next.4", "next": "15.0.1", "react": "^18", "react-dom": "^18" diff --git a/packages/styles-primeng-workspace/CHANGELOG.md b/packages/styles-primeng-workspace/CHANGELOG.md index b81ee685f3..7f2aef3547 100644 --- a/packages/styles-primeng-workspace/CHANGELOG.md +++ b/packages/styles-primeng-workspace/CHANGELOG.md @@ -1,5 +1,12 @@ # @swisspost/design-system-styles-primeng-workspace +## 1.0.6-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-styles@9.0.0-next.4 + ## 1.0.6-next.3 ### Patch Changes diff --git a/packages/styles-primeng-workspace/package.json b/packages/styles-primeng-workspace/package.json index 312a3becaa..bfc99bbf30 100644 --- a/packages/styles-primeng-workspace/package.json +++ b/packages/styles-primeng-workspace/package.json @@ -1,7 +1,7 @@ { "name": "@swisspost/design-system-styles-primeng-workspace", "description": "Showcase for a Post like custom prime-ng theme", - "version": "1.0.6-next.3", + "version": "1.0.6-next.4", "license": "Apache-2.0", "private": true, "scripts": { @@ -22,7 +22,7 @@ "@angular/platform-browser": "18.2.10", "@angular/platform-browser-dynamic": "18.2.10", "@angular/router": "18.2.10", - "@swisspost/design-system-styles": "workspace:9.0.0-next.3", + "@swisspost/design-system-styles": "workspace:9.0.0-next.4", "primeng": "17.18.7", "rxjs": "7.8.1", "tslib": "2.6.3", diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md b/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md index b20af83a42..e21e541e05 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md +++ b/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md @@ -1,5 +1,12 @@ # @swisspost/design-system-styles-primeng +## 9.0.0-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-styles@9.0.0-next.4 + ## 9.0.0-next.3 ### Patch Changes diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/package.json b/packages/styles-primeng-workspace/projects/styles-primeng/package.json index 6bf017259b..3572a3bd59 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/package.json +++ b/packages/styles-primeng-workspace/projects/styles-primeng/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-styles-primeng", - "version": "9.0.0-next.3", + "version": "9.0.0-next.4", "description": "Swiss Post styles for PrimeNg datatable.", "author": "Swiss Post ", "license": "Apache-2.0", @@ -23,7 +23,7 @@ "primeng": "^17.18.0" }, "dependencies": { - "@swisspost/design-system-styles": "workspace:9.0.0-next.3", + "@swisspost/design-system-styles": "workspace:9.0.0-next.4", "tslib": "2.6.3" }, "sideEffects": false, diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md index 7c92a2548b..724092b33d 100644 --- a/packages/styles/CHANGELOG.md +++ b/packages/styles/CHANGELOG.md @@ -1,5 +1,33 @@ # @swisspost/design-system-styles +## 9.0.0-next.4 + +### Major Changes + +- Removed regular button size. Buttons that were previously using `btn-rg` will now fall back to the default `btn-md` size. (by [@leagrdv](https://github.com/leagrdv) with [#3849](https://github.com/swisspost/design-system/pull/3849)) + +- Updated list group to v2 and added new options: list links, list documents and list switches. (by [@leagrdv](https://github.com/leagrdv) with [#3740](https://github.com/swisspost/design-system/pull/3740)) + +- Removed the `btn-animated` class. It no longer has any effect and can be removed from existing buttons. (by [@leagrdv](https://github.com/leagrdv) with [#3849](https://github.com/swisspost/design-system/pull/3849)) + +- Removed the `.breadcrumb-item` class, which previously handled styling for breadcrumb items. Introduced a new `post-breadcrumb-item` that should be used in place of the `.breadcrumb-item` class. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3659](https://github.com/swisspost/design-system/pull/3659)) + +### Minor Changes + +- Added Form Footer component. (by [@leagrdv](https://github.com/leagrdv) with [#3616](https://github.com/swisspost/design-system/pull/3616)) + +- Created token-based styles for `
          ` elements. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#3859](https://github.com/swisspost/design-system/pull/3859)) + +- Updated vertical-align utility (by [@myrta2302](https://github.com/myrta2302) with [#3805](https://github.com/swisspost/design-system/pull/3805)) + +- Updated button component to v2. (by [@leagrdv](https://github.com/leagrdv) with [#3849](https://github.com/swisspost/design-system/pull/3849)) + +- Added the skiplinks component to styles and documentation. (by [@leagrdv](https://github.com/leagrdv) with [#3875](https://github.com/swisspost/design-system/pull/3875)) + +- Added close button web component. (by [@leagrdv](https://github.com/leagrdv) with [#3880](https://github.com/swisspost/design-system/pull/3880)) + +- Internalized bootstraps floating utilities into the design system. (by [@myrta2302](https://github.com/myrta2302) with [#3752](https://github.com/swisspost/design-system/pull/3752)) + ## 9.0.0-next.3 ### Major Changes diff --git a/packages/styles/package.json b/packages/styles/package.json index ae55c56de7..97215527b6 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-styles", - "version": "9.0.0-next.3", + "version": "9.0.0-next.4", "description": "Design System Styles for the Swiss Post web platform.", "author": "Swiss Post ", "license": "Apache-2.0", @@ -49,8 +49,8 @@ "gulp-sourcemaps": "3.0.0" }, "devDependencies": { - "@swisspost/design-system-icons": "workspace:9.0.0-next.3", - "@swisspost/design-system-tokens": "workspace:9.0.0-next.3", + "@swisspost/design-system-icons": "workspace:9.0.0-next.4", + "@swisspost/design-system-tokens": "workspace:9.0.0-next.4", "@types/node": "20.14.14", "autoprefixer": "10.4.19", "copyfiles": "2.4.1", diff --git a/packages/tokens/CHANGELOG.md b/packages/tokens/CHANGELOG.md index 16cd9f8705..fbc6aba9bc 100644 --- a/packages/tokens/CHANGELOG.md +++ b/packages/tokens/CHANGELOG.md @@ -1,5 +1,7 @@ # @swisspost/design-system-tokens +## 9.0.0-next.4 + ## 9.0.0-next.3 ### Minor Changes diff --git a/packages/tokens/package.json b/packages/tokens/package.json index 955eb99ef5..2bc80f0ddb 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-tokens", - "version": "9.0.0-next.3", + "version": "9.0.0-next.4", "description": "Design Tokens for the Swiss Post Design System.", "author": "Swiss Post ", "license": "Apache-2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4848de421f..534dde8797 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -47,7 +47,7 @@ importers: specifier: 0.3.7 version: 0.3.7 '@swisspost/design-system-styles': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../styles/dist ally.js: specifier: 1.4.1 @@ -150,10 +150,10 @@ importers: specifier: 18.2.10 version: 18.2.10(@angular/common@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(@angular/platform-browser@18.2.10(@angular/animations@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(@angular/common@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(rxjs@7.8.1) '@swisspost/design-system-components': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../components '@swisspost/design-system-styles': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../styles/dist rxjs: specifier: 7.8.1 @@ -232,7 +232,7 @@ importers: specifier: ^16.0.0 || ^17.0.0 || ^18.0.0 version: 18.1.1(rxjs@7.8.1)(zone.js@0.14.8) '@swisspost/design-system-components': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../../../components tslib: specifier: 2.6.3 @@ -242,7 +242,7 @@ importers: packages/components-react: dependencies: '@swisspost/design-system-components': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../components devDependencies: '@types/node': @@ -294,19 +294,19 @@ importers: packages/documentation: dependencies: '@swisspost/design-system-components': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../components '@swisspost/design-system-components-react': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../components-react '@swisspost/design-system-icons': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../icons '@swisspost/design-system-styles': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../styles/dist '@swisspost/internet-header': - specifier: workspace:2.0.0-next.3 + specifier: workspace:2.0.0-next.4 version: link:../internet-header bootstrap: specifier: 5.3.3 @@ -364,10 +364,10 @@ importers: specifier: 8.3.6 version: 8.3.6(lit@3.1.4)(storybook@8.2.7(@babel/preset-env@7.25.3(@babel/core@7.25.2)))(typescript@5.5.4)(vite@5.4.8(@types/node@22.7.9)(less@4.2.0)(sass@1.78.0)(terser@5.31.6)) '@swisspost/design-system-components-angular': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../components-angular/dist/components '@swisspost/design-system-intranet-header': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../intranet-header-workspace/dist/intranet-header '@types/css-modules': specifier: 1.0.5 @@ -502,7 +502,7 @@ importers: packages/internet-header: dependencies: '@swisspost/design-system-styles': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../styles/dist body-scroll-lock: specifier: 4.0.0-beta.0 @@ -653,7 +653,7 @@ importers: specifier: 2.11.8 version: 2.11.8 '@swisspost/design-system-styles': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../styles/dist rxjs: specifier: 7.8.1 @@ -747,21 +747,21 @@ importers: specifier: ^16.0.0 || ^17.0.0 || ^18.0.0 version: 18.1.1(rxjs@7.8.1)(zone.js@0.14.8) '@swisspost/design-system-styles': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../../../styles/dist tslib: specifier: 2.6.3 version: 2.6.3 devDependencies: '@swisspost/design-system-intranet-header-workspace': - specifier: workspace:3.0.22-next.3 + specifier: workspace:3.0.22-next.4 version: link:../.. publishDirectory: ../../dist/intranet-header packages/intranet-header-workspace/projects/intranet-header-showcase: dependencies: '@swisspost/design-system-intranet-header': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../../dist/intranet-header packages/migrations: @@ -807,13 +807,13 @@ importers: packages/nextjs-integration: dependencies: '@swisspost/design-system-components-react': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../components-react '@swisspost/design-system-styles': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../styles/dist '@swisspost/internet-header': - specifier: workspace:2.0.0-next.3 + specifier: workspace:2.0.0-next.4 version: link:../internet-header next: specifier: 15.0.1 @@ -875,10 +875,10 @@ importers: version: 3.0.0 devDependencies: '@swisspost/design-system-icons': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../icons '@swisspost/design-system-tokens': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../tokens/dist '@types/node': specifier: 20.14.14 @@ -969,7 +969,7 @@ importers: specifier: 18.2.10 version: 18.2.10(@angular/common@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(@angular/platform-browser@18.2.10(@angular/animations@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(@angular/common@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(rxjs@7.8.1) '@swisspost/design-system-styles': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../styles/dist primeng: specifier: 17.18.7 @@ -1045,7 +1045,7 @@ importers: specifier: ^18.0.0 version: 18.1.1(rxjs@7.8.1)(zone.js@0.14.8) '@swisspost/design-system-styles': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../../../styles/dist primeng: specifier: ^17.18.0 @@ -15494,7 +15494,7 @@ snapshots: axios@1.7.7: dependencies: - follow-redirects: 1.15.6(debug@4.3.7) + follow-redirects: 1.15.6(debug@4.3.6) form-data: 4.0.0 proxy-from-env: 1.1.0 transitivePeerDependencies: @@ -18185,7 +18185,7 @@ snapshots: http-proxy-middleware@2.0.6(@types/express@4.17.21): dependencies: '@types/http-proxy': 1.17.15 - http-proxy: 1.18.1(debug@4.3.7) + http-proxy: 1.18.1 is-glob: 4.0.3 is-plain-obj: 3.0.0 micromatch: 4.0.8 @@ -18205,6 +18205,14 @@ snapshots: transitivePeerDependencies: - supports-color + http-proxy@1.18.1: + dependencies: + eventemitter3: 4.0.7 + follow-redirects: 1.15.6(debug@4.3.6) + requires-port: 1.0.0 + transitivePeerDependencies: + - debug + http-proxy@1.18.1(debug@4.3.7): dependencies: eventemitter3: 4.0.7 @@ -18220,7 +18228,7 @@ snapshots: corser: 2.0.1 he: 1.2.0 html-encoding-sniffer: 3.0.0 - http-proxy: 1.18.1(debug@4.3.7) + http-proxy: 1.18.1 mime: 1.6.0 minimist: 1.2.8 opener: 1.5.2 @@ -19351,7 +19359,7 @@ snapshots: dom-serialize: 2.2.1 glob: 7.2.3 graceful-fs: 4.2.11 - http-proxy: 1.18.1(debug@4.3.7) + http-proxy: 1.18.1 isbinaryfile: 4.0.10 lodash: 4.17.21 log4js: 6.9.1 From 1fa8f2891a16de1c634bd575267a933b1e6e5ab5 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com> Date: Mon, 11 Nov 2024 17:21:52 +0100 Subject: [PATCH 13/18] feat(components): create the post-menu-button component (#3795) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Zherdetska Alona, IT21.1 Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .changeset/quick-buses-give.md | 6 + packages/components/src/components.d.ts | 87 ++++++++ .../post-menu-item/post-menu-item.scss | 3 + .../post-menu-item/post-menu-item.tsx | 19 ++ .../src/components/post-menu-item/readme.md | 10 + .../post-menu-trigger/post-menu-trigger.scss | 3 + .../post-menu-trigger/post-menu-trigger.tsx | 83 ++++++++ .../components/post-menu-trigger/readme.md | 17 ++ .../src/components/post-menu/post-menu.scss | 11 + .../src/components/post-menu/post-menu.tsx | 195 ++++++++++++++++++ .../src/components/post-menu/readme.md | 82 ++++++++ .../post-popovercontainer/readme.md | 2 + packages/components/src/index.ts | 3 + packages/components/src/utils/is-focusable.ts | 28 +++ packages/documentation/.storybook/preview.ts | 4 + .../menu-button/menu-button.docs.mdx | 19 ++ .../menu-button/menu-button.stories.ts | 73 +++++++ 17 files changed, 645 insertions(+) create mode 100644 .changeset/quick-buses-give.md create mode 100644 packages/components/src/components/post-menu-item/post-menu-item.scss create mode 100644 packages/components/src/components/post-menu-item/post-menu-item.tsx create mode 100644 packages/components/src/components/post-menu-item/readme.md create mode 100644 packages/components/src/components/post-menu-trigger/post-menu-trigger.scss create mode 100644 packages/components/src/components/post-menu-trigger/post-menu-trigger.tsx create mode 100644 packages/components/src/components/post-menu-trigger/readme.md create mode 100644 packages/components/src/components/post-menu/post-menu.scss create mode 100644 packages/components/src/components/post-menu/post-menu.tsx create mode 100644 packages/components/src/components/post-menu/readme.md create mode 100644 packages/components/src/utils/is-focusable.ts create mode 100644 packages/documentation/src/stories/components/menu-button/menu-button.docs.mdx create mode 100644 packages/documentation/src/stories/components/menu-button/menu-button.stories.ts diff --git a/.changeset/quick-buses-give.md b/.changeset/quick-buses-give.md new file mode 100644 index 0000000000..d3212d7400 --- /dev/null +++ b/.changeset/quick-buses-give.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-documentation': minor +'@swisspost/design-system-components': minor +--- + +Added new Menu Button components (post-menu-button, post-menu-trigger, and post-menu-item) for creating accessible dropdown menus. diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index 3056034100..5a64d0884d 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -243,6 +243,33 @@ export namespace Components { */ "url": string | URL; } + interface PostMenu { + /** + * Hides the popover menu and restores focus to the previously focused element. + */ + "hide": () => Promise; + /** + * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. + */ + "placement"?: Placement; + /** + * Displays the popover menu, focusing the first menu item. + * @param target - The HTML element relative to which the popover menu should be displayed. + */ + "show": (target: HTMLElement) => Promise; + /** + * Toggles the menu visibility based on its current state. + */ + "toggle": (target: HTMLElement) => Promise; + } + interface PostMenuItem { + } + interface PostMenuTrigger { + /** + * ID of the menu element that this trigger is linked to. Used to open and close the specified menu. + */ + "for": string; + } interface PostPopover { /** * Show a little indicator arrow @@ -402,6 +429,10 @@ export interface PostLanguageOptionCustomEvent extends CustomEvent { detail: T; target: HTMLPostLanguageOptionElement; } +export interface PostMenuCustomEvent extends CustomEvent { + detail: T; + target: HTMLPostMenuElement; +} export interface PostPopovercontainerCustomEvent extends CustomEvent { detail: T; target: HTMLPostPopovercontainerElement; @@ -550,6 +581,35 @@ declare global { prototype: HTMLPostLogoElement; new (): HTMLPostLogoElement; }; + interface HTMLPostMenuElementEventMap { + "toggleMenu": boolean; + } + interface HTMLPostMenuElement extends Components.PostMenu, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLPostMenuElement, ev: PostMenuCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLPostMenuElement, ev: PostMenuCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLPostMenuElement: { + prototype: HTMLPostMenuElement; + new (): HTMLPostMenuElement; + }; + interface HTMLPostMenuItemElement extends Components.PostMenuItem, HTMLStencilElement { + } + var HTMLPostMenuItemElement: { + prototype: HTMLPostMenuItemElement; + new (): HTMLPostMenuItemElement; + }; + interface HTMLPostMenuTriggerElement extends Components.PostMenuTrigger, HTMLStencilElement { + } + var HTMLPostMenuTriggerElement: { + prototype: HTMLPostMenuTriggerElement; + new (): HTMLPostMenuTriggerElement; + }; interface HTMLPostPopoverElement extends Components.PostPopover, HTMLStencilElement { } var HTMLPostPopoverElement: { @@ -647,6 +707,9 @@ declare global { "post-list": HTMLPostListElement; "post-list-item": HTMLPostListItemElement; "post-logo": HTMLPostLogoElement; + "post-menu": HTMLPostMenuElement; + "post-menu-item": HTMLPostMenuItemElement; + "post-menu-trigger": HTMLPostMenuTriggerElement; "post-popover": HTMLPostPopoverElement; "post-popovercontainer": HTMLPostPopovercontainerElement; "post-rating": HTMLPostRatingElement; @@ -869,6 +932,24 @@ declare namespace LocalJSX { */ "url"?: string | URL; } + interface PostMenu { + /** + * Emits when the menu is shown or hidden. The event payload is a boolean: `true` when the menu was opened, `false` when it was closed. + */ + "onToggleMenu"?: (event: PostMenuCustomEvent) => void; + /** + * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. + */ + "placement"?: Placement; + } + interface PostMenuItem { + } + interface PostMenuTrigger { + /** + * ID of the menu element that this trigger is linked to. Used to open and close the specified menu. + */ + "for": string; + } interface PostPopover { /** * Show a little indicator arrow @@ -992,6 +1073,9 @@ declare namespace LocalJSX { "post-list": PostList; "post-list-item": PostListItem; "post-logo": PostLogo; + "post-menu": PostMenu; + "post-menu-item": PostMenuItem; + "post-menu-trigger": PostMenuTrigger; "post-popover": PostPopover; "post-popovercontainer": PostPopovercontainer; "post-rating": PostRating; @@ -1026,6 +1110,9 @@ declare module "@stencil/core" { "post-list": LocalJSX.PostList & JSXBase.HTMLAttributes; "post-list-item": LocalJSX.PostListItem & JSXBase.HTMLAttributes; "post-logo": LocalJSX.PostLogo & JSXBase.HTMLAttributes; + "post-menu": LocalJSX.PostMenu & JSXBase.HTMLAttributes; + "post-menu-item": LocalJSX.PostMenuItem & JSXBase.HTMLAttributes; + "post-menu-trigger": LocalJSX.PostMenuTrigger & JSXBase.HTMLAttributes; "post-popover": LocalJSX.PostPopover & JSXBase.HTMLAttributes; "post-popovercontainer": LocalJSX.PostPopovercontainer & JSXBase.HTMLAttributes; "post-rating": LocalJSX.PostRating & JSXBase.HTMLAttributes; diff --git a/packages/components/src/components/post-menu-item/post-menu-item.scss b/packages/components/src/components/post-menu-item/post-menu-item.scss new file mode 100644 index 0000000000..f09d32524a --- /dev/null +++ b/packages/components/src/components/post-menu-item/post-menu-item.scss @@ -0,0 +1,3 @@ +:host { + display: block; +} \ No newline at end of file diff --git a/packages/components/src/components/post-menu-item/post-menu-item.tsx b/packages/components/src/components/post-menu-item/post-menu-item.tsx new file mode 100644 index 0000000000..b4c7de0469 --- /dev/null +++ b/packages/components/src/components/post-menu-item/post-menu-item.tsx @@ -0,0 +1,19 @@ +import { Component, h, Element, Host } from '@stencil/core'; +import { version } from '@root/package.json'; + +@Component({ + tag: 'post-menu-item', + shadow: true, + styleUrl: 'post-menu-item.scss', +}) +export class PostMenuItem { + @Element() host: HTMLPostMenuItemElement; + + render() { + return ( + + + + ); + } +} diff --git a/packages/components/src/components/post-menu-item/readme.md b/packages/components/src/components/post-menu-item/readme.md new file mode 100644 index 0000000000..d6c88bc316 --- /dev/null +++ b/packages/components/src/components/post-menu-item/readme.md @@ -0,0 +1,10 @@ +# post-menu-item + + + + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/components/src/components/post-menu-trigger/post-menu-trigger.scss b/packages/components/src/components/post-menu-trigger/post-menu-trigger.scss new file mode 100644 index 0000000000..8d3464e097 --- /dev/null +++ b/packages/components/src/components/post-menu-trigger/post-menu-trigger.scss @@ -0,0 +1,3 @@ +:host { + display: inline-block; +} \ No newline at end of file diff --git a/packages/components/src/components/post-menu-trigger/post-menu-trigger.tsx b/packages/components/src/components/post-menu-trigger/post-menu-trigger.tsx new file mode 100644 index 0000000000..8f07329f27 --- /dev/null +++ b/packages/components/src/components/post-menu-trigger/post-menu-trigger.tsx @@ -0,0 +1,83 @@ +import { Component, Element, Prop, h, Host, State, Watch } from '@stencil/core'; +import { version } from '@root/package.json'; +import { checkType } from '@/utils'; + +@Component({ + tag: 'post-menu-trigger', + styleUrl: 'post-menu-trigger.scss', + shadow: false, +}) +export class PostMenuTrigger { + /** + * ID of the menu element that this trigger is linked to. Used to open and close the specified menu. + */ + @Prop() for!: string; + + @Element() host: HTMLPostMenuTriggerElement; + + /** + * Manages the accessibility attribute `aria-expanded` to indicate whether the associated menu is expanded or collapsed. + */ + @State() ariaExpanded: boolean = false; + + /** + * Reference to the slotted button within the trigger, if present. + * Used to manage click and key events for menu control. + */ + private slottedButton: HTMLButtonElement | null = null; + + /** + * Watch for changes to the `for` property to validate its type and ensure it is a string. + * @param forValue - The new value of the `for` property. + */ + @Watch('for') + validateControlFor(forValue = this.for) { + checkType(forValue, 'string', 'The "for" property is required and should be a string.'); + } + + private get menu(): HTMLPostMenuElement | null { + const ref = document.getElementById(this.for); + return ref && ref.localName === 'post-menu' ? (ref as HTMLPostMenuElement) : null; + } + + private handleToggle() { + const menu = this.menu; + if (menu && this.slottedButton) { + this.ariaExpanded = !this.ariaExpanded; + this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString()); + menu.toggle(this.host); + } else { + console.warn(`No post-menu found with ID: ${this.for}`); + } + } + + private handleKeyDown = (e: KeyboardEvent) => { + if (e.key === 'ArrowUp' || e.key === 'ArrowDown') { + e.preventDefault(); + this.handleToggle(); + } + }; + + componentDidLoad() { + this.validateControlFor(); + + this.slottedButton = this.host.querySelector('button'); + if (this.slottedButton) { + this.slottedButton.setAttribute('aria-haspopup', 'menu'); + this.slottedButton.addEventListener('click', () => { + this.handleToggle(); + }); + this.slottedButton.addEventListener('keydown', this.handleKeyDown); + } else { + console.warn('No button found within post-menu-trigger'); + } + } + + render() { + return ( + + + + ); + } +} diff --git a/packages/components/src/components/post-menu-trigger/readme.md b/packages/components/src/components/post-menu-trigger/readme.md new file mode 100644 index 0000000000..5be3ab3109 --- /dev/null +++ b/packages/components/src/components/post-menu-trigger/readme.md @@ -0,0 +1,17 @@ +# post-menu-trigger + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ------------------ | --------- | ------------------------------------------------------------------------------------------------- | -------- | ----------- | +| `for` _(required)_ | `for` | ID of the menu element that this trigger is linked to. Used to open and close the specified menu. | `string` | `undefined` | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/components/src/components/post-menu/post-menu.scss b/packages/components/src/components/post-menu/post-menu.scss new file mode 100644 index 0000000000..95b15284b7 --- /dev/null +++ b/packages/components/src/components/post-menu/post-menu.scss @@ -0,0 +1,11 @@ +@use '@swisspost/design-system-styles/core' as post; + +:host { + display: block; +} + +post-popovercontainer { + padding: var(--post-menu-padding); + background-color: var(--post-menu-bg, #ffffff); + border-color: var(--post-menu-bg, #ffffff); +} \ No newline at end of file diff --git a/packages/components/src/components/post-menu/post-menu.tsx b/packages/components/src/components/post-menu/post-menu.tsx new file mode 100644 index 0000000000..dd5c90f3bf --- /dev/null +++ b/packages/components/src/components/post-menu/post-menu.tsx @@ -0,0 +1,195 @@ +import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core'; +import { Placement } from '@floating-ui/dom'; +import { version } from '@root/package.json'; +import { isFocusable } from '@/utils/is-focusable'; + +@Component({ + tag: 'post-menu', + styleUrl: 'post-menu.scss', + shadow: true, +}) +export class PostMenu { + private popoverRef: HTMLPostPopovercontainerElement; + private lastFocusedElement: HTMLElement | null = null; + + private readonly KEYCODES = { + SPACE: ' ', + ENTER: 'Enter', + UP: 'ArrowUp', + DOWN: 'ArrowDown', + TAB: 'Tab', + HOME: 'Home', + END: 'End', + ESCAPE: 'Escape' + }; + + @Element() host: HTMLPostMenuElement; + + /** + * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. + * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted + * towards the viewport if they would overlap edge boundaries. + */ + @Prop() readonly placement?: Placement = 'bottom'; + + /** + * Holds the current visibility state of the menu. + * This state is internally managed to track whether the menu is open (`true`) or closed (`false`), + * and updates automatically when the menu is toggled. + */ + @State() isVisible: boolean = false; + + /** + * Emits when the menu is shown or hidden. + * The event payload is a boolean: `true` when the menu was opened, `false` when it was closed. + **/ + @Event() toggleMenu: EventEmitter; + + connectedCallback() { + this.host.addEventListener('keydown', this.handleKeyDown); + this.host.addEventListener('click', this.handleClick); + } + + disconnectedCallback() { + this.host.removeEventListener('keydown', this.handleKeyDown); + this.host.removeEventListener('click', this.handleClick); + } + + componentDidLoad() { + this.popoverRef.addEventListener('postToggle', (event: CustomEvent) => { + this.isVisible = event.detail; + this.toggleMenu.emit(this.isVisible); + }); + } + + /** + * Toggles the menu visibility based on its current state. + */ + @Method() + async toggle(target: HTMLElement) { + this.isVisible ? await this.hide() : await this.show(target); + } + + /** + * Displays the popover menu, focusing the first menu item. + * + * @param target - The HTML element relative to which the popover menu should be displayed. + */ + @Method() + async show(target: HTMLElement) { + if (this.popoverRef) { + await this.popoverRef.show(target); + this.lastFocusedElement = document.activeElement as HTMLElement; + + const menuItems = this.getSlottedItems(); + if (menuItems.length > 0) { + (menuItems[0] as HTMLElement).focus(); + } + } else { + console.error('show: popoverRef is null or undefined'); + } + } + + /** + * Hides the popover menu and restores focus to the previously focused element. + */ + @Method() + async hide() { + if (this.popoverRef) { + await this.popoverRef.hide(); + if (this.lastFocusedElement) { + this.lastFocusedElement.focus(); + } + } else { + console.error('hide: popoverRef is null or undefined'); + } + } + + private handleKeyDown = (e: KeyboardEvent) => { + e.stopPropagation(); + + if (e.key === this.KEYCODES.ESCAPE) { + this.toggle(this.host); + return; + } + + if (Object.values(this.KEYCODES).includes(e.key)) { + this.controlKeyDownHandler(e); + } + }; + + private handleClick = (e: MouseEvent) => { + const target = e.target as HTMLElement; + if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) { + this.toggle(this.host); + } + }; + + private controlKeyDownHandler(e: KeyboardEvent) { + const menuItems = this.getSlottedItems(); + if (!menuItems.length) { + return; + } + + const currentFocusedElement = document.activeElement as HTMLElement; + let currentIndex = menuItems.findIndex(el => el === currentFocusedElement); + + switch (e.key) { + case this.KEYCODES.UP: + e.preventDefault(); + currentIndex = (currentIndex - 1 + menuItems.length) % menuItems.length; + break; + case this.KEYCODES.DOWN: + e.preventDefault(); + currentIndex = (currentIndex + 1) % menuItems.length; + break; + case this.KEYCODES.HOME: + currentIndex = 0; + break; + case this.KEYCODES.END: + currentIndex = menuItems.length - 1; + break; + case this.KEYCODES.SPACE: + case this.KEYCODES.ENTER: + this.toggle(this.host); + return; + case this.KEYCODES.TAB: + this.toggle(this.host); + break; + default: + break; + } + + if (menuItems[currentIndex]) { + (menuItems[currentIndex] as HTMLElement).focus(); + } + } + + private getSlottedItems() { + const slot = this.host.shadowRoot.querySelector('slot'); + const slottedElements = slot ? slot.assignedElements() : []; + + const menuItems = slottedElements + .filter(el => el.tagName === 'POST-MENU-ITEM') + .map(el => { + const slot = el.shadowRoot.querySelector('slot'); + const assignedElements = slot ? slot.assignedElements() : []; + return assignedElements.filter(isFocusable); + }) + .flat(); + + return menuItems; + } + + render() { + return ( + + (this.popoverRef = e)}> +
          + +
          +           +           + ); + } +} diff --git a/packages/components/src/components/post-menu/readme.md b/packages/components/src/components/post-menu/readme.md new file mode 100644 index 0000000000..f700878d4c --- /dev/null +++ b/packages/components/src/components/post-menu/readme.md @@ -0,0 +1,82 @@ +# post-menu + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ----------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | +| `placement` | `placement` | Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom'` | + + +## Events + +| Event | Description | Type | +| ------------ | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | +| `toggleMenu` | Emits when the menu is shown or hidden. The event payload is a boolean: `true` when the menu was opened, `false` when it was closed. | `CustomEvent` | + + +## Methods + +### `hide() => Promise` + +Hides the popover menu and restores focus to the previously focused element. + +#### Returns + +Type: `Promise` + + + +### `show(target: HTMLElement) => Promise` + +Displays the popover menu, focusing the first menu item. + +#### Parameters + +| Name | Type | Description | +| -------- | ------------- | -------------------------------------------------------------------------- | +| `target` | `HTMLElement` | - The HTML element relative to which the popover menu should be displayed. | + +#### Returns + +Type: `Promise` + + + +### `toggle(target: HTMLElement) => Promise` + +Toggles the menu visibility based on its current state. + +#### Parameters + +| Name | Type | Description | +| -------- | ------------- | ----------- | +| `target` | `HTMLElement` | | + +#### Returns + +Type: `Promise` + + + + +## Dependencies + +### Depends on + +- [post-popovercontainer](../post-popovercontainer) + +### Graph +```mermaid +graph TD; + post-menu --> post-popovercontainer + style post-menu fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/components/src/components/post-popovercontainer/readme.md b/packages/components/src/components/post-popovercontainer/readme.md index 7efe854e5c..99b04f2f7e 100644 --- a/packages/components/src/components/post-popovercontainer/readme.md +++ b/packages/components/src/components/post-popovercontainer/readme.md @@ -78,12 +78,14 @@ Type: `Promise` ### Used by + - [post-menu](../post-menu) - [post-popover](../post-popover) - [post-tooltip](../post-tooltip) ### Graph ```mermaid graph TD; + post-menu --> post-popovercontainer post-popover --> post-popovercontainer post-tooltip --> post-popovercontainer style post-popovercontainer fill:#f9f,stroke:#333,stroke-width:4px diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index a2734c8e80..593b7c7fa2 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -13,6 +13,9 @@ export { PostCollapsibleTrigger } from './components/post-collapsible-trigger/po export { PostIcon } from './components/post-icon/post-icon'; export { PostLanguageOption } from './components/post-language-option/post-language-option'; export { PostLogo } from './components/post-logo/post-logo'; +export { PostMenu } from './components/post-menu/post-menu'; +export { PostMenuTrigger } from './components/post-menu-trigger/post-menu-trigger'; +export { PostMenuItem } from './components/post-menu-item/post-menu-item'; export { PostPopover } from './components/post-popover/post-popover'; export { PostPopovercontainer } from './components/post-popovercontainer/post-popovercontainer'; export { PostRating } from './components/post-rating/post-rating'; diff --git a/packages/components/src/utils/is-focusable.ts b/packages/components/src/utils/is-focusable.ts new file mode 100644 index 0000000000..66aa7d74dc --- /dev/null +++ b/packages/components/src/utils/is-focusable.ts @@ -0,0 +1,28 @@ +const focusableSelector = `:where(${[ + 'button', + 'input:not([type="hidden"])', + '[tabindex]', + 'select', + 'textarea', + '[contenteditable]', + 'a[href]', + 'iframe', + 'audio[controls]', + 'video[controls]', + 'area[href]', + 'details > summary:first-of-type', +].join(',')})`; + +const focusDisablingSelector = `:where(${[ + '[inert]', + '[inert] *', + ':disabled', + 'dialog:not([open]) *', + '[popover]:not(:popover-open) *', + 'details:not([open]) > *:not(details > summary:first-of-type)', + 'details:not([open]) > *:not(details > summary:first-of-type) *', +].join(',')})`; + +export const isFocusable = (element: Element) => { + return element?.matches(focusableSelector) && !element?.matches(focusDisablingSelector); +}; diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts index 035bdf5f97..df8c5707e7 100644 --- a/packages/documentation/.storybook/preview.ts +++ b/packages/documentation/.storybook/preview.ts @@ -15,6 +15,7 @@ import './styles/preview.scss'; import { SyntaxHighlighter } from '@storybook/components'; import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss'; +import { ArgTypes } from '@storybook/blocks'; SyntaxHighlighter.registerLanguage('scss', scss); @@ -84,6 +85,9 @@ const preview: Preview = { }, ], }, + argTypes: { + sort: 'requiredFirst', + }, source: { excludeDecorators: true, dark: SourceDarkScheme, diff --git a/packages/documentation/src/stories/components/menu-button/menu-button.docs.mdx b/packages/documentation/src/stories/components/menu-button/menu-button.docs.mdx new file mode 100644 index 0000000000..a5f7a38de6 --- /dev/null +++ b/packages/documentation/src/stories/components/menu-button/menu-button.docs.mdx @@ -0,0 +1,19 @@ +import { Canvas, Controls, Meta } from '@storybook/blocks'; +import * as MenuButtonStories from './menu-button.stories'; + + + +
          + # Menu Button + + +
          + +
          + A dropdown component for displaying a list of links or actions with flexible alignment. +
          + + + diff --git a/packages/documentation/src/stories/components/menu-button/menu-button.stories.ts b/packages/documentation/src/stories/components/menu-button/menu-button.stories.ts new file mode 100644 index 0000000000..1aacdc2e46 --- /dev/null +++ b/packages/documentation/src/stories/components/menu-button/menu-button.stories.ts @@ -0,0 +1,73 @@ +import { Args, StoryObj } from '@storybook/web-components'; +import { html, nothing } from 'lit'; +import { MetaComponent } from '@root/types'; + +const meta: MetaComponent = { + id: '8ca2bd70-56e6-4da9-b1fd-4e55388dca88', + title: 'Components/Menu Button', + tags: ['package:WebComponents'], + component: 'post-menu', + parameters: { + design: {}, + }, + render, + args: { + id: 'menu-one', + placement: 'bottom', + padding: '', + backgroundColor: '', + }, + argTypes: { + id: { + name: 'id', + description: + 'The id is used to connect a trigger element with the popover.', + table: { + category: 'General', + }, + }, + padding: { + name: 'padding', + description: 'Controls the padding inside the menu container using --post-menu-padding.', + control: { type: 'text' }, + table: { + category: 'CSS Variables', + }, + }, + backgroundColor: { + name: 'background color', + description: 'Defines the color of the menu.', + table: { + category: 'CSS Variables' + }, + }, + }, +}; + +function render(args: Args) { + // Construct the style string conditionally based on padding and backgroundColor + const styles = [ + args.padding ? `--post-menu-padding: ${args.padding};` : '', + args.backgroundColor ? `--post-menu-bg: ${args.backgroundColor};` : '' + ].filter(Boolean).join(' ').trim(); + + return html` + + + + + + + Example 2 +
          Example 3
           +           +           + `; +} + +export default meta; +export const Default: StoryObj = {}; From 27c6554ef8b0107c960aceeeb3b4a7153286b4d5 Mon Sep 17 00:00:00 2001 From: Swiss Post Bot <103635272+swisspost-bot@users.noreply.github.com> Date: Tue, 12 Nov 2024 11:22:01 +0100 Subject: [PATCH 14/18] chore(tokens): :art: update tokens (#3967) Merge this PR to update the tokens in the main branch. --------- Co-authored-by: Travaglini Alessio <158268546+Vandapanda@users.noreply.github.com> --- .../tokens/tokensstudio-generated/tokens.json | 471 +++++++++++++----- 1 file changed, 334 insertions(+), 137 deletions(-) diff --git a/packages/tokens/tokensstudio-generated/tokens.json b/packages/tokens/tokensstudio-generated/tokens.json index d953769d56..20b957ff1e 100644 --- a/packages/tokens/tokensstudio-generated/tokens.json +++ b/packages/tokens/tokensstudio-generated/tokens.json @@ -335,6 +335,10 @@ "$type": "dimension", "$value": "48" }, + "50": { + "$type": "dimension", + "$value": "50px" + }, "56": { "$type": "dimension", "$value": "56" @@ -355,6 +359,10 @@ "$type": "dimension", "$value": "80" }, + "82": { + "$type": "dimension", + "$value": "82px" + }, "96": { "$type": "dimension", "$value": "96" @@ -3040,7 +3048,7 @@ }, "2": { "$type": "dimension", - "$value": "{post.core.dimension.18}" + "$value": "{post.core.dimension.14}" } } } @@ -6960,6 +6968,68 @@ } } }, + "Components/Search input": { + "post": { + "input": { + "search": { + "empty": { + "padding": { + "inline": { + "end": { + "$type": "spacing", + "$value": "{post.core.dimension.48}" + } + } + } + }, + "filled": { + "padding": { + "inline": { + "end": { + "$type": "spacing", + "$value": "{post.core.dimension.80}" + } + } + }, + "gap": { + "icon": { + "$type": "spacing", + "$value": "{post.core.dimension.8}" + } + } + }, + "label": { + "empty": { + "padding": { + "inline": { + "end": { + "$type": "spacing", + "$value": "{post.core.dimension.50}" + } + } + } + }, + "filled": { + "padding": { + "inline": { + "end": { + "$type": "spacing", + "$value": "{post.core.dimension.82}" + } + } + } + } + }, + "icon": { + "border-radius": { + "$type": "borderRadius", + "$value": "{post.device.border-radius.focus}" + } + } + } + } + } + }, "Components/Segmented button": { "post": { "button-segmented": { @@ -7055,145 +7125,229 @@ "Components/Select": { "post": { "select": { - "enabled-bg": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.enabled.bg1}" - }, - "enabled-fg": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.enabled.fg1}" - }, - "hover-bg": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.hover.bg}" - }, - "hover-fg": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.hover.fg1}" - }, - "disabled-bg": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.disabled.bg}" - }, - "disabled-fg": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.disabled.fg1}" - }, - "selected-bg": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.selected.bg1}" - }, - "selected-fg": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.selected.fg1}" - }, - "enabled-stroke": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.enabled.stroke}" - }, - "hover-stroke": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.hover.stroke}" - }, - "disabled-stroke": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.disabled.stroke}" - }, - "selected-stroke": { - "$type": "color", - "$value": "{post.scheme.color.interactive.primary.selected.stroke1}" - }, - "signal": { - "error": { + "color": { + "enabled-bg": { "$type": "color", - "$value": "{post.scheme.color.signal.error-dark}" + "$value": "{post.scheme.color.interactive.primary.enabled.bg1}" }, - "success": { + "enabled-fg": { "$type": "color", - "$value": "{post.scheme.color.signal.success-dark}" + "$value": "{post.scheme.color.interactive.primary.enabled.fg1}" + }, + "hover-bg": { + "$type": "color", + "$value": "{post.scheme.color.interactive.primary.hover.bg}" + }, + "hover-fg": { + "$type": "color", + "$value": "{post.scheme.color.interactive.primary.hover.fg1}" + }, + "disabled-bg": { + "$type": "color", + "$value": "{post.scheme.color.interactive.primary.disabled.bg}" + }, + "disabled-fg": { + "$type": "color", + "$value": "{post.scheme.color.interactive.primary.disabled.fg1}" + }, + "selected-bg": { + "$type": "color", + "$value": "{post.scheme.color.interactive.primary.selected.bg1}" + }, + "selected-fg": { + "$type": "color", + "$value": "{post.scheme.color.interactive.primary.selected.fg1}" + }, + "helptext-fg": { + "$type": "color", + "$value": "{post.scheme.color.interactive.primary.enabled.fg2}" + }, + "enabled-border": { + "$type": "color", + "$value": "{post.scheme.color.interactive.primary.enabled.stroke}" + }, + "hover-border": { + "$type": "color", + "$value": "{post.scheme.color.interactive.primary.hover.stroke}" + }, + "disabled-border": { + "$type": "color", + "$value": "{post.scheme.color.interactive.primary.disabled.stroke}" + }, + "selected-border": { + "$type": "color", + "$value": "{post.scheme.color.interactive.primary.selected.stroke1}" + }, + "signal": { + "error": { + "$type": "color", + "$value": "{post.scheme.color.signal.error-dark}" + }, + "success": { + "$type": "color", + "$value": "{post.scheme.color.signal.success-dark}" + } } }, "gap": { "inline": { - "section": { + "1": { "$type": "spacing", "$value": "{post.device.spacing.gap.1}" - } - } - }, - "filled": { - "gap": { - "inline": { - "value": { - "$type": "spacing", - "$value": "{post.device.spacing.gap.inline.4}" - } - } - }, - "padding": { - "block": { - "section": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.block.3}" - } - } - } - }, - "unfilled": { - "padding": { - "block": { - "section": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.block.1}" - }, - "label": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.block.2}" - } + }, + "2": { + "$type": "spacing", + "$value": "{post.device.spacing.gap.inline.4}" } } }, "padding": { "block": { - "text-assist": { + "assist": { "$type": "spacing", "$value": "{post.device.spacing.padding.block.5}" } }, "inline": { - "section-start": { + "start": { "$type": "spacing", "$value": "{post.device.spacing.padding.inline.1}" }, - "section-end": { + "end": { "$type": "spacing", "$value": "{post.device.spacing.padding.3}" }, - "text-assist": { + "assist": { "$type": "spacing", "$value": "{post.device.spacing.padding.2}" } } }, - "icon": { - "padding": { - "droppdow-inner": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.15}" - } - }, - "signal": { + "sizing": { + "icon": { "$type": "sizing", "$value": "{post.device.sizing.notification.1}" + }, + "height": { + "$type": "sizing", + "$value": "{post.device.sizing.interactive.button.height.6}" } }, "border-radius": { - "$type": "borderRadius", - "$value": "{post.device.border-radius.1}" + "surface": { + "$type": "borderRadius", + "$value": "{post.device.border-radius.1}" + } }, "border-width": { "$type": "borderWidth", "$value": "{post.device.border-width.default}" + }, + "border-style": { + "default": { + "$type": "other", + "$value": "{post.core.border-style.solid}" + }, + "disabled": { + "$type": "other", + "$value": "{post.core.border-style.dash}" + } + }, + "empty": { + "padding": { + "block": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.1}" + } + } + }, + "label": { + "empty": { + "padding": { + "block": { + "start": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.28}" + } + }, + "inline": { + "start": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.5}" + }, + "end": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.inline.4}" + } + } + } + }, + "validated": { + "padding": { + "inline": { + "end": { + "$type": "spacing", + "$value": "{post.core.dimension.50}" + } + } + } + }, + "filled": { + "padding": { + "block": { + "start": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.30}" + } + } + }, + "font-size": { + "$type": "fontSizes", + "$value": "{post.device.font-size.10}" + } + } + }, + "validation": { + "icon": { + "position": { + "inline": { + "end": { + "$type": "dimension", + "$value": "{post.device.position.2}" + } + } + } + } + }, + "filled": { + "padding": { + "block": { + "start": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.29}" + }, + "end": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.3}" + } + } + } + }, + "assist": { + "font-size": { + "$type": "fontSizes", + "$value": "{post.device.font-size.10}" + } + }, + "validated": { + "padding": { + "inline": { + "end": { + "$type": "spacing", + "$value": "{post.core.dimension.48}" + } + } + } } } } @@ -7919,7 +8073,7 @@ "inline": { "end": { "$type": "spacing", - "$value": "{post.core.dimension.48}" + "$value": "{post.core.dimension.50}" } } } @@ -7970,6 +8124,16 @@ "$type": "fontSizes", "$value": "{post.device.font-size.10}" } + }, + "validated": { + "padding": { + "inline": { + "end": { + "$type": "spacing", + "$value": "{post.core.dimension.48}" + } + } + } } } } @@ -9116,7 +9280,8 @@ "post.core.elevation.5": "S:abb94bfe7966ae2690516196d25db0b65df759e2," }, "selectedTokenSets": { - "core": "enabled" + "core": "enabled", + "Components/Search input": "disabled" }, "$figmaCollectionId": "VariableCollectionId:718:1595", "$figmaModeId": "718:0", @@ -9248,7 +9413,9 @@ "post.core.font-family.swiss-post": "5547f71fafbe8166ac0384fd4e8862796da43fea", "post.core.font-family.caveat": "15b599e49f27297ab4aced39752df2cf43f2bb20", "post.core.bg-scheme.light": "680b1c2afef596d40c46720eec03880fce677f54", - "post.core.bg-scheme.dark": "e8c0b33a001cad7d205a2164de934d28333fc7c4" + "post.core.bg-scheme.dark": "e8c0b33a001cad7d205a2164de934d28333fc7c4", + "post.core.dimension.50": "8312fb2e184c7b79ae3cff18a147a2f337c7b235", + "post.core.dimension.82": "8049dec4f0860a0b206c65224d703a3f61135da8" } }, { @@ -9257,7 +9424,8 @@ "$figmaStyleReferences": {}, "selectedTokenSets": { "core": "source", - "Scheme/Light": "enabled" + "Scheme/Light": "enabled", + "Components/Search input": "disabled" }, "group": "Scheme", "$figmaCollectionId": "VariableCollectionId:718:1666", @@ -9436,7 +9604,8 @@ "$figmaStyleReferences": {}, "selectedTokenSets": { "core": "source", - "Scheme/Dark": "enabled" + "Scheme/Dark": "enabled", + "Components/Search input": "disabled" }, "$figmaCollectionId": "VariableCollectionId:718:1666", "$figmaModeId": "718:2", @@ -9613,7 +9782,8 @@ "$figmaStyleReferences": {}, "selectedTokenSets": { "core": "source", - "Device/Desktop": "enabled" + "Device/Desktop": "enabled", + "Components/Search input": "disabled" }, "group": "Device", "$figmaCollectionId": "VariableCollectionId:718:1733", @@ -9681,6 +9851,9 @@ "post.device.spacing.padding.block.24": "f686d2271f0067fa4db06c30ee1db53bd954d0ca", "post.device.spacing.padding.block.26": "8db56edb0dc3ee21dd569bd0281da1a23b2f2476", "post.device.spacing.padding.block.27": "100062af317485baa5eb39b22bdf1f3fd73b71d1", + "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967", + "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9", + "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2", "post.device.spacing.padding.inline.3": "68840678b85de831c347ab8bd69931680dd08389", "post.device.spacing.padding.inline.5": "0d48e4a92e523fb69ae371e37c6ff79d6d255cc5", "post.device.spacing.padding.inline.6": "211520f2bb91c1d8315cefb31dc55d7dde233be7", @@ -9699,6 +9872,7 @@ "post.device.sizing.interactive.button.height.3": "0247c69e9f0ff9764992df9dee0bb7dd02b259a6", "post.device.sizing.interactive.button.height.4": "ebb3a560dc61a2887f7a174bed5dca950077cdf8", "post.device.sizing.interactive.button.height.5": "436a60e0ceb2a414cf67c83f22509f2eaeeba7cb", + "post.device.sizing.interactive.button.height.6": "78caf6ef8cec35dc5ab0dc663c9d2747595bc9a6", "post.device.sizing.interactive.button.appstore.width.google": "45676eca5b6cc6fe0e8aa6431e7ada19e0abd54c", "post.device.sizing.interactive.button.appstore.width.apple": "882d2d5cf93f32234520f8ff0d68f15081b8e2b8", "post.device.sizing.interactive.button.icon.1": "a60381335e7c38cb7293af93f86fd98d00753df3", @@ -9727,10 +9901,6 @@ "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c", "post.device.border-width.quote": "1c2f3d93f282058f554db3737d1b131c886b81f4", "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288", - "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967", - "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9", - "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2", - "post.device.sizing.interactive.button.height.6": "78caf6ef8cec35dc5ab0dc663c9d2747595bc9a6", "post.device.spacing.gap.4": "18a97621a6b8cd79f7f4424a6afbc99f49a4104e", "post.device.spacing.gap.5": "cd8bc19de4a06c78cf89a9c2ee34309a0f517e9b", "post.device.spacing.gap.6": "d3f0e06bad0472f9dec52560b44068444b9f9676", @@ -9792,7 +9962,8 @@ "selectedTokenSets": { "core": "source", "Device/Desktop": "enabled", - "Device/Tablet": "enabled" + "Device/Tablet": "enabled", + "Components/Search input": "disabled" }, "group": "Device", "$figmaCollectionId": "VariableCollectionId:718:1733", @@ -9868,6 +10039,9 @@ "post.device.spacing.padding.block.25": "09b620493db7c3442861066bb6821bc16518846b", "post.device.spacing.padding.block.26": "8db56edb0dc3ee21dd569bd0281da1a23b2f2476", "post.device.spacing.padding.block.27": "100062af317485baa5eb39b22bdf1f3fd73b71d1", + "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967", + "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9", + "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2", "post.device.spacing.margin.1": "1f9ac7585069a5d9f5c14c65a08b6c658bc0a0a5", "post.device.spacing.margin.2": "a03e875bcb67b48b5fe0cd53d733c77d6824e86f", "post.device.spacing.margin.3": "eaf0d9d533154fc10cd38699804e027093e4d482", @@ -9909,9 +10083,6 @@ "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c", "post.device.border-width.quote": "1c2f3d93f282058f554db3737d1b131c886b81f4", "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288", - "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967", - "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9", - "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2", "post.device.spacing.gap.1": "303b065d5f8bf9049661db8845f2d1e59a4c08b0", "post.device.spacing.gap.2": "0e3be5c3cc6b23c8827bc5fb005a234c558199fc", "post.device.spacing.gap.3": "91cd08dcbce598d4f63e04fc4e646796d943a377", @@ -9948,6 +10119,7 @@ "post.device.sizing.interactive.icon.size3": "2d6b0a326866829ebae61170bdd76c65456bd604", "post.device.sizing.interactive.icon.size4": "2c0942fd50bd63a9509f8550fc6a38642e9001d8", "post.device.sizing.interactive.button.height.5": "436a60e0ceb2a414cf67c83f22509f2eaeeba7cb", + "post.device.sizing.interactive.button.height.6": "78caf6ef8cec35dc5ab0dc663c9d2747595bc9a6", "post.device.sizing.interactive.button.icon.6": "3a79fafdf0edac10e89188baab62e2b2a37e4d67", "post.device.sizing.icon.2": "40866b641b5c0bf1426e0769534645dc14212cc1", "post.device.border-radius.1": "bf9efed364999a9ef84bdb512985ac9f6fdbec1d", @@ -9978,7 +10150,8 @@ "core": "source", "Device/Desktop": "enabled", "Device/Tablet": "enabled", - "Device/Mobile": "enabled" + "Device/Mobile": "enabled", + "Components/Search input": "disabled" }, "group": "Device", "$figmaCollectionId": "VariableCollectionId:718:1733", @@ -10087,6 +10260,9 @@ "post.device.spacing.padding.block.25": "09b620493db7c3442861066bb6821bc16518846b", "post.device.spacing.padding.block.26": "8db56edb0dc3ee21dd569bd0281da1a23b2f2476", "post.device.spacing.padding.block.27": "100062af317485baa5eb39b22bdf1f3fd73b71d1", + "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967", + "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9", + "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2", "post.device.spacing.margin.1": "1f9ac7585069a5d9f5c14c65a08b6c658bc0a0a5", "post.device.spacing.margin.2": "a03e875bcb67b48b5fe0cd53d733c77d6824e86f", "post.device.spacing.margin.3": "eaf0d9d533154fc10cd38699804e027093e4d482", @@ -10106,6 +10282,7 @@ "post.device.sizing.interactive.button.height.3": "0247c69e9f0ff9764992df9dee0bb7dd02b259a6", "post.device.sizing.interactive.button.height.4": "ebb3a560dc61a2887f7a174bed5dca950077cdf8", "post.device.sizing.interactive.button.height.5": "436a60e0ceb2a414cf67c83f22509f2eaeeba7cb", + "post.device.sizing.interactive.button.height.6": "78caf6ef8cec35dc5ab0dc663c9d2747595bc9a6", "post.device.sizing.interactive.button.appstore.width.google": "45676eca5b6cc6fe0e8aa6431e7ada19e0abd54c", "post.device.sizing.interactive.button.appstore.width.apple": "882d2d5cf93f32234520f8ff0d68f15081b8e2b8", "post.device.sizing.interactive.button.icon.1": "a60381335e7c38cb7293af93f86fd98d00753df3", @@ -10143,11 +10320,7 @@ "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9", "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c", "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288", - "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967", - "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc", - "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9", - "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2", - "post.device.sizing.interactive.button.height.6": "78caf6ef8cec35dc5ab0dc663c9d2747595bc9a6" + "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc" } }, { @@ -10161,7 +10334,8 @@ "Device/Mobile": "source", "Channel/EDK": "enabled", "Scheme/Light": "source", - "Scheme/Dark": "source" + "Scheme/Dark": "source", + "Components/Search input": "disabled" }, "group": "Channel", "$figmaCollectionId": "VariableCollectionId:718:1734", @@ -10182,7 +10356,8 @@ "Channel/EDK": "enabled", "Channel/IDK": "enabled", "Scheme/Light": "source", - "Scheme/Dark": "source" + "Scheme/Dark": "source", + "Components/Search input": "disabled" }, "group": "Channel", "$figmaCollectionId": "VariableCollectionId:718:1734", @@ -10213,7 +10388,8 @@ "Elements/ListBullet": "enabled", "Elements/ListNumber": "enabled", "Scheme/Light": "source", - "Scheme/Dark": "source" + "Scheme/Dark": "source", + "Components/Search input": "disabled" }, "$figmaCollectionId": "VariableCollectionId:3180:16769", "$figmaModeId": "3180:1", @@ -10282,7 +10458,8 @@ "Theme/Post": "source", "Utilities/Color": "enabled", "Scheme/Light": "source", - "Scheme/Dark": "source" + "Scheme/Dark": "source", + "Components/Search input": "disabled" }, "$figmaCollectionId": "VariableCollectionId:3180:16768", "$figmaModeId": "3180:0", @@ -10473,7 +10650,8 @@ "Components/Accordion": "enabled", "Components/Container": "enabled", "Components/Floating button": "enabled", - "Components/Blockquote": "enabled" + "Components/Blockquote": "enabled", + "Components/Search input": "enabled" }, "$figmaCollectionId": "VariableCollectionId:808:5504", "$figmaModeId": "808:0", @@ -10887,6 +11065,12 @@ "post.radio-button.padding.block.group": "990db7096901d16ae10b01800015dece8805bd03", "post.radio-button.group.legend.font-size": "173ff3bf123931fc8325fe9156404613a57b8b78", "post.radio-button.label.padding.block": "9aa1af7161cf43024101355d41b51c12692a6bf9", + "post.input.search.empty.padding.inline.end": "e70b768b95376204e19e261a61b1bc761ac39083", + "post.input.search.filled.padding.inline.end": "fc1c21cef2c0bf8b7efde33fbdd0443959959017", + "post.input.search.filled.gap.icon": "4a7f60bd60790adddd665872030cf248db42282a", + "post.input.search.label.empty.padding.inline.end": "86ee6eb34d947957e558ec6f2eff1c74e350412e", + "post.input.search.label.filled.padding.inline.end": "374f2471e81aba44b09a6f6f31f51b47ce87d9a8", + "post.input.search.icon.border-radius": "cd54dafcf43f1524a4759289263baffa23699e17", "post.button-segmented.horizontal.border-radius": "fd01f5b8308c2c2826717c59169509fa33da4431", "post.button-segmented.vertical.border-radius": "bb62d30e7b32d7c62d6a825888a8248af47f3532", "post.button-segmented.selected-fg": "23623d928ead25f0bcf0b42baed2bfdf8345daad", @@ -11046,13 +11230,20 @@ "post.input.color.selected-bg": "8bd7235f1399a9bc166130edce1af72427cfb8ed", "post.input.color.selected-fg": "1ae0d7346c71e3c28fd3ebe05123a3ea04b3fbe6", "post.input.color.helptext-fg": "cc1db7dbc95596ee0f941b44c4b55712ba6625e2", + "post.input.color.enabled-border": "e8fb5159e5c020c2919c12ad157578d1083b1cc2", + "post.input.color.hover-border": "5a5615016cc59292e11a683669369db7182dafb9", + "post.input.color.disabled-border": "c65628869cf318afba36f149d035a6ad6291e0d3", + "post.input.color.selected-border": "cd6d5766d9f136e44719c7a28eb250c545556c35", "post.input.color.signal.error": "7ddc0bfe846c295b5a215c45e423a2fdddf6959a", "post.input.color.signal.success": "0157a5c40c9a4eb6f87cfddd9a5c3f3a8a67282e", "post.input.gap.inline.1": "ea0f287f910901d9a2754175427d33874636908d", "post.input.gap.inline.2": "e17ec3bfeef8ad59d33f8ed4028bcbeffb3c2e65", + "post.input.padding.block.assist": "74fa0091e635d194f2726e8a49d63029f797d7b1", "post.input.padding.inline.start": "95d346d8cf0d15d92cbb0d838ad1d21e2196d909", "post.input.padding.inline.end": "251080d245b6ce91ef6947cedb9d8710871c1e45", + "post.input.padding.inline.assist": "e265e8a8f1e63ac91a7c044560f1c84736e1167f", "post.input.sizing.icon": "d8468d53a31f1ff5e298f2e6783a215bc1a9902c", + "post.input.sizing.height": "82cf75a7b82a124c9b1d42cdbc0e9e84e3b11b9b", "post.input.border-radius.surface": "d06c0dd30f742b0d6cd4cbddcf2ee20dc059be64", "post.input.border-width": "1ade7245040a677b64153d2cdf6651fcea38bf0e", "post.input.empty.padding.block": "5e8222cbe4c364dc01d3f3a4bdc58faa38f2056c", @@ -11060,13 +11251,13 @@ "post.input.label.empty.padding.inline.start": "b51731dc964c610165cf1ae964d243ad78df81e5", "post.input.label.empty.padding.inline.end": "3717013c982ae87b4a055205377945bfd6f49e68", "post.input.label.validated.padding.inline.end": "e48ddec27eff926626a3b10a7861ec56e487e335", + "post.input.label.filled.padding.block.start": "25bb881879bcfa6f8fc16fbda7cd5164a5083252", + "post.input.label.filled.font-size": "a12f8c5b97bd1f6bf59bf7da851dba7386e1396e", "post.input.validation.icon.position.inline.end": "b57f1666c23edfb6f677c04e41bc20ebaae726cc", "post.input.filled.padding.block.start": "2924bedf122ccb4ab278a3ce28e06a8337c84059", "post.input.filled.padding.block.end": "66ffd33591a7dcb8d7d81b4a9ceb90cb563652d2", - "post.input.label.filled.padding.block.start": "25bb881879bcfa6f8fc16fbda7cd5164a5083252", - "post.input.sizing.height": "82cf75a7b82a124c9b1d42cdbc0e9e84e3b11b9b", - "post.input.label.filled.font-size": "a12f8c5b97bd1f6bf59bf7da851dba7386e1396e", "post.input.assist.font-size": "69317593d3b185baf0fb132ac414e643e3c95ae1", + "post.input.validated.padding.inline.end": "a892b10633064c89193e455bb6d5c8b853b195b1", "post.toast.spacing.padding.action": "7b789908238cacf3f7c6b327401296ec0a1da28c", "post.toast.spacing.padding.inline": "014e44c5cc1c44d944c9d6df6c213c429f99c76d", "post.toast.spacing.padding.block": "8588d5bd126b4227934aec9c655f6dbcb10a84b7", @@ -11167,7 +11358,8 @@ "Utilities/Spacing": "source", "Utilities/Typo": "source", "Scheme/Light": "source", - "Scheme/Dark": "source" + "Scheme/Dark": "source", + "Components/Search input": "disabled" } }, { @@ -11183,7 +11375,8 @@ "Channel/IDK": "source", "Theme/Post": "enabled", "Scheme/Light": "source", - "Scheme/Dark": "source" + "Scheme/Dark": "source", + "Components/Search input": "disabled" }, "group": "Theme", "$figmaCollectionId": "VariableCollectionId:4178:5613", @@ -11191,6 +11384,8 @@ "$figmaVariableReferences": { "post.theme.palettes.bg-scheme.brand": "ac9cc556351b9d9b72ce01e166e148b74b25de3f", "post.theme.palettes.bg-scheme.emphasis": "f37d68c8d5ee579997a1a1b403162484c8cff869", + "post.theme.palettes.bg-scheme.default": "9504f02cdfa20b1afd02c21b95c5e8753ac50340", + "post.theme.palettes.bg-scheme.alternate": "bb955dc5c7061bd23cb6c735b2d5f01b727625d0", "post.theme.color.palettes.default.bg": "dc69a147a83c9da5d6b52a3e1999082ac7405009", "post.theme.color.palettes.default.fg": "17e7f1199980448c9e431b59ac934c0ef11c5e1b", "post.theme.color.palettes.alternate.bg": "47e0f61a01f52edc65e7fcfb6ba1237495959eb2", @@ -11198,9 +11393,7 @@ "post.theme.color.palettes.brand.bg": "2f0b9e90b3d7117a9d7037b325deac970c3bee16", "post.theme.color.palettes.brand.fg": "8ce342d323f6022375641c1f92d265636eda0015", "post.theme.color.palettes.accent.bg": "36c62b7057d0d665572ef3d4be91dd81c61fb13b", - "post.theme.color.palettes.accent.fg": "8d3dab1f80eb4d3b22f62613a3c3f80d5609538d", - "post.theme.palettes.bg-scheme.default": "9504f02cdfa20b1afd02c21b95c5e8753ac50340", - "post.theme.palettes.bg-scheme.alternate": "bb955dc5c7061bd23cb6c735b2d5f01b727625d0" + "post.theme.color.palettes.accent.fg": "8d3dab1f80eb4d3b22f62613a3c3f80d5609538d" } }, { @@ -11217,7 +11410,8 @@ "Theme/Post": "enabled", "Theme/Cargo": "enabled", "Scheme/Light": "source", - "Scheme/Dark": "source" + "Scheme/Dark": "source", + "Components/Search input": "disabled" }, "group": "Theme", "$figmaCollectionId": "VariableCollectionId:4178:5613", @@ -11252,7 +11446,8 @@ "Channel/IDK": "source", "Theme/Post": "source", "Theme/Cargo": "source", - "Helpers/Focus": "enabled" + "Helpers/Focus": "enabled", + "Components/Search input": "disabled" }, "group": "Helpers", "$figmaCollectionId": "VariableCollectionId:6402:53868", @@ -11277,7 +11472,8 @@ "Channel/IDK": "source", "Theme/Post": "source", "Theme/Cargo": "source", - "Palettes": "enabled" + "Palettes": "enabled", + "Components/Search input": "disabled" }, "$figmaVariableReferences": { "post.palettes.color.default.bg": "5f2f435ea49163621af38ad9798447b33aad773f", @@ -11338,6 +11534,7 @@ "Components/Notifications", "Components/Popover", "Components/Radio button", + "Components/Search input", "Components/Segmented button", "Components/Select", "Components/Snackbar", From c0817512e4c9db897bb09db51ecf109f8af1bac2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Sch=C3=A4r?= <59233938+schaertim@users.noreply.github.com> Date: Tue, 12 Nov 2024 12:32:15 +0100 Subject: [PATCH 15/18] chore(styles): added focus styles for chips (#3820) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .changeset/big-socks-dress.md | 5 +++++ packages/styles/src/components/chip.scss | 11 +++++------ 2 files changed, 10 insertions(+), 6 deletions(-) create mode 100644 .changeset/big-socks-dress.md diff --git a/.changeset/big-socks-dress.md b/.changeset/big-socks-dress.md new file mode 100644 index 0000000000..5863769099 --- /dev/null +++ b/.changeset/big-socks-dress.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': patch +--- + +Fixed issue where the focus ring was not appearing on inactive chips. diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index 73698846f6..11e0c62038 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -51,6 +51,11 @@ display: inline-block; max-width: 100%; + @include utilities.focus-style() { + border-radius: chip.$chip-border-radius; + width: fit-content; + } + &-label { cursor: pointer; @include chip-mx.chip-styles(); @@ -106,12 +111,6 @@ text-decoration-color: initial; } } - - @include utilities.focus-style('+ .chip-filter-label') { - > .chip-text { - text-decoration-color: transparent; - } - } } } From 6aa530ed3054a1cf10eb9ad41cd5bcf74c0ab865 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Date: Tue, 12 Nov 2024 14:35:47 +0100 Subject: [PATCH 16/18] feat(components): post-header (#3837) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added a provisional post-header component with some basic functionality in place. This component is not finished in this state and is intended to provide a skeleton for the other header components so integration is easier to test. --------- Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .changeset/popular-mirrors-cross.md | 7 + packages/components/package.json | 1 + packages/components/src/components.d.ts | 108 ++++++++++++++ .../components/post-header/post-header.scss | 136 ++++++++++++++++++ .../components/post-header/post-header.tsx | 133 +++++++++++++++++ .../src/components/post-header/readme.md | 10 ++ .../src/components/post-logo/post-logo.scss | 1 - .../src/components/post-logo/post-logo.tsx | 2 +- .../post-mainnavigation.scss | 60 ++++++++ .../post-mainnavigation.tsx | 45 ++++++ .../components/post-mainnavigation/readme.md | 17 +++ .../post-megadropdown-trigger.scss | 3 + .../post-megadropdown-trigger.tsx | 30 ++++ .../post-megadropdown-trigger/readme.md | 17 +++ .../post-megadropdown/post-megadropdown.scss | 71 +++++++++ .../post-megadropdown/post-megadropdown.tsx | 59 ++++++++ .../components/post-megadropdown/readme.md | 69 +++++++++ .../post-popovercontainer/readme.md | 2 + packages/components/src/index.html | 95 +++++++++++- packages/components/src/index.ts | 4 + packages/styles/src/elements/body.scss | 1 + pnpm-lock.yaml | 3 + 22 files changed, 870 insertions(+), 4 deletions(-) create mode 100644 .changeset/popular-mirrors-cross.md create mode 100644 packages/components/src/components/post-header/post-header.scss create mode 100644 packages/components/src/components/post-header/post-header.tsx create mode 100644 packages/components/src/components/post-header/readme.md create mode 100644 packages/components/src/components/post-mainnavigation/post-mainnavigation.scss create mode 100644 packages/components/src/components/post-mainnavigation/post-mainnavigation.tsx create mode 100644 packages/components/src/components/post-mainnavigation/readme.md create mode 100644 packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.scss create mode 100644 packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx create mode 100644 packages/components/src/components/post-megadropdown-trigger/readme.md create mode 100644 packages/components/src/components/post-megadropdown/post-megadropdown.scss create mode 100644 packages/components/src/components/post-megadropdown/post-megadropdown.tsx create mode 100644 packages/components/src/components/post-megadropdown/readme.md diff --git a/.changeset/popular-mirrors-cross.md b/.changeset/popular-mirrors-cross.md new file mode 100644 index 0000000000..a047d3d7cc --- /dev/null +++ b/.changeset/popular-mirrors-cross.md @@ -0,0 +1,7 @@ +--- +'@swisspost/design-system-components': minor +'@swisspost/design-system-components-angular': minor +'@swisspost/design-system-components-react': minor +--- + +Added a provisional post-header component with some basic functionality in place. This component is not finished in this state. diff --git a/packages/components/package.json b/packages/components/package.json index 221a556679..253f6811f7 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -65,6 +65,7 @@ "rimraf": "6.0.1", "rollup-plugin-postcss": "4.0.2", "sass": "1.78.0", + "throttle-debounce": "5.0.2", "ts-jest": "29.2.4", "typescript": "5.5.4" }, diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index 5a64d0884d..46ee23749c 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -170,6 +170,8 @@ export namespace Components { */ "update": () => Promise; } + interface PostHeader { + } /** * @class PostIcon - representing a stencil component */ @@ -243,6 +245,30 @@ export namespace Components { */ "url": string | URL; } + interface PostMainnavigation { + } + interface PostMegadropdown { + /** + * Hide megadropdown + * @returns boolean + */ + "hide": () => Promise; + /** + * Show megadropdown + * @param element HTMLElement + * @returns boolean + */ + "show": (element: HTMLElement) => Promise; + /** + * Toggle megadropdown + * @param element HTMLElement + * @param force boolean + * @returns boolean + */ + "toggle": (element: HTMLElement, force?: boolean) => Promise; + } + interface PostMegadropdownTrigger { + } interface PostMenu { /** * Hides the popover menu and restores focus to the previously focused element. @@ -429,6 +455,14 @@ export interface PostLanguageOptionCustomEvent extends CustomEvent { detail: T; target: HTMLPostLanguageOptionElement; } +export interface PostMainnavigationCustomEvent extends CustomEvent { + detail: T; + target: HTMLPostMainnavigationElement; +} +export interface PostMegadropdownTriggerCustomEvent extends CustomEvent { + detail: T; + target: HTMLPostMegadropdownTriggerElement; +} export interface PostMenuCustomEvent extends CustomEvent { detail: T; target: HTMLPostMenuElement; @@ -537,6 +571,12 @@ declare global { prototype: HTMLPostCollapsibleTriggerElement; new (): HTMLPostCollapsibleTriggerElement; }; + interface HTMLPostHeaderElement extends Components.PostHeader, HTMLStencilElement { + } + var HTMLPostHeaderElement: { + prototype: HTMLPostHeaderElement; + new (): HTMLPostHeaderElement; + }; /** * @class PostIcon - representing a stencil component */ @@ -581,6 +621,46 @@ declare global { prototype: HTMLPostLogoElement; new (): HTMLPostLogoElement; }; + interface HTMLPostMainnavigationElementEventMap { + "postToggle": any; + } + interface HTMLPostMainnavigationElement extends Components.PostMainnavigation, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLPostMainnavigationElement, ev: PostMainnavigationCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLPostMainnavigationElement, ev: PostMainnavigationCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLPostMainnavigationElement: { + prototype: HTMLPostMainnavigationElement; + new (): HTMLPostMainnavigationElement; + }; + interface HTMLPostMegadropdownElement extends Components.PostMegadropdown, HTMLStencilElement { + } + var HTMLPostMegadropdownElement: { + prototype: HTMLPostMegadropdownElement; + new (): HTMLPostMegadropdownElement; + }; + interface HTMLPostMegadropdownTriggerElementEventMap { + "postToggle": any; + } + interface HTMLPostMegadropdownTriggerElement extends Components.PostMegadropdownTrigger, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLPostMegadropdownTriggerElement, ev: PostMegadropdownTriggerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLPostMegadropdownTriggerElement, ev: PostMegadropdownTriggerCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLPostMegadropdownTriggerElement: { + prototype: HTMLPostMegadropdownTriggerElement; + new (): HTMLPostMegadropdownTriggerElement; + }; interface HTMLPostMenuElementEventMap { "toggleMenu": boolean; } @@ -702,11 +782,15 @@ declare global { "post-closebutton": HTMLPostClosebuttonElement; "post-collapsible": HTMLPostCollapsibleElement; "post-collapsible-trigger": HTMLPostCollapsibleTriggerElement; + "post-header": HTMLPostHeaderElement; "post-icon": HTMLPostIconElement; "post-language-option": HTMLPostLanguageOptionElement; "post-list": HTMLPostListElement; "post-list-item": HTMLPostListItemElement; "post-logo": HTMLPostLogoElement; + "post-mainnavigation": HTMLPostMainnavigationElement; + "post-megadropdown": HTMLPostMegadropdownElement; + "post-megadropdown-trigger": HTMLPostMegadropdownTriggerElement; "post-menu": HTMLPostMenuElement; "post-menu-item": HTMLPostMenuItemElement; "post-menu-trigger": HTMLPostMenuTriggerElement; @@ -859,6 +943,8 @@ declare namespace LocalJSX { */ "for"?: string; } + interface PostHeader { + } /** * @class PostIcon - representing a stencil component */ @@ -932,6 +1018,20 @@ declare namespace LocalJSX { */ "url"?: string | URL; } + interface PostMainnavigation { + /** + * Gets emitted when a user closes the main navigation on mobile + */ + "onPostToggle"?: (event: PostMainnavigationCustomEvent) => void; + } + interface PostMegadropdown { + } + interface PostMegadropdownTrigger { + /** + * Emits after each toggle + */ + "onPostToggle"?: (event: PostMegadropdownTriggerCustomEvent) => void; + } interface PostMenu { /** * Emits when the menu is shown or hidden. The event payload is a boolean: `true` when the menu was opened, `false` when it was closed. @@ -1068,11 +1168,15 @@ declare namespace LocalJSX { "post-closebutton": PostClosebutton; "post-collapsible": PostCollapsible; "post-collapsible-trigger": PostCollapsibleTrigger; + "post-header": PostHeader; "post-icon": PostIcon; "post-language-option": PostLanguageOption; "post-list": PostList; "post-list-item": PostListItem; "post-logo": PostLogo; + "post-mainnavigation": PostMainnavigation; + "post-megadropdown": PostMegadropdown; + "post-megadropdown-trigger": PostMegadropdownTrigger; "post-menu": PostMenu; "post-menu-item": PostMenuItem; "post-menu-trigger": PostMenuTrigger; @@ -1102,6 +1206,7 @@ declare module "@stencil/core" { "post-closebutton": LocalJSX.PostClosebutton & JSXBase.HTMLAttributes; "post-collapsible": LocalJSX.PostCollapsible & JSXBase.HTMLAttributes; "post-collapsible-trigger": LocalJSX.PostCollapsibleTrigger & JSXBase.HTMLAttributes; + "post-header": LocalJSX.PostHeader & JSXBase.HTMLAttributes; /** * @class PostIcon - representing a stencil component */ @@ -1110,6 +1215,9 @@ declare module "@stencil/core" { "post-list": LocalJSX.PostList & JSXBase.HTMLAttributes; "post-list-item": LocalJSX.PostListItem & JSXBase.HTMLAttributes; "post-logo": LocalJSX.PostLogo & JSXBase.HTMLAttributes; + "post-mainnavigation": LocalJSX.PostMainnavigation & JSXBase.HTMLAttributes; + "post-megadropdown": LocalJSX.PostMegadropdown & JSXBase.HTMLAttributes; + "post-megadropdown-trigger": LocalJSX.PostMegadropdownTrigger & JSXBase.HTMLAttributes; "post-menu": LocalJSX.PostMenu & JSXBase.HTMLAttributes; "post-menu-item": LocalJSX.PostMenuItem & JSXBase.HTMLAttributes; "post-menu-trigger": LocalJSX.PostMenuTrigger & JSXBase.HTMLAttributes; diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss new file mode 100644 index 0000000000..9703e1e3ea --- /dev/null +++ b/packages/components/src/components/post-header/post-header.scss @@ -0,0 +1,136 @@ +@use '@swisspost/design-system-styles/mixins/media'; + +*, +::before, +::after { + box-sizing: border-box; +} + +:host { + --global-header-height: 72px; + --main-header-height: 56px; + --header-height: calc(var(--global-header-height) + var(--main-header-height)); + + @include media.max(lg) { + --global-header-height: 64px; + } +} + +.d-flex { + display: flex; +} + +.space-between { + justify-content: space-between; +} + +.global-header { + background-color: #ffcc00; + display: flex; + justify-content: space-between; + align-items: center; + position: sticky; + padding-inline-start: 4px; + padding-inline-end: 12px; + + height: var(--global-header-height); + + @include media.max(lg) { + top: 0; + } + + @include media.min(lg) { + top: calc((var(--global-header-height) - 24px) * -1); + } +} + +slot[name='post-logo'] { + align-self: flex-end; +} + +.global-sub { + display: flex; + align-items: center; + gap: 2rem; + height: var(--global-header-height); +} + +.align-end { + align-items: flex-end; +} + +.logo { + flex: 1 0 auto; + height: var(--global-header-height); + width: var(--global-header-height); + min-height: 24px; + align-self: flex-end; + + @include media.min(lg) { + height: calc(var(--global-header-height) - var(--header-scroll-top)); + } +} + +::slotted(ul) { + margin-block: 0; + list-style: none; + display: flex; + padding-left: 0; + gap: 1rem; +} + +.title-header, +.main-navigation { + display: flex; + align-items: center; + padding-inline: 12px; + background: white; +} + +.title-header { + height: var(--main-header-height); + display: flex; + align-items: center; + + @include media.max(lg) { + border-bottom: 1px solid black; + } +} +:host(:not(:has([slot='title']))) .title-header { + display: none; +} + +::slotted(h1) { + margin: 0 !important; + font-size: 28px !important; +} + +.main-navigation { + position: sticky; + top: 24px; + height: var(--main-header-height); + + @include media.min(lg) { + border-bottom: 1px solid black; + } + + @include media.max(lg) { + display: none; + position: absolute; + top: var(--header-height); + bottom: 0; + width: 100%; + background-color: white; + height: auto; + + &.extended { + display: block; + } + } +} + +.mobile-toggle { + @include media.min(lg) { + display: none; + } +} diff --git a/packages/components/src/components/post-header/post-header.tsx b/packages/components/src/components/post-header/post-header.tsx new file mode 100644 index 0000000000..0461f5d135 --- /dev/null +++ b/packages/components/src/components/post-header/post-header.tsx @@ -0,0 +1,133 @@ +import { Component, h, Host, State, Element, Listen } from '@stencil/core'; +import { throttle } from 'throttle-debounce'; +import { version } from '@root/package.json'; + +@Component({ + tag: 'post-header', + shadow: true, + styleUrl: './post-header.scss', +}) +export class PostHeader { + @Element() host: HTMLPostHeaderElement; + @State() device: 'mobile' | 'tablet' | 'desktop' = null; + @State() mobileMenuExtended: boolean = false; + + private scrollParent = null; + private throttledScroll = () => this.handleScrollEvent(); + private throttledResize = throttle(50, () => this.handleResize()); + + componentWillRender() { + this.scrollParent = this.getScrollParent(this.host); + this.scrollParent.addEventListener('scroll', this.throttledScroll, { passive: true }); + window.addEventListener('resize', this.throttledResize, { passive: true }); + this.handleResize(); + this.handleScrollEvent(); + } + + @Listen('postMainNavigationClosed') + handlePostMainNavigationClosed() { + this.mobileMenuExtended = false; + } + + private handleScrollEvent() { + // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426" + const st = Math.max( + 0, + this.scrollParent instanceof Document + ? this.scrollParent.documentElement.scrollTop + : this.scrollParent.scrollTop, + ); + + this.host.style.setProperty('--header-scroll-top', `${st}px`); + } + + private getScrollParent(node: Element): Element | Document { + let currentParent = node.parentElement; + while (currentParent) { + if (currentParent.nodeName === 'BODY') { + return document; + } + if (this.isScrollable(currentParent)) { + return currentParent; + } + currentParent = currentParent.parentElement; + } + return document; + } + + private isScrollable(node: Element) { + if (!(node instanceof HTMLElement || node instanceof SVGElement)) { + return false; + } + const style = getComputedStyle(node); + return ['overflow', 'overflow-x', 'overflow-y'].some(propertyName => { + const value = style.getPropertyValue(propertyName); + return value === 'auto' || value === 'scroll'; + }); + } + + private handleResize() { + const width = window?.innerWidth; + if (width >= 1024) { + this.device = 'desktop'; + this.mobileMenuExtended = false; // Close any open mobile menu + } else if (width >= 600) { + this.device = 'tablet'; + } else { + this.device = 'mobile'; + } + } + + private handleMobileMenuToggle() { + this.mobileMenuExtended = !this.mobileMenuExtended; + } + + render() { + const mainNavClasses = ['main-navigation']; + if (this.mobileMenuExtended) { + mainNavClasses.push('extended'); + } + + return ( + +
          +
          + + {this.device === 'desktop' && } +
          +
          + {this.device === 'desktop' && } + + {this.device === 'desktop' && } +
          this.handleMobileMenuToggle()} class="mobile-toggle"> + +
          +
          +
          + +
          + +
          + + +
          +
          + +
          + {(this.device === 'mobile' || this.device === 'tablet') && ( + + )} + + {(this.device === 'mobile' || this.device === 'tablet') && ( + + )} + {(this.device === 'mobile' || this.device === 'tablet') && ( + + )} +
          +           + ); + } +} diff --git a/packages/components/src/components/post-header/readme.md b/packages/components/src/components/post-header/readme.md new file mode 100644 index 0000000000..0605234dfe --- /dev/null +++ b/packages/components/src/components/post-header/readme.md @@ -0,0 +1,10 @@ +# post-header + + + + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/components/src/components/post-logo/post-logo.scss b/packages/components/src/components/post-logo/post-logo.scss index e03e4a6e88..ef7dfcf04e 100644 --- a/packages/components/src/components/post-logo/post-logo.scss +++ b/packages/components/src/components/post-logo/post-logo.scss @@ -14,4 +14,3 @@ .description { @include utilities.visuallyhidden; } - diff --git a/packages/components/src/components/post-logo/post-logo.tsx b/packages/components/src/components/post-logo/post-logo.tsx index d5ba21c1da..313cb0389d 100644 --- a/packages/components/src/components/post-logo/post-logo.tsx +++ b/packages/components/src/components/post-logo/post-logo.tsx @@ -41,7 +41,7 @@ export class PostLogo { const LogoTag = logoLink ? 'a' : 'span'; return ( - +