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

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

@@ -0,0 +1,93 @@
+import React, { Component } from 'react';
+import Button from '@zohodesk/components/lib/Button/Button';
+import Icon from '@zohodesk/icons/lib/Icon';
+import FormAction, { LeftSide, RightSide, Center } from '../FormAction';
+
+export default class FormAction__default extends Component {
+  render() {
+    return (
+      <div
+        style={{
+          marginTop: '20px'
+        }}
+      >
+        <FormAction>
+          <LeftSide>
+            <p>Left</p>
+          </LeftSide>
+        </FormAction>
+        <FormAction size='medium'>
+          <RightSide>
+            <p>Right</p>
+          </RightSide>
+        </FormAction>
+        <FormAction size='large'>
+          <LeftSide>
+            <p>Left</p>
+          </LeftSide>
+          <RightSide>
+            <p>Right</p>
+          </RightSide>
+        </FormAction>
+
+        <FormAction size='small'>
+          <Center>
+            <p>Center</p>
+          </Center>
+        </FormAction>
+
+        <FormAction size='large'>
+          <LeftSide>
+            <Button text='primary' palette='primary' />
+            <Button text='primaryFilled' palette='primaryFilled' />
+          </LeftSide>
+          <RightSide>
+            <p>Large</p>
+          </RightSide>
+        </FormAction>
+        <FormAction size='medium'>
+          <LeftSide>
+            <Button text='primary' palette='primary' />
+            <Button text='primaryFilled' palette='primaryFilled' />
+          </LeftSide>
+          <RightSide>
+            <p>Medium</p>
+          </RightSide>
+        </FormAction>
+        <FormAction size='medium' paddingLeftSize='xmedium'>
+          <LeftSide>
+            <Button text='primary' palette='primary' />
+            <Button text='primaryFilled' palette='primaryFilled' />
+          </LeftSide>
+          <RightSide>
+            <p>XMedium</p>
+          </RightSide>
+        </FormAction>
+        <FormAction size='small'>
+          <LeftSide>
+            <Button text='primary' palette='primary' size='small' />
+            <Button text='primaryFilled' palette='primaryFilled' size='small' />
+          </LeftSide>
+          <RightSide>
+            <p>Small</p>
+          </RightSide>
+        </FormAction>
+        <FormAction size='small' paddingLeftSize='xsmall'>
+          <LeftSide>
+            <Button text='primary' palette='primary' size='small' />
+            <Button text='primaryFilled' palette='primaryFilled' size='small' />
+          </LeftSide>
+          <RightSide>
+            <p>XSmall</p>
+          </RightSide>
+        </FormAction>
+      </div>
+    );
+  }
+}
+
+if (__DOCS__) {
+  FormAction__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/src/FreezeLayer/FreezeLayer.js

@@ -0,0 +1,159 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+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() {
+    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
+            });
+          }
+        );
+      }
+    }
+  }
+
+  render() {
+    let {
+      children,
+      align,
+      childAnimationName,
+      palette,
+      onClick,
+      animationName,
+      zIndex,
+      runOnMount,
+      forwardRef,
+      isSvgMask,
+      customClass,
+      needAutoZindex
+    } = this.props;
+    let { isActive, isChildActive } = this.state;
+    return (
+      <VelocityAnimationGroup
+        name={animationName && animationName}
+        isActive={isActive}
+        runOnMount={runOnMount}
+      >
+        <div
+          style={isActive && needAutoZindex ? { zIndex: `${this.getNextIndex()}` } : {}}
+          className={`
+              ${style.container} ${customClass} ${style[`index${zIndex}`]}  ${
+        !isSvgMask ? style[palette] : ''
+      }
+            `}
+          onClick={onClick ? onClick : null}
+          ref={forwardRef}
+        >
+          {children && (
+            <React.Fragment>
+              {childAnimationName ? (
+                <VelocityAnimationGroup
+                  name={childAnimationName}
+                  isActive={isChildActive}
+                  enterDelay={palette === 'plain' ? 0 : 300}
+                  component={Container}
+                  alignBox='row'
+                  align={align}
+                  dataId='reactFreezeLayer'
+                >
+                  {children}
+                </VelocityAnimationGroup>
+              ) : isSvgMask ? (
+                <React.Fragment>{children}</React.Fragment>
+              ) : (
+                <Container
+                  alignBox='row'
+                  align={align}
+                  dataId='reactFreezeLayer'
+                >
+                  {children}
+                </Container>
+              )}
+            </React.Fragment>
+          )}
+        </div>
+      </VelocityAnimationGroup>
+    );
+  }
+}
+
+let animationValues = [
+  'fade',
+  'shrink',
+  'expand',
+  'slideRight',
+  'slideDown',
+  'flyDown'
+];
+
+FreezeLayer.propTypes = {
+  align: PropTypes.oneOf(['horizontal', 'vertical', 'both']),
+  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,
+  zIndex: PropTypes.oneOf(['3', '5', '7', '10'])
+};
+FreezeLayer.defaultProps = {
+  isActive: false,
+  palette: 'default',
+  zIndex: '5',
+  isSvgMask: false,
+  customClass: '',
+  needAutoZindex:true
+};
+
+if (__DOCS__) {
+  FreezeLayer.docs = {
+    componentGroup: 'Atom',
+    folderName: 'General'
+  };
+}

