Skip to content

Commit

Permalink
THEMES-1215: Logical Properties | Footer and Masthead blocks (#1827)
Browse files Browse the repository at this point in the history 
THEMES-1215: updated styling for masthead and footer blocks to use logical properties.
  • Loading branch information
@vgalatro
vgalatro authored Dec 4, 2023
1 parent f7d0b65 commit 26813ce
Show file tree
Hide file tree
Showing 5 changed files with 123 additions and 61 deletions.
86 changes: 52 additions & 34 deletions .storybook/themes/news.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -882,14 +882,20 @@
"gap": var(--global-spacing-6) 0
),
"footer": (
"width": var(--content-scale-width),
"inline-size": var(--content-scale-width),
"gap": var(--global-spacing-6),
"margin": 0 auto,
"max-width": calc(var(--content-max-width) * 1px),
"margin-block-end": 0,
"margin-block-start": 0,
"margin-inline-end": auto,
"margin-inline-start": auto,
"max-inline-size": calc(var(--content-max-width) * 1px),
"components": (
"image": (
"margin": auto,
"max-height": var(--global-spacing-7)
"margin-block-end": auto,
"margin-block-start": auto,
"margin-inline-end": auto,
"margin-inline-start": auto,
"max-block-size": var(--global-spacing-7)
)
)
),
Expand Down Expand Up @@ -922,26 +928,32 @@
)
),
"footer-social-links": (
"border": 1px solid var(--color-primary),
"border-block-end": 1px solid var(--color-primary),
"border-block-start": 1px solid var(--color-primary),
"border-inline-end": 1px solid var(--color-primary),
"border-inline-start": 1px solid var(--color-primary),
"border-radius": var(--border-radius),
"margin": var(--global-spacing-2) auto,
"width": fit-content,
"margin-block-end": var(--global-spacing-2),
"margin-block-start": var(--global-spacing-2),
"margin-inline-end": auto,
"margin-inline-start": auto,
"inline-size": fit-content,
"components": (
"icon": (
"fill": var(--color-primary)
),
"link": (
"border-right": 1px solid var(--color-primary),
"padding-top": var(--global-spacing-2),
"padding-right": var(--global-spacing-2),
"padding-bottom": var(--global-spacing-2),
"padding-left": var(--global-spacing-2)
"border-inline-end": 1px solid var(--color-primary),
"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)
)
)
),
"footer-social-links-container": (
"border-bottom": 1px solid var(--global-neutral-4),
"width": 100%
"border-block-end": 1px solid var(--global-neutral-4),
"inline-size": 100%
),
"footer-social-links-hover": (
"components": (
Expand All @@ -953,20 +965,20 @@
"footer-social-links-last": (
"components": (
"link": (
"border-right": none
"border-inline-end": none
)
)
),
"footer-top-container": (
"border-top": 1px solid var(--global-neutral-4),
"border-bottom": none,
"border-block-start": 1px solid var(--global-neutral-4),
"border-block-end": none,
"display": grid,
"grid-template-columns": 100%,
"grid-template-rows": auto auto,
"grid-auto-flow": column,
"gap": var(--global-spacing-6),
"justify-content": center,
"width": 100%,
"inline-size": 100%,
"components": (
"paragraph": (
"justify-self": center
Expand Down Expand Up @@ -1749,7 +1761,7 @@
)
),
"masthead": (
"border-bottom": 2px solid var(--global-neutral-8),
"border-block-end": 2px solid var(--global-neutral-8),
"color": var(--text-color),
"display": none,
"font-family": var(--font-family-primary),
Expand All @@ -1769,8 +1781,14 @@
"flex": 11 0%
),
"masthead-divider": (
"margin": 0,
"padding": 0
"margin-block-end": 0,
"margin-block-start": 0,
"margin-inline-end": 0,
"margin-inline-start": 0,
"padding-block-end": 0,
"padding-block-start": 0,
"padding-inline-end": 0,
"padding-inline-start": 0
),
"masthead-link": (
"align-items": flex-end,
Expand All @@ -1783,7 +1801,7 @@
"justify-content": center
),
"masthead-logo-image": (
"max-height": 64px,
"max-block-size": 64px,
"object-fit": contain,
"vertical-align": middle
),
Expand Down Expand Up @@ -3437,7 +3455,7 @@
"footer": (
"components": (
"image": (
"max-height": var(--global-spacing-10)
"max-block-size": var(--global-spacing-10)
)
)
),
Expand All @@ -3446,11 +3464,11 @@
"grid-template-columns": 1fr 1fr 1fr 1fr
),
"footer-social-links-container": (
"border-bottom": none,
"width": max-content
"border-block-end": none,
"inline-size": max-content
),
"footer-top-container": (
"border-bottom": 1px solid var(--global-neutral-4),
"border-block-end": 1px solid var(--global-neutral-4),
"grid-auto-flow": column,
"grid-template-columns": 1fr auto 1fr,
"grid-template-rows": auto,
Expand Down Expand Up @@ -3990,32 +4008,31 @@
@use "../../blocks/article-body-block";
@use "../../blocks/article-tag-block";
@use "../../blocks/author-bio-block";
@use "../../blocks/byline-block";
@use "../../blocks/card-list-block";
@use "../../blocks/category-carousel-block";
@use "../../blocks/date-block";
@use "../../blocks/double-chain-block";
@use "../../blocks/default-output-block";
@use "../../blocks/divider-block";
@use "../../blocks/footer-block";
@use "../../blocks/double-chain-block";
@use "../../blocks/extra-large-manual-promo-block";
@use "../../blocks/extra-large-promo-block";
@use "../../blocks/footer-block";
@use "../../blocks/full-author-bio-block";
@use "../../blocks/gallery-block";
@use "../../blocks/header-block";
@use "../../blocks/header-nav-chain-block";
@use "../../blocks/headline-block";
@use "../../blocks/hero-block";
@use "../../blocks/identity-block";
@use "../../blocks/large-manual-promo-block";
@use "../../blocks/large-promo-block";
@use "../../blocks/lead-art-block";
@use "../../blocks/links-bar-block";
@use "../../blocks/masthead-block";
@use "../../blocks/medium-promo-block";
@use "../../blocks/medium-manual-promo-block";
@use "../../blocks/medium-promo-block";
@use "../../blocks/numbered-list-block";
@use "../../blocks/overline-block";
@use "../../blocks/quad-chain-block";
@use "../../blocks/quilted-image-block";
@use "../../blocks/results-list-block";
@use "../../blocks/right-rail-advanced-block";
@use "../../blocks/right-rail-block";
Expand All @@ -4028,7 +4045,8 @@
@use "../../blocks/small-manual-promo-block";
@use "../../blocks/small-promo-block";
@use "../../blocks/subheadline-block";
@use "../../blocks/subscriptions-block";
@use "../../blocks/tag-title-block";
@use "../../blocks/top-table-list-block";
@use "../../blocks/triple-chain-block";
@use "../../blocks/video-player-block";
@use "../../blocks/video-player-block";
17 changes: 17 additions & 0 deletions blocks/footer-block/index.story.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,20 @@ const CustomFooterBlock = () => (
</footer>
</Story>
</Preview>

** Right to Left **

<Preview>
<Story name="Right to Left">
<footer dir="rtl">
<Footer
customFields={{
navigationConfig: {
contentService: "footer-service",
contentConfiguration: {},
},
}}
/>
</footer>
</Story>
</Preview>
58 changes: 35 additions & 23 deletions blocks/footer-block/themes/news.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,27 @@
"footer": {
"styles": {
"default": {
"width": "var(--content-scale-width)",
"inline-size": "var(--content-scale-width)",
"gap": "var(--global-spacing-6)",
"margin": "0 auto",
"max-width": "calc(var(--content-max-width) * 1px)",
"margin-block-end": "0",
"margin-block-start": "0",
"margin-inline-end": "auto",
"margin-inline-start": "auto",
"max-inline-size": "calc(var(--content-max-width) * 1px)",
"components": {
"image": {
"margin": "auto",
"max-height": "var(--global-spacing-7)"
"margin-block-end": "auto",
"margin-block-start": "auto",
"margin-inline-end": "auto",
"margin-inline-start": "auto",
"max-block-size": "var(--global-spacing-7)"
}
}
},
"desktop": {
"components": {
"image": {
"max-height": "var(--global-spacing-10)"
"max-block-size": "var(--global-spacing-10)"
}
}
}
Expand Down Expand Up @@ -71,20 +77,26 @@
"footer-social-links": {
"styles": {
"default": {
"border": "1px solid var(--color-primary)",
"border-block-end": "1px solid var(--color-primary)",
"border-block-start": "1px solid var(--color-primary)",
"border-inline-end": "1px solid var(--color-primary)",
"border-inline-start": "1px solid var(--color-primary)",
"border-radius": "var(--border-radius)",
"margin": "var(--global-spacing-2) auto",
"width": "fit-content",
"margin-block-end": "var(--global-spacing-2)",
"margin-block-start": "var(--global-spacing-2)",
"margin-inline-end": "auto",
"margin-inline-start": "auto",
"inline-size": "fit-content",
"components": {
"icon": {
"fill": "var(--color-primary)"
},
"link": {
"border-right": "1px solid var(--color-primary)",
"padding-top": "var(--global-spacing-2)",
"padding-right": "var(--global-spacing-2)",
"padding-bottom": "var(--global-spacing-2)",
"padding-left": "var(--global-spacing-2)"
"border-inline-end": "1px solid var(--color-primary)",
"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)"
}
}
},
Expand All @@ -106,12 +118,12 @@
"footer-social-links-container": {
"styles": {
"default": {
"border-bottom": "1px solid var(--global-neutral-4)",
"width": "100%"
"border-block-end": "1px solid var(--global-neutral-4)",
"inline-size": "100%"
},
"desktop": {
"border-bottom": "none",
"width": "max-content"
"border-block-end": "none",
"inline-size": "max-content"
}
}
},
Expand All @@ -120,7 +132,7 @@
"default": {
"components": {
"link": {
"border-right": "none"
"border-inline-end": "none"
}
}
},
Expand All @@ -130,23 +142,23 @@
"footer-top-container": {
"styles": {
"default": {
"border-top": "1px solid var(--global-neutral-4)",
"border-bottom": "none",
"border-block-start": "1px solid var(--global-neutral-4)",
"border-block-end": "none",
"display": "grid",
"grid-template-columns": "100%",
"grid-template-rows": "auto auto",
"grid-auto-flow": "column",
"gap": "var(--global-spacing-6)",
"justify-content": "center",
"width": "100%",
"inline-size": "100%",
"components": {
"paragraph": {
"justify-self": "center"
}
}
},
"desktop": {
"border-bottom": "1px solid var(--global-neutral-4)",
"border-block-end": "1px solid var(--global-neutral-4)",
"grid-auto-flow": "column",
"grid-template-columns": "1fr auto 1fr",
"grid-template-rows": "auto",
Expand Down
9 changes: 9 additions & 0 deletions blocks/masthead-block/index.story.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,12 @@ export const emptyTagLineAndLogoURL = () => {
const customFieldData = { ...allCustomFieldData, tagLine: "", logoURL: "" };
return <MastheadPresentational customFields={customFieldData} displayDate={displayDate} />;
};

export const rightToLeft = () => {
const customFieldData = allCustomFieldData;
return (
<div dir="rtl">
<MastheadPresentational customFields={customFieldData} displayDate={displayDate} />
</div>
);
};
14 changes: 10 additions & 4 deletions blocks/masthead-block/themes/news.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"masthead": {
"styles": {
"default": {
"border-bottom": "2px solid var(--global-neutral-8)",
"border-block-end": "2px solid var(--global-neutral-8)",
"color": "var(--text-color)",
"display": "none",
"font-family": "var(--font-family-primary)",
Expand All @@ -27,7 +27,7 @@
"masthead-logo-image": {
"styles": {
"default": {
"max-height": "64px",
"max-block-size": "64px",
"object-fit": "contain",
"vertical-align": "middle"
},
Expand Down Expand Up @@ -81,8 +81,14 @@
"masthead-divider": {
"styles": {
"default": {
"margin": 0,
"padding": 0
"margin-block-end": 0,
"margin-block-start": 0,
"margin-inline-end": 0,
"margin-inline-start": 0,
"padding-block-end": 0,
"padding-block-start": 0,
"padding-inline-end": 0,
"padding-inline-start": 0
},
"desktop": {}
}
Expand Down

0 comments on commit 26813ce

Please sign in to comment.