@zohodesk/dot 1.7.4 → 1.7.6

package/es/version2/notification/DesktopNotification/DesktopNotification.js

@@ -27,6 +27,9 @@ let buttonPaletteObject = {
   },
   notification: {
     buttonPalette: 'primaryFilled'
+  },
+  primary: {
+    buttonPalette: 'primaryFilled'
   }
 };
 export function DesktopNotificationUI(props) {

package/es/version2/notification/DesktopNotification/__tests__/__snapshots__/DesktopNotification.spec.js.snap

@@ -21,7 +21,7 @@ exports[`DesktopNotification rendering the defult props 1`] = `
         data-test-id="boxComponent"
       >
         <div
-          class="container primary undefined flex rowdir wrap vCenter"
+          class="container primary_header undefined flex rowdir wrap vCenter"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"

package/es/version2/notification/DesktopNotification/props/propTypes.js

@@ -8,7 +8,7 @@ export const propTypes = {
   responsiveId: PropTypes.string
 };
 export const DesktopNotificationUI_propTypes = {
-  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
+  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm', 'primary']),
   cancelText: PropTypes.string,
   submitText: PropTypes.string,
   submitType: PropTypes.oneOf(['primary', 'danger', 'success']),

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -39,7 +39,7 @@ export default class DesktopNotificationHeader extends Component {
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${style.container} ${style[variant]} ${style[type]}`,
+      className: `${style.container} ${style[variant + '_header']} ${style[type]}`,
       isCover: false,
       wrap: "wrap"
     }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css

@@ -1,132 +1,138 @@
 .varClass {
   --commonalert_border_color: var(--zdt_commonalert_default_border);
 }
+
 .container {
-    composes: varClass;
-    min-height: var(--zd_size54) ;
-    position: relative;
-    color: var(--zdt_desktopnotification_text);
-    background-color: var(--alert_lookup_bg_color);
-    border-style: solid;
-    border-color: var(--commonalert_border_color);
-    border-width: 2px 0 0 0;
-  }
-
-  .title {
-    composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
-  }
-
-  [dir=ltr] .title {
+  composes: varClass;
+  min-height: var(--zd_size54) ;
+  position: relative;
+  color: var(--zdt_desktopnotification_text);
+  background-color: var(--alert_lookup_bg_color);
+  border-style: solid;
+  border-color: var(--commonalert_border_color);
+  border-width: 2px 0 0 0;
+}
+
+.title {
+  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+[dir=ltr] .title {
   margin: 0 var(--zd_size5) 0 var(--zd_size10) ;
-  }
+}
 
-  [dir=rtl] .title {
-    margin: 0 var(--zd_size10) 0 var(--zd_size5) ;
-  }
+[dir=rtl] .title {
+  margin: 0 var(--zd_size10) 0 var(--zd_size5) ;
+}
 
-  .infoText {
-    max-width: 100% ;
-  }
+.infoText {
+  max-width: 100% ;
+}
 
-  /* Palette */
+/* Palette */
 
-  .success {
-    --commonalert_border_color: var(--zdt_commonalert_success_border);
-  }
+.success {
+  --commonalert_border_color: var(--zdt_commonalert_success_border);
+}
+
+.info,
+.notification,
+.alarm {
+  --commonalert_border_color: var(--zdt_commonalert_info_border);
+}
+
+.danger,.error {
+  --commonalert_border_color: var(--zdt_commonalert_danger_border);
+}
 
-  .info,.notification,.alarm {
-    --commonalert_border_color: var(--zdt_commonalert_info_border);
-  }
 
-  .danger {
-    --commonalert_border_color: var(--zdt_commonalert_danger_border);
-  }
 
-  .error {
-    --commonalert_border_color: var(--zdt_commonalert_error_border);
-  }
+.warning {
+  --commonalert_border_color: var(--zdt_commonalert_warning_border);
+}
+
+.primary {
+  --commonalert_border_color: var(--zdt_commonalert_primary_border);
+}
 
-  .warning {
-    --commonalert_border_color: var(--zdt_commonalert_warning_border);
-  }
 
 
 /* Primary Header */
-[dir=ltr] .primary {
+[dir=ltr] .primary_header {
   padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20) ;
 }
