@justeattakeaway/pie-css 0.4.0 → 0.5.1

package/README.md

@@ -14,11 +14,14 @@
 
 1. [Introduction](#pie-css)
 2. [Installation](#installation)
-   1. JS or Framework import (via bundler)
-   2. NuxtJS
-   3. Sass /SCSS
-   4. Native HTML
+    1. JS or Framework import (via bundler)
+    2. NuxtJS
+    3. Sass /SCSS
+    4. Native HTML
 3. [Using the PIE CSS – SCSS helpers](#helpers)
+4. [Testing](#testing)
+    - [CSS](#css)
+    - [SCSS](#scss )
 
 ## Introduction
 
@@ -124,3 +127,32 @@ PIE CSS also has an optional set of SCSS helpers that are used by the PIE Web Co
 These are for carrying out common tasks in our styles, such as setting font sizes in consistent ways and sharing styles across components via SCSS mixins and functions.
 
 We will be writing more in-depth docs on these SCSS helpers shortly, but for now, feel free to browse the [SCSS code in the PIE mono-repo](https://github.com/justeattakeaway/pie/tree/main/packages/tools/pie-css/scss).
+
+## Testing
+
+We strive to ensure all styles are appropriately tested. How we test the styles differs for CSS and SCSS. Below, we outline both approaches.
+
+> [!WARNING]
+> Any pull requests that fail to test newly added or altered styling will likely be rejected. Please do ensure that tests have been added before raising a pull request.
+
+### CSS
+
+For our raw CSS styles, we test two things:
+
+1. Ensure that all our our CSS passes W3C CSS validation. This is done by reading the built CSS file and making a network request to the W3C validation service.
+
+2. Ensure that our CSS output is what we expect via snapshot testing. We use some tools such as PostCSS to generate the output, so we want to ensure that we catch any regressions before our consumers do!
+
+> [!NOTE]
+> Our CSS tests can be found under `/test/css`.
+
+### SCSS
+
+Our SCSS styles are tested in a number of ways:
+
+1. Unit tests to ensure that our SCSS mixins and functions output the expected CSS. These unit tests are written using `vitest`. What we do is write out a string of SCSS that calls the SCSS code we want to test and then run it through a compiler function to generate CSS. We then compare the output CSS to what we expect. This is done for all SCSS. To make things easier, we strip whitespace from the compiled CSS we test.
+
+2. Ensure that all of the compiled CSS passes W3C CSS validation. This is done by compiling the SCSS to CSS and then making a request to the W3C validation service. Because we do not want to spam network requests, we add all the SCSS to `./test/scss/validityTest.scss` and use that file to compile during the test.
+
+> [!NOTE]
+> Our SCSS tests can be found under `/test/scss`.

package/dist/index.css

@@ -80,6 +80,7 @@
     --dt-color-border-subtle: var(--dt-color-mozzarella-10);
     --dt-color-border-strong: var(--dt-color-mozzarella-30);
     --dt-color-border-inverse: var(--dt-color-mozzarella-70);
+    --dt-color-border-selected: var(--dt-color-mozzarella-50);
     --dt-color-divider-default: rgb(0,0,0,0.08);
     --dt-color-divider-inverse: rgb(255,255,255,0.20);
     --dt-color-interactive-brand: var(--dt-color-orange);
@@ -88,7 +89,7 @@
     --dt-color-interactive-inverse: var(--dt-color-white);
     --dt-color-interactive-light: var(--dt-color-white);
     --dt-color-interactive-form: var(--dt-color-mozzarella-60);
-    --dt-color-overlay: rgb(0,0,0,0.5);
+    --dt-color-overlay: rgb(0,0,0,0.55);
     --dt-color-support-error: var(--dt-color-red);
     --dt-color-support-warning: var(--dt-color-yellow);
     --dt-color-support-positive: var(--dt-color-green);
@@ -164,6 +165,7 @@
     --dt-color-highcontrast-border-subtle: var(--dt-color-black);
     --dt-color-highcontrast-border-strong: var(--dt-color-black);
     --dt-color-highcontrast-border-inverse: var(--dt-color-white);
+    --dt-color-highcontrast-border-selected: var(--dt-color-black);
     --dt-color-highcontrast-divider-default: var(--dt-color-black);
     --dt-color-highcontrast-divider-inverse: var(--dt-color-white);
     --dt-color-highcontrast-interactive-brand: var(--dt-color-orange-dark-hc);
@@ -172,7 +174,7 @@
     --dt-color-highcontrast-interactive-inverse: var(--dt-color-white);
     --dt-color-highcontrast-interactive-light: var(--dt-color-white);
     --dt-color-highcontrast-interactive-form: var(--dt-color-black);
-    --dt-color-highcontrast-overlay: rgb(0,0,0,0.5);
+    --dt-color-highcontrast-overlay: rgb(0,0,0,0.55);
     --dt-color-highcontrast-support-error: var(--dt-color-red-dark-hc);
     --dt-color-highcontrast-support-warning: var(--dt-color-yellow-dark-hc);
     --dt-color-highcontrast-support-positive: var(--dt-color-green-dark-hc);
@@ -248,6 +250,7 @@
     --dt-color-dark-border-subtle: var(--dt-color-mozzarella-75);
     --dt-color-dark-border-strong: var(--dt-color-mozzarella-60);
     --dt-color-dark-border-inverse: var(--dt-color-mozzarella-20);
+    --dt-color-dark-border-selected: var(--dt-color-mozzarella-30);
     --dt-color-dark-divider-default: rgb(255,255,255,0.20);
     --dt-color-dark-divider-inverse: rgb(0,0,0,0.08);
     --dt-color-dark-interactive-brand: var(--dt-color-orange);
@@ -256,7 +259,7 @@
     --dt-color-dark-interactive-inverse: var(--dt-color-mozzarella-90);
     --dt-color-dark-interactive-light: var(--dt-color-white);
     --dt-color-dark-interactive-form: var(--dt-color-mozzarella-50);
-    --dt-color-dark-overlay: rgb(0,0,0,0.5);
+    --dt-color-dark-overlay: rgb(0,0,0,0.55);
     --dt-color-dark-support-error: var(--dt-color-red);
     --dt-color-dark-support-warning: var(--dt-color-yellow);
     --dt-color-dark-support-positive: var(--dt-color-green-30);
@@ -332,6 +335,7 @@
     --dt-color-highcontrast-dark-border-subtle: var(--dt-color-white);
     --dt-color-highcontrast-dark-border-strong: var(--dt-color-white);
     --dt-color-highcontrast-dark-border-inverse: var(--dt-color-black);
+    --dt-color-highcontrast-dark-border-selected: var(--dt-color-white);
     --dt-color-highcontrast-dark-divider-default: var(--dt-color-white);
     --dt-color-highcontrast-dark-divider-inverse: var(--dt-color-black);
     --dt-color-highcontrast-dark-interactive-brand: var(--dt-color-orange-30);
@@ -340,7 +344,7 @@
     --dt-color-highcontrast-dark-interactive-inverse: var(--dt-color-black);
     --dt-color-highcontrast-dark-interactive-light: var(--dt-color-white);
     --dt-color-highcontrast-dark-interactive-form: var(--dt-color-white);
-    --dt-color-highcontrast-dark-overlay: rgb(0,0,0,0.5);
+    --dt-color-highcontrast-dark-overlay: rgb(0,0,0,0.55);
     --dt-color-highcontrast-dark-support-error: var(--dt-color-red-light-hc);
     --dt-color-highcontrast-dark-support-warning: var(--dt-color-yellow);
     --dt-color-highcontrast-dark-support-positive: var(--dt-color-green-light-hc);
@@ -637,27 +641,33 @@
     --dt-elevation-box-shadow-08: 0px 2px 6px 0px rgba(0, 0, 0, 0.12),0px 8px 12px -2px rgba(0, 0, 0, 0.24),0px 4px 6px 0px rgba(0, 0, 0, 0.16);
     --dt-elevation-box-shadow-09: 0px 8px 8px 0px rgba(0, 0, 0, 0.16),0px 3px 20px -3px rgba(0, 0, 0, 0.4),0px 4px 8px -2px rgba(0, 0, 0, 0.24);
     --dt-elevation-box-shadow-10: 0px -4px 6px 0px rgba(0, 0, 0, 0.08),0px -2px 12px -2px rgba(0, 0, 0, 0.32),0px -3px 6px 0px rgba(0, 0, 0, 0.24);
+    --dt-elevation-box-shadow-11: 0px 0px 1px 0px rgba(0, 0, 0, 0.12),0px 1px 5px 0px rgba(0, 0, 0, 0.04),0px 0px 4px 0px rgba(0, 0, 0, 0.1);
+    --dt-elevation-box-shadow-12: 0px 0px 1px 0px rgba(0, 0, 0, 0.24),0px 1px 5px 0px rgba(0, 0, 0, 0.08),0px 0px 4px 0px rgba(0, 0, 0, 0.16);
     /* Alias tokens - Elevation */
     --dt-elevation-01: var(--dt-elevation-box-shadow-01);
     --dt-elevation-02: var(--dt-elevation-box-shadow-02);
     --dt-elevation-03: var(--dt-elevation-box-shadow-03);
     --dt-elevation-04: var(--dt-elevation-box-shadow-04);
     --dt-elevation-05: var(--dt-elevation-box-shadow-05);
+    --dt-elevation-card: var(--dt-elevation-box-shadow-11);
     --dt-elevation-inverse-01: var(--dt-elevation-box-shadow-06);
     --dt-elevation-inverse-02: var(--dt-elevation-box-shadow-07);
     --dt-elevation-inverse-03: var(--dt-elevation-box-shadow-08);
     --dt-elevation-inverse-04: var(--dt-elevation-box-shadow-09);
     --dt-elevation-inverse-05: var(--dt-elevation-box-shadow-10);
+    --dt-elevation-inverse-card: var(--dt-elevation-box-shadow-12);
     --dt-elevation-dark-01: var(--dt-elevation-box-shadow-06);
     --dt-elevation-dark-02: var(--dt-elevation-box-shadow-07);
     --dt-elevation-dark-03: var(--dt-elevation-box-shadow-08);
     --dt-elevation-dark-04: var(--dt-elevation-box-shadow-09);
     --dt-elevation-dark-05: var(--dt-elevation-box-shadow-10);
+    --dt-elevation-dark-card: var(--dt-elevation-box-shadow-12);
     --dt-elevation-dark-inverse-01: var(--dt-elevation-box-shadow-01);
     --dt-elevation-dark-inverse-02: var(--dt-elevation-box-shadow-02);
     --dt-elevation-dark-inverse-03: var(--dt-elevation-box-shadow-03);
     --dt-elevation-dark-inverse-04: var(--dt-elevation-box-shadow-04);
     --dt-elevation-dark-inverse-05: var(--dt-elevation-box-shadow-05);
+    --dt-elevation-dark-inverse-card: var(--dt-elevation-box-shadow-11);
 }
 :root {
     --dt-color-aubergine-10-h: 300;
@@ -894,6 +904,9 @@
     --dt-color-border-inverse-h: var(--dt-color-mozzarella-70-h);
     --dt-color-border-inverse-s: var(--dt-color-mozzarella-70-s);
     --dt-color-border-inverse-l: var(--dt-color-mozzarella-70-l);
+    --dt-color-border-selected-h: var(--dt-color-mozzarella-50-h);
+    --dt-color-border-selected-s: var(--dt-color-mozzarella-50-s);
+    --dt-color-border-selected-l: var(--dt-color-mozzarella-50-l);
     --dt-color-interactive-brand-h: var(--dt-color-orange-h);
     --dt-color-interactive-brand-s: var(--dt-color-orange-s);
     --dt-color-interactive-brand-l: var(--dt-color-orange-l);

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@justeattakeaway/pie-css",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "A styling library that provides both a shared collection of ready to use CSS styles to be used across JET web front-ends, and SCSS-based style helpers for our PIE Web Component library.",
-  "author": "JustEatTakeaway - Design System Web Team",
+  "author": "Just Eat Takeaway.com - Design System Team",
   "files": [
     "scss"
   ],

package/scss/helpers/_has-grab-cursor.scss

@@ -0,0 +1,29 @@
+// ----------------------------------------------
+// Extendable Class for adding grab cursor styles.
+// The `%has-grab-cursor` extendable class allows you to apply grab cursor styles to an element.
+// It is intended to signify draggability to the user.
+// It will show a `grab` cursor when the element is hovered,
+// and a `grabbing` cursor when the element is active (being clicked).
+// -
+// @example
+// .foo {
+//   &[isdraggable]:not([interactiontype='none']) {
+//       @extend %has-grab-cursor;
+//   }
+// }
+// -
+// Outputs:
+// .foo[isdraggable]:not([interactiontype='none']) {
+//    cursor: grab;
+//    &:active {
+//        cursor: grabbing;
+//    }
+// }
+// ----------------------------------------------
+%has-grab-cursor {
+    cursor: grab;
+
+    &:active {
+        cursor: grabbing;
+    }
+}

package/scss/helpers/index.scss

@@ -1 +1 @@
-@forward './helpers';
+@forward './has-grab-cursor';

package/scss/index.scss

@@ -1,3 +1,3 @@
-@forward './mixins/';
-@forward './functions/';
+@forward 'mixins';
+@forward 'functions';
 @forward 'helpers';

package/scss/mixins/_focus.scss

@@ -0,0 +1,18 @@
+// ----------------------------------------------
+// Mixin for adding focus styles.
+// The `focus` mixin allows you to apply a box-shadow with inner and outer focus styles to an element.
+// -
+// @example
+// &:focus-visible {
+//   @include focus;
+// }
+// -
+// Outputs:
+// &:focus-visible {
+//   box-shadow: 0 0 0 2px var(--dt-color-focus-inner), 0 0 0 4px var(--dt-color-focus-outer);
+// }
+// ----------------------------------------------
+@mixin focus() {
+    box-shadow: 0 0 0 2px var(--dt-color-focus-inner), 0 0 0 4px var(--dt-color-focus-outer);
+    outline: none;
+}

package/scss/mixins/index.scss

@@ -1 +1,2 @@
 @forward './fontSize';
+@forward './focus';

package/scss/helpers/_helpers.scss

@@ -1,9 +0,0 @@
-// Allows a grab handle to appear.
-// Currently used in the card container component.
-%has-grab-cursor {
-    cursor: grab;
-
-    &:active {
-        cursor: grabbing;
-    }
-}