@zohodesk/components 1.0.0-temp-84 → 1.0.0-temp-107

package/es/FramerAnimation/FramerAnimation.js

@@ -0,0 +1,206 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { motion, AnimatePresence, AnimateSharedLayout } from "framer-motion";
+export default class FramerAnimation extends Component {
+  constructor(props) {
+    super(props);
+    this.getAnimationVariant = this.getAnimationVariant.bind(this); // this.onDragEnd = this.onDragEnd.bind(this);
+  }
+
+  getAnimationVariant(argm) {
+    const {
+      enterDelay,
+      exitDelay,
+      enterDuration,
+      exitDuration
+    } = this.props;
+
+    switch (argm) {
+      case "fade":
+        return {
+          hide: {
+            opacity: 0,
+            transition: {
+              delay: enterDelay,
+              duration: enterDuration
+            }
+          },
+          show: {
+            opacity: 1,
+            transition: {
+              delay: exitDelay,
+              duration: exitDuration
+            }
+          }
+        };
+
+      case "expand":
+        return {
+          hide: {
+            scale: 0,
+            transition: {
+              delay: enterDelay,
+              duration: enterDuration
+            }
+          },
+          show: {
+            scale: 1,
+            transition: {
+              delay: exitDelay,
+              duration: exitDuration
+            }
+          }
+        };
+
+      case "flyDown":
+        return {
+          hide: {
+            translateY: "-100%",
+            transition: {
+              delay: enterDelay,
+              duration: enterDuration
+            }
+          },
+          show: {
+            translateY: "0%",
+            transition: {
+              delay: exitDelay,
+              duration: exitDuration
+            }
+          }
+        };
+
+      case "flyLeft":
+        return {
+          hide: {
+            translateX: "100%",
+            transition: {
+              delay: enterDelay,
+              duration: enterDuration
+            }
+          },
+          show: {
+            translateX: "0%",
+            transition: {
+              delay: exitDelay,
+              duration: exitDuration
+            }
+          }
+        };
+
+      case "flyRight":
+        return {
+          hide: {
+            translateX: "-100%",
+            transition: {
+              delay: enterDelay,
+              duration: enterDuration
+            }
+          },
+          show: {
+            translateX: "0%",
+            transition: {
+              delay: exitDelay,
+              duration: exitDuration
+            }
+          }
+        };
+
+      case "slideDown":
+        return {
+          hide: {
+            height: 0,
+            overflow: 'hidden',
+            origin: 0,
+            transition: {
+              delay: enterDelay,
+              duration: enterDuration
+            }
+          },
+          show: {
+            height: "auto",
+            overflow: 'hidden',
+            origin: 0,
+            transition: {
+              delay: exitDelay,
+              duration: exitDuration
+            }
+          }
+        };
+    }
+  } // onDragEnd(event, info) {
+  //     const { onDragEnd } = this.props;
+  //     onDragEnd && onDragEnd(event, info)
+  // }
+
+
+  render() {
+    const {
+      runOnMount,
+      children,
+      key,
+      isActive,
+      type,
+      direction,
+      isCustomize,
+      layout,
+      layoutId,
+      animationType,
+      className
+    } = this.props;
+    const variant = this.getAnimationVariant(`${type}${direction}`);
+    return !isCustomize ? runOnMount ? /*#__PURE__*/React.createElement(AnimatePresence, {
+      exitBeforeEnter: true
+    }, isActive ? /*#__PURE__*/React.createElement(motion.div, {
+      key: key,
+      variants: variant,
+      initial: "hide",
+      animate: "show",
+      exit: "hide",
+      layout: layout,
+      layoutId: layoutId,
+      type: animationType,
+      className: className // drag
+      // onDragEnd={this.onDragEnd}
+
+    }, children) : null) : /*#__PURE__*/React.createElement(motion.div, {
+      key: key,
+      variants: variant,
+      animate: isActive ? "hide" : "show",
+      layout: layout,
+      layoutId: layoutId,
+      type: animationType,
+      className: className
+    }, children) : /*#__PURE__*/React.createElement(motion.div, props);
+  }
+
+}
+FramerAnimation.propTypes = {
+  initial: PropTypes.bool,
+  children: PropTypes.node,
+  key: PropTypes.string,
+  type: PropTypes.string,
+  enterDelay: PropTypes.string,
+  exitDelay: PropTypes.string,
+  enterDuration: PropTypes.string,
+  exitDuration: PropTypes.string,
+  layoutId: PropTypes.string,
+  layout: PropTypes.oneOf(["position", "size"]),
+  //or boolean,
+  direction: PropTypes.string,
+  runOnMount: PropTypes.bool,
+  animationType: PropTypes.oneOf(["spring", "tween"]),
+  className: PropTypes.string
+};
+FramerAnimation.defaultProps = {
+  enterDelay: 0,
+  exitDelay: 0,
+  enterDuration: 0.3,
+  exitDuration: 0.3,
+  type: 'fade',
+  direction: '',
+  layout: false,
+  runOnMount: false,
+  className: '',
+  animationType: 'tween'
+};

