@loja-integrada/admin-components 0.12.5 → 0.12.8

package/dist/Components/Timeline/Timeline.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TimelineItemInterface } from './TimelineItem.interface';
-export declare const Timeline: React.MemoExoticComponent<({ className, items, isLoading, emptyTitle, }: TimelineProps) => JSX.Element | null>;
+export declare const Timeline: React.MemoExoticComponent<({ className, items, isLoading, toggleItems, emptyTitle, }: TimelineProps) => JSX.Element | null>;
 export interface TimelineProps {
     /**
      * Custom class name
@@ -18,4 +18,8 @@ export interface TimelineProps {
      * @default 'Nenhum registro encontrado'
      */
     emptyTitle?: string;
+    /** Timeline item show toggle
+     * @default true
+     */
+    toggleItems?: boolean;
 }

package/dist/Components/Timeline/Timeline.stories.d.ts

@@ -2,5 +2,6 @@ import { TimelineProps } from './Timeline';
 declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
 export default _default;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TimelineProps>;
+export declare const WithoutToggle: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TimelineProps>;
 export declare const Loading: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TimelineProps>;
 export declare const Empty: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TimelineProps>;

package/dist/Components/Timeline/TimelineItem.interface.d.ts

@@ -21,4 +21,8 @@ export interface TimelineItemInterface {
      * Background of the current icon (className)
      */
     iconBackgroundColor?: string;
+    /**
+     * Toggle item description
+     */
+    toggle?: boolean;
 }

package/dist/Icons/icons-path/MoneyBill.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MoneyBill: () => JSX.Element;

package/dist/Icons/icons-path/index.d.ts

@@ -31,6 +31,7 @@ export declare const icons: {
     externalLink: () => JSX.Element;
     home: () => JSX.Element;
     image: () => JSX.Element;
+    moneyBill: () => JSX.Element;
     move: () => JSX.Element;
     order: () => JSX.Element;
     pagali: () => JSX.Element;

package/dist/Layout/Box/Box.d.ts

@@ -14,6 +14,10 @@ export interface BoxProps extends Partial<SharedContextProps> {
      * Custom class name
      * */
     className?: string;
+    /**
+     * Box ID
+     * */
+    id?: string;
     /**
      * Box Header and Content
      */

package/dist/admin-components.cjs.development.js

@@ -298,6 +298,14 @@ var Image = function Image() {
   });
 };
 
+var MoneyBill = function MoneyBill() {
+  return React__default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M3.245 12.2h11.51a1.995 1.995 0 0 1 1.945-1.945v-6.51A1.995 1.995 0 0 1 14.755 1.8H3.245A1.995 1.995 0 0 1 1.3 3.745v6.51A1.995 1.995 0 0 1 3.245 12.2ZM18 2v10a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 0 12V2A1.5 1.5 0 0 1 1.5.5h15A1.5 1.5 0 0 1 18 2Zm-6.5 5c0 2-1 3-2.5 3S6.5 9 6.5 7s1-3 2.5-3 2.5 1 2.5 3Z",
+    clipRule: "evenodd"
+  });
+};
+
 var Move = function Move() {
   return React__default.createElement("path", {
     fillRule: "evenodd",
@@ -545,6 +553,7 @@ var icons = {
   externalLink: ExternalLink,
   home: Home,
   image: Image,
+  moneyBill: MoneyBill,
   move: Move,
   order: Order,
   pagali: Pagali,
@@ -2067,12 +2076,13 @@ var Tabs = /*#__PURE__*/React__default.memo(TabsComponent);
 var TimelineItem = function TimelineItem(_ref) {
   var item = _ref.item;
 
-  var _useState = React.useState(false),
+  var _useState = React.useState(!item.toggle),
       isOpen = _useState[0],
       setIsOpen = _useState[1];
 
   var iconBackgroundColor = item.iconBackgroundColor || "bg-inverted-2";
   var icon = item.icon || 'minus';
+  var showToggle = item.toggle && item.description;
   return React__default.createElement("li", {
     className: "timeline-item relative mb-10 last:mb-0"
   }, React__default.createElement("div", {
@@ -2083,13 +2093,13 @@ var TimelineItem = function TimelineItem(_ref) {
   })), React__default.createElement("div", {
     className: "ml-7 pt-px"
   }, React__default.createElement("div", {
-    className: "timeline-title group mb-1 py-1 text-sm text-inverted-1 font-semibold break-words " + (item.description ? 'cursor-pointer' : ''),
+    className: "timeline-title group py-1 text-f6 leading-6 tracking-4 text-inverted-1 font-semibold break-words " + (showToggle ? 'cursor-pointer' : ''),
     onClick: function onClick() {
-      return item.description && setIsOpen(function (isOpen) {
+      return showToggle && setIsOpen(function (isOpen) {
         return !isOpen;
       });
     }
-  }, item.description && React__default.createElement("button", {
+  }, showToggle && React__default.createElement("button", {
     className: "float-right p-1 -mt-px text-inverted-2 group-hover:text-inverted-1 focus:outline-none"
   }, React__default.createElement(Icon, {
     icon: "angleLeft",
@@ -2099,9 +2109,13 @@ var TimelineItem = function TimelineItem(_ref) {
   })), React__default.createElement("span", {
     className: "inline break-words"
   }, item.title)), item.timestamp && React__default.createElement("div", {
-    className: "timeline-timestamp mb-1 text-xs text-inverted-2 break-words"
-  }, item.timestamp), item.description && React__default.createElement("div", {
-    className: "timeline-description overflow-hidden text-sm text-inverted-1 break-words transition-max-height " + (isOpen ? 'max-h-96' : 'max-h-0')
+    className: "timeline-timestamp mb-1 inline-flex items-center text-xs tracking-4 text-inverted-2 break-words"
+  }, React__default.createElement(Icon, {
+    icon: "clock",
+    size: 3,
+    className: "mr-1"
+  }), item.timestamp), item.description && React__default.createElement("div", {
+    className: "timeline-description overflow-hidden text-sm tracking-4 text-inverted-1 break-words transition-max-height " + (isOpen ? 'max-h-96' : 'max-h-0')
   }, item.description)));
 };
 
@@ -2111,6 +2125,8 @@ var TimelineComponent = function TimelineComponent(_ref) {
       items = _ref.items,
       _ref$isLoading = _ref.isLoading,
       isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      _ref$toggleItems = _ref.toggleItems,
+      toggleItems = _ref$toggleItems === void 0 ? true : _ref$toggleItems,
       _ref$emptyTitle = _ref.emptyTitle,
       emptyTitle = _ref$emptyTitle === void 0 ? 'Nenhum registro encontrado' : _ref$emptyTitle;
   if (!isLoading && (!items || !Array.isArray(items))) return null;
@@ -2136,9 +2152,13 @@ var TimelineComponent = function TimelineComponent(_ref) {
       icon: 'ban'
     }
   }) : items == null ? void 0 : items.map(function (item, index) {
+    var _item$toggle;
+
     return React__default.createElement(TimelineItem, {
       key: "timeline-item-" + index,
-      item: item
+      item: _extends({}, item, {
+        toggle: (_item$toggle = item.toggle) != null ? _item$toggle : toggleItems
+      })
     });
   })));
 };
@@ -2626,7 +2646,8 @@ var Box = /*#__PURE__*/function (_React$PureComponent) {
         _this$props$variant = _this$props.variant,
         variant = _this$props$variant === void 0 ? 'default' : _this$props$variant,
         _this$props$isToggle = _this$props.isToggle,
-        isToggle = _this$props$isToggle === void 0 ? false : _this$props$isToggle;
+        isToggle = _this$props$isToggle === void 0 ? false : _this$props$isToggle,
+        id = _this$props.id;
 
     var toggleContent = function toggleContent(value) {
       return _this2.setState({
@@ -2648,7 +2669,8 @@ var Box = /*#__PURE__*/function (_React$PureComponent) {
       didUpdate: toggleContent
     }), React__default.createElement("div", {
       className: "box w-full flex flex-col bg-base-1 border border-card-stroke rounded " + className,
-      "data-opened": isOpen
+      "data-opened": isOpen,
+      id: id
     }, children));
   };
 
@@ -3028,6 +3050,7 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
     onCut: onPreventDefault,
     onPaste: onPreventDefault
   }, currentPage), ' ', "/", ' ', React__default.createElement("button", {
+    type: "button",
     id: "btnPaginationLastPage",
     className: "pagination-nav-total focus:outline-none",
     onClick: function onClick() {
@@ -3036,6 +3059,7 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
   }, maxTotalPages)), React__default.createElement("div", {
     className: "text-inverted-2 ml-5 flex items-center"
   }, React__default.createElement("button", {
+    type: "button",
     id: "btnPaginationPrev",
     className: "pagination-nav-previous mr-3 duration-200 outline-none " + (hasPrev ? 'hover:text-inverted-1' : ''),
     "aria-label": "Ir para p\xE1gina anterior",
@@ -3047,6 +3071,7 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
     block: true,
     size: 4
   })), React__default.createElement("button", {
+    type: "button",
     id: "btnPaginationNext",
     className: "pagination-nav-next duration-200 outline-none " + (hasNext ? 'hover:text-inverted-1' : ''),
     "aria-label": "Ir para pr\xF3xima p\xE1gina",