@zohodesk/dot 1.0.0-beta.226 → 1.0.0-beta.227

package/README.md

@@ -3,6 +3,10 @@
 In this Library, we Provide Some Basic Components to Build Your Application
 
 
+# 1.0.0-beta.227
+
+- #999 instead of #a8b0bd color value in PureDark mode
+
 # 1.0.0-beta.226
 
 - Attachment Viewer Footer Scroll Ui Fix, dataId fix

package/assets/Appearance/pureDark/mode/dotPureDarkMode.module.css

@@ -31,7 +31,7 @@
 	--zdt_attachment_default_hover_border: var(--dot_oslogrey);
 	--zdt_attachment_hover_text: var(--dot_platinum);
 	--zdt_attachment_transparent_bg: var(--dot_mirror);
-	--zdt_attachment_size_text: var(--dot_cadetblue);
+	--zdt_attachment_size_text: #999;
 	--zdt_attachment_download_bg: var(--zdt_cta_grey_20_bg);
 	--zdt_attachment_download_hover_bg: var(--dot_oslogrey);
 	--zdt_attachment_download_hover_text: #212121;
@@ -53,7 +53,7 @@
 	--zdt_avatarIcon_dark_icon: var(--dot_platinum);
 	--zdt_avatarIcon_danger_icon: var(--dot_bittersweet);
 	--zdt_avatarIcon_primary_icon: var(--dot_butterflyblue);
-	--zdt_avatarIcon_grey_icon: var(--dot_cadetblue);
+	--zdt_avatarIcon_grey_icon: #999;
 	--zdt_avatarIcon_success_icon: var(--dot_darkmint);
 	--zdt_avatarIcon_smoke_icon: var(--zd_smoke18);
 	--zdt_avatarIcon_default_border: var(--zdt_cta_grey_40_border);
@@ -76,7 +76,7 @@
 	/* avatar thread */
 	--zdt_avatarthread_bg: var(--dot_mirage);
 	--zdt_avatarthread_default_border: var(--zdt_cta_grey_35_border);
-	--zdt_avatarthread_default_text: var(--dot_cadetblue);
+	--zdt_avatarthread_default_text: #999;
 	--zdt_avatarthread_primary_border: var(--dot_butterflyblue);
 	--zdt_avatarthread_primary_text: var(--dot_butterflyblue);
 	--zdt_avatarthread_success_border: var(--dot_darkmint);
@@ -111,7 +111,7 @@
 	
 	/* common empty state */
 	--zdt_commonEmptyState_default_title: var(--dot_platinum);
-	--zdt_commonEmptyState_default_description: var(--dot_cadetblue);
+	--zdt_commonEmptyState_default_description: #999;
 	--zdt_commonEmptyState_default_link: var(--zdt_cta_primary_text);
 	--zdt_commonEmptyState_default_link_hover: var(--zdt_cta_primary_hover_text);
 	
@@ -139,7 +139,7 @@
 	/* form fields */
 	--zdt_fields_phoneicon_icon: var(--dot_platinum);
 	--zdt_fields_phoneicon_hover_icon: var(--dot_darkmint);
-	--zdt_fields_lockicon_icon: var(--dot_cadetblue);
+	--zdt_fields_lockicon_icon: #999;
 	--zdt_fields_lockicon_hover_icon: var(--dot_bittersweet);
 	--zdt_fields_phitag_text: var(--dot_irishgreen);
 	--zdt_fields_phitag_bg: #212121;
@@ -194,7 +194,7 @@
 	--zdt_avatarflip_default_text: var(--dot_platinum);
 	
 	/* comment icon */
-	--zdt_comment_iconText: var(--dot_cadetblue);
+	--zdt_comment_iconText: #999;
 	--zdt_comment_hover_iconText: var(--dot_white);
 	
 	/* department dropdown */
