@loja-integrada/admin-components 0.12.5 → 0.12.6

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/admin-components.cjs.development.js

@@ -2067,12 +2067,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 +2084,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 +2100,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 +2116,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 +2143,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
+      })
     });
   })));
 };