@pareto-engineering/design-system 0.0.1-alpha.8 → 0.0.4-testing-id.0

package/dist/cjs/a/SVG/SVG.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
+var _common = require("./common");
+var _excluded = ["id", "className", "style", "width", "height", "viewBox", "preserveAspectRatio", "useClassName", "sprite", "target", "targets", "source", "strokeWidth", "animated"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+// Local Definitions
+
+var baseClassName = _bem.default.base;
+var componentClassName = 'svg';
+var SVG = _ref => {
+  var {
+      id,
+      className: userClassName,
+      style,
+      width,
+      height,
+      viewBox,
+      preserveAspectRatio,
+      useClassName,
+      sprite,
+      target,
+      targets,
+      source,
+      strokeWidth,
+      animated
+    } = _ref,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  (0, React.useLayoutEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  });
+  var useSVGProps = (0, React.useMemo)(() => ({
+    className: useClassName,
+    source,
+    target,
+    sprite,
+    strokeWidth
+  }), [useClassName, source, target, strokeWidth, sprite]);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    className: [baseClassName, componentClassName, userClassName, animated && _bem.default.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(_common.UseSVG, _extends({}, useSVGProps, targetProps, {
+    key: targetProps.target
+  }))) : /*#__PURE__*/React.createElement(_common.UseSVG, useSVGProps));
+};
+SVG.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
+  /**
+   * The height of the element
+   */
+  height: _propTypes.default.string,
+  /**
+   * The width of the element
+   */
+  width: _propTypes.default.string,
+  /**
+   * The viewBox property of the svg html container
+   */
+  viewBox: _propTypes.default.string,
+  /**
+   * The class to apply to the target's use tag
+   */
+  useClassName: _propTypes.default.string,
+  /**
+   *  The preserverveAspectRatio property of the svg html container
+   */
+  preserveAspectRatio: _propTypes.default.string,
+  /**
+   * The url to the sprite
+   */
+  sprite: _propTypes.default.string,
+  /**
+   * The id of the target in the sprite
+   */
+  target: _propTypes.default.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.default.string,
+  /**
+   * An array of targets
+   */
+  targets: _propTypes.default.arrayOf(_propTypes.default.shape({
+    target: _propTypes.default.string,
+    className: _propTypes.default.number,
+    stroke: _propTypes.default.boolean,
+    strokeWidth: _propTypes.default.number
+  })),
+  /**
+   * The SVG property stroke-width to apply in case of a single target
+   */
+  strokeWidth: _propTypes.default.number,
+  /**
+   * Whether to apply an animation class (C.anim)
+   */
+  animated: _propTypes.default.bool
+};
+SVG.defaultProps = {
+  preserveAspectRatio: 'xMinYMin meet',
+  viewBox: '0 0 512 512',
+  sprite: '/sprite.svg'
+};
+var _default = SVG;
+exports.default = _default;

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

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/**
+ * This component is used internally by the `SVG` component
+ * to leverage the `use` tag and read svg sprites.
+ */
+var UseSVG = _ref => {
+  var {
+    id,
+    className: userClassName,
+    style,
+    sprite,
+    target,
+    source,
+    strokeWidth
+  } = _ref;
+  return /*#__PURE__*/React.createElement("use", {
+    className: [userClassName].filter(e => e).join(' '),
+    href: source || sprite + (target ? "#".concat(target) : ''),
+    style: strokeWidth ? _objectSpread(_objectSpread({}, style), {}, {
+      '--sw': Number(strokeWidth)
+    }) : {
+      style
+    },
+    id: id
+  });
+};
+UseSVG.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+  /**
+   * The url to the svg sprite, from the root of the site, for instance : `/myimage.svg`
+   */
+  sprite: _propTypes.default.string,
+  /**
+   * The target image id in the sprite
+   */
+  target: _propTypes.default.string,
+  /**
+   * The source image in case this is not a sprite
+   */
+  // TODO check if this works
+  source: _propTypes.default.string,
+  /**
+   * The SVG property stroke-width
+   */
+  strokeWidth: _propTypes.default.number
+};
+var _default = UseSVG;
+exports.default = _default;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UseSVG", {
+  enumerable: true,
+  get: function get() {
+    return _UseSVG.default;
+  }
+});
+var _UseSVG = _interopRequireDefault(require("./UseSVG"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UseSVG", {
+  enumerable: true,
+  get: function get() {
+    return _UseSVG.UseSVG;
+  }
+});
+var _UseSVG = require("./UseSVG");

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SVG", {
+  enumerable: true,
+  get: function get() {
+    return _SVG.default;
+  }
+});
+var _SVG = _interopRequireDefault(require("./SVG"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/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/cjs/a/Shapes/Shapes.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// Local Definitions
+
+var baseClassName = _bem.default.base;
+var componentClassName = 'shapes';
+
+/**
+ * This is the component description.
+ */
+var Shapes = _ref => {
+  var {
+    id,
+    className: userClassName,
+    style,
+    shape,
+    height,
+    overflow,
+    verticalAlign,
+    horizontalAlign
+    // ...otherProps
+  } = _ref;
+  (0, React.useLayoutEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: _objectSpread(_objectSpread({}, 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.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+  /**
+   * The height of the shape.
+   */
+  height: _propTypes.default.string,
+  /**
+   * The vertical alignment of the shape.
+   */
+  verticalAlign: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
+  /**
+   * The horizontal alignment of the shape.
+   */
+  horizontalAlign: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
+  /**
+   * The options of a shape to use
+   */
+  shape: _propTypes.default.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.default.oneOf(['hidden', 'visible'])
+};
+Shapes.defaultProps = {
+  verticalAlign: 'center',
+  horizontalAlign: 'center',
+  shape: 'triangle',
+  overflow: 'hidden'
+};
+var _default = Shapes;
+exports.default = _default;

package/dist/cjs/a/Shapes/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Shapes", {
+  enumerable: true,
+  get: function get() {
+    return _Shapes.default;
+  }
+});
+var _Shapes = _interopRequireDefault(require("./Shapes"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }