@zohodesk/library-platform 1.1.5 → 1.1.6

package/es/cc/action-icon/Properties.js

@@ -21,7 +21,25 @@ export default {
     typeMetadata: {
       schema: {
         type: 'string',
-        enum: ['primary', 'danger']
+        enum: ['primary', 'danger', 'default']
+      }
+    }
+  },
+  iconSize: {
+    required: false,
+    defaultValue: 16,
+    typeMetadata: {
+      schema: {
+        type: 'number'
+      }
+    }
+  },
+  hasPadding: {
+    required: false,
+    defaultValue: true,
+    typeMetadata: {
+      schema: {
+        type: 'boolean'
       }
     }
   },

package/es/cc/button/Constants.js

@@ -0,0 +1,7 @@
+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; }
+
+class ButtonConstants {}
+
+_defineProperty(ButtonConstants, "BUTTON_CLICKED", 'BUTTON#CLICKED');
+
+export default ButtonConstants;

package/es/cc/button/Events.js

@@ -0,0 +1,5 @@
+import Constants from "./Constants";
+export default [{
+  type: Constants.BUTTON_CLICKED,
+  payload: {}
+}];

package/es/cc/button/Properties.js

@@ -0,0 +1,77 @@
+export default {
+  text: {
+    defaultValue: '',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  palette: {
+    defaultValue: 'primaryFilled',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string',
+        enum: ['primary', 'secondary', 'danger', 'success', 'plainPrimary', 'plainSecondary', 'plainDanger', 'plainSuccess', 'primaryFilled', 'secondaryFilled', 'dangerFilled', 'successFilled', 'info', 'tertiaryFilled']
+      }
+    }
+  },
+  size: {
+    defaultValue: 'medium',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string',
+        enum: ['small', 'medium', 'large', 'xlarge']
+      }
+    }
+  },
+  isRounded: {
+    defaultValue: false,
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'boolean'
+      }
+    }
+  },
+  isDisabled: {
+    defaultValue: false,
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'boolean'
+      }
+    }
+  },
+  id: {
+    defaultValue: '',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  status: {
+    defaultValue: 'none',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string',
+        enum: ['loading', 'success', 'none']
+      }
+    }
+  },
+  tooltip: {
+    defaultValue: '',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  }
+};

package/es/cc/button/index.js

@@ -0,0 +1,3 @@
+export { default as ButtonProperties } from "./Properties";
+export { default as ButtonEvents } from "./Events";
+export { default as ButtonConstants } from "./Constants";

package/es/cc/index.js

@@ -1,9 +1,11 @@
 export * from "./avatar";
+export * from "./button";
 export * from "./checkbox";
 export * from "./email";
 export * from "./highlighted-value";
 export * from "./info-icon";
 export * from "./link";
+export * from "./list-item";
 export * from "./switch";
 export * from "./table-list";
 export * from "./tags";

package/es/cc/list-item/Constants.js

@@ -0,0 +1,7 @@
+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; }
+
+class ListItemConstants {}
+
+_defineProperty(ListItemConstants, "LISTITEM_CLICKED", 'LISTITEM#CLICKED');
+
+export default ListItemConstants;

package/es/cc/list-item/Events.js

@@ -0,0 +1,14 @@
+import Constants from "./Constants";
+export default [{
+  type: Constants.LISTITEM_CLICKED,
+  payload: {
+    id: {
+      name: 'id',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  }
+}];

package/es/cc/list-item/Properties.js

@@ -0,0 +1,131 @@
+export default {
+  id: {
+    defaultValue: '',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  isDisabled: {
+    defaultValue: false,
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'boolean'
+      }
+    }
+  },
+  isActive: {
+    defaultValue: false,
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'boolean'
+      }
+    }
+  },
+  text: {
+    defaultValue: '',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  secondaryText: {
+    defaultValue: '',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  size: {
+    defaultValue: 'medium',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string',
+        enum: ['small', 'medium', 'large']
+      }
+    }
+  },
+  tooltip: {
+    defaultValue: '',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  icon: {
+    defaultValue: '',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  iconSize: {
+    defaultValue: 14,
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'number'
+      }
+    }
+  },
+  imgSrc: {
+    defaultValue: '',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  imgName: {
+    defaultValue: '',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  href: {
+    defaultValue: '',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  target: {
+    defaultValue: 'self',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string',
+        enum: ['self', 'blank', 'parent', 'top']
+      }
+    }
+  },
+  divider: {
+    defaultValue: 'none',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string',
+        enum: ['none', 'before', 'after']
+      }
+    }
+  }
+};

