umberto 7.0.2 → 8.0.0

package/themes/umberto/layout/gloria/_modules/mobile-nav/_style.scss

@@ -0,0 +1,106 @@
+.c-mobile-nav {
+	display: flex;
+	min-height: 100%;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	overflow: hidden;
+	position: relative;
+
+	&__slide {
+		width: 100vw;
+		min-height: 100%;
+		padding: var(--spacing-5);
+		overflow-y: auto;
+		flex-shrink: 0;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		transition: transform var(--duration-normal) var(--cbuc-cubic-out);
+		transform: translateX(0);
+		will-change: transform;
+	}
+
+	&__back-button {
+		width: 100%;
+		padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) 0;
+		margin-bottom: var(--spacing-2);
+		color: var(--color-secondary-600);
+
+		&:hover {
+			background-color: color-mix(in srgb, var(--color-secondary-100) 20%, transparent);
+		}
+
+		&:active {
+			background-color: color-mix(in srgb, var(--color-secondary-200) 20%, transparent);;
+		}
+	}
+
+	&__heading-button {
+		--a11-focus-border-width: 2px;
+
+		margin-bottom: var(--spacing-4);
+		padding: var(--spacing-3);
+		font-weight: var(--font-weight-semibold);
+		color: var(--color-primary-500);
+		border-bottom: var(--a11-focus-border-width) solid var(--color-primary-500);
+		border-radius: 0;
+
+		.c-icon--chevron-right {
+			margin-left: auto;
+		}
+
+		&:hover {
+			background-color: var(--color-primary-100);
+		}
+
+		&:active {
+			background-color: var(--color-primary-200);
+		}
+	}
+
+	&__items {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-2);
+	}
+
+	&__item {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		width: 100%;
+		padding: var(--spacing-3);
+		text-align: left;
+		color: var(--color-text-primary);
+		text-decoration: none;
+		transition:
+			background-color var(--duration-normal) var(--cbuc-cubic-out),
+			color var(--duration-normal) var(--cbuc-cubic-out),
+			border-color var(--duration-ultra-fast) var(--smoothstep),
+			box-shadow var(--duration-ultra-fast) var(--smoothstep);
+
+		&:hover {
+			background-color: var(--color-primary-100);
+		}
+
+		&:active {
+			background-color: var(--color-primary-200);
+		}
+
+		&.is-active {
+			color: var(--color-primary-500);
+			font-weight: var(--font-weight-semibold);
+		}
+
+		&--truncated {
+			display: inline-flex;
+			width: auto;
+		}
+
+		.c-icon--chevron-right {
+			margin-left: auto;
+		}
+	}
+}

package/themes/umberto/layout/gloria/_modules/mobile-nav/index.pug

