@zohodesk/components 1.0.0-temp-83 → 1.0.0-temp-107

package/lib/Button/Button.module.css

@@ -1,522 +0,0 @@
-.varClass {
-  /* button default variables */
-  --button_letter_spacing: 0.2px;
-  --button_cursor: pointer;
-  --button_font_size: var(--zd_font_size13);
-  --button_text_color: var(--zdt_button_default_text);
-  --button_font_family: var(--zd_regular);
-  --button_text_transform: capitalize;
-  --button_bg_color: var(--zdt_button_default_bg);
-  --button_border_radius: 4px;
-  --button_min_width: var(--zd_size90);
-  --button_height: auto;
-  --button_border_width: 0;
-  --button_border_style: solid;
-  --button_border_color: var(--zdt_button_default_border);
-  --button_padding: 0;
-  --button_opacity: none;
-  --button_box_shadow: none;
-
-  /* button loading status default variables */
-  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
-  --button_loading_border_radius: 50%;
-
-  /* button success status default variable */
-  --button_success_border_color: var(--zdt_button_success_default_border);
-}
-.default {
-  composes: varClass;
-  transition: all var(--zd_transition2) ease 0s;
-  letter-spacing: var(--button_letter_spacing);
-  opacity: var(--button_opacity);
-  border: 0;
-  cursor: var(--button_cursor);
-}
-
-.default:disabled {
-  pointer-events: none;
-  --button_cursor: not-allowed;
-  --button_opacity: 0.4;
-}
-
-.container {
-  composes: default;
-  composes: dotted from '../common/common.module.css';
-  position: relative;
-  font-size: var(--button_font_size);
-  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);
-  border-width: var(--button_border_width);
-  border-style: var(--button_border_style);
-  border-color: var(--button_border_color);
-  padding: var(--button_padding);
-  box-shadow: var(--button_box_shadow);
-}
-
-.bold {
-  --button_font_family: var(--zd_semibold);
-  composes: ftsmooth from '../common/common.module.css';
-}
-
-.rounded {
-  --button_border_radius: 50px;
-}
-
-.small {
-  --button_padding: var(--zd_size4) var(--zd_size7);
-  --button_min_width: var(--zd_size50);
-  --button_font_size: var(--zd_font_size10);
-}
-
-.medium {
-  --button_padding: var(--zd_size6) var(--zd_size15);
-}
-
-.large {
-  --button_padding: var(--zd_size9) var(--zd_size14);
-  --button_min_width: var(--zd_size80);
-  --button_font_size: var(--zd_font_size12);
-}
-
-.xlarge {
-  --button_padding: var(--zd_size12) var(--zd_size25);
-  --button_min_width: var(--zd_size90);
-  --button_font_size: var(--zd_font_size13);
-}
-
-.mediumBtn {
-  --button_height: var(--zd_size42);
-  --button_min_width: var(--zd_size42);
-  --button_font_size: var(--zd_font_size10);
-  text-align: center;
-}
-
-.smallBtn {
-  --button_height: var(--zd_size22);
-  --button_min_width: var(--zd_size22);
-  --button_font_size: var(--zd_font_size13);
-  text-align: center;
-}
-
-.smallBtnprimary,
-.smallBtnprimaryfilled,
-.mediumBtnprimary,
-.mediumBtnprimaryfilled {
-  --button_box_shadow: 0 3px 10px var(--zdt_button_primary_box_shadow);
-}
-
-.smallBtndanger,
-.smallBtndangerfilled,
-.mediumBtndanger,
-.mediumBtndangerfilled {
-  --button_box_shadow: 0 3px 10px var(--zdt_button_danger_box_shadow);
-}
-
-.small,
-.medium,
-.large,
-.xlarge,
-.smallBtn,
-.mediumBtn {
-  composes: container;
-}
-
-.plainprimary {
-  --button_text_color: var(--zdt_button_default_text);
-  --button_padding: var(--zd_size5);
-  --button_min_width: initial;
-  --button_bg_color: var(--zdt_button_default_bg);
-}
-.plainprimary:hover {
-  --button_text_color: var(--zdt_button_plainprimary_hover_text);
-}
-
-.plainsecondary {
-  --button_text_color: var(--zdt_button_secondary_text);
-  --button_padding: var(--zd_size5);
-  --button_min_width: initial;
-  --button_bg_color: var(--zdt_button_default_bg);
-}
-.plainsecondary:hover {
-  --button_text_color: var(--zdt_button_secondary_hover_text);
-}
-
-.primary,
-.primaryfilled,
-.danger,
-.dangerfilled,
-.secondary,
-.secondaryfilled,
-.successfilled,
-.tertiaryfilled {
-  --button_border_width: 1px;
-}
-.primary:hover {
-  --button_border_color: var(--zdt_button_primary_hover_border);
-  --button_text_color: var(--zdt_button_primary_hover_text);
-}
-
-.primaryfilled {
-  --button_border_color: var(--zdt_button_primaryfill_border);
-  --button_bg_color: var(--zdt_button_primaryfill_bg);
-  --button_text_color: var(--zdt_button_primaryfill_text);
-}
-.primaryfilled:hover {
-  --button_bg_color: var(--zdt_button_primaryfill_hover_bg);
-}
-
-.danger {
-  --button_border_color: var(--zdt_button_danger_border);
-  --button_bg_color: var(--zdt_button_default_bg);
-  --button_text_color: var(--zdt_button_danger_text);
-}
-.danger:hover {
-  --button_border_color: var(--zdt_button_danger_hover_border);
-  --button_text_color: var(--zdt_button_danger_hover_text);
-}
-
-.dangerfilled {
-  --button_border_color: var(--zdt_button_primaryfill_border);
-  --button_bg_color: var(--zdt_button_dangerfill_bg);
-  --button_text_color: var(--zdt_button_dangerfill_text);
-}
-.dangerfilled:hover {
-  --button_bg_color: var(--zdt_button_dangerfill_hover_bg);
-}
-
-.secondary {
-  --button_border_color: var(--zdt_button_secondary_border);
-  --button_bg_color: var(--zdt_button_default_bg);
-  --button_text_color: var(--zdt_button_secondary_text);
-}
-.secondary:hover {
-  --button_border_color: var(--zdt_button_secondary_hover_border);
-  --button_text_color: var(--zdt_button_secondary_hover_text);
-}
-
-.secondaryfilled {
-  --button_border_color: var(--zdt_button_primaryfill_border);
-  --button_bg_color: var(--zdt_button_secondaryfill_bg);
-  --button_text_color: var(--zdt_button_secondary_text);
-}
-.secondaryfilled:hover {
-  --button_text_color: var(--zdt_button_secondary_hover_text);
-}
-
-.successfilled {
-  --button_border_color: var(--zdt_button_successfill_border);
-  --button_bg_color: var(--zdt_button_successfill_bg);
-  --button_text_color: var(--zdt_button_dangerfill_text);
-}
-.successfilled:hover {
-  --button_border_color: var(--zdt_button_successfill_hover_border);
-  --button_bg_color: var(--zdt_button_successfill_hover_bg);
-}
-
-.tertiaryfilled {
-  --button_border_color: var(--zdt_button_primaryfill_border);
-  --button_bg_color: var(--zdt_button_tertiaryfill_bg);
-  --button_text_color: var(--zdt_button_dangerfill_text);
-}
-.tertiaryfilled:hover {
-  --button_bg_color: var(--zdt_button_tertiaryfill_hover_bg);
-}
-
-.overlay {
-  position: absolute;
-  top: 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%;
-  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%);
-}
-
-.loadingelement {
-  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);
-}
-
-.smallloading,
-.mediumloading {
-  height: var(--zd_size10);
-  width: var(--zd_size10);
-}
-
-.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);
-}
-.primaryelement {
-  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
-}
-.primaryfilledelement {
-  --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
-}
-.dangerelement {
-  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
-}
-.dangerfilledelement {
-  --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
-}
-.loadingelement:after,
-.primaryelement:after,
-.primaryfilledelement:after,
-.dangerelement:after,
-.dangerfilledelement:after {
-  --button_loading_bg_color: inherit;
-}
-
-.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 {
-  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);
-}
-
-.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);
-}
-
-.primarysuccess {
-  --button_success_border_color: var(--zdt_button_default_border);
-}
-
-.primaryfilled .successelement {
-  --button_success_border_color: var(--zdt_button_tick_primary_border);
-}
-
-.dangersuccess {
-  --button_success_border_color: var(--zdt_button_danger_border);
-}
-
-@keyframes crlrotate-ltr {
-  0% {
-    transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    transform: scaleX(-1) rotate(-360deg);
-  }
-}
-
-@keyframes crlrotate-rtl {
-  0% {
-    transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    transform: scaleX(-1) rotate(360deg);
-  }
-}
-
-@-moz-keyframes crlrotate-ltr {
-  0% {
-    -moz-transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: scaleX(-1) rotate(-360deg);
-  }
-}
-
-@-moz-keyframes crlrotate-rtl {
-  0% {
-    -moz-transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: scaleX(-1) rotate(360deg);
-  }
-}
-
-@-webkit-keyframes crlrotate-ltr {
-  0% {
-    -webkit-transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: scaleX(-1) rotate(-360deg);
-  }
-}
-
-@-webkit-keyframes crlrotate-rtl {
-  0% {
-    -webkit-transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: scaleX(-1) rotate(360deg);
-  }
-}
-.success {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  -moz-transform: translate(-50%, -50%);
-  -webkit-transform: translate(-50%, -50%);
-  z-index: 3;
-}
-
-.successelement {
-  height: var(--zd_size15);
-  position: relative;
-  top: calc(var(--zd_size2) * -1);
-  width: var(--zd_size6);
-  transform: scaleX(-1) rotate(135deg);
-  -moz-transform: scaleX(-1) rotate(135deg);
-  -webkit-transform: scaleX(-1) rotate(135deg);
-  transform-origin: center;
-  border-width: 2px 2px 0 0;
-  border-style: solid;
-  border-color: var(--button_success_border_color);
-  animation: tick var(--zd_no_transition3) ease 0s forwards;
-}
-
-@keyframes tick {
-  0% {
-    height: 0;
-    width: 0;
-  }
-
-  50% {
-    height: 0;
-    width: var(--zd_size6);
-  }
-
-  100% {
-    height: var(--zd_size15);
-    width: var(--zd_size6);
-  }
-}
-
-@-moz-keyframes tick {
-  0% {
-    height: 0;
-    width: 0;
-  }
-
-  50% {
-    height: 0;
-    width: var(--zd_size6);
-  }
-
-  100% {
-    height: var(--zd_size15);
-    width: var(--zd_size6);
-  }
-}
-
-@-webkit-keyframes tick {
-  0% {
-    height: 0;
-    width: 0;
-  }
-
-  50% {
-    height: 0;
-    width: var(--zd_size6);
-  }
-
-  100% {
-    height: var(--zd_size15);
-    width: var(--zd_size6);
-  }
-}
-
-.loader{color:var(--dot_mirror)}

