@zohodesk/components 1.0.0-temp-199.25 → 1.0.0-temp-250

package/es/Switch/props/defaultProps.js

@@ -0,0 +1,11 @@
+export const defaultProps = {
+  checked: false,
+  disabled: false,
+  labelPalette: 'primary',
+  labelSize: 'medium',
+  size: 'medium',
+  isReadOnly: false,
+  customClass: {},
+  customProps: {},
+  dataSelectorId: 'switch'
+};

package/es/Switch/props/propTypes.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  checked: PropTypes.bool,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  disableTitle: PropTypes.string,
+  disabled: PropTypes.bool,
+  id: PropTypes.string.isRequired,
+  isReadOnly: PropTypes.bool,
+  labelPalette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory']),
+  labelSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  size: PropTypes.oneOf(['small', 'medium']),
+  text: PropTypes.string,
+  title: PropTypes.string,
+  value: PropTypes.bool,
+  customClass: PropTypes.shape({
+    customSwitchWrap: PropTypes.string,
+    customSwitch: PropTypes.string,
+    customSwitchSize: PropTypes.string,
+    customLabel: PropTypes.string
+  }),
+  customProps: PropTypes.shape({
+    SwitchProps: PropTypes.object,
+    LabelProps: PropTypes.object
+  })
+};

package/es/Tab/Tab.js

@@ -0,0 +1,111 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/* eslint-disable react/forbid-component-props */
+
+/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['text', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta',', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'deltaActive_border'] }] */
+import React, { useMemo, useCallback } from 'react';
+import { Tab_defaultProps } from "./props/defaultProps";
+import { Tab_propTypes } from "./props/propTypes";
+import { Box, Container } from "../Layout";
+import { cs } from "../utils/Common";
+import { TAB_DIRECTION_MAPPING } from "./utils/tabConfigs";
+import styles from "./Tab.module.css";
+const tabTypes = {
+  alpha: {
+    active: 'alphaActive',
+    tab: 'tabAlpha'
+  },
+  beta: {
+    active: 'betaActive',
+    tab: 'tabBeta'
+  },
+  delta: {
+    active: 'deltaActive',
+    tab: 'tabDelta'
+  }
+};
+export default function Tab(_ref) {
+  let {
+    id,
+    style,
+    text,
+    children,
+    className,
+    dataId,
+    dataSelectorId,
+    title,
+    titlePosition,
+    activeClass,
+    href,
+    isLink,
+    isDisabled,
+    tourId,
+    onClick,
+    isActive,
+    getTabRef,
+    onSelect,
+    type,
+    isAnimate,
+    needBorder,
+    needAppearance,
+    align,
+    isVirtual,
+    customProps
+  } = _ref;
+  let clickListener = useCallback(event => {
+    if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {
+      event && event.stopPropagation();
+      return;
+    }
+
+    event && event.preventDefault();
+    onSelect(id);
+    onClick && onClick(event);
+  }, [id, isLink, onSelect, onClick]);
+  let styleContent = useMemo(() => tabTypes[type] || {
+    active: 'active',
+    tab: 'tab'
+  }, [type]);
+  let getTab = useCallback(ref => getTabRef && getTabRef(id, ref, isVirtual), [id, isVirtual]);
+  let activeWithAppearance = cs([styles[styleContent.active], needBorder && !isAnimate && styles[`${styleContent.active}_border`]]);
+  let activeClasses = cs([needAppearance && activeWithAppearance, activeClass]);
+  let inActiveClasses = needAppearance && cs([styles[styleContent.tab], tabTypes[type] && styles[`${`${type}Hover`}`]]);
+  let tabClass = cs([styles.tab, TAB_DIRECTION_MAPPING[align] === 'column' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, className]);
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    tourId: tourId,
+    tagName: isLink ? 'a' : 'div',
+    className: tabClass,
+    dataId: `${dataId}_Tab`,
+    onClick: !isDisabled ? clickListener : undefined,
+    style: style,
+    eleRef: getTab,
+    "data-title": title,
+    "data-title-position": titlePosition,
+    adjust: true,
+    href: isLink ? href : undefined,
+    "data-key": id,
+    role: "link",
+    "aria-controls": id,
+    "aria-selected": isActive ? true : false,
+    tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
+    "aria-label": text ? text : null,
+    dataSelectorId: dataSelectorId
+  }, customProps), /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "both",
+    className: styles.textContainer
+  }, text && /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    adjust: true,
+    className: styles.tabText
+  }, text), children ? /*#__PURE__*/React.createElement(Box, {
+    shrink: true
+  }, children) : null));
+}
+Tab.defaultProps = Tab_defaultProps;
+Tab.propTypes = Tab_propTypes; // if (__DOCS__) {
+//   Tab.docs = {
+//     componentGroup: 'Tab',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/Tab/Tab.module.css

