@lucca-front/scss 19.3.0-rc.2 → 19.3.0-rc.4

package/src/components/errorPage/component.scss

@@ -30,6 +30,7 @@
 	.errorPage-section-info-title {
 		@include title.component;
 		@include title.XXXL;
+
 		margin-block-end: var(--pr-t-spacings-50);
 	}
 
@@ -60,6 +61,7 @@
 		order: 1;
 		padding: 0;
 	}
+
 	.errorPage-section-image {
 		margin-block-start: var(--pr-t-spacings-400);
 		order: 0;

package/src/components/fancyBox/component.scss

@@ -4,6 +4,8 @@
 	overflow: hidden;
 	padding-inline: var(--pr-t-spacings-200);
 	display: block;
+	position: relative;
+	z-index: 0;
 
 	@at-root ($atRoot) {
 		.fancyBox-content {

package/src/components/fileEntry/component.scss

@@ -0,0 +1,199 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/text';
+
+@use '@lucca-front/icons/src/icon/exports' as icon;
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	border: 1px solid var(--components-fileEntry-borderColor);
+	padding: var(--components-fileEntry-padding);
+	margin: 0;
+	border-radius: var(--commons-borderRadius-L);
+	background-color: var(--pr-t-elevation-surface-raised);
+	gap: 0 var(--components-fileEntry-gapInline);
+	position: relative;
+	grid-column: var(--components-fileEntry-gridColumn);
+	min-height: var(--components-fileEntry-minHeight);
+	display: var(--components-fileEntry-display);
+	align-items: center;
+	grid-template-columns: auto 1fr auto;
+	grid-template-areas: var(--components-fileEntry-gridTemplateAreas);
+
+	&:has(.fileEntry-status-content-fileName) {
+		.fileToolbar {
+			--components-fileToolbar-insetBlockEnd: calc(var(--pr-t-spacings-150) + var(--pr-t-spacings-400) + var(--pr-t-spacings-25));
+		}
+	}
+
+	&:has(.fileEntry-filename-tooltip:focus-visible, .fileEntry-status-content:focus-visible) {
+		@include a11y.focusVisible;
+	}
+
+	@at-root ($atRoot) {
+		.fileEntryDisplayWrapper {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+			gap: var(--pr-t-spacings-100);
+
+			&:empty {
+				display: none;
+			}
+
+			.form-field:has(.fileUpload) + & {
+				margin-top: var(--pr-t-spacings-100);
+			}
+		}
+
+		.fileEntry-status {
+			inline-size: var(--components-fileEntry-status-inlineSize);
+			block-size: var(--components-fileEntry-status-blockSize);
+			color: var(--palettes-neutral-700);
+			flex-shrink: 0;
+			aspect-ratio: var(--components-fileEntry-status-aspectRatio);
+			margin: var(--components-fileEntry-status-margin);
+			grid-area: picture;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.fileEntry-status-content {
+			display: flex;
+			flex-direction: column;
+			flex-grow: 1;
+			outline: none;
+			justify-content: center;
+			align-items: center;
+			padding: var(--components-fileEntry-status-content-padding);
+			position: relative;
+		}
+
+		.fileEntry-status-content-fileName {
+			@include text.ellipsis;
+
+			flex-shrink: 0;
+			text-align: center;
+			padding: var(--pr-t-spacings-100);
+			padding-block-end: var(--pr-t-spacings-25);
+			width: 100%;
+		}
+
+		.fileEntry-status-content-inside-icon {
+			color: var(--palettes-critical-700);
+		}
+
+		.fileEntry-status-content-inlineMessage.inlineMessage {
+			flex-direction: column;
+			align-items: center;
+			text-align: center;
+
+			.inlineMessage-statusIcon:first-child {
+				@include icon.M;
+			}
+		}
+
+		.fileEntry-status-content-inside {
+			position: relative;
+			flex-grow: 1;
+			inline-size: 100%;
+			border-radius: var(--commons-borderRadius-M);
+			overflow: hidden;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background-color: var(--components-fileEntry-status-content-inside-backgroundColor);
+
+			& + & {
+				position: absolute;
+				inset-block-start: 0;
+				inset-block-end: var(--components-fileEntry-status-content-inside-insetBlockEnd);
+			}
+		}
+
+		.fileEntry-status-content-inside-svg {
+			inline-size: var(--components-fileEntry-status-content-svg-width);
+			block-size: var(--components-fileEntry-status-content-svg-height);
+			margin: var(--components-fileEntry-status-content-svg-margin);
+		}
+
+		.fileEntry-status-content-inside-img {
+			object-fit: cover;
+			inline-size: 100%;
+			block-size: 100%;
+			position: absolute;
+			inset: 0;
+			opacity: var(--components-fileEntry-status-content-img-opacity);
+		}
+
+		.fileEntry-toolbar {
+			grid-area: toolbar;
+			margin: 0;
+		}
+
+		.fileEntry-filename {
+			grid-area: title;
+			align-self: var(--components-fileEntry-filename-alignSelf);
+			min-width: 0;
+		}
+
+		.fileEntry-filename-tooltip {
+			@include text.ellipsis;
+
+			outline: none;
+		}
+
+		.fileEntry-description {
+			grid-area: description;
+			align-self: start;
+			color: var(--palettes-neutral-600);
+			font-size: var(--sizes-S-fontSize);
+			line-height: var(--sizes-S-lineHeight);
+			display: var(--components-fileEntry-description-display);
+			margin: 0;
+			gap: var(--pr-t-spacings-100);
+			min-width: 0;
+		}
+
+		.fileEntry-description-format {
+			@include text.ellipsis;
+
+			border-radius: var(--commons-borderRadius-M);
+			max-width: 20ch;
+
+			&:focus-visible {
+				@include a11y.focusVisible;
+			}
+		}
+
+		.fileEntry-inlineMessage {
+			grid-area: description;
+			margin: 0;
+			align-self: start;
+			min-width: 0;
+
+			.inlineMessage-statusIcon {
+				display: none;
+			}
+		}
+
+		.fileEntry_box.box {
+			margin-top: var(--pr-t-spacings-150);
+		}
+
+		.fileEntry_box-field {
+			display: flex;
+			flex-wrap: wrap;
+			gap: var(--pr-t-spacings-100);
+		}
+
+		.fileEntry_box-field-textField {
+			flex-grow: 1;
+		}
+
+		.fileEntry_box-field-button.button {
+			flex-grow: 1;
+			flex-basis: 0;
+			min-width: fit-content;
+		}
+	}
+}

package/src/components/fileEntry/exports.scss

@@ -0,0 +1,4 @@
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';

package/src/components/fileEntry/index.scss

@@ -0,0 +1,34 @@
+@use 'exports' as *;
+
+.fileEntry {
+	@include vars;
+	@include component;
+
+	&.mod-S {
+		@include S;
+	}
+
+	&.mod-media {
+		@include media;
+
+		&.mod-S {
+			@include mediaS;
+		}
+	}
+
+	&.is-error {
+		@include error;
+
+		&.mod-S {
+			@include errorS;
+		}
+	}
+
+	&.is-loading {
+		@include loading;
+
+		&.mod-S {
+			@include loadingS;
+		}
+	}
+}

package/src/components/fileEntry/mods.scss

@@ -0,0 +1,39 @@
+@use '@lucca-front/icons/src/icon/exports' as icon;
+
+@mixin S {
+	--components-fileEntry-padding: var(--pr-t-spacings-50);
+	--components-fileEntry-status-inlineSize: 32px;
+	--components-fileEntry-description-display: none;
+	--components-fileEntry-gridTemplateAreas: 'picture title title toolbar';
+	--components-fileEntry-filename-alignSelf: center;
+	--components-fileEntry-status-borderRadius: var(--commons-borderRadius-M);
+	--components-fileEntry-gapInline: var(--pr-t-spacings-75);
+	--components-fileEntry-status-content-svg-margin: calc(var(--pr-t-spacings-100) * -1);
+
+	.fileEntry-status-content-inside-icon {
+		@include icon.S;
+	}
+}
+
+@mixin media {
+	--components-fileEntry-status-borderRadius: var(--commons-borderRadius-M);
+	--components-fileEntry-padding: var(--pr-t-spacings-75);
+	--components-fileEntry-status-aspectRatio: auto;
+	--components-fileEntry-status-inlineSize: 100%;
+	--components-fileEntry-status-blockSize: calc(21.5rem - 1rem + 2px);
+	--components-fileEntry-description-display: none;
+	--components-fileEntry-display: block;
+	--components-fileEntry-gridColumn: 1 / -1;
+	--components-fileEntry-status-content-svg-width: 72px;
+
+	&:has(.fileEntry-status-content-fileName) {
+		--components-fileEntry-status-content-inside-insetBlockEnd: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-25));
+	}
+}
+
+@mixin mediaS {
+	--components-fileEntry-minHeight: calc(5rem + 2px);
+	--components-fileEntry-gridColumn: auto;
+	--components-fileEntry-status-blockSize: auto;
+	--components-fileEntry-status-aspectRatio: 1;
+}

package/src/components/fileEntry/states.scss

@@ -0,0 +1,22 @@
+@use '@lucca-front/scss/src/components/loading/exports' as loading;
+
+@mixin error {
+	--components-fileEntry-borderColor: var(--palettes-critical-600);
+	--components-fileEntry-gridTemplateAreas: 'picture title toolbar' 'picture description toolbar';
+	--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-critical-50);
+	--components-fileEntry-minHeight: 3.75rem;
+}
+
+@mixin loading {
+	--components-fileEntry-status-content-img-opacity: 0.08;
+}
+
+@mixin loadingS {
+	.fileEntry-status-content-inside-loading.loading {
+		@include loading.S;
+	}
+}
+
+@mixin errorS {
+	--components-fileEntry-status-blockSize: 100%;
+}

