umberto 7.0.2 → 8.0.1

package/themes/umberto/layout/gloria/_components/tooltip-popover/_style.scss

@@ -0,0 +1,194 @@
+@use "@gloria/layout/_mixins.scss" as *;
+
+.c-tooltip-popover {
+	--tooltip-background-color: var(--color-secondary-600);
+	--tooltip-text-color: var(--color-gray-100);
+
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-2);
+	position: absolute;
+	background-color: var(--tooltip-background-color);
+	color: var(--tooltip-text-color);
+	padding: var(--spacing-0-5) var(--spacing-2);
+	margin: 0;
+	border-radius: var(--radius-1);
+	line-height: var(--font-size-2xl);
+	font-size: var(--font-size-xs);
+	z-index: var(--z-index-tooltip);
+	opacity: 0;
+	visibility: hidden;
+	max-width: 22rem;
+	min-height: 36px;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+	transform: translateY(-4px);
+	pointer-events: none;
+	will-change: transform, opacity, visibility;
+	transition:
+		opacity var(--duration-normal) var(--cbuc-cubic-out),
+		visibility var(--duration-normal) var(--cbuc-cubic-out),
+		transform var(--duration-normal) var(--cbuc-cubic-out);
+
+	@include mobile {
+		&[data-disable-on-mobile="true"] {
+			display: none;
+		}
+	}
+
+	&:has(.c-tooltip-popover__icon) {
+		padding: var(--spacing-1) var(--spacing-3);
+	}
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: -10px;
+		left: -10px;
+		right: -10px;
+		bottom: -10px;
+		z-index: -1;
+	}
+
+	.c-icon {
+		position: relative;
+		top: -0.5px;
+	}
+
+	&__icon {
+		display: inline-flex;
+		padding: 3px;
+		aspect-ratio: 1;
+		color: var(--tooltip-text-color);
+		border: 1px solid currentColor;
+		border-radius: 100%;
+		flex-shrink: 0;
+	}
+
+	&__text {
+		flex-grow: 1;
+		line-height: 1.1rem;
+	}
+
+	&__close-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--spacing-4);
+		height: var(--spacing-4);
+		font-size: var(--font-size-xs);
+		background: none;
+		border: none;
+		padding: 0;
+		cursor: pointer;
+		color: var(--tooltip-text-color);
+		opacity: 1;
+		transition: opacity var(--duration-normal) ease;
+		margin-left: auto;
+		flex-shrink: 0;
+
+		&:hover,
+		&:focus {
+			opacity: 0.7;
+		}
+	}
+
+	&__arrow {
+		position: absolute;
+		width: 0;
+		height: 0;
+		border-style: solid;
+	}
+
+	&:not(.is-mounted) {
+		width: 0;
+		height: 0;
+		padding: 0;
+	}
+
+	&.is-visible {
+		opacity: 1;
+		visibility: visible;
+		transform: translateY(0);
+		pointer-events: auto;
+	}
+
+	&--top {
+		margin-bottom: 8px;
+		transform: translateY(4px);
+
+		.c-tooltip-popover__arrow {
+			bottom: -7px;
+			left: 50%;
+			transform: translateX(-50%);
+			border-width: 8px 8px 0 8px;
+			border-color: var(--tooltip-background-color) transparent transparent transparent;
+		}
+	}
+
+	&--bottom {
+		margin-top: 8px;
+		transform: translateY(-4px);
+
+		.c-tooltip-popover__arrow {
+			top: -7px;
+			left: 50%;
+			transform: translateX(-50%);
+			border-width: 0 8px 8px 8px;
+			border-color: transparent transparent var(--tooltip-background-color) transparent;
+		}
+	}
+
+	&--top-start {
+		margin-bottom: 8px;
+		transform: translateY(4px);
+
+		.c-tooltip-popover__arrow {
+			bottom: -7px;
+			border-width: 8px 8px 0 8px;
+			border-color: var(--tooltip-background-color) transparent transparent transparent;
+		}
+	}
+
+	&--bottom-start {
+		margin-top: 8px;
+		transform: translateY(-4px);
+
+		.c-tooltip-popover__arrow {
+			top: -7px;
+			border-width: 0 8px 8px 8px;
+			border-color: transparent transparent var(--tooltip-background-color) transparent;
+		}
+	}
+
+	&--top-end {
+		margin-bottom: 8px;
+		transform: translateY(4px);
+
+		.c-tooltip-popover__arrow {
+			bottom: -7px;
+			border-width: 8px 8px 0 8px;
+			border-color: var(--tooltip-background-color) transparent transparent transparent;
+		}
+	}
+
+	&--bottom-end {
+		margin-top: 8px;
+		transform: translateY(-4px);
+
+		.c-tooltip-popover__arrow {
+			top: -7px;
+			border-width: 0 8px 8px 8px;
+			border-color: transparent transparent var(--tooltip-background-color) transparent;
+		}
+	}
+
+	&--dark {
+		--tooltip-background-color: var(--color-secondary-700);
+		--tooltip-text-color: var(--color-common-white);
+
+		.c-tooltip-popover__icon {
+			color: var(--color-warning-light);
+		}
+	}
+}

