@enigmatry/scss-foundation 1.2.28 → 1.2.31

package/.stylelintrc.json

@@ -18,7 +18,7 @@
         ]
       }
     ],
-    "media-feature-name-allowed-list": ["width"],
+    "media-feature-name-allowed-list": ["min-width", "width"],
     "scss/no-duplicate-dollar-variables": [
       true,
       {

package/coverage/clover.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1680597271182" clover="3.2.0">
-  <project timestamp="1680597271182" name="All files">
+<coverage generated="1681107143709" clover="3.2.0">
+  <project timestamp="1681107143709" name="All files">
     <metrics statements="0" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0" elements="0" coveredelements="0" complexity="0" loc="0" ncloc="0" packages="0" files="0" classes="0"/>
   </project>
 </coverage>

package/coverage/lcov-report/index.html

@@ -86,7 +86,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-04-04T08:34:31.179Z
+                at 2023-04-10T06:12:23.705Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/docs/absolute-positioning.md

@@ -13,7 +13,10 @@ Alignment utilities for absolute positioning of content.
 All arguments are optional and default to 0. Sets following properties:
 ```
 	position: absolute;
-	inset: $top, $right, $bottom, $left;
+	top: $top;
+	right: $right;
+	bottom: $bottom;
+	left: $left;
 ```
 
 - Replaces the several most common lines in absolute positioning for unset values with just one liner.
@@ -21,4 +24,3 @@ All arguments are optional and default to 0. Sets following properties:
 @include absolute.position-unset($top, $right, $bottom, $left);
 ```
 All arguments are optional and default to unset. Sets the same properties as in previous method.
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmatry/scss-foundation",
-  "version": "1.2.28",
+  "version": "1.2.31",
   "author": "Enigmatry",
   "description": "Collection of SCSS utilities useful for the most of projects.",
   "homepage": "https://github.com/enigmatry/entry-angular-building-blocks/tree/master/projects/scss-foundation#readme",
@@ -11,6 +11,7 @@
   "license": "Apache-2.0",
   "scripts": {
     "build": "sass --style=compressed --load-path=src src/partials/main.scss dist/scss-foundation.css",
+    "build-modules": "sass --style=compressed --load-path=src src/modules/_index.scss dist/scss-foundation-modules.css",
     "lint": "stylelint --fix src/**/*.scss",
     "test": "jest --coverage --colors"
   },

package/src/modules/_variables.scss

@@ -4,4 +4,9 @@ $default-breakpoints: (
 	tablet: ( size: 768px, description: 'md' ), 
 	desktop: ( size: 992px, description: 'lg'), 
 	largeDesktop: ( size: 1200px, description: 'xl'),
-	extraLargeDesktop: ( size: 1400px, description: 'xxl'));
+	extraLargeDesktop: ( size: 1400px, description: 'xxl'));
+
+$custom-breakpoints: (
+	mobile: ( size: 540px, description: 'sm' ), 
+	tablet: ( size: 800px, description: 'md' ),
+);

package/src/modules/layout/_grid-core.scss

@@ -1,5 +1,6 @@
+$breakpoints: () !default;
 @use 'sass:map';
-@use '../responsiveness/breakpoints';
+@use '../../modules/responsiveness/breakpoints' as breakpoints;
 
 @mixin generate($column-prefix, $offset-prefix, $spacing: 0) {
 	.row {
@@ -10,7 +11,6 @@
 			margin: 0 -#{$spacing};
 		}
 
-		/* stylelint-disable-next-line selector-max-attribute */
 		[class ^= #{$column-prefix}], [class ^= #{$offset-prefix}] {
 			flex-shrink: 0;
 			max-width: 100%;

package/src/modules/layout/_grid.scss

@@ -3,34 +3,47 @@ $breakpoints: () !default;
 @use 'sass:string';
 @use 'sass:map';
 @use 'sass:math';
-@use '../../modules/variables' as variables;
+@use 'sass:meta';
+@use '../../../node_modules/sass-true';
+@use '../../../node_modules/sass-true/sass/throw';
+@use '../../modules/variables' as vars;
 @forward '../../modules/responsiveness/breakpoints' with (
 	$breakpoints: $breakpoints
 );
 @use '../../modules/responsiveness/breakpoints';
-@use '../../modules/text/modification' as text-modification;
 @use 'grid-core';
 
 @if length($breakpoints) == 0 {
-	$breakpoints: variables.$default-breakpoints;
+	$breakpoints: vars.$default-breakpoints;
 }
 
 $column-prefix: 'col-';
 $offset-prefix: 'offset-';
 
 @mixin generate($spacing:0, $divisions: 12) {
-	@if type-of($divisions) != number {
-		@error 'Please provide number parameter for divisions! Given value: ' + $divisions;
+	@if meta.type-of($spacing) != number {
+		@include throw.error(
+			$message: 'Please provide number parameter! Given value: ' + $spacing,
+			$source: 'generate($spacing, $divisions)',
+			$catch: vars.$testing
+		);
 	}
-
-	@if ($divisions < 2 or $divisions > 1000) {
-		@error 'Please provide positive number for divisions! Given value: ' + $divisions;
+	@else {
+		@if ((meta.type-of($divisions) != number) or (($divisions < 2) or ($divisions > 1000))) {
+			@include throw.error(
+				$message: 'Please provide positive number for divisions, between 2 and 1000! Given value: ' + $divisions,
+				$source: 'generate($spacing, $divisions)',
+				$catch: vars.$testing
+			);
+		}
+		
+		@else {
+			@include grid-core.generate($column-prefix, $offset-prefix, $spacing);
+			@include grid-core.generate-reverse-row($breakpoints);
+			@include -unresponsive-grid-from($spacing, $divisions);
+			@include -responsive-grid-from($spacing, $divisions);
+		}
 	}
-
-	@include grid-core.generate($column-prefix, $offset-prefix, $spacing);
-	@include grid-core.generate-reverse-row($breakpoints);
-	@include -unresponsive-grid-from($spacing, $divisions);
-	@include -responsive-grid-from($spacing, $divisions);
 }
 
 @function -calculate-ratio($counter, $divisions) {

package/src/modules/position/_set-position.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
+/* stylelint-disable declaration-empty-line-before */
 @mixin set-position($position, $top, $right, $bottom, $left) {
 
 	$positions: (
@@ -12,6 +14,10 @@
 			@error 'Please provide the right parameters for position (number or 'unset')! Given value: ' + $position;
 		}
 	}
+
 	position: $position;
-	inset: $top $right $bottom $left;
+	top: $top;
+	right: $right;
+	bottom: $bottom;
+	left: $left;
 }

package/src/modules/responsiveness/_breakpoints.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable at-rule-allowed-list */
 $breakpoints: () !default;
 
 @use 'sass:list';
@@ -33,7 +34,6 @@ $breakpoints: () !default;
 }
 
 @mixin apply-on($given-size) {
-	/* stylelint-disable-next-line at-rule-allowed-list */
 	@media only screen and (width >= -get-size($given-size)) {
 		@content;
 	}

package/src/modules/text/_modification.scss

@@ -1,15 +1,15 @@
 @use 'sass:string';
 @use '../../modules/variables' as vars;
+@use '../../../node_modules/sass-true';
+@use 'sass:meta';
 
 @function capitalize($string) {
-	@if type-of($string) != string {
-		$error-message: 'Please provide string parameter! Given value: ' + $string;
-
-		@if vars.$testing == true {
-			@return $error-message;
-		}
-
-		@error $error-message;
+	@if meta.type-of($string) != string {
+		@return sass-true.error(
+			$message: 'Please provide string parameter! Given value: ' + $string,
+			$source: 'capitalize()',
+			$catch: vars.$testing
+		);
 	}
 
 	@return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2);

package/tests/layout/grid-core.tests.scss

@@ -0,0 +1,114 @@
+/* stylelint-disable selector-max-attribute */
+/* stylelint-disable csstools/use-nesting */
+/* stylelint-disable shorthand-property-no-redundant-values */
+/* stylelint-disable max-nesting-depth */
+/* stylelint-disable at-rule-allowed-list */
+$custom-breakpoints: () !default;
+
+@use '../../node_modules/sass-true/sass/true';
+@use '../../src/modules/variables' as vars;
+
+@forward '../../src/modules/layout/grid' with (
+	$breakpoints: vars.$custom-breakpoints
+);
+@use '../../src/modules/responsiveness/breakpoints' as custom-breakpoints;
+@use '../../src/modules/layout/grid-core';
+
+@include true.describe('generate($column-prefix, $offset-prefix, $spacing)') {
+	@include true.it('should generate column and offset classes. If spacing not provided, padding should be 0.') {
+		@include true.assert() {
+			@include true.output() {
+				@include grid-core.generate('col-', 'offset-');
+			}
+
+			@include true.expect() {
+				.row {
+					display: flex;
+					flex-wrap: wrap;
+				}
+
+				.row [class ^= 'col-'], .row [class ^= 'offset-'] {
+					flex-shrink: 0;
+					max-width: 100%;
+					padding: 0 0;
+				}
+
+				.col-auto {
+					flex: 0 0 auto;
+					width: auto;
+					padding: 0 0;
+				}
+			}
+		}
+	}
+}
+
+@include true.describe('generate($column-prefix, $offset-prefix, $spacing)') {
+	@include true.it('should generate column and offset classes with prefixes column- and gap-. Spacing should be 8px.') {
+		@include true.assert() {
+			@include true.output() {
+				@include grid-core.generate('column-', 'gap-', 8px);
+			}
+
+			@include true.expect() {
+				.row {
+					display: flex;
+					flex-wrap: wrap;
+					margin: 0 -8px;
+				}
+
+				.row [class ^= 'column-'], .row [class ^= 'gap-'] {
+					flex-shrink: 0;
+					max-width: 100%;
+					padding: 0 8px;
+				}
+
+				.column-auto {
+					flex: 0 0 auto;
+					width: auto;
+					padding: 0 8px;
+				}
+			}
+		}
+	}
+}
+
+@include true.describe('generate-reverse-row($breakpoints)') {
+	@include true.it('should generate revert row classes for a given breakpoint') {
+		@include true.assert() {
+			@include true.output() {
+				@include grid-core.generate-reverse-row(custom-breakpoints.$breakpoints);
+			}
+
+			@include true.expect() {
+				@media only screen and (width >= 540px) {
+					.row.reverse-row-sm {
+						flex-direction: row-reverse;
+					}
+				}
+					
+				@media only screen and (width >= 800px) {
+					.row.reverse-row-md {
+						flex-direction: row-reverse;
+					}
+				}
+					
+				.row.reverse-row-under-sm {
+					flex-direction: row-reverse;
+					
+					@media only screen and (width >= 540px) {
+						flex-direction: row;
+					}
+				}
+					
+				.row.reverse-row-under-md {
+					flex-direction: row-reverse;
+					
+					@media only screen and (width >= 800px) {
+						flex-direction: row;
+					}
+				}
+			}
+		}
+	}
+}