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

package/{es/deprecated/Theme/dotDefaultTheme.module.css → src/Appearance/default/mode/dotDefaultMode.module.css}

@@ -1,10 +1,14 @@
-[data-theme='default'] {
+[data-mode='default'] {
   /* action button */
-  --zdt_actionButton_bg: var(--zdt_cta_primary_bg);
-  --zdt_actionButton_hover_bg: var(--zdt_cta_primary_hover_bg);
-  --zdt_actionButton_text: var(--zdt_cta_secondary_text);
+  --zdt_actionButton_primaryFilled_bg: var(--zdt_cta_primary_bg);
+  --zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
+  --zdt_actionButton_primary_border: var(--zdt_cta_primary_border);
+  --zdt_actionButton_primary_hover_border: var(--zdt_cta_primary_hover_border);
   --zdt_actionButton_separator_border: var(--zdt_cta_secondary_border);
   --zdt_actionButton_separator_hover_border: var(--zdt_cta_primary_border);
+  --zdt_actionButton_primaryFilled_text: var(--zdt_cta_secondary_text);
+  --zdt_actionButton_primary_text: var(--zdt_cta_primary_text);
+  --zdt_actionButton_primary_hover_text: var(--zdt_cta_primary_hover_text);
 
   /* alert header */
   --zdt_alertheader_default_bg: var(--zd_bg_smoke45);
@@ -23,12 +27,12 @@
 
   /* attachment */
   --zdt_attachment_default_bg: var(--dot_bg_white);
-  --zdt_attachment_default_border: var(--dot_border_paleNavy);
+  --zdt_attachment_default_border: var(--zdt_cta_grey_40_border);
   --zdt_attachment_default_hover_border: var(--dot_border_slateGrey);
   --zdt_attachment_hover_text: var(--dot_text_black);
   --zdt_attachment_transparent_bg: var(--dot_bg_mirror);
   --zdt_attachment_size_text: var(--dot_text_shuttleGrey);
-  --zdt_attachment_download_bg: var(--dot_bg_hawkesBlue);
+  --zdt_attachment_download_bg: var(--zdt_cta_grey_20_bg);
   --zdt_attachment_download_hover_bg: var(--dot_bg_slateGrey);
   --zdt_attachment_download_hover_text: var(--dot_text_white);
 
@@ -38,9 +42,9 @@
 
   /* avatar collision */
   --zdt_avatarcollision_on_border: var(--zdt_cta_primary_border);
-  --zdt_avatarcollision_off_border: var(--dot_border_paleBlue);
+  --zdt_avatarcollision_off_border: var(--zdt_cta_grey_35_border);
   --zdt_avatarcollision_off_after_border: var(--zd_border_pure);
-  --zdt_avatarcollision_off_after_bg: var(--dot_bg_paleBlue);
+  --zdt_avatarcollision_off_after_bg: var(--zdt_cta_grey_35_bg);
   --zdt_avatarcollision_pop_bg: var(--zd_bg_dark9);
   --zdt_avatarcollision_pop_text: var(--zd_text_smoke24);
   --zdt_avatarcollision_icon_text: var(--dot_text_white);
@@ -52,7 +56,7 @@
   --zdt_avatarIcon_grey_icon: var(--dot_text_shuttleGrey);
   --zdt_avatarIcon_success_icon: var(--dot_text_strongGreen);
   --zdt_avatarIcon_smoke_icon: var(--zd_text_smoke18);
-  --zdt_avatarIcon_default_border: var(--dot_border_paleNavy);
+  --zdt_avatarIcon_default_border: var(--zdt_cta_grey_40_border);
   --zdt_avatarIcon_default_hover_border: var(--dot_border_slateGrey);
   --zdt_avatarIcon_primary_border: var(--dot_border_primary);
   --zdt_avatarIcon_primary_hover_border: var(--dot_border_cobalt);
@@ -71,7 +75,7 @@
 
   /* avatar thread */
   --zdt_avatarthread_bg: var(--dot_bg_white);
-  --zdt_avatarthread_default_border: var(--dot_border_paleBlue);
+  --zdt_avatarthread_default_border: var(--zdt_cta_grey_35_border);
   --zdt_avatarthread_default_text: var(--dot_text_shuttleGrey);
   --zdt_avatarthread_primary_border: var(--dot_border_primary);
   --zdt_avatarthread_primary_text: var(--dot_text_primary);
@@ -93,25 +97,23 @@
   --zdt_channelIcon_topIcon_bg: var(--dot_bg_white);
   --zdt_channelIcon_topIcon_iconGreen: var(--dot_text_strongGreen);
   --zdt_channelIcon_topIcon_iconYellow: var(--dot_text_brightRed);
-  --zdt_channelIcon_topIcon_border: var(--dot_border_paleBlue);
+  --zdt_channelIcon_topIcon_border: var(--zdt_cta_grey_35_border);
 
   /* drawer */
   --zdt_drawer_default_box_shadow: rgba(0, 0, 0, 0.176);
   --zdt_drawer_default_bg: var(--dot_bg_white);
-  --zdt_drawer_header_bg: var(--dot_bg_catskillWhite);
-  --zdt_drawer_header_border: var(--dot_border_paleBlue);
+  --zdt_drawer_header_bg: var(--zdt_cta_grey_10_bg);
+  --zdt_drawer_header_border: var(--zdt_cta_grey_35_border);
   --zdt_drawer_title_text: var(--dot_text_black);
 
   /* toggle dropdown */
-  --zdt_toggledropdown_line_border: var(--dot_border_solitude);
+  --zdt_toggledropdown_line_border: var(--zdt_cta_grey_15_border);
 
   /* common empty state */
   --zdt_commonEmptyState_default_title: var(--dot_text_bunker);
   --zdt_commonEmptyState_default_description: var(--dot_text_shuttleGrey);
   --zdt_commonEmptyState_default_link: var(--zdt_cta_primary_text);
   --zdt_commonEmptyState_default_link_hover: var(--zdt_cta_primary_hover_text);
-  --zdt_commonEmptyState_dark_title: #fff;
-  --zdt_commonEmptyState_dark_description: #fff;
 
   /* edition page */
   --zdt_editionpage_footer_text: var(--zd_text_smoke5);
@@ -147,7 +149,7 @@
 
   /* form action */
   --zdt_formAction_bg: var(--dot_bg_white);
-  --zdt_formAction_border: var(--dot_border_solitude);
+  --zdt_formAction_border: var(--zdt_cta_grey_15_border);
 
   /* freezelayer */
   --zdt_freezelayer_default_bg: rgba(0, 0, 0, 0.45);
@@ -180,7 +182,7 @@
   --zdt_setupdetail_infoclose: var(--zd_text_smoke20);
 
   /* subtab layout */
-  --zdt_subtablayout_border: var(--dot_border_solitude);
+  --zdt_subtablayout_border: var(--zdt_cta_grey_15_border);
   --zdt_subtablayout_tabhead_bg: var(--dot_bg_white);
   --zdt_subtablayout_plusicon_bg: var(--zd_bg_smoke3);
   --zdt_subtablayout_primary_border: var(--zd_border_smoke5);
@@ -200,7 +202,7 @@
   --zdt_departmentdropdown_default_hover_text: var(--dot_text_black);
 
   /* dot */
-  --zdt_dot_text: var(--dot_text_paleNavy);
+  --zdt_dot_text: var(--zdt_cta_grey_40_text);
 
   /* dot new */
   --zdt_dotnew_default_bg: var(--zdt_cta_primary_bg);
@@ -227,12 +229,14 @@
   --zdt_icons_hover_red: var(--dot_text_brightRed);
 
   /* list layout */
-  --zdt_listLayout_border: var(--dot_border_solitude);
-  --zdt_listLayout_hover_border: var(--dot_listItemHover);
-  --zdt_listLayout_active_border: var(--dot_listItemActive);
+  --zdt_listLayout_border: var(--zdt_cta_grey_15_border);
+  --zdt_listLayout_hover_bg: var(--dot_listItemHover);
+  --zdt_listLayout_active_bg: var(--dot_listItemActive);
+  --zdt_listLayout_active_border: var(--zdt_cta_primary_border);
+  --zdt_listLayout_keyboard_active_border:var(--dot_border_slateGrey);
 
   /* list stencils */
-  --zdt_liststencils_innercontainer_border: var(--dot_border_solitude);
+  --zdt_liststencils_innercontainer_border: var(--zdt_cta_grey_15_border);
 
   /* secondary text */
   --zdt_secondaryText_gray_text: var(--dot_text_shuttleGrey);
@@ -245,7 +249,7 @@
   --zdt_secondaryText_secondaryText_text: var(--dot_text_shuttleGrey);
 
   /* status dropdown */
-  --zdt_statusdropdown_line_border: var(--dot_border_solitude);
+  --zdt_statusdropdown_line_border: var(--zdt_cta_grey_15_border);
 
   /* status listitem */
   --zdt_statuslistitem_list_text: var(--dot_text_black);
@@ -291,8 +295,8 @@
   );
 
   /* lookup header common */
-  --zdt_lookupheader_default_bg: var(--dot_bg_catskillWhite);
-  --zdt_lookupheader_default_border: var(--dot_border_paleBlue);
+  --zdt_lookupheader_default_bg: var(--zdt_cta_grey_10_bg);
+  --zdt_lookupheader_default_border: var(--zdt_cta_grey_35_border);
   --zdt_lookupheader_para_text: var(--dot_text_shuttleGrey);
   --zdt_lookupheader_input_border: var(--zd_border_smoke33);
 
@@ -302,7 +306,7 @@
   --zdt_lookupclose_default_hover_text: var(--dot_text_black);
 
   /* lookup search */
-  --zdt_lookupsearch_boxstyle_border: var(--dot_border_paleBlue);
+  --zdt_lookupsearch_boxstyle_border: var(--zdt_cta_grey_35_border);
   --zdt_lookupsearch_boxstyle_hover_border: var(--dot_inputLineHover);
   --zdt_lookupsearch_boxstyle_activer_border: var(--dot_inputLineFocus);
 
@@ -456,9 +460,9 @@
   --zdt_commonalert_danger_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_error_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_warning_hover_bg: #fff1e6;
-  --zdt_commonalert_light_hover_bg: var(--dot_bg_catskillWhite);
+  --zdt_commonalert_light_hover_bg: var(--zdt_cta_grey_10_bg);
 
-  --zdt_commonalert_secondlayer_bg: var(--dot_text_catskillWhite);
+  --zdt_commonalert_secondlayer_bg: var(--dot_bg_catskillWhite);
   --zdt_commonalert_default_icon: var(--dot_text_brightRed);
   --zdt_commonalert_success_icon: var(--dot_text_strongGreen);
   --zdt_commonalert_info_icon: var(--zdt_cta_primary_border);
@@ -488,7 +492,7 @@
 
   /* alert lookup */
   --zdt_alertlookup_bg: var(--dot_bg_white);
-  --zdt_alertlookup_border: var(--dot_border_solitude);
+  --zdt_alertlookup_border: var(--zdt_cta_grey_15_border);
   --zdt_alertlookuop_text: var(--dot_text_black);
 
   /* alert lookup new */

package/src/Appearance/default/themes/blue/blueDefaultDotTheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='default'][data-theme='blue'] {
+    /* freezelayer */
+    --zdt_freezelayer_darklight_bg: rgba(44, 51, 77, 0.94);
+
+    /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_link: #6cbbfc;
+    --zdt_commonEmptyState_dark_link_hover: #2469ff;
+}

