Skip to content

Commit

Permalink
Merge branch 'arc-themes-release-version-2.1.3' into THEMES-1184
Browse files Browse the repository at this point in the history
  • Loading branch information
@blakeganderson
blakeganderson authored Dec 7, 2023
2 parents 91c0123 + 99e9341 commit 3b362e1
Show file tree
Hide file tree
Showing 15 changed files with 2,040 additions and 1,703 deletions.
2,907 changes: 1,511 additions & 1,396 deletions .storybook/themes/commerce.scss
View file

Large diffs are not rendered by default.

321 changes: 190 additions & 131 deletions .storybook/themes/news.scss
View file

Large diffs are not rendered by default.

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>
);
150 changes: 88 additions & 62 deletions blocks/header-nav-chain-block/themes/news.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
Expand All @@ -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": {}
}
Expand All @@ -57,7 +66,7 @@
"align-items": "center",
"display": "flex",
"justify-content": "space-between",
"width": "100%",
"inline-size": "100%",
"gap": "var(--global-spacing-5)"
},
"desktop": {}
Expand All @@ -66,7 +75,7 @@
"header-nav-chain-top-layout-last-child": {
"styles": {
"default": {
"margin-right": 0,
"margin-inline-end": 0,
"flex-shrink": 0
},
"desktop": {}
Expand All @@ -87,7 +96,7 @@
"display": "flex",
"justify-content": "flex-end",
"flex-shrink": 0,
"margin-right": 0
"margin-inline-end": 0
},
"desktop": {}
}
Expand Down Expand Up @@ -118,15 +127,15 @@
"header-nav-chain-logo": {
"styles": {
"default": {
"margin-right": "auto"
"margin-inline-end": "auto"
},
"desktop": {}
}
},
"header-nav-chain-logo-center": {
"styles": {
"default": {
"margin-right": 0
"margin-inline-end": 0
},
"desktop": {}
}
Expand Down Expand Up @@ -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": {}
Expand Down Expand Up @@ -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": {}
}
Expand All @@ -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": {}
}
Expand All @@ -225,7 +240,7 @@
"styles": {
"default": {
"position": "absolute",
"right": 0
"inset-inline-end": 0
},
"desktop": {}
}
Expand All @@ -234,8 +249,8 @@
"styles": {
"default": {
"fill": "#191919",
"height": "1rem",
"width": "1rem"
"block-size": "1rem",
"inline-size": "1rem"
},
"desktop": {}
}
Expand All @@ -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)"
Expand Down Expand Up @@ -285,22 +300,22 @@
"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": {}
}
},
"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": {}
}
Expand All @@ -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": {}
}
Expand All @@ -328,7 +344,8 @@
"styles": {
"default": {
"overflow-y": "hidden",
"width": 0
"overflow-block": "hidden",
"inline-size": 0
},
"desktop": {}
}
Expand All @@ -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"
}
}
},
Expand All @@ -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": {}
}
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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": {
Expand All @@ -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)"
}
}
},
Expand All @@ -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",
Expand Down Expand Up @@ -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": {
Expand Down
Loading

0 comments on commit 3b362e1

Please sign in to comment.