@zohodesk/dot 1.0.0-temp-106 → 1.0.0-temp-107

package/es/Drawer/Drawer.module.css

@@ -1,20 +1,15 @@
 .container {
-  transition: width var(--zd_transition3);
   box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
   background-color: var(--zdt_drawer_default_bg);
+  transition: width var(--zd_transition3);
 }
 .isOverlay {
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
   pointer-events: none;
 }
-[dir=ltr] .isOverlay {
-  right: 0;
-}
-[dir=rtl] .isOverlay {
-  left: 0;
-}
 .columns {
   pointer-events: initial;
 }
@@ -26,29 +21,18 @@
   box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
 }
 .secondMobDrawer {
+  right: 0;
   position: absolute;
   top: 0;
   z-index: 1;
 }
-[dir=ltr] .secondMobDrawer {
-  right: 0;
-}
-[dir=rtl] .secondMobDrawer {
-  left: 0;
-}
 .mobModal {
   position: absolute;
   top: 0;
-  bottom: 0;
-}
-[dir=ltr] .mobModal {
   right: 0;
+  bottom: 0;
   left: 0;
 }
-[dir=rtl] .mobModal {
-  left: 0;
-  right: 0;
-}
 .xsmall {
   width: var(--zd_size360);
 }
@@ -88,64 +72,32 @@
   color: var( --zdt_drawer_title_text);
   font: var(--zd_font_size16) var(--zd_semibold);
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-[dir=ltr] .title {
   padding: 0 var(--zd_size10) 0 0;
 }
