@zohodesk/components 1.0.0-alpha-247 → 1.0.0-alpha-249

package/es/Button/Button.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import style from './Button.module.css';
-import { dummyFunction } from '../utils/dummyFunction';
 /*
 Button text and children props?
 use children for both cases
@@ -55,51 +55,8 @@ export default class Button extends React.Component {
   }
 
 }
-Button.defaultProps = {
-  children: null,
-  dataId: 'buttonComp',
-  disabled: false,
-  isBold: true,
-  needAppearance: true,
-  onClick: dummyFunction,
-  palette: 'primary',
-  rounded: false,
-  size: 'medium',
-  status: 'none',
-  text: 'Button',
-  customClass: {}
-};
-Button.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  disabled: PropTypes.bool,
-  getRef: PropTypes.func,
-  isBold: PropTypes.bool,
-  needAppearance: PropTypes.bool,
-  onClick: PropTypes.func,
-  palette: PropTypes.oneOf(['plainPrimary', 'plainSecondary', 'primary', 'primaryFilled', 'danger', 'dangerFilled', 'secondary', 'secondaryFilled', 'successFilled', 'info', 'tertiaryFilled']),
-  rounded: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
-  status: PropTypes.oneOf(['loading', 'success', 'none']),
-  text: PropTypes.string,
-  title: PropTypes.string,
-  customClass: PropTypes.shape({
-    customButton: PropTypes.string,
-    customStatus: PropTypes.string,
-    customStatusSize: PropTypes.string
-  })
-}; // Button.propTypesDescription = {
-//   onClick: ' ',
-//   text: ' ',
-//   palette: ' ',
-//   disabled: ' ',
-//   size: ' ',
-//   rounded: ' ',
-//   status: ' ',
-//   isBold: ' ',
-//   children: ' '
-// };
+Button.defaultProps = defaultProps;
+Button.propTypes = propTypes;
 
 if (false) {
   Button.docs = {

package/es/Button/Button.module.css

@@ -27,10 +27,10 @@
 .default {
   composes: varClass;
   transition: all var(--zd_transition2) ease 0s;
-  letter-spacing: var(--button_letter_spacing);
-  opacity: var(--button_opacity);
   border: 0;
+  letter-spacing: var(--button_letter_spacing);
   cursor: var(--button_cursor);
+  opacity: var(--button_opacity);
 }
 
 .default:disabled {
@@ -47,14 +47,14 @@
   color: var(--button_text_color);
   font-family: var(--button_font_family);
   text-transform: var(--button_text_transform);
-  min-width: var(--button_min_width);
-  height: var(--button_height);
   background-color: var(--button_bg_color);
   border-radius: var(--button_border_radius);
+  min-width: var(--button_min_width);
   border-width: var(--button_border_width);
   border-style: var(--button_border_style);
   border-color: var(--button_border_color);
   padding: var(--button_padding);
+  height: var(--button_height);
   box-shadow: var(--button_box_shadow);
 }
 
@@ -90,17 +90,17 @@
 }
 
 .mediumBtn {
+  text-align: center;
   --button_height: var(--zd_size42);
   --button_min_width: var(--zd_size42);
   --button_font_size: var(--zd_font_size10);
-  text-align: center;
 }
 
 .smallBtn {
+  text-align: center;
   --button_height: var(--zd_size22);
   --button_min_width: var(--zd_size22);
   --button_font_size: var(--zd_font_size13);
-  text-align: center;
 }
 
 .smallBtnprimary,
@@ -230,70 +230,40 @@
 .overlay {
   position: absolute;
   top: 0;
+  left: 0;
+  right: 0;
   bottom: 0;
   background: inherit;
   border-radius: inherit;
 }
 
-[dir=ltr] .overlay {
-  left: 0;
-  right: 0;
-}
-
-[dir=rtl] .overlay {
-  right: 0;
-  left: 0;
-}
-
 .loading {
   position: absolute;
-  top: 50%;
-  width: var(--zd_size20);
-  height: var(--zd_size20);
-}
-
-[dir=ltr] .loading {
   left: 50%;
+  top: 50%;
   transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
-}
-
-[dir=rtl] .loading {
-  right: 50%;
-  transform: translate(50%, -50%);
-  -moz-transform: translate(50%, -50%);
-  -webkit-transform: translate(50%, -50%);
+  width: var(--zd_size20);
+  height: var(--zd_size20);
 }
 
 .loadingelement {
+  animation: crlrotate var(--zd_no_transition8) linear infinite;
+  -moz-animation: crlrotate var(--zd_no_transition8) linear infinite;
+  -webkit-animation: crlrotate var(--zd_no_transition8) linear infinite;
+  border-radius: 50%;
   height: inherit;
   width: inherit;
   position: relative;
   display: inline-block;
-  border-radius: 50%;
   transform-origin: 50%;
 }
 
-[dir=ltr] .loadingelement {
-  animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
-  -moz-animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
-  -webkit-animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
-}
-
-[dir=rtl] .loadingelement {
-  animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
-  -moz-animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
-  -webkit-animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
-}
-
 .loadingelement:before,
 .loadingelement:after {
   content: '';
   position: absolute;
-}
-
-.loadingelement:before, .loadingelement:after {
   background-color: var(--button_loading_bg_color);
   border-radius: var(--button_loading_border_radius);
 }
@@ -307,18 +277,10 @@
 .loadingelement:after {
   top: var(--zd_size1);
   bottom: var(--zd_size1);
-}
-
-[dir=ltr] .loadingelement:after {
   left: var(--zd_size1);
   right: var(--zd_size1);
 }
 
-[dir=rtl] .loadingelement:after {
-  right: var(--zd_size1);
-  left: var(--zd_size1);
-}
-
 .loadingelement {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
 }
@@ -343,33 +305,25 @@
 }
 
 .loadingelement:before {
-  top: calc(var(--zd_size1) * -1);
-  bottom: calc(var(--zd_size1) * -1);
   background: var(--zdt_button_loading_linear_gradient);
   background-repeat: no-repeat;
   background-size: 50% 50%;
-}
-
-[dir=ltr] .loadingelement:before {
+  top: calc(var(--zd_size1) * -1);
+  bottom: calc(var(--zd_size1) * -1);
   left: calc(var(--zd_size1) * -1);
   right: calc(var(--zd_size1) * -1);
 }
 
-[dir=rtl] .loadingelement:before {
-  right: calc(var(--zd_size1) * -1);
-  left: calc(var(--zd_size1) * -1);
-}
-
 .primaryelement:before {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
-  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_primary_linear_gradient);
   transform: rotateX(180deg);
+  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_primary_linear_gradient);
 }
 
 .dangerelement:before {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
-  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_danger_linear_gradient);
   transform: rotateX(180deg);
+  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_danger_linear_gradient);
 }
 
 .primarysuccess {
@@ -384,7 +338,7 @@
   --button_success_border_color: var(--zdt_button_danger_border);
 }
 
-@keyframes crlrotate-ltr {
+@keyframes crlrotate {
   0% {
     transform: scaleX(-1) rotate(0deg);
   }
@@ -394,17 +348,7 @@
   }
 }
 
-@keyframes crlrotate-rtl {
-  0% {
-    transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    transform: scaleX(-1) rotate(360deg);
-  }
-}
-
-@-moz-keyframes crlrotate-ltr {
+@-moz-keyframes crlrotate {
   0% {
     -moz-transform: scaleX(-1) rotate(0deg);
   }
@@ -414,17 +358,7 @@
   }
 }
 
-@-moz-keyframes crlrotate-rtl {
-  0% {
-    -moz-transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: scaleX(-1) rotate(360deg);
-  }
-}
-
-@-webkit-keyframes crlrotate-ltr {
+@-webkit-keyframes crlrotate {
   0% {
     -webkit-transform: scaleX(-1) rotate(0deg);
   }
@@ -434,15 +368,7 @@
   }
 }
 
-@-webkit-keyframes crlrotate-rtl {
-  0% {
-    -webkit-transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: scaleX(-1) rotate(360deg);
-  }
-}
+/*rtl:begin:ignore*/
 .success {
   position: absolute;
   top: 50%;
@@ -518,5 +444,6 @@
     width: var(--zd_size6);
   }
 }
