@julseb-lib/react 0.0.86 → 0.0.88

package/dist/lib/components/Header/Header.tsx

@@ -9,9 +9,9 @@ import { HeaderLogo } from "./HeaderLogo"
 import { StyledHeader, Overlay } from "./styles"
 import type { ILibHeader } from "./types"
 import type {
-    ILibHeaderNav,
-    ILibHeaderBurger,
-    ILibHeaderSearch,
+	ILibHeaderNav,
+	ILibHeaderBurger,
+	ILibHeaderSearch,
 } from "./subtypes"
 
 /**
@@ -56,166 +56,168 @@ import type {
  * />
  */
 export const Header: FC<ILibHeader> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    children,
-    className,
-    logo,
-    variant = "primary",
-    burgerPosition = "right",
-    navDesktopVariant = "right",
-    navMobileVariant = "drawer",
-    search,
-    position = "relative",
-    hideOnScroll,
-    links,
-    nav,
-    enableScrollingOpen,
-    backgroundColor = "primary",
-    textColor = "background",
-    linkColor = "white",
-    ...rest
+	"data-testid": testid,
+	as,
+	ref,
+	children,
+	role = "navigation",
+	className,
+	logo,
+	variant = "primary",
+	burgerPosition = "right",
+	navDesktopVariant = "right",
+	navMobileVariant = "drawer",
+	search,
+	position = "relative",
+	hideOnScroll,
+	links,
+	nav,
+	enableScrollingOpen,
+	backgroundColor = "primary",
+	textColor = "background",
+	linkColor = "white",
+	...rest
 }) => {
-    const [isOpen, setIsOpen] = useState(false)
-
-    const handleOpen = () => {
-        if (!enableScrollingOpen) disableScroll()
-        setIsOpen(true)
-    }
-
-    const handleClose = () => {
-        if (!enableScrollingOpen) enableScroll()
-        setTimeout(() => setIsOpen(false), 10)
-    }
-
-    const isMobile = useMaxWidth(600)
-
-    const logoObj = typeof logo === "object" ? logo : undefined
-
-    const logoHeight = logoObj?.height || 30
-    const burgerHeight = 32
-    const logoTextHeight = 35
-    const heightsArr = [logoHeight, burgerHeight, logoTextHeight].sort()
-    const valueForHeight = heightsArr[heightsArr.length - 1]
-
-    const headerHeight = valueForHeight + 16 * 2
-
-    const [isHidden, setIsHidden] = useState(false)
-    const hidePosition = typeof hideOnScroll === "boolean" ? 400 : hideOnScroll
-
-    useEffect(() => {
-        if (hidePosition) {
-            if (window.pageYOffset >= hidePosition) {
-                setIsHidden(true)
-            } else {
-                setIsHidden(false)
-            }
-
-            window.addEventListener("scroll", () => {
-                if (window.pageYOffset >= hidePosition) {
-                    setIsHidden(true)
-                } else {
-                    setIsHidden(false)
-                }
-            })
-        }
-    }, [hidePosition])
-
-    const burgerRef = useRef<HTMLButtonElement>(null as any)
-
-    useKeyPress("Escape", () => {
-        if (isOpen) handleClose()
-    })
-
-    const burgerProps: ILibHeaderBurger & {
-        ref: Ref<HTMLButtonElement>
-    } = {
-        "data-testid": testid,
-        className,
-        isOpen,
-        navMobileVariant,
-        variant,
-        ref: burgerRef,
-        handleOpen,
-        handleClose,
-    }
-
-    const navProps: ILibHeaderNav = {
-        "data-testid": testid,
-        className,
-        search,
-        isOpen,
-        handleClose,
-        links,
-        children,
-        headerHeight,
-        variant,
-        navMobileVariant,
-        burgerPosition,
-        burgerRef,
-    }
-
-    const searchProps: ILibHeaderSearch = {
-        "data-testid": testid,
-        className,
-        search,
-        handleClose,
-    }
-
-    return (
-        <StyledHeader
-            data-testid={testid}
-            ref={ref}
-            as={as}
-            className={classNames(
-                className,
-                { Hidden: isHidden },
-                { Open: isOpen }
-            )}
-            $burgerPosition={burgerPosition}
-            $headerHeight={headerHeight}
-            $position={position}
-            $variant={variant}
-            $backgroundColor={backgroundColor}
-            $linkColor={linkColor}
-            $textColor={textColor}
-            {...rest}
-        >
-            {burgerPosition === "left" && <HeaderBurger {...burgerProps} />}
-
-            <HeaderLogo
-                data-testid={testid}
-                className={className}
-                logo={logo}
-                isOpen={isOpen}
-            >
-                {typeof logo === "object" ? logo.text : logo}
-            </HeaderLogo>
-
-            {navDesktopVariant === "left" && <HeaderNav {...navProps} />}
-
-            {!isMobile && navDesktopVariant === "right" && (
-                <HeaderSearch {...searchProps} />
-            )}
-
-            {burgerPosition === "right" && <HeaderBurger {...burgerProps} />}
-
-            {navDesktopVariant === "right" && <HeaderNav {...navProps} />}
-
-            {isMobile && navMobileVariant === "drawer" && (
-                <Overlay
-                    onClick={() => setIsOpen(false)}
-                    className={classNames(
-                        { HeaderOverlay: className },
-                        { Visible: isOpen }
-                    )}
-                />
-            )}
-
-            {!isMobile && navDesktopVariant === "left" && (
-                <HeaderSearch {...searchProps} />
-            )}
-        </StyledHeader>
-    )
+	const [isOpen, setIsOpen] = useState(false)
+
+	const handleOpen = () => {
+		if (!enableScrollingOpen) disableScroll()
+		setIsOpen(true)
+	}
+
+	const handleClose = () => {
+		if (!enableScrollingOpen) enableScroll()
+		setTimeout(() => setIsOpen(false), 10)
+	}
+
+	const isMobile = useMaxWidth(600)
+
+	const logoObj = typeof logo === "object" ? logo : undefined
+
+	const logoHeight = logoObj?.height || 30
+	const burgerHeight = 32
+	const logoTextHeight = 35
+	const heightsArr = [logoHeight, burgerHeight, logoTextHeight].sort()
+	const valueForHeight = heightsArr[heightsArr.length - 1]
+
+	const headerHeight = valueForHeight + 16 * 2
+
+	const [isHidden, setIsHidden] = useState(false)
+	const hidePosition = typeof hideOnScroll === "boolean" ? 400 : hideOnScroll
+
+	useEffect(() => {
+		if (hidePosition) {
+			if (window.pageYOffset >= hidePosition) {
+				setIsHidden(true)
+			} else {
+				setIsHidden(false)
+			}
+
+			window.addEventListener("scroll", () => {
+				if (window.pageYOffset >= hidePosition) {
+					setIsHidden(true)
+				} else {
+					setIsHidden(false)
+				}
+			})
+		}
+	}, [hidePosition])
+
+	const burgerRef = useRef<HTMLButtonElement>(null as any)
+
+	useKeyPress("Escape", () => {
+		if (isOpen) handleClose()
+	})
+
+	const burgerProps: ILibHeaderBurger & {
+		ref: Ref<HTMLButtonElement>
+	} = {
+		"data-testid": testid,
+		className,
+		isOpen,
+		navMobileVariant,
+		variant,
+		ref: burgerRef,
+		handleOpen,
+		handleClose,
+	}
+
+	const navProps: ILibHeaderNav = {
+		"data-testid": testid,
+		className,
+		search,
+		isOpen,
+		handleClose,
+		links,
+		children,
+		headerHeight,
+		variant,
+		navMobileVariant,
+		burgerPosition,
+		burgerRef,
+	}
+
+	const searchProps: ILibHeaderSearch = {
+		"data-testid": testid,
+		className,
+		search,
+		handleClose,
+	}
+
+	return (
+		<StyledHeader
+			data-testid={testid}
+			ref={ref}
+			as={as}
+			className={classNames(
+				className,
+				{ Hidden: isHidden },
+				{ Open: isOpen }
+			)}
+			role={role}
+			$burgerPosition={burgerPosition}
+			$headerHeight={headerHeight}
+			$position={position}
+			$variant={variant}
+			$backgroundColor={backgroundColor}
+			$linkColor={linkColor}
+			$textColor={textColor}
+			{...rest}
+		>
+			{burgerPosition === "left" && <HeaderBurger {...burgerProps} />}
+
+			<HeaderLogo
+				data-testid={testid}
+				className={className}
+				logo={logo}
+				isOpen={isOpen}
+			>
+				{typeof logo === "object" ? logo.text : logo}
+			</HeaderLogo>
+
+			{navDesktopVariant === "left" && <HeaderNav {...navProps} />}
+
+			{!isMobile && navDesktopVariant === "right" && (
+				<HeaderSearch {...searchProps} />
+			)}
+
+			{burgerPosition === "right" && <HeaderBurger {...burgerProps} />}
+
+			{navDesktopVariant === "right" && <HeaderNav {...navProps} />}
+
+			{isMobile && navMobileVariant === "drawer" && (
+				<Overlay
+					onClick={() => setIsOpen(false)}
+					className={classNames(
+						{ HeaderOverlay: className },
+						{ Visible: isOpen }
+					)}
+				/>
+			)}
+
+			{!isMobile && navDesktopVariant === "left" && (
+				<HeaderSearch {...searchProps} />
+			)}
+		</StyledHeader>
+	)
 }

