@zohodesk/dot 1.0.0-beta.20 → 1.0.0-beta.203

package/src/Drawer/docs/Drawer__default.docs.js

@@ -6,10 +6,12 @@ export default class Drawer__default extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isActive: true
+      isActive: true,
+      size: 'xsmall'
     };
 
     this.onClose = this.onClose.bind(this);
+    this.getFooter = this.getFooter.bind();
   }
 
   onClose() {
@@ -17,18 +19,58 @@ export default class Drawer__default extends React.Component {
       isActive: false
     });
   }
+  changeSize(drawersize) {
+    this.setState({
+      size: drawersize
+    });
+  }
+  getFooter() {
+    return <p>getChildren</p>;
+  }
 
   render() {
-    let { isActive } = this.state;
+    let { isActive, size } = this.state;
     return (
-      <Drawer isActive={isActive} needFreeze paddingSize='small'>
+      <Drawer
+        isActive={isActive}
+        needFreeze={false}
+        paddingSize='small'
+        size={size}
+      >
         <Header
           title='Add Component'
           onClose={this.onClose}
-          iconName='zdDuetimeQueueNew'
+          iconName='ZD-zdDuetimeQueueNew'
           iconSize='15'
-        />
-        <Content className={style.headerTest}>Content</Content>
+          align='column'
+          getChildren={this.getFooter}
+        >
+          <span>children</span>
+        </Header>
+        <Content className={style.headerTest}>
+          <Button text='small' onClick={this.changeSize.bind(this, 'small')} />
+          <Button
+            text='xsmall'
+            onClick={this.changeSize.bind(this, 'xsmall')}
+          />
+          <Button
+            text='medium'
+            onClick={this.changeSize.bind(this, 'medium')}
+          />
+          <Button
+            text='xmedium'
+            onClick={this.changeSize.bind(this, 'xmedium')}
+          />
+          <Button text='large' onClick={this.changeSize.bind(this, 'large')} />
+          <Button
+            text='xlarge'
+            onClick={this.changeSize.bind(this, 'xlarge')}
+          />
+          <Button
+            text='xxlarge'
+            onClick={this.changeSize.bind(this, 'xxlarge')}
+          />
+        </Content>
         <Footer>
           <Button text='Save' palette='primaryFilled' />
           <Button text='Cancel' palette='secondary' />
@@ -39,7 +81,6 @@ export default class Drawer__default extends React.Component {
 }
 if (__DOCS__) {
   Drawer__default.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
+    componentGroup: 'Template'
   };
 }

package/src/Drawer/docs/Drawer__multiDrawer.docs.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import Drawer, { Header, Content } from '../Drawer';
+import Button from '@zohodesk/components/lib/Button/Button';
+import style from '../Drawer.module.css';
+
+export default class Drawer__multiDrawer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isActive: true,
+      subDrawerActive: true,
+      size: 'xsmall'
+    };
+
+    this.onClose = this.onClose.bind(this);
+    this.openSecondDrawer = this.openSecondDrawer.bind(this);
+    this.closeDrawers = this.closeDrawers.bind(this);
+    this.closeSubDrawer = this.closeSubDrawer.bind(this);
+    this.subDrawerChildren = this.subDrawerChildren.bind(this);
+  }
+
+  onClose() {
+    this.setState({
+      isActive: false
+    });
+  }
+
+  openSecondDrawer() {
+    this.setState({
+      subDrawerActive: true
+    });
+  }
+
+  closeDrawers() {
+    this.setState({
+      isActive: false
+    });
+  }
+
+  closeSubDrawer() {
+    this.setState({
+      subDrawerActive: false
+    });
+  }
+  changeSize(drawersize) {
+    this.setState({
+      size: drawersize
+    });
+  }
+
+  subDrawerChildren() {
+    return (
+      <React.Fragment>
+        <Header title='Second Drawer' onClose={this.closeSubDrawer}></Header>
+        <Content paddingSize='small'>
+          <div>Hi, I am Second Drawer Content Area</div>
+        </Content>
+      </React.Fragment>
+    );
+  }
+
+  render() {
+    let { isActive, subDrawerActive, size } = this.state;
+    return (
+      <Drawer
+        isActive={isActive}
+        needFreeze
+        paddingSize='small'
+        subDrawerActive={subDrawerActive}
+        subDrawerSize='small'
+        onClose={this.closeDrawers}
+        subDrawerChildren={this.subDrawerChildren()}
+        size={size} needAutoZindex
+      >
+        <Header title='First Drawer' onClose={this.onClose}></Header>
+        <Content className={style.headerTest}>
+          <div onClick={this.openSecondDrawer}>
+            Click here to Open Second Drawer ..:-)
+          </div>
+          <Button text='small' onClick={this.changeSize.bind(this, 'small')} />
+          <Button
+            text='xsmall'
+            onClick={this.changeSize.bind(this, 'xsmall')}
+          />
+          <Button
+            text='medium'
+            onClick={this.changeSize.bind(this, 'medium')}
+          />
+          <Button
+            text='xmedium'
+            onClick={this.changeSize.bind(this, 'xmedium')}
+          />
+          <Button text='large' onClick={this.changeSize.bind(this, 'large')} />
+          <Button
+            text='xlarge'
+            onClick={this.changeSize.bind(this, 'xlarge')}
+          />
+          <Button
+            text='xxlarge'
+            onClick={this.changeSize.bind(this, 'xxlarge')}
+          />
+        </Content>
+      </Drawer>
+    );
+  }
+}
+if (__DOCS__) {
+  Drawer__multiDrawer.docs = {
+    componentGroup: 'Template'
+  };
+}

