@zohodesk/dot 1.0.0-temp-38 → 1.0.0-temp-39

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

@@ -1,102 +1,101 @@
-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'
-  };
-}
+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_UnauthorizedLogin.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}
+            />
+          : 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: 'unauthorizedlogin',
+  isButtonNeeded: false,
+  className: '',
+  isFluid: true,
+  urlTarget: '_self',
+  buttonPalette: 'primaryFilled',
+  size: 'large'
+};
+
+if (__DOCS__) {
+  UnauthorizedLogin.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/src/version2/errorstate/UnauthorizedLogin/V2_UnauthorizedLogin.module.css

@@ -0,0 +1,46 @@
+.container {
+  padding-bottom: var(--zd_size30);
+}
+.errorBtn {
+  margin-top: var(--zd_size15);
+}
+.title {
+  font-family: var(--zd_bold);
+}
+.desc {
+  line-height: var(--zd_size22);
+}
+.large .errorState {
+  width: var(--zd_size450);
+  margin-top: var(--zd_size40);
+}
+.large .errorSvg {
+  width: var(--zd_size350);
+  height: var(--zd_size350);
+}
+.medium .errorState {
+  width: var(--zd_size350);
+  margin-top: var(--zd_size30);
+}
+.medium .errorSvg {
+  width: var(--zd_size250);
+  height: var(--zd_size250);
+}
+.medium .title {
+  font-size: var(--zd_font_size18);
+}
+.medium .desc,
+.small .desc {
+  font-size: var(--zd_font_size13)
+}
+.small .errorState {
+  width: var(--zd_size280);
+  margin-top: var(--zd_size20);
+}
+.small .errorSvg {
+  width: var(--zd_size220);
+  height: var(--zd_size220);
+}
+.small .title {
+  font-size: var(--zd_font_size16);
+}

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

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

package/src/version2/errorstate/UrlNotFound/UrlNotFound.js

@@ -1,98 +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 ErrorUrlNotFound from '@zohodesk/svg/lib/svg/ErrorUrlNotFound';
-import Button from '@zohodesk/components/lib/Button/Button';
-import style from './../V2_ErrorStates.module.css';
-
-export default class UrlNotFound extends React.Component {
-  constructor(props) {
-    super(props);
-    this.errorUrlNotFound = this.errorUrlNotFound.bind(this);
-  }
-  
-  errorUrlNotFound() {
-    return <ErrorUrlNotFound 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.errorUrlNotFound}
-          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>
-    );
-  }
-}
-
-UrlNotFound.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'])
-};
-
-UrlNotFound.defaultProps = {
-  dataId: 'urlnotfound',
-  isButtonNeeded: false,
-  className: '',
-  isFluid: true,
-  urlTarget: '_self',
-  size: 'large'
-};
-
-if (__DOCS__) {
-  UrlNotFound.docs = {
-    componentGroup: 'errorStates'
-  };
-}
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container } from '@zohodesk/components/lib/Layout';
+import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
+import ErrorUrlNotFound from '@zohodesk/svg/lib/svg/ErrorUrlNotFound';
+import Button from '@zohodesk/components/lib/Button/Button';
+import style from './V2_UrlNotFound.module.css';
+
+export default class UrlNotFound extends React.Component {
+  constructor(props) {
+    super(props);
+    this.errorUrlNotFound = this.errorUrlNotFound.bind(this);
+  }
+  
+  errorUrlNotFound() {
+    return <ErrorUrlNotFound 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.errorUrlNotFound}
+          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>
+    );
+  }
+}
+
+UrlNotFound.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'])
+};
+
+UrlNotFound.defaultProps = {
+  dataId: 'urlnotfound',
+  isButtonNeeded: false,
+  className: '',
+  isFluid: true,
+  urlTarget: '_self',
+  size: 'large'
+};
+
+if (__DOCS__) {
+  UrlNotFound.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/src/version2/errorstate/UrlNotFound/V2_UrlNotFound.module.css

@@ -0,0 +1,46 @@
+.container {
+  padding-bottom: var(--zd_size30);
+}
+.errorBtn {
+  margin-top: var(--zd_size15);
+}
+.title {
+  font-family: var(--zd_bold);
+}
+.desc {
+  line-height: var(--zd_size22);
+}
+.large .errorState {
+  width: var(--zd_size450);
+  margin-top: var(--zd_size40);
+}
+.large .errorSvg {
+  width: var(--zd_size350);
+  height: var(--zd_size350);
+}
+.medium .errorState {
+  width: var(--zd_size350);
+  margin-top: var(--zd_size30);
+}
+.medium .errorSvg {
+  width: var(--zd_size250);
+  height: var(--zd_size250);
+}
+.medium .title {
+  font-size: var(--zd_font_size18);
+}
+.medium .desc,
+.small .desc {
+  font-size: var(--zd_font_size13)
+}
+.small .errorState {
+  width: var(--zd_size280);
+  margin-top: var(--zd_size20);
+}
+.small .errorSvg {
+  width: var(--zd_size220);
+  height: var(--zd_size220);
+}
+.small .title {
+  font-size: var(--zd_font_size16);
+}

package/src/version2/errorstate/UrlNotFound/docs/UrlNotFound__default.docs.js

@@ -1,21 +1,21 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import UrlNotFound from '../UrlNotFound';
-
-export default class UrlNotFound__default extends React.Component {
-  render() {
-    return (
-      <UrlNotFound
-        title='Request URL not found.'
-        description='Looks like nothing was found on this URL. Please double-check that the URL is correct.'
-        isButtonNeeded
-        buttonText='Go to Home Page'
-      />
-    );
-  }
-}
-if (__DOCS__) {
-  UrlNotFound__default.docs = {
-    componentGroup: 'errorStates'
-  };
-}
+import React from 'react';
+import PropTypes from 'prop-types';
+import UrlNotFound from '../UrlNotFound';
+
+export default class UrlNotFound__default extends React.Component {
+  render() {
+    return (
+      <UrlNotFound
+        title='Request URL not found.'
+        description='Looks like nothing was found on this URL. Please double-check that the URL is correct.'
+        isButtonNeeded
+        buttonText='Go to Home Page'
+      />
+    );
+  }
+}
+if (__DOCS__) {
+  UrlNotFound__default.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/src/version2/errorstate/WillBeRightBack/V2_WillBeRightBack.module.css

@@ -0,0 +1,46 @@
+.container {
+  padding-bottom: var(--zd_size30);
+}
+.errorBtn {
+  margin-top: var(--zd_size15);
+}
+.title {
+  font-family: var(--zd_bold);
+}
+.desc {
+  line-height: var(--zd_size22);
+}
+.large .errorState {
+  width: var(--zd_size450);
+  margin-top: var(--zd_size40);
+}
+.large .errorSvg {
+  width: var(--zd_size350);
+  height: var(--zd_size350);
+}
+.medium .errorState {
+  width: var(--zd_size350);
+  margin-top: var(--zd_size30);
+}
+.medium .errorSvg {
+  width: var(--zd_size250);
+  height: var(--zd_size250);
+}
+.medium .title {
+  font-size: var(--zd_font_size18);
+}
+.medium .desc,
+.small .desc {
+  font-size: var(--zd_font_size13)
+}
+.small .errorState {
+  width: var(--zd_size280);
+  margin-top: var(--zd_size20);
+}
+.small .errorSvg {
+  width: var(--zd_size220);
+  height: var(--zd_size220);
+}
+.small .title {
+  font-size: var(--zd_font_size16);
+}