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

package/src/ActionButton/docs/ActionButton__default.docs.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import ActionButton from '../ActionButton';
+
+export default class ActionButton__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton text='Reply' size='small' />
+        </div>
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton text='Reply' size='medium' />
+        </div>
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton text='Reply' size='large' />
+        </div>
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton text='Reply' size='large' isLoading />
+        </div>
+        <br></br>
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton
+            iconName='ZD-replyall'
+            iconSize='9'
+            onClick={() => ''}
+            dropdownChildren={'children'}
+            dropBoxPosition='bottomRight'
+            size='small'
+            isDisabled
+          />
+        </div>
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton
+            text='Reply all'
+            iconName='ZD-replyall'
+            iconSize='9'
+            onClick={() => ''}
+            dropBoxPosition='bottomRight'
+            size='small'
+          >
+            children
+          </ActionButton>
+        </div>
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton
+            text='Reply all'
+            iconName='ZD-replyall'
+            iconSize='9'
+            onClick={() => ''}
+            dropBoxPosition='bottomRight'
+            size='small'
+            onHover
+          >
+            children
+          </ActionButton>
+        </div>
+        <br></br>
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton
+            text='Reply all'
+            iconName='ZD-replyall'
+            iconSize='9'
+            dropBoxPosition='bottomRight'
+            size='small'
+            onHover
+          >
+            children
+          </ActionButton>
+        </div>
+        <br />
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton
+            text='Reply all'
+            iconName='ZD-replyall'
+            iconSize='9'
+            dropBoxPosition='bottomRight'
+            size='small'
+          >
+            children
+          </ActionButton>
+        </div>
+        <br />
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton text='Comment' subText='Public' />
+        </div>
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton
+            text='Reply all'
+            iconName='ZD-replyall'
+            iconSize='9'
+            onClick={() => ''}
+            dropBoxPosition='bottomRight'
+            size='small'
+            palette='primary'
+          >
+            children
+          </ActionButton>
+        </div>
+        <div style={{ margin: '20px'}}></div>
+      </React.Fragment>
+    );
+  }
+}
+ActionButton__default.docs = {
+  componentGroup: 'Atom'
+};

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'
+  };
+}