@loja-integrada/admin-components 0.9.2 → 0.9.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.9.2",
+  "version": "0.9.6",
   "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/Tabs.stories.tsx

@@ -12,7 +12,8 @@ export default {
     layout: 'padded',
     design: {
       type: 'figma',
-      url: 'https://www.figma.com/file/Z2WDD4SH8zwaJC2K5wbtMO/Sistema-Integrado?node-id=95%3A7532',
+      url:
+        'https://www.figma.com/file/Z2WDD4SH8zwaJC2K5wbtMO/Sistema-Integrado?node-id=95%3A7532',
     },
   },
   args: {
@@ -37,10 +38,25 @@ export default {
         id: 'vendas',
         title: 'Vendas',
       },
-    ]
+    ],
   },
 } as Meta
 
-const Template: Story<TabsProps> = args => <Tabs {...args} />
+const Template: Story<TabsProps> = (args) => <Tabs {...args} />
 
 export const Default = Template.bind({})
+
+export const WithTabDisabled = Template.bind({})
+WithTabDisabled.args = {
+  items: [
+    {
+      id: 'pedidos',
+      title: 'Pedidos',
+    },
+    {
+      id: 'cupons',
+      title: 'Cupons de desconto',
+      disabled: true,
+    },
+  ],
+}

package/src/Components/Tabs/TabsItem.interface.ts

@@ -7,6 +7,10 @@ export interface TabsItemInterface {
    * Item visible title
    */
   title: string
+  /**
+   * Disabled a specific tab
+   */
+  disabled?: boolean
   /**
    * Item content
    * @deprecated Not implemented

package/src/Components/Tabs/TabsItem.tsx

@@ -6,7 +6,7 @@ const activeStyles = (active: boolean) =>
   active ? `border-primary font-semibold` : `border-transparent`
 // When using bold at hover, prevent text shift
 const boldFixStyle = `before:content-[attr(data-title)] before:block before:font-semibold before:h-0 before:overflow-hidden before:visibility-hidden`
-
+const disabledStyle = 'text-inverted-2 cursor-not-allowed'
 interface TabsItemProps extends TabsItemInterface {
   /**
    * Item is active
@@ -22,19 +22,24 @@ export const TabsItem = ({
   id,
   title,
   active = false,
+  disabled = false,
   onChange,
 }: 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`}
+      } group min-w-0 flex-shrink-0 overflow-x-hidden px-2 last:-mr-2 first:-ml-2 ${
+        disabled ? disabledStyle : ''
+      }`}
       onClick={() => onChange(id)}
+      disabled={disabled}
     >
       <span
-        className={`block text-f6 text-sm py-4 border-b-4 break-words group-hover:font-semibold ${activeStyles(
-          active
-        )} ${boldFixStyle}`}
+        className={`block tracking-4 text-f6 text-sm py-4 border-b-4 break-words ${
+          disabled ? '' : 'group-hover:font-semibold'
+        } ${activeStyles(active)} ${boldFixStyle}`}
         data-title={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/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"