Skip to content
This repository was archived by the owner on Nov 29, 2022. It is now read-only.

Commit 514a759

Browse files
kevinrodrigueskevinrodrigues
authored
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.
1 parent 491cb0d commit 514a759

18 files changed

+596
-12
lines changed

‎CHANGELOG.md

+10
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,16 @@ Future Todo List
88
- Make typography and utility classes silent extenders (so that they can be extended by components without importing all utility classes).
99
- Deprecate modal and orderCard component styles in next major version as unused.
1010

11+
v8.1.0
12+
------------------------------
13+
*May 12, 2022*
14+
15+
### Added
16+
- f-utils `functions`, `helpers` & `mixins` in order to depreciate `f-utils` in favour of `fozzie`.
17+
18+
### Removed
19+
- f-utils dependency.
20+
1121

1222
v8.0.0
1323
------------------------------

‎package.json

+2-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@justeat/fozzie",
33
"title": "Fozzie – Just Eat UI Web Framework",
44
"description": "UI Web Framework for the Just Eat Global Platform",
5-
"version": "8.0.0",
5+
"version": "8.1.0",
66
"main": "dist/js/index.js",
77
"files": [
88
"dist/js",
@@ -30,10 +30,9 @@
3030
},
3131
"license": "Apache-2.0",
3232
"engines": {
33-
"node": ">=10.0.0"
33+
"node": "^12 || ^14"
3434
},
3535
"dependencies": {
36-
"@justeat/f-utils": "3.5.0",
3736
"@justeat/pie-design-tokens": "1.4.0",
3837
"include-media": "1.4.10"
3938
},

‎src/scss/_dependencies.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
// See mixins/css3.scss for the full list
1616

1717
// Including helper modules
18-
@import '@justeat/f-utils/src/scss/'; // imports Fozzie SCSS helper functions and mixins – https://github.com/justeat/f-utils
18+
@import 'tools/index'; // imports Fozzie SCSS helper functions and mixins
1919
@import 'include-media/dist/_include-media'; // Cleaner media query declarations – http://include-media.com
2020

2121

@@ -26,7 +26,7 @@
2626
@import '@justeat/pie-design-tokens/dist/jet';
2727

2828
@import 'settings/variables';
29-
@import '@justeat/f-utils/src/scss/helpers/breakpoints'; // breakpoint helper – https://github.com/justeat/f-utils/blob/96508ae19809c4b8b83cebb55b9d74728d01c1a5/src/scss/helpers/_breakpoints.scss
29+
@import 'tools/helpers/breakpoints'; // breakpoint helper - @TODO move to the `templates.scss` file as part of the next major version bump.
3030

3131

3232
// CSS Normalise and then Reset

‎src/scss/tools/_index.scss

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

‎src/scss/tools/functions/_index.scss

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// ==========================================================================
2+
// Function imports
3+
//
4+
// N.b. Remember to use comments starting with // in these files so that they
5+
// don’t get compiled into CSS (as mixins aren’t compiled directly)
6+
// ==========================================================================
7+
8+
@import 'px-to-em';
9+
@import 'spacing';
10+
@import 'strip-units';
11+
@import 'units';
12+
@import 'zIndex';

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

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/**
2+
* px to em converter
3+
* =================================
4+
* Convert pixels to ems
5+
*
6+
* Usage:
7+
* font-size : em(12);
8+
* font-size : em(12, 24); // If the parent is another value say 24px
9+
*/
10+
11+
@use 'sass:math';
12+
13+
@function em($pxval, $base: $font-size-base) {
14+
@return math.div($pxval, $base) * 1em;
15+
}
16+
17+
/**
18+
* Convert a map of breakpoints to ems
19+
* =================================
20+
* Takes a map of breakpoints (in px) and a base-font-size
21+
*
22+
* Usage:
23+
$breakpoints: map-to-em((
24+
narrow : 400px,
25+
mid : 750px,
26+
wide : 1000px,
27+
huge : 1250px
28+
), 16);
29+
*/
30+
31+
@function map-to-em($breakpoints, $base: $font-size-base) {
32+
$newBreakpoints: ();
33+
34+
@each $name, $pxValue in $breakpoints {
35+
$emValue: em(strip-units($pxValue), $base);
36+
$newBreakpoints: map-merge($newBreakpoints, ($name: $emValue));
37+
}
38+
39+
@return $newBreakpoints;
40+
}