-[dir=rtl] .primary {
-    padding: var(--zd_size15) var(--zd_size20) 0 var(--zd_size45) ;
+[dir=rtl] .primary_header {
+  padding: var(--zd_size15) var(--zd_size20) 0 var(--zd_size45) ;
 }
 
-.primary .iconContainer {
+.primary_header .iconContainer {
   height: var(--zd_size51) ;
   width: var(--zd_size51) ;
 }
 
-.primary .infoText {
-    line-height: 1;
-  }
+.primary_header .infoText {
+  line-height: 1;
+}
 
-  .primary .close {
-    position: absolute;
-    top: var(--zd_size12) ;
-  }
+.primary_header .close {
+  position: absolute;
+  top: var(--zd_size12) ;
+}
 
-  [dir=ltr] .primary .close {
+[dir=ltr] .primary_header .close {
   right: var(--zd_size12) ;
-  }
-
-  [dir=rtl] .primary .close {
-    left: var(--zd_size12) ;
-  }
-
-  /* Secondary Header */
-  .secondary {
-    composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
-    border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-  }
-  [dir=ltr] .secondary {
+}
+
+[dir=rtl] .primary_header .close {
+  left: var(--zd_size12) ;
+}
+
+/* Secondary Header */
+.secondary_header {
+  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
+  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
+}
+[dir=ltr] .secondary_header {
   padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75) ;
-  }
-  [dir=rtl] .secondary {
-    padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70) ;
-  }
-
-  .secondary .infoText {
-    line-height: 1.4286;
-  }
-
-  .secondary .iconContainer {
-    height: var(--zd_size44) ;
-    width: var(--zd_size44) ;
-    position: absolute;
-    top: 0 ;
-    bottom: 0 ;
-    margin: auto 0 ;
-  }
-
-  [dir=ltr] .secondary .iconContainer {
+}
+[dir=rtl] .secondary_header {
+  padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70) ;
+}
+
+.secondary_header .infoText {
+  line-height: 1.4286;
+}
+
+.secondary_header .iconContainer {
+  height: var(--zd_size44) ;
+  width: var(--zd_size44) ;
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  margin: auto 0 ;
+}
+
+[dir=ltr] .secondary_header .iconContainer {
   left: var(--zd_size18) ;
-  }
+}
 
-  [dir=rtl] .secondary .iconContainer {
-    right: var(--zd_size18) ;
-  }
+[dir=rtl] .secondary_header .iconContainer {
+  right: var(--zd_size18) ;
+}
 
-  .secondary .close {
-    position: absolute;
-    top: 0 ;
-    bottom: 0 ;
-    height: var(--zd_size25) ;
-  }
+.secondary_header .close {
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  height: var(--zd_size25) ;
+}
 
-  [dir=ltr] .secondary .close {
+[dir=ltr] .secondary_header .close {
   right: var(--zd_size12) ;
   margin: auto 0 auto var(--zd_size25) ;
-  }
+}
 
-  [dir=rtl] .secondary .close {
-    left: var(--zd_size12) ;
-    margin: auto var(--zd_size25) auto 0 ;
-  }
+[dir=rtl] .secondary_header .close {
+  left: var(--zd_size12) ;
+  margin: auto var(--zd_size25) auto 0 ;
+}

