@pareto-engineering/design-system 3.0.0-alpha.29 → 4.0.0-alpha.13

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

@@ -1,9 +1,11 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
+/*
+
 @use "@pareto-engineering/bem";
 
-.#{bem.$base}.logo {
+.{bem.$base}.logo {
 
-}
+} */
 
 

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

@@ -1,7 +1,7 @@
 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.0 */
 import * as React from 'react';
-import { useLayoutEffect, useEffect } from 'react';
+import { useInsertionEffect, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -19,18 +19,18 @@ const componentClassName = 'page';
  * It uses **the color provided** by `x`
  *
  */
-const Page = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    children,
-    itemType,
-    as: Wrapper,
-    helmetProps,
-    ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const Page = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  itemType,
+  as: Wrapper,
+  helmetProps,
+  Background,
+  ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   useEffect(() => {
@@ -54,7 +54,9 @@ const Page = _ref => {
   }, otherProps), itemType && /*#__PURE__*/React.createElement("meta", {
     itemProp: "mainEntityOfPage",
     content: helmetProps?.canonical
-  }), helmetProps && /*#__PURE__*/React.createElement(PageHelmet, helmetProps), children));
+  }), helmetProps && /*#__PURE__*/React.createElement(PageHelmet, helmetProps), children, Background && /*#__PURE__*/React.createElement(Background, {
+    className: "background"
+  })));
 };
 Page.propTypes = {
   /**
@@ -84,7 +86,11 @@ Page.propTypes = {
   /**
   * The props to pass to `Page.Helmet`. Refer to the corresponding section of the docs.
   */
-  helmetProps: PropTypes.objectOf(PropTypes.string)
+  helmetProps: PropTypes.objectOf(PropTypes.string),
+  /**
+   * The component to use as background
+   */
+  Background: PropTypes.node
 };
 Page.defaultProps = {
   as: 'main'

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

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useApp } from "../../../../a";
 const helmetMap = [{
   variables: ['robots'],
@@ -101,19 +101,17 @@ const helmetMap = [{
     key: "og_url"
   })
 }];