‎src/scss/tools/functions/_spacing.scss

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// ==========================================================================
2+
// _spacing.scss
3+
//
4+
// Contains all functions relating to spacing
5+
// ==========================================================================
6+
7+
//
8+
// spacing()
9+
//
10+
// Allows developers to specify the amount of spacing they require via shortcut
11+
// Accesses the spacing map definition in _variables.scss
12+
//
13+
// Usage:
14+
// spacing() or
15+
// spacing(b)
16+
//
17+
// Key can be passed in as = a, b, c, d, e, f, g, h, i, j
18+
// ==========================================================================
19+
@function spacing($key: 'b') {
20+
@if type-of($spacing) == 'map' {
21+
@if map-has-key($spacing, $key) {
22+
@return map-get($spacing, $key);
23+
}
24+
}
25+
26+
@warn 'Unknown `#{$key}` in $spacing.';
27+
@return null;
28+
}

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

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* Strip units
3+
* =================================
4+
* Remove the unit of a measurement
5+
*
6+
* Usage:
7+
* strip-units(400px) > 400
8+
*/
9+
10+
@use 'sass:math';
11+
12+
@function strip-units($val) {
13+
$newVal: 0;
14+
15+
@if $val {
16+
$newVal: $val;
17+
} @else {
18+
$newVal: 0;
19+
}
20+
21+
@return math.div($newVal, $newVal * 0 + 1);
22+
}

‎src/scss/tools/functions/_units.scss

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
// ==========================================================================
2+
// _units.scss
3+
//
4+
// Contains all functions relating to units
5+
// ==========================================================================
6+
7+
// @include line-height
8+
//
9+
// Given a font-size and a line-height (in pixels)
10+
// Returns a unitless line-height value
11+
//
12+
@use 'sass:math';
13+
14+
@function line-height($font-size: 'body-s', $line-height: '20', $scale: 'default') {
15+
@if type-of($font-size) == 'number' {
16+
@return decimal-round(math.div($line-height, $font-size), 2);
17+
} @else if map-has-key($type, $font-size) { // else try and find the value in our type map
18+
$key-map: map-get($type, $font-size);
19+
$font-list: map-get($key-map, $scale);
20+
21+
@if type-of($font-list) == 'list' {
22+
@return line-height(nth($font-list, 1), nth($font-list, 2));
23+
} @else {
24+
@warn 'No line-height found as part of the $type map for #{ $font-size }';
25+
}
26+
}
27+
}
28+
29+
@function decimal-round($number, $digits: 0, $mode: round) {
30+
$n: 1;
31+
32+
// $number must be a number
33+
@if type-of($number) != number {
34+
@warn '#{ $number } is not a number.';
35+
@return $number;
36+
}
37+
38+
// $digits must be a unitless number
39+
@if type-of($digits) != number {
40+
@warn '#{ $digits } is not a number.';
41+
@return $number;
42+
} @else if not unitless($digits) {
43+
@warn '#{ $digits } has a unit.';
44+
@return $number;
45+
}
46+
47+
@if $digits > 0 {
48+
@for $i from 1 through $digits {
49+
$n: $n * 10;
50+
}
51+
}
52+
53+
@if $mode == round {
54+
@return math.div(round($number * $n), $n);
55+
} @else if $mode == ceil {
56+
@return math.div(ceil($number * $n), $n);
57+
} @else if $mode == floor {
58+
@return math.div(floor($number * $n), $n);
59+
} @else {
60+
@warn '#{ $mode } is undefined keyword.';
61+
@return $number;
62+
}
63+
}
64+
65+
@function em-to-px($emVal, $base: $font-size-base) {
66+
@return ($emVal * $base) * 1px;
67+
}
68+
69+
@function map-to-px($breakpoints, $base: $font-size-base) {
70+
$newBreakpoints: ();
71+
72+
@each $name, $emValue in $breakpoints {
73+
$pxValue: em-to-px(strip-units($emValue), $base);
74+
$newBreakpoints: map-merge($newBreakpoints, ($name: $pxValue));
75+
}
76+
77+
@return $newBreakpoints;
78+
}

‎src/scss/tools/functions/_zIndex.scss

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// ==========================================================================
2+
// _zIndex.scss
3+
//
4+
// Contains all functions relating to zIndex
5+
// ==========================================================================
6+
7+
//
8+
// zIndex()
9+
//
10+
// Allows developers to specify the amount of zIndex they require via shortcut
11+
// Accesses the spacing map definition in _variables.scss
12+
//
13+
// Usage:
14+
// zIndex(low)
15+
//
16+
// Key can be passed in as = lowest, low, medium, high
17+
// ==========================================================================
18+
@function zIndex($key: 'lowest') {
19+
@if type-of($zIndex) == 'map' {
20+
@if map-has-key($zIndex, $key) {
21+
@return map-get($zIndex, $key);
22+
}
23+
}
24+
25+
@warn 'Unknown `#{$key}` in $zIndex.';
26+
@return null;
27+
}

‎src/scss/tools/helpers/_breakpoints.scss

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@function populate-breakpoints() {
2+
$breakpointString: '';
3+
$breakpointsPx: map-to-px($breakpoints, 16);
4+
5+
@each $name, $value in $breakpointsPx {
6+
$breakpointString: $breakpointString + '#{$name}:#{$value},';
7+
}
8+
9+
@return str-slice($breakpointString, 0, str-length($breakpointString) - 1);
10+
}
11+
12+
.c-screen-sizer {
13+
display: none;
14+
content: populate-breakpoints();
15+
}

0 commit comments

Comments
 (0)