Skip to content

Commit

Permalink
SWED-2230 fix legacy style & behaviour & identical id topbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@goldenraphti
goldenraphti committed Aug 14, 2023
1 parent c9dffc6 commit 0bf250e
Show file tree
Hide file tree
Showing 6 changed files with 388 additions and 250 deletions.
2 changes: 1 addition & 1 deletion src/App/AppHeader/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const AppHeader = () => (
topbarContent={menu}
wide="xl"
logout
id="demo-topbar"
id="app-topbar"
sticky={false}
/>
<main className="topbar-content"></main>
Expand Down
93 changes: 80 additions & 13 deletions src/App/ComponentsDocumentation/components/Topbar/constants.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import React, { useEffect } from "react";
import TopbarComponent from "@components/Topbar";
import { topbar } from "@src/scripts/main";

import CodeTags from "@components/CodeTags";

Expand Down Expand Up @@ -64,18 +65,46 @@ export const menu = {
],
};

const Topbar = ({ sticky, wide, logout }) => (
<div className="container-fluid">
<TopbarComponent
topbarContent={menu}
wide={wide}
sticky={sticky}
logout={logout}
id="demo-topbar"
/>
<main className="topbar-content"></main>
</div>
);
const menuLegacy = {
btn: {
name: "Menu",
icon: "menu",
},
items: [
{
name: "Home",
icon: "home",
},
{
name: "Purchases",
icon: "shopping_cart",
},
{
name: "Settings",
icon: "settings",
},
],
};

const Topbar = ({ sticky, wide, logout, legacy }) => {
useEffect(() => {
topbar.init();
}, [legacy]);

return (
<div className="container-fluid">
<TopbarComponent
topbarContent={!legacy ? menu : menuLegacy}
wide={wide}
sticky={sticky}
logout={logout}
id="demo-topbar"
legacy={legacy}
/>
<main className="topbar-content"></main>
</div>
);
};

export const topbarShowcase = {
id: "overviewTopbar",
Expand Down Expand Up @@ -118,5 +147,43 @@ export const topbarShowcase = {
</>
),
},
{
tab: "⚠️ Legacy Desktop",
component: <Topbar wide="xl" logout legacy={true} />,
title: "Desktop",
description: (
<p>
{/* TODO: mention it's legacy topbar and it all involve to use this in terms of breaking changes */}
The minimum requirement in a Topbar is to include the Swedbank Pay
Logotype, common additional functionality is a list with navigation
links. On desktop use{" "}
<CodeTags type="secondary" code=".topbar-xl-wide" /> to show the links
listed horizontally in the topbar.{" "}
</p>
),
},
{
tab: "⚠️ Legacy Mobile/tablet",
component: <Topbar logout wide={false} legacy={true} />,
title: "Mobile/tablet",
description: (
<>
<p>
{/* TODO: mention it's legacy topbar and it all involve to use this in terms of breaking changes */}
The minimum requirement in a Topbar is to include the Swedbank Pay
Logotype, common additional functionality is a list with navigation
links. On smaller screens use a menu button to toggle a vertical
navigation drawer with links when the menu button is clicked.
</p>
<p>
Be aware; The <CodeTags code="max-height" type="primary" />{" "}
attribute for element <CodeTags type="secondary" code=".nav-ul" />{" "}
when it is active is set to 2500px. This is to ensure animation for
the transition to happen. You can easily alter this by creating
custom css.
</p>
</>
),
},
],
};
133 changes: 100 additions & 33 deletions src/App/components/Topbar/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { Fragment } from "react";
import PropTypes from "prop-types";
import swedbankpayLogo from "@src/img/swedbankpay/logo/swedbankpay-logo-h.svg";
import swedbankpayLogoHorizontal from "@src/img/swedbankpay/logo/swedbankpay-logo-h.svg";
import swedbankpayLogoVertical from "@src/img/swedbankpay/logo/swedbankpay-logo-v.svg";
import payexLogo from "@src/img/payex/logo/payex-logo.svg";

import SidebarComponent from "@components/Sidebar";
Expand All @@ -9,28 +10,44 @@ import ButtonComponent from "@components/Button";

const brand = process.env.brand;

const devLogo = brand === "swedbankpay" ? swedbankpayLogo : payexLogo;

const isDev = process.env.version === "LOCAL_DEV";
const getDevLogo = (legacy) => {
if (brand === "swedbankpay" && !legacy) {
return swedbankpayLogoHorizontal;
} else if (brand === "swedbankpay" && legacy) {
return swedbankpayLogoVertical;
} else {
return payexLogo;
}
};

