@granto-umbrella/umbrella-components 3.0.31 → 3.0.33

package/src/components/organisms/Navbar/Navbar.tsx

@@ -1,118 +1,118 @@
-import { CaretDown } from 'phosphor-react';
-import { Link } from 'react-router-dom';
-import {
-  NavbarContainer,
-  LogoContainer,
-  Menu,
-  UserProfile,
-  Dropdown,
-  DropdownItem,
-  SearchContainer,
-  SearchWrapper,
-  SearchIconStyled,
-} from './Navbar.styles';
-
-import { primitiveColors } from '../../../styles/tokens';
-import _logoCorp from '../../../assets/_granto_corp_navbar.svg';
-import _effecti from '../../../assets/_effecti.svg';
-import _barra from '../../../assets/_barra.svg';
-import { NavbarComponentProps } from './Navbar.types';
-
-const NavbarComponent: React.FC<NavbarComponentProps> = ({
-  user,
-  isDropdownOpen,
-  handleDropdownToggle,
-  handleSearchChange,
-  showSearch,
-  menuLinks,
-  dropdownOptions,
-}) => {
-  const isSDK = user?.isPartner;
-  const emailInitials = user?.username
-    ? user.username.slice(0, 2).toUpperCase()
-    : '';
-
-  return (
-    <NavbarContainer>
-      <LogoContainer>
-        <img src={_logoCorp} alt="umbrella logo" />
-
-        {isSDK && (
-          <>
-            <img src={_barra} alt="barra separadora" />
-            <img style={{ marginTop: 10 }} src={_effecti} alt="effecti logo" />
-          </>
-        )}
-
-        <Menu>
-          {menuLinks.map((link) => (
-            <Link
-              key={link.path}
-              to={link.path}
-              id={link.id}
-              data-testid={link.testId}
-            >
-              {link.icon && <span style={{ marginRight: 6 }}>{link.icon}</span>}
-              {link.label}
-            </Link>
-          ))}
-        </Menu>
-      </LogoContainer>
-
-      {showSearch && (
-        <SearchWrapper>
-          <SearchContainer>
-            <SearchIconStyled className="icon_search" />
-            <input
-              className="input_search"
-              type="text"
-              placeholder="Pesquise sua apólice"
-              onInput={handleSearchChange}
-            />
-          </SearchContainer>
-        </SearchWrapper>
-      )}
-
-      <UserProfile onClick={handleDropdownToggle}>
-        <div className="avatar">
-          {user?.img ? (
-            <img src={user.img} alt={`Logo ${user?.username}`} />
-          ) : (
-            <div className="initials">{emailInitials}</div>
-          )}
-        </div>
-        <div className="details">
-          <span>{user?.username}</span>
-          <small>{user?.roles ? user.roles[0] : ''}</small>
-        </div>
-
-        <CaretDown
-          data-testid="btn_home_usuario"
-          id="btn_home_usuario"
-          color={primitiveColors.gray[300]}
-        />
-
-        {isDropdownOpen && (
-          <Dropdown>
-            {dropdownOptions.map((option) => (
-              <DropdownItem
-                key={option.label}
-                onClick={option.onClick}
-                data-testid={option.testId}
-                id={option.id}
-                $type={option?.type || 'default'}
-              >
-                {option.icon && (
-                  <span style={{ marginRight: 8 }}>{option.icon}</span>
-                )}
-                {option.label}
-              </DropdownItem>
-            ))}
-          </Dropdown>
-        )}
-      </UserProfile>
-    </NavbarContainer>
-  );
-};
-
-export default NavbarComponent;
+import { CaretDown } from 'phosphor-react';
+import { Link } from 'react-router-dom';
+import {
+  NavbarContainer,
+  LogoContainer,
+  Menu,
+  UserProfile,
+  Dropdown,
+  DropdownItem,
+  SearchContainer,
+  SearchWrapper,
+  SearchIconStyled,
+} from './Navbar.styles';
+
+import { primitiveColors } from '../../../styles/tokens';
+import _logoCorp from '../../../assets/_granto_corp_navbar.svg';
+import _effecti from '../../../assets/_effecti.svg';
+import _barra from '../../../assets/_barra.svg';
+import { NavbarComponentProps } from './Navbar.types';
+
+const NavbarComponent: React.FC<NavbarComponentProps> = ({
+  user,
+  isDropdownOpen,
+  handleDropdownToggle,
+  handleSearchChange,
+  showSearch,
+  menuLinks,
+  dropdownOptions,
+}) => {
+  const isSDK = user?.isPartner;
+  const emailInitials = user?.username
+    ? user.username.slice(0, 2).toUpperCase()
+    : '';
+
+  return (
+    <NavbarContainer>
+      <LogoContainer>
+        <img src={_logoCorp} alt="umbrella logo" />
+
+        {isSDK && (
+          <>
+            <img src={_barra} alt="barra separadora" />
+            <img style={{ marginTop: 10 }} src={_effecti} alt="effecti logo" />
+          </>
+        )}
+
+        <Menu>
+          {menuLinks.map((link) => (
+            <Link
+              key={link.path}
+              to={link.path}
+              id={link.id}
+              data-testid={link.testId}
+            >
+              {link.icon && <span style={{ marginRight: 6 }}>{link.icon}</span>}
+              {link.label}
+            </Link>
+          ))}
+        </Menu>
+      </LogoContainer>
+
+      {showSearch && (
+        <SearchWrapper>
+          <SearchContainer>
+            <SearchIconStyled className="icon_search" />
+            <input
+              className="input_search"
+              type="text"
+              placeholder="Pesquise sua apólice"
+              onInput={handleSearchChange}
+            />
+          </SearchContainer>
+        </SearchWrapper>
+      )}
+
+      <UserProfile onClick={handleDropdownToggle}>
+        <div className="avatar">
+          {user?.img ? (
+            <img src={user.img} alt={`Logo ${user?.username}`} />
+          ) : (
+            <div className="initials">{emailInitials}</div>
+          )}
+        </div>
+        <div className="details">
+          <span>{user?.username}</span>
+          <small>{user?.roles ? user.roles[0] : ''}</small>
+        </div>
+
+        <CaretDown
+          data-testid="btn_home_usuario"
+          id="btn_home_usuario"
+          color={primitiveColors.gray[300]}
+        />
+
+        {isDropdownOpen && (
+          <Dropdown>
+            {dropdownOptions.map((option) => (
+              <DropdownItem
+                key={option.label}
+                onClick={option.onClick}
+                data-testid={option.testId}
+                id={option.id}
+                $type={option?.type || 'default'}
+              >
+                {option.icon && (
+                  <span style={{ marginRight: 8 }}>{option.icon}</span>
+                )}
+                {option.label}
+              </DropdownItem>
+            ))}
+          </Dropdown>
+        )}
+      </UserProfile>
+    </NavbarContainer>
+  );
+};
+
+export default NavbarComponent;

