@omniumretail/component-library 1.2.54 → 1.2.56

package/dist/types/components/ResponsiveTable/index.d.ts

@@ -48,6 +48,6 @@ export interface ResponsiveTableCustomProps extends TableProps<any> {
     cleanRowSelection?: boolean;
     getRowActions?: (record: any) => any;
     customSelectAllButton?: string;
-    buttonActionIcon?: any;
+    buttonActionIcon?: (record: any) => any | null;
 }
 export declare const ResponsiveTable: (props: ResponsiveTableCustomProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.2.54",
+  "version": "1.2.56",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",

package/src/assets/scss/a2ai.scss

@@ -0,0 +1,89 @@
+body.a2aiStyle {
+        // Primary Colors
+    --color-black: #2c2d2e;
+    --color-black-rgb: 44, 45, 46;
+    --color-white: #FFFFFF;
+    --color-white-rgb: 255, 255, 255;
+
+    --color-orange: purple;
+    --color-orange-rgb: 255, 103, 76;
+    
+    --color-blue: #09168B;
+    --color-blue-rgb: 9, 22, 139;
+
+    --color-grey-light: #f0f0f0;
+    --color-grey-light-rgb: 240, 240, 240;
+    --color-grey: #C7CAC9;
+    --color-grey-rgb: 199, 202, 201;
+    --color-grey-dark: #797979;
+    --color-grey-dark-rgb: 121, 121, 121;
+
+    // Helper Colors
+    --color-warning-400: #E36262;
+    --color-warning-500: #E05151;
+
+    --color-confirmation-400: #73b9a2;
+    --color-confirmation-600: #64B298;
+
+    // Font Family
+    --font-family-primary: SF Pro;
+
+    // Font Weight
+    --font-weight-light: 300;
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+
+    // Font Styles
+    --font-style-normal: normal;
+    --font-style-italic: italic;
+
+    // Font Sizes
+    --font-size-body-1: 10px;
+    --font-size-body-2: 12px;
+    --font-size-body-3: 14px;
+    --font-size-body-4: 16px;
+    --font-size-body-5: 18px;
+    --font-size-body-6: 20px;
+    
+    --font-size-h1: 46px;
+    --font-size-h2: 40px;
+    --font-size-h3: 36px;
+    --font-size-h4: 30px;
+    --font-size-h5: 24px;
+
+    --font-size-body-base: var(--font-size-body-4);
+    --font-size-label: var(--font-size-body-3);
+
+    // Button Default
+    --button-default-background: var(--color-orange);
+    --button-default-text-color: var(--color-white);
+    --button-default-background-hover-color: rgba(var(--color-orange-rgb), .9);
+    --button-default-text-hover-color: var(--color-white);
+    --button-default-background-focus-color: var(--color-grey-dark);
+    --button-default-text-focus-color: rgba(var(--color-white-rgb), .8);
+
+    // Button Style 1
+    --button-style-1-background: var(--color-black);
+    --button-style-1-text-color: var(--color-white);
+    --button-style-1-background-hover-color: rgba(var(--color-black-rgb), .9);
+    --button-style-1-text-hover-color: var(--color-white);
+    --button-style-1-background-focus-color: var(--color-grey-dark);
+    --button-style-1-text-focus-color: rgba(var(--color-white-rgb), .8);
+
+    // Button Disabled 
+    --button-disabled-background-color: rgba(var(--color-grey));
+    --button-disabled-default-text-color: var(--color-white);
+
+    // Link
+    --link-color: var(--color-orange);
+    --link-hover-color: var(--color-black);
+    --link-focus-color: rgba(var(--color-orange), .9);
+    --link-disabled-color: rgba(var(--color-grey), .2);
+
+    // Transition Speed
+    --transition-fast: .2s;
+    --transition: .6s;
+    --transition-slow: 1s;
+}

package/src/assets/scss/index.scss

@@ -1,2 +1,3 @@
 @import './global.scss';
 @import './combinations.scss';
+@import './a2ai.scss';

package/src/components/ResponsiveTable/ResponsiveTable.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, Story } from "@storybook/react";
 import { ResponsiveTable, ResponsiveTableCustomProps } from '.';
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { DownloadOutlined } from "@ant-design/icons";
 
 export default {
   title: 'ResponsiveTable',
@@ -23,10 +24,10 @@ const Template: Story<ResponsiveTableCustomProps> = (args) => {
 
   const getButtonLabel = (record: any) => {
     return (record as any)?.type === "Efetivo" ? "Pog" : null;
-};
+  };
 
-const getActionsForRecord = (record: any) => {
-  return (record as any)?.role === "Gerente"
+  const getActionsForRecord = (record: any) => {
+    return (record as any)?.role === "Gerente"
       ? [
         {
           key: '1', label: `${t('actions.one')}`, onClick: () => {
@@ -52,14 +53,23 @@ const getActionsForRecord = (record: any) => {
           key: '4', label: 'label 4'
         }
       ];
-};
+  };
+
+      const getIcon = (record: any) => {
+        return record.id === "1"
+            ? <DownloadOutlined />
+            : record.id === "3"
+                ? <DownloadOutlined />
+                : null;
+    };
 
+  const actionsArray = [{ key: '1', label: `` }];
 
   return <ResponsiveTable
     cleanRowSelection={clearRowSelection}
     columnsSortChange={handleSortByColumnChange} paginationInfo={setPageInfo} headingTranslationsKey={'tableHeadings'} rowSelectionInfo={setRowSelectionInfo}
-    getRowActions={getActionsForRecord}
-    fixedColumns={[{ dataIndex: 'action', side: 'right' }]} buttonActionMethod={() => handleSortByColumnChange} buttonActionLabel={getButtonLabel} {...args}>
+    actionsArray={actionsArray}
+    fixedColumns={[{ dataIndex: 'action', side: 'right' }]} buttonActionIcon={getIcon}  {...args}>
   </ResponsiveTable>;
 };
 

package/src/components/ResponsiveTable/index.tsx

@@ -54,7 +54,7 @@ export interface ResponsiveTableCustomProps extends TableProps<any> {
     cleanRowSelection?: boolean;
     getRowActions?: (record: any) => any;
     customSelectAllButton?: string;
-    buttonActionIcon?: any;
+    buttonActionIcon?: (record: any) => any | null;
 }
 
 export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
@@ -225,18 +225,20 @@ export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
 
                     const buttonLabel = buttonActionLabel ? buttonActionLabel(record) : null;
 
+                    const icon = buttonActionIcon ? buttonActionIcon(record) : null;
+
                     const buttonClass = typeof buttonActionStyle === 'function'
                         ? buttonActionStyle(record) // Se for uma função, chama com o `record`
                         : buttonActionStyle || ''; // Se for string, usa diretamente
 
                     const renderActionElement = () => {
-                        if (buttonActionIcon) {
+                        if (icon) {
                             return (
                                 <span
                                     className={buttonClass}
                                     onClick={() => buttonActionMethod?.()}
                                 >
-                                    {buttonActionIcon}
+                                    {icon}
                                 </span>
                             );
                         }