umberto 7.0.1 → 8.0.0

package/themes/umberto/layout/gloria/_components/keyboard-shortcut/_style.scss

@@ -0,0 +1,49 @@
+.c-keyboard-shortcut {
+	display: inline-block;
+	color: var(--color-text-primary);
+	background: var(--color-gray-200);
+	border: solid 1px var(--color-gray-300);
+	font-family: var(--font-family-text);
+	font-size: var(--font-size-xs);
+	font-weight: var(--font-weight-medium);
+	padding: var(--spacing-1) var(--spacing-2);
+	line-height: var(--line-height-xs);
+	vertical-align: middle;
+	border-radius: var(--radius-2);
+
+	&-combo {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		align-items: center;
+	}
+
+	&--flat {
+		color: var(--color-gray-800);
+    	font-weight: var(--font-weight-regular);
+		background: transparent;
+		border: solid 1px var(--color-gray-500);
+	}
+
+	&--raised {
+		position: relative;
+		background: var(--color-gray-200);
+		border: 1px solid var(--color-gray-400);
+		box-shadow: 0 1px var(--color-gray-600), 0 0 0 2px var(--color-gray-100) inset;
+		text-shadow: 0 1px 0 var(--color-gray-100);
+		border-radius: var(--radius-1);
+		min-width: 2ch;
+		min-height: 2ch;
+		text-align: center;
+		margin: 0 var(--spacing-1);
+		padding: var(--spacing-1) var(--spacing-2);
+	}
+
+	&__separator {
+		display: inline-flex;
+		align-items: center;
+		height: 100%;
+		margin: 0 .25em;
+		color: var(--color-gray-800);
+	}
+}

package/themes/umberto/layout/gloria/_components/keyboard-shortcut/index.pug

@@ -0,0 +1,23 @@
+mixin keyboard-shortcut({ keys, variant = 'raised', description = '' })
+	-
+		const keysString = keys.join(' + ');
+		const ariaLabel = (
+			description
+				? `${description} (keyboard shortcut: ${keysString})`
+				: `Keyboard shortcut: ${keysString}`
+		);
+
+	span.c-keyboard-shortcut-combo(
+		aria-label=ariaLabel
+		role="text"
+	)
+		each key, index in keys
+			kbd.c-keyboard-shortcut(
+				class={
+					[`c-keyboard-shortcut--${ variant }`]: true
+				}
+			)
+				= key
+
+			if index < keys.length - 1
+				span.c-keyboard-shortcut__separator(aria-hidden="true") +

package/themes/umberto/layout/gloria/_components/menu-dropdown/_style.scss

@@ -0,0 +1,27 @@
+.c-menu-dropdown {
+	&__button {
+		color: var(--color-text-primary);
+
+		& > .c-icon {
+			color: var(--color-primary-500);
+		}
+
+		&:hover {
+			background-color: var(--color-primary-100);
+		}
+
+		&.is-active,
+		&:active {
+			background-color: var(--color-primary-100);
+			color: var(--color-primary);
+		}
+	}
+
+	&[data-preferred-direction='up'] .c-menu-dropdown__button  > .c-icon {
+		transform: rotate(-90deg);
+	}
+
+	&[data-preferred-direction='down'] .c-menu-dropdown__button > .c-icon {
+		transform: rotate(90deg);
+	}
+}

package/themes/umberto/layout/gloria/_components/menu-dropdown/index.pug

@@ -0,0 +1,40 @@
+//- Menu dropdown component
+//-
+//- Examples:
+//- +menu-dropdown({ label: 'Menu' })
+//-   +dropdown-item({ text: 'Item 1' })
+//-   +dropdown-item({ text: 'Item 2', active: true })
+//-   +dropdown-item({ text: 'Item 3' })
+//-
+//- +menu-dropdown({ preferredDirection: 'up', label: 'Menu (up)' })
+//-   +dropdown-item({ text: 'Item 1' })
+//-   +dropdown-item({ text: 'Item 2' })
+//-
+//- +menu-dropdown({ className: 'custom-menu', label: 'Custom menu' })
+//-   +dropdown-item({ text: 'Item 1', icon: 'github' })
+//-   +dropdown-item({ text: 'Item 2' })
+mixin menu-dropdown({ id, className, updateValueOnSelect, preferredDirection = 'down', label } = {})
+	- const contentId = uRandomId('menu');
+
+	+dropdown({
+		id,
+		className: 'c-menu-dropdown',
+		preferredDirection,
+		contentId,
+		updateValueOnSelect
+	})
+		+trigger
+			+button({
+				label,
+				className: 'c-menu-dropdown__button',
+				variant: false,
+				icon: 'chevron-right',
+				iconPosition: 'right'
+			})(
+				aria-haspopup='true',
+				aria-expanded='false',
+				aria-controls=contentId
+			)
+
+		+content
+			block

package/themes/umberto/layout/gloria/_components/mobile-overlay/_style.scss

@@ -0,0 +1,70 @@
+@use "@gloria/layout/_mixins.scss" as *;
+
+.c-mobile-overlay {
+	display: none;
+	flex-direction: column;
+	z-index: var(--z-index-overlay);
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: var(--color-common-white);
+	overflow-y: auto;
+	opacity: 0;
+	transform: translateY(-100%);
+	transition: transform var(--duration-fast) var(--cbuc-cubic-out),
+	            opacity var(--duration-fast) var(--cbuc-cubic-out);
+
+	&[data-headless='true'] {
+		// This is a workaround for the overlay placed on-top of the overlay with the head.
+		// If the header is fixed, it is slightly above the overlay and it'll overlap to headless one.
+		z-index: calc(var(--z-index-overlay) + 2);
+	}
+
+	&.is-anim {
+		&-entering {
+			transform: translateY(0);
+			opacity: 1;
+		}
+
+		&-entered {
+			transform: translateY(0);
+			opacity: 1;
+		}
+
+		&-exiting {
+			transform: translateY(-100%);
+			opacity: 0;
+		}
+
+		&-exited {
+			transform: translateY(-100%);
+			opacity: 0;
+		}
+	}
+
+	&__header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding-bottom: var(--spacing-4);
+		border-bottom: 1px solid var(--color-gray-400);
+	}
+
+	&__title {
+		font-family: var(--font-family-heading);
+		font-size: var(--font-size-lg);
+		font-weight: var(--font-weight-bold);
+	}
+
+	&__content {
+		position: relative;
+		flex: 1;
+
+		&.is-spaced {
+			padding: var(--spacing-4);
+		}
+	}
+}
+

package/themes/umberto/layout/gloria/_components/mobile-overlay/index.pug

@@ -0,0 +1,37 @@
+//- Mobile Overlay component
+//-
+//- Example:
+//- - const mobileMenuId = 'mobile-menu';
+//- +button({
+//-   id: 'mobile-menu-button',
+//-   className: 'js-toggle-mobile-overlay',
+//-   icon: 'menu',
+//-   variant: 'toolbar',
+//-   square: true,
+//-   ariaLabel: 'Toggle mobile menu'
+//- })(
+//-   aria-expanded='false',
+//-   aria-controls=mobileMenuId,
+//-   aria-haspopup='true'
+//- )
+//-
+//- +mobile-overlay({
+//-   id: mobileMenuId,
+//-   ariaLabeledBy: 'mobile-menu-button',
+//-   spaced: false
+//- })
+//-   h2 Mobile Menu Content
+//-   p This is the content of the mobile menu overlay.
+mixin mobile-overlay({ id, ariaLabeledBy, headless = false, spaced = true })
+	div.c-mobile-overlay.l-hide-desktop.js-mobile-overlay(
+		id=id,
+		role='dialog',
+		aria-labelledby=ariaLabeledBy,
+		aria-hidden='true',
+		aria-modal='true',
+		tabindex='-1',
+		data-headless=(headless.toString()),
+	)
+		div.c-mobile-overlay__content(class=spaced && 'is-spaced')
+			if block
+				block

