mautourco-components 0.2.4 → 0.2.7

package/src/components/organisms/TopNavigation/MobileNav.tsx

@@ -1,212 +1,212 @@
-import React from "react";
-import Icon from "../../atoms/Icon/Icon";
-import Button from "../../atoms/Button/Button";
-import { UserCard } from "../../molecules/UserCard/UserCard";
-
-type Link = {
-  label: string;
-  route: string;
-  isButton?: boolean;
-  disabled?: boolean;
-};
-
-type User = {
-  name: string;
-  agency: string;
-  isAdmin: boolean;
-};
-
-type Agency = {
-  id: number;
-  name: string;
-  localisation: string;
-};
-
-export interface MobileNavProps {
-  links: Link[];
-  onLinkClick?: (link: Link) => void;
-  onLogin?: () => void;
-  onLogout?: () => void;
-  user?: User;
-  active?: string;
-  logoUrl: string | React.FC<React.SVGProps<SVGSVGElement>>;
-  selectedAgency?: Agency;
-  onAgencyChange?: (agency: Agency) => void;
-  agencies?: Agency[];
-  homeUrl?: string;
-}
-
-export const MobileNav: React.FC<MobileNavProps> = ({
-  links,
-  onLinkClick,
-  onLogin,
-  onLogout,
-  user,
-  active,
-  logoUrl,
-  selectedAgency,
-  onAgencyChange,
-  agencies,
-  homeUrl,
-}) => {
-  const [open, setOpen] = React.useState(false);
-  const closeRef = React.useRef<HTMLButtonElement>(null);
-  const Logo = typeof logoUrl === "function" ? logoUrl : null;
-
-  return (
-    <>
-      <header className="header">
-        <button aria-label="Open Menu" onClick={() => setOpen(true)}>
-          <Icon name="menu" size="sm" />
-        </button>
-        <div className="header-logo">
-          <a
-            href={homeUrl ?? "/"}
-            className="header-logo__link"
-            onClick={(e) => {
-              e.preventDefault();
-              onLinkClick?.({ label: "Home", route: homeUrl ?? "/" });
-            }}
-          >
-            {Logo ? (
-              <Logo className="header-logo__image" />
-            ) : (
-              <img
-                src={logoUrl as string}
-                alt="Mautourco"
-                className="header-logo__image"
-                draggable={false}
-              />
-            )}
-          </a>
-        </div>
-        <div className="header-user-actions">
-          {!user && (
-            <Button
-              size="sm"
-              variant="secondary"
-              onClick={() => {
-                onLogin?.();
-                setOpen(false);
-              }}
-            >
-              Login
-            </Button>
-          )}
-        </div>
-      </header>
-      <div
-        aria-hidden={!open}
-        className={`mobile-nav__backdrop ${
-          open ? "mobile-nav__backdrop--open" : "mobile-nav__backdrop--closed"
-        }`}
-        onClick={() => setOpen(false)}
-      />
-
-      <aside
-        role="dialog"
-        aria-modal="true"
-        aria-label="Main menu"
-        className={`
-          mobile-nav__sheet
-          ${open ? "mobile-nav__sheet--open" : "mobile-nav__sheet--closed"}
-        `}
-      >
-        <div className="mobile-nav__header">
-          <div>
-            <button
-              ref={closeRef}
-              aria-label="Close menu"
-              onClick={() => setOpen(false)}
-              className="mobile-nav__close-button"
-            >
-              <Icon name="close" size="sm" />
-            </button>
-          </div>
-          {user ? (
-            <UserCard
-              user={user}
-              agencies={agencies || []}
-              selectedAgency={selectedAgency}
-              onSelectAgency={onAgencyChange}
-            />
-          ) : (
-            <a
-              href={homeUrl ?? "/"}
-              className="header-logo__link"
-              onClick={(e) => {
-                e.preventDefault();
-                onLinkClick?.({ label: "Home", route: homeUrl ?? "/" });
-              }}
-            >
-              {Logo ? (
-                <Logo className="header-logo__image-mobile" />
-              ) : (
-                <img
-                  src={logoUrl as string}
-                  alt="Mautourco"
-                  className="header-logo__image-mobile"
-                  draggable={false}
-                />
-              )}
-            </a>
-          )}
-        </div>
-
-        <nav className="mobile-nav__content">
-          <ul className="mobile-nav__list">
-            {links.map((l, i) => {
-              const activeItem = active && active === l.label;
-              return (
-                <li
-                  key={`${l.route}-${i}`}
-                  className={`header__item ${activeItem ? "header__item--active" : ""}`}
-                >
-                  <button
-                    disabled={l.disabled}
-                    onClick={() => {
-                      onLinkClick?.(l);
-                      setOpen(false);
-                    }}
-                    className="mobile-nav__item-button"
-                  >
-                    {l.label}
-                  </button>
-                </li>
-              );
-            })}
-          </ul>
-        </nav>
-
-        <div className="mobile-nav__footer">
-          {user ? (
-            <div className="mobile-nav__user-info">
-              <Button
-                onClick={() => {
-                  onLogout?.();
-                  setOpen(false);
-                }}
-                className="mobile-nav__logout-button"
-              >
-                Logout
-              </Button>
-            </div>
-          ) : (
-            <Button
-              size="sm"
-              variant="secondary"
-              onClick={() => {
-                onLogin?.();
-                setOpen(false);
-              }}
-            >
-              Login
-            </Button>
-          )}
-        </div>
-      </aside>
-    </>
-  );
-};
-
-export default MobileNav;
+import React from "react";
+import Icon from "../../atoms/Icon/Icon";
+import Button from "../../atoms/Button/Button";
+import { UserCard } from "../../molecules/UserCard/UserCard";
+
+type Link = {
+  label: string;
+  route: string;
+  isButton?: boolean;
+  disabled?: boolean;
+};
+
+type User = {
+  name: string;
+  agency: string;
+  isAdmin: boolean;
+};
+
+type Agency = {
+  id: number;
+  name: string;
+  localisation: string;
+};
+
+export interface MobileNavProps {
+  links: Link[];
+  onLinkClick?: (link: Link) => void;
+  onLogin?: () => void;
+  onLogout?: () => void;
+  user?: User;
+  active?: string;
+  logoUrl: string | React.FC<React.SVGProps<SVGSVGElement>>;
+  selectedAgency?: Agency;
+  onAgencyChange?: (agency: Agency) => void;
+  agencies?: Agency[];
+  homeUrl?: string;
+}
+
+export const MobileNav: React.FC<MobileNavProps> = ({
+  links,
+  onLinkClick,
+  onLogin,
+  onLogout,
+  user,
+  active,
+  logoUrl,
+  selectedAgency,
+  onAgencyChange,
+  agencies,
+  homeUrl,
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const closeRef = React.useRef<HTMLButtonElement>(null);
+  const Logo = typeof logoUrl === "function" ? logoUrl : null;
+
+  return (
+    <>
+      <header className="header">
+        <button aria-label="Open Menu" onClick={() => setOpen(true)}>
+          <Icon name="menu" size="sm" />
+        </button>
+        <div className="header-logo">
+          <a
+            href={homeUrl ?? "/"}
+            className="header-logo__link"
+            onClick={(e) => {
+              e.preventDefault();
+              onLinkClick?.({ label: "Home", route: homeUrl ?? "/" });
+            }}
+          >
+            {Logo ? (
+              <Logo className="header-logo__image" />
+            ) : (
+              <img
+                src={logoUrl as string}
+                alt="Mautourco"
+                className="header-logo__image"
+                draggable={false}
+              />
+            )}
+          </a>
+        </div>
+        <div className="header-user-actions">
+          {!user && (
+            <Button
+              size="sm"
+              variant="secondary"
+              onClick={() => {
+                onLogin?.();
+                setOpen(false);
+              }}
+            >
+              Login
+            </Button>
+          )}
+        </div>
+      </header>
+      <div
+        aria-hidden={!open}
+        className={`mobile-nav__backdrop ${
+          open ? "mobile-nav__backdrop--open" : "mobile-nav__backdrop--closed"
+        }`}
+        onClick={() => setOpen(false)}
+      />
+
+      <aside
+        role="dialog"
+        aria-modal="true"
+        aria-label="Main menu"
+        className={`
+          mobile-nav__sheet
+          ${open ? "mobile-nav__sheet--open" : "mobile-nav__sheet--closed"}
+        `}
+      >
+        <div className="mobile-nav__header">
+          <div>
+            <button
+              ref={closeRef}
+              aria-label="Close menu"
+              onClick={() => setOpen(false)}
+              className="mobile-nav__close-button"
+            >
+              <Icon name="close" size="sm" />
+            </button>
+          </div>
+          {user ? (
+            <UserCard
+              user={user}
+              agencies={agencies || []}
+              selectedAgency={selectedAgency}
+              onSelectAgency={onAgencyChange}
+            />
+          ) : (
+            <a
+              href={homeUrl ?? "/"}
+              className="header-logo__link"
+              onClick={(e) => {
+                e.preventDefault();
+                onLinkClick?.({ label: "Home", route: homeUrl ?? "/" });
+              }}
+            >
+              {Logo ? (
+                <Logo className="header-logo__image-mobile" />
+              ) : (
+                <img
+                  src={logoUrl as string}
+                  alt="Mautourco"
+                  className="header-logo__image-mobile"
+                  draggable={false}
+                />
+              )}
+            </a>
+          )}
+        </div>
+
+        <nav className="mobile-nav__content">
+          <ul className="mobile-nav__list">
+            {links.map((l, i) => {
+              const activeItem = active && active === l.label;
+              return (
+                <li
+                  key={`${l.route}-${i}`}
+                  className={`header__item ${activeItem ? "header__item--active" : ""}`}
+                >
+                  <button
+                    disabled={l.disabled}
+                    onClick={() => {
+                      onLinkClick?.(l);
+                      setOpen(false);
+                    }}
+                    className="mobile-nav__item-button"
+                  >
+                    {l.label}
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+
+        <div className="mobile-nav__footer">
+          {user ? (
+            <div className="mobile-nav__user-info">
+              <Button
+                onClick={() => {
+                  onLogout?.();
+                  setOpen(false);
+                }}
+                className="mobile-nav__logout-button"
+              >
+                Logout
+              </Button>
+            </div>
+          ) : (
+            <Button
+              size="sm"
+              variant="secondary"
+              onClick={() => {
+                onLogin?.();
+                setOpen(false);
+              }}
+            >
+              Login
+            </Button>
+          )}
+        </div>
+      </aside>
+    </>
+  );
+};
+
+export default MobileNav;

package/src/components/organisms/TopNavigation/TopNavigation.tsx

@@ -1,45 +1,45 @@
-import React from "react";
-import { useMobile } from "../../../hooks/useMobile";
-import MobileNav from "./MobileNav";
-import { DesktopNav } from "./DesktopNav";
-
-type Link = {
-  label: string;
-  route: string;
-  isButton?: boolean;
-  disabled?: boolean;
-};
-
-type User = {
-  name: string;
-  agency: string;
-  isAdmin: boolean;
-};
-
-type Agency = {
-  id: number;
-  name: string;
-  localisation: string;
-};
-
-export interface TopNavigationProps {
-  links: Link[];
-  onLinkClick?: (link: Link) => void;
-  onLogin?: () => void;
-  onLogout?: () => void;
-  user?: User;
-  active?: string;
-  logoUrl: string | React.FC<React.SVGProps<SVGSVGElement>>;
-  homeUrl?: string;
-  selectedAgency?: Agency;
-  onAgencyChange?: (agency: Agency) => void;
-  agencies?: Agency[];
-  className?: string;
-}
-
-export const TopNavigation: React.FC<TopNavigationProps> = (props) => {
-  const { isMobile, isTablet } = useMobile();
-  const isSmallScreen = isMobile || isTablet;
-
-  return isSmallScreen ? <MobileNav {...props} /> : <DesktopNav {...props} />;
-};
+import React from "react";
+import { useMobile } from "../../../hooks/useMobile";
+import MobileNav from "./MobileNav";
+import { DesktopNav } from "./DesktopNav";
+
+type Link = {
+  label: string;
+  route: string;
+  isButton?: boolean;
+  disabled?: boolean;
+};
+
+type User = {
+  name: string;
+  agency: string;
+  isAdmin: boolean;
+};
+
+type Agency = {
+  id: number;
+  name: string;
+  localisation: string;
+};
+
+export interface TopNavigationProps {
+  links: Link[];
+  onLinkClick?: (link: Link) => void;
+  onLogin?: () => void;
+  onLogout?: () => void;
+  user?: User;
+  active?: string;
+  logoUrl: string | React.FC<React.SVGProps<SVGSVGElement>>;
+  homeUrl?: string;
+  selectedAgency?: Agency;
+  onAgencyChange?: (agency: Agency) => void;
+  agencies?: Agency[];
+  className?: string;
+}
+
+export const TopNavigation: React.FC<TopNavigationProps> = (props) => {
+  const { isMobile, isTablet } = useMobile();
+  const isSmallScreen = isMobile || isTablet;
+
+  return isSmallScreen ? <MobileNav {...props} /> : <DesktopNav {...props} />;
+};