@justeattakeaway/pie-css 0.16.0 → 0.17.0

package/README.md

@@ -20,12 +20,17 @@
     3. Sass /SCSS
     4. Native HTML
 4. [What's included in the `pie-css` base stylesheet](#whats-included-in-the-pie-css-base-stylesheet)
-4. [Using the `pie-css` SCSS helpers (mixins & functions)](#using-the-pie-css-scss-helpers-mixins--functions)
+    1. [PIE Design Tokens](#pie-design-tokens)
+    2. [box-sizing](#box-sizing)
+    3. [Typography](#typography)
+    4. [z-index stacking context](#z-index-stacking-context)
+    5. [Reusable Animations](#reusable-animations)
+5. [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)
         -  [`font-size()`](#font-size)
         - [`@include media()`](#include-media)
-5. [Testing](#testing)
+6. [Testing](#testing)
     - [CSS](#css)
     - [SCSS](#scss)
 
@@ -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,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-css",
-  "version": "0.16.0",
+  "version": "0.17.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.",
   "repository": {
     "type": "git",
@@ -41,5 +41,8 @@
     "postcss": "8.4.32",
     "postcss-import": "15.1.0",
     "w3c-css-validator": "1.3.2"
+  },
+  "volta": {
+    "extends": "../../../package.json"
   }
 }