@zohodesk/components 1.0.0-alpha-236 → 1.0.0-alpha-239

package/es/Radio/docs/Radio__custom.docs.js

@@ -0,0 +1,245 @@
+import React, { Component } from 'react';
+import Radio from '../Radio';
+import styles from '../../common/docStyle.module.css';
+export default class Radio__custom 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, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      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, {
+      customClass: {
+        customRadio: styles.radioDisabled,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      checked: true,
+      disabled: true
+    })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radioDisabled,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      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, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      id: "text1",
+      value: "1",
+      name: "category",
+      text: "Check With Label"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      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, {
+      customClass: {
+        customRadio: styles.radioDisabled,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.disabledLabel
+      },
+      id: "text3",
+      value: "1",
+      name: "name",
+      checked: true,
+      disabled: true,
+      text: "Disabled With Label"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      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, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      id: "text1",
+      value: "1",
+      name: "category",
+      text: "Check With Label",
+      palette: "danger"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      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, {
+      customClass: {
+        customRadio: styles.radioDisabled,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.disabledLabel
+      },
+      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, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      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, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      checked: true,
+      size: "small"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      checked: true
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Palette"), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      checked: true,
+      text: "Primary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      checked: true,
+      palette: "danger",
+      text: "Danger"
+    }))));
+  }
+
+}
+
+if (false) {
+  Radio__custom.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

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

@@ -0,0 +1,169 @@
+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/Responsive.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes";
 import React, { useContext, useEffect, useState, useMemo } from 'react'; // import React, { useState, useMemo, useCallback, useContext } from 'react';
 
 import PropTypes from 'prop-types';

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

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