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

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

@@ -0,0 +1,97 @@
+/* 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

@@ -0,0 +1,56 @@
+.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
+}

package/es/Ribbon/docs/Ribbon__custom.docs.js

@@ -0,0 +1,386 @@
+import React from 'react';
+import Ribbon from '../Ribbon';
+import Icon from '@zohodesk/icons/lib/Icon';
+import styles from '../../common/docStyle.module.css';
+export default class Ribbon__custom extends React.Component {
+  render() {
+    let style = {
+      margin: '10px'
+    },
+        titleStyle = {
+      fontSize: '13px',
+      padding: '15px 0',
+      textTransform: 'upperCase'
+    },
+        spanStyle = {
+      display: 'inline-block',
+      margin: '10px 10px 10px 0'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Default Ribbon"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "default",
+      text: "default"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "primary",
+      text: "primary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "secondary",
+      text: "secondary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "danger",
+      text: "danger"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "info",
+      text: "info"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "dark",
+      text: "info"
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Box"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.boxRibbon,
+      palette: "default",
+      size: "medium",
+      type: "box",
+      text: "Flag Default"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.boxRibbon,
+      palette: "primary",
+      size: "medium",
+      type: "box",
+      text: "Flag Primary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.boxRibbon,
+      palette: "secondary",
+      size: "medium",
+      type: "box",
+      text: "Flag Secondary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.boxRibbon,
+      palette: "danger",
+      size: "medium",
+      type: "box",
+      text: "Flag Danger"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.boxRibbon,
+      palette: "info",
+      size: "medium",
+      type: "box",
+      text: "Flag Info"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.boxRibbon,
+      palette: "dark",
+      size: "medium",
+      type: "box",
+      text: "Flag Info"
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Flag"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.flagRibbon,
+      palette: "default",
+      size: "medium",
+      type: "flag",
+      text: "Flag Default"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.flagRibbon,
+      palette: "primary",
+      size: "medium",
+      type: "flag",
+      text: "Flag Primary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.flagRibbon,
+      palette: "secondary",
+      size: "medium",
+      type: "flag",
+      text: "Flag Secondary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.flagRibbon,
+      palette: "danger",
+      size: "medium",
+      type: "flag",
+      text: "Flag Danger"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.flagRibbon,
+      palette: "info",
+      size: "medium",
+      type: "flag",
+      text: "Flag Info"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.flagRibbon,
+      palette: "dark",
+      size: "medium",
+      type: "flag",
+      text: "Flag Info"
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Plain"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.plainRibbon,
+      palette: "default",
+      size: "large",
+      type: "plain",
+      text: "Flag Default"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.plainRibbon,
+      palette: "primary",
+      size: "large",
+      type: "plain",
+      text: "Flag Primary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.plainRibbon,
+      palette: "secondary",
+      size: "large",
+      type: "plain",
+      text: "Flag Secondary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.plainRibbon,
+      palette: "danger",
+      size: "large",
+      type: "plain",
+      text: "Flag Danger"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.plainRibbon,
+      palette: "info",
+      size: "large",
+      type: "plain",
+      text: "Flag Info"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.plainRibbon,
+      palette: "dark",
+      size: "large",
+      type: "plain",
+      text: "Flag Info"
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Ribbon"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "default",
+      size: "medium",
+      type: "ribbon",
+      text: "Flag Default"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "primary",
+      size: "medium",
+      type: "ribbon",
+      text: "Flag Primary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "secondary",
+      size: "medium",
+      type: "ribbon",
+      text: "Flag Secondary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "danger",
+      size: "medium",
+      type: "ribbon",
+      text: "Flag Danger"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "info",
+      size: "medium",
+      type: "ribbon",
+      text: "Flag Info"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "dark",
+      size: "medium",
+      type: "ribbon",
+      text: "Flag Info"
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Stamp"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "default",
+      size: "medium",
+      type: "stamp",
+      text: "Flag Default"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "primary",
+      size: "medium",
+      type: "stamp",
+      text: "Flag Primary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "secondary",
+      size: "medium",
+      type: "stamp",
+      text: "Flag Secondary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "danger",
+      size: "medium",
+      type: "stamp",
+      text: "Flag Danger"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "info",
+      size: "medium",
+      type: "stamp",
+      text: "Flag Info"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "dark",
+      size: "medium",
+      type: "stamp",
+      text: "Flag Info"
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Sticker"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "default",
+      size: "medium",
+      type: "sticker",
+      text: "Flag Default"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-share",
+      isBold: true,
+      size: "10"
+    }))), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "primary" // size='medium'
+      ,
+      type: "sticker",
+      text: "Flag Primary"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-copy22",
+      size: "11"
+    }))), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "secondary",
+      size: "medium",
+      type: "sticker",
+      text: "Flag Secondary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "danger",
+      size: "medium",
+      type: "sticker",
+      text: "Flag Danger"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "info",
+      size: "medium",
+      type: "sticker",
+      text: "Flag Info"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.ribbon,
+      palette: "dark",
+      size: "medium",
+      type: "sticker",
+      text: "Flag Info"
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Tag"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: styles.tagRibbon,
+      size: "medium",
+      type: "tag",
+      text: "Flag Info"
+    })))));
+  }
+
+}
+
+if (false) {
+  Ribbon__custom.docs = {
+    componentGroup: 'Atom',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}