THEMES-920 Gallery + Lead Art | Update autoplay, progress indicator, …

…carousel, and close controls in focus (expand) view
WPMedia · Aug 10, 2023 · 4d99146 · 4d99146
1 parent b933214
commit 4d99146
Show file tree

Hide file tree

Showing 13 changed files with 318 additions and 562 deletions.
diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss
diff --git a/blocks/article-body-block/_index.scss b/blocks/article-body-block/_index.scss
@@ -66,31 +66,16 @@
 	&__gallery {
 		@include scss.block-components("article-body-gallery");
 		@include scss.block-properties("article-body-gallery");
-	}
-
-	&__gallery-additional-next {
-		@include scss.block-components("article-body-gallery-additional-next");
-		@include scss.block-properties("article-body-gallery-additional-next");
-	}
-
-	&__gallery-additional-previous {
-		@include scss.block-components("article-body-gallery-additional-previous");
-		@include scss.block-properties("article-body-gallery-additional-previous");
-	}
 
-	&__full-screen-icon {
-		@include scss.block-components("article-body-full-screen-icon");
-		@include scss.block-properties("article-body-full-screen-icon");
-	}
-
-	&__start-icon {
-		@include scss.block-components("article-body-start-icon");
-		@include scss.block-properties("article-body-start-icon");
-	}
+		&:fullscreen {
+			@include scss.block-components("article-body-gallery-fullscreen");
+			@include scss.block-properties("article-body-gallery-fullscreen");
+		}
 
