@zohodesk/dot 1.0.0-beta.244 → 1.0.0-beta.245

package/es/IconButton/docs/IconButton__default.docs.js

@@ -0,0 +1,217 @@
+import React, { Component } from 'react';
+import IconButton from '../IconButton';
+export default class IconButton__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "isBold"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      isBold: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      isBold: true,
+      iconSize: "12",
+      iconName: "ZD-more",
+      palette: "secondary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled",
+      isBold: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "Palette"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      onClick: () => {
+        console.log('click');
+      },
+      onMouseDown: () => {
+        console.log('Down');
+      },
+      onMouseOver: () => {
+        console.log('over');
+      }
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "isActive"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      isActive: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more",
+      isActive: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled",
+      isActive: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "Border On Hover"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      hoverType: "border"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more",
+      hoverType: "border"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "isDisabled"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      isDisabled: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more",
+      isDisabled: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled",
+      isDisabled: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "Tooltip"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      isDisabled: true,
+      title: "primary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more",
+      isDisabled: true,
+      title: "default"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled",
+      isDisabled: true,
+      title: "primaryFilled"
+    }))));
+  }
+}
+if (false) {
+  IconButton__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/Image/docs/Image__default.docs.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Image from '../Image';
+export default class Image__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '120px',
+        width: '120px'
+      }
+    }, /*#__PURE__*/React.createElement(Image, {
+      src: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }));
+  }
+}
+if (false) {
+  Image__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/ImportantNotes/ImportantNotes.module.css

@@ -8,13 +8,8 @@
   color: var(--zdt_importantnotes_title_text);
 }
 .icon {
-  color: var(--zdt_importantnotes_icon);
-  font-size: 0;
   margin-top: var(--zd_size1);
-}
-[dir=ltr] .icon {
   margin-right: var(--zd_size5);
-}
-[dir=rtl] .icon {
-  margin-left: var(--zd_size5);
+  color: var(--zdt_importantnotes_icon);
+  font-size: 0;
 }

package/es/ImportantNotes/docs/ImportantNotes__default.docs.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImportantNotes from '../ImportantNotes';
+export default class ImportantNotes__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(ImportantNotes, {
+      text: "Forwarded threads are always marked as private regardless of this setting.Forwarded threads are always marked as private regardless of this setting.Forwarded threads are always marked as private regardless of this setting.Forwarded threads are always marked as private regardless of this setting.Forwarded threads are always marked as private regardless of this setting."
+    }, "Children");
+  }
+}
+if (false) {
+  ImportantNotes__default.docs = {
+    componentGroup: 'Common',
+    folderName: 'General'
+  };
+}

package/es/Link/docs/Link__default.docs.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import Link from '../Link';
+export default class Link__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onCallBack = this.onCallBack.bind(this);
+    this.onConcertURL = this.onConcertURL.bind(this);
+  }
+  onCallBack(value) {
+    console.log(value);
+  }
+  onConcertURL(name, obj) {
+    console.log(name, obj, 'onConcertURL');
+  }
+  render() {
+    let style = {
+      width: '200px',
+      marginBottom: '20px',
+      display: 'block'
+    };
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: style
+    }, /*#__PURE__*/React.createElement(Link, {
+      href: null,
+      onClick: this.onConcertURL,
+      rel: "noopener noreferrer"
+    }, "Activities")));
+  }
+}
+Link__default.docs = {
+  componentGroup: 'Atom'
+};

package/es/Loader/Loader.module.css

@@ -1,33 +1,21 @@
 .ajaxLoader {
   position: absolute;
   top: 0;
-}[dir=ltr] .ajaxLoader {
   left: 0;
   right: 0;
-}[dir=rtl] .ajaxLoader {
-  right: 0;
-  left: 0;
 }
 .loader {
-  width: 100%;
-  height: 3px;
   background-image: var(--zdt_loader_gradient_bg);
+  width: 100%;
   background-size: 200% auto;
-}
-[dir=ltr] .loader {
   background-position: 0 100%;
-  animation:  loading-ltr 3s infinite;
-  animation-fill-mode: forwards;
-  animation-timing-function: linear;
-}
-[dir=rtl] .loader {
-  background-position: 100% 100%;
-  animation:  loading-rtl 3s infinite;
+  animation: loading 3s infinite;
   animation-fill-mode: forwards;
   animation-timing-function: linear;
+  height: 3px;
 }
 
-@keyframes loading-ltr {
+@keyframes loading {
   0% {
     background-position: 0 0;
   }
@@ -35,12 +23,3 @@
     background-position: -200% 0;
   }
 }
-
-@keyframes loading-rtl {
-  0% {
-    background-position: 100% 0;
-  }
-  100% {
-    background-position: 300% 0;
-  }
-}

package/es/Loader/docs/Loader__default.docs.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Loader from '../Loader';
+export default class Loader__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: 'var(--dot_black)',
+        height: '40px'
+      }
+    }, /*#__PURE__*/React.createElement(Loader, null));
+  }
+}
+if (false) {
+  Loader__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/Message/Message.module.css

@@ -3,31 +3,20 @@
   top: 0;
   z-index: 1000;
   /*Hook for editor alert*/
-  pointer-events: none;
-  text-align: center;
-}[dir=ltr] .message {
   right: 0;
+  text-align: center;
   left: 0;
-}[dir=rtl] .message {
-  left: 0;
-  right: 0;
+  pointer-events: none;
 }
 
 .container {
-  position: relative;
-  display: inline-block;
-  pointer-events: initial;
+  padding: var(--zd_size13) var(--zd_size10) var(--zd_size13) var(--zd_size50);
   box-shadow: 0 0 19px 1px var(--zdt_message_default_box_shadow);
   border-radius: 0 0 5px 5px;
+  position: relative;
   background: var(--zdt_message_default_bg);
-}
-
-[dir=ltr] .container {
-  padding: var(--zd_size13) var(--zd_size10) var(--zd_size13) var(--zd_size50);
-}
-
-[dir=rtl] .container {
-  padding: var(--zd_size13) var(--zd_size50) var(--zd_size13) var(--zd_size10);
+  display: inline-block;
+  pointer-events: initial;
 }
 
 .text {
@@ -36,32 +25,17 @@
   word-break: break-word;
   font-size: var(--zd_font_size14);
   vertical-align: middle;
-}
-
-[dir=ltr] .text {
   text-align: left;
 }
 
