@pareto-engineering/design-system 0.0.1-alpha.9 → 0.0.8-testing-id.0

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

@@ -0,0 +1,33 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-border: var(--theme-border-style) var(--metadata);
+
+.#{bem.$base}.popover {
+  position: absolute;
+  z-index: 1;
+  background-color: var(--x);
+  border: $default-border;
+
+  &:not(.open) {
+    display: none;
+  }
+
+  &.bottom {
+    top: 100%;
+    // bottom: 0;
+  }
+
+  &.left {
+    left: 0;
+  }
+
+  &.right {
+    right: 0;
+  }
+
+  &.top {
+    bottom: 100%;
+    top: auto;
+  }
+}

package/dist/es/a/ProgressBar/ProgressBar.js

@@ -0,0 +1,75 @@
+/* @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 = 'progress-bar';
+
+/**
+ * This is the component description. This takes the color x = indigo.
+ */
+const ProgressBar = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    attached,
+    color,
+    progress,
+    height
+    // ...otherProps
+  } = _ref;
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, attached && styleNames.modifierAttached, color && `x-${color}`, userClassName].filter(e => e).join(' '),
+    style: {
+      '--progress': progress,
+      '--height': height,
+      ...style
+    },
+    "data-length": "50%"
+    // {...otherProps}
+  });
+};
+
+ProgressBar.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 color of the logo
+   */
+  color: PropTypes.string,
+  /**
+   *  Whether the progress bar is attached to another element
+   */
+  attached: PropTypes.bool,
+  /**
+   * The current progress
+   */
+  progress: PropTypes.number.isRequired,
+  /**
+   * The height of the progress bar as a CSS value. 1em by default.
+   */
+  height: PropTypes.string
+};
+ProgressBar.defaultProps = {
+  attached: false
+};
+export default ProgressBar;

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

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

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

@@ -0,0 +1,37 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-height:var(--height, 1em);
+$default-border:none;//2px solid var(--grid);
+$default-transition-duration:.5s;
+$default-color:var(--x, var(--main1));
+
+.#{bem.$base}.progress-bar {
+  border: $default-border;
+  height: $default-height;
+  position: relative;
+
+  &::after {
+    background: $default-color;
+    content: " ";
+    font-size: 1px;
+    height: 100%;
+    left: 0;
+    line-height: 1px;
+    outline: $default-border;
+    position: absolute;
+    top: 0;
+    transition: width $default-transition-duration ease-in-out;
+    white-space: pre;
+    width: calc(var(--progress) * 1%);
+    z-index: 1;
+  }
+
+  &.#{bem.$modifier-attached} {
+    border: unset;
+    border-bottom: $default-border;
+  }
+}
+
+

package/dist/es/a/Quote/Quote.js

@@ -0,0 +1,76 @@
+/* @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 = 'quote';
+
+/**
+ * This is the component description.
+ */
+const Quote = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    source,
+    author,
+    color
+    // ...otherProps
+  } = _ref;
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("figure", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
+    style: style
+    // {...otherProps}
+  }, /*#__PURE__*/React.createElement("blockquote", {
+    cite: source,
+    className: "blockquote uc"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "quotation c-x md-s0 s-1"
+  }, children)), /*#__PURE__*/React.createElement("figcaption", {
+    className: "figcaption"
+  }, /*#__PURE__*/React.createElement("cite", null, author)));
+};
+Quote.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.isRequired,
+  /**
+   * A URL for the source of the quotation
+   */
+  source: PropTypes.string,
+  /**
+   * text representation of the source
+   */
+  author: PropTypes.string,
+  /**
+   * The color of the quotation text
+   */
+  color: PropTypes.string
+};
+Quote.defaultProps = {
+  color: 'main1'
+};
+export default Quote;

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

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

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

