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

package/es/index.js

@@ -4,6 +4,15 @@ export { renderToStaticMarkup } from 'react-dom/server';
 import './common/reset.module.css';
 export { default as _provider } from './Provider';
 export * from './Layout';
+export * from './ucl/Grid';
+export { default as Grid__default } from './ucl/Grid/docs/Grid__default.docs';
+export { default as Grid__Basic_Detail_Layout } from './ucl/Grid/docs/Grid__Basic_Detail_Layout.docs';
+export { default as Grid__Auto_Flow_Row } from './ucl/Grid/docs/Grid__Auto_Flow_Row.docs';
+export { default as Grid__Area_Based_Detail_Layout } from './ucl/Grid/docs/Grid__Area_Based_Detail_Layout.docs';
+export { default as Grid__Line_Based_Detail_Layout } from './ucl/Grid/docs/Grid__Line_Based_Detail_Layout.docs';
+export { default as Grid__Area_Based_List_Layout } from './ucl/Grid/docs/Grid__Area_Based_List_Layout.docs';
+export { default as Grid__Line_Based_List_Layout } from './ucl/Grid/docs/Grid__Line_Based_List_Layout.docs';
+export { default as Grid__Box_Alignment } from './ucl/Grid/docs/Grid__Box_Alignment.docs';
 export { default as Layout__default } from './Layout/docs/Layout__default.docs';
 export { default as Layout__two_Column } from './Layout/docs/Layout__two_Column.docs';
 export { default as Layout__three_Column } from './Layout/docs/Layout__three_Column.docs';
@@ -149,9 +158,5 @@ export { default as Provider__Zindex_For_FunctionComponent } from './Provider/do
 
 export { default as SemanticButton } from './semantic/Button/Button';
 export { default as SemanticButton__default } from './semantic/Button/docs/Button__default.docs.js';
-export { default as FocusScope } from './a11y/FocusScope/FocusScope';
-export { default as FocusScope__default } from './a11y/FocusScope/docs/FocusScope__default.docs';
-export { default as FocusRing } from './beta/FocusRing/FocusRing';
-export { default as FocusRing__default } from './beta/FocusRing/docs/FocusRing__default.docs';
 export { default as LightNightMode__AlternativeColors } from './LightNightMode/docs/AlternativeColors.docs';
 export { default as ResponsiveDropBox } from './ResponsiveDropBox/ResponsiveDropBox';

package/es/semantic/Button/Button.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import style from './semanticButton.module.css';
 export default class Button extends React.Component {
   constructor(props) {
@@ -49,43 +50,8 @@ export default class Button extends React.Component {
   }
 
 }
-Button.defaultProps = {
-  children: null,
-  autoFocus: false,
-  dataId: 'semanticButton',
-  disabled: false,
-  palette: 'primary',
-  text: 'Button',
-  type: 'button',
-  value: 'text',
-  customClass: '',
-  a11y: {}
-};
-Button.propTypes = {
-  ariaControls: PropTypes.bool,
-  ariaExpanded: PropTypes.bool,
-  ariaHaspopup: PropTypes.bool,
-  ariaLabel: PropTypes.string,
-  autofocus: PropTypes.bool,
-  children: PropTypes.node,
-  customClass: PropTypes.string,
-  dataId: PropTypes.string,
-  disabled: PropTypes.bool,
-  name: PropTypes.string,
-  onClick: PropTypes.func,
-  ref: PropTypes.func,
-  text: PropTypes.string,
-  title: PropTypes.string,
-  type: PropTypes.oneOf(['submit', 'reset', 'button']),
-  value: PropTypes.string,
-  a11y: PropTypes.shape({
-    ariaLabel: PropTypes.string,
-    ariaHaspopup: PropTypes.bool,
-    ariaExpanded: PropTypes.bool,
-    ariaControls: PropTypes.string,
-    ariaLabelledby: PropTypes.string
-  })
-};
+Button.defaultProps = defaultProps;
+Button.propTypes = propTypes;
 
 if (false) {
   Button.docs = {

package/es/semantic/Button/props/defaultProps.js

@@ -0,0 +1,12 @@
+export const defaultProps = {
+  children: null,
+  autoFocus: false,
+  dataId: 'semanticButton',
+  disabled: false,
+  palette: 'primary',
+  text: 'Button',
+  type: 'button',
+  value: 'text',
+  customClass: '',
+  a11y: {}
+};

package/es/semantic/Button/props/propTypes.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  ariaControls: PropTypes.bool,
+  ariaExpanded: PropTypes.bool,
+  ariaHaspopup: PropTypes.bool,
+  ariaLabel: PropTypes.string,
+  autofocus: PropTypes.bool,
+  children: PropTypes.node,
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
+  disabled: PropTypes.bool,
+  name: PropTypes.string,
+  onClick: PropTypes.func,
+  ref: PropTypes.func,
+  text: PropTypes.string,
+  title: PropTypes.string,
+  type: PropTypes.oneOf(['submit', 'reset', 'button']),
+  value: PropTypes.string,
+  a11y: PropTypes.shape({
+    ariaLabel: PropTypes.string,
+    ariaHaspopup: PropTypes.bool,
+    ariaExpanded: PropTypes.bool,
+    ariaControls: PropTypes.string,
+    ariaLabelledby: PropTypes.string
+  })
+};

package/es/ucl/Grid/Grid.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import { withTheme } from '@zohodesk/theme';
+import style from './css/Grid.module.css';
+import defaultProps from './props/defaultProps';
+import propTypes from './props/propTypes';
+import constantProps from './props/propConstants';
+import cssJSLogic from './css/cssJSLogic';
+import componentNames from './componentNames';
+const additionStyle = ['base'];
+const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
+  let {
+    tagName,
+    customStyle,
+    customId,
+    tagAttributes,
+    tagGeneralAttributes,
+    children,
+    a11y
+  } = props;
+  /* external customization - need memorize?*/
+
+  let newStyle = useMergeStyle(style, customStyle, additionStyle);
+  /* css classname added based on logic */
+
+  const className = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement(tagName, { ...tagGeneralAttributes,
+    'data-id': customId,
+    className,
+    ref,
+    ...tagAttributes,
+    ...a11y
+  }, children);
+});
+Grid.displayName = 'Grid';
+Grid.defaultProps = defaultProps;
+Grid.propTypes = propTypes;
+Grid.constantProps = constantProps;
+export default withTheme(Grid, componentNames.GridLayout);
+Grid.docs = {
+  componentGroup: 'Grid',
+  folderName: 'Style Guide',
+  description: ' ',
+  external: false
+};

package/es/ucl/Grid/componentNames.js

@@ -0,0 +1,6 @@
+export default {
+  "GridLayout": "GridLayout",
+  "NileLayout": "NileLayout",
+  "AmazonLayout": "AmazonLayout",
+  "YangtzeLayout": "YangtzeLayout"
+};

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