@@ -0,0 +1,121 @@
+include ./slide-parts
+
+mixin mobile-nav()
+	-
+		const currentProject = projectLocals && projectsData.find( project => project.slug === projectLocals.projectSlug );
+		let initialSlideId = projectLocals ? `project-${projectLocals.projectSlug}` : 'products';
+
+		// If the page has a category, set the initial slide to that category's slide
+		if (projectLocals && page.groupId) {
+			const categoryGroup = projectLocals.groups.find(group => group.id === page.groupId);
+
+			if (categoryGroup && categoryGroup.categories) {
+				initialSlideId = `${page.groupId}-categories`;
+			}
+		}
+
+		if (page.isApi) {
+			initialSlideId = 'api-categories';
+		}
+
+	.c-mobile-nav(data-initial-slide-id=initialSlideId)
+		+mobile-nav-slide({ slideId: 'products' })
+			if projectsData
+					ol.b-reset-list.c-mobile-nav__items
+						each project in projectsData
+							- isCurrentProject = projectLocals && project.slug === projectLocals.projectSlug
+
+							if isCurrentProject
+								+mobile-nav-item({
+									label: project.name,
+									active: true,
+									targetSlideId: `project-${ project.slug }`
+								})
+							else
+								+mobile-nav-item({
+									href: relative_url(page.path, `${project.latestBasePath}/index.html`),
+									label: project.name
+								})
+
+		//- Current project slide
+		if projectLocals
+			+mobile-nav-slide({ slideId: `project-${ projectLocals.projectSlug }` })
+				+mobile-nav-back-button( {
+					parentSlide: {
+						id: 'products',
+						name: 'Products'
+					}
+				} )
+
+				+mobile-nav-heading({
+					href: relative_url(page.path, `${ currentProject.latestBasePath }/index.html`),
+					label: currentProject.name
+				})
+
+				ol.b-reset-list.c-mobile-nav__items
+					each group in projectLocals.groups
+						- isActive = group.id === page.groupId
+
+						if group.categories
+							+mobile-nav-item({
+								label: group.name,
+								targetSlideId: `${ group.id }-categories`,
+								active: isActive
+							})
+						else if group.name == 'API'
+							+mobile-nav-item({
+								label: group.name,
+								targetSlideId: 'api-categories',
+								active: isActive
+							})
+						else if group._url
+							+mobile-nav-item({
+								href: relative_url(page.path, group._url),
+								label: group.name,
+								active: isActive
+							})
+
+					//- Github link
+					+mobile-nav-icon-item({
+						href: projectLocals.repoUrl,
+						target: '_blank',
+						icon: 'github',
+						ariaLabel: true
+					})
+
+			//- Category slides for each group that has categories
+			each group in projectLocals.groups
+				if group.categories
+					+mobile-nav-slide({ slideId: `${ group.id }-categories` })
+						+mobile-nav-back-button( {
+							parentSlide: {
+								id: `project-${ projectLocals.projectSlug }`,
+								name: 'Categories'
+							}
+						} )
+
+						+mobile-nav-heading({
+							label: group.name,
+							href: relative_url(page.path, group._url),
+						})
+
+						ul.b-reset-list.c-nav-tree.c-nav-tree--mobile.js-nav-tree
+							+navTreeLevel( group, true, 0 )
+
+			+mobile-nav-slide({ slideId: 'api-categories' })
+				+mobile-nav-back-button( {
+					parentSlide: {
+						id: `project-${ projectLocals.projectSlug }`,
+						name: 'Categories'
+					}
+				} )
+
+				each group in projectLocals.groups
+					if group.name === 'API'
+						+mobile-nav-heading({
+							label: group.name,
+							href: relative_url(page.path, group._url),
+						})
+
+				if page.isApi
+					div#js-api-tree-mobile

package/themes/umberto/layout/gloria/_modules/mobile-nav/slide-parts.pug

@@ -0,0 +1,67 @@
+mixin mobile-nav-slide({ slideId })
+	.c-mobile-nav__slide.is-hidden(
+		id=`slide-${slideId}`,
+		'data-slide-id'=slideId,
+		'aria-hidden'='true',
+	)
+		block
+
+mixin mobile-nav-back-button({ parentSlide })
+	+button({
+		variant: false,
+		blockDisplay: true,
+		label: parentSlide.name,
+		icon: 'chevron-right',
+		iconPlacement: 'left',
+		iconClassName: 'u-rotate-180',
+		className: 'c-mobile-nav__back-button js-mobile-nav-navigate',
+		ariaLabel: `Back to ${ parentSlide.name }`,
+	})(
+		'data-navigate-to-slide'=parentSlide.id,
+		'data-navigate-direction'='backward',
+	)
+
+mixin mobile-nav-heading({ href, label })
+	+button-link({
+		href,
+		label,
+		className: 'c-mobile-nav__heading-button',
+		blockDisplay: true,
+		variant: false,
+		icon: 'chevron-right',
+		iconPosition: 'right',
+	})
+
+mixin mobile-nav-item({ href, label, targetSlideId, target, active = false })
+	li
+		if targetSlideId
+			+button({
+				variant: false,
+				blockDisplay: true,
+				active,
+				label,
+				icon: 'chevron-right',
+				iconPosition: 'right',
+				className: 'c-mobile-nav__item js-mobile-nav-navigate',
+			})(
+				'data-navigate-to-slide'=targetSlideId,
+				'data-navigate-direction'='forward',
+				'aria-controls'=`slide-${targetSlideId}`,
+				'aria-expanded'='false',
+				'aria-haspopup'='true'
+			)
+		else
+			a.b-link.c-mobile-nav__item(
+				href=href,
+				class=active ? 'is-active' : '',
+				target=target
+			)= label
+
+mixin mobile-nav-icon-item({ icon, href, target, ariaLabel })
+	li
+		a.b-link.c-mobile-nav__item.c-mobile-nav__item--truncated(
+			href=href,
+			target=target,
+			aria-label=ariaLabel,
+		)
+			+svg-icon({ icon, size: 'lg', ariaHidden: true })