-	&__stop-icon {
-		@include scss.block-components("article-body-stop-icon");
-		@include scss.block-properties("article-body-stop-icon");
+		&__track-button {
+			@include scss.block-components("article-body-gallery-track-button");
+			@include scss.block-properties("article-body-gallery-track-button");
+		}
 	}
 
 	&__image-wrapper {

diff --git a/blocks/article-body-block/chains/article-body/default.jsx b/blocks/article-body-block/chains/article-body/default.jsx
@@ -3,6 +3,7 @@ import PropTypes from "@arc-fusion/prop-types";
 import { useFusionContext } from "fusion:context";
 
 import {
+	Button,
 	Carousel,
 	Conditional,
 	Divider,
@@ -230,14 +231,23 @@ function parseArticleItem(item, index, arcSite, phrases, id, customFields) {
 						label={item?.description?.basic || "Gallery"}
 						slidesToShow={1}
 						additionalNextButton={
-							<button type="button" className={`${BLOCK_CLASS_NAME}__gallery-additional-next`}>
+							<Carousel.Button type="button">
 								<Icon name="ChevronRight" />
-							</button>
+							</Carousel.Button>
+						}
+						fullScreenMinimizeButton={
+							<Button
+								variant="secondary-reverse"
+								type="button"
+								className={`${BLOCK_CLASS_NAME}__carousel__close-button`}
+							>
+								<Icon name="Close" />
+							</Button>
 						}
 						additionalPreviousButton={
-							<button type="button" className={`${BLOCK_CLASS_NAME}__gallery-additional-previous`}>
+							<Carousel.Button type="button">
 								<Icon name="ChevronLeft" />
-							</button>
+							</Carousel.Button>
 						}
 						autoplayPhraseLabels={{
 							start: phrases.t("global.gallery-autoplay-label-start"),
@@ -246,24 +256,31 @@ function parseArticleItem(item, index, arcSite, phrases, id, customFields) {
 						enableAutoplay
 						enableFullScreen
 						fullScreenShowButton={
-							<button type="button">
-								<Icon name="Fullscreen" className={`${BLOCK_CLASS_NAME}__full-screen-icon`} />
+							<Carousel.Button type="button">
+								<Icon name="Fullscreen" />
 								{phrases.t("global.gallery-expand-button")}
-							</button>
+							</Carousel.Button>
 						}
-						showAdditionalSlideControls
 						showLabel
-						startAutoplayIcon={<Icon name="Play" className={`${BLOCK_CLASS_NAME}__start-icon`} />}
+						startAutoplayIcon={<Icon name="Play" />}
 						startAutoplayText={phrases.t("global.gallery-autoplay-button")}
-						stopAutoplayIcon={<Icon name="Pause" className={`${BLOCK_CLASS_NAME}__stop-icon`} />}
+						stopAutoplayIcon={<Icon name="Pause" />}
 						stopAutoplayText={phrases.t("global.gallery-pause-autoplay-button")}
 						nextButton={
-							<Carousel.Button id={key} label="Next Slide">
+							<Carousel.Button
+								id={key}
+								label="Next Slide"
+								className={`${BLOCK_CLASS_NAME}__gallery__track-button`}
+							>
 								<Icon name="ChevronRight" />
 							</Carousel.Button>
 						}
 						previousButton={
-							<Carousel.Button id={key} label="Previous Slide">
+							<Carousel.Button
+								id={key}
+								label="Previous Slide"
+								className={`${BLOCK_CLASS_NAME}__gallery__track-button`}
+							>
 								<Icon name="ChevronLeft" />
 							</Carousel.Button>
 						}

diff --git a/blocks/article-body-block/chains/article-body/default.test.jsx b/blocks/article-body-block/chains/article-body/default.test.jsx
@@ -2,7 +2,6 @@ import React from "react";
 import { mount } from "enzyme";
 import { useFusionContext } from "fusion:context";
 import { isServerSide } from "@wpmedia/arc-themes-components";
-
 import ArticleBodyChain from "./default";
 
 jest.mock("fusion:environment", () => ({

diff --git a/blocks/article-body-block/themes/news.json b/blocks/article-body-block/themes/news.json
@@ -12,18 +12,12 @@
 						"display": "block",
 						"overflow": "initial"
 					},
-					"carousel-actions": {
-						"display": "flex"
-					},
-					"carousel-track": {
-						"gap": "initial",
-						"max-width": "initial"
-					},
-					"carousel-button-next": {
-						"background-color": "transparent"
+					"media-item-fig-caption": {
+						"background-color": "var(--global-white)",
+						"line-height": "var(--body-line-height-5)"
 					},
-					"carousel-button-previous": {
-						"background-color": "transparent"
+					"icon": {
+						"fill": "currentColor"
 					}
 				}
 			},
@@ -115,105 +109,34 @@
 			"desktop": {}
 		}
 	},
-	"article-body-full-screen-icon": {
-		"styles": {
-			"default": {
-				"fill": "var(--text-color)",
-				"height": "var(--global-spacing-4)",
-				"width": "var(--global-spacing-4)"
-			},
-			"desktop": {}
-		}
-	},
-	"article-body-gallery": {
+	"article-body-gallery-fullscreen": {
 		"styles": {
 			"default": {
 				"components": {
-					"icon": {
-						"fill": "var(--global-white)",
-						"height": "var(--global-spacing-8)",
-						"width": "var(--global-spacing-8)"
-					},
-					"carousel-button": {
-						"background-color": "transparent",
-						"box-shadow": "none"
-					},
-					"carousel-expand-autoplay-container": {
-						"gap": "var(--global-spacing-4)"
-					},
-					"carousel-button-enter-full-screen": {
-						"background-color": "transparent",
-						"border": "none",
-						"box-shadow": "none",
-						"color": "var(--text-color)",
-						"font-size": "var(--body-font-size-small)",
-						"height": "auto",
-						"width": "auto"
-					},
-					"carousel-button-toggle-auto-play": {
-						"background-color": "transparent",
-						"box-shadow": "none",
-						"color": "var(--text-color)",
-						"font-size": "var(--body-font-size-small)",
-						"height": "auto",
-						"width": "auto"
-					},
-					"carousel-image-counter": {
-						"font-size": "var(--body-font-size-small)"
-					},
-					"media-item": {
-						"background-color": "var(--global-neutral-9)",
-						"gap": 0,
-						"justify-content": "center",
-						"width": "100%"
-					},
 					"media-item-fig-caption": {
-						"background-color": "var(--global-white)",
-						"padding-top": "var(--global-spacing-2)"
+						"padding": "0 var(--global-spacing-5)"
 					}
 				}
 			},
 			"desktop": {}
 		}
 	},
-	"article-body-gallery-additional-next": {
-		"styles": {
-			"default": {
-				"border": "none",
-				"display": "none",
-				"height": "var(--global-spacing-6)",
-				"width": "var(--global-spacing-6)",
-				"components": {
-					"icon": {
-						"fill": "var(--text-color)",
-						"height": "var(--global-spacing-4)",
-						"width": "var(--global-spacing-4)"
-					}
-				}
-			},
-			"desktop": {
-				"display": "block"
-			}
-		}
-	},
-	"article-body-gallery-additional-previous": {
+	"article-body-gallery-track-button": {
 		"styles": {
 			"default": {
-				"border": "none",
-				"display": "none",
-				"height": "var(--global-spacing-6)",
-				"width": "var(--global-spacing-6)",
+				"color": "var(--global-white)",
 				"components": {
+					"button-hover": {
+						"color": "var(--global-neutral-3)"
+					},
 					"icon": {
-						"fill": "var(--text-color)",
-						"height": "var(--global-spacing-4)",
-						"width": "var(--global-spacing-4)"
+						"fill": "currentColor",
+						"height": "var(--global-spacing-8)",
+						"width": "var(--global-spacing-8)"
 					}
 				}
 			},
-			"desktop": {
-				"display": "block"
-			}
+			"desktop": {}
 		}
 	},
 	"article-body-h2": {
@@ -271,18 +194,6 @@
 			"desktop": {}
 		}
 	},
-	"article-body-image": {
-		"styles": {
-			"default": {
-				"components": {
-					"image": {
-						"max-width": "100%"
-					}
-				}
-			},
-			"desktop": {}
-		}
-	},
 	"article-body-image-float-left": {
 		"styles": {
 			"default": {
@@ -307,6 +218,7 @@
 		"styles": {
 			"default": {
 				"align-items": "center",
+				"background-color": "var(--global-black)",
 				"display": "flex",
 				"justify-content": "center",
 				"max-height": "75vh",
@@ -374,26 +286,6 @@
 			"desktop": {}
 		}
 	},
-	"article-body-start-icon": {
-		"styles": {
-			"default": {
-				"fill": "var(--text-color)",
-				"height": "var(--global-spacing-4)",
-				"width": "var(--global-spacing-4)"
-			},
-			"desktop": {}
-		}
-	},
-	"article-body-stop-icon": {
-		"styles": {
-			"default": {
-				"fill": "var(--text-color)",
-				"height": "var(--global-spacing-4)",
-				"width": "var(--global-spacing-4)"
-			},
-			"desktop": {}
-		}
-	},
 	"article-body-table": {
 		"styles": {
 			"default": {

diff --git a/blocks/gallery-block/_index.scss b/blocks/gallery-block/_index.scss
@@ -10,6 +10,22 @@
 		@include scss.block-components("gallery-image-wrapper");
 		@include scss.block-properties("gallery-image-wrapper");
 	}
+
+	&__track-button {
+		@include scss.block-components("gallery-track-button");
+		@include scss.block-properties("gallery-track-button");
+	}
+
+	&__close-button {
+		@include scss.block-components("gallery-close-button");
+		@include scss.block-properties("gallery-close-button");
+	}
+
+	&:fullscreen {
+		@include scss.block-components("gallery-fullscreen");
+		@include scss.block-properties("gallery-fullscreen");
+	}
+
 	@include scss.block-components("gallery");
 	@include scss.block-properties("gallery");
 }