const TopbarBtn = () => (
<>
<button
type="button"
className="topbar-btn"
aria-label="Open menu"
aria-haspopup="menu"
aria-expanded="false"
aria-controls="topbar-nav"
>
{"\n\t\t"}
<i className="material-icons topbar-btn-icon">menu</i>
{"\n\t\t"}
</button>
</>
);
const TopbarBtn = ({ legacy = false }) => {
return (
<>
<button
type="button"
className="topbar-btn"
aria-label="Open menu"
aria-haspopup="menu"
aria-expanded="false"
aria-controls="topbar-nav"
>
{"\n\t\t"}
<i className="material-icons topbar-btn-icon">menu</i>
{"\n\t\t"}
</button>
{legacy && (
<button type="button" className="topbar-close" aria-label="Close menu">
{"\n"}
<i className="material-icons topbar-btn-icon">close</i>
{"\n\t\t"}
</button>
)}
</>
);
};

const TopbarMenu = ({ menu, logout, sidebar }) => {
const TopbarMenu = ({ menu, logout, sidebar, legacy }) => {
const { items } = menu;

return (
Expand Down Expand Up @@ -58,7 +75,7 @@ const TopbarMenu = ({ menu, logout, sidebar }) => {
</Fragment>
))}
{"\n"}
{logout ? <TopbarLogout /> : null}
{logout ? legacy ? <TopbarLogoutLegacy /> : <TopbarLogout /> : null}
</div>
</nav>
);
Expand All @@ -74,7 +91,24 @@ const TopbarLogout = () => (
/>
);

const TopbarLogo = ({ png }) => (
const TopbarLogoutLegacy = () => (
<>
<a
className="topbar-link-right"
href="#"
onClick={(e) => e.preventDefault()}
>
{"\n"}
<i className="material-icons">exit_to_app</i>
{"\n"}
<span>Log out</span>
{"\n"}
</a>
{"\n"}
</>
);

const TopbarLogo = ({ png, legacy }) => (
<>
<a
className={`topbar-logo${png ? " topbar-logo-png" : ""}`}
Expand All @@ -86,22 +120,30 @@ const TopbarLogo = ({ png }) => (
{brand === "swedbankpay" && png ? (
<img
src={`${process.env.basename}img/logo/${brand}-logo${
brand === "swedbankpay" ? "-h" : ""
brand === "swedbankpay" ? (legacy ? "-v" : "-h") : ""
}.png`}
alt={`${brand} logo`}
className="logotype-horizontal logotype-sm"
className={`${
legacy
? "logotype-vertical logotype-xs"
: "logotype-horizontal logotype-sm"
}`}
/>
) : (
<img
src={
isDev
? devLogo
? getDevLogo(legacy)
: `${process.env.basename}img/logo/${brand}-logo${
brand === "swedbankpay" ? "-h" : ""
brand === "swedbankpay" ? (legacy ? "-v" : "-h") : ""
}.svg`
}
alt={`${brand} logo`}
className="logotype-horizontal logotype-sm"
className={`${
legacy
? "logotype-vertical logotype-xs"
: "logotype-horizontal logotype-sm"
}`}
/>
)}
{"\n"}
Expand All @@ -110,22 +152,46 @@ const TopbarLogo = ({ png }) => (
</>
);

const Topbar = ({ topbarContent, wide, logout, id, png, sticky, sidebar }) => (
const Topbar = ({
topbarContent,
wide,
logout,
id,
png,
sticky,
sidebar,
legacy = false,
}) => (
<header
className={`topbar${wide ? ` topbar-${wide}-wide` : ""}${
sticky ? " topbar-sticky" : ""
}`}
}${legacy ? " legacy" : ""}`}
id={id}
>
{"\n"}
{topbarContent ? (
<div className="nav-container">
{legacy && (
<>
{"\n"}
<TopbarBtn legacy={legacy} />
</>
)}
{"\n"}
<TopbarLogo png={png} />
{"\n"}
<TopbarMenu menu={topbarContent} logout={!!logout} sidebar={sidebar} />
<TopbarLogo png={png} legacy={legacy} />
{"\n"}
<TopbarBtn />
<TopbarMenu
menu={topbarContent}
logout={!!logout}
sidebar={sidebar}
legacy={legacy}
/>
{!legacy && (
<>
{"\n"}
<TopbarBtn legacy={legacy} />
</>
)}
</div>
) : (
<>
Expand All @@ -143,6 +209,7 @@ Topbar.propTypes = {
png: PropTypes.bool,
sticky: PropTypes.bool,
sidebar: PropTypes.bool,
legacy: PropTypes.bool,
};

export default Topbar;
Loading

0 comments on commit 0bf250e

Please sign in to comment.