package/src/Appearance/default/themes/green/greenDefaultDotTheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='default'][data-theme='green'] {
+    /* freezelayer */
+    --zdt_freezelayer_darklight_bg: rgba(15, 34, 38, 0.94);
+
+    /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_link: #4ac064;
+    --zdt_commonEmptyState_dark_link_hover: #0e7526;
+}

package/src/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='default'][data-theme='orange'] {
+    /* freezelayer */
+    --zdt_freezelayer_darklight_bg: rgba(36, 30, 19, 0.94);
+
+    /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_link: #e57717;
+    --zdt_commonEmptyState_dark_link_hover: #b25900;
+}

package/src/Appearance/default/themes/red/redDefaultDotTheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='default'][data-theme='red'] {
+    /* freezelayer */
+    --zdt_freezelayer_darklight_bg: rgba(34, 15, 27, 0.94);
+    
+    /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_link: #ff6363;
+    --zdt_commonEmptyState_dark_link_hover: #ab1a18;
+}

package/src/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='default'][data-theme='yellow'] {
+    /* freezelayer */
+    --zdt_freezelayer_darklight_bg: rgba(34, 36, 18, 0.94);
+
+    /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_link: #e8b923;
+    --zdt_commonEmptyState_dark_link_hover: #b59100;
+}