package/themes/umberto/layout/gloria/_components/tooltip-popover/index.pug

@@ -0,0 +1,38 @@
+//- After editing this file, make sure you updated `createTooltipPopover` JS function.
+//- it should emit identical HTML structure as this pug file.
+mixin tooltip-popover({ id, text, mode, disableOnMobile = true, position = 'bottom', debounceDelay = 300, variant, className, showCloseButton = false, destroyOnHide = false, icon })
+	+preload-svg-spritesheet-icon({ icon: 'close' })
+	+preload-svg-spritesheet-icon({ icon: 'bulb' })
+
+	if icon
+		+preload-svg-spritesheet-icon({ icon })
+
+	span.c-tooltip-popover.js-tooltip-popover(
+		id=id,
+		class={
+			[className]: !!className,
+			[`c-tooltip-popover--${variant}`]: !!variant,
+			'c-tooltip-popover--closable': showCloseButton,
+			'c-tooltip-popover--with-icon': !!icon
+		},
+		role='tooltip',
+		data-position=position,
+		data-mode=mode,
+		data-disable-on-mobile=disableOnMobile ? 'true' : 'false',
+		data-destroy-on-hide=destroyOnHide ? 'true' : 'false',
+		data-debounce-delay=debounceDelay,
+	)
+		if icon
+			+svg-icon({ icon, className: 'c-tooltip-popover__icon' })
+
+		span.c-tooltip-popover__text= text
+		span.c-tooltip-popover__arrow
+
+		//- In some scenarios, the tooltip is placed within <button> or <a> elements.
+		//- Using <button> tag seems to be glitchy in Umberto which breaks HTML structure.
+		if showCloseButton
+			span.c-tooltip-popover__close-button.js-tooltip-close-button(
+				role="button",
+				aria-label="Close"
+			)
+				+svg-icon({ icon: 'close', className: 'c-tooltip-popover__close-icon' })

package/themes/umberto/layout/gloria/_head/head-preloads.pug

@@ -0,0 +1,32 @@
+mixin head-preloads()
+	-
+		const preloadResources = [
+			// Stylesheets
+			{ type: 'style', path: 'css/styles.css' },
+			{ type: 'style', url: 'https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css' },
+
+			// Fonts
+			{ type: 'font', path: 'fonts/Public_Sans/PublicSans-VariableFont_wght.woff2' },
+			{ type: 'font', path: 'fonts/Public_Sans/PublicSans-Italic-VariableFont_wght.woff2' },
+			{ type: 'font', path: 'fonts/Mulish/Mulish-VariableFont_wght.woff2' },
+			{ type: 'font', path: 'fonts/Mulish/Mulish-Italic-VariableFont_wght.woff2' },
+
+			// Scripts
+			{ type: 'script', path: 'scripts/app.js' }
+		];
+
+	//- Preconnect to CDN
+	link(rel='preconnect', href='https://cdn.jsdelivr.net', crossorigin='anonymous')
+
+	//- Generate preload links
+	each resource in preloadResources
+		- const url = resource.url || relative_url(page.path, `assets/${ umbertoVersion }/gloria/${resource.path}`);
+
+		if resource.type === 'font'
+			link(rel='preload', href=url, as=resource.type, crossorigin='anonymous')
+		else
+			link(rel='preload', href=url, as=resource.type)
+
+	if projectLocals
+		each path in projectLocals.extraStylePaths
+			link(rel='preload', href=relative_url(page.path, path), as='style')

package/themes/umberto/layout/gloria/{_partial → _head}/head.pug

