@zohodesk/components 1.0.0-temp-52 → 1.0.0-temp-55

package/lib/Ribbon/Ribbon.module.css

@@ -0,0 +1,377 @@
+.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

@@ -0,0 +1,193 @@
+"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);
+  });
+});