package/themes/umberto/layout/gloria/_components/nav-tree/_style.scss

@@ -0,0 +1,104 @@
+@use "@gloria/a11y/_mixins.scss" as *;
+
+.c-nav-tree {
+	font-size: var(--font-size-sm);
+	line-height: var(--line-height-base);
+	color: var(--color-secondary-700);
+
+	&--mobile {
+		.c-nav-tree__chevron {
+			transform: translate(-150%, -50%) rotate(0deg);
+		}
+
+		.c-nav-tree__wrapper {
+			&:has( + .c-nav-tree__nested-list:not(.c-nav-tree__nested-list--hidden)) .c-nav-tree__chevron {
+				transform: translate(-150%, -50%) rotate(90deg);
+			}
+		}
+	}
+
+	> li > ul {
+		.c-nav-tree__link,
+		.c-nav-tree__wrapper {
+			padding-left: calc(var(--spacing-6) + var(--spacing-3) * var(--level, 1));
+		}
+	}
+
+	&__link,
+	&__wrapper {
+		position: relative;
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+		padding: var(--spacing-1-5) var(--spacing-3) var(--spacing-1-5) var(--spacing-6);
+	}
+
+	&__link {
+		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);
+
+		@include a11y-keyboard-focus-ring(false, true);
+
+		&:hover,
+		&--active {
+			background-color: var(--color-primary-100);
+			color: var(--color-primary-500)
+		}
+
+		&--active {
+			box-shadow: -2px 0px 0px 0px var(--color-primary-300) inset;
+		}
+	}
+
+	&__wrapper {
+		width: 100%;
+		cursor: pointer;
+		transition:
+				background-color var(--duration-normal) var(--cbuc-cubic-out),
+				color var(--duration-normal) var(--cbuc-cubic-out);
+
+		@include a11y-keyboard-focus-ring(false, true);
+
+		&:hover {
+			background-color: var(--color-primary-100);
+			color: var(--color-primary-500)
+		}
+
+		&:has( + .c-nav-tree__nested-list:not(.c-nav-tree__nested-list--hidden)) .c-nav-tree__chevron {
+			transform: translate(-125%, -50%) rotate(90deg);
+		}
+	}
+
+	&__chevron {
+		position: absolute;
+		top: 50%;
+		transform: translate(-125%, -50%) rotate(0deg);
+		transition: transform var(--duration-normal) var(--cbuc-cubic-out);
+		color: var(--color-secondary-700);
+	}
+
+	&__nested-list {
+		overflow: hidden;
+		transition: height var(--duration-normal) var(--smootherstep);
+
+		&--hidden {
+			height: 0;
+		}
+	}
+
+	&__badges {
+		display: flex;
+		flex-wrap: nowrap;
+
+		.c-badge {
+			margin-left: var(--spacing-1);
+		}
+	}
+
+	&__sub-group-title {
+		text-align: left;
+	}
+}

package/themes/umberto/layout/gloria/_components/nav-tree/index.pug

@@ -0,0 +1,6 @@
+include ./nav-tree-level
+
+mixin nav-tree()
+	- const pageGroup = projectLocals.getPageGroup( page.groupId )
+	ul.b-reset-list.c-nav-tree.js-nav-tree
+		+navTreeLevel( pageGroup, true, 0 )

package/themes/umberto/layout/gloria/_components/nav-tree/nav-tree-item.pug