package/es/FramerAnimation/docs/FramerAnimation__default.docs.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import FramerAnimation from '../FramerAnimation';
+import Select from '../../Select/Select';
+import Button from '../../Button/Button';
+let animationList = [{
+  text: 'fade',
+  type: 'fade',
+  id: 'animate-1'
+}, {
+  text: 'expand',
+  type: 'expand',
+  id: 'animate-2'
+}, {
+  text: 'fly_Left',
+  type: 'fly',
+  direction: 'Left',
+  id: 'animate-3'
+}, {
+  text: 'fly_Right',
+  type: 'fly',
+  direction: 'Right',
+  id: 'animate-4'
+}, {
+  text: 'fly_Down',
+  type: 'fly',
+  direction: 'Down',
+  id: 'animate-5'
+}, {
+  text: 'slide_Down',
+  type: 'slide',
+  direction: 'Down',
+  id: 'animate-6'
+}];
+export default class FramerAnimation__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: animationList[0],
+      isActive: false,
+      x: 0,
+      y: 0
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleView = this.handleView.bind(this); // this.onDragEnd = this.onDragEnd.bind(this);
+  }
+
+  handleChange(fieldId, value) {
+    this.setState({
+      value,
+      isActive: false
+    });
+  }
+
+  handleView() {
+    this.setState({
+      isActive: !this.state.isActive
+    });
+  } // onDragEnd(event, info) {
+  //     this.setState({ x: info.point.x, y: info.point.y })
+  // }
+
+
+  render() {
+    let {
+      value,
+      isActive
+    } = this.state;
+    let animate = {
+      width: '200px',
+      height: '100px',
+      background: 'var(--dot_black)',
+      textAlign: 'center',
+      color: 'var(--dot_white)',
+      lineHeight: '100px' // position:' absolute',
+      // left: this.state.x,
+      // top: this.state.y
+
+    };
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '30%',
+        display: 'flex',
+        marginLeft: "20px"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: "30px",
+        display: 'flex'
+      }
+    }, /*#__PURE__*/React.createElement(Select, {
+      onChange: this.handleChange,
+      options: animationList,
+      selectedValue: value.id
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginLeft: "20px",
+        marginRight: "20px"
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: this.handleView
+    }, isActive ? 'show' : 'hide'))), /*#__PURE__*/React.createElement(FramerAnimation, {
+      runOnMount: true,
+      type: value.type,
+      direction: value.direction,
+      isActive: isActive,
+      key: value.id,
+      id: value.id,
+      enterDuration: "0.8",
+      exitrDuration: "0.8" // onDragEnd={this.onDragEnd}
+
+    }, /*#__PURE__*/React.createElement("div", {
+      style: animate
+    }, "Animation"))));
+  }
+
+}
+
+if (false) {
+  FramerAnimation__default.docs = {
+    componentGroup: 'Animation',
+    folderName: 'Animations'
+  };
+}

package/es/Heading/Heading.module.css

@@ -1,5 +1,5 @@
-.reset {
-  font-size: initial;
-  font-weight: initial;
-  margin: initial;
+.reset {
+  font-size: initial;
+  font-weight: initial;
+  margin: initial;
 }

package/es/Label/Label.js

@@ -1,5 +1,5 @@
-/* eslint css-modules/no-unused-class: [2, { markAsUsed: [
-  'small', 'medium', 'large', 'title', 'subtitle', 'default', 'primary', 'secondary', 'danger', 'mandatory'
+/* eslint css-modules/no-unused-class: [2, { markAsUsed: [
+  'small', 'medium', 'large', 'title', 'subtitle', 'default', 'primary', 'secondary', 'danger', 'mandatory'
 ]}] */
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
@@ -19,7 +19,8 @@ export default class Label extends React.Component {
       onClick,
       dataId,
       variant,
-      customClass
+      customClass,
+      id
     } = this.props;
     return /*#__PURE__*/React.createElement("label", {
       className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
@@ -27,7 +28,8 @@ export default class Label extends React.Component {
       htmlFor: htmlFor,
       "data-title": title,
       "data-id": dataId,
-      onClick: onClick
+      onClick: onClick,
+      id: id
     }, text);
   }
 }

