@agilant/toga-blox 1.0.9 → 1.0.11

package/src/components/Header/headerContext.tsx

@@ -1,125 +0,0 @@
-import { createContext, useContext, useState } from "react";
-import { HeaderTypes } from "./Header.types";
-
-type ContextValue = {
-	iconsData: HeaderTypes["iconsData"];
-	setIconsData: (iconsData: HeaderTypes["iconsData"]) => void;
-	mobileCloseIcon: JSX.Element | null;
-	setMobileCloseIcon: (mobileCloseIcon: JSX.Element) => void;
-
-	hasIcons: boolean;
-	setHasIcons: (hasNavItems: boolean) => void;
-	hasNavItems: boolean;
-	setHasNavItems: (hasNavItems: boolean) => void;
-	hasBadge: boolean;
-	setHasBadge: (hasBadge: boolean) => void;
-	hasSearchBar: boolean;
-	setHasSearchBar: (hasSearchBar: boolean) => void;
-
-	hasMobileIcons: boolean;
-	setHasMobileIcons: (hasMobileIcons: boolean) => void;
-	hasMobileNavItems: boolean;
-	setHasMobileNavItems: (hasMobileNavItems: boolean) => void;
-	hasMobileBadge: boolean;
-	setHasMobileBadge: (hasMobileBadge: boolean) => void;
-	hasMobileSearchBar: boolean;
-	setHasMobileSearchBar: (hasMobileSearchBar: boolean) => void;
-};
-
-type HeaderProviderProps = {
-	children: React.ReactNode;
-	hasIcons: boolean;
-	hasNavItems: boolean;
-	hasBadge: boolean;
-	hasSearchBar: boolean;
-	hasMobileIcons: boolean;
-	hasMobileNavItems: boolean;
-	hasMobileBadge: boolean;
-	hasMobileSearchBar: boolean;
-	iconsData: HeaderTypes["iconsData"];
-	mobileCloseIcon: JSX.Element | null;
-};
-
-const HeaderContext = createContext<ContextValue | undefined>(undefined);
-
-export const HeaderProvider = ({
-	children,
-	hasIcons,
-	hasNavItems,
-	hasBadge,
-	hasSearchBar,
-	hasMobileIcons,
-	hasMobileNavItems,
-	hasMobileBadge,
-	hasMobileSearchBar,
-	iconsData,
-	mobileCloseIcon,
-}: HeaderProviderProps) => {
-	const [hasIconsState, setHasIcons] = useState<boolean>(hasIcons);
-	const [hasNavItemsState, setHasNavItems] = useState<boolean>(hasNavItems);
-	const [hasBadgeState, setHasBadge] = useState<boolean>(hasBadge);
-	const [hasSearchBarState, setHasSearchBar] =
-		useState<boolean>(hasSearchBar);
-
-	const [hasMobileIconsState, setHasMobileIcons] =
-		useState<boolean>(hasMobileIcons);
-	const [hasMobileNavItemsState, setHasMobileNavItems] =
-		useState<boolean>(hasMobileNavItems);
-	const [hasMobileBadgeState, setHasMobileBadge] =
-		useState<boolean>(hasMobileBadge);
-	const [hasMobileSearchBarState, setHasMobileSearchBar] =
-		useState<boolean>(hasMobileSearchBar);
-	const [iconsDataState, setIconsData] =
-		useState<HeaderTypes["iconsData"]>(iconsData);
-
-	const [mobileCloseIconState, setMobileCloseIcon] =
-		useState<JSX.Element | null>(mobileCloseIcon);
-
-	return (
-		<HeaderContext.Provider
-			value={{
-				hasIcons: hasIconsState,
-				setHasIcons,
-
-				hasNavItems: hasNavItemsState,
-				setHasNavItems,
-
-				hasBadge: hasBadgeState,
-				setHasBadge,
-
-				hasSearchBar: hasSearchBarState,
-				setHasSearchBar,
-
-				hasMobileIcons: hasMobileIconsState,
-				setHasMobileIcons,
-
-				hasMobileNavItems: hasMobileNavItemsState,
-				setHasMobileNavItems,
-
-				hasMobileBadge: hasMobileBadgeState,
-				setHasMobileBadge,
-
-				hasMobileSearchBar: hasMobileSearchBarState,
-				setHasMobileSearchBar,
-
-				iconsData: iconsDataState,
-				setIconsData,
-				mobileCloseIcon: mobileCloseIconState,
-				setMobileCloseIcon,
-
-			}}
-		>
-			{children}
-		</HeaderContext.Provider>
-	);
-};
-
-export function useHeaderContext() {
-	const context = useContext(HeaderContext);
-	if (!context) {
-		throw new Error(
-			"useHeaderContext must be used within a HeaderProvider"
-		);
-	}
-	return context;
-}

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

