@zohodesk/components 1.0.0-temp-999 → 1.0.0-temp-69

package/es/ucl/Grid/css/cssJSLogic.js

@@ -0,0 +1,46 @@
+import { compileClassNames } from '@zohodesk/utils';
+import propConstants from '../props/propConstants';
+/**
+ * container classname based on js state
+ * @param {object} props flex props
+ * @param {object} flex style object
+ * @returns {string} classnames string with space separate
+ */
+
+export default function (props, newStyle) {
+  const {
+    display,
+    flow,
+    alignItems,
+    alignSelf,
+    alignContent,
+    justifyItems,
+    justifySelf,
+    justifyContent,
+    overFlowScroll,
+    isCover,
+    className
+  } = props;
+  const alignItemsClassname = `alignItems_${alignItems}`;
+  const alignSelfClassname = `alignSelf_${alignSelf}`;
+  const alignContentClassname = `alignContent_${alignContent}`;
+  const justifyItemsClassname = `justifyItems_${justifyItems}`;
+  const justifySelfClassname = `justifySelf_${justifySelf}`;
+  const justifyContentClassname = `justifyContent_${justifyContent}`;
+  const overFlow = `scroll_${overFlowScroll}`;
+  return compileClassNames({
+    [newStyle.base]: true,
+    [newStyle.grid]: display === propConstants.display.grid,
+    [newStyle.inlineGrid]: display === propConstants.display.inline,
+    [newStyle[flow]]: flow && display,
+    [newStyle[alignItemsClassname]]: alignItems && display,
+    [newStyle[justifyItemsClassname]]: justifyItems && display,
+    [newStyle[alignContentClassname]]: alignContent && display,
+    [newStyle[justifyContentClassname]]: justifyContent && display,
+    [newStyle[alignSelfClassname]]: alignSelf,
+    [newStyle[justifySelfClassname]]: justifySelf,
+    [newStyle[overFlow]]: overFlowScroll,
+    [newStyle.cover]: isCover,
+    [className]: className
+  });
+}

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import Grid from '../Grid';
+import propConstants from '../props/propConstants';
+import commonStyle from './css/gridDocsStyle.module.css';
+import style from './css/gridDocsAreaBasedDetailLayout.module.css';
+export default class Grid__Area_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__Area_Based_Detail_Layout.docs = {
+  componentGroup: 'Grid',
+  folderName: 'Style Guide',
+  description: ' ',
+  external: false
+};

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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,38 @@
+.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

@@ -0,0 +1,63 @@
+.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

@@ -0,0 +1,23 @@
+.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

@@ -0,0 +1,21 @@
+.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

@@ -0,0 +1,16 @@
+.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

@@ -0,0 +1,15 @@
+.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

@@ -0,0 +1,38 @@
+.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

@@ -0,0 +1,47 @@
+.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;
+}