package/lib/Button/__tests__/Button.spec.js

@@ -1,193 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-var _Button = _interopRequireDefault(require("../Button"));
-var _testUtils = _interopRequireDefault(require("react-dom/test-utils"));
-var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-describe('Button component', function () {
-  it('should display text', function () {
-    var renderedDOM = _testUtils["default"].renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "primary",
-      palette: "primary"
-    }));
-    expect(_testUtils["default"].findRenderedComponentsWithTestid(renderedDOM, 'buttonComp').textContent.contains('primary')).toBe(true);
-  });
-  it('should be able to click', function () {
-    var mockfn = jest.fn();
-    var renderedDOM = _testUtils["default"].renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "primary",
-      palette: "primary",
-      onClick: mockfn
-    }));
-    var buttonEle = _testUtils["default"].findRenderedComponentsWithTestid(renderedDOM, 'buttonComp');
-    _testUtils["default"].Simulate.click(buttonEle);
-    expect(mockfn.mock.calls.length).toBe(1);
-  });
-  it('should not able to click', function () {
-    var mockfn = jest.fn();
-    var renderedDOM = _testUtils["default"].renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "primary",
-      palette: "primary",
-      onClick: mockfn,
-      disabled: true
-    }));
-    var buttonEle = _testUtils["default"].findRenderedComponentsWithTestid(renderedDOM, 'buttonComp_disabled');
-    _testUtils["default"].Simulate.click(buttonEle);
-    expect(mockfn.mock.calls.length).toBe(0);
-  });
-  it('should not able to click on loading status', function () {
-    var mockfn = jest.fn();
-    var renderedDOM = _testUtils["default"].renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "primary",
-      palette: "primary",
-      onClick: mockfn,
-      status: "loading"
-    }));
-    var buttonEle = _testUtils["default"].findRenderedComponentsWithTestid(renderedDOM, 'buttonComp');
-    _testUtils["default"].Simulate.click(buttonEle);
-    expect(mockfn.mock.calls.length).toBe(0);
-  });
-  it('should able to click other than loading status', function () {
-    var mockfn = jest.fn();
-    var renderedDOM = _testUtils["default"].renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "primary",
-      palette: "primary",
-      onClick: mockfn,
-      status: "success"
-    }));
-    var buttonEle = _testUtils["default"].findRenderedComponentsWithTestid(renderedDOM, 'buttonComp');
-    _testUtils["default"].Simulate.click(buttonEle);
-    expect(mockfn.mock.calls.length).toBe(1);
-  });
-  it('should able to click and click arguments should be event object', function () {
-    var mockfn = jest.fn();
-    var renderedDOM = _testUtils["default"].renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "primary",
-      palette: "primary",
-      onClick: mockfn,
-      status: "success"
-    }));
-    var buttonEle = _testUtils["default"].findRenderedComponentsWithTestid(renderedDOM, 'buttonComp');
-    _testUtils["default"].Simulate.click(buttonEle);
-    expect(mockfn.mock.calls.length).toBe(1);
-    expect(mockfn.mock.calls[0].length).toBe(1);
-  });
-  it('should the palette is plainPrimary', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "primary",
-      palette: "plainPrimary"
-    }));
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is plainSecondary', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "plainSecondary",
-      palette: "plainSecondary"
-    }));
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is primaryFilled', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "primaryFilled",
-      palette: "primaryFilled"
-    }));
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is danger', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "danger",
-      palette: "danger"
-    }));
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is dangerFilled', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "dangerFilled",
-      palette: "dangerFilled"
-    }));
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is secondary', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "secondary",
-      palette: "secondary"
-    }));
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is secondaryFilled', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "secondaryFilled",
-      palette: "secondaryFilled"
-    }));
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should is not bold', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "secondaryFilled",
-      isBold: false
-    }));
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should is rounded', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "secondaryFilled",
-      rounded: true
-    }));
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the size is small', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "small",
-      rounded: true,
-      size: "small"
-    }));
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the size is large', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "large",
-      rounded: true,
-      size: "large"
-    }));
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the size is xlarge', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "xlarge",
-      rounded: true,
-      size: "xlarge"
-    }));
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the status is loading', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "secondaryFilled",
-      rounded: true,
-      status: "loading"
-    }));
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the status is success', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      text: "secondaryFilled",
-      rounded: true,
-      status: "success"
-    }));
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});