-[dir=rtl] .text {
-  text-align: right;
-}
-
 .icon {
   position: absolute;
+  left: 0;
   top: 0;
   width: var(--zd_size40);
   display: inline-block;
-  height: 100%;
-}
-
-[dir=ltr] .icon {
-  left: 0;
   border-bottom-left-radius: 5px;
-}
-
-[dir=rtl] .icon {
-  right: 0;
-  border-bottom-right-radius: 5px;
+  height: 100%;
 }
 
 .success {
@@ -89,15 +63,8 @@
 .close {
   color: var(--zdt_message_close_text);
   font-size: var(--zd_font_size16);
+  cursor: pointer;
   display: inline-block;
   vertical-align: middle;
-  cursor: pointer;
-}
-
-[dir=ltr] .close {
   margin-left: var(--zd_size10);
-}
-
-[dir=rtl] .close {
-  margin-right: var(--zd_size10);
 }

package/es/Message/docs/Message__default.docs.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import Message from '../Message';
+export default class Message__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    let style = {
+      position: 'relative',
+      height: '100px',
+      overflow: 'hidden'
+    };
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: style.m20,
+      style: style
+    }, /*#__PURE__*/React.createElement(Message, {
+      type: "success",
+      message: "The status has been successfully updated",
+      showMessage: true,
+      hideMessage: () => {}
+    })), /*#__PURE__*/React.createElement("div", {
+      className: style.m20,
+      style: style
+    }, /*#__PURE__*/React.createElement(Message, {
+      type: "alert",
+      message: "The status has been successfully updated",
+      showMessage: true,
+      hideMessage: () => {}
+    })), /*#__PURE__*/React.createElement("div", {
+      className: style.m20,
+      style: style
+    }, /*#__PURE__*/React.createElement(Message, {
+      type: "info",
+      message: "The status has been successfully updated",
+      showMessage: true,
+      hideMessage: () => {}
+    })), /*#__PURE__*/React.createElement("div", {
+      className: style.m20,
+      style: style
+    }, /*#__PURE__*/React.createElement(Message, {
+      type: "info",
+      message: "The status has been successfully updated <h1>asdf</h1>",
+      showMessage: true,
+      hideMessage: () => {}
+    })));
+  }
+}
+if (false) {
+  Message__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/MessageBanner/MessageBanner.module.css

@@ -1,28 +1,20 @@
+.type_primary {
+}
 .type_secondary {
   max-width: var(--zd_size468);
   border-radius: 3px;
   margin: 0 auto;
 }
 .message {
-  color: var(--zdt_messagebanner_text);
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
   padding: var(--zd_size10) 0;
-}
-[dir=ltr] .message {
+  color: var(--zdt_messagebanner_text);
   margin-left: var(--zd_size10);
-}
-[dir=rtl] .message {
-  margin-right: var(--zd_size10);
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
 .link {
   color: var(--zdt_messagebanner_link_text);
-}
-[dir=ltr] .link {
   margin-left: var(--zd_size5);
 }
-[dir=rtl] .link {
-  margin-right: var(--zd_size5);
-}
 .message,.link{font-size:  var(--zd_font_size14);}
 .close {
   color: var(--zdt_messagebanner_close_text);

package/es/MessageBanner/docs/MessageBanner__default.docs.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MessageBanner from '../MessageBanner';
+export default class MessageBanner__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    let {
+      message
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Type"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#ddd',
+        padding: 'var(--zd_size16)'
+      }
+    }, /*#__PURE__*/React.createElement(MessageBanner, {
+      message: 'Type: Primary',
+      type: "primary",
+      urlText: "refresh",
+      href: '#',
+      onClick: () => {
+        console.log('clicked');
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#ddd',
+        padding: 'var(--zd_size16)'
+      }
+    }, /*#__PURE__*/React.createElement(MessageBanner, {
+      message: 'Type: Secondary',
+      type: "secondary",
+      urlText: "refresh",
+      href: '#',
+      onClick: () => {
+        console.log('clicked');
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Palette"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#ddd',
+        padding: 'var(--zd_size16)'
+      }
+    }, /*#__PURE__*/React.createElement(MessageBanner, {
+      message: 'Palette: default',
+      type: "primary",
+      urlText: "refresh",
+      href: '#',
+      onClick: () => {
+        console.log('clicked');
+      },
+      palette: "default"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#ddd',
+        padding: 'var(--zd_size16)'
+      }
+    }, /*#__PURE__*/React.createElement(MessageBanner, {
+      message: 'Palette: blue',
+      urlText: "refresh",
+      href: '#',
+      onClick: () => {
+        console.log('clicked');
+      },
+      palette: "blue"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#ddd',
+        padding: 'var(--zd_size16)'
+      }
+    }, /*#__PURE__*/React.createElement(MessageBanner, {
+      message: 'Palette: white',
+      urlText: "refresh",
+      href: '#',
+      onClick: () => {
+        console.log('clicked');
+      },
+      palette: "white"
+    })))));
+  }
+}
+if (false) {
+  MessageBanner__default.docs = {
+    componentGroup: 'Atom'
+  };
+}