@zohodesk/components 1.0.0-temp-84 → 1.0.0-temp-108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-84",
+  "version": "1.0.0-temp-108",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -28,7 +28,7 @@
     "rtl": "react-cli rtl ./src ./lib && react-cli rtl ./src ./es",
     "common_package_build": "cd ../common && npm run build && cd ../components",
     "start": "react-cli start",
-    "docs": "npm run common_package_build && npm run dubCheck && react-cli docs",
+    "docs": "npm run dubCheck && react-cli docs",
     "build": " react-cli build:component:cmjs",
     "buildlocal": " react-cli build:component:cmjs && npm run rtl",
     "build:dev": "npm run build:variables && npm run build && npm run build:es --module:mode=dev -- -w",
@@ -47,7 +47,7 @@
   },
   "devDependencies": {
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/variables": "1.0.0-beta.29",
+    "@zohodesk/variables": "1.0.0-temp.30",
     "@zohodesk/icons": "1.0.0-beta.109",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
@@ -62,7 +62,7 @@
   },
   "peerDependencies": {
     "@zohodesk/icons": "1.0.0-beta.109",
-    "@zohodesk/variables": "1.0.0-beta.29",
+    "@zohodesk/variables": "1.0.0-temp.30",
     "@zohodesk/svg": "1.0.0-beta.49",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",

package/es/Accordion/docs/Accordion__Demo.docs.js

@@ -1,78 +0,0 @@
-import React from 'react';
-import { Accordion, AccordionItem } from '../';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Accordion__Demo extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Accordion, {
-      selectedItem: "1",
-      onSelect: id => {
-        'selected id', id;
-      },
-      unMount: false
-    }, /*#__PURE__*/React.createElement(AccordionItem, {
-      id: "1"
-    }, /*#__PURE__*/React.createElement("div", {
-      key: "title",
-      style: {
-        padding: '10px',
-        backgroundColor: '#ddd'
-      }
-    }, "Acc-1"), /*#__PURE__*/React.createElement("div", {
-      key: "content",
-      style: {
-        padding: '80px 10px',
-        backgroundColor: '#ddffee'
-      }
-    }, "Data1")), /*#__PURE__*/React.createElement(AccordionItem, {
-      id: "2"
-    }, /*#__PURE__*/React.createElement("div", {
-      key: "title",
-      style: {
-        padding: '10px',
-        backgroundColor: '#ddd'
-      }
-    }, "Acc-2"), /*#__PURE__*/React.createElement("div", {
-      key: "content",
-      style: {
-        padding: '80px 10px',
-        backgroundColor: '#ddffee'
-      }
-    }, "Data2")), /*#__PURE__*/React.createElement(AccordionItem, {
-      id: "3",
-      unMountItem: true
-    }, /*#__PURE__*/React.createElement("div", {
-      key: "title",
-      style: {
-        padding: '10px',
-        backgroundColor: '#ddd'
-      }
-    }, "Acc-3"), /*#__PURE__*/React.createElement("div", {
-      key: "content",
-      style: {
-        padding: '80px 10px',
-        backgroundColor: '#ddffee'
-      }
-    }, "Data3")), /*#__PURE__*/React.createElement(AccordionItem, {
-      id: "4"
-    }, /*#__PURE__*/React.createElement("div", {
-      key: "title",
-      style: {
-        padding: '10px',
-        backgroundColor: '#ddd'
-      }
-    }, "Acc-4"), /*#__PURE__*/React.createElement("div", {
-      key: "content",
-      style: {
-        padding: '80px 10px',
-        backgroundColor: '#ddffee'
-      }
-    }, "Data4")))));
-  }
-}
-Accordion__Demo.docs = {
-  componentGroup: 'Animation',
-  folderName: 'Style Guide'
-};

package/es/Animation/docs/Animation__default.docs.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import Animation from '../Animation';
-import { Container } from '../../Layout';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Animation__default extends React.Component {
-  render() {
-    let styles = {
-      width: '200px',
-      height: '100px',
-      background: 'var(--dot_black)',
-      textAlign: 'center',
-      color: 'var(--dot_white)',
-      lineHeight: '100px'
-    };
-    return /*#__PURE__*/React.createElement(Container, {
-      align: "both"
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Animation, {
-      name: "default",
-      isActive: true
-    }, /*#__PURE__*/React.createElement("div", {
-      style: styles
-    }, "Animation - Default"))));
-  }
-}
-if (false) {
-  Animation__default.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}

