@agilant/toga-blox 1.0.8 → 1.0.9

package/src/components/HamburgerButton/Hamburger.stories.tsx

@@ -0,0 +1,225 @@
+// src/components/HamburgerButton.stories.tsx
+import { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { motion, AnimatePresence } from 'framer-motion';
+import HamburgerButton from './HamburgerButton';
+import { HamburgerButtonProps } from './HamburgerButton.types';
+import GetSupport from '../GetSupport/GetSupport';
+import { getFontAwesomeIcon } from '../../utils/getFontAwesomeIcon';
+import IconButton from '../IconButton';
+
+export default {
+	title: 'Components/HamburgerButton',
+	component: HamburgerButton,
+	parameters: {
+		docs: {
+			description: {
+				component: `
+The **HamburgerButton** component toggles between a hamburger icon and an "X" icon with smooth animations using Framer Motion.
+It overlays on top of everything, and a gray background appears on toggle.
+`,
+			},
+		},
+	},
+	argTypes: {
+		containerClasses: {
+			control: 'none',
+			description: 'CSS classes for styling the container of the button.',
+			defaultValue: 'bg-gray-200',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'bg-gray-200' },
+			},
+		},
+		burgerAriaLabel: {
+			control: 'none',
+			description: 'Aria-label for accessibility to describe the button.',
+			defaultValue: 'Toggle navigation',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'Toggle navigation' },
+			},
+		},
+		burgerExpandedAlert: {
+			control: 'none',
+			description: 'Indicates whether the burger is in the expanded state.',
+			defaultValue: false,
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+		},
+		animateBoolean: {
+			control: 'none',
+			description: 'Determines whether the burger animations should play.',
+			defaultValue: false,
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+		},
+		handleNav: {
+			action: 'clicked',
+			description: 'Action triggered when the button is clicked.',
+			table: {
+				type: { summary: 'function' },
+			},
+		},
+	},
+	tags: ['autodocs'],
+} as Meta<typeof HamburgerButton>;
+
+const Template: StoryFn<HamburgerButtonProps> = (args) => {
+	const [isOpen, setIsOpen] = useState(false);
+
+	const toggleIcon = () => {
+		setIsOpen(!isOpen);
+		args.handleNav();
+	};
+
+	return (
+		<div className="relative h-screen bg-gray-50 overflow-hidden flex items-start justify-end p-4">
+			<AnimatePresence>
+				{isOpen && (
+					<motion.div
+						className="fixed inset-0 bg-white z-30 flex flex-col items-start p-6 space-y-8"
+						initial={{ x: '-100%' }}
+						animate={{ x: '0%' }}
+						exit={{ x: '-100%' }}
+						transition={{ duration: 0.3 }}
+					>
+						<div className="flex items-center space-x-3">
+							<img
+								src="../../../assets/compass-logo.png"
+								alt="Compass Technology"
+								className="h-10"
+							/>
+						</div>
+
+						<div className="flex items-center w-full bg-gray-100 p-1 rounded-full shadow-inner">
+							<input
+								type="text"
+								placeholder="Search for product..."
+								className="flex-grow bg-transparent outline-none px-1 text-gray-700 placeholder-gray-400"
+							/>
+							<button className="bg-teal-600 flex justify-center items-center rounded-full p-3 w-10 h-10 text-white">
+								{getFontAwesomeIcon('search')}
+							</button>
+						</div>
+
+						<div className="flex flex-row justify-start items-center gap-6">
+							<IconButton
+								iconColor="text-black"
+								text="Admin"
+								backgroundColor="bg-gray-200 hover:bg-slate-300"
+								iconSize="h-8 w-8"
+								icon={getFontAwesomeIcon("cog")}
+								notificationCount={0}
+								textClasses="text-black font-serif text-md"
+								onClick={() => alert("Redirect to admin")}
+							/>
+							<IconButton
+								iconColor="text-black"
+								text="Profile"
+								backgroundColor="bg-gray-200 hover:bg-slate-300"
+								iconSize="h-8 w-8"
+								icon={getFontAwesomeIcon("user")}
+								hoverBackgroundColor="hover:bg-gray-300"
+								hoverBorderColor="hover:border-black"
+								notificationCount={34}
+								textClasses="text-black font-serif text-md"
+								onClick={() => alert("Redirect to user")}
+							/>
+							<IconButton
+								iconColor="text-black"
+								text="Notifications"
+								backgroundColor="bg-gray-200 hover:bg-slate-300"
+								iconSize="h-8 w-8"
+								icon={getFontAwesomeIcon("bell")}
+								hoverBackgroundColor="hover:bg-gray-300"
+								hoverBorderColor="hover:border-black"
+								notificationCount={6}
+								textClasses="text-black font-serif text-md"
+								onClick={() => alert("Redirect to notifications")}
+							/>
+							<IconButton
+								iconColor="text-black"
+								text="Cart"
+								backgroundColor="bg-gray-200 hover:bg-slate-300"
+								iconSize="h-8 w-8"
+								icon={getFontAwesomeIcon("shoppingCart")}
+								hoverBackgroundColor="hover:bg-gray-300"
+								hoverBorderColor="hover:border-black"
+								notificationCount={124}
+								textClasses="text-black font-serif text-md"
+								onClick={() => alert("Redirect to cart")}
+							/>
+						</div>
+						<GetSupport
+							icon={getFontAwesomeIcon("phone")}
+							as="a"
+							to="/support"
+							title="Get Support"
+							iconClasses="p-4 bg-gray-200 rounded-full group-hover:bg-slate-300"
+							titleClasses="text-xl font-bold"
+							subTitle="1-800-123-4567"
+							subTitleClasses="text-md text-gray-500"
+							containerClasses="flex items-center gap-4 p-2 bg-white rounded-lg hover:cursor-pointer group"
+						/>
+					</motion.div>
+				)}
+			</AnimatePresence>
+
+			{/* Hamburger Button */}
+			<motion.button
+				onClick={toggleIcon}
+				className="p-2 z-40 relative"
+				aria-label={args.burgerAriaLabel}
+				aria-expanded={isOpen}
+				initial={false}
+				animate={isOpen ? 'open' : 'closed'}
+			>
+				<motion.div className="relative flex items-center justify-center w-8 h-8">
+					<motion.span
+						className="absolute w-full h-0.5 bg-black"
+						variants={{
+							closed: { rotate: 0, y: -8 },
+							open: { rotate: 45, y: 0 },
+						}}
+						transition={{ duration: 0.3 }}
+					/>
+					<motion.span
+						className="absolute w-full h-0.5 bg-black"
+						variants={{
+							closed: { opacity: 1 },
+							open: { opacity: 0 },
+						}}
+						transition={{ duration: 0.2 }}
+					/>
+					<motion.span
+						className="absolute w-full h-0.5 bg-black"
+						variants={{
+							closed: { rotate: 0, y: 8 },
+							open: { rotate: -45, y: 0 },
+						}}
+						transition={{ duration: 0.3 }}
+					/>
+				</motion.div>
+			</motion.button>
+		</div>
+	);
+};
+
+export const ToggleMenu = Template.bind({});
+ToggleMenu.args = {
+	containerClasses: 'bg-gray-100',
+	burgerAriaLabel: 'Toggle navigation',
+};
+ToggleMenu.parameters = {
+	docs: {
+		description: {
+			story:
+				'This story demonstrates the toggle functionality of the HamburgerButton, transitioning between the hamburger and "X" icons on click, with a gray background appearing on toggle.',
+		},
+	},
+};

