@loja-integrada/admin-components 0.12.8 → 0.14.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/User.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const User: () => 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,6 +30,7 @@ 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;
@@ -53,4 +55,5 @@ export declare const icons: {
     usdCircle: () => JSX.Element;
     questionCircle: () => JSX.Element;
     sync: () => JSX.Element;
+    user: () => JSX.Element;
 };

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",
@@ -521,6 +537,14 @@ var AngleWidth = function AngleWidth() {
   }));
 };
 
+var User = function User() {
+  return React__default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M10.707 0H7.293C5.803 0 4.644 1.295 4.809 2.776L5.253 6.776C5.394 8.042 6.464 9 7.737 9H10.263C11.536 9 12.606 8.042 12.747 6.776L13.191 2.776C13.356 1.295 12.196 0 10.707 0M10.707 1.5C11.096 1.5 11.341 1.709 11.452 1.833C11.563 1.958 11.743 2.224 11.701 2.61L11.256 6.61C11.2 7.118 10.772 7.5 10.263 7.5H7.737C7.228 7.5 6.8 7.118 6.743 6.61L6.299 2.61C6.256 2.224 6.436 1.958 6.548 1.833C6.659 1.709 6.904 1.5 7.293 1.5H10.707M14.012 11.5H3.988C1.658 11.5 0 13.228 0 15.807C0 17.578 0.783 18 2.02 18H15.979C17.43 18 18 17.152 18 15.807C18 13.231 16.342 11.5 14.012 11.5M14.012 13C14.716 13 15.367 13.285 15.846 13.801C16.324 14.318 16.504 14.84 16.504 15.692C16.504 16.158 16.384 16.5 15.979 16.5H2.02C1.723 16.5 1.496 16.267 1.496 15.692C1.496 14.974 1.675 14.318 2.154 13.801C2.633 13.285 3.284 13 3.988 13H14.012",
+    clipRule: "evenodd"
+  });
+};
+
 var icons = {
   angleLeft: AngleLeft,
   angleRight: AngleRight,
@@ -531,6 +555,7 @@ var icons = {
   arrowLeft: ArrowLeft,
   arrowRight: ArrowRight,
   sortDown: SortDown,
+  back: Back,
   ban: Ban,
   barcodeRead: BarcodeRead,
   bell: Bell,
@@ -551,6 +576,7 @@ var icons = {
   exclamationCircle: ExclamationCircle,
   exclamationTriangle: ExclamationTriangle,
   externalLink: ExternalLink,
+  halfBack: HalfBack,
   home: Home,
   image: Image,
   moneyBill: MoneyBill,
@@ -574,7 +600,8 @@ var icons = {
   truck: Truck,
   usdCircle: UsdCircle,
   questionCircle: QuestionCircle,
-  sync: Sync
+  sync: Sync,
+  user: User
 };
 
 var iconSizes = {
@@ -698,7 +725,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);
@@ -723,9 +752,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"
   }));
 };
@@ -2897,14 +2930,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() {
@@ -2931,24 +2970,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) {