package/src/components/fileEntry/vars.scss

@@ -0,0 +1,27 @@
+@mixin vars {
+	--components-fileEntry-padding: var(--pr-t-spacings-150);
+	--components-fileEntry-gapInline: var(--components-fileEntry-padding);
+	--components-fileEntry-gridColumn: 1 / -1;
+	--components-fileEntry-borderColor: var(--palettes-neutral-100);
+	--components-fileEntry-minHeight: auto;
+	--components-fileEntry-gridTemplateAreas: 'picture title toolbar' 'picture description toolbar';
+
+	--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-neutral-25);
+
+	--components-fileEntry-status-borderRadius: var(--commons-borderRadius-L);
+	--components-fileEntry-status-content-img-opacity: 1;
+	--components-fileEntry-status-content-svg-width: 48px;
+	--components-fileEntry-status-content-svg-height: var(--components-fileEntry-status-content-svg-width);
+	--components-fileEntry-status-content-svg-margin: 0;
+
+	--components-fileEntry-filename-alignSelf: end;
+
+	--components-fileEntry-status-inlineSize: 48px;
+	--components-fileEntry-status-blockSize: var(--components-fileEntry-status-inlineSize);
+	--components-fileEntry-status-margin: 0;
+	--components-fileEntry-description-display: flex;
+	--components-fileEntry-display: grid;
+	--components-fileEntry-status-content-padding: 0;
+
+	--components-fileEntry-status-content-inside-insetBlockEnd: 0;
+}