package/src/components/organisms/Navbar/Navbar.types.ts

@@ -1,34 +1,34 @@
-export interface MenuLink {
-  label: string;
-  path: string;
-  icon?: React.ReactNode;
-  testId?: string;
-  id?: string;
-}
-
-export interface DropdownOption {
-  label: string;
-  onClick: () => void;
-  icon?: React.ReactNode;
-  testId?: string;
-  type?: 'default' | 'logout';
-  id?: string;
-}
-
-export interface NavbarComponentProps {
-  user: {
-    isSupply?: boolean;
-    isPartner?: boolean;
-    username?: string;
-    img?: string;
-    roles?: string[];
-  };
-  isDropdownOpen: boolean;
-  handleDropdownToggle: () => void;
-  handleSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  showSearch: boolean;
-  /** Menu dinâmico */
-  menuLinks: MenuLink[];
-  /** Dropdown dinâmico */
-  dropdownOptions: DropdownOption[];
-}
+export interface MenuLink {
+  label: string;
+  path: string;
+  icon?: React.ReactNode;
+  testId?: string;
+  id?: string;
+}
+
+export interface DropdownOption {
+  label: string;
+  onClick: () => void;
+  icon?: React.ReactNode;
+  testId?: string;
+  type?: 'default' | 'logout';
+  id?: string;
+}
+
+export interface NavbarComponentProps {
+  user: {
+    isSupply?: boolean;
+    isPartner?: boolean;
+    username?: string;
+    img?: string;
+    roles?: string[];
+  };
+  isDropdownOpen: boolean;
+  handleDropdownToggle: () => void;
+  handleSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  showSearch: boolean;
+  /** Menu dinâmico */
+  menuLinks: MenuLink[];
+  /** Dropdown dinâmico */
+  dropdownOptions: DropdownOption[];
+}