+/*rtl:end:ignore*/
 
 .loader{color:var(--dot_mirror)}

package/es/Button/props/defaultProps.js

@@ -0,0 +1,15 @@
+import { dummyFunction } from '../../utils/dummyFunction';
+export const defaultProps = {
+  children: null,
+  dataId: 'buttonComp',
+  disabled: false,
+  isBold: true,
+  needAppearance: true,
+  onClick: dummyFunction,
+  palette: 'primary',
+  rounded: false,
+  size: 'medium',
+  status: 'none',
+  text: 'Button',
+  customClass: {}
+};

package/es/Button/props/propTypes.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  disabled: PropTypes.bool,
+  getRef: PropTypes.func,
+  isBold: PropTypes.bool,
+  needAppearance: PropTypes.bool,
+  onClick: PropTypes.func,
+  palette: PropTypes.oneOf(['plainPrimary', 'plainSecondary', 'primary', 'primaryFilled', 'danger', 'dangerFilled', 'secondary', 'secondaryFilled', 'successFilled', 'info', 'tertiaryFilled']),
+  rounded: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
+  status: PropTypes.oneOf(['loading', 'success', 'none']),
+  text: PropTypes.string,
+  title: PropTypes.string,
+  customClass: PropTypes.shape({
+    customButton: PropTypes.string,
+    customStatus: PropTypes.string,
+    customStatusSize: PropTypes.string
+  })
+};

