@zohodesk/components 1.0.0-temp-84 → 1.0.0-test-252

package/es/Radio/docs/Radio__default.docs.js

@@ -1,165 +0,0 @@
-import React, { Component } from 'react';
-import Radio from '../Radio';
-export default class Radio__default extends Component {
-  constructor(props) {
-    super(props);
-    this.onChange = this.onChange.bind(this);
-    this.state = {
-      checked: false
-    };
-  }
-  onChange() {
-    this.setState({
-      checked: !this.state.checked
-    });
-  }
-  render() {
-    let style = {
-        margin: '10px'
-      },
-      titleStyle = {
-        fontSize: '13px',
-        padding: '15px 0',
-        textTransform: 'upperCase',
-        borderTop: '1px solid #e3e6eb'
-      },
-      spanStyle = {
-        display: 'inline-block',
-        margin: '10px 10px 10px 0'
-      };
-    return /*#__PURE__*/React.createElement("div", {
-      style: style
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        margin: '10px 0'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: titleStyle
-    }, "Default Radio Button"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Radio, {
-      onChange: this.onChange,
-      checked: this.state.checked
-    })))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: titleStyle
-    }, "Disabled Type Radio Button"), /*#__PURE__*/React.createElement("span", {
-      style: {
-        marginRight: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(Radio, {
-      checked: true,
-      disabled: true
-    })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Radio, {
-      disabled: true
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      style: titleStyle
-    }, "Label With Radio Button"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      id: "text1",
-      value: "1",
-      name: "category",
-      text: "Check With Label"
-    })), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      id: "test2",
-      checked: true,
-      active: true,
-      value: "2",
-      name: "category",
-      text: "Checked Active With Label"
-    })), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      id: "text3",
-      value: "1",
-      name: "name",
-      checked: true,
-      disabled: true,
-      text: "Disabled With Label"
-    })), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      id: "test4",
-      value: "2",
-      name: "name",
-      isReadOnly: true,
-      text: "ReadOnly With Label"
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      id: "text1",
-      value: "1",
-      name: "category",
-      text: "Check With Label",
-      palette: "danger"
-    })), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      id: "test2",
-      checked: true,
-      active: true,
-      value: "2",
-      name: "category",
-      palette: "danger",
-      text: "Checked Active With Label"
-    })), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      id: "text3",
-      value: "1",
-      name: "name",
-      checked: true,
-      disabled: true,
-      palette: "danger",
-      text: "Disabled With Label"
-    })), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      id: "test4",
-      value: "2",
-      name: "name",
-      isReadOnly: true,
-      palette: "danger",
-      text: "ReadOnly With Label"
-    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      style: titleStyle
-    }, "Size"), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      checked: true,
-      size: "small"
-    })), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      checked: true
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      style: titleStyle
-    }, "Palette"), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      checked: true,
-      text: "Primary"
-    })), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      checked: true,
-      palette: "danger",
-      text: "Danger"
-    }))));
-  }
-}
-if (false) {
-  Radio__default.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide',
-    description: ' '
-  };
-}

package/es/Responsive/docs/Responsive__Custom.docs.js

