From e970a24b71593598a8545eeceb5e7f7a6cc67681 Mon Sep 17 00:00:00 2001
From: Malavika Koppula <mkreddy1110@gmail.com>
Date: Thu, 29 Jun 2023 10:03:37 -0400
Subject: [PATCH 01/10] Updated headline, overline and image opacity

---
 .storybook/themes/news.scss                   | 86 ++++++++++++++++++-
 .../_index.scss                               | 12 +++
 .../extra-large-manual-promo/default.jsx      |  8 +-
 .../themes/news.json                          | 25 ++++++
 blocks/extra-large-promo-block/_index.scss    | 12 +++
 .../features/extra-large-promo/default.jsx    |  8 +-
 .../extra-large-promo-block/themes/news.json  | 26 ++++++
 blocks/large-manual-promo-block/_index.scss   | 12 +++
 .../features/large-manual-promo/default.jsx   | 10 ++-
 .../large-manual-promo-block/themes/news.json | 27 +++++-
 blocks/large-promo-block/_index.scss          | 12 +++
 .../features/large-promo/default.jsx          |  6 +-
 blocks/large-promo-block/themes/news.json     | 21 +++++
 blocks/medium-manual-promo-block/_index.scss  |  6 ++
 .../features/medium-manual-promo/default.jsx  |  2 +-
 .../themes/news.json                          | 12 +++
 blocks/medium-promo-block/_index.scss         |  6 ++
 .../features/medium-promo/default.jsx         |  2 +-
 blocks/medium-promo-block/themes/news.json    | 12 +++
 blocks/small-manual-promo-block/_index.scss   |  6 ++
 .../features/small-manual-promo/default.jsx   |  2 +-
 .../small-manual-promo-block/themes/news.json | 12 +++
 blocks/small-promo-block/_index.scss          |  6 ++
 .../features/small-promo/default.jsx          |  2 +-
 blocks/small-promo-block/themes/news.json     | 12 +++
 25 files changed, 330 insertions(+), 15 deletions(-)

diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss
index 86c61054ba..d9c980a708 100644
--- a/.storybook/themes/news.scss
+++ b/.storybook/themes/news.scss
@@ -400,7 +400,7 @@
 					outline-color: var(--status-color-warning),
 				),
 				link: (
-					color: var(--color-primary),
+					color: var(--text-color),
 				),
 				link-active: (
 					text-decoration: none,
@@ -1509,11 +1509,20 @@
 				),
 				large-manual-promo: (
 					gap: var(--global-spacing-4),
+					components: (
+						image: (
+							opacity: 0.8,
+						),
+					),
 				),
 				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),
 						),
@@ -1525,12 +1534,21 @@
 						),
 					),
 				),
+				large-manual-promo-overline-hover: (
+					color: var(--text-color-subtle),
+				),
+				large-manual-promo-headline-hover: (
+					color: var(--text-color-subtle),
+				),
 				large-promo: (
 					gap: var(--global-spacing-4),
 					components: (
 						link: (
 							position: relative,
 						),
+						image: (
+							opacity: 0.8,
+						),
 					),
 				),
 				large-promo-icon-label: (
@@ -1559,10 +1577,12 @@
 					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),
 						),
@@ -1578,6 +1598,12 @@
 						),
 					),
 				),
+				large-promo-overline-hover: (
+					color: var(--text-color-subtle),
+				),
+				large-promo-headline-hover: (
+					color: var(--text-color-subtle),
+				),
 				lead-art: (
 					margin-bottom: var(--global-spacing-5),
 					components: (
@@ -1749,6 +1775,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),
@@ -1764,6 +1791,9 @@
 						link: (
 							position: relative,
 						),
+						image: (
+							opacity: 0.8,
+						),
 					),
 				),
 				medium-promo-show-image: (
@@ -1797,6 +1827,9 @@
 					color: var(--global-white),
 					display: none,
 				),
+				medium-promo-headline-hover: (
+					color: var(--text-color-subtle),
+				),
 				medium-manual-promo: (
 					clear: both,
 					display: table,
@@ -1808,6 +1841,7 @@
 							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),
@@ -1822,6 +1856,9 @@
 							font-size: var(--body-font-size),
 							line-height: var(--body-line-height),
 						),
+						image: (
+							opacity: 0.8,
+						),
 					),
 				),
 				medium-manual-promo-show-image: (
@@ -1832,6 +1869,9 @@
 						),
 					),
 				),
+				medium-manual-promo-headline-hover: (
+					color: var(--text-color-subtle),
+				),
 				numbered-list: (
 					gap: var(--global-spacing-4),
 					components: (
@@ -2229,10 +2269,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),
 						),
+						image: (
+							opacity: 0.8,
+						),
 					),
 				),
 				small-manual-promo-above: (
@@ -2249,16 +2293,23 @@
 					gap: var(--global-spacing-6),
 					grid-template-columns: 2fr 1fr,
 				),
+				small-manual-promo-headline-hover: (
+					color: var(--text-color-subtle),
+				),
 				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),
 						),
+						image: (
+							opacity: 0.8,
+						),
 					),
 				),
 				small-promo-left: (
@@ -2269,6 +2320,9 @@
 					gap: var(--global-spacing-6),
 					grid-template-columns: 2fr 1fr,
 				),
+				small-promo-headline-hover: (
+					color: var(--text-color-subtle),
+				),
 				subheadline: (
 					font-size: var(--heading-level-6-font-size),
 					font-weight: var(--heading-level-6-font-weight),
@@ -2537,17 +2591,32 @@
 				),
 				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),
+						),
 						stack: (
 							gap: var(--global-spacing-4),
 						),
+						image: (
+							opacity: 0.8,
+						),
 					),
 				),
+				xl-manual-promo-overline-hover: (
+					color: var(--text-color-subtle),
+				),
+				xl-manual-promo-headline-hover: (
+					color: var(--text-color-subtle),
+				),
 				xl-promo: (
 					components: (
 						link: (
@@ -2556,6 +2625,12 @@
 							font-weight: inherit,
 							line-height: inherit,
 						),
+						heading: (
+							color: var(--text-color),
+						),
+						overline: (
+							color: var(--text-color),
+						),
 						separator: (
 							padding: 0 var(--global-spacing-2),
 						),
@@ -2565,8 +2640,17 @@
 						media-item: (
 							position: relative,
 						),
+						image: (
+							opacity: 0.8,
+						),
 					),
 				),
