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 1/6] 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 2/6] 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 3/6] 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 ( - +