@pareto-engineering/design-system 1.0.2 → 2.0.0-alpha.4

package/dist/es/a/ContentCard/common/Section/Section.js

@@ -0,0 +1,60 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem'; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'section';
+/**
+ * This is the component description.
+ */
+
+const Section = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  layout,
+  contentAfter // ...otherProps
+
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, layout === 'left' && 'layout-left', layout === 'right' && 'layout-right', layout === 'center' && 'layout-center', contentAfter && 'content-after'].filter(e => e).join(' '),
+  style: style
+}, 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 main content position
+   */
+  layout: PropTypes.oneOf(['left', 'right', 'center']),
+
+  /**
+   * Whether content should appear before or after illustration
+   */
+  contentAfter: PropTypes.bool
+};
+Section.defaultProps = {
+  contentAfter: false
+};
+export default Section;

package/dist/es/a/ContentCard/common/Section/index.js

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

package/dist/es/a/ContentCard/common/index.js

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

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

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

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

@@ -0,0 +1,78 @@
+/* @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-card-background: var(--y);
+$default-content-width:minmax(350px, 500px);
+
+.#{bem.$base}.content-card {
+  background-color: $default-card-background;
+  border-radius: var(--theme-border-radius);
+
+  .#{bem.$base}.section {
+    column-gap: var(--u);
+    display: grid;
+  }
+
+  .layout-left {
+    grid-template-areas:
+      "content"
+      "illustration";
+  }
+
+  .layout-right {
+    grid-template-areas:
+      "content"
+      "illustration";
+
+    .illustration {
+      margin-bottom: 0;
+    }
+  }
+
+  .layout-center {
+    grid-template-areas:
+      "spacer"
+      "content"
+      "spacer2";
+  }
+
+  .content-after {
+    grid-template-areas:
+      "illustration"
+      "content";
+  }
+
+  .content {
+    grid-area: content;
+  }
+
+  .illustration {
+    grid-area: illustration;
+  }
+
+  .heading {
+    margin-bottom: 0;
+  }
+
+  @include mixins.media($from:$sm-md) {
+    .layout-left {
+      grid-template-areas: "content illustration";
+      grid-template-columns: $default-content-width 1fr;
+    }
+
+    .layout-right {
+      grid-template-areas: "illustration content";
+      grid-template-columns: 1fr $default-content-width;
+    }
+
+    .layout-center {
+      grid-template-areas: "spacer content spacer2";
+      grid-template-columns: 1fr minmax(450px, 650px) 1fr;
+    }
+  }
+}

package/dist/es/a/Conversation/Context.js

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

package/dist/es/a/Conversation/Conversation.js

@@ -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
+
+import { Message } from "./common";
+import ConversationContext from "./Context";
+const baseClassName = styleNames.base;
+const componentClassName = 'conversation';
+/**
+ * This is the component description.
+ */
+
+const Conversation = ({
+  id,
+  className: userClassName,
+  style,
+  backgroundColor,
+  ourColor,
+  theirColor,
+  children // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []); // const messageColors = { ours: color, theirs: 'main2' }
+
+  return /*#__PURE__*/React.createElement(ConversationContext.Provider, {
+    value: {
+      ourColor,
+      theirColor
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `y-${backgroundColor}`, 'u1'].filter(e => e).join(' '),
+    style: style
+  }, children));
+};
+
+Conversation.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 base color to our messages component
+   */
+  ourColor: PropTypes.string,
+
+  /**
+   * The base color to their messages component
+   */
+  theirColor: PropTypes.string,
+
+  /**
+   * The component background color
+   */
+  backgroundColor: PropTypes.string,
+
+  /**
+   *  The children JSX
+   */
+  children: PropTypes.node
+};
+Conversation.defaultProps = {
+  backgroundColor: 'background',
+  ourColor: 'main2',
+  theirColor: 'background2'
+};
+Conversation.Message = Message;
+export default Conversation;

package/dist/es/a/Conversation/common/Message/Message.js

@@ -0,0 +1,71 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem'; // Local Definitions
+
+import useConversation from "../../useConversation";
+const baseClassName = styleNames.base;
+const componentClassName = 'message';
+/**
+ * This is the component description.
+ */
+
+const Message = ({
+  id,
+  className: userClassName,
+  style,
+  message,
+  sender,
+  from // ...otherProps
+
+}) => {
+  const {
+    ourColor,
+    theirColor
+  } = useConversation();
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `x-${from === 'ours' ? ourColor : theirColor}`, from === 'ours' && 'ours'].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styleNames.elementContent
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "sender v25 mb-v s-1"
+  }, sender, ":"), /*#__PURE__*/React.createElement("p", null, message)));
+};
+
+Message.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+
+  /**
+   * The message in the conversation
+   */
+  message: PropTypes.string.isRequired,
+
+  /**
+   * The sender of the message
+   */
+  sender: PropTypes.string.isRequired,
+
+  /**
+   * The owner of the message
+   */
+  from: PropTypes.oneOf(['ours', 'theirs']),
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string)
+};
+Message.defaultProps = {
+  from: 'theirs'
+};
+export default Message;

package/dist/es/a/Conversation/common/Message/index.js

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

package/dist/es/a/Conversation/common/index.js

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

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

@@ -0,0 +1,4 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as Conversation } from "./Conversation";
+export { default as ConversationContext } from "./Context";
+export { default as useConversation } from "./useConversation";

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

@@ -0,0 +1,54 @@
+/* @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-conversation-background: var(--y);
+$default-message-max-width: calc(100% - #{$default-padding});
+$default-message-min-width: 12em;
+$default-message-border: var(--theme-border);
+
+.#{bem.$base}.conversation {
+    display: flex;
+    flex-direction: column;
+    background-color: $default-conversation-background;
+    padding: $default-padding;
+    border-radius: var(--theme-border-radius);
+
+    >:not(:last-child) {
+        margin-bottom: $default-padding;
+    }
+
+    .#{bem.$base}.message {
+        min-width: $default-message-min-width;
+        max-width: $default-message-max-width;
+        padding: $default-padding;
+        border-radius: var(--theme-border-radius);
+        background-color: var(--x);
+        align-self: flex-start;
+        border: $default-message-border;
+
+        .#{bem.$element-content} {
+            display: flex;
+            flex-direction: column;
+
+            >p {
+                color: var(--on-x);
+            }
+
+            .sender {
+                font-weight: 800;
+                margin-bottom: .5em;
+            }
+        }
+    }
+
+    .#{bem.$base}.ours {
+        align-self: flex-end;
+    }
+
+}
+
+
+

package/dist/es/a/Conversation/useConversation.js

@@ -0,0 +1,3 @@
+import { useContext } from 'react';
+import Context from "./Context";
+export default (() => useContext(Context));

package/dist/es/a/CustomerLogos/CustomerLogos.js

@@ -0,0 +1,70 @@
+/* @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 = 'customer-logos';
+/**
+ * This is the component description.
+ */
+
+const CustomerLogos = ({
+  id,
+  className: userClassName,
+  style,
+  logosMap // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, 'u2'].filter(e => e).join(' '),
+    style: style // {...otherProps}
+
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "description-content uc"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "content x-metadata c-x uc u1 p-u md-s0 s-1"
+  }, "Hundreds of entrepreneurs at the world's leading venture communities choose Pareto.")), /*#__PURE__*/React.createElement("div", {
+    className: "logo-content"
+  }, logosMap.map(logo => /*#__PURE__*/React.createElement("img", {
+    className: "logo",
+    height: logo.height,
+    width: logo.width,
+    key: logo.altText,
+    src: logo.img,
+    alt: logo.altText
+  }))));
+};
+
+CustomerLogos.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),
+
+  /**
+   * logosMap
+   */
+  logosMap: PropTypes.arrayOf(PropTypes.shape({
+    altText: PropTypes.string.isRequired,
+    img: PropTypes.string.isRequired
+  })).isRequired
+};
+CustomerLogos.defaultProps = {// someProp:false
+};
+export default CustomerLogos;

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

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

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

@@ -0,0 +1,41 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+
+.#{bem.$base}.customer-logos {
+  .title {
+    color: var(--subtitle);
+  }
+
+  .description-content {
+    display: flex;
+    justify-content: center;
+  }
+
+  .content {
+    max-width: 80%;
+  }
+
+  .logo-content {
+    align-items: center;
+    display: grid;
+    gap: var(--u);
+    grid-template-columns: repeat(auto-fit, minmax(4.5em, 1fr));
+    justify-items: center;
+
+    .logo {
+      width: 6em;
+
+      &:hover {
+        transform: scale(1.05);
+        transition: all .5s;
+      }
+    }
+  }
+}
+
+

package/dist/es/a/CustomerStat/CustomerStat.js

@@ -0,0 +1,71 @@
+/* @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 = 'customer-stat';
+/**
+ * This is the component description
+ */
+
+const CustomerStat = ({
+  id,
+  className: userClassName,
+  style,
+  color,
+  description,
+  label // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
+    style: style // {...otherProps}
+
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "info top-description uc s-1 md-s0 v0 mb-v"
+  }, description), /*#__PURE__*/React.createElement("p", {
+    className: "uc s0 md-s1 v0 mt-v"
+  }, label));
+};
+
+CustomerStat.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 count color
+   */
+  color: PropTypes.string,
+
+  /**
+   *  The company description
+   */
+  description: PropTypes.string,
+
+  /**
+   * The company label
+   */
+  label: PropTypes.string
+};
+CustomerStat.defaultProps = {
+  color: 'main1'
+};
+export default CustomerStat;

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

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

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

@@ -0,0 +1,16 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.customer-stat{
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+  
+    .info {
+      color: var(--metadata);
+      margin-bottom: 0;
+    }
+}
+
+
+

package/dist/es/a/DashboardNavbar/DashboardNavbar.js

@@ -0,0 +1,53 @@
+/* @pareto-engineering/generator-front 0.2.3 */
+import * as React from 'react';
+import PropTypes from 'prop-types'; // Package-level Imports
+// import styleNames from 'style_names.scss'
+
+import { NavItem, NavProfile } from "./common"; // Component-level imports
+
+import("./styles.scss"); // Helper Definition
+// const baseClassName = styleNames.base
+
+const componentClassName = 'dashboard-navbar';
+
+const DashboardNavbar = ({
+  id,
+  className: userClassName,
+  style,
+  children // ...otherProps
+
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [// baseClassName,
+  componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+}, /*#__PURE__*/React.createElement("section", {
+  className: "menu"
+}, children), /*#__PURE__*/React.createElement(NavProfile, null));
+
+DashboardNavbar.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
+};
+DashboardNavbar.defaultProps = {// someProp:false
+};
+DashboardNavbar.Item = NavItem;
+DashboardNavbar.Profile = NavProfile;
+export default DashboardNavbar;

package/dist/es/a/DashboardNavbar/common/NavItem/NavItem.js

@@ -0,0 +1,48 @@
+/* @pareto-engineering/generator-front 0.2.4 */
+import * as React from 'react';
+import PropTypes from 'prop-types'; // Package-level Imports
+// import styleNames from 'style_names.scss'
+// Component-level imports
+
+import("./styles.scss"); // Helper Definition
+// const baseClassName = styleNames.base
+
+const componentClassName = 'nav-item';
+
+const NavItem = ({
+  id,
+  className: userClassName,
+  style,
+  children // ...otherProps
+
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [// baseClassName,
+  componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+}, "Nav Item", children);
+
+NavItem.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
+};
+NavItem.defaultProps = {// someProp:false
+};
+export default NavItem;