@justeattakeaway/pie-css 0.5.1 → 0.7.0

package/README.md

@@ -12,13 +12,14 @@
 
 # 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)
+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 )
@@ -29,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:
 
@@ -120,14 +122,32 @@ 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
+
+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.
+
+| Token              | Z-Index Value  |
+| -------------------------- | ---------------|
+| --dt-z-index-dropdown      | 1000           |
+| --dt-z-index-fab           | 1000           |
+| --dt-z-index-tooltip       | 2000           |
+| --dt-z-index-popover       | 3000           |
+| --dt-z-index-bottom-sheet  | 4000           |
+| --dt-z-index-side-sheet    | 4000           |
+| --dt-z-index-modal         | 4000           |
+| --dt-z-index-cookie-banner | 5000           |
+| --dt-z-index-toast         | 6000           |
+
 ## 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.

package/dist/index.css

@@ -1105,3 +1105,16 @@ html {
 *:after {
     box-sizing: inherit;
 }
+/* The z-index priority order of different components.
+The values start at a high and specific number to avoid any conflicts */
+:root {
+    --dt-z-index-dropdown: 1000;
+    --dt-z-index-fab: 1000;
+    --dt-z-index-tooltip: 2000;
+    --dt-z-index-popover: 3000;
+    --dt-z-index-bottom-sheet: 4000;
+    --dt-z-index-side-sheet: 4000;
+    --dt-z-index-modal: 4000;
+    --dt-z-index-cookie-banner: 5000;
+    --dt-z-index-toast: 6000;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-css",
-  "version": "0.5.1",
+  "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,8 +27,8 @@
   "repository": "https://github.com/justeattakeaway/pie.git",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@types/postcss-import": "14.0.0",
-    "postcss": "8.4.29",
+    "@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';

package/LICENSE

@@ -1,17 +0,0 @@
-Apache License
-Version 2.0, January 2004
-http://www.apache.org/licenses/
-
-Copyright (c) Just Eat Takeaway.com
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.