@zohodesk/components 1.0.0-alpha-225 → 1.0.0-alpha-226

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

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

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

@@ -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__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,30 +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,42 +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,29 +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,37 +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,77 +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,49 +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
-};

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

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

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

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

package/es/LightNightMode/docs/AlternativeColors.docs.js

@@ -1,74 +0,0 @@
-import React from 'react';
-import Container from '../../Layout/Container';
-import Box from '../../Layout/Box';
-import Colors from './../Colors.json';
-import style from '../../common/docStyle.module.css';
-export default class AlternativeColors extends React.Component {
-  render() {
-    const {
-      colors = Colors
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Container, {
-      className: style.m20,
-      isCover: false
-    }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Box, {
-      className: style.para
-    }, "Note: In some places, for single light mode color we used multipe night mode color values based on the places. Here in this docs, you can see the gold-border highlighted color in each row. So, that gold-highlighted is the ", /*#__PURE__*/React.createElement("b", null, "primary night mode color"), ". For more details kindly check this ", /*#__PURE__*/React.createElement("a", {
-      target: "_blank",
-      href: "https://sheet.zoho.com/sheet/open/122xr236d82d3bc7c4b8d9bff2e160a9ae7a4"
-    }, /*#__PURE__*/React.createElement("b", null, "sheet")), ".")), /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      className: style.head
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.lft
-    }, "Light Mode Colors"), /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.rgt
-    }, "Alternate Night Mode Colors")), /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      className: style.content
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, colors.map((index, i) => /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      key: i,
-      isCover: false,
-      className: style.trow
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.lft
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        backgroundColor: `${index.lightColor}`
-      },
-      className: style.rect
-    }), /*#__PURE__*/React.createElement("span", {
-      className: style.colorvalue,
-      onClick: () => navigator.clipboard.writeText(index.lightColor),
-      "data-title": `Copy ${index.lightColor}`
-    }, index.lightColor)), /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.rgt
-    }, index.equalNightColors.toString().split(", ").map((clrValue, j) => {
-      return /*#__PURE__*/React.createElement("div", {
-        className: style.nestedDiv,
-        key: j
-      }, /*#__PURE__*/React.createElement("span", {
-        style: {
-          backgroundColor: `${clrValue}`
-        },
-        className: `${style.rect} ${style.gold}`
-      }), /*#__PURE__*/React.createElement("span", {
-        className: style.colorvalue,
-        onClick: () => navigator.clipboard.writeText(clrValue),
-        "data-title": `Copy ${clrValue}`
-      }, clrValue));
-    }))))))));
-  }
-
-}
-
-if (false) {
-  AlternativeColors.docs = {
-    componentGroup: 'LightNightMode'
-  };
-}