New/template card

packages/assets/css/src/scss/_components/_template-card/_elements/_elements.scss

@@ -0,0 +1,5 @@
+@forward "./template-card";
+@forward "./template-group";
+@forward "./template-hero";
+@forward "./template-actions";
+@forward "./template-content";

packages/assets/css/src/scss/_components/_template-card/_elements/_template-actions.scss

@@ -0,0 +1,54 @@
+@use "sass:map";
+
+@use "../../../_utils/utils" as *;
+
+/// Build Template Actions
+///
+/// @type block
+/// @author WPMU DEV
+///
+/// @param {String} $block - Main block name
+@mixin build-actions($block) {
+	// DIR: Left to right.
+	// THEME: None.
+	@include sui-class($rtl: false, $theme: null) {
+		@include block($block) {
+			@include element(actions) {
+				background: $color-black-a70;
+				opacity: 0;
+				inset: 0;
+				pointer-events: none;
+				position: absolute;
+				transition: ease all 0.2s;
+
+				@include modifier(wrapper) {
+					position: absolute;
+					display: flex;
+					gap: $spacing-md;
+					flex-direction: column;
+					align-items: stretch;
+					justify-content: center;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+				}
+
+				.sui-button {
+					margin: 0;
+				}
+			}
+		}
+	}
+
+	// DIR: Right to left.
+	// THEME: None.
+	@include sui-class($rtl: true, $theme: null) {
+		@include block($block) {
+			@include element(actions) {
+				.sui-button {
+					margin: 0;
+				}
+			}
+		}
+	}
+}

packages/assets/css/src/scss/_components/_template-card/_elements/_template-card.scss

@@ -0,0 +1,35 @@
+@use "sass:map";
+
+@use "../../../_utils/utils" as *;
+
+/// Build Template Card
+///
+/// @type block
+/// @author WPMU DEV
+///
+/// @param {String} $block - Main block name
+@mixin build-card($block) {
+	// DIR: Left to right.
+	// THEME: None.
+	@include sui-class($rtl: false, $theme: null) {
+		@include block($block) {
+			flex: 1;
+			border-radius: $border-radius-md;
+			transition: box-shadow 0.2s ease-in-out;
+			box-shadow: 0 0 0 $border-width-sm $color-grey-10;
+			overflow: hidden;
+
+			@include media(min-width, sm) {
+				max-width: $template-card-width;
+			}
+		}
+	}
+
+	// DIR: Left to right.
+	// THEME: Dark.
+	@include sui-class($rtl: false, $theme: dark) {
+		@include block($block) {
+			box-shadow: 0 0 0 $border-width-sm $color-base-black;
+		}
+	}
+}

packages/assets/css/src/scss/_components/_template-card/_elements/_template-content.scss

@@ -0,0 +1,52 @@
+@use "sass:map";
+
+@use "../../../_utils/utils" as *;
+
+/// Build Template Content
+///
+/// @type block
+/// @author WPMU DEV
+///
+/// @param {String} $block - Main block name
+@mixin build-content($block) {
+	// DIR: Left to right.
+	// THEME: None.
+	@include sui-class($rtl: false, $theme: null) {
+		@include block($block) {
+			@include element(content) {
+				display: flex;
+				flex-direction: column;
+				gap: $spacing-sm;
+				padding: $spacing-lg;
+				border-top: $border-width-sm solid $color-grey-10;
+
+				@include modifier(heading, body) {
+					display: -webkit-box;
+					line-height: $font-height-sm;
+					-webkit-line-clamp: 1;
+					-webkit-box-orient: vertical;
+					overflow: hidden;
+				}
+
+				@include modifier(heading) {
+					font-weight: $font-weight-md;
+				}
+
+				@include modifier(body) {
+					-webkit-line-clamp: 2;
+					margin: 0;
+				}
+			}
+		}
+	}
+
+	// DIR: Left to right.
+	// THEME: Dark.
+	@include sui-class($rtl: false, $theme: dark) {
+		@include block($block) {
+			@include element(content) {
+				border-color: $color-base-black;
+			}
+		}
+	}
+}

packages/assets/css/src/scss/_components/_template-card/_elements/_template-group.scss

@@ -0,0 +1,31 @@
+@use "sass:map";
+
+@use "../../../_utils/utils" as *;
+
+/// Build Template Group
+///
+/// @type block
+/// @author WPMU DEV
+///
+/// @param {String} $block - Main block name
+@mixin build-group($block) {
+	// DIR: Left to right.
+	// THEME: None.
+	@include sui-class($rtl: false, $theme: null) {
+		@include block($block) {
+			@include element(group) {
+				display: flex;
+				flex-direction: column;
+				gap: $spacing-xl;
+
+				@include media(min-width, sm) {
+					flex-direction: row;
+				}
+
+				.sui-#{$block} {
+					cursor: pointer;
+				}
+			}
+		}
+	}
+}

packages/assets/css/src/scss/_components/_template-card/_elements/_template-hero.scss

