@zohodesk/dot 1.0.0-temp-49 → 1.0.0-temp-53

package/src/PlusIcon/PlusIcon.js

@@ -1,64 +1,64 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './PlusIcon.module.css';
-import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
-
-export default class PlusIcon extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      dataId,
-      iconName,
-      iconClass,
-      iconSize,
-      size,
-      onClick,
-      title,
-      customClass
-    } = this.props;
-    return (
-      <span
-        className={style.container}
-        onClick={onClick}
-        data-id={dataId}
-        data-title={title}
-      >
-        <AvatarIcon
-          name={iconName}
-          iconClass={`${iconClass} ${style.icon}`}
-          iconSize={iconSize}
-          size={size}
-          className={`${customClass} ${style.plusIcon}`}
-        />
-      </span>
-    );
-  }
-}
-PlusIcon.defaultProps = {
-  size: 'xmedium',
-  iconName: 'ZD-plus',
-  iconSize: '16',
-  dataId: 'addreqNowbutton',
-  iconClass: '',
-  customClass: ''
-};
-PlusIcon.propTypes = {
-  dataId: PropTypes.string,
-  iconClass: PropTypes.string,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.string,
-  onClick: PropTypes.func,
-  size: PropTypes.string,
-  title: PropTypes.string,
-  customClass: PropTypes.string
-};
-
-if (__DOCS__) {
-  PlusIcon.docs = {
-    componentGroup: 'Common',
-    folderName: 'Ticket DetailView'
-  };
-}
+import React from 'react';
+import PropTypes from 'prop-types';
+import style from './PlusIcon.module.css';
+import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
+
+export default class PlusIcon extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      dataId,
+      iconName,
+      iconClass,
+      iconSize,
+      size,
+      onClick,
+      title,
+      customClass
+    } = this.props;
+    return (
+      <span
+        className={style.container}
+        onClick={onClick}
+        data-id={dataId}
+        data-title={title}
+      >
+        <AvatarIcon
+          name={iconName}
+          iconClass={`${iconClass} ${style.icon}`}
+          iconSize={iconSize}
+          size={size}
+          className={`${customClass} ${style.plusIcon}`}
+        />
+      </span>
+    );
+  }
+}
+PlusIcon.defaultProps = {
+  size: 'xmedium',
+  iconName: 'ZD-plus',
+  iconSize: '16',
+  dataId: 'addreqNowbutton',
+  iconClass: '',
+  customClass: ''
+};
+PlusIcon.propTypes = {
+  dataId: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  onClick: PropTypes.func,
+  size: PropTypes.string,
+  title: PropTypes.string,
+  customClass: PropTypes.string
+};
+
+if (__DOCS__) {
+  PlusIcon.docs = {
+    componentGroup: 'Common',
+    folderName: 'Ticket DetailView'
+  };
+}

package/src/PlusIcon/PlusIcon.module.css

@@ -1,16 +1,16 @@
-.container {
-  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
-  border-radius: 50%;
-  box-shadow: 0 2px 3px 0 var(--zdt_plusicon_box_shadow);
-  cursor: pointer;
-  background-color: var(--zdt_plusicon_bg);
-}
-.plusIcon {
-  border: 1px solid var(--zdt_plusicon_border);
-}
-.icon {
-  color: var(--zdt_plusicon_text);
-}
-.plusIcon:hover {
-  border-color: var(--zdt_plusicon_hover_border);
-}
+.container {
+  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
+  border-radius: 50%;
+  box-shadow: 0 2px 3px 0 var(--zdt_plusicon_box_shadow);
+  cursor: pointer;
+  background-color: var(--zdt_plusicon_bg);
+}
+.plusIcon {
+  border: 1px solid var(--zdt_plusicon_border);
+}
+.icon {
+  color: var(--zdt_plusicon_text);
+}
+.plusIcon:hover {
+  border-color: var(--zdt_plusicon_hover_border);
+}

package/src/PlusIcon/docs/PlusIcon__default.docs.js

