@zohodesk/components 1.1.1 → 1.2.0-temp-195

package/es/v1/Radio/Radio.js

@@ -0,0 +1,130 @@
+import React from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import Label from '../Label/Label';
+import { Container, Box } from '../Layout';
+import style from '../../Radio/Radio.module.css';
+
+const Radio = props => {
+  let {
+    id,
+    name,
+    value,
+    checked,
+    disabled,
+    isReadOnly,
+    palette,
+    disabledTitle,
+    title,
+    text,
+    labelPalette,
+    size,
+    labelSize,
+    variant,
+    active,
+    isFilled,
+    customClass,
+    customProps,
+    getRef,
+    children,
+    a11y
+  } = props;
+  let {
+    customRadioWrap = '',
+    customRadio = '',
+    customLabel = ''
+  } = customClass;
+  let accessMode = isReadOnly ? style.readonly : disabled ? style.disabled : style.pointer;
+  let toolTip = disabled ? disabledTitle : title ? title : null;
+  let {
+    ariaHidden,
+    role = 'radio',
+    tabIndex,
+    ariaChecked = checked,
+    ariaLabel,
+    ariaLabelledby,
+    ariaReadonly = isReadOnly || disabled ? true : false
+  } = a11y;
+  let {
+    ContainerProps = {},
+    LabelProps = {}
+  } = customProps;
+
+  function onChange(e) {
+    const {
+      onChange
+    } = props;
+    onChange && onChange(value, e);
+  }
+
+  function handleGetRef(ele) {
+    getRef && getRef(ele, value);
+  }
+
+  return /*#__PURE__*/React.createElement(Container, {
+    dataId: value ? value.toLowerCase() : 'RadioComp',
+    isCover: false,
+    isInline: text ? false : true,
+    alignBox: "row",
+    align: "both",
+    className: `${style.container} ${active && !disabled ? style.active : ''} ${accessMode} ${isReadOnly || disabled ? '' : style.hoverEfffect} ${checked ? style.checked : ''} ${customRadioWrap}`,
+    "data-title": toolTip,
+    onClick: !isReadOnly && !disabled ? onChange : '',
+    "aria-checked": ariaChecked,
+    tabindex: isReadOnly || disabled || ariaHidden ? '-1' : tabIndex || '0',
+    eleRef: handleGetRef,
+    role: role,
+    "aria-Hidden": ariaHidden,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-readonly": ariaReadonly,
+    ...ContainerProps
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: `${style.radio} ${checked ? `${style[`rdBox${palette}`]}` : ''}
+          ${isReadOnly || disabled ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${customRadio}`
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "hidden",
+    id: id,
+    name: name,
+    value: value
+  }), /*#__PURE__*/React.createElement("label", {
+    className: `${style.radioLabel} ${accessMode}`
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 40 40"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "20",
+    cy: "20",
+    r: "19",
+    className: `${style.rdBox}`
+  }), checked ? /*#__PURE__*/React.createElement("circle", {
+    cx: "20",
+    cy: "20",
+    r: "11.03",
+    className: `${style.centerPath}`
+  }) : null))), text && /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    className: style.text
+  }, /*#__PURE__*/React.createElement(Label, {
+    text: text,
+    palette: labelPalette,
+    size: labelSize,
+    type: "title",
+    clipped: true,
+    dataId: `${text}_label`,
+    variant: variant,
+    title: toolTip ? toolTip : text,
+    customClass: `${checked && active ? `${style[`${palette}checkedActive`]}` : ''}
+            ${style[`${palette}Label`]} ${accessMode} ${customLabel}`,
+    ...LabelProps
+  })), children);
+};
+
+export default Radio;
+Radio.defaultProps = defaultProps;
+Radio.propTypes = propTypes; // if (__DOCS__) {
+//   Radio.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/Radio/props/defaultProps.js

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