package/src/components/organisms/TimelineModal/TimelineModal.styles.ts

@@ -1,49 +1,49 @@
-import styled from 'styled-components';
-import * as Dialog from '@radix-ui/react-dialog';
-import { semanticColors } from '../../../styles/tokens';
-
-export const Overlay = styled(Dialog.Overlay)`
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  z-index: 50;
-`;
-export const Content = styled(Dialog.Content)`
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: white;
-  border-radius: 12px;
-  padding: 32px;
-  width: 100%;
-  max-width: 520px;
-  z-index: 1000;
-  border-top: 6px solid ${semanticColors.branding.surface.enabled};
-`;
-
-export const Title = styled.h2`
-  font-size: 28px;
-  font-weight: 600;
-  color: ${semanticColors.base.text};
-  margin-bottom: 16px;
-  padding-right: 12px;
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  align-items: center;
-  margin-top: -2px;
-`;
-
-export const CloseIcon = styled(Dialog.Close)`
-  position: absolute;
-  top: 32px;
-  right: 32px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-
-  svg {
-    color: #888;
-  }
-`;
+import styled from 'styled-components';
+import * as Dialog from '@radix-ui/react-dialog';
+import { semanticColors } from '../../../styles/tokens';
+
+export const Overlay = styled(Dialog.Overlay)`
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 50;
+`;
+export const Content = styled(Dialog.Content)`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: white;
+  border-radius: 12px;
+  padding: 32px;
+  width: 100%;
+  max-width: 520px;
+  z-index: 1000;
+  border-top: 6px solid ${semanticColors.branding.surface.enabled};
+`;
+
+export const Title = styled.h2`
+  font-size: 28px;
+  font-weight: 600;
+  color: ${semanticColors.base.text};
+  margin-bottom: 16px;
+  padding-right: 12px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  margin-top: -2px;
+`;
+
+export const CloseIcon = styled(Dialog.Close)`
+  position: absolute;
+  top: 32px;
+  right: 32px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  svg {
+    color: #888;
+  }
+`;

package/src/components/organisms/TimelineModal/TimelineModal.tsx

@@ -1,49 +1,49 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import * as Dialog from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
-import { CloseIcon, Content, Overlay, Title } from './TimelineModal.styles';
-import { FlowArrow } from 'phosphor-react';
-import { Timeline } from '../../molecules/TimeLine/TimeLine';
-export const TimelineModal = ({
-  open,
-  onOpenChange,
-  onClose,
-  data,
-  onRetry,
-  emptyLabel,
-  loading,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onClose: () => void;
-  onRetry?: () => void;
-  emptyLabel?: string;
-  data: any;
-  loading?: boolean;
-}) => {
-  return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Overlay />
-      <Content>
-        <CloseIcon aria-label="Fechar" onClick={onClose}>
-          <X size={28} color="#BDBDBD" />
-        </CloseIcon>
-
-        <Dialog.Title>
-          <Title>
-            <FlowArrow />
-            Linha do tempo
-          </Title>
-        </Dialog.Title>
-
-        <Timeline
-          items={data}
-          onRetry={onRetry}
-          emptyLabel={emptyLabel}
-          skeletonItems={4}
-          loading={loading}
-        />
-      </Content>
-    </Dialog.Root>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as Dialog from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { CloseIcon, Content, Overlay, Title } from './TimelineModal.styles';
+import { FlowArrow } from 'phosphor-react';
+import { Timeline } from '../../molecules/TimeLine/TimeLine';
+export const TimelineModal = ({
+  open,
+  onOpenChange,
+  onClose,
+  data,
+  onRetry,
+  emptyLabel,
+  loading,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onClose: () => void;
+  onRetry?: () => void;
+  emptyLabel?: string;
+  data: any;
+  loading?: boolean;
+}) => {
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Overlay />
+      <Content>
+        <CloseIcon aria-label="Fechar" onClick={onClose}>
+          <X size={28} color="#BDBDBD" />
+        </CloseIcon>
+
+        <Dialog.Title>
+          <Title>
+            <FlowArrow />
+            Linha do tempo
+          </Title>
+        </Dialog.Title>
+
+        <Timeline
+          items={data}
+          onRetry={onRetry}
+          emptyLabel={emptyLabel}
+          skeletonItems={4}
+          loading={loading}
+        />
+      </Content>
+    </Dialog.Root>
+  );
+};