@zohodesk/dot 1.0.0-temp-97 → 1.0.0-temp-98

package/es/Provider.js

@@ -6,95 +6,149 @@ import LibraryContext from '@zohodesk/components/lib/Provider/LibraryContextInit
 import datetime from '@zohodesk/datetimejs';
 import ThemeTool from '../../common/lib/ThemeTool/ThemeTool';
 import i18n from './i18n';
-/* component pkg - default mode & themes */
+/* component pkg - default mode, themes & contrast */
 
 import '@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/blue/contrast/blueDefaultCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/green/contrast/greenDefaultCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/orange/contrast/orangeDefaultCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/red/contrast/redDefaultCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/yellow/contrast/yellowDefaultCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/default/mode/defaultMode.module.css';
-/* component pkg - dark mode & themes */
+import '@zohodesk/components/assets/Appearance/default/mode/contrast/defaultContrast.module.css';
+/* component pkg - dark mode, themes & contrast */
 
 import '@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/contrast/blueDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/green/contrast/greenDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/contrast/orangeDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/red/contrast/redDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/contrast/yellowDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/dark/mode/darkMode.module.css';
-/* component pkg - pure dark mode & themes */
+import '@zohodesk/components/assets/Appearance/dark/mode/contrast/darkContrast.module.css';
+/* component pkg - pure dark mode, themes & contrast */
 
 import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/contrast/bluePureDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/green/contrast/greenPureDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/contrast/orangePureDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/red/contrast/redPureDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/contrast/yellowPureDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/mode/pureDarkMode.module.css';
-/* svg pkg - default mode & themes */
+import '@zohodesk/components/assets/Appearance/pureDark/mode/contrast/pureDarkContrast.module.css';
+/* svg pkg - default mode, themes & contrast */
 
 import '@zohodesk/svg/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/default/themes/blue/contrast/blueDefaultCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/default/themes/green/contrast/greenDefaultCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/default/themes/orange/contrast/orangeDefaultCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/default/themes/red/contrast/redDefaultCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/default/themes/yellow/contrast/yellowDefaultCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/default/mode/defaultEmptyStates.module.css';
-/* svg pkg - dark mode & themes */
+import '@zohodesk/svg/assets/Appearance/default/mode/contrast/defaultContrastEmptyStates.module.css';
+/* svg pkg - dark mode, themes & contrast */
 
 import '@zohodesk/svg/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/themes/blue/contrast/blueDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/themes/green/contrast/greenDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/themes/orange/contrast/orangeDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/themes/red/contrast/redDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/themes/yellow/contrast/yellowDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/dark/mode/darkEmptyStates.module.css';
-/* svg pkg - pure dark mode & themes */
+import '@zohodesk/svg/assets/Appearance/dark/mode/contrast/darkContrastEmptyStates.module.css';
+/* svg pkg - pure dark mode, themes & contrast */
 
 import '@zohodesk/svg/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/pureDark/themes/blue/contrast/bluePureDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/pureDark/themes/green/contrast/greenPureDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/pureDark/themes/orange/contrast/orangePureDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/pureDark/themes/red/contrast/redPureDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/pureDark/themes/yellow/contrast/yellowPureDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/pureDark/mode/pureDarkEmptyStates.module.css';
