Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hide nav branding and adjust navbar styles #315

Merged
merged 5 commits into from
Sep 22, 2023
Merged

Hide nav branding and adjust navbar styles #315

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ea0493b
[CCUBE-415][JAZZ|RL] Add option to hide nav brand logos
Sep 20, 2023
a67ba5e
[CCUBE-415][JAZZ|RL] Reduce brand size on small mobile screens
Sep 20, 2023
15bb7e7
[CCUBE-415][JAZZ|RL] Support targeted styling for drawer brand
Sep 20, 2023
36d579e
[CCUBE-415][JAZZ|RL] Update storybook docs
Sep 20, 2023
68952b5
[CCUBE-415][JAZZ|RL] Remove redundant first child check, rename style…
Sep 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 21 additions & 5 deletions src/navbar/drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,14 @@ const Component = (
// =============================================================================
// CONST, STATE, REFS
// =============================================================================
const { show, resources, children, onClose, onBrandClick } = props;
const {
show,
resources,
children,
hideNavBranding,
onClose,
onBrandClick,
} = props;
const [viewHeight, setViewHeight] = useState<number>(0);

const { primary, secondary } = resources;
Expand Down Expand Up @@ -52,13 +59,14 @@ const Component = (
// =============================================================================
// RENDER FUNCTIONS
// =============================================================================
const renderTopBar = () => (
<TopBar>
<NavBrandContainer>
const renderBrand = () => {
return (
<>
<Brand
resources={primary}
compress
onClick={onBrandClick}
data-id="drawer-brand-primary"
data-testid="drawer__brand"
type="primary"
/>
Expand All @@ -69,13 +77,21 @@ const Component = (
resources={secondary}
compress
onClick={onBrandClick}
data-id="drawer-brand-secondary"
data-testid="drawer__brand-secondary"
type="secondary"
/>
</>
)}
</NavBrandContainer>
</>
);
};

const renderTopBar = () => (
<TopBar>
<NavBrandContainer data-id="drawer-brand-container">
{!hideNavBranding && renderBrand()}
</NavBrandContainer>
<CloseButton
onClick={onClose}
focusHighlight={false}
Expand Down
14 changes: 11 additions & 3 deletions src/navbar/navbar-items.styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,21 @@ interface StyleProps {
$selected: boolean;
}

interface ItemStyleProps {
$alignLeft: boolean;
}

// =============================================================================
// WRAPPER
// =============================================================================

export const Wrapper = styled.ul`
export const Wrapper = styled.ul<ItemStyleProps>`
display: flex;
list-style: none;
position: relative;

${(props) => props.$alignLeft && "margin-right: auto;"}

${MediaQuery.MaxWidth.tablet} {
display: none;
}
Expand All @@ -41,13 +47,15 @@ export const MobileWrapper = styled.ul`
// =============================================================================
// LINK ITEMS
// =============================================================================
export const LinkItem = styled.li`
export const LinkItem = styled.li<ItemStyleProps>`
display: flex;
margin-left: 1rem;

:first-child {
margin-left: 0;
// negative margin to preserve touch target size for link
margin-left: ${(props) => (props.$alignLeft ? "-0.5rem" : "0")};
}

${MediaQuery.MaxWidth.tablet} {
flex-direction: column;
padding: 0.125rem 0;
Expand Down
14 changes: 11 additions & 3 deletions src/navbar/navbar-items.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ interface Props<T> {
selectedId?: string | undefined;
/** toggle for mobile or desktop view */
mobile?: boolean | undefined;
hideNavBranding?: boolean | undefined;
onItemClick: (
event: React.MouseEvent<HTMLAnchorElement>,
item: NavItemProps<T>
Expand All @@ -29,6 +30,7 @@ export const NavbarItems = <T,>({
items,
selectedId,
mobile = false,
hideNavBranding,
onItemClick,
}: Props<T>): JSX.Element => {
// =============================================================================
Expand Down Expand Up @@ -119,8 +121,9 @@ export const NavbarItems = <T,>({
selectedIndex >= 0 &&
selectedIndex === index &&
showSubMenu;
const alignLeft = index === 0 && hideNavBranding;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we are already restricting only the first child to have the align left, this check is redundant? On the same note, then maybe can have a generic prop called $hiddenBranding or something

return (
<LinkItem key={index}>
<LinkItem key={index} $alignLeft={alignLeft}>
<Link
data-testid={testId}
weight={textWeight}
Expand Down Expand Up @@ -162,8 +165,13 @@ export const NavbarItems = <T,>({
};

if (items && items.length > 0) {
const ContentWrapper = mobile ? MobileWrapper : Wrapper;
return <ContentWrapper ref={ref}>{renderItems()}</ContentWrapper>;
return mobile ? (
<MobileWrapper ref={ref}>{renderItems()}</MobileWrapper>
) : (
<Wrapper ref={ref} $alignLeft={hideNavBranding}>
{renderItems()}
</Wrapper>
);
}

return <></>;
Expand Down
15 changes: 13 additions & 2 deletions src/navbar/navbar.styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export const NAVBAR_MOBILE_HEIGHT = 3.5;
interface StyleProps {
$compress?: boolean;
$fixed?: boolean;
$hideNavBranding?: boolean;
}

// =============================================================================
Expand Down Expand Up @@ -55,12 +56,13 @@ export const Nav = styled.nav<StyleProps>`
}
`;

export const NavElementsContainer = styled.div`
export const NavElementsContainer = styled.div<StyleProps>`
display: flex;
height: 100%;
margin-left: 5rem;
margin-left: ${(props) => (props.$hideNavBranding ? "0" : "5rem")};
flex: 1;
justify-content: flex-end;

${MediaQuery.MaxWidth.tablet} {
margin-left: 0rem;
}
Expand Down Expand Up @@ -93,6 +95,10 @@ export const NavBrandContainer = styled.div<StyleProps>`
${MediaQuery.MaxWidth.tablet} {
height: 1.5rem;
}

${MediaQuery.MaxWidth.mobileS} {
height: 1.25rem;
}
`;

export const NavSeparator = styled.div<StyleProps>`
Expand All @@ -105,4 +111,9 @@ export const NavSeparator = styled.div<StyleProps>`
${MediaQuery.MaxWidth.tablet} {
margin: 0 1rem;
}

${MediaQuery.MaxWidth.mobileS} {
width: 2px;
margin: 0 0.75rem;
}
`;
9 changes: 7 additions & 2 deletions src/navbar/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ const Component = <T,>(
fixed = true,
resources = DEFAULT_RESOURCES,
hideNavElements = false,
hideNavBranding = false,
drawerDismissalExclusions: blockDrawerDismissalMethods = [],
actionButtons,
onItemClick,
Expand Down Expand Up @@ -188,6 +189,7 @@ const Component = <T,>(
onClose={handleDrawerClose}
onBrandClick={handleBrandClick}
actionButtons={actionButtons}
hideNavBranding={hideNavBranding}
>
<NavbarItems
items={items.mobile || items.desktop}
Expand Down Expand Up @@ -232,13 +234,16 @@ const Component = <T,>(
return (
<Layout.Content stretch={isStretch}>
<Nav $compress={compress}>
{renderBrand()}
{!hideNavBranding && renderBrand()}
{!hideNavElements && (
<NavElementsContainer>
<NavElementsContainer
$hideNavBranding={hideNavBranding}
>
<NavbarItems
items={items.desktop}
onItemClick={handleNavItemClick}
selectedId={selectedId}
hideNavBranding={hideNavBranding}
/>
<NavbarActionButtons
actionButtons={actionButtons}
Expand Down
2 changes: 2 additions & 0 deletions src/navbar/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,8 @@ export interface NavbarResourcesProps {
export interface NavbarSharedProps {
resources?: NavbarResourcesProps | undefined;
actionButtons?: NavbarActionButtonsProps | undefined;
/** Specifies if brand logos are visible */
hideNavBranding?: boolean | undefined;
}

export type DrawerDismissalMethod =
Expand Down
41 changes: 41 additions & 0 deletions stories/navbar/navbar.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -751,6 +751,47 @@ the screen with a fixed padding, ignoring the masthead's alignment.
</Story>
</Canvas>

<Heading3>Hide branding</Heading3>

When the branding elements are hidden, navigation items will be aligned to the left on desktop.

<Canvas>
<Story name="Hidden branding">
<Navbar
items={{
desktop: [
{
id: "home",
children: "Home",
},
{
id: "guides",
children: "Guides",
},
{
id: "lifesg-app",
children: "LifeSG app",
},
],
}}
actionButtons={{
desktop: [
{
type: "button",
args: {
styleType: "secondary",
children: "Logout",
},
},
],
}}
selectedId="home"
fixed={false} /* For storybook purposes */
hideNavBranding
/>
</Story>
</Canvas>

<Secondary>Troubleshooting</Secondary>

> The component also uses a custom script. Should you encounter a content security
Expand Down
6 changes: 6 additions & 0 deletions stories/navbar/props-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,12 @@ const DATA: ApiTableSectionProps[] = [
description: "The test identifier of the component",
propTypes: ["string"],
},
{
name: "hideNavBranding",
description: "Specifies if brand logos are visible",
propTypes: ["boolean"],
defaultValue: "false",
},
{
name: "hideNavElements",
description: "Specifies if links and buttons are hidden",
Expand Down