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

package/dist/es/a/Quote/Quote.js

@@ -2,32 +2,35 @@
 import * as React from 'react';
 import { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem'; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
 
 const baseClassName = styleNames.base;
 const componentClassName = 'quote';
+
 /**
  * This is the component description.
  */
-
-const Quote = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  source,
-  author,
-  color // ...otherProps
-
-}) => {
+const Quote = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    source,
+    author,
+    color
+    // ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("figure", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
+    style: style
+    // {...otherProps}
   }, /*#__PURE__*/React.createElement("blockquote", {
     cite: source,
     className: "blockquote uc"
@@ -37,38 +40,31 @@ const Quote = ({
     className: "figcaption"
   }, /*#__PURE__*/React.createElement("cite", null, author)));
 };
-
 Quote.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.isRequired,
-
   /**
    * A URL for the source of the quotation
    */
   source: PropTypes.string,
-
   /**
    * text representation of the source
    */
   author: PropTypes.string,
-
   /**
    * The color of the quotation text
    */

package/dist/es/a/Quote/styles.scss

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 @use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
 
 
 .#{bem.$base}.quote{

package/dist/es/a/SVG/SVG.js

@@ -1,32 +1,33 @@
-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 1.0.3 */
 import * as React from 'react';
 import { useLayoutEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem';
-import { UseSVG } from "./common"; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+import { UseSVG } from "./common";
+
+// Local Definitions
 
 const baseClassName = styleNames.base;
 const componentClassName = 'svg';
-
-const SVG = ({
-  id,
-  className: userClassName,
-  style,
-  width,
-  height,
-  viewBox,
-  preserveAspectRatio,
-  useClassName,
-  sprite,
-  target,
-  targets,
-  source,
-  strokeWidth,
-  animated,
-  ...otherProps
-}) => {
+const SVG = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    width,
+    height,
+    viewBox,
+    preserveAspectRatio,
+    useClassName,
+    sprite,
+    target,
+    targets,
+    source,
+    strokeWidth,
+    animated,
+    ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   });
@@ -51,58 +52,47 @@ const SVG = ({
     key: targetProps.target
   }))) : /*#__PURE__*/React.createElement(UseSVG, useSVGProps));
 };
-
 SVG.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.oneOfType([PropTypes.string, PropTypes.number])),
-
   /**
    * The height of the element
    */
   height: PropTypes.string,
-
   /**
    * The width of the element
    */
   width: PropTypes.string,
-
   /**
    * The viewBox property of the svg html container
    */
   viewBox: PropTypes.string,
-
   /**
    * The class to apply to the target's use tag
    */
   useClassName: PropTypes.string,
-
   /**
    *  The preserverveAspectRatio property of the svg html container
    */
   preserveAspectRatio: PropTypes.string,
-
   /**
    * The url to the sprite
    */
   sprite: PropTypes.string,
-
   /**
    * The id of the target in the sprite
    */
   target: PropTypes.string,
-
   /**
    * In case this is not a sprite but a standalone svg.
    * Not recommended here, better use Figure.
@@ -112,7 +102,6 @@ SVG.propTypes = {
    * TODO remove and also from UseSVG
    */
   source: PropTypes.string,
-
   /**
    * An array of targets
    */
@@ -122,12 +111,10 @@ SVG.propTypes = {
     stroke: PropTypes.boolean,
     strokeWidth: PropTypes.number
   })),
-
   /**
    * The SVG property stroke-width to apply in case of a single target
    */
   strokeWidth: PropTypes.number,
-
   /**
    * Whether to apply an animation class (C.anim)
    */

package/dist/es/a/SVG/common/UseSVG/UseSVG.js

@@ -1,62 +1,59 @@
 /* @pareto-engineering/generator-front 1.0.6 */
 import * as React from 'react';
 import PropTypes from 'prop-types';
+
 /**
  * This component is used internally by the `SVG` component
  * to leverage the `use` tag and read svg sprites.
  */
-
-const UseSVG = ({
-  id,
-  className: userClassName,
-  style,
-  sprite,
-  target,
-  source,
-  strokeWidth
-}) => /*#__PURE__*/React.createElement("use", {
-  className: [userClassName].filter(e => e).join(' '),
-  href: source || sprite + (target ? `#${target}` : ''),
-  style: strokeWidth ? { ...style,
-    '--sw': Number(strokeWidth)
-  } : {
-    style
-  },
-  id: id
-});
-
+const UseSVG = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    sprite,
+    target,
+    source,
+    strokeWidth
+  } = _ref;
+  return /*#__PURE__*/React.createElement("use", {
+    className: [userClassName].filter(e => e).join(' '),
+    href: source || sprite + (target ? `#${target}` : ''),
+    style: strokeWidth ? {
+      ...style,
+      '--sw': Number(strokeWidth)
+    } : {
+      style
+    },
+    id: id
+  });
+};
 UseSVG.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 url to the svg sprite, from the root of the site, for instance : `/myimage.svg`
    */
   sprite: PropTypes.string,
-
   /**
    * The target image id in the sprite
    */
   target: PropTypes.string,
-
   /**
    * The source image in case this is not a sprite
    */
   // TODO check if this works
   source: PropTypes.string,
-
   /**
    * The SVG property stroke-width
    */

package/dist/es/a/{ContentCard/ContentCard.js → SnapScroller/SnapScroller.js}

@@ -2,62 +2,58 @@
 import * as React from 'react';
 import { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem'; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
 
-import { Section } from "./common";
 const baseClassName = styleNames.base;
-const componentClassName = 'content-card';
+const componentClassName = 'snap-scroller';
+
 /**
  * This is the component description.
  */
-
-const ContentCard = ({
-  id,
-  className: userClassName,
-  style,
-  color,
-  children // messages,
-  // ...otherProps
-
-}) => {
+const SnapScroller = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    noScrollOnDesktop
+    // ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `y-${color}`, 'u1'].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, noScrollOnDesktop && 'desktop-no-scroll'].filter(e => e).join(' '),
     style: style
+    // {...otherProps}
   }, children);
 };
-
-ContentCard.propTypes = {
+SnapScroller.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),
-
   /**
-  * Base color
-  */
-  color: PropTypes.string,
-
+   *  The children JSX
+   */
+  children: PropTypes.node,
   /**
-   * The children jsx
+   * Whether to snap scroll on desktop (false will enable a flexbox)
    */
-  children: PropTypes.node
+  noScrollOnDesktop: PropTypes.bool
 };
-ContentCard.defaultProps = {
-  color: 'background2'
+SnapScroller.defaultProps = {
+  noScrollOnDesktop: false
 };
-ContentCard.Section = Section;
-export default ContentCard;
+export default SnapScroller;

package/dist/es/a/SnapScroller/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as SnapScroller } from "./SnapScroller";

package/dist/es/a/SnapScroller/styles.scss

@@ -0,0 +1,38 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+$default-spacing:var(--spacing, var(--u));
+
+.#{bem.$base}.snap-scroller {
+  display: flex;
+  -ms-overflow-style: none; /* for Internet Explorer, Edge */
+  overflow-x: auto;
+  scroll-padding: calc(#{$default-spacing} *2);
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+
+
+  > * {
+    &:first-child {
+      margin-left: $default-spacing;
+    }
+    display: inline-block;
+    margin-right: $default-spacing;
+    scroll-snap-align: start;
+  }
+
+
+  @include mixins.media($from:$sm-md) {
+    &.desktop-no-scroll {
+      overflow: auto;
+      -ms-overflow-style: unset; /* for Internet Explorer, Edge */
+      scroll-snap-type: none;
+      scrollbar-width: unset;
+    }
+  }
+}
+
+

package/dist/es/a/Spinner/Spinner.js

@@ -2,50 +2,49 @@
 import * as React from 'react';
 import { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem'; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
 
 const baseClassName = styleNames.base;
 const componentClassName = 'spinner';
+
 /**
  * This is the component description.
  */
-
-const Spinner = ({
-  id,
-  className: userClassName,
-  style,
-  color // ...otherProps
-
-}) => {
+const Spinner = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    color
+    // ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
+    style: style
+    // {...otherProps}
   }, /*#__PURE__*/React.createElement("div", {
     className: "loader"
   }));
 };
-
 Spinner.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 color of the spinner
    */

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";