THEMES-1195 Updated headline, overline and image opacity (#1690)

* Updated headline, overline and image opacity --------- Co-authored-by: Malavika Koppula <[email protected]>
WPMedia · Jul 27, 2023 · c8e2634 · c8e2634
1 parent 40124b4
commit c8e2634
Show file tree

Hide file tree

Showing 29 changed files with 336 additions and 3 deletions.
diff --git a/.storybook/mock-content/extraLargePromo.js b/.storybook/mock-content/extraLargePromo.js
@@ -56,5 +56,12 @@ export const extraLargePromo = {
 			},
 			website_url: "/test/promo-image-variations/2021/04/23/basic-promo-image/",
 		},
+		"story-book": {
+			website_section: {
+				_id: "/test/promo-image-variations",
+				name: "Promo image variations",
+			},
+			website_url: "/test/promo-image-variations/2021/04/23/basic-promo-image/",
+		},
 	},
 };
diff --git a/.storybook/mock-content/largePromo.js b/.storybook/mock-content/largePromo.js
@@ -76,5 +76,12 @@ export const largePromoMock = {
 			},
 			website_url: "/2019/12/02/baby-panda-born-at-the-zoo/",
 		},
+		"story-book": {
+			website_section: {
+				_id: "/health",
+				name: "Health",
+			},
+			website_url: "/2019/12/02/baby-panda-born-at-the-zoo/",
+		},
 	},
 };
diff --git a/.storybook/mock-content/mediumPromo.js b/.storybook/mock-content/mediumPromo.js
@@ -51,5 +51,9 @@ export const mediumPromoMock = {
 			website_url:
 				"/local/2020/01/14/in-albania-age-old-traditions-and-mediterranean-beaches-on-the-cheap/",
 		},
+		"story-book": {
+			website_url:
+				"/local/2020/01/14/in-albania-age-old-traditions-and-mediterranean-beaches-on-the-cheap/",
+		},
 	},
 };
diff --git a/.storybook/mock-content/smallPromo.js b/.storybook/mock-content/smallPromo.js
@@ -25,5 +25,9 @@ export const smallPromoMock = {
 			website_url:
 				"/local/2020/01/14/in-albania-age-old-traditions-and-mediterranean-beaches-on-the-cheap/",
 		},
+		"story-book": {
+			website_url:
+				"/local/2020/01/14/in-albania-age-old-traditions-and-mediterranean-beaches-on-the-cheap/",
+		},
 	},
 };
diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss
@@ -403,7 +403,7 @@
 					outline-color: var(--status-color-warning),
 				),
 				link: (
-					color: var(--color-primary),
+					color: var(--text-color),
 				),
 				link-active: (
 					text-decoration: none,
@@ -1579,14 +1579,26 @@
 				),
 				large-manual-promo: (
 					gap: var(--global-spacing-4),
+					components: (
+						link-hover: (
+							color: var(--text-color-subtle),
+						),
+					),
 				),
 				large-manual-promo-text: (
 					gap: 0,
 					components: (
+						heading: (
+							color: var(--text-color),
+						),
 						overline: (
+							color: var(--text-color),
 							font-size: var(--heading-level-6-font-size),
 							line-height: var(--heading-level-6-line-height),
 						),
+						overline-hover: (
+							color: var(--text-color-subtle),
+						),
 						paragraph: (
 							font-size: var(--body-font-size),
 						),
@@ -1595,12 +1607,22 @@
 						),
 					),
 				),
+				large-manual-promo-img: (
+					components: (
+						link-hover: (
+							opacity: 0.8,
+						),
+					),
+				),
 				large-promo: (
 					gap: var(--global-spacing-4),
 					components: (
 						link: (
 							position: relative,
 						),
+						link-hover: (
+							color: var(--text-color-subtle),
+						),
 					),
 				),
 				large-promo-icon-label: (
@@ -1629,13 +1651,18 @@
 					gap: 0,
 					components: (
 						heading: (
+							color: var(--text-color),
 							font-size: var(--heading-level-3-font-size),
 							line-height: var(--heading-level-3-line-height),
 						),
 						overline: (
+							color: var(--text-color),
 							font-size: var(--heading-level-6-font-size),
 							line-height: var(--heading-level-6-line-height),
 						),
+						overline-hover: (
+							color: var(--text-color-subtle),
+						),
 						paragraph: (
 							font-size: var(--body-font-size),
 							line-height: var(--body-line-height),
@@ -1648,6 +1675,13 @@
 						),
 					),
 				),
+				large-promo-img: (
+					components: (
+						link-hover: (
+							opacity: 0.8,
+						),
+					),
+				),
 				lead-art: (
 					margin-bottom: var(--global-spacing-5),
 					components: (
@@ -1827,6 +1861,7 @@
 							max-width: 100px,
 						),
 						heading: (
+							color: var(--text-color),
 							font-size: var(--heading-level-5-font-size),
 							font-weight: var(--heading-level-5-font-weight),
 							line-height: var(--heading-level-5-line-height),
@@ -1842,6 +1877,9 @@
 						link: (
 							position: relative,
 						),
+						link-hover: (
+							color: var(--text-color-subtle),
+						),
 					),
 				),
 				medium-promo-show-image: (
@@ -1875,6 +1913,13 @@
 					color: var(--global-white),
 					display: none,
 				),
+				medium-promo-img: (
+					components: (
+						link-hover: (
+							opacity: 0.8,
+						),
+					),
+				),
 				medium-manual-promo: (
 					clear: both,
 					display: table,
@@ -1886,11 +1931,15 @@
 							line-height: var(--body-line-height-small),
 						),
 						heading: (
+							color: var(--text-color),
 							font-size: var(--heading-level-5-font-size),
 							font-weight: var(--heading-level-5-font-weight),
 							line-height: var(--heading-level-5-line-height),
 							margin-bottom: var(--global-spacing-4),
 						),