@@ -218,7 +218,7 @@
 	--zdt_gridstencils_listbar_gradient_bg: linear-gradient(to left, #383f55 0, #414961 20%, #414961 40%, #383f55 100%);
 	
 	/* icons */
-	--zdt_icons_default: var(--dot_cadetblue);
+	--zdt_icons_default: #999;
 	--zdt_icons_hover_blue: var(--zdt_cta_primary_text);
 	--zdt_icons_hover_red: var(--dot_bittersweet);
 	
@@ -233,14 +233,14 @@
 	--zdt_liststencils_innercontainer_border: var(--zdt_cta_grey_15_border);
 	
 	/* secondary text */
-	--zdt_secondaryText_gray_text: var(--dot_cadetblue);
+	--zdt_secondaryText_gray_text: #999;
 	--zdt_secondaryText_orage_text: var(--dot_cadmiumorange);
 	--zdt_secondaryText_green_text: var(--dot_darkmint);
 	--zdt_secondaryText_red_text: var(--dot_bittersweet);
 	--zdt_secondaryText_blue_text: var(--zdt_cta_primary_text);
 	--zdt_secondaryText_blue_hover_text: var(--zdt_cta_primary_hover_text);
 	--zdt_secondaryText_black_text: var(--dot_platinum);
-	--zdt_secondaryText_secondaryText_text: var(--dot_cadetblue);
+	--zdt_secondaryText_secondaryText_text: #999;
 	
 	/* status dropdown */
 	--zdt_statusdropdown_line_border: var(--zdt_cta_grey_15_border);
@@ -267,15 +267,15 @@
 	--zdt_tagnew_default_text: var(--zdt_cta_secondary_text);
 	
 	/* thread */
-	--zdt_thread_iconText: var(--dot_cadetblue);
+	--zdt_thread_iconText: #999;
 	--zdt_thread_hover_iconText: var(--dot_white);
 	
 	/* usertime */
-	--zdt_usertime_timeText: var(--dot_cadetblue);
+	--zdt_usertime_timeText: #999;
 	--zdt_usertime_icon_red: var(--dot_bittersweet);
 	--zdt_usertime_icon_green: var(--dot_darkmint);
 	--zdt_usertime_icon_orange: var(--dot_cadmiumorange);
-	--zdt_usertime_icon_gray: var(--dot_cadetblue);
+	--zdt_usertime_icon_gray: #999;
 	
 	/* loader */
 	--zdt_loader_gradient_bg: linear-gradient(to right, rgb(206, 34, 50) 0%, rgb(96, 128, 64) 20%, rgb(144, 178, 71) 40%, rgb(249, 221, 75) 60%, rgb(9, 116, 176) 80%, rgb(206, 34, 50) 100%);
@@ -285,7 +285,7 @@
 	--zdt_lookupheader_white_bg: #212121;
 	--zdt_lookupheader_default_border: #161515;
 	--zdt_lookupheader_white_border: var(--dot_brightgrey);
-	--zdt_lookupheader_para_text: var(--dot_cadetblue);
+	--zdt_lookupheader_para_text: #999;
 	--zdt_lookupheader_input_border: var(--zd_smoke33);
 	
 	/* lookup close */
@@ -308,7 +308,7 @@
 	
 	/* view dropdown */
 	--zdt_viewdropdown_empty_text: var(--dot_oslogrey);
-	--zdt_viewdropdown_label_text: var(--dot_cadetblue);
+	--zdt_viewdropdown_label_text: #999;
 	--zdt_viewdropdown_hover_label_text: var(--dot_platinum);
 	
 	/* lookup section */
@@ -486,7 +486,7 @@
 	--zdt_alertlookupnew_text: var(--dot_platinum);
 	
 	/* tagsmultiselect */
-	--zdt_tagsmultiselect_labelt_text: var(--dot_cadetblue);
+	--zdt_tagsmultiselect_labelt_text: #999;
 	--zdt_tagsmultiselect_default_border: var(--dot_inputLine);
 	--zdt_tagsmultiselect_transparent_border: var(--dot_mirror);
 	--zdt_tagsmultiselect_dark_border: var(--dot_mulledwine);
@@ -519,7 +519,7 @@
 	--zdt_desktopnotification_box_shadow: rgba(0, 0, 0, 0.4);
 	
 	/* tagsmultiselect field */
-	--zdt_tagsmultiselectField_count_text: var(--dot_cadetblue);
+	--zdt_tagsmultiselectField_count_text: #999;
 	
 	/* attachment viewer */
 	--zdt_attachmentviewer_title_text: var(--dot_platinum);

package/es/ActionButton/docs/ActionButton__default.docs.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import ActionButton from '../ActionButton';
+export default class ActionButton__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply",
+      size: "small"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply",
+      size: "medium"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply",
+      size: "large"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply",
+      size: "large",
+      isLoading: true
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply",
+      size: "large",
+      isLoading: true,
+      palette: "primary"
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      iconName: "ZD-replyall",
+      iconSize: "9",
+      onClick: () => '',
+      dropdownChildren: 'children',
+      dropBoxPosition: "bottomRight",
+      size: "small",
+      isDisabled: true
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply all",
+      iconName: "ZD-replyall",
+      iconSize: "9",
+      onClick: () => '',
+      dropBoxPosition: "bottomRight",
+      size: "small"
+    }, "children")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply all",
+      iconName: "ZD-replyall",
+      iconSize: "9",
+      onClick: () => '',
+      dropBoxPosition: "bottomRight",
+      size: "small",
+      onHover: true
+    }, "children")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply all",
+      iconName: "ZD-replyall",
+      iconSize: "9",
+      dropBoxPosition: "bottomRight",
+      size: "small",
+      onHover: true
+    }, "children")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply all",
+      iconName: "ZD-replyall",
+      iconSize: "9",
+      dropBoxPosition: "bottomRight",
+      size: "small"
+    }, "children")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Comment",
+      subText: "Public"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      text: "Reply all",
+      iconName: "ZD-replyall",
+      iconSize: "9",
+      onClick: () => '',
+      dropBoxPosition: "bottomRight",
+      size: "small",
+      palette: "primary"
+    }, "children")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px'
+      }
+    }));
+  }
+
+}
+ActionButton__default.docs = {
+  componentGroup: 'Atom'
+};

