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

package/src/FormAction/FormAction.js

@@ -118,3 +118,9 @@ FormAction.defaultProps = {
   size: 'medium',
   paddingRightClass: ''
 };
+
+if (__DOCS__) {
+  FormAction.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/src/FormAction/FormAction.module.css

@@ -1,24 +1,17 @@
+.varClass {
+  --footerBg: var(--zdt_formAction_bg);
+  --footerBorder: var(--zdt_formAction_border);
+}
 .wrapperDiv {
   position: relative;
   z-index: 1;
+  composes: varClass;
 }
 .footerParent {
-  border-top: 1px solid var(--zd_border_smoke91);
   position: relative;
-  background-color: var(--dot_bg_white);
-}
-.footerParent:after {
-  content: '';
-  position: absolute;
-  z-index: -1;
-  box-shadow: 0 -2px 4px -2px var(--zd_shadow_graytrans6);
-  top: calc(var(--zd_size1) * -1);
-  bottom: 0;
-  left: 15%;
-  right: 15%;
-  border-radius: 100px / 10px;
+  background-color: var(--footerBg);
+  border-top: solid 1px var(--footerBorder);
 }
-
 .largeFooter {
   padding-top: var(--zd_size24);
   padding-bottom: var(--zd_size24);

package/src/FormAction/docs/FormAction__default.docs.js

@@ -5,13 +5,13 @@ import FormAction, { LeftSide, RightSide, Center } from '../FormAction';
 
 export default class FormAction__default extends Component {
   render() {
-    return ( 
-      <div style={{
-        marginTop: '20px'
-      }}
+    return (
+      <div
+        style={{
+          marginTop: '20px'
+        }}
       >
-
-        <FormAction >
+        <FormAction>
           <LeftSide>
             <p>Left</p>
           </LeftSide>
@@ -81,7 +81,6 @@ export default class FormAction__default extends Component {
             <p>XSmall</p>
           </RightSide>
         </FormAction>
-
       </div>
     );
   }
@@ -89,6 +88,6 @@ export default class FormAction__default extends Component {
 
 if (__DOCS__) {
   FormAction__default.docs = {
-    componentGroup: 'FormAction'
+    componentGroup: 'Atom'
   };
-}
+}

package/src/FreezeLayer/FreezeLayer.js

@@ -4,28 +4,51 @@ import { Container } from '@zohodesk/components/lib/Layout';
 import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 import style from './FreezeLayer.module.css';
 import { Shortcut } from '../utils/KeyboardApi';
+import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 
 export default class FreezeLayer extends Component {
   constructor(props) {
     super(props);
     this.state = { isActive: props.isActive, isChildActive: false };
+    this.getNextIndex = getZIndex(this);
   }
 
-  // componentDidMount(){
-  //   Shortcut && Shortcut.setState(false);
-  // }
-  //
-  // componentWillUnmount(){
-  //   Shortcut && Shortcut.setState(true);
-  // }
+  componentDidMount() {
+    let { isActive } = this.props;
+    if (isActive) {
+      this.setState({
+        isChildActive: true
+      });
+    }
+  }
 
   componentDidUpdate(prevProps) {
     let { isActive } = this.props;
     if (isActive != prevProps.isActive) {
       if (isActive) {
         Shortcut && Shortcut.setState(false);
+        this.setState(
+          {
+            isActive: true
+          },
+          () => {
+            this.setState({
+              isChildActive: true
+            });
+          }
+        );
       } else {
         Shortcut && Shortcut.setState(true);
+        this.setState(
+          {
+            isChildActive: false
+          },
+          () => {
+            this.setState({
+              isActive: false
+            });
+          }
+        );
       }
     }
   }
@@ -39,10 +62,13 @@ export default class FreezeLayer extends Component {
       onClick,
       animationName,
       zIndex,
-      isActive,
       runOnMount,
-      forwardRef
+      forwardRef,
+      isSvgMask,
+      customClass,
+      needAutoZindex
     } = this.props;
+    let { isActive, isChildActive } = this.state;
     return (
       <VelocityAnimationGroup
         name={animationName && animationName}
@@ -50,8 +76,11 @@ export default class FreezeLayer extends Component {
         runOnMount={runOnMount}
       >
         <div
+          style={isActive && needAutoZindex ? { zIndex: `${this.getNextIndex()}` } : {}}
           className={`
-              ${style.container} ${style[`index${zIndex}`]}  ${style[palette]}
+              ${style.container} ${customClass} ${style[`index${zIndex}`]}  ${
+        !isSvgMask ? style[palette] : ''
+      }
             `}
           onClick={onClick ? onClick : null}
           ref={forwardRef}
@@ -61,8 +90,7 @@ export default class FreezeLayer extends Component {
               {childAnimationName ? (
                 <VelocityAnimationGroup
                   name={childAnimationName}
-                  isActive
-                  runOnMount
+                  isActive={isChildActive}
                   enterDelay={palette === 'plain' ? 0 : 300}
                   component={Container}
                   alignBox='row'
@@ -71,6 +99,8 @@ export default class FreezeLayer extends Component {
                 >
                   {children}
                 </VelocityAnimationGroup>
+              ) : isSvgMask ? (
+                <React.Fragment>{children}</React.Fragment>
               ) : (
                 <Container
                   alignBox='row'
@@ -102,8 +132,11 @@ FreezeLayer.propTypes = {
   animationName: PropTypes.oneOf(animationValues),
   childAnimationName: PropTypes.oneOf(animationValues),
   children: PropTypes.node,
+  customClass: PropTypes.string,
   forwardRef: PropTypes.object,
   isActive: PropTypes.bool,
+  isSvgMask: PropTypes.bool,
+  needAutoZindex: PropTypes.bool,
   onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain', 'snow']),
   runOnMount: PropTypes.bool,
@@ -112,7 +145,10 @@ FreezeLayer.propTypes = {
 FreezeLayer.defaultProps = {
   isActive: false,
   palette: 'default',
-  zIndex: '5'
+  zIndex: '5',
+  isSvgMask: false,
+  customClass: '',
+  needAutoZindex:true
 };
 
 if (__DOCS__) {

package/src/FreezeLayer/FreezeLayer.module.css

@@ -4,21 +4,22 @@
   bottom: 0;
   right: 0;
   position: absolute;
+  overflow: hidden;
 }
 .default {
-  background-color: rgba(0, 0, 0, 0.45);
+  background-color: var(--zdt_freezelayer_default_bg);
 }
 .dark {
-  background-color: rgba(0, 0, 0, 0.9);
+  background-color: var(--zdt_freezelayer_dark_bg);
 }
 .darkLight {
-  background-color: var(--zd_bg_dark16);
+  background-color: var(--zdt_freezelayer_darklight_bg);
 }
 .plain {
-  background-color: transparent;
+  background-color: var(--zdt_freezelayer_plain_bg);
 }
 .snow {
-  background-color: rgba(30, 38, 51, 0.4);
+  background-color: var(--zdt_freezelayer_snow_bg);
 }
 .index3 {
   z-index: 3;
@@ -33,5 +34,5 @@
   z-index: 10;
 }
 .delay {
-  transition-delay: 0.2s;
+  transition-delay: var(--zd_transition2);
 }

package/src/FreezeLayer/docs/FreezeLayer__dark.docs.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import FreezeLayer from '../FreezeLayer';
 import Button from '@zohodesk/components/lib/Button/Button';
 
-
 export default class FreezeLayer__dark extends Component {
   constructor(props) {
     super(props);
@@ -29,7 +28,7 @@ export default class FreezeLayer__dark extends Component {
           isActive={view}
           onClick={this.toggle}
           animationName='fade'
-          childAnimationName='expand'
+          childAnimationName='expand' needAutoZindex
         >
           <div
             style={{

package/src/IconButton/IconButton.js

@@ -0,0 +1,186 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+import { Container } from '@zohodesk/components/lib/Layout';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
+import style from './IconButton.module.css';
+
+export default class IconButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { isPressed: false };
+    this.handleToggle = this.handleToggle.bind(this);
+    this.triggerClick = this.triggerClick.bind(this);
+    this.triggerMouseDown = this.triggerMouseDown.bind(this);
+    this.triggerMouseOver = this.triggerMouseOver.bind(this);
+    this.onBlur = this.onBlur.bind(this);
+  }
+
+  handleToggle(e) {
+    if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
+      e.preventDefault();
+      this.triggerClick(e);
+      this.triggerMouseDown(e);
+    }
+  }
+
+  triggerClick(e) {
+    let { onClick, isDisabled } = this.props;
+    !isDisabled
+      ? (onClick && onClick(e), this.setState({ isPressed: true }))
+      : null;
+  }
+
+  triggerMouseOver(e) {
+    let { onMouseOver, isDisabled } = this.props;
+    !isDisabled
+      ? (onMouseOver && onMouseOver(e), this.setState({ isPressed: true }))
+      : null;
+  }
+
+  triggerMouseDown(e) {
+    let { onMouseDown, isDisabled } = this.props;
+    !isDisabled
+      ? (onMouseDown && onMouseDown(e), this.setState({ isPressed: true }))
+      : null;
+  }
+
+  onBlur(e) {
+    let { isDisabled } = this.props;
+    !isDisabled ? this.setState({ isPressed: false }) : null;
+  }
+
+  render() {
+    let {
+      palette,
+      iconSize,
+      iconName,
+      className,
+      iconClass,
+      dataId,
+      eleRef,
+      isActive,
+      tourId,
+      isDisabled,
+      children,
+      hoverType,
+      title,
+      isBold,
+      isNeedEffect,
+      needButtonTag,
+      a11y,
+      dataIsHtml
+    } = this.props;
+    let { isPressed } = this.state;
+    let {
+      ariaHaspopup,
+      ariaExpanded,
+      ariaLabel,
+      ariaControls,
+      ariaLabelledby
+    } = a11y;
+    return (
+      <RippleEffect
+        palette={palette}
+        isActive={isActive}
+        hoverType={hoverType}
+        isDisabled={isDisabled}
+        isNeedEffect={isNeedEffect}
+      >
+        <Container
+          aria-label={ariaLabel}
+          aria-haspopup={ariaHaspopup}
+          aria-expanded={ariaExpanded}
+          aria-controls={ariaControls}
+          aria-labelledby={ariaLabelledby}
+          tagName={needButtonTag ? 'button' : 'div'}
+          isInline
+          tourId={tourId}
+          align='both'
+          isCover={false}
+          className={`${needButtonTag && btnStyle.buttonReset} ${
+            style.wrapper
+          } ${className ? className : ''} ${
+            isActive ? style[`${palette}_active`] : style[palette]
+          }`}
+          dataId={dataId}
+          onClick={this.triggerClick}
+          data-title={title}
+          data-ishtml={dataIsHtml}
+          eleRef={eleRef}
+          onMouseDown={this.triggerMouseDown}
+          onMouseEnter={this.triggerMouseOver}
+          aria-pressed={isPressed}
+          onKeyDown={this.handleToggle}
+          onFocus={this.triggerMouseOver}
+          onBlur={this.onBlur}
+          disabled={isDisabled}
+        >
+          {iconName ? (
+            <Icon
+              isBold={isBold}
+              size={iconSize}
+              name={iconName}
+              iconClass={iconClass}
+            />
+          ) : null}
+          {children ? children : null}
+        </Container>
+      </RippleEffect>
+    );
+  }
+}
+
+IconButton.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  eleRef: PropTypes.func,
+  hoverType: PropTypes.oneOf(['default', 'border', 'bg']),
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  isActive: PropTypes.bool,
+  isBold: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isNeedEffect: PropTypes.bool,
+  onClick: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  palette: PropTypes.oneOf(['primary', 'primaryFilled', 'default']),
+  title: PropTypes.string,
+  tourId: PropTypes.string,
+  isNeedEffect: PropTypes.bool,
+  needButtonTag: PropTypes.bool,
+  a11y: PropTypes.shape({
+    ariaHaspopup: PropTypes.bool,
+    ariaExpanded: PropTypes.bool,
+    ariaLabel: PropTypes.string,
+    ariaControls: PropTypes.string,
+    ariaLabelledby: PropTypes.string
+  }),
+  dataIsHtml: PropTypes.bool
+};
+
+IconButton.defaultProps = {
+  palette: 'default',
+  iconSize: '13',
+  className: '',
+  iconClass: '',
+  dataId: 'iconContainer',
+  isActive: false,
+  isDisabled: false,
+  hoverType: 'default',
+  isBold: false,
+  isNeedEffect: true,
+  needButtonTag: true,
+  a11y: {},
+  dataIsHtml: false
+};
+
+if (__DOCS__) {
+  IconButton.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/src/IconButton/IconButton.module.css

@@ -0,0 +1,22 @@
+.varClass {
+  --iconColor: var(--zdt_iconButton_icon_black);
+}
+.wrapper {
+  height: var(--zd_size28);
+  cursor: pointer;
+  width: var(--zd_size28);
+  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
+  composes: varClass;
+  color: var(--iconColor);
+}
+.primary {
+  --iconColor: var(--zdt_iconButton_icon_primary);
+}
+.primary:hover {
+  --iconColor: var(--zdt_iconButton_icon_primaryHover);
+}
+.primary_active,
+.primaryFilled,
+.primaryFilled_active {
+  --iconColor: var(--zdt_iconButton_icon_primaryActive);
+}

package/src/IconButton/docs/IconButton__default.docs.js

@@ -0,0 +1,158 @@
+import React, { Component } from 'react';
+import IconButton from '../IconButton';
+export default class IconButton__default extends Component {
+  render() {
+    return (
+      <React.Fragment>
+        <div style={{ margin: '10px' }}>
+          <h3 style={{ margin: '30px' }}>isBold</h3>
+          <span style={{ margin: '30px' }}>
+            <IconButton
+              iconSize='12'
+              iconName='ZD-commentNew'
+              palette='primary'
+              isBold
+            />
+          </span>
+          <span style={{ margin: '30px' }}>
+            <IconButton
+              isBold
+              iconSize='12'
+              iconName='ZD-more'
+              palette='secondary'
+            />
+          </span>
+          <span style={{ margin: '30px' }}>
+            <IconButton
+              iconSize='12'
+              iconName='ZD-commentNew'
+              palette='primaryFilled'
+              isBold
+            />
+          </span>
+        </div>
+        <div style={{ margin: '10px' }}>
+          <h3 style={{ margin: '30px' }}>Palette</h3>
+          <span style={{ margin: '30px' }}>
+            <IconButton
+              iconSize='12'
+              iconName='ZD-commentNew'
+              palette='primary'
+              onClick={() => {
+                console.log('click');
+              }}
+              onMouseDown={() => {
+                console.log('Down');
+              }}
+              onMouseOver={() => {
+                console.log('over');
+              }}
+            />
+          </span>
+          <span style={{ margin: '30px' }}>
+            <IconButton iconSize='12' iconName='ZD-more' />
+          </span>
+          <span style={{ margin: '30px' }}>
+            <IconButton
+              iconSize='12'
+              iconName='ZD-commentNew'
+              palette='primaryFilled'
+            />
+          </span>
+        </div>
+        <div style={{ margin: '10px' }}>
+          <h3 style={{ margin: '30px' }}>isActive</h3>
+          <span style={{ margin: '30px' }}>
+            <IconButton
+              iconSize='12'
+              iconName='ZD-commentNew'
+              palette='primary'
+              isActive
+            />
+          </span>
+          <span style={{ margin: '30px' }}>
+            <IconButton iconSize='12' iconName='ZD-more' isActive />
+          </span>
+          <span style={{ margin: '30px' }}>
+            <IconButton
+              iconSize='12'
+              iconName='ZD-commentNew'
+              palette='primaryFilled'
+              isActive
+            />
+          </span>
+        </div>
+        <div style={{ margin: '10px' }}>
+          <h3 style={{ margin: '30px' }}>Border On Hover</h3>
+          <span style={{ margin: '30px' }}>
+            <IconButton
+              iconSize='12'
+              iconName='ZD-commentNew'
+              palette='primary'
+              hoverType='border'
+            />
+          </span>
+          <span style={{ margin: '30px' }}>
+            <IconButton iconSize='12' iconName='ZD-more' hoverType='border' />
+          </span>
+        </div>
+        <div style={{ margin: '10px' }}>
+          <h3 style={{ margin: '30px' }}>isDisabled</h3>
+          <span style={{ margin: '30px' }}>
+            <IconButton
+              iconSize='12'
+              iconName='ZD-commentNew'
+              palette='primary'
+              isDisabled
+            />
+          </span>
+          <span style={{ margin: '30px' }}>
+            <IconButton iconSize='12' iconName='ZD-more' isDisabled />
+          </span>
+          <span style={{ margin: '30px' }}>
+            <IconButton
+              iconSize='12'
+              iconName='ZD-commentNew'
+              palette='primaryFilled'
+              isDisabled
+            />
+          </span>
+        </div>
+        <div style={{ margin: '10px' }}>
+          <h3 style={{ margin: '30px' }}>Tooltip</h3>
+          <span style={{ margin: '30px' }}>
+            <IconButton
+              iconSize='12'
+              iconName='ZD-commentNew'
+              palette='primary'
+              isDisabled
+              title='primary'
+            />
+          </span>
+          <span style={{ margin: '30px' }}>
+            <IconButton
+              iconSize='12'
+              iconName='ZD-more'
+              isDisabled
+              title='default'
+            />
+          </span>
+          <span style={{ margin: '30px' }}>
+            <IconButton
+              iconSize='12'
+              iconName='ZD-commentNew'
+              palette='primaryFilled'
+              isDisabled
+              title='primaryFilled'
+            />
+          </span>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+if (__DOCS__) {
+  IconButton__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/src/Image/Image.js

@@ -4,7 +4,18 @@ import style from './Image.module.css';
 
 export default class Image extends React.Component {
   render() {
-    let { alt, src, className, isCover, title, onClick, dataId } = this.props;
+    let {
+      alt,
+      src,
+      className,
+      isCover,
+      title,
+      onClick,
+      dataId,
+      htmlId,
+      eleRef,
+      original
+    } = this.props;
     return (
       <img
         src={src}
@@ -15,6 +26,9 @@ export default class Image extends React.Component {
           isCover ? style.imgFullSize : style.imgMaxFullSize
         } `}
         onClick={onClick}
+        id={htmlId}
+        ref={eleRef}
+        data-original={original}
       />
     );
   }
@@ -24,8 +38,11 @@ Image.propTypes = {
   alt: PropTypes.string.isRequired,
   className: PropTypes.string,
   dataId: PropTypes.string,
+  eleRef: PropTypes.func,
+  htmlId: PropTypes.string,
   isCover: PropTypes.bool,
   onClick: PropTypes.func,
+  original: PropTypes.string,
   src: PropTypes.string.isRequired,
   title: PropTypes.string
 };