@omniumretail/component-library 1.1.12 → 1.1.13

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DropdownProps } from 'antd';
+interface DropdownButtonProps extends DropdownProps {
+    options: string[];
+    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,5 +7,6 @@ export interface NavigationProps {
     loginOnClickFunction?: () => void;
     backLinkOnClickFunction?: () => void;
     homeOnClickFunction?: () => void;
+    options?: string[];
 }
 export declare const Navigation: (props: NavigationProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -24,3 +24,4 @@ export * from './UserInfo';
 export * from './CategoryReadOnly';
 export * from './Notification';
 export * from './ExportTableData';
+export * from './DropdownButton';

package/package.json

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

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { DropdownButton } from './index';
+
+export default {
+  title: 'DropdownButton',
+  component: DropdownButton,
+} as Meta;
+
+const Template: Story<any> = (args) => <DropdownButton {...args} />;
+
+export const BasicDropdown = Template.bind({});
+BasicDropdown.args = {
+  options: ['Option 1', 'Option 2', 'Option 3'],
+};

package/src/components/DropdownButton/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Menu, Dropdown, DropdownProps } from 'antd';
+import classNames from 'classnames';
+import { Button } from '../Button';
+
+interface DropdownButtonProps extends DropdownProps {
+  options: string[];
+  buttonText: string;
+  buttonClass?: string;
+  customButton?: React.ReactNode;
+}
+
+export const DropdownButton = ({ options, buttonText, buttonClass, customButton, ...props }: DropdownButtonProps) => {
+  const menu = (
+    <Menu>
+      {options.map((option, index) => (
+        <Menu.Item key={index}>{option}</Menu.Item>
+      ))}
+    </Menu>
+  );
+
+  const linkClasses = classNames({
+    [`${buttonClass}`]: buttonClass,
+  }, []);
+
+  return (
+    <Dropdown overlay={menu} trigger={['click']}>
+      {customButton ? (
+        customButton
+      ) : (
+        <Button className={linkClasses}>{buttonText}</Button>
+      )}
+    </Dropdown>
+  );
+};

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

@@ -14,5 +14,6 @@ Primary.args = {
     homeLink: false,
     title: 'Gestão de Aplicações',
     loginLink: true,
-    userName: "Diogo Silva Coutinho"
+    userName: "Diogo Silva Coutinho",
+    options: ['Option 1', 'Option 2', 'Option 3'],
 };

package/src/components/Navigation/index.tsx

@@ -1,5 +1,6 @@
 import styles from './styles.module.scss';
 import { Link } from '../Link';
+import { DropdownButton } from '../DropdownButton';
 import { ArrowLeftOutlined, HomeOutlined, LogoutOutlined, UserOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { useEffect, useState } from 'react';
@@ -13,6 +14,7 @@ export interface NavigationProps {
     loginOnClickFunction?: () => void;
     backLinkOnClickFunction?: () => void;
     homeOnClickFunction?: () => void;
+    options?: string[];
 }
 
 const TABLET_MAX_WIDTH = 1000;
@@ -22,6 +24,7 @@ export const Navigation = (props: NavigationProps) => {
     const { t } = useTranslation();
 
     const [isTablet, setIsTablet] = useState(false);
+    const [showDropdown, setShowDropdown] = useState(false);
 
     const checkMediaQuery = () => {
         const isPhoneWidth = window.innerWidth < TABLET_MAX_WIDTH;
@@ -64,8 +67,23 @@ export const Navigation = (props: NavigationProps) => {
                 <h1 className={`${styles.title} ${styles.titleMobile}`}>{title}</h1>
             </div>
             <div className={`${userName ? styles.columnRightWithUser : styles.columnRightWithNoUser}`}>
-                {userName && <Link href="#" icon={<UserOutlined />} linkSecondary iconAlignRight> {getInitials(userName)} </Link>}
-                {homeLink && <Link href="#" icon={<HomeOutlined />} linkSecondary iconAlignRight onClick={homeOnClickFunction}> {!isTablet && t('navigation.home')} </Link>}
+                {userName && (
+                    <DropdownButton
+                        options={props.options!}
+                        buttonText={props.userName!}
+                        customButton={(
+                            <Link
+                                icon={<UserOutlined />}
+                                linkSecondary
+                                iconAlignRight
+                                onClick={() => setShowDropdown(!showDropdown)}
+                            >
+                                {getInitials(userName)}
+                            </Link>
+                        )}
+                    />
+                )}
+                {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>}
             </div>
         </div>

package/src/components/index.tsx

@@ -23,4 +23,5 @@ export * from './Upload';
 export * from './UserInfo';
 export * from './CategoryReadOnly';
 export * from './Notification';
-export * from './ExportTableData'
+export * from './ExportTableData';
+export * from './DropdownButton';