@@ -1,68 +0,0 @@
-import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
-import Hero, { HeroTypes } from ".";
-import { withStoryBook } from "../../hoc";
-
-interface HeroStoryTypes extends HeroTypes {
-	position: "left" | "right" | "center";
-	background: string;
-	text: React.ReactNode;
-}
-
-const StorybookHero = withStoryBook(Hero);
-
-export default {
-	title: "Components/Hero",
-	argTypes: {
-		textAlignment: {
-			control: "select",
-			options: ["left", "right", "center"],
-			description:
-				"The position of the text in relation to the background horizontally.",
-		},
-		textVerticalAxis: {
-			control: "select",
-			options: ["items-start", "items-end", "items-center"],
-			description:
-				"The position of the text in relation to the background vertically.",
-		},
-		background: {
-			control: "color",
-			description:
-				"The background color.  Set by Tailwind CSS in Applications",
-		},
-		text: {
-			control: "text",
-			description: "The text displayed.",
-		},
-	},
-	tags: ["autodocs"],
-} as Meta<HeroStoryTypes>;
-
-
-const Template: StoryFn<HeroStoryTypes> = (args) => (
-	<StorybookHero
-		{...args}
-		storybookStyle={{
-			backgroundColor: args.background,
-		}}
-	/>
-);
-
-export const HeroColor = Template.bind({});
-HeroColor.args = {
-	textAlignment: "right",
-	background: "color",
-};
-
-export const HeroGradient = Template.bind({});
-HeroGradient.args = {
-	textAlignment: "right",
-	background: "gradient",
-};
-
-export const HeroDecorativeImage = Template.bind({});
-HeroDecorativeImage.args = {
-	textAlignment: "right",
-	background: "image",
-};

package/src/components/Hero/Hero.test.tsx

@@ -1,109 +0,0 @@
-import "../../../dist/main.css";
-import { render, screen } from "@testing-library/react";
-import { describe, test, expect, beforeEach } from "vitest";
-
-import Hero from "./Hero";
-import Text from "../Text/Text";
-
-describe("<Hero /> with color background", () => {
-	beforeEach(() => {
-		render(
-			<Hero
-				textAlignment="center"
-				background="color"
-				text={
-					<Text
-						size="xl"
-						color="primary"
-						fontFamily="serif"
-						text="This is a test heading!"
-						tag="h2"
-					/>
-				}
-			/>
-		);
-	});
-
-	test("renders Text component", () => {
-		expect(screen.getByTestId("hero")).toBeInTheDocument();
-	});
-
-	test("contains correct text from Text component", () => {
-		expect(screen.getByTestId("hero")).toHaveTextContent(
-			"This is a test heading!"
-		);
-	});
-	test("renders correct background color class", () => {
-		const heroElement = screen.getByTestId("hero");
-		expect(heroElement).toHaveClass("bg-blue-800");
-	});
-
-	test("renders correct position of Text component", () => {
-		const heroElement = screen.getByTestId("hero");
-		expect(heroElement).toHaveClass("justify-center");
-	});
-	test("renders Text component as correct heading type", () => {
-		const textComponent = screen.getByRole("heading", {
-			name: "This is a test heading!",
-			level: 2,
-		});
-		expect(textComponent).toBeInTheDocument();
-		expect(textComponent.tagName).toBe("H2");
-	});
-});
-
-describe("<Hero /> with Image background", () => {
-	beforeEach(() => {
-		render(
-			<Hero
-				textAlignment="center"
-				background="image"
-				text={
-					<Text
-						size="xl"
-						color="primary"
-						fontFamily="serif"
-						text="This is a test heading!"
-						tag="h1"
-					/>
-				}
-			/>
-		);
-	});
-
-	test("renders hero image component", () => {
-		expect(screen.getByTestId("image-background-hero")).toBeInTheDocument();
-	});
-
-	test("contains correct text from Text component", () => {
-		expect(screen.getByTestId("image-background-hero")).toHaveTextContent(
-			"This is a test heading!"
-		);
-	});
-
-	test("renders correct background image", () => {
-		const heroImageElement = screen.getByTestId("image-background-hero");
-		expect(heroImageElement.style.backgroundImage).toContain(
-			"heroImage.png"
-		);
-	});
-
-	// FIXME:
-	// test("renders correct background image alt text", () => {
-	// 	expect(screen.getByTestId("image-background-hero")).toHaveAttribute(
-	// 		"aria-label",
-	// 		""
-	// 	);
-	// });
-
-	test("renders correct position of Text component", () => {
-		const heroElement = screen.getByTestId("image-background-hero");
-		expect(heroElement).toHaveClass("justify-center");
-	});
-
-	test("renders correct element type of Text component", () => {
-		expect(
-			screen.getByRole("heading", { name: "This is a test heading!" })
-		).toBeInTheDocument();
-	});
-});