@@ -0,0 +1,81 @@
+@use "sass:map";
+
+@use "../../../_utils/utils" as *;
+
+/// Build Template Hero
+///
+/// @type block
+/// @author WPMU DEV
+///
+/// @param {String} $block - Main block name
+@mixin build-hero($block) {
+	// DIR: Left to right.
+	// THEME: None.
+	@include sui-class($rtl: false, $theme: null) {
+		@include block($block) {
+			@include element(hero) {
+				position: relative;
+				padding-top: 80%;
+				height: 0;
+				overflow: hidden;
+				background-color: $color-grey-02;
+
+				.sui-tag {
+					position: absolute;
+					right: $spacing-md;
+					top: $spacing-md;
+					margin: 0;
+				}
+
+				@include modifier(media, icon) {
+					position: absolute;
+					inset: 0;
+					width: 100%;
+					height: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+
+				@include modifier(icon) {
+					color: $color-grey-50;
+					z-index: -1;
+				}
+
+				@include modifier(media) {
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+
+					img {
+						width: auto;
+						max-width: unset;
+						height: 100%;
+					}
+				}
+			}
+		}
+	}
+
+	// DIR: Right to left.
+	// THEME: None.
+	@include sui-class($rtl: true, $theme: null) {
+		@include block($block) {
+			@include element(hero) {
+				@include modifier(media) {
+					right: -50%;
+				}
+			}
+		}
+	}
+
+	// DIR: Left to right.
+	// THEME: Dark.
+	@include sui-class($rtl: false, $theme: dark) {
+		@include block($block) {
+			@include element(hero) {
+				background-color: $color-base-white;
+			}
+		}
+	}
+}

packages/assets/css/src/scss/_components/_template-card/_states/_state-checked.scss

@@ -0,0 +1,31 @@
+@use "sass:map";
+
+@use "../../../_utils/utils" as *;
+
+/// Build Template Checked
+///
+/// @type block
+/// @author WPMU DEV
+///
+/// @param {String} $block - Main block name
+@mixin build-checked($block) {
+	// DIR: Left to right.
+	// THEME: None.
+	@include sui-class($rtl: false, $theme: null) {
+		@include block($block) {
+			@include modifier(checked) {
+				box-shadow: 0 0 0 $border-width-md $color-primary-50;
+			}
+		}
+	}
+
+	// DIR: Left to right.
+	// THEME: Dark.
+	@include sui-class($rtl: false, $theme: dark) {
+		@include block($block) {
+			@include modifier(checked) {
+				box-shadow: 0 0 0 $border-width-md $color-base-black;
+			}
+		}
+	}
+}

packages/assets/css/src/scss/_components/_template-card/_states/_state-hover-focus.scss

@@ -0,0 +1,31 @@
+@use "sass:map";
+
+@use "../../../_utils/utils" as *;
+
+/// Build Template Hover and focus
+///
+/// @type block
+/// @author WPMU DEV
+///
+/// @param {String} $block - Main block name
+@mixin build-hover-focus($block) {
+	// DIR: Left to right.
+	// THEME: None.
+	@include sui-class($rtl: false, $theme: null) {
+		@include block($block) {
+			@include modifier(hover, focus) {
+				box-shadow: 0px $spacing-sm $spacing-md 0px $color-shadow-dark,
+					0px $spacing-xs $template-card-spacing 0px $color-shadow-light,
+					0px $spacing-md $spacing-lg 0px $color-shadow-default,
+					0 0 0 $border-width-md transparent;
+			}
+
+			@include modifier(hover, focus) {
+				@include modifies-element(actions) {
+					opacity: 1;
+					pointer-events: all;
+				}
+			}
+		}
+	}
+}

packages/assets/css/src/scss/_components/_template-card/_states/_states.scss

@@ -0,0 +1,2 @@
+@forward "./state-hover-focus";
+@forward "./state-checked";

packages/assets/css/src/scss/_components/_template-card/_template-card.scss

@@ -0,0 +1,11 @@
+@use "./_elements/elements" as sui-template-card--element;
+@use "./_states/states" as sui-template-card--state;
+
+@include sui-template-card--element.build-card(template-card);
+@include sui-template-card--element.build-group(template-card);
+@include sui-template-card--element.build-actions(template-card);
+@include sui-template-card--element.build-content(template-card);
+@include sui-template-card--element.build-hero(template-card);
+
+@include sui-template-card--state.build-hover-focus(template-card);
+@include sui-template-card--state.build-checked(template-card);

packages/assets/css/src/scss/_utils/_tokens.scss

@@ -637,6 +637,8 @@ $tag-font-size: 12px - 2px;
 $tag-font-spacing: 0px;
 $tag-font-height: 16px - 4px;
 $tag-font-weight: 700;
+$template-card-width: 260px;
+$template-card-spacing: 20px;
 $toggle-spacing-xs: 2px;
 $toggle-spacing-lg: 48px;
 $toggle-size-width-sm: 14px;

packages/assets/css/src/scss/blocks/sui-components.scss

@@ -60,3 +60,4 @@
 @forward "../_components/_wpmudev/wpmudev";
 @forward "../_components/_page-header/page-header";
 @forward "../_components/_skeleton/skeleton";
+@forward "../_components/_template-card/template-card";

packages/assets/css/src/tokens/template-card.json

@@ -0,0 +1,12 @@
+{
+	"template-card": {
+		"width": {
+			"value": "260px",
+			"type": "width"
+		},
+		"spacing": {
+			"value": "20px",
+			"type": "spacing"
+		}
+	}
+}

packages/hooks/src/index.ts

@@ -36,6 +36,9 @@ export { useDebounce } from "./use-debounce"
 // useResponsive
 export { useResponsive } from "./use-responsive"
 
+// useIsOverflowing
+export { useIsOverflowing } from "./use-is-overflowing"
+
 // useScrollable
 export { useScrollable } from "./use-scrollable"