package/src/Drawer/docs/Drawer__noFreeze.docs.js

@@ -15,7 +15,6 @@ export default class Drawer__noFreeze extends React.Component {
 }
 if (__DOCS__) {
   Drawer__noFreeze.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
+    componentGroup: 'Template'
   };
 }

package/src/Drawer/docs/Drawer__withModal.docs.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import Drawer, { Header, Content } from '../Drawer';
+import Modal from '@zohodesk/components/lib/Modal/Modal';
+import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import style from '../Drawer.module.css';
+
+export default class Drawer__withModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isActive: true,
+      modalActive: true
+    };
+
+    this.onClose = this.onClose.bind(this);
+    this.openModal = this.openModal.bind(this);
+    this.closeDrawers = this.closeDrawers.bind(this);
+    this.getNextId = getUniqueId(this);
+  }
+
+  onClose() {
+    this.setState({
+      isActive: false
+    });
+  }
+
+  openModal() {
+    this.setState({
+      modalActive: true
+    });
+  }
+
+  closeDrawers() {
+    this.setState({
+      isActive: false
+    });
+  }
+
+  render() {
+    let { isActive, modalActive } = this.state;
+    let uniqueId =  this.getNextId();
+    return (
+      <Drawer
+        isActive={isActive}
+        needFreeze
+        paddingSize='small'
+        onClose={this.closeDrawers}
+        innerPortalName={uniqueId}
+      >
+        <Header title='Drawer with Modal' onClose={this.onClose}></Header>
+        <Content className={style.headerTest}>
+          <div onClick={this.openModal}>Click here to Open Modal ..:-)</div>
+          {modalActive ? (
+            <Modal portalId={uniqueId}>
+              <div
+                style={{
+                  width: '90%',
+                  height: '400px',
+                  background: '#fff',
+                  margin: '50px auto'
+                }}
+              >
+                Drawer Modal
+              </div>
+            </Modal>
+          ) : null}
+        </Content>
+      </Drawer>
+    );
+  }
+}
+if (__DOCS__) {
+  Drawer__withModal.docs = {
+    componentGroup: 'Template'
+  };
+}

