@zohodesk/dot 1.0.0-temp-64 → 1.0.0-temp-65

package/src/NewStar/NewStar.module.css

@@ -0,0 +1,73 @@
+.star {
+  position: absolute;
+
+  height: var(--zd_size20);
+  width: var(--zd_size21);
+}
+.topLeft {
+  transform: translate(-45%, -45%);
+  left: 0;
+  top: 0;
+}
+.topRight {
+  transform: translate(45%, -45%);
+  right: 0;
+  top: 0;
+}
+.bottomLeft {
+  transform: translate(-45%, 45%);
+  left: 0;
+  bottom: 0;
+}
+.bottomRight {
+  transform: translate(45%, 45%);
+  right: 0;
+  bottom: 0;
+}
+.stars {
+  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
+}
+.green::before {
+  color: var(--zdt_newstar_green_text);
+}
+.yellow::before {
+  color: var(--zdt_newstar_yellow_text);
+}
+.blue::before {
+  color: var(--zdt_newstar_blue_text);
+}
+.starOne {
+  composes: stars;
+}
+.starTwo {
+  composes: stars;
+  animation-delay: 0.5s;
+}
+.starThree {
+  composes: stars;
+  animation-delay: 1s;
+}
+
+@keyframes twinkle {
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.6;
+  }
+}
+
+@keyframes star-scale {
+  0% {
+    transform: perspective(1px) scale(0.7);
+  }
+  50% {
+    transform: perspective(1px) scale(1, 1);
+  }
+  100% {
+    transform: perspective(1px) scale(0.7);
+  }
+}

package/src/NewStar/docs/NewStar__default.docs.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import NewStar from '../NewStar';
+export default class NewStar__default extends React.Component {
+  render() {
+    let style = {
+      width: '50px',
+      height: '50px',
+      margin: '30px',
+      position: 'relative'
+    };
+    return (
+      <div>
+        <div style={style}>
+          <NewStar palette='green' position='topLeft' />
+          <NewStar palette='green' position='topRight' />
+          <NewStar palette='green' position='bottomLeft' />
+          <NewStar palette='green' position='bottomRight' />
+        </div>
+        <div style={style}>
+          <NewStar palette='blue' position='topLeft' />
+          <NewStar palette='blue' position='topRight' />
+          <NewStar palette='blue' position='bottomLeft' />
+          <NewStar palette='blue' position='bottomRight' />
+        </div>
+        <div style={style}>
+          <NewStar palette='yellow' position='topLeft' />
+          <NewStar palette='yellow' position='topRight' />
+          <NewStar palette='yellow' position='bottomLeft' />
+          <NewStar palette='yellow' position='bottomRight' />
+        </div>
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  NewStar__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/src/PlusIcon/PlusIcon.js

@@ -0,0 +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'
+  };
+}

package/src/PlusIcon/PlusIcon.module.css

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

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

@@ -0,0 +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'
+  };
+}

package/src/Provider.js

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