@zohodesk/components 1.0.0-temp-70 → 1.0.0-temp-71

package/es/ucl/Grid/docs/Grid__Area_Based_List_Layout.docs.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import Grid from '../Grid';
-import propConstants from '../props/propConstants';
-import commonStyle from './css/gridDocsStyle.module.css';
-import style from './css/gridDocsAreaBasedListLayout.module.css';
-export default class Grid__Area_Based_List_Layout extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: commonStyle.parent
-    }, /*#__PURE__*/React.createElement(Grid, {
-      display: propConstants.display.grid,
-      isCover: true,
-      customStyle: {
-        base: style.container
-      }
-    }, /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.header
-      },
-      tagName: "header"
-    }, /*#__PURE__*/React.createElement("h2", null, "Header")), /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.nav
-      },
-      tagName: "nav"
-    }, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Home"), /*#__PURE__*/React.createElement("li", null, "Privacy Policy"))), /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.main
-      }
-    }, /*#__PURE__*/React.createElement("p", null, "Main Content")), /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.aside
-      },
-      tagName: "aside"
-    }, /*#__PURE__*/React.createElement("h3", null, "Sidebar")), /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.footer
-      },
-      tagName: "footer"
-    }, /*#__PURE__*/React.createElement("span", null, "Footer"))));
-  }
-
-}
-Grid__Area_Based_List_Layout.docs = {
-  componentGroup: 'Grid',
-  folderName: 'Style Guide',
-  description: ' ',
-  external: false
-};

package/es/ucl/Grid/docs/Grid__Auto_Flow_Row.docs.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import Grid from '../Grid';
-import propConstants from '../props/propConstants';
-import commonStyle from './css/gridDocsStyle.module.css';
-import style from './css/gridDocsAutoFlowRow.module.css';
-export default class Grid__Auto_Flow_Row extends React.Component {
-  render() {
-    let arrayList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
-    return /*#__PURE__*/React.createElement("div", {
-      className: commonStyle.parent
-    }, /*#__PURE__*/React.createElement(Grid, {
-      display: propConstants.display.grid,
-      flow: propConstants.flow.row,
-      customStyle: {
-        base: style.container
-      }
-    }, arrayList.map((ele, index) => /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.item
-      },
-      shrink: false,
-      key: 'list_' + index
-    }, ele))));
-  }
-
-}
-Grid__Auto_Flow_Row.docs = {
-  componentGroup: 'Grid',
-  folderName: 'Style Guide',
-  description: ' ',
-  external: false
-};

package/es/ucl/Grid/docs/Grid__Basic_Detail_Layout.docs.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import Grid from '../Grid';
-import propConstants from '../props/propConstants';
-import commonStyle from './css/gridDocsStyle.module.css';
-import style from './css/gridDocsBasicDetailLayout.module.css';
-export default class Grid__Basic_Detail_Layout extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: commonStyle.parent
-    }, /*#__PURE__*/React.createElement(Grid, {
-      display: propConstants.display.grid,
-      isCover: true,
-      customStyle: {
-        base: style.container
-      }
-    }, /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.leftPanel
-      }
-    }, "Left Panel"), /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.propertiesPanel
-      }
-    }, "Properties Panel"), /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.mainContent
-      }
-    }, "Main Content"), /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.rightPanel
-      }
-    }, "Right Panel")));
-  }
-
-}
-Grid__Basic_Detail_Layout.docs = {
-  componentGroup: 'Grid',
-  folderName: 'Style Guide',
-  description: ' ',
-  external: false
-};