package/es/Buttongroup/Buttongroup.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import style from './Buttongroup.module.css';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['footer','header',
 'tab','alignleft','alignright','aligncenter' ] }] */
@@ -27,16 +28,8 @@ export default class Buttongroup extends React.Component {
   }
 
 }
-Buttongroup.defaultProps = {
-  buttonPosition: 'left',
-  children: null
-};
-Buttongroup.propTypes = {
-  buttonPosition: PropTypes.oneOf(['left', 'right', 'center']),
-  children: PropTypes.node,
-  type: PropTypes.string.isRequired,
-  customClass: PropTypes.string
-};
+Buttongroup.defaultProps = defaultProps;
+Buttongroup.propTypes = propTypes;
 
 if (false) {
   Buttongroup.docs = {

package/es/Buttongroup/Buttongroup.module.css

@@ -19,32 +19,19 @@
 }
 
 .footer {
-  --buttongroup_box_shadow: 0 -4px 5px -3px var(--zdt_buttongroup_footer_box_shadow);
-}
-
-[dir=ltr] .footer {
   --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60)/*rtl: var(--zd_size20) var(--zd_size60) var(--zd_size20) 0*/;
-}
-
-[dir=rtl] .footer {
-  --buttongroup_padding: var(--zd_size20) var(--zd_size60) var(--zd_size20) 0;
+  --buttongroup_box_shadow: 0 -4px 5px -3px var(--zdt_buttongroup_footer_box_shadow);
 }
 .header {
   --buttongroup_padding: var(--zd_size12) var(--zd_size20);
   --buttongroup_border_width: 0 0 1px 0;
 }
