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

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

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

package/es/ListItem/docs/ListItemWithAvatar__custom.docs.js

@@ -0,0 +1,155 @@
+import React from 'react';
+import ListItemWithAvatar from '../ListItemWithAvatar';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import style from '../../common/docStyle.module.css';
+export default class ListItemWithAvatar__custom extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar
+      },
+      value: "ListItem",
+      name: "Bharathi kannan",
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar
+      },
+      value: "ListItem",
+      name: "Bharathi kannan",
+      autoHover: true,
+      needAvatarTitle: false
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar
+      },
+      value: "ListItem",
+      name: "Bk",
+      highlight: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar
+      },
+      value: "ListItem",
+      name: "Bk",
+      active: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar
+      },
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar,
+        customAvatarTeam: style.listAvatarTeam
+      },
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      autoHover: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar
+      },
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      highlight: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar,
+        customAvatarTeam: style.listAvatarTeam
+      },
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      active: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar
+      },
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      customClass: {
+        customListItem: style.listItem,
+        customAvatar: style.listItemAvatar
+      },
+      value: "ListItem Disabled",
+      name: "Bk",
+      isTeam: true,
+      isDisabled: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithAvatar__custom.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithAvatar__default.docs.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import ListItemWithAvatar from '../ListItemWithAvatar';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class ListItemWithAvatar__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bharathi kannan",
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bharathi kannan",
+      autoHover: true,
+      needAvatarTitle: false
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      highlight: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      active: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      autoHover: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      highlight: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      active: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem Disabled",
+      name: "Bk",
+      isTeam: true,
+      isDisabled: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithAvatar__default.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithCheckBox__custom.docs.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import ListItemWithCheckBox from '../ListItemWithCheckBox';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import style from '../../common/docStyle.module.css';
+export default class ListItemWithCheckBox__custom extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      customClass: {
+        customListItem: style.listItem,
+        customCheckBox: style.customCbox,
+        customLabel: style.customLbl
+      },
+      value: "ListItem",
+      id: "11"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      customClass: {
+        customListItem: style.listItem,
+        customCheckBox: style.customCbox,
+        customLabel: style.customLbl
+      },
+      value: "ListItem",
+      autoHover: true,
+      id: "12"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      customClass: {
+        customListItem: style.listItem,
+        customCheckBox: style.customCbox,
+        customLabel: style.customLbl
+      },
+      value: "ListItem",
+      highlight: true,
+      checked: true,
+      id: "13"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      customClass: {
+        customListItem: style.listItem,
+        customCheckBox: style.customCbox,
+        customLabel: style.customLbl
+      },
+      value: "ListItem",
+      active: true,
+      checked: true,
+      id: "14"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      customClass: {
+        customListItem: style.listItem,
+        customCheckBox: style.customCbox,
+        customLabel: style.customLbl
+      },
+      isDisabled: true,
+      value: "ListItem disabled",
+      active: true,
+      checked: true,
+      id: "14"
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithCheckBox__custom.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithCheckBox__default.docs.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import ListItemWithCheckBox from '../ListItemWithCheckBox';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class ListItemWithCheckBox__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      value: "ListItem",
+      id: "11"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      value: "ListItem",
+      autoHover: true,
+      id: "12"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      value: "ListItem",
+      highlight: true,
+      checked: true,
+      id: "13"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      value: "ListItem",
+      active: true,
+      checked: true,
+      id: "14"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      isDisabled: true,
+      value: "ListItem disabled",
+      active: true,
+      checked: true,
+      id: "14"
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithCheckBox__default.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithIcon__custom.docs.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import ListItemWithIcon from '../ListItemWithIcon';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import style from '../../common/docStyle.module.css';
+export default class ListItemWithIcon__custom extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      customClass: style.listItem,
+      value: "ListItem",
+      iconName: "ZD-teams2"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      customClass: style.listItem,
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      autoHover: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      customClass: style.listItem,
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      highlight: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      customClass: style.listItem,
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      active: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      customClass: style.listItem,
+      value: "ListItem disabled",
+      isDisabled: true,
+      iconName: "ZD-teams2",
+      active: true
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithIcon__custom.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithIcon__default.docs.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import ListItemWithIcon from '../ListItemWithIcon';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class ListItemWithIcon__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem",
+      iconName: "ZD-teams2"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      autoHover: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      highlight: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      active: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem disabled",
+      isDisabled: true,
+      iconName: "ZD-teams2",
+      active: true
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithIcon__default.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}