@justeat/fozzie
Advanced tools
@justeat/fozzie - npm Package Compare versions
Comparing version 10.7.1 to 10.8.0
@@ -24,3 +24,2 @@ "use strict"; | ||
| }); | ||
| var _breakpointHelper = require("./modules/breakpointHelper"); |
@@ -7,3 +7,2 @@ "use strict"; | ||
| exports.isWithinBreakpoint = exports.getCurrentScreenWidth = exports.getBreakpoints = exports.createBreakpointArray = void 0; | ||
| /** | ||
@@ -14,16 +13,19 @@ * @overview Breakpoint handler | ||
| */ | ||
| const getBreakpoints = () => { | ||
| const output = {}; // Append hidden element to body | ||
| const output = {}; | ||
| // Append hidden element to body | ||
| const screenSizer = document.createElement('div'); | ||
| screenSizer.classList.add('c-screen-sizer'); | ||
| document.body.appendChild(screenSizer); // It should have a 'content' property containing the breakpoints | ||
| document.body.appendChild(screenSizer); | ||
| const breakpoints = window.getComputedStyle(document.querySelector('.c-screen-sizer')).getPropertyValue('content').replace(/["']/g, '').split(','); // Gives a list of breakpoints in the form ['narrow:414px', ...etc] | ||
| // It should have a 'content' property containing the breakpoints | ||
| const breakpoints = window.getComputedStyle(document.querySelector('.c-screen-sizer')).getPropertyValue('content').replace(/["']/g, '').split(','); | ||
| // Gives a list of breakpoints in the form ['narrow:414px', ...etc] | ||
| // When there is no content, at this stage breakpoints should be [''] | ||
| if (breakpoints.length === 1 && breakpoints[0] === '') { | ||
| return output; | ||
| } | ||
| return breakpoints.reduce((prev, current) => { | ||
@@ -34,9 +36,6 @@ // `current` is of the form 'narrow:414px' | ||
| // The object, e.g., { 'narrow': '414px' } is returned to be used as `prev` in the next iteration | ||
| return prev; | ||
| }, output); // <- initial value | ||
| }; | ||
| exports.getBreakpoints = getBreakpoints; | ||
| const createBreakpointArray = breakpoints => { | ||
@@ -51,5 +50,3 @@ // Order the breakpoints from widest to narrowest, | ||
| }; | ||
| exports.createBreakpointArray = createBreakpointArray; | ||
| const getCurrentScreenWidth = () => { | ||
@@ -59,6 +56,6 @@ const currentWidth = window.innerWidth; | ||
| const bps = createBreakpointArray(breakpoints); | ||
| for (let i = 0; i < bps.length; i++) { | ||
| // Loops through the breakpoints (in descending order) | ||
| // returning the first one that is narrower than currentWidth. | ||
| const breakpointWidth = parseInt(bps[i][1], 10); // This also strips the 'px' from the string | ||
@@ -70,10 +67,7 @@ | ||
| } | ||
| } // If no breakpoints have been set | ||
| } | ||
| // If no breakpoints have been set | ||
| return false; | ||
| }; | ||
| exports.getCurrentScreenWidth = getCurrentScreenWidth; | ||
| const isWithinBreakpoint = breakpointString => { | ||
@@ -86,5 +80,6 @@ const operatorRegex = /[<>=]+/; | ||
| const breakpoints = getBreakpoints(); | ||
| const bps = createBreakpointArray(breakpoints); // We loop through the breakpoint array until we get a match. | ||
| const bps = createBreakpointArray(breakpoints); | ||
| // We loop through the breakpoint array until we get a match. | ||
| // If we match we return the px value as an int. If we do not match we return false | ||
| const breakpointToPX = breakpointName => { | ||
@@ -99,9 +94,8 @@ let match = false; | ||
| }; | ||
| const breakpointInPX = breakpointToPX(breakpoint); | ||
| const breakpointInPX = breakpointToPX(breakpoint); // If the breakpoint passed in does not match any we; | ||
| // If the breakpoint passed in does not match any we; | ||
| if (!breakpointInPX) { | ||
| return false; | ||
| } | ||
| const mediaQuery = { | ||
@@ -115,10 +109,7 @@ '<': currentScreenWidth < breakpointInPX, | ||
| const result = mediaQuery[operator]; | ||
| if (result == null) { | ||
| return false; | ||
| } | ||
| return result; | ||
| }; | ||
| exports.isWithinBreakpoint = isWithinBreakpoint; |
@@ -5,3 +5,3 @@ { | ||
| "description": "UI Web Framework for the Just Eat Global Platform", | ||
| "version": "10.7.1", | ||
| "version": "10.8.0", | ||
| "main": "dist/js/index.js", | ||
@@ -39,3 +39,3 @@ "files": [ | ||
| "dependencies": { | ||
| "@justeat/pie-design-tokens": "3.0.0", | ||
| "@justeat/pie-design-tokens": "3.2.0", | ||
| "include-media": "eduardoboucas/include-media#2.0-release" | ||
@@ -54,19 +54,18 @@ }, | ||
| "@justeat/stylelint-config-fozzie": "3.2.0", | ||
| "autoprefixer": "10.4.7", | ||
| "caniuse-lite": "1.0.30001409", | ||
| "concurrently": "7.4.0", | ||
| "autoprefixer": "10.4.12", | ||
| "caniuse-lite": "1.0.30001425", | ||
| "concurrently": "7.5.0", | ||
| "coveralls": "3.1.1", | ||
| "cssnano": "5.1.13", | ||
| "danger": "11.1.2", | ||
| "eslint": "8.23.1", | ||
| "eslint": "8.26.0", | ||
| "eslint-plugin-import": "2.26.0", | ||
| "fontfaceobserver": "2.3.0", | ||
| "glob": "8.0.3", | ||
| "jest": "29.0.3", | ||
| "jest-environment-jsdom": "^29.0.3", | ||
| "postcss": "8.4.16", | ||
| "jest": "29.2.2", | ||
| "jest-environment-jsdom": "29.2.2", | ||
| "postcss": "8.4.18", | ||
| "postcss-cli": "10.0.0", | ||
| "sass": "1.55.0", | ||
| "sass-true": "6.1.0", | ||
| "stylelint": "14.12.1", | ||
| "stylelint": "14.14.0", | ||
| "stylelint-config-standard-scss": "5.0.0" | ||
@@ -85,2 +84,3 @@ }, | ||
| "autoprefix:utilities": "postcss dist/css/fozzie-utilities.css -o dist/css/fozzie-utilities.css --use autoprefixer --map", | ||
| "build": "yarn compile && yarn prepare:css", | ||
| "build:css": "yarn run build:typography && yarn run build:reset && yarn run build:utilities", | ||
@@ -97,3 +97,3 @@ "build:css:minified": "yarn run build:typography:minified && yarn run build:reset:minified && yarn run build:utilities:minified", | ||
| "lint:css": "stylelint src/scss/**/*.scss", | ||
| "lint:js": "eslint --ext .js .", | ||
| "lint:js": "eslint --ignore-pattern dist --ext .js .", | ||
| "prepack": "concurrently -n \"lint,compile,test\" -c \"blue,yellow,green\" \"yarn lint\" \"yarn compile\" \"yarn test\" --kill-others-on-fail && yarn prepare:css", | ||
@@ -100,0 +100,0 @@ "prepare:css": "yarn run build:css && yarn run autoprefix:css && yarn run build:css:minified && yarn test:css-dist", |
@@ -9,9 +9,2 @@ <div align="center"> | ||
| --- | ||
| [](https://badge.fury.io/js/%40justeat%2Ffozzie) | ||
| [](https://travis-ci.org/justeat/fozzie) | ||
| [](https://coveralls.io/github/justeat/fozzie) | ||
| [](https://lgtm.com/projects/g/justeat/fozzie/alerts/) | ||
| ## What is Fozzie? | ||
@@ -23,7 +16,5 @@ | ||
| Additionally, some parts of Fozzie are available as compiled CSS to use directly in a web application that may not be using SCSS. | ||
| ## Usage | ||
| ### Pre-requisites for using the SCSS | ||
| ### Pre-requisites | ||
@@ -75,33 +66,2 @@ To use the fozzie SCSS helper library, you'll need to ensure a couple of things: | ||
| ### Using the compiled CSS directly | ||
| Fozzie offers a few pre-compiled CSS files for web applications not using SCSS. These are: | ||
| 1. `fozzie-reset.css` - our normalize and reset styles | ||
| 2. `fozzie-typography.css` - our typographic styles | ||
| 3. `fozzie-utilities.css` - trumps and utility classes to use | ||
| All of the CSS files come as regular or minified CSS and include sourcemaps. | ||
| Example of using them in a project (note: you can also pull these from `dist/css` if you have installed Fozzie in the project): | ||
| ```html | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>A JustEat Marketing Site</title> | ||
| <!-- use fozzie CSS files to provide base styles and utilities classes used by the cookie banner --> | ||
| <link rel="stylesheet" href="https://unpkg.com/@justeat/fozzie@10.7.0/dist/css/fozzie-reset.css" /> | ||
| <link rel="stylesheet" href="https://unpkg.com/@justeat/fozzie@10.7.0/dist/css/fozzie-typography.css" /> | ||
| <link rel="stylesheet" href="https://unpkg.com/@justeat/fozzie@10.7.0/dist/css/fozzie-utilities.css" /> | ||
| </head> | ||
| <body> | ||
| <h1>Hello World!</h1> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| ## Testing | ||
@@ -108,0 +68,0 @@ We currently test our SCSS in two ways: |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-3.57%
27
- Lines of code
- increased by0.4%
1520
Worsened metrics
- Total package byte prevSize
- decreased by-0.73%
272058
- Number of lines in readme file
- decreased by-33.61%
79
Dependency changes
+ Added@justeat/pie-design-tokens@3.2.0(transitive)
+ Addedjsonc-parser@3.2.0(transitive)
+ Addedmkdirp@1.0.4(transitive)
- Removed@justeat/pie-design-tokens@3.0.0(transitive)
- Removedjsonc-parser@2.2.0(transitive)
- Removedmkdirp@1.0.3(transitive)