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

package/dist/es/a/Shapes/Shapes.js

@@ -1,141 +0,0 @@
-/* @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 = 'shapes';
-/**
- * This is the component description.
- */
-
-const Shapes = ({
-  id,
-  className: userClassName,
-  style,
-  shape,
-  height,
-  overflow,
-  verticalAlign,
-  horizontalAlign // ...otherProps
-
-}) => {
-  useLayoutEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: { ...style,
-      '--shape-height': height,
-      '--overflow': overflow,
-      '--vertical-align': verticalAlign,
-      '--horizontal-align': horizontalAlign
-    } // {...otherProps}
-
-  }, 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: "circle-one"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "circle-two"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "circle-three"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "circle-four"
-  })), shape === 'rotated-ellipses' && /*#__PURE__*/React.createElement("div", {
-    className: "rotated-ellipses"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "ellipse-one"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "ellipse-two"
-  })));
-};
-
-Shapes.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 height of the shape.
-   */
-  height: PropTypes.string,
-
-  /**
-   * The vertical alignment of the shape.
-   */
-  verticalAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
-
-  /**
-   * The horizontal alignment of the shape.
-   */
-  horizontalAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
-
-  /**
-   * The options of a shape to use
-   */
-  shape: PropTypes.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles', 'rotated-ellipses']),
-
-  /**
-   * The overflow of the shape.
-   */
-  overflow: PropTypes.oneOf(['hidden', 'visible'])
-};
-Shapes.defaultProps = {
-  verticalAlign: 'center',
-  horizontalAlign: 'center',
-  shape: 'triangle',
-  overflow: 'hidden'
-};
-export default Shapes;

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