@@ -0,0 +1,53 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+
+.#{bem.$base}.quote{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .blockquote {
+        margin: 0;
+        padding: 0;
+    }
+
+    .figcaption {
+        padding: 0;
+    }
+
+    @include mixins.media($from:$sm-md) {
+        .blockquote {
+            .quotation {
+                display: inline;
+            }
+            &:before {
+                color: transparent;
+                content: '\201C';
+                font-size: 4em;
+                line-height: 0;
+                position: static;
+                vertical-align: -0.4em;
+                -webkit-text-stroke: 1px var(--x);
+                opacity: inherit;
+            }
+            &:after {
+                color: transparent;
+                content: '\201D';
+                font-size: 4em;
+                line-height: 0;
+                vertical-align: -0.6em;
+                margin-left: -.1em;
+                -webkit-text-stroke: 1px var(--x);
+            }
+        }
+        .figcaption {
+            margin: 0;
+        }
+    }
+}
+
+
+

package/dist/es/a/SVG/SVG.js

@@ -0,0 +1,128 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.3 */
+import * as React from 'react';
+import { useLayoutEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem';
+import { UseSVG } from "./common";
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'svg';
+const SVG = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    width,
+    height,
+    viewBox,
+    preserveAspectRatio,
+    useClassName,
+    sprite,
+    target,
+    targets,
+    source,
+    strokeWidth,
+    animated,
+    ...otherProps
+  } = _ref;
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  });
+  const useSVGProps = useMemo(() => ({
+    className: useClassName,
+    source,
+    target,
+    sprite,
+    strokeWidth
+  }), [useClassName, source, target, strokeWidth, sprite]);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    className: [baseClassName, componentClassName, userClassName, animated && styleNames.modifierAnimated].filter(e => e).join(' '),
+    id: id,
+    style: style,
+    xmlns: "http://www.w3.org/2000/svg",
+    version: "1.1",
+    preserveAspectRatio: preserveAspectRatio,
+    width: width || (!height ? '512' : undefined),
+    height: height || (!width ? '512' : undefined),
+    viewBox: viewBox
+  }, otherProps), targets ? targets.map(targetProps => /*#__PURE__*/React.createElement(UseSVG, _extends({}, useSVGProps, targetProps, {
+    key: targetProps.target
+  }))) : /*#__PURE__*/React.createElement(UseSVG, useSVGProps));
+};
+SVG.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.oneOfType([PropTypes.string, PropTypes.number])),
+  /**
+   * The height of the element
+   */
+  height: PropTypes.string,
+  /**
+   * The width of the element
+   */
+  width: PropTypes.string,
+  /**
+   * The viewBox property of the svg html container
+   */
+  viewBox: PropTypes.string,
+  /**
+   * The class to apply to the target's use tag
+   */
+  useClassName: PropTypes.string,
+  /**
+   *  The preserverveAspectRatio property of the svg html container
+   */
+  preserveAspectRatio: PropTypes.string,
+  /**
+   * The url to the sprite
+   */
+  sprite: PropTypes.string,
+  /**
+   * The id of the target in the sprite
+   */
+  target: PropTypes.string,
+  /**
+   * In case this is not a sprite but a standalone svg.
+   * Not recommended here, better use Figure.
+   * The only reason you would wanna use this instead of target
+   * is in the case you need to dynamically pass css classes
+   * to the inner svg components
+   * TODO remove and also from UseSVG
+   */
+  source: PropTypes.string,
+  /**
+   * An array of targets
+   */
+  targets: PropTypes.arrayOf(PropTypes.shape({
+    target: PropTypes.string,
+    className: PropTypes.number,
+    stroke: PropTypes.boolean,
+    strokeWidth: PropTypes.number
+  })),
+  /**
+   * The SVG property stroke-width to apply in case of a single target
+   */
+  strokeWidth: PropTypes.number,
+  /**
+   * Whether to apply an animation class (C.anim)
+   */
+  animated: PropTypes.bool
+};
+SVG.defaultProps = {
+  preserveAspectRatio: 'xMinYMin meet',
+  viewBox: '0 0 512 512',
+  sprite: '/sprite.svg'
+};
+export default SVG;