package/es/Animation/docs/Animation__fadeIn.docs.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import Animation from '../Animation';
-import { Container } from '../../Layout';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Animation__fadeIn extends React.Component {
-  render() {
-    let style = {
-      width: '200px',
-      height: '100px',
-      background: 'var(--dot_black)',
-      textAlign: 'center',
-      color: 'var(--dot_white)',
-      lineHeight: '100px'
-    };
-    return /*#__PURE__*/React.createElement(Container, {
-      align: "both"
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Animation, {
-      name: "fadeIn",
-      isActive: true
-    }, /*#__PURE__*/React.createElement("div", {
-      style: style
-    }, "Animation - fadeIn"))));
-  }
-}
-if (false) {
-  Animation__fadeIn.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}

package/es/Animation/docs/Animation__scaleIn.docs.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import Animation from '../Animation';
-import { Container } from '../../Layout';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Animation__scaleIn extends React.Component {
-  render() {
-    let style = {
-      width: '200px',
-      height: '100px',
-      background: 'var(--dot_black)',
-      textAlign: 'center',
-      color: 'var(--dot_white)',
-      lineHeight: '100px'
-    };
-    return /*#__PURE__*/React.createElement(Container, {
-      align: "both"
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Animation, {
-      name: "scaleIn",
-      isActive: true
-    }, /*#__PURE__*/React.createElement("div", {
-      style: style
-    }, "Animation - scaleIn"))));
-  }
-}
-if (false) {
-  Animation__scaleIn.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}

package/es/Animation/docs/Animation__skewIn.docs.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import Animation from '../Animation';
-import { Container } from '../../Layout';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Animation__skewIn extends React.Component {
-  render() {
-    let style = {
-      width: '200px',
-      height: '100px',
-      background: 'var(--dot_black)',
-      textAlign: 'center',
-      color: 'var(--dot_white)',
-      lineHeight: '100px'
-    };
-    return /*#__PURE__*/React.createElement(Container, {
-      align: "both"
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Animation, {
-      name: "skewIn",
-      isActive: true
-    }, /*#__PURE__*/React.createElement("div", {
-      style: style
-    }, "Animation - zoomIn "))));
-  }
-}
-if (false) {
-  Animation__skewIn.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}

package/es/Animation/docs/Animation__slideDown.docs.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import Animation from '../Animation';
-import { Container } from '../../Layout';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Animation__slideDown extends React.Component {
-  render() {
-    let style = {
-      width: '200px',
-      height: '100px',
-      background: 'var(--dot_black)',
-      textAlign: 'center',
-      color: 'var(--dot_white)',
-      lineHeight: '100px'
-    };
-    return /*#__PURE__*/React.createElement(Container, {
-      align: "both"
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Animation, {
-      name: "slideDown",
-      isActive: true
-    }, /*#__PURE__*/React.createElement("div", {
-      style: style
-    }, "Animation - slideDown"))));
-  }
-}
-if (false) {
-  Animation__slideDown.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}

package/es/Animation/docs/Animation__slideLeft.docs.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import Animation from '../Animation';
-import { Container } from '../../Layout';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Animation__slideLeft extends React.Component {
-  render() {
-    let style = {
-      width: '200px',
-      height: '100px',
-      background: 'var(--dot_black)',
-      textAlign: 'center',
-      color: 'var(--dot_white)',
-      lineHeight: '100px'
-    };
-    return /*#__PURE__*/React.createElement(Container, {
-      align: "both"
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Animation, {
-      name: "slideLeft",
-      isActive: true
-    }, /*#__PURE__*/React.createElement("div", {
-      style: style
-    }, "Animation - slideLeft"))));
-  }
-}
-if (false) {
-  Animation__slideLeft.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}

package/es/Animation/docs/Animation__zoomIn.docs.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import Animation from '../Animation';
-import { Container } from '../../Layout';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Animation__zoomIn extends React.Component {
-  render() {
-    let style = {
-      width: '200px',
-      height: '100px',
-      background: 'var(--dot_black)',
-      textAlign: 'center',
-      color: 'var(--dot_white)',
-      lineHeight: '100px'
-    };
-    return /*#__PURE__*/React.createElement(Container, {
-      align: "both"
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Animation, {
-      name: "zoomIn",
-      isActive: true
-    }, /*#__PURE__*/React.createElement("div", {
-      style: style
-    }, "Animation - zoomIn "))));
-  }
-}
-if (false) {
-  Animation__zoomIn.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}

package/es/AppContainer/docs/AppContainer__default.docs.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import AppContainer from '../AppContainer';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class AppContainer__default extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(AppContainer, {
-      tagName: "app"
-    }, /*#__PURE__*/React.createElement("span", {
-      "data-title": "appcontainer"
-    }, "Application Container")));
-  }
-}
-if (false) {
-  AppContainer__default.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
-  };
-}

