@zohodesk/components 1.0.0-temp-149 → 1.0.0-temp-150

package/es/AvatarTeam/__tests__/__snapshots__/AvatarTeam.spec.js.snap

@@ -1,226 +1,226 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AvatarTeam component should display initial 1`] = `
-<span
-  className="container medium primary"
-  data-id="avatarTeamComp"
->
-  <div
-    className="avatar medium medium circle primary text_black
-          border"
-    data-id="Avatar"
-    data-title="vimalesan a"
-    onClick={[Function]}
-  >
-    <span
-      className="initial initialTxt"
-      data-id="Avatar_AvatarInitial"
-    >
-      VA
-    </span>
-  </div>
-  <span
-    className="team nofill"
-  />
-</span>
-`;
-
-exports[`AvatarTeam component should is filled 1`] = `
-<span
-  className="container medium primary"
-  data-id="avatarTeamComp"
->
-  <div
-    className="avatar medium medium circle primary text_black
-          border"
-    data-id="Avatar"
-    data-title="vimalesan a"
-    onClick={[Function]}
-  >
-    <span
-      className="initial initialTxt"
-      data-id="Avatar_AvatarInitial"
-    >
-      VA
-    </span>
-  </div>
-  <span
-    className="team filled"
-  />
-</span>
-`;
-
-exports[`AvatarTeam component should the palette is info 1`] = `
-<span
-  className="container medium info"
-  data-id="avatarTeamComp"
->
-  <div
-    className="avatar medium medium circle info text_black
-          border"
-    data-id="Avatar"
-    data-title="vimalesan a"
-    onClick={[Function]}
-  >
-    <span
-      className="initial initialTxt"
-      data-id="Avatar_AvatarInitial"
-    >
-      VA
-    </span>
-  </div>
-  <span
-    className="team nofill"
-  />
-</span>
-`;
-
-exports[`AvatarTeam component should the palette is secondary 1`] = `
-<span
-  className="container medium secondary"
-  data-id="avatarTeamComp"
->
-  <div
-    className="avatar medium medium circle secondary text_white
-          border"
-    data-id="Avatar"
-    data-title="vimalesan a"
-    onClick={[Function]}
-  >
-    <span
-      className="initial initialTxt"
-      data-id="Avatar_AvatarInitial"
-    >
-      VA
-    </span>
-  </div>
-  <span
-    className="team nofill"
-  />
-</span>
-`;
-
-exports[`AvatarTeam component should the size is large 1`] = `
-<span
-  className="container large primary"
-  data-id="avatarTeamComp"
->
-  <div
-    className="avatar large large circle primary text_black
-          border"
-    data-id="Avatar"
-    data-title="vimalesan a"
-    onClick={[Function]}
-  >
-    <span
-      className="initial initialTxt"
-      data-id="Avatar_AvatarInitial"
-    >
-      VA
-    </span>
-  </div>
-  <span
-    className="team nofill"
-  />
-</span>
-`;
-
-exports[`AvatarTeam component should the size is small 1`] = `
-<span
-  className="container small primary"
-  data-id="avatarTeamComp"
->
-  <div
-    className="avatar small small circle primary text_black
-          border"
-    data-id="Avatar"
-    data-title="vimalesan a"
-    onClick={[Function]}
-  >
-    <span
-      className="initial initialTxt"
-      data-id="Avatar_AvatarInitial"
-    >
-      VA
-    </span>
-  </div>
-  <span
-    className="team nofill"
-  />
-</span>
-`;
-
-exports[`AvatarTeam component should the size is xlarge 1`] = `
-<span
-  className="container xlarge primary"
-  data-id="avatarTeamComp"
->
-  <div
-    className="avatar xlarge xlarge circle primary text_black
-          border"
-    data-id="Avatar"
-    data-title="vimalesan a"
-    onClick={[Function]}
-  >
-    <span
-      className="initial initialTxt"
-      data-id="Avatar_AvatarInitial"
-    >
-      VA
-    </span>
-  </div>
-  <span
-    className="team nofill"
-  />
-</span>
-`;
-
-exports[`AvatarTeam component should the size is xmedium 1`] = `
-<span
-  className="container xmedium primary"
-  data-id="avatarTeamComp"
->
-  <div
-    className="avatar xmedium xmedium circle primary text_black
-          border"
-    data-id="Avatar"
-    data-title="vimalesan a"
-    onClick={[Function]}
-  >
-    <span
-      className="initial initialTxt"
-      data-id="Avatar_AvatarInitial"
-    >
-      VA
-    </span>
-  </div>
-  <span
-    className="team nofill"
-  />
-</span>
-`;
-
-exports[`AvatarTeam component should the size is xsmall 1`] = `
-<span
-  className="container xsmall primary"
-  data-id="avatarTeamComp"
->
-  <div
-    className="avatar xsmall xsmall circle primary text_black
-          border"
-    data-id="Avatar"
-    data-title="vimalesan a"
-    onClick={[Function]}
-  >
-    <span
-      className="initial initialTxt"
-      data-id="Avatar_AvatarInitial"
-    >
-      VA
-    </span>
-  </div>
-  <span
-    className="team nofill"
-  />
-</span>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AvatarTeam component should display initial 1`] = `
+<span
+  className="container medium primary"
+  data-id="avatarTeamComp"
+>
+  <div
+    className="avatar medium medium circle primary text_black
+          border"
+    data-id="Avatar"
+    data-title="vimalesan a"
+    onClick={[Function]}
+  >
+    <span
+      className="initial initialTxt"
+      data-id="Avatar_AvatarInitial"
+    >
+      VA
+    </span>
+  </div>
+  <span
+    className="team nofill"
+  />
+</span>
+`;
+
+exports[`AvatarTeam component should is filled 1`] = `
+<span
+  className="container medium primary"
+  data-id="avatarTeamComp"
+>
+  <div
+    className="avatar medium medium circle primary text_black
+          border"
+    data-id="Avatar"
+    data-title="vimalesan a"
+    onClick={[Function]}
+  >
+    <span
+      className="initial initialTxt"
+      data-id="Avatar_AvatarInitial"
+    >
+      VA
+    </span>
+  </div>
+  <span
+    className="team filled"
+  />
+</span>
+`;
+
+exports[`AvatarTeam component should the palette is info 1`] = `
+<span
+  className="container medium info"
+  data-id="avatarTeamComp"
+>
+  <div
+    className="avatar medium medium circle info text_black
+          border"
+    data-id="Avatar"
+    data-title="vimalesan a"
+    onClick={[Function]}
+  >
+    <span
+      className="initial initialTxt"
+      data-id="Avatar_AvatarInitial"
+    >
+      VA
+    </span>
+  </div>
+  <span
+    className="team nofill"
+  />
+</span>
+`;
+
+exports[`AvatarTeam component should the palette is secondary 1`] = `
+<span
+  className="container medium secondary"
+  data-id="avatarTeamComp"
+>
+  <div
+    className="avatar medium medium circle secondary text_white
+          border"
+    data-id="Avatar"
+    data-title="vimalesan a"
+    onClick={[Function]}
+  >
+    <span
+      className="initial initialTxt"
+      data-id="Avatar_AvatarInitial"
+    >
+      VA
+    </span>
+  </div>
+  <span
+    className="team nofill"
+  />
+</span>
+`;
+
+exports[`AvatarTeam component should the size is large 1`] = `
+<span
+  className="container large primary"
+  data-id="avatarTeamComp"
+>
+  <div
+    className="avatar large large circle primary text_black
+          border"
+    data-id="Avatar"
+    data-title="vimalesan a"
+    onClick={[Function]}
+  >
+    <span
+      className="initial initialTxt"
+      data-id="Avatar_AvatarInitial"
+    >
+      VA
+    </span>
+  </div>
+  <span
+    className="team nofill"
+  />
+</span>
+`;
+
+exports[`AvatarTeam component should the size is small 1`] = `
+<span
+  className="container small primary"
+  data-id="avatarTeamComp"
+>
+  <div
+    className="avatar small small circle primary text_black
+          border"
+    data-id="Avatar"
+    data-title="vimalesan a"
+    onClick={[Function]}
+  >
+    <span
+      className="initial initialTxt"
+      data-id="Avatar_AvatarInitial"
+    >
+      VA
+    </span>
+  </div>
+  <span
+    className="team nofill"
+  />
+</span>
+`;
+
+exports[`AvatarTeam component should the size is xlarge 1`] = `
+<span
+  className="container xlarge primary"
+  data-id="avatarTeamComp"
+>
+  <div
+    className="avatar xlarge xlarge circle primary text_black
+          border"
+    data-id="Avatar"
+    data-title="vimalesan a"
+    onClick={[Function]}
+  >
+    <span
+      className="initial initialTxt"
+      data-id="Avatar_AvatarInitial"
+    >
+      VA
+    </span>
+  </div>
+  <span
+    className="team nofill"
+  />
+</span>
+`;
+
+exports[`AvatarTeam component should the size is xmedium 1`] = `
+<span
+  className="container xmedium primary"
+  data-id="avatarTeamComp"
+>
+  <div
+    className="avatar xmedium xmedium circle primary text_black
+          border"
+    data-id="Avatar"
+    data-title="vimalesan a"
+    onClick={[Function]}
+  >
+    <span
+      className="initial initialTxt"
+      data-id="Avatar_AvatarInitial"
+    >
+      VA
+    </span>
+  </div>
+  <span
+    className="team nofill"
+  />
+</span>
+`;
+
+exports[`AvatarTeam component should the size is xsmall 1`] = `
+<span
+  className="container xsmall primary"
+  data-id="avatarTeamComp"
+>
+  <div
+    className="avatar xsmall xsmall circle primary text_black
+          border"
+    data-id="Avatar"
+    data-title="vimalesan a"
+    onClick={[Function]}
+  >
+    <span
+      className="initial initialTxt"
+      data-id="Avatar_AvatarInitial"
+    >
+      VA
+    </span>
+  </div>
+  <span
+    className="team nofill"
+  />
+</span>
+`;

package/es/Button/Button.js

@@ -2,59 +2,56 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import style from './Button.module.css';
-/*
-Button text and children props?
-use children for both cases
-toLowerCase check needed?
+import cssJSLogic from './css/cssJSLogic';
+import { mergeStyle } from './../utils/';
+import style from './css/Button.module.css';
+/*
+Button text and children props?
+use children for both cases
+toLowerCase check needed?
 */
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small','medium','large','xlarge','button_medium','button_small','primary','primaryfilled','danger','dangerfilled','plainprimary', 'plainsecondary', 'secondary', 'secondaryfilled', 'successFilled','tertiaryFilled'] }] */
-export default class Button extends React.Component {
-  render() {
-    let {
-      text,
-      palette,
-      disabled,
-      size,
-      onClick,
-      rounded,
-      status,
-      children,
-      isBold,
-      dataId,
-      needAppearance,
-      getRef,
-      title,
-      dataSelectorId,
-      customClass,
-      customProps
-    } = this.props;
-    let {
-      customButton = '',
-      customStatus = '',
-      customStatusSize = ''
-    } = customClass;
-    let paletteLower = palette.toLowerCase();
-    let statusLower = status.toLowerCase();
-    let classList = needAppearance ? `${style[paletteLower]} ${rounded ? style.rounded : ''} ${!children ? style[size.toLowerCase()] : `${style[`${size}Btn`]} 
-             ${rounded ? style[`${size}Btn${paletteLower}`] : ''}`} ${statusLower !== 'none' ? style.loader : ''}` : `${style.default}`;
-    return /*#__PURE__*/React.createElement("button", _extends({
-      className: `${customButton} ${classList} ${isBold ? style.bold : ''}  `,
-      "data-id": disabled ? `${dataId}_disabled` : dataId,
-      disabled: disabled || statusLower === 'loading',
-      onClick: onClick,
-      "data-title": title,
-      type: "button",
-      ref: getRef,
-      "data-selector-id": dataSelectorId
-    }, customProps), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
-      className: style.overlay
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${customStatusSize} ${statusLower === 'loading' ? `${style.loading} ${style[`${size}loading`] ? style[`${size}loading`] : ''}` : style.success}`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${customStatus} ${statusLower === 'loading' ? `${style.loadingelement} ${style[`${paletteLower}element`] ? style[`${paletteLower}element`] : ''}` : `${style.successelement} ${style[`${paletteLower}success`] ? style[`${paletteLower}success`] : ''}`}`
-    }))));
-  }
+export default function Button(props) {
+  let {
+    text,
+    disabled,
+    onClick,
+    status,
+    children,
+    dataId,
+    needAppearance,
+    getRef,
+    title,
+    dataSelectorId,
+    customProps,
+    customStyle
+  } = props;
+  const finalStyle = mergeStyle(style, customStyle);
+  const {
+    buttonClass,
+    loaderParentClass,
+    loaderChildClass
+  } = cssJSLogic({
+    props,
+    style: finalStyle
+  });
+  let statusLower = status.toLowerCase();
+  return /*#__PURE__*/React.createElement("button", _extends({
+    className: buttonClass,
+    "data-id": disabled ? `${dataId}_disabled` : dataId,
+    disabled: disabled || statusLower === 'loading',
+    onClick: onClick,
+    "data-title": title,
+    type: "button",
+    ref: getRef,
+    "data-selector-id": dataSelectorId
+  }, customProps), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
+    className: finalStyle.overlay
+  }, /*#__PURE__*/React.createElement("div", {
+    className: loaderParentClass
+  }, /*#__PURE__*/React.createElement("div", {
+    className: loaderChildClass
+  }))));
 }
 Button.defaultProps = defaultProps;
 Button.propTypes = propTypes;