package/dist/lib/components/Header/HeaderBurger.tsx

@@ -4,48 +4,49 @@ import { StyledHeaderBurger } from "./styles"
 import type { ILibHeaderBurger } from "./subtypes"
 
 export const HeaderBurger: FC<ILibHeaderBurger> = ({
-    "data-testid": testid,
-    ref,
-    className,
-    isOpen,
-    navMobileVariant,
-    variant,
-    burgerColor,
-    handleOpen,
-    handleClose,
+	"data-testid": testid,
+	ref,
+	className,
+	isOpen,
+	navMobileVariant,
+	variant,
+	burgerColor,
+	handleOpen,
+	handleClose,
 }) => {
-    const getBurgerColor = (): LibColorsHover => {
-        if (burgerColor) {
-            if (typeof burgerColor === "string") return burgerColor
+	const getBurgerColor = (): LibColorsHover => {
+		if (burgerColor) {
+			if (typeof burgerColor === "string") return burgerColor
 
-            return isOpen ? burgerColor.open : burgerColor.closed
-        }
+			return isOpen ? burgerColor.open : burgerColor.closed
+		}
 
-        if (
-            (navMobileVariant === "drawer" && isOpen) ||
-            variant === "primary" ||
-            navMobileVariant === "full" ||
-            (navMobileVariant === "top" && isOpen && variant === "transparent")
-        ) {
-            return "white"
-        }
+		if (
+			(navMobileVariant === "drawer" && isOpen) ||
+			variant === "primary" ||
+			navMobileVariant === "full" ||
+			(navMobileVariant === "top" && isOpen && variant === "transparent")
+		) {
+			return "white"
+		}
 
-        return "primary"
-    }
+		return "primary"
+	}
 
-    return (
-        <StyledHeaderBurger
-            data-testid={testid && `${testid}.HeaderBurger`}
-            ref={ref}
-            className={className && "HeaderBurger"}
-            isOpen={isOpen}
-            onClick={() => {
-                if (isOpen) handleClose()
-                else handleOpen()
-            }}
-            width={32}
-            height={24}
-            color={getBurgerColor()}
-        />
-    )
+	return (
+		<StyledHeaderBurger
+			data-testid={testid && `${testid}.HeaderBurger`}
+			ref={ref}
+			role="button"
+			className={className && "HeaderBurger"}
+			isOpen={isOpen}
+			onClick={() => {
+				if (isOpen) handleClose()
+				else handleOpen()
+			}}
+			width={32}
+			height={24}
+			color={getBurgerColor()}
+		/>
+	)
 }

