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

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

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

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

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

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

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

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

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

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

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

package/src/Attachment/Attachment.js

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

@@ -1,121 +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);
-}
+.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);
+}