Skip to content

Commit

Permalink
THEMES-1240: Logical properties on header nav chain block (#1823)
Browse files Browse the repository at this point in the history 
* THEMES-1240: updated header nav chain styling to use logical properties.

* THEMES-1240: added storybook updates.

* THEMES-1240: updated text align
  • Loading branch information
@vgalatro
vgalatro authored Dec 6, 2023
1 parent 491abec commit 57b9542
Show file tree
Hide file tree
Showing 3 changed files with 201 additions and 124 deletions.
156 changes: 94 additions & 62 deletions .storybook/themes/news.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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": (
Expand All @@ -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
Expand All @@ -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)
)
)
),
Expand All @@ -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,
Expand Down Expand Up @@ -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": (
Expand All @@ -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)
Expand All @@ -1383,43 +1398,45 @@
"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
),
"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)
Expand All @@ -1436,19 +1453,19 @@
)
),
"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,
"transition": (opacity 0.8s ease, visibility 0s ease 0s),
"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": (
Expand All @@ -1472,44 +1489,50 @@
),
"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,
"border": transparent,
"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": (
Expand All @@ -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),
Expand Down Expand Up @@ -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)
),
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand All @@ -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)
Expand Down
19 changes: 19 additions & 0 deletions blocks/header-nav-chain-block/index.story.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,3 +243,22 @@ export const sectionMenuOpenWithSearch = () => (
primaryLogoAlt="Shows dimensions of 1200 by 150 for testing purposes"
/>
);

export const rightToLeft = () => (
<div dir="rtl">
<PresentationalNav
closeDrawer={() => {}}
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"
/>
</div>
);
Loading

0 comments on commit 57b9542

Please sign in to comment.