package/es/Avatar/docs/Avatar__custom.docs.js

@@ -1,27 +0,0 @@
-import React, { Component } from 'react';
-import Avatar from '../Avatar';
-import style from '../../common/docStyle.module.css';
-export default class Avatar__custom extends Component {
-  render() {
-    let sizes = ['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge'],
-      shapes = ['circle'];
-    return /*#__PURE__*/React.createElement("div", null, shapes.map(shape => /*#__PURE__*/React.createElement("div", {
-      key: shape
-    }, sizes.map(size => /*#__PURE__*/React.createElement("span", {
-      className: `${style.docspan} ${style.vtop}`,
-      key: size
-    }, /*#__PURE__*/React.createElement(Avatar, {
-      name: "Bharathikannan",
-      size: size,
-      shape: shape,
-      customClass: style.customAvatar
-    }))))));
-  }
-}
-if (false) {
-  Avatar__custom.docs = {
-    componentGroup: 'Avatar Group',
-    folderName: 'Style Guide',
-    description: ' '
-  };
-}

package/es/Avatar/docs/Avatar__default.docs.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import Avatar from '../Avatar';
-import style from '../../common/docStyle.module.css';
-export default class Avatar__default extends React.Component {
-  render() {
-    let sizes = ['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge'],
-      shapes = ['circle', 'square'];
-    return /*#__PURE__*/React.createElement("div", null, shapes.map(shape => /*#__PURE__*/React.createElement("div", {
-      key: shape
-    }, sizes.map(size => /*#__PURE__*/React.createElement("span", {
-      className: `${style.docspan} ${style.vtop}`,
-      key: size
-    }, /*#__PURE__*/React.createElement(Avatar, {
-      name: "Avatar",
-      src: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg",
-      size: size,
-      shape: shape
-    }))))));
-  }
-}
-if (false) {
-  Avatar__default.docs = {
-    componentGroup: 'Avatar Group',
-    folderName: 'Style Guide',
-    description: ' '
-  };
-}

package/es/Avatar/docs/Avatar__palette.docs.js