package/src/Attachment/Attachment.js

@@ -0,0 +1,119 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import Link from '../Link/Link';
+import style from './Attachment.module.css';
+export default class Attachment extends React.Component {
+  render() {
+    let {
+      onClick,
+      dataId,
+      size,
+      iconName,
+      fileName,
+      fileSize,
+      downloadLink,
+      palette,
+      tooltip,
+      fileInfo,
+      i18nKeys
+    } = this.props;
+    let { downloadTitle = 'Download' } = i18nKeys;
+    return (
+      <Container
+        isInline
+        className={`${style.attachment} ${
+          onClick ? style.attachmentHover : ''
+        } ${style[`palette_${palette}`]} ${style[size]}`}
+        onClick={onClick}
+        dataId={dataId}
+        data-title={tooltip}
+        alignBox='row'
+        isCover={false}
+      >
+        {iconName ? (
+          <Box className={style.attachleft}>
+            <Container align='both'>
+              <Icon name={iconName} iconClass={style.attachIcon} />
+            </Container>
+          </Box>
+        ) : null}
+        <Box flexible className={style.attachright}>
+          <Container align='horizontal'>
+            {fileName ? (
+              <Box className={style.atatchName} data-title={fileName}>
+                {fileName}
+              </Box>
+            ) : null}
+            <Box className={style.footer}>
+              <Container alignBox='row' align='baseline' isCover={false}>
+                {fileSize ? (
+                  <Box
+                    className={style.attachSize}
+                    adjust
+                    shrink
+                    data-title={fileSize}
+                  >
+                    {fileSize}
+                  </Box>
+                ) : null}
+
+                {fileInfo ? (
+                  <React.Fragment>
+                    <Box className={style.dot}></Box>
+                    <Box
+                      className={style.attachSize}
+                      adjust
+                      shrink
+                      data-title={fileInfo}
+                    >
+                      {fileInfo}
+                    </Box>
+                  </React.Fragment>
+                ) : null}
+              </Container>
+            </Box>
+          </Container>
+        </Box>
+        {downloadLink ? (
+          <Link
+            target='_self'
+            href={downloadLink}
+            className={style.attachDownload}
+            title={downloadTitle}
+            hasReload={true}
+          >
+            <Icon name='ZD-downloadNew' iconClass={style.downIcon} />
+          </Link>
+        ) : null}
+      </Container>
+    );
+  }
+}
+Attachment.propTypes = {
+  dataId: PropTypes.string,
+  downloadLink: PropTypes.string,
+  fileInfo: PropTypes.string,
+  fileName: PropTypes.string,
+  fileSize: PropTypes.string,
+  iconName: PropTypes.string,
+  onClick: PropTypes.func,
+  palette: PropTypes.oneOf(['transparent', 'default']),
+  size: PropTypes.oneOf(['small', 'medium']),
+  i18nKeys: PropTypes.shape({
+    downloadTitle: PropTypes.string
+  })
+};
+Attachment.defaultProps = {
+  size: 'medium',
+  palette: 'default',
+  dataId: 'attachment',
+  i18nKeys: {}
+};
+
+if (__DOCS__) {
+  Attachment.docs = {
+    componentGroup: 'Attachment'
+  };
+}

