@configura/web-ui 1.4.0-alpha.4 → 1.5.0

package/dist/scss/_tasks.scss

@@ -0,0 +1,72 @@
+@use "mixins";
+
+@mixin classes($borderColor, $linkColor) {
+	$preview-size: 4.8em;
+	$line-width: 0.1em;
+	$icon-size: 2em;
+
+	.cfgTaskList {
+		ul {
+			list-style-type: none;
+			padding: 0;
+			margin: 1em 0 0 0;
+			border-bottom: 0.1em solid $borderColor;
+		}
+
+		&__item {
+			padding: 0 1.5em 0 1.7em;
+			margin-bottom: 1em;
+			display: flex;
+			align-items: center;
+		}
+
+		&__preview {
+			border: 0.1em solid $borderColor;
+			border-radius: 10%;
+			width: $preview-size;
+			height: $preview-size;
+			flex-shrink: 0;
+
+			img {
+				object-fit: cover;
+				position: relative;
+				left: 0.1 * $preview-size - $line-width;
+				top: 0.1 * $preview-size - $line-width;
+				width: 0.8 * $preview-size;
+				height: 0.8 * $preview-size;
+			}
+		}
+
+		&__icon {
+			flex-shrink: 0;
+			width: $icon-size + 2em;
+			height: $icon-size;
+			padding-left: 1em;
+			padding-right: 1em;
+
+			.cfgLoadingSizer {
+				font-size: 0.75em;
+			}
+		}
+
+		&__status {
+			flex-grow: 1;
+			font-size: 1.5em;
+		}
+
+		&__abort {
+			@include mixins.noButtonLook;
+			cursor: pointer;
+			width: $icon-size;
+			height: $icon-size;
+			flex-shrink: 0;
+		}
+
+		&__restart {
+			@include mixins.noButtonLook;
+			cursor: pointer;
+			text-decoration: underline;
+			color: $linkColor;
+		}
+	}
+}

package/dist/scss/_themed.scss

@@ -1,124 +1,147 @@
-@use "sass:map";
-@use "sass:color";
-
-@use "variables" as v;
-
-// Components
-@use "button";
-
-@use "configurator";
-@use "expandable";
-@use "hr";
-@use "feature-item";
-@use "option-tree";
-@use "product-information";
-@use "loading";
-@use "slider";
-@use "range-view";
-
-// Icons
-@use "icons/checkmark";
-@use "icons/chevron";
-
-// Utilities
-@use "utilities";
-
-/* Colors */
-
-$black: hsl(0, 0%, 0%) !default;
-$white: hsl(0, 0%, 100%) !default;
-$darkGrey: hsl(0, 0%, 15%) !default;
-
-/* Specific colors */
-
-$border: hsl(252, 5%, 79%) !default;
-$borderDark: hsl(0, 0%, 73%) !default;
-$focusOutlineOuter: hsl(0, 0%, 13%) !default;
-$sliderTrack: #666 !default;
-$spinner2: hsla(0, 0%, 0%, 0.15);
-$grayText: hsl(0, 0%, 50%) !default;
-$text: hsl(0, 0%, 20%) !default;
-/* As convention we assume the default theme when naming colors,
-   as attempts at generic naming often leads to confussion */
-$lightTheme: (
-	"black": $black,
-	"border": $border,
-	"borderDark": $borderDark,
-	"checkButtonChecked": $black,
-	"checkButtonUnchecked": $border,
-	"chevronActive": $black,
-	"chevronPassive": $borderDark,
-	"divider": $border,
-	"focusOutlineInner": $white,
-	"focusOutlineOuter": $text,
-	"grayText": $grayText,
-	"overlayBackground": $white,
-	"sliderThumb": $white,
-	"sliderThumbShadow": $sliderTrack,
-	"sliderTrack": $sliderTrack,
-	"spinner1": $black,
-	"spinner2": $spinner2,
-	"text": $text,
-	"white": $white,
-) !default;
-
-@function invertLightness($color) {
-	@return color.change(
-		$color,
-		$lightness: 100 - color.lightness($color) * 0.8
-	); // We scale with 80% to have a bit more contrast
-}
-
-@function invertLightnessList($list) {
-	@each $key, $color in $list {
-		$list: map.set($list, $key, invertLightness($color));
-	}
-	@return $list;
-}
-
-$darkTheme: invertLightnessList($lightTheme);
-
-$themes: (
-	"light": $lightTheme,
-	"dark": $darkTheme,
-);
-
-@mixin themed($ct, $baseFontSize: v.$baseFontSize, $overlayingZIndex: v.$overlayingZIndex) {
-	@include button.classes(
-		map.get($ct, "text"),
-		map.get($ct, "borderDark"),
-		map.get($ct, "focusOutlineInner"),
-		map.get($ct, "focusOutlineOuter")
-	);
-	@include configurator.classes($baseFontSize, map.get($ct, "text"), map.get($ct, "divider"));
-	@include expandable.classes;
-	@include hr.classes(map.get($ct, "divider"));
-	@include feature-item.classes(
-		map.get($ct, "text"),
-		map.get($ct, "grayText"),
-		map.get($ct, "checkButtonUnchecked"),
-		map.get($ct, "checkButtonChecked"),
-		map.get($ct, "focusOutlineInner"),
-		map.get($ct, "focusOutlineOuter")
-	);
-	@include option-tree.classes;
-	@include product-information.classes(map.get($ct, "text"));
-	@include loading.classes(
-		map.get($ct, "black"),
-		map.get($ct, "spinner1"),
-		map.get($ct, "spinner2"),
-		map.get($ct, "overlayBackground"),
-		$overlayingZIndex
-	);
-
-	@include slider.classes(
-		map.get($ct, "sliderTrack"),
-		map.get($ct, "sliderThumb"),
-		map.get($ct, "sliderThumbShadow")
-	);
-	@include checkmark.classes(
-		map.get($ct, "checkButtonChecked"),
-		map.get($ct, "checkButtonUnchecked")
-	);
-	@include chevron.classes(map.get($ct, "chevronActive"), map.get($ct, "chevronPassive"));
-}
+@use "sass:map";
+@use "sass:color";
+
+@use "variables" as v;
+
+// Components
+@use "button";
+@use "forms";
+
+@use "configurator";
+@use "expandable";
+@use "feature-item";
+@use "hr";
+@use "loading";
+@use "option-tree";
+@use "product-information";
+@use "range-view";
+@use "slider";
+@use "tasks";
+
+// Icons
+@use "icons/checkmark";
+@use "icons/chevron";
+@use "icons/circle-xmark-icon";
+@use "icons/download-icon";
+@use "icons/error-icon";
+
+// Utilities
+@use "utilities";
+
+/* Colors */
+
+$black: hsl(0, 0%, 0%) !default;
+$white: hsl(0, 0%, 100%) !default;
+$darkGrey: hsl(0, 0%, 15%) !default;
+
+/* Specific colors */
+
+$border: hsl(252, 5%, 79%) !default;
+$borderDark: hsl(0, 0%, 73%) !default;
+$icon: hsl(252, 5%, 50%) !default;
+$focusOutlineOuter: hsl(0, 0%, 13%) !default;
+$sliderTrack: #666 !default;
+$spinner2: hsla(0, 0%, 0%, 0.15);
+$grayText: hsl(0, 0%, 50%) !default;
+$text: hsl(0, 0%, 20%) !default;
+$link: hsl(209, 100%, 35%) !default;
+$error: hsl(10, 72%, 41%) !default;
+
+/* As convention we assume the default theme when naming colors,
+   as attempts at generic naming often leads to confusion */
+$lightTheme: (
+	"black": $black,
+	"border": $border,
+	"borderDark": $borderDark,
+	"checkButtonChecked": $black,
+	"checkButtonUnchecked": $border,
+	"chevronActive": $black,
+	"chevronPassive": $borderDark,
+	"divider": $border,
+	"dividerDark": $borderDark,
+	"error": $error,
+	"focusOutlineInner": $white,
+	"focusOutlineOuter": $text,
+	"grayText": $grayText,
+	"icon": $icon,
+	"link": $link,
+	"overlayBackground": $white,
+	"sliderThumb": $white,
+	"sliderThumbShadow": $sliderTrack,
+	"sliderTrack": $sliderTrack,
+	"spinner1": $black,
+	"spinner2": $spinner2,
+	"text": $text,
+	"white": $white,
+) !default;
+
+@function invertLightness($color) {
+	@return color.change(
+		$color,
+		$lightness: 100 - color.lightness($color) * 0.8
+	); // We scale with 80% to have a bit more contrast
+}
+
+@function invertLightnessList($list) {
+	@each $key, $color in $list {
+		$list: map.set($list, $key, invertLightness($color));
+	}
+	@return $list;
+}
+
+$darkTheme: invertLightnessList($lightTheme);
+
+$themes: (
+	"light": $lightTheme,
+	"dark": $darkTheme,
+);
+
+@mixin themed($ct, $baseFontSize: v.$baseFontSize, $overlayingZIndex: v.$overlayingZIndex) {
+	a {
+		color: map.get($ct, "link");
+	}
+
+	@include button.classes(
+		map.get($ct, "text"),
+		map.get($ct, "borderDark"),
+		map.get($ct, "focusOutlineInner"),
+		map.get($ct, "focusOutlineOuter")
+	);
+	@include checkmark.classes(
+		map.get($ct, "checkButtonChecked"),
+		map.get($ct, "checkButtonUnchecked")
+	);
+	@include chevron.classes(map.get($ct, "chevronActive"), map.get($ct, "chevronPassive"));
+	@include circle-xmark-icon.classes(map.get($ct, "icon"));
+	@include configurator.classes($baseFontSize, map.get($ct, "text"), map.get($ct, "divider"));
+	@include download-icon.classes(map.get($ct, "link"));
+	@include expandable.classes;
+	@include error-icon.classes(map.get($ct, "error"));
+	@include feature-item.classes(
+		map.get($ct, "text"),
+		map.get($ct, "grayText"),
+		map.get($ct, "checkButtonUnchecked"),
+		map.get($ct, "checkButtonChecked"),
+		map.get($ct, "focusOutlineInner"),
+		map.get($ct, "focusOutlineOuter"),
+		map.get($ct, "dividerDark")
+	);
+	@include forms.classes(map.get($ct, "borderDark"));
+	@include hr.classes(map.get($ct, "divider"));
+	@include loading.classes(
+		map.get($ct, "black"),
+		map.get($ct, "spinner1"),
+		map.get($ct, "spinner2"),
+		map.get($ct, "overlayBackground"),
+		$overlayingZIndex
+	);
+	@include option-tree.classes;
+	@include product-information.classes(map.get($ct, "text"));
+	@include range-view.classes(map.get($ct, "error"));
+	@include slider.classes(
+		map.get($ct, "sliderTrack"),
+		map.get($ct, "sliderThumb"),
+		map.get($ct, "sliderThumbShadow")
+	);
+	@include tasks.classes(map.get($ct, "border"), map.get($ct, "link"));
+}

package/dist/scss/_utilities.scss

@@ -1,21 +1,21 @@
-/**
- * Web UI Utilities
- */
-
-.cfgMl1 {
-	margin-left: 1em;
-}
-
-.cfgMt1 {
-	margin-top: 1em;
-}
-
-.cfgMb1 {
-	margin-bottom: 1em;
-}
-
-.cfgTextOverflow {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
+/**
+ * Web UI Utilities
+ */
+
+.cfgMl1 {
+	margin-left: 1em;
+}
+
+.cfgMt1 {
+	margin-top: 1em;
+}
+
+.cfgMb1 {
+	margin-bottom: 1em;
+}
+
+.cfgTextOverflow {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

package/dist/scss/_variables.scss

@@ -1,6 +1,6 @@
-/**
- * Web UI Variables
- */
-	
-$baseFontSize: 10px !default; // We use 10px for easy em conversion
-$overlayingZIndex: 1000 !default;
+/**
+ * Web UI Variables
+ */
+	
+$baseFontSize: 10px !default; // We use 10px for easy em conversion
+$overlayingZIndex: 1000 !default;

package/dist/scss/icons/_checkmark.scss

@@ -1,46 +1,46 @@
-@use "../mixins";
-
-@mixin classes($colorActive, $colorPassive) {
-	.cfgCheckmark {
-		/* The distance-units inside the checkmark are px even though everything
-		   else is relative units. The SVG has its own coordinate space. */
-
-		@include mixins.cfgRootStyles;
-
-		display: inline-block;
-		width: 100%;
-		height: 100%;
-
-		&__container {
-			transition: transform 0.4s;
-			transform: translateY(17px);
-		}
-
-		&__line {
-			stroke: $colorActive;
-			stroke-linecap: round;
-			stroke-width: 12;
-			transform-origin: 50px 50px;
-			transition: transform 0.4s, stroke 0.4s;
-		}
-
-		&__lineLeft {
-			stroke: $colorActive;
-			transform: rotate(40deg) translateY(24px) translateX(18px);
-		}
-
-		&__lineRight {
-			stroke: $colorActive;
-			transform: rotate(-50deg) translateY(-2px) translateX(-3px);
-		}
-
-		@content;
-
-		&__border {
-			@include mixins.cfgCheckbox($colorPassive);
-			&--active {
-				@include mixins.cfgCheckbox($colorActive);
-			}
-		}
-	}
-}
+@use "../mixins";
+
+@mixin classes($colorActive, $colorPassive) {
+	.cfgCheckmark {
+		/* The distance-units inside the checkmark are px even though everything
+		   else is relative units. The SVG has its own coordinate space. */
+
+		@include mixins.cfgRootStyles;
+
+		display: inline-block;
+		width: 100%;
+		height: 100%;
+
+		&__container {
+			transition: transform 0.4s;
+			transform: translateY(17px);
+		}
+
+		&__line {
+			stroke: $colorActive;
+			stroke-linecap: round;
+			stroke-width: 12;
+			transform-origin: 50px 50px;
+			transition: transform 0.4s, stroke 0.4s;
+		}
+
+		&__lineLeft {
+			stroke: $colorActive;
+			transform: rotate(40deg) translateY(24px) translateX(18px);
+		}
+
+		&__lineRight {
+			stroke: $colorActive;
+			transform: rotate(-50deg) translateY(-2px) translateX(-3px);
+		}
+
+		@content;
+
+		&__border {
+			@include mixins.cfgCheckbox($colorPassive);
+			&--active {
+				@include mixins.cfgCheckbox($colorActive);
+			}
+		}
+	}
+}

package/dist/scss/icons/_chevron.scss

@@ -1,62 +1,62 @@
-@use "../mixins";
-
-@mixin classes($activeColor, $passiveColor) {
-	.cfgChevron {
-		/* The distance-units inside the chevron are px even though everything
-		   else is relative units. The SVG has its own coordinate space. */
-
-		@include mixins.cfgRootStyles;
-
-		display: inline-block;
-		width: 100%;
-
-		&__container {
-			transition: transform 0.4s;
-
-			&--down {
-				transform: translateY(13px);
-			}
-
-			&--up {
-				transform: translateY(-13px);
-			}
-		}
-
-		&__line {
-			stroke-linecap: round;
-			stroke-width: 10;
-			transform-origin: 50px 50px;
-			transition: transform 0.4s, stroke 0.4s;
-		}
-
-		&__lineLeft,
-		&__lineRight {
-			&--active {
-				stroke: $activeColor;
-			}
-			&--passive {
-				stroke: $passiveColor;
-			}
-		}
-
-		&__lineLeft {
-			&--down {
-				transform: rotate(40deg);
-			}
-			&--up {
-				transform: rotate(-40deg);
-			}
-		}
-		&__lineRight {
-			&--down {
-				transform: rotate(-40deg);
-			}
-
-			&--up {
-				transform: rotate(40deg);
-			}
-		}
-
-		@content;
-	}
-}
+@use "../mixins";
+
+@mixin classes($activeColor, $passiveColor) {
+	.cfgChevron {
+		/* The distance-units inside the chevron are px even though everything
+		   else is relative units. The SVG has its own coordinate space. */
+
+		@include mixins.cfgRootStyles;
+
+		display: inline-block;
+		width: 100%;
+
+		&__container {
+			transition: transform 0.4s;
+
+			&--down {
+				transform: translateY(13px);
+			}
+
+			&--up {
+				transform: translateY(-13px);
+			}
+		}
+
+		&__line {
+			stroke-linecap: round;
+			stroke-width: 10;
+			transform-origin: 50px 50px;
+			transition: transform 0.4s, stroke 0.4s;
+		}
+
+		&__lineLeft,
+		&__lineRight {
+			&--active {
+				stroke: $activeColor;
+			}
+			&--passive {
+				stroke: $passiveColor;
+			}
+		}
+
+		&__lineLeft {
+			&--down {
+				transform: rotate(40deg);
+			}
+			&--up {
+				transform: rotate(-40deg);
+			}
+		}
+		&__lineRight {
+			&--down {
+				transform: rotate(-40deg);
+			}
+
+			&--up {
+				transform: rotate(40deg);
+			}
+		}
+
+		@content;
+	}
+}

package/dist/scss/icons/_circle-xmark-icon.scss

@@ -0,0 +1,24 @@
+@use "../mixins";
+
+@mixin classes($color) {
+	.cfgCircleXmarkIcon {
+		/* The distance-units inside the icon are px even though everything
+		   else is relative units. The SVG has its own coordinate space. */
+
+		@include mixins.cfgRootStyles;
+
+		display: inline-block;
+		width: 100%;
+		height: 100%;
+
+		path,
+		circle {
+			stroke: $color;
+			stroke-linecap: round;
+			stroke-linejoin: round;
+			stroke-width: 1.5;
+		}
+
+		@content;
+	}
+}

package/dist/scss/icons/_download-icon.scss

@@ -0,0 +1,24 @@
+@use "../mixins";
+
+@mixin classes($color) {
+	.cfgDownloadIcon {
+		/* The distance-units inside the icon are px even though everything
+		   else is relative units. The SVG has its own coordinate space. */
+
+		@include mixins.cfgRootStyles;
+
+		display: inline-block;
+		width: 100%;
+		height: 100%;
+
+		path,
+		circle {
+			stroke: $color;
+			stroke-linecap: round;
+			stroke-linejoin: round;
+			stroke-width: 1.5;
+		}
+
+		@content;
+	}
+}