@zohodesk/components 1.0.0-alpha-238 → 1.0.0-alpha-241

package/es/Provider.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import AppContainer from './AppContainer/AppContainer';
 import { Container } from './Layout';
+import ThemeTool from '../../common/lib/ThemeTool/ThemeTool';
 /* default mode & theme css */
 
 import '../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
@@ -51,6 +52,7 @@ export default class Provider extends React.Component {
       themeName: 'blue'
     };
     this.setTheme = this.setTheme.bind(this);
+    this.setAppearance = this.setAppearance.bind(this);
   }
 
   setAppearance(mode) {
@@ -70,51 +72,6 @@ export default class Provider extends React.Component {
       appearanceName,
       themeName
     } = this.state;
-    let themeClass = {
-      width: '20px',
-      height: '20px',
-      borderRadius: '3px',
-      display: 'flex',
-      border: '1px solid #ccc',
-      margin: '0 5px',
-      cursor: 'pointer',
-      backgroundColor: '#0a73eb'
-    };
-    let green = {
-      backgroundColor: '#26a942'
-    };
-    let red = {
-      backgroundColor: '#de3535'
-    };
-    let orange = {
-      backgroundColor: '#e57717'
-    };
-    let yellow = {
-      backgroundColor: '#e8b923'
-    };
-    let light = {
-      backgroundColor: '#fff'
-    };
-    let night = {
-      backgroundColor: '#232b38'
-    };
-    let dark = {
-      backgroundColor: '#212121'
-    };
-    let fixedPosition = {
-      position: 'fixed',
-      bottom: '0',
-      backgroundColor: '#272727',
-      padding: '10px',
-      borderRadius: '15px 15px 0 0',
-      minWidth: '100px',
-      textAlign: 'center',
-      boxShadow: '0 0 3px #000',
-      fontSize: '12px',
-      zIndex: '3',
-      display: 'flex',
-      alignItems: 'center'
-    };
     return /*#__PURE__*/React.createElement(LibraryContext.Provider, {
       value: {
         isReducedMotion: false,
@@ -129,66 +86,9 @@ export default class Provider extends React.Component {
       }
     }, /*#__PURE__*/React.createElement(Container, {
       scroll: "vertical"
-    }, this.props.children), /*#__PURE__*/React.createElement("div", {
-      style: Object.assign({}, fixedPosition, {
-        left: '20%',
-        transform: 'translate(-20%)'
-      })
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        color: '#fff'
-      }
-    }, "Appearance:"), /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex'
-      }
-    }, /*#__PURE__*/React.createElement("span", {
-      title: "Light Mode",
-      style: Object.assign({}, themeClass, light),
-      onClick: () => this.setAppearance('default')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Night Mode",
-      style: Object.assign({}, themeClass, night),
-      onClick: () => this.setAppearance('dark')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Dark Mode",
-      style: Object.assign({}, themeClass, dark),
-      onClick: () => this.setAppearance('pureDark')
-    }))), /*#__PURE__*/React.createElement("div", {
-      style: Object.assign({}, fixedPosition, {
-        left: '80%',
-        transform: 'translate(-80%)'
-      })
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        color: '#fff'
-      }
-    }, "Themes:"), /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex'
-      }
-    }, /*#__PURE__*/React.createElement("span", {
-      title: "Blue Theme",
-      style: themeClass,
-      onClick: () => this.setTheme('blue')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Green Theme",
-      style: Object.assign({}, themeClass, green),
-      onClick: () => this.setTheme('green')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Red Theme",
-      style: Object.assign({}, themeClass, red),
-      onClick: () => this.setTheme('red')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Orange Theme",
-      style: Object.assign({}, themeClass, orange),
-      onClick: () => this.setTheme('orange')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Yellow Theme",
-      style: Object.assign({}, themeClass, yellow),
-      onClick: () => this.setTheme('yellow')
-    }))), /*#__PURE__*/React.createElement("div", {
-      "data-portal": "portal1"
+    }, this.props.children), /*#__PURE__*/React.createElement(ThemeTool, {
+      onThemeChange: this.setTheme,
+      onAppearanceChange: this.setAppearance
     })));
   }
 

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: ' '
+  };
+}