@zohodesk/dot 1.0.0-beta.18 → 1.0.0-beta.180

package/src/list/SecondaryText/SecondaryText.js

@@ -7,13 +7,15 @@ export default class SecondaryText extends Component {
   }
 
   render() {
-    let { className, text, dataTitle, dataId, onClick } = this.props;
+    let { className, text, dataTitle, dataId, onClick,customProps } = this.props;
+    let {SecondaryTextProps}=customProps;
     return (
       <div
         className={`${style.secondaryText} ${className ? className : ''}`}
         data-title={dataTitle}
         data-id={dataId}
         onClick={onClick}
+        {...SecondaryTextProps}
       >
         {text}
       </div>
@@ -24,10 +26,15 @@ SecondaryText.propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
+  onClick: PropTypes.func,
   text: PropTypes.string,
-  onClick: PropTypes.func
+  customProps:PropTypes.shape({
+    SecondaryTextProps: PropTypes.object
+  })
+};
+SecondaryText.defaultProps = {
+  customProps:{}
 };
-SecondaryText.defaultProps = {};
 if (__DOCS__) {
   SecondaryText.docs = {
     folderName: 'List',

package/src/list/SecondaryText/SecondaryText.module.css

@@ -3,26 +3,41 @@
   vertical-align: middle;
   bottom: var(--zd_size1);
   position: relative;
-  font-size: var(--zd_size8);
+  font-size: var(--zd_font_size8);
 }
-.disable{
+.icon {
+  display: block;
+}
+.disable {
   cursor: not-allowed;
 }
+.textBold {
+  font-family: var(--zd_bold);
+  color: var(--zdt_secondaryText_black_text);
+}
+.textStyle, .link{
+display: block
+}
+.textStyle.textBold {
+  font-family: var(--zd_bold);
+  color: var(--zdt_secondaryText_black_text);
+}
 .ticketId,
+.link,
 .textStyle,
 .secondaryText,
 .ratingText,
 .phoneNumber {
-  color: var(--dot_text_shuttleGrey);
+  color: var(--zdt_secondaryText_secondaryText_text);
 }
 .textStyle,
 .secondaryText {
-  font-size: var(--zd_size12);
+  font-size: var(--zd_font_size12);
 }
 .ticketId,
 .phoneNumber,
 .ratingText {
-  font-size: var(--zd_size11);
+  font-size: var(--zd_font_size12);
 }
 .textStyle,
 .secondaryText,
@@ -34,30 +49,50 @@
 }
 .textStyle:hover,
 .ticketIdLink,
-.phoneNumber:hover {
-  color: var(--dot_text_primary);
+.phoneNumber:hover,
+.link:hover {
+  color: var(--zdt_secondaryText_blue_text);
+}
+.link:focus, .link:focus .textStyle, .link:focus .phoneNumber{
+  color: var(--zdt_secondaryText_blue_text);
 }
 .ticketIdLink {
   cursor: pointer;
 }
+.ticketIdLink:hover, .ticketIdLink:focus {
+  color: var(--zdt_secondaryText_blue_hover_text);
+}
+.primaryAccountNameCnt {
+  max-width: 100%;
+}
 /* status */
-.priorityText,
-.statusText {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+.font_regular {
+  font-family: var(--zd_regular);
 }
-.textBold {
+.font_semibold {
   font-family: var(--zd_semibold);
+}
+.font_bold {
+  font-family: var(--zd_bold);
+}
+.font_semibold,
+.font_bold,
+.textBold {
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
 }
+.priorityText,
+.statusText {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+
 .priorityText {
-  font-size: var(--zd_size12);
+  font-size: var(--zd_font_size12);
   max-width: 100%;
 }
 .departmentText {
-  font-size: var(--zd_size12);
-  color: var(--dot_text_shuttleGrey);
+  font-size: var(--zd_font_size12);
+  color: var(--zdt_secondaryText_secondaryText_text);
   max-width: 100%;
-  composes: inlineBlockMiddle from '../listCommon.module.css';
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
 /* HappinessRating Style */
@@ -66,26 +101,26 @@
 }
 .happinessImg {
   width: var(--zd_size10);
-  margin: 0 var(--zd_size4) var(--zd_size1) 0;
+  margin: 0 var(--zd_size4) 0 0;
   vertical-align: middle;
 }
 
 /* colors */
 .gray {
-  color: var(--dot_text_shuttleGrey);
+  color: var(--zdt_secondaryText_gray_text);
 }
 .orange {
-  color: var(--dot_text_vividOrange);
+  color: var(--zdt_secondaryText_orage_text);
 }
 .green {
-  color: var(--dot_text_strongGreen);
+  color: var(--zdt_secondaryText_green_text);
 }
 .red {
-  color: var(--dot_text_brightRed);
+  color: var(--zdt_secondaryText_red_text);
 }
 .blue {
-  color: var(--dot_text_primary);
+  color: var(--zdt_secondaryText_blue_text);
 }
 .black {
-  color: var(--dot_text_black);
+  color: var(--zdt_secondaryText_black_text);
 }

package/src/list/SecondaryText/StatusText.js

@@ -7,14 +7,14 @@ export default class StatusText extends Component {
   }
 
   render() {
-    let { className, color, text, dataTitle, isBold } = this.props;
+    let { className, color, text, dataTitle, fontWeight, dataId } = this.props;
     return (
       <div
         className={`${style.statusText} ${style[color]} ${
-          isBold ? style.textBold : ''
+          style[`font_${fontWeight}`]
         } ${className ? className : ''}`}
         data-title={dataTitle}
-        data-id='statusContainer'
+        data-id={dataId}
       >
         {text}
       </div>
@@ -23,21 +23,16 @@ export default class StatusText extends Component {
 }
 StatusText.propTypes = {
   className: PropTypes.string,
-  color: PropTypes.oneOf([
-    'default',
-    'red',
-    'green',
-    'gray',
-    'orange',
-    'black'
-  ]),
+  color: PropTypes.oneOf(['red', 'green', 'gray', 'orange', 'black']),
+  dataId: PropTypes.string,
   dataTitle: PropTypes.string,
-  isBold: PropTypes.bool,
+  fontWeight: PropTypes.oneOf(['regular', 'semibold', 'bold']),
   text: PropTypes.string
 };
 StatusText.defaultProps = {
   color: 'black',
-  isBold: false
+  dataId: 'statusContainer',
+  fontWeight: 'regular'
 };
 if (__DOCS__) {
   StatusText.docs = {

package/src/list/SecondaryText/TicketId.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import Link from '../../Link/Link';
 import style from './SecondaryText.module.css';
 export default class TicketId extends Component {
   constructor(props) {
@@ -7,17 +8,40 @@ export default class TicketId extends Component {
   }
 
   render() {
-    let { text, className, dataId, isLink, dataTitle, onClick } = this.props;
+    let {
+      text,
+      className,
+      dataId,
+      isLink,
+      dataTitle,
+      onClick,
+      url,
+      target,
+      urlName,
+      urlData
+    } = this.props;
     return (
       <div
         className={`${style.ticketId} ${isLink ? style.ticketIdLink : ''} ${
           className ? className : ''
-          }`}
+        }`}
         data-id={dataId}
         data-title={dataTitle}
-        onClick={onClick}
+        onClick={!isLink && onClick}
       >
-        {text}
+        {isLink ? (
+          <Link
+            urlName={urlName}
+            urlData={urlData}
+            href={url}
+            target={target}
+            onClick={onClick}
+          >
+            {text}
+          </Link>
+        ) : (
+          text
+        )}
       </div>
     );
   }
@@ -26,9 +50,13 @@ TicketId.propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
+  isLink: PropTypes.string,
   onClick: PropTypes.func,
+  target: PropTypes.oneOf(['_blank', '_self']),
   text: PropTypes.string,
-  isLink: PropTypes.string
+  url: PropTypes.string,
+  urlData: PropTypes.string,
+  urlName: PropTypes.string
 };
 TicketId.defaultProps = {
   dataId: 'ticketId'

package/src/list/SecondaryText/Website.js

@@ -27,6 +27,7 @@ export default class Website extends Component {
         ) : (
           <div
             className={`${style.secondaryText} ${className ? className : ''}`}
+            data-title={text}
           >
             {text}
           </div>

package/src/list/SecondryPanel/SecondryPanel.js

@@ -3,53 +3,65 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 /**** Components ****/
-import { ResponsiveBox, Box } from '@zohodesk/components/lib/Layout';
+import { Box } from '@zohodesk/components/lib/Layout';
 import Dot from '../Dot/Dot';
-
+import Container from '@zohodesk/components/lib/Layout/Container';
 /**** CSS ****/
 import style from './SecondryPanel.module.css';
 
 export default class SecondryPanel extends Component {
   render() {
     let { children, className } = this.props;
-    return <div className={className ? className : ''}>{children}</div>;
+    return <div className={className}>{children}</div>;
   }
 }
 SecondryPanel.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string
 };
+SecondryPanel.defaultProps = {
+  className: ''
+};
 
 export class SecondryPanelUL extends Component {
   render() {
-    let { children, className, dataId } = this.props;
+    let { children, className, dataId, align } = this.props;
     return (
-      <div
-        className={`${style.listItemContainer} ${className ? className : ''}`}
-        data-id={dataId}
+      <Container
+        isInline
+        isCover={false}
+        alignBox='row'
+        align={align}
+        className={`${style.listItemContainer} ${className}`}
+        dataId={dataId}
       >
         {children}
-      </div>
+      </Container>
     );
   }
 }
 SecondryPanelUL.propTypes = {
+  align: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
   dataId: PropTypes.string
 };
+SecondryPanelUL.defaultProps = {
+  className: '',
+  align: 'baseline'
+};
 
 export class SecondryPanelLI extends Component {
   render() {
-    let { children, className, isHiddenSizes, isShrink } = this.props;
+    let { children, className, isShrink, dataId } = this.props;
     return (
       <Box
         flexible
+        dataId={dataId}
         // eslint-disable-next-line react/forbid-component-props
-        className={`${className ? className : ''}`}
+        className={className}
         adjust
         shrink={isShrink ? true : false}
-        isHiddenSizes={isHiddenSizes}
       >
         {children}
       </Box>
@@ -59,11 +71,12 @@ export class SecondryPanelLI extends Component {
 SecondryPanelLI.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  isHiddenSizes: PropTypes.array,
+  dataId: PropTypes.string,
   isShrink: PropTypes.bool
 };
 SecondryPanelLI.defaultProps = {
-  isShrink: true
+  isShrink: true,
+  className: ''
 };
 
 export class SecondryPanelItem extends Component {
@@ -75,25 +88,34 @@ export class SecondryPanelItem extends Component {
       isDot,
       flex,
       clipped,
-      dotSpacingType
+      dotSpacingType,
+      title
     } = this.props;
     return (
-      <div
-        className={`${clipped ? style.dottedStyle : ''} ${
-          flex ? style.panelListItemFlex : style.panelListItem
-        } ${className ? className : ''}`}
+      <Container
+        align='baseline'
+        isInline={flex ? false : true}
+        className={className}
+        data-title={title}
+        alignBox='row'
       >
-        <Box flexible>{children}</Box>
+        <Box
+          flexible
+          shrink={clipped}
+          className={`${clipped ? style.dottedStyle : ''}`}
+        >
+          {children}
+        </Box>
         {isDot ? (
           <Box>
             <Dot
               // eslint-disable-next-line react/forbid-component-props
-              className={`${style.dot} ${dotClass ? dotClass : ''}`}
+              className={`${dotClass ? dotClass : ''}`}
               spacingType={dotSpacingType}
             />
           </Box>
         ) : null}
-      </div>
+      </Container>
     );
   }
 }
@@ -104,13 +126,15 @@ SecondryPanelItem.propTypes = {
   dotClass: PropTypes.string,
   dotSpacingType: PropTypes.oneOf(['minimalList', 'list']),
   flex: PropTypes.bool,
-  isDot: PropTypes.bool
+  isDot: PropTypes.bool,
+  title: PropTypes.string
 };
 SecondryPanelItem.defaultProps = {
   clipped: true,
   dotSpacingType: 'list',
   flex: true,
-  isDot: true
+  isDot: true,
+  className: ''
 };
 if (__DOCS__) {
   SecondryPanel.docs = {

package/src/list/SecondryPanel/SecondryPanel.module.css

@@ -1,27 +1,6 @@
 .listItemContainer {
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-  align-items: baseline;
-  max-width: 100%;
-}
-.panelListItem {
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-}
-.panelListItem,
-.panelListItemFlex {
-  align-items: baseline;
   max-width: 100%;
 }
 .dottedStyle {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-.panelListItemFlex {
-  composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
-}
-.panelListItemBox {
-  composes: flexgrow from '~@zohodesk/components/lib/common/common.module.css';
-  composes: flexshrink from '~@zohodesk/components/lib/common/common.module.css';
-  composes: flexbasis from '~@zohodesk/components/lib/common/common.module.css';
-}
-.dot {
-  composes: flexshrink from '~@zohodesk/components/lib/common/common.module.css';
-}
+}

package/src/list/SecondryPanel/docs/SecondryPanelDocs.module.css

@@ -3,29 +3,25 @@
   margin-bottom: 20px;
   padding: 10px;
 }
-@media only screen and (max-width: 500px) {
-  .layoutContainer {
-    flex-direction: column;
-  }
+
+.minilayoutContainer {
+  flex-direction: column;
 }
 .container {
   background: gray;
 }
 .itemId {
-  composes: flexshrink from "~@zohodesk/components/lib/common/common.module.css";
+  composes: flexshrink from '~@zohodesk/components/lib/common/common.module.css';
 }
 .itemInner {
-  composes: dflex from "~@zohodesk/components/lib/common/common.module.css";
-  composes: alignVertical from "~@zohodesk/components/lib/common/common.module.css";
+  composes: dflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
   padding: 5px;
   background: #fafafa;
-  max-width: 15rem;
+  max-width: var(--zd_size240);
   font-size: 13px;
 }
 .itemText {
-  composes: flexgrow from "~@zohodesk/components/lib/common/common.module.css";
-  composes: flexshrink from "~@zohodesk/components/lib/common/common.module.css";
-  composes: flexbasis from "~@zohodesk/components/lib/common/common.module.css";
+  composes: flexgrow flexshrink flexbasis from '~@zohodesk/components/lib/common/common.module.css';
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;

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

@@ -6,55 +6,79 @@ import SecondryPanel, {
 } 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 (
-      <SecondryPanel className={style.layoutWrapper}>
-        <SecondryPanelUL className={style.layoutContainer}>
-          <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}>
+      <ResponsiveReceiver query={this.responsiveFunc}>
+        {({ uptoTablet }) => (
+          <SecondryPanel className={style.layoutWrapper}>
+            <SecondryPanelUL
+              className={`${
+                uptoTablet
+                  ? style.minilayoutContainer
+                  : ''
+              }`}
+            >
               <SecondryPanelLI>
-                <span className={style.itemInner}>
-                  <span className={style.itemText}>28 Jun 2019</span>
-                  <span className={style.itemDot} />
-                </span>
+                <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>
-                <span className={style.itemInner}>
-                  <span className={style.itemText}>28 May 2019 07:41 PM</span>
-                  <span className={style.itemDot} />
-                </span>
+                <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>
-          </SecondryPanelLI>
-        </SecondryPanelUL>
-      </SecondryPanel>
+          </SecondryPanel>
+        )}
+      </ResponsiveReceiver>
     );
   }
 }

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

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