package/src/components/HamburgerButton/HamburgerButton.tsx

@@ -1,66 +1,47 @@
-import React from "react";
-import { motion} from "framer-motion";
+import React from 'react';
+import { motion } from 'framer-motion';
+import { HamburgerButtonProps } from './HamburgerButton.types';
 
-import { HamburgerButtonTypes } from "./HamburgerButton.types";
-
-
-const HamburgerButton: React.FC<HamburgerButtonTypes> = ({
+const HamburgerButton: React.FC<HamburgerButtonProps> = ({
+	containerClasses,
 	burgerAriaLabel,
 	burgerExpandedAlert,
 	animateBoolean,
 	handleNav,
 }) => {
 	return (
-		<div className="flex min-h-20">
-			<div className="pl-2 mx-auto my-auto hidden max-xl:flex">
-				{
-					<motion.button
-						aria-label={burgerAriaLabel}
-						aria-expanded={burgerExpandedAlert === "True"}
-						data-testid="hamburger-button"
-						initial="hide"
-						animate={animateBoolean ? "show" : "hide"}
-						onClick={handleNav}
-						className="flex flex-col space-y-1 relative z-10 p-2"
-					>
-						<motion.span
-							variants={{
-								hide: {
-									rotate: 0,
-								},
-								show: {
-									rotate: 45,
-									y: 5,
-								},
-							}}
-							className="w-6 bg-black h-px block"
-						></motion.span>
-						<motion.span
-							variants={{
-								hide: {
-									opacity: 1,
-								},
-								show: {
-									opacity: 0,
-								},
-							}}
-							className="w-6 bg-black h-px block"
-						></motion.span>
-						<motion.span
-							variants={{
-								hide: {
-									rotate: 0,
-								},
-								show: {
-									rotate: -45,
-									y: -5,
-								},
-							}}
-							className="w-6 bg-black h-px block"
-						></motion.span>
-					</motion.button>
-				}
-			</div>
+		<div className={`relative ${containerClasses}`}>
+			<motion.button
+				aria-label={burgerAriaLabel}
+				aria-expanded={burgerExpandedAlert === 'True'}
+				initial="hide"
+				animate={animateBoolean ? 'show' : 'hide'}
+				onClick={handleNav}
+				className={`flex flex-col space-y-1 p-2 ${burgerExpandedAlert === 'True' ? 'fixed' : ''}`}
+				tabIndex={0}
+			>
+				<motion.span
+					variants={{
+						hide: { rotate: 0 },
+						show: { rotate: 45, y: 5 },
+					}}
+					className="w-6 bg-black h-px block"
+				/>
+				<motion.span
+					variants={{
+						hide: { opacity: 1 },
+						show: { opacity: 0 },
+					}}
+					className="w-6 bg-black h-px block"
+				/>
+				<motion.span
+					variants={{
+						hide: { rotate: 0 },
+						show: { rotate: -45, y: -5 },
+					}}
+					className="w-6 bg-black h-px block"
+				/>
+			</motion.button>
 		</div>
 	);
 };

package/src/components/HamburgerButton/HamburgerButton.types.tsx

@@ -1,4 +1,5 @@
-export interface HamburgerButtonTypes {
+export interface HamburgerButtonProps {
+	containerClasses: string;
 	burgerAriaLabel: string;
 	burgerExpandedAlert: string;
 	animateBoolean: boolean;

package/src/components/Header/Header.stories.tsx

@@ -6,8 +6,6 @@ import Badge from "../Badge/Badge";
 import Text from "../Text/Text";
 import Input from "../Input/Input";
 import FormButton from "../FormButton/FormButton";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSquarePhone } from "@fortawesome/free-solid-svg-icons";
 import DUMMYICONDATA from "./DUMMYICONDATA.json";
 import { DUMMYCOMPASSNAVDATA, DUMMYNAVDATA } from "../Nav/DUMMYNAVDATA.json";
 import { HeaderTypes } from "./Header.types";
@@ -156,7 +154,7 @@ Default.args = {
 			to="#"
 			hoverColor="blue"
 			borderColor="none"
-			mobileIcon={<FontAwesomeIcon icon={faSquarePhone} />}
+			mobileIcon={getFontAwesomeIcon("square-phone")}
 			mobileIconLabel="Contact Us"
 			onClick={() => alert("Redirect to Contact Us page")}
 			image={
@@ -320,7 +318,7 @@ Compass.args = {
 			color="green"
 			hoverColor="green"
 			borderColor="none"
-			mobileIcon={<FontAwesomeIcon icon={faSquarePhone} />}
+			mobileIcon={getFontAwesomeIcon("square-phone")}
 			mobileIconLabel="Contact Us"
 			onClick={() => alert("Redirect to Contact Us page")}
 			image={
@@ -451,7 +449,7 @@ NoSearchOrBadge.args = {
 			color="green"
 			hoverColor="green"
 			borderColor="none"
-			mobileIcon={<FontAwesomeIcon icon={faSquarePhone} />}
+			mobileIcon={getFontAwesomeIcon("square-phone")}
 			mobileIconLabel="Contact Us"
 			onClick={() => alert("Redirect to Contact Us page")}
 			image={

package/src/components/Header/Header.tsx

@@ -1,16 +1,11 @@
 import React, { useState } from "react";
 import { motion, AnimatePresence, MotionConfig } from "framer-motion";
-
-import {
-	getLogoClasses,
-	getHeaderClasses,
-	getMobileMenuClasses,
-} from "./headerClassNames";
 import { HeaderTypes } from "./Header.types";
 import MobileMenu from "../MobileMenu/MobileMenu";
 import { HeaderProvider } from "./headerContext";
 import HamburgerButton from "../HamburgerButton/HamburgerButton";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+
 const justifyMap = {
 	start: "justify-start",
 	center: "justify-center",
@@ -26,18 +21,18 @@ const Header: React.FC<HeaderTypes> = ({
 	input,
 	icons,
 
-	backgroundColor,
-	bottomBorderColor,
+	backgroundColor = "bg-white",
+	bottomBorderColor = "border-b-2",
 	hasGlass = false,
 
-	logoBorderRadius,
-	logoHoverColor,
+	logoBorderRadius = "rounded-md",
+	logoHoverColor = "hover:bg-gray-200",
 
 	hasAnimatedHamburgerButton = false,
 	hasMobileMenu,
 	mobileLeft = true,
 	mobileRight = false,
-	mobileMenuBackground,
+	mobileMenuBackground = "bg-white",
 
 	iconsData,
 
@@ -56,14 +51,13 @@ const Header: React.FC<HeaderTypes> = ({
 	justifyBadge = "center",
 	justifyIcons = "center",
 
-	logoOrder,
-	navOrder,
-	inputOrder,
-	badgeOrder,
-	iconsOrder,
+	logoOrder = 1,
+	navOrder = 2,
+	inputOrder = 3,
+	badgeOrder = 4,
+	iconsOrder = 5,
 }) => {
-	const [navSideMenuVisibility, setNavSideMenuVisibility] =
-		useState<boolean>(false);
+	const [navSideMenuVisibility, setNavSideMenuVisibility] = useState(false);
 
 	const handleNav = () => {
 		setNavSideMenuVisibility(!navSideMenuVisibility);
@@ -74,20 +68,14 @@ const Header: React.FC<HeaderTypes> = ({
 		: "Select to open menu";
 	const burgerExpandedAlert = navSideMenuVisibility ? "True" : "False";
 
-	if (mobileRight) {
-		mobileLeft = false;
-	} else if (mobileLeft) {
-		mobileRight = false;
-	}
-
-	let logoClasses = getLogoClasses(logoBorderRadius, logoHoverColor);
-	let headerClasses = getHeaderClasses(backgroundColor, bottomBorderColor);
-	let mobileMenuClasses = getMobileMenuClasses(mobileMenuBackground);
+	const logoClasses = `${logoBorderRadius} ${logoHoverColor}`;
+	const headerClasses = `${backgroundColor} ${bottomBorderColor}`;
+	const mobileMenuClasses = mobileMenuBackground;
 
-	justifyNav = justifyMap[justifyNav as keyof typeof justifyMap];
-	justifyInput = justifyMap[justifyInput as keyof typeof justifyMap];
-	justifyBadge = justifyMap[justifyBadge as keyof typeof justifyMap];
-	justifyIcons = justifyMap[justifyIcons as keyof typeof justifyMap];
+	const justifyNavClass = justifyMap[justifyNav as keyof typeof justifyMap];
+	const justifyInputClass = justifyMap[justifyInput as keyof typeof justifyMap];
+	const justifyBadgeClass = justifyMap[justifyBadge as keyof typeof justifyMap];
+	const justifyIconsClass = justifyMap[justifyIcons as keyof typeof justifyMap];
 
 	return (
 		<HeaderProvider
@@ -96,17 +84,15 @@ const Header: React.FC<HeaderTypes> = ({
 			hasMobileBadge={hasMobileBadge}
 			hasMobileSearchBar={hasMobileSearchBar}
 			iconsData={iconsData}
-			hasIcons={false}
-			hasNavItems={false}
-			hasBadge={false}
-			hasSearchBar={false}
-			mobileCloseIcon={null}
+			hasIcons={hasIcons}
+			hasNavItems={hasNavItems}
+			hasBadge={hasBadge}
+			hasSearchBar={hasSearchBar}
+			mobileCloseIcon={getFontAwesomeIcon("X")}
 		>
 			<header
 				data-testid="header"
-				className={`${headerClasses} border-b-2 h-20 z-[1000] top-0 w-full px-2 ${
-					hasGlass ? "glass" : "bg-white"
-				}`}
+				className={`border-b-2 h-20 z-[1000] top-0 w-full px-2 ${headerClasses} ${hasGlass ? "glass" : ""}`}
 			>
 				<div className="flex min-h-20">
 					{/* LEFT MOBILE OPEN ICON */}
@@ -125,11 +111,7 @@ const Header: React.FC<HeaderTypes> = ({
 							) : (
 								<button
 									aria-label={burgerAriaLabel}
-									aria-expanded={
-										burgerExpandedAlert === "True"
-											? true
-											: false
-									}
+									aria-expanded={burgerExpandedAlert === "True" ? true : false}
 									data-testid="hamburger-button"
 									onClick={handleNav}
 									className="flex flex-col space-y-1 relative z-10 p-2"
@@ -143,29 +125,21 @@ const Header: React.FC<HeaderTypes> = ({
 					)}
 
 					{/* LOGO */}
-					<div
-						className={`flex  flex-auto items-center pl-1 order-${logoOrder}`}
-					>
-						<a
-							className={logoClasses}
-							href=""
-							data-testid="header-logo"
-						>
+					<div className={`flex flex-auto items-center pl-1 order-${logoOrder}`}>
+						<a className={logoClasses} href="" data-testid="header-logo">
 							{logo}
 						</a>
 					</div>
 
 					{/* NAV MENUS */}
-					<div
-						className={`flex flex-auto ${justifyNav} max-xl:hidden order-${navOrder}`}
-					>
+					<div className={`flex flex-auto ${justifyNavClass} max-xl:hidden order-${navOrder}`}>
 						{hasNavItems && nav}
 					</div>
 
 					{/* INPUT */}
 					{hasSearchBar && (
 						<div
-							className={`flex flex-auto items-center ${justifyInput} max-xl:hidden order-${inputOrder}`}
+							className={`flex flex-auto items-center ${justifyInputClass} max-xl:hidden order-${inputOrder}`}
 							data-testid="header-placeholder-input"
 						>
 							<div className="2xl:flex w-full [&:has(:focus-visible)]:ring-2">
@@ -176,20 +150,12 @@ const Header: React.FC<HeaderTypes> = ({
 
 					{/* BADGE AND ICONS */}
 					{hasBadge && (
-						<div
-							className={`flex flex-auto items-center ${justifyBadge} max-xl:justify-end order-${badgeOrder}`}
-							data-testid="header-badge"
-						>
+						<div className={`flex flex-auto items-center ${justifyBadgeClass} max-xl:justify-end order-${badgeOrder}`} data-testid="header-badge">
 							<div className="w-fit">{badge}</div>
 						</div>
 					)}
 					{hasIcons && (
-						<div
-							className={`flex flex-auto items-center ${justifyIcons} max-xl:hidden order-${iconsOrder}`}
-							data-testid="header-icons"
-						>
-							{/* FIXME: we need to find a way to keep the type tight for this and still deal with the error */}
-							{/* @ts-ignore */}
+						<div className={`flex flex-auto items-center ${justifyIconsClass} max-xl:hidden order-${iconsOrder}`} data-testid="header-icons">
 							{icons}
 						</div>
 					)}
@@ -210,11 +176,7 @@ const Header: React.FC<HeaderTypes> = ({
 							) : (
 								<button
 									aria-label={burgerAriaLabel}
-									aria-expanded={
-										burgerExpandedAlert === "True"
-											? true
-											: false
-									}
+									aria-expanded={burgerExpandedAlert === "True" ? true : false}
 									data-testid="hamburger-button"
 									onClick={handleNav}
 									className="flex flex-col space-y-1 relative z-10 p-2"
@@ -226,23 +188,17 @@ const Header: React.FC<HeaderTypes> = ({
 							)}
 						</div>
 					)}
+
 					{/* MOBILE MENU */}
 					<AnimatePresence>
 						{hasMobileMenu && navSideMenuVisibility && (
 							<div>
-								<MotionConfig
-									transition={{
-										type: "spring",
-										bounce: 0.1,
-									}}
-								>
+								<MotionConfig transition={{ type: "spring", bounce: 0.1 }}>
 									<motion.div
 										key="mobile-nav"
 										variants={{
 											hide: {
-												x: mobileRight
-													? "100%"
-													: "-100%",
+												x: mobileRight ? "100%" : "-100%",
 												transition: {
 													type: "spring",
 													bounce: 0.1,
@@ -271,9 +227,7 @@ const Header: React.FC<HeaderTypes> = ({
 											nav={nav}
 											input={input}
 											icons={icons}
-											mobileMenuClasses={
-												mobileMenuClasses
-											}
+											mobileMenuClasses={mobileMenuClasses}
 										/>
 									</motion.div>
 								</MotionConfig>

package/src/components/Hero/Hero.stories.tsx

@@ -39,9 +39,8 @@ export default {
 	tags: ["autodocs"],
 } as Meta<HeroStoryTypes>;
 
-// const Template: StoryFn<HeroStoryProps> = (args) => <Hero {...args} />;
 
-const Template: StoryFn<typeof StorybookHero> = (args) => (
+const Template: StoryFn<HeroStoryTypes> = (args) => (
 	<StorybookHero
 		{...args}
 		storybookStyle={{