@agilant/toga-blox 1.0.5

package/src/components/Header/headerContext.tsx

@@ -0,0 +1,125 @@
+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/Header/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Header";
+export * from "./Header.types";

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

@@ -0,0 +1,69 @@
+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<HeroStoryProps> = (args) => <Hero {...args} />;
+
+const Template: StoryFn<typeof StorybookHero> = (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

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,58 @@
+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="xl"
+			color="white"
+			fontFamily="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

@@ -0,0 +1,9 @@
+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/Hero/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Hero";
+export * from "./Hero.types";

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,227 @@
+import { Meta, StoryFn } from "@storybook/react";
+import Text from "../Text/Text";
+import Icon from ".";
+import { IconTypes } from ".";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+	faUser,
+	faCircleInfo,
+	faBell,
+	faCartShopping,
+	faCircleQuestion,
+} from "@fortawesome/free-solid-svg-icons";
+
+export default {
+	title: "Components/Icon",
+	component: Icon,
+	argTypes: {
+		iconColor: {
+			control: "select",
+			options: ["blue", "green", "black"],
+			description: "The icon color.",
+		},
+		backgroundColor: {
+			control: "select",
+			options: ["blue", "green", "grey", "none"],
+			description: "The background color.",
+		},
+		size: {
+			control: "select",
+			options: ["sm", "md", "lg"],
+			description: "The icon size.",
+		},
+		iconBorder: {
+			control: "select",
+			options: ["border", "none"],
+			description: "Whether there is a border around the icon.",
+		},
+		hoverColor: {
+			control: "select",
+			options: ["green", "blue", "black"],
+			description: "The icon and text color on hover.",
+		},
+		hoverBackground: {
+			control: "select",
+			options: ["blue", "green", "grey", "none"],
+			description: "The background color of the icon on hover.",
+		},
+		hoverBorder: {
+			control: "select",
+			options: ["border", "none"],
+			description: "Whether there is a border around the icon on hover.",
+		},
+		limitIndicator: {
+			control: "boolean",
+			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+'.",
+		},
+		indicatorNumber: {
+			control: "text",
+			description:
+				"The value of notifications that is shown in the indicator. Note: if the indicator number is '' or '0', the indicator will not be displayed.",
+		},
+		indicatorSize: {
+			control: "select",
+			options: ["sm", "md", "lg"],
+			description:
+				"The indicator size displaying notifications. Note: if the indicator size is 'lg', it is recommended that the icon size is also set to 'lg'.",
+		},
+		iconLabel: {
+			table: {
+				disable: true,
+			},
+		},
+		onClick: {
+			table: {
+				disable: true,
+			},
+		},
+		to: {
+			table: {
+				disable: true,
+			},
+		},
+		text: {
+			control: "text",
+			description: "The text that is displayed below the icon.",
+		},
+		icon: {
+			table: {
+				disable: true,
+			},
+		},
+		href: {
+			table: {
+				disable: true,
+			},
+		},
+		additionalContainerClasses: {
+			table: {
+				disable: true,
+			},
+		},
+		limitCharacters: {
+			table: {
+				disable: true,
+			},
+			description:
+				"Pass a function to limit the number of characters in the text.",
+		},
+	},
+	tags: ["autodocs"],
+	parameters: {
+		// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+		layout: "centered",
+	},
+} as Meta;
+
+const Template: StoryFn<IconTypes> = (args) => <Icon {...args} />;
+
+export const Profile = Template.bind({});
+Profile.args = {
+	iconColor: "green",
+	iconLabel: "Profile",
+	backgroundColor: "green",
+	size: "sm",
+	icon: <FontAwesomeIcon icon={faUser} />,
+	hoverBackground: "none",
+	hoverColor: "green",
+	indicatorNumber: "0",
+	text: (
+		<Text
+			size="md"
+			color="primary"
+			fontFamily="serif"
+			text="Profile"
+			tag="h2"
+			additionalClasses="p-0"
+		/>
+	),
+	onClick: () => alert("Redirect to profile"),
+};
+
+export const Support = Template.bind({});
+Support.args = {
+	iconColor: "black",
+	iconLabel: "Support",
+	backgroundColor: "grey",
+	size: "sm",
+	icon: <FontAwesomeIcon icon={faCircleInfo} />,
+	hoverBackground: "none",
+	hoverColor: "blue",
+	indicatorNumber: "100",
+	limitIndicator: true,
+	indicatorSize: "lg",
+	text: (
+		<Text
+			size="md"
+			color="primary"
+			fontFamily="serif"
+			text="Support"
+			tag="h2"
+			additionalClasses="p-0"
+		/>
+	),
+	onClick: () => alert("Redirect to support"),
+};
+
+export const Messages = Template.bind({});
+Messages.args = {
+	iconColor: "black",
+	iconLabel: "Messages",
+	backgroundColor: "grey",
+	size: "sm",
+	icon: <FontAwesomeIcon icon={faBell} />,
+	hoverBackground: "none",
+	hoverColor: "blue",
+	indicatorNumber: "12",
+	indicatorSize: "sm",
+	text: (
+		<Text
+			size="md"
+			color="primary"
+			fontFamily="serif"
+			text="Messages"
+			tag="h2"
+			additionalClasses="p-0"
+		/>
+	),
+	onClick: () => alert("Redirect to messages"),
+};
+
+export const Cart = Template.bind({});
+Cart.args = {
+	iconColor: "blue",
+	iconLabel: "Cart",
+	size: "lg",
+	icon: <FontAwesomeIcon icon={faCartShopping} />,
+	hoverBackground: "blue",
+	hoverColor: "none",
+	indicatorNumber: "",
+	indicatorSize: "lg",
+	text: (
+		<Text
+			size="md"
+			color="primary"
+			fontFamily="serif"
+			text="Cart"
+			tag="h2"
+			additionalClasses="p-0"
+		/>
+	),
+	onClick: () => alert("Redirect to cart"),
+};
+
+export const NoText = Template.bind({});
+NoText.args = {
+	iconColor: "blue",
+	iconLabel: "Question",
+	backgroundColor: "grey",
+	size: "lg",
+	icon: <FontAwesomeIcon icon={faCircleQuestion} />,
+	hoverBackground: "grey",
+	hoverColor: "black",
+	iconBorder: "border",
+	indicatorNumber: "100",
+	onClick: () => alert("Redirect to question page"),
+};

package/src/components/Icon/Icon.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, beforeEach, test } from "vitest";
+import Icon from "./Icon";
+import Text from "../Text/Text";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faUser } from "@fortawesome/free-solid-svg-icons";
+
+describe("<Icon /> Profile", () => {
+	beforeEach(() => {
+		render(
+			<Icon
+				iconLabel="Profile"
+				iconColor="green"
+				size="sm"
+				icon={<FontAwesomeIcon icon={faUser} />}
+				hoverBackground="none"
+				hoverColor="green"
+				text={
+					<Text
+						size="md"
+						color="green"
+						fontFamily="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");
+	});
+});