@loja-integrada/admin-components 0.9.1 → 0.9.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.9.1",
+  "version": "0.9.5",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
   "main": "dist/index.js",

package/src/Components/LoadingPlaceholder/LoadingPlaceholder.tsx

@@ -5,7 +5,7 @@ const LoadingPlaceholderComponent = ({
 }: LoadingPlaceholderProps) => {
   return (
     <div className={`animate-pulse flex ${className}`}>
-      <div className="h-4 bg-inverted-2 bg-opacity-20 rounded w-80 max-w-full"></div>
+      <div className="h-4 bg-inverted-2 bg-opacity-20 rounded w-full max-w-full"></div>
     </div>
   )
 }

package/src/Components/Table/Table.tsx

@@ -197,11 +197,15 @@ const TableComponent = ({
         <tbody {...getTableBodyProps()} className="text-sm text-on-base">
           {isLoading ? (
             <tr>
-              <td colSpan={columnsLength || 1} className={`${TdClasses}`}>
-                <TdWrapper>
-                  <LoadingPlaceholder />
-                </TdWrapper>
-              </td>
+              {Array(columnsLength)
+                .fill(0)
+                .map((key) => (
+                  <td key={key} className={`${TdClasses}`}>
+                    <TdWrapper>
+                      <LoadingPlaceholder />
+                    </TdWrapper>
+                  </td>
+                ))}
             </tr>
           ) : !rows || !rows.length ? (
             <tr>

package/src/Components/Tabs/TabsItem.tsx

@@ -26,13 +26,14 @@ export const TabsItem = ({
 }: TabsItemProps) => {
   return (
     <button
+      id={`btnTab${id}`}
       className={`tabs-item ${
         active ? 'tabs-item-active' : ''
       } group min-w-0 flex-shrink-0 overflow-x-hidden px-2 last:-mr-2 first:-ml-2`}
       onClick={() => onChange(id)}
     >
       <span
-        className={`block text-f6 text-sm py-4 border-b-4 break-words group-hover:font-semibold ${activeStyles(
+        className={`block text-f6 tracking-4 text-sm py-4 border-b-4 break-words group-hover:font-semibold ${activeStyles(
           active
         )} ${boldFixStyle}`}
         data-title={title}

package/src/Forms/Checkbox/Checkbox.tsx

@@ -9,6 +9,7 @@ const CheckboxComponent = (
     checked,
     disabled,
     indeterminate,
+    boxAlign = 'center',
     ...props
   }: CheckboxProps,
   ref: React.ForwardedRef<HTMLInputElement>
@@ -19,6 +20,7 @@ const CheckboxComponent = (
   const [isIndeterminate, setIsIndeterminate] = React.useState(
     !!indeterminate || false
   )
+  const isCenterBoxAlign = boxAlign === 'center'
 
   React.useEffect(() => {
     setIsChecked(!!checked)
@@ -41,13 +43,17 @@ const CheckboxComponent = (
     isChecked || isIndeterminate ? 'scale-100' : 'scale-0'
   }`
 
-  const checkboxIconContainerClasses = `border border-card-stroke transition duration-200 ease-in-out ${
-    disabled
-      ? 'bg-base-4'
-      : isChecked || isIndeterminate
-      ? 'bg-primary border-primary'
-      : 'bg-base-1'
-  }  rounded w-4 h-4 flex justify-center items-center m-px`
+  const checkboxIconContainerClasses = `border border-card-stroke transition duration-200 ease-in-out
+    ${
+      disabled
+        ? 'bg-base-4'
+        : isChecked || isIndeterminate
+        ? 'bg-primary border-primary'
+        : 'bg-base-1'
+    }
+    ${isCenterBoxAlign ? 'items-center' : ''}
+    rounded w-4 h-4 flex justify-center m-px
+  `
 
   const checkboxLabelClasses = `ml-1 input-label text-f6 tracking-4 leading-6 ${
     disabled ? 'text-inverted-2' : ''
@@ -56,7 +62,7 @@ const CheckboxComponent = (
   return (
     <label
       htmlFor={inputId}
-      className="inline-flex items-center cursor-pointer"
+      className={`inline-flex items-${boxAlign} cursor-pointer`}
     >
       <span className="rounded z-50 flex items-center justify-center focus-within:ring-2 ring-focus">
         <input
@@ -110,4 +116,5 @@ export interface CheckboxProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string | React.ReactNode
   indeterminate?: boolean
+  boxAlign?: 'center' | 'baseline'
 }

package/src/Icons/icons-path/Image.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Image = () => (
+  <path
+    fillRule="evenodd"
+    d="M10.5 5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm5.5 7.5H2a.5.5 0 0 1-.5-.5v-.937L5.176 8.39a2.247 2.247 0 0 1 2.647 0l2.188 1.59a3.759 3.759 0 0 0 4.027.246L16.5 8.857V12a.5.5 0 0 1-.5.5ZM2 1.5h14a.5.5 0 0 1 .5.5v5.261a.704.704 0 0 0-.364.084l-2.827 1.57a2.258 2.258 0 0 1-2.416-.147L8.706 7.177a3.743 3.743 0 0 0-4.412 0L1.5 9.209V2a.5.5 0 0 1 .5-.5ZM16 0H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Z"
+    clipRule="evenodd"
+  />
+)

package/src/Icons/icons-path/Move.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Move = () => (
+  <path
+    fillRule="evenodd"
+    d="M9.5 14c0-.828-.672-1.5-1.5-1.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5 1.5-.672 1.5-1.5zm-6 0c0-.828-.671-1.5-1.5-1.5S.5 13.172.5 14s.671 1.5 1.5 1.5 1.5-.672 1.5-1.5zm6-12C9.5 1.172 8.828.5 8 .5S6.5 1.172 6.5 2 7.172 3.5 8 3.5 9.5 2.828 9.5 2zm-6 0C3.5 1.172 2.829.5 2 .5S.5 1.172.5 2 1.171 3.5 2 3.5 3.5 2.828 3.5 2zm6 6c0-.828-.672-1.5-1.5-1.5S6.5 7.172 6.5 8 7.172 9.5 8 9.5 9.5 8.828 9.5 8zM2 9.5C1.171 9.5.5 8.828.5 8S1.171 6.5 2 6.5s1.5.672 1.5 1.5S2.829 9.5 2 9.5z"
+    clipRule="evenodd"
+  />
+)

package/src/Icons/icons-path/index.ts

@@ -23,6 +23,8 @@ import { Eye } from './Eye'
 import { ExclamationTriangle } from './ExclamationTriangle'
 import { ExternalLink } from './ExternalLink'
 import { Home } from './Home'
+import { Image } from './Image'
+import { Move } from './Move'
 import { Order } from './Order'
 import { Pagali } from './Pagali'
 import { PaperList } from './PaperList'
@@ -74,6 +76,8 @@ export const icons = {
   exclamationTriangle: ExclamationTriangle,
   externalLink: ExternalLink,
   home: Home,
+  image: Image,
+  move: Move,
   order: Order,
   pagali: Pagali,
   paperList: PaperList,

package/src/Layout/ActionBar/ActionBar.stories.tsx

@@ -6,10 +6,10 @@ import { Button } from '../../Components/Button'
 
 export default {
   component: ActionBar,
-  title: 'Layout/ActionBar'
+  title: 'Layout/ActionBar',
 } as Meta
 
-const Template: Story<ActionBarProps> = args => <ActionBar {...args} />
+const Template: Story<ActionBarProps> = (args) => <ActionBar {...args} />
 
 export const Default = Template.bind({})
 Default.args = {
@@ -20,8 +20,8 @@ Default.args = {
     <Button variant="primary" icon="checkCircle" onClick={() => {}}>
       <span className="hidden lg:block">Criar novo registro</span>
       <span className="block lg:hidden">Criar</span>
-    </Button>
-  ]
+    </Button>,
+  ],
 }
 
 export const OnlyMobile = Template.bind({})
@@ -34,8 +34,9 @@ OnlyMobile.args = {
     <Button icon="checkCircle" onClick={() => {}}>
       Ativar
     </Button>,
+    <></>,
     <Button icon="ban" onClick={() => {}}>
       Inativar
-    </Button>
-  ]
-}
+    </Button>,
+  ],
+}

package/src/Layout/ActionBar/ActionBar.tsx

@@ -50,22 +50,25 @@ const ActionBarComponent = ({ onlyMobile, children }: ActionBarProps) => {
           </div>
         )}
         <div className="lg:hidden">
-          {React.Children.map(children, ({ props }) => (
-            <button
-              className={
-                'px-4 py-1 text-base-1' +
-                (props?.loading ? ' pointer-events-none' : '')
-              }
-              onClick={props?.onClick}
-            >
-              {props?.loading ? (
-                <Icon icon="loading" className="p-px" />
-              ) : (
-                props?.icon && <Icon icon={props?.icon} className="p-px" />
-              )}
-              <span className="block text-f8">{props.children}</span>
-            </button>
-          ))}
+          {React.Children.map(children, ({ props }) => {
+            if (!props.children) return
+            return (
+              <button
+                className={
+                  'px-4 py-1 text-base-1' +
+                  (props?.loading ? ' pointer-events-none' : '')
+                }
+                onClick={props?.onClick}
+              >
+                {props?.loading ? (
+                  <Icon icon="loading" className="p-px" />
+                ) : (
+                  props?.icon && <Icon icon={props?.icon} className="p-px" />
+                )}
+                <span className="block text-f8">{props.children}</span>
+              </button>
+            )
+          })}
         </div>
       </div>
     </div>

package/src/Navigation/Pagination/PaginationInfo.tsx

@@ -22,6 +22,7 @@ const PaginationInfoComponent = ({
       <div className="flex items-center mr-5 text-inverted-2 tracking-4 text-f6">
         {itemsLengthOptions ? (
           <Select
+            id="selectItemsPerPage"
             options={itemsLengthOptions}
             withoutStyle
             aria-label="Itens por página"

package/src/Navigation/Pagination/PaginationNav.tsx

@@ -48,6 +48,7 @@ const PaginationNavComponent = ({
     <div className="pagination-nav flex items-center justify-between w-full sm:w-auto">
       <div className="text-inverted-2 text-f6 tracking-4">
         <span
+          id="btnPaginationActualPage"
           className="pagination-nav-current text-primary font-semibold"
           ref={inputEl}
           contentEditable={true}
@@ -61,6 +62,7 @@ const PaginationNavComponent = ({
         </span>{' '}
         /{' '}
         <button
+          id="btnPaginationLastPage"
           className="pagination-nav-total focus:outline-none"
           onClick={() => {
             if (currentPage !== maxTotalPages) handleChange(maxTotalPages)
@@ -71,7 +73,8 @@ const PaginationNavComponent = ({
       </div>
       <div className="text-inverted-2 ml-5 flex items-center">
         <button
-          className={`pagination-nav-previous mr-3 duration-200 focus:outline-none ${
+          id="btnPaginationPrev"
+          className={`pagination-nav-previous mr-3 duration-200 outline-none ${
             hasPrev ? 'hover:text-inverted-1' : ''
           }`}
           aria-label="Ir para página anterior"
@@ -82,7 +85,8 @@ const PaginationNavComponent = ({
           <Icon icon="arrowLeft" block size={4} />
         </button>
         <button
-          className={`pagination-nav-next duration-200 focus:outline-none ${
+          id="btnPaginationNext"
+          className={`pagination-nav-next duration-200 outline-none ${
             hasNext ? 'hover:text-inverted-1' : ''
           }`}
           aria-label="Ir para próxima página"