@loja-integrada/admin-components 0.12.4 → 0.12.7

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/Indicators/Badge/Badge.d.ts

@@ -10,7 +10,7 @@ declare const badgeSizes: {
     default: string;
     small: string;
 };
-export declare const Badge: React.MemoExoticComponent<({ type, text, size, }: BadgeProps) => JSX.Element>;
+export declare const Badge: React.MemoExoticComponent<({ type, text, size, expanded, }: BadgeProps) => JSX.Element>;
 export interface BadgeProps {
     /** Badge color
      * @default neutral
@@ -24,5 +24,9 @@ export interface BadgeProps {
      * @default default
      * */
     size?: keyof typeof badgeSizes;
+    /**
+     * Enlarge width of the badge
+     * */
+    expanded?: boolean;
 }
 export {};

package/dist/Indicators/Badge/Badge.stories.d.ts

@@ -2,4 +2,5 @@ import { BadgeProps } from './Badge';
 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, BadgeProps>;
+export declare const Expanded: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, BadgeProps>;
 export declare const Small: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, BadgeProps>;

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
+      })
     });
   })));
 };
@@ -2434,9 +2454,11 @@ var BadgeComponent = function BadgeComponent(_ref) {
       type = _ref$type === void 0 ? 'neutral' : _ref$type,
       text = _ref.text,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'default' : _ref$size;
+      size = _ref$size === void 0 ? 'default' : _ref$size,
+      _ref$expanded = _ref.expanded,
+      expanded = _ref$expanded === void 0 ? false : _ref$expanded;
   return React__default.createElement("div", {
-    className: "badge inline-flex items-center justify-center rounded-full " + badgeTypes[type] + " " + badgeSizes[size]
+    className: "badge items-center justify-center rounded-full " + badgeTypes[type] + " " + badgeSizes[size] + " " + (expanded ? 'flex w-full' : 'inline-flex')
   }, React__default.createElement("span", {
     className: "text-xs tracking-4 font-semibold text-base-1"
   }, text));
@@ -2624,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({
@@ -2646,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));
   };