package/dist/lib/components/Header/HeaderLogo.tsx

@@ -4,61 +4,65 @@ import { Logo, LogoImg } from "./styles"
 import type { ILibHeaderLogo } from "./subtypes"
 
 export const HeaderLogo: FC<ILibHeaderLogo> = ({
-    "data-testid": testid,
-    className,
-    logo,
-    children,
-    isOpen,
+	"data-testid": testid,
+	className,
+	logo,
+	children,
+	isOpen,
 }) => {
-    const {
-        to = "/",
-        href,
-        img,
-        imgOpen,
-        alt = "Logo",
-        width = 100,
-        height = 30,
-    } = logo as any
+	const {
+		to = "/",
+		href,
+		img,
+		imgOpen,
+		alt = "Logo",
+		width = 100,
+		height = 30,
+	} = logo as any
 
-    if (img) {
-        const imgProps = {
-            "data-testid": testid && `${testid}.HeaderLogo.Img`,
-            className: className && "HeaderLogoImg",
-            src: imgOpen && isOpen ? imgOpen : img,
-            alt,
-            width,
-            height,
-        }
+	if (img) {
+		const imgProps = {
+			"data-testid": testid && `${testid}.HeaderLogo.Img`,
+			className: className && "HeaderLogoImg",
+			src: imgOpen && isOpen ? imgOpen : img,
+			alt,
+			width,
+			height,
+		}
 
-        return href ? (
-            <a
-                href={href}
-                data-testid={testid && `${testid}.HeaderLogo`}
-                className={className && "HeaderLogo"}
-            >
-                <LogoImg {...imgProps} />
-            </a>
-        ) : (
-            <Link
-                data-testid={testid && `${testid}.HeaderLogo`}
-                className={className && "HeaderLogo"}
-                to={to}
-            >
-                <LogoImg {...imgProps} />
-            </Link>
-        )
-    }
+		return href ? (
+			<a
+				href={href}
+				data-testid={testid && `${testid}.HeaderLogo`}
+				className={className && "HeaderLogo"}
+				role="link"
+			>
+				<LogoImg {...imgProps} />
+			</a>
+		) : (
+			<Link
+				data-testid={testid && `${testid}.HeaderLogo`}
+				className={className && "HeaderLogo"}
+				to={to}
+				role="link"
+			>
+				<LogoImg {...imgProps} />
+			</Link>
+		)
+	}
 
-    return (
-        <Logo
-            data-testid={testid && `${testid}.HeaderLogo`}
-            as={href ? "a" : Link}
-            className={className && "HeaderLogo"}
-            to={to}
-            href={href}
-            translate="no"
-        >
-            {children}
-        </Logo>
-    )
+	return (
+		<Logo
+			data-testid={testid && `${testid}.HeaderLogo`}
+			as={href ? "a" : Link}
+			className={className && "HeaderLogo"}
+			to={to}
+			href={href}
+			translate="no"
+			role="link"
+			aria-label="Header Logo"
+		>
+			{children}
+		</Logo>
+	)
 }