@enigmatry/scss-foundation 17.2.0 → 17.2.1-preview.4

package/coverage/clover.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1726734930421" clover="3.2.0">
-  <project timestamp="1726734930421" name="All files">
+<coverage generated="1727770589363" clover="3.2.0">
+  <project timestamp="1727770589363" 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-09-19T08:35:30.418Z
+                at 2024-10-01T08:16:29.357Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/docs/modules/README.md

@@ -13,7 +13,9 @@ Utilities are nothing more than just sass mixins that won't be included in your
 - [Absolute Positioning utilities](./absolute-positioning.md)
 - [Fixed Positioning utilities](./fixed-positioning.md)
 - [Text Modification utilities](./text-modification.md)
+- [Typography utilities](./typography.md)
 - [Text Hover utilities](./text-hover.md)
 - [Border Radius utilities](./border-radius.md)
 - [Row Coloring utilities](./row-coloring.md)
+- [Sizing utilities](./sizes.md)
 - [Visibility utilities](./visibility.md)

package/docs/modules/sizes.md

@@ -4,14 +4,14 @@ Utilities for setting various sizing properties for elements.
 
 ## Set sizes
 
-@use scss-foundation/src/modules/sizes/set-sizes;
+@use scss-foundation/src/modules/sizes/set-size;
 
 ### 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);
+@include set-size.box-dimensions(width, 100px, 50px, 200px);
 ```
 
 Sets width property and their min and max values.
@@ -27,7 +27,7 @@ max-width: 200px;
 - 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);
+@include set-size.box-definition(300px, 200px, 250px, 350px, 150px, 250px);
 ```
 
 Sets width and height along with their respective min and max values.

package/docs/modules/typography.md

@@ -0,0 +1,29 @@
+# Typography method
+
+Utilities for setting font properties for elements.
+
+## Fonts
+
+@use scss-foundation/src/modules/typography/fonts;
+
+### Set fonts
+
+The `define-font` mixin provides a simple way to apply font properties such as family, size, and weight to an element. It allows for flexibility by enabling customization of each property. It requires **at least two** of the font properties to be provided. If this condition is not met, an error will be thrown.
+
+```
+@include fonts.define-font('Roboto', 18px, 700);
+```
+
+Sets the font family, size, and weight properties.
+
+```
+font-family: 'Roboto';
+font-size: 18px;
+font-weight: 700;
+```
+
+If you only want to set certain properties, you can skip others by using named arguments:
+
+```
+@include fonts.define-font($size: 30px, $weight: bold);
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmatry/scss-foundation",
-  "version": "17.2.0",
+  "version": "17.2.1-preview.4",
   "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

@@ -4,6 +4,7 @@
 @use 'sizes';
 @use 'responsiveness';
 @use 'text';
+@use 'typography';
 @use 'lists';
 @use 'borders';
 @use 'states';

package/src/modules/typography/_fonts.scss

@@ -0,0 +1,26 @@
+@use 'sass-true';
+@use 'sass-true/sass/throw';
+@use '../../modules/variables' as vars;
+
+@mixin define-font($family: null, $size: null, $weight: null) {
+	@if ($family and $size) or ($family and $weight) or ($size and $weight) {
+		$properties: (
+			'family': $family,
+			'size': $size,
+			'weight': $weight
+		);
+  
+		@each $property, $value in $properties {
+			@if $value {
+				font-#{$property}: $value;
+			}
+		}
+	}
+	@else {
+		@include throw.error(
+			$message: 'At least two of the font properties must be provided.',
+			$source: 'define-font($family, $size, $weight)',
+			$catch: vars.$testing
+		);
+	}
+}

package/src/modules/typography/_index.scss

@@ -0,0 +1 @@
+@use 'fonts';

package/tests/typography/fonts.tests.scss

@@ -0,0 +1,69 @@
+@use 'sass-true' as true;
+@use '../../src/modules/typography/fonts';
+@use '../../src/modules/variables' as vars;
+
+vars.$testing: true;
+
+@include true.describe('define-font($family, $size, $weight)') {
+	@include true.it('should set the font family and size') {
+		@include true.assert() {
+			@include true.output() {
+				@include fonts.define-font('Arial', 14px);
+			}
+			@include true.expect() {
+				font-family: 'Arial';
+				font-size: 14px;
+			}
+		}
+	}
+
+	@include true.it('should set the font family and weight') {
+		@include true.assert() {
+			@include true.output() {
+				@include fonts.define-font($family: 'Arial', $weight: 400);
+			}
+			@include true.expect() {
+				font-family: 'Arial';
+				font-weight: 400;
+			}
+		}
+	}
+
+	@include true.it('should set the font family, size, and weight') {
+		@include true.assert() {
+			@include true.output() {
+				@include fonts.define-font('Arial', 18px, 700);
+			}
+			@include true.expect() {
+				font-family: 'Arial';
+				font-size: 18px;
+				font-weight: 700;
+			}
+		}
+	}
+
+	@include true.it('should set the font size and weight') {
+		@include true.assert() {
+			@include true.output() {
+				@include fonts.define-font($size: 18px, $weight: 700);
+			}
+			@include true.expect() {
+				font-size: 18px;
+				font-weight: 700;
+			}
+		}
+	}
+
+	@include true.it('should throw an error if only one property is defined') {
+		@include true.assert() {
+			@include true.output() {
+				@include fonts.define-font('Arial');
+			}
+	  
+			@include true.contains() {
+				/* ERROR [define-font($family, $size, $weight)]: */
+				/*   At least two of the font properties must be provided. */
+			}
+		}
+	}
+}