Insert identify to sidebar components

VWApplications · May 9, 2020 · ee1b5d6 · ee1b5d6
1 parent 90d0c84
commit ee1b5d6
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 19 deletions.
diff --git a/example/src/App.js b/example/src/App.js
@@ -65,7 +65,7 @@ class App extends Component {
           <MenuItem title="Calendar" icon="fa fa-calendar" onClick={() => console.log("Calendar")} />
           <MenuItem title="Examples" icon="fa fa-folder" onClick={() => console.log("Examples")} />
         </Sidebar>
-        <PageContent showSidebar={this.state.showSidebar}>
+        <PageContent id="page-content" showSidebar={this.state.showSidebar}>
           <Container>
             <h1 className="text-center">Ambiente de desenvolvimento.</h1>
             <hr />

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vwapp-react-components",
-  "version": "3.6.4",
+  "version": "3.6.5",
   "description": "Componentes bootstrap usando react.",
   "keywords": [
     "bootstrap",

diff --git a/src/components/Sidebar/components/DropdownMenuItem.js b/src/components/Sidebar/components/DropdownMenuItem.js
@@ -15,7 +15,7 @@ export class DropdownMenuItem extends React.Component {
     const { title, icon, children, badge = "", badgeVariant = null } = this.props;
 
     return (
-      <CustomSidebarDropdown className={this.state.open ? "" : "closed"}>
+      <CustomSidebarDropdown className={this.state.open ? "sidebar-menu-dropdown" : "sidebar-menu-dropdown closed"}>
         <CustomDropdownItem onClick={() => this.setState({open: !this.state.open})}>
             <DropdownIcon className={icon}></DropdownIcon>
             <span>{title}</span>

diff --git a/src/components/Sidebar/components/HeaderMenu.js b/src/components/Sidebar/components/HeaderMenu.js
@@ -2,7 +2,7 @@ import React from "react";
 import { CustomHeaderMenu } from "../styles";
 
 export const HeaderMenu = props => (
-  <li {...props}>
+  <li {...props} className="sidebar-menu-header">
     <CustomHeaderMenu>{props.children}</CustomHeaderMenu>
   </li>
 );
diff --git a/src/components/Sidebar/components/MenuItem.js b/src/components/Sidebar/components/MenuItem.js
@@ -2,7 +2,7 @@ import React from "react";
 import { CustomMenuItem, CustomMenuLink, MenuItemBadge, MenuItemIcon } from "../styles";
 
 export const MenuItem = props => (
-  <CustomMenuItem>
+  <CustomMenuItem className="sidebar-menu">
     <CustomMenuLink onClick={props.onClick}>
       {props.icon && <MenuItemIcon className={props.icon}></MenuItemIcon>}
       {props.title}

diff --git a/src/components/Sidebar/components/Sidebar.js b/src/components/Sidebar/components/Sidebar.js
@@ -11,16 +11,17 @@ export class Sidebar extends React.Component {
     const { show, title, children, close, img, name, role, footerItems, header = true } = this.props;
 
     return (
-        <SidebarWrapper open={show}>
-          <SidebarContent>
+        <SidebarWrapper id="sidebar-wrapper" open={show}>
+          <SidebarContent id="sidebar-content">
             <SidebarBrand title={title} close={close} />
             <SidebarHeader img={img} name={name} role={role} show={header} />
-            <SidebarMenu>{children}</SidebarMenu>
+            <SidebarMenu id="sidebar-menu">{children}</SidebarMenu>
           </SidebarContent>
           {footerItems && (
-            <SidebarFooter>
+            <SidebarFooter id="sidebar-footer">
               {footerItems.map((item, index) => (
                 <FooterItem
+                  className="sidebar-item"
                   key={index}
                   icon={item.icon}
                   badge={item.badge}

diff --git a/src/components/Sidebar/components/SidebarBrand.js b/src/components/Sidebar/components/SidebarBrand.js
@@ -2,9 +2,9 @@ import React from "react";
 import { CustomBrand, BrandTitle, CloseSidebarButton } from "../styles";
 
 export const SidebarBrand = props => (
-  <CustomBrand>
-    <BrandTitle>{props.title}</BrandTitle>
-    <CloseSidebarButton onClick={props.close}>
+  <CustomBrand id="sidebar-brand">
+    <BrandTitle id="sidebar-brand-title">{props.title}</BrandTitle>
+    <CloseSidebarButton id="sidebar-close-button" onClick={props.close}>
       <i className="fas fa-times"></i>
     </CloseSidebarButton>
   </CustomBrand>

diff --git a/src/components/Sidebar/components/SidebarHeader.js b/src/components/Sidebar/components/SidebarHeader.js
@@ -5,18 +5,19 @@ import {
 } from "../styles";
 
 export const SidebarHeader = props => (
-  <CustomSidebarHeader show={props.show}>
-    <CustomUserPic>
+  <CustomSidebarHeader id="sidebar-header" show={props.show}>
+    <CustomUserPic id="sidebar-header-user-pic">
       <UserImage
+        id="sidebar-header-user-image"
         className="img-responsive img-rounded"
         src={props.img}
         alt="User"
       />
     </CustomUserPic>
-    <CustomUserInfo>
-      <UserName>{props.name}</UserName>
-      <UserRole>{props.role}</UserRole>
-      <UserStatus>
+    <CustomUserInfo id="sidebar-header-user-info">
+      <UserName id="sidebar-header-user-name">{props.name}</UserName>
+      <UserRole id="sidebar-header-user-role">{props.role}</UserRole>
+      <UserStatus id="sidebar-header-user-status">
         <i className="fa fa-circle"></i>
         <span>Online</span>
       </UserStatus>

diff --git a/src/components/Sidebar/components/SidebarMenu.js b/src/components/Sidebar/components/SidebarMenu.js
@@ -3,6 +3,6 @@ import { CustomSidebarMenu, SidebarList } from "../styles";
 
 export const SidebarMenu = props => (
   <CustomSidebarMenu {...props}>
-    <SidebarList>{props.children}</SidebarList>
+    <SidebarList id="sidebar-menu-list">{props.children}</SidebarList>
   </CustomSidebarMenu>
 );