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

package/src/AlphabeticList/AlphabeticList.js

@@ -1,176 +0,0 @@
-/*** 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

@@ -1,54 +0,0 @@
-/* $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

@@ -1,36 +0,0 @@
-/*** 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

@@ -1,44 +0,0 @@
-/*** 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'
-  };
-}