package/es/AlphabeticList/docs/AlphabeticList__default.docs.js

@@ -0,0 +1,34 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+/*** Components ***/
+
+import AlphabeticList from '../AlphabeticList';
+export default class AlphabeticList__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedCharacter: 'C'
+    };
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  handleSelect(selectedCharacter) {
+    this.setState({
+      selectedCharacter
+    });
+  }
+
+  render() {
+    let {
+      selectedCharacter
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AlphabeticList, {
+      selectedCharacter: selectedCharacter,
+      onSelect: this.handleSelect
+    }));
+  }
+
+}
+AlphabeticList__default.docs = {
+  componentGroup: 'Atom'
+};

package/es/AlphabeticList/docs/AlphabeticList__horizontal.docs.js

@@ -0,0 +1,43 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+/*** Components ***/
+
+import AlphabeticList from '../AlphabeticList';
+export default class AlphabeticList__horizontal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedCharacter: 'C'
+    };
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  handleSelect(selectedCharacter) {
+    this.setState({
+      selectedCharacter
+    });
+  }
+
+  render() {
+    let {
+      selectedCharacter
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AlphabeticList, {
+      selectedCharacter: selectedCharacter,
+      onSelect: this.handleSelect,
+      align: "horizontal"
+    }), /*#__PURE__*/React.createElement(AlphabeticList, {
+      type: "numerals",
+      selectedCharacter: selectedCharacter,
+      onSelect: this.handleSelect,
+      align: "horizontal"
+    }));
+  }
+
+}
+
+if (false) {
+  AlphabeticList__horizontal.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/Attachment/docs/Attachment__default.docs.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Attachment from '../Attachment';
+export default class Attachment__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Attachment, {
+      fileName: "20993016_1413168518775205_8593331352042442533_n.jpg",
+      fileSize: "31.5 KB",
+      downloadLink: "https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png",
+      tooltip: "Attachment",
+      iconName: "ZD-filePicture",
+      fileInfo: "2 days ago"
+    }), /*#__PURE__*/React.createElement(Attachment, {
+      fileName: "20993016_1413168518775205_8593331352042442533_n.jpg",
+      fileSize: "31.5 KB",
+      downloadLink: "https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png",
+      tooltip: "Attachment",
+      iconName: "ZD-filePicture"
+    }), /*#__PURE__*/React.createElement(Attachment, {
+      fileName: "20993016_1413168518775205_8593331352042442533_n.jpg",
+      downloadLink: "https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png",
+      tooltip: "Attachment",
+      iconName: "ZD-filePicture"
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Attachment, {
+      fileName: "20993016_1413168518775205_8593331352042442533_n.jpg",
+      fileSize: "31.5 KB",
+      downloadLink: "https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png",
+      tooltip: "Attachment",
+      iconName: "ZD-filePicture",
+      size: "small",
+      fileInfo: "15 days ago"
+    }), /*#__PURE__*/React.createElement(Attachment, {
+      fileName: "20993016_1413168518775205_8593331352042442533_n.jpg",
+      fileSize: "31.5 KB",
+      downloadLink: "https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png",
+      tooltip: "Attachment",
+      iconName: "ZD-filePicture",
+      size: "small"
+    }), /*#__PURE__*/React.createElement(Attachment, {
+      fileName: "20993016_1413168518775205_8593331352042442533_n.jpg",
+      downloadLink: "https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png",
+      tooltip: "Attachment",
+      iconName: "ZD-filePicture",
+      size: "small"
+    }));
+  }
+
+}
+
+if (false) {
+  Attachment__default.docs = {
+    componentGroup: 'Attachment'
+  };
+}

