v9.0.0 – Version 9 Release (#387)

* v9.0.0-beta.0 (#369) * Commenting out dependencies (migration) * v9.0.0 - Migrate to use & forward initial work. * v9.0.0 - Migrate to use & forward initial work. * v9.0.0-beta.0 - Move to use & forward syntax. * v9.0.0-beta.0 - add templates back in. * v9.0.0-beta.0 - resolve paths. * v9.0.0-beta.0 - fix paths. * Updating README and CHANGELOG * v9.0.0-beta.0 - Move trumps back. * v9.0.0-beta.0 - Move trumps to correct position * v9.0.0-beta.0 - PR comments. * v9.0.0-beta.0 - PR comments. * v9.0.0-beta.0 - PR comments. * v9.0.0-beta.0 - PR comments. Co-authored-by: ashleynolan <[email protected]> * v9.0.0-beta.1 - Fixed mixin reference. (#370) * v9.0.0-beta.1 - Fixed mixin reference. * v9.0.0-beta.1 - update changelog. * v9.0.0-beta.2 - update @use rules in _type.scss (#371) * fix line-height function call * bump beta version * import as wildcard * remove wildcard from use statements * update changelog * fix zindex * V9.0.0 beta.4 - fix some missing modules (#373) * update functions * update mixin * update changelog and bump package version * V9-0.0 beta.5 - fix circular reference (#375) * update functions * update mixin * update changelog and bump package version * remove circular references from variables, funcs and mixins * update version and changelog * remove debug code * tidy code * [email protected] - Scss unit testing (#376) * install sass-true * install glob * add working function unit tests * test a mixin * bump package and changelog * rename some tests * Update CHANGELOG.md Co-authored-by: Ashley Watson-Nolan <[email protected]> * Update src/test/scss/scss.spec.js Co-authored-by: Ashley Watson-Nolan <[email protected]> * Update src/test/scss/scss.spec.js Co-authored-by: Ashley Watson-Nolan <[email protected]> * update test paths * remove eslint override * update test names * rename setup file * Update src/test/scss/tools/mixins/type.spec.scss Co-authored-by: Xander Marjoram <[email protected]> Co-authored-by: Ashley Watson-Nolan <[email protected]> Co-authored-by: Xander Marjoram <[email protected]> * v9.0.0-beta.7 - scss unit tests on publish (#377) * v8.3.0 - Add sass:map. (#372) * v8.3.0 - Add sass:map. * v8.3.0 - PR comment. * test scss before publishing * update test script to run concurrently * add circleci config * v8.4.0 - Circleci setup (#378) * Add .circleci/config.yml * Add .circleci/config.yml * setup circle * remove travis config Co-authored-by: Kevin Rodrigues <[email protected]> * v9.0.0-beta.8 - Remove tilde import. (#382) * v9.0.0-beta.8 - Remove tilde import. * v9.0.0-beta.8 - Remove tilde import. * v9.0.0-beta.9 - Remove listingSkeleton mixin (#383) * Remove listingSkeleton mixin and bump version * Update readme Co-authored-by: Kathy Lee <[email protected]> * v9.0.0-beta.10 – $font-size-base fix and minor design token update (#384) Co-authored-by: Ashley Watson-Nolan <[email protected]> * v9.0.0-beta.11 – font-size mixin updated to new default and package updates (#385) Co-authored-by: Ashley Watson-Nolan <[email protected]> * v9.0.0-beta.12 - Add back listing skeleton. (#386) * v9.0.0-beta.12 - Add back listing skeleton. * v9.0.0-beta.12 - Fix spelling. * v9.0.0 - PR comment. * v9.0.0 - version release v9 * v9.0.0 - remove changelog entry. * v9.0.0 - Add back previous beta log. Co-authored-by: ashleynolan <[email protected]> Co-authored-by: Jamie Maguire <[email protected]> Co-authored-by: Ashley Watson-Nolan <[email protected]> Co-authored-by: Xander Marjoram <[email protected]> Co-authored-by: Kathy Lee <[email protected]> Co-authored-by: Kathy Lee <[email protected]> Co-authored-by: Ashley Watson-Nolan <[email protected]>
justeat · Aug 9, 2022 · 4381391 · 4381391
1 parent 030f136
commit 4381391
Show file tree

Hide file tree

Showing 58 changed files with 3,789 additions and 3,612 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,7 +6,169 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 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.
+- Update to use latest v2 PIE design tokens
+
+v9.0.0
+------------------------------
+- **Breaking** Implement `@use` & `@forward` syntax in preference to `import` statements due to deprecation in `dart-sass`.
+- v9 Migration [Guide can be found here](https://vue.pie.design/?path=/story/documentation-guides-fozzie-fozzie-migration-guide--page).
+- README updated with new usage info. Documentation on vue.pie.design updated with full info on migration and usage.
+- SCSS unit testing capabilities using `sass-true`
+
+### Changed
+- `yarn test` command now tests js and scss together with `test:js` and `test:scss` individually being called
+- Updated to the latest non-breaking version of `pie-design-tokens`. Will update to `v2+` of the design tokens as a separate fozzie release, so that any applications updating to `dart-sass` don't also potentially have to make a bunch of token name updates as part of this v9 release.
+- CanIUse DB updated to latest.
+- Jest config updated due to version update (`testURL` moved to `testEnvironmentOptions`).
+
+### Fixed
+- `$font-size-base` was pointing incorrectly at the `font-paragraph-01` design token (which is used for paragraph spacing). Have fixed this to now point at the correct font-size token.
+- Default font-size key in `font-size` mixin changed from `body-s` to `body-l` (`14px` to `16px`).
+
+v9.0.0-beta.12
+------------------------------
+*August 8, 2022*
+
+### Added
+- `listingSkeleton` mixin back in as it is currently being used by another application.
+
+
+v9.0.0-beta.11
+------------------------------
+*August 8, 2022*
+
+### Added
+- Some basic unit tests for the `font-size` mixin. Should provide a bit more reliability if any key font-size base values change accidentally.
+
+### Fixed
+- Default font-size key in `font-size` mixin changed from `body-s` to `body-l` (`14px` to `16px`).
+
+### Changed
+- Updated a number of package versions to latest; Babel, ESLint, and our Browserslist, ESLint and Stylelint configs.
+- CanIUse DB updated to latest.
+- Jest config updated due to version update (`testURL` moved to `testEnvironmentOptions`).
+
+
+v9.0.0-beta.10
+------------------------------
+*August 8, 2022*
+
+### Fixed
+- `$font-size-base` was pointing incorrectly at the `font-paragraph-01` design token (which is used for paragraph spacing). Have fixed this to now point at the correct font-size token.
+
+### Changed
+- Updated to the latest non-breaking version of `pie-design-tokens`. Will update to `v2+` of the design tokens as a separate fozzie release, so that any applications updating to `dart-sass` don't also potentially have to make a bunch of token name updates as part of this v9 release.
+
+### Removed
+- Deprecation warnings for `modal` and `orderCard` components. These styles are currently being used on the Order pages.
+
+
+v9.0.0-beta.9
+------------------------------
+*July 29, 2022*
+
+### Removed
+- `listingSkeleton` mixin.
+
+
+v9.0.0-beta.8
+------------------------------
+*July 27, 2022*
+
+### Removed
+- `~` Tilde from imports.
+- `importer` method from `scss-setup.spec.js` file.
+
+
+v9.0.0-beta.7
+------------------------------
+*July 06, 2022*
+
+### Changed
+- `yarn test` command now tests js and scss together with `test:js` and `test:scss` individually being called
+
+
+v9.0.0-beta.6
+------------------------------
+*July 01, 2022*
+
+### Added
+- SCSS unit testing capabilities using `sass-true`
+- New unit testing directory (to avoid packaging tests with npm)
+
+### Changed
+- yarn test command specifies which `jest.config.js` file to use
+
+
+v9.0.0-beta.5
+------------------------------
+*June 21, 2022*
+
+### Changed
+- moved `$fozzie-breakpoints` out of variables file and into the breakpoints helper file to remove circular reference
+- moved `$line-height-base` out of variables file and into the units function file to remove circular reference
+
+
+v9.0.0-beta.4
+------------------------------
+*June 20, 2022*
+
+### Changed
+- import variables into various function and mixin files using `@use` to prevent build errors in consumining clients
+
+
+v9.0.0-beta.3
+------------------------------
+*June 17, 2022*
+
+### Changed
+- import variables into `zIndex` scss function file
+
+
+v9.0.0-beta.2
+------------------------------
+*June 15, 2022*
+
+### Changed
+- Use a `@use` rule for `line-height` function in `_type.scss`
+- Remove namespace aliases from `@use` rules in `_type.scss`
+
+
+v9.0.0-beta.1
+------------------------------
+*June 07, 2022*
+
+### Removed
+- Removed namespace.
+
+
+v9.0.0-beta.0
+------------------------------
+*May 30, 2022*
+
+### Changed
+- **Breaking** Implement `@use` & `@forward` syntax in preference to `import` statements due to deprecation in `dart-sass`.
+  - README updated with new usage info. Documentation on vue.pie.design to be updated with full info on migration and usage.
+
+
+v8.4.0
+------------------------------
+*July 06, 2022*
+
+### Added
+- circleci config file
+
+### Removed
+- unused travis config
+
+
+v8.3.0
+------------------------------
+*June 17, 2022*
+
+### Added
+- `sass:map` to resolve `map-get` error when using `sass` in consuming apps.
+
 
 
 v8.4.1
@@ -42,6 +204,7 @@ v8.2.0
 ### Added
 - Node 16 to the `engines` property in `package.json`.
 
+
 v8.1.0
 ------------------------------
 *May 12, 2022*

diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 
 <img width="125" alt="Fozzie Bear" src="bear.png" />
 
-<p>Base Front-End Library for Just Eat Global Platform.  Designed to be reusable across any site that want to share those base styles.</p>
+<p>SCSS Helper Library for Front-End projects that are implementing PIE across JET.</p>
 </div>
 
 ---
@@ -13,25 +13,57 @@
 [![Coverage Status](https://coveralls.io/repos/github/justeat/fozzie/badge.svg)](https://coveralls.io/github/justeat/fozzie)
 [![Total alerts](https://img.shields.io/lgtm/alerts/g/justeat/fozzie.svg)](https://lgtm.com/projects/g/justeat/fozzie/alerts/)
 
+## What is Fozzie?
+
+Fozzie is an SCSS Helper Library that's used to help ensure web projects across JET have access to a set of baseline SCSS variables, mixins and functions.
+
+By including this helper library, the consuming web application will have access to our shared PIE Design tokens, as well as common SCSS helper mixins and functions for things like font-size, spacing and setting media queries.
+
 ## Usage
 
-1. The easiest way to use fozzie modules in your Sass setup is to use [Eyeglass](https://www.npmjs.com/package/eyeglass).
+### Pre-requisites
+
+To use the fozzie SCSS helper library, you'll need to ensure a couple of things:
+
+1. That you use `dart-sass` to compile your Sass. The [sass](https://www.npmjs.com/package/sass) module uses dart-sass by default now, so if you use the latest version of this module, you'll be good-to-go.
+
+   `node-sass` support in Sass has been officially deprecated and as this library uses up-to-date Sass syntax (namely `@use` and `@forward`, rather than `@import`), it won't work when compiling with `node-sass`.
 
-If you are using the [fozzie gulp build tasks](https://www.npmjs.com/package/@justeat/gulp-build-fozzie), then Eyeglass is automatically setup ready to use.  If not, you can use it in one of the following ways:
+2. Your build tool supports importing via the `node_modules` folder.
 
-- [Gulp](https://github.com/sass-eyeglass/eyeglass/blob/master/site-src/docs/integrations/gulp.md)
-- [WebPack](https://github.com/sass-eyeglass/eyeglass/issues/153#issuecomment-300895607)
+   Both Webpack and Parcel support this by setting `includePaths` to point to the `node_modules` folder. More info on setting this up in your project can be found in the FAQ's (TODO: Add Link to docs).
 
-2.  Install the fozzie module using NPM or Yarn:
+### Installation
+
+1.  Install the fozzie module using NPM or Yarn:
 
     ```bash
     yarn add @justeat/fozzie
     ```
 
-3.  Then within your Sass files, you will need to import this module.
+2.  Then within your Sass files, you will need to import this module.
 
     ```scss
-    @import 'fozzie';
+    @use 'fozzie' as f;
     ```
 
-You can then use the base styles that `fozzie` has available in this module (and that will be documented shortly).
+Once you have imported fozzie into your Sass, you'll have access to the fozzie variables, mixins and functions, which can be used as in the following example:
+
+  ```scss
+    .myCoolComponent {
+      // Using PIE Variables
+      background: f.$color-background-default;
+      border-radius: f.$radius-rounded-b;
+
+      // Using helper mixins
+      @include f.font-size('body-l');
+
+      // Using helper functions
+      padding: f.spacing('b');
+
+      // Using media query helper
+      @include media('>mid') {
+        padding: f.spacing('c');
+      }
+    ]
+  ```
diff --git a/jest.config.js b/jest.config.js
@@ -11,17 +11,20 @@ module.exports = {
 
     testEnvironment: 'jsdom',
 
+    testEnvironmentOptions: {
+        url: 'http://localhost/'
+    },
+
     testMatch: [
         '**/*.{spec,test}.(js|jsx|ts|tsx)',
         '**/__tests__/*.(js|jsx|ts|tsx)'
     ],
 
     testPathIgnorePatterns: [
-        '/.yalc/'
+        '/.yalc/',
+        'scss'
     ],
 
-    testURL: 'http://localhost/',
-
     transform: {
         '^.+\\.js$': 'babel-jest'
     }

diff --git a/package.json b/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.4.1",
+  "version": "9.0.0",
   "main": "dist/js/index.js",
   "files": [
     "dist/js",
@@ -30,31 +30,35 @@
   },
   "license": "Apache-2.0",
   "engines": {
-    "node": "^12 || ^14 || ^16"
+    "node": "^14 || ^16"
   },
   "dependencies": {
-    "@justeat/pie-design-tokens": "1.4.0",
-    "include-media": "1.4.10"
+    "@justeat/pie-design-tokens": "1.6.0",
+    "include-media": "eduardoboucas/include-media#2.0-release"
   },
   "devDependencies": {
-    "@babel/cli": "7.15.7",
-    "@babel/core": "7.15.8",
-    "@babel/eslint-parser": "7.15.8",
-    "@babel/preset-env": "7.15.8",
-    "@justeat/browserslist-config-fozzie": "1.2.0",
-    "@justeat/eslint-config-fozzie": "4.0.0",
+    "@babel/cli": "7.18.10",
+    "@babel/core": "7.18.10",
+    "@babel/eslint-parser": "7.18.9",
+    "@babel/preset-env": "7.18.10",
+    "@justeat/browserslist-config-fozzie": "2.0.0",
+    "caniuse-lite": "1.0.30001374",
+    "@justeat/eslint-config-fozzie": "5.1.0",
     "@justeat/f-dom": "1.1.0",
     "@justeat/f-logger": "0.8.1",
     "@justeat/js-test-buddy": "0.4.1",
-    "@justeat/stylelint-config-fozzie": "2.2.0",
-    "concurrently": "6.3.0",
+    "@justeat/stylelint-config-fozzie": "2.3.0",
+    "concurrently": "7.3.0",
     "coveralls": "3.1.1",
-    "danger": "10.7.0",
-    "eslint": "7.21.0",
-    "eslint-plugin-import": "2.25.2",
-    "fontfaceobserver": "2.1.0",
-    "jest": "27.3.0",
-    "sass": "1.49.7",
+    "danger": "11.1.1",
+    "eslint": "8.21.0",
+    "eslint-plugin-import": "2.26.0",
+    "fontfaceobserver": "2.3.0",
+    "glob": "8.0.3",
+    "jest": "28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "sass": "1.54.3",
+    "sass-true": "6.1.0",
     "stylelint": "13.13.1",
     "stylelint-scss": "3.21.0"
   },
@@ -69,8 +73,10 @@
     "lint": "yarn run lint:css && yarn run lint:js",
     "lint:css": "stylelint src/scss/**/*.scss",
     "lint:js": "eslint --ext .js .",
-    "prepublishOnly": "concurrently -n \"lint,compile,test\" -c \"blue,yellow,green\" \"yarn lint\" \"yarn compile\" \"yarn test\" --kill-others-on-fail",
-    "test": "jest",
+    "prepare": "concurrently -n \"lint,compile,test\" -c \"blue,yellow,green\" \"yarn lint\" \"yarn compile\" \"yarn test\" --kill-others-on-fail",
+    "test": "concurrently -n \"test:js,test:scss\" -c \"cyan,magenta\" \"yarn test:js\" \"yarn test:scss\"",
+    "test:js": "jest --config=jest.config.js",
+    "test:scss": "jest --config=src/test/scss/jest.config.js",
     "test:build": "sass --no-source-map --load-path=node_modules --style=compressed src/scss:dist/css",
     "test:cover": "jest --collect-coverage",
     "test:cover:CI": "cat coverage/lcov.info | coveralls"