+						link-hover: (
+							color: var(--text-color-subtle),
+						),
 						media-item: (
 							float: right,
 							max-width: 100px,
@@ -1910,6 +1959,13 @@
 						),
 					),
 				),
+				medium-manual-promo-img: (
+					components: (
+						link-hover: (
+							opacity: 0.8,
+						),
+					),
+				),
 				numbered-list: (
 					gap: var(--global-spacing-4),
 					components: (
@@ -2325,10 +2381,14 @@
 					grid-template-columns: 1fr,
 					components: (
 						heading: (
+							color: var(--text-color),
 							font-size: var(--body-font-size),
 							font-weight: var(--body-font-weight),
 							line-height: var(--body-line-height),
 						),
+						link-hover: (
+							color: var(--text-color-subtle),
+						),
 					),
 				),
 				small-manual-promo-above: (
@@ -2345,16 +2405,27 @@
 					gap: var(--global-spacing-6),
 					grid-template-columns: 2fr 1fr,
 				),
+				small-manual-promo-img: (
+					components: (
+						link-hover: (
+							opacity: 0.8,
+						),
+					),
+				),
 				small-promo: (
 					display: grid,
 					gap: var(--global-spacing-5),
 					grid-template-columns: 1fr,
 					components: (
 						heading: (
+							color: var(--text-color),
 							font-size: var(--body-font-size),
 							font-weight: var(--body-font-weight),
 							line-height: var(--body-line-height),
 						),
+						link-hover: (
+							color: var(--text-color-subtle),
+						),
 					),
 				),
 				small-promo-left: (
@@ -2365,6 +2436,13 @@
 					gap: var(--global-spacing-6),
 					grid-template-columns: 2fr 1fr,
 				),
+				small-promo-img: (
+					components: (
+						link-hover: (
+							opacity: 0.8,
+						),
+					),
+				),
 				subheadline: (
 					font-size: var(--heading-level-6-font-size),
 					font-weight: var(--heading-level-6-font-weight),
@@ -2646,15 +2724,34 @@
 				),
 				xl-manual-promo: (
 					components: (
+						heading: (
+							color: var(--text-color),
+						),
 						link: (
 							font-family: inherit,
 							font-size: inherit,
 							font-weight: inherit,
 							line-height: inherit,
 						),
+						overline: (
+							color: var(--text-color),
+						),
+						overline-hover: (
+							color: var(--text-color-subtle),
+						),
 						stack: (
 							gap: var(--global-spacing-4),
 						),
+						link-hover: (
+							color: var(--text-color-subtle),
+						),
+					),
+				),
+				xl-manual-promo-img: (
+					components: (
+						link-hover: (
+							opacity: 0.8,
+						),
 					),
 				),
 				xl-promo: (
@@ -2665,6 +2762,15 @@
 							font-weight: inherit,
 							line-height: inherit,
 						),
+						heading: (
+							color: var(--text-color),
+						),
+						overline: (
+							color: var(--text-color),
+						),
+						overline-hover: (
+							color: var(--text-color-subtle),
+						),
 						separator: (
 							padding: 0 var(--global-spacing-2),
 						),
@@ -2674,6 +2780,9 @@
 						media-item: (
 							position: relative,
 						),
+						link-hover: (
+							color: var(--text-color-subtle),
+						),
 					),
 				),
 				xl-promo-icon-label: (
@@ -2698,6 +2807,13 @@
 					margin-left: var(--global-spacing-2),
 					color: var(--global-white),
 				),
+				xl-promo-img: (
+					components: (
+						link-hover: (
+							opacity: 0.8,
+						),
+					),
+				),
 			),
 		),
 		desktop: (

diff --git a/blocks/extra-large-manual-promo-block/_index.scss b/blocks/extra-large-manual-promo-block/_index.scss
@@ -1,6 +1,10 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-xl-manual-promo {
+	&__img {
+		@include scss.block-properties("xl-manual-promo-img");
+		@include scss.block-components("xl-manual-promo-img");
+	}
 	@include scss.block-properties("xl-manual-promo");
 	@include scss.block-components("xl-manual-promo");
 }
diff --git a/blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.jsx b/blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.jsx
@@ -124,6 +124,7 @@ const ExtraLargeManualPromo = ({ customFields }) => {
 								suppressContentEditableWarning
 							>
 								<Conditional
+									className={`${BLOCK_CLASS_NAME}__img`}
 									component={Link}
 									condition={linkURL}
 									href={formatURL(linkURL)}

diff --git a/blocks/extra-large-manual-promo-block/themes/news.json b/blocks/extra-large-manual-promo-block/themes/news.json
@@ -3,12 +3,24 @@
 		"styles": {
 			"default": {
 				"components": {
+					"heading": {
+						"color": "var(--text-color)"
+					},
 					"link": {
 						"font-family": "inherit",
 						"font-size": "inherit",
 						"font-weight": "inherit",
 						"line-height": "inherit"
 					},
+					"link-hover": {
+						"color": "var(--text-color-subtle)"
+					},
+					"overline": {
+						"color": "var(--text-color)"
+					},
+					"overline-hover": {
+						"color": "var(--text-color-subtle)"
+					},
 					"stack": {
 						"gap": "var(--global-spacing-4)"
 					}
@@ -32,5 +44,17 @@
 				}
 			}
 		}
+	},
+	"xl-manual-promo-img": {
+		"styles": {
+			"default": {
+				"components": {
+					"link-hover": {
+						"opacity": 0.8
+					}
+				}
+			},
+			"desktop": {}
+		}
 	}
 }