@@ -0,0 +1,100 @@
+.tab {
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  text-decoration: none;
+  cursor: pointer;
+}
+.vertical {
+  height: 100% ;
+}
+.horizontal {
+  width: 100% ;
+  max-width: 100% ;
+}
+.textContainer,
+.tabText {
+  max-width: inherit ;
+}
+.tabText {
+  composes: dotted from '../common/common.module.css';
+}
+.disabled {
+  cursor: not-allowed;
+}
+.border {
+  border-bottom: 1px solid var(--zdt_tab_default_border);
+}
+
+.alpha,
+.beta,
+.delta {
+  transition: all var(--zd_transition2);
+}
+.alpha {
+  font-size: var(--zd_font_size11) ;
+  line-height: 3;
+  padding: 0 var(--zd_size18) ;
+}
+.tabAlpha {
+  composes: alpha;
+  color: var(--zdt_tab_alpha_text);
+}
+.alphaHover:hover {
+  color: var(--zdt_tab_alpha_hover_text);
+  background-color: var(--zdt_tab_alpha_hover_bg);
+}
+.alphaActive {
+  composes: alpha;
+  color: var(--zdt_tab_alpha_active_text);
+}
+.alphaActive_border, .betaActive_border {
+  border-color: var(--zdt_tab_alpha_active_border);
+}
+.deltaActive_border {
+  border-color: var(--zdt_tab_delta_active_border);
+}
+.beta {
+  font-size: var(--zd_font_size14) ;
+  line-height: 4.2857;
+  text-transform: capitalize;
+  padding: 0 var(--zd_size4) ;
+}
+[dir=ltr] .beta {
+  margin-right: var(--zd_size40) ;
+}
+[dir=rtl] .beta {
+  margin-left: var(--zd_size40) ;
+}
+.tabBeta {
+  composes: beta;
+  color: var(--zdt_tab_alpha_text);
+}
+.betaHover:hover {
+  color: var(--zdt_tab_alpha_hover_text);
+}
+.betaActive {
+  composes: beta;
+  color: var(--zdt_tab_alpha_hover_text);
+}
+.delta {
+  font-size: var(--zd_font_size11) ;
+  line-height: 3;
+  padding: 0 var(--zd_size4) ;
+}
+[dir=ltr] .delta {
+  margin-right: var(--zd_size10) ;
+}
+[dir=rtl] .delta {
+  margin-left: var(--zd_size10) ;
+}
+.tabDelta {
+  composes: delta;
+  color: var(--zdt_tab_alpha_text);
+}
+.deltaHover:hover {
+  color: var(--zdt_tab_alpha_active_text);
+}
+.deltaActive {
+  composes: delta;
+  color: var(--zdt_tab_alpha_active_text);
+}

