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

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: {}
-};

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

@@ -1,66 +0,0 @@
-export default {
-  display: {
-    inline: "inline",
-    grid: "grid"
-  },
-  flow: {
-    row: "row",
-    column: "column",
-    dense: "dense",
-    rowDense: "rowDense",
-    colDense: "colDense"
-  },
-  alignItems: {
-    start: "start",
-    end: "end",
-    center: "center",
-    stretch: "stretch",
-    baseline: "baseline"
-  },
-  alignSelf: {
-    start: "start",
-    end: "end",
-    center: "center",
-    stretch: "stretch",
-    baseline: "baseline"
-  },
-  alignContent: {
-    start: "start",
-    end: "end",
-    center: "center",
-    stretch: "stretch",
-    baseline: "baseline",
-    spaceBetween: "spaceBetween",
-    spaceAround: "spaceAround",
-    spaceEvenly: "spaceEvenly"
-  },
-  justifyItems: {
-    start: "start",
-    end: "end",
-    center: "center",
-    stretch: "stretch",
-    baseline: "baseline"
-  },
-  justifySelf: {
-    start: "start",
-    end: "end",
-    center: "center",
-    stretch: "stretch",
-    baseline: "baseline"
-  },
-  justifyContent: {
-    start: "start",
-    end: "end",
-    center: "center",
-    stretch: "stretch",
-    spaceBetween: "spaceBetween",
-    spaceAround: "spaceAround",
-    spaceEvenly: "spaceEvenly"
-  },
-  scroll: {
-    x: "x",
-    y: "y",
-    both: "both",
-    none: "none"
-  }
-};

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

@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import automationProps from '@zohodesk/utils/es/props/automationProps';
-import customStyleProps from '@zohodesk/utils/es/props/customStyleProps';
-import tagAttributeProps from '@zohodesk/utils/es/props/tagAttributeProps';
-import tagGeneralAttributeProps from '@zohodesk/utils/es/props/tagGeneralAttributeProps';
-import propConstants from './propConstants';
-import ariaPropTypes from './ariaPropTypes';
-export default {
-  tagName: PropTypes.string,
-  isCover: PropTypes.bool,
-  alignItems: PropTypes.oneOf(Object.values(propConstants.alignItems)),
-  alignSelf: PropTypes.oneOf(Object.values(propConstants.alignSelf)),
-  alignContent: PropTypes.oneOf(Object.values(propConstants.alignContent)),
-  justifyItems: PropTypes.oneOf(Object.values(propConstants.justifyItems)),
-  justifySelf: PropTypes.oneOf(Object.values(propConstants.justifySelf)),
-  justifyContent: PropTypes.oneOf(Object.values(propConstants.justifyContent)),
-  flow: PropTypes.oneOf(Object.values(propConstants.flow)),
-  overFlowScroll: PropTypes.oneOf(Object.values(propConstants.scroll)),
-  display: PropTypes.oneOf(Object.values(propConstants.display)),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  ...automationProps,
-  ...ariaPropTypes,
-  ...customStyleProps,
-  ...tagAttributeProps,
-  ...tagGeneralAttributeProps
-};

package/lib/ucl/Grid/Grid.js

@@ -1,70 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
-
-var _theme = require("@zohodesk/theme");
-
-var _GridModule = _interopRequireDefault(require("./css/Grid.module.css"));
-
-var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
-
-var _propTypes = _interopRequireDefault(require("./props/propTypes"));
-
-var _propConstants = _interopRequireDefault(require("./props/propConstants"));
-
-var _cssJSLogic = _interopRequireDefault(require("./css/cssJSLogic"));
-
-var _componentNames = _interopRequireDefault(require("./componentNames"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var additionStyle = ['base'];
-
-var Grid = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
-  var tagName = props.tagName,
-      customStyle = props.customStyle,
-      customId = props.customId,
-      tagAttributes = props.tagAttributes,
-      tagGeneralAttributes = props.tagGeneralAttributes,
-      children = props.children,
-      a11y = props.a11y;
-  /* external customization - need memorize?*/
-
-  var newStyle = (0, _useMergeStyle["default"])(_GridModule["default"], customStyle, additionStyle);
-  /* css classname added based on logic */
-
-  var className = (0, _cssJSLogic["default"])(props, newStyle);
-  return /*#__PURE__*/_react["default"].createElement(tagName, _objectSpread(_objectSpread(_objectSpread({}, tagGeneralAttributes), {}, {
-    'data-id': customId,
-    className: className,
-    ref: ref
-  }, tagAttributes), a11y), children);
-});
-
-Grid.displayName = 'Grid';
-Grid.defaultProps = _defaultProps["default"];
-Grid.propTypes = _propTypes["default"];
-Grid.constantProps = _propConstants["default"];
-
-var _default = (0, _theme.withTheme)(Grid, _componentNames["default"].GridLayout);
-
-exports["default"] = _default;
-Grid.docs = {
-  componentGroup: 'Grid',
-  folderName: 'Style Guide',
-  description: ' ',
-  external: false
-};