v8.1.0 - port over f-utils scss. (#367)

* v8.1.0 - port over f-utils scss.

* v8.1.0 - Update changelog.

* v8.1.0 - PR comments.

CHANGELOG.md

@@ -8,6 +8,16 @@ Future Todo List
 - Make typography and utility classes silent extenders (so that they can be extended by components without importing all utility classes).
 - Deprecate modal and orderCard component styles in next major version as unused.
 
+v8.1.0
+------------------------------
+*May 12, 2022*
+
+### Added
+- f-utils `functions`, `helpers` & `mixins` in order to depreciate `f-utils` in favour of `fozzie`.
+
+### Removed
+- f-utils dependency.
+
 
 v8.0.0
 ------------------------------

package.json

@@ -2,7 +2,7 @@
   "name": "@justeat/fozzie",
   "title": "Fozzie – Just Eat UI Web Framework",
   "description": "UI Web Framework for the Just Eat Global Platform",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "main": "dist/js/index.js",
   "files": [
     "dist/js",
@@ -30,10 +30,9 @@
   },
   "license": "Apache-2.0",
   "engines": {
-    "node": ">=10.0.0"
+    "node": "^12 || ^14"
   },
   "dependencies": {
-    "@justeat/f-utils": "3.5.0",
     "@justeat/pie-design-tokens": "1.4.0",
     "include-media": "1.4.10"
   },

src/scss/_dependencies.scss

@@ -15,7 +15,7 @@
 // See mixins/css3.scss for the full list
 
 // Including helper modules
-@import '@justeat/f-utils/src/scss/'; // imports Fozzie SCSS helper functions and mixins – https://github.com/justeat/f-utils
+@import 'tools/index'; // imports Fozzie SCSS helper functions and mixins
 @import 'include-media/dist/_include-media'; // Cleaner media query declarations – http://include-media.com
 
 
@@ -26,7 +26,7 @@
 @import '@justeat/pie-design-tokens/dist/jet';
 
 @import 'settings/variables';
-@import '@justeat/f-utils/src/scss/helpers/breakpoints'; // breakpoint helper – https://github.com/justeat/f-utils/blob/96508ae19809c4b8b83cebb55b9d74728d01c1a5/src/scss/helpers/_breakpoints.scss
+@import 'tools/helpers/breakpoints'; // breakpoint helper - @TODO move to the `templates.scss` file as part of the next major version bump.
 
 
 // CSS Normalise and then Reset

src/scss/tools/_index.scss

@@ -1,12 +1,12 @@
 // =================================
 // Tools
 // =================================
+// Sass utility functions and mixins for the Fozzie framework
 //
-// Fozzie utilities such as mixins and functions are defined
-// in the f-utils module.
+// Importing the base module using eyeglass will import all mixins and functions
 //
-// Repo: https://github.com/justeat/f-utils
-// NPM Module: https://www.npmjs.com/package/@justeat/f-utils
-//
-// Any project specific mixins and functions should be created in a folder
-// called 'tools' like this file.
+// In addition you can import optional helpers such as breakpoints and code-highlighting such as:
+// @import '/helpers/breakpoints'
+
+@import 'mixins';
+@import 'functions';

src/scss/tools/functions/_index.scss

@@ -0,0 +1,12 @@
+// ==========================================================================
+// Function imports
+//
+// N.b. Remember to use comments starting with // in these files so that they
+// don’t get compiled into CSS (as mixins aren’t compiled directly)
+// ==========================================================================
+
+@import 'px-to-em';
+@import 'spacing';
+@import 'strip-units';
+@import 'units';
+@import 'zIndex';

src/scss/tools/functions/_px-to-em.scss

@@ -0,0 +1,40 @@
+/**
+ * px to em converter
+ * =================================
+ * Convert pixels to ems
+ *
+ * Usage:
+ * font-size : em(12);
+ * font-size : em(12, 24); // If the parent is another value say 24px
+ */
+
+@use 'sass:math';
+
+@function em($pxval, $base: $font-size-base) {
+    @return math.div($pxval, $base) * 1em;
+}
+
+/**
+ * Convert a map of breakpoints to ems
+ * =================================
+ * Takes a map of breakpoints (in px) and a base-font-size
+ *
+ * Usage:
+ $breakpoints: map-to-em((
+ 	narrow : 400px,
+ 	mid    : 750px,
+ 	wide   : 1000px,
+ 	huge   : 1250px
+ ), 16);
+ */
+
+@function map-to-em($breakpoints, $base: $font-size-base) {
+    $newBreakpoints: ();
+
+    @each $name, $pxValue in $breakpoints {
+        $emValue: em(strip-units($pxValue), $base);
+        $newBreakpoints: map-merge($newBreakpoints, ($name: $emValue));
+    }
+
+    @return $newBreakpoints;
+}

src/scss/tools/functions/_spacing.scss

@@ -0,0 +1,28 @@
+// ==========================================================================
+// _spacing.scss
+//
+// Contains all functions relating to spacing
+// ==========================================================================
+
+//
+// spacing()
+//
+// Allows developers to specify the amount of spacing they require via shortcut
+// Accesses the spacing map definition in _variables.scss
+//
+// Usage:
+// spacing() or
+// spacing(b)
+//
+// Key can be passed in as = a, b, c, d, e, f, g, h, i, j
+// ==========================================================================
+@function spacing($key: 'b') {
+    @if type-of($spacing) == 'map' {
+        @if map-has-key($spacing, $key) {
+            @return map-get($spacing, $key);
+        }
+    }
+
+    @warn 'Unknown `#{$key}` in $spacing.';
+    @return null;
+}

src/scss/tools/functions/_strip-units.scss

@@ -0,0 +1,22 @@
+/**
+ * Strip units
+ * =================================
+ * Remove the unit of a measurement
+ *
+ * Usage:
+ * strip-units(400px)  > 400
+ */
+
+@use 'sass:math';
+
+@function strip-units($val) {
+    $newVal: 0;
+
+    @if $val {
+        $newVal: $val;
+    } @else {
+        $newVal: 0;
+    }
+
+    @return math.div($newVal, $newVal * 0 + 1);
+}

src/scss/tools/functions/_units.scss

@@ -0,0 +1,78 @@
+// ==========================================================================
+// _units.scss
+//
+// Contains all functions relating to units
+// ==========================================================================
+
+// @include line-height
+//
+// Given a font-size and a line-height (in pixels)
+// Returns a unitless line-height value
+//
+@use 'sass:math';
+
+@function line-height($font-size: 'body-s', $line-height: '20', $scale: 'default') {
+    @if type-of($font-size) == 'number' {
+        @return decimal-round(math.div($line-height, $font-size), 2);
+    } @else if map-has-key($type, $font-size) { // else try and find the value in our type map
+        $key-map: map-get($type, $font-size);
+        $font-list: map-get($key-map, $scale);
+
+        @if type-of($font-list) == 'list' {
+            @return line-height(nth($font-list, 1), nth($font-list, 2));
+        } @else {
+            @warn 'No line-height found as part of the $type map for #{ $font-size }';
+        }
+    }
+}
+
+@function decimal-round($number, $digits: 0, $mode: round) {
+    $n: 1;
+
+    // $number must be a number
+    @if type-of($number) != number {
+        @warn '#{ $number } is not a number.';
+        @return $number;
+    }
+
+    // $digits must be a unitless number
+    @if type-of($digits) != number {
+        @warn '#{ $digits } is not a number.';
+        @return $number;
+    } @else if not unitless($digits) {
+        @warn '#{ $digits } has a unit.';
+        @return $number;
+    }
+
+    @if $digits > 0 {
+        @for $i from 1 through $digits {
+            $n: $n * 10;
+        }
+    }
+
+    @if $mode == round {
+        @return math.div(round($number * $n), $n);
+    } @else if $mode == ceil {
+        @return math.div(ceil($number * $n), $n);
+    } @else if $mode == floor {
+        @return math.div(floor($number * $n), $n);
+    } @else {
+        @warn '#{ $mode } is undefined keyword.';
+        @return $number;
+    }
+}
+
+@function em-to-px($emVal, $base: $font-size-base) {
+    @return ($emVal * $base) * 1px;
+}
+
+@function map-to-px($breakpoints, $base: $font-size-base) {
+    $newBreakpoints: ();
+
+    @each $name, $emValue in $breakpoints {
+        $pxValue: em-to-px(strip-units($emValue), $base);
+        $newBreakpoints: map-merge($newBreakpoints, ($name: $pxValue));
+    }
+
+    @return $newBreakpoints;
+}

src/scss/tools/functions/_zIndex.scss

@@ -0,0 +1,27 @@
+// ==========================================================================
+// _zIndex.scss
+//
+// Contains all functions relating to zIndex
+// ==========================================================================
+
+//
+// zIndex()
+//
+// Allows developers to specify the amount of zIndex they require via shortcut
+// Accesses the spacing map definition in _variables.scss
+//
+// Usage:
+// zIndex(low)
+//
+// Key can be passed in as = lowest, low, medium, high
+// ==========================================================================
+@function zIndex($key: 'lowest') {
+    @if type-of($zIndex) == 'map' {
+        @if map-has-key($zIndex, $key) {
+            @return map-get($zIndex, $key);
+        }
+    }
+
+    @warn 'Unknown `#{$key}` in $zIndex.';
+    @return null;
+}

src/scss/tools/helpers/_breakpoints.scss

@@ -0,0 +1,15 @@
+@function populate-breakpoints() {
+    $breakpointString: '';
+    $breakpointsPx: map-to-px($breakpoints, 16);
+
+    @each $name, $value in $breakpointsPx {
+        $breakpointString: $breakpointString + '#{$name}:#{$value},';
+    }
+
+    @return str-slice($breakpointString, 0, str-length($breakpointString) - 1);
+}
+
+.c-screen-sizer {
+    display: none;
+    content: populate-breakpoints();
+}