package/themes/umberto/layout/gloria/_modules/not-found/_style.scss

@@ -0,0 +1,38 @@
+@use "@gloria/layout/_mixins.scss" as *;
+
+.c-not-found {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: var(--spacing-8);
+	width: 100%;
+	height: 100%;
+	padding: var(--spacing-12) var(--spacing-5) var(--spacing-5);
+
+	&__billboard {
+		max-width: 900px;
+	}
+
+	&__title {
+		margin: var(--spacing-10) 0 0;
+		font-weight: var(--font-weight-bolder);
+
+		@include mobile {
+			margin: var(--spacing-8) 0 0;
+		}
+	}
+
+	&__description {
+		margin: 0;
+	}
+
+	&__title,
+	&__description {
+		text-align: center;
+	}
+
+	@include mobile {
+		gap: var(--spacing-5);
+	}
+}

package/themes/umberto/layout/gloria/_modules/not-found/index.pug

@@ -0,0 +1,16 @@
+mixin not-found()
+	.c-not-found
+		+inline-svg({
+			className: 'c-not-found__billboard',
+			file: '404-billboard',
+			title: 'Image containing person holding a map.'
+		})
+
+		h1.b-h1.c-not-found__title Whoops!
+		p.b-font-text.c-not-found__description We can't seem to find the page that you're looking for.
+
+		+button-link({
+			className: 'c-not-found__button',
+			href: page.canonicalUrlBeginning + 'index.html',
+			label: 'Return to documentation'
+		})

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