package/src/Attachment/Attachment.module.css

@@ -0,0 +1,121 @@
+.attachment {
+  border: 1px solid var(--zdt_attachment_default_border);
+  border-radius: 2px;
+  position: relative;
+  overflow: hidden;
+}
+.attachmentHover {
+  cursor: pointer;
+}
+.palette_default {
+  background-color: var(--zdt_attachment_default_bg);
+}
+.palette_transparent {
+  background-color: var(--zdt_attachment_transparent_bg);
+}
+.attachmentHover:hover,
+.attachmentHover:hover .attachleft {
+  border-color: var(--zdt_attachment_default_hover_border);
+}
+.attachmentHover:hover .attachleft i {
+  color: var(--zdt_attachment_hover_text);
+}
+.attachment:hover .attachDownload {
+  display: block;
+}
+.attachmentHover:hover .attachSize {
+  color: var(--zdt_attachment_hover_text);
+}
+
+.medium {
+  width: var(--zd_size210);
+  height: var(--zd_size60);
+}
+.small {
+  width: var(--zd_size145);
+  height: var(--zd_size40);
+}
+.attachleft {
+  border-right: 1px solid var(--zdt_attachment_default_border);
+}
+.medium .attachleft {
+  width: var(--zd_size50);
+}
+.small .attachleft {
+  width: var(--zd_size40);
+}
+
+.medium .attachright {
+  padding: var(--zd_size5) var(--zd_size25) var(--zd_size5) var(--zd_size10);
+}
+.small .attachright {
+  padding: 0 var(--zd_size10) 0 var(--zd_size10);
+}
+
+.footer {
+  font-size: 0;
+  margin-top: var(--zd_size3);
+}
+.medium .atatchName {
+  font-size: var(--zd_font_size14);
+  line-height: var(--zd_size20);
+}
+.small .atatchName {
+  font-size: var(--zd_font_size12);
+  line-height: var(--zd_size15);
+}
+
+.attachSize {
+  color: var(--zdt_attachment_size_text);
+}
+.atatchName,
+.attachSize {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.medium .attachSize {
+  font-size: var(--zd_font_size11);
+}
+.small .attachSize {
+  font-size: var(--zd_font_size10);
+}
+.attachDownload {
+  position: absolute;
+  top: calc(var(--zd_size1) * -1);
+  right: calc(var(--zd_size1) * -1);
+  background-color: var(--zdt_attachment_download_bg);
+  text-align: center;
+  display: none;
+}
+.medium .attachDownload {
+  height: var(--zd_size25);
+  width: var(--zd_size25);
+  line-height: var(--zd_size23);
+}
+.small .attachDownload {
+  height: var(--zd_size20);
+  width: var(--zd_size20);
+  line-height: var(--zd_size18);
+}
+.attachDownload:hover {
+  background-color: var(--zdt_attachment_download_hover_bg);
+}
+
+.attachIcon {
+  font-size: var(--zd_font_size20);
+}
+.downIcon {
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_attachment_size_text);
+}
+.attachDownload:hover .downIcon {
+  color: var(--zdt_attachment_download_hover_text);
+}
+
+.dot {
+  background-color: var(--zdt_dot_text);
+  height: 2px;
+  width: 2px;
+  border-radius: 50%;
+  margin: 0 var(--zd_size6);
+}

