@pareto-engineering/design-system 2.0.0-alpha.9 → 3.0.0-alpha.22

package/dist/cjs/a/index.js

@@ -3,88 +3,64 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "SVG", {
-  enumerable: true,
-  get: function get() {
-    return _SVG.SVG;
-  }
-});
-Object.defineProperty(exports, "DashboardNavbar", {
-  enumerable: true,
-  get: function get() {
-    return _DashboardNavbar.DashboardNavbar;
-  }
-});
-Object.defineProperty(exports, "IconList", {
-  enumerable: true,
-  get: function get() {
-    return _IconList.IconList;
-  }
-});
-Object.defineProperty(exports, "SiteContext", {
+Object.defineProperty(exports, "AnimatedCounter", {
   enumerable: true,
   get: function get() {
-    return _SiteContext.SiteContext;
+    return _AnimatedCounter.AnimatedCounter;
   }
 });
-Object.defineProperty(exports, "SiteContextProvider", {
+Object.defineProperty(exports, "AppContext", {
   enumerable: true,
   get: function get() {
-    return _SiteContext.SiteContextProvider;
+    return _AppContext.AppContext;
   }
 });
-Object.defineProperty(exports, "useSite", {
+Object.defineProperty(exports, "AppContextProvider", {
   enumerable: true,
   get: function get() {
-    return _SiteContext.useSite;
+    return _AppContext.AppContextProvider;
   }
 });
-Object.defineProperty(exports, "useTheme", {
+Object.defineProperty(exports, "ContentTree", {
   enumerable: true,
   get: function get() {
-    return _SiteContext.useTheme;
+    return _ContentTree.ContentTree;
   }
 });
-Object.defineProperty(exports, "ProgressBar", {
-  enumerable: true,
-  get: function get() {
-    return _ProgressBar.ProgressBar;
-  }
-});
-Object.defineProperty(exports, "TeamInfo", {
+Object.defineProperty(exports, "Conversation", {
   enumerable: true,
   get: function get() {
-    return _TeamInfo.TeamInfo;
+    return _Conversation.Conversation;
   }
 });
-Object.defineProperty(exports, "AnimatedCounter", {
+Object.defineProperty(exports, "DotInfo", {
   enumerable: true,
   get: function get() {
-    return _AnimatedCounter.AnimatedCounter;
+    return _DotInfo.DotInfo;
   }
 });
-Object.defineProperty(exports, "CustomerLogos", {
+Object.defineProperty(exports, "Figure", {
   enumerable: true,
   get: function get() {
-    return _CustomerLogos.CustomerLogos;
+    return _Figure.Figure;
   }
 });
-Object.defineProperty(exports, "FeaturedOn", {
+Object.defineProperty(exports, "HamburgerButton", {
   enumerable: true,
   get: function get() {
-    return _FeaturedOn.FeaturedOn;
+    return _HamburgerButton.HamburgerButton;
   }
 });
-Object.defineProperty(exports, "Spinner", {
+Object.defineProperty(exports, "IconList", {
   enumerable: true,
   get: function get() {
-    return _Spinner.Spinner;
+    return _IconList.IconList;
   }
 });
-Object.defineProperty(exports, "HamburgerButton", {
+Object.defineProperty(exports, "Label", {
   enumerable: true,
   get: function get() {
-    return _HamburgerButton.HamburgerButton;
+    return _Label.Label;
   }
 });
 Object.defineProperty(exports, "LoadingCircle", {
@@ -99,40 +75,40 @@ Object.defineProperty(exports, "People", {
     return _People.People;
   }
 });
-Object.defineProperty(exports, "Figure", {
+Object.defineProperty(exports, "Popover", {
   enumerable: true,
   get: function get() {
-    return _Figure.Figure;
+    return _Popover.Popover;
   }
 });
-Object.defineProperty(exports, "Conversation", {
+Object.defineProperty(exports, "ProgressBar", {
   enumerable: true,
   get: function get() {
-    return _Conversation.Conversation;
+    return _ProgressBar.ProgressBar;
   }
 });
-Object.defineProperty(exports, "CustomerStat", {
+Object.defineProperty(exports, "Quote", {
   enumerable: true,
   get: function get() {
-    return _CustomerStat.CustomerStat;
+    return _Quote.Quote;
   }
 });
-Object.defineProperty(exports, "Quote", {
+Object.defineProperty(exports, "SVG", {
   enumerable: true,
   get: function get() {
-    return _Quote.Quote;
+    return _SVG.SVG;
   }
 });
-Object.defineProperty(exports, "ContentCard", {
+Object.defineProperty(exports, "SnapScroller", {
   enumerable: true,
   get: function get() {
-    return _ContentCard.ContentCard;
+    return _SnapScroller.SnapScroller;
   }
 });
-Object.defineProperty(exports, "DotInfo", {
+Object.defineProperty(exports, "Spinner", {
   enumerable: true,
   get: function get() {
-    return _DotInfo.DotInfo;
+    return _Spinner.Spinner;
   }
 });
 Object.defineProperty(exports, "Timestamp", {
@@ -141,59 +117,33 @@ Object.defineProperty(exports, "Timestamp", {
     return _Timestamp.Timestamp;
   }
 });
-Object.defineProperty(exports, "Shapes", {
+Object.defineProperty(exports, "useApp", {
   enumerable: true,
   get: function get() {
-    return _Shapes.Shapes;
+    return _AppContext.useApp;
   }
 });
-Object.defineProperty(exports, "OvalIllustration", {
+Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function get() {
-    return _OvalIllustration.OvalIllustration;
+    return _AppContext.useTheme;
   }
 });
-
-var _SVG = require("./SVG");
-
-var _DashboardNavbar = require("./DashboardNavbar");
-
-var _IconList = require("./IconList");
-
-var _SiteContext = require("./SiteContext");
-
-var _ProgressBar = require("./ProgressBar");
-
-var _TeamInfo = require("./TeamInfo");
-
 var _AnimatedCounter = require("./AnimatedCounter");
-
-var _CustomerLogos = require("./CustomerLogos");
-
-var _FeaturedOn = require("./FeaturedOn");
-
-var _Spinner = require("./Spinner");
-
+var _AppContext = require("./AppContext");
+var _ContentTree = require("./ContentTree");
+var _Conversation = require("./Conversation");
+var _DotInfo = require("./DotInfo");
+var _Figure = require("./Figure");
 var _HamburgerButton = require("./HamburgerButton");
-
+var _IconList = require("./IconList");
+var _Label = require("./Label");
 var _LoadingCircle = require("./LoadingCircle");
-
 var _People = require("./People");
-
-var _Figure = require("./Figure");
-
-var _Conversation = require("./Conversation");
-
-var _CustomerStat = require("./CustomerStat");
-
+var _Popover = require("./Popover");
+var _ProgressBar = require("./ProgressBar");
 var _Quote = require("./Quote");
-
-var _ContentCard = require("./ContentCard");
-
-var _DotInfo = require("./DotInfo");
-
-var _Timestamp = require("./Timestamp");
-
-var _Shapes = require("./Shapes");
-
-var _OvalIllustration = require("./OvalIllustration");
+var _SVG = require("./SVG");
+var _SnapScroller = require("./SnapScroller");
+var _Spinner = require("./Spinner");
+var _Timestamp = require("./Timestamp");

package/dist/cjs/b/Button/Button.js

@@ -4,55 +4,43 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 var _ = require("../..");
-
-var _excluded = ["id", "className", "style", "children", "isLoading", "color", "isCompact", "isGhost", "isSimple"];
-
+var _excluded = ["id", "className", "style", "children", "isLoading", "color", "isCompact", "isGhost", "isSimple", "arrowDirection"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 // Component-level imports
-Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss"))); // Helper Definition
+Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
 
-var baseClassName = _bem.default.base;
+// Helper Definition
+var baseClassName = _exports.default.base;
 var componentClassName = 'button';
-
 var Button = _ref => {
   var {
-    id,
-    className: userClassName,
-    style,
-    children,
-    isLoading,
-    color,
-    isCompact,
-    isGhost,
-    isSimple
-  } = _ref,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
-
+      id,
+      className: userClassName,
+      style,
+      children,
+      isLoading,
+      color,
+      isCompact,
+      isGhost,
+      isSimple,
+      arrowDirection
+    } = _ref,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement("button", _extends({
     id: id,
-    className: [baseClassName, componentClassName, userClassName, "x-".concat(color), isGhost && _bem.default.modifierGhost, isCompact && _bem.default.modifierCompact, isSimple && _bem.default.modifierSimple].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, "x-".concat(color), isGhost && _exports.default.modifierGhost, isCompact && _exports.default.modifierCompact, isSimple && _exports.default.modifierSimple, arrowDirection && "arrow-".concat(arrowDirection)].filter(e => e).join(' '),
     style: style,
     type: "button"
   }, otherProps), isLoading ? /*#__PURE__*/React.createElement(_.LoadingCircle, {
@@ -62,52 +50,47 @@ var Button = _ref => {
     heightWidth: "1.15em"
   }) : children);
 };
-
 Button.propTypes = {
   /**
    * The HTML id for this element
    */
   id: _propTypes.default.string,
-
   /**
    * The HTML class names for this element
    */
   className: _propTypes.default.string,
-
   /**
    * The React-written, css properties for this element.
    */
   style: _propTypes.default.objectOf(_propTypes.default.string),
-
   /**
    *  The children JSX
    */
   children: _propTypes.default.node,
-
   /**
    * Whether the button has the ghost style
    */
   isGhost: _propTypes.default.bool,
-
   /**
    * Whether the button is compact
    */
   isCompact: _propTypes.default.bool,
-
   /**
    * Whether the button is simple (no borders, only text)
    */
   isSimple: _propTypes.default.bool,
-
   /**
    * The button color
    */
   color: _propTypes.default.string,
-
   /**
    * Button loading state
    */
-  isLoading: _propTypes.default.bool
+  isLoading: _propTypes.default.bool,
+  /**
+   * The direction of the arrow if the button has one
+   */
+  arrowDirection: _propTypes.default.string
 };
 Button.defaultProps = {
   color: 'main1'

package/dist/cjs/b/Button/index.js

@@ -9,7 +9,5 @@ Object.defineProperty(exports, "Button", {
     return _Button.default;
   }
 });
-
 var _Button = _interopRequireDefault(require("./Button"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -2,32 +2,68 @@
 
 @use "@pareto-engineering/bem";
 
-$default-padding: 1em 1em .84em;
-$compact-padding: .6em .6em .48em;
+$default-padding: .75em 1.75em;
+$compact-padding: .5em .75em;
+$default-border-radius: 3em;
 $default-color:primary;
 $font-weight:bold;
+$default-margin: .5em;
+$default-animation-time: .31s;
 
 .#{bem.$base}.button {
   background: var(--x, var(--#{$default-color}));
   border: transparent;
-  border-radius: var(--theme-border-radius);
+  border-radius: $default-border-radius;
   color: var(--on-x, var(--on-#{$default-color}));
-  font-weight: 600;
+  display: inline-flex;
+  font-family: var(--theme-default-paragraph);
+  font-weight: 400;
+  justify-content: space-between;
   padding: $default-padding;
   transition: all .25s;
 
+  &.arrow-right {
+    &::after {
+      content: "-->";
+      margin-left: $default-margin;
+      vertical-align: middle;
+    }
+
+    &:hover {
+      &::after {
+        --final-position: 50%;
+        animation: animateArrow $default-animation-time forwards;
+      }
+    }
+  }
+
+  &.arrow-left {
+    &::before {
+      content: "<--";
+      margin-right: $default-margin;
+      vertical-align: middle;
+    }
+
+    &:hover {
+      &::before {
+        --final-position: -50%;
+        animation: animateArrow $default-animation-time forwards;
+      }
+    }
+  }
+
   &:not(:disabled) {
     cursor: pointer;
 
     &:hover {
-      background: var(--light-x, var(--light-#{$default-color}));
+      background: var(--soft-x, var(--soft-#{$default-color}));
     }
+
     &:focus {
-      background: var(--dark-x, var(--dark-#{$default-color}));
+      background: var(--hard-x, var(--hard-#{$default-color}));
     }
   }
 
-
   &.#{bem.$modifier-compact} {
     padding: $compact-padding;
   }
@@ -39,23 +75,23 @@ $font-weight:bold;
 
     &:hover,
     &:focus,
-    &:disabled{
+    &:disabled {
       background: transparent;
     }
 
     &:not(:disabled) {
       &:hover {
-        border: 1px solid var(--light-x, var(--light-#{$default-color}));
-        color: var(--light-x, var(--light-#{$default-color}));
+        border: 1px solid var(--soft-x, var(--soft-#{$default-color}));
+        color: var(--soft-x, var(--soft-#{$default-color}));
       }
 
       &:focus {
-        border: 1px solid var(--dark-x, var(--dark-#{$default-color}));
-        color: var(--dark-x, var(--dark-#{$default-color}));
+        border: 1px solid var(--hard-x, var(--hard-#{$default-color}));
+        color: var(--hard-x, var(--hard-#{$default-color}));
       }
     }
 
-    &:disabled{
+    &:disabled {
       border: 1px solid var(--x, var(--#{$default-color}));
       color: var(--x, var(--#{$default-color}));
     }
@@ -65,6 +101,7 @@ $font-weight:bold;
     background: transparent;
     border: 1px solid transparent;
     color: var(--x, var(--#{$default-color}));
+    padding: 0;
 
     &:disabled,
     &:hover,
@@ -73,13 +110,13 @@ $font-weight:bold;
     }
 
     &:not(:disabled) {
-       &:hover {
-         color: var(--light-x, var(--light-#{$default-color}));
-       }
+      &:hover {
+        color: var(--soft-x, var(--soft-#{$default-color}));
+      }
 
-       &:focus {
-         color: var(--dark-x, var(--dark-#{$default-color}));
-       }
+      &:focus {
+        color: var(--hard-x, var(--hard-#{$default-color}));
+      }
     }
 
     &:disabled {
@@ -94,3 +131,12 @@ $font-weight:bold;
 }
 
 
+@keyframes animateArrow {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(var(--final-position));
+  }
+}