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

package/src/AlphabeticList/AlphabeticList.js

@@ -0,0 +1,176 @@
+/*** Libraries ***/
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+/*** CSS ***/
+import style from './AlphabeticList.module.css';
+
+let AlphabeticCharacters = [
+  'A',
+  'B',
+  'C',
+  'D',
+  'E',
+  'F',
+  'G',
+  'H',
+  'I',
+  'J',
+  'K',
+  'L',
+  'M',
+  'N',
+  'O',
+  'P',
+  'Q',
+  'R',
+  'S',
+  'T',
+  'U',
+  'V',
+  'W',
+  'X',
+  'Y',
+  'Z'
+];
+
+let AlphabeticCharactersWithHash = [...AlphabeticCharacters, '#'];
+
+let NumberList = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '#'];
+
+export default class AlphabeticList extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.handleSelectAll = this.handleSelectAll.bind(this);
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  handleSelectAll() {
+    let { onSelect, selectedCharacter } = this.props;
+    onSelect && selectedCharacter != 'ALL' && onSelect('ALL');
+  }
+
+  handleSelect(id) {
+    let { onSelect, selectedCharacter } = this.props;
+    onSelect && selectedCharacter !== id && onSelect(id);
+  }
+
+  render() {
+    let { selectedCharacter, align, type, i18nKeys, dataId } = this.props;
+    let { allText = 'All', allTitle = 'All' } = i18nKeys;
+    let alignType = align === 'vertical' ? style.column : style.row;
+    let letters =
+      type == 'alphabeticalwithhash'
+        ? AlphabeticCharactersWithHash
+        : type == 'alphabetical'
+        ? AlphabeticCharacters
+        : NumberList;
+
+    return (
+      <Container
+        tagName='ul'
+        isCover={false}
+        alignBox={align === 'vertical' ? 'column' : 'row'}
+        className={`${style.container} ${alignType} ${
+          type != 'alphabetical' ? style.numbers : ''
+        }`}
+        dataId='navigationDiv'
+      >
+        <Box
+          tagName='li'
+          className={`${style.list} ${style.title} ${
+            selectedCharacter === 'ALL' ? style.selected : ''
+          }`}
+          dataId={`All_${dataId}`}
+        >
+          <span
+            onClick={this.handleSelectAll}
+            className={`${style.heading} ${style.letter}`}
+            data-title={allTitle}
+          >
+            {allText}
+          </span>
+        </Box>
+        {letters.map(letter => (
+          <AlphabeticListItem
+            id={letter}
+            isActive={letter === selectedCharacter}
+            onClick={this.handleSelect}
+            text={letter}
+            key={letter}
+            dataId={dataId}
+          />
+        ))}
+      </Container>
+    );
+  }
+}
+
+AlphabeticList.propTypes = {
+  align: PropTypes.string,
+  onSelect: PropTypes.func.isRequired,
+  selectedCharacter: PropTypes.oneOf([
+    'ALL',
+    ...AlphabeticCharacters,
+    ...NumberList,
+    ...AlphabeticCharactersWithHash
+  ]),
+  type: PropTypes.oneOf(['alphabetical', 'numeral', 'alphabeticalwithhash']),
+  i18nKeys: PropTypes.shape({
+    allTitle: PropTypes.string,
+    allText: PropTypes.string
+  }),
+  dataId: PropTypes.string
+};
+
+AlphabeticList.defaultProps = {
+  align: 'vertical',
+  type: 'alphabetical',
+  i18nKeys: {},
+  dataId: 'Navi'
+};
+
+AlphabeticList.docs = {
+  componentGroup: 'Atom'
+};
+
+class AlphabeticListItem extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    let { onClick, id } = this.props;
+    onClick && onClick(id);
+  }
+
+  render() {
+    let { isActive, text, dataId } = this.props;
+    return (
+      <Box
+        flexible
+        tagName='li'
+        className={`${style.list} ${isActive ? style.selected : ''}`}
+        onClick={this.handleClick}
+        dataId={`${text}_${dataId}`}
+      >
+        <span className={style.letter}>{text}</span>
+      </Box>
+    );
+  }
+}
+
+AlphabeticListItem.propTypes = {
+  id: PropTypes.string,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func,
+  text: PropTypes.string,
+  dataId: PropTypes.string
+};
+
+AlphabeticListItem.defaultProps = {
+  isActive: false,
+  text: '',
+  dataId: 'Navi'
+};

