@pareto-engineering/design-system 2.0.0-alpha.8 → 3.0.0-alpha.18

package/dist/es/a/Timestamp/Timestamp.js

@@ -2,29 +2,32 @@
 import * as React from 'react';
 import { useLayoutEffect, useMemo, useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem';
-import { format, differenceInDays, formatDistance, formatRelative } from 'date-fns'; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+import { format, differenceInDays, formatDistance, formatRelative } from 'date-fns';
+
+// Local Definitions
 
 const baseClassName = styleNames.base;
 const componentClassName = 'timestamp';
+
 /**
  * This is the component description.
  */
-
-const Timestamp = ({
-  id,
-  className: userClassName,
-  style,
-  time,
-  prefix,
-  enabledFormats,
-  distanceMaxDays,
-  relativeMaxDays,
-  dateFormat,
-  locale,
-  // ...otherProps
-  as: Element
-}) => {
+const Timestamp = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    time,
+    prefix,
+    enabledFormats,
+    distanceMaxDays,
+    relativeMaxDays,
+    dateFormat,
+    locale,
+    // ...otherProps
+    as: Element
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
@@ -41,8 +44,8 @@ const Timestamp = ({
     }) : format(new Date(unix), dateFormat)
   }), []);
   const onClick = useCallback(e => {
-    e.persist(); // eslint-disable-next-line no-shadow
-
+    e.persist();
+    // eslint-disable-next-line no-shadow
     const currentIndex = enabledFormats.findIndex(e => e === currentDisplay);
     const nextIndex = (currentIndex + 1) % enabledFormats.length;
     setCurrentDisplay(enabledFormats[nextIndex]);
@@ -51,63 +54,53 @@ const Timestamp = ({
   return /*#__PURE__*/React.createElement(Element, {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style // {...otherProps}
+    style: style
+    // {...otherProps}
     ,
     onClick: enabledFormats.length > 1 ? onClick : undefined
   }, prefix && prefix, prefix && ' ', formatMap[currentDisplay](Number(time)));
 };
-
 Timestamp.propTypes = {
   /**
    * The HTML id for this element
    */
   id: PropTypes.string,
-
   /**
    * The HTML class names for this element
    */
   className: PropTypes.string,
-
   /**
    * The React-written, css properties for this element.
    */
   style: PropTypes.objectOf(PropTypes.string),
-
   /**
    *  The children JSX
    */
   prefix: PropTypes.node,
-
   /**
     * Which html tag to use
     */
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-
   /**
     * Formats
     */
   enabledFormats: PropTypes.arrayOf(PropTypes.oneOf(['unix', 'date', 'distance', 'relative'])),
-
   /**
    * How many days to display distance before reverting to unix display
    */
   distanceMaxDays: PropTypes.number,
-
   /**
    * How many days to display distance before reverting to unix display
    */
   relativeMaxDays: PropTypes.number,
-
   /**
     * Unix Format Read https://date-fns.org/v2.16.1/docs/format for options
     */
   dateFormat: PropTypes.string,
-
   /**
     * The time to display
     */
   time: PropTypes.oneOfType([PropTypes.object, PropTypes.number]).isRequired,
-
   /**
     * A Date-DNS locale object. Will default to english.
     */

package/dist/es/a/index.js

@@ -1,22 +1,18 @@
-export { SVG } from "./SVG";
-export { DashboardNavbar } from "./DashboardNavbar";
-export { IconList } from "./IconList";
-export { SiteContext, SiteContextProvider, useSite, useTheme } from "./SiteContext";
-export { ProgressBar } from "./ProgressBar";
-export { TeamInfo } from "./TeamInfo";
 export { AnimatedCounter } from "./AnimatedCounter";
-export { CustomerLogos } from "./CustomerLogos";
-export { FeaturedOn } from "./FeaturedOn";
-export { Spinner } from "./Spinner";
+export { AppContext, AppContextProvider, useApp, useTheme } from "./AppContext";
+export { ContentTree } from "./ContentTree";
+export { Conversation } from "./Conversation";
+export { DotInfo } from "./DotInfo";
+export { Figure } from "./Figure";
 export { HamburgerButton } from "./HamburgerButton";
+export { IconList } from "./IconList";
+export { Label } from "./Label";
 export { LoadingCircle } from "./LoadingCircle";
 export { People } from "./People";
-export { Figure } from "./Figure";
-export { Conversation } from "./Conversation";
-export { CustomerStat } from "./CustomerStat";
+export { Popover } from "./Popover";
+export { ProgressBar } from "./ProgressBar";
 export { Quote } from "./Quote";
-export { ContentCard } from "./ContentCard";
-export { DotInfo } from "./DotInfo";
-export { Timestamp } from "./Timestamp";
-export { Shapes } from "./Shapes";
-export { OvalIllustration } from "./OvalIllustration";
+export { SVG } from "./SVG";
+export { SnapScroller } from "./SnapScroller";
+export { Spinner } from "./Spinner";
+export { Timestamp } from "./Timestamp";

package/dist/es/b/Button/Button.js

@@ -1,36 +1,38 @@
-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); }
 /* @pareto-engineering/generator-front 0.2.4 */
 import * as React from 'react';
 import { useLayoutEffect } from 'react';
-import PropTypes from 'prop-types'; // Package-level Imports
-
-import styleNames from '@pareto-engineering/bem';
-import { LoadingCircle } from "../.."; // Component-level imports
+import PropTypes from 'prop-types';
 
-import("./styles.scss"); // Helper Definition
+// Package-level Imports
+import styleNames from '@pareto-engineering/bem/exports';
+import { LoadingCircle } from "../..";
+// Component-level imports
+import("./styles.scss");
 
+// Helper Definition
 const baseClassName = styleNames.base;
 const componentClassName = 'button';
-
-const Button = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  isLoading,
-  color,
-  isCompact,
-  isGhost,
-  isSimple,
-  ...otherProps
-}) => {
+const Button = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    isLoading,
+    color,
+    isCompact,
+    isGhost,
+    isSimple,
+    arrowDirection,
+    ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("button", _extends({
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`, isGhost && styleNames.modifierGhost, isCompact && styleNames.modifierCompact, isSimple && styleNames.modifierSimple].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`, isGhost && styleNames.modifierGhost, isCompact && styleNames.modifierCompact, isSimple && styleNames.modifierSimple, arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
     style: style,
     type: "button"
   }, otherProps), isLoading ? /*#__PURE__*/React.createElement(LoadingCircle, {
@@ -40,52 +42,47 @@ const Button = ({
     heightWidth: "1.15em"
   }) : children);
 };
-
 Button.propTypes = {
   /**
    * The HTML id for this element
    */
   id: PropTypes.string,
-
   /**
    * The HTML class names for this element
    */
   className: PropTypes.string,
-
   /**
    * The React-written, css properties for this element.
    */
   style: PropTypes.objectOf(PropTypes.string),
-
   /**
    *  The children JSX
    */
   children: PropTypes.node,
-
   /**
    * Whether the button has the ghost style
    */
   isGhost: PropTypes.bool,
-
   /**
    * Whether the button is compact
    */
   isCompact: PropTypes.bool,
-
   /**
    * Whether the button is simple (no borders, only text)
    */
   isSimple: PropTypes.bool,
-
   /**
    * The button color
    */
   color: PropTypes.string,
-
   /**
    * Button loading state
    */
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  /**
+   * The direction of the arrow if the button has one
+   */
+  arrowDirection: PropTypes.string
 };
 Button.defaultProps = {
   color: 'main1'

package/dist/es/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));
+  }
+}