@@ -1,3 +1,5 @@
+include head-preloads
+
 meta( charset='utf-8' )
 meta( name='viewport' content='width=device-width, initial-scale=1' )
 
@@ -42,6 +44,10 @@ if ( page[ 'dc-description' ] || ogConfig.description )
 if page.BASE_PATH && page.BASE_PATH !== '.' && !page.BASE_PATH.includes( 'latest' )
 	link( rel = 'canonical' href = page.canonicalUrlBeginning + page.path.replace( page.BASE_PATH, projectLocals.latestBasePath ) )
 
++head-preloads()
+
+script(src=relative_url(page.path, pathJoin( 'assets', umbertoVersion, 'gloria/scripts/app.js')))
+
 if page.BASE_PATH
 	//- When a project does not define its own assets, let's use the default ones (from a theme).
 	//- See: #1256.
@@ -52,7 +58,7 @@ if page.BASE_PATH
 	link( rel="apple-touch-icon" type="image/png" href=relative_url( page.path, pathJoin( basePath, 'assets/img/favicons/200x200.png' ) ) )
 
 if ( docSearchConfig && docSearchConfig.isEnabled && !disableSearch && (!projectLocals || !projectLocals.disableSearch) )
-	link( rel = 'stylesheet', href = docSearchConfig.css )
+	link( rel = 'stylesheet', href = docSearchConfig.css, type='text/css' media='all' )
 
 link( rel = 'stylesheet', href = relative_url( page.path, 'assets/' + umbertoVersion + '/gloria/css/styles.css' ), type='text/css' media='all' )
 
@@ -63,8 +69,6 @@ if projectLocals
 if page.isSnippetPage
 	//UMBERTO: SNIPPET: CSS
 
-include vwo
-include google-tag-manager
-include google-analytics
+include ../_trackers/index
 
 block projectVersion

package/themes/umberto/layout/gloria/_head/index.pug

@@ -0,0 +1 @@
+include ./head

package/themes/umberto/layout/gloria/_modules/algolia-search/_style.scss

