feat(vivid templates): add login template

components/badge/CHANGELOG.md

@@ -229,7 +229,7 @@
 ### Features
 
 * **connotation:** adding support for warning connotation ([#488](https://github.com/vonage/vivid/issues/488)) ([245a9b9](https://github.com/vonage/vivid/commit/245a9b9c095b2af4f3d9a088d0c6219370199c2d))
-* **vwc-inline:** new component to handle inline layouts ([9b03d6b](https://github.com/vonage/vivid/commit/9b03d6b3171c891985a10c77edfc2f78b78be68d))
+* **vwc-layout:** new component to handle inline layouts ([9b03d6b](https://github.com/vonage/vivid/commit/9b03d6b3171c891985a10c77edfc2f78b78be68d))
 
 
 

components/layout/CHANGELOG.md

@@ -1,4 +1,220 @@
-## [2.20.1](https://github.com/vonage/vivid/compare/v2.20.0...v2.20.1) (2021-10-07)
+# [2.20.0](https://github.com/vonage/vivid/compare/v2.19.0...v2.20.0) (2021-10-07)
+
+
+### Features
+
+* **vwc-inline:** add more inline size options ([#1053](https://github.com/vonage/vivid/issues/1053)) ([1b8020d](https://github.com/vonage/vivid/commit/1b8020d4a0137801444bc5182d12949d902def86))
+
+
+
+# [2.19.0](https://github.com/vonage/vivid/compare/v2.18.1...v2.19.0) (2021-10-04)
+
+
+
+## [2.18.1](https://github.com/vonage/vivid/compare/v2.18.0...v2.18.1) (2021-08-25)
+
+
+
+# [2.18.0](https://github.com/vonage/vivid/compare/v2.17.0...v2.18.0) (2021-08-24)
+
+
+
+# [2.17.0](https://github.com/vonage/vivid/compare/v2.16.1...v2.17.0) (2021-08-09)
+
+
+
+## [2.16.1](https://github.com/vonage/vivid/compare/v2.16.0...v2.16.1) (2021-07-29)
+
+
+
+# [2.16.0](https://github.com/vonage/vivid/compare/v2.15.0...v2.16.0) (2021-07-28)
+
+
+
+# [2.15.0](https://github.com/vonage/vivid/compare/v2.14.0...v2.15.0) (2021-07-20)
+
+
+
+# [2.14.0](https://github.com/vonage/vivid/compare/v2.13.0...v2.14.0) (2021-07-13)
+
+
+
+# [2.13.0](https://github.com/vonage/vivid/compare/v2.12.0...v2.13.0) (2021-07-04)
+
+
+
+# [2.12.0](https://github.com/vonage/vivid/compare/v2.11.0...v2.12.0) (2021-06-14)
+
+
+
+# [2.11.0](https://github.com/vonage/vivid/compare/v2.10.0...v2.11.0) (2021-06-07)
+
+
+
+# [2.10.0](https://github.com/vonage/vivid/compare/v2.9.1...v2.10.0) (2021-06-04)
+
+
+
+## [2.9.1](https://github.com/vonage/vivid/compare/v2.9.0...v2.9.1) (2021-05-27)
+
+
+
+# [2.9.0](https://github.com/vonage/vivid/compare/v2.8.0...v2.9.0) (2021-05-24)
+
+
+
+# [2.8.0](https://github.com/vonage/vivid/compare/v2.7.0...v2.8.0) (2021-05-20)
+
+
+
+# [2.7.0](https://github.com/vonage/vivid/compare/v2.6.2...v2.7.0) (2021-05-17)
+
+
+
+## [2.6.2](https://github.com/vonage/vivid/compare/v2.6.1...v2.6.2) (2021-05-05)
+
+
+
+## [2.6.1](https://github.com/vonage/vivid/compare/v2.6.0...v2.6.1) (2021-05-04)
+
+
+
+# [2.6.0](https://github.com/vonage/vivid/compare/v2.5.0...v2.6.0) (2021-05-03)
+
+
+
+# [2.5.0](https://github.com/vonage/vivid/compare/v2.4.1...v2.5.0) (2021-04-22)
+
+
+
+## [2.4.1](https://github.com/vonage/vivid/compare/v2.4.0...v2.4.1) (2021-04-21)
+
+
+
+# [2.4.0](https://github.com/vonage/vivid/compare/v2.3.0...v2.4.0) (2021-04-19)
+
+
+
+# [2.3.0](https://github.com/vonage/vivid/compare/v2.2.4...v2.3.0) (2021-04-08)
+
+
+### Features
+
+* **vwc-layout:** add support for auto-fill/fit variance ([#746](https://github.com/vonage/vivid/issues/746)) ([17732b3](https://github.com/vonage/vivid/commit/17732b372d14cbba7708e3cf9332e1899850d3cd))
+
+
+
+## [2.2.4](https://github.com/vonage/vivid/compare/v2.2.3...v2.2.4) (2021-04-05)
+
+
+
+## [2.2.3](https://github.com/vonage/vivid/compare/v2.2.2...v2.2.3) (2021-03-30)
+
+
+
+## [2.2.2](https://github.com/vonage/vivid/compare/v2.2.1...v2.2.2) (2021-03-19)
+
+
+
+## [2.2.1](https://github.com/vonage/vivid/compare/v2.2.0...v2.2.1) (2021-03-18)
+
+
+
+# [2.2.0](https://github.com/vonage/vivid/compare/v2.1.0...v2.2.0) (2021-03-17)
+
+
+
+# [2.1.0](https://github.com/vonage/vivid/compare/v2.0.4...v2.1.0) (2021-03-16)
+
+
+
+## [2.0.4](https://github.com/vonage/vivid/compare/v2.0.3...v2.0.4) (2021-03-03)
+
+
+
+## [2.0.3](https://github.com/vonage/vivid/compare/v2.0.2...v2.0.3) (2021-02-28)
+
+
+
+## [2.0.2](https://github.com/vonage/vivid/compare/v2.0.1...v2.0.2) (2021-02-24)
+
+
+
+## [2.0.1](https://github.com/vonage/vivid/compare/v2.0.0...v2.0.1) (2021-02-23)
+
+
+
+# [2.0.0](https://github.com/vonage/vivid/compare/v1.3.1...v2.0.0) (2021-02-22)
+
+
+
+## [1.3.1](https://github.com/vonage/vivid/compare/v1.3.0...v1.3.1) (2021-02-11)
+
+
+
+# [1.3.0](https://github.com/vonage/vivid/compare/v1.2.0...v1.3.0) (2021-02-11)
+
+
+
+# [1.2.0](https://github.com/vonage/vivid/compare/v1.1.3...v1.2.0) (2021-02-03)
+
+
+
+## [1.1.3](https://github.com/vonage/vivid/compare/v1.1.2...v1.1.3) (2021-01-27)
+
+
+
+## [1.1.2](https://github.com/vonage/vivid/compare/v1.1.1...v1.1.2) (2021-01-27)
+
+
+
+## [1.1.1](https://github.com/vonage/vivid/compare/v1.1.0...v1.1.1) (2021-01-25)
+
+
+
+# [1.1.0](https://github.com/vonage/vivid/compare/v1.0.4...v1.1.0) (2021-01-25)
+
+
+
+## [1.0.4](https://github.com/vonage/vivid/compare/v1.0.3...v1.0.4) (2021-01-19)
+
+
+
+## [1.0.2](https://github.com/vonage/vivid/compare/v1.0.1...v1.0.2) (2021-01-15)
+
+
+
+## [1.0.1](https://github.com/vonage/vivid/compare/v1.0.0...v1.0.1) (2021-01-15)
+
+
+
+# [1.0.0](https://github.com/vonage/vivid/compare/v0.19.1...v1.0.0) (2021-01-13)
+
+
+
+## [0.19.1](https://github.com/vonage/vivid/compare/v0.19.0...v0.19.1) (2021-01-10)
+
+
+
+# [0.19.0](https://github.com/vonage/vivid/compare/v0.17.2...v0.19.0) (2021-01-07)
+
+
+
+## [0.17.2](https://github.com/vonage/vivid/compare/v0.17.1...v0.17.2) (2020-12-17)
+
+
+### Bug Fixes
+
+* **inline:** patched typescript warning ([6a96d02](https://github.com/vonage/vivid/commit/6a96d02c4c0181e955ba4450b1c278dbb556909d))
+
+
+
+## [0.17.1](https://github.com/vonage/vivid/compare/v0.17.0...v0.17.1) (2020-12-15)
+
+
+### Features
+
+* **vwc-layout:** new component to handle inline layouts ([9b03d6b](https://github.com/vonage/vivid/commit/9b03d6b3171c891985a10c77edfc2f78b78be68d))
 
 
 

components/layout/package.json

@@ -21,7 +21,7 @@
 	"scripts": {
 		"test": "echo \"Error: run tests from root\" && exit 1",
 		"build:typescript": "tsc -b",
-		"build:styles": "umbrella-style-modules",
+		"build:styles": "umbrella-style-modules --path=\"./src\"",
 		"build": "yarn run build:styles && yarn run build:typescript"
 	},
 	"bugs": {
@@ -36,4 +36,4 @@
 		"@vonage/vvd-umbrella": "2.20.1",
 		"typescript": "^4.3.2"
 	}
-}
+}

components/layout/src/partials/_vwc-layout-functions.scss

@@ -0,0 +1,15 @@
+@function get-default-selector($list, $prefix) {
+	$selector: '';
+	@each $item in $list {
+		$selector: $selector + ':not(#{$prefix}-#{$item})';
+	}
+	@return $selector;
+}
+
+@function get-selector-with-default($prefix, $key, $default-key, $all-keys) {
+	$selector: '&#{$prefix}-#{$key}';
+	@if $key == $default-key {
+		$selector: '&#{get-default-selector($all-keys, $prefix)}', $selector;
+	}
+	@return $selector;
+}

components/layout/src/partials/_vwc-layout-mixins.scss

@@ -0,0 +1,5 @@
+@mixin measurement($types...) {
+	@each $type in $types {
+		@content($type);
+	}
+}

components/layout/src/partials/_vwc-layout-variables.scss

@@ -0,0 +1,22 @@
+$layout-auto-sizing: --layout-auto-sizing;
+
+/* #region SIZEs */
+$auto-sizes: (
+	fill: auto-fill,
+	fit: auto-fit,
+);
+
+/* #region BASES */
+$bases: (
+	sm: 10rem,
+	md: 20rem,
+	lg: 30rem,
+	block: 1fr
+);
+
+/* #region SPACES */
+$spaces: (
+	xs: 16px,
+	md: 24px,
+	xl: 32px,
+);

components/layout/src/vwc-layout.scss

@@ -1,58 +1,37 @@
 @use 'sass:map';
 
-$items-min-inline-size-v-name: --items-min-inline-size;
-$items-spacing-v-name: --items-spacing;
-$gutters-v-name: --gutters;
-$auto-sizing: --auto-sizing;
-
-/* #region SIZE */
-$items-min-inline-sizes: (
-	sm: 10rem,
-	md: 20rem,
-	lg: 30rem,
-);
-
-/* #region SPACEING */
-$items-spacings: (
-	xs: 16px,
-	md: 24px,
-	xl: 32px,
-);
-
-@each $key, $value in $items-min-inline-sizes {
-	.layout-column-basis-#{$key} {
-		#{$items-min-inline-size-v-name}: $value;
-	}
-}
-
-@each $key, $value in $items-spacings {
-	.layout-column-spacing-#{$key} {
-		#{$items-spacing-v-name}: $value;
-	}
-	.layout-gutters-#{$key} {
-		#{$gutters-v-name}: $value;
-	}
-}
+@use 'partials/vwc-layout-variables' as variables;
+@use 'partials/vwc-layout-mixins' as mixins;
+@use 'partials/vwc-layout-functions' as functions;
 
 .layout {
 	display: grid;
-	margin: var(#{$gutters-v-name}, 0);
-	gap: var(#{$items-spacing-v-name}, #{map.get($items-spacings, md)});
 	grid-auto-rows: min-content;
-	grid-template-columns: repeat(
-		var(#{$auto-sizing}),
-		minmax(var(#{$items-min-inline-size-v-name}, #{map.get($items-min-inline-sizes, lg)}), 1fr)
-	);
 
-	&:not(.layout-auto-sizing-fill),
-	&.layout-auto-sizing-fit {
-		#{$auto-sizing}: auto-fit;
+	@include mixins.measurement(map.keys(variables.$bases)...) using ($basis) {
+		#{functions.get-selector-with-default(".layout-column-basis", $basis, md, map.keys(variables.$bases))} {
+			grid-template-columns: repeat(
+				var(#{variables.$layout-auto-sizing}),
+				minmax(map.get(variables.$bases, $basis), 1fr)
+			);
+		}
 	}
-	&.layout-auto-sizing-fill {
-		#{$auto-sizing}: auto-fill;
+
+	@include mixins.measurement(map.keys(variables.$spaces)...) using ($space) {
+		#{functions.get-selector-with-default(".layout-column-spacing", $space, md, map.keys(variables.$spaces))} {
+			gap: map.get(variables.$spaces, $space);
+		}
+	}
+
+	@include mixins.measurement(map.keys(variables.$spaces)...) using ($space) {
+		&.layout-gutters-#{$space} {
+			margin: map.get(variables.$spaces, $space);
+		}
 	}
 
-	&.layout-column-basis-block {
-		grid-template-columns: 1fr;
+	@include mixins.measurement(map.keys(variables.$auto-sizes)...) using ($size) {
+		#{functions.get-selector-with-default(".layout-auto-sizing", $size, fit, map.keys(variables.$auto-sizes))} {
+			#{variables.$layout-auto-sizing}: map.get(variables.$auto-sizes, $size);
+		}
 	}
 }