@omniumretail/component-library 1.1.14 → 1.1.16

package/dist/main.css

@@ -1,6 +1,7 @@
 .lCPh1mJwiXUUOgmbv_mk{padding:12px 24px;border-radius:4px;min-width:170px;display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;text-decoration:none;border:none;font-size:14px;line-height:16.8px;font-weight:700;font-family:"Silka",sans-serif;background-color:var(--button-default-background);color:var(--button-default-text-color)}@media(max-width: 767px){.lCPh1mJwiXUUOgmbv_mk{min-width:0px}}.lCPh1mJwiXUUOgmbv_mk:hover{background-color:var(--button-default-background-hover-color);color:var(--button-default-text-hover-color) !important}.lCPh1mJwiXUUOgmbv_mk:focus,.lCPh1mJwiXUUOgmbv_mk:active,.lCPh1mJwiXUUOgmbv_mk:focus:active{background-color:var(--button-default-background-focus-color);color:var(--button-default-text-focus-color)}.lCPh1mJwiXUUOgmbv_mk:disabled,.lCPh1mJwiXUUOgmbv_mk.vwrGv_jOJcIvImjzKZNv{background-color:var(--button-disabled-background-color);color:var(--button-disabled-default-text-color);pointer-events:none}.PYUelyvKNnKRxaBMgCyk{flex-direction:row-reverse;gap:5px}.edzSVcT9ajLWxd6QfVI1{background-color:var(--button-style-1-background);color:var(--button-style-1-text-color)}.edzSVcT9ajLWxd6QfVI1:hover{background-color:var(--button-style-1-background-hover-color);color:var(--button-style-1-text-hover-color) !important}.edzSVcT9ajLWxd6QfVI1:focus,.edzSVcT9ajLWxd6QfVI1:active,.edzSVcT9ajLWxd6QfVI1:focus:active{background-color:var(--button-style-1-background-focus-color);color:var(--button-style-1-text-focus-color)}.edzSVcT9ajLWxd6QfVI1:disabled,.edzSVcT9ajLWxd6QfVI1.vwrGv_jOJcIvImjzKZNv{background-color:var(--button-disabled-background-color);color:var(--button-disabled-default-text-color);pointer-events:none}
 .UxfXOleP69PjM5rFOMTD{display:grid !important;grid-template-columns:repeat(3, 1fr) !important;justify-items:center !important;align-items:center !important;height:75px !important;gap:0 24px !important;position:relative !important;padding:0px !important}@media(max-width: 767px){.UxfXOleP69PjM5rFOMTD .UxfXOleP69PjM5rFOMTD{grid-template-columns:1fr}.UxfXOleP69PjM5rFOMTD .UK3esJZjnri5Jb9Jxcca,.UxfXOleP69PjM5rFOMTD .U5tZ7kRlrIHUKsuduD1S{justify-self:center}.UxfXOleP69PjM5rFOMTD .LzcTbjk0fp70tXlKd3eS{text-align:center}.UxfXOleP69PjM5rFOMTD .DhO9jcXNunsWq22jXuJJ{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.UxfXOleP69PjM5rFOMTD .LzcTbjk0fp70tXlKd3eS{font-size:var(--font-size-body-3);font-weight:var(--font-weight-semibold);text-transform:uppercase}@media(min-width: 768px){.UxfXOleP69PjM5rFOMTD .LzcTbjk0fp70tXlKd3eS{font-size:var(--font-size-body-4)}}.UxfXOleP69PjM5rFOMTD .gn06XRZhFG00HaVjAqNc{align-self:center}@media(max-width: 768px){.UxfXOleP69PjM5rFOMTD .gn06XRZhFG00HaVjAqNc{position:unset !important;top:unset !important;margin:unset !important;left:unset !important;right:unset !important;text-align:unset !important}}.UxfXOleP69PjM5rFOMTD .UK3esJZjnri5Jb9Jxcca{justify-self:start}.UxfXOleP69PjM5rFOMTD .SP4eLTEZBzKjo_LdsNw2{justify-self:end}@media(max-width: 460px){.UxfXOleP69PjM5rFOMTD .SP4eLTEZBzKjo_LdsNw2{width:80px}}@media(max-width: 460px){.UxfXOleP69PjM5rFOMTD .SP4eLTEZBzKjo_LdsNw2 :where(.css-dev-only-do-not-override-fpg3f5).ant-btn.ant-btn-icon-only{padding-inline-start:40px}}.UxfXOleP69PjM5rFOMTD .nt_yaN_SHYobZ6zexnfY{justify-self:end}@media(max-width: 460px){.UxfXOleP69PjM5rFOMTD .nt_yaN_SHYobZ6zexnfY{width:60px}}@media(max-width: 460px){.UxfXOleP69PjM5rFOMTD .nt_yaN_SHYobZ6zexnfY :where(.css-dev-only-do-not-override-fpg3f5).ant-btn.ant-btn-icon-only{padding-inline-start:22px}}
 .ii1Ag3GTfp8unGCe48A0{display:inline-flex;text-decoration:none;height:auto;color:var(--color-black);font-size:var(--font-size-body-3);line-height:100%;font-weight:300;font-style:var(--font-style-italic)}.L9ncGwaItcjHJBLuwrKb{color:var(--color-orange);font-style:var(--font-style-normal)}.Yrb4eAglcF7FedoEB9AH span:nth-child(2){margin-inline-end:8px;margin-inline-start:0;order:-1}
+.dr2zFJ8bDffg5CjjPq2c{color:var(--color-black)}
 .GhX1oPovx60SBqLAcIRO{border-color:rgba(var(--color-black-rgb), 0.5);height:50px;font-size:var(--font-size-body-3);line-height:100%;color:var(--color-black);border-radius:5px}
 ._ox_QPqUHev1INeaUhs7 .ant-select-selector{border-color:rgba(var(--color-black-rgb), 0.5) !important;height:50px !important;display:flex;align-items:center}._ox_QPqUHev1INeaUhs7 .ant-select-arrow{color:var(--color-black)}
 .bisuiYUGnAaj47TMXXcY{display:flex !important}

package/dist/types/components/DropdownButton/DropdownButton.stories.d.ts

@@ -1,4 +1,5 @@
 import { Meta, Story } from '@storybook/react';
+import { DropdownButtonProps } from '.';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const BasicDropdown: Story<any>;
+export declare const BasicDropdown: Story<DropdownButtonProps>;

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import { DropdownProps } from 'antd';
-interface DropdownButtonProps extends DropdownProps {
-    options: string[];
+export interface DropdownButtonProps extends DropdownProps {
+    options?: {
+        label: string;
+        action: () => void;
+    }[];
     buttonText: string;
     buttonClass?: string;
     customButton?: React.ReactNode;
 }
 export declare const DropdownButton: ({ options, buttonText, buttonClass, customButton, ...props }: DropdownButtonProps) => import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -7,6 +7,9 @@ export interface NavigationProps {
     loginOnClickFunction?: () => void;
     backLinkOnClickFunction?: () => void;
     homeOnClickFunction?: () => void;
-    options?: string[];
+    options?: {
+        label: string;
+        action: () => void;
+    }[];
 }
 export declare const Navigation: (props: NavigationProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

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

package/src/components/DropdownButton/DropdownButton.stories.tsx

@@ -1,15 +1,24 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import { DropdownButton } from './index';
+import { DropdownButton, DropdownButtonProps } from '.';
 
 export default {
   title: 'DropdownButton',
   component: DropdownButton,
 } as Meta;
 
-const Template: Story<any> = (args) => <DropdownButton {...args} />;
+const onLeft = () => {
+  console.log(9);
+};
+
+const Template: Story<DropdownButtonProps> = (args) => <DropdownButton {...args} />;
 
 export const BasicDropdown = Template.bind({});
 BasicDropdown.args = {
-  options: ['Option 1', 'Option 2', 'Option 3'],
+  buttonText: 'Dropdown',
+  options: [
+    { label: 'Option 1', action: () => onLeft() },
+    { label: 'Option 2', action: () => alert('Option 2 clicked') },
+    { label: 'Option 3', action: () => alert('Option 3 clicked') },
+  ],
 };

package/src/components/DropdownButton/index.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import { Menu, Dropdown, DropdownProps } from 'antd';
 import classNames from 'classnames';
 import { Button } from '../Button';
+import styles from './styles.module.scss';
 
-interface DropdownButtonProps extends DropdownProps {
-  options: string[];
+export interface DropdownButtonProps extends DropdownProps {
+  options?: { label: string, action: () => void }[];
   buttonText: string;
   buttonClass?: string;
   customButton?: React.ReactNode;
@@ -14,14 +15,14 @@ export const DropdownButton = ({ options, buttonText, buttonClass, customButton,
   const menu = (
     <Menu>
       {options && options.map((option, index) => (
-        <Menu.Item key={index}>{option}</Menu.Item>
+        <Menu.Item key={index} onClick={option.action}>{option.label}</Menu.Item>
       ))}
     </Menu>
   );
 
   const linkClasses = classNames({
     [`${buttonClass}`]: buttonClass,
-  }, []);
+  }, [styles.dropdown]);
 
   return (
     <Dropdown overlay={menu} trigger={['click']}>

package/src/components/DropdownButton/styles.module.scss

@@ -0,0 +1,3 @@
+.dropdown {
+    color: var(--color-black);
+}

package/src/components/Navigation/Navigation.stories.tsx

@@ -15,5 +15,8 @@ Primary.args = {
     title: 'Gestão de Aplicações',
     loginLink: true,
     userName: "Diogo Silva Coutinho",
-    options: ['Option 1', 'Option 2', 'Option 3'],
-};
+    options: [
+        { label: 'Option 1', action: () => alert('Option 1 clicked') },
+        { label: 'Option 2', action: () => alert('Option 2 clicked') },
+        { label: 'Option 3', action: () => alert('Option 3 clicked') },
+      ],};

package/src/components/Navigation/index.tsx

@@ -14,34 +14,34 @@ export interface NavigationProps {
     loginOnClickFunction?: () => void;
     backLinkOnClickFunction?: () => void;
     homeOnClickFunction?: () => void;
-    options?: string[];
+    options?: { label: string, action: () => void }[];
 }
 
-const TABLET_MAX_WIDTH = 1000;
+const PHONE_MAX_WIDTH = 768;
 
 export const Navigation = (props: NavigationProps) => {
     const { userName, backLink, title, homeLink, loginOnClickFunction, loginLink, backLinkOnClickFunction, homeOnClickFunction } = props;
     const { t } = useTranslation();
 
-    const [isTablet, setIsTablet] = useState(false);
+    const [isPhone, setIsPhone] = useState(false);
     const [showDropdown, setShowDropdown] = useState(false);
 
     const checkMediaQuery = () => {
-        const isPhoneWidth = window.innerWidth < TABLET_MAX_WIDTH;
-        setIsTablet(isPhoneWidth);
+        const isPhoneWidth = window.innerWidth < PHONE_MAX_WIDTH;
+        setIsPhone(isPhoneWidth);
     }
 
     useEffect(() => {
         checkMediaQuery();
         window.addEventListener('resize', checkMediaQuery);
         return () => window.removeEventListener('resize', checkMediaQuery);
-    }, [isTablet]);
+    }, [isPhone]);
 
     const getInitials = (name: string) => {
         const words = name.split(' ');
         let initials = '';
 
-        if (isTablet) {
+        if (isPhone) {
             if (words.length === 1) {
                 initials = words[0].charAt(0);
             } else if (words.length > 1) {
@@ -55,13 +55,13 @@ export const Navigation = (props: NavigationProps) => {
             }
         }
 
-        return isTablet ? initials.toUpperCase() : initials;
+        return isPhone ? initials.toUpperCase() : initials;
     };
 
     return (
         <div className={styles.navigation}>
             <div className={styles.columnLeft}>
-                {backLink && <Link href="#" icon={<ArrowLeftOutlined />} linkSecondary onClick={backLinkOnClickFunction}> {!isTablet && t('navigation.back')} </Link>}
+                {backLink && <Link href="#" icon={<ArrowLeftOutlined />} linkSecondary onClick={backLinkOnClickFunction}> {!isPhone && t('navigation.back')} </Link>}
             </div>
             <div className={styles.columnCenter}>
                 <h1 className={`${styles.title} ${styles.titleMobile}`}>{title}</h1>
@@ -83,8 +83,8 @@ export const Navigation = (props: NavigationProps) => {
                         )}
                     />
                 )}
-                {homeLink && <Link icon={<HomeOutlined />} linkSecondary iconAlignRight onClick={homeOnClickFunction}> {!isTablet && t('navigation.home')} </Link>}
-                {loginLink && <Link href="#" onClick={loginOnClickFunction} icon={<LogoutOutlined />} linkSecondary iconAlignRight>{!isTablet && t('navigation.logout')}</Link>}
+                {homeLink && <Link icon={<HomeOutlined />} linkSecondary iconAlignRight onClick={homeOnClickFunction}> {!isPhone && t('navigation.home')} </Link>}
+                {loginLink && <Link href="#" onClick={loginOnClickFunction} icon={<LogoutOutlined />} linkSecondary iconAlignRight>{!isPhone && t('navigation.logout')}</Link>}
             </div>
         </div>
     )