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

package/src/version2/alertIcons/docs/AlertIcons__default.docs.js

@@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import AlertIcons from '../AlertIcons';
+
+export default class AlertIcons__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <div>
+          <h2>Info Icon: </h2>
+          <div style={{ display: 'inlineBlock', width: '50px', height: '50px' }}>
+            <AlertIcons
+              type='info'
+            />
+          </div>
+          <div style={{ display: 'inlineBlock', width: '50px', height: '50px' }}>
+            <AlertIcons
+              type='info'
+              variant='secondary'
+            />
+          </div>
+        </div>
+        <div>
+          <h2>Error Icon</h2>
+          <div style={{ display: 'inlineBlock', width: '50px', height: '50px' }}>
+            <AlertIcons
+              type='error'
+            />
+
+          </div>
+          <div style={{ display: 'inlineBlock', width: '50px', height: '50px' }}>
+            <AlertIcons
+              type='error'
+              variant='secondary'
+            />
+          </div>
+        </div>
+        <div>
+          <h2>Danger Icon</h2>
+          <div style={{ display: 'inlineBlock', width: '50px', height: '50px' }}>
+            <AlertIcons
+              type='danger'
+            />
+
+          </div>
+          <div style={{ display: 'inlineBlock', width: '50px', height: '50px' }}>
+            <AlertIcons
+              type='danger'
+              variant='secondary'
+            />
+          </div>
+        </div>
+        <div>
+          <h2>Notification Icon</h2>
+          <div style={{ display: 'inlineBlock', width: '50px', height: '50px' }}>
+            <AlertIcons
+              type='notification'
+            />
+
+          </div>
+          <div style={{ display: 'inlineBlock', width: '50px', height: '50px' }}>
+            <AlertIcons
+              type='notification'
+              variant='secondary'
+            />
+          </div>
+        </div>
+        <div>
+          <h2>Warning Icon</h2>
+          <div style={{ display: 'inlineBlock', width: '50px', height: '50px' }}>
+            <AlertIcons
+              type='warning'
+            />
+
+          </div>
+          <div style={{ display: 'inlineBlock', width: '50px', height: '50px' }}>
+            <AlertIcons
+              type='warning'
+              variant='secondary'
+            />
+          </div>
+        </div>
+        <div>
+          <h2>Success Icon</h2>
+          <div style={{ display: 'inlineBlock', width: '50px', height: '50px' }}>
+            <AlertIcons
+              type='success'
+            />
+          </div>
+          <div style={{ display: 'inlineBlock', width: '50px', height: '50px' }}>
+            <AlertIcons
+              type='success'
+              variant='secondary'
+            />
+          </div>
+        </div>
+        <div>
+          <h2>Alarm Icon</h2>
+          <div style={{ display: 'inlineBlock', width: '50px', height: '50px' }}>
+            <AlertIcons
+              type='alarm'
+            />
+          </div>
+          <div style={{ display: 'inlineBlock', width: '50px', height: '50px' }}>
+            <AlertIcons
+              type='alarm'
+              variant='secondary'
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  AlertIcons__default.docs = {
+    componentGroup: 'AlertIcons',
+    folderName: 'Alert'
+  };
+}

