@zohodesk/components 1.0.0-temp-71 → 1.0.0-temp-72

package/es/CheckBox/CheckBox.module.css

@@ -1,147 +1,157 @@
-.varClass {
-  /* checkbox default variables */
-  --checkbox_bg_color: var(--zdt_checkbox_default_bg);
-  --checkbox_cursor: auto;
-  --checkbox_stroke_width: var(--zd_size2);
-  --checkbox_stroke_color: var(--zdt_checkbox_default_stroke_border);
-
-  /* checkbox checked state default variables */
-  --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
-  --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
-}
-.container {
-  composes: varClass;
-  stroke: var(--checkbox_stroke_color);
-}
-.container,
-.pointer,
-.readonly {
-  cursor: var(--checkbox_cursor);
-}
-.pointer {
-  --checkbox_cursor: pointer;
-}
-.readonly {
-  --checkbox_cursor: default;
-}
-.cbBox {
-  fill: none;
-  stroke-width: var(--checkbox_stroke_width);
-  stroke-linecap: round;
-  stroke: inherit;
-}
-.tickPath {
-  composes: cbBox;
-  stroke-dasharray: 40;
-}
-.boxContainer {
-  composes: offSelection from '../common/common.module.css';
-  border-radius: 2px;
-  background-color: var(--checkbox_bg_color);
-}
-.filled {
-  --checkbox_bg_color: inherit;
-}
-.medium {
-  width: var(--zd_size16);
-  height: var(--zd_size16);
-}
-.small {
-  width: var(--zd_size13);
-  height: var(--zd_size13);
-}
-
-.checkbox {
-  position: relative;
-  font-size: 0;
-  display: block;
-}
-/*rtl:begin:ignore*/
-.tick {
-  position: absolute;
-  left: 0;
-}
-/*rtl:end:ignore*/
-.mediumtick {
-  top: calc(var(--zd_size2) * -1);
-  height: var(--zd_size20);
-  width: var(--zd_size20);
-}
-/*rtl:begin:ignore*/
-.smalltick {
-  top: calc(var(--zd_size3) * -1);
-  height: var(--zd_size18);
-  width: var(--zd_size18);
-  left: calc(var(--zd_size1) * -1);
-}
-/*rtl:end:ignore*/
-
-.checkedtickPath {
-  stroke-dashoffset: 40;
-  animation: tickAnimate var(--zd_transition3) ease forwards;
-}
-.linePath {
-  transform-origin: center;
-  animation: lineAnimate var(--zd_transition3) ease forwards;
-}
-.text {
-  margin-left: var(--zd_size6);
-}
-
-.checkedprimary,
-.checkeddanger {
-  stroke: var(--checkbox_checked_stroke_color);
-}
-.primary:hover,
-.primary:focus {
-  --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
-}
-.checkedprimary {
-  --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
-}
-.danger:hover,
-.danger:focus {
-  --checkbox_stroke_color: var(--zdt_checkbox_danger_stroke_border);
-}
-.checkeddanger {
-  --checkbox_checked_stroke_color: var(--zdt_checkbox_danger_stroke_border);
-}
-
-.checkedprimaryLabel,
-.checkeddangerLabel {
-  color: var(--checkbox_checked_active_color);
-}
-.activeprimaryLabel:hover,
-.activeprimaryLabel:focus {
-  --label_text_color: var(--zdt_checkbox_label_primary_text);
-}
-.checkedprimaryLabel {
-  --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
-}
-.activedangerLabel:hover,
-.activedangerLabel:focus {
-  --label_text_color: var(--zdt_checkbox_label_danger_text);
-}
-.checkeddangerLabel {
-  --checkbox_checked_active_color: var(--zdt_checkbox_danger_stroke_border);
-}
-
-/*rtl:begin:ignore*/
-@keyframes tickAnimate {
-  0% {
-    stroke-dashoffset: 40;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes lineAnimate {
-  0% {
-    transform: scaleX(0);
-  }
-  100% {
-    transform: scaleX(1);
-  }
-}
-/*rtl:end:ignore*/
+.varClass {
+  /* checkbox default variables */
+  --checkbox_bg_color: var(--zdt_checkbox_default_bg);
+  --checkbox_cursor: auto;
+  --checkbox_stroke_width: var(--zd_size2);
+  --checkbox_stroke_color: var(--zdt_checkbox_default_stroke_border);
+
+  /* checkbox checked state default variables */
+  --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
+  --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
+}
+.container {
+  composes: varClass;
+  stroke: var(--checkbox_stroke_color);
+}
+.container, .pointer, .readonly {
+  cursor: var(--checkbox_cursor);
+}
+.pointer {
+  --checkbox_cursor: pointer;
+}
+.readonly {
+  --checkbox_cursor: default;
+}
+.cbBox {
+  fill: none;
+  stroke-width: var(--checkbox_stroke_width);
+  stroke-linecap: round;
+  stroke: inherit;
+}
+.tickPath {
+  composes: cbBox;
+  stroke-dasharray: 40;
+}
+.boxContainer {
+  composes: offSelection from '../common/common.module.css';
+  border-radius: 2px;
+  background-color: var(--checkbox_bg_color);
+}
+.filled {
+  --checkbox_bg_color: inherit;
+}
+.medium {
+  width: var(--zd_size16);
+  height: var(--zd_size16);
+}
+.small {
+  width: var(--zd_size13);
+  height: var(--zd_size13);
+}
+
+.checkbox {
+  position: relative;
+  font-size: 0;
+  display: block;
+}
+.tick {
+  position: absolute;
+  left: 0;
+}
+.mediumtick {
+  top: calc(var(--zd_size2) * -1);
+  height: var(--zd_size20);
+  width: var(--zd_size20);
+}
+.smalltick {
+  top: calc(var(--zd_size3) * -1);
+  height: var(--zd_size18);
+  width: var(--zd_size18);
+  left: calc(var(--zd_size1) * -1);
+}
+
+.checkedtickPath {
+  stroke-dashoffset: 40;
+}
+
+[dir=ltr] .checkedtickPath {
+  animation: tickAnimate var(--zd_transition3) ease forwards;
+}
+
+[dir=rtl] .checkedtickPath {
+  animation: tickAnimate var(--zd_transition3) ease forwards;
+}
+.linePath {
+  transform-origin: center;
+}
+[dir=ltr] .linePath {
+  animation: lineAnimate var(--zd_transition3) ease forwards;
+}
+[dir=rtl] .linePath {
+  animation: lineAnimate var(--zd_transition3) ease forwards;
+}
+[dir=ltr] .text {
+  margin-left: var(--zd_size6);
+}
+[dir=rtl] .text {
+  margin-right: var(--zd_size6);
+}
+
+.checkedprimary,
+.checkeddanger {
+  stroke: var(--checkbox_checked_stroke_color);
+}
+.primary:hover
+/* .primary:focus  */
+{
+  --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
+}
+.checkedprimary {
+  --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
+}
+.danger:hover
+/* .danger:focus */
+ {
+  --checkbox_stroke_color: var(--zdt_checkbox_danger_stroke_border);
+}
+.checkeddanger {
+  --checkbox_checked_stroke_color: var(--zdt_checkbox_danger_stroke_border);
+}
+
+.checkedprimaryLabel,
+.checkeddangerLabel {
+  color: var(--checkbox_checked_active_color);
+}
+.activeprimaryLabel:hover
+/* .activeprimaryLabel:focus  */
+{
+  --label_text_color: var(--zdt_checkbox_label_primary_text);
+}
+.checkedprimaryLabel {
+  --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
+}
+.activedangerLabel:hover
+/* .activedangerLabel:focus  */
+{
+  --label_text_color: var(--zdt_checkbox_label_danger_text);
+}
+.checkeddangerLabel {
+  --checkbox_checked_active_color: var(--zdt_checkbox_danger_stroke_border);
+}
+@keyframes tickAnimate {
+  0% {
+    stroke-dashoffset: 40;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes lineAnimate {
+  0% {
+    transform: scaleX(0);
+  }
+  100% {
+    transform: scaleX(1);
+  }
+}

package/es/CheckBox/props/defaultProps.js

@@ -0,0 +1,18 @@
+export const defaultProps = {
+  checked: false,
+  disabled: false,
+  isReadOnly: false,
+  active: false,
+  labelPalette: 'default',
+  labelSize: 'medium',
+  palette: 'primary',
+  size: 'medium',
+  isFilled: true,
+  variant: 'default',
+  dataId: 'checkBox',
+  activeStyle: 'tick',
+  customClass: {},
+  a11y: {},
+  isClipped: true,
+  customProps: {}
+};

package/es/CheckBox/props/propTypes.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  active: PropTypes.bool,
+  activeStyle: PropTypes.oneOf(['tick', 'minus']),
+  ariaLabel: PropTypes.string,
+  ariaLabelledby: PropTypes.string,
+  checked: PropTypes.bool,
+  dataId: PropTypes.string,
+  disabled: PropTypes.bool,
+  disabledTitle: PropTypes.string,
+  getRef: PropTypes.func,
+  id: PropTypes.string,
+  isFilled: PropTypes.bool,
+  isClipped: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  labelPalette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory']),
+  labelSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  palette: PropTypes.oneOf(['primary', 'danger']),
+  size: PropTypes.oneOf(['small', 'medium']),
+  text: PropTypes.string,
+  title: PropTypes.string,
+  variant: PropTypes.oneOf(['default', 'primary']),
+  customClass: PropTypes.shape({
+    customCheckBox: PropTypes.string,
+    customLabel: PropTypes.string,
+    customCBoxSize: PropTypes.string,
+    customTickSize: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    ariaLabel: PropTypes.string,
+    ariaLabelledby: PropTypes.string,
+    ariaHidden: PropTypes.bool,
+    ariaChecked: PropTypes.bool
+  }),
+  customProps: PropTypes.shape({
+    CheckBoxProps: PropTypes.object,
+    LabelProps: PropTypes.object
+  })
+};

package/es/DateTime/CalendarView.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Span_propTypes, CalendarView_propTypes } from './props/propTypes';
+import { CalendarView_defaultProps, Span_defaultProps } from './props/defaultProps';
 import { Container, Box } from '../Layout';
 import style from './DateTime.module.css';
 import { getMonthEnd } from '../utils/datetime/common';
@@ -159,18 +160,8 @@ export default class CalendarView extends React.PureComponent {
   }
 
 }
-CalendarView.propTypes = {
-  dataId: PropTypes.string,
-  date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  month: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  needBorder: PropTypes.bool,
-  onSelect: PropTypes.func,
-  year: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-CalendarView.defaultProps = {
-  dataId: 'dateContainer',
-  needBorder: true
-};
+CalendarView.propTypes = CalendarView_propTypes;
+CalendarView.defaultProps = CalendarView_defaultProps;
 export class Span extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -204,16 +195,5 @@ export class Span extends React.PureComponent {
   }
 
 }
-Span.propTypes = {
-  dataId: PropTypes.string,
-  handleSelect: PropTypes.func,
-  i: PropTypes.number,
-  incremday: PropTypes.number,
-  isActive: PropTypes.bool,
-  tdclass: PropTypes.string,
-  userSeeMonth: PropTypes.number,
-  userSeeYear: PropTypes.number
-};
-Span.defaultProps = {
-  dataId: 'calendar-view'
-};
+Span.propTypes = Span_propTypes;
+Span.defaultProps = Span_defaultProps;

package/es/DateTime/DateTime.js

@@ -2,7 +2,8 @@
 
 /* eslint-disable react/forbid-component-props */
 import React from 'react';
-import PropTypes from 'prop-types';
+import { DateTime_propTypes } from './props/propTypes';
+import { DateTime_defaultProps } from './props/defaultProps';
 import datetime from '@zohodesk/datetimejs';
 import CalendarView from './CalendarView';
 import YearView from './YearView';
@@ -771,64 +772,5 @@ export default class DateTime extends React.PureComponent {
   }
 
 }
