@zohodesk/dot 1.0.0-temp-62 → 1.0.0-temp-65

package/src/ToastMessage/ToastMessage.module.css

@@ -0,0 +1,257 @@
+.container {
+  border-radius: 5px;
+  box-shadow: 0 5px 40px 7px var(--zdt_toastmessage_default_box_shadow);
+  background-color: var(--zdt_toastmessage_default_bg);
+  transition: all var(--zd_transition4);
+  margin-bottom: var(--zd_size7);
+  position: relative;
+  transform-origin: right center;
+  max-height: 100%;
+}
+
+.closeAnimation {
+  max-height: 0;
+  margin-bottom: 0;
+  transition: all var(--zd_transition3) 0.4s;
+}
+
+.animation {
+  composes: modeForward from '~@zohodesk/components/lib/common/animation.module.css';
+  animation-duration: var(--zd_transition4);
+  -webkit-animation-duration: var(--zd_transition4);
+}
+
+.leftanimate {
+  composes: slideLeft from '~@zohodesk/components/lib/common/animation.module.css';
+  composes: animation;
+}
+
+.leftnoanimate {
+  transform: translateX(0) scale(1);
+  opacity: 1;
+}
+
+.rightanimate {
+  composes: slideRight from '~@zohodesk/components/lib/common/animation.module.css';
+  composes: animation;
+  composes: closeAnimation;
+}
+
+.alertifychild {
+  position: relative;
+}
+
+.alertifybanner {
+  overflow: hidden;
+  border-radius: 5px 0 0 5px;
+}
+
+.alertright {
+  border-left: 1px solid var(--zdt_toastmessage_alert_border);
+  width: var(--zd_size105);
+}
+
+.popbutton {
+  font-size: var(--zd_font_size10);
+  color: var(--zdt_toastmessage_popbutton_text);
+  composes: wbreak textCap from '~@zohodesk/components/lib/common/common.module.css';
+  transition: all var(--zd_transition3);
+  position: relative;
+  cursor: pointer;
+}
+
+.mainbutton {
+  composes: popbutton;
+  font-size: var(--zd_font_size11);
+}
+
+.sumbitBorder {
+  border-bottom: 1px solid var(--zdt_toastmessage_submit_border);
+}
+
+.notSolo {
+  composes: mainbutton;
+  composes: sumbitBorder;
+}
+
+.primary {
+  color: var(--zdt_toastmessage_primary_text);
+}
+
+.danger {
+  color: var(--zdt_toastmessage_danger_text);
+}
+
+.success {
+  color: var(--zdt_toastmessage_success_text);
+}
+
+.cancelButton {
+  composes: popbutton;
+}
+
+.cancelButton:hover {
+  color: var(--zdt_toastmessage_cancel_hover_text);
+}
+
+.primary:hover,
+.alerttab:hover .coverfill.primary {
+  background-color: var(--zdt_toastmessage_primary_hover_bg);
+  color: var(--zdt_toastmessage_primary_hover_text);
+}
+
+.danger:hover,
+.alerttab:hover .coverfill.danger {
+  background-color: var(--zdt_toastmessage_danger_hover_bg);
+  color: var(--zdt_toastmessage_primary_hover_text);
+}
+
+.success:hover,
+.alerttab:hover .coverfill.success {
+  background-color: var(--zdt_toastmessage_success_hover_bg);
+  color: var(--zdt_toastmessage_primary_hover_text);
+}
+
+.alertleft {
+  padding: var(--zd_size15) var(--zd_size25);
+}
+.alertico {
+  min-width: var(--zd_size50);
+}
+
+.alertsecondary .alertico {
+  z-index: -1;
+  opacity: 0.1;
+  position: absolute;
+}
+
+.alertTitle {
+  composes: semibold wbreak dotted from '~@zohodesk/components/lib/common/common.module.css';
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_toastmessage_alerttitle_text);
+}
+
+.alertTitleLeft {
+  margin-right: var(--zd_size10);
+}
+
+.alertMessage {
+  font-size: var(--zd_font_size12);
+  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
+  margin-top: var(--zd_size5);
+  line-height: var(--zd_size16);
+  color: var(--zdt_toastmessage_alert_text);
+}
+
+.buttonText {
+  font-size: inherit;
+  text-align: center;
+  line-height: var(--zd_size14);
+  padding: 0 var(--zd_size7);
+  cursor: pointer;
+}
+
+.closeIcon,
+.closeIconPrimary {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+  padding: var(--zd_size2);
+  border-bottom-left-radius: 3px;
+  cursor: pointer;
+  color: var(--zdt_toastmessage_closeicon);
+}
+
+.closeIcon:hover {
+  background-color: var(--zdt_toastmessage_closeicon_hover_bg);
+}
+
+.alertright:hover .closeIcon i {
+  color: var(--zdt_toastmessage_primary_hover_text);
+}
+
+.closeIconPrimary:hover i {
+  color: var(--zdt_toastmessage_closeicon_hover_text);
+}
+
+.dropdown {
+  width: var(--zd_size23);
+  background: var(--zdt_toastmessage_dropdown_bg);
+  position: relative;
+  height: 100%;
+  color: var(--zdt_toastmessage_dropdown_text);
+}
+
+.dropdown > i {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.dropdown:hover i {
+  color: var(--zdt_toastmessage_cancel_hover_text);
+}
+
+.message {
+  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
+  border-top: 1px solid var(--zdt_toastmessage_message_border);
+  cursor: pointer;
+  position: relative;
+  color: var(--zdt_toastmessage_popbutton_text);
+  font-size: var(--zd_font_size11);
+  composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
+  height: var(--zd_size33);
+  transition: padding var(--zd_transition3), height var(--zd_transition3);
+  margin:0;
+}
+
+.messageOff {
+  border-width: 0;
+  padding: 0 var(--zd_size20) 0 var(--zd_size76);
+  height: 0;
+  font-size: 0;
+}
+
+.message:hover {
+  background: var(--zdt_toastmessage_dropdown_bg);
+}
+
+.fill {
+  width: var(--zd_size29);
+  height: var(--zd_size29);
+  line-height: var(--zd_size29);
+  text-align: center;
+  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.successFill {
+  composes: fill;
+  background: var(--zdt_toastmessage_successfill_bg);
+  color: var(--zdt_toastmessage_primary_hover_text);
+}
+
+.dangerFill {
+  composes: fill;
+  background: var(--zdt_toastmessage_danger_hover_bg);
+  color: var(--zdt_toastmessage_primary_hover_text);
+}
+
+.dangerShadow {
+  text-shadow: 0 4px 22px var(--zdt_toastmessage_danger_text_shadow);
+  margin-top: var(--zd_size5);
+  color: var(--zdt_toastmessage_danger_text);
+}
+
+.successPlain {
+  color: var(--zdt_toastmessage_successplain_text);
+}
+
+.dangerPlain {
+  color: var(--zdt_toastmessage_danger_text);
+}
+
+.primaryPlain {
+  color: var(--zdt_toastmessage_primary_text);
+}

package/src/ToastMessage/docs/ToastMessage__custom.docs.js

@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import ToastMessage from '../ToastMessage';
+import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import Switch from '@zohodesk/components/lib/Switch/Switch';
+import style from '@zohodesk/components/lib/common/docStyle.module.css';
+
+export default class ToastMessage__custom extends Component {
+  constructor(props) {
+    super(props);
+    this.getLeftPanel = this.getLeftPanel.bind(this);
+    this.getSubmitContainer = this.getSubmitContainer.bind(this);
+    this.getFooterContainer = this.getFooterContainer.bind(this);
+    this.getBottomContainer = this.getBottomContainer.bind(this);
+  }
+
+  getLeftPanel() {
+    return (
+      <div>
+        <Avatar
+          name='BK'
+          shape='square'
+          size='medium'
+          src='https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg'
+        />
+      </div>
+    );
+  }
+
+  getSubmitContainer() {
+    return (
+      <div style={{ textAlign: 'center' }}>
+        <Switch checked id='test2' name='category' />
+      </div>
+    );
+  }
+
+  getFooterContainer() {
+    return <p>Custome Footer</p>;
+  }
+
+  getBottomContainer() {
+    return <div>text</div>;
+  }
+
+  render() {
+    return (
+      <div className={style.m50}>
+        <div className={style.w410}>
+          <ToastMessage
+            cancelText='Not now'
+            getLeftContainer={this.getLeftPanel}
+            info='There is a few changes occurred in this ticket'
+            isAnimate={false}
+            isIconMid
+            subject='Screen Notification'
+            submitText='Submit'
+            getInnerBottomContainer={this.getFooterContainer}
+            getBottomContainer={this.getBottomContainer}
+          />
+        </div>
+
+        <div className={style.w410}>
+          <ToastMessage
+            cancelText='Not now'
+            getLeftContainer={this.getLeftPanel}
+            getSubmitContainer={this.getSubmitContainer}
+            info='There is a few changes occurred in this ticket'
+            isAnimate={false}
+            subject='Screen Notification'
+            submitText='Submit'
+            isIconMid
+          />
+        </div>
+
+        <div className={style.w410}>
+          <ToastMessage
+            cancelText='Not now'
+            info='There is a few changes occurred in this ticket'
+            isAnimate={false}
+            subject='Screen Notification'
+            submitText='Submit'
+            getLeftContainer={this.getLeftPanel}
+            getSubmitContainer={this.getSubmitContainer}
+            getInnerBottomContainer={this.getFooterContainer}
+            isIconMid
+          />
+        </div>
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  ToastMessage__custom.docs = {
+    componentGroup: 'Atom',
+    description: ' '
+  };
+}

package/src/ToastMessage/docs/ToastMessage__information.docs.js

@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import ToastMessage from '../ToastMessage';
+import style from '@zohodesk/components/lib/common/docStyle.module.css';
+
+export default class ToastMessage__information extends Component {
+  render() {
+    return (
+      <div className={style.m50}>
+        <div className={style.w410}>
+          <ToastMessage
+            type='information'
+            subject='Screen Notification'
+            info='There is a few changes occurred in this ticket'
+            submitText='View changes'
+            needClose
+            iconSize='17'
+            iconName='ZD-ticknew'
+            isIconMid
+            iconPalette='successPlain'
+          />
+        </div>
+
+        <div className={style.w410}>
+          <ToastMessage
+            type='information'
+            iconName='ZD-exclamationNew'
+            subject='Log Notification'
+            info="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,"
+            cancelText='Not now'
+            iconSize='30'
+            iconPalette='dangerShadow'
+          />
+        </div>
+
+        <div className={style.w410}>
+          <ToastMessage
+            type='information'
+            iconName='ZD-ticknew'
+            subject='Log Notification'
+            info="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,"
+            cancelText='Not now'
+            iconSize='12'
+            iconPalette='successFill'
+            needClose
+            onPortalClose={()=>{console.log('from close')}}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  ToastMessage__information.docs = {
+    componentGroup: 'Atom',
+    description: ' '
+  };
+}

package/src/ToastMessage/docs/ToastMessage__primary.docs.js

@@ -0,0 +1,135 @@
+import React, { Component } from 'react';
+import ToastMessage from '../ToastMessage';
+import style from '@zohodesk/components/lib/common/docStyle.module.css';
+
+export default class ToastMessage__primary extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className={style.m50}>
+        <div className={style.w410}>
+          <ToastMessage
+            iconName='ZD-exclamationNew'
+            subject='Screen Notification'
+            info='There is a few changes occurred in this ticket'
+            submitText='Submit'
+            cancelText='Not now'
+            isAnimate={false}
+            iconPalette='dangerPlain'
+          />
+        </div>
+        <div className={style.w410}>
+          <ToastMessage
+            iconName='ZD-exclamationNew'
+            iconPalette='dangerPlain'
+            subject='Screen Notification'
+            info='There is a few changes occurred in this ticket'
+            submitText='Submit'
+            cancelText='Not now'
+            submitType='success'
+            isAnimate={false}
+          />
+        </div>
+        <div className={style.w410}>
+          <ToastMessage
+            iconName='ZD-exclamationNew'
+            subject='Desktop Notification'
+            info="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,"
+            submitText='Submit'
+            cancelText='Not now'
+            submitType='danger'
+            isIconMid
+            iconPalette='dangerPlain'
+          />
+        </div>
+        <div className={style.w410}>
+          <ToastMessage
+            iconName='ZD-exclamationNew'
+            iconPalette='dangerPlain'
+            subject='Screen Notification'
+            info='There is a few changes occurred in this ticket'
+            submitText='Submit'
+            cancelText='Not now'
+            isMore
+            message='Do not Show this again'
+          />
+        </div>
+        <div className={style.w410}>
+          <ToastMessage
+            iconName='ZD-exclamationNew'
+            iconPalette='dangerPlain'
+            subject='Screen Notification'
+            info='There is a few changes occurred in this ticket'
+            submitText='Submit'
+            cancelText='Not now'
+            submitType='success'
+            isMore
+            message='Do not Show this again'
+          />
+        </div>
+        <div className={style.w410}>
+          <ToastMessage
+            iconName='ZD-exclamationNew'
+            subject='Desktop Notification'
+            info="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,"
+            submitText='Submit'
+            cancelText='Not now'
+            submitType='danger'
+            isIconMid
+            iconPalette='dangerPlain'
+            isMore
+            messageState
+            message='Do not Show this again'
+          />
+        </div>
+        <div className={style.w410}>
+          <ToastMessage
+            iconName='ZD-exclamationNew'
+            iconPalette='primaryPlain'
+            subject='Mobile Notification'
+            info="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
+            submitText='Submit'
+            cancelText='Not now'
+          />
+        </div>
+        <div className={style.w410}>
+          <ToastMessage
+            iconName='ZD-exclamationNew'
+            iconPalette='dangerPlain'
+            subject='Log Notification'
+            info="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,"
+            cancelText='Not now'
+          />
+        </div>
+        <div className={style.w410}>
+          <ToastMessage
+            iconName='ZD-exclamationNew'
+            iconPalette='primaryPlain'
+            subject='Log Notification'
+            info="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,"
+            submitText='Submit'
+          />
+        </div>
+        <div className={style.w410}>
+          <ToastMessage
+            iconName='ZD-exclamationNew'
+            iconPalette='dangerPlain'
+            subject='Log Notification'
+            info="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,"
+            submitText='Close'
+            submitType='danger'
+          />
+        </div>
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  ToastMessage__primary.docs = {
+    componentGroup: 'Atom',
+    description: ' '
+  };
+}

package/src/ToastMessage/docs/ToastMessage__secondary.docs.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import ToastMessage from '../ToastMessage';
+import style from '@zohodesk/components/lib/common/docStyle.module.css';
+
+export default class ToastMessage__secondary extends Component {
+  render() {
+    return (
+      <div className={style.m50}>
+        <div className={style.w410}>
+          <ToastMessage
+            type='secondary'
+            subject='Screen Notification'
+            info='There is a few changes occurred in this ticket'
+            submitText='View changes'
+            needClose
+            iconSize='35'
+            iconName='ZD-update'
+          />
+        </div>
+
+        <div className={style.w410}>
+          <ToastMessage
+            type='secondary'
+            iconName='ZD-exclamationNew'
+            subject='Log Notification'
+            info="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,"
+            cancelText='Not now'
+            iconSize='40'
+          />
+        </div>
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  ToastMessage__secondary.docs = {
+    componentGroup: 'Atom',
+    description: ' '
+  };
+}

package/src/ToastMessage/docs/ToastMessage__success.docs.js

@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import ToastMessage from '../ToastMessage';
+import style from '@zohodesk/components/lib/common/docStyle.module.css';
+
+export default class ToastMessage__success extends Component {
+  render() {
+    return (
+      <div className={style.m50}>
+        <div className={style.w410}>
+          <ToastMessage
+            type='success'
+            subject='Screen Notification'
+            info='There is a few changes occurred in this ticket'
+            submitText='details'
+            iconSize='12'
+            iconName='ZD-ticknew'
+            iconPalette='successFill'
+          />
+        </div>
+
+        <div className={style.w410}>
+          <ToastMessage
+            type='success'
+            iconName='ZD-exclamationNew'
+            subject='Log Notification'
+            info="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,"
+            cancelText='Not now'
+            iconSize='16'
+            iconPalette='dangerFill'
+          />
+        </div>
+
+        <div className={style.w410}>
+          <ToastMessage
+            type='success'
+            iconName='ZD-ticknew'
+            subject='Log Notification'
+            info="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,"
+            submitText='details'
+            cancelText='Not now'
+            iconSize='12'
+            iconPalette='successFill'
+          />
+        </div>
+
+        <div className={style.w410}>
+          <ToastMessage
+            type='success'
+            iconName='ZD-ticknew'
+            subject='Log Notification'
+            info="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,"
+            submitText='details'
+            cancelText='Not now'
+            iconSize='12'
+            iconPalette='successFill'
+            submitType='danger'
+          />
+        </div>
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  ToastMessage__success.docs = {
+    componentGroup: 'Atom',
+    description: ' '
+  };
+}