package/es/ucl/Grid/docs/Grid__Box_Alignment.docs.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import Grid from '../Grid';
-import propConstants from '../props/propConstants';
-import commonStyle from './css/gridDocsStyle.module.css';
-import style from './css/gridDocsBoxAlignment.module.css';
-export default class Grid__Box_Alignment extends React.Component {
-  render() {
-    let listItems = [1, 2, 3, 4, 5];
-    let justifyContentArray = Object.values(propConstants.justifyContent);
-    return /*#__PURE__*/React.createElement("div", {
-      className: commonStyle.parent
-    }, /*#__PURE__*/React.createElement("h2", null, "Box Alignment"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "Justify Content"), /*#__PURE__*/React.createElement("div", null, justifyContentArray.map((value, index) => {
-      return /*#__PURE__*/React.createElement("div", {
-        key: 'grid_' + index
-      }, /*#__PURE__*/React.createElement("h4", null, 'Justify Content - ' + value), /*#__PURE__*/React.createElement(Grid, {
-        display: propConstants.display.grid,
-        flow: propConstants.flow.column,
-        justifyContent: propConstants.justifyContent[value],
-        customStyle: {
-          base: style.container
-        }
-      }, listItems.map((el, index) => /*#__PURE__*/React.createElement(Grid, {
-        customStyle: {
-          base: style.item
-        },
-        key: `item_${index}`
-      }, /*#__PURE__*/React.createElement("h2", null, `Item${el}`)))));
-    })), /*#__PURE__*/React.createElement("hr", null)));
-  }
-
-}
-Grid__Box_Alignment.docs = {
-  componentGroup: 'Grid',
-  folderName: 'Style Guide',
-  description: ' ',
-  external: false
-};

package/es/ucl/Grid/docs/Grid__Line_Based_Detail_Layout.docs.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import Grid from '../Grid';
-import propConstants from '../props/propConstants';
-import commonStyle from './css/gridDocsStyle.module.css';
-import style from './css/gridDocsLineBasedDetailLayout.module.css';
-export default class Grid__Line_Based_Detail_Layout extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: commonStyle.parent
-    }, /*#__PURE__*/React.createElement(Grid, {
-      display: propConstants.display.grid,
-      isCover: true,
-      customStyle: {
-        base: style.container
-      }
-    }, /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.leftPanel
-      }
-    }, "Left Panel"), /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.propertiesPanel
-      }
-    }, "Properties Panel"), /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.mainContent
-      }
-    }, "Main Content"), /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.rightPanel
-      }
-    }, "Right Panel")));
-  }
-
-}
-Grid__Line_Based_Detail_Layout.docs = {
-  componentGroup: 'Grid',
-  folderName: 'Style Guide',
-  description: ' ',
-  external: false
-};

package/es/ucl/Grid/docs/Grid__Line_Based_List_Layout.docs.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import Grid from '../Grid';
-import propConstants from '../props/propConstants';
-import commonStyle from './css/gridDocsStyle.module.css';
-import style from './css/gridDocsLineBasedListLayout.module.css';
-export default class Grid__Line_Based_List_Layout extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: commonStyle.parent
-    }, /*#__PURE__*/React.createElement(Grid, {
-      display: propConstants.display.grid,
-      isCover: true,
-      customStyle: {
-        base: style.container
-      }
-    }, /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.header
-      },
-      tagName: "header"
-    }, /*#__PURE__*/React.createElement("h2", null, "Header")), /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.nav
-      },
-      tagName: "nav"
-    }, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Home"), /*#__PURE__*/React.createElement("li", null, "Privacy Policy"))), /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.main
-      },
-      tagName: "section"
-    }, /*#__PURE__*/React.createElement("p", null, "Main Content")), /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.footer
-      },
-      tagName: "footer"
-    }, /*#__PURE__*/React.createElement("span", null, "Footer"))));
-  }
-
-}
-Grid__Line_Based_List_Layout.docs = {
-  componentGroup: 'Grid',
-  folderName: 'Style Guide',
-  description: ' ',
-  external: false
-};

package/es/ucl/Grid/docs/Grid__default.docs.js

@@ -1,61 +0,0 @@
-import React from 'react';
-import Grid from '../Grid';
-import propConstants from '../props/propConstants';
-import commonStyle from './css/gridDocsStyle.module.css';
-import style from './css/gridDocsDefault.module.css';
-export default class Grid__default extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: commonStyle.parent
-    }, /*#__PURE__*/React.createElement(Grid, {
-      display: propConstants.display.grid,
-      tagGeneralAttributes: {
-        title: 'Click to get hi alert',
-        style: {
-          cursor: 'pointer'
-        },
-        'aria-label': 'Flex Div'
-      },
-      tagAttributes: {
-        onClick: () => {
-          alert('hi');
-        },
-        'data-box': 'Flex'
-      },
-      customStyle: {
-        base: style.container
-      }
-    }, /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.item
-      }
-    }, "1"), /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.item
-      }
-    }, "2"), /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.item
-      }
-    }, "3"), /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.item
-      }
-    }, "4"), /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.item
-      }
-    }, "5"), /*#__PURE__*/React.createElement(Grid, {
-      customStyle: {
-        base: style.item
-      }
-    }, "6")));
-  }
-
-}
-Grid__default.docs = {
-  componentGroup: 'Grid',
-  folderName: 'Style Guide',
-  description: ' ',
-  external: false
-};