package/es/AttachmentViewer/docs/AttachmentViewer__default.docs.js

@@ -0,0 +1,70 @@
+import React, { Component } from "react";
+import AttachmentViewer from "../AttachmentViewer";
+export default class AttachmentViewer__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement(AttachmentViewer, {
+      isActive: true,
+      hideAttachmentViewer: () => {},
+      previewObj: {
+        previewData: [{
+          id: "1",
+          name: "slack0.jpg",
+          size: "100412",
+          href: "https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG",
+          viewUrl: "https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG",
+          downloadUrl: "https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG"
+        }, {
+          id: "2",
+          name: "slack1.jpg",
+          size: "100412",
+          href: "https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg",
+          viewUrl: "https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg",
+          downloadUrl: "https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg"
+        }, {
+          id: "3",
+          name: "slack2.jpg",
+          size: "100412",
+          href: "https://wallpapercave.com/wp/wp3913900.jpg",
+          viewUrl: "https://wallpapercave.com/wp/wp3913900.jpg",
+          downloadUrl: "https://wallpapercave.com/wp/wp3913900.jpg"
+        }, {
+          id: "4",
+          name: "slack3.jpg",
+          size: "100412",
+          href: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg",
+          viewUrl: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg",
+          downloadUrl: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg"
+        }, {
+          id: "5",
+          name: "slack4.jpg",
+          size: "100412",
+          href: "https://wallpapercave.com/wp/wp3913900.jpg",
+          viewUrl: "https://wallpapercave.com/wp/wp3913900.jpg",
+          downloadUrl: "https://wallpapercave.com/wp/wp3913900.jpg"
+        }, {
+          id: "6",
+          name: "slack5.jpg",
+          size: "100412",
+          href: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg",
+          viewUrl: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg",
+          downloadUrl: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg"
+        }, {
+          id: "6",
+          name: "slack5.mp3",
+          size: "100412",
+          href: "https://www.w3schools.com/html/horse.mp3",
+          viewUrl: "https://www.w3schools.com/html/horse.mp3",
+          downloadUrl: "https://www.w3schools.com/html/horse.mp3"
+        }],
+        selectedIndex: 0
+      }
+    });
+  }
+
+}
+
+if (false) {
+  AttachmentViewer__default.docs = {
+    componentGroup: "Molecule"
+  };
+}

