@zohodesk/components 1.0.0-temp-71 → 1.0.0-temp-72

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

@@ -1,163 +1,163 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Ribbon component should the palette is danger 1`] = `
-<span
-  className="basic palette_danger large default"
-  data-id="ribbonComp"
->
-  danger
-</span>
-`;
-
-exports[`Ribbon component should the palette is dark 1`] = `
-<span
-  className="basic palette_dark large default"
-  data-id="ribbonComp"
->
-  dark
-</span>
-`;
-
-exports[`Ribbon component should the palette is default 1`] = `
-<span
-  className="basic palette_default large default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the palette is info 1`] = `
-<span
-  className="basic palette_info large default"
-  data-id="ribbonComp"
->
-  info
-</span>
-`;
-
-exports[`Ribbon component should the palette is primary 1`] = `
-<span
-  className="basic palette_primary large default"
-  data-id="ribbonComp"
->
-  primary
-</span>
-`;
-
-exports[`Ribbon component should the palette is secondary 1`] = `
-<span
-  className="basic palette_secondary large default"
-  data-id="ribbonComp"
->
-  secondary
-</span>
-`;
-
-exports[`Ribbon component should the size is large 1`] = `
-<span
-  className="basic palette_default large default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the size is medium 1`] = `
-<span
-  className="basic palette_default small default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the size is small 1`] = `
-<span
-  className="basic palette_default small default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the size is xlarge 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is box 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is dafault 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is flag 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is plain 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is ribbon 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is stamp 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is sticker 1`] = `
-<span
-  className="basic palette_default xlarge default"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
-
-exports[`Ribbon component should the type is tag 1`] = `
-<span
-  className="basic  large tag"
-  data-id="ribbonComp"
->
-  default
-</span>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Ribbon component should the palette is danger 1`] = `
+<span
+  className="basic palette_danger large default"
+  data-id="ribbonComp"
+>
+  danger
+</span>
+`;
+
+exports[`Ribbon component should the palette is dark 1`] = `
+<span
+  className="basic palette_dark large default"
+  data-id="ribbonComp"
+>
+  dark
+</span>
+`;
+
+exports[`Ribbon component should the palette is default 1`] = `
+<span
+  className="basic palette_default large default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the palette is info 1`] = `
+<span
+  className="basic palette_info large default"
+  data-id="ribbonComp"
+>
+  info
+</span>
+`;
+
+exports[`Ribbon component should the palette is primary 1`] = `
+<span
+  className="basic palette_primary large default"
+  data-id="ribbonComp"
+>
+  primary
+</span>
+`;
+
+exports[`Ribbon component should the palette is secondary 1`] = `
+<span
+  className="basic palette_secondary large default"
+  data-id="ribbonComp"
+>
+  secondary
+</span>
+`;
+
+exports[`Ribbon component should the size is large 1`] = `
+<span
+  className="basic palette_default large default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the size is medium 1`] = `
+<span
+  className="basic palette_default small default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the size is small 1`] = `
+<span
+  className="basic palette_default small default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the size is xlarge 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is box 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is dafault 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is flag 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is plain 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is ribbon 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is stamp 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is sticker 1`] = `
+<span
+  className="basic palette_default xlarge default"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;
+
+exports[`Ribbon component should the type is tag 1`] = `
+<span
+  className="basic  large tag"
+  data-id="ribbonComp"
+>
+  default
+</span>
+`;

package/es/Ribbon/props/defaultProps.js

@@ -0,0 +1,8 @@
+export const defaultProps = {
+  palette: 'default',
+  size: 'large',
+  text: 'Ribbon',
+  type: 'default',
+  dataId: 'ribbonComp',
+  customClass: ''
+};

package/es/Ribbon/props/propTypes.js

@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.element,
+  dataId: PropTypes.string,
+  palette: PropTypes.oneOf(['default', 'danger', 'primary', 'secondary', 'info', 'dark']),
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
+  text: PropTypes.string,
+  type: PropTypes.oneOf(['default', 'flag', 'plain', 'ribbon', 'box', 'stamp', 'sticker', 'tag']),
+  customClass: PropTypes.string
+};

package/es/RippleEffect/RippleEffect.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import CssProvider from '../Provider/CssProvider';
 import style from './RippleEffect.module.css';
 export default function RippleEffect(props) {
@@ -19,25 +20,8 @@ export default function RippleEffect(props) {
     className: `${child.props.className || ''} ${className}`
   });
 }
-RippleEffect.defaultProps = {
-  isActive: false,
-  isDisabled: false,
-  isNeedEffect: true,
-  needBorder: true,
-  hoverType: 'default',
-  palette: 'default',
-  isCopyTextEnabled: false
-};
-RippleEffect.propTypes = {
-  children: PropTypes.node,
-  hoverType: PropTypes.oneOf(['default', 'border', 'bg']),
-  isActive: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isNeedEffect: PropTypes.bool,
-  needBorder: PropTypes.bool,
-  palette: PropTypes.oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
-  isCopyTextEnabled: PropTypes.bool
-};
+RippleEffect.defaultProps = defaultProps;
+RippleEffect.propTypes = propTypes;
 
 if (false) {
   RippleEffect.docs = {

package/es/RippleEffect/RippleEffect.module.css

@@ -1,99 +1,92 @@
-.effect {
-  position: relative;
-  border-radius: var(--zd_size4);
-}
-.border {
-  border: solid 1px var(--zdt_rippleeffect_default_border);
-}
-.default.defaultHover {
-  border-color: var(--zdt_rippleeffect_hover_border);
-}
-.hoverEffect:hover.primary.defaultHover,
-.hoverEffect:focus.primary.defaultHover,
-.hoverEffect:hover.primary.borderHover,
-.hoverEffect:focus.primary.borderHover {
-  border-color: var(--zdt_rippleeffect_primary_border);
-}
-.primary.defaultHover,
-.hoverEffect:hover.primary.active.border,
-.hoverEffect:focus.primary.active.border {
-  border-color: var(--zdt_rippleeffect_primary_active_border);
-}
-.primaryLight.defaultHover,
-.hoverEffect:hover.primaryLight.borderHover,
-.hoverEffect:focus.primaryLight.borderHover {
-  border-color: var(--zdt_rippleeffect_primary_light_border);
-}
-.green.defaultHover,
-.hoverEffect:hover.green.borderHover,
-.hoverEffect:focus.green.borderHover {
-  border-color: var(--zdt_rippleeffect_green_border);
-}
-.hoverEffect:hover.default.defaultHover,
-.hoverEffect:focus.default.defaultHover {
-  border-color: var(--zdt_rippleeffect_slate_border);
-}
-.hoverEffect:hover.default.borderHover,
-.hoverEffect:focus.default.borderHover {
-  border-color: var(--zdt_rippleeffect_navy_border);
-}
-.hoverEffect:hover.default.bgHover,
-.hoverEffect:focus.default.bgHover {
-  background-color: var(--zdt_rippleeffect_hover_bg);
-}
-.hoverEffect:hover.primaryLight.bgHover,
-.hoverEffect:focus.primaryLight.bgHover {
-  background-color: var(--zdt_rippleeffect_primary_light_bg);
-}
-.primaryFilled {
-  background-color: var(--zdt_rippleeffect_primary_bg);
-}
-.hoverEffect:hover.primaryFilled,
-.hoverEffect:focus.primaryFilled,
-.primaryFilled.active {
-  background-color: var(--zdt_rippleeffect_primaryfilled_bg);
-}
-.hoverEffect:hover.green.bgHover,
-.hoverEffect:focus.green.bgHover {
-  background-color: var(--zdt_rippleeffect_green_bg);
-}
-.default.active,
-.hoverEffect:hover.default.active,
-.hoverEffect:focus.default.active,
-.primaryLight.active,
-.primaryDark.active {
-  background-color: var(--zdt_rippleeffect_primary_light_bg);
-}
-.default.active.border,
-.hoverEffect:hover.default.active.border,
-.hoverEffect:focus.default.active.border,
-.primaryLight.active.border,
-.primaryDark.active.border {
-  border-color: var(--zdt_rippleeffect_primary_light_border);
-}
-.green.active {
-  background-color: var(--zdt_rippleeffect_green_bg);
-}
-.green.active.border {
-  border-color: var(--zdt_rippleeffect_green_border);
-}
-.primary.active {
-  background-color: var(--zdt_rippleeffect_primary_bg);
-}
-.danger.defaultHover,
-.hoverEffect:hover.danger.borderHover,
-.hoverEffect:focus.danger.borderHover {
-  border-color: var(--zdt_rippleeffect_danger_border);
-}
-.hoverEffect:hover.danger.bgHover,
-.hoverEffect:focus.danger.bgHover,
-.danger.active {
-  background-color: var(--zdt_rippleeffect_danger_bg);
-}
-.hoverEffect:hover.primaryDark.bgHover,
-.hoverEffect:focus.primaryDark.bgHover {
-  background-color: var(--zdt_rippleeffect_primary_dark_bg);
-}
-.notAllowed {
-  cursor: not-allowed;
-}
+.effect {
+  position: relative;
+  border-radius: var(--zd_size4);
+}
+.border {
+  border: solid 1px var(--zdt_rippleeffect_default_border);
+}
+.default.defaultHover {
+  border-color: var(--zdt_rippleeffect_hover_border);
+}
+.hoverEffect:hover.primary.defaultHover, .hoverEffect:hover.primary.borderHover
+/* .hoverEffect:focus.primary.borderHover  */
+{
+  border-color: var(--zdt_rippleeffect_primary_border);
+}
+.primary.defaultHover, .hoverEffect:hover.primary.active.border
+/* .hoverEffect:focus.primary.active.border  */
+{
+  border-color: var(--zdt_rippleeffect_primary_active_border);
+}
+.primaryLight.defaultHover, .hoverEffect:hover.primaryLight.borderHover
+/* .hoverEffect:focus.primaryLight.borderHover  */
+{
+  border-color: var(--zdt_rippleeffect_primary_light_border);
+}
+.green.defaultHover, .hoverEffect:hover.green.borderHover
+/* .hoverEffect:focus.green.borderHover  */
+{
+  border-color: var(--zdt_rippleeffect_green_border);
+}
+.hoverEffect:hover.default.defaultHover
+/* .hoverEffect:focus.default.defaultHover */
+ {
+  border-color: var(--zdt_rippleeffect_slate_border);
+}
+.hoverEffect:hover.default.borderHover
+/* .hoverEffect:focus.default.borderHover */
+ {
+  border-color: var(--zdt_rippleeffect_navy_border);
+}
+.hoverEffect:hover.default.bgHover
+/* .hoverEffect:focus.default.bgHover */
+ {
+  background-color: var(--zdt_rippleeffect_hover_bg);
+}
+.hoverEffect:hover.primaryLight.bgHover
+/* .hoverEffect:focus.primaryLight.bgHover  */
+{
+  background-color: var(--zdt_rippleeffect_primary_light_bg);
+}
+.primaryFilled {
+  background-color: var(--zdt_rippleeffect_primary_bg);
+}
+.hoverEffect:hover.primaryFilled, .primaryFilled.active {
+  background-color: var(--zdt_rippleeffect_primaryfilled_bg);
+}
+.hoverEffect:hover.green.bgHover
+/* .hoverEffect:focus.green.bgHover */
+ {
+  background-color: var(--zdt_rippleeffect_green_bg);
+}
+.default.active, .hoverEffect:hover.default.active, .primaryLight.active, .primaryDark.active {
+  background-color: var(--zdt_rippleeffect_primary_light_bg);
+}
+.default.active.border, .hoverEffect:hover.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
+  border-color: var(--zdt_rippleeffect_primary_light_border);
+}
+.green.active {
+  background-color: var(--zdt_rippleeffect_green_bg);
+}
+.green.active.border {
+  border-color: var(--zdt_rippleeffect_green_border);
+}
+.primary.active {
+  background-color: var(--zdt_rippleeffect_primary_bg);
+}
+.danger.defaultHover, .hoverEffect:hover.danger.borderHover
+/* .hoverEffect:focus.danger.borderHover */
+ {
+  border-color: var(--zdt_rippleeffect_danger_border);
+}
+.hoverEffect:hover.danger.bgHover, .danger.active {
+  background-color: var(--zdt_rippleeffect_danger_bg);
+}
+.hoverEffect:hover.primaryDark.bgHover
+/* .hoverEffect:focus.primaryDark.bgHover */
+ {
+  background-color: var(--zdt_rippleeffect_primary_dark_bg);
+}
+.notAllowed {
+  cursor: not-allowed;
+}

package/es/RippleEffect/props/defaultProps.js

@@ -0,0 +1,9 @@
+export const defaultProps = {
+  isActive: false,
+  isDisabled: false,
+  isNeedEffect: true,
+  needBorder: true,
+  hoverType: 'default',
+  palette: 'default',
+  isCopyTextEnabled: false
+};

package/es/RippleEffect/props/propTypes.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  hoverType: PropTypes.oneOf(['default', 'border', 'bg']),
+  isActive: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isNeedEffect: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  palette: PropTypes.oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
+  isCopyTextEnabled: PropTypes.bool
+};