package/src/components/Hero/Hero.tsx

@@ -1,58 +0,0 @@
-import React from "react";
-import Text from "../Text/Text";
-import Image from "../Image/Image";
-import { HeroTypes } from ".";
-
-const alignmentClassesMap = {
-	left: "justify-start text-left",
-	right: "justify-end text-right",
-	center: "justify-center text-center",
-};
-
-const backgroundClassesMap: { [key: string]: string } = {
-	color: "bg-blue-800",
-	gradient: "bg-gradient-to-r from-cyan-700 to-blue-900",
-};
-
-const Hero: React.FC<HeroTypes> = ({
-	src = "../../../assets/heroImage.png",
-	text = (
-		<Text
-			size="text-xl"
-			color="text-white"
-			fontFamily="font-serif"
-			text="This is a test heading!"
-			tag="h1"
-		/>
-	),
-	textAlignment,
-	background = "color",
-	textVerticalAxis = "items-center",
-}) => {
-	let heroAlignment = alignmentClassesMap[textAlignment];
-	const heroBackground = backgroundClassesMap[background] || "";
-
-	if (background === "image") {
-		heroAlignment = `flex ${alignmentClassesMap[textAlignment]} ${textVerticalAxis}`;
-	}
-
-	return background === "image" ? (
-		<Image
-			src={src}
-			alt=""
-			background={true}
-			additionalClasses={heroAlignment}
-		>
-			<span className="text-white">{text}</span>
-		</Image>
-	) : (
-		<div
-			data-testid="hero"
-			className={`w-full min-h-72 p-4 flex ${heroAlignment} ${heroBackground} ${textVerticalAxis} text-white `}
-		>
-			{text}
-		</div>
-	);
-};
-
-export default Hero;

package/src/components/Hero/Hero.types.ts

@@ -1,9 +0,0 @@
-import React from "react";
-
-export interface HeroTypes {
-	src?: string;
-	background?: string;
-	text?: React.ReactNode;
-	textAlignment: "left" | "right" | "center";
-	textVerticalAxis?: "items-start" | "items-end" | "items-center";
-}

package/src/components/IconButton/IconButton.stories.tsx

@@ -1,196 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import IconButton from "./IconButton";
-import { IconButtonTypes } from "./IconButton.types";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
-import { JSX } from "react/jsx-runtime";
-
-export default {
-	title: "Components/IconButton",
-	component: IconButton,
-	argTypes: {
-		iconSize: {
-			control: "none",
-			description: "Tailwind classes for the icon size. Example: `h-6 w-6`",
-		},
-		iconColor: {
-			control: "none",
-			description: "Tailwind classes for the icon color. Example: `text-blue-500`",
-		},
-		backgroundColor: {
-			control: "none",
-			description: "Tailwind classes for the background color. Example: `bg-gray-200`",
-		},
-		borderColor: {
-			control: "none",
-			description: "Tailwind classes for the border color. Example: `border-gray-300`",
-		},
-		iconLabel: {
-			control: "none",
-			description: "The label for the icon. Example: `Profile`",
-		},
-		icon: {
-			control: "none",
-			description: "The icon to be displayed. Example: `user-cog`",
-		},
-		size: {
-			control: "none",
-			description: "The size of the icon. Example: `xl`",
-		},
-		iconBorder: {
-			control: "none",
-			description: "Tailwind classes for the icon border. Example: `border-2`",
-		},
-		to: {
-			control: "none",
-			description: "The URL to redirect to when the icon is clicked. Example: `/admin`",
-		},
-		href: {
-			control: "none",
-			description: "The URL to redirect to when the icon is clicked. Example: `/admin`",
-		},
-		hoverBorderColor: {
-			control: "none",
-			description: "Tailwind classes for the border color on hover. Example: `hover:border-blue-500`",
-		},
-		hoverColor: {
-			control: "none",
-			description: "Tailwind classes for the color on hover. Example: `hover:text-blue-500`",
-		},
-		indicatorSize: {
-			control: "none",
-			description: "Tailwind classes for the indicator size. Example: `h-4 w-4`",
-		},
-		indicatorNumber: {
-			control: "none",
-			description: "The number to be displayed inside the indicator. Example: `12`",
-		},
-		hoverBorder: {
-			control: "none",
-			description: "Tailwind classes for the border on hover. Example: `hover:border-2`",
-		},
-		limitCharacters: {
-			control: "none",
-			description: "Flag to indicate if the text should be limited to 2 characters. If set to true and the text is greater than 99, the text will display '99+'.",
-		},
-		hoverBackgroundColor: {
-			control: "none",
-			description: "Tailwind classes for the background on hover. Example: `hover:bg-gray-300`",
-		},
-		hoverBackground: {
-			control: "none",
-			description: "Tailwind classes for the background color on hover. Example: `hover:bg-gray-300`",
-		},
-		hasNotification: {
-			control: "none",
-			description: "Flag to indicate if the button has a notification badge.",
-		},
-		notificationTextColor: {
-			control: "none",
-			description: "Tailwind classes for the notification text color. Example: `text-white`",
-		},
-		notificationBgColor: {
-			control: "none",
-			description: "Tailwind classes for the notification background color. Example: `bg-red-500`",
-		},
-		notificationCount: {
-			control: "none",
-			description: "The number to be displayed inside the notification badge. Example: `12`",
-		},
-		text: {
-			control: "none",
-			description: "The text to be displayed below the button. Example: `Profile`",
-		},
-		textClasses: {
-			control: "none",
-			description: "Tailwind classes to style the text. Example: `text-sm text-black`",
-		},
-		onClick: {
-			table: {
-				disable: true,
-			},
-			control: "none",
-			description: "Callback function to handle click events. Example: `() => alert('Clicked!')`",
-		},
-		role: {
-			control: "none",
-			description: "ARIA role for accessibility. Example: `button`",
-		},
-		additionalContainerClasses: {
-			control: "none",
-			description: "Additional Tailwind classes for the container. Example: `p-4`",
-		},
-		limitIndicator: {
-			control: "none",
-			description:
-				"Whether the indicator number should be limited to 2 characters. If set to true and the number is greater than 99, the indicator will display '99+'.",
-		},
-	},
-	tags: ["autodocs"],
-	parameters: {
-		layout: "centered",
-	},
-} as Meta;
-
-const Template: StoryFn<IconButtonTypes> = (args) => <IconButton {...args} />;
-
-export const AdminButton = Template.bind({});
-AdminButton.args = {
-	iconColor: "text-black",
-	text: "Admin",
-	backgroundColor: "bg-gray-200",
-	iconSize: "h-8 w-8",
-	icon: getFontAwesomeIcon("cog"),
-	hoverBackgroundColor: "hover:bg-gray-300",
-	hoverBorderColor: "hover:border-black",
-	notificationCount: 0,
-	textClasses: "text-black font-serif text-md",
-	onClick: () => alert("Redirect to admin"),
-};
-
-export const AccountButton = Template.bind({});
-AccountButton.args = {
-	iconColor: "text-black",
-	text: "Account",
-	backgroundColor: "bg-gray-200",
-	iconSize: "h-8 w-8",
-	icon: getFontAwesomeIcon("user"),
-	hoverBackgroundColor: "hover:bg-gray-300",
-	hoverBorderColor: "hover:border-black",
-	notificationCount: 0,
-	textClasses: "text-black font-serif text-md",
-	onClick: () => alert("Redirect to account"),
-};
-
-export const AlertsButton = Template.bind({});
-AlertsButton.args = {
-	iconColor: "text-black",
-	text: "Alerts",
-	backgroundColor: "bg-gray-200",
-	iconSize: "h-8 w-8",
-	icon: getFontAwesomeIcon("bell"),
-	hoverBackgroundColor: "hover:bg-gray-300",
-	hoverBorderColor: "hover:border-black",
-	hasNotification: true,
-	notificationTextClasses: "text-white",
-	notificationBgColor: "bg-green-600",
-	notificationCount: 123,
-	textClasses: "text-black font-serif text-md",
-	onClick: () => alert("Redirect to alerts"),
-};
-
-export const CartButton = Template.bind({});
-CartButton.args = {
-	iconColor: "text-black",
-	text: "Cart",
-	backgroundColor: "bg-gray-200",
-	iconSize: "h-8 w-8",
-	icon: getFontAwesomeIcon("shop"),
-	hoverBackgroundColor: "hover:bg-gray-300",
-	hoverBorderColor: "hover:border-black",
-	hasNotification: true,
-	notificationTextClasses: "text-white",
-	notificationBgColor: "bg-green-600",
-	notificationCount: 3,
-	textClasses: "text-black font-serif text-md",
-	onClick: () => alert("Redirect to cart"),
-};

