Merge pull request #5 from selsa-inube/cmarin/1587/extend-component-t…

…o-control-elements-to-show Extend `<Header />` to control if `<User />` should be included or not
selsa-inube · May 16, 2024 · 2e46d02 · 2e46d02
2 parents 289d819 + da9eee0
commit 2e46d02
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 8 deletions.
diff --git a/src/Header/index.tsx b/src/Header/index.tsx
@@ -16,10 +16,21 @@ interface IHeader {
   userName: string;
   client: string;
   links?: IHeaderLink[];
+  showLinks?: boolean;
+  showUser?: boolean;
 }
 
 const Header = (props: IHeader) => {
-  const { portalId, navigation, logoURL, userName, client, links } = props;
+  const {
+    portalId,
+    navigation,
+    logoURL,
+    userName,
+    client,
+    links,
+    showLinks = false,
+    showUser = true,
+  } = props;
   const theme = useContext(ThemeContext);
   const linkAppearance =
     (theme?.header?.content?.appearance as ITextAppearance) ||
@@ -31,7 +42,12 @@ const Header = (props: IHeader) => {
   return (
     <StyledHeader>
       <Stack alignItems="center" justifyContent="space-between">
-        <Stack justifyContent="space-between" gap="23px">
+        <Stack
+          justifyContent="space-between"
+          gap="23px"
+          height={showUser ? "auto" : "53px"}
+          alignItems="center"
+        >
           {tablet && (
             <FullscreenNav
               portalId={portalId}
@@ -43,7 +59,7 @@ const Header = (props: IHeader) => {
           {logoURL}
         </Stack>
         <Stack justifyContent="space-between" gap="23px">
-          {tablet &&
+          {showLinks &&
             links &&
             links.map((link, index) => (
               <StyledLink key={index} to={link.path}>
@@ -52,11 +68,13 @@ const Header = (props: IHeader) => {
                 </Text>
               </StyledLink>
             ))}
-          <User
-            username={userName}
-            client={client}
-            size={mobile ? "small" : "large"}
-          />
+          {showUser && (
+            <User
+              username={userName}
+              client={client}
+              size={mobile ? "small" : "large"}
+            />
+          )}
         </Stack>
       </Stack>
     </StyledHeader>

diff --git a/src/Header/props.ts b/src/Header/props.ts
@@ -37,6 +37,20 @@ const props = {
   portalId: {
     description: "id of the portal element",
   },
+  showLinks: {
+    description:
+      "Boolean flag to control the visibility of the links in the header",
+    table: {
+      defaultValue: { summary: false },
+    },
+  },
+  showUser: {
+    description:
+      "Boolean flag to control the visibility of the user component in the header",
+    table: {
+      defaultValue: { summary: true },
+    },
+  },
 };
 
 export { props, parameters };

diff --git a/src/Header/stories/Header.stories.tsx b/src/Header/stories/Header.stories.tsx
@@ -107,6 +107,8 @@ Default.args = {
       icon: <MdAndroid />,
     },
   ],
+  showLinks: false,
+  showUser: true,
 };
 
 export default story;

diff --git a/src/Header/styles.js b/src/Header/styles.js
@@ -26,6 +26,9 @@ const StyledHeader = styled.header`
   & > div > div:first-child {
     padding-left: 12px;
   }
+  & > div > div > img {
+    height: 33.57px;
+  }
   & > div > div > div:last-child {
     padding: 8px 16px;
     border-left: 1px solid