package/src/components/fileToolbar/component.scss

@@ -0,0 +1,35 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/utils/reset';
+
+@use '@lucca-front/scss/src/components/button/exports' as button;
+
+@use '@lucca-front/icons/src/icon/exports' as icon;
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	border-radius: var(--commons-borderRadius-L);
+	position: absolute;
+	transform: translateX(-50%);
+	inset-inline-start: 50%;
+	inset-block-end: var(--components-fileToolbar-insetBlockEnd);
+	box-shadow: var(--pr-t-elevation-shadow-overlay);
+	background-color: var(--pr-t-elevation-surface-raised);
+	z-index: 1;
+	display: var(--components-fileToolbar-display);
+
+	@at-root ($atRoot) {
+		.fileToolbar-list {
+			@include reset.list;
+
+			display: flex;
+			gap: var(--pr-t-spacings-50);
+			padding: var(--components-fileToolbar-list-padding);
+		}
+
+		.fileToolbar-list-item-button.button {
+			@include button.text;
+			@include button.S;
+
+			--components-button-padding: var(--pr-t-spacings-75) !important;
+		}
+	}
+}

package/src/components/fileToolbar/exports.scss

@@ -0,0 +1,4 @@
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';

package/src/components/fileToolbar/index.scss

@@ -0,0 +1,14 @@
+@use 'exports' as *;
+
+.fileToolbar {
+	@include vars;
+	@include component;
+
+	&.mod-disablePositioning {
+		@include disablePositioning;
+
+		&.mod-S {
+			@include disablePositioningS;
+		}
+	}
+}

package/src/components/fileToolbar/mods.scss

@@ -0,0 +1,9 @@
+@use '@lucca-front/scss/src/components/button/exports' as button;
+
+@mixin disablePositioning {
+	--components-fileToolbar-display: contents;
+}
+
+@mixin disablePositioningS {
+	--components-fileToolbar-list-padding: 0;
+}

package/src/components/fileToolbar/vars.scss

