v9.0.0-beta.0

CHANGELOG.md

@@ -8,13 +8,23 @@ 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.
 
+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 fozzie.just-eat.com to be updated with full info on migration and usage.
+
+
 v8.2.0
 ------------------------------
 *May 23, 2022*
 
 ### Added
 - Node 16 to the `engines` property in `package.json`.
 
+
 v8.1.0
 ------------------------------
 *May 12, 2022*

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 font-size('body-l');
+
+      // Using helper functions
+      padding: spacing('b');
+
+      // Using media query helper
+      @include media('>mid') {
+        padding: spacing('c');
+      }
+    ]
+  ```

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.2.0",
+  "version": "9.0.0-beta.0",
   "main": "dist/js/index.js",
   "files": [
     "dist/js",
@@ -30,11 +30,11 @@
   },
   "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"
+    "include-media": "eduardoboucas/include-media#2.0-release"
   },
   "devDependencies": {
     "@babel/cli": "7.15.7",

src/scss/_dependencies.scss

@@ -15,29 +15,25 @@
 // See mixins/css3.scss for the full list
 
 // Including helper modules
-@import 'tools/index'; // imports Fozzie SCSS helper functions and mixins
-@import 'include-media/dist/_include-media'; // Cleaner media query declarations – http://include-media.com
-
+@forward 'tools/index'; // imports Fozzie SCSS helper functions and mixins
 
 // =================================
 // Core variables
 // =================================
 // The colour variables are imported from https://www.npmjs.com/package/@justeat/pie-design-tokens
-@import '@justeat/pie-design-tokens/dist/jet';
-
-@import 'settings/variables';
-@import 'tools/helpers/breakpoints'; // breakpoint helper - @TODO move to the `templates.scss` file as part of the next major version bump.
-
+@forward '~@justeat/pie-design-tokens/dist/jet';
+@forward 'settings/variables';
+@forward "settings/include-media";
+@forward 'tools/helpers/breakpoints'; // breakpoint helper
 
 // CSS Normalise and then Reset
-@import 'base/normalize';
-@import 'base/reset';
+@forward 'base/normalize';
+@forward 'base/reset';
 
 // Global typography styles
-@import 'base/typography';
-
-@import 'base/grid'; // Grid system based on flexbox w float fallbacks – https://github.com/TryKickoff/kickoff-grid.css
+@forward 'base/typography';
 
+@forward 'base/grid'; // Grid system based on flexbox w float fallbacks – https://github.com/TryKickoff/kickoff-grid.css
 /**
  * Objects
  * =================================
@@ -50,13 +46,14 @@
  *
  * Object styles should be prefixed with `.o-`
  */
-@import 'objects/body';
-@import 'objects/buttons';
-@import 'objects/links';
-@import 'objects/lists';
-@import 'objects/tables';
-@import 'objects/form-controls';
-@import 'objects/form-toggle';
+
+@forward 'objects/body';
+@forward 'objects/buttons';
+@forward 'objects/links';
+@forward 'objects/lists';
+@forward 'objects/tables';
+@forward 'objects/form-controls';
+@forward 'objects/form-toggle';
 
 /**
  * Components:
@@ -65,64 +62,46 @@
  *
  * This is where the majority of our day-to-day styling will take place.  Component styles should be prefixed with `.c-`
  */
-@import 'components/alerts';
-@import 'components/breadcrumbs';
-@import 'components/cards';
-@import 'components/media-element';
+@forward 'components/alerts';
+@forward 'components/breadcrumbs';
+@forward 'components/cards';
+@forward 'components/media-element';
 
 // Optional components – need to be included with the associated mixin in your project dependencies
-@import 'components/optional/apps-banner';
-@import 'components/optional/badges';
-@import 'components/optional/tag';
-@import 'components/optional/content-header';
-@import 'components/optional/content-title';
-@import 'components/optional/cookie-warning';
-@import 'components/optional/cuisines-widget';
-@import 'components/optional/fullscreen-pop-over';
-@import 'components/optional/listings';
-@import 'components/optional/listings-skeleton';
-@import 'components/optional/loading-indicator';
-@import 'components/optional/menu';
-@import 'components/optional/modal';
-@import 'components/optional/order-card';
-@import 'components/optional/overflow-carousel';
-@import 'components/optional/page-banner';
-@import 'components/optional/ratings';
-@import 'components/optional/toast';
-@import 'components/optional/user-message';
-@import 'components/optional/loading-indicator';
+@forward 'components/optional/apps-banner';
+@forward 'components/optional/badges';
+@forward 'components/optional/tag';
+@forward 'components/optional/content-header';
+@forward 'components/optional/content-title';
+@forward 'components/optional/cookie-warning';
+@forward 'components/optional/cuisines-widget';
+@forward 'components/optional/fullscreen-pop-over';
+@forward 'components/optional/listings';
+@forward 'components/optional/listings-skeleton';
+@forward 'components/optional/menu';
+@forward 'components/optional/modal';
+@forward 'components/optional/order-card';
+@forward 'components/optional/overflow-carousel';
+@forward 'components/optional/page-banner';
+@forward 'components/optional/ratings';
+@forward 'components/optional/toast';
+@forward 'components/optional/user-message';
+@forward 'components/optional/loading-indicator';
 
 // Global layout definitions & helpers
-@import 'base/layout';
-
-
-/**
- * Experiments
- * =================================
- *
- * These styles relate to experiments running on the platform.
- *
- * The filename should _always include the JIRA number so that its status can be checked
- */
-// @import 'experiments/INTPB-1451-quick-checkout';
+@forward 'base/layout';
 
 
 /**
  * Utility classes
  * =====================================
  * These should always come last as they should 'trump' other properties
  */
-@import 'trumps/utilities';
-@import 'trumps/rwd';
-
+@forward 'trumps/utilities';
+@forward 'trumps/rwd';
 
 /**
  * Print styles
  */
-@import 'base/print';
-
+@forward 'base/print';
 
-/**
- * Templates for including base sets of styles
- */
-@import 'templates';

src/scss/_templates.scss

@@ -1,3 +1,27 @@
+@use 'base/normalize' as *;
+@use 'base/reset' as *;
+@use 'base/typography' as *;
+@use 'tools/helpers/breakpoints' as mixins;
+@use 'base/grid' as *;
+@use 'objects/body' as *;
+@use 'objects/buttons' as *;
+@use 'objects/links' as *;
+@use 'objects/lists' as *;
+@use 'objects/tables' as *;
+@use 'objects/form-controls' as *;
+@use 'objects/form-toggle' as *;
+@use 'components/alerts' as *;
+@use 'components/breadcrumbs' as *;
+@use 'components/cards' as *;
+@use 'components/media-element' as *;
+@use 'base/layout' as *;
+@use 'trumps/utilities' as *;
+@use 'trumps/rwd' as *;
+@use 'base/print' as *;
+
+$includeBaseFramework: false !default;
+$includeMinimalFramework: false !default;
+
 /**
  * Setting $includeBaseFramework to `true` includes the base styles that were included
  * as part of Fozzie v4 (useful for anyone upgrading that wants to keep things as-is)
@@ -6,6 +30,7 @@
     @include normalize();
     @include reset();
     @include typography();
+    @include mixins.breakpoints();
 
     @include grid();