package/es/v1/Radio/props/propTypes.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  active: PropTypes.bool,
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  disabledTitle: PropTypes.string,
+  getRef: PropTypes.func,
+  id: PropTypes.string,
+  isFilled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  labelPalette: PropTypes.oneOf(['default', 'primary', 'danger', 'mandatory']),
+  labelSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  name: PropTypes.string,
+  palette: PropTypes.oneOf(['primary', 'danger']),
+  size: PropTypes.oneOf(['small', 'medium']),
+  title: PropTypes.string,
+  value: PropTypes.string,
+  variant: PropTypes.oneOf(['primary', 'default']),
+  customClass: PropTypes.shape({
+    customRadioWrap: PropTypes.string,
+    customRadio: PropTypes.string,
+    customLabel: PropTypes.string
+  }),
+  customProps: PropTypes.exact({
+    ContainerProps: PropTypes.object,
+    LabelProps: PropTypes.object
+  }),
+  a11y: PropTypes.shape({
+    ariaChecked: PropTypes.bool,
+    ariaHidden: PropTypes.bool,
+    role: PropTypes.string,
+    tabIndex: PropTypes.oneOfType(PropTypes.string, PropTypes.number),
+    ariaLabelledby: PropTypes.string,
+    ariaLabel: PropTypes.string,
+    ariaReadonly: PropTypes.bool
+  }),
+  children: PropTypes.node,
+  onChange: PropTypes.func,
+  text: PropTypes.string
+};

package/es/v1/ResponsiveDropBox/ResponsiveDropBox.js

@@ -0,0 +1,56 @@
+import React, { useCallback } from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import DropBox from '../DropBox/DropBox';
+import { Container } from '../Layout';
+import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
+import style from '../../ResponsiveDropBox/ResponsiveDropBox.module.css';
+export default function ResponsiveDropBox(props) {
+  const {
+    children,
+    customClass = {},
+    isResponsivePadding,
+    alignBox
+  } = props;
+  const {
+    customDropBox = '',
+    customMobileDropBox = '',
+    customDropBoxWrap = '',
+    customMobileDropBoxWrap = '',
+    customResponsiveContainer = ''
+  } = customClass;
+  const dropBoxClasses = {
+    customDropBox: `${customDropBox}`,
+    customMobileDropBox: `${customMobileDropBox}`,
+    customDropBoxWrap: `${customDropBoxWrap}`,
+    customMobileDropBoxWrap: `${customMobileDropBoxWrap}`,
+    customResponsiveContainer: `${customResponsiveContainer}`
+  };
+  const responsiveFunc = useCallback(_ref => {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(DropBox, { ...props,
+    customClass: dropBoxClasses
+  }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: "Helmet"
+  }, _ref2 => {
+    let {
+      tabletMode
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Container, {
+      alignBox: alignBox,
+      isCover: false,
+      className: `${tabletMode ? style.dropBoxContainer : ''} ${tabletMode && isResponsivePadding ? style.boxPadding : ''} ${customResponsiveContainer}`
+    }, children);
+  }));
+}
+ResponsiveDropBox.propTypes = propTypes;
+ResponsiveDropBox.defaultProps = defaultProps;

package/es/v1/ResponsiveDropBox/props/defaultProps.js

@@ -0,0 +1,4 @@
+export const defaultProps = {
+  isResponsivePadding: false,
+  alignBox: 'column'
+};

package/es/v1/ResponsiveDropBox/props/propTypes.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+import { DropBoxPropTypes } from './../../DropBox/props/propTypes';
+export const propTypes = { ...DropBoxPropTypes,
+  children: PropTypes.element,
+  customClass: PropTypes.object,
+  isResponsivePadding: PropTypes.bool,
+  alignBox: PropTypes.oneOf(['column', 'row'])
+};