@@ -0,0 +1,5 @@
+@mixin vars {
+	--components-fileToolbar-list-padding: var(--pr-t-spacings-50);
+	--components-fileToolbar-display: block;
+	--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);
+}

package/src/components/fileUpload/component.scss

@@ -0,0 +1,103 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/components/button/exports' as button;
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	position: relative;
+	border: 1px var(--components-fileUpload-borderStyle) var(--components-fileUpload-borderColor);
+	overflow: hidden;
+	border-radius: var(--commons-borderRadius-L);
+	background-color: var(--components-fileUpload-backgroundColor);
+	padding: var(--components-fileUpload-padding);
+	text-align: var(--components-fileUpload-textAlign);
+	display: var(--components-fileUpload-display);
+	flex-direction: var(--components-fileUpload-flexDirection);
+	align-items: var(--components-fileUpload-alignItems);
+	justify-content: var(--components-fileUpload-justifyContent);
+	gap: var(--pr-t-spacings-200);
+	color: var(--palettes-neutral-800);
+	min-block-size: var(--components-fileUpload-minHeight);
+
+	&:has(.fileUpload-input:focus-visible) {
+		@include a11y.focusVisible;
+	}
+
+	@at-root ($atRoot) {
+		.fileUpload-status {
+			min-inline-size: var(--pr-t-spacings-600);
+			min-block-size: var(--pr-t-spacings-600);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600));
+		}
+
+		.fileUpload-status-preview {
+			position: absolute;
+			inset: var(--components-fileUpload-status-img-inset);
+			inline-size: var(--components-fileUpload-status-img-size);
+			block-size: var(--components-fileUpload-status-img-size);
+			border-radius: var(--commons-borderRadius-M);
+			background-color: var(--palettes-neutral-25);
+			display: flex;
+			overflow: hidden;
+		}
+
+		.fileUpload-status-preview-img {
+			object-fit: cover;
+			opacity: 0.08;
+			width: 100%;
+			height: 100%;
+		}
+
+		.fileUpload-input {
+			position: absolute;
+			inset: calc(var(--pr-t-spacings-400) * -1) 0 0;
+			opacity: 0.0001;
+			cursor: pointer;
+			z-index: 1;
+		}
+
+		.fileUpload-instruction {
+			display: var(--components-fileUpload-instruction-display);
+			flex-direction: column;
+			align-items: var(--components-fileUpload-instruction-alignItems);
+			max-inline-size: var(--components-fileUpload-instruction-maxWidth);
+			line-height: var(--sizes-S-lineHeight);
+		}
+
+		.fileUpload-instruction-action {
+			display: block;
+			margin-bottom: var(--fileUpload-instruction-action-marginBottom);
+			line-height: var(--sizes-M-lineHeight);
+
+			span {
+				color: var(--components-fileUpload-instruction-action-color);
+				font-weight: var(--components-fileUpload-instruction-action-fontWeight);
+			}
+		}
+
+		.fileUpload-instruction-size,
+		.fileUpload-instruction-formats {
+			color: var(--palettes-neutral-600);
+			font-size: var(--sizes-S-fontSize);
+			vertical-align: top;
+		}
+
+		.fileUpload-button.button {
+			visibility: var(--components-fileUpload-button-visibility);
+			display: var(--components-fileUpload-button-display);
+		}
+
+		.fileUpload-instruction-filename {
+			display: block;
+			font-weight: 600;
+			color: var(--components-fileUpload-instruction-filename-color);
+			margin-block-start: var(--components-fileUpload-instruction-filename-marginTop);
+			inset-block-end: var(--pr-t-spacings-100);
+			position: var(--components-fileUpload-instruction-filename-position);
+		}
+	}
+}

package/src/components/fileUpload/exports.scss

@@ -0,0 +1,4 @@
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';

package/src/components/fileUpload/index.scss

@@ -0,0 +1,46 @@
+@use 'exports' as *;
+
+.fileUpload {
+	@include vars;
+	@include component;
+
+	&:hover {
+		@include hover;
+	}
+
+	&.mod-dropzone {
+		@include dropzone;
+	}
+
+	&.mod-S {
+		@include S;
+
+		&.is-loading {
+			@include loadingS;
+		}
+	}
+
+	&.is-loading {
+		@include loading;
+	}
+
+	&.is-hidden {
+		@include hidden;
+	}
+
+	&.is-success {
+		@include success;
+	}
+
+	&.is-error {
+		@include error;
+
+		&:hover {
+			@include errorHover;
+		}
+	}
+
+	&.is-droppable {
+		@include droppable;
+	}
+}

