@zohodesk/components 1.0.0-temp-41 → 1.0.0-temp-45

package/lib/Ribbon/Ribbon.module.css

@@ -1,377 +0,0 @@
-.varClass {
-  /* ribbon default variables */
-  --ribbon_padding: 0;
-  --ribbon_text_color: var(--zdt_ribbon_default_text);
-  --ribbon_text_transform: none;
-  --ribbon_font_size: var(--zd_font_size13);
-  --ribbon_bg_color: var(--zdt_ribbon_default_bg);
-  --ribbon_box_shadow: none;
-  --ribbon_border_width: 0;
-  --ribbon_border_color: var(--zdt_ribbon_default_border);
-  --ribbon_line_height: normal;
-
-  /* flag ribbon default variable */
-
-  /* tag ribbon default variables */
-  --ribbon_tag_before_top: var(--zd_size3);
-  --ribbon_tag_before_border_style: solid;
-  --ribbon_tag_before_border_color: var(--zdt_ribbon_default_tag_border);
-  --ribbon_tag_before_width: var(--zd_size20);
-  --ribbon_tag_before_height: var(--zd_size20);
-  --ribbon_tag_before_left: calc(var(--zd_size10) * -1);
-  --ribbon_tag_before_border_radius: 3px 0 0 0;
-}[dir=ltr] .varClass {
-  --ribbon_flag_border_width: var(--zd_size14) var(--zd_size12) var(--zd_size14) 0/*rtl: var(--zd_size14) 0 var(--zd_size14) var(--zd_size12)*/;
-  --ribbon_tag_before_border_width: 1px 0 0 1px/*rtl: 1px 1px 0 0*/;
-}[dir=rtl] .varClass {
-  --ribbon_flag_border_width: var(--zd_size14) 0 var(--zd_size14) var(--zd_size12);
-  --ribbon_tag_before_border_width: 1px 1px 0 0;
-}
-.basic {
-  composes: varClass;
-  position: relative;
-  color: var(--ribbon_text_color);
-  text-transform: var(--ribbon_text_transform);
-  font-size: var(--ribbon_font_size);
-  line-height: var(--ribbon_line_height);
-  padding: var(--ribbon_padding);
-  background-color: var(--ribbon_bg_color);
-  box-shadow: var(--ribbon_box_shadow);
-  border-width: var(--ribbon_border_width);
-  border-style: solid;
-  border-color: var(--ribbon_border_color);
-}
-.default,
-.flag,
-.plain,
-.ribbon,
-.box,
-.stamp,
-.sticker {
-  composes: dotted from '../common/common.module.css';
-}
-
-.default {
-  composes: semibold from '../common/common.module.css';
-  display: block;
-  --ribbon_padding: var(--zd_size5) var(--zd_size20);
-  --ribbon_text_color: var(--zdt_ribbon_white_text);
-  --ribbon_text_transform: uppercase;
-  text-align: center;
-}
-.small {
-  --ribbon_font_size: var(--zd_font_size9);
-}
-.medium {
-  --ribbon_font_size: var(--zd_font_size11);
-}
-.large {
-  --ribbon_font_size: var(--zd_font_size13);
-}
-.xlarge {
-  --ribbon_font_size: var(--zd_font_size14);
-}
-
-.palette_default {
-  --ribbon_bg_color: var(--zdt_ribbon_palette_bg);
-}
-.palette_danger {
-  --ribbon_bg_color: var(--zdt_ribbon_danger_bg);
-}
-.palette_primary {
-  --ribbon_bg_color: var(--zdt_ribbon_primary_bg);
-}
-.palette_secondary {
-  --ribbon_bg_color: var(--zdt_ribbon_secondary_bg);
-}
-.palette_info {
-  --ribbon_bg_color: var(--zdt_ribbon_info_bg);
-}
-.palette_dark {
-  --ribbon_bg_color: var(--zdt_ribbon_dark_bg);
-}
-.plain_default {
-  --ribbon_text_color: var(--zdt_ribbon_plain_text);
-}
-.plain_danger {
-  --ribbon_text_color: var(--zdt_ribbon_danger_text);
-}
-.plain_primary {
-  --ribbon_text_color: var(--zdt_ribbon_primary_text);
-}
-.plain_secondary {
-  --ribbon_text_color: var(--zdt_ribbon_secondary_text);
-}
-.plain_info {
-  --ribbon_text_color: var(--zdt_ribbon_info_text);
-}
-.plain_dark {
-  --ribbon_text_color: var(--zdt_ribbon_default_text);
-}
-.default_default {
-  --ribbon_box_shadow: 0 5px 10px var(--zdt_ribbon_default_shadow);
-}
-.default_danger {
-  --ribbon_box_shadow: 0 5px 10px var(--zdt_ribbon_danger_shadow);
-}
-.default_primary {
-  --ribbon_box_shadow: 0 5px 10px var(--zdt_ribbon_primary_shadow);
-}
-.default_secondary {
-  --ribbon_box_shadow: 0 5px 10px var(--zdt_ribbon_secondary_shadow);
-}
-.default_info {
-  --ribbon_box_shadow: 0 5px 10px var(--zdt_ribbon_info_shadow);
-}
-.default_dark {
-  --ribbon_box_shadow: 0 5px 10px var(--zdt_ribbon_dark_shadow);
-}
-.box_default {
-  --ribbon_border_width: 1px;
-  --ribbon_border_color: var(--zdt_ribbon_default_border);
-}
-.box_danger {
-  --ribbon_border_width: 1px;
-  --ribbon_border_color: var(--zdt_ribbon_danger_border);
-}
-.box_primary {
-  --ribbon_border_width: 1px;
-  --ribbon_border_color: var(--zdt_ribbon_primary_border);
-}
-.box_secondary {
-  --ribbon_border_width: 1px;
-  --ribbon_border_color: var(--zdt_ribbon_secondary_border);
-}
-.box_info {
-  --ribbon_border_width: 1px;
-  --ribbon_border_color: var(--zdt_ribbon_info_border);
-}
-.box_dark {
-  --ribbon_border_width: 1px;
-  --ribbon_border_color: var(--zdt_ribbon_dark_border);
-}
-.stamp_default {
-  --ribbon_bg_color: var(--zdt_ribbon_default_stamp_bg);
-}
-.stamp_danger {
-  --ribbon_bg_color: var(--zdt_ribbon_danger_stamp_bg);
-}
-.stamp_primary {
-  --ribbon_bg_color: var(--zdt_ribbon_primary_stamp_bg);
-}
-.stamp_secondary {
-  --ribbon_bg_color: var(--zdt_ribbon_secondary_stamp_bg);
-}
-.stamp_info {
-  --ribbon_bg_color: var(--zdt_ribbon_info_stamp_bg);
-}
-.stamp_dark {
-  --ribbon_bg_color: var(--zdt_ribbon_dark_stamp_bg);
-}
-
-.flag {
-  composes: dotted from '../common/common.module.css';
-  display: block;
-  --ribbon_text_color: var(--zdt_ribbon_white_text);
-  --ribbon_line_height: var(--zd_size20);
-  --ribbon_text_transform: uppercase;
-}
-
-[dir=ltr] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6)/*rtl: var(--zd_size4) var(--zd_size6) var(--zd_size4) var(--zd_size24)*/;
-}
-
-[dir=rtl] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size6) var(--zd_size4) var(--zd_size24);
-}
-.flag::after {
-  position: absolute;
-  top: -1px;
-  bottom: -1px;
-  content: '';
-  width: var(--zd_size12);
-  border-style: solid;
-  transform: translateZ(0);
-  border-width: var(--ribbon_flag_border_width);
-}
-[dir=ltr] .flag::after {
-  right: -1px;
-  border-color: var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_white_border)
-    var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border);
-}
-[dir=rtl] .flag::after {
-  left: -1px;
-  border-color: var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border)    var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_white_border);
-}
-.plain {
-  display: inline-block;
-  composes: semibold from '../common/common.module.css';
-}
-.ribbon {
-  composes: semibold from '../common/common.module.css';
-  display: block;
-  --ribbon_text_color: var(--zdt_ribbon_white_text);
-  --ribbon_text_transform: uppercase;
-  --ribbon_padding: var(--zd_size6) var(--zd_size10);
-  --ribbon_line_height: var(--zd_size20);
-  text-align: center;
-}
-.ribbon::after,
-.ribbon::before {
-  position: absolute;
-  content: '';
-  top: 100%;
-  height: var(--zd_size10);
-  width: var(--zd_size10);
-}
-.ribbon::after, .ribbon::before {
-  border-style: solid;
-  border-width: 5px;
-  background-color: inherit;
-}
-[dir=ltr] .ribbon::after, [dir=ltr] .ribbon::before {
-  border-color: transparent transparent var(--zdt_ribbon_flag_white_border)
-    var(--zdt_ribbon_flag_white_border);
-}
-[dir=rtl] .ribbon::after, [dir=rtl] .ribbon::before {
-  border-color: transparent var(--zdt_ribbon_flag_white_border) var(--zdt_ribbon_flag_white_border)    transparent;
-}
-[dir=ltr] .ribbon::after {
-  right: 0;
-}
-[dir=rtl] .ribbon::after {
-  left: 0;
-}
-[dir=ltr] .ribbon::before {
-  left: 0;
-  transform: rotateY(180deg);
-}
-[dir=rtl] .ribbon::before {
-  right: 0;
-  transform: rotateY(-180deg);
-}
-
-.tag {
-  composes: semibold from '../common/common.module.css';
-  display: inline-block;
-  height: var(--zd_size28);
-  border-style: solid;
-  border-color: var(--zdt_ribbon_default_tag_border);
-}
-
-[dir=ltr] .tag {
-  border-width: 1px 1px 1px 0/*rtl: 1px 0 1px 1px*/;
-  border-radius: 0 3px 3px 0/*rtl: 3px 0 0 3px*/;
-  margin-left: var(--zd_size13);
-  padding: var(--zd_size6) var(--zd_size8) var(--zd_size6) var(--zd_size5)/*rtl: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8)*/;
-}
-
-[dir=rtl] .tag {
-  border-width: 1px 0 1px 1px;
-  border-radius: 3px 0 0 3px;
-  margin-right: var(--zd_size13);
-  padding: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8);
-}
-.tag::before {
-  position: absolute;
-  content: '';
-  top: var(--ribbon_tag_before_top);
-  width: var(--ribbon_tag_before_width);
-  height: var(--ribbon_tag_before_height);
-  background-color: inherit;
-  border-style: var(--ribbon_tag_before_border_style);
-  border-color: var(--ribbon_tag_before_border_color);
-  border-width: var(--ribbon_tag_before_border_width);
-  border-radius: var(--ribbon_tag_before_border_radius);
-}
-[dir=ltr] .tag::before {
-  transform: rotate(-45deg);
-  left: var(--ribbon_tag_before_left);
-}
-[dir=rtl] .tag::before {
-  transform: rotate(45deg);
-  right: var(--ribbon_tag_before_left);
-}
-
-.box {
-  display: inline-block;
-  --ribbon_bg_color: var(--zdt_ribbon_white_bg);
-  --ribbon_padding: var(--zd_size5) var(--zd_size8);
-  border-radius: 3px;
-}
-.stamp {
-  display: inline-block;
-  --ribbon_padding: var(--zd_size3) var(--zd_size5);
-  --ribbon_text_transform: uppercase;
-}
-.sticker {
-  display: block;
-  height: var(--zd_size18);
-  line-height: var(--zd_size11);
-  --ribbon_text_color: var(--zdt_ribbon_white_text);
-  --ribbon_text_transform: uppercase;
-  text-align: center;
-  border-width: 1px 0;
-  border-style: solid;
-  border-color: var(--zdt_ribbon_flag_white_border);
-  padding: var(--zd_size3) var(--zd_size10);
-}
-.after,
-.before {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: var(--zd_size10);
-}
-[dir=ltr] .after {
-  right: calc(var(--zd_size2) * -1);
-}
-[dir=rtl] .after {
-  left: calc(var(--zd_size2) * -1);
-}
-[dir=ltr] .before {
-  left: calc(var(--zd_size8) * -1);
-}
-[dir=rtl] .before {
-  right: calc(var(--zd_size8) * -1);
-}
-.after::after,
-.after::before,
-.before::after,
-.before::before {
-  position: absolute;
-  height: var(--zd_size7);
-  width: var(--zd_size7);
-  content: '';
-}
-.after::after, .after::before, .before::after, .before::before {
-  background-color: var(--zdt_ribbon_white_bg);
-}
-[dir=ltr] .after::after, [dir=ltr] .after::before, [dir=ltr] .before::after, [dir=ltr] .before::before {
-  transform: rotate(45deg);
-}
-[dir=rtl] .after::after, [dir=rtl] .after::before, [dir=rtl] .before::after, [dir=rtl] .before::before {
-  transform: rotate(-45deg);
-}
-.after::after,
-.before::after {
-  top: 0;
-}
-.after::before,
-.before::before {
-  bottom: 0;
-}
-.children {
-  display: inline-block;
-  vertical-align: top;
-  line-height: 0;
-}
-[dir=ltr] .children {
-  margin-right: var(--zd_size4);
-}
-[dir=rtl] .children {
-  margin-left: var(--zd_size4);
-}
-.childText {
-  position: relative;
-}

