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

package/src/stories/c/ContentSlides.stories.jsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import {
   ContentSlides,
   SiteContextProvider,
+  Shapes,
   useContentSlides,
   Title,
   Logo,
@@ -74,7 +75,7 @@ export const Base = () => {
 
     return (
       <div className={`ui-${userTheme}`} style={{ height: '100%' }}>
-        <ContentSlides className="y-background1" steps={steps}>
+        <ContentSlides className="y-background1 b-dark-y" steps={steps}>
           <ContentSlides.Sidebar
             header={(
               <Logo color="paragraph" />
@@ -341,7 +342,158 @@ export const Simple = () => {
     )
   }
   return (
-    <ContentSlides className="y-background1" steps={steps} simple>
+    <ContentSlides className="y-background1 b-dark-y" steps={steps} simple>
+      <Main />
+    </ContentSlides>
+  )
+}
+
+export const WithBackgroundShape = () => {
+  const steps = [
+    {
+      id      :'welcome',
+      title   :'Welcome',
+      progress:40,
+      location:'welcome',
+    },
+    {
+      id      :'plan',
+      title   :'Choose your plan',
+      progress:60,
+      location:'select-plan',
+    },
+    {
+      id      :'details',
+      title   :'Personal details',
+      progress:70,
+      location:'personal-details',
+    },
+    {
+      id      :'payment',
+      title   :'Payment',
+      progress:90,
+      location:'payment',
+    },
+  ]
+
+  const Main = () => {
+    const { isLastStep } = useContentSlides()
+
+    return (
+      <>
+        <ContentSlides.HorizontalMenu hideBackIcon={isLastStep} />
+        {' '}
+        <main>
+          <ContentSlides.Slide
+            index={0}
+          >
+            <Title
+              heading="Welcome"
+              headingAs="h1"
+              headingClassName="small"
+              subtitle="Welcome to this site. We hope you will have an amazing experience here."
+            />
+            <ContentSlides.Navigator />
+          </ContentSlides.Slide
+      >
+          <ContentSlides.Slide
+            index={1}
+          >
+            <Title
+              heading="Part 2"
+              headingAs="h1"
+              headingClassName="small"
+              subtitle="Welcome to this site. We hope you will have an amazing experience here."
+            />
+            <p>
+              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
+              non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
+              enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
+              Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
+              porta placerat leo.
+              Donec scelerisque enim risus, in pharetra purus fringilla eu.
+              Cras placerat ac enim viverra rhoncus.
+              Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
+              Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
+              Nullam vel porttitor mi, ut vestibulum arcu.
+              {' '}
+            </p>
+            <p>
+              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
+              non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
+              enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
+              Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
+              porta placerat leo.
+              Donec scelerisque enim risus, in pharetra purus fringilla eu.
+              Cras placerat ac enim viverra rhoncus.
+              Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
+              Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
+              Nullam vel porttitor mi, ut vestibulum arcu.
+              {' '}
+            </p>
+            <p>
+              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
+              non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
+              enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
+              Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
+              porta placerat leo.
+              Donec scelerisque enim risus, in pharetra purus fringilla eu.
+              Cras placerat ac enim viverra rhoncus.
+              Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
+              Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
+              Nullam vel porttitor mi, ut vestibulum arcu.
+              {' '}
+            </p>
+            <p>
+              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
+              non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
+              enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
+              Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
+              porta placerat leo.
+              Donec scelerisque enim risus, in pharetra purus fringilla eu.
+              Cras placerat ac enim viverra rhoncus.
+              Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
+              Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
+              Nullam vel porttitor mi, ut vestibulum arcu.
+              {' '}
+            </p>
+
+            <ContentSlides.Navigator />
+          </ContentSlides.Slide>
+          <ContentSlides.Slide
+            index={2}
+          >
+            <Title
+              heading="Part 3"
+              headingAs="h1"
+              headingClassName="small"
+              subtitle="Welcome to this site. We hope you will have an amazing experience here."
+            />
+            <ContentSlides.Navigator />
+          </ContentSlides.Slide>
+          <ContentSlides.Slide
+            index={3}
+          >
+            <Title
+              heading="Part 4"
+              headingAs="h1"
+              headingClassName="small"
+              subtitle="Welcome to this site. We hope you will have an amazing experience here."
+            />
+            <ContentSlides.Navigator />
+          </ContentSlides.Slide>
+        </main>
+      </>
+    )
+  }
+  return (
+    <ContentSlides className="y-background4 b-light-y" steps={steps} simple>
+      <Shapes
+        height="65em"
+        verticalAlign="center"
+        horizontalAlign="flex-start"
+        shape="spiral"
+      />
       <Main />
     </ContentSlides>
   )

package/src/ui/a/SnapScroller/SnapScroller.jsx

@@ -0,0 +1,83 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useLayoutEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'snap-scroller'
+
+/**
+ * This is the component description.
+ */
+const SnapScroller = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  noScrollOnDesktop,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+        noScrollOnDesktop && 'desktop-no-scroll',
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      {children}
+    </div>
+  )
+}
+
+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,
+
+  /**
+   * Whether to snap scroll on desktop (false will enable a flexbox)
+   */
+  noScrollOnDesktop:PropTypes.bool,
+}
+
+SnapScroller.defaultProps = {
+  noScrollOnDesktop:false,
+}
+
+export default SnapScroller

package/src/ui/a/SnapScroller/index.js

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

package/src/ui/a/SnapScroller/styles.scss

@@ -0,0 +1,38 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/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/src/ui/a/index.js

@@ -25,4 +25,5 @@ export { DotInfo } from './DotInfo'
 export { Timestamp } from './Timestamp'
 export { Shapes } from './Shapes'
 export { OvalIllustration } from './OvalIllustration'
+export { SnapScroller } from './SnapScroller'
 export { BackgroundGradient } from './BackgroundGradient'

package/src/ui/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.jsx

@@ -65,13 +65,13 @@ const HorizontalMenu = ({
         <div className="left">
           {(!isFirstStep && !hideBackIcon) && (
           <span
-            className="f-icons pointer"
+            className="prev-button pointer"
             onClick={mobilePreviousStep}
             role="button"
             onKeyDown={mobilePreviousStep}
             tabIndex={0}
           >
-            H
+            {'<--'}
           </span>
           )}
         </div>
@@ -131,7 +131,7 @@ HorizontalMenu.propTypes = {
 }
 
 HorizontalMenu.defaultProps = {
-  logoColor     :'main2',
+  logoColor     :'paragraph',
   stepsBackwards:1,
 }
 

package/src/ui/c/ContentSlides/styles.scss

@@ -14,7 +14,7 @@ $class-navigator:navigator;
 $default-sidebar-width:minmax(250px, 330px);
 $default-border:none;//2px solid var(--grid);
 $default-border-radius:var(--theme-border-radius);
-$default-content-background:var(--y);
+$default-content-background: var(--background1);
 $default-padding:var(--u);
 
 $mobile-content-margin:6em;
@@ -61,7 +61,6 @@ $mobile-content-margin:6em;
 
   //.#{$class-main-container} {
   main {
-    background: var(--dark-y);
     overflow: hidden;
     position: relative;
 
@@ -79,7 +78,7 @@ $mobile-content-margin:6em;
         .#{bem.$element-content} {
           background: $default-content-background;
 
-          border: $default-border;
+          border: var(--theme-border);
           border-radius: $default-border-radius;
           max-width: 600px;
           padding: $default-padding;
@@ -108,8 +107,9 @@ $mobile-content-margin:6em;
 
   .#{$class-horizontal-menu} {
     background: $default-content-background;
-    border-bottom: $default-border;
+    border-bottom: var(--theme-border);
     color: var(--heading);
+    z-index: 1;
 
     .#{bem.$element-content} {
       display: grid;
@@ -124,6 +124,11 @@ $mobile-content-margin:6em;
 
       .left {
         text-align: left;
+
+        .prev-button {
+          font-family: var(--theme-default-paragraph);
+          font-size: calc(var(--s2) * 1em);
+        }
       }
 
       .right {
@@ -210,6 +215,7 @@ $mobile-content-margin:6em;
 
               .next {
                 flex-grow: 1;
+                justify-content: flex-end;
               }
             }
           }

package/dist/cjs/a/GradientBackground/GradientBackground.js

@@ -1,140 +0,0 @@
-"use strict";
-
-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"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-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; }
-
-// Local Definitions
-var baseClassName = _bem.default.base;
-var componentClassName = 'gradient-background';
-/**
- * This is the component description.
- */
-
-var GradientBackground = _ref => {
-  var {
-    id,
-    className: userClassName,
-    style,
-    pin,
-    shape,
-    height,
-    width // ...otherProps
-
-  } = _ref;
-  (0, React.useLayoutEffect)(() => {
-    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      '--pin': pin,
-      '--height': height,
-      '--width': width
-    }) // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "shapes"
-  }, shape === 'triangle' && /*#__PURE__*/React.createElement("div", {
-    className: "triangle"
-  }), shape === 'half-ellipses' && /*#__PURE__*/React.createElement("div", {
-    className: "half-ellipses"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "up"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "down"
-  })), shape === 'ellipse' && /*#__PURE__*/React.createElement("div", {
-    className: "ellipse"
-  }), shape === 'diamonds' && /*#__PURE__*/React.createElement("div", {
-    className: "diamonds"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "top-right"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "bottom-left"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "bottom-right"
-  })), shape === 'rectangles' && /*#__PURE__*/React.createElement("div", {
-    className: "rectangles"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "top"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "center"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "bottom"
-  })), shape === 'half-ellipse' && /*#__PURE__*/React.createElement("div", {
-    className: "half-ellipse"
-  }), shape === 'circle' && /*#__PURE__*/React.createElement("div", {
-    className: "circle"
-  }), shape === 'half-circle' && /*#__PURE__*/React.createElement("div", {
-    className: "half-circle"
-  }), shape === 'ellipses' && /*#__PURE__*/React.createElement("div", {
-    className: "ellipses"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "first"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "second"
-  })), shape === 'spiral' && /*#__PURE__*/React.createElement("div", {
-    className: "spiral"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "quater-circle-one"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "quater-circle-two"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "quater-circle-three"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "quater-circle-four"
-  }))));
-};
-
-GradientBackground.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),
-
-  /**
-   * Where to pin the shapes
-   */
-  pin: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
-
-  /**
-   * The options of a shape to use
-   */
-  shape: _propTypes.default.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles'])
-};
-GradientBackground.defaultProps = {
-  pin: 'center',
-  shape: 'triangle'
-};
-var _default = GradientBackground;
-exports.default = _default;

package/dist/cjs/a/GradientBackground/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "GradientBackground", {
-  enumerable: true,
-  get: function get() {
-    return _GradientBackground.default;
-  }
-});
-
-var _GradientBackground = _interopRequireDefault(require("./GradientBackground"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }