@zohodesk/components 1.0.0-temp-129 → 1.0.0-temp-130

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

@@ -1,308 +0,0 @@
-.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;
-}
-
-/* Custom Grid Classes */
-.layout {
-  grid-template-columns: repeat(var(--zdg_base_columns, 12), 1fr);
-  grid-template-rows: repeat(var(--zdg_base_rows, 1), 1fr);
-  gap: var(--zd_layout_gap, var(--zd_size15));
-}
-
-.layout_areas {
-  grid-template-areas: var(--zdg_layout_areas, "content");
-  gap: var(--zd_layout_gap, var(--zd_size15));
-}
-
-.auto_repeat {
-  grid-template-columns: repeat(var(--zdg_auto_repeat, auto-fit), minmax(var(--zdg_auto_repeat_min, 0), var(--zdg_auto_repeat_max, 1fr)));
-  /* grid-template-columns: repeat(var(--zdg_auto_grid_placement, auto-fill), minmax(var(--zdg_auto_grid_min_item_size, 16rem), 1fr)); */
-}
-
-.auto_repeat_fixed {
-  grid-template-columns: repeat(var(--zdg_auto_repeat, auto-fit), var(--zdg_auto_repeat_val, 1fr));
-}
-
-.custom_columns {
-  grid-template-columns: var(--zdg_custom_columns, 1fr);
-}
-
-.custom_rows {
-  grid-template-rows: var(--zdg_custom_rows, auto);
-}
-
-.auto_columns {
-  grid-auto-columns: var(--zdg_auto_columns, auto);
-}
-
-.auto_rows {
-  grid-auto-rows: var(--zdg_auto_rows, auto);
-}
-
-
-/* Custom Grid Item Classes */
-.item_area {
-  grid-area: var(--zdg_item_area, content);
-}
-
-.item_col_span1 {
-  grid-column: auto/span 1
-}
-
-.item_col_span2 {
-  grid-column: auto/span 2;
-}
-
-.item_col_span3 {
-  grid-column: auto/span 3
-}
-
-.item_col_span4 {
-  grid-column: auto/span 4
-}
-
-.item_col_span5 {
-  grid-column: auto/span 5
-}
-
-.item_col_span6 {
-  grid-column: auto/span 6
-}
-
-.item_col_span7 {
-  grid-column: auto/span 7
-}
-
-.item_col_span8 {
-  grid-column: auto/span 8
-}
-
-.item_col_span9 {
-  grid-column: auto/span 9
-}
-
-.item_col_span10 {
-  grid-column: auto/span 10
-}
-
-.item_col_span11 {
-  grid-column: auto/span 11
-}
-
-.item_col_span12 {
-  grid-column: auto/span 12
-}

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

@@ -1,45 +0,0 @@
-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/index.js

@@ -1,4 +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,7 +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,7 +0,0 @@
-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,48 +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 _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
-var _propTypes = _interopRequireDefault(require("./props/propTypes"));
-var _propConstants = _interopRequireDefault(require("./props/propConstants"));
-var _cssJSLogic = _interopRequireDefault(require("./css/cssJSLogic"));
-var _GridModule = _interopRequireDefault(require("./css/Grid.module.css"));
-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 = Grid;
-exports["default"] = _default;
-Grid.docs = {
-  componentGroup: 'Grid',
-  folderName: 'Style Guide',
-  description: ' ',
-  external: false
-};