@zohodesk/components 1.0.0-temp-234 → 1.0.0-temp-236

package/es/Ribbon/Ribbon.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-/* eslint css-modules/no-unused-class: [2, { markAsUsed: [default, flag, plain, ribbon, box, stamp, sticker, small, medium, large, xlarge, palette_default, palette_danger, palette_primary, palette_secondary, palette_info, palette_dark, plain_default, plain_danger, plain_primary, plain_secondary, plain_info, plain_dark, tag] }] */
-
-import style from "./Ribbon.module.css";
-export default class Ribbon extends React.Component {
-  render() {
-    let {
-      type,
-      text,
-      children,
-      palette,
-      size,
-      dataId,
-      customClass,
-      dataSelectorId
-    } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
-      className: `${style.basic} ${customClass} ${type !== 'tag' ? type === 'plain' || type === 'box' || type === 'stamp' ? `${style[`plain_${palette}`]} 
-                 ${type === 'box' ? style[`box_${palette}`] : ''} ${type === 'stamp' ? style[`stamp_${palette}`] : ''}` : `${style[`palette_${palette}`]} ${type === 'default' ? style[`default_${palette}`] : ''}` : ''} ${style[size]} ${style[type]}`,
-      "data-id": dataId,
-      "data-test-id": dataId,
-      "data-selector-id": dataSelectorId
-    }, type === 'sticker' ? /*#__PURE__*/React.createElement("span", {
-      className: style.after
-    }) : null, children ? /*#__PURE__*/React.createElement("span", {
-      className: style.children
-    }, children) : null, /*#__PURE__*/React.createElement("span", {
-      className: style.childText
-    }, text), type === 'sticker' ? /*#__PURE__*/React.createElement("span", {
-      className: style.before
-    }) : null);
-  }
-
-}
-Ribbon.propTypes = propTypes;
-Ribbon.defaultProps = defaultProps; // if (__DOCS__) {
-//   Ribbon.docs = {
-//     componentGroup: 'Atom',
-//     folderName: 'Style Guide',
-//     external: true,
-//     description: ' ',
-//     images: [
-//       {
-//         view: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/Ribbon/v1/Ribbon.png',
-//         psd: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/Ribbon/v1/Ribbon.psd'
-//       }
-//     ]
-//   };
-// }

package/es/Ribbon/Ribbon.module.css

@@ -1,500 +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: 14px 12px 14px 0
-    /*rtl: 14px 0 14px 12px*/
-  ;
-  --ribbon_tag_before_border_width: 1px 0 0 1px
-    /*rtl: 1px 1px 0 0*/
-  ;
-}[dir=rtl] .varClass {
-  --ribbon_flag_border_width: 14px 12px 14px 0  ;
-  --ribbon_tag_before_border_width: 1px 0 0 1px  ;
-}
-
-/* css:lineheight-validation:ignore */
-.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: var(--zd_bs_ribbon_default);
-}
-
-.default_danger {
-  --ribbon_box_shadow: var(--zd_bs_ribbon_danger);
-}
-
-.default_primary {
-  --ribbon_box_shadow: var(--zd_bs_ribbon_primary);
-}
-
-.default_secondary {
-  --ribbon_box_shadow: var(--zd_bs_ribbon_secondary);
-}
-
-.default_info {
-  --ribbon_box_shadow: var(--zd_bs_ribbon_info);
-}
-
-.default_dark {
-  --ribbon_box_shadow: var(--zd_bs_ribbon_dark);
-}
-
-.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_text_transform: uppercase;
-}
-
-[dir=ltr] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
-}
-
-[dir=rtl] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
-}
-
-.flag.small {
-  --ribbon_line_height: 2.2223;
-}
-
-.flag.medium {
-  --ribbon_line_height: 1.8182;
-}
-
-.flag.large {
-  --ribbon_line_height: 1.5385;
-}
-
-.flag.xlarge {
-  --ribbon_line_height: 1.4286;
-}
-
-.flag::after {
-  position: absolute;
-  /*  Variable:Ignore  */
-  top: -1px;
-  /*  Variable:Ignore  */
-  /*  Variable:Ignore  */
-  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: calc( var(--zd_size1) * -1 ) ;
-  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: calc( var(--zd_size1) * -1 ) ;
-  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);
-  text-align: center;
-}
-
-.ribbon.small {
-  --ribbon_line_height: 2.2223;
-}
-
-.ribbon.medium {
-  --ribbon_line_height: 1.8182;
-}
-
-.ribbon.large {
-  --ribbon_line_height: 1.5385;
-}
-
-.ribbon.xlarge {
-  --ribbon_line_height: 1.4286;
-}
-
-.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) ;
-}
-
-[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) ;
-  --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) ;
-}
-
-.sticker.small {
-  line-height: 1.2223;
-}
-
-.sticker.medium {
-  line-height: 1;
-}
-
-.sticker.large {
-  line-height: 0.8462;
-}
-
-.sticker.xlarge {
-  line-height: 0.7858;
-}
-
-.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/es/Ribbon/__tests__/Ribbon.spec.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Ribbon from "../Ribbon.js";
-describe('Label', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Ribbon, null));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  const palette = ['default', 'danger', 'primary', 'secondary', 'info', 'dark'];
-  test.each(palette)('rendering the palette of- %s', palette => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Ribbon, {
-      palette: palette
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  const type = ['default', 'flag', 'plain', 'ribbon', 'box', 'stamp', 'sticker', 'tag'];
-  test.each(type)('rendering the type - %s', type => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Ribbon, {
-      type: type
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering children ', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Ribbon, null, /*#__PURE__*/React.createElement("span", null, " Ribbon 1 ")));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  const size = ['small', 'medium', 'large', 'xlarge'];
-  test.each(size)('rendering the size - %s', size => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Ribbon, {
-      size: size
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the customClass', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Ribbon, {
-      customClass: "ribbonCustomClass"
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});