package/es/Tab/TabContent.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { TabContent_defaultProps } from "./props/defaultProps";
+import { TabContent_propTypes } from "./props/propTypes";
+import { Container } from "../Layout";
+import style from "./TabContent.module.css";
+/* eslint-disable react/forbid-component-props */
+
+const TabContent = _ref => {
+  let {
+    children,
+    scroll,
+    dataId,
+    id,
+    dataSelectorId
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Container, {
+    className: style.container,
+    scroll: scroll,
+    dataId: `${dataId}_TabContent`,
+    isScrollAttribute: true,
+    "aria-labelledby": id,
+    tabindex: "-1",
+    role: "tabpanel",
+    dataSelectorId: dataSelectorId
+  }, children);
+};
+
+TabContent.defaultProps = TabContent_defaultProps;
+TabContent.propTypes = TabContent_propTypes;
+export default TabContent;

package/es/Tab/TabContent.module.css

@@ -0,0 +1,4 @@
+/* $Id$ */
+.container {
+  position: relative;
+}

package/es/Tab/TabContentWrapper.js

@@ -0,0 +1,34 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { TabContentWrapper_defaultProps } from "./props/defaultProps";
+import { TabContentWrapper_propTypes } from "./props/propTypes";
+import { Box } from "../Layout";
+/* eslint-disable react/forbid-component-props */
+
+const TabContentWrapper = _ref => {
+  let {
+    style,
+    className,
+    children,
+    dataId,
+    selectedTab,
+    onScroll,
+    dataSelectorId,
+    tagName,
+    a11y
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    flexible: true,
+    style: style,
+    dataId: dataId,
+    className: className,
+    onScroll: onScroll,
+    dataSelectorId: dataSelectorId,
+    tagName: tagName
+  }, a11y), React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
+};
+
+TabContentWrapper.defaultProps = TabContentWrapper_defaultProps;
+TabContentWrapper.propTypes = TabContentWrapper_propTypes;
+export default TabContentWrapper;

package/es/Tab/TabWrapper.js

@@ -0,0 +1,58 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useState, useCallback } from 'react';
+import { TabWrapper_defaultProps } from "./props/defaultProps";
+import { TabWrapper_propTypes } from "./props/propTypes";
+import { Container } from "../Layout";
+import { TAB_ALIGN_MAPPING } from "./utils/tabConfigs";
+
+function TabWrapper(_ref) {
+  let {
+    defaultTab,
+    hookToDisableInternalState,
+    onSelect,
+    type,
+    isAnimate,
+    needTabBorder,
+    needBorder,
+    needPadding,
+    needAppearance,
+    align,
+    dataId,
+    children,
+    dataSelectorId
+  } = _ref;
+  let [selectedTabInternal, setSelected] = useState(!hookToDisableInternalState ? defaultTab || 0 : null);
+  const setSelectedTab = useCallback(id => {
+    if (!hookToDisableInternalState) {
+      setSelected(id);
+    }
+
+    onSelect && onSelect(id);
+  }, [hookToDisableInternalState, onSelect]);
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: TAB_ALIGN_MAPPING[align],
+    dataId: dataId,
+    dataSelectorId: dataSelectorId
+  }, React.Children.map(children, child => {
+    let TabsChild = child.type;
+    let selectedTab = hookToDisableInternalState ? defaultTab : selectedTabInternal;
+    return /*#__PURE__*/React.createElement(TabsChild // eslint-disable-next-line react/no-array-index-key
+    , _extends({}, child.props, {
+      selectedTab: selectedTab,
+      onSelect: setSelectedTab,
+      type: type,
+      isAnimate: isAnimate,
+      needTabBorder: needTabBorder,
+      needBorder: needBorder,
+      needPadding: needPadding,
+      needAppearance: needAppearance,
+      hookToDisableInternalState: hookToDisableInternalState,
+      align: align
+    }));
+  }));
+}
+
+TabWrapper.propTypes = TabWrapper_propTypes;
+TabWrapper.defaultProps = TabWrapper_defaultProps;
+export default TabWrapper;