package/es/ucl/Grid/docs/css/gridDocsAreaBasedDetailLayout.module.css

@@ -1,38 +0,0 @@
-.container {
-    font-weight: bold;
-    grid-gap: 10px;
-    grid-template-columns: repeat(8, 1fr);
-    grid-template-areas: "leftPanel propertiesPanel propertiesPanel mainContent mainContent mainContent mainContent rightPanel";
-    border-radius: 5px;
-    background-color: #fff4e6;
-    padding: 20px;
-}
-
-.leftPanel,
-.propertiesPanel,
-.mainContent,
-.rightPanel {
-    color: #a63609;
-}
-
-.leftPanel, .propertiesPanel, .mainContent, .rightPanel {
-    border-radius: 5px;
-    background-color: #b4b3b2;
-    padding: 1em;
-}
-
-.leftPanel {
-    grid-area: leftPanel;
-}
-
-.propertiesPanel {
-    grid-area: propertiesPanel;
-}
-
-.mainContent {
-    grid-area: mainContent;
-}
-
-.rightPanel {
-    grid-area: rightPanel;
-}

package/es/ucl/Grid/docs/css/gridDocsAreaBasedListLayout.module.css

@@ -1,63 +0,0 @@
-.container {
-    grid-template-columns: 200px 1fr 200px;
-    grid-template-rows: auto 1fr auto;
-    grid-gap: 12px;
-    grid-template-areas:
-        "header header header"
-        "nav content side"
-        "footer footer footer";
-    font-weight: bold;
-    background-color: #fff4e6;
-}
-
-.header, .aside, .nav, .main, .footer {
-    background: #F7AF9D44;
-    border: 3px solid #F7AF9D;
-}
-
-.header {
-    font-size: 14px;
-    grid-area: header;
-    text-align: center;
-}
-
-.nav {
-    grid-area: nav;
-}
-
-[dir=ltr] .nav {
-    margin-left: 0.6rem;
-}
-
-[dir=rtl] .nav {
-    margin-right: 0.6rem;
-}
-
-.main {
-    grid-area: content;
-    padding: 25px;
-}
-
-.aside {
-    grid-area: side;
-}
-
-[dir=ltr] .aside {
-    margin-right: 0.6rem;
-}
-
-[dir=rtl] .aside {
-    margin-left: 0.6rem;
-}
-
-.footer {
-    grid-area: footer;
-    text-align: center;
-    padding: 25px 0;
-}
-
-.nav ul li a {
-    text-decoration: none;
-    display: inline-block;
-    margin-bottom: 15px;
-}

package/es/ucl/Grid/docs/css/gridDocsAutoFlowRow.module.css

@@ -1,23 +0,0 @@
-.container {
-    font-weight: bold;
-    grid-gap: 10px;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr 1fr;
-    grid-auto-rows: 100px;
-    border-radius: 5px;
-    background-color: #fff4e6;
-    padding: 20px;
-}
-
-.item {
-    border-radius: 5px;
-    padding: 1rem;
-    background: #F7AF9D44;
-    border: 3px solid #F7AF9D;
-    text-align: center;
-}
-
-.item:nth-child(6n) {
-    grid-column: span 2;
-    background: cornflowerblue;
-}

package/es/ucl/Grid/docs/css/gridDocsBasicDetailLayout.module.css

@@ -1,21 +0,0 @@
-.container {
-    font-weight: bold;
-    grid-gap: 10px;
-    grid-template-columns: 200px 300px 1fr 200px;
-    border-radius: 5px;
-    background-color: #fff4e6;
-    padding: 20px;
-}
-
-.leftPanel,
-.propertiesPanel,
-.mainContent,
-.rightPanel {
-    color: #a63609;
-}
-
-.leftPanel, .propertiesPanel, .mainContent, .rightPanel {
-    border-radius: 5px;
-    background-color: #b4b3b2;
-    padding: 1em;
-}

package/es/ucl/Grid/docs/css/gridDocsBoxAlignment.module.css

