@pareto-engineering/design-system 2.0.0-alpha.11 → 2.0.0-alpha.15

package/dist/es/b/Button/styles.scss

@@ -7,31 +7,47 @@ $compact-padding: .6em .6em .48em;
 $default-color:primary;
 $font-weight:bold;
 $default-margin:.5em;
+$default-animation-time: .3s;
 
 .#{bem.$base}.button {
   background: var(--x, var(--#{$default-color}));
   border: transparent;
   border-radius: var(--theme-border-radius);
   color: var(--on-x, var(--on-#{$default-color}));
+  display: inline-flex;
+  font-family: var(--theme-default-paragraph);
   font-weight: 600;
+  justify-content: space-between;
   padding: $default-padding;
   transition: all .25s;
 
-  &.arrow-right{
+  &.arrow-right {
     &::after {
-      content: "L";
-      font-family: "icons";
-      vertical-align: middle;
+      content: "-->";
       margin-left: $default-margin;
+      vertical-align: middle;
+    }
+
+    &:hover {
+      &::after {
+        --final-position: 50%;
+        animation: animateArrow $default-animation-time forwards;
+      }
     }
   }
 
-  &.arrow-left{
+  &.arrow-left {
     &::before {
-      content: "H";
-      font-family: "icons";
-      vertical-align: middle;
+      content: "<--";
       margin-right: $default-margin;
+      vertical-align: middle;
+    }
+
+    &:hover {
+      &::before {
+        --final-position: -50%;
+        animation: animateArrow $default-animation-time forwards;
+      }
     }
   }
 
@@ -41,12 +57,12 @@ $default-margin:.5em;
     &:hover {
       background: var(--light-x, var(--light-#{$default-color}));
     }
+
     &:focus {
       background: var(--dark-x, var(--dark-#{$default-color}));
     }
   }
 
-
   &.#{bem.$modifier-compact} {
     padding: $compact-padding;
   }
@@ -58,7 +74,7 @@ $default-margin:.5em;
 
     &:hover,
     &:focus,
-    &:disabled{
+    &:disabled {
       background: transparent;
     }
 
@@ -74,7 +90,7 @@ $default-margin:.5em;
       }
     }
 
-    &:disabled{
+    &:disabled {
       border: 1px solid var(--x, var(--#{$default-color}));
       color: var(--x, var(--#{$default-color}));
     }
@@ -83,8 +99,8 @@ $default-margin:.5em;
   &.#{bem.$modifier-simple} {
     background: transparent;
     border: 1px solid transparent;
-    padding: 0;
     color: var(--x, var(--#{$default-color}));
+    padding: 0;
 
     &:disabled,
     &:hover,
@@ -93,13 +109,13 @@ $default-margin:.5em;
     }
 
     &:not(:disabled) {
-       &:hover {
-         color: var(--light-x, var(--light-#{$default-color}));
-       }
+      &:hover {
+        color: var(--light-x, var(--light-#{$default-color}));
+      }
 
-       &:focus {
-         color: var(--dark-x, var(--dark-#{$default-color}));
-       }
+      &:focus {
+        color: var(--dark-x, var(--dark-#{$default-color}));
+      }
     }
 
     &:disabled {
@@ -114,3 +130,12 @@ $default-margin:.5em;
 }
 
 
+@keyframes animateArrow {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(var(--final-position));
+  }
+}

package/dist/es/b/Page/common/Section/Section.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem'; // Local Definitions
 
-import { Shapes } from "../../../../a";
+import { Shapes, BackgroundGradient } from "../../../../a";
 import usePage from "../../usePage";
 const baseClassName = styleNames.base;
 const componentClassName = 'section';
@@ -16,6 +16,8 @@ const Section = ({
   style,
   children,
   backgroundShape,
+  backgroundGradient,
+  backgroundGradientHeight,
   backgroundVerticalAlign,
   backgroundHorizontalAlign,
   backgroundHeight,
@@ -33,9 +35,11 @@ const Section = ({
   }, otherProps), children, backgroundShape && /*#__PURE__*/React.createElement(Shapes, {
     verticalAlign: backgroundVerticalAlign,
     horizontalAlign: backgroundHorizontalAlign,
-    backgroundOverflow: backgroundOverflow,
+    overflow: backgroundOverflow,
     height: backgroundHeight,
     shape: backgroundShape
+  }), backgroundGradient && /*#__PURE__*/React.createElement(BackgroundGradient, {
+    height: backgroundGradientHeight
   }));
 };
 
@@ -83,7 +87,17 @@ Section.propTypes = {
   /**
    * The background overflow to use for if the background shape is set.
    */
-  backgroundOverflow: PropTypes.oneOf(['visible', 'hidden', 'scroll'])
+  backgroundOverflow: PropTypes.oneOf(['visible', 'hidden', 'scroll']),
+
+  /**
+   * The background gradient to use for if the background gradient is set.
+   */
+  backgroundGradient: PropTypes.bool,
+
+  /**
+   * The background gradient height to use for if the background gradient is set.
+   */
+  backgroundGradientHeight: PropTypes.string
 };
 Section.defaultProps = {// someProp:false
 };

package/dist/es/c/ContentSlides/common/Navigator/Navigator.js

@@ -56,7 +56,8 @@ const Navigator = ({
       } else {
         setNextStepIndex(stepsForward);
       }
-    }
+    },
+    isCompact: true
   }, "Next") : /*#__PURE__*/React.createElement("span", null));
 };
 
@@ -118,8 +119,8 @@ Navigator.propTypes = {
 };
 Navigator.defaultProps = {
   canMoveForward: true,
-  previousColor: 'main1',
-  nextColor: 'main1',
+  previousColor: 'main2',
+  nextColor: 'main2',
   stepsForward: 1,
   stepsBackwards: 1
 };

package/dist/es/f/common/Debugger/Debugger.js

@@ -31,7 +31,7 @@ const Debugger = ({
     style: style
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: toggleDebugger,
-    color: "main1"
+    color: "main2"
   }, isOpen ? 'Close FormDebugger' : 'Open FormDebugger'), isOpen && /*#__PURE__*/React.createElement("pre", {
     className: "debuger-content"
   }, JSON.stringify(formikContext, null, 2)));

package/dist/es/f/common/Label/Label.js

@@ -71,6 +71,6 @@ Label.propTypes = {
 Label.defaultProps = {
   // someProp:false
   as: 'label',
-  color: 'main1'
+  color: 'main2'
 };
 export default Label;

package/dist/es/f/fields/ChoicesInput/ChoicesInput.js

@@ -129,7 +129,7 @@ ChoicesInput.defaultProps = {
   gridColumnsMobile: 2,
   gridColumnsDesktop: 3,
   color: 'background2',
-  colorChecked: 'main1',
+  colorChecked: 'main2',
   disabled: false
 };
 export default /*#__PURE__*/memo(ChoicesInput);

package/dist/es/f/fields/SelectInput/styles.scss

@@ -14,7 +14,7 @@ $default-padding: 0.75em 0.75em 0.55em;
 
 
   .input-label {
-    color: var(--main1);
+    color: var(--main2);
   }
 
   .input {

package/dist/es/f/fields/TaskRecommendationInput/TaskRecommendationInput.js

@@ -106,6 +106,6 @@ TaskRecommendationInput.propTypes = {
   image: PropTypes.string.isRequired
 };
 TaskRecommendationInput.defaultProps = {
-  color: 'main1'
+  color: 'main2'
 };
 export default /*#__PURE__*/memo(TaskRecommendationInput);

package/dist/es/f/fields/TextInput/styles.scss

@@ -10,16 +10,16 @@ $default-padding: 0.75em 0.75em 0.55em;
   flex-direction: column;
 
   .input-label {
-    color: var(--main1);
+    color: var(--main2);
   }
 
   .input {
-    background: var(--light-background1);
-    color: var(--on-background1);
+    background: var(--light-background2);
+    color: var(--on-background2);
     padding: $default-padding;
 
     &:focus {
-      background: var(--dark-background1);
+      background: var(--dark-background2);
     }
   }
 }

package/dist/es/f/fields/TextareaInput/TextareaInput.js

@@ -126,7 +126,7 @@ TextareaInput.propTypes = {
 TextareaInput.defaultProps = {
   rows: 3,
   textAreaColor: 'background1',
-  labelColor: 'main1',
+  labelColor: 'main2',
   disabled: false
 };
 export default /*#__PURE__*/memo(TextareaInput);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.15",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -79,7 +79,7 @@
     "stylelint-config-palantir": "^5.1.0"
   },
   "dependencies": {
-    "@pareto-engineering/assets": "^2.0.0-alpha.5",
+    "@pareto-engineering/assets": "^2.0.0-alpha.8",
     "@pareto-engineering/bem": "^0.1.5",
     "@pareto-engineering/styles": "^2.0.0-alpha.8",
     "date-fns": "^2.22.1",