package/src/AlphabeticList/AlphabeticList.module.css

@@ -0,0 +1,54 @@
+/* $Id$ */
+.varClass {
+  --textColor: var(--zdt_alphabeticList_text);
+  --textHoverColor: var(--zdt_alphabeticList_hover_text);
+}
+.container {
+  composes: varClass;
+  composes: h100 from '~@zohodesk/components/lib/common/common.module.css';
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  pointer-events: initial;
+}
+.column .title {
+  margin-bottom: var(--zd_size3);
+}
+.row .title {
+  margin-right: var(--zd_size3);
+}
+.row  .letter {
+  padding: 0 var(--zd_size3);
+}
+.column .letter {
+  padding: var(--zd_size3) 0;
+}
+.heading {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  max-width: 100%;
+}
+.list {
+  font-size: var(--zd_font_size11);
+  text-align: center;
+  flex-basis: var(--zd_size12);
+  cursor: pointer;
+  color: var(--textColor);
+}
+.title {
+  flex-basis: var(--zd_size15);
+}
+.letter {
+  text-transform: uppercase;
+  display: inline-block;
+}
+.numbers .list {
+  max-height: var(--zd_size35);
+}
+.list :hover,
+.selected {
+  color: var(--textHoverColor);
+}
+.title {
+  font-size: var(--zd_font_size11);
+  font-family: var(--zd_semibold);
+}

package/src/AlphabeticList/docs/AlphabeticList__default.docs.js

@@ -0,0 +1,36 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+
+/*** Components ***/
+import AlphabeticList from '../AlphabeticList';
+
+export default class AlphabeticList__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { selectedCharacter: 'C' };
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  handleSelect(selectedCharacter) {
+    this.setState({
+      selectedCharacter
+    });
+  }
+
+  render() {
+    let { selectedCharacter } = this.state;
+    return (
+      <div>
+        <AlphabeticList
+          selectedCharacter={selectedCharacter}
+          onSelect={this.handleSelect}
+        />
+      </div>
+    );
+  }
+}
+
+  AlphabeticList__default.docs = {
+    componentGroup: 'Atom'
+  };
+

package/src/AlphabeticList/docs/AlphabeticList__horizontal.docs.js