@@ -1,16 +0,0 @@
-.container {
-    font-weight: bold;
-    grid-gap: 10px;
-    grid-auto-columns: 150px;
-    border-radius: 5px;
-    background-color: #fff4e6;
-    padding: 20px;
-    margin: 20px;
-}
-
-.item {
-    border-radius: 5px;
-    background: #F7AF9D44;
-    border: 3px solid #F7AF9D;
-    text-align: center;
-}

package/es/ucl/Grid/docs/css/gridDocsDefault.module.css

@@ -1,15 +0,0 @@
-.container {
-    font-weight: bold;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-gap: 10px;
-    border-radius: 5px;
-    background-color: #fff4e6;
-    padding: 20px;
-}
-
-.item {
-    color: #a63609;
-    border-radius: 5px;
-    background-color: #b4b3b2;
-    padding: 1em;
-}

package/es/ucl/Grid/docs/css/gridDocsLineBasedDetailLayout.module.css

@@ -1,38 +0,0 @@
-.container {
-    font-weight: bold;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    grid-gap: 10px;
-    border-radius: 5px;
-    background-color: #fff4e6;
-    padding: 20px;
-}
-
-.leftPanel,
-.propertiesPanel,
-.mainContent,
-.rightPanel {
-    color: #a63609;
-}
-
-.leftPanel, .propertiesPanel, .mainContent, .rightPanel {
-    border-radius: 5px;
-    background-color: #b4b3b2;
-    padding: 1em;
-}
-
-.leftPanel {
-    grid-column: 1 / 3;
-}
-
-.propertiesPanel {
-    grid-column: 3 / 5;
-}
-
-.mainContent {
-    grid-column: 5 / 10;
-}
-
-.rightPanel {
-    grid-column: 10 / 13;
-}

package/es/ucl/Grid/docs/css/gridDocsLineBasedListLayout.module.css

@@ -1,47 +0,0 @@
-.container {
-    grid-template-columns: 200px 1fr 250px;
-    grid-template-rows: auto 1fr auto;
-    grid-gap: 12px;
-    font-weight: bold;
-    background-color: #fff4e6;
-}
-
-.header, .aside, .nav, .main, .footer {
-    background: #F7AF9D44;
-    border: 3px solid #F7AF9D;
-}
-
-.header {
-    font-size: 14px;
-    grid-column: 1 / -1;
-    text-align: center;
-}
-
-.nav {
-    grid-column: 1 / 2;
-}
-
-[dir=ltr] .nav {
-    margin-left: 0.6rem;
-}
-
-[dir=rtl] .nav {
-    margin-right: 0.6rem;
-}
-
-.main {
-    grid-column: 2 / -1;
-    padding: 25px;
-}
-
-.footer {
-    grid-column: 1 / -1;
-    text-align: center;
-    padding: 25px 0;
-}
-
-.nav ul li a {
-    text-decoration: none;
-    display: inline-block;
-    margin-bottom: 15px;
-}

package/es/ucl/Grid/docs/css/gridDocsStyle.module.css

@@ -1,30 +0,0 @@
-.parent {
-    width: 100%;
-    height: 100%;
-}
-
-.container,
-.inlineContainer {
-    gap: 10px;
-}
-
-.container, .inlineContainer {
-    background-color: DodgerBlue;
-    padding: 10px;
-}
-
-.container {
-    width: 80%
-}
-
-.item {
-    width: 90px;
-    height: 90px;
-    align-items: center;
-    justify-content: center;
-    background-color: #f1f1f1;
-}
-
-.sampleOne {
-    background-color: red;
-}

package/es/ucl/Grid/index.js

@@ -1,5 +0,0 @@
-export { default } from './Grid';
-/*hooks and accessibility based on proptypes */
-
-export { default as GridPropTypes } from './props/propTypes';
-export { default as GridPropConstants } from './props/propConstants';

package/es/ucl/Grid/props/ariaPropTypes.js

@@ -1,6 +0,0 @@
-import PropTypes from 'prop-types';
-import generalAriaProps from '@zohodesk/utils/es/props/generalAriaProps';
-export default {
-  a11y: PropTypes.shape({ ...generalAriaProps
-  })
-};

package/es/ucl/Grid/props/defaultProps.js

@@ -1,8 +0,0 @@
-import propConstants from './propConstants';
-export default {
-  tagName: 'div',
-  isCover: false,
-  customStyle: {},
-  tagAttributes: {},
-  tagGeneralAttributes: {}
-};