@@ -0,0 +1,147 @@
+@use "@gloria/layout/_mixins.scss" as *;
+@use "@gloria/base/_mixins.scss" as *;
+
+:root {
+	--sidebar-width-xl: 320px;
+	--sidebar-width-lg: 288px;
+	--sidebar-width-md: 256px;
+	--sidebar-collapsed: 42px;
+}
+
+.c-sidebar {
+	position: relative;
+	z-index: 1;
+	background-color: var(--color-common-white);
+	border-right: 1px solid var(--color-gray-400);
+	transition: transform var(--duration-normal) ease-in-out,
+		visibility 0s var(--duration-normal) linear;
+
+	@include mobile {
+		display: none;
+	}
+
+	@include desktop {
+		position: fixed;
+		top: var(--header-height, --header-navigation-height);
+		left: 0;
+		width: var(--sidebar-width-xl);
+	}
+
+	@include breakpoint-only($breakpoint-md, $breakpoint-lg) {
+		width: var(--sidebar-width-md);
+	}
+
+	@include breakpoint-only($breakpoint-lg, $breakpoint-xl) {
+		width: var(--sidebar-width-lg);
+	}
+
+	@include min-width($breakpoint-md) {
+		height: calc(100vh - var(--header-height, --header-navigation-height));
+		padding-bottom: 42px;
+
+		.c-sidebar--api & {
+			padding-bottom: 0;
+		}
+	}
+
+	&--api {
+		--sidebar-width-lg: var(--sidebar-width-xl);
+		--sidebar-width-md: var(--sidebar-width-xl);
+	}
+
+	&--hidden {
+		display: none;
+	}
+
+	&--collapsed {
+		transform: translateX(100%);
+
+		@include desktop {
+			transform: translateX(calc(-1 * var(--sidebar-width-xl) + var(--sidebar-collapsed)));
+		}
+
+		@include breakpoint-only($breakpoint-md, $breakpoint-lg) {
+			transform: translateX( calc(-1 * var(--sidebar-width-md) + var(--sidebar-collapsed)));
+		}
+
+		@include breakpoint-only($breakpoint-lg, $breakpoint-xl) {
+			transform: translateX( calc(-1 * var(--sidebar-width-lg) + var(--sidebar-collapsed)));
+		}
+
+		.c-sidebar__nav {
+			visibility: hidden;
+			transition: visibility 0s var(--duration-normal) linear;
+		}
+
+		.c-sidebar__toggle-button {
+			.c-icon {
+				transform: rotate(180deg);
+			}
+		}
+
+		+ .l-layout__main {
+			@include desktop {
+				width: calc(100% - var(--toc-width-xl));
+			}
+
+			@include breakpoint-only($breakpoint-md, $breakpoint-lg) {
+				width: 100%;
+			}
+
+			@include breakpoint-only($breakpoint-lg, $breakpoint-xl) {
+				width: calc(100% - var(--toc-width-lg));
+			}
+
+			&.l-layout__main--no-toc {
+				@include desktop {
+					width: 100%;
+				}
+
+				@include breakpoint-only($breakpoint-lg, $breakpoint-xl) {
+					width: 100%;
+				}
+			}
+		}
+	}
+
+	&__nav {
+		padding: var(--spacing-3) 0 0 0;
+
+		@include min-width($breakpoint-md) {
+			overflow-y: auto;
+			overflow-x: hidden;
+			overscroll-behavior: contain;
+			height: calc(100vh - var(--header-height, --header-navigation-height) - 41px); /* Full height reduced by header height and sidebar footer height. */
+			@include scrollbar;
+
+			.c-sidebar--api & {
+				height: calc(100vh - var(--header-height, --header-navigation-height)); /* Full height reduced by header height. */
+				padding-bottom: 1rem;
+			}
+		}
+
+		&--loading {
+			opacity: 0;
+			visibility: hidden;
+		}
+	}
+
+	&__footer {
+		position: sticky;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		width: calc(100% - 1px);
+		display: flex;
+		justify-content: flex-end;
+		background-color: var(--color-common-white);
+		padding: 0;
+		border-top: 1px solid var(--color-gray-400);
+	}
+
+	&__toggle-button {
+		.c-icon {
+			transition: transform var(--duration-normal) linear;
+		}
+	}
+}

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

@@ -0,0 +1,24 @@
+mixin sidebar()
+	-
+		const pageGroup = projectLocals.getPageGroup( page.groupId )
+		if ( !pageGroup ) {
+			return;
+		}
+		const showSidebar = ( 'categories' in pageGroup ) || ( 'navigationIncludeIndex' in pageGroup );
+
+	aside(
+		class={
+			'c-sidebar js-sidebar': true,
+			'c-sidebar--hidden': !showSidebar,
+		}
+	)
+		nav.c-sidebar__nav.c-sidebar__nav--loading
+			+nav-tree()
+		footer.c-sidebar__footer
+			+button({
+				icon: 'menu-fold',
+				variant: 'transparent',
+				square: true,
+				className: 'js-sidebar-toggle-btn c-sidebar__toggle-button',
+				ariaLabel: 'Toggle the sidebar'
+			})

package/themes/umberto/layout/gloria/_modules/sidebar-api/_style.scss

@@ -0,0 +1,2 @@
+@use "@gloria/layout/_mixins.scss" as *;
+@use "@gloria/base/_mixins.scss" as *;

package/themes/umberto/layout/gloria/_modules/sidebar-api/index.pug

@@ -0,0 +1,6 @@
+mixin sidebarApi()
+	aside.c-sidebar.c-sidebar--api.js-sidebar
+		nav.c-sidebar__nav
+			block navtree
+				if projectLocals && projectLocals.apiTree
+					!= projectLocals.apiTree