package/src/version2/errorstate/Inconvenience/Inconvenience.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container } from '@zohodesk/components/lib/Layout';
+import CommonEmptyState from './../../../emptystate/CommonEmptyState/CommonEmptyState';
+import ErrorInconvenience from '@zohodesk/svg/lib/svg/ErrorInconvenience';
+import Button from '@zohodesk/components/lib/Button/Button';
+import style from './../V2_ErrorStates.module.css';
+
+export default class Inconvenience extends React.Component {
+  constructor(props) {
+    super(props);
+    this.errorInconvenience = this.errorInconvenience.bind(this);
+  }
+  
+  errorInconvenience() {
+    return <ErrorInconvenience className={style.errorSvg} />;
+  }
+
+  render() {
+    let {
+      title,
+      description,
+      isButtonNeeded,
+      className,
+      isFluid,
+      dataId,
+      buttonText,
+      onButtonClick,
+      urlText,
+      url,
+      onClick,
+      urlTarget,
+      size
+    } = this.props;
+    return (
+      <Container scroll='vertical' className={`${style.container} ${style[size]}`}>
+        <CommonEmptyState
+          title={title}
+          description={description}
+          getEmptyState={this.errorInconvenience}
+          className={`${style.errorState} ${className}`}
+          isFluid={isFluid}
+          dataId={dataId}
+          linkUrl={url}
+          linkText={urlText}
+          onUrlClick={onClick}
+          linkTarget={urlTarget}
+          customClass={{
+            titleClass: style.title,
+            descriptionClass: style.desc
+          }}
+        >
+          {isButtonNeeded ?
+            <Button 
+              palette='primaryFilled' 
+              text={buttonText}
+              customClass={{
+                customButton: style.errorBtn
+              }}
+              onClick={onButtonClick}
+            />
+          : null}
+        </CommonEmptyState>
+      </Container>
+    );
+  }
+}
+
+Inconvenience.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  isButtonNeeded: PropTypes.bool,
+  className: PropTypes.string,
+  isFluid: PropTypes.bool,
+  dataId: PropTypes.string,
+  buttonText: PropTypes.string,
+  onButtonClick: PropTypes.func,
+  urlText: PropTypes.string,
+  url: PropTypes.string,
+  onClick: PropTypes.func,
+  urlTarget: PropTypes.oneOf(['_blank', '_self']),
+  size: PropTypes.oneOf(['large', 'medium', 'small'])
+};
+
+Inconvenience.defaultProps = {
+  dataId: 'inconvenience',
+  isButtonNeeded: false,
+  className: '',
+  isFluid: true,
+  urlTarget: '_self',
+  size: 'large'
+};
+
+if (__DOCS__) {
+  Inconvenience.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/src/version2/errorstate/Inconvenience/docs/Inconvenience__default.docs.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Inconvenience from '../Inconvenience';
+
+export default class Inconvenience__default extends React.Component {
+  render() {
+    return (
+      <Inconvenience
+        title='Sorry for the Inconvenience.'
+        description='One of the scripts for this page has caused an error. Try reloading this page'
+      />
+    );
+  }
+}
+if (__DOCS__) {
+  Inconvenience__default.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/src/version2/errorstate/OopsSomethingMiss/OopsSomethingMiss.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container } from '@zohodesk/components/lib/Layout';
+import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
+import ErrorOopsSomethingMiss from '@zohodesk/svg/lib/svg/ErrorOopsSomethingMiss';
+import Button from '@zohodesk/components/lib/Button/Button';
+import style from './../V2_ErrorStates.module.css';
+
+export default class OopsSomethingMiss extends React.Component {
+  constructor(props) {
+    super(props);
+    this.errorOopsSomethingMiss = this.errorOopsSomethingMiss.bind(this);
+  }
+  
+  errorOopsSomethingMiss() {
+    return <ErrorOopsSomethingMiss className={style.errorSvg} />;
+  }
+
+  render() {
+    let {
+      title,
+      description,
+      isButtonNeeded,
+      className,
+      isFluid,
+      dataId,
+      buttonText,
+      onButtonClick,
+      urlText,
+      url,
+      onClick,
+      urlTarget,
+      size
+    } = this.props;
+    return (
+      <Container scroll='vertical' className={`${style.container} ${style[size]}`}>
+        <CommonEmptyState
+          title={title}
+          description={description}
+          getEmptyState={this.errorOopsSomethingMiss}
+          className={`${style.errorState} ${className}`}
+          isFluid={isFluid}
+          dataId={dataId}
+          linkUrl={url}
+          linkText={urlText}
+          onUrlClick={onClick}
+          linkTarget={urlTarget}
+          customClass={{
+            titleClass: style.title,
+            descriptionClass: style.desc
+          }}
+        >
+          {isButtonNeeded ?
+            <Button 
+              palette='secondary' 
+              text={buttonText}
+              customClass={{
+                customButton: style.errorBtn
+              }}
+              onClick={onButtonClick}
+              dataId='goBack'
+            />
+          : null}
+        </CommonEmptyState>
+      </Container>
+    );
+  }
+}
+
+OopsSomethingMiss.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  isButtonNeeded: PropTypes.bool,
+  className: PropTypes.string,
+  isFluid: PropTypes.bool,
+  dataId: PropTypes.string,
+  buttonText: PropTypes.string,
+  onButtonClick: PropTypes.func,
+  urlText: PropTypes.string,
+  url: PropTypes.string,
+  onClick: PropTypes.func,
+  urlTarget: PropTypes.oneOf(['_blank', '_self']),
+  size: PropTypes.oneOf(['large', 'medium', 'small'])
+};
+
+OopsSomethingMiss.defaultProps = {
+  dataId: 'oopssomethingmiss',
+  isButtonNeeded: false,
+  className: '',
+  isFluid: true,
+  urlTarget: '_self',
+  size: 'large'
+};
+
+if (__DOCS__) {
+  OopsSomethingMiss.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/src/version2/errorstate/OopsSomethingMiss/docs/OopsSomethingMiss__default.docs.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import OopsSomethingMiss from '../OopsSomethingMiss';
+
+export default class OopsSomethingMiss__default extends React.Component {
+  render() {
+    return (
+      <OopsSomethingMiss
+        title="Oops, Something's a miss!"
+        description='The record you were trying to access could not be found. It may be due to another user deleting it.'
+        isButtonNeeded
+        buttonText='Go Back'
+      />
+    );
+  }
+}
+if (__DOCS__) {
+  OopsSomethingMiss__default.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/src/version2/errorstate/UnableToProcessRequest/UnableToProcessRequest.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container } from '@zohodesk/components/lib/Layout';
+import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
+import ErrorUnableToProcessRequest from '@zohodesk/svg/lib/svg/ErrorUnableToProcessRequest';
+import Button from '@zohodesk/components/lib/Button/Button';
+import style from './../V2_ErrorStates.module.css';
+
+export default class UnableToProcessRequest extends React.Component {
+  constructor(props) {
+    super(props);
+    this.errorUnableToProcess = this.errorUnableToProcess.bind(this);
+  }
+  
+  errorUnableToProcess() {
+    return <ErrorUnableToProcessRequest className={style.errorSvg} />;
+  }
+
+  render() {
+    let {
+      title,
+      description,
+      isButtonNeeded,
+      className,
+      isFluid,
+      dataId,
+      buttonText,
+      onButtonClick,
+      urlText,
+      url,
+      onClick,
+      urlTarget,
+      size
+    } = this.props;
+    return (
+      <Container scroll='vertical' className={`${style.container} ${style[size]}`}>
+        <CommonEmptyState
+          title={title}
+          description={description}
+          getEmptyState={this.errorUnableToProcess}
+          className={`${style.errorState} ${className}`}
+          isFluid={isFluid}
+          dataId={dataId}
+          linkUrl={url}
+          linkText={urlText}
+          onUrlClick={onClick}
+          linkTarget={urlTarget}
+          customClass={{
+            titleClass: style.title,
+            descriptionClass: style.desc
+          }}
+        >
+          {isButtonNeeded ?
+            <Button 
+              palette='primaryFilled' 
+              text={buttonText}
+              customClass={{
+                customButton: style.errorBtn
+              }}
+              onClick={onButtonClick}
+            />
+          : null}
+        </CommonEmptyState>
+      </Container>
+    );
+  }
+}
+
+UnableToProcessRequest.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  isButtonNeeded: PropTypes.bool,
+  className: PropTypes.string,
+  isFluid: PropTypes.bool,
+  dataId: PropTypes.string,
+  buttonText: PropTypes.string,
+  onButtonClick: PropTypes.func,
+  urlText: PropTypes.string,
+  url: PropTypes.string,
+  onClick: PropTypes.func,
+  urlTarget: PropTypes.oneOf(['_blank', '_self']),
+  size: PropTypes.oneOf(['large', 'medium', 'small'])
+};
+
+UnableToProcessRequest.defaultProps = {
+  dataId: 'unabletoprocessrequest',
+  isButtonNeeded: false,
+  className: '',
+  isFluid: true,
+  urlTarget: '_self',
+  size: 'large'
+};
+
+if (__DOCS__) {
+  UnableToProcessRequest.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/src/version2/errorstate/UnableToProcessRequest/docs/UnableToProcessRequest__default.docs.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import UnableToProcessRequest from '../UnableToProcessRequest';
+
+export default class UnableToProcessRequest__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.clickButton = this.clickButton.bind(this);
+  }
+
+  clickButton() {
+    console.log('Button clicked!')
+  }
+
+  render() {
+    return (
+      <UnableToProcessRequest
+        title='Something went wrong.'
+        description="We can't get that information right now. Please try again later"
+        isButtonNeeded
+        buttonText='Go to Home Page'
+        onButtonClick={this.clickButton}
+      />
+    );
+  }
+}
+if (__DOCS__) {
+  UnableToProcessRequest__default.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/src/version2/errorstate/UnauthorizedLogin/UnauthorizedLogin.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container } from '@zohodesk/components/lib/Layout';
+import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
+import ErrorUnauthorizedLogin from '@zohodesk/svg/lib/svg/ErrorUnauthorizedLogin';
+import Button from '@zohodesk/components/lib/Button/Button';
+import style from './../V2_ErrorStates.module.css';
+
+export default class UnauthorizedLogin extends React.Component {
+  constructor(props) {
+    super(props);
+    this.errorUnauthorizedLogin = this.errorUnauthorizedLogin.bind(this);
+  }
+  
+  errorUnauthorizedLogin() {
+    return <ErrorUnauthorizedLogin className={style.errorSvg} />;
+  }
+
+  render() {
+    let {
+      title,
+      description,
+      isButtonNeeded,
+      className,
+      isFluid,
+      dataId,
+      buttonText,
+      buttonPalette,
+      onButtonClick,
+      urlText,
+      url,
+      onClick,
+      urlTarget,
+      size
+    } = this.props;
+    return (
+      <Container scroll='vertical' className={`${style.container} ${style[size]}`}>
+        <CommonEmptyState
+          title={title}
+          description={description}
+          getEmptyState={this.errorUnauthorizedLogin}
+          className={`${style.errorState} ${className}`}
+          isFluid={isFluid}
+          dataId={dataId}
+          linkUrl={url}
+          linkText={urlText}
+          onUrlClick={onClick}
+          linkTarget={urlTarget}
+          customClass={{
+            titleClass: style.title,
+            descriptionClass: style.desc
+          }}
+        >
+          {isButtonNeeded ?
+            <Button 
+              palette={buttonPalette}
+              text={buttonText}
+              customClass={{
+                customButton: style.errorBtn
+              }}
+              onClick={onButtonClick}
+              dataId={`${dataId}_button`}
+            />
+          : null}
+        </CommonEmptyState>
+      </Container>
+    );
+  }
+}
+
+UnauthorizedLogin.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  isButtonNeeded: PropTypes.bool,
+  className: PropTypes.string,
+  isFluid: PropTypes.bool,
+  dataId: PropTypes.string,
+  buttonText: PropTypes.string,
+  onButtonClick: PropTypes.func,
+  urlText: PropTypes.string,
+  url: PropTypes.string,
+  onClick: PropTypes.func,
+  urlTarget: PropTypes.oneOf(['_blank', '_self']),
+  buttonPalette: PropTypes.oneOf(['primaryFilled', 'secondary']),
+  size: PropTypes.oneOf(['large', 'medium', 'small'])
+};
+
+UnauthorizedLogin.defaultProps = {
+  dataId: 'permissionPlay',
+  isButtonNeeded: false,
+  className: '',
+  isFluid: true,
+  urlTarget: '_self',
+  buttonPalette: 'primaryFilled',
+  size: 'large'
+};
+
+if (__DOCS__) {
+  UnauthorizedLogin.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/src/version2/errorstate/UnauthorizedLogin/docs/UnauthorizedLogin__default.docs.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import UnauthorizedLogin from '../UnauthorizedLogin';
+
+export default class UnauthorizedLogin__default extends React.Component {
+  render() {
+    return (
+      <UnauthorizedLogin
+        title='Permission denied.'
+        description='You do not have sufficient permissions to perform this operation. Contact your administrator.'
+      />
+    );
+  }
+}
+if (__DOCS__) {
+  UnauthorizedLogin__default.docs = {
+    componentGroup: 'errorStates'
+  };
+}