-[dir=ltr] .tab > div button:first-child {
+.tab > div button:first-child {
   border-radius: 5px 0 0 5px;
 }
-[dir=rtl] .tab > div button:first-child {
+.tab > div button:last-child {
   border-radius: 0 5px 5px 0;
 }
-[dir=ltr] .tab > div button:last-child {
-  border-radius: 0 5px 5px 0;
-}
-[dir=rtl] .tab > div button:last-child {
-  border-radius: 5px 0 0 5px;
-}
 
 .alignleft {
   composes: fleft from '../common/common.module.css';
@@ -55,35 +42,19 @@
 .aligncenter {
   composes: tcenter from '../common/common.module.css';
 }
-[dir=ltr] .alignleft > button:first-child {
+.alignleft > button:first-child {
   margin-left: 0;
 }
-[dir=rtl] .alignleft > button:first-child {
-  margin-right: 0;
-}
-[dir=ltr] .alignleft > button {
+.alignleft > button {
   margin-left: var(--zd_size15);
 }
-[dir=rtl] .alignleft > button {
-  margin-right: var(--zd_size15);
-}
 
-[dir=ltr] .alignright > button:last-child {
+.alignright > button:last-child {
   margin-right: 0;
 }
-
-[dir=rtl] .alignright > button:last-child {
-  margin-left: 0;
-}
-[dir=ltr] .alignright > button {
+.alignright > button {
   margin-right: var(--zd_size15);
 }
-[dir=rtl] .alignright > button {
-  margin-left: var(--zd_size15);
-}
-[dir=ltr] .aligncenter > button {
+.aligncenter > button {
   margin-right: var(--zd_size15);
 }
-[dir=rtl] .aligncenter > button {
-  margin-left: var(--zd_size15);
-}

package/es/Buttongroup/props/defaultProps.js

@@ -0,0 +1,4 @@
+export const defaultProps = {
+  buttonPosition: 'left',
+  children: null
+};

package/es/Buttongroup/props/propTypes.js

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  buttonPosition: PropTypes.oneOf(['left', 'right', 'center']),
+  children: PropTypes.node,
+  type: PropTypes.string.isRequired,
+  customClass: PropTypes.string
+};

package/es/Card/Card.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from './props/propTypes';
+import { Card_defaultProps, CardContent_defaultProps } from './props/defaultProps';
 import { Container, Box } from '../Layout';
 import { getLibraryConfig } from '../Provider/Config';
 import style from './Card.module.css';
@@ -45,12 +46,7 @@ export class CardHeader extends Component {
   }
 
 }
-CardHeader.propTypes = {
-  children: PropTypes.element,
-  dataId: PropTypes.string,
-  isScroll: PropTypes.bool,
-  customClass: PropTypes.string
-};
+CardHeader.propTypes = CardHeader_propTypes;
 export class CardContent extends Component {
   render() {
     let {
@@ -61,13 +57,15 @@ export class CardContent extends Component {
       isScrollAttribute,
       dataId,
       shrink,
-      customClass
+      customClass,
+      preventParentScroll
     } = this.props;
     return /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       onScroll: onScroll,
       eleRef: eleRef,
       scroll: scroll,
+      preventParentScroll: preventParentScroll,
       isScrollAttribute: isScrollAttribute,
       dataId: dataId,
       shrink: shrink,
@@ -76,22 +74,8 @@ export class CardContent extends Component {
   }
 
 }
-CardContent.propTypes = {
-  children: PropTypes.node,
-  dataId: PropTypes.string,
-  eleRef: PropTypes.func,
-  isScrollAttribute: PropTypes.bool,
-  onScroll: PropTypes.func,
-  scroll: PropTypes.oneOf(['horizontal', 'vertical', 'both', 'none']),
-  shrink: PropTypes.bool,
-  customClass: PropTypes.string
-};
-CardContent.defaultProps = {
-  isScrollAttribute: false,
-  scroll: 'vertical',
-  dataId: 'CardContent',
-  customClass: ''
-};
+CardContent.propTypes = CardContent_propTypes;
+CardContent.defaultProps = CardContent_defaultProps;
 export default class Card extends Component {
   constructor(props) {
     super(props);
@@ -236,6 +220,7 @@ export default class Card extends Component {
           role: role,
           flexible: true,
           scroll: child.props.scroll,
+          preventParentScroll: child.props.preventParentScroll,
           onScroll: this.onScroll,
           eleRef: child.props.eleRef,
           isScrollAttribute: child.props.isScrollAttribute,
@@ -250,38 +235,8 @@ export default class Card extends Component {
   }
 
 }
-Card.propTypes = {
-  childTypes: PropTypes.object,
-  children: PropTypes.node,
-  dataId: PropTypes.string,
-  fetchData: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-  from: PropTypes.number,
-  isScrollAttribute: PropTypes.bool,
-  // isScrollShadow: PropTypes.bool,
-  limit: PropTypes.number,
-  noMoreData: PropTypes.bool,
-  noNeedUpScroll: PropTypes.bool,
-  onClick: PropTypes.func,
-  onScroll: PropTypes.func,
-  scrollAt: PropTypes.string,
-  customClass: PropTypes.string,
-  htmlId: PropTypes.string,
-  a11y: PropTypes.shape({
-    role: PropTypes.string
-  }),
-  isPercentageScroll: PropTypes.bool
-};
-Card.defaultProps = {
-  isScrollAttribute: false,
-  // isScrollShadow: true,
-  onClick: null,
-  scrollAt: '10',
-  a11y: {},
-  isPercentageScroll: false
-}; // Card.propTypesDescription = {
-//   children: ' ',
-//   isScrollAttribute: ' '
-// };
+Card.propTypes = Card_propTypes;
+Card.defaultProps = Card_defaultProps;
 
 if (false) {
   Card.docs = {
@@ -306,7 +261,4 @@ export class CardFooter extends Component {
   }
 
 }
-CardFooter.propTypes = {
-  children: PropTypes.node,
-  customClass: PropTypes.string
-};
+CardFooter.propTypes = CardFooter_propTypes;

package/es/Card/props/defaultProps.js

@@ -0,0 +1,15 @@
+export const Card_defaultProps = {
+  isScrollAttribute: false,
+  // isScrollShadow: true,
+  onClick: null,
+  scrollAt: '10',
+  a11y: {},
+  isPercentageScroll: false
+};
+export const CardContent_defaultProps = {
+  isScrollAttribute: false,
+  scroll: 'vertical',
+  preventParentScroll: 'vertical',
+  dataId: 'CardContent',
+  customClass: ''
+};

package/es/Card/props/propTypes.js

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+export const CardHeader_propTypes = {
+  children: PropTypes.element,
+  dataId: PropTypes.string,
+  isScroll: PropTypes.bool,
+  customClass: PropTypes.string
+};
+export const CardContent_propTypes = {
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  eleRef: PropTypes.func,
+  isScrollAttribute: PropTypes.bool,
+  onScroll: PropTypes.func,
+  scroll: PropTypes.PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
+  shrink: PropTypes.bool,
+  customClass: PropTypes.string,
+  preventParentScroll: PropTypes.PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+};
+export const Card_propTypes = {
+  childTypes: PropTypes.object,
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  fetchData: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+  from: PropTypes.number,
+  isScrollAttribute: PropTypes.bool,
+  // isScrollShadow: PropTypes.bool,
+  limit: PropTypes.number,
+  noMoreData: PropTypes.bool,
+  noNeedUpScroll: PropTypes.bool,
+  onClick: PropTypes.func,
+  onScroll: PropTypes.func,
+  scrollAt: PropTypes.string,
+  customClass: PropTypes.string,
+  htmlId: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string
+  }),
+  isPercentageScroll: PropTypes.bool
+};
+export const CardFooter_propTypes = {
+  children: PropTypes.node,
+  customClass: PropTypes.string
+};