@@ -1,221 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-$default-ellipse-height:50em;
-$default-diamond-height:40em;
-$default-circle-height:50em;
-$default-triangle-height:40em;
-$default-rectangle-height:50em;
-$default-shapes-opacity:.8;
-
-.#{bem.$base}.shapes {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    overflow: var(--overflow);
-    justify-content: var(--vertical-align);
-    align-items: var(--horizontal-align);
-    height: 100%;
-    width: 100%;
-
-    .triangle {
-      background-image: linear-gradient(transparent, var(--dark-y));
-      clip-path: polygon(0 0, 50% 100%, 100% 0);
-      height: calc(var(--shape-height, #{$default-triangle-height}) * 0.86);
-      opacity: $default-shapes-opacity;
-      width: var(--shape-height, #{$default-triangle-height});
-    }
-
-    .half-ellipses {
-      height: var(--shape-height, #{$default-ellipse-height});
-      opacity: $default-shapes-opacity;
-      width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
-
-      .up {
-        background-image: radial-gradient(ellipse at center bottom, var(--y) 5%, transparent 65%);
-        clip-path: ellipse(35% 100% at 50% 0%);
-        height: 50%;
-      }
-
-      .down {
-        background-image: radial-gradient(ellipse at center top, var(--y) 5%, transparent 65%);
-        clip-path: ellipse(35% 100% at 50% 100%);
-        height: 50%;
-      }
-    }
-
-    .ellipse {
-      background-image: linear-gradient(var(--dark-y), var(--light-y));
-      clip-path: ellipse(50% 30% at 50% 70%);
-      height: var(--shape-height, #{$default-ellipse-height});
-      opacity: $default-shapes-opacity;
-      width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
-    }
-
-    .diamonds {
-      height: var(--shape-height, #{$default-diamond-height});
-      opacity: $default-shapes-opacity;
-      position: relative;
-      width: var(--shape-height, #{$default-diamond-height});
-
-      .top-right {
-        background-image: linear-gradient(to right, var(--dark-y), var(--y));
-        clip-path: polygon(100% 100%, 0 0, 100% 0);
-        height: 100%;
-        position: absolute;
-        width: 100%;
-      }
-
-      .bottom-left {
-        background-image: linear-gradient(to left, var(--dark-y), var(--y));
-        clip-path: polygon(0 100%, 0 0, 100% 100%);
-        height: 100%;
-        opacity: .95;
-        position: absolute;
-        width: 100%;
-        z-index: 1;
-      }
-
-      .bottom-right {
-        background-image: linear-gradient(to bottom, var(--dark-y), var(--y));
-        clip-path: polygon(100% 100%, 100% 0, 0 100%);
-        height: 100%;
-        position: absolute;
-        width: 100%;
-      }
-    }
-
-    .rectangles {
-      display: grid;
-      grid-template-rows: repeat(3, 1fr);
-      height: var(--shape-height, #{$default-rectangle-height});
-      opacity: $default-shapes-opacity;
-      width: var(--shape-height, #{$default-rectangle-height});
-
-      .top {
-        background-image: linear-gradient(to right, var(--dark-y), var(--y));
-      }
-
-      .center {
-        background-image: linear-gradient(to left, var(--dark-y), var(--y));
-      }
-
-      .bottom {
-        background-image: linear-gradient(to right, var(--dark-y), var(--y));
-      }
-    }
-
-    .half-ellipse {
-      background-image: radial-gradient(ellipse at center bottom, var(--y) 10%, transparent 65%);
-      clip-path: ellipse(60% 100% at 50% 0%);
-      height: var(--shape-height, #{$default-ellipse-height});
-      opacity: $default-shapes-opacity;
-      width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
-    }
-
-    .circle {
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
-      clip-path: circle(50% at 50% 50%);
-      height: var(--shape-height, #{$default-circle-height});
-      opacity: $default-shapes-opacity;
-      width: var(--shape-height, #{$default-circle-height});
-    }
-
-    .half-circle {
-      background: linear-gradient(var(--light-y) 30%, var(--dark-y) 100%);
-      clip-path: circle(50% at 50% 100%);
-      height: var(--shape-height, #{$default-circle-height});
-      opacity: $default-shapes-opacity;
-      width: calc(var(--shape-height, #{$default-circle-height}) * 2);
-    }
-
-    .ellipses {
-      height: var(--shape-height, #{$default-ellipse-height});
-      opacity: $default-shapes-opacity;
-      position: relative;
-      width: var(--shape-height, #{$default-ellipse-height});
-
-      .first {
-        background-image: linear-gradient(to top, var(--dark-y), var(--y), var(--light-y) 50%, transparent);
-        clip-path: ellipse(50% 20% at 50% 60%);
-        height: 100%;
-        position: absolute;
-        width: 100%;
-        z-index: 1;
-      }
-
-      .second {
-        background-image: linear-gradient(to bottom,var(--dark-y), var(--y), var(--light-y) 45%, transparent);
-        clip-path: ellipse(50% 20% at 50% 40%);
-        height: 100%;
-        position: absolute;
-        width: 100%;
-      }
-    }
-
-    .spiral {
-      height: var(--shape-height, #{$default-ellipse-height});
-      width: var(--shape-height, #{$default-ellipse-height});
-      opacity: $default-shapes-opacity;
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      > * {
-        border-radius: 50%;
-        background: radial-gradient(ellipse at center bottom ,var(--dark-y) 10%, transparent 60%);
-        position: absolute;
-        opacity: .5;
-      }
-
-       .circle-one {
-        transform: rotate(45deg);
-        height:calc(var(--shape-height, #{$default-ellipse-height})* 0.4);
-        width: calc(var(--shape-height, #{$default-ellipse-height})* 0.4);
-      }
-
-       .circle-two {
-        height: calc(var(--shape-height, #{$default-ellipse-height})* 0.6);
-        width: calc(var(--shape-height, #{$default-ellipse-height})* 0.6);
-      }
-
-       .circle-three {
-        transform: rotate(-45deg);
-        height: calc(var(--shape-height, #{$default-ellipse-height})* 0.8);
-        width: calc(var(--shape-height, #{$default-ellipse-height})* 0.8);
-      }
-
-       .circle-four {
-        transform: rotate(-90deg);
-        height: calc(var(--shape-height, #{$default-ellipse-height})* 1);
-        width: calc(var(--shape-height, #{$default-ellipse-height})* 1);
-      }
-    }
-    .rotated-ellipses {
-      height: var(--shape-height, #{$default-ellipse-height});
-      opacity: $default-shapes-opacity;
-      width: var(--shape-height, #{$default-ellipse-height});
-      display: flex;
-
-      > *{
-        width: 100%;
-        height: 100%;
-      }
-
-      .ellipse-one {
-        background-image: radial-gradient(ellipse at bottom left, var(--y) 30%, transparent 65%);
-        transform: rotate(-15deg);
-        clip-path: ellipse(50% 35% at 50% 50%);
-      }
-
-      .ellipse-two {
-        background-image: radial-gradient(ellipse at top right, var(--y) 30%, transparent 65%);
-        transform: rotate(-15deg);
-        clip-path: ellipse(50% 35% at 50% 50%);
-      }
-    }
-}

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

@@ -1,5 +0,0 @@
-/* @pareto-engineering/generator-front 0.2.3 */
-export { default as SiteContext } from "./Context";
-export { default as SiteContextProvider } from "./ContextProvider";
-export { default as useSite } from "./useSite";
-export { default as useTheme } from "./useTheme";

package/dist/es/c/AcceptCookies/AcceptCookies.js

@@ -1,117 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react';
-import { useState, useCallback, useLayoutEffect } from 'react';
-import PropTypes from 'prop-types';
-import { Button } from "../../b";
-import styleNames from '@pareto-engineering/bem'; // Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'accept-cookies';
-/**
- * This is the component description.
- */
-
-const AcceptCookies = ({
-  id,
-  className: userClassName,
-  style,
-  color,
-  title,
-  subtitle,
-  onClickAllow,
-  onClickDecline,
-  defaultIsShown // ...otherProps
-
-}) => {
-  const [isShown, setIsShown] = useState(defaultIsShown);
-  const hide = useCallback(() => setIsShown(false), []);
-  const allow = useCallback(() => {
-    onClickAllow === null || onClickAllow === void 0 ? void 0 : onClickAllow();
-    hide();
-  }, []);
-  const decline = useCallback(() => {
-    onClickDecline === null || onClickDecline === void 0 ? void 0 : onClickDecline();
-    hide();
-  }, []);
-  useLayoutEffect(() => {
-    import("./styles.scss");
-  }, []);
-  if (!isShown) return null;
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`, 'u1'].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styleNames.elementContent
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "s0"
-  }, title), /*#__PURE__*/React.createElement("p", {
-    className: "s-1"
-  }, subtitle), /*#__PURE__*/React.createElement("div", {
-    className: "buttons s-1"
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: "allow",
-    onClick: allow
-  }, "Allow"), /*#__PURE__*/React.createElement(Button, {
-    className: "decline v1 ml-v",
-    onClick: decline
-  }, "Decline"))));
-};
-
-AcceptCookies.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,
-
-  /**
-   *  The title
-   */
-  title: PropTypes.string,
-
-  /**
-   *  The sub-title
-   */
-  subtitle: PropTypes.string,
-
-  /**
-   *  The color
-   */
-  color: PropTypes.string,
-
-  /**
-   *  Allow cookies function
-   */
-  onClickAllow: PropTypes.func,
-
-  /**
-   *  Allow cookies function
-   */
-  onClickDecline: PropTypes.func,
-
-  /**
-   *  Condition to show or hide the component
-   */
-  defaultIsShown: PropTypes.bool
-};
-AcceptCookies.defaultProps = {
-  color: 'main1',
-  defaultIsShown: true
-};
-export default AcceptCookies;

package/dist/es/c/AcceptCookies/index.js

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

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

@@ -1,49 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
-
-$default-padding:var(--u, 1em);
-
-.#{bem.$base}.accept-cookies {
-  padding: $default-padding;
-
-  .#{bem.$element-content} {
-    align-items: center;
-    background-color: var(--on-x);
-    border-radius: var(--theme-border-radius);
-    display: flex;
-    justify-content: space-between;
-    padding: $default-padding;
-
-    .buttons {
-      display: flex;
-
-      .allow,
-      .decline {
-        min-width: 100px;
-      }
-
-      .decline {
-        background-color: var(--on-x);
-        border: 1px solid var(--x);
-        color: var(--x);
-      }
-    }
-  }
-
-  @include mixins.media($to:$sm-md) {
-    .content {
-      flex-direction: column;
-    }
-  }
-
-  @include mixins.media($from:$sm-md) {
-    .content {
-      p {
-        margin-bottom: 0;
-      }
-    }
-  }
-}

package/dist/es/c/BlogCategoryButton/BlogCategoryButton.js

@@ -1,68 +0,0 @@
-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); }
-
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem';
-import { Button } from "../../b";
-import { Link } from 'react-router-dom';
-import { useBlog } from "../BlogContext"; // Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'blog-category-button';
-/**
- * This is the component description.
- */
-
-const BlogCategoryButton = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  categorySlug,
-  ...otherProps
-}) => {
-  const {
-    generateBlogPath
-  } = useBlog();
-  return /*#__PURE__*/React.createElement(Link, {
-    to: generateBlogPath('LIST_CATEGORY', {
-      category: categorySlug
-    })
-  }, /*#__PURE__*/React.createElement(Button, _extends({
-    id: id,
-    isCompact: true,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, otherProps), children));
-};
-
-BlogCategoryButton.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,
-
-  /**
-   * The slug of the category
-   */
-  categorySlug: PropTypes.string.isRequired
-};
-BlogCategoryButton.defaultProps = {// someProp:false
-};
-export default BlogCategoryButton;

package/dist/es/c/BlogCategoryButton/index.js

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

package/dist/es/c/BlogContext/BlogContextProvider.js

@@ -1,45 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react';
-import { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { generatePath } from 'react-router-dom';
-import Context from "./Context";
-/**
- * This is the component description.
- */
-
-const BlogContextProvider = ({
-  urlMap,
-  children // ...otherProps
-
-}) => {
-  const generateBlogPath = useCallback((key, variables) => generatePath(urlMap[key], variables), [urlMap]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: {
-      generateBlogPath,
-      urlMap
-    }
-  }, children);
-};
-
-BlogContextProvider.propTypes = {
-  /**
-   *  The children JSX
-   */
-  children: PropTypes.node,
-
-  /**
-   * The hash of urls
-   */
-  urlMap: PropTypes.shape({
-    HOME: PropTypes.string.isRequired,
-    LIST: PropTypes.string.isRequired,
-    LIST_PAGINATED: PropTypes.string.isRequired,
-    LIST_CATEGORY: PropTypes.string.isRequired,
-    LIST_CATEGORY_PAGINATED: PropTypes.string.isRequired,
-    SINGLE: PropTypes.string.isRequired
-  }).isRequired
-};
-BlogContextProvider.defaultProps = {// someProp:false
-};
-export default BlogContextProvider;

package/dist/es/c/BlogContext/Context.js

@@ -1,2 +0,0 @@
-import * as React from 'react';
-export default /*#__PURE__*/React.createContext({});