@justeattakeaway/pie-css 0.16.0 → 0.17.1

package/README.md

@@ -10,16 +10,28 @@
 
 # PIE CSS
 
+`pie-css` is a styling library that provides two distinct features:
+
+1. A minimal set of CSS styles to help PIE web components display as intended in web applications and providing our design tokens for applications to use.
+2. A set of SCSS style helpers (mixins, functions and variables) to help with common styling tasks when authoring PIE web components.
+
+The PIE design tokens (and HSL colour variants) are exposed as CSS variables, as these variables are used across the PIE component styles and therefore need to be imported when using the PIE Web Components.
+
+
 # Table of Contents
 
-1. [Introduction](#introduction)
-2. [Installation](#installation)
-3. [Using the `pie-css` CSS stylesheet in your web application](#using-the-pie-css-css-stylesheet-in-your-web-application)
+1. [Installation](#installation)
+2. [Using the `pie-css` CSS stylesheet in your web application](#using-the-pie-css-css-stylesheet-in-your-web-application)
     1. JS or Framework import (via bundler)
     2. Nuxt
     3. Sass /SCSS
     4. Native HTML
-4. [What's included in the `pie-css` base stylesheet](#whats-included-in-the-pie-css-base-stylesheet)
+3. [What's included in the `pie-css` base stylesheet](#whats-included-in-the-pie-css-base-stylesheet)
+    1. [PIE Design Tokens](#pie-design-tokens)
+    2. [box-sizing](#box-sizing)
+    3. [Typography](#typography)
+    4. [z-index variables](#z-index-variables)
+    5. [Reusable Animations](#reusable-animations)
 4. [Using the `pie-css` SCSS helpers (mixins & functions)](#using-the-pie-css-scss-helpers-mixins--functions)
     1. [Importing the `pie-css` SCSS helpers](#importing-the-pie-css-scss-helpers)
     2. [`pie-css` SCSS Helper Definitions](#pie-css-scss-helper-definitions)
@@ -29,13 +41,6 @@
     - [CSS](#css)
     - [SCSS](#scss)
 
-## Introduction
-
-`pie-css` is a styling library that provides both a minimal set of CSS styles to help PIE Web Components display as intended on web applications, and a set of optional SCSS style helpers (mixins & functions) to help with common styling tasks.
-
-It also includes the PIE design tokens (and HSL colour variants) as CSS variables, as these variables are used across the PIE component styles and therefore need to be imported when using the PIE Web Components.
-
-
 ## Installation
 
 To install `pie-css`, run the following on your command line:
@@ -171,6 +176,7 @@ In most cases, a webpage should follow the DOM's natural stacking order and the
 
 | Token                      | Z-Index Value  |
 | -------------------------- | ---------------|
+| --dt-z-index-base: 1;      | 1              |
 | --dt-z-index-dropdown      | 1000           |
 | --dt-z-index-fab           | 1000           |
 | --dt-z-index-tooltip       | 2000           |
@@ -181,6 +187,22 @@ In most cases, a webpage should follow the DOM's natural stacking order and the
 | --dt-z-index-cookie-banner | 5000           |
 | --dt-z-index-toast         | 6000           |
 
+### Reusable Animations
+
+`pie-css` also ships with a set of reusable animations that can be applied to elements by adding a CSS class.
+
+#### Slide Animation
+
+| Class                      | Description  |
+| -------------------------- | ---------------|
+| `.pie-animation--slide-in` | Slides an element in from the left. |
+| `.pie-animation--slide-out`| Slides an element out to the left. |
+
+
+**Customisation:**
+
+The starting position of the slide animation can be customised by overriding the `--pie-animation-slide-translate-start` CSS variable. The default value is `-100%`.
+
 ---
 
 ## Using the `pie-css` SCSS helpers (mixins & functions)

package/dist/index.css

@@ -2048,6 +2048,33 @@ html[data-highcontrast-enabled] {
         --dt-color-skeleton-shimmer-03-l: var(--dt-color-mozzarella-80-l);
     }
 }
+:root {
+    --pie-animation-slide-translate-start: -100%;
+}
+.pie-animation--slide-in {
+    animation: pie-animation-slide-in var(--dt-motion-timing-200) var(--dt-motion-easing-out);
+}
+.pie-animation--slide-out {
+    animation: pie-animation-slide-out var(--dt-motion-timing-100) var(--dt-motion-easing-in);
+}
+@keyframes pie-animation-slide-in {
+    from {
+        transform: translate(var(--pie-animation-slide-translate-start));
+    }
+
+    to {
+        transform: translate(0);
+    }
+}
+@keyframes pie-animation-slide-out {
+    from {
+        transform: translate(0);
+    }
+
+    to {
+        transform: translate(var(--pie-animation-slide-translate-start));
+    }
+}
 html {
     box-sizing: border-box;
 

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@justeattakeaway/pie-css",
-  "version": "0.16.0",
+  "version": "0.17.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.",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
     "directory": "packages/tools/pie-css"
   },
+  "homepage": "https://webc.pie.design/?path=/docs/additional-libraries-pie-css--docs",
   "author": "Just Eat Takeaway.com - Design System Team",
   "files": [
     "scss"
@@ -41,5 +42,8 @@
     "postcss": "8.4.32",
     "postcss-import": "15.1.0",
     "w3c-css-validator": "1.3.2"
+  },
+  "volta": {
+    "extends": "../../../package.json"
   }
 }