Fix/update-stories

.gitignore

@@ -2,4 +2,6 @@ node_modules
 
 dist
 storybook-static
-.npmrc
+.npmrc
+
+.vscode

src/lib-components/IconRender/index.tsx

@@ -12,7 +12,7 @@ export function IconRenderer({
   IconComponent
 }: IconRendererProps) {
   return (
-    <div style={{ color: 'white', justifyContent: 'center' }}>
+    <div style={{ color: 'white', display:'flex', justifyContent: 'center' }}>
       {iconUrl && (
         <img
           style={{ width: '2.35rem', height: '2.35rem', marginLeft: '1.7rem' }}

src/lib-components/Navbar/index.tsx

@@ -17,6 +17,7 @@ import {
   RightContainer,
   SystemsButton,
   Logo,
+  StyledLogoLink,
   StyledUserMenu,
   StyledSystemMenu,
   TitleContainer,
@@ -37,7 +38,6 @@ export interface NavbarProps {
   title?: string;
   h1?: boolean;
   searchFunction?: (searchString: string) => void;
-  searchDropdownLabelsList?: string[];
   logoutFunction?: () => void;
   user?: User;
   sideMenuLinks?: SideMenuLink[];
@@ -140,9 +140,9 @@ export const Navbar = ({
           <StyledAppBar>
             <StyledToolbar>
               {logoSrc && (
-                <a href={logoRedirectUrl}>
+                <StyledLogoLink href={logoRedirectUrl}>
                   <Logo src={logoSrc} alt='Logo da Instituição' />
-                </a>
+                </StyledLogoLink>
               )}
               <TitleContainer>
                 {h1 ? (
@@ -292,9 +292,9 @@ export const Navbar = ({
                   </>
                 )}
                 {logoSrc && (
-                  <a href={logoRedirectUrl}>
+                  <StyledLogoLink href={logoRedirectUrl}>
                     <Logo src={logoSrc} alt='Logo da Instituição' />
-                  </a>
+                  </StyledLogoLink>
                 )}
                 {hiddenUser ? (
                   <span></span>

src/lib-components/Navbar/styles.ts

@@ -142,3 +142,9 @@ export const StyledSystemMenu = styled(Menu)`
     padding-bottom: 0px;
   }
 `;
+
+export const StyledLogoLink = styled.a`
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+`;

src/stories/ErrorScreen.stories.tsx

@@ -0,0 +1,62 @@
+import { ErrorScreen, httpErrors } from '../lib-components/ErrorScreen';
+import { BrowserRouter } from 'react-router-dom';
+import { Meta, StoryFn } from '@storybook/react';
+
+export default {
+  title: 'Components/ErrorScreen',
+  component: ErrorScreen,
+  argTypes: {
+    errorType: {
+      name: 'errorType',
+      description: 'Type of error to be displayed',
+      required: true,
+      options: [
+        httpErrors.NOTFOUND_404,
+        httpErrors.COMINGSOON_501,
+        httpErrors.INACTIVE_503,
+        httpErrors.MAINTENANCE_503
+      ],
+      control: {
+        type: 'radio',
+        labels: {
+          [httpErrors.NOTFOUND_404]: 'Not Found',
+          [httpErrors.COMINGSOON_501]: 'Coming Soon',
+          [httpErrors.INACTIVE_503]: 'Inactive',
+          [httpErrors.MAINTENANCE_503]: 'Maintenance'
+        }
+      }
+    }
+  }
+} as Meta;
+
+interface ErrorScreenStoryProps {
+  errorType: httpErrors;
+}
+
+const Template: StoryFn<ErrorScreenStoryProps> = (args) => {
+  return (
+    <BrowserRouter>
+      <ErrorScreen errorType={args.errorType} />
+    </BrowserRouter>
+  );
+};
+
+export const NotFoundPage_ = Template.bind({});
+NotFoundPage_.args = {
+  errorType: httpErrors.NOTFOUND_404
+};
+
+export const ComingSoonPage_ = Template.bind({});
+ComingSoonPage_.args = {
+  errorType: httpErrors.COMINGSOON_501
+};
+
+export const InactivePage_ = Template.bind({});
+InactivePage_.args = {
+  errorType: httpErrors.INACTIVE_503
+};
+
+export const MaintenancePage_ = Template.bind({});
+MaintenancePage_.args = {
+  errorType: httpErrors.MAINTENANCE_503
+};

src/stories/Navbar.stories.tsx

@@ -22,6 +22,8 @@ export default {
 
 export interface NavbarStoryProps {
   isLandingPage: boolean;
+  logoRedirectUrl?: string;
+  logoSrc?: string;
   haveSearchBar: boolean;
   hiddenUser: boolean;
   user: User;
@@ -30,7 +32,9 @@ export interface NavbarStoryProps {
   systemsListPopup: boolean;
   title: string;
   systemsList: System[];
-  iconComponent: JSXElementConstructor<any>;
+  currentSystemIconUrl?: string;
+  children: JSX.Element;
+  IconComponent: JSXElementConstructor<any>;
 }
 
 interface IconComponentProps {
@@ -50,6 +54,9 @@ const Template: StoryFn<NavbarStoryProps> = (args) => {
     <BrowserRouter>
       <Navbar
         isLandingPage={args.isLandingPage}
+        logoRedirectUrl={args.logoRedirectUrl}
+        logoSrc={args.logoSrc}
+        currentSystemIconUrl={args.currentSystemIconUrl}
         haveSearchBar={args.haveSearchBar}
         hiddenUser={args.hiddenUser}
         user={args.hiddenUser ? undefined : args.user}
@@ -67,11 +74,14 @@ export const Navbar_ = Template.bind({});
 Navbar_.args = {
   h1: true,
   isLandingPage: false,
+  logoRedirectUrl: '/',
+  logoSrc: 'https://cincoders.cin.ufpe.br/static/media/cincodersicon.90317b65.svg',
+  currentSystemIconUrl: 'https://cincoders.cin.ufpe.br/static/media/cnmIcon.a94acd66.svg',
   haveSearchBar: false,
   hiddenUser: false,
   user: testUser,
   sideMenuLinks: testLinks,
   systemsListPopup: false,
   systemsList: testSystems,
-  iconComponent: () => <></>
+  IconComponent: () => <></>
 };

src/stories/utils/argTypes.ts

@@ -112,6 +112,24 @@ export const navbarArgTypes = {
       category: 'Navbar'
     }
   },
+  logoRedirectUrl: {
+    name: 'logoRedirectUrl',
+    type: { name: 'string', required: false },
+    description: 'String wich defines the href of the logo',
+    control: { type: 'text' },
+    table: {
+      category: 'Navbar'
+    }
+  },
+  logoSrc: {
+    name: 'logoSrc',
+    type: { name: 'string', required: false },
+    description: 'String wich defines the src of the logo',
+    control: { type: 'text' },
+    table: {
+      category: 'Navbar'
+    }
+  },
   haveSearchBar: {
     name: 'haveSearchBar',
     type: { name: 'boolean', required: false },
@@ -193,8 +211,17 @@ export const navbarArgTypes = {
       category: 'Navbar'
     }
   },
-  iconComponent: {
-    name: 'iconComponent',
+  currentSystemIconUrl: {
+    name: 'currentSystemIconUrl',
+    type: { name: 'string', required: false },
+    description: 'String wich defines the current system icon',
+    control: { type: 'text' },
+    table: {
+      category: 'Navbar'
+    }
+  },
+  IconComponent: {
+    name: 'IconComponent',
     description: 'Icon of system that appears in navbar',
     table: {
       category: 'Navbar'