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

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

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

package/dist/es/a/DashboardNavbar/common/NavItem/styles.scss

@@ -0,0 +1,9 @@
+/* @pareto-engineering/generator-front 0.2.4 */
+
+/* stylelint-disable -- Not done yet */
+.nav-item{
+
+}
+
+
+

package/dist/es/a/DashboardNavbar/common/NavProfile/NavProfile.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-profile';
+
+const NavProfile = ({
+  id,
+  className: userClassName,
+  style,
+  children // ...otherProps
+
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [// baseClassName,
+  componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+}, "Nav Profile", children);
+
+NavProfile.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
+};
+NavProfile.defaultProps = {// someProp:false
+};
+export default NavProfile;

package/dist/es/a/DashboardNavbar/common/NavProfile/index.js

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

package/dist/es/a/DashboardNavbar/common/NavProfile/styles.scss

@@ -0,0 +1,9 @@
+/* @pareto-engineering/generator-front 0.2.4 */
+
+/* stylelint-disable -- Not done yet */
+.nav-profile{
+
+}
+
+
+

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

@@ -0,0 +1,2 @@
+export { NavItem } from "./NavItem";
+export { NavProfile } from "./NavProfile";

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

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

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

@@ -0,0 +1,14 @@
+/* @pareto-engineering/generator-front 0.2.3 */
+
+.dashboard-navbar {
+  background: var(--pearl);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .menu {
+    flex-grow: 1;
+  }
+}
+
+

package/dist/es/a/DotInfo/DotInfo.js

@@ -0,0 +1,85 @@
+/* @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 = 'dot-info';
+/**
+ * This is the component description.
+ */
+
+const DotInfo = ({
+  id,
+  className: userClassName,
+  style,
+  booleanValue,
+  height,
+  colorTrue,
+  colorFalse,
+  colorEmpty // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, booleanValue === false && `x-${colorFalse}`, booleanValue === true && `x-${colorTrue}`, [null, undefined].includes(booleanValue) && `empty x-${colorEmpty}`, componentClassName, userClassName].filter(e => e).join(' '),
+    style: {
+      '--height': height,
+      ...style
+    }
+  });
+};
+
+DotInfo.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),
+
+  /**
+   *  Boolean value to be converted into string
+   */
+  booleanValue: PropTypes.bool,
+
+  /**
+   * Color for true case
+   */
+  colorTrue: PropTypes.string,
+
+  /**
+   * Color for false case
+   */
+  colorFalse: PropTypes.string,
+
+  /**
+   * Color for the border when empty value
+   */
+  colorEmpty: PropTypes.string,
+
+  /**
+   * The height of the dot
+   */
+  height: PropTypes.string
+};
+DotInfo.defaultProps = {
+  colorTrue: 'success',
+  colorFalse: 'error',
+  colorEmpty: 'metadata',
+  height: '2em' // someProp:false
+
+};
+export default DotInfo;

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

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

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

@@ -0,0 +1,20 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-color: var(--black);
+$default-height:var(--height);
+
+.#{bem.$base}.dot-info {
+  background: var(--x);
+  border-radius: 50%;
+  color: $default-color;
+
+  height: $default-height;
+  width: $default-height;
+
+  &.empty {
+    background: transparent;
+    border: 1px solid var(--x);
+  }
+}

package/dist/es/a/FeaturedOn/FeaturedOn.js

@@ -0,0 +1,72 @@
+/* @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 = 'featured-on';
+/**
+ * This is the component description.
+ */
+
+const FeaturedOn = ({
+  id,
+  className: userClassName,
+  style,
+  featuresMap // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, 'u1'].filter(e => e).join(' '),
+    style: style // {...otherProps}
+
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "x-metadata c-x uc u1 mb-u md-s0 s-1"
+  }, "As featured on"), /*#__PURE__*/React.createElement("div", {
+    className: "content"
+  }, featuresMap.map(feature => /*#__PURE__*/React.createElement("a", {
+    key: feature.altText,
+    className: "link",
+    href: feature.link,
+    rel: "nofollow noreferrer",
+    target: "_blank"
+  }, /*#__PURE__*/React.createElement("img", {
+    key: feature.altText,
+    src: feature.img,
+    alt: feature.altText
+  })))));
+};
+
+FeaturedOn.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 featuresMap
+   */
+  featuresMap: PropTypes.arrayOf(PropTypes.shape({
+    altText: PropTypes.string.isRequired,
+    img: PropTypes.string.isRequired,
+    link: PropTypes.string.isRequired
+  })).isRequired
+};
+FeaturedOn.defaultProps = {// someProp:false
+};
+export default FeaturedOn;

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

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

package/dist/es/a/FeaturedOn/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}.featured-on {
+  .title {
+    color: var(--subtitle);
+  }
+
+  .content {
+    align-items: center;
+    display: grid;
+    gap: var(--u);
+    grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
+    justify-items: center;
+
+    .link {
+      display: block;
+      height: 100%;
+      width: 6em;
+
+
+
+      img {
+        height: 100%;
+        object-fit: contain;
+        width: 100%;
+      }
+
+
+      &:hover {
+        transform: scale(1.05);
+        transition: all .5s;
+      }
+    }
+  }
+}
+
+

package/dist/es/a/Figure/Figure.js

@@ -0,0 +1,68 @@
+/* @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 = 'photo-card';
+/**
+ * This is the component description.
+ */
+
+const Figure = ({
+  id,
+  className: userClassName,
+  style,
+  src,
+  alt,
+  caption
+}) => {
+  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("figure", null, /*#__PURE__*/React.createElement("img", {
+    src: src,
+    alt: alt
+  }), /*#__PURE__*/React.createElement("figcaption", null, caption || alt)));
+};
+
+Figure.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 source to the photo to be displayed
+   */
+  src: PropTypes.string,
+
+  /**
+   * The alternate text for the photo
+   */
+  alt: PropTypes.string,
+
+  /**
+   * The caption that will appear beneath the photo
+   */
+  caption: PropTypes.string
+};
+Figure.defaultProps = {// someProp:false
+};
+export default Figure;

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

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

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

@@ -0,0 +1,19 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-border-radius:1em;
+
+.#{bem.$base}.photo-card {
+  figure {
+    img {
+      border-radius: $default-border-radius;
+      width: 100%;
+    }
+
+    figcaption {
+      color: var(--subtitle);
+      font-size: calc(var(--s-1) * 1em);
+    }
+  }
+}

package/dist/es/a/GradientBackground/GradientBackground.js

@@ -0,0 +1,118 @@
+/* @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 = 'gradient-background';
+/**
+ * This is the component description.
+ */
+
+const GradientBackground = ({
+  id,
+  className: userClassName,
+  style,
+  pin,
+  shape,
+  height,
+  width // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: { ...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.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * Where to pin the shapes
+   */
+  pin: 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'])
+};
+GradientBackground.defaultProps = {
+  pin: 'center',
+  shape: 'triangle'
+};
+export default GradientBackground;

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

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