package/lib/Ribbon/__tests__/Ribbon.spec.js

@@ -1,193 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Ribbon = _interopRequireDefault(require("../Ribbon"));
-
-var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-describe('Ribbon component', function () {
-  it('should the palette is default', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-      palette: "default",
-      text: "default"
-    }));
-
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is danger', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-      palette: "danger",
-      text: "danger"
-    }));
-
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is secondary', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-      palette: "secondary",
-      text: "secondary"
-    }));
-
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is info', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-      palette: "info",
-      text: "info"
-    }));
-
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is primary', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-      palette: "primary",
-      text: "primary"
-    }));
-
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the palette is dark', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-      palette: "dark",
-      text: "dark"
-    }));
-
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the size is small', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-      palette: "default",
-      text: "default",
-      size: "small"
-    }));
-
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the size is medium', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-      palette: "default",
-      text: "default",
-      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(_Ribbon["default"], {
-      palette: "default",
-      text: "default",
-      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(_Ribbon["default"], {
-      palette: "default",
-      text: "default",
-      size: "xlarge"
-    }));
-
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the type is dafault', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-      palette: "default",
-      text: "default",
-      size: "xlarge"
-    }));
-
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the type is flag', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-      palette: "default",
-      text: "default",
-      size: "xlarge"
-    }));
-
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the type is plain', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-      palette: "default",
-      text: "default",
-      size: "xlarge"
-    }));
-
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the type is ribbon', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-      palette: "default",
-      text: "default",
-      size: "xlarge"
-    }));
-
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the type is box', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-      palette: "default",
-      text: "default",
-      size: "xlarge"
-    }));
-
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the type is stamp', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-      palette: "default",
-      text: "default",
-      size: "xlarge"
-    }));
-
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the type is sticker', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-      palette: "default",
-      text: "default",
-      size: "xlarge"
-    }));
-
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should the type is tag', function () {
-    var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-      palette: "default",
-      text: "default",
-      type: "tag"
-    }));
-
-    var tree = ele.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should display text', function () {
-    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-      text: "primary",
-      palette: "primary"
-    }));
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'ribbonComp').textContent.contains('primary')).toBe(true);
-  });
-});