diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss index d523a7b324..ea9769d4ef 100644 --- a/.storybook/themes/news.scss +++ b/.storybook/themes/news.scss @@ -1203,30 +1203,33 @@ "line-height": var(--heading-level-6-line-height) ), "header-nav-chain": ( + "align-items": center, "background-color": var(--global-black), - "padding": var(--global-spacing-2) var(--global-spacing-4), - "font-weight": var(--global-font-weight-7), + "display": flex, "font-size": var(--body-font-size), - "line-height": var(--body-line-height), - "transform": translateZ(0), - "min-height": var(--header-nav-chain-height), + "font-weight": var(--global-font-weight-7), + "inline-size": 100%, + "inset-block-start": 0px, "justify-content": center, - "display": flex, - "align-items": center, - "width": 100%, + "line-height": var(--body-line-height), + "margin-block-end": 0px, + "min-block-size": var(--header-nav-chain-height), + "padding-block-end": var(--global-spacing-2), + "padding-block-start": var(--global-spacing-2), + "padding-inline-end": var(--global-spacing-4), + "padding-inline-start": var(--global-spacing-4), "position": sticky, - "top": 0px, - "margin-bottom": 0px, + "transform": translateZ(0), "z-index": 1, "components": ( "icon": ( "fill": currentColor, - "height": var(--global-spacing-5), - "width": var(--global-spacing-5) + "block-size": var(--global-spacing-5), + "inline-size": var(--global-spacing-5) ), "button": ( "color": var(--global-white), - "height": var(--global-spacing-7), + "block-size": var(--global-spacing-7), "font-weight": var(--global-font-weight-7), "font-size": var(--body-font-size), "line-height": var(--body-line-height) @@ -1235,30 +1238,33 @@ "font-weight": var(--global-font-weight-7), "font-size": var(--body-font-size), "line-height": var(--body-line-height), - "padding": var(--global-spacing-2) + "padding-block-end": var(--global-spacing-2), + "padding-block-start": var(--global-spacing-2), + "padding-inline-end": var(--global-spacing-2), + "padding-inline-start": var(--global-spacing-2) ) ) ), "header-nav-chain-flyout-nav": ( - "height": calc((100vh - var(--header-nav-chain-height-scrolled))), + "block-size": calc((100vh - var(--header-nav-chain-height-scrolled))), "gap": 0, "font-weight": var(--global-font-weight-7), "list-style": none, "position": relative, "components": ( "link": ( - "width": 100%, - "padding-top": var(--global-spacing-2), - "padding-bottom": var(--global-spacing-2), - "padding-left": var(--global-spacing-5), - "padding-right": var(--global-spacing-5), "align-items": center, "color": var(--global-white), - "font-weight": var(--global-font-weight-7), "display": block, + "font-weight": var(--global-font-weight-7), "font-size": var(--body-font-size), + "inline-size": 100%, "justify-content": space-between, "line-height": 1.5, + "padding-block-end": var(--global-spacing-2), + "padding-block-start": var(--global-spacing-2), + "padding-inline-end": var(--global-spacing-5), + "padding-inline-start": var(--global-spacing-5), "text-decoration": none ), "link-hover": ( @@ -1268,7 +1274,10 @@ ), "header-nav-chain-flyout-nav-components-desktop": ( "display": none, - "padding": var(--global-spacing-5), + "padding-block-end": var(--global-spacing-5), + "padding-block-start": var(--global-spacing-5), + "padding-inline-end": var(--global-spacing-5), + "padding-inline-start": var(--global-spacing-5), "components": ( "button": ( "align-self": flex-start @@ -1277,15 +1286,18 @@ ), "header-nav-chain-flyout-nav-components-mobile": ( "display": flex, - "padding": var(--global-spacing-5) + "padding-block-end": var(--global-spacing-5), + "padding-block-start": var(--global-spacing-5), + "padding-inline-end": var(--global-spacing-5), + "padding-inline-start": var(--global-spacing-5) ), "header-nav-chain-flyout-nav-item": ( "background-color": var(--global-black), "components": ( "link": ( - "padding-top": var(--global-spacing-3), - "padding-left": var(--global-spacing-5), - "padding-bottom": var(--global-spacing-3) + "padding-block-end": var(--global-spacing-3), + "padding-block-start": var(--global-spacing-3), + "padding-inline-start": var(--global-spacing-5) ) ) ), @@ -1305,7 +1317,7 @@ ) ), "header-nav-chain-flyout-nav-subsection-anchor": ( - "height": var(--global-spacing-8), + "block-size": var(--global-spacing-8), "components": ( "stack": ( "align-content": center, @@ -1350,10 +1362,10 @@ "font-size": var(--global-spacing-4), "font-weight": var(--global-font-weight-7), "line-height": var(--global-line-height-4), - "padding-top": var(--global-spacing-2), - "padding-right": var(--global-spacing-5), - "padding-left": var(--global-spacing-5), - "padding-bottom": var(--global-spacing-2), + "padding-block-end": var(--global-spacing-2), + "padding-block-start": var(--global-spacing-2), + "padding-inline-end": var(--global-spacing-5), + "padding-inline-start": var(--global-spacing-5), "text-decoration": none ), "link-hover": ( @@ -1367,14 +1379,17 @@ ) ), "header-nav-chain-flyout-nav-widgets": ( - "margin-top": var(--global-spacing-3), - "padding": var(--global-spacing-1) var(--global-spacing-4) var(--global-spacing-1) var(--global-spacing-5) + "margin-block-start": var(--global-spacing-3), + "padding-block-end": var(--global-spacing-1), + "padding-block-start": var(--global-spacing-1), + "padding-inline-end": var(--global-spacing-4), + "padding-inline-start": var(--global-spacing-5) ), "header-nav-chain-flyout-nav-wrapper": ( "z-index": 10, "background": var(--global-black), "transition": transform 300ms ease-in-out, - "width": 100vw + "inline-size": 100vw ), "header-nav-chain-flyout-nav-wrapper-closed": ( "transform": translate(-100vw, 0) @@ -1383,24 +1398,26 @@ "gap": var(--global-spacing-4) ), "header-nav-chain-flyout-overlay": ( - "margin-top": var(--header-nav-chain-height), + "margin-block-start": var(--header-nav-chain-height), "z-index": 8, "background": var(--header-nav-chain-overlay-background-color), "-ms-overflow-style": none, "position": absolute, "scrollbar-width": none, - "left": 0, - "top": 0 + "inset-inline-start": 0, + "inset-block-start": 0 ), "header-nav-chain-flyout-overlay-closed": ( "overflow-y": hidden, - "width": 0 + "overflow-block": hidden, + "inline-size": 0 ), "header-nav-chain-flyout-overlay-open": ( "background": var(--header-nav-chain-overlay-background-color), "overflow-y": scroll, + "overflow-block": scroll, "transform": translate(0, 0), - "width": 100% + "inline-size": 100% ), "header-nav-chain-flyout-overlay-scrollbar": ( "display": none @@ -1408,18 +1425,18 @@ "header-nav-chain-links-list": ( "display": none, "gap": var(--global-spacing-2), - "height": var(--global-spacing-5), + "block-size": var(--global-spacing-5), "flex": 11 auto, "overflow": hidden, - "text-align": left, - "width": auto, + "text-align": start, + "inline-size": auto, "flex-wrap": wrap, "components": ( "link": ( "color": var(--global-white), "display": flex, "align-items": center, - "height": 100% + "block-size": 100% ), "separator": ( "color": var(--global-white) @@ -1436,10 +1453,10 @@ ) ), "header-nav-chain-logo": ( - "margin-right": auto + "margin-inline-end": auto ), "header-nav-chain-logo-center": ( - "margin-right": 0 + "margin-inline-end": 0 ), "header-nav-chain-logo-hidden": ( "opacity": 0, @@ -1447,8 +1464,8 @@ "visibility": hidden ), "header-nav-chain-logo-image": ( - "max-width": 240px, - "max-height": var(--header-nav-chain-height), + "max-inline-size": 240px, + "max-block-size": var(--header-nav-chain-height), "transition": (opacity 0.4s ease) ), "header-nav-chain-logo-image-hover": ( @@ -1472,12 +1489,12 @@ ), "header-nav-chain-nav-search-box-position": ( "position": absolute, - "right": 0 + "inset-inline-end": 0 ), "header-nav-chain-nav-search-box-svg": ( "fill": #191919, - "height": 1rem, - "width": 1rem + "block-size": 1rem, + "inline-size": 1rem ), "header-nav-chain-nav-search-button": ( "background": transparent, @@ -1485,31 +1502,37 @@ "cursor": pointer ), "header-nav-chain-nav-search-input": ( - "padding": 0, - "width": 0 + "padding-block-end": 0, + "padding-block-start": 0, + "padding-inline-end": 0, + "padding-inline-start": 0, + "inline-size": 0 ), "header-nav-chain-nav-search-input-open": ( "font-size": var(--body-font-size), - "height": var(--global-spacing-7), + "block-size": var(--global-spacing-7), "line-height": var(--global-line-height-4), - "padding": 4px 24px 4px 11px, - "width": 100% + "padding-block-end": var(--global-spacing-1), + "padding-block-start": var(--global-spacing-1), + "padding-inline-end": var(--global-spacing-5), + "padding-inline-start": var(--global-spacing-3), + "inline-size": 100% ), "header-nav-chain-scrolled": ( - "min-height": var(--header-nav-chain-height-scrolled) + "min-block-size": var(--header-nav-chain-height-scrolled) ), "header-nav-chain-scrolled-flyout-overlay": ( - "margin-top": var(--header-nav-chain-height-scrolled) + "margin-block-start": var(--header-nav-chain-height-scrolled) ), "header-nav-chain-top-layout": ( "align-items": center, "display": flex, "justify-content": space-between, - "width": 100%, + "inline-size": 100%, "gap": var(--global-spacing-5) ), "header-nav-chain-top-layout-last-child": ( - "margin-right": 0, + "margin-inline-end": 0, "flex-shrink": 0 ), "header-nav-chain-top-nav-components-desktop": ( @@ -1529,7 +1552,7 @@ "display": flex, "justify-content": flex-end, "flex-shrink": 0, - "margin-right": 0 + "margin-inline-end": 0 ), "header-small": ( "font-size": var(--body-font-size-small), @@ -3360,6 +3383,9 @@ "media-item-fig-caption-vertical-video": ( "text-align": center ), + "media-item-fig-caption-vertical-video": ( + "text-align": center + ), "media-item-title": ( "font-weight": var(--global-font-weight-7) ), @@ -3407,6 +3433,9 @@ "vertical-video-frame": ( "background-color": transparent ), + "vertical-video-frame": ( + "background-color": transparent + ), "video": ( "margin-block-start": auto, "margin-inline-start": auto, @@ -3550,7 +3579,10 @@ "display": none ), "header-nav-chain": ( - "padding": var(--global-spacing-3) var(--global-spacing-5) + "padding-block-end": var(--global-spacing-3), + "padding-block-start": var(--global-spacing-3), + "padding-inline-end": var(--global-spacing-5), + "padding-inline-start": var(--global-spacing-5) ), "header-nav-chain-flyout-nav-components-desktop": ( "display": flex @@ -3559,7 +3591,7 @@ "display": none ), "header-nav-chain-flyout-nav-wrapper": ( - "width": 315px + "inline-size": 315px ), "header-nav-chain-flyout-nav-wrapper-closed": ( "transform": translate(-315px, 0) diff --git a/blocks/header-nav-chain-block/index.story.jsx b/blocks/header-nav-chain-block/index.story.jsx index 48e7a83f4a..fcf4b0209c 100644 --- a/blocks/header-nav-chain-block/index.story.jsx +++ b/blocks/header-nav-chain-block/index.story.jsx @@ -243,3 +243,22 @@ export const sectionMenuOpenWithSearch = () => ( primaryLogoAlt="Shows dimensions of 1200 by 150 for testing purposes" /> ); + +export const rightToLeft = () => ( +
+ {}} + customFields={CUSTOM_FIELDS_BASE} + isAdmin={false} + isSectionDrawerOpen={false} + logoAlignment="center" + menuButtonClickAction={() => {}} + sectionAriaLabel="Menu des sections" + sections={[]} + showDotSeparators={false} + signInOrder={1} + primaryLogoPath="/100x100.gif" + primaryLogoAlt="Shows dimensions of 100 by 100 for tall testing purposes" + /> +
+); \ No newline at end of file diff --git a/blocks/header-nav-chain-block/themes/news.json b/blocks/header-nav-chain-block/themes/news.json index 0214a6dc3b..72bbc37b62 100644 --- a/blocks/header-nav-chain-block/themes/news.json +++ b/blocks/header-nav-chain-block/themes/news.json @@ -2,30 +2,33 @@ "header-nav-chain": { "styles": { "default": { + "align-items": "center", "background-color": "var(--global-black)", - "padding": "var(--global-spacing-2) var(--global-spacing-4)", - "font-weight": "var(--global-font-weight-7)", + "display": "flex", "font-size": "var(--body-font-size)", - "line-height": "var(--body-line-height)", - "transform": "translateZ(0)", - "min-height": "var(--header-nav-chain-height)", + "font-weight": "var(--global-font-weight-7)", + "inline-size": "100%", + "inset-block-start": "0px", "justify-content": "center", - "display": "flex", - "align-items": "center", - "width": "100%", + "line-height": "var(--body-line-height)", + "margin-block-end": "0px", + "min-block-size": "var(--header-nav-chain-height)", + "padding-block-end": "var(--global-spacing-2)", + "padding-block-start": "var(--global-spacing-2)", + "padding-inline-end": "var(--global-spacing-4)", + "padding-inline-start": "var(--global-spacing-4)", "position": "sticky", - "top": "0px", - "margin-bottom": "0px", + "transform": "translateZ(0)", "z-index": 1, "components": { "icon": { "fill": "currentColor", - "height": "var(--global-spacing-5)", - "width": "var(--global-spacing-5)" + "block-size": "var(--global-spacing-5)", + "inline-size": "var(--global-spacing-5)" }, "button": { "color": "var(--global-white)", - "height": "var(--global-spacing-7)", + "block-size": "var(--global-spacing-7)", "font-weight": "var(--global-font-weight-7)", "font-size": "var(--body-font-size)", "line-height": "var(--body-line-height)" @@ -34,19 +37,25 @@ "font-weight": "var(--global-font-weight-7)", "font-size": "var(--body-font-size)", "line-height": "var(--body-line-height)", - "padding": "var(--global-spacing-2)" + "padding-block-end": "var(--global-spacing-2)", + "padding-block-start": "var(--global-spacing-2)", + "padding-inline-end": "var(--global-spacing-2)", + "padding-inline-start": "var(--global-spacing-2)" } } }, "desktop": { - "padding": "var(--global-spacing-3) var(--global-spacing-5)" + "padding-block-end": "var(--global-spacing-3)", + "padding-block-start": "var(--global-spacing-3)", + "padding-inline-end": "var(--global-spacing-5)", + "padding-inline-start": "var(--global-spacing-5)" } } }, "header-nav-chain-scrolled": { "styles": { "default": { - "min-height": "var(--header-nav-chain-height-scrolled)" + "min-block-size": "var(--header-nav-chain-height-scrolled)" }, "desktop": {} } @@ -57,7 +66,7 @@ "align-items": "center", "display": "flex", "justify-content": "space-between", - "width": "100%", + "inline-size": "100%", "gap": "var(--global-spacing-5)" }, "desktop": {} @@ -66,7 +75,7 @@ "header-nav-chain-top-layout-last-child": { "styles": { "default": { - "margin-right": 0, + "margin-inline-end": 0, "flex-shrink": 0 }, "desktop": {} @@ -87,7 +96,7 @@ "display": "flex", "justify-content": "flex-end", "flex-shrink": 0, - "margin-right": 0 + "margin-inline-end": 0 }, "desktop": {} } @@ -118,7 +127,7 @@ "header-nav-chain-logo": { "styles": { "default": { - "margin-right": "auto" + "margin-inline-end": "auto" }, "desktop": {} } @@ -126,7 +135,7 @@ "header-nav-chain-logo-center": { "styles": { "default": { - "margin-right": 0 + "margin-inline-end": 0 }, "desktop": {} } @@ -163,8 +172,8 @@ "header-nav-chain-logo-image": { "styles": { "default": { - "max-width": "240px", - "max-height": "var(--header-nav-chain-height)", + "max-inline-size": "240px", + "max-block-size": "var(--header-nav-chain-height)", "transition": "(opacity 0.4s ease)" }, "desktop": {} @@ -193,8 +202,11 @@ "header-nav-chain-nav-search-input": { "styles": { "default": { - "padding": 0, - "width": 0 + "padding-block-end": 0, + "padding-block-start": 0, + "padding-inline-end": 0, + "padding-inline-start": 0, + "inline-size": 0 }, "desktop": {} } @@ -203,10 +215,13 @@ "styles": { "default": { "font-size": "var(--body-font-size)", - "height": "var(--global-spacing-7)", + "block-size": "var(--global-spacing-7)", "line-height": "var(--global-line-height-4)", - "padding": "4px 24px 4px 11px", - "width": "100%" + "padding-block-end": "var(--global-spacing-1)", + "padding-block-start": "var(--global-spacing-1)", + "padding-inline-end": "var(--global-spacing-5)", + "padding-inline-start": "var(--global-spacing-3)", + "inline-size": "100%" }, "desktop": {} } @@ -225,7 +240,7 @@ "styles": { "default": { "position": "absolute", - "right": 0 + "inset-inline-end": 0 }, "desktop": {} } @@ -234,8 +249,8 @@ "styles": { "default": { "fill": "#191919", - "height": "1rem", - "width": "1rem" + "block-size": "1rem", + "inline-size": "1rem" }, "desktop": {} } @@ -245,18 +260,18 @@ "default": { "display": "none", "gap": "var(--global-spacing-2)", - "height": "var(--global-spacing-5)", + "block-size": "var(--global-spacing-5)", "flex": "11 auto", "overflow": "hidden", - "text-align": "left", - "width": "auto", + "text-align": "start", + "inline-size": "auto", "flex-wrap": "wrap", "components": { "link": { "color": "var(--global-white)", "display": "flex", "align-items": "center", - "height": "100%" + "block-size": "100%" }, "separator": { "color": "var(--global-white)" @@ -285,7 +300,7 @@ "header-nav-chain-scrolled-flyout-overlay": { "styles": { "default": { - "margin-top": "var(--header-nav-chain-height-scrolled)" + "margin-block-start": "var(--header-nav-chain-height-scrolled)" }, "desktop": {} } @@ -293,14 +308,14 @@ "header-nav-chain-flyout-overlay": { "styles": { "default": { - "margin-top": "var(--header-nav-chain-height)", + "margin-block-start": "var(--header-nav-chain-height)", "z-index": 8, "background": "var(--header-nav-chain-overlay-background-color)", "-ms-overflow-style": "none", "position": "absolute", "scrollbar-width": "none", - "left": 0, - "top": 0 + "inset-inline-start": 0, + "inset-block-start": 0 }, "desktop": {} } @@ -318,8 +333,9 @@ "default": { "background": "var(--header-nav-chain-overlay-background-color)", "overflow-y": "scroll", + "overflow-block": "scroll", "transform": "translate(0, 0)", - "width": "100%" + "inline-size": "100%" }, "desktop": {} } @@ -328,7 +344,8 @@ "styles": { "default": { "overflow-y": "hidden", - "width": 0 + "overflow-block": "hidden", + "inline-size": 0 }, "desktop": {} } @@ -339,10 +356,10 @@ "z-index": 10, "background": "var(--global-black)", "transition": "transform 300ms ease-in-out", - "width": "100vw" + "inline-size": "100vw" }, "desktop": { - "width": "315px" + "inline-size": "315px" } } }, @@ -367,8 +384,11 @@ "header-nav-chain-flyout-nav-widgets": { "styles": { "default": { - "margin-top": "var(--global-spacing-3)", - "padding": "var(--global-spacing-1) var(--global-spacing-4) var(--global-spacing-1) var(--global-spacing-5)" + "margin-block-start": "var(--global-spacing-3)", + "padding-block-end": "var(--global-spacing-1)", + "padding-block-start": "var(--global-spacing-1)", + "padding-inline-end": "var(--global-spacing-4)", + "padding-inline-start": "var(--global-spacing-5)" }, "desktop": {} } @@ -389,7 +409,10 @@ "styles": { "default": { "display": "flex", - "padding": "var(--global-spacing-5)" + "padding-block-end": "var(--global-spacing-5)", + "padding-block-start": "var(--global-spacing-5)", + "padding-inline-end": "var(--global-spacing-5)", + "padding-inline-start": "var(--global-spacing-5)" }, "desktop": { "display": "none" @@ -400,7 +423,10 @@ "styles": { "default": { "display": "none", - "padding": "var(--global-spacing-5)", + "padding-block-end": "var(--global-spacing-5)", + "padding-block-start": "var(--global-spacing-5)", + "padding-inline-end": "var(--global-spacing-5)", + "padding-inline-start": "var(--global-spacing-5)", "components": { "button": { "align-self": "flex-start" @@ -415,25 +441,25 @@ "header-nav-chain-flyout-nav": { "styles": { "default": { - "height": "calc((100vh - var(--header-nav-chain-height-scrolled)))", + "block-size": "calc((100vh - var(--header-nav-chain-height-scrolled)))", "gap": 0, "font-weight": "var(--global-font-weight-7)", "list-style": "none", "position": "relative", "components": { "link": { - "width": "100%", - "padding-top": "var(--global-spacing-2)", - "padding-bottom": "var(--global-spacing-2)", - "padding-left": "var(--global-spacing-5)", - "padding-right": "var(--global-spacing-5)", "align-items": "center", "color": "var(--global-white)", - "font-weight": "var(--global-font-weight-7)", "display": "block", + "font-weight": "var(--global-font-weight-7)", "font-size": "var(--body-font-size)", + "inline-size": "100%", "justify-content": "space-between", "line-height": 1.5, + "padding-block-end": "var(--global-spacing-2)", + "padding-block-start": "var(--global-spacing-2)", + "padding-inline-end": "var(--global-spacing-5)", + "padding-inline-start": "var(--global-spacing-5)", "text-decoration": "none" }, "link-hover": { @@ -450,9 +476,9 @@ "background-color": "var(--global-black)", "components": { "link": { - "padding-top": "var(--global-spacing-3)", - "padding-left": "var(--global-spacing-5)", - "padding-bottom": "var(--global-spacing-3)" + "padding-block-end": "var(--global-spacing-3)", + "padding-block-start": "var(--global-spacing-3)", + "padding-inline-start": "var(--global-spacing-5)" } } }, @@ -475,7 +501,7 @@ "header-nav-chain-flyout-nav-subsection-anchor": { "styles": { "default": { - "height": "var(--global-spacing-8)", + "block-size": "var(--global-spacing-8)", "components": { "stack": { "align-content": "center", @@ -545,10 +571,10 @@ "font-size": "var(--global-spacing-4)", "font-weight": "var(--global-font-weight-7)", "line-height": "var(--global-line-height-4)", - "padding-top": "var(--global-spacing-2)", - "padding-right": "var(--global-spacing-5)", - "padding-left": "var(--global-spacing-5)", - "padding-bottom": "var(--global-spacing-2)", + "padding-block-end": "var(--global-spacing-2)", + "padding-block-start": "var(--global-spacing-2)", + "padding-inline-end": "var(--global-spacing-5)", + "padding-inline-start": "var(--global-spacing-5)", "text-decoration": "none" }, "link-hover": {