@@ -0,0 +1,202 @@
+@use "@gloria/layout/_mixins.scss" as *;
+@use "@gloria/a11y/_mixins.scss" as *;
+
+.DocSearch.DocSearch-Button {
+	@include a11y-keyboard-focus-ring( true, false,
+		background-color var(--duration-normal) var(--cbuc-cubic-out),
+		color var(--duration-normal) var(--cbuc-cubic-out)
+	);
+
+	@include mobile {
+		display: flex;
+		justify-content: center;
+		padding: var(--spacing-2);
+		aspect-ratio: 1;
+		min-width: 40px;
+		height: 40px;
+		color: var(--color-text-secondary);
+		border: 1px solid rgba(41, 52, 64, 0.2);
+		box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.016);
+		border-radius: var(--radius-1);
+		background: transparent;
+
+		&:hover,
+		&:active {
+			background-color: rgba(41, 52, 64, 0.08);
+			border: 1px solid rgba(41, 52, 64, 0.2);
+		}
+
+		&:active {
+			color: var(--color-text-primary);
+			background-color: rgba(41, 52, 64, 0.16);
+			border: 1px solid rgba(41, 52, 64, 0.3);
+		}
+
+		.DocSearch-Button-Placeholder,
+		.DocSearch-Button-Keys {
+			display: none;
+		}
+
+		.DocSearch-Search-Icon {
+			width: var(--font-size-base);
+			height: var(--font-size-base);
+			color: currentColor;
+			margin: 0;
+		}
+	}
+}
+
+.l-layout {
+	--docsearch-spacing: var(--spacing-6);
+	--docsearch-highlight-color: hsl(263, 59%, 52%);
+	--docsearch-searchbox-shadow: inset 0 0 0 2px hsl(263, 59%, 52%);
+	--docsearch-hit-background: var(--color-gray-100);
+	--docsearch-modal-background: white;
+	--docsearch-icon-color: var(--color-text-secondary);
+
+	.DocSearch-Container {
+		z-index: 99999;
+		position: fixed;
+	}
+
+	.DocSearch-Hit {
+		--docsearch-hit-shadow: none;
+		--docsearch-hit-background: var(--color-gray-200);
+		--docsearch-hit-color: var(--color-text-primary);
+
+		padding-bottom: var(--spacing-2);
+
+		.DocSearch-Hit-path {
+			--docsearch-muted-color: var(--color-text-secondary);
+		}
+	}
+
+	.DocSearch-Hits mark {
+		--docsearch-highlight-color: var(--color-primary-500);
+	}
+
+	.DocSearch-Hit-source {
+		--docsearch-highlight-color: var(--color-text-primary);
+	}
+
+	.DocSearch-Help,
+	.DocSearch-Label {
+		--docsearch-muted-color: var(--color-text-secondary);
+	}
+
+	.DocSearch-Commands {
+		display: none;
+	}
+
+	.DocSearch-HitsFooter {
+		--docsearch-spacing: var(--spacing-1);
+	}
+
+	.DocSearch-Logo svg {
+		--docsearch-logo-color: var(--color-text-secondary);
+
+		.cls-1,
+		.cls-2 {
+			fill: var(--color-text-secondary) !important;
+		}
+	}
+
+	/* Search button */
+	.DocSearch.DocSearch-Button {
+		height: 40px;
+		background-color: var(--color-common-white);
+		border-radius: var(--radius-1);
+		border: 1px solid rgba(41, 52, 64, 0.2);
+		box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.016);
+
+		@include a11y-keyboard-focus-ring(true, false,
+			background-color var(--duration-normal) var(--cbuc-cubic-out),
+			color var(--duration-normal) var(--cbuc-cubic-out)
+		);
+
+		@include desktop {
+			min-width: 200px;
+			padding-left: var(--spacing-4);
+			padding-right: var(--spacing-4);
+		}
+
+		&:hover {
+			background-color: rgba(41, 52, 64, 0.08);
+			border: 1px solid rgba(41, 52, 64, 0.2);
+		}
+
+		.DocSearch-Button-Placeholder {
+			padding-left: var(--spacing-2);
+			line-height: 1;
+			color: var(--color-text-secondary);
+			font-weight: var(--font-weight-regular);
+		}
+
+		svg {
+			color: var(--color-text-secondary);
+		}
+
+		.DocSearch-Button-Keys {
+			display: none;
+		}
+
+		svg {
+			display: inline-block;
+			vertical-align: middle;
+			aspect-ratio: 1;
+			width: 1em;
+			height: 1em;
+			line-height: 1em;
+		}
+	}
+
+	.DocSearch-Cancel {
+		@media (max-width: 768px) {
+			margin-left: var(--spacing-3);
+			padding: 0 var(--spacing-3);
+			font-size: 1.5em !important;
+		}
+	}
+
+	/* Fallback until algolia button wont be loaded. */
+	.c-algolia-search:not(:has(.DocSearch)) {
+		position: relative;
+		height: 40px;
+		min-width: 200px;
+		background-color: var(--color-common-white);
+		border-radius: var(--radius-1);
+		border: 1px solid rgba(41, 52, 64, 0.2);
+		box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.016);
+
+		@include mobile {
+			min-width: 40px;
+		}
+
+		&:before {
+			content: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.386 14.386 4.088 4.088zA7.533 7.533 0 1 1 3.733 3.733a7.533 7.533 0 0 1 10.653 10.653" stroke="%23585b5f" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round" /></svg>');
+			width: 16px;
+			height: 16px;
+			display: block;
+			position: absolute;
+			top: 10px;
+			left: 17px;
+
+			@include mobile {
+				left: 12px;
+			}
+		}
+
+		&:after {
+			@include desktop {
+				content: 'Search';
+				position: absolute;
+				top: 0;
+				left: 33px;
+				line-height: 40px;
+				padding-left: var(--spacing-2);
+				color: var(--color-text-secondary);
+				font-weight: var(--font-weight-regular);
+			}
+		}
+	}
+}

package/themes/umberto/layout/gloria/_modules/algolia-search/_third-party.scss

@@ -0,0 +1 @@
+@import url('https://cdn.jsdelivr.net/npm/@docsearch/css@3.9.0/dist/style.min.css') layer(third-party);

package/themes/umberto/layout/gloria/_modules/algolia-search/index.pug

