@zohodesk/dot 1.0.0-temp-38 → 1.0.0-temp-39

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

@@ -1,110 +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'
-};
+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

@@ -1,171 +1,171 @@
-/*** 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 } = 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_Navi'
-        >
-          <span
-            onClick={this.handleSelectAll}
-            className={style.heading}
-            data-title={allTitle}
-          >
-            {allText}
-          </span>
-        </Box>
-        {letters.map(letter => (
-          <AlphabeticListItem
-            id={letter}
-            isActive={letter === selectedCharacter}
-            onClick={this.handleSelect}
-            text={letter}
-            key={letter}
-          />
-        ))}
-      </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
-  })
-};
-
-AlphabeticList.defaultProps = {
-  align: 'vertical',
-  type: 'alphabetical',
-  i18nKeys: {}
-};
-
-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 } = this.props;
-    return (
-      <Box
-        flexible
-        tagName='li'
-        className={`${style.list} ${isActive ? style.selected : ''}`}
-        onClick={this.handleClick}
-        dataId={`${text}_Navi`}
-      >
-        <span>{text}</span>
-      </Box>
-    );
-  }
-}
-
-AlphabeticListItem.propTypes = {
-  id: PropTypes.string,
-  isActive: PropTypes.bool,
-  onClick: PropTypes.func,
-  text: PropTypes.string
-};
-
-AlphabeticListItem.defaultProps = {
-  isActive: false,
-  text: ''
-};
+/*** 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 } = 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_Navi'
+        >
+          <span
+            onClick={this.handleSelectAll}
+            className={style.heading}
+            data-title={allTitle}
+          >
+            {allText}
+          </span>
+        </Box>
+        {letters.map(letter => (
+          <AlphabeticListItem
+            id={letter}
+            isActive={letter === selectedCharacter}
+            onClick={this.handleSelect}
+            text={letter}
+            key={letter}
+          />
+        ))}
+      </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
+  })
+};
+
+AlphabeticList.defaultProps = {
+  align: 'vertical',
+  type: 'alphabetical',
+  i18nKeys: {}
+};
+
+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 } = this.props;
+    return (
+      <Box
+        flexible
+        tagName='li'
+        className={`${style.list} ${isActive ? style.selected : ''}`}
+        onClick={this.handleClick}
+        dataId={`${text}_Navi`}
+      >
+        <span>{text}</span>
+      </Box>
+    );
+  }
+}
+
+AlphabeticListItem.propTypes = {
+  id: PropTypes.string,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func,
+  text: PropTypes.string
+};
+
+AlphabeticListItem.defaultProps = {
+  isActive: false,
+  text: ''
+};

package/src/AlphabeticList/AlphabeticList.module.css

@@ -1,54 +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 .list > span {
-  padding: 0 var(--zd_size3);
-}
-.column .list > span {
-  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_size10);
-  cursor: pointer;
-  color: var(--textColor);
-}
-.title {
-  flex-basis: var(--zd_size15);
-}
-.list > span {
-  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: semibold;
-}
+/* $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 .list > span {
+  padding: 0 var(--zd_size3);
+}
+.column .list > span {
+  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_size10);
+  cursor: pointer;
+  color: var(--textColor);
+}
+.title {
+  flex-basis: var(--zd_size15);
+}
+.list > span {
+  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: semibold;
+}