@loja-integrada/admin-components 0.12.7 → 0.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/Components/Button/Button.d.ts +5 -0
  2. package/dist/Components/Button/Button.stories.d.ts +1 -0
  3. package/dist/Icons/icons-path/Back.d.ts +2 -0
  4. package/dist/Icons/icons-path/HalfBack.d.ts +2 -0
  5. package/dist/Icons/icons-path/User.d.ts +2 -0
  6. package/dist/Icons/icons-path/index.d.ts +3 -0
  7. package/dist/Navigation/Breadcrumb/Breadcrumb.stories.d.ts +4 -0
  8. package/dist/Navigation/Breadcrumb/index.d.ts +17 -0
  9. package/dist/admin-components.cjs.development.js +71 -17
  10. package/dist/admin-components.cjs.development.js.map +1 -1
  11. package/dist/admin-components.cjs.production.min.js +1 -1
  12. package/dist/admin-components.cjs.production.min.js.map +1 -1
  13. package/dist/admin-components.esm.js +71 -17
  14. package/dist/admin-components.esm.js.map +1 -1
  15. package/package.json +1 -1
  16. package/src/Components/Button/Button.spec.tsx +4 -0
  17. package/src/Components/Button/Button.stories.tsx +6 -0
  18. package/src/Components/Button/Button.tsx +19 -2
  19. package/src/Icons/Icon.stories.tsx +6 -4
  20. package/src/Icons/icons-path/Back.tsx +5 -0
  21. package/src/Icons/icons-path/HalfBack.tsx +12 -0
  22. package/src/Icons/icons-path/User.tsx +9 -0
  23. package/src/Icons/icons-path/index.ts +6 -0
  24. package/src/Layout/Sidebar/Sidebar.tsx +2 -2
  25. package/src/Navigation/Breadcrumb/Breadcrumb.spec.tsx +23 -1
  26. package/src/Navigation/Breadcrumb/Breadcrumb.stories.tsx +39 -0
  27. package/src/Navigation/Breadcrumb/index.tsx +81 -15
  28. package/src/Navigation/Pagination/PaginationNav.tsx +3 -0
  29. package/src/Components/Button/Button.test.tsx +0 -31
@@ -114,6 +114,12 @@ var ArrowRight = function ArrowRight() {
114
114
  });
115
115
  };
116
116
 
