@omniumretail/component-library 1.1.11 → 1.1.13

package/dist/main.css

@@ -1,5 +1,5 @@
 .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 .U5tZ7kRlrIHUKsuduD1S{justify-self:end}@media(max-width: 460px){.UxfXOleP69PjM5rFOMTD .U5tZ7kRlrIHUKsuduD1S{width:80px}}@media(max-width: 460px){.UxfXOleP69PjM5rFOMTD :where(.css-dev-only-do-not-override-fpg3f5).ant-btn.ant-btn-icon-only{padding-inline-start:40px}}
+.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}
 .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)}

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.11",
+  "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;
@@ -63,9 +66,24 @@ export const Navigation = (props: NavigationProps) => {
             <div className={styles.columnCenter}>
                 <h1 className={`${styles.title} ${styles.titleMobile}`}>{title}</h1>
             </div>
-            <div className={styles.columnRight}>
-                {userName && <Link href="#" icon={<UserOutlined />} linkSecondary iconAlignRight> {getInitials(userName)} </Link>}
-                {homeLink && <Link href="#" icon={<HomeOutlined />} linkSecondary iconAlignRight onClick={homeOnClickFunction}> {!isTablet && t('navigation.home')} </Link>}
+            <div className={`${userName ? styles.columnRightWithUser : styles.columnRightWithNoUser}`}>
+                {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/Navigation/styles.module.scss

@@ -57,19 +57,34 @@
         justify-self: start;
     }
 
-    .columnRight {
+    .columnRightWithUser {
         justify-self: end;
 
         @media(max-width: 460px) {
             width: 80px;
         }
+
+        :global {
+            @media(max-width: 460px) {
+                :where(.css-dev-only-do-not-override-fpg3f5).ant-btn.ant-btn-icon-only {
+                    padding-inline-start: 40px;
+                }
+            }
+        }
     }
 
-    :global {
+    .columnRightWithNoUser {
+        justify-self: end;
+
         @media(max-width: 460px) {
+            width: 60px;
+        }
 
-            :where(.css-dev-only-do-not-override-fpg3f5).ant-btn.ant-btn-icon-only {
-                padding-inline-start: 40px;
+        :global {
+            @media(max-width: 460px) {
+                :where(.css-dev-only-do-not-override-fpg3f5).ant-btn.ant-btn-icon-only {
+                    padding-inline-start: 22px;
+                }
             }
         }
     }

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';