@@ -1,214 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { ResponsiveSender, ResponsiveReceiver } from '../CustomResponsive';
-import { Container, Box } from '../../Layout';
-import Radio from '../../Radio/Radio';
-// eslint-disable-next-line css-modules/no-unused-class
-import style from './style.module.css';
-
-// eslint-disable-next-line react/prop-types
-function WindowSizeBar(_ref) {
-  let {
-    isTouchDevice
-  } = _ref;
-  let [{
-    windowWidth,
-    windowHeight
-  }, setState] = useState({
-    windowWidth: window.innerWidth,
-    windowHeight: window.innerHeight
-  });
-  useEffect(() => {
-    function handler() {
-      setState({
-        windowWidth: window.innerWidth,
-        windowHeight: window.innerHeight
-      });
-    }
-    window.addEventListener('resize', handler);
-    return () => window.removeEventListener('resize', handler);
-  });
-  return /*#__PURE__*/React.createElement(Box, {
-    className: style.header
-  }, ` Width: ${windowWidth} * Height: ${windowHeight} * isTouchDevice: ${isTouchDevice} `);
-}
-// eslint-disable-next-line camelcase
-export default class Responsive__Custom extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      method: 'orFunction'
-    };
-    this.customQuery = this.customQuery.bind(this);
-    this.handleMethodChange = this.handleMethodChange.bind(this);
-    this.switchToAnd = this.handleMethodChange.bind(this, 'AndFunction');
-    this.switchToOr = this.handleMethodChange.bind(this, 'orFunction');
-  }
-  customQuery(_ref2) {
-    let {
-      mediaQueryOR,
-      mediaQueryAND,
-      isTouchDevice
-    } = _ref2;
-    const {
-      method
-    } = this.state;
-    return {
-      isTouchDevice,
-      isQureyMatched: method === 'orFunction' ? mediaQueryOR([{
-        minHeight: 700,
-        maxHeight: 800
-      }, {
-        minWidth: 700,
-        maxWidth: 800
-      }
-
-      // {
-      //   minWidth: 700
-      // },
-      // {
-      //   minHeight: 700
-      // }
-
-      // {
-      //   minHeight: 700,
-      //   minWidth: 700
-      // },
-      // {
-      //   maxHeight: 600,
-      //   maxWidth: 600
-      // }
-
-      // {
-      //   minHeight: 700,
-      //   maxHeight: 800,
-      //   minWidth: 700,
-      //   maxWidth: 800
-      // }
-
-      // {
-      //   minWidth: 700,
-      //   minHeight: 700
-      // }
-
-      // {
-      //   minWidth: 700,
-      //   minHeight: 700,
-      //   maxHeight: 800
-      // }
-
-      // {
-      //   minWidth: 700,
-      //   maxWidth: 800,
-      //   minHeight: 700,
-      //   maxHeight: 800
-      // }
-      ]) : method === 'AndFunction' ? mediaQueryAND([{
-        minHeight: 700,
-        maxHeight: 800
-      }, {
-        minWidth: 700,
-        maxWidth: 800
-      }
-
-      // {
-      //   minWidth: 700
-      // },
-      // {
-      //   minHeight: 700
-      // }
-
-      // {
-      //   minHeight: 700,
-      //   minWidth: 700
-      // },
-      // {
-      //   maxHeight: 600,
-      //   maxWidth: 600
-      // }
-
-      // {
-      //   minHeight: 700,
-      //   maxHeight: 800,
-      //   minWidth: 700,
-      //   maxWidth: 800
-      // }
-
-      // {
-      //   minWidth: 700,
-      //   minHeight: 700
-      // }
-
-      // {
-      //   minWidth: 700,
-      //   minHeight: 700,
-      //   maxHeight: 800
-      // }
-
-      // {
-      //   minWidth: 700,
-      //   maxWidth: 800,
-      //   minHeight: 700,
-      //   maxHeight: 800
-      // }
-      ]) : ''
-    };
-  }
-  handleMethodChange(value) {
-    this.setState({
-      method: value
-    });
-  }
-  render() {
-    let {
-      method
-    } = this.state;
-    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ResponsiveSender, null, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.customQuery
-    }, _ref3 => {
-      let {
-        isQureyMatched,
-        isTouchDevice
-      } = _ref3;
-      return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(WindowSizeBar, {
-        isTouchDevice: isTouchDevice
-      }), /*#__PURE__*/React.createElement(Box, {
-        flexible: true,
-        scroll: "vertical"
-      }, /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        align: "vertical",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Radio, {
-        text: "AND Function",
-        onChange: this.switchToAnd,
-        name: "AndFunction",
-        checked: method === 'AndFunction'
-      }), /*#__PURE__*/React.createElement("div", {
-        style: {
-          margin: '20px'
-        }
-      }, /*#__PURE__*/React.createElement(Radio, {
-        text: "OR Function",
-        onChange: this.switchToOr,
-        name: "orFunction",
-        checked: method === 'orFunction'
-      }))), /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        align: "both",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Box, {
-        shrink: true,
-        className: ` ${style.box} ${isQureyMatched ? style.selected : ''} `
-      }, "minWidth: 700, maxWidth: 800 ||  minHeight: 700, maxHeight: 800"))));
-    })));
-  }
-}
-if (false) {
-  // eslint-disable-next-line camelcase
-  Responsive__Custom.docs = {
-    componentGroup: 'Layout',
-    folderName: 'Style Guide'
-  };
-}

package/es/Responsive/docs/Responsive__default.docs.js