-DateTime.propTypes = {
-  boxSize: PropTypes.string,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dateFormat: PropTypes.string,
-  // eslint-disable-next-line react/no-unused-prop-types
-  defaultTime: PropTypes.string,
-  getMethods: PropTypes.func,
-  getRef: PropTypes.func,
-  i18nKeys: PropTypes.shape({
-    timeText: PropTypes.string.isRequired,
-    submitText: PropTypes.string.isRequired,
-    cancelText: PropTypes.string.isRequired,
-    hourEmptyText: PropTypes.string.isRequired,
-    minuteEmptyText: PropTypes.string.isRequired,
-    nextMonthTitleText: PropTypes.string.isRequired,
-    prevMonthTitleText: PropTypes.string.isRequired
-  }),
-  innerClass: PropTypes.string,
-  isAbsolute: PropTypes.bool,
-  isActive: PropTypes.bool,
-  isAnimate: PropTypes.bool,
-  isDateTimeField: PropTypes.bool,
-  isPadding: PropTypes.bool,
-  isReady: PropTypes.bool,
-  max: PropTypes.string,
-  maxErrorText: PropTypes.string,
-  min: PropTypes.string,
-  minErrorText: PropTypes.string,
-  // eslint-disable-next-line react/no-unused-prop-types
-  needAction: PropTypes.bool,
-  needDefaultTime: PropTypes.bool,
-  needResponsive: PropTypes.bool,
-  onChange: PropTypes.func,
-  onClear: PropTypes.func,
-  onClick: PropTypes.func,
-  onDateSelect: PropTypes.func,
-  onError: PropTypes.func,
-  onSelect: PropTypes.func,
-  position: PropTypes.string,
-  timeZone: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  is24Hour: PropTypes.bool,
-  isDefaultPosition: PropTypes.bool
-};
-DateTime.defaultProps = {
-  isDateTimeField: true,
-  dataId: 'dateTime',
-  needDefaultTime: true,
-  isAbsolute: true,
-  isAnimate: true,
-  needAction: true,
-  boxSize: 'large',
-  className: '',
-  innerClass: '',
-  dateFormat: 'dd/MM/yyyy',
-  isPadding: false,
-  i18nKeys: {},
-  is24Hour: false,
-  isDefaultPosition: false
-};
+DateTime.propTypes = DateTime_propTypes;
+DateTime.defaultProps = DateTime_defaultProps;