+				xl-promo-overline-hover: (
+					color: var(--text-color-subtle),
+				),
+				xl-promo-headline-hover: (
+					color: var(--text-color-subtle),
+				),
 				xl-promo-icon-label: (
 					align-items: center,
 					padding: var(--global-spacing-2),
diff --git a/blocks/extra-large-manual-promo-block/_index.scss b/blocks/extra-large-manual-promo-block/_index.scss
index ab9d94c526..31f7526fba 100644
--- a/blocks/extra-large-manual-promo-block/_index.scss
+++ b/blocks/extra-large-manual-promo-block/_index.scss
@@ -3,4 +3,16 @@
 .b-xl-manual-promo {
 	@include scss.block-properties("xl-manual-promo");
 	@include scss.block-components("xl-manual-promo");
+	&__overline {
+		&:hover {
+			@include scss.block-properties("xl-manual-promo-overline-hover");
+			@include scss.block-components("xl-manual-promo-overline-hover");
+		}
+	}
+	&__headline {
+		&:hover {
+			@include scss.block-properties("xl-manual-promo-headline-hover");
+			@include scss.block-components("xl-manual-promo-headline-hover");
+		}
+	}
 }
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
index 6f27c4960d..add824ded6 100644
--- 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
@@ -96,12 +96,16 @@ const ExtraLargeManualPromo = ({ customFields }) => {
 	return availableOverline || availableHeadline || availableImageURL || availableDescription ? (
 		<LazyLoad enabled={shouldLazyLoad}>
 			<article className={BLOCK_CLASS_NAME}>
-				{availableOverline ? <Overline href={overlineURL}>{availableOverline}</Overline> : null}
+				{availableOverline ? (
+					<Overline href={overlineURL} className={`${BLOCK_CLASS_NAME}__overline`}>
+						{availableOverline}
+					</Overline>
+				) : null}
 				{availableHeadline || availableImageURL || availableDescription ? (
 					<Stack>
 						{availableHeadline ? (
 							<HeadingSection>
-								<Heading>
+								<Heading className={`${BLOCK_CLASS_NAME}__headline`}>
 									<Conditional
 										component={Link}
 										condition={linkURL}
diff --git a/blocks/extra-large-manual-promo-block/themes/news.json b/blocks/extra-large-manual-promo-block/themes/news.json
index af9860c6d5..1f1f1ec42b 100644
--- a/blocks/extra-large-manual-promo-block/themes/news.json
+++ b/blocks/extra-large-manual-promo-block/themes/news.json
@@ -3,14 +3,23 @@
 		"styles": {
 			"default": {
 				"components": {
+					"heading": {
+						"color": "var(--text-color)"
+					},
 					"link": {
 						"font-family": "inherit",
 						"font-size": "inherit",
 						"font-weight": "inherit",
 						"line-height": "inherit"
 					},
+					"overline": {
+						"color": "var(--text-color)"
+					},
 					"stack": {
 						"gap": "var(--global-spacing-4)"
+					},
+					"image": {
+						"opacity": 0.8
 					}
 				}
 			},
@@ -32,5 +41,21 @@
 				}
 			}
 		}
+	},
+	"xl-manual-promo-overline-hover": {
+		"styles": {
+			"default": {
+				"color": "var(--text-color-subtle)"
+			},
+			"desktop": {}
+		}
+	},
+	"xl-manual-promo-headline-hover": {
+		"styles": {
+			"default": {
+				"color": "var(--text-color-subtle)"
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/extra-large-promo-block/_index.scss b/blocks/extra-large-promo-block/_index.scss
index 66929f60b8..7b1bbb8da2 100644
--- a/blocks/extra-large-promo-block/_index.scss
+++ b/blocks/extra-large-promo-block/_index.scss
@@ -1,6 +1,18 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-xl-promo {
+	&__overline {
+		&:hover {
+			@include scss.block-properties("xl-promo-overline-hover");
+			@include scss.block-components("xl-promo-overline-hover");
+		}
+	}
+	&__headline {
+		&:hover {
+			@include scss.block-properties("xl-promo-headline-hover");
+			@include scss.block-components("xl-promo-headline-hover");
+		}
+	}
 	&__icon_label {
 		@include scss.block-components("xl-promo-icon-label");
 		@include scss.block-properties("xl-promo-icon-label");
diff --git a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
index 4f9ebd94d6..69c5ed2084 100644
--- a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
+++ b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
@@ -59,7 +59,11 @@ export const ExtraLargePromoPresentation = ({
 	hasOverline || contentHeading || showImage || contentDescription || contentAuthors || hasDate ? (
 		<LazyLoad enabled={shouldLazyLoad}>
 			<article className={BLOCK_CLASS_NAME}>
-				{hasOverline ? <Overline href={overlineUrl}>{overlineText}</Overline> : null}
+				{hasOverline ? (
+					<Overline className={`${BLOCK_CLASS_NAME}__overline`} href={overlineUrl}>
+						{overlineText}
+					</Overline>
+				) : null}
 				{contentHeading ||
 				showImage ||
 				contentDescription ||
@@ -69,7 +73,7 @@ export const ExtraLargePromoPresentation = ({
 					<Stack>
 						{contentHeading ? (
 							<HeadingSection>
-								<Heading>
+								<Heading className={`${BLOCK_CLASS_NAME}__headline`}>
 									<Conditional component={Link} condition={contentUrl} href={contentUrl}>
 										{contentHeading}
 									</Conditional>
diff --git a/blocks/extra-large-promo-block/themes/news.json b/blocks/extra-large-promo-block/themes/news.json
index 8bc937d928..0a1e935883 100644
--- a/blocks/extra-large-promo-block/themes/news.json
+++ b/blocks/extra-large-promo-block/themes/news.json
@@ -3,12 +3,18 @@
 		"styles": {
 			"default": {
 				"components": {
+					"heading": {
+						"color": "var(--text-color)"
+					},
 					"link": {
 						"font-family": "inherit",
 						"font-size": "inherit",
 						"font-weight": "inherit",
 						"line-height": "inherit"
 					},
+					"overline": {
+						"color": "var(--text-color)"
+					},
 					"separator": {
 						"padding": "0 var(--global-spacing-2)"
 					},
@@ -17,6 +23,9 @@
 					},
 					"media-item": {
 						"position": "relative"
+					},
+					"image": {
+						"opacity": 0.8
 					}
 				}
 			},
@@ -73,5 +82,22 @@
 			},
 			"desktop": {}
 		}
+	},
+	"xl-promo-overline-hover": {
+		"styles": {
+			"default": {
+				"color": "var(--text-color-subtle)"
+			},
+			"desktop": {}
+		}
+	},
+
+	"xl-promo-headline-hover": {
+		"styles": {
+			"default": {
+				"color": "var(--text-color-subtle)"
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/large-manual-promo-block/_index.scss b/blocks/large-manual-promo-block/_index.scss
index 7449d16174..4727eabe6b 100644
--- a/blocks/large-manual-promo-block/_index.scss
+++ b/blocks/large-manual-promo-block/_index.scss
@@ -1,6 +1,18 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-large-manual-promo {
+	&__overline {
+		&:hover {
+			@include scss.block-properties("large-manual-promo-overline-hover");
+			@include scss.block-components("large-manual-promo-overline-hover");
+		}
+	}
+	&__headline {
+		&:hover {
+			@include scss.block-properties("large-manual-promo-headline-hover");
+			@include scss.block-components("large-manual-promo-headline-hover");
+		}
+	}
 	&__text {
 		@include scss.block-components("large-manual-promo-text");
 		@include scss.block-properties("large-manual-promo-text");
diff --git a/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx b/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
index 7241f6b680..6c6cabcc47 100644
--- a/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
+++ b/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
@@ -92,9 +92,13 @@ const LargeManualPromo = ({ customFields }) => {
 	const PromoOverline = () => {
 		if (showOverline && overline) {
 			if (overlineURL) {
-				return <Overline href={overlineURL}>{overline}</Overline>;
+				return (
+					<Overline className={`${BLOCK_CLASS_NAME}__overline`} href={overlineURL}>
+						{overline}
+					</Overline>
+				);
 			}
-			return <Overline>{overline}</Overline>;
+			return <Overline className={`${BLOCK_CLASS_NAME}__overline`}>{overline}</Overline>;
 		}
 		return null;
 	};
@@ -129,7 +133,7 @@ const LargeManualPromo = ({ customFields }) => {
 						{showDescription || showHeadline ? (
 							<Stack>
 								{showHeadline && headline ? (
-									<Heading>
+									<Heading className={`${BLOCK_CLASS_NAME}__headline`}>
 										<Conditional
 											component={Link}
 											condition={linkURL}
diff --git a/blocks/large-manual-promo-block/themes/news.json b/blocks/large-manual-promo-block/themes/news.json
index bf1c8ba35b..b87d128a1d 100644
--- a/blocks/large-manual-promo-block/themes/news.json
+++ b/blocks/large-manual-promo-block/themes/news.json
@@ -2,7 +2,12 @@
 	"large-manual-promo": {
 		"styles": {
 			"default": {
-				"gap": "var(--global-spacing-4)"
+				"gap": "var(--global-spacing-4)",
+				"components": {
+					"image": {
+						"opacity": 0.8
+					}
+				}
 			},
 			"desktop": {
 				"gap": "var(--global-spacing-6)",
@@ -22,7 +27,11 @@
 			"default": {
 				"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)"
 					},
@@ -43,5 +52,21 @@
 				}
 			}
 		}
+	},
+	"large-manual-promo-overline-hover": {
+		"styles": {
+			"default": {
+				"color": "var(--text-color-subtle)"
+			},
+			"desktop": {}
+		}
+	},
+	"large-manual-promo-headline-hover": {
+		"styles": {
+			"default": {
+				"color": "var(--text-color-subtle)"
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/large-promo-block/_index.scss b/blocks/large-promo-block/_index.scss
index 7578955f1e..778a4ea5ad 100644
--- a/blocks/large-promo-block/_index.scss
+++ b/blocks/large-promo-block/_index.scss
@@ -1,6 +1,18 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-large-promo {
+	&__overline {
+		&:hover {
+			@include scss.block-properties("large-promo-overline-hover");
+			@include scss.block-components("large-promo-overline-hover");
+		}
+	}
+	&__headline {
+		&:hover {
+			@include scss.block-properties("large-promo-headline-hover");
+			@include scss.block-components("large-promo-headline-hover");
+		}
+	}
 	&__text {
 		@include scss.block-components("large-promo-text");
 		@include scss.block-properties("large-promo-text");
diff --git a/blocks/large-promo-block/features/large-promo/default.jsx b/blocks/large-promo-block/features/large-promo/default.jsx
index 8756af879a..b88de479c1 100644
--- a/blocks/large-promo-block/features/large-promo/default.jsx
+++ b/blocks/large-promo-block/features/large-promo/default.jsx
@@ -108,12 +108,14 @@ export const LargePromoPresentation = ({
 				contentDate ? (
 					<Stack className={`${BLOCK_CLASS_NAME}__text`}>
 						{contentOverline ? (
-							<Overline href={contentOverlineURL}>{contentOverline}</Overline>
+							<Overline className={`${BLOCK_CLASS_NAME}__overline`} href={contentOverlineURL}>
+								{contentOverline}
+							</Overline>
 						) : null}
 						{contentHeading || contentDescription || contentAuthors || contentDate ? (
 							<Stack>
 								{contentHeading ? (
-									<Heading>
+									<Heading className={`${BLOCK_CLASS_NAME}__headline`}>
 										<Conditional
 											component={Link}
 											condition={contentUrl}
diff --git a/blocks/large-promo-block/themes/news.json b/blocks/large-promo-block/themes/news.json
index abe1ac5d8c..dcf53bcee6 100644
--- a/blocks/large-promo-block/themes/news.json
+++ b/blocks/large-promo-block/themes/news.json
@@ -6,6 +6,9 @@
 				"components": {
 					"link": {
 						"position": "relative"
+					},
+					"image": {
+						"opacity": 0.8
 					}
 				}
 			},
@@ -57,10 +60,12 @@
 				"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)"
 					},
@@ -85,5 +90,21 @@
 				}
 			}
 		}
+	},
+	"large-promo-overline-hover": {
+		"styles": {
+			"default": {
+				"color": "var(--text-color-subtle)"
+			},
+			"desktop": {}
+		}
+	},
+	"large-promo-headline-hover": {
+		"styles": {
+			"default": {
+				"color": "var(--text-color-subtle)"
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/medium-manual-promo-block/_index.scss b/blocks/medium-manual-promo-block/_index.scss
index ebff1a7a95..74fa357ccc 100644
--- a/blocks/medium-manual-promo-block/_index.scss
+++ b/blocks/medium-manual-promo-block/_index.scss
@@ -1,6 +1,12 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-medium-manual-promo {
+	&__headline {
+		&:hover {
+			@include scss.block-properties("medium-manual-promo-headline-hover");
+			@include scss.block-components("medium-manual-promo-headline-hover");
+		}
+	}
 	&--show-image {
 		@include scss.block-properties("medium-manual-promo-show-image");
 		@include scss.block-components("medium-manual-promo-show-image");
diff --git a/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx b/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
index eb4dd12b7f..2e4758eda2 100644
--- a/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
+++ b/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
@@ -112,7 +112,7 @@ const MediumManualPromo = ({ customFields }) => {
 					) : null}
 
 					{showHeadline && headline ? (
-						<Heading>
+						<Heading className={`${BLOCK_CLASS_NAME}__headline`}>
 							<Conditional
 								component={Link}
 								condition={linkURL}
diff --git a/blocks/medium-manual-promo-block/themes/news.json b/blocks/medium-manual-promo-block/themes/news.json
index 9a7f18c022..d71a68432c 100644
--- a/blocks/medium-manual-promo-block/themes/news.json
+++ b/blocks/medium-manual-promo-block/themes/news.json
@@ -12,6 +12,7 @@
 						"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)",
@@ -25,6 +26,9 @@
 						"display": "inline",
 						"font-size": "var(--body-font-size)",
 						"line-height": "var(--body-line-height)"
+					},
+					"image": {
+						"opacity": 0.8
 					}
 				}
 			},
@@ -63,5 +67,13 @@
 				}
 			}
 		}
+	},
+	"medium-manual-promo-headline-hover": {
+		"styles": {
+			"default": {
+				"color": "var(--text-color-subtle)"
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/medium-promo-block/_index.scss b/blocks/medium-promo-block/_index.scss
index 2ae3f732cc..b178e6c89a 100644
--- a/blocks/medium-promo-block/_index.scss
+++ b/blocks/medium-promo-block/_index.scss
@@ -1,6 +1,12 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-medium-promo {
+	&__headline {
+		&:hover {
+			@include scss.block-properties("medium-promo-headline-hover");
+			@include scss.block-components("medium-promo-headline-hover");
+		}
+	}
 	&--show-image {
 		@include scss.block-properties("medium-promo-show-image");
 		@include scss.block-components("medium-promo-show-image");
diff --git a/blocks/medium-promo-block/features/medium-promo/default.jsx b/blocks/medium-promo-block/features/medium-promo/default.jsx
index 16da4f71c4..9e4af52617 100644
--- a/blocks/medium-promo-block/features/medium-promo/default.jsx
+++ b/blocks/medium-promo-block/features/medium-promo/default.jsx
@@ -227,7 +227,7 @@ const MediumPromo = ({ customFields }) => {
 					) : null}
 
 					{contentHeading ? (
-						<Heading>
+						<Heading className={`${BLOCK_CLASS_NAME}__headline`}>
 							<Conditional
 								component={Link}
 								condition={contentUrl}
diff --git a/blocks/medium-promo-block/themes/news.json b/blocks/medium-promo-block/themes/news.json
index 6646dfd406..215cbf0801 100644
--- a/blocks/medium-promo-block/themes/news.json
+++ b/blocks/medium-promo-block/themes/news.json
@@ -29,6 +29,9 @@
 					},
 					"link": {
 						"position": "relative"
+					},
+					"image": {
+						"opacity": 0.8
 					}
 				}
 			},
@@ -55,6 +58,7 @@
 			"default": {
 				"components": {
 					"heading": {
+						"color": "var(--text-color)",
 						"width": "68%"
 					}
 				}
@@ -109,5 +113,13 @@
 				"display": "inline"
 			}
 		}
+	},
+	"medium-promo-headline-hover": {
+		"styles": {
+			"default": {
+				"color": "var(--text-color-subtle)"
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/small-manual-promo-block/_index.scss b/blocks/small-manual-promo-block/_index.scss
index e14ae1bbd0..a937182167 100644
--- a/blocks/small-manual-promo-block/_index.scss
+++ b/blocks/small-manual-promo-block/_index.scss
@@ -1,6 +1,12 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-small-manual-promo {
+	&__headline {
+		&:hover {
+			@include scss.block-properties("small-manual-promo-headline-hover");
+			@include scss.block-components("small-manual-promo-headline-hover");
+		}
+	}
 	&--above {
 		@include scss.block-properties("small-manual-promo-above");
 		@include scss.block-components("small-manual-promo-above");
diff --git a/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx b/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx
index 270331c286..cea4a93ce3 100644
--- a/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx
+++ b/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx
@@ -110,7 +110,7 @@ const SmallManualPromo = ({ customFields }) => {
 
 	const PromoHeading = () =>
 		showHeadline && headline ? (
-			<Heading>
+			<Heading className={`${BLOCK_CLASS_NAME}__headline`}>
 				{linkURL ? (
 					<Link href={formatURL(linkURL)} openInNewTab={newTab} onClick={registerSuccessEvent}>
 						{headline}
diff --git a/blocks/small-manual-promo-block/themes/news.json b/blocks/small-manual-promo-block/themes/news.json
index eed5fde482..c7d9f104ca 100644
--- a/blocks/small-manual-promo-block/themes/news.json
+++ b/blocks/small-manual-promo-block/themes/news.json
@@ -7,9 +7,13 @@
 				"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)"
+					},
+					"image": {
+						"opacity": 0.8
 					}
 				}
 			},
@@ -49,5 +53,13 @@
 			},
 			"desktop": {}
 		}
+	},
+	"small-manual-promo-headline-hover": {
+		"styles": {
+			"default": {
+				"color": "var(--text-color-subtle)"
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/small-promo-block/_index.scss b/blocks/small-promo-block/_index.scss
index 685411fdf4..9c30506daa 100644
--- a/blocks/small-promo-block/_index.scss
+++ b/blocks/small-promo-block/_index.scss
@@ -1,6 +1,12 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-small-promo {
+	&__headline {
+		&:hover {
+			@include scss.block-properties("small-promo-headline-hover");
+			@include scss.block-components("small-promo-headline-hover");
+		}
+	}
 	&--above {
 		@include scss.block-properties("small-promo-above");
 		@include scss.block-components("small-promo-above");
diff --git a/blocks/small-promo-block/features/small-promo/default.jsx b/blocks/small-promo-block/features/small-promo/default.jsx
index 55d4a226b3..226919be1b 100644
--- a/blocks/small-promo-block/features/small-promo/default.jsx
+++ b/blocks/small-promo-block/features/small-promo/default.jsx
@@ -166,7 +166,7 @@ const SmallPromo = ({ customFields }) => {
 
 	const PromoHeading = () =>
 		showHeadline && headline ? (
-			<Heading>
+			<Heading className={`${BLOCK_CLASS_NAME}__headline`}>
 				<Conditional
 					component={Link}
 					condition={linkURL}
diff --git a/blocks/small-promo-block/themes/news.json b/blocks/small-promo-block/themes/news.json
index 1dff54197a..2b79519358 100644
--- a/blocks/small-promo-block/themes/news.json
+++ b/blocks/small-promo-block/themes/news.json
@@ -7,9 +7,13 @@
 				"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)"
+					},
+					"image": {
+						"opacity": 0.8
 					}
 				}
 			},
@@ -33,5 +37,13 @@
 			},
 			"desktop": {}
 		}
+	},
+	"small-promo-headline-hover": {
+		"styles": {
+			"default": {
+				"color": "var(--text-color-subtle)"
+			},
+			"desktop": {}
+		}
 	}
 }

From ae68bc303de47fada30962acab30917cb44b6a58 Mon Sep 17 00:00:00 2001
From: Malavika Koppula <mkreddy1110@gmail.com>
Date: Wed, 5 Jul 2023 10:09:27 -0400
Subject: [PATCH 02/10] Fixed image opacity

---
 .storybook/mock-content/extraLargePromo.js    |  7 +++
 .storybook/mock-content/largePromo.js         |  7 +++
 .storybook/mock-content/mediumPromo.js        |  4 ++
 .storybook/mock-content/smallPromo.js         |  4 ++
 .storybook/themes/news.scss                   | 50 +++++++++----------
 .../_index.scss                               |  4 ++
 .../extra-large-manual-promo/default.jsx      |  5 +-
 .../themes/news.json                          | 11 ++--
 blocks/extra-large-promo-block/_index.scss    |  4 ++
 .../features/extra-large-promo/default.jsx    |  8 ++-
 .../extra-large-promo-block/themes/news.json  | 11 ++--
 blocks/large-manual-promo-block/_index.scss   |  4 ++
 .../features/large-manual-promo/default.jsx   |  5 +-
 .../large-manual-promo-block/themes/news.json | 15 +++---
 blocks/large-promo-block/_index.scss          |  4 ++
 .../features/large-promo/default.jsx          |  5 +-
 blocks/large-promo-block/themes/news.json     | 11 ++--
 blocks/medium-manual-promo-block/_index.scss  |  4 ++
 .../features/medium-manual-promo/default.jsx  |  5 +-
 .../themes/news.json                          | 11 ++--
 blocks/medium-promo-block/_index.scss         |  4 ++
 .../features/medium-promo/default.jsx         |  6 ++-
 blocks/medium-promo-block/themes/news.json    | 11 ++--
 blocks/small-manual-promo-block/_index.scss   |  4 ++
 .../features/small-manual-promo/default.jsx   |  5 +-
 .../small-manual-promo-block/themes/news.json | 11 ++--
 blocks/small-promo-block/_index.scss          |  4 ++
 .../features/small-promo/default.jsx          |  5 +-
 blocks/small-promo-block/themes/news.json     | 11 ++--
 29 files changed, 178 insertions(+), 62 deletions(-)

diff --git a/.storybook/mock-content/extraLargePromo.js b/.storybook/mock-content/extraLargePromo.js
index c59d7f637f..e86614a8d1 100644
--- 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
index c9d0779090..d9f89ef77b 100644
--- 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
index 31f0387d67..c984ac4749 100644
--- 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
index 96cc783e5b..06f3f3863e 100644
--- 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
index d9c980a708..03c6ed668a 100644
--- a/.storybook/themes/news.scss
+++ b/.storybook/themes/news.scss
@@ -1509,11 +1509,6 @@
 				),
 				large-manual-promo: (
 					gap: var(--global-spacing-4),
-					components: (
-						image: (
-							opacity: 0.8,
-						),
-					),
 				),
 				large-manual-promo-text: (
 					gap: 0,
@@ -1540,15 +1535,15 @@
 				large-manual-promo-headline-hover: (
 					color: var(--text-color-subtle),
 				),
+				large-manual-promo-img-with-link: (
+					opacity: 0.8,
+				),
 				large-promo: (
 					gap: var(--global-spacing-4),
 					components: (
 						link: (
 							position: relative,
 						),
-						image: (
-							opacity: 0.8,
-						),
 					),
 				),
 				large-promo-icon-label: (
@@ -1604,6 +1599,9 @@
 				large-promo-headline-hover: (
 					color: var(--text-color-subtle),
 				),
+				large-promo-img-with-link: (
+					opacity: 0.8,
+				),
 				lead-art: (
 					margin-bottom: var(--global-spacing-5),
 					components: (
@@ -1791,9 +1789,6 @@
 						link: (
 							position: relative,
 						),
-						image: (
-							opacity: 0.8,
-						),
 					),
 				),
 				medium-promo-show-image: (
@@ -1830,6 +1825,9 @@
 				medium-promo-headline-hover: (
 					color: var(--text-color-subtle),
 				),
+				medium-promo-img-with-link: (
+					opacity: 0.8,
+				),
 				medium-manual-promo: (
 					clear: both,
 					display: table,
@@ -1856,9 +1854,6 @@
 							font-size: var(--body-font-size),
 							line-height: var(--body-line-height),
 						),
-						image: (
-							opacity: 0.8,
-						),
 					),
 				),
 				medium-manual-promo-show-image: (
@@ -1872,6 +1867,9 @@
 				medium-manual-promo-headline-hover: (
 					color: var(--text-color-subtle),
 				),
+				medium-manual-promo-img-with-link: (
+					opacity: 0.8,
+				),
 				numbered-list: (
 					gap: var(--global-spacing-4),
 					components: (
@@ -2274,9 +2272,6 @@
 							font-weight: var(--body-font-weight),
 							line-height: var(--body-line-height),
 						),
-						image: (
-							opacity: 0.8,
-						),
 					),
 				),
 				small-manual-promo-above: (
@@ -2296,6 +2291,9 @@
 				small-manual-promo-headline-hover: (
 					color: var(--text-color-subtle),
 				),
+				small-manual-promo-img-with-link: (
+					opacity: 0.8,
+				),
 				small-promo: (
 					display: grid,
 					gap: var(--global-spacing-5),
@@ -2307,9 +2305,6 @@
 							font-weight: var(--body-font-weight),
 							line-height: var(--body-line-height),
 						),
-						image: (
-							opacity: 0.8,
-						),
 					),
 				),
 				small-promo-left: (
@@ -2323,6 +2318,9 @@
 				small-promo-headline-hover: (
 					color: var(--text-color-subtle),
 				),
+				small-promo-img-with-link: (
+					opacity: 0.8,
+				),
 				subheadline: (
 					font-size: var(--heading-level-6-font-size),
 					font-weight: var(--heading-level-6-font-weight),
@@ -2606,9 +2604,6 @@
 						stack: (
 							gap: var(--global-spacing-4),
 						),
-						image: (
-							opacity: 0.8,
-						),
 					),
 				),
 				xl-manual-promo-overline-hover: (
@@ -2617,6 +2612,9 @@
 				xl-manual-promo-headline-hover: (
 					color: var(--text-color-subtle),
 				),
+				xl-manual-promo-img-with-link: (
+					opacity: 0.8,
+				),
 				xl-promo: (
 					components: (
 						link: (
@@ -2640,9 +2638,6 @@
 						media-item: (
 							position: relative,
 						),
-						image: (
-							opacity: 0.8,
-						),
 					),
 				),
 				xl-promo-overline-hover: (
@@ -2651,6 +2646,9 @@
 				xl-promo-headline-hover: (
 					color: var(--text-color-subtle),
 				),
+				xl-promo-img-with-link: (
+					opacity: 0.8,
+				),
 				xl-promo-icon-label: (
 					align-items: center,
 					padding: var(--global-spacing-2),
diff --git a/blocks/extra-large-manual-promo-block/_index.scss b/blocks/extra-large-manual-promo-block/_index.scss
index 31f7526fba..2ba56941ac 100644
--- a/blocks/extra-large-manual-promo-block/_index.scss
+++ b/blocks/extra-large-manual-promo-block/_index.scss
@@ -15,4 +15,8 @@
 			@include scss.block-components("xl-manual-promo-headline-hover");
 		}
 	}
+	&__imgWithLink {
+		@include scss.block-properties("xl-manual-promo-img-with-link");
+		@include scss.block-components("xl-manual-promo-img-with-link");
+	}
 }
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
index add824ded6..be2c8fe0f1 100644
--- 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
@@ -135,7 +135,10 @@ const ExtraLargeManualPromo = ({ customFields }) => {
 									onClick={registerSuccessEvent}
 									assistiveHidden={showHeadline && showDescription}
 								>
-									<Image {...imageParams} />
+									<Image
+										className={`${linkURL ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
+										{...imageParams}
+									/>
 								</Conditional>
 							</MediaItem>
 						) : null}
diff --git a/blocks/extra-large-manual-promo-block/themes/news.json b/blocks/extra-large-manual-promo-block/themes/news.json
index 1f1f1ec42b..f275f28ea7 100644
--- a/blocks/extra-large-manual-promo-block/themes/news.json
+++ b/blocks/extra-large-manual-promo-block/themes/news.json
@@ -17,9 +17,6 @@
 					},
 					"stack": {
 						"gap": "var(--global-spacing-4)"
-					},
-					"image": {
-						"opacity": 0.8
 					}
 				}
 			},
@@ -57,5 +54,13 @@
 			},
 			"desktop": {}
 		}
+	},
+	"xl-manual-promo-img-with-link": {
+		"styles": {
+			"default": {
+				"opacity": 0.8
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/extra-large-promo-block/_index.scss b/blocks/extra-large-promo-block/_index.scss
index 7b1bbb8da2..9e2c495f41 100644
--- a/blocks/extra-large-promo-block/_index.scss
+++ b/blocks/extra-large-promo-block/_index.scss
@@ -1,6 +1,10 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-xl-promo {
+	&__imgWithLink {
+		@include scss.block-properties("xl-promo-img-with-link");
+		@include scss.block-components("xl-promo-img-with-link");
+	}
 	&__overline {
 		&:hover {
 			@include scss.block-properties("xl-promo-overline-hover");
diff --git a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
index 69c5ed2084..04abfa9bf3 100644
--- a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
+++ b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
@@ -97,13 +97,17 @@ export const ExtraLargePromoPresentation = ({
 									/>
 								) : (
 									<>
+										{console.log("contentUrl", contentUrl)}
 										<Conditional
 											component={Link}
 											condition={contentUrl}
 											href={contentUrl}
 											assistiveHidden
 										>
-											<Image {...imageParams} />
+											<Image
+												className={`${contentUrl ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
+												{...imageParams}
+											/>
 											{labelIconName ? (
 												<div className={`${BLOCK_CLASS_NAME}__icon_label`}>
 													<Icon name={labelIconName} />
@@ -293,7 +297,7 @@ const ExtraLargePromo = ({ customFields }) => {
 	}
 
 	const hasOverline = showOverline && overlineText;
-
+	console.log("content ", content, arcSite);
 	const contentDescription = showDescription ? content?.description?.basic : null;
 	const contentHeading = showHeadline ? content?.headlines?.basic : null;
 	const contentUrl = content?.websites?.[arcSite]?.website_url;
diff --git a/blocks/extra-large-promo-block/themes/news.json b/blocks/extra-large-promo-block/themes/news.json
index 0a1e935883..445f499f71 100644
--- a/blocks/extra-large-promo-block/themes/news.json
+++ b/blocks/extra-large-promo-block/themes/news.json
@@ -23,9 +23,6 @@
 					},
 					"media-item": {
 						"position": "relative"
-					},
-					"image": {
-						"opacity": 0.8
 					}
 				}
 			},
@@ -99,5 +96,13 @@
 			},
 			"desktop": {}
 		}
+	},
+	"xl-promo-img-with-link": {
+		"styles": {
+			"default": {
+				"opacity": 0.8
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/large-manual-promo-block/_index.scss b/blocks/large-manual-promo-block/_index.scss
index 4727eabe6b..7a0896d5b5 100644
--- a/blocks/large-manual-promo-block/_index.scss
+++ b/blocks/large-manual-promo-block/_index.scss
@@ -1,6 +1,10 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-large-manual-promo {
+	&__imgWithLink {
+		@include scss.block-properties("large-manual-promo-img-with-link");
+		@include scss.block-components("large-manual-promo-img-with-link");
+	}
 	&__overline {
 		&:hover {
 			@include scss.block-properties("large-manual-promo-overline-hover");
diff --git a/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx b/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
index 6c6cabcc47..6797babd7b 100644
--- a/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
+++ b/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
@@ -124,7 +124,10 @@ const LargeManualPromo = ({ customFields }) => {
 								onClick={registerSuccessEvent}
 								assistiveHidden={showHeadline && showDescription}
 							>
-								<Image {...imageParams} />
+								<Image
+									className={`${linkURL ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
+									{...imageParams}
+								/>
 							</Conditional>
 						</MediaItem>
 					) : null}
diff --git a/blocks/large-manual-promo-block/themes/news.json b/blocks/large-manual-promo-block/themes/news.json
index b87d128a1d..54ae6ce029 100644
--- a/blocks/large-manual-promo-block/themes/news.json
+++ b/blocks/large-manual-promo-block/themes/news.json
@@ -2,12 +2,7 @@
 	"large-manual-promo": {
 		"styles": {
 			"default": {
-				"gap": "var(--global-spacing-4)",
-				"components": {
-					"image": {
-						"opacity": 0.8
-					}
-				}
+				"gap": "var(--global-spacing-4)"
 			},
 			"desktop": {
 				"gap": "var(--global-spacing-6)",
@@ -68,5 +63,13 @@
 			},
 			"desktop": {}
 		}
+	},
+	"large-manual-promo-img-with-link": {
+		"styles": {
+			"default": {
+				"opacity": 0.8
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/large-promo-block/_index.scss b/blocks/large-promo-block/_index.scss
index 778a4ea5ad..08c019a7cb 100644
--- a/blocks/large-promo-block/_index.scss
+++ b/blocks/large-promo-block/_index.scss
@@ -1,6 +1,10 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-large-promo {
+	&__imgWithLink {
+		@include scss.block-properties("large-promo-img-with-link");
+		@include scss.block-components("large-promo-img-with-link");
+	}
 	&__overline {
 		&:hover {
 			@include scss.block-properties("large-promo-overline-hover");
diff --git a/blocks/large-promo-block/features/large-promo/default.jsx b/blocks/large-promo-block/features/large-promo/default.jsx
index b88de479c1..23c4ac9062 100644
--- a/blocks/large-promo-block/features/large-promo/default.jsx
+++ b/blocks/large-promo-block/features/large-promo/default.jsx
@@ -89,7 +89,10 @@ export const LargePromoPresentation = ({
 								/>
 							) : (
 								<>
-									<Image {...promoImageParams} />
+									<Image
+										className={`${contentUrl ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
+										{...promoImageParams}
+									/>
 									{labelIconName ? (
 										<div className={`${BLOCK_CLASS_NAME}__icon_label`}>
 											<Icon name={labelIconName} />
diff --git a/blocks/large-promo-block/themes/news.json b/blocks/large-promo-block/themes/news.json
index dcf53bcee6..b72318260c 100644
--- a/blocks/large-promo-block/themes/news.json
+++ b/blocks/large-promo-block/themes/news.json
@@ -6,9 +6,6 @@
 				"components": {
 					"link": {
 						"position": "relative"
-					},
-					"image": {
-						"opacity": 0.8
 					}
 				}
 			},
@@ -106,5 +103,13 @@
 			},
 			"desktop": {}
 		}
+	},
+	"large-promo-img-with-link": {
+		"styles": {
+			"default": {
+				"opacity": 0.8
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/medium-manual-promo-block/_index.scss b/blocks/medium-manual-promo-block/_index.scss
index 74fa357ccc..d55881f77c 100644
--- a/blocks/medium-manual-promo-block/_index.scss
+++ b/blocks/medium-manual-promo-block/_index.scss
@@ -1,6 +1,10 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-medium-manual-promo {
+	&__imgWithLink {
+		@include scss.block-properties("medium-manual-promo-img-with-link");
+		@include scss.block-components("medium-manual-promo-img-with-link");
+	}
 	&__headline {
 		&:hover {
 			@include scss.block-properties("medium-manual-promo-headline-hover");
diff --git a/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx b/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
index 2e4758eda2..39f9fb885e 100644
--- a/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
+++ b/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
@@ -106,7 +106,10 @@ const MediumManualPromo = ({ customFields }) => {
 								onClick={registerSuccessEvent}
 								assistiveHidden={showHeadline && showDescription}
 							>
-								<Image {...imageParams} />
+								<Image
+									className={`${linkURL ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
+									{...imageParams}
+								/>
 							</Conditional>
 						</MediaItem>
 					) : null}
diff --git a/blocks/medium-manual-promo-block/themes/news.json b/blocks/medium-manual-promo-block/themes/news.json
index d71a68432c..09e7b5c850 100644
--- a/blocks/medium-manual-promo-block/themes/news.json
+++ b/blocks/medium-manual-promo-block/themes/news.json
@@ -26,9 +26,6 @@
 						"display": "inline",
 						"font-size": "var(--body-font-size)",
 						"line-height": "var(--body-line-height)"
-					},
-					"image": {
-						"opacity": 0.8
 					}
 				}
 			},
@@ -75,5 +72,13 @@
 			},
 			"desktop": {}
 		}
+	},
+	"medium-manual-promo-img-with-link": {
+		"styles": {
+			"default": {
+				"opacity": 0.8
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/medium-promo-block/_index.scss b/blocks/medium-promo-block/_index.scss
index b178e6c89a..c58e299896 100644
--- a/blocks/medium-promo-block/_index.scss
+++ b/blocks/medium-promo-block/_index.scss
@@ -1,6 +1,10 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-medium-promo {
+	&__imgWithLink {
+		@include scss.block-properties("medium-promo-img-with-link");
+		@include scss.block-components("medium-promo-img-with-link");
+	}
 	&__headline {
 		&:hover {
 			@include scss.block-properties("medium-promo-headline-hover");
diff --git a/blocks/medium-promo-block/features/medium-promo/default.jsx b/blocks/medium-promo-block/features/medium-promo/default.jsx
index 9e4af52617..b5292d9a8e 100644
--- a/blocks/medium-promo-block/features/medium-promo/default.jsx
+++ b/blocks/medium-promo-block/features/medium-promo/default.jsx
@@ -215,7 +215,11 @@ const MediumPromo = ({ customFields }) => {
 								onClick={registerSuccessEvent}
 								assistiveHidden
 							>
-								<Image alt={content?.headlines?.basic} {...imageParams} />
+								<Image
+									className={`${contentUrl ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
+									alt={content?.headlines?.basic}
+									{...imageParams}
+								/>
 								{labelIconName ? (
 									<div className={`${BLOCK_CLASS_NAME}__icon_label`}>
 										<Icon name={labelIconName} />
diff --git a/blocks/medium-promo-block/themes/news.json b/blocks/medium-promo-block/themes/news.json
index 215cbf0801..b13ecdee39 100644
--- a/blocks/medium-promo-block/themes/news.json
+++ b/blocks/medium-promo-block/themes/news.json
@@ -29,9 +29,6 @@
 					},
 					"link": {
 						"position": "relative"
-					},
-					"image": {
-						"opacity": 0.8
 					}
 				}
 			},
@@ -121,5 +118,13 @@
 			},
 			"desktop": {}
 		}
+	},
+	"medium-promo-img-with-link": {
+		"styles": {
+			"default": {
+				"opacity": 0.8
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/small-manual-promo-block/_index.scss b/blocks/small-manual-promo-block/_index.scss
index a937182167..044650502b 100644
--- a/blocks/small-manual-promo-block/_index.scss
+++ b/blocks/small-manual-promo-block/_index.scss
@@ -1,6 +1,10 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-small-manual-promo {
+	&__imgWithLink {
+		@include scss.block-properties("small-manual-promo-img-with-link");
+		@include scss.block-components("small-manual-promo-img-with-link");
+	}
 	&__headline {
 		&:hover {
 			@include scss.block-properties("small-manual-promo-headline-hover");
diff --git a/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx b/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx
index cea4a93ce3..7b126e40bb 100644
--- a/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx
+++ b/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx
@@ -91,7 +91,10 @@ const SmallManualPromo = ({ customFields }) => {
 				})}
 				suppressContentEditableWarning
 			>
-				<Image {...imageParams} />
+				<Image
+					className={`${linkURL ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
+					{...imageParams}
+				/>
 			</MediaItem>
 		) : null;
 		return showImage && linkURL ? (
diff --git a/blocks/small-manual-promo-block/themes/news.json b/blocks/small-manual-promo-block/themes/news.json
index c7d9f104ca..d43a89336c 100644
--- a/blocks/small-manual-promo-block/themes/news.json
+++ b/blocks/small-manual-promo-block/themes/news.json
@@ -11,9 +11,6 @@
 						"font-size": "var(--body-font-size)",
 						"font-weight": "var(--body-font-weight)",
 						"line-height": "var(--body-line-height)"
-					},
-					"image": {
-						"opacity": 0.8
 					}
 				}
 			},
@@ -61,5 +58,13 @@
 			},
 			"desktop": {}
 		}
+	},
+	"small-manual-promo-img-with-link": {
+		"styles": {
+			"default": {
+				"opacity": 0.8
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/small-promo-block/_index.scss b/blocks/small-promo-block/_index.scss
index 9c30506daa..d25acd6858 100644
--- a/blocks/small-promo-block/_index.scss
+++ b/blocks/small-promo-block/_index.scss
@@ -1,6 +1,10 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-small-promo {
+	&__imgWithLink {
+		@include scss.block-properties("small-promo-img-with-link");
+		@include scss.block-components("small-promo-img-with-link");
+	}
 	&__headline {
 		&:hover {
 			@include scss.block-properties("small-promo-headline-hover");
diff --git a/blocks/small-promo-block/features/small-promo/default.jsx b/blocks/small-promo-block/features/small-promo/default.jsx
index 226919be1b..dcfb8ae913 100644
--- a/blocks/small-promo-block/features/small-promo/default.jsx
+++ b/blocks/small-promo-block/features/small-promo/default.jsx
@@ -158,7 +158,10 @@ const SmallPromo = ({ customFields }) => {
 					})}
 					suppressContentEditableWarning
 				>
-					<Image {...imageParams} />
+					<Image
+						className={`${linkURL ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
+						{...imageParams}
+					/>
 				</MediaItem>
 			</Conditional>
 		) : null;
diff --git a/blocks/small-promo-block/themes/news.json b/blocks/small-promo-block/themes/news.json
index 2b79519358..1cfcb3464c 100644
--- a/blocks/small-promo-block/themes/news.json
+++ b/blocks/small-promo-block/themes/news.json
@@ -11,9 +11,6 @@
 						"font-size": "var(--body-font-size)",
 						"font-weight": "var(--body-font-weight)",
 						"line-height": "var(--body-line-height)"
-					},
-					"image": {
-						"opacity": 0.8
 					}
 				}
 			},
@@ -45,5 +42,13 @@
 			},
 			"desktop": {}
 		}
+	},
+	"small-promo-img-with-link": {
+		"styles": {
+			"default": {
+				"opacity": 0.8
+			},
+			"desktop": {}
+		}
 	}
 }

From d97bec3abf74450e69752622297cf8edfe1ea34d Mon Sep 17 00:00:00 2001
From: Malavika Koppula <mkreddy1110@gmail.com>
Date: Wed, 5 Jul 2023 10:11:30 -0400
Subject: [PATCH 03/10] removed console statements

---
 .../features/extra-large-promo/default.jsx                      | 2 --
 1 file changed, 2 deletions(-)

diff --git a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
index 04abfa9bf3..5dd1b952a7 100644
--- a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
+++ b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
@@ -97,7 +97,6 @@ export const ExtraLargePromoPresentation = ({
 									/>
 								) : (
 									<>
-										{console.log("contentUrl", contentUrl)}
 										<Conditional
 											component={Link}
 											condition={contentUrl}
@@ -297,7 +296,6 @@ const ExtraLargePromo = ({ customFields }) => {
 	}
 
 	const hasOverline = showOverline && overlineText;
-	console.log("content ", content, arcSite);
 	const contentDescription = showDescription ? content?.description?.basic : null;
 	const contentHeading = showHeadline ? content?.headlines?.basic : null;
 	const contentUrl = content?.websites?.[arcSite]?.website_url;

From 21ef5941449d960178c66dae1722dfcfb531ca1e Mon Sep 17 00:00:00 2001
From: Malavika Koppula <mkreddy1110@gmail.com>
Date: Wed, 19 Jul 2023 12:55:02 -0400
Subject: [PATCH 04/10] Fixed hover state and images with link

---
 .storybook/themes/news.scss                   | 120 +++++++++++++++---
 .../_index.scss                               |  12 +-
 .../extra-large-manual-promo/default.jsx      |   6 +-
 .../themes/news.json                          |  16 ++-
 blocks/extra-large-promo-block/_index.scss    |  12 +-
 .../features/extra-large-promo/default.jsx    |   6 +-
 .../extra-large-promo-block/themes/news.json  |  16 ++-
 blocks/large-manual-promo-block/_index.scss   |  12 +-
 .../features/large-manual-promo/default.jsx   |   6 +-
 .../large-manual-promo-block/themes/news.json |  16 ++-
 blocks/large-promo-block/_index.scss          |  12 +-
 .../features/large-promo/default.jsx          |   6 +-
 blocks/large-promo-block/themes/news.json     |  16 ++-
 blocks/medium-manual-promo-block/_index.scss  |   6 +-
 .../features/medium-manual-promo/default.jsx  |   6 +-
 .../themes/news.json                          |  10 +-
 blocks/medium-promo-block/_index.scss         |   6 +-
 .../features/medium-promo/default.jsx         |   7 +-
 blocks/medium-promo-block/themes/news.json    |  10 +-
 blocks/small-manual-promo-block/_index.scss   |   6 +-
 .../small-manual-promo-block/themes/news.json |  10 +-
 blocks/small-promo-block/_index.scss          |   6 +-
 blocks/small-promo-block/themes/news.json     |  10 +-
 23 files changed, 220 insertions(+), 113 deletions(-)

diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss
index 443d16ef6a..503846fb26 100644
--- a/.storybook/themes/news.scss
+++ b/.storybook/themes/news.scss
@@ -1576,13 +1576,25 @@
 					),
 				),
 				large-manual-promo-overline-hover: (
-					color: var(--text-color-subtle),
+					components: (
+						overline-hover: (
+							color: var(--text-color-subtle),
+						),
+					),
 				),
 				large-manual-promo-headline-hover: (
-					color: var(--text-color-subtle),
+					components: (
+						heading: (
+							color: var(--text-color-subtle),
+						),
+					),
 				),
 				large-manual-promo-img-with-link: (
-					opacity: 0.8,
+					components: (
+						image: (
+							opacity: 0.8,
+						),
+					),
 				),
 				large-promo: (
 					gap: var(--global-spacing-4),
@@ -1640,13 +1652,25 @@
 					),
 				),
 				large-promo-overline-hover: (
-					color: var(--text-color-subtle),
+					components: (
+						overline-hover: (
+							color: var(--text-color-subtle),
+						),
+					),
 				),
 				large-promo-headline-hover: (
-					color: var(--text-color-subtle),
+					components: (
+						heading: (
+							color: var(--text-color-subtle),
+						),
+					),
 				),
 				large-promo-img-with-link: (
-					opacity: 0.8,
+					components: (
+						image: (
+							opacity: 0.8,
+						),
+					),
 				),
 				lead-art: (
 					margin-bottom: var(--global-spacing-5),
@@ -1877,10 +1901,18 @@
 					display: none,
 				),
 				medium-promo-headline-hover: (
-					color: var(--text-color-subtle),
+					components: (
+						heading: (
+							color: var(--text-color-subtle),
+						),
+					),
 				),
 				medium-promo-img-with-link: (
-					opacity: 0.8,
+					components: (
+						image: (
+							opacity: 0.8,
+						),
+					),
 				),
 				medium-manual-promo: (
 					clear: both,
@@ -1919,10 +1951,18 @@
 					),
 				),
 				medium-manual-promo-headline-hover: (
-					color: var(--text-color-subtle),
+					components: (
+						heading: (
+							color: var(--text-color-subtle),
+						),
+					),
 				),
 				medium-manual-promo-img-with-link: (
-					opacity: 0.8,
+					components: (
+						image: (
+							opacity: 0.8,
+						),
+					),
 				),
 				numbered-list: (
 					gap: var(--global-spacing-4),
@@ -2358,10 +2398,18 @@
 					grid-template-columns: 2fr 1fr,
 				),
 				small-manual-promo-headline-hover: (
-					color: var(--text-color-subtle),
+					components: (
+						heading: (
+							color: var(--text-color-subtle),
+						),
+					),
 				),
 				small-manual-promo-img-with-link: (
-					opacity: 0.8,
+					components: (
+						image: (
+							opacity: 0.8,
+						),
+					),
 				),
 				small-promo: (
 					display: grid,
@@ -2385,10 +2433,18 @@
 					grid-template-columns: 2fr 1fr,
 				),
 				small-promo-headline-hover: (
-					color: var(--text-color-subtle),
+					components: (
+						heading: (
+							color: var(--text-color-subtle),
+						),
+					),
 				),
 				small-promo-img-with-link: (
-					opacity: 0.8,
+					components: (
+						image: (
+							opacity: 0.8,
+						),
+					),
 				),
 				subheadline: (
 					font-size: var(--heading-level-6-font-size),
@@ -2689,13 +2745,25 @@
 					),
 				),
 				xl-manual-promo-overline-hover: (
-					color: var(--text-color-subtle),
+					components: (
+						overline-hover: (
+							color: var(--text-color-subtle),
+						),
+					),
 				),
 				xl-manual-promo-headline-hover: (
-					color: var(--text-color-subtle),
+					components: (
+						heading: (
+							color: var(--text-color-subtle),
+						),
+					),
 				),
 				xl-manual-promo-img-with-link: (
-					opacity: 0.8,
+					components: (
+						image: (
+							opacity: 0.8,
+						),
+					),
 				),
 				xl-promo: (
 					components: (
@@ -2723,13 +2791,25 @@
 					),
 				),
 				xl-promo-overline-hover: (
-					color: var(--text-color-subtle),
+					components: (
+						overline-hover: (
+							color: var(--text-color-subtle),
+						),
+					),
 				),
 				xl-promo-headline-hover: (
-					color: var(--text-color-subtle),
+					components: (
+						heading: (
+							color: var(--text-color-subtle),
+						),
+					),
 				),
 				xl-promo-img-with-link: (
-					opacity: 0.8,
+					components: (
+						image: (
+							opacity: 0.8,
+						),
+					),
 				),
 				xl-promo-icon-label: (
 					align-items: center,
diff --git a/blocks/extra-large-manual-promo-block/_index.scss b/blocks/extra-large-manual-promo-block/_index.scss
index 2ba56941ac..f6d3354c8a 100644
--- a/blocks/extra-large-manual-promo-block/_index.scss
+++ b/blocks/extra-large-manual-promo-block/_index.scss
@@ -4,16 +4,12 @@
 	@include scss.block-properties("xl-manual-promo");
 	@include scss.block-components("xl-manual-promo");
 	&__overline {
-		&:hover {
-			@include scss.block-properties("xl-manual-promo-overline-hover");
-			@include scss.block-components("xl-manual-promo-overline-hover");
-		}
+		@include scss.block-properties("xl-manual-promo-overline-hover");
+		@include scss.block-components("xl-manual-promo-overline-hover");
 	}
 	&__headline {
-		&:hover {
-			@include scss.block-properties("xl-manual-promo-headline-hover");
-			@include scss.block-components("xl-manual-promo-headline-hover");
-		}
+		@include scss.block-properties("xl-manual-promo-headline-hover");
+		@include scss.block-components("xl-manual-promo-headline-hover");
 	}
 	&__imgWithLink {
 		@include scss.block-properties("xl-manual-promo-img-with-link");
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
index be2c8fe0f1..3c842cd66a 100644
--- 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
@@ -131,14 +131,12 @@ const ExtraLargeManualPromo = ({ customFields }) => {
 									component={Link}
 									condition={linkURL}
 									href={formatURL(linkURL)}
+									className={`${linkURL ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
 									openInNewTab={newTab}
 									onClick={registerSuccessEvent}
 									assistiveHidden={showHeadline && showDescription}
 								>
-									<Image
-										className={`${linkURL ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
-										{...imageParams}
-									/>
+									<Image {...imageParams} />
 								</Conditional>
 							</MediaItem>
 						) : null}
diff --git a/blocks/extra-large-manual-promo-block/themes/news.json b/blocks/extra-large-manual-promo-block/themes/news.json
index f275f28ea7..b1161a41e8 100644
--- a/blocks/extra-large-manual-promo-block/themes/news.json
+++ b/blocks/extra-large-manual-promo-block/themes/news.json
@@ -42,7 +42,11 @@
 	"xl-manual-promo-overline-hover": {
 		"styles": {
 			"default": {
-				"color": "var(--text-color-subtle)"
+				"components": {
+					"overline-hover": {
+						"color": "var(--text-color-subtle)"
+					}
+				}
 			},
 			"desktop": {}
 		}
@@ -50,7 +54,11 @@
 	"xl-manual-promo-headline-hover": {
 		"styles": {
 			"default": {
-				"color": "var(--text-color-subtle)"
+				"components": {
+					"heading": {
+						"color": "var(--text-color-subtle)"
+					}
+				}
 			},
 			"desktop": {}
 		}
@@ -58,7 +66,9 @@
 	"xl-manual-promo-img-with-link": {
 		"styles": {
 			"default": {
-				"opacity": 0.8
+				"image": {
+					"opacity": 0.8
+				}
 			},
 			"desktop": {}
 		}
diff --git a/blocks/extra-large-promo-block/_index.scss b/blocks/extra-large-promo-block/_index.scss
index 9e2c495f41..3e1edefe0a 100644
--- a/blocks/extra-large-promo-block/_index.scss
+++ b/blocks/extra-large-promo-block/_index.scss
@@ -6,16 +6,12 @@
 		@include scss.block-components("xl-promo-img-with-link");
 	}
 	&__overline {
-		&:hover {
-			@include scss.block-properties("xl-promo-overline-hover");
-			@include scss.block-components("xl-promo-overline-hover");
-		}
+		@include scss.block-properties("xl-promo-overline-hover");
+		@include scss.block-components("xl-promo-overline-hover");
 	}
 	&__headline {
-		&:hover {
-			@include scss.block-properties("xl-promo-headline-hover");
-			@include scss.block-components("xl-promo-headline-hover");
-		}
+		@include scss.block-properties("xl-promo-headline-hover");
+		@include scss.block-components("xl-promo-headline-hover");
 	}
 	&__icon_label {
 		@include scss.block-components("xl-promo-icon-label");
diff --git a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
index 5dd1b952a7..ead393c50d 100644
--- a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
+++ b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
@@ -98,15 +98,13 @@ export const ExtraLargePromoPresentation = ({
 								) : (
 									<>
 										<Conditional
+											className={`${contentUrl ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
 											component={Link}
 											condition={contentUrl}
 											href={contentUrl}
 											assistiveHidden
 										>
-											<Image
-												className={`${contentUrl ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
-												{...imageParams}
-											/>
+											<Image {...imageParams} />
 											{labelIconName ? (
 												<div className={`${BLOCK_CLASS_NAME}__icon_label`}>
 													<Icon name={labelIconName} />
diff --git a/blocks/extra-large-promo-block/themes/news.json b/blocks/extra-large-promo-block/themes/news.json
index 445f499f71..8e47519936 100644
--- a/blocks/extra-large-promo-block/themes/news.json
+++ b/blocks/extra-large-promo-block/themes/news.json
@@ -83,7 +83,11 @@
 	"xl-promo-overline-hover": {
 		"styles": {
 			"default": {
-				"color": "var(--text-color-subtle)"
+				"components": {
+					"overline-hover": {
+						"color": "var(--text-color-subtle)"
+					}
+				}
 			},
 			"desktop": {}
 		}
@@ -92,7 +96,11 @@
 	"xl-promo-headline-hover": {
 		"styles": {
 			"default": {
-				"color": "var(--text-color-subtle)"
+				"components": {
+					"heading": {
+						"color": "var(--text-color-subtle)"
+					}
+				}
 			},
 			"desktop": {}
 		}
@@ -100,7 +108,9 @@
 	"xl-promo-img-with-link": {
 		"styles": {
 			"default": {
-				"opacity": 0.8
+				"image": {
+					"opacity": 0.8
+				}
 			},
 			"desktop": {}
 		}
diff --git a/blocks/large-manual-promo-block/_index.scss b/blocks/large-manual-promo-block/_index.scss
index 7a0896d5b5..b3b954e981 100644
--- a/blocks/large-manual-promo-block/_index.scss
+++ b/blocks/large-manual-promo-block/_index.scss
@@ -6,16 +6,12 @@
 		@include scss.block-components("large-manual-promo-img-with-link");
 	}
 	&__overline {
-		&:hover {
-			@include scss.block-properties("large-manual-promo-overline-hover");
-			@include scss.block-components("large-manual-promo-overline-hover");
-		}
+		@include scss.block-properties("large-manual-promo-overline-hover");
+		@include scss.block-components("large-manual-promo-overline-hover");
 	}
 	&__headline {
-		&:hover {
-			@include scss.block-properties("large-manual-promo-headline-hover");
-			@include scss.block-components("large-manual-promo-headline-hover");
-		}
+		@include scss.block-properties("large-manual-promo-headline-hover");
+		@include scss.block-components("large-manual-promo-headline-hover");
 	}
 	&__text {
 		@include scss.block-components("large-manual-promo-text");
diff --git a/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx b/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
index 6797babd7b..c8048c7067 100644
--- a/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
+++ b/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
@@ -117,6 +117,7 @@ const LargeManualPromo = ({ customFields }) => {
 							suppressContentEditableWarning
 						>
 							<Conditional
+								className={`${linkURL ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
 								component={Link}
 								condition={linkURL}
 								href={formatURL(linkURL)}
@@ -124,10 +125,7 @@ const LargeManualPromo = ({ customFields }) => {
 								onClick={registerSuccessEvent}
 								assistiveHidden={showHeadline && showDescription}
 							>
-								<Image
-									className={`${linkURL ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
-									{...imageParams}
-								/>
+								<Image {...imageParams} />
 							</Conditional>
 						</MediaItem>
 					) : null}
diff --git a/blocks/large-manual-promo-block/themes/news.json b/blocks/large-manual-promo-block/themes/news.json
index 54ae6ce029..e9d2a82bc3 100644
--- a/blocks/large-manual-promo-block/themes/news.json
+++ b/blocks/large-manual-promo-block/themes/news.json
@@ -51,7 +51,11 @@
 	"large-manual-promo-overline-hover": {
 		"styles": {
 			"default": {
-				"color": "var(--text-color-subtle)"
+				"components": {
+					"overline-hover": {
+						"color": "var(--text-color-subtle)"
+					}
+				}
 			},
 			"desktop": {}
 		}
@@ -59,7 +63,11 @@
 	"large-manual-promo-headline-hover": {
 		"styles": {
 			"default": {
-				"color": "var(--text-color-subtle)"
+				"components": {
+					"heading": {
+						"color": "var(--text-color-subtle)"
+					}
+				}
 			},
 			"desktop": {}
 		}
@@ -67,7 +75,9 @@
 	"large-manual-promo-img-with-link": {
 		"styles": {
 			"default": {
-				"opacity": 0.8
+				"image": {
+					"opacity": 0.8
+				}
 			},
 			"desktop": {}
 		}
diff --git a/blocks/large-promo-block/_index.scss b/blocks/large-promo-block/_index.scss
index 08c019a7cb..96fe1fb8b0 100644
--- a/blocks/large-promo-block/_index.scss
+++ b/blocks/large-promo-block/_index.scss
@@ -6,16 +6,12 @@
 		@include scss.block-components("large-promo-img-with-link");
 	}
 	&__overline {
-		&:hover {
-			@include scss.block-properties("large-promo-overline-hover");
-			@include scss.block-components("large-promo-overline-hover");
-		}
+		@include scss.block-properties("large-promo-overline-hover");
+		@include scss.block-components("large-promo-overline-hover");
 	}
 	&__headline {
-		&:hover {
-			@include scss.block-properties("large-promo-headline-hover");
-			@include scss.block-components("large-promo-headline-hover");
-		}
+		@include scss.block-properties("large-promo-headline-hover");
+		@include scss.block-components("large-promo-headline-hover");
 	}
 	&__text {
 		@include scss.block-components("large-promo-text");
diff --git a/blocks/large-promo-block/features/large-promo/default.jsx b/blocks/large-promo-block/features/large-promo/default.jsx
index 23c4ac9062..efe895aafb 100644
--- a/blocks/large-promo-block/features/large-promo/default.jsx
+++ b/blocks/large-promo-block/features/large-promo/default.jsx
@@ -76,6 +76,7 @@ export const LargePromoPresentation = ({
 					>
 						<Conditional
 							component={Link}
+							className={`${contentUrl ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
 							condition={contentUrl}
 							href={formatURL(contentUrl)}
 							onClick={registerSuccessEvent}
@@ -89,10 +90,7 @@ export const LargePromoPresentation = ({
 								/>
 							) : (
 								<>
-									<Image
-										className={`${contentUrl ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
-										{...promoImageParams}
-									/>
+									<Image {...promoImageParams} />
 									{labelIconName ? (
 										<div className={`${BLOCK_CLASS_NAME}__icon_label`}>
 											<Icon name={labelIconName} />
diff --git a/blocks/large-promo-block/themes/news.json b/blocks/large-promo-block/themes/news.json
index b72318260c..96c64560b5 100644
--- a/blocks/large-promo-block/themes/news.json
+++ b/blocks/large-promo-block/themes/news.json
@@ -91,7 +91,11 @@
 	"large-promo-overline-hover": {
 		"styles": {
 			"default": {
-				"color": "var(--text-color-subtle)"
+				"components": {
+					"overline-hover": {
+						"color": "var(--text-color-subtle)"
+					}
+				}
 			},
 			"desktop": {}
 		}
@@ -99,7 +103,11 @@
 	"large-promo-headline-hover": {
 		"styles": {
 			"default": {
-				"color": "var(--text-color-subtle)"
+				"components": {
+					"heading": {
+						"color": "var(--text-color-subtle)"
+					}
+				}
 			},
 			"desktop": {}
 		}
@@ -107,7 +115,9 @@
 	"large-promo-img-with-link": {
 		"styles": {
 			"default": {
-				"opacity": 0.8
+				"image": {
+					"opacity": 0.8
+				}
 			},
 			"desktop": {}
 		}
diff --git a/blocks/medium-manual-promo-block/_index.scss b/blocks/medium-manual-promo-block/_index.scss
index d55881f77c..887f9a8b62 100644
--- a/blocks/medium-manual-promo-block/_index.scss
+++ b/blocks/medium-manual-promo-block/_index.scss
@@ -6,10 +6,8 @@
 		@include scss.block-components("medium-manual-promo-img-with-link");
 	}
 	&__headline {
-		&:hover {
-			@include scss.block-properties("medium-manual-promo-headline-hover");
-			@include scss.block-components("medium-manual-promo-headline-hover");
-		}
+		@include scss.block-properties("medium-manual-promo-headline-hover");
+		@include scss.block-components("medium-manual-promo-headline-hover");
 	}
 	&--show-image {
 		@include scss.block-properties("medium-manual-promo-show-image");
diff --git a/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx b/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
index 39f9fb885e..66cbde1415 100644
--- a/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
+++ b/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
@@ -99,6 +99,7 @@ const MediumManualPromo = ({ customFields }) => {
 							suppressContentEditableWarning
 						>
 							<Conditional
+								className={`${linkURL ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
 								component={Link}
 								condition={linkURL}
 								href={formatURL(linkURL)}
@@ -106,10 +107,7 @@ const MediumManualPromo = ({ customFields }) => {
 								onClick={registerSuccessEvent}
 								assistiveHidden={showHeadline && showDescription}
 							>
-								<Image
-									className={`${linkURL ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
-									{...imageParams}
-								/>
+								<Image {...imageParams} />
 							</Conditional>
 						</MediaItem>
 					) : null}
diff --git a/blocks/medium-manual-promo-block/themes/news.json b/blocks/medium-manual-promo-block/themes/news.json
index 09e7b5c850..cdef673e74 100644
--- a/blocks/medium-manual-promo-block/themes/news.json
+++ b/blocks/medium-manual-promo-block/themes/news.json
@@ -68,7 +68,11 @@
 	"medium-manual-promo-headline-hover": {
 		"styles": {
 			"default": {
-				"color": "var(--text-color-subtle)"
+				"components": {
+					"heading": {
+						"color": "var(--text-color-subtle)"
+					}
+				}
 			},
 			"desktop": {}
 		}
@@ -76,7 +80,9 @@
 	"medium-manual-promo-img-with-link": {
 		"styles": {
 			"default": {
-				"opacity": 0.8
+				"image": {
+					"opacity": 0.8
+				}
 			},
 			"desktop": {}
 		}
diff --git a/blocks/medium-promo-block/_index.scss b/blocks/medium-promo-block/_index.scss
index c58e299896..c1dc518172 100644
--- a/blocks/medium-promo-block/_index.scss
+++ b/blocks/medium-promo-block/_index.scss
@@ -6,10 +6,8 @@
 		@include scss.block-components("medium-promo-img-with-link");
 	}
 	&__headline {
-		&:hover {
-			@include scss.block-properties("medium-promo-headline-hover");
-			@include scss.block-components("medium-promo-headline-hover");
-		}
+		@include scss.block-properties("medium-promo-headline-hover");
+		@include scss.block-components("medium-promo-headline-hover");
 	}
 	&--show-image {
 		@include scss.block-properties("medium-promo-show-image");
diff --git a/blocks/medium-promo-block/features/medium-promo/default.jsx b/blocks/medium-promo-block/features/medium-promo/default.jsx
index b5292d9a8e..7affbf3003 100644
--- a/blocks/medium-promo-block/features/medium-promo/default.jsx
+++ b/blocks/medium-promo-block/features/medium-promo/default.jsx
@@ -209,17 +209,14 @@ const MediumPromo = ({ customFields }) => {
 							suppressContentEditableWarning
 						>
 							<Conditional
+								className={`${contentUrl ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
 								component={Link}
 								condition={contentUrl}
 								href={formatURL(contentUrl)}
 								onClick={registerSuccessEvent}
 								assistiveHidden
 							>
-								<Image
-									className={`${contentUrl ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
-									alt={content?.headlines?.basic}
-									{...imageParams}
-								/>
+								<Image alt={content?.headlines?.basic} {...imageParams} />
 								{labelIconName ? (
 									<div className={`${BLOCK_CLASS_NAME}__icon_label`}>
 										<Icon name={labelIconName} />
diff --git a/blocks/medium-promo-block/themes/news.json b/blocks/medium-promo-block/themes/news.json
index b13ecdee39..6942ac27c3 100644
--- a/blocks/medium-promo-block/themes/news.json
+++ b/blocks/medium-promo-block/themes/news.json
@@ -114,7 +114,11 @@
 	"medium-promo-headline-hover": {
 		"styles": {
 			"default": {
-				"color": "var(--text-color-subtle)"
+				"components": {
+					"heading": {
+						"color": "var(--text-color-subtle)"
+					}
+				}
 			},
 			"desktop": {}
 		}
@@ -122,7 +126,9 @@
 	"medium-promo-img-with-link": {
 		"styles": {
 			"default": {
-				"opacity": 0.8
+				"image": {
+					"opacity": 0.8
+				}
 			},
 			"desktop": {}
 		}
diff --git a/blocks/small-manual-promo-block/_index.scss b/blocks/small-manual-promo-block/_index.scss
index 044650502b..9a58ea9977 100644
--- a/blocks/small-manual-promo-block/_index.scss
+++ b/blocks/small-manual-promo-block/_index.scss
@@ -6,10 +6,8 @@
 		@include scss.block-components("small-manual-promo-img-with-link");
 	}
 	&__headline {
-		&:hover {
-			@include scss.block-properties("small-manual-promo-headline-hover");
-			@include scss.block-components("small-manual-promo-headline-hover");
-		}
+		@include scss.block-properties("small-manual-promo-headline-hover");
+		@include scss.block-components("small-manual-promo-headline-hover");
 	}
 	&--above {
 		@include scss.block-properties("small-manual-promo-above");
diff --git a/blocks/small-manual-promo-block/themes/news.json b/blocks/small-manual-promo-block/themes/news.json
index d43a89336c..3d57522bea 100644
--- a/blocks/small-manual-promo-block/themes/news.json
+++ b/blocks/small-manual-promo-block/themes/news.json
@@ -54,7 +54,11 @@
 	"small-manual-promo-headline-hover": {
 		"styles": {
 			"default": {
-				"color": "var(--text-color-subtle)"
+				"components": {
+					"heading": {
+						"color": "var(--text-color-subtle)"
+					}
+				}
 			},
 			"desktop": {}
 		}
@@ -62,7 +66,9 @@
 	"small-manual-promo-img-with-link": {
 		"styles": {
 			"default": {
-				"opacity": 0.8
+				"image": {
+					"opacity": 0.8
+				}
 			},
 			"desktop": {}
 		}
diff --git a/blocks/small-promo-block/_index.scss b/blocks/small-promo-block/_index.scss
index d25acd6858..15e486747c 100644
--- a/blocks/small-promo-block/_index.scss
+++ b/blocks/small-promo-block/_index.scss
@@ -6,10 +6,8 @@
 		@include scss.block-components("small-promo-img-with-link");
 	}
 	&__headline {
-		&:hover {
-			@include scss.block-properties("small-promo-headline-hover");
-			@include scss.block-components("small-promo-headline-hover");
-		}
+		@include scss.block-properties("small-promo-headline-hover");
+		@include scss.block-components("small-promo-headline-hover");
 	}
 	&--above {
 		@include scss.block-properties("small-promo-above");
diff --git a/blocks/small-promo-block/themes/news.json b/blocks/small-promo-block/themes/news.json
index 1cfcb3464c..528c307aa1 100644
--- a/blocks/small-promo-block/themes/news.json
+++ b/blocks/small-promo-block/themes/news.json
@@ -38,7 +38,11 @@
 	"small-promo-headline-hover": {
 		"styles": {
 			"default": {
-				"color": "var(--text-color-subtle)"
+				"components": {
+					"heading": {
+						"color": "var(--text-color-subtle)"
+					}
+				}
 			},
 			"desktop": {}
 		}
@@ -46,7 +50,9 @@
 	"small-promo-img-with-link": {
 		"styles": {
 			"default": {
-				"opacity": 0.8
+				"image": {
+					"opacity": 0.8
+				}
 			},
 			"desktop": {}
 		}

From 8f770d04c2b5e06da7a7e2bbe19fb6f24b8549e5 Mon Sep 17 00:00:00 2001
From: Malavika Koppula <mkreddy1110@gmail.com>
Date: Wed, 19 Jul 2023 15:41:49 -0400
Subject: [PATCH 05/10] chnaged imgWithLink to img

---
 .storybook/themes/news.scss                      | 16 ++++++++--------
 .../extra-large-manual-promo-block/_index.scss   |  6 +++---
 .../extra-large-manual-promo/default.jsx         |  2 +-
 .../themes/news.json                             |  4 ++--
 blocks/extra-large-promo-block/_index.scss       |  6 +++---
 .../features/extra-large-promo/default.jsx       |  2 +-
 blocks/extra-large-promo-block/themes/news.json  |  2 +-
 blocks/large-manual-promo-block/_index.scss      |  6 +++---
 .../features/large-manual-promo/default.jsx      |  2 +-
 blocks/large-manual-promo-block/themes/news.json |  2 +-
 blocks/large-promo-block/_index.scss             |  6 +++---
 .../features/large-promo/default.jsx             |  2 +-
 blocks/large-promo-block/themes/news.json        |  2 +-
 blocks/medium-manual-promo-block/_index.scss     |  6 +++---
 .../features/medium-manual-promo/default.jsx     |  2 +-
 .../medium-manual-promo-block/themes/news.json   |  2 +-
 blocks/medium-promo-block/_index.scss            |  6 +++---
 .../features/medium-promo/default.jsx            |  2 +-
 blocks/medium-promo-block/themes/news.json       |  2 +-
 blocks/small-manual-promo-block/_index.scss      |  6 +++---
 .../features/small-manual-promo/default.jsx      |  5 +----
 blocks/small-manual-promo-block/themes/news.json |  2 +-
 blocks/small-promo-block/_index.scss             |  6 +++---
 .../features/small-promo/default.jsx             |  5 +----
 blocks/small-promo-block/themes/news.json        |  2 +-
 25 files changed, 49 insertions(+), 55 deletions(-)

diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss
index f041b21892..28085b98aa 100644
--- a/.storybook/themes/news.scss
+++ b/.storybook/themes/news.scss
@@ -1590,7 +1590,7 @@
 						),
 					),
 				),
-				large-manual-promo-img-with-link: (
+				large-manual-promo-img: (
 					components: (
 						image: (
 							opacity: 0.8,
@@ -1666,7 +1666,7 @@
 						),
 					),
 				),
-				large-promo-img-with-link: (
+				large-promo-img: (
 					components: (
 						image: (
 							opacity: 0.8,
@@ -1908,7 +1908,7 @@
 						),
 					),
 				),
-				medium-promo-img-with-link: (
+				medium-promo-img: (
 					components: (
 						image: (
 							opacity: 0.8,
@@ -1958,7 +1958,7 @@
 						),
 					),
 				),
-				medium-manual-promo-img-with-link: (
+				medium-manual-promo-img: (
 					components: (
 						image: (
 							opacity: 0.8,
@@ -2408,7 +2408,7 @@
 						),
 					),
 				),
-				small-manual-promo-img-with-link: (
+				small-manual-promo-img: (
 					components: (
 						image: (
 							opacity: 0.8,
@@ -2443,7 +2443,7 @@
 						),
 					),
 				),
-				small-promo-img-with-link: (
+				small-promo-img: (
 					components: (
 						image: (
 							opacity: 0.8,
@@ -2762,7 +2762,7 @@
 						),
 					),
 				),
-				xl-manual-promo-img-with-link: (
+				xl-manual-promo-img: (
 					components: (
 						image: (
 							opacity: 0.8,
@@ -2808,7 +2808,7 @@
 						),
 					),
 				),
-				xl-promo-img-with-link: (
+				xl-promo-img: (
 					components: (
 						image: (
 							opacity: 0.8,
diff --git a/blocks/extra-large-manual-promo-block/_index.scss b/blocks/extra-large-manual-promo-block/_index.scss
index f6d3354c8a..48c303e14a 100644
--- a/blocks/extra-large-manual-promo-block/_index.scss
+++ b/blocks/extra-large-manual-promo-block/_index.scss
@@ -11,8 +11,8 @@
 		@include scss.block-properties("xl-manual-promo-headline-hover");
 		@include scss.block-components("xl-manual-promo-headline-hover");
 	}
-	&__imgWithLink {
-		@include scss.block-properties("xl-manual-promo-img-with-link");
-		@include scss.block-components("xl-manual-promo-img-with-link");
+	&__img {
+		@include scss.block-properties("xl-manual-promo-img");
+		@include scss.block-components("xl-manual-promo-img");
 	}
 }
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
index 3c842cd66a..cbd9e45acd 100644
--- 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
@@ -131,7 +131,7 @@ const ExtraLargeManualPromo = ({ customFields }) => {
 									component={Link}
 									condition={linkURL}
 									href={formatURL(linkURL)}
-									className={`${linkURL ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
+									className={`${BLOCK_CLASS_NAME}__img`}
 									openInNewTab={newTab}
 									onClick={registerSuccessEvent}
 									assistiveHidden={showHeadline && showDescription}
diff --git a/blocks/extra-large-manual-promo-block/themes/news.json b/blocks/extra-large-manual-promo-block/themes/news.json
index b1161a41e8..1a1e8e9494 100644
--- a/blocks/extra-large-manual-promo-block/themes/news.json
+++ b/blocks/extra-large-manual-promo-block/themes/news.json
@@ -63,10 +63,10 @@
 			"desktop": {}
 		}
 	},
-	"xl-manual-promo-img-with-link": {
+	"xl-manual-promo-img": {
 		"styles": {
 			"default": {
-				"image": {
+				"link-hover": {
 					"opacity": 0.8
 				}
 			},
diff --git a/blocks/extra-large-promo-block/_index.scss b/blocks/extra-large-promo-block/_index.scss
index 3e1edefe0a..efd493fd8f 100644
--- a/blocks/extra-large-promo-block/_index.scss
+++ b/blocks/extra-large-promo-block/_index.scss
@@ -1,9 +1,9 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-xl-promo {
-	&__imgWithLink {
-		@include scss.block-properties("xl-promo-img-with-link");
-		@include scss.block-components("xl-promo-img-with-link");
+	&__img {
+		@include scss.block-properties("xl-promo-img");
+		@include scss.block-components("xl-promo-img");
 	}
 	&__overline {
 		@include scss.block-properties("xl-promo-overline-hover");
diff --git a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
index ead393c50d..bec573ad26 100644
--- a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
+++ b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
@@ -98,7 +98,7 @@ export const ExtraLargePromoPresentation = ({
 								) : (
 									<>
 										<Conditional
-											className={`${contentUrl ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
+											className={`${BLOCK_CLASS_NAME}__img`}
 											component={Link}
 											condition={contentUrl}
 											href={contentUrl}
diff --git a/blocks/extra-large-promo-block/themes/news.json b/blocks/extra-large-promo-block/themes/news.json
index 8e47519936..4d2884a291 100644
--- a/blocks/extra-large-promo-block/themes/news.json
+++ b/blocks/extra-large-promo-block/themes/news.json
@@ -105,7 +105,7 @@
 			"desktop": {}
 		}
 	},
-	"xl-promo-img-with-link": {
+	"xl-promo-img": {
 		"styles": {
 			"default": {
 				"image": {
diff --git a/blocks/large-manual-promo-block/_index.scss b/blocks/large-manual-promo-block/_index.scss
index b3b954e981..4797a23106 100644
--- a/blocks/large-manual-promo-block/_index.scss
+++ b/blocks/large-manual-promo-block/_index.scss
@@ -1,9 +1,9 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-large-manual-promo {
-	&__imgWithLink {
-		@include scss.block-properties("large-manual-promo-img-with-link");
-		@include scss.block-components("large-manual-promo-img-with-link");
+	&__img {
+		@include scss.block-properties("large-manual-promo-img");
+		@include scss.block-components("large-manual-promo-img");
 	}
 	&__overline {
 		@include scss.block-properties("large-manual-promo-overline-hover");
diff --git a/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx b/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
index c8048c7067..b9a5d04f02 100644
--- a/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
+++ b/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
@@ -117,7 +117,7 @@ const LargeManualPromo = ({ customFields }) => {
 							suppressContentEditableWarning
 						>
 							<Conditional
-								className={`${linkURL ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
+								className={`${BLOCK_CLASS_NAME}__img`}
 								component={Link}
 								condition={linkURL}
 								href={formatURL(linkURL)}
diff --git a/blocks/large-manual-promo-block/themes/news.json b/blocks/large-manual-promo-block/themes/news.json
index e9d2a82bc3..ea428c2027 100644
--- a/blocks/large-manual-promo-block/themes/news.json
+++ b/blocks/large-manual-promo-block/themes/news.json
@@ -72,7 +72,7 @@
 			"desktop": {}
 		}
 	},
-	"large-manual-promo-img-with-link": {
+	"large-manual-promo-img": {
 		"styles": {
 			"default": {
 				"image": {
diff --git a/blocks/large-promo-block/_index.scss b/blocks/large-promo-block/_index.scss
index 96fe1fb8b0..db05707869 100644
--- a/blocks/large-promo-block/_index.scss
+++ b/blocks/large-promo-block/_index.scss
@@ -1,9 +1,9 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-large-promo {
-	&__imgWithLink {
-		@include scss.block-properties("large-promo-img-with-link");
-		@include scss.block-components("large-promo-img-with-link");
+	&__img {
+		@include scss.block-properties("large-promo-img");
+		@include scss.block-components("large-promo-img");
 	}
 	&__overline {
 		@include scss.block-properties("large-promo-overline-hover");
diff --git a/blocks/large-promo-block/features/large-promo/default.jsx b/blocks/large-promo-block/features/large-promo/default.jsx
index efe895aafb..17cbc545ea 100644
--- a/blocks/large-promo-block/features/large-promo/default.jsx
+++ b/blocks/large-promo-block/features/large-promo/default.jsx
@@ -76,7 +76,7 @@ export const LargePromoPresentation = ({
 					>
 						<Conditional
 							component={Link}
-							className={`${contentUrl ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
+							className={`${BLOCK_CLASS_NAME}__img}`}
 							condition={contentUrl}
 							href={formatURL(contentUrl)}
 							onClick={registerSuccessEvent}
diff --git a/blocks/large-promo-block/themes/news.json b/blocks/large-promo-block/themes/news.json
index 96c64560b5..25a23fe8fb 100644
--- a/blocks/large-promo-block/themes/news.json
+++ b/blocks/large-promo-block/themes/news.json
@@ -112,7 +112,7 @@
 			"desktop": {}
 		}
 	},
-	"large-promo-img-with-link": {
+	"large-promo-img": {
 		"styles": {
 			"default": {
 				"image": {
diff --git a/blocks/medium-manual-promo-block/_index.scss b/blocks/medium-manual-promo-block/_index.scss
index 887f9a8b62..deb70df2fe 100644
--- a/blocks/medium-manual-promo-block/_index.scss
+++ b/blocks/medium-manual-promo-block/_index.scss
@@ -1,9 +1,9 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-medium-manual-promo {
-	&__imgWithLink {
-		@include scss.block-properties("medium-manual-promo-img-with-link");
-		@include scss.block-components("medium-manual-promo-img-with-link");
+	&__img {
+		@include scss.block-properties("medium-manual-promo-img");
+		@include scss.block-components("medium-manual-promo-img");
 	}
 	&__headline {
 		@include scss.block-properties("medium-manual-promo-headline-hover");
diff --git a/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx b/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
index 66cbde1415..ccd64406f3 100644
--- a/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
+++ b/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
@@ -99,7 +99,7 @@ const MediumManualPromo = ({ customFields }) => {
 							suppressContentEditableWarning
 						>
 							<Conditional
-								className={`${linkURL ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
+								className={`${BLOCK_CLASS_NAME}__img`}
 								component={Link}
 								condition={linkURL}
 								href={formatURL(linkURL)}
diff --git a/blocks/medium-manual-promo-block/themes/news.json b/blocks/medium-manual-promo-block/themes/news.json
index cdef673e74..406dba172b 100644
--- a/blocks/medium-manual-promo-block/themes/news.json
+++ b/blocks/medium-manual-promo-block/themes/news.json
@@ -77,7 +77,7 @@
 			"desktop": {}
 		}
 	},
-	"medium-manual-promo-img-with-link": {
+	"medium-manual-promo-img": {
 		"styles": {
 			"default": {
 				"image": {
diff --git a/blocks/medium-promo-block/_index.scss b/blocks/medium-promo-block/_index.scss
index c1dc518172..3c191fd464 100644
--- a/blocks/medium-promo-block/_index.scss
+++ b/blocks/medium-promo-block/_index.scss
@@ -1,9 +1,9 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-medium-promo {
-	&__imgWithLink {
-		@include scss.block-properties("medium-promo-img-with-link");
-		@include scss.block-components("medium-promo-img-with-link");
+	&__img {
+		@include scss.block-properties("medium-promo-img");
+		@include scss.block-components("medium-promo-img");
 	}
 	&__headline {
 		@include scss.block-properties("medium-promo-headline-hover");
diff --git a/blocks/medium-promo-block/features/medium-promo/default.jsx b/blocks/medium-promo-block/features/medium-promo/default.jsx
index 7affbf3003..5f44b17dd7 100644
--- a/blocks/medium-promo-block/features/medium-promo/default.jsx
+++ b/blocks/medium-promo-block/features/medium-promo/default.jsx
@@ -209,7 +209,7 @@ const MediumPromo = ({ customFields }) => {
 							suppressContentEditableWarning
 						>
 							<Conditional
-								className={`${contentUrl ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
+								className={`${BLOCK_CLASS_NAME}__img`}
 								component={Link}
 								condition={contentUrl}
 								href={formatURL(contentUrl)}
diff --git a/blocks/medium-promo-block/themes/news.json b/blocks/medium-promo-block/themes/news.json
index 6942ac27c3..9f65180f46 100644
--- a/blocks/medium-promo-block/themes/news.json
+++ b/blocks/medium-promo-block/themes/news.json
@@ -123,7 +123,7 @@
 			"desktop": {}
 		}
 	},
-	"medium-promo-img-with-link": {
+	"medium-promo-img": {
 		"styles": {
 			"default": {
 				"image": {
diff --git a/blocks/small-manual-promo-block/_index.scss b/blocks/small-manual-promo-block/_index.scss
index 9a58ea9977..0db157d2df 100644
--- a/blocks/small-manual-promo-block/_index.scss
+++ b/blocks/small-manual-promo-block/_index.scss
@@ -1,9 +1,9 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-small-manual-promo {
-	&__imgWithLink {
-		@include scss.block-properties("small-manual-promo-img-with-link");
-		@include scss.block-components("small-manual-promo-img-with-link");
+	&__img {
+		@include scss.block-properties("small-manual-promo-img");
+		@include scss.block-components("small-manual-promo-img");
 	}
 	&__headline {
 		@include scss.block-properties("small-manual-promo-headline-hover");
diff --git a/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx b/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx
index 7b126e40bb..3a47bafb2a 100644
--- a/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx
+++ b/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx
@@ -91,10 +91,7 @@ const SmallManualPromo = ({ customFields }) => {
 				})}
 				suppressContentEditableWarning
 			>
-				<Image
-					className={`${linkURL ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
-					{...imageParams}
-				/>
+				<Image className={`${BLOCK_CLASS_NAME}__img`} {...imageParams} />
 			</MediaItem>
 		) : null;
 		return showImage && linkURL ? (
diff --git a/blocks/small-manual-promo-block/themes/news.json b/blocks/small-manual-promo-block/themes/news.json
index 3d57522bea..a4cd6b70c2 100644
--- a/blocks/small-manual-promo-block/themes/news.json
+++ b/blocks/small-manual-promo-block/themes/news.json
@@ -63,7 +63,7 @@
 			"desktop": {}
 		}
 	},
-	"small-manual-promo-img-with-link": {
+	"small-manual-promo-img": {
 		"styles": {
 			"default": {
 				"image": {
diff --git a/blocks/small-promo-block/_index.scss b/blocks/small-promo-block/_index.scss
index 15e486747c..5db17ef588 100644
--- a/blocks/small-promo-block/_index.scss
+++ b/blocks/small-promo-block/_index.scss
@@ -1,9 +1,9 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-small-promo {
-	&__imgWithLink {
-		@include scss.block-properties("small-promo-img-with-link");
-		@include scss.block-components("small-promo-img-with-link");
+	&__img {
+		@include scss.block-properties("small-promo-img");
+		@include scss.block-components("small-promo-img");
 	}
 	&__headline {
 		@include scss.block-properties("small-promo-headline-hover");
diff --git a/blocks/small-promo-block/features/small-promo/default.jsx b/blocks/small-promo-block/features/small-promo/default.jsx
index dcfb8ae913..cbe6ccf5d3 100644
--- a/blocks/small-promo-block/features/small-promo/default.jsx
+++ b/blocks/small-promo-block/features/small-promo/default.jsx
@@ -158,10 +158,7 @@ const SmallPromo = ({ customFields }) => {
 					})}
 					suppressContentEditableWarning
 				>
-					<Image
-						className={`${linkURL ? `${BLOCK_CLASS_NAME}__imgWithLink` : ""}`}
-						{...imageParams}
-					/>
+					<Image className={`${BLOCK_CLASS_NAME}__img`} {...imageParams} />
 				</MediaItem>
 			</Conditional>
 		) : null;
diff --git a/blocks/small-promo-block/themes/news.json b/blocks/small-promo-block/themes/news.json
index 528c307aa1..32de391fd1 100644
--- a/blocks/small-promo-block/themes/news.json
+++ b/blocks/small-promo-block/themes/news.json
@@ -47,7 +47,7 @@
 			"desktop": {}
 		}
 	},
-	"small-promo-img-with-link": {
+	"small-promo-img": {
 		"styles": {
 			"default": {
 				"image": {

From 011f2cb6a2371520babbaa1bc92cb2365fda7f4a Mon Sep 17 00:00:00 2001
From: Malavika Koppula <mkreddy1110@gmail.com>
Date: Fri, 21 Jul 2023 09:48:27 -0400
Subject: [PATCH 06/10] removed hover tokens

---
 .storybook/themes/news.scss                   | 174 ++++--------------
 .../_index.scss                               |  12 --
 .../extra-large-manual-promo/default.jsx      |   9 +-
 .../themes/news.json                          |  41 +----
 blocks/extra-large-promo-block/_index.scss    |  12 --
 .../features/extra-large-promo/default.jsx    |   9 +-
 .../extra-large-promo-block/themes/news.json  |  42 +----
 blocks/large-manual-promo-block/_index.scss   |  12 --
 .../features/large-manual-promo/default.jsx   |  11 +-
 .../large-manual-promo-block/themes/news.json |  45 +----
 blocks/large-promo-block/_index.scss          |  12 --
 .../features/large-promo/default.jsx          |   7 +-
 blocks/large-promo-block/themes/news.json     |  41 +----
 blocks/medium-manual-promo-block/_index.scss  |   8 -
 .../features/medium-manual-promo/default.jsx  |   3 +-
 .../themes/news.json                          |  26 +--
 blocks/medium-promo-block/_index.scss         |   8 -
 .../features/medium-promo/default.jsx         |   3 +-
 blocks/medium-promo-block/themes/news.json    |  26 +--
 blocks/small-manual-promo-block/_index.scss   |   8 -
 .../features/small-manual-promo/default.jsx   |   4 +-
 .../small-manual-promo-block/themes/news.json |  26 +--
 blocks/small-promo-block/_index.scss          |   8 -
 .../features/small-promo/default.jsx          |   4 +-
 blocks/small-promo-block/themes/news.json     |  26 +--
 25 files changed, 102 insertions(+), 475 deletions(-)

diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss
index 28085b98aa..7ed25f110d 100644
--- a/.storybook/themes/news.scss
+++ b/.storybook/themes/news.scss
@@ -1556,6 +1556,12 @@
 				),
 				large-manual-promo: (
 					gap: var(--global-spacing-4),
+					components: (
+						link-hover: (
+							color: var(--text-color-subtle),
+							opacity: 0.8,
+						),
+					),
 				),
 				large-manual-promo-text: (
 					gap: 0,
@@ -1568,6 +1574,9 @@
 							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),
 						),
@@ -1576,33 +1585,16 @@
 						),
 					),
 				),
-				large-manual-promo-overline-hover: (
-					components: (
-						overline-hover: (
-							color: var(--text-color-subtle),
-						),
-					),
-				),
-				large-manual-promo-headline-hover: (
-					components: (
-						heading: (
-							color: var(--text-color-subtle),
-						),
-					),
-				),
-				large-manual-promo-img: (
-					components: (
-						image: (
-							opacity: 0.8,
-						),
-					),
-				),
 				large-promo: (
 					gap: var(--global-spacing-4),
 					components: (
 						link: (
 							position: relative,
 						),
+						link-hover: (
+							color: var(--text-color-subtle),
+							opacity: 0.8,
+						),
 					),
 				),
 				large-promo-icon-label: (
@@ -1640,6 +1632,9 @@
 							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),
@@ -1652,27 +1647,6 @@
 						),
 					),
 				),
-				large-promo-overline-hover: (
-					components: (
-						overline-hover: (
-							color: var(--text-color-subtle),
-						),
-					),
-				),
-				large-promo-headline-hover: (
-					components: (
-						heading: (
-							color: var(--text-color-subtle),
-						),
-					),
-				),
-				large-promo-img: (
-					components: (
-						image: (
-							opacity: 0.8,
-						),
-					),
-				),
 				lead-art: (
 					margin-bottom: var(--global-spacing-5),
 					components: (
@@ -1868,6 +1842,10 @@
 						link: (
 							position: relative,
 						),
+						link-hover: (
+							color: var(--text-color-subtle),
+							opacity: 0.8,
+						),
 					),
 				),
 				medium-promo-show-image: (
@@ -1901,20 +1879,6 @@
 					color: var(--global-white),
 					display: none,
 				),
-				medium-promo-headline-hover: (
-					components: (
-						heading: (
-							color: var(--text-color-subtle),
-						),
-					),
-				),
-				medium-promo-img: (
-					components: (
-						image: (
-							opacity: 0.8,
-						),
-					),
-				),
 				medium-manual-promo: (
 					clear: both,
 					display: table,
@@ -1932,6 +1896,10 @@
 							line-height: var(--heading-level-5-line-height),
 							margin-bottom: var(--global-spacing-4),
 						),
+						link-hover: (
+							color: var(--text-color-subtle),
+							opacity: 0.8,
+						),
 						media-item: (
 							float: right,
 							max-width: 100px,
@@ -1951,20 +1919,6 @@
 						),
 					),
 				),
-				medium-manual-promo-headline-hover: (
-					components: (
-						heading: (
-							color: var(--text-color-subtle),
-						),
-					),
-				),
-				medium-manual-promo-img: (
-					components: (
-						image: (
-							opacity: 0.8,
-						),
-					),
-				),
 				numbered-list: (
 					gap: var(--global-spacing-4),
 					components: (
@@ -2385,6 +2339,10 @@
 							font-weight: var(--body-font-weight),
 							line-height: var(--body-line-height),
 						),
+						link-hover: (
+							color: var(--text-color-subtle),
+							opacity: 0.8,
+						),
 					),
 				),
 				small-manual-promo-above: (
@@ -2401,20 +2359,6 @@
 					gap: var(--global-spacing-6),
 					grid-template-columns: 2fr 1fr,
 				),
-				small-manual-promo-headline-hover: (
-					components: (
-						heading: (
-							color: var(--text-color-subtle),
-						),
-					),
-				),
-				small-manual-promo-img: (
-					components: (
-						image: (
-							opacity: 0.8,
-						),
-					),
-				),
 				small-promo: (
 					display: grid,
 					gap: var(--global-spacing-5),
@@ -2426,6 +2370,10 @@
 							font-weight: var(--body-font-weight),
 							line-height: var(--body-line-height),
 						),
+						link-hover: (
+							color: var(--text-color-subtle),
+							opacity: 0.8,
+						),
 					),
 				),
 				small-promo-left: (
@@ -2436,20 +2384,6 @@
 					gap: var(--global-spacing-6),
 					grid-template-columns: 2fr 1fr,
 				),
-				small-promo-headline-hover: (
-					components: (
-						heading: (
-							color: var(--text-color-subtle),
-						),
-					),
-				),
-				small-promo-img: (
-					components: (
-						image: (
-							opacity: 0.8,
-						),
-					),
-				),
 				subheadline: (
 					font-size: var(--heading-level-6-font-size),
 					font-weight: var(--heading-level-6-font-weight),
@@ -2743,28 +2677,14 @@
 						overline: (
 							color: var(--text-color),
 						),
-						stack: (
-							gap: var(--global-spacing-4),
-						),
-					),
-				),
-				xl-manual-promo-overline-hover: (
-					components: (
 						overline-hover: (
 							color: var(--text-color-subtle),
 						),
-					),
-				),
-				xl-manual-promo-headline-hover: (
-					components: (
-						heading: (
-							color: var(--text-color-subtle),
+						stack: (
+							gap: var(--global-spacing-4),
 						),
-					),
-				),
-				xl-manual-promo-img: (
-					components: (
-						image: (
+						link-hover: (
+							color: var(--text-color-subtle),
 							opacity: 0.8,
 						),
 					),
@@ -2783,6 +2703,9 @@
 						overline: (
 							color: var(--text-color),
 						),
+						overline-hover: (
+							color: var(--text-color-subtle),
+						),
 						separator: (
 							padding: 0 var(--global-spacing-2),
 						),
@@ -2792,25 +2715,8 @@
 						media-item: (
 							position: relative,
 						),
-					),
-				),
-				xl-promo-overline-hover: (
-					components: (
-						overline-hover: (
-							color: var(--text-color-subtle),
-						),
-					),
-				),
-				xl-promo-headline-hover: (
-					components: (
-						heading: (
+						link-hover: (
 							color: var(--text-color-subtle),
-						),
-					),
-				),
-				xl-promo-img: (
-					components: (
-						image: (
 							opacity: 0.8,
 						),
 					),
diff --git a/blocks/extra-large-manual-promo-block/_index.scss b/blocks/extra-large-manual-promo-block/_index.scss
index 48c303e14a..ab9d94c526 100644
--- a/blocks/extra-large-manual-promo-block/_index.scss
+++ b/blocks/extra-large-manual-promo-block/_index.scss
@@ -3,16 +3,4 @@
 .b-xl-manual-promo {
 	@include scss.block-properties("xl-manual-promo");
 	@include scss.block-components("xl-manual-promo");
-	&__overline {
-		@include scss.block-properties("xl-manual-promo-overline-hover");
-		@include scss.block-components("xl-manual-promo-overline-hover");
-	}
-	&__headline {
-		@include scss.block-properties("xl-manual-promo-headline-hover");
-		@include scss.block-components("xl-manual-promo-headline-hover");
-	}
-	&__img {
-		@include scss.block-properties("xl-manual-promo-img");
-		@include scss.block-components("xl-manual-promo-img");
-	}
 }
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
index cbd9e45acd..6f27c4960d 100644
--- 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
@@ -96,16 +96,12 @@ const ExtraLargeManualPromo = ({ customFields }) => {
 	return availableOverline || availableHeadline || availableImageURL || availableDescription ? (
 		<LazyLoad enabled={shouldLazyLoad}>
 			<article className={BLOCK_CLASS_NAME}>
-				{availableOverline ? (
-					<Overline href={overlineURL} className={`${BLOCK_CLASS_NAME}__overline`}>
-						{availableOverline}
-					</Overline>
-				) : null}
+				{availableOverline ? <Overline href={overlineURL}>{availableOverline}</Overline> : null}
 				{availableHeadline || availableImageURL || availableDescription ? (
 					<Stack>
 						{availableHeadline ? (
 							<HeadingSection>
-								<Heading className={`${BLOCK_CLASS_NAME}__headline`}>
+								<Heading>
 									<Conditional
 										component={Link}
 										condition={linkURL}
@@ -131,7 +127,6 @@ const ExtraLargeManualPromo = ({ customFields }) => {
 									component={Link}
 									condition={linkURL}
 									href={formatURL(linkURL)}
-									className={`${BLOCK_CLASS_NAME}__img`}
 									openInNewTab={newTab}
 									onClick={registerSuccessEvent}
 									assistiveHidden={showHeadline && showDescription}
diff --git a/blocks/extra-large-manual-promo-block/themes/news.json b/blocks/extra-large-manual-promo-block/themes/news.json
index 1a1e8e9494..14e4306ffa 100644
--- a/blocks/extra-large-manual-promo-block/themes/news.json
+++ b/blocks/extra-large-manual-promo-block/themes/news.json
@@ -28,49 +28,22 @@
 						"justify-content": "center",
 						"line-height": "var(--heading-level-1-line-height)"
 					},
+					"link-hover": {
+						"color": "var(--text-color-subtle)",
+						"opacity": 0.8
+					},
 					"overline": {
 						"display": "flex",
 						"justify-content": "center"
 					},
+					"overline-hover": {
+						"color": "var(--text-color-subtle)"
+					},
 					"stack": {
 						"gap": "var(--global-spacing-5)"
 					}
 				}
 			}
 		}
-	},
-	"xl-manual-promo-overline-hover": {
-		"styles": {
-			"default": {
-				"components": {
-					"overline-hover": {
-						"color": "var(--text-color-subtle)"
-					}
-				}
-			},
-			"desktop": {}
-		}
-	},
-	"xl-manual-promo-headline-hover": {
-		"styles": {
-			"default": {
-				"components": {
-					"heading": {
-						"color": "var(--text-color-subtle)"
-					}
-				}
-			},
-			"desktop": {}
-		}
-	},
-	"xl-manual-promo-img": {
-		"styles": {
-			"default": {
-				"link-hover": {
-					"opacity": 0.8
-				}
-			},
-			"desktop": {}
-		}
 	}
 }
diff --git a/blocks/extra-large-promo-block/_index.scss b/blocks/extra-large-promo-block/_index.scss
index efd493fd8f..66929f60b8 100644
--- a/blocks/extra-large-promo-block/_index.scss
+++ b/blocks/extra-large-promo-block/_index.scss
@@ -1,18 +1,6 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-xl-promo {
-	&__img {
-		@include scss.block-properties("xl-promo-img");
-		@include scss.block-components("xl-promo-img");
-	}
-	&__overline {
-		@include scss.block-properties("xl-promo-overline-hover");
-		@include scss.block-components("xl-promo-overline-hover");
-	}
-	&__headline {
-		@include scss.block-properties("xl-promo-headline-hover");
-		@include scss.block-components("xl-promo-headline-hover");
-	}
 	&__icon_label {
 		@include scss.block-components("xl-promo-icon-label");
 		@include scss.block-properties("xl-promo-icon-label");
diff --git a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
index bec573ad26..3510f6b07d 100644
--- a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
+++ b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
@@ -59,11 +59,7 @@ export const ExtraLargePromoPresentation = ({
 	hasOverline || contentHeading || showImage || contentDescription || contentAuthors || hasDate ? (
 		<LazyLoad enabled={shouldLazyLoad}>
 			<article className={BLOCK_CLASS_NAME}>
-				{hasOverline ? (
-					<Overline className={`${BLOCK_CLASS_NAME}__overline`} href={overlineUrl}>
-						{overlineText}
-					</Overline>
-				) : null}
+				{hasOverline ? <Overline href={overlineUrl}>{overlineText}</Overline> : null}
 				{contentHeading ||
 				showImage ||
 				contentDescription ||
@@ -73,7 +69,7 @@ export const ExtraLargePromoPresentation = ({
 					<Stack>
 						{contentHeading ? (
 							<HeadingSection>
-								<Heading className={`${BLOCK_CLASS_NAME}__headline`}>
+								<Heading>
 									<Conditional component={Link} condition={contentUrl} href={contentUrl}>
 										{contentHeading}
 									</Conditional>
@@ -98,7 +94,6 @@ export const ExtraLargePromoPresentation = ({
 								) : (
 									<>
 										<Conditional
-											className={`${BLOCK_CLASS_NAME}__img`}
 											component={Link}
 											condition={contentUrl}
 											href={contentUrl}
diff --git a/blocks/extra-large-promo-block/themes/news.json b/blocks/extra-large-promo-block/themes/news.json
index 4d2884a291..744eefcad3 100644
--- a/blocks/extra-large-promo-block/themes/news.json
+++ b/blocks/extra-large-promo-block/themes/news.json
@@ -12,9 +12,16 @@
 						"font-weight": "inherit",
 						"line-height": "inherit"
 					},
+					"link-hover": {
+						"color": "var(--text-color-subtle)",
+						"opacity": 0.8
+					},
 					"overline": {
 						"color": "var(--text-color)"
 					},
+					"overline-hover": {
+						"color": "var(--text-color-subtle)"
+					},
 					"separator": {
 						"padding": "0 var(--global-spacing-2)"
 					},
@@ -79,40 +86,5 @@
 			},
 			"desktop": {}
 		}
-	},
-	"xl-promo-overline-hover": {
-		"styles": {
-			"default": {
-				"components": {
-					"overline-hover": {
-						"color": "var(--text-color-subtle)"
-					}
-				}
-			},
-			"desktop": {}
-		}
-	},
-
-	"xl-promo-headline-hover": {
-		"styles": {
-			"default": {
-				"components": {
-					"heading": {
-						"color": "var(--text-color-subtle)"
-					}
-				}
-			},
-			"desktop": {}
-		}
-	},
-	"xl-promo-img": {
-		"styles": {
-			"default": {
-				"image": {
-					"opacity": 0.8
-				}
-			},
-			"desktop": {}
-		}
 	}
 }
diff --git a/blocks/large-manual-promo-block/_index.scss b/blocks/large-manual-promo-block/_index.scss
index 4797a23106..7449d16174 100644
--- a/blocks/large-manual-promo-block/_index.scss
+++ b/blocks/large-manual-promo-block/_index.scss
@@ -1,18 +1,6 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-large-manual-promo {
-	&__img {
-		@include scss.block-properties("large-manual-promo-img");
-		@include scss.block-components("large-manual-promo-img");
-	}
-	&__overline {
-		@include scss.block-properties("large-manual-promo-overline-hover");
-		@include scss.block-components("large-manual-promo-overline-hover");
-	}
-	&__headline {
-		@include scss.block-properties("large-manual-promo-headline-hover");
-		@include scss.block-components("large-manual-promo-headline-hover");
-	}
 	&__text {
 		@include scss.block-components("large-manual-promo-text");
 		@include scss.block-properties("large-manual-promo-text");
diff --git a/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx b/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
index b9a5d04f02..7241f6b680 100644
--- a/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
+++ b/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
@@ -92,13 +92,9 @@ const LargeManualPromo = ({ customFields }) => {
 	const PromoOverline = () => {
 		if (showOverline && overline) {
 			if (overlineURL) {
-				return (
-					<Overline className={`${BLOCK_CLASS_NAME}__overline`} href={overlineURL}>
-						{overline}
-					</Overline>
-				);
+				return <Overline href={overlineURL}>{overline}</Overline>;
 			}
-			return <Overline className={`${BLOCK_CLASS_NAME}__overline`}>{overline}</Overline>;
+			return <Overline>{overline}</Overline>;
 		}
 		return null;
 	};
@@ -117,7 +113,6 @@ const LargeManualPromo = ({ customFields }) => {
 							suppressContentEditableWarning
 						>
 							<Conditional
-								className={`${BLOCK_CLASS_NAME}__img`}
 								component={Link}
 								condition={linkURL}
 								href={formatURL(linkURL)}
@@ -134,7 +129,7 @@ const LargeManualPromo = ({ customFields }) => {
 						{showDescription || showHeadline ? (
 							<Stack>
 								{showHeadline && headline ? (
-									<Heading className={`${BLOCK_CLASS_NAME}__headline`}>
+									<Heading>
 										<Conditional
 											component={Link}
 											condition={linkURL}
diff --git a/blocks/large-manual-promo-block/themes/news.json b/blocks/large-manual-promo-block/themes/news.json
index ea428c2027..2ae90e8761 100644
--- a/blocks/large-manual-promo-block/themes/news.json
+++ b/blocks/large-manual-promo-block/themes/news.json
@@ -2,7 +2,13 @@
 	"large-manual-promo": {
 		"styles": {
 			"default": {
-				"gap": "var(--global-spacing-4)"
+				"gap": "var(--global-spacing-4)",
+				"components": {
+					"link-hover": {
+						"color": "var(--text-color-subtle)",
+						"opacity": 0.8
+					}
+				}
 			},
 			"desktop": {
 				"gap": "var(--global-spacing-6)",
@@ -30,6 +36,9 @@
 						"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)"
 					},
@@ -47,39 +56,5 @@
 				}
 			}
 		}
-	},
-	"large-manual-promo-overline-hover": {
-		"styles": {
-			"default": {
-				"components": {
-					"overline-hover": {
-						"color": "var(--text-color-subtle)"
-					}
-				}
-			},
-			"desktop": {}
-		}
-	},
-	"large-manual-promo-headline-hover": {
-		"styles": {
-			"default": {
-				"components": {
-					"heading": {
-						"color": "var(--text-color-subtle)"
-					}
-				}
-			},
-			"desktop": {}
-		}
-	},
-	"large-manual-promo-img": {
-		"styles": {
-			"default": {
-				"image": {
-					"opacity": 0.8
-				}
-			},
-			"desktop": {}
-		}
 	}
 }
diff --git a/blocks/large-promo-block/_index.scss b/blocks/large-promo-block/_index.scss
index db05707869..7578955f1e 100644
--- a/blocks/large-promo-block/_index.scss
+++ b/blocks/large-promo-block/_index.scss
@@ -1,18 +1,6 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-large-promo {
-	&__img {
-		@include scss.block-properties("large-promo-img");
-		@include scss.block-components("large-promo-img");
-	}
-	&__overline {
-		@include scss.block-properties("large-promo-overline-hover");
-		@include scss.block-components("large-promo-overline-hover");
-	}
-	&__headline {
-		@include scss.block-properties("large-promo-headline-hover");
-		@include scss.block-components("large-promo-headline-hover");
-	}
 	&__text {
 		@include scss.block-components("large-promo-text");
 		@include scss.block-properties("large-promo-text");
diff --git a/blocks/large-promo-block/features/large-promo/default.jsx b/blocks/large-promo-block/features/large-promo/default.jsx
index 17cbc545ea..8756af879a 100644
--- a/blocks/large-promo-block/features/large-promo/default.jsx
+++ b/blocks/large-promo-block/features/large-promo/default.jsx
@@ -76,7 +76,6 @@ export const LargePromoPresentation = ({
 					>
 						<Conditional
 							component={Link}
-							className={`${BLOCK_CLASS_NAME}__img}`}
 							condition={contentUrl}
 							href={formatURL(contentUrl)}
 							onClick={registerSuccessEvent}
@@ -109,14 +108,12 @@ export const LargePromoPresentation = ({
 				contentDate ? (
 					<Stack className={`${BLOCK_CLASS_NAME}__text`}>
 						{contentOverline ? (
-							<Overline className={`${BLOCK_CLASS_NAME}__overline`} href={contentOverlineURL}>
-								{contentOverline}
-							</Overline>
+							<Overline href={contentOverlineURL}>{contentOverline}</Overline>
 						) : null}
 						{contentHeading || contentDescription || contentAuthors || contentDate ? (
 							<Stack>
 								{contentHeading ? (
-									<Heading className={`${BLOCK_CLASS_NAME}__headline`}>
+									<Heading>
 										<Conditional
 											component={Link}
 											condition={contentUrl}
diff --git a/blocks/large-promo-block/themes/news.json b/blocks/large-promo-block/themes/news.json
index 25a23fe8fb..ba7e97df4a 100644
--- a/blocks/large-promo-block/themes/news.json
+++ b/blocks/large-promo-block/themes/news.json
@@ -6,6 +6,10 @@
 				"components": {
 					"link": {
 						"position": "relative"
+					},
+					"link-hover": {
+						"color": "var(--text-color-subtle)",
+						"opacity": 0.8
 					}
 				}
 			},
@@ -66,6 +70,9 @@
 						"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)"
@@ -87,39 +94,5 @@
 				}
 			}
 		}
-	},
-	"large-promo-overline-hover": {
-		"styles": {
-			"default": {
-				"components": {
-					"overline-hover": {
-						"color": "var(--text-color-subtle)"
-					}
-				}
-			},
-			"desktop": {}
-		}
-	},
-	"large-promo-headline-hover": {
-		"styles": {
-			"default": {
-				"components": {
-					"heading": {
-						"color": "var(--text-color-subtle)"
-					}
-				}
-			},
-			"desktop": {}
-		}
-	},
-	"large-promo-img": {
-		"styles": {
-			"default": {
-				"image": {
-					"opacity": 0.8
-				}
-			},
-			"desktop": {}
-		}
 	}
 }
diff --git a/blocks/medium-manual-promo-block/_index.scss b/blocks/medium-manual-promo-block/_index.scss
index deb70df2fe..ebff1a7a95 100644
--- a/blocks/medium-manual-promo-block/_index.scss
+++ b/blocks/medium-manual-promo-block/_index.scss
@@ -1,14 +1,6 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-medium-manual-promo {
-	&__img {
-		@include scss.block-properties("medium-manual-promo-img");
-		@include scss.block-components("medium-manual-promo-img");
-	}
-	&__headline {
-		@include scss.block-properties("medium-manual-promo-headline-hover");
-		@include scss.block-components("medium-manual-promo-headline-hover");
-	}
 	&--show-image {
 		@include scss.block-properties("medium-manual-promo-show-image");
 		@include scss.block-components("medium-manual-promo-show-image");
diff --git a/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx b/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
index ccd64406f3..eb4dd12b7f 100644
--- a/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
+++ b/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
@@ -99,7 +99,6 @@ const MediumManualPromo = ({ customFields }) => {
 							suppressContentEditableWarning
 						>
 							<Conditional
-								className={`${BLOCK_CLASS_NAME}__img`}
 								component={Link}
 								condition={linkURL}
 								href={formatURL(linkURL)}
@@ -113,7 +112,7 @@ const MediumManualPromo = ({ customFields }) => {
 					) : null}
 
 					{showHeadline && headline ? (
-						<Heading className={`${BLOCK_CLASS_NAME}__headline`}>
+						<Heading>
 							<Conditional
 								component={Link}
 								condition={linkURL}
diff --git a/blocks/medium-manual-promo-block/themes/news.json b/blocks/medium-manual-promo-block/themes/news.json
index 406dba172b..1bcf2218e2 100644
--- a/blocks/medium-manual-promo-block/themes/news.json
+++ b/blocks/medium-manual-promo-block/themes/news.json
@@ -18,6 +18,10 @@
 						"line-height": "var(--heading-level-5-line-height)",
 						"margin-bottom": "var(--global-spacing-4)"
 					},
+					"link-hover": {
+						"color": "var(--text-color-subtle)",
+						"opacity": 0.8
+					},
 					"media-item": {
 						"float": "right",
 						"max-width": "100px"
@@ -64,27 +68,5 @@
 				}
 			}
 		}
-	},
-	"medium-manual-promo-headline-hover": {
-		"styles": {
-			"default": {
-				"components": {
-					"heading": {
-						"color": "var(--text-color-subtle)"
-					}
-				}
-			},
-			"desktop": {}
-		}
-	},
-	"medium-manual-promo-img": {
-		"styles": {
-			"default": {
-				"image": {
-					"opacity": 0.8
-				}
-			},
-			"desktop": {}
-		}
 	}
 }
diff --git a/blocks/medium-promo-block/_index.scss b/blocks/medium-promo-block/_index.scss
index 3c191fd464..2ae3f732cc 100644
--- a/blocks/medium-promo-block/_index.scss
+++ b/blocks/medium-promo-block/_index.scss
@@ -1,14 +1,6 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-medium-promo {
-	&__img {
-		@include scss.block-properties("medium-promo-img");
-		@include scss.block-components("medium-promo-img");
-	}
-	&__headline {
-		@include scss.block-properties("medium-promo-headline-hover");
-		@include scss.block-components("medium-promo-headline-hover");
-	}
 	&--show-image {
 		@include scss.block-properties("medium-promo-show-image");
 		@include scss.block-components("medium-promo-show-image");
diff --git a/blocks/medium-promo-block/features/medium-promo/default.jsx b/blocks/medium-promo-block/features/medium-promo/default.jsx
index 5f44b17dd7..16da4f71c4 100644
--- a/blocks/medium-promo-block/features/medium-promo/default.jsx
+++ b/blocks/medium-promo-block/features/medium-promo/default.jsx
@@ -209,7 +209,6 @@ const MediumPromo = ({ customFields }) => {
 							suppressContentEditableWarning
 						>
 							<Conditional
-								className={`${BLOCK_CLASS_NAME}__img`}
 								component={Link}
 								condition={contentUrl}
 								href={formatURL(contentUrl)}
@@ -228,7 +227,7 @@ const MediumPromo = ({ customFields }) => {
 					) : null}
 
 					{contentHeading ? (
-						<Heading className={`${BLOCK_CLASS_NAME}__headline`}>
+						<Heading>
 							<Conditional
 								component={Link}
 								condition={contentUrl}
diff --git a/blocks/medium-promo-block/themes/news.json b/blocks/medium-promo-block/themes/news.json
index 9f65180f46..1d11867364 100644
--- a/blocks/medium-promo-block/themes/news.json
+++ b/blocks/medium-promo-block/themes/news.json
@@ -57,6 +57,10 @@
 					"heading": {
 						"color": "var(--text-color)",
 						"width": "68%"
+					},
+					"link-hover": {
+						"color": "var(--text-color-subtle)",
+						"opacity": 0.8
 					}
 				}
 			},
@@ -110,27 +114,5 @@
 				"display": "inline"
 			}
 		}
-	},
-	"medium-promo-headline-hover": {
-		"styles": {
-			"default": {
-				"components": {
-					"heading": {
-						"color": "var(--text-color-subtle)"
-					}
-				}
-			},
-			"desktop": {}
-		}
-	},
-	"medium-promo-img": {
-		"styles": {
-			"default": {
-				"image": {
-					"opacity": 0.8
-				}
-			},
-			"desktop": {}
-		}
 	}
 }
diff --git a/blocks/small-manual-promo-block/_index.scss b/blocks/small-manual-promo-block/_index.scss
index 0db157d2df..e14ae1bbd0 100644
--- a/blocks/small-manual-promo-block/_index.scss
+++ b/blocks/small-manual-promo-block/_index.scss
@@ -1,14 +1,6 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-small-manual-promo {
-	&__img {
-		@include scss.block-properties("small-manual-promo-img");
-		@include scss.block-components("small-manual-promo-img");
-	}
-	&__headline {
-		@include scss.block-properties("small-manual-promo-headline-hover");
-		@include scss.block-components("small-manual-promo-headline-hover");
-	}
 	&--above {
 		@include scss.block-properties("small-manual-promo-above");
 		@include scss.block-components("small-manual-promo-above");
diff --git a/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx b/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx
index 3a47bafb2a..270331c286 100644
--- a/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx
+++ b/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx
@@ -91,7 +91,7 @@ const SmallManualPromo = ({ customFields }) => {
 				})}
 				suppressContentEditableWarning
 			>
-				<Image className={`${BLOCK_CLASS_NAME}__img`} {...imageParams} />
+				<Image {...imageParams} />
 			</MediaItem>
 		) : null;
 		return showImage && linkURL ? (
@@ -110,7 +110,7 @@ const SmallManualPromo = ({ customFields }) => {
 
 	const PromoHeading = () =>
 		showHeadline && headline ? (
-			<Heading className={`${BLOCK_CLASS_NAME}__headline`}>
+			<Heading>
 				{linkURL ? (
 					<Link href={formatURL(linkURL)} openInNewTab={newTab} onClick={registerSuccessEvent}>
 						{headline}
diff --git a/blocks/small-manual-promo-block/themes/news.json b/blocks/small-manual-promo-block/themes/news.json
index a4cd6b70c2..2d7282aff3 100644
--- a/blocks/small-manual-promo-block/themes/news.json
+++ b/blocks/small-manual-promo-block/themes/news.json
@@ -11,6 +11,10 @@
 						"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)",
+						"opacity": 0.8
 					}
 				}
 			},
@@ -50,27 +54,5 @@
 			},
 			"desktop": {}
 		}
-	},
-	"small-manual-promo-headline-hover": {
-		"styles": {
-			"default": {
-				"components": {
-					"heading": {
-						"color": "var(--text-color-subtle)"
-					}
-				}
-			},
-			"desktop": {}
-		}
-	},
-	"small-manual-promo-img": {
-		"styles": {
-			"default": {
-				"image": {
-					"opacity": 0.8
-				}
-			},
-			"desktop": {}
-		}
 	}
 }
diff --git a/blocks/small-promo-block/_index.scss b/blocks/small-promo-block/_index.scss
index 5db17ef588..685411fdf4 100644
--- a/blocks/small-promo-block/_index.scss
+++ b/blocks/small-promo-block/_index.scss
@@ -1,14 +1,6 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-small-promo {
-	&__img {
-		@include scss.block-properties("small-promo-img");
-		@include scss.block-components("small-promo-img");
-	}
-	&__headline {
-		@include scss.block-properties("small-promo-headline-hover");
-		@include scss.block-components("small-promo-headline-hover");
-	}
 	&--above {
 		@include scss.block-properties("small-promo-above");
 		@include scss.block-components("small-promo-above");
diff --git a/blocks/small-promo-block/features/small-promo/default.jsx b/blocks/small-promo-block/features/small-promo/default.jsx
index cbe6ccf5d3..55d4a226b3 100644
--- a/blocks/small-promo-block/features/small-promo/default.jsx
+++ b/blocks/small-promo-block/features/small-promo/default.jsx
@@ -158,7 +158,7 @@ const SmallPromo = ({ customFields }) => {
 					})}
 					suppressContentEditableWarning
 				>
-					<Image className={`${BLOCK_CLASS_NAME}__img`} {...imageParams} />
+					<Image {...imageParams} />
 				</MediaItem>
 			</Conditional>
 		) : null;
@@ -166,7 +166,7 @@ const SmallPromo = ({ customFields }) => {
 
 	const PromoHeading = () =>
 		showHeadline && headline ? (
-			<Heading className={`${BLOCK_CLASS_NAME}__headline`}>
+			<Heading>
 				<Conditional
 					component={Link}
 					condition={linkURL}
diff --git a/blocks/small-promo-block/themes/news.json b/blocks/small-promo-block/themes/news.json
index 32de391fd1..0dc696d0f1 100644
--- a/blocks/small-promo-block/themes/news.json
+++ b/blocks/small-promo-block/themes/news.json
@@ -11,6 +11,10 @@
 						"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)",
+						"opacity": 0.8
 					}
 				}
 			},
@@ -34,27 +38,5 @@
 			},
 			"desktop": {}
 		}
-	},
-	"small-promo-headline-hover": {
-		"styles": {
-			"default": {
-				"components": {
-					"heading": {
-						"color": "var(--text-color-subtle)"
-					}
-				}
-			},
-			"desktop": {}
-		}
-	},
-	"small-promo-img": {
-		"styles": {
-			"default": {
-				"image": {
-					"opacity": 0.8
-				}
-			},
-			"desktop": {}
-		}
 	}
 }

From a622ba26042fa29d7ded26bda4f557df321862c0 Mon Sep 17 00:00:00 2001
From: Malavika Koppula <mkreddy1110@gmail.com>
Date: Wed, 26 Jul 2023 09:45:30 -0400
Subject: [PATCH 07/10] reverted img token and class

---
 .storybook/themes/news.scss                   | 56 +++++++++++++++++++
 .../_index.scss                               |  4 ++
 .../extra-large-manual-promo/default.jsx      |  1 +
 .../themes/news.json                          | 15 ++++-
 blocks/extra-large-promo-block/_index.scss    |  4 ++
 .../features/extra-large-promo/default.jsx    |  1 +
 .../extra-large-promo-block/themes/news.json  | 12 ++++
 blocks/large-manual-promo-block/_index.scss   |  4 ++
 .../features/large-manual-promo/default.jsx   |  1 +
 .../large-manual-promo-block/themes/news.json | 12 ++++
 blocks/large-promo-block/_index.scss          |  4 ++
 .../features/large-promo/default.jsx          |  1 +
 blocks/large-promo-block/themes/news.json     | 12 ++++
 blocks/medium-manual-promo-block/_index.scss  |  4 ++
 .../features/medium-manual-promo/default.jsx  |  1 +
 .../themes/news.json                          | 12 ++++
 blocks/medium-promo-block/_index.scss         |  4 ++
 .../features/medium-promo/default.jsx         |  1 +
 blocks/medium-promo-block/themes/news.json    | 12 ++++
 blocks/small-manual-promo-block/_index.scss   |  4 ++
 .../features/small-manual-promo/default.jsx   |  1 +
 .../small-manual-promo-block/themes/news.json | 12 ++++
 blocks/small-promo-block/_index.scss          |  4 ++
 .../features/small-promo/default.jsx          |  1 +
 blocks/small-promo-block/themes/news.json     | 12 ++++
 25 files changed, 193 insertions(+), 2 deletions(-)

diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss
index fa379b121b..141b3dbcd7 100644
--- a/.storybook/themes/news.scss
+++ b/.storybook/themes/news.scss
@@ -1592,6 +1592,13 @@
 						),
 					),
 				),
+				large-manual-promo-img: (
+					components: (
+						link-hover: (
+							opacity: 0.8,
+						),
+					),
+				),
 				large-promo: (
 					gap: var(--global-spacing-4),
 					components: (
@@ -1654,6 +1661,13 @@
 						),
 					),
 				),
+				large-promo-img: (
+					components: (
+						link-hover: (
+							opacity: 0.8,
+						),
+					),
+				),
 				lead-art: (
 					margin-bottom: var(--global-spacing-5),
 					components: (
@@ -1886,6 +1900,13 @@
 					color: var(--global-white),
 					display: none,
 				),
+				medium-promo-img: (
+					components: (
+						link-hover: (
+							opacity: 0.8,
+						),
+					),
+				),
 				medium-manual-promo: (
 					clear: both,
 					display: table,
@@ -1926,6 +1947,13 @@
 						),
 					),
 				),
+				medium-manual-promo-img: (
+					components: (
+						link-hover: (
+							opacity: 0.8,
+						),
+					),
+				),
 				numbered-list: (
 					gap: var(--global-spacing-4),
 					components: (
@@ -2366,6 +2394,13 @@
 					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),
@@ -2391,6 +2426,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),
@@ -2696,6 +2738,13 @@
 						),
 					),
 				),
+				xl-manual-promo-img: (
+					components: (
+						link-hover: (
+							opacity: 0.8,
+						),
+					),
+				),
 				xl-promo: (
 					components: (
 						link: (
@@ -2750,6 +2799,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
index ab9d94c526..ab5631cd7c 100644
--- 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
index 6f27c4960d..6a4d394486 100644
--- 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
index 14e4306ffa..2be3c50589 100644
--- a/blocks/extra-large-manual-promo-block/themes/news.json
+++ b/blocks/extra-large-manual-promo-block/themes/news.json
@@ -29,8 +29,7 @@
 						"line-height": "var(--heading-level-1-line-height)"
 					},
 					"link-hover": {
-						"color": "var(--text-color-subtle)",
-						"opacity": 0.8
+						"color": "var(--text-color-subtle)"
 					},
 					"overline": {
 						"display": "flex",
@@ -45,5 +44,17 @@
 				}
 			}
 		}
+	},
+	"xl-manual-promo-img": {
+		"styles": {
+			"default": {
+				"components": {
+					"link-hover": {
+						"opacity": 0.8
+					}
+				}
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/extra-large-promo-block/_index.scss b/blocks/extra-large-promo-block/_index.scss
index 66929f60b8..6072e3b639 100644
--- a/blocks/extra-large-promo-block/_index.scss
+++ b/blocks/extra-large-promo-block/_index.scss
@@ -1,6 +1,10 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-xl-promo {
+	&__img {
+		@include scss.block-properties("xl-manual-promo-img");
+		@include scss.block-components("xl-manual-promo-img");
+	}
 	&__icon_label {
 		@include scss.block-components("xl-promo-icon-label");
 		@include scss.block-properties("xl-promo-icon-label");
diff --git a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
index 3510f6b07d..e77e71e77c 100644
--- a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
+++ b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
@@ -94,6 +94,7 @@ export const ExtraLargePromoPresentation = ({
 								) : (
 									<>
 										<Conditional
+											className={`${BLOCK_CLASS_NAME}__img`}
 											component={Link}
 											condition={contentUrl}
 											href={contentUrl}
diff --git a/blocks/extra-large-promo-block/themes/news.json b/blocks/extra-large-promo-block/themes/news.json
index 744eefcad3..66c362fbd9 100644
--- a/blocks/extra-large-promo-block/themes/news.json
+++ b/blocks/extra-large-promo-block/themes/news.json
@@ -86,5 +86,17 @@
 			},
 			"desktop": {}
 		}
+	},
+	"xl-promo-img": {
+		"styles": {
+			"default": {
+				"components": {
+					"link-hover": {
+						"opacity": 0.8
+					}
+				}
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/large-manual-promo-block/_index.scss b/blocks/large-manual-promo-block/_index.scss
index 7449d16174..522a8b9b76 100644
--- a/blocks/large-manual-promo-block/_index.scss
+++ b/blocks/large-manual-promo-block/_index.scss
@@ -1,6 +1,10 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-large-manual-promo {
+	&__img {
+		@include scss.block-properties("xl-manual-promo-img");
+		@include scss.block-components("xl-manual-promo-img");
+	}
 	&__text {
 		@include scss.block-components("large-manual-promo-text");
 		@include scss.block-properties("large-manual-promo-text");
diff --git a/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx b/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
index 7241f6b680..4a552ab853 100644
--- a/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
+++ b/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
@@ -113,6 +113,7 @@ const LargeManualPromo = ({ customFields }) => {
 							suppressContentEditableWarning
 						>
 							<Conditional
+								className={`${BLOCK_CLASS_NAME}__img`}
 								component={Link}
 								condition={linkURL}
 								href={formatURL(linkURL)}
diff --git a/blocks/large-manual-promo-block/themes/news.json b/blocks/large-manual-promo-block/themes/news.json
index 2ae90e8761..d6ce49c853 100644
--- a/blocks/large-manual-promo-block/themes/news.json
+++ b/blocks/large-manual-promo-block/themes/news.json
@@ -56,5 +56,17 @@
 				}
 			}
 		}
+	},
+	"large-manual-promo-img": {
+		"styles": {
+			"default": {
+				"components": {
+					"link-hover": {
+						"opacity": 0.8
+					}
+				}
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/large-promo-block/_index.scss b/blocks/large-promo-block/_index.scss
index 7578955f1e..32141ecf4c 100644
--- a/blocks/large-promo-block/_index.scss
+++ b/blocks/large-promo-block/_index.scss
@@ -1,6 +1,10 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-large-promo {
+	&__img {
+		@include scss.block-properties("xl-manual-promo-img");
+		@include scss.block-components("xl-manual-promo-img");
+	}
 	&__text {
 		@include scss.block-components("large-promo-text");
 		@include scss.block-properties("large-promo-text");
diff --git a/blocks/large-promo-block/features/large-promo/default.jsx b/blocks/large-promo-block/features/large-promo/default.jsx
index 8756af879a..d9817f86ca 100644
--- a/blocks/large-promo-block/features/large-promo/default.jsx
+++ b/blocks/large-promo-block/features/large-promo/default.jsx
@@ -75,6 +75,7 @@ export const LargePromoPresentation = ({
 						suppressContentEditableWarning
 					>
 						<Conditional
+							className={`${BLOCK_CLASS_NAME}__img`}
 							component={Link}
 							condition={contentUrl}
 							href={formatURL(contentUrl)}
diff --git a/blocks/large-promo-block/themes/news.json b/blocks/large-promo-block/themes/news.json
index ba7e97df4a..e086937991 100644
--- a/blocks/large-promo-block/themes/news.json
+++ b/blocks/large-promo-block/themes/news.json
@@ -94,5 +94,17 @@
 				}
 			}
 		}
+	},
+	"large-promo-img": {
+		"styles": {
+			"default": {
+				"components": {
+					"link-hover": {
+						"opacity": 0.8
+					}
+				}
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/medium-manual-promo-block/_index.scss b/blocks/medium-manual-promo-block/_index.scss
index ebff1a7a95..5c5f23b2d9 100644
--- a/blocks/medium-manual-promo-block/_index.scss
+++ b/blocks/medium-manual-promo-block/_index.scss
@@ -1,6 +1,10 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-medium-manual-promo {
+	&__img {
+		@include scss.block-properties("xl-manual-promo-img");
+		@include scss.block-components("xl-manual-promo-img");
+	}
 	&--show-image {
 		@include scss.block-properties("medium-manual-promo-show-image");
 		@include scss.block-components("medium-manual-promo-show-image");
diff --git a/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx b/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
index eb4dd12b7f..2ac3471044 100644
--- a/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
+++ b/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
@@ -99,6 +99,7 @@ const MediumManualPromo = ({ customFields }) => {
 							suppressContentEditableWarning
 						>
 							<Conditional
+								className={`${BLOCK_CLASS_NAME}__img`}
 								component={Link}
 								condition={linkURL}
 								href={formatURL(linkURL)}
diff --git a/blocks/medium-manual-promo-block/themes/news.json b/blocks/medium-manual-promo-block/themes/news.json
index 1bcf2218e2..a583186b7f 100644
--- a/blocks/medium-manual-promo-block/themes/news.json
+++ b/blocks/medium-manual-promo-block/themes/news.json
@@ -68,5 +68,17 @@
 				}
 			}
 		}
+	},
+	"medium-manual-promo-img": {
+		"styles": {
+			"default": {
+				"components": {
+					"link-hover": {
+						"opacity": 0.8
+					}
+				}
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/medium-promo-block/_index.scss b/blocks/medium-promo-block/_index.scss
index 2ae3f732cc..f691cde464 100644
--- a/blocks/medium-promo-block/_index.scss
+++ b/blocks/medium-promo-block/_index.scss
@@ -1,6 +1,10 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-medium-promo {
+	&__img {
+		@include scss.block-properties("xl-manual-promo-img");
+		@include scss.block-components("xl-manual-promo-img");
+	}
 	&--show-image {
 		@include scss.block-properties("medium-promo-show-image");
 		@include scss.block-components("medium-promo-show-image");
diff --git a/blocks/medium-promo-block/features/medium-promo/default.jsx b/blocks/medium-promo-block/features/medium-promo/default.jsx
index 16da4f71c4..582a6d863b 100644
--- a/blocks/medium-promo-block/features/medium-promo/default.jsx
+++ b/blocks/medium-promo-block/features/medium-promo/default.jsx
@@ -209,6 +209,7 @@ const MediumPromo = ({ customFields }) => {
 							suppressContentEditableWarning
 						>
 							<Conditional
+								className={`${BLOCK_CLASS_NAME}__img`}
 								component={Link}
 								condition={contentUrl}
 								href={formatURL(contentUrl)}
diff --git a/blocks/medium-promo-block/themes/news.json b/blocks/medium-promo-block/themes/news.json
index 1d11867364..0774279567 100644
--- a/blocks/medium-promo-block/themes/news.json
+++ b/blocks/medium-promo-block/themes/news.json
@@ -114,5 +114,17 @@
 				"display": "inline"
 			}
 		}
+	},
+	"medium-promo-img": {
+		"styles": {
+			"default": {
+				"components": {
+					"link-hover": {
+						"opacity": 0.8
+					}
+				}
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/small-manual-promo-block/_index.scss b/blocks/small-manual-promo-block/_index.scss
index e14ae1bbd0..0f88a7f771 100644
--- a/blocks/small-manual-promo-block/_index.scss
+++ b/blocks/small-manual-promo-block/_index.scss
@@ -1,6 +1,10 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-small-manual-promo {
+	&__img {
+		@include scss.block-properties("xl-manual-promo-img");
+		@include scss.block-components("xl-manual-promo-img");
+	}
 	&--above {
 		@include scss.block-properties("small-manual-promo-above");
 		@include scss.block-components("small-manual-promo-above");
diff --git a/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx b/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx
index 270331c286..5091df7b43 100644
--- a/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx
+++ b/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx
@@ -96,6 +96,7 @@ const SmallManualPromo = ({ customFields }) => {
 		) : null;
 		return showImage && linkURL ? (
 			<Link
+				className={`${BLOCK_CLASS_NAME}__img`}
 				href={formatURL(linkURL)}
 				openInNewTab={newTab}
 				onClick={registerSuccessEvent}
diff --git a/blocks/small-manual-promo-block/themes/news.json b/blocks/small-manual-promo-block/themes/news.json
index 2d7282aff3..79cc7692ec 100644
--- a/blocks/small-manual-promo-block/themes/news.json
+++ b/blocks/small-manual-promo-block/themes/news.json
@@ -54,5 +54,17 @@
 			},
 			"desktop": {}
 		}
+	},
+	"small-manual-promo-img": {
+		"styles": {
+			"default": {
+				"components": {
+					"link-hover": {
+						"opacity": 0.8
+					}
+				}
+			},
+			"desktop": {}
+		}
 	}
 }
diff --git a/blocks/small-promo-block/_index.scss b/blocks/small-promo-block/_index.scss
index 685411fdf4..006c0eeaae 100644
--- a/blocks/small-promo-block/_index.scss
+++ b/blocks/small-promo-block/_index.scss
@@ -1,6 +1,10 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-small-promo {
+	&__img {
+		@include scss.block-properties("xl-manual-promo-img");
+		@include scss.block-components("xl-manual-promo-img");
+	}
 	&--above {
 		@include scss.block-properties("small-promo-above");
 		@include scss.block-components("small-promo-above");
diff --git a/blocks/small-promo-block/features/small-promo/default.jsx b/blocks/small-promo-block/features/small-promo/default.jsx
index 55d4a226b3..5ff5262ae6 100644
--- a/blocks/small-promo-block/features/small-promo/default.jsx
+++ b/blocks/small-promo-block/features/small-promo/default.jsx
@@ -144,6 +144,7 @@ const SmallPromo = ({ customFields }) => {
 
 		return showImage ? (
 			<Conditional
+				className={`${BLOCK_CLASS_NAME}__img`}
 				component={Link}
 				condition={linkURL}
 				href={formatURL(linkURL)}
diff --git a/blocks/small-promo-block/themes/news.json b/blocks/small-promo-block/themes/news.json
index 0dc696d0f1..0a248655ed 100644
--- a/blocks/small-promo-block/themes/news.json
+++ b/blocks/small-promo-block/themes/news.json
@@ -38,5 +38,17 @@
 			},
 			"desktop": {}
 		}
+	},
+	"small-promo-img": {
+		"styles": {
+			"default": {
+				"components": {
+					"link-hover": {
+						"opacity": 0.8
+					}
+				}
+			},
+			"desktop": {}
+		}
 	}
 }

From 8a050cfab3b00863edf7f93c08104a862ad876fe Mon Sep 17 00:00:00 2001
From: Malavika Koppula <mkreddy1110@gmail.com>
Date: Wed, 26 Jul 2023 09:53:33 -0400
Subject: [PATCH 08/10] Removed opacity from link-hover

---
 .../extra-large-manual-promo-block/themes/news.json  | 12 ++++++------
 blocks/extra-large-promo-block/themes/news.json      |  3 +--
 blocks/large-manual-promo-block/themes/news.json     |  3 +--
 blocks/large-promo-block/themes/news.json            |  3 +--
 blocks/medium-manual-promo-block/themes/news.json    |  3 +--
 blocks/medium-promo-block/themes/news.json           |  3 +--
 blocks/small-manual-promo-block/themes/news.json     |  3 +--
 blocks/small-promo-block/themes/news.json            |  3 +--
 8 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/blocks/extra-large-manual-promo-block/themes/news.json b/blocks/extra-large-manual-promo-block/themes/news.json
index 2be3c50589..9d770bc375 100644
--- a/blocks/extra-large-manual-promo-block/themes/news.json
+++ b/blocks/extra-large-manual-promo-block/themes/news.json
@@ -12,9 +12,15 @@
 						"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)"
 					}
@@ -28,16 +34,10 @@
 						"justify-content": "center",
 						"line-height": "var(--heading-level-1-line-height)"
 					},
-					"link-hover": {
-						"color": "var(--text-color-subtle)"
-					},
 					"overline": {
 						"display": "flex",
 						"justify-content": "center"
 					},
-					"overline-hover": {
-						"color": "var(--text-color-subtle)"
-					},
 					"stack": {
 						"gap": "var(--global-spacing-5)"
 					}
diff --git a/blocks/extra-large-promo-block/themes/news.json b/blocks/extra-large-promo-block/themes/news.json
index 66c362fbd9..b7a4e81bd2 100644
--- a/blocks/extra-large-promo-block/themes/news.json
+++ b/blocks/extra-large-promo-block/themes/news.json
@@ -13,8 +13,7 @@
 						"line-height": "inherit"
 					},
 					"link-hover": {
-						"color": "var(--text-color-subtle)",
-						"opacity": 0.8
+						"color": "var(--text-color-subtle)"
 					},
 					"overline": {
 						"color": "var(--text-color)"
diff --git a/blocks/large-manual-promo-block/themes/news.json b/blocks/large-manual-promo-block/themes/news.json
index d6ce49c853..aa67bb1697 100644
--- a/blocks/large-manual-promo-block/themes/news.json
+++ b/blocks/large-manual-promo-block/themes/news.json
@@ -5,8 +5,7 @@
 				"gap": "var(--global-spacing-4)",
 				"components": {
 					"link-hover": {
-						"color": "var(--text-color-subtle)",
-						"opacity": 0.8
+						"color": "var(--text-color-subtle)"
 					}
 				}
 			},
diff --git a/blocks/large-promo-block/themes/news.json b/blocks/large-promo-block/themes/news.json
index e086937991..0de18c964e 100644
--- a/blocks/large-promo-block/themes/news.json
+++ b/blocks/large-promo-block/themes/news.json
@@ -8,8 +8,7 @@
 						"position": "relative"
 					},
 					"link-hover": {
-						"color": "var(--text-color-subtle)",
-						"opacity": 0.8
+						"color": "var(--text-color-subtle)"
 					}
 				}
 			},
diff --git a/blocks/medium-manual-promo-block/themes/news.json b/blocks/medium-manual-promo-block/themes/news.json
index a583186b7f..6cb50a1b3b 100644
--- a/blocks/medium-manual-promo-block/themes/news.json
+++ b/blocks/medium-manual-promo-block/themes/news.json
@@ -19,8 +19,7 @@
 						"margin-bottom": "var(--global-spacing-4)"
 					},
 					"link-hover": {
-						"color": "var(--text-color-subtle)",
-						"opacity": 0.8
+						"color": "var(--text-color-subtle)"
 					},
 					"media-item": {
 						"float": "right",
diff --git a/blocks/medium-promo-block/themes/news.json b/blocks/medium-promo-block/themes/news.json
index 0774279567..3d27fb3cd1 100644
--- a/blocks/medium-promo-block/themes/news.json
+++ b/blocks/medium-promo-block/themes/news.json
@@ -59,8 +59,7 @@
 						"width": "68%"
 					},
 					"link-hover": {
-						"color": "var(--text-color-subtle)",
-						"opacity": 0.8
+						"color": "var(--text-color-subtle)"
 					}
 				}
 			},
diff --git a/blocks/small-manual-promo-block/themes/news.json b/blocks/small-manual-promo-block/themes/news.json
index 79cc7692ec..09b6222f85 100644
--- a/blocks/small-manual-promo-block/themes/news.json
+++ b/blocks/small-manual-promo-block/themes/news.json
@@ -13,8 +13,7 @@
 						"line-height": "var(--body-line-height)"
 					},
 					"link-hover": {
-						"color": "var(--text-color-subtle)",
-						"opacity": 0.8
+						"color": "var(--text-color-subtle)"
 					}
 				}
 			},
diff --git a/blocks/small-promo-block/themes/news.json b/blocks/small-promo-block/themes/news.json
index 0a248655ed..d36029187f 100644
--- a/blocks/small-promo-block/themes/news.json
+++ b/blocks/small-promo-block/themes/news.json
@@ -13,8 +13,7 @@
 						"line-height": "var(--body-line-height)"
 					},
 					"link-hover": {
-						"color": "var(--text-color-subtle)",
-						"opacity": 0.8
+						"color": "var(--text-color-subtle)"
 					}
 				}
 			},

From 9036af9b154c384449ea5c9cc938c82d4739b4ae Mon Sep 17 00:00:00 2001
From: Malavika Koppula <mkreddy1110@gmail.com>
Date: Wed, 26 Jul 2023 09:58:47 -0400
Subject: [PATCH 09/10] removed opacity from link-hover

---
 .storybook/themes/news.scss | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss
index ab7ba912c6..4986971609 100644
--- a/.storybook/themes/news.scss
+++ b/.storybook/themes/news.scss
@@ -1582,7 +1582,6 @@
 					components: (
 						link-hover: (
 							color: var(--text-color-subtle),
-							opacity: 0.8,
 						),
 					),
 				),
@@ -1623,7 +1622,6 @@
 						),
 						link-hover: (
 							color: var(--text-color-subtle),
-							opacity: 0.8,
 						),
 					),
 				),
@@ -1881,7 +1879,6 @@
 						),
 						link-hover: (
 							color: var(--text-color-subtle),
-							opacity: 0.8,
 						),
 					),
 				),
@@ -1942,7 +1939,6 @@
 						),
 						link-hover: (
 							color: var(--text-color-subtle),
-							opacity: 0.8,
 						),
 						media-item: (
 							float: right,
@@ -2392,7 +2388,6 @@
 						),
 						link-hover: (
 							color: var(--text-color-subtle),
-							opacity: 0.8,
 						),
 					),
 				),
@@ -2430,7 +2425,6 @@
 						),
 						link-hover: (
 							color: var(--text-color-subtle),
-							opacity: 0.8,
 						),
 					),
 				),
@@ -2750,7 +2744,6 @@
 						),
 						link-hover: (
 							color: var(--text-color-subtle),
-							opacity: 0.8,
 						),
 					),
 				),
@@ -2789,7 +2782,6 @@
 						),
 						link-hover: (
 							color: var(--text-color-subtle),
-							opacity: 0.8,
 						),
 					),
 				),

From 808d50ba8aceca28b1da67cb8472f5949c731f92 Mon Sep 17 00:00:00 2001
From: Malavika Koppula <mkreddy1110@gmail.com>
Date: Wed, 26 Jul 2023 11:37:03 -0400
Subject: [PATCH 10/10] Updated token definitions

---
 blocks/extra-large-promo-block/_index.scss   | 4 ++--
 blocks/large-manual-promo-block/_index.scss  | 4 ++--
 blocks/large-promo-block/_index.scss         | 4 ++--
 blocks/medium-manual-promo-block/_index.scss | 4 ++--
 blocks/medium-promo-block/_index.scss        | 4 ++--
 blocks/small-manual-promo-block/_index.scss  | 4 ++--
 blocks/small-promo-block/_index.scss         | 4 ++--
 7 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/blocks/extra-large-promo-block/_index.scss b/blocks/extra-large-promo-block/_index.scss
index 6072e3b639..f11a8be7de 100644
--- a/blocks/extra-large-promo-block/_index.scss
+++ b/blocks/extra-large-promo-block/_index.scss
@@ -2,8 +2,8 @@
 
 .b-xl-promo {
 	&__img {
-		@include scss.block-properties("xl-manual-promo-img");
-		@include scss.block-components("xl-manual-promo-img");
+		@include scss.block-properties("xl-promo-img");
+		@include scss.block-components("xl-promo-img");
 	}
 	&__icon_label {
 		@include scss.block-components("xl-promo-icon-label");
diff --git a/blocks/large-manual-promo-block/_index.scss b/blocks/large-manual-promo-block/_index.scss
index 522a8b9b76..ebc374dc03 100644
--- a/blocks/large-manual-promo-block/_index.scss
+++ b/blocks/large-manual-promo-block/_index.scss
@@ -2,8 +2,8 @@
 
 .b-large-manual-promo {
 	&__img {
-		@include scss.block-properties("xl-manual-promo-img");
-		@include scss.block-components("xl-manual-promo-img");
+		@include scss.block-properties("large-manual-promo-img");
+		@include scss.block-components("large-manual-promo-img");
 	}
 	&__text {
 		@include scss.block-components("large-manual-promo-text");
diff --git a/blocks/large-promo-block/_index.scss b/blocks/large-promo-block/_index.scss
index 32141ecf4c..89852716b3 100644
--- a/blocks/large-promo-block/_index.scss
+++ b/blocks/large-promo-block/_index.scss
@@ -2,8 +2,8 @@
 
 .b-large-promo {
 	&__img {
-		@include scss.block-properties("xl-manual-promo-img");
-		@include scss.block-components("xl-manual-promo-img");
+		@include scss.block-properties("large-promo-img");
+		@include scss.block-components("large-promo-img");
 	}
 	&__text {
 		@include scss.block-components("large-promo-text");
diff --git a/blocks/medium-manual-promo-block/_index.scss b/blocks/medium-manual-promo-block/_index.scss
index 5c5f23b2d9..ac514283e3 100644
--- a/blocks/medium-manual-promo-block/_index.scss
+++ b/blocks/medium-manual-promo-block/_index.scss
@@ -2,8 +2,8 @@
 
 .b-medium-manual-promo {
 	&__img {
-		@include scss.block-properties("xl-manual-promo-img");
-		@include scss.block-components("xl-manual-promo-img");
+		@include scss.block-properties("medium-manual-promo-img");
+		@include scss.block-components("medium-manual-promo-img");
 	}
 	&--show-image {
 		@include scss.block-properties("medium-manual-promo-show-image");
diff --git a/blocks/medium-promo-block/_index.scss b/blocks/medium-promo-block/_index.scss
index f691cde464..806e3f37e8 100644
--- a/blocks/medium-promo-block/_index.scss
+++ b/blocks/medium-promo-block/_index.scss
@@ -2,8 +2,8 @@
 
 .b-medium-promo {
 	&__img {
-		@include scss.block-properties("xl-manual-promo-img");
-		@include scss.block-components("xl-manual-promo-img");
+		@include scss.block-properties("medium-promo-img");
+		@include scss.block-components("medium-promo-img");
 	}
 	&--show-image {
 		@include scss.block-properties("medium-promo-show-image");
diff --git a/blocks/small-manual-promo-block/_index.scss b/blocks/small-manual-promo-block/_index.scss
index 0f88a7f771..94f7489e83 100644
--- a/blocks/small-manual-promo-block/_index.scss
+++ b/blocks/small-manual-promo-block/_index.scss
@@ -2,8 +2,8 @@
 
 .b-small-manual-promo {
 	&__img {
-		@include scss.block-properties("xl-manual-promo-img");
-		@include scss.block-components("xl-manual-promo-img");
+		@include scss.block-properties("small-manual-promo-img");
+		@include scss.block-components("small-manual-promo-img");
 	}
 	&--above {
 		@include scss.block-properties("small-manual-promo-above");
diff --git a/blocks/small-promo-block/_index.scss b/blocks/small-promo-block/_index.scss
index 006c0eeaae..4b0f1b8f6b 100644
--- a/blocks/small-promo-block/_index.scss
+++ b/blocks/small-promo-block/_index.scss
@@ -2,8 +2,8 @@
 
 .b-small-promo {
 	&__img {
-		@include scss.block-properties("xl-manual-promo-img");
-		@include scss.block-components("xl-manual-promo-img");
+		@include scss.block-properties("small-promo-img");
+		@include scss.block-components("small-promo-img");
 	}
 	&--above {
 		@include scss.block-properties("small-promo-above");