@pareto-engineering/design-system 4.0.0-alpha.5 → 4.0.0-alpha.9

package/dist/es/a/AnimatedBlobs/AnimatedBlobs.js

@@ -0,0 +1,82 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useInsertionEffect } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'animated-blobs';
+
+/**
+ * This is the component description.
+ */
+const AnimatedBlobs = ({
+  id,
+  className: userClassName,
+  color,
+  style,
+  height,
+  width,
+  opacity
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: {
+      ...style,
+      '--blob-color': `var(--${color})`,
+      '--height': height,
+      '--opacity': opacity,
+      '--width': width
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "shape-blob"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "shape-blob one"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "shape-blob two"
+  }));
+};
+AnimatedBlobs.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 blobs
+   */
+  color: PropTypes.string,
+  /**
+   * The height of the blobs
+   */
+  height: PropTypes.string,
+  /**
+   * The width of the blobs
+   */
+  width: PropTypes.string,
+  /**
+   * The opacity of the blobs
+   */
+  opacity: PropTypes.string
+};
+AnimatedBlobs.defaultProps = {
+  color: 'background-mesh',
+  height: '200px',
+  width: '200px',
+  opacity: '0.7'
+};
+export default AnimatedBlobs;

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

@@ -0,0 +1 @@
+export { default as AnimatedBlobs } from "./AnimatedBlobs";

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

@@ -0,0 +1,87 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+@keyframes transform {
+  0%,
+  100% {
+    border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%;
+  }
+
+  20% {
+    border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%;
+  }
+
+  40% {
+    border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%;
+  }
+
+  60% {
+    border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%;
+  }
+
+  80% {
+    border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%;
+  }
+}
+@keyframes movement_one {
+  0%,
+  100% {
+    transform: none;
+  }
+
+  50% {
+    transform: translate(50%, 20%) rotateY(10deg) scale(1.2);
+  }
+}
+@keyframes movement_two {
+  0%,
+  500% {
+    transform: none;
+  }
+
+  50% {
+    transform: translate(50%, 20%) rotate(-200deg) scale(1.2);
+  }
+}
+
+.#{bem.$base}.animated-blobs {
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 100%;
+
+  > .shape-blob {
+    animation:
+      transform 20s ease-in-out infinite both alternate,
+      movement_one 40s ease-in-out infinite both;
+    background: var(--blob-color);
+    border-radius: 30% 50% 20% 40%;
+    height: var(--height);
+    left: 70%;
+    opacity: var(--opacity);
+    position: absolute;
+    top: 50%;
+    width: var(--width);
+  }
+
+  > .shape-blob.one {
+    animation: transform 30s ease-in-out infinite both alternate,
+      movement_two 60s ease-in-out infinite both;
+    height: calc(var(--height) * 2.5);
+    left: -200px;
+    top: -150px;
+    transform: rotate(-180deg);
+    width: calc(var(--width) * 2.5);
+  }
+
+  > .shape-blob.two {
+    animation: transform 30s ease-in-out infinite both alternate,
+      movement_two 60s ease-in-out infinite both;
+    height: calc(var(--height) * 1.75);
+    left: 500px;
+    top: -150px;
+    transform: rotate(-180deg);
+    width: calc(var(--width) * 1.75);
+  }
+}

package/dist/es/a/AnimatedGradient/AnimatedGradient.js

@@ -0,0 +1,48 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useEffect, useInsertionEffect } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+import { Gradient } from "./webGIRenderer";
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'animated-gradient';
+
+/**
+ * This is the component description.
+ */
+const AnimatedGradient = ({
+  className: userClassName
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const isClient = typeof window !== 'undefined';
+  useEffect(() => {
+    // Only initialize the Gradient if we're in the browser
+    if (isClient) {
+      const gradient = new Gradient();
+      gradient.initGradient('#gradient-canvas');
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement("canvas", {
+    id: "gradient-canvas",
+    "data-transition-in": true,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
+    // {...otherProps}
+  });
+};
+
+AnimatedGradient.propTypes = {
+  /**
+  * The HTML class names for this element
+  */
+  className: PropTypes.string
+};
+AnimatedGradient.defaultProps = {
+  // primaryColor:'black',
+};
+export default AnimatedGradient;

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

@@ -0,0 +1 @@
+export { default as AnimatedGradient } from "./AnimatedGradient";

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

@@ -0,0 +1,14 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.animated-gradient {
+  --gradient-color-1: var(--background-mesh);
+  --gradient-color-2: var(--soft-background-mesh);
+  --gradient-color-3: var(--background-mesh);
+  --gradient-color-4: var(--soft-background-mesh);
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 100%;
+}