@@ -0,0 +1,23 @@
+mixin navTreeItem( data )
+	-
+		const activeClass = page.path === data.path ? 'c-nav-tree__link--active' : '';
+		const ariaCurrent = page.path === data.path ? 'page' : false;
+		const menuTitle = data[ 'menu-title' ] || uSplitToTitleAndContent( data.content ).title || data.title;
+
+	li
+		a.b-reset-link.c-nav-tree__link(
+			href=relative_url( page.path, data.path ),
+			class=[activeClass],
+			title=menuTitle,
+			aria-current=ariaCurrent
+		)
+			span( class="c-nav-tree__guide-title" ) #{ menuTitle }
+			- const shouldDisplayNewIndicator = 'shouldDisplayNewIndicator' in data ? data.shouldDisplayNewIndicator : false;
+			- const badges = 'badges' in data ? data.badges : false;
+			- if( shouldDisplayNewIndicator || badges )
+				span.c-nav-tree__badges
+					- if( shouldDisplayNewIndicator )
+						+badge({ variant: 'status' })
+					- if ( badges )
+						each badge in normalizeBadges( data )
+							+badge({ variant: badge.name })

package/themes/umberto/layout/gloria/{_mixin → _components/nav-tree}/nav-tree-level.pug

@@ -1,7 +1,7 @@
 include nav-tree-item
 
-mixin navTreeLevel( data, isRoot )
-	- if ( !data ) return;
+mixin navTreeLevel( data, isRoot, level )
+	- if ( !data || !site ) return;
 	- const pages = site.pages.filter( getPagesForNavTree( data.id, page.projectName ) );
 	- const categories = data.categories ? markEmptyCategories( { pages: site.pages, categories: data.categories, projectName: page.projectName, group: page.groupId } ) : [];
 	- let dataArr = [].concat( pages.toArray(), categories ).sort( ( a, b ) => ( a.title || a.name ).localeCompare( b.title || b.name ) );
@@ -9,6 +9,8 @@ mixin navTreeLevel( data, isRoot )
 	//- Default order value is 0, some categories might not have assigned value that's why there is fallback to default value.
 	- dataArr.sort( ( a, b ) => ( a.order || 0 ) === ( b.order || 0 ) ? a.index - b.index : ( a.order || 0 ) - ( b.order || 0 ) );
 	- const shouldPrintSubTree = dataArr.filter( item => item.title || item.hasDescendentLeaf ).length || projectLocals.navigationShowEmptyCategories
+	- const isFolded = 'folded' in data ? !!data.folded : false;
+	- const foldedClass = isFolded ? 'c-nav-tree__nested-list--hidden' : '';
 
 	if isRoot
 		if data.navigationIncludeIndex
@@ -16,23 +18,41 @@ mixin navTreeLevel( data, isRoot )
 
 		each item in dataArr
 			if item.name
-				+navTreeLevel( item, false )
+				+navTreeLevel( item, false, level + 1 )
 			else
 				+navTreeItem( item )
 
 	//- We don't want to display empty categories (#523).
 	else if shouldPrintSubTree
+		- const id = uRandomId( 'nav-tree-item' );
+
 		li
-			div.tree__item__wrapper
-				span( class="tree__item--folder tree__item__text" ) #{ data.name }
-				- if( data.badges )
-					each badge in normalizeBadges( data )
-						span( class="tree__item__badge tree__item__badge_" + badge.name data-badge-tooltip=badge.label )
-							span( class="tree__item__badge__text" ) #{ badge.label }
-			ul( class={ "tree__item-nested-list": true, "tree__item-nested-list--hidden": data.folded } data-id=data.id )
+			button.b-reset-button.c-nav-tree__wrapper.c-nav-tree__group.js-sidebar-button(
+				type='button',
+				'aria-expanded'=''+isFolded+'',
+				'aria-controls'=id,
+				'aria-label'='Expand/Collapse '+data.name
+			)
+				+svg-icon({ icon: 'chevron-right', className: 'c-nav-tree__chevron' })
+				span( class="c-nav-tree__sub-group-title" ) #{ data.name }
+				- const shouldDisplayNewIndicator = 'shouldDisplayNewIndicator' in data ? data.shouldDisplayNewIndicator : false;
+				- const badges = 'badges' in data ? data.badges : false;
+				- if( shouldDisplayNewIndicator || badges )
+						span.c-nav-tree__badges
+							- if( shouldDisplayNewIndicator )
+								+badge({ variant: 'status' })
+							- if ( badges )
+								each badge in normalizeBadges( data )
+									+badge({ variant: badge.name })
+			ul.b-reset-list.c-nav-tree__nested-list(
+				class=foldedClass
+				id=id
+				data-id=data.id
+				'style'=['--level:'+level, isFolded ? 'height: 0px' : ''].join(';')
+			)
 				each item in dataArr
 					//- Categories have a property 'name', guides don't have property 'name'.
 					if item.name
-						+navTreeLevel( item, false )
+						+navTreeLevel( item, false, level + 1 )
 					else
 						+navTreeItem( item )

package/themes/umberto/layout/gloria/_components/skeleton/_style.scss

@@ -0,0 +1,22 @@
+.c-skeleton {
+	animation: pulse-code-skeleton 1.2s ease-in-out infinite;
+	background: color-mix(in srgb, var(--color-secondary-800) 10%, transparent);
+	border-radius: var(--radius-1);
+
+	&--line {
+			width: 100%;
+			height: 1.2em;
+	}
+}
+
+.c-skeleton-lines {
+	.c-skeleton:not(:last-child) {
+		margin-bottom: var(--spacing-3);
+	}
+}
+
+@keyframes pulse-code-skeleton {
+	0% { opacity: 0.4; }
+	50% { opacity: 1; }
+	100% { opacity: 0.4; }
+}

package/themes/umberto/layout/gloria/_components/skeleton/index.pug

@@ -0,0 +1,16 @@
+mixin skeleton({ shape, className, width, height })
+	-
+		const style = [
+			width && `width: ${ width }`,
+			height && `height: ${ height }`
+		]
+			.filter( Boolean )
+			.join( '' );
+
+	.c-skeleton(
+		class={
+			[className]: !!className,
+			[`c-skeleton--${ shape }`]: shape
+		}
+		style=style
+	)&attributes(attributes)

package/themes/umberto/layout/gloria/_components/spacer/_style.scss

@@ -0,0 +1,9 @@
+.c-spacer {
+	width: calc(var(--spacer-width, 0) * var(--spacing-base));
+	height: calc(var(--spacer-height, 0) * var(--spacing-base));
+}
+
+span.c-spacer {
+	display: inline-block;
+	vertical-align: middle;
+}

package/themes/umberto/layout/gloria/_components/spacer/index.pug

@@ -0,0 +1,19 @@
+//- Spacer component
+//-
+//- Examples:
+//- +spacer({ x: 2 }) <!-- Creates horizontal space -->
+//- +spacer({ y: 4 }) <!-- Creates vertical space -->
+//- +spacer({ x: 2, y: 2 }) <!-- Uses the larger dimension -->
+mixin spacer({x = 0, y = 0, className = ''})
+	if x > y
+		span.c-spacer(
+			style={'--spacer-width': x},
+			class=className,
+			aria-hidden='true'
+		)
+	else
+		div.c-spacer(
+			style={'--spacer-height': y},
+			class=className,
+			aria-hidden='true'
+		)

package/themes/umberto/layout/gloria/_components/svg/index.pug