package/es/v1/Ribbon/Ribbon.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from '../../Ribbon/Ribbon.module.css';
+export default function Ribbon(props) {
+  let {
+    type,
+    text,
+    children,
+    palette,
+    size,
+    dataId,
+    customClass,
+    dataSelectorId
+  } = props;
+  return /*#__PURE__*/React.createElement("span", {
+    className: `${style.basic} ${customClass} ${type !== 'tag' ? type === 'plain' || type === 'box' || type === 'stamp' ? `${style[`plain_${palette}`]}
+                ${type === 'box' ? style[`box_${palette}`] : ''} ${type === 'stamp' ? style[`stamp_${palette}`] : ''}` : `${style[`palette_${palette}`]} ${type === 'default' ? style[`default_${palette}`] : ''}` : ''} ${style[size]} ${style[type]}`,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    "data-selector-id": dataSelectorId
+  }, type === 'sticker' ? /*#__PURE__*/React.createElement("span", {
+    className: style.after
+  }) : null, children ? /*#__PURE__*/React.createElement("span", {
+    className: style.children
+  }, children) : null, /*#__PURE__*/React.createElement("span", {
+    className: style.childText
+  }, text), type === 'sticker' ? /*#__PURE__*/React.createElement("span", {
+    className: style.before
+  }) : null);
+}
+Ribbon.propTypes = propTypes;
+Ribbon.defaultProps = defaultProps;

package/es/v1/Ribbon/props/defaultProps.js

@@ -0,0 +1,9 @@
+export const defaultProps = {
+  palette: 'default',
+  size: 'large',
+  text: 'Ribbon',
+  type: 'default',
+  dataId: 'ribbonComp',
+  customClass: '',
+  dataSelectorId: 'ribbon'
+};

package/es/v1/Ribbon/props/propTypes.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.element,
+  dataId: PropTypes.string,
+  palette: PropTypes.oneOf(['default', 'danger', 'primary', 'secondary', 'info', 'dark']),
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
+  text: PropTypes.string,
+  type: PropTypes.oneOf(['default', 'flag', 'plain', 'ribbon', 'box', 'stamp', 'sticker', 'tag']),
+  customClass: PropTypes.string,
+  dataSelectorId: PropTypes.string
+};

package/es/v1/RippleEffect/RippleEffect.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import CssProvider from '../../Provider/CssProvider';
+import style from '../../RippleEffect/RippleEffect.module.css';
+export default function RippleEffect(props) {
+  let {
+    children,
+    isActive,
+    isDisabled,
+    palette,
+    hoverType,
+    isNeedEffect,
+    needBorder,
+    isCopyTextEnabled,
+    cssClassPropOfChild
+  } = props;
+  let className = isNeedEffect ? `${style.effect} ${style[palette]} ${needBorder ? style.border : ''} ${style[`${hoverType}Hover`] ? style[`${hoverType}Hover`] : ''} ${isActive && !isDisabled ? style.active : ''} ${isDisabled ? '' : style.hoverEffect} ${isCopyTextEnabled ? style.notAllowed : isDisabled ? CssProvider('isDisabled') : ''}` : '';
+  let child = React.Children.only(children);
+  return /*#__PURE__*/React.cloneElement(child, {
+    [cssClassPropOfChild]: `${child.props[cssClassPropOfChild] || ''} ${className}`
+  });
+}
+RippleEffect.defaultProps = defaultProps;
+RippleEffect.propTypes = propTypes;

package/es/v1/RippleEffect/props/defaultProps.js

@@ -0,0 +1,10 @@
+export const defaultProps = {
+  isActive: false,
+  isDisabled: false,
+  isNeedEffect: true,
+  needBorder: true,
+  hoverType: 'default',
+  palette: 'default',
+  cssClassPropOfChild: 'className',
+  isCopyTextEnabled: false
+};

package/es/v1/RippleEffect/props/propTypes.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  hoverType: PropTypes.oneOf(['default', 'border', 'bg']),
+  isActive: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isNeedEffect: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  palette: PropTypes.oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
+  cssClassPropOfChild: PropTypes.string,
+  isCopyTextEnabled: PropTypes.bool
+};