-[dir=rtl] .title {
-  padding: 0 0 0 var(--zd_size10);
-}
-[dir=ltr] .smallHeaderPadding {
+.smallHeaderPadding {
   padding-right: var(--zd_size11);
   padding-left: var(--zd_size30);
 }
-[dir=rtl] .smallHeaderPadding {
-  padding-left: var(--zd_size11);
-  padding-right: var(--zd_size30);
-}
-[dir=ltr] .smallContentPadding {
+.smallContentPadding {
   padding-left: var(--zd_size30);
   padding-right: var(--zd_size30);
 }
-[dir=rtl] .smallContentPadding {
-  padding-right: var(--zd_size30);
-  padding-left: var(--zd_size30);
-}
-[dir=ltr] .mediumHeaderPadding {
+.mediumHeaderPadding {
   padding-right: var(--zd_size15);
   padding-left: var(--zd_size30);
 }
-[dir=rtl] .mediumHeaderPadding {
-  padding-left: var(--zd_size15);
-  padding-right: var(--zd_size30);
-}
-[dir=ltr] .mediumContentPadding {
+.mediumContentPadding {
   padding-left: var(--zd_size30);
   padding-right: var(--zd_size30);
 }
-[dir=rtl] .mediumContentPadding {
-  padding-right: var(--zd_size30);
-  padding-left: var(--zd_size30);
-}
-[dir=ltr] .largeHeaderPadding {
+.largeHeaderPadding {
   padding-right: var(--zd_size15);
   padding-left: var(--zd_size50);
 }
-[dir=rtl] .largeHeaderPadding {
-  padding-left: var(--zd_size15);
-  padding-right: var(--zd_size50);
-}
-[dir=ltr] .largeContentPadding {
+.largeContentPadding {
   padding-left: var(--zd_size50);
   padding-right: var(--zd_size50);
 }
-[dir=rtl] .largeContentPadding {
-  padding-right: var(--zd_size50);
-  padding-left: var(--zd_size50);
-}
-[dir=ltr] .iconWrapper {
+.iconWrapper {
   margin-right: var(--zd_size10);
 }
-[dir=rtl] .iconWrapper {
-  margin-left: var(--zd_size10);
-}

package/es/Drawer/props/defaultProps.js

@@ -16,6 +16,5 @@ export const Drawer_defaultProps = {
   subDrawerClass: '',
   customClass: '',
   needAutoZindex: true,
-  onBodyClick: () => {},
-  needFocusScope: false
+  onBodyClick: () => {}
 };

package/es/Drawer/props/propTypes.js

@@ -45,6 +45,5 @@ export const Drawer_propTypes = {
   subDrawerActive: PropTypes.bool,
   subDrawerChildren: PropTypes.func,
   subDrawerClass: PropTypes.string,
-  subDrawerSize: PropTypes.oneOf(['xsmall', 'small', 'medium']),
-  needFocusScope: PropTypes.bool
+  subDrawerSize: PropTypes.oneOf(['xsmall', 'small', 'medium'])
 };

package/es/FlipCard/FlipCard.module.css

@@ -1,8 +1,7 @@
 .flip,
 .flipNone {
-  color: var(--zdt_flipcard_default_text);
-}.flip, .flipNone {
   background-color: var(--zdt_flipcard_default_bg);
+  color: var(--zdt_flipcard_default_text);
 }
 .container {
   position: relative;
@@ -21,24 +20,16 @@
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
 }
-[dir=ltr] .front {
+.front {
   transform: rotateY(180deg) perspective(1px);
 }
-[dir=rtl] .front {
-  transform: rotateY(-180deg) perspective(1px);
-}
 .back {
   transform: rotateY(0deg) perspective(1px);
 }
-[dir=ltr] .notFlip .container {
+.notFlip .container {
   transform: rotateY(180deg);
 }
-[dir=rtl] .notFlip .container {
-  transform: rotateY(-180deg);
-}
-[dir=ltr] .flip:hover .container, [dir=ltr] .hoverContainer:hover .container {
+.flip:hover .container,
+.hoverContainer:hover .container {
   transform: rotateY(180deg);
 }
-[dir=rtl] .flip:hover .container, [dir=rtl] .hoverContainer:hover .container {
-  transform: rotateY(-180deg);
-}

package/es/FormAction/FormAction.module.css

@@ -25,58 +25,33 @@
   padding-bottom: var(--zd_size10);
 }
 
-[dir=ltr] .largePadding {
+.largePadding {
   padding-left: var(--zd_size60);
 }
-
-[dir=rtl] .largePadding {
-  padding-right: var(--zd_size60);
-}
-[dir=ltr] .mediumPadding {
+.mediumPadding {
   padding-left: var(--zd_size50);
 }
-[dir=rtl] .mediumPadding {
-  padding-right: var(--zd_size50);
-}
-[dir=ltr] .xmediumPadding {
+.xmediumPadding {
   padding-left: var(--zd_size30);
 }
-[dir=rtl] .xmediumPadding {
-  padding-right: var(--zd_size30);
-}
-[dir=ltr] .smallPadding {
+.smallPadding {
   padding-left: var(--zd_size25);
 }
-[dir=rtl] .smallPadding {
-  padding-right: var(--zd_size25);
-}
-[dir=ltr] .xsmallPadding {
+.xsmallPadding {
   padding-left: var(--zd_size20);
 }
-[dir=rtl] .xsmallPadding {
-  padding-right: var(--zd_size20);
-}
 
 .marginRight {
   composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
 }
-[dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
+.largeFooter .marginRight,
+.mediumFooter .marginRight {
   margin-right: var(--zd_size15);
 }
-[dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
-  margin-left: var(--zd_size15);
-}
-[dir=ltr] .smallFooter .marginRight {
+.smallFooter .marginRight {
   margin-right: var(--zd_size12);
 }
-[dir=rtl] .smallFooter .marginRight {
-  margin-left: var(--zd_size12);
-}
 
-[dir=ltr] .marginRight:last-child {
+.marginRight:last-child {
   margin-right: 0;
 }
-
-[dir=rtl] .marginRight:last-child {
-  margin-left: 0;
-}

package/es/FreezeLayer/FreezeLayer.module.css

@@ -1,14 +1,10 @@
 .container {
   top: 0;
+  left: 0;
   bottom: 0;
+  right: 0;
   position: absolute;
   overflow: hidden;
-}[dir=ltr] .container {
-  left: 0;
-  right: 0;
-}[dir=rtl] .container {
-  right: 0;
-  left: 0;
 }
 .default {
   background-color: var(--zdt_freezelayer_default_bg);

package/es/IconButton/IconButton.module.css

@@ -3,11 +3,11 @@
 }
 .wrapper {
   height: var(--zd_size28);
+  cursor: pointer;
   width: var(--zd_size28);
   composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
   composes: varClass;
   color: var(--iconColor);
-  cursor: pointer;
 }
 .primary {
   --iconColor: var(--zdt_iconButton_icon_primary);

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/Link/Link.js

@@ -49,7 +49,8 @@ export default class Link extends React.Component {
       download,
       rel,
       dataId,
-      customProps
+      customProps,
+      ariaLabel
     } = this.props;
     let {
       isLink,
@@ -60,7 +61,7 @@ export default class Link extends React.Component {
     if (download) {
       option.download = true;
     }
-    let ignoreKeys = ['children', 'href', 'target', 'urlData', 'urlName', 'className', 'title', 'download', 'rel', 'dataId', 'hasReload', 'customProps', 'option'];
+    let ignoreKeys = ['children', 'href', 'target', 'urlData', 'urlName', 'className', 'title', 'download', 'rel', 'dataId', 'hasReload', 'customProps', 'option', 'ariaLabel'];
     let others = Object.keys(this.props).filter(key => ignoreKeys.indexOf(key) == -1).reduce((res, key) => {
       res[key] = this.props[key];
       return res;
@@ -77,7 +78,9 @@ export default class Link extends React.Component {
       "data-id": dataId
     }, others, {
       onClick: this.onCallBack.bind(this, urlOutput, href)
-    }, customProps), children);
+    }, customProps, {
+      "aria-label": ariaLabel
+    }), children);
   }
 }
 Link.contextType = LinkContext;

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/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/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/NewStar/NewStar.module.css

@@ -5,53 +5,26 @@
   width: var(--zd_size21);
 }
 .topLeft {
-  top: 0;
-}
-[dir=ltr] .topLeft {
   transform: translate(-45%, -45%);
   left: 0;
-}
-[dir=rtl] .topLeft {
-  transform: translate(45%, -45%);
-  right: 0;
-}
-.topRight {
   top: 0;
 }
-[dir=ltr] .topRight {
+.topRight {
   transform: translate(45%, -45%);
   right: 0;
-}
-[dir=rtl] .topRight {
-  transform: translate(-45%, -45%);
-  left: 0;
+  top: 0;
 }
 .bottomLeft {
-  bottom: 0;
-}
-[dir=ltr] .bottomLeft {
   transform: translate(-45%, 45%);
   left: 0;
-}
-[dir=rtl] .bottomLeft {
-  transform: translate(45%, 45%);
-  right: 0;
-}
-.bottomRight {
   bottom: 0;
 }
-[dir=ltr] .bottomRight {
+.bottomRight {
   transform: translate(45%, 45%);
   right: 0;
+  bottom: 0;
 }
-[dir=rtl] .bottomRight {
-  transform: translate(-45%, 45%);
-  left: 0;
-}
-[dir=ltr] .stars {
-  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
-}
-[dir=rtl] .stars {
+.stars {
   animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
 }
 .green::before {
@@ -68,20 +41,10 @@
 }
 .starTwo {
   composes: stars;
-}
-[dir=ltr] .starTwo {
-  animation-delay: 0.5s;
-}
-[dir=rtl] .starTwo {
   animation-delay: 0.5s;
 }
 .starThree {
   composes: stars;
-}
-[dir=ltr] .starThree {
-  animation-delay: 1s;
-}
-[dir=rtl] .starThree {
   animation-delay: 1s;
 }