@@ -0,0 +1,70 @@
+//- SVG inline injection mixin
+//-
+//- This mixin injects inline SVG directly into HTML.
+//- It allows controlling fill color and dimension trimming.
+//-
+//- Example:
+//- +inline-svg({ file: 'logo', fill: 'blue', trimDimensions: true })
+mixin inline-svg({ file, fill, className, trimDimensions = true, width, height, title })
+	-
+		const path = `source/gloria/assets/_img/${ file }.svg`;
+		const titleFallback = title === false ? 'none' : title;
+
+	svg(
+		class=[className],
+		role='img'
+		width=width,
+		height=height,
+		data-inline-svg-image=path,
+		data-inline-svg-title=titleFallback,
+		data-inline-svg-fill-color=fill,
+		data-inline-svg-trim-dimensions=trimDimensions
+	)
+
+//- SVG local spritesheet mixin
+//-
+//- This mixin creates an SVG with <use> element to reference icons from a file.
+//- The referenced SVG will be added to a spritesheet during post-processing.
+//- This approach is ideal for frequently used SVGs to improve performance.
+//-
+//- Example:
+//- +spritesheet-local-svg({ file: 'icon-check', title: 'Zatwierdzone', className: 'icon' })
+mixin spritesheet-local-svg({ file, className, width, height, title })
+	-
+		const path = `source/gloria/assets/_img/${ file }.svg`;
+		const titleId = title && uRandomId( 'spritesheet-svg' );
+		const iconId = file.replace(/\//g, '-');
+
+	svg(
+		class=[className],
+		role='img',
+		width=width,
+		height=height,
+		aria-labelledby=title ? titleId : false,
+		data-spritesheet-svg=path,
+		data-spritesheet-id=iconId
+	)
+		if title
+			title(id=titleId)= title
+		use(href=`#${iconId}`)
+
+//- SVG spritesheet preload mixin
+//-
+//- This mixin creates a hidden element that signals to the spritesheet generator
+//- to include an SVG in the spritesheet, even if not yet visible on the page.
+//- Useful for icons that will be dynamically added via JavaScript.
+//-
+//- Example:
+//- +preload-spritesheet-svg({ file: 'icons/menu' })
+mixin preload-spritesheet-svg({ file })
+	-
+		const path = `source/gloria/assets/_img/${ file }.svg`;
+		const iconId = file.replace(/\//g, '-');
+
+	i(
+		class="spritesheet-preload"
+		style="display: none;"
+		data-spritesheet-preload="true"
+		data-spritesheet-svg=path
+		data-spritesheet-id=iconId
+	)

package/themes/umberto/layout/gloria/_components/tabs/_style.scss

@@ -0,0 +1,80 @@
+@use "@gloria/a11y/_mixins.scss" as *;
+
+.c-tabs {
+	margin-block: var(--spacing-6);
+
+	&__list {
+		display: flex;
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		border-bottom: 1px solid var(--color-gray-500);
+		white-space: nowrap;
+
+		&--center {
+			justify-content: center;
+		}
+
+		&--right {
+			justify-content: flex-end;
+		}
+	}
+
+	&__button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--spacing-1-5);
+		position: relative;
+		padding: var(--spacing-2) var(--spacing-4);
+		font-family: var(--font-family-text);
+		font-size: var(--font-size-base);
+		font-weight: var(--font-weight-semibold);
+		line-height: var(--line-height-xs);
+		color: var(--color-text-secondary);
+		transition:
+			border-color var(--duration-ultra-fast) var(--smoothstep),
+			box-shadow var(--duration-ultra-fast) var(--smoothstep),
+			color var(--duration-fast) var(--cbuc-quad-out),
+			background-color var(--duration-fast) var (--cbuc-quad-out);
+
+		@include a11y-keyboard-focus-ring(false);
+
+		&:hover {
+			background-color: var(--color-primary-100);
+			color: var(--color-primary);
+		}
+
+		&:active {
+			background-color: var(--color-primary-200);
+			color: var(--color-primary);
+		}
+
+		&::after {
+			content: "";
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 2px;
+			background-color: transparent;
+			transition: background-color var(--duration-ultra-fast) var(--smoothstep);
+		}
+
+		&[aria-selected="true"] {
+			color: var(--color-primary-500);
+
+			&::after {
+				background-color: var(--color-primary-500);
+			}
+		}
+	}
+
+	&__panel {
+		@include a11y-keyboard-focus-ring;
+
+		&.is-spaced {
+			padding-top: var(--spacing-6);
+		}
+	}
+}