@@ -1,95 +0,0 @@
-/* eslint-disable camelcase */
-/* eslint-disable react/forbid-component-props */
-// Example1.js
-
-import React from 'react';
-import { ResponsiveReceiver } from '..';
-import { Container, Box } from '../../Layout';
-import style from './style.module.css';
-export default class Responsive__default extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ResponsiveReceiver, null, _ref => {
-      let {
-        breakPoint,
-        deviceUpto,
-        deviceBetween,
-        deviceOnly,
-        isTouchDevice
-      } = _ref;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-        className: style.header
-      }, ` ${breakPoint} ${isTouchDevice} `), /*#__PURE__*/React.createElement(Box, {
-        flexible: true,
-        scroll: "vertical"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: style.subHeading
-      }, "Common Break Points"), /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MOBILE']) ? style.selected : ''} `
-      }, "MOBILE - 480"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['TABLET_S']) ? style.selected : ''}  `
-      }, "TABLET_S - 640"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['TABLET']) ? style.selected : ''} `
-      }, "TABLET - 768"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['LAPTOP_S']) ? style.selected : ''}  `
-      }, "LAPTOP_S - 1024"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['LAPTOP']) ? style.selected : ''} `
-      }, "LAPTOP - 1440")), /*#__PURE__*/React.createElement("div", {
-        className: style.subHeading
-      }, "Other Break Points"), /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MONITOR']) ? style.selected : ''} `
-      }, "MONITOR - 1920"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MONITOR_M']) ? style.selected : ''} `
-      }, "MONITOR_M - 1600"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['LAPTOP_M']) ? style.selected : ''}  `
-      }, "LAPTOP_M - 1280"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['TABLET_M']) ? style.selected : ''} `
-      }, "TABLET_M - 720"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MOBILE_M']) ? style.selected : ''} `
-      }, "MOBILE_M - 375.04"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MOBILE_S']) ? style.selected : ''}  `
-      }, "MOBILE_S - 360"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MOBILE_XS']) ? style.selected : ''} `
-      }, "MOBILE_XS - 320")), /*#__PURE__*/React.createElement("div", {
-        className: style.subHeading
-      }, "Device Between"), /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceBetween('MOBILE_XS', 'TABLET') ? style.selected : ''} `
-      }, "MOBILE - TABLET"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceBetween('TABLET_M', 'LAPTOP') ? style.selected : ''} `
-      }, "TABLET - LAPTOP"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceBetween('LAPTOP_M', 'MONITOR') ? style.selected : ''}  `
-      }, "LAPTOP - MONITOR")), /*#__PURE__*/React.createElement("div", {
-        className: style.subHeading
-      }, "Device Upto"), /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceUpto('MONITOR') ? style.selected : ''} `
-      }, "MONITOR"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceUpto('LAPTOP') ? style.selected : ''} `
-      }, "LAPTOP"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceUpto('TABLET') ? style.selected : ''}  `
-      }, "TABLET"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceUpto('MOBILE') ? style.selected : ''}  `
-      }, "MOBILE"))));
-    }));
-  }
-}
-if (false) {
-  Responsive__default.docs = {
-    componentGroup: 'Layout',
-    folderName: 'Style Guide'
-  };
-}

package/es/Responsive/docs/style.module.css

@@ -1,56 +0,0 @@
-.header{
-  color: #fff;
-  font-size: 24px;
-  background-color: #c60000;
-  padding: 10px;
-  text-align: center;
-  margin: 10px 6px;
-}[dir=ltr] .header{
-  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-}[dir=rtl] .header{
-  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.5);
-}
-.box{
-  height: 80px;
-  line-height: 80px;
-  min-width: 300px;
-  background-color: #ffbb11;
-  text-align: center;
-  margin:6px;
-  padding: 0 100x;
-}
-.selected{
-  background-color: #60de55
-}
-.subHeading{
-  position: sticky;
-  top: 0;
-  text-align: center;
-  padding: 10px;
-  background-color: #fff
-}
-
-/* ---layout css--- */
-.contentBar{
-  height: 20px;
-  background-color: rgb(142, 156, 169);
-  margin: 6px 10px
-}
-.wrapper{
-  position: absolute;
-  width: 60%;
-  top: 50%;
-  border: 1px solid #aaa;
-  border-radius: 4px
-}
-[dir=ltr] .wrapper{
-  transform: translate(-50%,-50%);
-  left: 50%
-}
-[dir=rtl] .wrapper{
-  transform: translate(50%,-50%);
-  right: 50%
-}
-.avatar{
-  margin:20px auto
-}