@@ -0,0 +1,44 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+
+/*** Components ***/
+import AlphabeticList from '../AlphabeticList';
+
+export default class AlphabeticList__horizontal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { selectedCharacter: 'C' };
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  handleSelect(selectedCharacter) {
+    this.setState({
+      selectedCharacter
+    });
+  }
+
+  render() {
+    let { selectedCharacter } = this.state;
+    return (
+      <div>
+        <AlphabeticList
+          selectedCharacter={selectedCharacter}
+          onSelect={this.handleSelect}
+          align='horizontal'
+        />
+        <AlphabeticList
+          type='numerals'
+          selectedCharacter={selectedCharacter}
+          onSelect={this.handleSelect}
+          align='horizontal'
+        />
+      </div>
+    );
+  }
+}
+
+if (__DOCS__) {
+  AlphabeticList__horizontal.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/{es/deprecated/Theme/dotDarkTheme.module.css → src/Appearance/dark/mode/dotDarkMode.module.css}

@@ -1,10 +1,14 @@
-[data-theme='dark'] {
+[data-mode='dark'] {
   /* 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_text);
 
   /* alert header */
   --zdt_alertheader_default_bg: var(--zd_bg_smoke45);
@@ -23,12 +27,12 @@
 
   /* attachment */
   --zdt_attachment_default_bg: #232b38;
-  --zdt_attachment_default_border: #3e4d63;
+  --zdt_attachment_default_border: var(--zdt_cta_grey_40_border);
   --zdt_attachment_default_hover_border: #828994;
   --zdt_attachment_hover_text: #e2e4e6;
   --zdt_attachment_transparent_bg: var(--dot_bg_mirror);
   --zdt_attachment_size_text: #a8b0bd;
-  --zdt_attachment_download_bg: #161b23;
+  --zdt_attachment_download_bg: var(--zdt_cta_grey_20_bg);
   --zdt_attachment_download_hover_bg: #828994;
   --zdt_attachment_download_hover_text: #232b38;
 
@@ -38,9 +42,9 @@
 
   /* avatar collision */
   --zdt_avatarcollision_on_border: var(--zdt_cta_primary_border);
-  --zdt_avatarcollision_off_border: #384157;
+  --zdt_avatarcollision_off_border: var(--zdt_cta_grey_35_border);
   --zdt_avatarcollision_off_after_border: #232b38;
-  --zdt_avatarcollision_off_after_bg: #384157;
+  --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: #e2e4e6;
@@ -52,7 +56,7 @@
   --zdt_avatarIcon_grey_icon: #a8b0bd;
   --zdt_avatarIcon_success_icon: #4ac064;
   --zdt_avatarIcon_smoke_icon: var(--zd_text_smoke18);
-  --zdt_avatarIcon_default_border: #3e4d63;
+  --zdt_avatarIcon_default_border: var(--zdt_cta_grey_40_border);
   --zdt_avatarIcon_default_hover_border: #828994;
   --zdt_avatarIcon_primary_border: #479dff;
   --zdt_avatarIcon_primary_hover_border: #1065cc;
@@ -71,7 +75,7 @@
 
   /* avatar thread */
   --zdt_avatarthread_bg: #161b23;
-  --zdt_avatarthread_default_border: #384157;
+  --zdt_avatarthread_default_border: var(--zdt_cta_grey_35_border);
   --zdt_avatarthread_default_text: #a8b0bd;
   --zdt_avatarthread_primary_border: #479dff;
   --zdt_avatarthread_primary_text: #479dff;
@@ -93,25 +97,23 @@
   --zdt_channelIcon_topIcon_bg: #232b38;
   --zdt_channelIcon_topIcon_iconGreen: #4ac064;
   --zdt_channelIcon_topIcon_iconYellow: #ff6b6b;
-  --zdt_channelIcon_topIcon_border: #384157;
+  --zdt_channelIcon_topIcon_border: var(--zdt_cta_grey_35_border);
 
   /* drawer */
   --zdt_drawer_default_box_shadow: rgba(0, 0, 0, 0.4);
   --zdt_drawer_default_bg: #232b38;
-  --zdt_drawer_header_bg: #262f3d;
-  --zdt_drawer_header_border: #384157;
+  --zdt_drawer_header_bg: var(--zdt_cta_grey_10_bg);
+  --zdt_drawer_header_border: var(--zdt_cta_grey_35_border);
   --zdt_drawer_title_text: #e2e4e6;
 
   /* toggle dropdown */
-  --zdt_toggledropdown_line_border: #2d3748;
+  --zdt_toggledropdown_line_border: var(--zdt_cta_grey_15_border);
 
   /* common empty state */
   --zdt_commonEmptyState_default_title: #e2e4e6;
   --zdt_commonEmptyState_default_description: #a8b0bd;
   --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);
@@ -180,7 +182,7 @@
   --zdt_setupdetail_infoclose: var(--zd_text_smoke20);
 
   /* subtab layout */
-  --zdt_subtablayout_border: #2d3748;
+  --zdt_subtablayout_border: var(--zdt_cta_grey_15_border);
   --zdt_subtablayout_tabhead_bg: #232b38;
   --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: #e2e4e6;
 
   /* dot */
-  --zdt_dot_text: #3e4d63;
+  --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: #ff6b6b;
 
   /* list layout */
-  --zdt_listLayout_border: #2d3748;
-  --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:#828994;
 
   /* list stencils */
-  --zdt_liststencils_innercontainer_border: #2d3748;
+  --zdt_liststencils_innercontainer_border: var(--zdt_cta_grey_15_border);
 
   /* secondary text */
   --zdt_secondaryText_gray_text: #a8b0bd;
@@ -245,7 +249,7 @@
   --zdt_secondaryText_secondaryText_text: #a8b0bd;
 
   /* status dropdown */
-  --zdt_statusdropdown_line_border: #2d3748;
+  --zdt_statusdropdown_line_border: var(--zdt_cta_grey_15_border);
 
   /* status listitem */
   --zdt_statuslistitem_list_text: #e2e4e6;
@@ -291,8 +295,8 @@
   );
 
   /* lookup header common */
-  --zdt_lookupheader_default_bg: #262f3d;
-  --zdt_lookupheader_default_border: #384157;
+  --zdt_lookupheader_default_bg: var(--zdt_cta_grey_10_bg);
+  --zdt_lookupheader_default_border: var(--zdt_cta_grey_35_border);
   --zdt_lookupheader_para_text: #a8b0bd;
   --zdt_lookupheader_input_border: var(--zd_border_smoke33);
 
@@ -302,7 +306,7 @@
   --zdt_lookupclose_default_hover_text: #e2e4e6;
 
   /* lookup search */
-  --zdt_lookupsearch_boxstyle_border: #384157;
+  --zdt_lookupsearch_boxstyle_border: var(--zdt_cta_grey_35_border);
   --zdt_lookupsearch_boxstyle_hover_border: #828994;
   --zdt_lookupsearch_boxstyle_activer_border: var(--dot_inputLineFocus);
 
@@ -434,7 +438,7 @@
   --zdt_upload_uploadclose_default_text: var(--dot_text_white);
   --zdt_upload_uploadclose_default_hover_text: var(--zd_bg_graytrans7);
   --zdt_upload_night_bg: #384157;
-  --zdt_upload_loader_night_bg: #828994;
+  --zdt_upload_loader_night_bg: #e2e4e6;
   --zdt_upload_attachsize_night_text: #828994;
   --zdt_upload_uploadclose_night_bg: #384157;
   --zdt_upload_uploadclose_night_text: #828994;
@@ -488,7 +492,7 @@
 
   /* alert lookup */
   --zdt_alertlookup_bg: #262f3d;
-  --zdt_alertlookup_border: #2d3748;
+  --zdt_alertlookup_border: var(--zdt_cta_grey_15_border);
   --zdt_alertlookuop_text: #e2e4e6;
 
   /* alert lookup new */

package/src/Appearance/dark/themes/blue/blueDarkDotTheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='dark'][data-theme='blue'] {
+    /* freezelayer */
+    --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
+
+    /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_link: #479dff;
+    --zdt_commonEmptyState_dark_link_hover: #2469ff;
+}

package/src/Appearance/dark/themes/green/greenDarkDotTheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='dark'][data-theme='green'] {
+    /* freezelayer */
+    --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
+
+    /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_link: #45a159;
+    --zdt_commonEmptyState_dark_link_hover: #0e7c1c;
+}

package/src/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='dark'][data-theme='orange'] {
+    /* freezelayer */
+    --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
+
+    /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_link: #ff801f;
+    --zdt_commonEmptyState_dark_link_hover: #a85100;
+}

package/src/Appearance/dark/themes/red/redDarkDotTheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='dark'][data-theme='red'] {
+    /* freezelayer */
+    --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
+
+    /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_link: #e94f4f;
+    --zdt_commonEmptyState_dark_link_hover: #a81111;
+}

package/src/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='dark'][data-theme='yellow'] {
+    /* freezelayer */
+    --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
+
+    /* common empty state */
+    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
+    --zdt_commonEmptyState_dark_link: #d79835;
+    --zdt_commonEmptyState_dark_link_hover: #9b6808;
+}