-const PageHelmet = _ref => {
-  let {
-    ...props
-  } = _ref;
+const PageHelmet = ({
+  ...props
+}) => {
   // const intl = useIntl()
   const context = useApp();
   const HelmetContent = useMemo(() => helmetMap.reduce( /* eslint-disable no-unused-vars -- TODO add test or ssr mode */
-  (a, _ref2) => {
-    let {
-      variables,
-      render,
-      test
-    } = _ref2;
+  (a, {
+    variables,
+    render,
+    test
+  }) => {
     /* eslint-enable no-unused-vars */
     let current;
     let content = '';

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

@@ -8,21 +8,22 @@ import styleNames from '@pareto-engineering/bem/exports';
 import usePage from "../../usePage";
 const baseClassName = styleNames.base;
 const componentClassName = 'section';
-const Section = _ref => {
-  let {
-    id: userId,
-    className: userClassName,
-    style,
-    children,
-    ...otherProps
-  } = _ref;
+const Section = ({
+  id: userId,
+  className: userClassName,
+  style,
+  children,
+  spaced,
+  padded,
+  ...otherProps
+}) => {
   const {
     id: pageId
   } = usePage();
   const sectionId = userId && `${pageId}_${userId}`;
   return /*#__PURE__*/React.createElement("section", _extends({
     id: sectionId,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, spaced && styleNames.modifierSpaced, padded && 'padded', 'grid'].filter(e => e).join(' '),
     style: style
   }, otherProps), children);
 };
@@ -39,12 +40,20 @@ Section.propTypes = {
    * The React-written, css properties for this element.
    */
   style: PropTypes.objectOf(PropTypes.string),
+  /**
+   *  Whether the section contains the theme spacing
+   */
+  spaced: PropTypes.bool,
+  /**
+   *  Whether the section contains the theme spacing
+   */
+  padded: PropTypes.bool,
   /**
    *  The children JSX
    */
   children: PropTypes.node
 };
 Section.defaultProps = {
-  // someProp:false
+  padded: true
 };
 export default Section;

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

@@ -1,16 +1,38 @@
 /* @pareto-engineering/generator-front 1.0.0 */
+/* stylelint-disable selector-max-universal -- exception */
 
 @use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
 
+.#{bem.$base}.page {
+  position: relative;
 
-.#{bem.$base}.page{
-    .#{bem.$base}.section {
-        position: relative;
+  > .background {
+    position: fixed;
+    z-index: -1;
+  }
 
-        > *:not(:last-child) {
-            z-index: 1;
-        }
+  > .#{bem.$base}.section {
+    position: relative;
+
+    &.padded {
+      padding-left: var(--gap);
+      padding-right: var(--gap);
+    }
+
+    > *:not(:last-child) {
+      z-index: 1;
     }
-}
 
+    &.#{bem.$modifier-spaced} {
+      padding-bottom: var(--theme-default-section-spacing);
+      padding-top: var(--theme-default-section-spacing);
 
+      @include mixins.media($from: $sm-md) {
+        padding-bottom: var(--theme-desktop-section-spacing);
+        padding-top: var(--theme-desktop-section-spacing);
+      }
+    }
+  }
+}

package/dist/es/b/SocialMediaButton/SocialMediaButton.js

@@ -1,7 +1,7 @@
 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.12 */
 import * as React from 'react';
-import { useLayoutEffect } from 'react';
+import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useApp } from "../../a";
@@ -34,20 +34,19 @@ const defaultsMap = {
  * This component takes `y` as the default color and `x` as the hover color.
  * This components needs to be wrapped within a `AppContextProvider`.
  */
-const SocialMediaButton = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    type,
-    icon,
-    link,
-    color,
-    isTransparent,
-    ...otherProps
-  } = _ref;
+const SocialMediaButton = ({
+  id,
+  className: userClassName,
+  style,
+  type,
+  icon,
+  link,
+  color,
+  isTransparent,
+  ...otherProps
+}) => {
   const applicationContext = useApp();
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const content = type && defaultsMap[type];

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

@@ -9,37 +9,23 @@ $mobile-dimensions: 2.75em;
 
 .#{bem.$base}.social-media-button {
   appearance: none;
-  background: var(--y, var(--heading));
   border: 0;
-  border-radius: 3em;
-  color: var(--on-y, var(--on-heading));
   cursor: pointer;
   font-family: "icons", sans-serif;
-  height: $default-dimensions;
   transition: all .3s;
-  width: $default-dimensions;
-
-  @include mixins.media($to:$sm-md) {
-    height: $mobile-dimensions;
-    width: $mobile-dimensions;
-  }
-
-  &:hover {
-    background: var(--x);
-  }
 
   &:focus {
     background: var(--soft-x);
   }
 
-  &.#{bem.$modifier-transparent} {
+  &.#{bem.$modifier-clear} {
     background: transparent;
     color: var(--y, var(--heading));
 
     &:hover {
       color: var(--x);
     }
-  
+
     &:focus {
       color: var(--soft-x);
     }

package/dist/es/b/ThemeSelector/ThemeSelector.js

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect, useCallback } from 'react';
+import { useInsertionEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useApp } from "../../a";
@@ -13,21 +13,20 @@ const componentClassName = 'theme-selector';
 /**
  * This is the component description.
  */
-const ThemeSelector = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    // children
+const ThemeSelector = ({
+  id,
+  className: userClassName,
+  style,
+  // children
 
-    themes,
-    iconMap
-  } = _ref;
+  themes,
+  iconMap
+}) => {
   const {
     userTheme,
     setPreferredTheme
   } = useApp();
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const loopThemes = useCallback(() => {

package/dist/es/b/Title/Title.js

@@ -1,35 +1,38 @@
 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.3.1 */
 import * as React from 'react';
+import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 
 // Package-level Imports
 import styleNames from '@pareto-engineering/bem/exports';
 
 // Component-level imports
-import("./styles.scss");
+// import('./styles.scss')
 
 // Helper Definition
 const baseClassName = styleNames.base;
 const componentClassName = 'title';
-const Title = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    // children,
-    heading,
-    headingAs: HeadingWrapper,
-    headingClassName,
-    headingStyle,
-    headingProps,
-    subtitle,
-    subtitleAs: SubtitleWrapper,
-    subtitleClassName,
-    subtitleStyle,
-    subtitleProps
-    // ...otherProps
-  } = _ref;
+const Title = ({
+  id,
+  className: userClassName,
+  style,
+  // children,
+  heading,
+  headingAs: HeadingWrapper,
+  headingClassName,
+  headingStyle,
+  headingProps,
+  subtitle,
+  subtitleAs: SubtitleWrapper,
+  subtitleClassName,
+  subtitleStyle,
+  subtitleProps
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
+    import("./styles.scss");
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),

package/dist/es/b/index.js

@@ -3,4 +3,5 @@ export { Logo } from "./Logo";
 export { Page } from "./Page";
 export { SocialMediaButton } from "./SocialMediaButton";
 export { ThemeSelector } from "./ThemeSelector";
-export { Title } from "./Title";
+export { Title } from "./Title";
+export { Card } from "./Card";

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

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect, useReducer } from 'react';
+import { useInsertionEffect, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import styleNames from '@pareto-engineering/bem/exports';
@@ -38,18 +38,17 @@ const reducer = (state, action) => {
  * Colors :
  * `y` : the background of the content
  */
-const ContentSlides = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    children,
-    steps,
-    simple,
-    isDebug
-    // ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const ContentSlides = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  steps,
+  simple,
+  isDebug
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const history = useHistory();
@@ -62,8 +61,7 @@ const ContentSlides = _ref => {
     isFirstStep,
     isLastStep
   } = state;
-  const setNextStepIndex = function () {
-    let step = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+  const setNextStepIndex = (step = 1) => {
     if (!isLastStep) {
       dispatch({
         type: 'SET_STEP_INDEX',
@@ -71,8 +69,7 @@ const ContentSlides = _ref => {
       });
     }
   };
-  const setPrevStepIndex = function () {
-    let step = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+  const setPrevStepIndex = (step = 1) => {
     if (!isFirstStep) {
       dispatch({
         type: 'SET_STEP_INDEX',
@@ -100,7 +97,7 @@ const ContentSlides = _ref => {
       }
     });
   };
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     setCurrentStep(currentStepIndex);
   }, [currentStepIndex]);
   return /*#__PURE__*/React.createElement(ContentSlidesContext.Provider, {

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

@@ -15,18 +15,17 @@ const componentClassName = 'horizontal-menu';
 /**
  * This is the component description.
  */
-const HorizontalMenu = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    logoColor,
-    hideBackIcon,
-    stepsBackwards,
-    customPrevStep,
-    color
-    // ...otherProps
-  } = _ref;
+const HorizontalMenu = ({
+  id,
+  className: userClassName,
+  style,
+  logoColor,
+  hideBackIcon,
+  stepsBackwards,
+  customPrevStep,
+  color
+  // ...otherProps
+}) => {
   const {
     setPrevStepIndex,
     // setNextStepIndex,

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

@@ -11,21 +11,20 @@ const componentClassName = 'navigator';
 /**
  * This is the component description.
  */
-const Navigator = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    canMoveForward,
-    previousColor,
-    nextColor,
-    stepsForward,
-    stepsBackwards,
-    customPrevStep,
-    customNextStep,
-    isLoading
-    // ...otherProps
-  } = _ref;
+const Navigator = ({
+  id,
+  className: userClassName,
+  style,
+  canMoveForward,
+  previousColor,
+  nextColor,
+  stepsForward,
+  stepsBackwards,
+  customPrevStep,
+  customNextStep,
+  isLoading
+  // ...otherProps
+}) => {
   const {
     setPrevStepIndex,
     setNextStepIndex,

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

@@ -15,15 +15,14 @@ const componentClassName = 'sidebar';
 /**
  * This is the component description.
  */
-const Sidebar = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    header,
-    footer
-    // ...otherProps
-  } = _ref;
+const Sidebar = ({
+  id,
+  className: userClassName,
+  style,
+  header,
+  footer
+  // ...otherProps
+}) => {
   const {
     steps,
     // setPrevStepIndex,

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

@@ -13,15 +13,14 @@ const componentClassName = 'slide';
 /**
  * This is the component description.
  */
-const Slide = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    children,
-    index
-    // ...otherProps
-  } = _ref;
+const Slide = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  index
+  // ...otherProps
+}) => {
   const {
     currentStepIndex
   } = useContentSlides();

package/dist/es/c/ContentSlides/styles.scss

@@ -1,4 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable selector-max-compound-selectors -- Required here  */
+/* stylelint-disable max-nesting-depth -- Required here  */
 
 @use "@pareto-engineering/bem";
 @use "@pareto-engineering/styles/src/mixins";
@@ -45,7 +47,6 @@ $mobile-content-margin:6em;
       border-top: $default-border;
     }
 
-    /* stylelint-disable selector-max-compound-selectors -- Required here  */
     .#{bem.$element-content} {
       .icon-list {
         .#{bem.$element-item} {
@@ -55,7 +56,6 @@ $mobile-content-margin:6em;
         }
       }
     }
-    /* stylelint-enable selector-max-compound-selectors */
   }
 
 
@@ -167,8 +167,6 @@ $mobile-content-margin:6em;
           width: 100%;
         } */
 
-        /* stylelint-disable selector-max-compound-selectors -- Required here  */
-        /* stylelint-disable max-nesting-depth -- Required here  */
         /* stylelint-disable scss/media-feature-value-dollar-variable -- For orientation mq */
         .wrapper {
           display: flex;

package/dist/es/c/Modal/Modal.js

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect } from 'react';
+import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { ModalHeader } from "./common";
@@ -13,18 +13,17 @@ const componentClassName = 'modal';
 /**
  * This is the component description.
  */
-const Modal = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    children,
-    title,
-    color,
-    close
-    // ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const Modal = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  title,
+  color,
+  close
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {