@zohodesk/dot 1.0.0-beta.2 → 1.0.0-beta.202

package/src/list/SecondryPanel/docs/SecondryPanel__default.docs.js

@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import SecondryPanel, {
+  SecondryPanelUL,
+  SecondryPanelLI
+} from '../SecondryPanel';
+
+import style from './SecondryPanelDocs.module.css';
+
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+
+export default class SecondryPanel__default extends Component {
+  constructor(props) {
+    super(props);
+    this.responsiveFunc = this.responsiveFunc.bind(this);
+  }
+
+  responsiveFunc({ mediaQueryOR }) {
+     return {
+       uptoTablet : mediaQueryOR([{maxWidth: 640}])
+     }
+  }
+
+  render() {
+    return (
+      <ResponsiveReceiver query={this.responsiveFunc}>
+        {({ uptoTablet }) => (
+          <SecondryPanel className={style.layoutWrapper}>
+            <SecondryPanelUL
+              className={`${
+                uptoTablet
+                  ? style.minilayoutContainer
+                  : ''
+              }`}
+            >
+              <SecondryPanelLI>
+                <SecondryPanelUL className={style.container}>
+                  <SecondryPanelLI className={`${style.itemId}`}>
+                    <span className={style.itemInner}>
+                      <span className={style.itemText}>#12303456789</span>
+                      <span className={style.itemDot} />
+                    </span>
+                  </SecondryPanelLI>
+                  <SecondryPanelLI>
+                    <span className={style.itemInner}>
+                      <span className={style.itemText}>Nicole Hawkins</span>
+                      <span className={style.itemDot} />
+                    </span>
+                  </SecondryPanelLI>
+                  <SecondryPanelLI>
+                    <span className={style.itemInner}>
+                      <span className={style.itemText}>
+                        Welcome to Diffchecker
+                      </span>
+                      <span className={style.itemDot} />
+                    </span>
+                  </SecondryPanelLI>
+                </SecondryPanelUL>
+              </SecondryPanelLI>
+              <SecondryPanelLI>
+                <SecondryPanelUL className={style.container}>
+                  <SecondryPanelLI>
+                    <span className={style.itemInner}>
+                      <span className={style.itemText}>28 Jun 2019</span>
+                      <span className={style.itemDot} />
+                    </span>
+                  </SecondryPanelLI>
+                  <SecondryPanelLI>
+                    <span className={style.itemInner}>
+                      <span className={style.itemText}>
+                        28 May 2019 07:41 PM
+                      </span>
+                      <span className={style.itemDot} />
+                    </span>
+                  </SecondryPanelLI>
+                </SecondryPanelUL>
+              </SecondryPanelLI>
+            </SecondryPanelUL>
+          </SecondryPanel>
+        )}
+      </ResponsiveReceiver>
+    );
+  }
+}
+if (__DOCS__) {
+  SecondryPanel__default.docs = {
+    folderName: 'List',
+    componentGroup: 'SecondaryLayout'
+  };
+}

package/src/list/SentimentStatus/SentimentStatus.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import style from './SentimentStatus.module.css';
+import Icon from '@zohodesk/icons/lib/Icon';
+export default class SentimentStatus extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let { type, dataTitle } = this.props;
+    const icons = {
+      neutral: 'ZD-botNeutral',
+      negative: 'ZD-botNegative',
+      positive: 'ZD-botPositive'
+    };
+    return (
+      <div className={style.container} data-title={dataTitle}>
+        <Icon name={icons[type]} iconClass={style.sentimentIcon} />
+      </div>
+    );
+  }
+}
+SentimentStatus.propTypes = {
+  dataTitle: PropTypes.string,
+  type: PropTypes.oneOf(['neutral', 'negative', 'positive'])
+};
+if (__DOCS__) {
+  SentimentStatus.docs = {
+    componentGroup: ''
+  };
+}

package/src/list/SentimentStatus/SentimentStatus.module.css

@@ -0,0 +1,9 @@
+.container {
+  margin: 0 0 0 var(--zd_size5);
+  vertical-align: middle;
+  font-size: var(--zd_font_size10);
+}
+
+.sentimentIcon {
+  display: block;
+}

package/src/list/SentimentStatus/docs/SentimentStatus__default.docs.js

@@ -0,0 +1,20 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import SentimentStatus from '../SentimentStatus';
+export default class SentimentStatus__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <SentimentStatus />
+    );
+  }
+}
+if (__DOCS__) {
+  SentimentStatus__default.docs = {
+    componentGroup: ''
+  };
+}

package/src/list/Subject/Subject.js

@@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Link from '../../Link/Link';
+
+import style from './Subject.module.css';
+export default class Subject extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      text,
+      dataId,
+      urlName,
+      href,
+      urlData,
+      onClick,
+      isLink,
+      target,
+      fontWeight,
+      className,
+      isDotted,
+      children,
+      customProps
+    } = this.props;
+    let {LinkProps={},TextProps={}}=customProps;
+    return (
+      <React.Fragment>
+        {isLink ? (
+          <Link
+            urlName={urlName}
+            href={href}
+            urlData={urlData}
+            onClick={onClick}
+            className={`${style.subject} ${isDotted ? style.dotted : ''} ${className} ${style[`font_${  fontWeight}`]} ${style.cursorPointer}`}
+            dataId={dataId}
+            title={text}
+            target={target}
+            {...LinkProps}
+          >
+            {children? children:text}
+          </Link>
+        ) : (
+          <span
+            className={`${style.subject} ${isDotted ? style.dotted : ''} ${className} ${style[`font_${  fontWeight}`]}`}
+            data-title={text}
+            data-id={dataId}
+            {...TextProps}
+          >
+            {text}
+          </span>
+        )}
+      </React.Fragment>
+    );
+  }
+}
+Subject.propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  fontWeight: PropTypes.oneOf(['regular', 'semibold', 'bold']),
+  href: PropTypes.string,
+  isLink: PropTypes.bool,
+  onClick: PropTypes.func,
+  target: PropTypes.oneOf(['_blank', '_self']),
+  text: PropTypes.string,
+  urlData: PropTypes.object,
+  urlName: PropTypes.string,
+  isDotted: PropTypes.bool,
+  children:PropTypes.node,
+  customProps:PropTypes.shape({
+    LinkProps:PropTypes.object,
+    TextProps:PropTypes.object
+  })
+};
+Subject.defaultProps = {
+  isLink: false,
+  fontWeight: 'regular',
+  className: '',
+  isDotted: true,
+  customProps:{}
+};
+if (__DOCS__) {
+  Subject.docs = {
+    folderName: 'List',
+    componentGroup: 'Subject'
+  };
+}

package/src/list/Subject/Subject.module.css

@@ -0,0 +1,27 @@
+.varClass {
+  --subject_text: var(--zdt_subject_text);
+}
+.subject {
+  composes: varClass;
+  color: var(--subject_text);
+  display: block;
+}
+.dotted {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+.font_regular {
+  font-family: var(--zd_regular);
+}
+.font_semibold {
+  font-family: var(--zd_semibold);
+}
+.font_bold {
+  font-family: var(--zd_bold);
+}
+.font_semibold,
+.font_bold {
+  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
+}
+.cursorPointer {
+  cursor: pointer;
+}

package/src/list/Subject/docs/Subject__default.docs.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Subject from '../Subject';
+export default class Subject__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div style={{ margin: '10px' }}>
+        <div>Font Variant</div>
+        <div style={{ margin: '10px' }}>
+          <Subject text='MacBook Pro - A touch of genius' />
+        </div>
+        <div style={{ margin: '10px' }}>
+          <Subject
+            text='MacBook Pro - A touch of genius'
+            fontWeight='semibold'
+          />
+        </div>
+        <div style={{ margin: '10px' }}>
+          <Subject text='MacBook Pro - A touch of genius' fontWeight='bold' />
+        </div>
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  Subject__default.docs = {
+    folderName: 'List',
+    componentGroup: 'Subject'
+  };
+}

package/src/list/TagNew/TagNew.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import style from './TagNew.module.css';
+export default class TagNew extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let { className, text, animate, onClick, dataId } = this.props;
+    return (
+      <div
+        className={`${style.tagStyle} ${animate ? style.bounceIn : ''} ${
+          className ? className : ''
+        }`}
+        onClick={onClick}
+        data-id={dataId}
+      >
+        {text}
+      </div>
+    );
+  }
+}
+TagNew.propTypes = {
+  animate: PropTypes.bool,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  onClick: PropTypes.func,
+  text: PropTypes.string
+};
+TagNew.defaultProps = {
+  animate: false,
+  dataId: 'TagNew'
+};
+if (__DOCS__) {
+  TagNew.docs = {
+    folderName: 'List',
+    componentGroup: 'TagNew'
+  };
+}

package/src/list/TagNew/TagNew.module.css

@@ -0,0 +1,108 @@
+.tagStyle {
+  border-radius: var(--zd_size14);
+  background-color: var(--zdt_tagnew_default_bg);
+  box-shadow: 0 8px 30px 0 var(--zdt_tagnew_default_box_shadow);
+  min-width: var(--zd_size70);
+  height: var(--zd_size28);
+  font-size: var(--zd_font_size13);
+  color: var(--zdt_tagnew_default_text);
+  padding: 0 var(--zd_size15);
+  composes: inlineFlex from '../listCommon.module.css';
+  composes: alignHorizontal from '~@zohodesk/components/lib/common/common.module.css';
+  transform: scale(0);
+  transition: all var(--zd_transition2) ease 0s;
+  opacity: 0;
+  visibility: hidden;
+  cursor: pointer;
+}
+
+.bounceIn {
+  transform: scale(1);
+  animation: bounceIn 700ms;
+  visibility: visible;
+  opacity: 1;
+}
+
+@keyframes bounceIn {
+  0%,
+  20%,
+  40%,
+  60%,
+  80%,
+  100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  20% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  60% {
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    -webkit-transform: scale3d(0.97, 0.97, 0.97);
+    transform: scale3d(0.97, 0.97, 0.97);
+  }
+
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@-webkit-keyframes bounceIn {
+  0%,
+  20%,
+  40%,
+  60%,
+  80%,
+  100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  20% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  60% {
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    -webkit-transform: scale3d(0.97, 0.97, 0.97);
+    transform: scale3d(0.97, 0.97, 0.97);
+  }
+
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}

package/src/list/TagNew/docs/TagNew__default.docs.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import TagNew from '../TagNew';
+export default class TagNew__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return <TagNew text='3 New' animate />;
+  }
+}
+if (__DOCS__) {
+  TagNew__default.docs = {
+    folderName: 'List',
+    componentGroup: 'TagNew'
+  };
+}

package/src/list/Thread/Thread.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+import Button from '@zohodesk/components/lib/semantic/Button/Button';
+import style from './Thread.module.css';
+export default class Thread extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let { count: threadCount, className, iconTitle, dataId, align } = this.props;
+    let count = threadCount === '0' ? '1' : threadCount;
+
+    return (
+      <Button
+        customClass={`${style.container} ${style[`align_${align}`]} ${className}`}
+        title={iconTitle}
+        dataId={dataId}
+      >
+        <Icon name='ZD-TK-thread' size='9' />
+        <span className={style.count}>{count}</span>
+      </Button>
+    );
+  }
+}
+Thread.propTypes = {
+  align: PropTypes.oneOf(['left', 'right']),
+  className: PropTypes.string,
+  count: PropTypes.string,
+  dataId: PropTypes.string,
+  iconTitle: PropTypes.string
+};
+Thread.defaultProps = {
+  align: 'left',
+  className: ''
+};
+if (__DOCS__) {
+  Thread.docs = {
+    folderName: 'List',
+    componentGroup: 'Thread'
+  };
+}

package/src/list/Thread/Thread.module.css

@@ -0,0 +1,31 @@
+.varClass {
+  --icon_color: var(--zdt_thread_iconText);
+}
+.container {
+  composes: varClass;
+  position: relative;
+  color: var(--icon_color);
+  cursor: pointer;
+}
+.container:hover {
+  --icon_color: var(--zdt_thread_hover_iconText);
+}
+.count {
+  font-size: var(--zd_font_size9);
+}
+.align_left .count {
+  position: absolute;
+  line-height: normal;
+  text-align: left;
+  left: var(--zd_size8);
+  top: var(--zd_size3);
+}
+.align_right {
+  composes: dInflex alignFend from '~@zohodesk/components/lib/common/common.module.css';
+}
+.align_right .count {
+  position: relative;
+  bottom: var(--zd_size2);
+  right: var(--zd_size5);
+  float: right;
+}

package/src/list/Thread/docs/Thread__default.docs.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Thread from '../Thread';
+export default class Thread__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (<Thread count='1' />);
+  }
+}
+if (__DOCS__) {
+  Thread__default.docs = {
+    folderName: 'List',
+    componentGroup: 'Thread'
+  };
+}