package/es/version2/notification/DesktopNotificationHeader/__tests__/__snapshots__/DesktopNotificationHeader.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`DesktopNotificationHeader rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container primary undefined flex rowdir wrap vCenter"
+    class="container primary_header undefined flex rowdir wrap vCenter"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"

package/es/version2/notification/DesktopNotificationHeader/props/propTypes.js

@@ -6,7 +6,7 @@ export const propTypes = {
   needIcon: PropTypes.bool,
   onClose: PropTypes.func,
   title: PropTypes.string,
-  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
+  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm', 'primary']),
   variant: PropTypes.oneOf(['primary', 'secondary']),
   responsiveId: PropTypes.string
 };

package/lib/ActionButton/ActionButton.module.css

@@ -1,193 +1,193 @@
-.varClass {
-  --buttonBg: var(--zdt_actionButton_primaryFilled_bg);
-  --buttonBorder: var(--zdt_actionButton_primary_border);
-  --buttonSeparatorBorder: var(--zdt_actionButton_separator_border);
-}
-
-.container {
-  composes: varClass;
-}
-
-.container:hover {
-  --buttonSeparatorBorder: var(--zdt_actionButton_separator_hover_border);
-}
-
-.primaryFilledBox {
-  --buttonText: var(--zdt_actionButton_primaryFilled_text);
-}
-
-.primaryFilledBtn,
-.primaryFilledArw {
-  /* css:theme-validation:ignore */
-}
-
-.primaryFilledBtn, .primaryFilledArw {
-  background-color: var(--buttonBg);
-}
-
-.primaryBox {
-  --buttonText: var(--zdt_actionButton_primary_text);
-}
-
-.primaryBtn,
-.primaryArw {
-  /* css:theme-validation:ignore */
-}
-
-.primaryBtn, .primaryArw {
-  border: 1px solid var(--buttonBorder);
-}
-
-[dir=ltr] .primaryBtn {
-  border-right: none;
-}
-
-[dir=rtl] .primaryBtn {
-  border-left: none;
-}
-
-.contentBox,
-.arrowWrapper {
-  transition: width var(--zd_transition3), padding var(--zd_transition3), background-color var(--zd_transition2), border-color var(--zd_transition2);
-}
-
-.contentBox, .arrowWrapper {
-  margin: 0 ;
-}
-
-.clickable {
-  cursor: pointer;
-}
-
-[dir=ltr] .contentBoxBdr {
-  border-radius: var(--zd_size4) 0 0 var(--zd_size4);
-}
-
-[dir=rtl] .contentBoxBdr {
-  border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
-}
-
-.contentBoxBdrRds {
-  border-radius: var(--zd_size4);
-}
-
-.small {
-  height: var(--zd_size28) ;
-}
-
-.medium,
-.large {
-  height: var(--zd_size30) ;
-}
-
-.medium {
-  min-width: var(--zd_size115) ;
-}
-
-.large {
-  min-width: var(--zd_size135) ;
-}
-
-.small_btnBox {
-  padding: 0 var(--zd_size8) ;
-}
-
-.medium_btnBox, .large_btnBox {
-  padding: 0 var(--zd_size10) ;
-}
-
-.txt {
-  font-size: var(--zd_font_size13) ;
-  font-family: var(--zd_semibold);
-  text-transform: capitalize;
-}
-
-.subTxt {
-  font-size: var(--zd_font_size10) ;
-}
-
-.contentwrapper,
-.txt,
-.subTxt {
-  max-width: 100% ;
-}
-
-.txt,
-.subTxt {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  /* css:theme-validation:ignore */
-  color: var(--buttonText);
-}
-
-.arrowWrapper {
-  position: relative;
-  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
-  cursor: pointer;
-}
-
-[dir=ltr] .arrowWrapper {
-  border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
-}
-
-[dir=rtl] .arrowWrapper {
-  border-radius: var(--zd_size4) 0 0 var(--zd_size4);
-}
-
-.primaryFilledArw {
-  /* css:theme-validation:ignore */
-}
-
-[dir=ltr] .primaryFilledArw {
-  border-left: 1px solid var(--buttonSeparatorBorder);
-}
-
-[dir=rtl] .primaryFilledArw {
-  border-right: 1px solid var(--buttonSeparatorBorder);
-}
-
-.small_arrowBox {
-  width: var(--zd_size20) ;
-}
-
-.medium_arrowBox {
-  width: var(--zd_size26) ;
-}
-
-.primaryFilledArw:hover,
-.primaryFilledArw.arrowActive,
-.clickable.primaryFilledBtn:hover,
-.wholeDiv.primaryFilledBox:hover {
-  --buttonBg: var(--zdt_actionButton_primaryFilled_hover_bg);
-}
-
-.primaryArw:hover,
-.primaryArw.arrowActive,
-.clickable.primaryBtn:hover,
-.wholeDiv.primaryBox:hover {
-  --buttonBorder: var(--zdt_actionButton_primary_hover_border);
-  --buttonText: var(--zdt_actionButton_primary_hover_text);
-}
-
-.btn {
-  height: 100% ;
-  width: 100% ;
-}
-
-.popupWrapper {
-  padding: var(--zd_size10) 0 ;
-  margin: var(--zd_size5) 0 ;
-}
-
-.arrow,
-.iconClr {
-  /* css:theme-validation:ignore */
-  color: var(--buttonText);
-}
-
-[dir=ltr] .iconMrgn {
-  margin-right: var(--zd_size6) ;
-}
-
-[dir=rtl] .iconMrgn {
-  margin-left: var(--zd_size6) ;
+.varClass {
+  --buttonBg: var(--zdt_actionButton_primaryFilled_bg);
+  --buttonBorder: var(--zdt_actionButton_primary_border);
+  --buttonSeparatorBorder: var(--zdt_actionButton_separator_border);
+}
+
+.container {
+  composes: varClass;
+}
+
+.container:hover {
+  --buttonSeparatorBorder: var(--zdt_actionButton_separator_hover_border);
+}
+
+.primaryFilledBox {
+  --buttonText: var(--zdt_actionButton_primaryFilled_text);
+}
+
+.primaryFilledBtn,
+.primaryFilledArw {
+  /* css:theme-validation:ignore */
+}
+
+.primaryFilledBtn, .primaryFilledArw {
+  background-color: var(--buttonBg);
+}
+
+.primaryBox {
+  --buttonText: var(--zdt_actionButton_primary_text);
+}
+
+.primaryBtn,
+.primaryArw {
+  /* css:theme-validation:ignore */
+}
+
+.primaryBtn, .primaryArw {
+  border: 1px solid var(--buttonBorder);
+}
+
+[dir=ltr] .primaryBtn {
+  border-right: none;
+}
+
+[dir=rtl] .primaryBtn {
+  border-left: none;
+}
+
+.contentBox,
+.arrowWrapper {
+  transition: width var(--zd_transition3), padding var(--zd_transition3), background-color var(--zd_transition2), border-color var(--zd_transition2);
+}
+
+.contentBox, .arrowWrapper {
+  margin: 0 ;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+[dir=ltr] .contentBoxBdr {
+  border-radius: var(--zd_size4) 0 0 var(--zd_size4);
+}
+
+[dir=rtl] .contentBoxBdr {
+  border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
+}
+
+.contentBoxBdrRds {
+  border-radius: var(--zd_size4);
+}
+
+.small {
+  height: var(--zd_size28) ;
+}
+
+.medium,
+.large {
+  height: var(--zd_size30) ;
+}
+
+.medium {
+  min-width: var(--zd_size115) ;
+}
+
+.large {
+  min-width: var(--zd_size135) ;
+}
+
+.small_btnBox {
+  padding: 0 var(--zd_size8) ;
+}
+
+.medium_btnBox, .large_btnBox {
+  padding: 0 var(--zd_size10) ;
+}
+
+.txt {
+  font-size: var(--zd_font_size13) ;
+  font-family: var(--zd_semibold);
+  text-transform: capitalize;
+}
+
+.subTxt {
+  font-size: var(--zd_font_size10) ;
+}
+
+.contentwrapper,
+.txt,
+.subTxt {
+  max-width: 100% ;
+}
+
+.txt,
+.subTxt {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  /* css:theme-validation:ignore */
+  color: var(--buttonText);
+}
+
+.arrowWrapper {
+  position: relative;
+  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
+  cursor: pointer;
+}
+
+[dir=ltr] .arrowWrapper {
+  border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
+}
+
+[dir=rtl] .arrowWrapper {
+  border-radius: var(--zd_size4) 0 0 var(--zd_size4);
+}
+
+.primaryFilledArw {
+  /* css:theme-validation:ignore */
+}
+
+[dir=ltr] .primaryFilledArw {
+  border-left: 1px solid var(--buttonSeparatorBorder);
+}
+
+[dir=rtl] .primaryFilledArw {
+  border-right: 1px solid var(--buttonSeparatorBorder);
+}
+
+.small_arrowBox {
+  width: var(--zd_size20) ;
+}
+
+.medium_arrowBox {
+  width: var(--zd_size26) ;
+}
+
+.primaryFilledArw:hover,
+.primaryFilledArw.arrowActive,
+.clickable.primaryFilledBtn:hover,
+.wholeDiv.primaryFilledBox:hover {
+  --buttonBg: var(--zdt_actionButton_primaryFilled_hover_bg);
+}
+
+.primaryArw:hover,
+.primaryArw.arrowActive,
+.clickable.primaryBtn:hover,
+.wholeDiv.primaryBox:hover {
+  --buttonBorder: var(--zdt_actionButton_primary_hover_border);
+  --buttonText: var(--zdt_actionButton_primary_hover_text);
+}
+
+.btn {
+  height: 100% ;
+  width: 100% ;
+}
+
+.popupWrapper {
+  padding: var(--zd_size10) 0 ;
+  margin: var(--zd_size5) 0 ;
+}
+
+.arrow,
+.iconClr {
+  /* css:theme-validation:ignore */
+  color: var(--buttonText);
+}
+
+[dir=ltr] .iconMrgn {
+  margin-right: var(--zd_size6) ;
+}
+
+[dir=rtl] .iconMrgn {
+  margin-left: var(--zd_size6) ;
 }