package/src/components/fileUpload/mods.scss

@@ -0,0 +1,24 @@
+@mixin S {
+	--components-fileUpload-button-display: none;
+	--components-fileUpload-padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);
+	--components-fileUpload-textAlign: left;
+	--components-fileUpload-flexDirection: row;
+	--components-fileUpload-instruction-alignItems: stretch;
+	--components-fileUpload-instruction-display: block;
+	--components-fileUpload-instruction-maxWidth: none;
+	--components-fileUpload-instruction-action-fontWeight: 600;
+	--fileUpload-instruction-action-marginBottom: 0;
+	--components-fileUpload-instruction-action-color: var(--palettes-product-700);
+	--components-fileUpload-alignItems: flex-start;
+	--components-fileUpload-minHeight: none;
+	--components-fileUpload-instruction-filename-position: static;
+	--components-fileUpload-instruction-filename-marginTop: 0;
+	--components-fileUpload-justifyContent: flex-start;
+	--components-fileUpload-status-img-inset: 0;
+	--components-fileUpload-status-img-size: var(--pr-t-spacings-600);
+}
+
+@mixin dropzone {
+	position: fixed;
+	inset: var(--pr-t-spacings-200);
+}

package/src/components/fileUpload/states.scss

@@ -0,0 +1,37 @@
+@mixin droppable {
+	--components-fileUpload-borderStyle: solid;
+	--components-fileUpload-backgroundColor: var(--palettes-product-50);
+	--components-fileUpload-borderColor: var(--palettes-product-600);
+}
+
+@mixin hover {
+	--components-fileUpload-borderColor: var(--palettes-product-600);
+}
+
+@mixin success {
+	--components-fileUpload-instruction-filename-color: var(--palettes-success-800);
+	--components-fileUpload-button-visibility: hidden;
+}
+
+@mixin error {
+	--components-fileUpload-instruction-filename-color: var(--palettes-critical-800);
+	--components-fileUpload-backgroundColor: var(--palettes-critical-50);
+	--components-fileUpload-borderColor: var(--palettes-critical-400);
+}
+
+@mixin errorHover {
+	--components-fileUpload-borderColor: var(--palettes-critical-600);
+}
+
+@mixin loading {
+	--components-fileUpload-instruction-display: none;
+	--components-fileUpload-button-display: none;
+}
+
+@mixin loadingS {
+	--components-fileUpload-instruction-display: block;
+}
+
+@mixin hidden {
+	--components-fileUpload-display: none;
+}

package/src/components/fileUpload/vars.scss

@@ -0,0 +1,26 @@
+@mixin vars {
+	--components-fileUpload-button-display: block;
+	--components-fileUpload-button-visibility: visible;
+	--components-fileUpload-padding: var(--pr-t-spacings-300);
+	--components-fileUpload-textAlign: center;
+	--components-fileUpload-flexDirection: column;
+	--components-fileUpload-instruction-display: flex;
+	--components-fileUpload-instruction-alignItems: center;
+	--fileUpload-instruction-action-marginBottom: var(--pr-t-spacings-50);
+	--components-fileUpload-width: auto;
+	--components-fileUpload-display: flex;
+	--components-fileUpload-instruction-maxWidth: 30rem;
+	--components-fileUpload-instruction-action-fontWeight: 400;
+	--components-fileUpload-instruction-action-color: inherit;
+	--components-fileUpload-borderColor: var(--palettes-neutral-300);
+	--components-fileUpload-borderStyle: dashed;
+	--components-fileUpload-backgroundColor: var(--pr-t-elevation-surface-raised);
+	--components-fileUpload-alignItems: center;
+	--components-fileUpload-instruction-filename-color: inherit;
+	--components-fileUpload-instruction-filename-marginTop: calc(var(--pr-t-spacings-300) * -1);
+	--components-fileUpload-minHeight: 21.5rem;
+	--components-fileUpload-instruction-filename-position: relative;
+	--components-fileUpload-justifyContent: center;
+	--components-fileUpload-status-img-inset: var(--pr-t-spacings-75);
+	--components-fileUpload-status-img-size: calc(100% - var(--pr-t-spacings-75) * 2);
+}

package/src/components/filterBar/mods.scss

@@ -16,9 +16,9 @@
 
 @mixin notCompact {
 	.filterBar-divider.divider {
-		@include divider.vertical;
-
 		margin-inline: var(--pr-t-spacings-50);
+
+		@include divider.vertical;
 	}
 
 	.filterBar-scrollBox.scrollBox {