@loja-integrada/admin-components 0.12.6 → 0.13.0

package/dist/Components/Button/Button.d.ts

@@ -28,6 +28,11 @@ export interface ButtonProps extends ButtonAnchorProps {
      * Icon of the button
      */
     icon?: IconProps['icon'];
+    /**
+     * Icon of the button
+     * @default 'right'
+     */
+    iconPosition?: 'left' | 'right';
     /**
      * React children
      * Also support render prop

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

@@ -8,3 +8,4 @@ export declare const Action: import("@storybook/csf").AnnotatedStoryFn<import("@
 export declare const Disabled: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ButtonProps>;
 export declare const Loading: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ButtonProps>;
 export declare const WithLink: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ButtonProps>;
+export declare const WithIcon: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ButtonProps>;

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

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

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

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

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

@@ -9,6 +9,7 @@ export declare const icons: {
     arrowLeft: () => JSX.Element;
     arrowRight: () => JSX.Element;
     sortDown: () => JSX.Element;
+    back: () => JSX.Element;
     ban: () => JSX.Element;
     barcodeRead: () => JSX.Element;
     bell: () => JSX.Element;
@@ -29,8 +30,10 @@ export declare const icons: {
     exclamationCircle: () => JSX.Element;
     exclamationTriangle: () => JSX.Element;
     externalLink: () => JSX.Element;
+    halfBack: () => 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/Navigation/Breadcrumb/Breadcrumb.stories.d.ts

@@ -5,3 +5,7 @@ export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("
 export declare const NoPrevious: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, BreadcrumbProps>;
 export declare const WithPrevious: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, BreadcrumbProps>;
 export declare const WithPreviousCustom: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, BreadcrumbProps>;
+export declare const WithoutPreviousTitle: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, BreadcrumbProps>;
+export declare const WithMobileCenter: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, BreadcrumbProps>;
+export declare const WithHelp: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, BreadcrumbProps>;
+export declare const WithActions: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, BreadcrumbProps>;

package/dist/Navigation/Breadcrumb/index.d.ts

@@ -22,4 +22,21 @@ export interface BreadcrumbProps {
      * Example: `const Link = (props: any) => { return  <a href="https://www.google.com" target="_blank" className={`underline ` + props.className}>{props.children}</a> }`
      * */
     Link?: React.ElementType;
+    /**
+     * Aligment of `currentTitle` at mobile
+     * @default 'left'
+     * */
+    mobileAlign?: 'left' | 'center';
+    /**
+     * Help link (external page)
+     * */
+    help?: {
+        title?: string;
+        href: string;
+        mobileText?: boolean;
+    };
+    /**
+     * Custom actions and buttons
+     * */
+    actions?: React.ReactNode;
 }

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

@@ -122,6 +122,12 @@ var ArrowRight = function ArrowRight() {
   });
 };
 