+import '@zohodesk/svg/assets/Appearance/pureDark/mode/contrast/pureDarkContrastEmptyStates.module.css';
 import { setGlobalIdPrefix } from '@zohodesk/components/lib/Provider/IdProvider';
 import { setInitialZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-/* dot pkg - default mode & themes */
+/* dot pkg - default mode, themes & contrast */
 
 import '../assets/Appearance/default/themes/blue/blueDefaultDotTheme.module.css';
+import '../assets/Appearance/default/themes/blue/contrast/blueDefaultDotThemeContrast.module.css';
 import '../assets/Appearance/default/themes/green/greenDefaultDotTheme.module.css';
+import '../assets/Appearance/default/themes/green/contrast/greenDefaultDotThemeContrast.module.css';
 import '../assets/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css';
+import '../assets/Appearance/default/themes/orange/contrast/orangeDefaultDotThemeContrast.module.css';
 import '../assets/Appearance/default/themes/red/redDefaultDotTheme.module.css';
+import '../assets/Appearance/default/themes/red/contrast/redDefaultDotThemeContrast.module.css';
 import '../assets/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css';
+import '../assets/Appearance/default/themes/yellow/contrast/yellowDefaultDotThemeContrast.module.css';
 import '../assets/Appearance/default/mode/dotDefaultMode.module.css';
-/* dot pkg - dark mode & themes */
+import '../assets/Appearance/default/mode/contrast/dotDefaultContrast.module.css';
+/* dot pkg - dark mode, themes & contrast */
 
 import '../assets/Appearance/dark/themes/blue/blueDarkDotTheme.module.css';
+import '../assets/Appearance/dark/themes/blue/contrast/blueDarkDotThemeContrast.module.css';
 import '../assets/Appearance/dark/themes/green/greenDarkDotTheme.module.css';
+import '../assets/Appearance/dark/themes/green/contrast/greenDarkDotThemeContrast.module.css';
 import '../assets/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css';
+import '../assets/Appearance/dark/themes/orange/contrast/orangeDarkDotThemeContrast.module.css';
 import '../assets/Appearance/dark/themes/red/redDarkDotTheme.module.css';
+import '../assets/Appearance/dark/themes/red/contrast/redDarkDotThemeContrast.module.css';
 import '../assets/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css';
+import '../assets/Appearance/dark/themes/yellow/contrast/yellowDarkDotThemeContrast.module.css';
 import '../assets/Appearance/dark/mode/dotDarkMode.module.css';
-/* dot pkg - pure dark mode & themes */
+import '../assets/Appearance/dark/mode/contrast/dotDarkContrast.module.css';
+/* dot pkg - pure dark mode, themes & contrast */
 
 import '../assets/Appearance/pureDark/themes/blue/bluePureDarkDotTheme.module.css';
+import '../assets/Appearance/pureDark/themes/blue/contrast/bluePureDarkDotThemeContrast.module.css';
 import '../assets/Appearance/pureDark/themes/green/greenPureDarkDotTheme.module.css';
+import '../assets/Appearance/pureDark/themes/green/contrast/greenPureDarkDotThemeContrast.module.css';
 import '../assets/Appearance/pureDark/themes/orange/orangePureDarkDotTheme.module.css';
+import '../assets/Appearance/pureDark/themes/orange/contrast/orangePureDarkDotThemeContrast.module.css';
 import '../assets/Appearance/pureDark/themes/red/redPureDarkDotTheme.module.css';
+import '../assets/Appearance/pureDark/themes/red/contrast/redPureDarkDotThemeContrast.module.css';
 import '../assets/Appearance/pureDark/themes/yellow/yellowPureDarkDotTheme.module.css';
+import '../assets/Appearance/pureDark/themes/yellow/contrast/yellowPureDarkDotThemeContrast.module.css';
 import '../assets/Appearance/pureDark/mode/dotPureDarkMode.module.css';
+import '../assets/Appearance/pureDark/mode/contrast/dotPureDarkContrast.module.css';
 datetime.tz.set({
   timezone: 'Asia/Kolkata',
   _packed: '-5R.s -5R.k -5l.a -5u -6u|01234343|-4Fg5R.s BKo0.8 1rDcw.a 1r2LP.a 1un0 HB0 7zX0|15e6',
@@ -107,10 +161,12 @@ export default class Provider extends React.Component {
     setInitialZIndex('10');
     this.state = {
       appearanceName: 'default',
-      themeName: 'blue'
+      themeName: 'blue',
+      isContrastChecked: false
     };
     this.setTheme = this.setTheme.bind(this);
     this.setAppearance = this.setAppearance.bind(this);
+    this.setContrast = this.setContrast.bind(this);
   }
 
   setAppearance(mode) {
@@ -125,10 +181,17 @@ export default class Provider extends React.Component {
     });
   }
 
+  setContrast() {
+    this.setState(prevState => ({
+      isContrastChecked: !prevState.isContrastChecked
+    }));
+  }
+
   render() {
     let {
       appearanceName,
-      themeName
+      themeName,
+      isContrastChecked
     } = this.state;
     return /*#__PURE__*/React.createElement(I18NProvider, {
       i18n: i18n,
@@ -148,12 +211,15 @@ export default class Provider extends React.Component {
           'data-mode': appearanceName,
           'data-theme': themeName
         }
-      }
+      },
+      className: isContrastChecked ? 'contrast' : ''
     }, /*#__PURE__*/React.createElement(Container, {
       scroll: "vertical"
     }, this.props.children), /*#__PURE__*/React.createElement(ThemeTool, {
       onThemeChange: this.setTheme,
-      onAppearanceChange: this.setAppearance
+      onAppearanceChange: this.setAppearance,
+      onContrastChange: this.setContrast,
+      isChecked: isContrastChecked
     }))));
   }
 

