@pareto-engineering/design-system 2.0.0-alpha.7 → 2.0.0-alpha.71

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

@@ -1,191 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-$default-triangle-dimension:30em;
-$default-ellipses-dimension:50em;
-$default-ellipse-dimension:50em;
-$default-shapes-opacity:.8;
-$default-diamonds-dimension:40em;
-$default-circle-dimension:40em;
-
-.#{bem.$base}.gradient-background {
-  align-items: center;
-  background: var(--light-y);
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: var(--pin);
-  position: absolute;
-  width: 100%;
-
-  .shapes {
-    display: flex;
-    justify-content: center;
-
-    .triangle {
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
-      clip-path: polygon(0 0, 50% 100%, 100% 0);
-      height: $default-triangle-dimension * .86;
-      opacity: $default-shapes-opacity;
-      width: $default-triangle-dimension;
-    }
-
-    .half-ellipses {
-
-      height: $default-ellipses-dimension / 2;
-      width: $default-ellipses-dimension;
-      opacity: $default-shapes-opacity;
-
-      .up {
-        background-image: linear-gradient(var(--light-y), var(--y));
-        clip-path: ellipse(40% 100% at 50% 0%);
-        height:50%;
-      }
-
-      .down {
-        background-image: linear-gradient(to top, var(--light-y), var(--y));
-        clip-path: ellipse(40% 100% at 50% 100%);
-        height:50%;
-      }
-
-    }
-
-    .ellipse {
-      height: $default-ellipse-dimension / 1.5;
-      width: $default-ellipse-dimension;
-      background-image: linear-gradient( to top left, var(--dark-y), var(--light-y),var(--dark-y));
-      clip-path: ellipse(50% 25% at 50% 50%);
-      opacity: $default-shapes-opacity;
-      transform: rotate3d(0, 0, -1, 10deg);
-    }
-
-    .diamonds {
-
-      height: $default-diamonds-dimension;
-      width: $default-diamonds-dimension;
-      opacity: $default-shapes-opacity;
-      position: relative;
-
-      .top-right {
-        height: 100%;
-        width: 100%;
-        background-image: linear-gradient(to right, var(--dark-y), var(--y));
-        clip-path: polygon(100% 100%, 0 0, 100% 0);
-        position: absolute;
-      }
-      .bottom-left {
-        height: 100%;
-        width: 100%;
-        background-image: linear-gradient(to left, var(--dark-y), var(--y));
-        clip-path: polygon(0 100%, 0 0, 100% 100%);
-        position: absolute;
-        z-index: 1;
-        opacity: .95;
-      }
-      .bottom-right {
-        height: 100%;
-        width: 100%;
-        background-image: linear-gradient(to bottom, var(--dark-y), var(--y));
-        clip-path: polygon(100% 100%, 100% 0, 0 100%);
-        position: absolute;
-      }
-    }
-
-    .rectangles {
-      height: $default-diamonds-dimension;
-      width: $default-diamonds-dimension;
-      opacity: $default-shapes-opacity;
-      display: grid;
-      grid-template-rows: repeat(3, 1fr);
-
-      .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 {
-      height: $default-ellipses-dimension / 2;
-      width: $default-ellipses-dimension;
-      opacity: $default-shapes-opacity;
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
-      clip-path: ellipse(50% 50% at 50% 0);
-    }
-
-    .circle {
-      height: $default-circle-dimension;
-      width: $default-circle-dimension;
-      opacity: $default-shapes-opacity;
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
-      clip-path: circle(50% at 50% 50%);
-    }
-
-    .ellipses {
-      height: var(--height);
-      width: var(--width);
-      opacity: $default-shapes-opacity;
-      position: relative;
-
-      .first {
-        height: 100%;
-        width: 100%;
-        position: absolute;
-        background-image: linear-gradient(to top, var(--dark-y), var(--light-y));
-        clip-path: ellipse(50% 20% at 50% 60%);
-      }
-
-      .second{
-        height: 100%;
-        width: 100%;
-        position: absolute;
-        background-image: linear-gradient(to bottom, var(--dark-y), var(--light-y));
-        clip-path: ellipse(50% 20% at 50% 40%);
-      }
-
-    }
-
-    // .spiral {
-    //   height: $default-ellipses-dimension;
-    //   width: $default-ellipses-dimension;
-    //   opacity: $default-shapes-opacity;
-    //   position: relative;
-
-    //   > *{
-    //     position: absolute;
-    //     height: 100%;
-    //     width: 100%;
-    //     background: radial-gradient(var(--dark-y) 30%, var(--light-y));
-    //     transform-origin: 0 0;
-    //   }
-
-    //   .quater-circle-one{
-    //     transform: rotate(90deg);
-    //     clip-path: circle(200px at 0 0);
-    //     z-index: 1;
-    //   }
-
-    //   .quater-circle-two {
-    //     clip-path: circle(250px at 0 0);
-    //     transform: rotate(45deg);
-    //   }
-
-    //   .quater-circle-three {
-    //     clip-path: circle(300px at 0 0);
-    //   }
-
-    //   .quater-circle-four{
-    //     clip-path: circle(350px at 0 0);
-    //     transform: rotate(-45deg);
-    //   }
-    // }
-
-  }
-}

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/ContextProvider.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 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,
-
-  /**
-   *  The children JSX
-   */
-  children: PropTypes.node
-};
-BlogContextProvider.defaultProps = {// someProp:false
-};
-export default BlogContextProvider;

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