package/dist/es/a/SVG/common/UseSVG/UseSVG.js

@@ -0,0 +1,62 @@
+/* @pareto-engineering/generator-front 1.0.6 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * This component is used internally by the `SVG` component
+ * to leverage the `use` tag and read svg sprites.
+ */
+const UseSVG = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    sprite,
+    target,
+    source,
+    strokeWidth
+  } = _ref;
+  return /*#__PURE__*/React.createElement("use", {
+    className: [userClassName].filter(e => e).join(' '),
+    href: source || sprite + (target ? `#${target}` : ''),
+    style: strokeWidth ? {
+      ...style,
+      '--sw': Number(strokeWidth)
+    } : {
+      style
+    },
+    id: id
+  });
+};
+UseSVG.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 url to the svg sprite, from the root of the site, for instance : `/myimage.svg`
+   */
+  sprite: PropTypes.string,
+  /**
+   * The target image id in the sprite
+   */
+  target: PropTypes.string,
+  /**
+   * The source image in case this is not a sprite
+   */
+  // TODO check if this works
+  source: PropTypes.string,
+  /**
+   * The SVG property stroke-width
+   */
+  strokeWidth: PropTypes.number
+};
+export default UseSVG;

package/dist/es/a/SVG/common/UseSVG/index.js

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

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

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

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

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

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

@@ -0,0 +1,57 @@
+/* @pareto-engineering/generator-front 1.0.3 */
+
+@use "@pareto-engineering/bem";
+
+$anim-stroke-dash-offset:2888;
+$anim-stroke-dash-array:2999;
+$animation-time:2s;
+$animation-repeats:1;
+$animation-easing:linear;
+
+
+// TODO cleanup --custom-props
+
+@keyframes draw-stroke {
+  0% {
+    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
+  }
+
+  100% {
+    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
+  }
+}
+
+.#{bem.$base}.svg { //TODO or should it apply to svg elements altogether?
+  use {
+    fill: var(--x, transparent);
+    stroke: var(--y, transparent);
+    stroke-dasharray: var(--svg-dasharray);
+    stroke-dashoffset: var(--svg-dashoffset, 0);
+    stroke-width: var(--svg-stroke-width, 2);
+    transition: all .3s;
+  }
+
+  //&.#{bem.$modifier-animated} {
+  &.animated {
+    --svg-origin-stroke-dashoffset: #{$anim-stroke-dash-offset};
+    --svg-dasharray: #{$anim-stroke-dash-array};
+    --svg-animation-time: #{$animation-time};
+    --svg-animation-repeats: #{$animation-repeats};
+    --svg-animation-easing: #{$animation-easing};
+
+    use {
+      animation:
+        draw-stroke // animation name
+        var(--svg-animation-time) //duration
+        var(--svg-animation-easing) // easing
+        var(--svg-animation-delay, .3s) //delay TODO ?
+        var(--svg-animation-repeats) //repeat
+        forwards; //Final keyframe
+    }
+
+    &:hover,
+    &:focus {
+      //--path-animation: dash-a 1s linear 0s 1 forwards;
+    }
+  }
+}

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

@@ -0,0 +1,145 @@
+/* @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 = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    shape,
+    height,
+    overflow,
+    verticalAlign,
+    horizontalAlign
+    // ...otherProps
+  } = _ref;
+  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 === 'inverted-triangle' && /*#__PURE__*/React.createElement("div", {
+    className: "inverted-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"
+  })), shape === 'intersecting-circles' && /*#__PURE__*/React.createElement("div", {
+    className: "intersecting-circles"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "left"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "right"
+  })));
+};
+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', 'inverted-triangle', 'intersecting-circles']),
+  /**
+   * 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/index.js

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