package/es/Label/Label.module.css

@@ -1,52 +1,52 @@
-.varClass {
-  /* label default variables */
-  --label_font_size: var(--zd_font_size14);
-  --label_text_color: var(--zdt_label_default_text);
-  --label_font_family: var(--zd_regular);
-  --label_cursor: default;
-  --label_line_height: var(--zd_size18);
-}
-.label {
-  composes: varClass;
-  vertical-align: middle;
-  line-height: var(--label_line_height);
-  font-size: var(--label_font_size);
-  color: var(--label_text_color);
-  font-family: var(--label_font_family);
-  cursor: var(--label_cursor);
-}
-.xsmall {
-  --label_font_size: var(--zd_font_size12);
-}
-.small {
-  --label_font_size: var(--zd_font_size13);
-}
-.medium {
-  --label_font_size: var(--zd_font_size14);
-}
-.large {
-  --label_font_size: var(--zd_font_size26);
-  composes: semibold from '../common/common.module.css';
-}
-.pointer {
-  --label_cursor: pointer;
-}
-.cursor {
-  --label_cursor: default;
-}
-.title {
-  display: block;
-}
-.subtitle {
-  display: inline-block;
-}
-.font_default {
-  --label_font_family: var(--zd_regular);
-}
-.font_primary {
-  --label_font_family: var(--zd_semibold);
-  composes: ftsmooth from '../common/common.module.css';
-}
-.dotted {
-  composes: dotted from '../common/common.module.css';
-}
+.varClass {
+  /* label default variables */
+  --label_font_size: var(--zd_font_size14);
+  --label_text_color: var(--zdt_label_default_text);
+  --label_font_family: var(--zd_regular);
+  --label_cursor: default;
+  --label_line_height: var(--zd_size18);
+}
+.label {
+  composes: varClass;
+  vertical-align: middle;
+  line-height: var(--label_line_height);
+  font-size: var(--label_font_size);
+  color: var(--label_text_color);
+  font-family: var(--label_font_family);
+  cursor: var(--label_cursor);
+}
+.xsmall {
+  --label_font_size: var(--zd_font_size12);
+}
+.small {
+  --label_font_size: var(--zd_font_size13);
+}
+.medium {
+  --label_font_size: var(--zd_font_size14);
+}
+.large {
+  --label_font_size: var(--zd_font_size26);
+  composes: semibold from '../common/common.module.css';
+}
+.pointer {
+  --label_cursor: pointer;
+}
+.cursor {
+  --label_cursor: default;
+}
+.title {
+  display: block;
+}
+.subtitle {
+  display: inline-block;
+}
+.font_default {
+  --label_font_family: var(--zd_regular);
+}
+.font_primary {
+  --label_font_family: var(--zd_semibold);
+  composes: ftsmooth from '../common/common.module.css';
+}
+.dotted {
+  composes: dotted from '../common/common.module.css';
+}

package/es/Label/LabelColors.module.css

@@ -1,21 +1,21 @@
-.default {
-  --label_text_color: var(--zdt_label_default_text);
-}
-.primary {
-  --label_text_color: var(--zdt_label_primary_text);
-}
-.secondary {
-  --label_text_color: var(--zdt_label_secondary_text);
-}
-.danger {
-  --label_text_color: var(--zdt_label_danger_text);
-}
-.mandatory {
-  --label_text_color: var(--zdt_label_mandatory_text);
-}
-.disable {
-  --label_text_color: var(--zdt_label_disable_text);
-}
-.dark {
-  --label_text_color: var(--zdt_label_dark_text);
+.default {
+  --label_text_color: var(--zdt_label_default_text);
+}
+.primary {
+  --label_text_color: var(--zdt_label_primary_text);
+}
+.secondary {
+  --label_text_color: var(--zdt_label_secondary_text);
+}
+.danger {
+  --label_text_color: var(--zdt_label_danger_text);
+}
+.mandatory {
+  --label_text_color: var(--zdt_label_mandatory_text);
+}
+.disable {
+  --label_text_color: var(--zdt_label_disable_text);
+}
+.dark {
+  --label_text_color: var(--zdt_label_dark_text);
 }