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

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/{c/SiteFooter/SiteFooter.js → a/SnapScroller/SnapScroller.js}

@@ -2,55 +2,58 @@
 import * as React from 'react';
 import { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem';
-import { Section } from "./common"; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
 
 const baseClassName = styleNames.base;
-const componentClassName = 'site-footer';
+const componentClassName = 'snap-scroller';
+
 /**
  * This is the component description.
  */
-
-const SiteFooter = ({
-  id,
-  className: userClassName,
-  style,
-  children // ...otherProps
-
-}) => {
+const SnapScroller = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    noScrollOnDesktop
+    // ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
-  return /*#__PURE__*/React.createElement("footer", {
+  return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
+    className: [baseClassName, componentClassName, userClassName, noScrollOnDesktop && 'desktop-no-scroll'].filter(e => e).join(' '),
+    style: style
+    // {...otherProps}
   }, children);
 };
-
-SiteFooter.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),
-
   /**
    *  The children JSX
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+  /**
+   * Whether to snap scroll on desktop (false will enable a flexbox)
+   */
+  noScrollOnDesktop: PropTypes.bool
 };
-SiteFooter.defaultProps = {// someProp:false
+SnapScroller.defaultProps = {
+  noScrollOnDesktop: false
 };
-SiteFooter.Section = Section;
-export default SiteFooter;
+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/TeamInfo/TeamInfo.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 = 'team-info';
+
 /**
  * This is the component description.
  */
-
-const SiteTeamInfo = ({
-  id,
-  className: userClassName,
-  style,
-  description,
-  img,
-  name,
-  role // ...otherProps
-
-}) => {
+const SiteTeamInfo = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    description,
+    img,
+    name,
+    role
+    // ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, 'u1'].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
+    style: style
+    // {...otherProps}
   }, /*#__PURE__*/React.createElement("p", {
     className: "description s-1 md-s0"
   }, description), /*#__PURE__*/React.createElement("div", {
@@ -44,43 +47,37 @@ const SiteTeamInfo = ({
     className: "role s-2"
   }, role))));
 };
-
 SiteTeamInfo.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 team description
    */
   description: PropTypes.string.isRequired,
-
   /**
    *  The team member image
    */
   img: PropTypes.string.isRequired,
-
   /**
    *  The team member name
    */
   name: PropTypes.string.isRequired,
-
   /**
    *  The team member role
    */
   role: PropTypes.string.isRequired
 };
-SiteTeamInfo.defaultProps = {// someProp:false
+SiteTeamInfo.defaultProps = {
+  // someProp:false
 };
 export default SiteTeamInfo;

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

@@ -1,8 +1,8 @@
 /* @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 *;
 
 $team-info-padding:var(--u);
 $img-height-width: 3.5em;
@@ -14,7 +14,7 @@ $box-shadow:0 .45em 1em 0 var(--background1);
 
 .#{bem.$base}.team-info {
   align-items: flex-start;
-  background: var(--light-y, var(--light-background1));
+  background: var(--soft-y, var(--soft-background1));
   box-shadow: $box-shadow;
   display: flex;
   flex-direction: column;