package/src/ExternalLink/ExternalLink.js

@@ -1,57 +1,75 @@
-/**** Libraries ****/
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/**** CSS ****/
-import style from './ExternalLink.module.css';
-
-export default class ExternalLink extends React.Component {
-  addHttp(url) {
-    let site = url.toLowerCase();
-    let regEx = new RegExp(/((ftp|https|mailto|tel|http?):)/);
-    if (!regEx.test(site)) {
-      return `http://${site}`;
-    }
-    return site;
-  }
-  render() {
-    let { href, title, target, className, children, rel, dataId } = this.props;
-    let urlOutput =
-      href && typeof href != 'boolean'
-        ? this.addHttp(String(href))
-        : 'javascript:void(0);';
-    return (
-      <a
-        href={urlOutput}
-        target={target}
-        className={`${style.link} ${className ? className : ''}`}
-        data-title={title}
-        rel={rel}
-        data-id={dataId}
-      >
-        {children}
-      </a>
-    );
-  }
-}
-
-ExternalLink.defaultProps = {
-  rel: 'noopener noreferrer',
-  target: '_blank'
-};
-
-ExternalLink.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  href: PropTypes.string,
-  rel: PropTypes.string,
-  target: PropTypes.oneOf(['_blank', '_self']),
-  title: PropTypes.string
-};
-
-if (__DOCS__) {
-  ExternalLink.docs = {
-    componentGroup: 'Atom'
-  };
-}
+/**** Libraries ****/
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**** CSS ****/
+import style from './ExternalLink.module.css';
+
+export default class ExternalLink extends React.Component {
+  addHttp(url) {
+    const regEx = new RegExp(
+      /(^(ftp|https|mailto|tel|http|simplehelp|dynamicsnav?):)/i
+    );
+    if (!regEx.test(url)) {
+      return `http://${url}`;
+    }
+    return url;
+  }
+
+  render() {
+    const {
+      href,
+      title,
+      target,
+      className,
+      children,
+      rel,
+      dataId,
+      onClick,
+      customProps
+    } = this.props;
+    const urlOutput =
+      href && typeof href !== 'boolean'
+        ? this.addHttp(String(href))
+        : 'javascript:void(0);';
+
+    return (
+      <a
+        href={urlOutput}
+        target={target}
+        className={`${style.link} ${className ? className : ''}`}
+        data-title={title}
+        rel={rel}
+        data-id={dataId}
+        onClick={onClick}
+        {...customProps}
+      >
+        {children}
+      </a>
+    );
+  }
+}
+
+ExternalLink.defaultProps = {
+  rel: 'noopener noreferrer',
+  target: '_blank',
+  customProps:{}
+};
+
+ExternalLink.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  href: PropTypes.string,
+  rel: PropTypes.string,
+  target: PropTypes.oneOf(['_blank', '_self']),
+  title: PropTypes.string,
+  onClick: PropTypes.func,
+  customProps:PropTypes.object
+};
+
+if (__DOCS__) {
+  ExternalLink.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/src/ExternalLink/ExternalLink.module.css

@@ -1,4 +1,4 @@
-.link {
-  text-decoration: none;
-  color: inherit
+.link {
+  text-decoration: none;
+  color: inherit
 }

package/src/ExternalLink/__tests__/ExternalLink.spec.js

@@ -1,28 +1,28 @@
-import React from 'react';
-import ExternalLink from '../ExternalLink';
-import renderer from 'react-test-renderer';
-
-describe('ExternalLink Component', () => {
-  it('should add http/https to href tag if it is not already present', () => {
-    const checkLinks = ['javascript:alert(1)', 'www.test.com', 'test.com', '#'];
-    checkLinks.forEach(link => {
-      let ele = renderer.create(
-        <ExternalLink href={link}>{link}</ExternalLink>
-      );
-      const renderedElement = ele.toJSON();
-      expect(renderedElement.props.href).toEqual(`http://${link}`);
-    });
-  });
-  it('should not add http/https to href tag if it is already present', () => {
-    let ele = renderer.create(
-      <ExternalLink href='https://www.google.com'>www.google.com</ExternalLink>
-    );
-    const renderedElement = ele.toJSON();
-    expect(renderedElement.props.href).toEqual('https://www.google.com');
-  });
-  it('should default to / if href is undefined', () => {
-    let ele = renderer.create(<ExternalLink>www.google.com</ExternalLink>);
-    const renderedElement = ele.toJSON();
-    expect(renderedElement.props.href).toEqual('javascript:void(0);');
-  });
-});
+import React from 'react';
+import ExternalLink from '../ExternalLink';
+import renderer from 'react-test-renderer';
+
+describe('ExternalLink Component', () => {
+  it('should add http/https to href tag if it is not already present', () => {
+    const checkLinks = ['javascript:alert(1)', 'www.test.com', 'test.com', '#'];
+    checkLinks.forEach(link => {
+      let ele = renderer.create(
+        <ExternalLink href={link}>{link}</ExternalLink>
+      );
+      const renderedElement = ele.toJSON();
+      expect(renderedElement.props.href).toEqual(`http://${link}`);
+    });
+  });
+  it('should not add http/https to href tag if it is already present', () => {
+    let ele = renderer.create(
+      <ExternalLink href='https://www.google.com'>www.google.com</ExternalLink>
+    );
+    const renderedElement = ele.toJSON();
+    expect(renderedElement.props.href).toEqual('https://www.google.com');
+  });
+  it('should default to / if href is undefined', () => {
+    let ele = renderer.create(<ExternalLink>www.google.com</ExternalLink>);
+    const renderedElement = ele.toJSON();
+    expect(renderedElement.props.href).toEqual('javascript:void(0);');
+  });
+});

package/src/ExternalLink/docs/ExternalLink__default.docs.js

@@ -1,24 +1,24 @@
-import React, { Component } from 'react';
-import ExternalLink from '../ExternalLink';
-
-export default class ExternalLink__default extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    ///agent/:orgName/:deptName/:moduleName/details/:moduleId
-
-    return (
-      <div>
-        <ExternalLink />
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  ExternalLink__default.docs = {
-    componentGroup: 'Atom'
-  };
-}
-
+import React, { Component } from 'react';
+import ExternalLink from '../ExternalLink';
+
+export default class ExternalLink__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    ///agent/:orgName/:deptName/:moduleName/details/:moduleId
+
+    return (
+      <div>
+        <ExternalLink />
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  ExternalLink__default.docs = {
+    componentGroup: 'Atom'
+  };
+}
+

package/src/FlipCard/FlipCard.js

@@ -5,7 +5,7 @@ import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
 import CheckBox from '@zohodesk/components/lib/CheckBox/CheckBox';
 import { Container } from '@zohodesk/components/lib/Layout';
 import ChannelIcon from '../ChannelIcon/ChannelIcon';
-import { CssProvider } from '@zohodesk/components/lib/CssProvider';
+import AvatarSize from '@zohodesk/components/lib/Provider/AvatarSize';
 import style from './FlipCard.module.css';
 import { stopBubbling } from '../utils/General';
 
@@ -51,17 +51,30 @@ export default class FlipCard extends Component {
       dataId,
       className,
       palette,
+      textPalette,
+      customTextClass,
       frontClass,
       needTitle,
-      iconColor
+      iconColor,
+      tourId,
+      isFilledCheckbox,
+      channelTitle,
+      customProps
     } = this.props;
+    const {
+      CheckBoxProps = {},
+      ChannelIconProps = {},
+      AvatarIconProps = {},
+      AvatarUserProps = {}
+    } = customProps;
     return (
       <div
-        className={`${CssProvider(size)}  ${
+        className={`${AvatarSize(size)}  ${
           noNeedFlip ? style.flipNone : isChecked ? style.notFlip : style.flip
         }`}
         onClick={this.onClick}
         data-id={ticListContainer}
+        data-tour={tourId}
       >
         <div className={style.container} data-id={ticList}>
           {!noNeedFlip ? (
@@ -70,11 +83,12 @@ export default class FlipCard extends Component {
               className={`${style.front} ${frontClass ? frontClass : ''}`}
             >
               <CheckBox
+                isFilled={isFilledCheckbox}
                 checked={isChecked}
-                name='category'
                 onChange={this.onChange}
                 id={`checkbox_${id}`}
                 dataId={`listViewCheckBox_${id}`}
+                {...CheckBoxProps}
               />
             </Container>
           ) : null}
@@ -89,7 +103,12 @@ export default class FlipCard extends Component {
                 dataId={channel}
                 className={className}
                 palette={palette}
+                textPalette={textPalette}
+                customTextClass={customTextClass}
                 iconColor={iconColor}
+                title={channelTitle}
+                iconTitle={channelTitle}
+                {...ChannelIconProps}
               />
             ) : icon ? (
               <AvatarIcon
@@ -100,6 +119,8 @@ export default class FlipCard extends Component {
                 dataId={icon}
                 className={className}
                 iconColor={iconColor}
+                title={needTitle ? name : ''}
+                {...AvatarIconProps}
               />
             ) : (
               <AvatarUser
@@ -111,6 +132,10 @@ export default class FlipCard extends Component {
                 src={src}
                 dataId={dataId}
                 needTitle={needTitle}
+                palette={palette}
+                textPalette={textPalette}
+                customTextClass={customTextClass}
+                {...AvatarUserProps}
               />
             )}
           </Container>
@@ -123,15 +148,19 @@ export default class FlipCard extends Component {
 FlipCard.propTypes = {
   action: PropTypes.string,
   channel: PropTypes.string,
+  channelTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   className: PropTypes.string,
+  customTextClass: PropTypes.string,
   dataId: PropTypes.string,
   frontClass: PropTypes.string,
   icon: PropTypes.string,
   iconClass: PropTypes.string,
+  iconColor: PropTypes.string,
   iconSize: PropTypes.string,
   id: PropTypes.string.isRequired,
   initial: PropTypes.string,
   isChecked: PropTypes.bool,
+  isFilledCheckbox: PropTypes.bool,
   isPaidUser: PropTypes.bool,
   isPortalUser: PropTypes.bool,
   name: PropTypes.string,
@@ -141,13 +170,21 @@ FlipCard.propTypes = {
   palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
   size: PropTypes.string,
   src: PropTypes.string,
+  textPalette: PropTypes.oneOf(['white', 'black']),
   ticList: PropTypes.string,
   ticListContainer: PropTypes.string,
-  iconColor: PropTypes.string
+  tourId: PropTypes.string,
+  customProps: PropTypes.shape({
+    CheckBoxProps: PropTypes.object,
+    ChannelIconProps: PropTypes.object,
+    AvatarIconProps: PropTypes.object,
+    AvatarUserProps: PropTypes.object
+  })
 };
 FlipCard.defaultProps = {
   size: 'medium',
-  needTitle: true
+  needTitle: true,
+  customProps: {}
 };
 if (__DOCS__) {
   FlipCard.docs = {

package/src/FlipCard/FlipCard.module.css

@@ -1,11 +1,11 @@
 .flip,
 .flipNone {
-  background-color: transparent;
-  color: var(--zd_text_smoke21);
+  background-color: var(--zdt_flipcard_default_bg);
+  color: var(--zdt_flipcard_default_text);
 }
 .container {
   position: relative;
-  transition: 0.3s all;
+  transition: var(--zd_transition3) all;
   transform-style: preserve-3d;
 }
 .container,