package/src/Attachment/docs/Attachment__default.docs.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Attachment from '../Attachment';
+export default class Attachment__default extends React.Component {
+  render() {
+    return (
+      <div>
+        <Attachment
+          fileName='20993016_1413168518775205_8593331352042442533_n.jpg'
+          fileSize='31.5 KB'
+          downloadLink='https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png'
+          tooltip='Attachment'
+          iconName='ZD-filePicture'
+          fileInfo='2 days ago'
+        />
+        <Attachment
+          fileName='20993016_1413168518775205_8593331352042442533_n.jpg'
+          fileSize='31.5 KB'
+          downloadLink='https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png'
+          tooltip='Attachment'
+          iconName='ZD-filePicture'
+        />
+        <Attachment
+          fileName='20993016_1413168518775205_8593331352042442533_n.jpg'
+          downloadLink='https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png'
+          tooltip='Attachment'
+          iconName='ZD-filePicture'
+        />
+        <br></br>
+        <br></br>
+        <Attachment
+          fileName='20993016_1413168518775205_8593331352042442533_n.jpg'
+          fileSize='31.5 KB'
+          downloadLink='https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png'
+          tooltip='Attachment'
+          iconName='ZD-filePicture'
+          size='small'
+          fileInfo='15 days ago'
+        />
+        <Attachment
+          fileName='20993016_1413168518775205_8593331352042442533_n.jpg'
+          fileSize='31.5 KB'
+          downloadLink='https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png'
+          tooltip='Attachment'
+          iconName='ZD-filePicture'
+          size='small'
+        />
+        <Attachment
+          fileName='20993016_1413168518775205_8593331352042442533_n.jpg'
+          downloadLink='https://d1ydxa2xvtn0b5.cloudfront.net/app/images/smartapplogo.c9bf244c1c797161b30a.png'
+          tooltip='Attachment'
+          iconName='ZD-filePicture'
+          size='small'
+        />
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  Attachment__default.docs = {
+    componentGroup: 'Attachment'
+  };
+}