package/src/FreezeLayer/FreezeLayer.module.css

@@ -0,0 +1,38 @@
+.container {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  overflow: hidden;
+}
+.default {
+  background-color: var(--zdt_freezelayer_default_bg);
+}
+.dark {
+  background-color: var(--zdt_freezelayer_dark_bg);
+}
+.darkLight {
+  background-color: var(--zdt_freezelayer_darklight_bg);
+}
+.plain {
+  background-color: var(--zdt_freezelayer_plain_bg);
+}
+.snow {
+  background-color: var(--zdt_freezelayer_snow_bg);
+}
+.index3 {
+  z-index: 3;
+}
+.index5 {
+  z-index: 5;
+}
+.index7 {
+  z-index: 7;
+}
+.index10 {
+  z-index: 10;
+}
+.delay {
+  transition-delay: var(--zd_transition2);
+}

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

@@ -0,0 +1,52 @@
+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);
+    this.state = { view: false };
+    this.toggle = this.toggle.bind(this);
+  }
+
+  toggle() {
+    this.setState({ view: !this.state.view });
+  }
+
+  render() {
+    let { view } = this.state;
+    return (
+      <div>
+        <Button
+          text='Click to view FreezeLayer'
+          palette='secondary'
+          onClick={this.toggle}
+        />
+        <FreezeLayer
+          align='both'
+          palette='dark'
+          isActive={view}
+          onClick={this.toggle}
+          animationName='fade'
+          childAnimationName='expand' needAutoZindex
+        >
+          <div
+            style={{
+              color: 'var(--dot_text_black)',
+              fontSize: '40px',
+              padding: '100px',
+              background: 'var(--dot_bg_white)'
+            }}
+          >
+            Im children
+          </div>
+        </FreezeLayer>
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  FreezeLayer__dark.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/src/FreezeLayer/docs/FreezeLayer__default.docs.js

@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import FreezeLayer from '../FreezeLayer';
+import Button from '@zohodesk/components/lib/Button/Button';
+
+export default class FreezeLayer__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { view: false };
+    this.toggle = this.toggle.bind(this);
+  }
+
+  toggle() {
+    this.setState({ view: !this.state.view });
+  }
+
+  render() {
+    let { view } = this.state;
+    return (
+      <div>
+        <Button
+          text='Click to view FreezeLayer'
+          palette='secondary'
+          onClick={this.toggle}
+        />
+        <FreezeLayer
+          align='both'
+          isActive={view}
+          onClick={this.toggle}
+          animationName='expand'
+        >
+          <span
+            style={{
+              color: 'var(--dot_text_black)',
+              fontSize: '40px',
+              padding: '100px',
+              background: 'var(--dot_bg_white)'
+            }}
+          >
+            Im children
+          </span>
+        </FreezeLayer>
+      </div>
+    );
+  }
+}
+
+if (__DOCS__) {
+  FreezeLayer__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/src/IconButton/IconButton.js

@@ -0,0 +1,189 @@
+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,
+      role
+    } = 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}
+          role={role}
+          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,
+    role: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);
+}