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

package/es/DropBox/docs/DropBox__size.docs.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import DropBox from '../DropBox';
+export default class DropBox__size extends Component {
+  render() {
+    let style = {
+      height: '80px',
+      width: '100px',
+      position: 'relative',
+      display: 'inline-block',
+      background: '#e6e5e5',
+      fontSize: '14px'
+    },
+        boxstyle = {
+      height: '100px',
+      textAlign: 'center',
+      fontSize: 'var(--zd_size20)',
+      listStyleType: 'none',
+      padding: 0,
+      margin: 0
+    },
+        containerStyle = {
+      display: 'inline-block',
+      verticalAlign: 'top',
+      width: 'calc(33.3333333% - 300px)',
+      marginBottom: '150px',
+      marginLeft: '275px'
+    },
+        dropBoxStyle = {
+      display: 'flex',
+      flexWrap: 'wrap',
+      flexDirection: 'row',
+      justifyContent: 'right'
+    };
+    let sizes = ['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'default'];
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        dropBoxStyle
+      }
+    }, sizes.map((size, i) => /*#__PURE__*/React.createElement("div", {
+      style: containerStyle,
+      key: i
+    }, /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(DropBox, {
+      size: size,
+      isActive: true
+    }, /*#__PURE__*/React.createElement("ul", {
+      style: boxstyle
+    }, /*#__PURE__*/React.createElement("li", null, "DropBox"), /*#__PURE__*/React.createElement("li", null, "Size - ", size)))))));
+  }
+
+}
+
+if (false) {
+  DropBox__size.docs = {
+    componentGroup: 'Atom',
+    folderName: 'Style Guide',
+    external: true,
+    description: ' '
+  };
+}

package/es/DropDown/docs/DropDownHeading__custom.docs.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import DropDownHeading from '../DropDownHeading';
+import styles from '../../common/docStyle.module.css';
+export default class DropDownHeading__custom extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DropDownHeading, {
+      customClass: styles.dropdownheading,
+      text: "DropDownHeading"
+    }), /*#__PURE__*/React.createElement(DropDownHeading, {
+      customClass: styles.dropdownheading,
+      palette: "dark",
+      text: "DropDownHeading"
+    }));
+  }
+
+}
+
+if (false) {
+  DropDownHeading__custom.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide'
+  };
+}

package/es/DropDown/docs/DropDownHeading__default.docs.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import DropDownHeading from '../DropDownHeading';
+export default class DropDownHeading__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DropDownHeading, {
+      text: "DropDownHeading"
+    }), /*#__PURE__*/React.createElement(DropDownHeading, {
+      text: "DropDownHeading1"
+    }, /*#__PURE__*/React.createElement("span", null, "Test")), /*#__PURE__*/React.createElement(DropDownHeading, {
+      text: "DropDownHeading2"
+    }));
+  }
+
+}
+
+if (false) {
+  DropDownHeading__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide'
+  };
+}

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

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

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

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

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

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

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

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

package/es/Layout/docs/Layout__four_Column.docs.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Container, Box } from '../';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class Layout__four_Column 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'
+      },
+      align: "top"
+    }, /*#__PURE__*/React.createElement(Box, {
+      hidden: ['xs']
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: 'var(--dot_black)',
+        width: '220px',
+        height: '100%'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      hidden: ['xs']
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#4e524e',
+        width: '320px',
+        height: '100%'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#909090',
+        height: '100%'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      hidden: ['sm', 'xs', 'md']
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#4e524e',
+        width: '320px',
+        height: '100%'
+      }
+    })))))), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#f1f1f1',
+        height: '28px'
+      }
+    })))));
+  }
+
+}
+Layout__four_Column.docs = {
+  componentGroup: 'Layout',
+  folderName: 'Style Guide',
+  description: ' ',
+  external: true
+};

package/es/Layout/docs/Layout__three_Column.docs.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Container, Box } from '../';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class Layout__three_Column 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: '220px',
+        height: '100%'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      hidden: ['xs']
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#4e524e',
+        width: '320px',
+        height: '100%'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#909090',
+        height: '100%'
+      }
+    })))))), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#f1f1f1',
+        height: '28px'
+      }
+    })))));
+  }
+
+}
+Layout__three_Column.docs = {
+  componentGroup: 'Layout',
+  folderName: 'Style Guide',
+  description: ' ',
+  external: true
+};

package/es/Layout/docs/Layout__two_Column.docs.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Container, Box } from '../';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class Layout__two_Column 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: '#4e524e',
+        width: '320px',
+        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__two_Column.docs = {
+  componentGroup: 'Layout',
+  folderName: 'Style Guide',
+  description: ' ',
+  external: true
+};