+var Back = function Back() {
+  return React__default.createElement("path", {
+    d: "M5.5495 4.26c.282-.303.265-.777-.039-1.06-.304-.281-.778-.264-1.061.039l-3.25 3.5c-.266.289-.266.734 0 1.021l3.25 3.5c.149.159.349.24.55.24.183 0 .366-.066.511-.2.304-.282.321-.757.039-1.061L3.4695 8H13V6.5H3.4695l2.08-2.24ZM13 6.5V8c.5926-.00007 1.1679.22038 1.6206.60807.4916.42109.8001 1.01704.8599 1.66163.0599.6445-.1335 1.2871-.5393 1.7915-.4057.5044-.9918.8311-1.6342.9108l.1858 1.4976c1.0316-.1281 1.9728-.6526 2.6243-1.4626.6515-.81.9621-1.8418.866-2.8769-.0962-1.03499-.5914-1.99196-1.3809-2.66814C14.8753 6.83943 13.9516 6.49992 13 6.5Z"
+  });
+};
+
 var Ban = function Ban() {
   return React__default.createElement("path", {
     fillRule: "evenodd",
@@ -282,6 +288,16 @@ var ExternalLink = function ExternalLink() {
   });
 };
 
+var HalfBack = function HalfBack() {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "m15.8384 13.3186-.0174-.0196-.9881-1.1119c.0374-.0406.0735-.0826.1083-.1259.4058-.5044.5992-1.1469.5393-1.7915-.0598-.64458-.3683-1.24053-.8599-1.66162-.4527-.38769-1.028-.60814-1.6206-.60807h-1.8884l-1.33319-1.5H13c.9516-.00008 1.8753.33943 2.6022.96196.7895.67618 1.2847 1.63314 1.3809 2.66823.0961 1.035-.2145 2.0668-.866 2.8768-.0878.1091-.1808.2131-.2787.3116Zm-1.2441.85c-.3479.1512-.7185.2534-1.1015.301l-.1858-1.4976c.0657-.0081.1308-.0188.1951-.0321l1.0922 1.2287ZM9.11111 8.00001l-1.33333-1.5H3.4695l2.08-2.24c.04231-.04545.07788-.09476.10677-.14669l-.9404-1.05796c-.0981.03985-.18931.10115-.26637.18365l-3.25 3.5c-.266.289-.266.734 0 1.021l3.25 3.49999c.149.159.349.24.55.24.183 0 .366-.066.511-.2.304-.282.321-.757.039-1.061l-2.08-2.23899h5.64161Z"
+  }), React__default.createElement("path", {
+    d: "m14.366 13.912-.545-.613-2.476-2.786-5.289-5.951-2.028-2.281L2 0H0l2.02756 2.281L16 18h2l-3.634-4.088Z"
+  }));
+};
+
 var Home = function Home() {
   return React__default.createElement("path", {
     fillRule: "evenodd",
@@ -298,6 +314,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",
@@ -523,6 +547,7 @@ var icons = {
   arrowLeft: ArrowLeft,
   arrowRight: ArrowRight,
   sortDown: SortDown,
+  back: Back,
   ban: Ban,
   barcodeRead: BarcodeRead,
   bell: Bell,
@@ -543,8 +568,10 @@ var icons = {
   exclamationCircle: ExclamationCircle,
   exclamationTriangle: ExclamationTriangle,
   externalLink: ExternalLink,
+  halfBack: HalfBack,
   home: Home,
   image: Image,
+  moneyBill: MoneyBill,
   move: Move,
   order: Order,
   pagali: Pagali,
@@ -689,7 +716,9 @@ var ButtonComponent = function ButtonComponent(_ref2, ref) {
       onClick = _ref2.onClick,
       _ref2$size = _ref2.size,
       size = _ref2$size === void 0 ? 'default' : _ref2$size,
-      props = _objectWithoutPropertiesLoose(_ref2, ["children", "loading", "variant", "fullWidth", "icon", "disabled", "className", "onClick", "size"]);
+      _ref2$iconPosition = _ref2.iconPosition,
+      iconPosition = _ref2$iconPosition === void 0 ? 'right' : _ref2$iconPosition,
+      props = _objectWithoutPropertiesLoose(_ref2, ["children", "loading", "variant", "fullWidth", "icon", "disabled", "className", "onClick", "size", "iconPosition"]);
 
   var handleClick = function handleClick(event) {
     (!disabled || !loading) && onClick && onClick(event);
@@ -714,9 +743,13 @@ var ButtonComponent = function ButtonComponent(_ref2, ref) {
     className: classes,
     disabled: disabled,
     onClick: handleClick
-  }, props), children, currentIcon && React__default.createElement(Icon, {
+  }, props), currentIcon && iconPosition === 'left' && React__default.createElement(Icon, {
     icon: currentIcon,
-    size: 4,
+    size: size === 'small' ? 3 : 4,
+    className: "mr-2 inline-block"
+  }), children, currentIcon && iconPosition === 'right' && React__default.createElement(Icon, {
+    icon: currentIcon,
+    size: size === 'small' ? 3 : 4,
     className: "ml-3 inline-block"
   }));
 };
@@ -2637,7 +2670,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({
@@ -2659,7 +2693,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));
   };
 
@@ -2886,14 +2921,20 @@ var Breadcrumb = /*#__PURE__*/React__default.memo(function (_ref) {
       currentTitle = _ref.currentTitle,
       previousTitle = _ref.previousTitle,
       previousHref = _ref.previousHref,
+      _ref$mobileAlign = _ref.mobileAlign,
+      mobileAlign = _ref$mobileAlign === void 0 ? 'left' : _ref$mobileAlign,
+      help = _ref.help,
+      actions = _ref.actions,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className;
   var renderPrevTitle = React__default.createElement("span", {
-    className: "hidden lg:inline"
+    className: "hidden lg:inline truncate"
   }, previousTitle);
   var renderPrevIcon = React__default.createElement(Icon, {
     icon: "arrowLeft",
-    className: "w-4 h-4 inline-flex mr-3 lg:-mt-1"
+    size: 4,
+    className: "inline-flex mr-3 -mt-1",
+    block: true
   });
 
   var renderPrevLink = function renderPrevLink() {
@@ -2920,24 +2961,36 @@ var Breadcrumb = /*#__PURE__*/React__default.memo(function (_ref) {
 
   return React__default.createElement("div", {
     "aria-label": "breadcrumbs",
-    className: "header-navigation flex flex-wrap items-center justify-between mb-4 lg:mb-7 " + className
+    className: "header-navigation flex items-center justify-between mb-4 lg:mb-7 " + className
   }, React__default.createElement("div", {
-    className: "header-navigation-breadcrumb max-w-full truncate"
+    className: "header-navigation-breadcrumb max-w-full truncate w-full"
   }, React__default.createElement("div", {
-    className: "inline-flex self-center items-center font-semibold tracking-5 text-f5 sm:text-f4 lg:text-f3"
-  }, previousTitle && React__default.createElement("span", {
-    className: "header-navigation-previous inline-flex items-center text-on-base-2 text-xl -mr-px"
-  }, renderPrevLink(), React__default.createElement("span", {
+    className: "w-full inline-flex self-center items-center font-semibold tracking-5 text-f5 sm:text-f4 lg:text-f3"
+  }, (previousTitle || previousHref) && React__default.createElement("span", {
+    className: "header-navigation-previous inline-flex items-center text-on-base-2 text-xl -mr-px truncate"
+  }, renderPrevLink(), previousTitle && React__default.createElement("span", {
     className: "hidden lg:inline px-2 -ml-px"
   }, " / ")), React__default.createElement("span", {
-    className: "header-navigation-current text-on-base"
+    className: "header-navigation-current text-on-base truncate " + (mobileAlign === 'center' ? 'w-full lg:w-auto text-center lg:text-left' : '')
   }, currentTitle))), React__default.createElement("div", {
-    className: "header-navigation-content flex items-center flex-grow justify-end"
+    className: "header-navigation-content flex shrink-0 max-w-1/2 items-center flex-grow justify-end gap-5 ml-2 whitespace-nowrap"
   }, React__default.createElement("div", {
     className: "header-navigation-help help flex items-center"
-  }), React__default.createElement("div", {
-    className: "header-navigation-actions flex items-center"
-  })));
+  }, help && React__default.createElement("a", {
+    href: help.href,
+    target: "_blank",
+    rel: "noreferrer",
+    className: "flex p-1 pr-0 text-on-base-2 hover:text-on-base duration-200 transition-colors items-center"
+  }, React__default.createElement(Icon, {
+    icon: "questionCircle",
+    size: 4,
+    className: "shrink-0",
+    block: true
+  }), help.title && React__default.createElement("span", {
+    className: "text-f6 font-semibold tracking-4 leading-6 ml-2 " + (!help.mobileText ? 'hidden md:inline' : '')
+  }, help.title))), actions && React__default.createElement("div", {
+    className: "header-navigation-actions flex items-center gap-5"
+  }, actions)));
 });
 
 var PaginationInfoComponent = function PaginationInfoComponent(_ref) {
@@ -3039,6 +3092,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() {
@@ -3047,6 +3101,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",
@@ -3058,6 +3113,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",