Merge pull request #301 from LifeSG/resize-navbar-brand

Resize navbar brand
LifeSG · Sep 5, 2023 · 0359249 · 0359249
2 parents e007760 + b5a0399
commit 0359249
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 24 deletions.
diff --git a/src/navbar/brand.styles.tsx b/src/navbar/brand.styles.tsx
@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import { MediaQuery } from "../media";
 import { Transition } from "../transition";
 import { BrandType } from "./types";
 
@@ -8,7 +7,6 @@ import { BrandType } from "./types";
 // See more https://styled-components.com/docs/api#transient-props
 // =============================================================================
 interface StyleProps {
-    $compress?: boolean | undefined;
     $type?: BrandType | undefined;
 }
 
@@ -18,22 +16,12 @@ interface StyleProps {
 export const Clickable = styled.a<StyleProps>`
     display: flex;
     justify-content: center;
+    height: 100%;
 
     img {
         width: auto;
-        height: ${(props) =>
-            props.$type === "primary"
-                ? props.$compress
-                    ? 1.25
-                    : 1.625
-                : props.$compress
-                ? 2
-                : 2.5}rem;
+        height: 100%;
         transition: ${Transition.Base};
         object-fit: contain;
-
-        ${MediaQuery.MaxWidth.tablet} {
-            height: ${(props) => (props.$type === "primary" ? 1 : 1.5)}rem;
-        }
     }
 `;
diff --git a/src/navbar/brand.tsx b/src/navbar/brand.tsx
@@ -6,6 +6,7 @@ import { ImageWithFallback } from "../shared/image-with-fallback/image-with-fall
 interface Props {
     resources: NavbarBrandingProps;
     compress?: boolean | undefined;
+    "data-id"?: string | undefined;
     "data-testid"?: string | undefined;
     type: BrandType;
     onClick?:
@@ -18,8 +19,8 @@ interface Props {
 
 export const Brand = ({
     resources,
-    compress,
     onClick,
+    "data-id": dataId,
     "data-testid": testId = "navbar-brand",
     type,
 }: Props) => {
@@ -37,8 +38,8 @@ export const Brand = ({
             role="link"
             aria-label={resources.brandName + "-app-home-page"}
             onClick={handleClick}
-            $compress={compress}
             tabIndex={0}
+            data-id={dataId}
             data-testid={testId}
             $type={type}
         >

diff --git a/src/navbar/navbar.styles.tsx b/src/navbar/navbar.styles.tsx
@@ -82,23 +82,27 @@ export const MobileMenuIcon = styled(MenuIcon)`
     color: ${Color.Neutral[1]};
 `;
 
-export const NavBrandContainer = styled.div`
+export const NavBrandContainer = styled.div<StyleProps>`
     display: flex;
-    height: 100%;
     flex-direction: row;
     align-items: center;
     flex-shrink: 0;
+
+    height: ${(props) => (props.$compress ? 1.5 : 2)}rem;
+
+    ${MediaQuery.MaxWidth.tablet} {
+        height: 1.5rem;
+    }
 `;
 
 export const NavSeparator = styled.div<StyleProps>`
     display: flex;
     background-color: ${Color.Neutral[5]};
-    height: ${(props) => (props.$compress ? 2 : 2.5)}rem;
+    height: 100%;
     width: 1px;
-    margin: 0 ${(props) => (props.$compress ? 1.125 : 1.5)}rem;
+    margin: 0 ${(props) => (props.$compress ? 1 : 1.5)}rem;
 
     ${MediaQuery.MaxWidth.tablet} {
-        height: 1.5rem;
         margin: 0 1rem;
     }
 `;
diff --git a/src/navbar/navbar.tsx b/src/navbar/navbar.tsx
@@ -36,6 +36,7 @@ import {
 const Component = <T,>(
     {
         items,
+        className,
         id,
         selectedId,
         compress = false,
@@ -204,11 +205,11 @@ const Component = <T,>(
     );
 
     const renderBrand = () => (
-        <NavBrandContainer>
+        <NavBrandContainer $compress={compress} data-id="brand-container">
             <Brand
                 resources={primary}
-                compress={compress}
                 onClick={handleBrandClick}
+                data-id="brand-primary"
                 data-testid="main__brand"
                 type="primary"
             />
@@ -217,8 +218,8 @@ const Component = <T,>(
                     <NavSeparator $compress={compress} />
                     <Brand
                         resources={secondary}
-                        compress={compress}
                         onClick={handleBrandClick}
+                        data-id="brand-secondary"
                         data-testid="main__brand-secondary"
                         type="secondary"
                     />
@@ -264,6 +265,7 @@ const Component = <T,>(
         <Wrapper
             ref={elementRef}
             $fixed={fixed}
+            className={className}
             id={id || "navbar-wrapper"}
             data-testid={otherProps["data-testid"] || "navbar-wrapper"}
         >

diff --git a/src/navbar/types.ts b/src/navbar/types.ts
@@ -92,6 +92,7 @@ export type NavbarDrawerHandle = HTMLDivElement & {
 
 export interface NavbarProps<T = void> extends NavbarSharedProps {
     items: NavItemsProps<T>;
+    className?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
     selectedId?: string | undefined;