@zohodesk/components 1.0.0-temp-72 → 1.0.0-temp-73

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

@@ -0,0 +1,217 @@
+.cover {
+  height: 100%;
+  width: 100%;
+}
+
+/*Container Props */
+
+.grid {
+  display: grid;
+}
+
+.inlineGrid {
+  display: inline-grid;
+}
+
+.row {
+  grid-auto-flow: row;
+}
+
+.column {
+  grid-auto-flow: column;
+}
+
+.dense {
+  grid-auto-flow: dense;
+}
+
+.rowDense {
+  grid-auto-flow: row dense;
+}
+
+.colDense {
+  grid-auto-flow: column dense;
+}
+
+/* align-items props start */
+
+.alignItems_start {
+  align-items: start;
+}
+
+.alignItems_end {
+  align-items: end;
+}
+
+.alignItems_center {
+  align-items: center;
+}
+
+.alignItems_stretch {
+  align-items: stretch;
+}
+
+.alignItems_baseline {
+  align-items: baseline;
+}
+
+/* align-items props end */
+
+/* align-self props start */
+
+.alignSelf_start {
+  align-self: start;
+}
+
+.alignSelf_end {
+  align-self: end;
+}
+
+.alignSelf_center {
+  align-self: center;
+}
+
+.alignSelf_stretch {
+  align-self: stretch;
+}
+
+.alignSelf_baseline {
+  align-self: baseline;
+}
+
+/* align-self props End */
+
+/* align-content props start*/
+
+.alignContent_start {
+  align-content: start;
+}
+
+.alignContent_end {
+  align-content: end;
+}
+
+.alignContent_center {
+  align-content: center;
+}
+
+.alignContent_stretch {
+  align-content: stretch;
+}
+
+.alignContent_baseline {
+  align-content: baseline;
+}
+
+.alignContent_spaceBetween {
+  align-content: space-between;
+}
+
+.alignContent_spaceAround {
+  align-content: space-around;
+}
+
+.alignContent_spaceEvenly {
+  align-content: space-evenly;
+}
+
+/* align-content props end*/
+
+
+/* justify-items props start */
+
+.justifyItems_start {
+  justify-items: start;
+}
+
+.justifyItems_end {
+  justify-items: end;
+}
+
+.justifyItems_center {
+  justify-items: center;
+}
+
+.justifyItems_stretch {
+  justify-items: stretch;
+}
+
+.justifyItems_baseline {
+  justify-items: baseline;
+}
+
+/* justify-items props end */
+
+/* justify-self props start */
+
+.justifySelf_start {
+  justify-self: start;
+}
+
+.justifySelf_end {
+  justify-self: end;
+}
+
+.justifySelf_center {
+  justify-self: center;
+}
+
+.justifySelf_stretch {
+  justify-self: stretch;
+}
+
+.justifySelf_baseline {
+  justify-self: baseline;
+}
+
+/* justify-self props end */
+
+/* justify-content props start */
+
+.justifyContent_start {
+  justify-content: start;
+}
+
+.justifyContent_end {
+  justify-content: end;
+}
+
+.justifyContent_center {
+  justify-content: center;
+}
+
+.justifyContent_stretch {
+  justify-content: stretch;
+}
+
+.justifyContent_spaceBetween {
+  justify-content: space-between;
+}
+
+.justifyContent_spaceAround {
+  justify-content: space-around;
+}
+
+.justifyContent_spaceEvenly {
+  justify-content: space-evenly;
+}
+
+/* justify-content props end */
+
+.scroll_y {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.scroll_x {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.scroll_none {
+  overflow: hidden;
+}
+
+.scroll_both {
+  overflow: auto;
+}

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;
+}