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

package/es/FramerAnimation/FramerAnimation.js

@@ -1,206 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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/docs/Heading__default.docs.js

@@ -1,19 +0,0 @@
-import React, { Component } from 'react';
-import Heading from '../Heading';
-export default class Heading__default extends Component {
-  render() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
-      title: "Heading Text",
-      a11y: {
-        'tabindex': '0',
-        'aria-label': 'customAriaLabel'
-      }
-    }));
-  }
-}
-if (false) {
-  Heading__default.docs = {
-    folderName: 'Style Guide',
-    componentGroup: 'Accessibility'
-  };
-}

package/es/Label/docs/Label__clipped.docs.js

@@ -1,25 +0,0 @@
-import React, { Component } from 'react';
-import Label from '../Label';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Label__clipped extends Component {
-  render() {
-    return /*#__PURE__*/React.createElement("span", {
-      style: {
-        display: 'inline-block',
-        width: '200px'
-      }
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Label, {
-      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
-      id: "label8",
-      size: "medium",
-      clipped: true
-    })));
-  }
-}
-if (false) {
-  Label__clipped.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide',
-    description: ' '
-  };
-}

package/es/Label/docs/Label__custom.docs.js

@@ -1,28 +0,0 @@
-import React, { Component } from 'react';
-import Label from '../Label';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-import style from '../../common/docStyle.module.css';
-export default class Label__custom extends Component {
-  render() {
-    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Label, {
-      customClass: style.customLbl,
-      text: "Label",
-      id: "label4",
-      size: "medium",
-      palette: "default"
-    }), /*#__PURE__*/React.createElement(Label, {
-      customClass: style.customLbl,
-      text: "Label",
-      id: "label5",
-      size: "medium",
-      palette: "primary"
-    })));
-  }
-}
-if (false) {
-  Label__custom.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide',
-    description: ' '
-  };
-}

package/es/Label/docs/Label__palette.docs.js

@@ -1,40 +0,0 @@
-import React, { Component } from 'react';
-import Label from '../Label';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Label__palette extends Component {
-  render() {
-    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Label, {
-      text: "Label",
-      id: "label4",
-      size: "medium",
-      palette: "default"
-    }), /*#__PURE__*/React.createElement(Label, {
-      text: "Label",
-      id: "label5",
-      size: "medium",
-      palette: "primary"
-    }), /*#__PURE__*/React.createElement(Label, {
-      text: "Label",
-      id: "label6",
-      size: "medium",
-      palette: "secondary"
-    }), /*#__PURE__*/React.createElement(Label, {
-      text: "Label",
-      id: "label7",
-      size: "medium",
-      palette: "danger"
-    }), /*#__PURE__*/React.createElement(Label, {
-      text: "Label",
-      id: "label7",
-      size: "medium",
-      palette: "mandatory"
-    })));
-  }
-}
-if (false) {
-  Label__palette.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide',
-    description: ' '
-  };
-}

package/es/Label/docs/Label__size.docs.js

@@ -1,27 +0,0 @@
-import React, { Component } from 'react';
-import Label from '../Label';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Label__size extends Component {
-  render() {
-    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Label, {
-      text: "Label",
-      id: "label1",
-      size: "small"
-    }), /*#__PURE__*/React.createElement(Label, {
-      text: "Label",
-      id: "label2",
-      size: "medium"
-    }), /*#__PURE__*/React.createElement(Label, {
-      text: "Label",
-      id: "label3",
-      size: "large"
-    })));
-  }
-}
-if (false) {
-  Label__size.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide',
-    description: ' '
-  };
-}

package/es/Label/docs/Label__type.docs.js

@@ -1,35 +0,0 @@
-import React, { Component } from 'react';
-import Label from '../Label';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Label__type extends Component {
-  render() {
-    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Label, {
-      text: "Lorem Ipsum is simply dummy text ",
-      id: "label10",
-      size: "small",
-      type: "title"
-    }), /*#__PURE__*/React.createElement(Label, {
-      text: "Lorem Ipsum is simply dummy text ",
-      id: "label11",
-      size: "medium",
-      type: "subtitle"
-    }), /*#__PURE__*/React.createElement(Label, {
-      text: "Lorem Ipsum is simply dummy text ",
-      id: "label12",
-      size: "medium",
-      type: "subtitle"
-    }), /*#__PURE__*/React.createElement(Label, {
-      text: "Lorem Ipsum is simply dummy text ",
-      id: "label12",
-      size: "medium",
-      type: "title"
-    })));
-  }
-}
-if (false) {
-  Label__type.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide',
-    description: ' '
-  };
-}

package/es/Layout/docs/Layout__Hidden.docs.js

@@ -1,76 +0,0 @@
-import React from 'react';
-import { Container, Box } from '../';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Layout__Hidden extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        height: '500px',
-        maxWidth: '1200px',
-        margin: '0 auto'
-      }
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "column",
-      style: {
-        background: '#f5f5f5'
-      }
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      style: {
-        background: '#f8f8f8'
-      }
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "column",
-      style: {
-        background: '#f5f5f5'
-      }
-    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
-      style: {
-        background: '#666',
-        height: '45px'
-      }
-    })), /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      style: {
-        background: '#f5f5f5'
-      }
-    }, /*#__PURE__*/React.createElement(Box, {
-      hidden: ['xs']
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        background: 'var(--dot_black)',
-        width: '45px',
-        height: '100%'
-      }
-    })), /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      hidden: ['md', 'xs']
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        background: '#4e524e',
-        height: '100%'
-      }
-    })), /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        background: '#909090',
-        width: '100%',
-        height: '100%'
-      }
-    })))))), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
-      style: {
-        background: '#f1f1f1',
-        height: '28px'
-      }
-    })))));
-  }
-}
-Layout__Hidden.docs = {
-  componentGroup: 'Layout',
-  folderName: 'Style Guide',
-  description: ' ',
-  external: true
-};

package/es/Layout/docs/Layout__default.docs.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import { Container, Box } from '../';
-export default class Layout__default extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        height: '500px',
-        maxWidth: '1200px',
-        margin: '0 auto'
-      }
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      style: {
-        background: '#f5f5f5'
-      },
-      scroll: "vertical",
-      wrap: true,
-      align: "both"
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      style: {
-        background: '#f8f8f8'
-      }
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      style: {
-        background: '#f5f5f5'
-      }
-    }, /*#__PURE__*/React.createElement(Box, {
-      hidden: ['xs']
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        background: '#999',
-        width: '220px',
-        height: '100%'
-      }
-    })), /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      shrink: true
-    })))));
-  }
-}
-Layout__default.docs = {
-  componentGroup: 'Layout',
-  folderName: 'Style Guide',
-  description: ' ',
-  external: true
-};