@justeattakeaway/pie-css 0.5.1 → 0.6.0

package/README.md

@@ -19,7 +19,8 @@
     3. Sass /SCSS
     4. Native HTML
 3. [Using the PIE CSS – SCSS helpers](#helpers)
-4. [Testing](#testing)
+4. [Z-index](#z-index)
+5. [Testing](#testing)
     - [CSS](#css)
     - [SCSS](#scss )
 
@@ -128,6 +129,22 @@ These are for carrying out common tasks in our styles, such as setting font size
 
 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.6.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.1",
+    "postcss": "8.4.31",
     "postcss-import": "15.1.0",
     "w3c-css-validator": "1.3.1"
   }

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.