@@ -1,18 +1,18 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import PlusIcon from '../PlusIcon';
-export default class PlusIcon__default extends Component {
-  render() {
-    return (
-      <div>
-        <PlusIcon />
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  PlusIcon__default.docs = {
-    componentGroup: 'Common',
-    folderName: 'Ticket DetailView'
-  };
-}
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import PlusIcon from '../PlusIcon';
+export default class PlusIcon__default extends Component {
+  render() {
+    return (
+      <div>
+        <PlusIcon />
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  PlusIcon__default.docs = {
+    componentGroup: 'Common',
+    folderName: 'Ticket DetailView'
+  };
+}

package/src/Provider.js

@@ -1,200 +1,203 @@
-import React from 'react';
-import { I18NProvider } from '@zohodesk/i18n';
-import { Container } from '@zohodesk/components/lib/Layout';
-import AppContainer from '@zohodesk/components/lib/AppContainer/AppContainer';
-import datetime from '@zohodesk/datetimejs';
-import i18n from './i18n';
-/* component pkg - default mode & themes */
-import '@zohodesk/components/lib/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/red/redDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/mode/defaultMode.module.css';
-/* component pkg - dark mode & themes */
-import '@zohodesk/components/lib/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/red/redDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/mode/darkMode.module.css';
-/* svg pkg - default mode & themes */
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/red/redDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/mode/defaultEmptyStates.module.css';
-/* svg pkg - dark mode & themes */
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/red/redDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/mode/darkEmptyStates.module.css';
-import { setGlobalIdPrefix } from '@zohodesk/components/lib/Provider/IdProvider';
-import { setInitialZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-import Switch from '@zohodesk/components/lib/Switch/Switch';
-/* dot pkg - default mode & themes */
-import './Appearance/default/themes/blue/blueDefaultDotTheme.module.css';
-import './Appearance/default/themes/green/greenDefaultDotTheme.module.css';
-import './Appearance/default/themes/orange/orangeDefaultDotTheme.module.css';
-import './Appearance/default/themes/red/redDefaultDotTheme.module.css';
-import './Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css';
-import './Appearance/default/mode/dotDefaultMode.module.css';
-/* dot pkg - dark mode & themes */
-import './Appearance/dark/themes/blue/blueDarkDotTheme.module.css';
-import './Appearance/dark/themes/green/greenDarkDotTheme.module.css';
-import './Appearance/dark/themes/orange/orangeDarkDotTheme.module.css';
-import './Appearance/dark/themes/red/redDarkDotTheme.module.css';
-import './Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css';
-import './Appearance/dark/mode/dotDarkMode.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',
-  _default: 'Asia/Kolkata'
-});
-
-export default class Provider extends React.Component {
-  constructor(props) {
-    super(props);
-    setGlobalIdPrefix('ZD');
-    setInitialZIndex('10');
-    this.state = {
-      appearanceName: 'default',
-      themeName: 'blue'
-    };
-
-    this.switchMode = this.switchMode.bind(this);
-    this.setTheme = this.setTheme.bind(this);
-  }
-
-  switchMode() {
-    let appearanceName = this.state.appearanceName;
-    if (appearanceName == 'default') {
-      this.setState({
-        appearanceName: 'dark'
-      });
-    } else {
-      this.setState({
-        appearanceName: 'default'
-      });
-    }
-  }
-
-  setTheme(theme) {
-    this.setState({
-      themeName: theme
-    });
-  }
-
-  render() {
-    let { appearanceName, themeName } = this.state;
-    let themeClass = {
-      width: '20px',
-      height: '20px',
-      borderRadius: '3px',
-      display: 'flex',
-      border: '1px solid #ccc',
-      margin: '0 5px',
-      cursor: 'pointer',
-      backgroundColor: '#0a73eb'
-    };
-    let green = {
-      backgroundColor: '#26a942'
-    };
-    let red = {
-      backgroundColor: '#de3535'
-    };
-    let orange = {
-      backgroundColor: '#e57717'
-    };
-    let yellow = {
-      backgroundColor: '#e8b923'
-    };
-
-    return (
-      <I18NProvider
-        i18n={i18n}
-        timeZone='Asia/Kolkata'
-        datePattern={''}
-        dateTimeFormat={''}
-        timeFormat={''}
-        direction={'ltr'}
-      >
-        <AppContainer
-          customProps={{ExtraProps:{'data-mode':appearanceName,'data-theme':themeName}}}
-        >
-          <Container scroll='vertical'>{this.props.children}</Container>
-          <div
-            style={{
-              position: 'fixed',
-              bottom: '0',
-              backgroundColor: '#272727',
-              padding: '10px',
-              borderRadius: '15px 15px 0 0',
-              minWidth: '100px',
-              textAlign: 'center',
-              left: '50%',
-              transform: 'translate(-50%)',
-              boxShadow: '0 0 3px #000',
-              fontSize: '12px',
-              zIndex: '1000',
-              display: 'flex',
-              alignItems: 'center'
-            }}
-          >
-            <div>
-              <Switch
-                id='switchMode'
-                text='Light/Night Mode'
-                labelSize='small'
-                onChange={this.switchMode}
-                checked={appearanceName == 'dark'}
-              />
-            </div>
-            <div style={{display: 'flex'}}>
-              <span 
-                title='Blue Theme' 
-                style={themeClass}
-                onClick={() => this.setTheme('blue')}
-              ></span>
-              <span 
-                title='Green Theme' 
-                style={Object.assign({}, themeClass, green)}
-                onClick={() => this.setTheme('green')}
-              ></span>
-              <span 
-                title='Red Theme' 
-                style={Object.assign({}, themeClass, red)}
-                onClick={() => this.setTheme('red')}
-              ></span>
-              <span 
-                title='Orange Theme' 
-                style={Object.assign({}, themeClass, orange)}
-                onClick={() => this.setTheme('orange')}
-              ></span>
-              <span 
-                title='Yellow Theme' 
-                style={Object.assign({}, themeClass, yellow)}
-                onClick={() => this.setTheme('yellow')}
-              ></span>
-            </div>
-          </div>
-        </AppContainer>
-      </I18NProvider>
-    );
-  }
-}
+import React from 'react';
+import { I18NProvider } from '@zohodesk/i18n';
+import { Container } from '@zohodesk/components/lib/Layout';
+import AppContainer from '@zohodesk/components/lib/AppContainer/AppContainer';
+import LibraryContext from '@zohodesk/components/lib/Provider/LibraryContextInit';
+import datetime from '@zohodesk/datetimejs';
+import i18n from './i18n';
+/* component pkg - default mode & themes */
+import '@zohodesk/components/lib/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/mode/defaultMode.module.css';
+/* component pkg - dark mode & themes */
+import '@zohodesk/components/lib/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/mode/darkMode.module.css';
+/* svg pkg - default mode & themes */
+import '@zohodesk/svg/lib/svg/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/default/mode/defaultEmptyStates.module.css';
+/* svg pkg - dark mode & themes */
+import '@zohodesk/svg/lib/svg/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/dark/mode/darkEmptyStates.module.css';
+import { setGlobalIdPrefix } from '@zohodesk/components/lib/Provider/IdProvider';
+import { setInitialZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import Switch from '@zohodesk/components/lib/Switch/Switch';
+/* dot pkg - default mode & themes */
+import './Appearance/default/themes/blue/blueDefaultDotTheme.module.css';
+import './Appearance/default/themes/green/greenDefaultDotTheme.module.css';
+import './Appearance/default/themes/orange/orangeDefaultDotTheme.module.css';
+import './Appearance/default/themes/red/redDefaultDotTheme.module.css';
+import './Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css';
+import './Appearance/default/mode/dotDefaultMode.module.css';
+/* dot pkg - dark mode & themes */
+import './Appearance/dark/themes/blue/blueDarkDotTheme.module.css';
+import './Appearance/dark/themes/green/greenDarkDotTheme.module.css';
+import './Appearance/dark/themes/orange/orangeDarkDotTheme.module.css';
+import './Appearance/dark/themes/red/redDarkDotTheme.module.css';
+import './Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css';
+import './Appearance/dark/mode/dotDarkMode.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',
+  _default: 'Asia/Kolkata'
+});
+
+export default class Provider extends React.Component {
+  constructor(props) {
+    super(props);
+    setGlobalIdPrefix('ZD');
+    setInitialZIndex('10');
+    this.state = {
+      appearanceName: 'default',
+      themeName: 'blue'
+    };
+
+    this.switchMode = this.switchMode.bind(this);
+    this.setTheme = this.setTheme.bind(this);
+  }
+
+  switchMode() {
+    let appearanceName = this.state.appearanceName;
+    if (appearanceName == 'default') {
+      this.setState({
+        appearanceName: 'dark'
+      });
+    } else {
+      this.setState({
+        appearanceName: 'default'
+      });
+    }
+  }
+
+  setTheme(theme) {
+    this.setState({
+      themeName: theme
+    });
+  }
+
+  render() {
+    let { appearanceName, themeName } = this.state;
+    let themeClass = {
+      width: '20px',
+      height: '20px',
+      borderRadius: '3px',
+      display: 'flex',
+      border: '1px solid #ccc',
+      margin: '0 5px',
+      cursor: 'pointer',
+      backgroundColor: '#0a73eb'
+    };
+    let green = {
+      backgroundColor: '#26a942'
+    };
+    let red = {
+      backgroundColor: '#de3535'
+    };
+    let orange = {
+      backgroundColor: '#e57717'
+    };
+    let yellow = {
+      backgroundColor: '#e8b923'
+    };
+
+    return (
+      <I18NProvider
+        i18n={i18n}
+        timeZone='Asia/Kolkata'
+        datePattern={''}
+        dateTimeFormat={''}
+        timeFormat={''}
+        direction={'ltr'}
+      >
+             <LibraryContext.Provider value={{isReducedMotion:false,direction:'ltr'}}>
+        <AppContainer
+          customProps={{ExtraProps:{'data-mode':appearanceName,'data-theme':themeName}}}
+        >
+          <Container scroll='vertical'>{this.props.children}</Container>
+          <div
+            style={{
+              position: 'fixed',
+              bottom: '0',
+              backgroundColor: '#272727',
+              padding: '10px',
+              borderRadius: '15px 15px 0 0',
+              minWidth: '100px',
+              textAlign: 'center',
+              left: '50%',
+              transform: 'translate(-50%)',
+              boxShadow: '0 0 3px #000',
+              fontSize: '12px',
+              zIndex: '1000',
+              display: 'flex',
+              alignItems: 'center'
+            }}
+          >
+            <div>
+              <Switch
+                id='switchMode'
+                text='Light/Night Mode'
+                labelSize='small'
+                onChange={this.switchMode}
+                checked={appearanceName == 'dark'}
+              />
+            </div>
+            <div style={{display: 'flex'}}>
+              <span 
+                title='Blue Theme' 
+                style={themeClass}
+                onClick={() => this.setTheme('blue')}
+              ></span>
+              <span 
+                title='Green Theme' 
+                style={Object.assign({}, themeClass, green)}
+                onClick={() => this.setTheme('green')}
+              ></span>
+              <span 
+                title='Red Theme' 
+                style={Object.assign({}, themeClass, red)}
+                onClick={() => this.setTheme('red')}
+              ></span>
+              <span 
+                title='Orange Theme' 
+                style={Object.assign({}, themeClass, orange)}
+                onClick={() => this.setTheme('orange')}
+              ></span>
+              <span 
+                title='Yellow Theme' 
+                style={Object.assign({}, themeClass, yellow)}
+                onClick={() => this.setTheme('yellow')}
+              ></span>
+            </div>
+          </div>
+        </AppContainer>
+        </LibraryContext.Provider>
+      </I18NProvider>
+    );
+  }
+}