@@ -0,0 +1,39 @@
+mixin algolia-search
+	-
+		const truncatedConfig = {
+			apiKey: docSearchConfig.apiKey,
+			appId: docSearchConfig.appId,
+			indexName: docSearchConfig.indexName,
+			disableUserPersonalization: true,
+			insights: true,
+			searchParameters: {
+				hitsPerPage: 250,
+				attributesToRetrieve: '*'
+			},
+			translations: {
+				modal: {
+					searchBox: {
+						cancelButtonText: '✕',
+					}
+				}
+			}
+		};
+
+		const filters = {
+			slug: page.projectName,
+			tags: projectLocals && projectLocals.groups.map( group => group.slug  )
+		};
+
+		const boost = {
+			tags: (
+				filters.tags
+					? Array.from( new Set( [ page.groupId, ...filters.tags ] ) ).filter( Boolean )
+					: []
+			)
+		};
+
+	.c-algolia-search.js-algolia-search(
+		data-algolia-search-config=truncatedConfig,
+		data-algolia-search-filters=filters,
+		data-algolia-search-boost=boost
+	)

package/themes/umberto/layout/gloria/_modules/breadcrumbs/_style.scss

@@ -0,0 +1,68 @@
+.c-breadcrumbs {
+	--horizontal-spacing: 0.5rem;
+
+	width: 100%;
+	margin: var(--spacing-4) 0;
+	position: relative;
+
+	&__wrapper {
+		// Little horizontal spacing prevents truncating focus borders.
+		margin: 0 0 0 calc(var(--horizontal-spacing) * -1);
+    	padding: 0 var(--horizontal-spacing);
+		width: calc(100% + var(--horizontal-spacing) * 2);
+		overflow-x: auto;
+		scrollbar-width: thin;
+	}
+
+	&__wrapper::-webkit-scrollbar {
+		height: 4px;
+	}
+
+	&__list {
+		display: flex;
+		flex-wrap: nowrap;
+		justify-self: start;
+		align-items: center;
+		white-space: nowrap;
+		padding: var(--horizontal-spacing) 0;
+		margin: 0;
+		list-style: none;
+	}
+
+	&__list-item {
+		display: flex;
+		align-items: center;
+		color: var(--color-text-primary);
+		font-size: var(--font-size-sm);
+
+		&:not(:first-child)::before {
+			content: "/";
+			color: var(--color-text-primary);
+			margin: 0 0.5rem;
+		}
+
+		&--active {
+			color: var(--color-primary);
+		}
+	}
+
+	&__link {
+		color: inherit;
+		text-decoration-color: currentColor;
+	}
+
+	&--shadow-left::before {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: calc(var(--horizontal-spacing) * -1);
+		height: 100%;
+		width: 24px;
+		pointer-events: none;
+		background: linear-gradient(
+			to right,
+			var(--color-background-body) 0%,
+			rgba(255, 255, 255, 0) 100%
+		);
+	}
+}

package/themes/umberto/layout/gloria/_modules/breadcrumbs/index.pug

@@ -0,0 +1,18 @@
+mixin breadcrumbs()
+	if page.breadcrumbs && page.breadcrumbs.items.length > 0
+		nav.js-breadcrumbs.c-breadcrumbs(aria-label="Breadcrumb", dir="ltr")
+			.c-breadcrumbs__wrapper
+				ol.c-breadcrumbs__list
+					each item in page.breadcrumbs.items
+						li.c-breadcrumbs__list-item(
+							class=[item.active && 'c-breadcrumbs__list-item--active']
+							'aria-current'=item.active ? 'page' : false
+						)
+							if item.path && !item.active
+								a.b-link.c-breadcrumbs__link(href=item.path)
+									= item.name
+							else
+								= item.name
+
+		if page.breadcrumbs.jsonLd
+			+json-ld({ json: page.breadcrumbs.jsonLd })

package/themes/umberto/layout/gloria/_modules/footer/_style.scss

@@ -0,0 +1,40 @@
+@use "@gloria/layout/_mixins.scss" as *;
+
+.c-footer {
+	margin: var(--spacing-20) 0 var(--spacing-6);
+	border-top: 1px solid var(--color-gray-400);
+
+	@include mobile {
+		margin-top: var(--spacing-10);
+	}
+
+	&__heading {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		margin: var(--spacing-4) 0;
+	}
+
+	&__items {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	&__copyright {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	@include max-width($breakpoint-sm) {
+		&__heading {
+			justify-content: space-between;
+		}
+
+		&__copyright {
+			flex-direction: column;
+			align-items: flex-start;
+			justify-content: flex-start;
+		}
+	}
+}