117
+ var Back = function Back() {
118
+ return React.createElement("path", {
119
+ 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"
120
+ });
121
+ };
122
+
117
123
  var Ban = function Ban() {
118
124
  return React.createElement("path", {
119
125
  fillRule: "evenodd",
@@ -274,6 +280,16 @@ var ExternalLink = function ExternalLink() {
274
280
  });
275
281
  };
276
282
 
283
+ var HalfBack = function HalfBack() {
284
+ return React.createElement(React.Fragment, null, React.createElement("path", {
285
+ fillRule: "evenodd",
286
+ clipRule: "evenodd",
287
+ 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"
288
+ }), React.createElement("path", {
289
+ 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"
290
+ }));
291
+ };
292
+
277
293
  var Home = function Home() {
278
294
  return React.createElement("path", {
279
295
  fillRule: "evenodd",
@@ -513,6 +529,14 @@ var AngleWidth = function AngleWidth() {
513
529
  }));
514
530
  };
515
531
 
532
+ var User = function User() {
533
+ return React.createElement("path", {
534
+ fillRule: "evenodd",
535
+ 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",
536
+ clipRule: "evenodd"
537
+ });
538
+ };
539
+
516
540
  var icons = {
517
541
  angleLeft: AngleLeft,
518
542
  angleRight: AngleRight,
@@ -523,6 +547,7 @@ var icons = {
523
547
  arrowLeft: ArrowLeft,
524
548
  arrowRight: ArrowRight,
525
549
  sortDown: SortDown,
550
+ back: Back,
526
551
  ban: Ban,
527
552
  barcodeRead: BarcodeRead,
528
553
  bell: Bell,
@@ -543,6 +568,7 @@ var icons = {
543
568
  exclamationCircle: ExclamationCircle,
544
569
  exclamationTriangle: ExclamationTriangle,
545
570
  externalLink: ExternalLink,
571
+ halfBack: HalfBack,
546
572
  home: Home,
547
573
  image: Image,
548
574
  moneyBill: MoneyBill,
@@ -566,7 +592,8 @@ var icons = {
566
592
  truck: Truck,
567
593
  usdCircle: UsdCircle,
568
594
  questionCircle: QuestionCircle,
569
- sync: Sync
595
+ sync: Sync,
596
+ user: User
570
597
  };
571
598
 
572
599
  var iconSizes = {
@@ -690,7 +717,9 @@ var ButtonComponent = function ButtonComponent(_ref2, ref) {
690
717
  onClick = _ref2.onClick,
691
718
  _ref2$size = _ref2.size,
692
719
  size = _ref2$size === void 0 ? 'default' : _ref2$size,
693
- props = _objectWithoutPropertiesLoose(_ref2, ["children", "loading", "variant", "fullWidth", "icon", "disabled", "className", "onClick", "size"]);
720
+ _ref2$iconPosition = _ref2.iconPosition,
721
+ iconPosition = _ref2$iconPosition === void 0 ? 'right' : _ref2$iconPosition,
722
+ props = _objectWithoutPropertiesLoose(_ref2, ["children", "loading", "variant", "fullWidth", "icon", "disabled", "className", "onClick", "size", "iconPosition"]);
694
723
 
695
724
  var handleClick = function handleClick(event) {
696
725
  (!disabled || !loading) && onClick && onClick(event);
@@ -715,9 +744,13 @@ var ButtonComponent = function ButtonComponent(_ref2, ref) {
715
744
  className: classes,
716
745
  disabled: disabled,
717
746
  onClick: handleClick
718
- }, props), children, currentIcon && React.createElement(Icon, {
747
+ }, props), currentIcon && iconPosition === 'left' && React.createElement(Icon, {
719
748
  icon: currentIcon,
720
- size: 4,
749
+ size: size === 'small' ? 3 : 4,
750
+ className: "mr-2 inline-block"
751
+ }), children, currentIcon && iconPosition === 'right' && React.createElement(Icon, {
752
+ icon: currentIcon,
753
+ size: size === 'small' ? 3 : 4,
721
754
  className: "ml-3 inline-block"
722
755
  }));
723
756
  };
@@ -2889,14 +2922,20 @@ var Breadcrumb = /*#__PURE__*/React.memo(function (_ref) {
2889
2922
  currentTitle = _ref.currentTitle,
2890
2923
  previousTitle = _ref.previousTitle,
2891
2924
  previousHref = _ref.previousHref,
2925
+ _ref$mobileAlign = _ref.mobileAlign,
2926
+ mobileAlign = _ref$mobileAlign === void 0 ? 'left' : _ref$mobileAlign,
2927
+ help = _ref.help,
2928
+ actions = _ref.actions,
2892
2929
  _ref$className = _ref.className,
2893
2930
  className = _ref$className === void 0 ? '' : _ref$className;
2894
2931
  var renderPrevTitle = React.createElement("span", {
2895
- className: "hidden lg:inline"
2932
+ className: "hidden lg:inline truncate"
2896
2933
  }, previousTitle);
2897
2934
  var renderPrevIcon = React.createElement(Icon, {
2898
2935
  icon: "arrowLeft",
2899
- className: "w-4 h-4 inline-flex mr-3 lg:-mt-1"
2936
+ size: 4,
2937
+ className: "inline-flex mr-3 -mt-1",
2938
+ block: true
2900
2939
  });
2901
2940
 
2902
2941
  var renderPrevLink = function renderPrevLink() {
@@ -2923,24 +2962,36 @@ var Breadcrumb = /*#__PURE__*/React.memo(function (_ref) {
2923
2962
 
2924
2963
  return React.createElement("div", {
2925
2964
  "aria-label": "breadcrumbs",
2926
- className: "header-navigation flex flex-wrap items-center justify-between mb-4 lg:mb-7 " + className
2965
+ className: "header-navigation flex items-center justify-between mb-4 lg:mb-7 " + className
2927
2966
  }, React.createElement("div", {
2928
- className: "header-navigation-breadcrumb max-w-full truncate"
2967
+ className: "header-navigation-breadcrumb max-w-full truncate w-full"
2929
2968
  }, React.createElement("div", {
2930
- className: "inline-flex self-center items-center font-semibold tracking-5 text-f5 sm:text-f4 lg:text-f3"
2931
- }, previousTitle && React.createElement("span", {
2932
- className: "header-navigation-previous inline-flex items-center text-on-base-2 text-xl -mr-px"
2933
- }, renderPrevLink(), React.createElement("span", {
2969
+ className: "w-full inline-flex self-center items-center font-semibold tracking-5 text-f5 sm:text-f4 lg:text-f3"
2970
+ }, (previousTitle || previousHref) && React.createElement("span", {
2971
+ className: "header-navigation-previous inline-flex items-center text-on-base-2 text-xl -mr-px truncate"
2972
+ }, renderPrevLink(), previousTitle && React.createElement("span", {
2934
2973
  className: "hidden lg:inline px-2 -ml-px"
2935
2974
  }, " / ")), React.createElement("span", {
2936
- className: "header-navigation-current text-on-base"
2975
+ className: "header-navigation-current text-on-base truncate " + (mobileAlign === 'center' ? 'w-full lg:w-auto text-center lg:text-left' : '')
2937
2976
  }, currentTitle))), React.createElement("div", {
2938
- className: "header-navigation-content flex items-center flex-grow justify-end"
2977
+ className: "header-navigation-content flex shrink-0 max-w-1/2 items-center flex-grow justify-end gap-5 ml-2 whitespace-nowrap"
2939
2978
  }, React.createElement("div", {
2940
2979
  className: "header-navigation-help help flex items-center"
2941
- }), React.createElement("div", {
2942
- className: "header-navigation-actions flex items-center"
2943
- })));
2980
+ }, help && React.createElement("a", {
2981
+ href: help.href,
2982
+ target: "_blank",
2983
+ rel: "noreferrer",
2984
+ className: "flex p-1 pr-0 text-on-base-2 hover:text-on-base duration-200 transition-colors items-center"
2985
+ }, React.createElement(Icon, {
2986
+ icon: "questionCircle",
2987
+ size: 4,
2988
+ className: "shrink-0",
2989
+ block: true
2990
+ }), help.title && React.createElement("span", {
2991
+ className: "text-f6 font-semibold tracking-4 leading-6 ml-2 " + (!help.mobileText ? 'hidden md:inline' : '')
2992
+ }, help.title))), actions && React.createElement("div", {
2993
+ className: "header-navigation-actions flex items-center gap-5"
2994
+ }, actions)));
2944
2995
  });
2945
2996
 
2946
2997
  var PaginationInfoComponent = function PaginationInfoComponent(_ref) {
@@ -3042,6 +3093,7 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
3042
3093
  onCut: onPreventDefault,
3043
3094
  onPaste: onPreventDefault
3044
3095
  }, currentPage), ' ', "/", ' ', React.createElement("button", {
3096
+ type: "button",
3045
3097
  id: "btnPaginationLastPage",
3046
3098
  className: "pagination-nav-total focus:outline-none",
3047
3099
  onClick: function onClick() {
@@ -3050,6 +3102,7 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
3050
3102
  }, maxTotalPages)), React.createElement("div", {
3051
3103
  className: "text-inverted-2 ml-5 flex items-center"
3052
3104
  }, React.createElement("button", {
3105
+ type: "button",
3053
3106
  id: "btnPaginationPrev",
3054
3107
  className: "pagination-nav-previous mr-3 duration-200 outline-none " + (hasPrev ? 'hover:text-inverted-1' : ''),
3055
3108
  "aria-label": "Ir para p\xE1gina anterior",
@@ -3061,6 +3114,7 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
3061
3114
  block: true,
3062
3115
  size: 4
3063
3116
  })), React.createElement("button", {
3117
+ type: "button",
3064
3118
  id: "btnPaginationNext",
3065
3119
  className: "pagination-nav-next duration-200 outline-none " + (hasNext ? 'hover:text-inverted-1' : ''),
3066
3120
  "aria-label": "Ir para pr\xF3xima p\xE1gina",