@justeattakeaway/pie-css 0.6.0 → 0.7.0

package/README.md

@@ -12,15 +12,15 @@
 
 # Table of Contents
 
-1. [Introduction](#pie-css)
-2. [Installation](#installation)
+1. [Introduction](#introduction)
+2. [Using pie-css for building web applications](#using-pie-css-for-building-web-applications)
     1. JS or Framework import (via bundler)
     2. NuxtJS
     3. Sass /SCSS
     4. Native HTML
-3. [Using the PIE CSS – SCSS helpers](#helpers)
-4. [Z-index](#z-index)
-5. [Testing](#testing)
+3. [Using pie-css for building web components](#using-pie-css-for-building-web-components)
+    - [Z-index](#z-index)
+4. [Testing](#testing)
     - [CSS](#css)
     - [SCSS](#scss )
 
@@ -30,7 +30,8 @@ PIE CSS is A styling library that provides both a shared collection of ready to
 
 ---
 
-## Installing PIE CSS shared CSS styles
+## Using pie-css for building web applications
+`pie-css` provides a base stylesheet that sets up some basic styles used by our components. It is essential that this stylesheet is included in any application that uses PIE Web Components. The stylesheet provides some basic styles for things like typography and provides the design tokens that are used by our components.
 
 To install the PIE CSS library, run the following on your command line:
 
@@ -121,15 +122,17 @@ Of course, you could include the styles straight inside your HTML document – m
 
 
 
-## Using the PIE CSS – SCSS helpers
+## Using pie-css for building web components
+> [!NOTE]
+> The following section is only relevant if you are building web components as a part of our component library within the PIE monorepo.
 
-PIE CSS also has an optional set of SCSS helpers that are used by the PIE Web Components.
+PIE CSS provides an optional set of SCSS helpers that are used by the PIE Web Components.
 
 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).
 
-## z-index
+### z-index
 
 Some PIE Web Components use a z-index value to control how they stack on a webpage. These values are defined in the `pie-css` package as css variables and are utilized internally. In most cases, a webpage should follow the DOM's natural stacking order and the default z-index order assigned for each component. However, if you're creating custom components, refer to the following table to make sure they don't conflict with other components.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-css",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "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": "Just Eat Takeaway.com - Design System Team",
   "files": [
@@ -27,7 +27,7 @@
   "repository": "https://github.com/justeattakeaway/pie.git",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@types/postcss-import": "14.0.1",
+    "@types/postcss-import": "14.0.2",
     "postcss": "8.4.31",
     "postcss-import": "15.1.0",
     "w3c-css-validator": "1.3.1"

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

@@ -7,13 +7,13 @@
 // -
 // @example
 // .foo {
-//   &[isdraggable]:not([interactiontype='none']) {
+//   &[isdraggable] {
 //       @extend %has-grab-cursor;
 //   }
 // }
 // -
 // Outputs:
-// .foo[isdraggable]:not([interactiontype='none']) {
+// .foo[isdraggable] {
 //    cursor: grab;
 //    &:active {
 //        cursor: grabbing;

package/scss/mixins/_buttonInteractiveStates.scss

@@ -0,0 +1,40 @@
+// ----------------------------------------------
+// Mixin to define button states for hover, active and loading.
+// $bg-color: design token name to be used for the states
+// $mode: 'default': apply the default lighten/darken to the color via hsl
+// 'transparent': uses hsla syntax to make the color semi-opaque (used for ghost and outline button variants)
+// }
+// ----------------------------------------------
+@mixin button-interactive-states($bg-color, $mode: 'default') {
+    &:hover:not(:disabled) {
+        @if $mode == 'alt' {
+            --hover-modifier: calc(-1 * var(--dt-color-hover-02));
+        } @else {
+            --hover-modifier: calc(-1 * var(--dt-color-hover-01));
+        }
+
+        // for mode=transparent, use the hsla syntax to make the button background opaque by a set percentage
+        @if $mode == 'transparent' {
+            --hover-modifier: var(--dt-color-hover-01);
+            --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--hover-modifier));
+        } @else {
+            --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--hover-modifier)));
+        }
+    }
+
+    &:active:not(:disabled),
+    &[isLoading]:not(:disabled) {
+        @if $mode == 'alt' {
+            --active-modifier: calc(-1 * var(--dt-color-active-02));
+        } @else {
+            --active-modifier: calc(-1 * var(--dt-color-active-01));
+        }
+
+        @if $mode == 'transparent' {
+            --active-modifier: var(--dt-color-active-01);
+            --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--active-modifier));
+        } @else {
+            --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--active-modifier)));
+        }
+    }
+}

package/scss/mixins/_visuallyHidden.scss

@@ -0,0 +1,10 @@
+// Mixin to hide an element yet keep it available for screen readers.
+@mixin visually-hidden() {
+    position: absolute;
+    display: block;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    padding: 1px;
+    white-space: nowrap;
+}

package/scss/mixins/index.scss

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