package/dist/es/b/Card/Card.js

@@ -1,49 +1,51 @@
 /* @pareto-engineering/generator-front 0.2.4 */
 import * as React from 'react';
-import PropTypes from 'prop-types'; // Package-level Imports
+import PropTypes from 'prop-types';
 
-import styleNames from '@pareto-engineering/bem'; // Component-level imports
+// Package-level Imports
+import styleNames from '@pareto-engineering/bem/exports';
 
+// Component-level imports
 import { Group } from "./common";
-import("./styles.scss"); // Helper Definition
+import("./styles.scss");
 
+// Helper Definition
 const baseClassName = styleNames.base;
 const componentClassName = 'card';
-
-const Card = ({
-  id,
-  className: userClassName,
-  style,
-  children // ...otherProps
-
-}) => /*#__PURE__*/React.createElement("div", {
-  id: id,
-  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-  style: style
-}, children);
-
+const Card = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children
+    // ...otherProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, children);
+};
 Card.propTypes = {
   /**
    * The HTML id for this element
    */
   id: PropTypes.string,
-
   /**
    * The HTML class names for this element
    */
   className: PropTypes.string,
-
   /**
    * The React-written, css properties for this element.
    */
   style: PropTypes.objectOf(PropTypes.string),
-
   /**
    *  The children JSX
    */
   children: PropTypes.node
 };
-Card.defaultProps = {// someProp:false
+Card.defaultProps = {
+  // someProp:false
 };
 Card.Group = Group;
 export default Card;

package/dist/es/b/Card/common/Group/Group.js

@@ -1,53 +1,54 @@
 /* @pareto-engineering/generator-front 0.2.4 */
 import * as React from 'react';
-import PropTypes from 'prop-types'; // Package-level Imports
+import PropTypes from 'prop-types';
 
-import styleNames from '@pareto-engineering/bem'; // Component-level imports
+// Package-level Imports
+import styleNames from '@pareto-engineering/bem/exports';
 
-import("./styles.scss"); // Helper Definition
+// Component-level imports
+import("./styles.scss");
 
+// Helper Definition
 const baseClassName = styleNames.base;
 const componentClassName = 'card-group';
-
-const Group = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  isGhost // ...otherProps
-
-}) => /*#__PURE__*/React.createElement("div", {
-  id: id,
-  className: [baseClassName, componentClassName, userClassName, isGhost && styleNames.modifierGhost].filter(e => e).join(' '),
-  style: style
-}, children);
-
+const Group = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    isGhost
+    // ...otherProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, isGhost && styleNames.modifierGhost].filter(e => e).join(' '),
+    style: style
+  }, children);
+};
 Group.propTypes = {
   /**
    * The HTML id for this element
    */
   id: PropTypes.string,
-
   /**
    * The HTML class names for this element
    */
   className: PropTypes.string,
-
   /**
    * The React-written, css properties for this element.
    */
   style: PropTypes.objectOf(PropTypes.string),
-
   /**
    *  The children JSX
    */
   children: PropTypes.node,
-
   /**
    * Whether the button has the ghost style
    */
   isGhost: PropTypes.bool
 };
-Group.defaultProps = {// someProp:false
+Group.defaultProps = {
+  // someProp:false
 };
 export default Group;

package/dist/es/b/Card/common/Group/styles.scss

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 0.2.4 */
 
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
 @use "@pareto-engineering/bem" ;
 
 $separator-width:2px;