package/src/components/IconButton/IconButton.test.tsx

@@ -1,52 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, beforeEach, test } from "vitest";
-import Icon from "./IconButton";
-import Text from "../Text/Text";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
-
-describe("<Icon /> Profile", () => {
-	beforeEach(() => {
-		render(
-			<Icon
-				iconLabel="Profile"
-				iconColor="green"
-				size="sm"
-				icon={getFontAwesomeIcon("user")}
-				hoverBackground="none"
-				hoverColor="green"
-				text={
-					<Text
-						size="text-md"
-						color="text-green"
-						fontFamily="font-serif"
-						text="Profile"
-						tag="h2"
-					/>
-				}
-			/>
-		);
-	});
-
-	test("renders correctly", () => {
-		expect(screen.getByTestId("icon")).toBeInTheDocument();
-	});
-
-	test("has correct text", () => {
-		expect(screen.getByTestId("text")).toHaveTextContent("Profile");
-	});
-
-	test("has correct icon", () => {
-		expect(screen.getByTestId("user")).toBeInTheDocument();
-	});
-
-	// The following style-based tests may need to be adapted depending on how styles are applied in your test environment
-	test("has correct color", () => {
-		const iconElement = screen.getByTestId("icon");
-		expect(iconElement).toHaveClass("text-teal-800");
-	});
-
-	test("has correct icon size", () => {
-		const iconElement = screen.getByTestId("user");
-		expect(iconElement).toHaveClass("text-md");
-	});
-});

package/src/components/IconButton/IconButton.tsx

@@ -1,76 +0,0 @@
-import React from "react";
-import { IconButtonTypes } from "./IconButton.types";
-import Text from "../Text/Text";
-
-const Icon: React.FC<IconButtonTypes> = ({
-	onClick = () => { },
-	role,
-	icon,
-	iconSize,
-	iconColor,
-	hasNotification,
-	notificationTextClasses,
-	notificationBgColor,
-	notificationCount,
-	text,
-	textSize,
-	textColor,
-	textFontFamily,
-	textClasses,
-	textContainerClasses,
-	hoverBorderColor,
-	hoverBackgroundColor,
-	backgroundColor,
-	borderColor,
-	additionalContainerClasses,
-}) => {
-	const displayNotificationCount = notificationCount && notificationCount > 99 ? "99+" : notificationCount;
-
-	const notificationClasses = `absolute -top-1 h-18px rounded-full text-11px font-semibold leading-[18px] flex items-center justify-center ${notificationTextClasses} ${notificationBgColor} ${notificationCount && notificationCount > 99
-		? "w-26px -right-4 "
-		: "w-18px -right-2 "
-		}`;
-
-	const iconClasses = `flex items-center justify-center ${iconSize} ${iconColor}`;
-	const iconContainerClasses = `relative flex items-center justify-center h-42px w-42px rounded-full border-1 ${borderColor} ${backgroundColor} group-hover:${hoverBorderColor} group-hover:${hoverBackgroundColor}`;
-
-	const ariaLabel = `${text} ${hasNotification ? `with ${notificationCount} notifications` : ""}`;
-
-	const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-		if (e.key === "Enter" || e.key === " ") {
-			onClick(e as unknown as React.MouseEvent<HTMLDivElement>);
-		}
-	};
-
-	return (
-		<div
-			className={`flex flex-col items-center justify-center group ${additionalContainerClasses}`}
-			onClick={(e) => onClick(e as React.MouseEvent<HTMLDivElement>)}
-			role={role}
-			tabIndex={0}
-			onKeyDown={(e) => handleKeyDown(e)}
-			aria-label={ariaLabel}
-		>
-			<div className={iconContainerClasses}>
-				<div className={iconClasses}>{icon}</div>
-				{hasNotification && notificationCount && (
-					<span className={notificationClasses}>
-						{displayNotificationCount}
-					</span>
-				)}
-			</div>
-			<div aria-hidden={true} className={textContainerClasses}>
-				<Text
-					size={textSize}
-					color={textColor}
-					fontFamily={textFontFamily}
-					text={text}
-					tag="p"
-					additionalClasses={textClasses}
-				/>
-			</div>
-		</div>
-	);
-};
-
-export default Icon;