package/es/ChannelIcon/docs/ChannelIcon__default.docs.js

@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import ChannelIcon from '../ChannelIcon';
+import { getChannelMappingObj } from '../../utils/ChannelIconMapping';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+export default class ChannelIcon__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let boxStyle = {},
+        style = {
+      border: '1px solid #c3c1c1',
+      padding: '10px',
+      margin: '1px 10px',
+      textAlign: 'center'
+    },
+        titleStyle = {
+      'font-size': '13px',
+      'padding-bottom': '5px',
+      'border-bottom': '1px solid #c3c1c1',
+      margin: '10px 0 5px',
+      textAlign: 'center'
+    };
+    let channels = getChannelMappingObj();
+    return /*#__PURE__*/React.createElement(Container, null, Object.keys(channels).map((item, i) => /*#__PURE__*/React.createElement(Box, {
+      key: i,
+      scroll: "none",
+      style: {
+        padding: '5px'
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      style: titleStyle
+    }, item), /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical",
+      isCover: false,
+      wrap: "wrap"
+    }, Object.keys(channels[item]).map((channel, j) => /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: style,
+      key: j
+    }, /*#__PURE__*/React.createElement("h6", null, channel), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ChannelIcon, {
+      name: item,
+      action: channel,
+      iconSize: "21",
+      size: "medium"
+    }))))))), /*#__PURE__*/React.createElement("br", null));
+  }
+
+}
+
+if (false) {
+  ChannelIcon__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/Drawer/docs/Drawer__default.docs.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import Drawer, { Header, Content, Footer } from '../Drawer';
+import Button from '@zohodesk/components/lib/Button/Button';
+import style from '../Drawer.module.css';
+export default class Drawer__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isActive: true,
+      size: 'xsmall'
+    };
+    this.onClose = this.onClose.bind(this);
+    this.getFooter = this.getFooter.bind();
+  }
+
+  onClose() {
+    this.setState({
+      isActive: false
+    });
+  }
+
+  changeSize(drawersize) {
+    this.setState({
+      size: drawersize
+    });
+  }
+
+  getFooter() {
+    return /*#__PURE__*/React.createElement("p", null, "getChildren");
+  }
+
+  render() {
+    let {
+      isActive,
+      size
+    } = this.state;
+    return /*#__PURE__*/React.createElement(Drawer, {
+      isActive: isActive,
+      needFreeze: false,
+      paddingSize: "small",
+      size: size
+    }, /*#__PURE__*/React.createElement(Header, {
+      title: "Add Component",
+      onClose: this.onClose,
+      iconName: "ZD-zdDuetimeQueueNew",
+      iconSize: "15",
+      align: "column",
+      getChildren: this.getFooter
+    }, /*#__PURE__*/React.createElement("span", null, "children")), /*#__PURE__*/React.createElement(Content, {
+      className: style.headerTest
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "small",
+      onClick: this.changeSize.bind(this, 'small')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xsmall",
+      onClick: this.changeSize.bind(this, 'xsmall')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "medium",
+      onClick: this.changeSize.bind(this, 'medium')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xmedium",
+      onClick: this.changeSize.bind(this, 'xmedium')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "large",
+      onClick: this.changeSize.bind(this, 'large')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xlarge",
+      onClick: this.changeSize.bind(this, 'xlarge')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xxlarge",
+      onClick: this.changeSize.bind(this, 'xxlarge')
+    })), /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(Button, {
+      text: "Save",
+      palette: "primaryFilled"
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "Cancel",
+      palette: "secondary"
+    })));
+  }
+
+}
+
+if (false) {
+  Drawer__default.docs = {
+    componentGroup: 'Template'
+  };
+}