package/es/ToastMessage/ToastMessage.js

@@ -1,8 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { useState } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes'; //components
+import PropTypes from 'prop-types'; //components
 
 import Icon from '@zohodesk/icons/lib/Icon';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
@@ -196,8 +195,60 @@ export default function ToastMessage(props) {
     Element: ToastMessageUI
   }));
 }
-ToastMessage.propTypes = propTypes;
-ToastMessage.defaultProps = defaultProps;
+ToastMessage.propTypes = {
+  autoClose: PropTypes.bool,
+  cancelText: PropTypes.string,
+  dataId: PropTypes.string,
+  getBottomContainer: PropTypes.func,
+  getInnerBottomContainer: PropTypes.func,
+  getLeftContainer: PropTypes.func,
+  getSubmitContainer: PropTypes.func,
+  hidePopNotification: PropTypes.func,
+  hideTime: PropTypes.string,
+  iconName: PropTypes.string,
+  iconPalette: PropTypes.oneOf(['successFill', 'dangerFill', 'dangerShadow', 'successPlain', 'dangerPlain', 'primaryPlain']),
+  iconSize: PropTypes.string,
+  id: PropTypes.string,
+  info: PropTypes.string,
+  isAnimate: PropTypes.bool,
+  isClose: PropTypes.bool,
+  isIconMid: PropTypes.bool,
+  isMore: PropTypes.bool,
+  message: PropTypes.string,
+  messageState: PropTypes.bool,
+  needClose: PropTypes.bool,
+  onCancel: PropTypes.func,
+  onSubmit: PropTypes.func,
+  subject: PropTypes.string,
+  submitText: PropTypes.string,
+  submitType: PropTypes.oneOf(['primary', 'danger', 'success']),
+  type: PropTypes.oneOf(['primary', 'information', 'secondary', 'success', 'custom']),
+  needAutoZindex: PropTypes.bool,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaLive: PropTypes.oneOf(['polite', 'assertive', 'off']),
+    ariaAtomic: PropTypes.bool,
+    ariaDescribedby: PropTypes.string,
+    ariaLabelledby: PropTypes.string
+  })
+};
+ToastMessage.defaultProps = {
+  iconName: 'bell',
+  iconSize: '30',
+  submitType: 'primary',
+  isIconMid: false,
+  needClose: false,
+  type: 'primary',
+  isMore: false,
+  messageState: false,
+  isAnimate: true,
+  isClose: false,
+  autoClose: false,
+  hideTime: '3000',
+  dataId: 'toastMessage',
+  needAutoZindex: true,
+  a11y: {}
+};
 
 if (false) {
   ToastMessage.docs = {