@@ -1,4 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-export { default as BlogContext } from "./Context";
-export { default as BlogContextProvider } from "./ContextProvider";
-export { default as useBlog } from "./useBlog";

package/dist/es/c/BlogPost/BlogPost.js

@@ -1,128 +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';
-import format from 'date-fns/format';
-import { Title } from "../../b";
-import { BlogCategoryButton } from "../BlogCategoryButton"; // Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'blog-post';
-/**
- * This is the component description.
- */
-
-const BlogPost = ({
-  id,
-  className: userClassName,
-  style,
-  title,
-  // slug,
-  description,
-  content,
-  mainImage,
-  author,
-  category = {},
-  // itemType
-  // wordCount,
-  publishedOn // updatedAt,
-  // ...otherProps
-
-}) => {
-  useLayoutEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "y-red b-y uc article-head ph-u pv-v v4 md-v6"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "v2 mv-v"
-  }, /*#__PURE__*/React.createElement(BlogCategoryButton, {
-    categorySlug: category.slug,
-    className: "s-1"
-  }, category.name)), /*#__PURE__*/React.createElement(Title, {
-    heading: title,
-    subtitle: description,
-    subtitleClassName: "x-subtitle c-x"
-  }), /*#__PURE__*/React.createElement("p", {
-    className: "x-metadata c-x v2 mt-v"
-  }, 'Published on ', format(new Date(publishedOn), 'MMMM do, yyyy'), "."), /*#__PURE__*/React.createElement("p", {
-    className: "x-metadata c-x v1 mt-v"
-  }, `${author.firstName} ${author.lastName}`)), /*#__PURE__*/React.createElement("div", {
-    className: "article-illustration v4 md-v6 mb-v"
-  }, /*#__PURE__*/React.createElement("img", {
-    src: mainImage,
-    alt: description
-  })), /*#__PURE__*/React.createElement("div", {
-    dangerouslySetInnerHTML: {
-      __html: content
-    },
-    className: "article-body p-u s0 md-s1"
-  }));
-};
-
-BlogPost.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 title of this blog post
-   */
-  title: PropTypes.string.isRequired,
-
-  /**
-   * The description of this blog post
-   */
-  description: PropTypes.string.isRequired,
-
-  /**
-   * The content of this blog post
-   */
-  content: PropTypes.string.isRequired,
-
-  /**
-   * The link to the main image of this blog post
-   */
-  mainImage: PropTypes.string.isRequired,
-
-  /**
-   * The first and last name of the article's author
-   */
-  author: PropTypes.shape({
-    firstName: PropTypes.string.isRequired,
-    lastName: PropTypes.string.isRequired
-  }).isRequired,
-
-  /**
-   * The category of this blog post
-   */
-  category: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    slug: PropTypes.string.isRequired
-  }).isRequired,
-
-  /**
-   * The date this blog post was published
-   */
-  publishedOn: PropTypes.string.isRequired
-};
-BlogPost.defaultProps = {// someProp:false
-};
-export default BlogPost;

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

@@ -1,33 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
-
-
-.#{bem.$base}.blog-post {
-  .article-body {
-    p {
-      line-height: var(--s3);
-      text-align: justify;
-    }
-  }
-
-  .article-illustration {
-    height: 13em;
-
-    img {
-      height: 100%;
-      object-fit: cover;
-      width: 100%;
-    }
-  }
-
-  @include mixins.media($from:$sm-md) {
-    .article-illustration {
-      height: 22em;
-    }
-  }
-}
-
-