@enigmatry/scss-foundation 17.1.0 → 17.1.1-preview.2

package/coverage/clover.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1721034934764" clover="3.2.0">
-  <project timestamp="1721034934764" name="All files">
+<coverage generated="1723191416291" clover="3.2.0">
+  <project timestamp="1723191416291" 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 2024-07-15T09:15:34.760Z
+                at 2024-08-09T08:16:56.287Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/docs/modules/sizes.md

@@ -0,0 +1,42 @@
+# Sizing methods
+
+Utilities for setting various sizing properties for elements.
+
+## Set sizes
+
+@use scss-foundation/src/modules/sizes/set-sizes;
+
+### Box dimensions
+
+- Mixin for easily applying specified dimensions for width and height of an element and optional min/max constraints to shrink depending on the screen resizing.
+
+```
+@include set-sizes.box-dimensions(width, 100px, 50px, 200px);
+```
+
+Sets width property and their min and max values.
+
+```
+width: 100px;
+min-width: 50px;
+max-width: 200px;
+```
+
+### Box definition
+
+- A comprehensive mixin for defining both the width and height properties of an element. Sets width and height along with optional min and max values for both dimensions, providing a flexible way to manage element sizing.
+
+```
+@include set-sizes.box-definition(300px, 200px, 250px, 350px, 150px, 250px);
+```
+
+Sets width and height along with their respective min and max values.
+
+```
+width: 300px;
+min-width: 250px;
+max-width: 350px;
+height: 200px;
+min-height: 150px;
+max-height: 250px;
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmatry/scss-foundation",
-  "version": "17.1.0",
+  "version": "17.1.1-preview.2",
   "author": "Enigmatry",
   "description": "Collection of SCSS utilities useful for the most of projects.",
   "homepage": "https://github.com/enigmatry/entry-angular-building-blocks/tree/master/libs/scss-foundation#readme",

package/src/modules/_index.scss

@@ -1,6 +1,7 @@
 @use 'display';
 @use 'layout';
 @use 'position';
+@use 'sizes';
 @use 'responsiveness';
 @use 'text';
 @use 'lists';

package/src/modules/sizes/_index.scss

@@ -0,0 +1 @@
+@use 'set-size';

package/src/modules/sizes/_set-size.scss

@@ -0,0 +1,15 @@
+@mixin box-dimensions($property, $value, $min-value: null, $max-value: null) {
+	#{$property}: $value;
+  
+	@if $min-value {
+		min-#{$property}: $min-value;
+	}
+	@if $max-value {
+		max-#{$property}: $max-value;
+	}
+}
+
+@mixin box-definition($width: null, $height: null, $min-width: null, $max-width: null, $min-height: null, $max-height: null) {
+	@include box-dimensions(width, $width, $min-width, $max-width);
+	@include box-dimensions(height, $height, $min-height, $max-height);
+}

package/tests/sizes/definitions.tests.scss

@@ -0,0 +1,77 @@
+@use 'sass-true/sass/true';
+@use '../../src/modules/sizes/set-size';
+
+@include true.describe('box-dimensions()') {
+
+	@include true.it('should set the box height property and value') {
+		@include true.assert() {
+			@include true.output() {
+				@include set-size.box-dimensions(height, 200px);
+			}
+			@include true.expect() {
+				height: 200px;
+			}
+		}
+	}
+
+	@include true.it('should set only the box width property and value') {
+		@include true.assert() {
+			@include true.output() {
+				@include set-size.box-dimensions(width, 100%);
+			}
+			@include true.expect() {
+				width: 100%;
+			}
+		}
+	}
+
+	@include true.it('should set the height property of box and values for min-height and max-height') {
+		@include true.assert() {
+			@include true.output() {
+				@include set-size.box-dimensions(height, 300px, 3rem, 8em);
+			}
+			@include true.expect() {
+				height: 300px;
+				min-height: 3rem;
+				max-height: 8em;
+			}
+		}
+	}
+
+	@include true.it('should set the height of box and min-height') {
+		@include true.assert() {
+			@include true.output() {
+				@include set-size.box-dimensions(height, 300px, 3rem);
+			}
+			@include true.expect() {
+				height: 300px;
+				min-height: 3rem;
+			}
+		}
+	}
+	
+	@include true.it('should set the width of box and min-width') {
+		@include true.assert() {
+			@include true.output() {
+				@include set-size.box-dimensions(width, 300px, 3rem);
+			}
+			@include true.expect() {
+				width: 300px;
+				min-width: 3rem;
+			}
+		}
+	}
+
+	@include true.it('should set the width of box and min-width and max-width in given order') {
+		@include true.assert() {
+			@include true.output() {
+				@include set-size.box-dimensions(width, 400px, 2rem, 6em);
+			}
+			@include true.expect() {
+				width: 400px;
+				min-width: 2rem;
+				max-width: 6em;
+			}
+		}
+	}
+}

package/tests/sizes/dimensions.tests.scss

@@ -0,0 +1,78 @@
+/* stylelint-disable scss/no-unused-private-members */
+/* stylelint-disable scss/load-no-partial-leading-underscore */
+/* stylelint-disable scss/block-no-redundant-nesting */
+@use 'sass-true/sass/true';
+@use '../../src/modules/sizes/set-size';
+
+@include true.describe('box-definition()') {
+
+	@include true.it('should handle only width and height.') {
+		@include true.assert() {
+			@include true.output() {
+				@include set-size.box-definition(200px, 3rem);
+			}
+			@include true.expect() {
+				width: 200px;
+				height: 3rem;
+			}
+		}
+	}
+  
+	@include true.it('should handle equal width and height with min and max values.') {
+		@include true.assert() {
+			@include true.output() {
+				@include set-size.box-definition(100%, 150px, 100px, 200px, 100px, 200px);
+			}
+			@include true.expect() {
+				width: 100%;
+				min-width: 100px;
+				max-width: 200px;
+				height: 150px;
+				min-height: 100px;
+				max-height: 200px;
+			}
+		}
+	}
+  
+	@include true.it('should handle only width with min and max values.') {
+		@include true.assert() {
+			@include true.output() {
+				@include set-size.box-definition($width: 300px, $min-width: 200px, $max-width: 400px);
+			}
+			@include true.expect() {
+				width: 300px;
+				min-width: 200px;
+				max-width: 400px;
+			}
+		}
+	}
+  
+	@include true.it('should handle only height with min and max values.') {
+		@include true.assert() {
+			@include true.output() {
+				@include set-size.box-definition($height: 150px, $min-height: 100px, $max-height: 200px);
+			}
+			@include true.expect() {
+				height: 150px;
+				min-height: 100px;
+				max-height: 200px;
+			}
+		}
+	}
+  
+	@include true.it('should handle all parameters with different width and height values.') {
+		@include true.assert() {
+			@include true.output() {
+				@include set-size.box-definition($width: 250px, $height: auto, $min-width: 3em, $max-width: 350px, $min-height: 200px, $max-height: 400px);
+			}
+			@include true.expect() {
+				width: 250px;
+				min-width: 3em;
+				max-width: 350px;
+				height: auto;
+				min-height: 200px;
+				max-height: 400px;
+			}
+		}
+	}
+}