package/es/cc/list-item/index.js

@@ -0,0 +1,3 @@
+export { default as ListItemProperties } from "./Properties";
+export { default as ListItemEvents } from "./Events";
+export { default as ListItemConstants } from "./Constants";

package/es/cc/more-dropdown/Constants.js

@@ -0,0 +1,7 @@
+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; }
+
+class MoreDropdownConstants {}
+
+_defineProperty(MoreDropdownConstants, "MORE_DROPDOWN_OPTION_CLICKED", 'MORE_DROPDOWN#OPTION_CLICKED');
+
+export default MoreDropdownConstants;

package/es/cc/more-dropdown/Events.js

@@ -0,0 +1,14 @@
+import Constants from "./Constants";
+export default [{
+  type: Constants.MORE_DROPDOWN_OPTION_CLICKED,
+  payload: {
+    id: {
+      name: 'id',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  }
+}];

package/es/cc/more-dropdown/Properties.js

@@ -0,0 +1,66 @@
+export default {
+  heading: {
+    defaultValue: '',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  options: {
+    defaultValue: [],
+    required: true,
+    typeMetadata: {
+      schema: {
+        type: 'array',
+        items: {
+          anyOf: [{
+            type: 'object',
+            properties: {
+              id: {
+                type: 'string'
+              },
+              value: {
+                type: 'string'
+              },
+              iconName: {
+                type: 'string'
+              },
+              iconSize: {
+                type: 'string'
+              }
+            },
+            required: ['id', 'value']
+          }, {
+            type: 'object',
+            properties: {
+              needDivider: {
+                type: 'boolean'
+              }
+            },
+            required: ['needDivider']
+          }]
+        }
+      }
+    }
+  },
+  isDisabled: {
+    defaultValue: false,
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'boolean'
+      }
+    }
+  },
+  tooltip: {
+    defaultValue: '',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  }
+};

package/es/cc/more-dropdown/index.js

@@ -0,0 +1,3 @@
+export { default as MoreDropdownProperties } from "./Properties";
+export { default as MoreDropdownEvents } from "./Events";
+export { default as MoreDropdownConstants } from "./Constants";

package/es/library/dot/components/action-location/frameworks/ui/ActionComponentMapping.js

@@ -1,10 +1,16 @@
 import ActionIcon from "../../../../legacy-to-new-arch/action-icon/frameworks/ui/ActionIcon";
+import Button from "../../../../legacy-to-new-arch/button/frameworks/ui/Button"; // import ListItem from '@library/dot/legacy-to-new-arch/list-item/frameworks/ui/ListItem';
+
 import TableColumnSort from "../../../../legacy-to-new-arch/table-column-sort/frameworks/ui/TableColumnSort";
 import TableColumnChooser from "../../../../legacy-to-new-arch/table-column-chooser/frameworks/ui/TableColumnChooser";
 import Checkbox from "../../../../legacy-to-new-arch/checkbox/frameworks/ui/Checkbox";
 import TableColumnFilter from "../../../../legacy-to-new-arch/table-column-filter/frameworks/ui/TableColumnFilter";
+import MoreDropdown from "../../../../legacy-to-new-arch/more-dropdown/frameworks/ui/MoreDropdown";
 const ActionComponentMapping = {
   ['ActionIcon']: ActionIcon,
+  ['Button']: Button,
+  // ['ListItem']: ListItem,
+  ['MoreDropdown']: MoreDropdown,
   ['TableColumnSort']: TableColumnSort,
   ['TableColumnChooser']: TableColumnChooser,
   ['TableSelectAll']: Checkbox,

package/es/library/dot/legacy-to-new-arch/action-icon/frameworks/ui/ActionIconView.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import ActionIcon from '@zohodesk-private/desk-components/es/ActionIcon/ActionIcon';
-import Constants from "../../../../../../cc/action-icon/Constants";
+import Constants from "../../../../../../cc/action-icon/Constants"; // @ts-ignore
+
+import style from "./css/ActionIconView.module.css";
 export default function ActionIconView(_ref, ref) {
   let {
     state,
@@ -8,6 +10,8 @@ export default function ActionIconView(_ref, ref) {
   } = _ref;
   const {
     icon,
+    iconSize,
+    hasPadding,
     label,
     hoverVariant,
     isDisabled
@@ -18,9 +22,14 @@ export default function ActionIconView(_ref, ref) {
   return /*#__PURE__*/React.createElement(ActionIcon, {
     ref: ref,
     $ui_iconName: icon,
+    $ui_size: JSON.stringify(iconSize),
     $ui_hoverVariant: hoverVariant,
     $flag_disabled: isDisabled,
     $i18n_tooltip: label,
+    hasPadding: hasPadding,
+    customStyle: hoverVariant === 'default' ? {
+      icon: style.cursor_default
+    } : undefined,
     $event_onClick: !isDisabled ? () => {
       dispatch({
         type: Constants.ACTION_ICON_CLICKED

package/es/library/dot/legacy-to-new-arch/action-icon/frameworks/ui/css/ActionIconView.module.css

@@ -0,0 +1,3 @@
+.cursor_default {
+    cursor: default
+}

package/es/library/dot/legacy-to-new-arch/button/frameworks/ui/Button.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import ButtonProperties from "../../../../../../cc/button/Properties";
+import ButtonEvents from "../../../../../../cc/button/Events";
+import ButtonView from "./ButtonView";
+let Button = createCustomComponent({
+  name: "Button",
+  View: ButtonView,
+  properties: ButtonProperties,
+  events: ButtonEvents,
+  eventHandlers: {}
+});
+export default Button;

package/es/library/dot/legacy-to-new-arch/button/frameworks/ui/ButtonView.js

@@ -0,0 +1,41 @@
+import React from "react";
+import Button from '@zohodesk/components/es/Button/Button';
+import ButtonConstants from "../../../../../../cc/button/Constants";
+
+function ButtonView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    text,
+    palette,
+    size,
+    isRounded,
+    isDisabled,
+    id,
+    status,
+    tooltip
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Button, {
+    getRef: ref,
+    text: text,
+    palette: palette,
+    size: size,
+    isRounded: isRounded,
+    isDisabled: isDisabled,
+    id: id,
+    status: status,
+    tooltip: tooltip,
+    onClick: () => {
+      dispatch({
+        type: ButtonConstants.BUTTON_CLICKED
+      });
+    }
+  });
+}
+
+export default ButtonView;

package/es/library/dot/legacy-to-new-arch/list-item/frameworks/ui/ListItem.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import ListItemProperties from "../../../../../../cc/list-item/Properties";
+import ListItemEvents from "../../../../../../cc/list-item/Events";
+import ListItemView from "./ListItemView";
+let ListItem = createCustomComponent({
+  name: "ListItem",
+  View: ListItemView,
+  properties: ListItemProperties,
+  events: ListItemEvents,
+  eventHandlers: {}
+});
+export default ListItem;

package/es/library/dot/legacy-to-new-arch/list-item/frameworks/ui/ListItemView.js

@@ -0,0 +1,122 @@
+import React from "react";
+import DropDownSeparator from '@zohodesk/components/es/DropDown/DropDownSeparator';
+import ListItem from '@zohodesk/components/es/ListItem/ListItem';
+import ListItemWithAvatar from '@zohodesk/components/es/ListItem/ListItemWithAvatar';
+import ListItemWithIcon from '@zohodesk/components/es/ListItem/ListItemWithIcon';
+import ListItemConstants from "../../../../../../cc/list-item/Constants";
+
+function ListItemView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    id,
+    isDisabled,
+    isActive,
+    text,
+    secondaryText,
+    size,
+    tooltip,
+    icon,
+    iconSize,
+    imgSrc,
+    imgName,
+    href,
+    target,
+    divider
+  } = state.properties;
+  const isLink = !!href;
+  let listItemElement = null;
+
+  if (!!imgSrc || !!imgName) {
+    listItemElement = /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      getRef: ref,
+      id: id,
+      isDisabled: isDisabled,
+      autoHover: true,
+      active: isActive,
+      value: text,
+      secondaryValue: secondaryText,
+      size: size,
+      title: tooltip,
+      disableTitle: tooltip,
+      lhsJustifyContent: "start",
+      imgSrc: imgSrc,
+      name: imgName,
+      onClick: () => {
+        dispatch({
+          type: ListItemConstants.LISTITEM_CLICKED,
+          payload: {
+            id
+          }
+        });
+      },
+      customProps: isLink ? {
+        ContainerProps: {
+          isLink,
+          href,
+          target
+        }
+      } : undefined
+    });
+  } else if (!!icon) {
+    listItemElement = /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      getRef: ref,
+      id: id,
+      isDisabled: isDisabled,
+      autoHover: true,
+      active: isActive,
+      value: text,
+      secondaryValue: secondaryText,
+      size: size,
+      title: tooltip,
+      disableTitle: tooltip,
+      lhsJustifyContent: "start",
+      iconName: icon,
+      iconSize: JSON.stringify(iconSize),
+      isLink: isLink,
+      href: href,
+      target: target,
+      onClick: () => {
+        dispatch({
+          type: ListItemConstants.LISTITEM_CLICKED,
+          payload: {
+            id
+          }
+        });
+      }
+    });
+  } else {
+    listItemElement = /*#__PURE__*/React.createElement(ListItem, {
+      getRef: ref,
+      id: id,
+      isDisabled: isDisabled,
+      autoHover: true,
+      active: isActive,
+      value: text,
+      secondaryValue: secondaryText,
+      size: size,
+      title: tooltip,
+      disableTitle: tooltip,
+      isLink: isLink,
+      href: href,
+      target: target,
+      onClick: () => {
+        dispatch({
+          type: ListItemConstants.LISTITEM_CLICKED,
+          payload: {
+            id
+          }
+        });
+      }
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, divider === 'before' && /*#__PURE__*/React.createElement(DropDownSeparator, null), listItemElement, divider === 'after' && /*#__PURE__*/React.createElement(DropDownSeparator, null));
+}
+
+export default ListItemView;

package/es/library/dot/legacy-to-new-arch/more-dropdown/frameworks/ui/MoreDropdown.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import MoreDropdownProperties from "../../../../../../cc/more-dropdown/Properties";
+import MoreDropdownEvents from "../../../../../../cc/more-dropdown/Events";
+import MoreDropdownView from "./MoreDropdownView";
+let MoreDropdown = createCustomComponent({
+  name: "MoreDropdown",
+  View: MoreDropdownView,
+  properties: MoreDropdownProperties,
+  events: MoreDropdownEvents,
+  eventHandlers: {}
+});
+export default MoreDropdown;

package/es/library/dot/legacy-to-new-arch/more-dropdown/frameworks/ui/MoreDropdownView.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import MoreDropdown from '@zohodesk-private/desk-components/es/MoreAction/MoreAction';
+import MoreDropdownConstants from "../../../../../../cc/more-dropdown/Constants";
+
+function MoreDropdownView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    heading,
+    options,
+    isDisabled,
+    tooltip
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(MoreDropdown, {
+    $customProps_container: {
+      title: heading,
+      customProps: {
+        ToggleDropDownProps: {
+          ref
+        }
+      }
+    },
+    $data_options: options,
+    $flag_isDisabled: isDisabled // $i18n_heading={heading}
+    ,
+    $i18n_moreIconTooltip: tooltip,
+    $event_onClick: id => {
+      dispatch({
+        type: MoreDropdownConstants.MORE_DROPDOWN_OPTION_CLICKED,
+        payload: {
+          id
+        }
+      });
+    }
+  });
+}
+
+export default MoreDropdownView;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/library-platform",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "",
   "main": "es/index.js",
   "files": [