@@ -1,47 +0,0 @@
-import React, { Component } from 'react';
-import Avatar from '../Avatar';
-import style from '../../common/docStyle.module.css';
-export default class Avatar__palette extends Component {
-  render() {
-    let shapes = ['circle', 'square'],
-      palettes = ['primary', 'secondary', 'info'];
-    return /*#__PURE__*/React.createElement("div", null, palettes.map(palette => /*#__PURE__*/React.createElement("div", {
-      key: palette
-    }, shapes.map(shape => /*#__PURE__*/React.createElement("span", {
-      className: `${style.docspan} ${style.vtop}`,
-      key: shape
-    }, /*#__PURE__*/React.createElement(Avatar, {
-      name: "Bharathikannan",
-      size: "medium",
-      palette: palette,
-      shape: shape
-    }))))), /*#__PURE__*/React.createElement("span", {
-      style: {
-        background: '#2C334D',
-        padding: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(Avatar, {
-      name: "Bharathikannan",
-      size: "medium",
-      palette: "info",
-      textPalette: "white"
-    })), /*#__PURE__*/React.createElement("span", {
-      style: {
-        background: '#C8CBDC',
-        padding: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(Avatar, {
-      name: "Bharathikannan",
-      size: "medium",
-      palette: "info",
-      textPalette: "black"
-    })));
-  }
-}
-if (false) {
-  Avatar__palette.docs = {
-    componentGroup: 'Avatar Group',
-    folderName: 'Style Guide',
-    description: ' '
-  };
-}

package/es/Avatar/docs/Avatar__text.docs.js

@@ -1,26 +0,0 @@
-import React, { Component } from 'react';
-import Avatar from '../Avatar';
-import style from '../../common/docStyle.module.css';
-export default class Avatar__text extends Component {
-  render() {
-    let sizes = ['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge'],
-      shapes = ['circle', 'square'];
-    return /*#__PURE__*/React.createElement("div", null, shapes.map(shape => /*#__PURE__*/React.createElement("div", {
-      key: shape
-    }, sizes.map(size => /*#__PURE__*/React.createElement("span", {
-      className: `${style.docspan} ${style.vtop}`,
-      key: size
-    }, /*#__PURE__*/React.createElement(Avatar, {
-      name: "Bharathikannan",
-      size: size,
-      shape: shape
-    }))))));
-  }
-}
-if (false) {
-  Avatar__text.docs = {
-    componentGroup: 'Avatar Group',
-    folderName: 'Style Guide',
-    description: ' '
-  };
-}

package/es/AvatarTeam/docs/AvatarTeam__custom.docs.js

@@ -1,71 +0,0 @@
-import React from 'react';
-import AvatarTeam from '../AvatarTeam';
-import style from '../../common/docStyle.module.css';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class AvatarTeam__custom extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
-      className: `${style.docspan} ${style.vtop}`
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(AvatarTeam, {
-      name: "Bharathikannan",
-      size: "small",
-      customClass: {
-        customAvatar: style.avatar,
-        customAvatarTeam: style.avatarTeam
-      }
-    }))), /*#__PURE__*/React.createElement("span", {
-      className: `${style.docspan} ${style.vtop}`
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(AvatarTeam, {
-      name: "Bharathikannan",
-      size: "xsmall",
-      customClass: {
-        customAvatar: style.avatar,
-        customAvatarTeam: style.avatarTeam
-      }
-    }))), /*#__PURE__*/React.createElement("span", {
-      className: `${style.docspan} ${style.vtop}`
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(AvatarTeam, {
-      name: "Bharathikannan",
-      size: "medium",
-      customClass: {
-        customAvatar: style.avatar,
-        customAvatarTeam: style.avatarTeam
-      }
-    }))), /*#__PURE__*/React.createElement("span", {
-      className: `${style.docspan} ${style.vtop}`
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(AvatarTeam, {
-      name: "Bharathikannan",
-      size: "xmedium",
-      customClass: {
-        customAvatar: style.avatar,
-        customAvatarTeam: style.avatarTeam
-      }
-    }))), /*#__PURE__*/React.createElement("span", {
-      className: `${style.docspan} ${style.vtop}`
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(AvatarTeam, {
-      name: "Bharathikannan",
-      size: "large",
-      customClass: {
-        customAvatar: style.avatar,
-        customAvatarTeam: style.avatarTeam
-      }
-    }))), /*#__PURE__*/React.createElement("span", {
-      className: `${style.docspan} ${style.vtop}`
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(AvatarTeam, {
-      name: "Bharathikannan",
-      size: "xlarge",
-      customClass: {
-        customAvatar: style.avatar,
-        customAvatarTeam: style.avatarTeam
-      }
-    })))));
-  }
-}
-if (false) {
-  AvatarTeam__custom.docs = {
-    componentGroup: 'Avatar Group',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}

package/es/AvatarTeam/docs/AvatarTeam__default.docs.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import AvatarTeam from '../AvatarTeam';
-import style from '../../common/docStyle.module.css';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class AvatarTeam__default extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
-      className: `${style.docspan} ${style.vtop}`
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(AvatarTeam, {
-      name: "Avatar Team",
-      src: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg",
-      size: "medium"
-    }))), /*#__PURE__*/React.createElement("span", {
-      className: `${style.docspan} ${style.vtop}`
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(AvatarTeam, {
-      name: "Avatar Team",
-      size: "medium",
-      needTitle: false
-    }))));
-  }
-}
-if (false) {
-  AvatarTeam__default.docs = {
-    componentGroup: 'Avatar Group',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}

package/es/AvatarTeam/docs/AvatarTeam__palette.docs.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import AvatarTeam from '../AvatarTeam';
-import style from '../../common/docStyle.module.css';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class AvatarTeam__palette extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      style: {
-        background: 'var(--dot_black)',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement("span", {
-      className: `${style.docspan} ${style.vtop}`
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(AvatarTeam, {
-      name: "Bharathikannan",
-      size: "xmedium",
-      palette: "primary"
-    }))), /*#__PURE__*/React.createElement("span", {
-      className: `${style.docspan} ${style.vtop}`
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(AvatarTeam, {
-      name: "Bharathikannan",
-      size: "xmedium",
-      palette: "secondary"
-    }))), /*#__PURE__*/React.createElement("span", {
-      className: `${style.docspan} ${style.vtop}`
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(AvatarTeam, {
-      name: "Bharathikannan",
-      size: "xmedium",
-      palette: "primary",
-      isFilled: true
-    }))), /*#__PURE__*/React.createElement("span", {
-      className: `${style.docspan} ${style.vtop}`
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(AvatarTeam, {
-      name: "Bharathikannan",
-      size: "xmedium",
-      palette: "secondary",
-      isFilled: true
-    })))));
-  }
-}
-if (false) {
-  AvatarTeam__palette.docs = {
-    componentGroup: 'Avatar Group',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}