@pareto-engineering/design-system 2.0.0-alpha.41 → 2.0.0-alpha.44

package/dist/es/c/BlogPostsList/common/Card/Card.js

@@ -0,0 +1,143 @@
+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 { Link } from 'react-router-dom';
+import format from 'date-fns/format'; // TODO need to be imported from a common dir instread
+
+import { useBlog } from "../../../BlogContext";
+import { BlogCategoryButton } from "../../../BlogCategoryButton"; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'article-card';
+const wordsPerMinute = 230;
+/**
+ * This is the component description.
+ */
+
+const Card = ({
+  id,
+  className: userClassName,
+  style,
+  title,
+  slug,
+  description,
+  mainImage,
+  author,
+  category,
+  wordCount,
+  publishedOn,
+  color,
+  size,
+  ...otherProps
+}) => {
+  const {
+    generateBlogPath
+  } = useBlog();
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`, `size-${size}`].filter(e => e).join(' '),
+    style: style
+  }, otherProps), /*#__PURE__*/React.createElement("div", {
+    className: "header"
+  }, /*#__PURE__*/React.createElement("span", null, format(new Date(publishedOn), 'MMMM do, yyyy')), category && /*#__PURE__*/React.createElement(BlogCategoryButton, {
+    className: "s-1",
+    categorySlug: category.slug
+  }, category.name)), /*#__PURE__*/React.createElement("div", {
+    className: "illustration"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: mainImage,
+    alt: description
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "title"
+  }, /*#__PURE__*/React.createElement(Link, {
+    to: generateBlogPath('SINGLE', {
+      slug
+    })
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "h3"
+  }, title))), /*#__PURE__*/React.createElement("div", {
+    className: styleNames.elementContent
+  }, description && /*#__PURE__*/React.createElement("p", null, description), wordCount && /*#__PURE__*/React.createElement("p", {
+    className: "word-count"
+  }, "Reading Time :", ' ', Math.floor(wordCount / wordsPerMinute), ' ', "minutes.")));
+};
+
+Card.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 article title
+   */
+  title: PropTypes.string.isRequired,
+
+  /**
+  * String of characters that uniquely identify the article
+  */
+  slug: PropTypes.string.isRequired,
+
+  /**
+   * The article description
+   */
+  description: PropTypes.string.isRequired,
+
+  /**
+   * The article image
+   */
+  mainImage: PropTypes.string,
+
+  /**
+   * 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 the article
+   */
+  category: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    slug: PropTypes.string.isRequired
+  }),
+
+  /**
+   * Number of words in the article
+   */
+  wordCount: PropTypes.string,
+
+  /**
+   * The date when the article was published
+   */
+  publishedOn: PropTypes.string.isRequired,
+
+  /**
+   * The card color
+   */
+  color: PropTypes.string,
+
+  /**
+   * The card size
+   */
+  size: PropTypes.oneOf(['sm', 'lg'])
+};
+Card.defaultProps = {
+  color: 'background'
+};
+export default Card;

package/dist/es/c/BlogPostsList/common/Card/index.js

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

package/dist/es/c/BlogPostsList/common/index.js

@@ -0,0 +1 @@
+export { Card } from "./Card";

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

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

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

@@ -0,0 +1,72 @@
+/* @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);
+$default-background:var(--y);
+$default-color:var(--on-y);
+$base-card-class:article-card;
+$word-count-class:word-count;
+$size-small-class:size-sm;
+$size-large-class:size-lg;
+
+.#{bem.$base}.blog-posts-list {
+  display: grid;
+  gap: $default-padding;
+  grid-template-columns: 1fr;
+
+  .#{$base-card-class} {
+    background: $default-background;
+    border-radius: var(--theme-border-radius);
+    overflow: hidden;
+
+    .illustration {
+      height: 12em;
+
+      img {
+        height: 100%;
+        object-fit: cover;
+        width: 100%;
+      }
+    }
+
+    .header {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      padding: calc(#{$default-padding} / 2);
+    }
+
+    .title,
+    .#{bem.$element-content} {
+      color: $default-color;
+      padding: $default-padding;
+    }
+
+    .title {
+      padding-bottom: 0;
+    }
+
+    .#{bem.$element-content} {
+      .#{$word-count-class} {
+        font-size: calc(var(--s-1) * 1em);
+        opacity: .6;
+        text-transform: uppercase;
+      }
+    }
+  }
+
+  @include mixins.media($from:$sm-md) {
+    grid-template-columns: 1fr 1fr;
+
+    .#{$base-card-class} {
+      &.#{$size-large-class} {
+        grid-column-end: span 2;
+      }
+    }
+  }
+}
+
+

package/dist/es/c/SiteFooter/SiteFooter.js

@@ -0,0 +1,56 @@
+/* @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 { Section } from "./common"; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'site-footer';
+/**
+ * This is the component description.
+ */
+
+const SiteFooter = ({
+  id,
+  className: userClassName,
+  style,
+  children // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("footer", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style // {...otherProps}
+
+  }, children);
+};
+
+SiteFooter.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
+};
+SiteFooter.defaultProps = {// someProp:false
+};
+SiteFooter.Section = Section;
+export default SiteFooter;

package/dist/es/c/SiteFooter/common/Section/Section.js

@@ -0,0 +1,73 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import PropTypes from 'prop-types'; // Local Definitions
+
+import styleNames from '@pareto-engineering/bem';
+import { Title } from "../../../../b";
+const baseClassName = styleNames.base;
+console.log(styleNames);
+const componentClassName = styleNames.elementSection;
+/**
+ * This is the component description.
+ */
+
+const Section = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  title,
+  span // ...otherProps
+
+}) => {
+  console.log(1);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: {
+      '--span': span,
+      ...style
+    } // {...otherProps}
+
+  }, title && /*#__PURE__*/React.createElement(Title, {
+    headingAs: "p",
+    headingClassName: "h4 c-on-y",
+    heading: title
+  }), children);
+};
+
+Section.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 of the footer section
+   */
+  title: PropTypes.node,
+
+  /**
+   *  How many fractional units should the column width be, on desktop
+   */
+  span: PropTypes.number
+};
+Section.defaultProps = {
+  span: 1
+};
+export default Section;

package/dist/es/c/SiteFooter/common/Section/index.js

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

package/dist/es/c/SiteFooter/common/index.js

@@ -0,0 +1 @@
+export { Section } from "./Section";

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

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

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

@@ -0,0 +1,34 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-padding:1em;
+
+.#{bem.$base}.site-footer {
+  --u: #{$default-padding};
+  background: var(--y);
+  text-align: center;
+
+  .#{bem.$base}.#{bem.$element-section} {
+    color: var(--on-y);
+    padding: var(--u);
+  }
+
+  /*
+  @include mixins.media($to:$sm-md) {
+  } */
+
+  @include mixins.media($from:$sm-md) {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
+    text-align: left;
+
+    .#{bem.$base}.#{bem.$element-section} {
+      grid-column-end: span var(--span);
+    }
+  }
+}
+
+

package/dist/es/c/SiteHeaderCTA/SiteHeaderCTA.js

@@ -0,0 +1,92 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useLayoutEffect } from 'react'; // import Typed from 'typed.js'
+
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem';
+import { Button, Title } from "../../b"; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'header-c-t-a';
+/**
+ * This is the component description.
+ */
+
+const SiteHeaderCTA = ({
+  id,
+  className: userClassName,
+  style,
+  cta,
+  surveyLink,
+  header,
+  subHeader // ...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: "uc s-1 md-s0"
+  }, /*#__PURE__*/React.createElement(Title, {
+    heading: header,
+    headingClassName: "title uc s4 md-s6"
+  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", {
+    className: "typed-content s4 md-s6"
+  }, "startup busywork")), /*#__PURE__*/React.createElement("p", {
+    className: "description uc s0 md-s1 v2 mt-v"
+  }, subHeader), /*#__PURE__*/React.createElement("a", {
+    href: surveyLink,
+    rel: "noreferrer",
+    className: "v3 mt-v"
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "s-1 md-s0"
+  }, cta)), /*#__PURE__*/React.createElement("span", {
+    className: "no-credit-card u1 mt-u md-s0 s-1"
+  }, "No credit card required"));
+};
+
+SiteHeaderCTA.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 cta text
+   */
+  cta: PropTypes.string,
+
+  /**
+   * The cta link
+   */
+  surveyLink: PropTypes.string.isRequired,
+
+  /**
+   * The hero section header
+   */
+  header: PropTypes.string.isRequired,
+
+  /**
+   * The hero section sub header
+   */
+  subHeader: PropTypes.string.isRequired
+};
+SiteHeaderCTA.defaultProps = {
+  cta: 'Get started in 5 min'
+};
+export default SiteHeaderCTA;

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

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

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

@@ -0,0 +1,44 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$typed-cusor-font-size-sm:1.728em;
+$typed-cusor-font-size-md:2.985984em;
+
+.#{bem.$base}.header-c-t-a {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+
+  .typed-content {
+    color: var(--main1);
+  }
+
+  .typed-cursor {
+    color: var(--main1);
+    font-size: $typed-cusor-font-size-md;
+  }
+
+  .description {
+    color: var(--subtitle);
+    margin-bottom: 0;
+  }
+
+  .no-credit-card {
+    color: var(--metadata);
+  }
+
+  @include mixins.media($to:$sm-md) {
+    padding: var(--u);
+
+    .typed-cursor {
+      font-size: $typed-cusor-font-size-sm;
+    }
+  }
+}
+
+

package/dist/es/c/SiteMission/SiteMission.js

@@ -0,0 +1,96 @@
+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 { useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem';
+import { TeamInfo, AnimatedCounter } from "../../a"; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'mission';
+/**
+ * This is the component description.
+ */
+
+const SiteMission = ({
+  id,
+  className: userClassName,
+  style,
+  color,
+  teamInfoMap,
+  teamReviewMap,
+  delay // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, 'u2', `x-${color}`].filter(e => e).join(' '),
+    style: style // {...otherProps}
+
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "review-content s-1 md-s0"
+  }, teamReviewMap.map(review => /*#__PURE__*/React.createElement(AnimatedCounter, _extends({
+    key: review.description
+  }, review, {
+    color: color,
+    delay: delay
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "team-info-content v2 mv-v"
+  }, teamInfoMap.map(info => /*#__PURE__*/React.createElement(TeamInfo, _extends({
+    key: info.description
+  }, info)))));
+};
+
+SiteMission.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 teamReviewMap
+   */
+  teamReviewMap: PropTypes.arrayOf(PropTypes.shape({
+    number: PropTypes.number.isRequired,
+    unit: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired
+  })).isRequired,
+
+  /**
+   * The color
+   */
+  color: PropTypes.string,
+
+  /**
+   *  The teamInfoMap
+   */
+  teamInfoMap: PropTypes.arrayOf(PropTypes.shape({
+    description: PropTypes.string.isRequired,
+    img: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    role: PropTypes.string.isRequired
+  })).isRequired,
+
+  /**
+   * Animated counter delay
+   */
+  delay: PropTypes.number
+};
+SiteMission.defaultProps = {
+  color: 'main1'
+};
+export default SiteMission;

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

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

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

@@ -0,0 +1,30 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$grid-gap:1em;
+
+
+.#{bem.$base}.mission {
+  height: auto;
+
+  .review-content {
+    display: grid;
+    gap: $grid-gap;
+    grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
+  }
+
+  .team-info-content {
+    display: grid;
+    gap: $grid-gap;
+    grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
+  }
+
+  @include mixins.media($to:$sm-md) {
+    padding: var(--u);
+  }
+}
+
+