@agilant/toga-blox 1.0.5

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,208 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { IconTypes } from "./Icon.types";
+import {
+	getBorderClasses,
+	getColorClasses,
+	getHoverClasses,
+	getIndicatorSizeClasses,
+	getSizeClasses,
+	getIndicatorColorClasses,
+	getBackgroundColorClasses,
+} from "./iconClassNames";
+
+const containerSizeMap = {
+	xs: "size-8",
+	sm: "size-8",
+	md: "size-10",
+	lg: "size-10",
+};
+
+const Icon: React.FC<IconTypes> = ({
+	onClick,
+	text,
+	iconLabel,
+	iconColor = "black",
+	backgroundColor = "none",
+	size = "md",
+	icon,
+	iconBorder = "none",
+	additionalContainerClasses,
+	to,
+	href,
+	hoverBackground = "primary",
+	hoverColor = "blue",
+	hoverBorder,
+	indicatorSize = "md",
+	indicatorNumber,
+	limitIndicator = true,
+	limitCharacters = (text: string) => {
+		if (text.length > 12) {
+			window.confirm(
+				`Text length is ${text.length} characters, and should be less than or equal to 12.`
+			);
+			return text.slice(0, 12);
+		}
+		return text;
+	},
+}) => {
+	let ariaLabel;
+	let ariaNotification = indicatorNumber;
+	let iconSizeClasses = getSizeClasses(size);
+	let iconColorClasses = getColorClasses(iconColor);
+	let containerSize = containerSizeMap[size as keyof typeof containerSizeMap];
+	let iconName = icon?.props.icon.iconName;
+	let iconClasses = ` flex flex-col justify-center
+            ${iconSizeClasses}
+        `;
+	let backgroundColorClasses = getBackgroundColorClasses(backgroundColor);
+	let hoverClasses = getHoverClasses(
+		hoverBackground,
+		hoverColor,
+		hoverBorder
+	);
+	let indicatorSizeClasses = getIndicatorSizeClasses(indicatorSize);
+	let indicatorColorClasses = getIndicatorColorClasses(iconColor);
+	let borderClasses = getBorderClasses(iconColor, iconBorder);
+
+	let isIndicatorRedCircle = indicatorSize === "sm";
+
+	if (indicatorNumber && parseInt(indicatorNumber) > 99 && limitIndicator) {
+		indicatorNumber = "99+";
+	}
+
+	if (typeof text === "string" && limitCharacters) {
+		text = limitCharacters(text);
+	}
+
+	// if there is no text for the icon and no notifications, screen reader needs label to be announced for link
+	if (ariaNotification == "" && !text) {
+		ariaLabel = `${iconLabel}`;
+
+		// if there is no text for the icon and the icon has notifications, screen reader needs label to be announced type of link and number of notifications
+		// OR
+		// if there is text for the icon and the icon has notifications, screen reader needs label to be announced type of link and number of notifications because either
+		// way the ariaLabel will override the text
+	} else if (
+		(ariaNotification !== "" && !text) ||
+		(ariaNotification !== "" && text)
+	) {
+		ariaLabel = `${iconLabel} with ${ariaNotification} notifications`;
+	} else {
+		ariaLabel = "null";
+	}
+
+	if (to) {
+		return (
+			<div>
+				<Link
+					to={to}
+					onClick={onClick}
+					tabIndex={0}
+					className={`flex flex-col items-center justify-center`}
+					aria-label={ariaLabel}
+				>
+					<div
+						data-testid="icon"
+						className={`flex flex-col items-center justify-center ${containerSize} ${hoverClasses} ${borderClasses} ${iconColorClasses} ${backgroundColorClasses} ${additionalContainerClasses}`}
+					>
+						<div className="flex h-full">
+							<span
+								data-testid={iconName}
+								className={iconClasses}
+							>
+								{icon}
+							</span>
+							{indicatorNumber &&
+							parseInt(indicatorNumber) !== 0 &&
+							!isIndicatorRedCircle ? (
+								<div
+									className="indicator"
+									data-testid="indicator"
+								>
+									<span
+										className={` ${indicatorSizeClasses} ${indicatorColorClasses}`}
+									>
+										<p className="flex items-center justify-center h-full w-full">
+											{indicatorNumber}
+										</p>
+									</span>
+								</div>
+							) : null}
+							{isIndicatorRedCircle &&
+							indicatorNumber &&
+							parseInt(indicatorNumber) !== 0 ? (
+								<div
+									className="indicator"
+									data-testid="indicator"
+								>
+									<span
+										className={`${indicatorSizeClasses}`}
+									/>
+								</div>
+							) : null}
+						</div>
+					</div>
+					{text && <div className="">{text}</div>}
+				</Link>
+			</div>
+		);
+	} else {
+		return (
+			<div>
+				<a
+					href={href}
+					onClick={onClick}
+					tabIndex={0}
+					className={`flex flex-col items-center justify-center p-2 relative min-w-14`}
+					aria-label={ariaLabel}
+				>
+					<div
+						data-testid="icon"
+						className={`flex flex-col items-center justify-center  ${containerSize} ${hoverClasses} ${borderClasses} ${iconColorClasses}  ${backgroundColorClasses} ${additionalContainerClasses}`}
+					>
+						<div className="flex h-full">
+							<span
+								data-testid={iconName}
+								className={iconClasses}
+							>
+								{icon}
+							</span>
+							{indicatorNumber &&
+							parseInt(indicatorNumber) !== 0 &&
+							!isIndicatorRedCircle ? (
+								<div
+									className="indicator"
+									data-testid="indicator"
+								>
+									<span
+										className={` ${indicatorSizeClasses} ${indicatorColorClasses}`}
+									>
+										<p className="flex items-center justify-center h-full w-full">
+											{indicatorNumber}
+										</p>
+									</span>
+								</div>
+							) : null}
+							{isIndicatorRedCircle &&
+							indicatorNumber &&
+							parseInt(indicatorNumber) !== 0 ? (
+								<div
+									className="indicator"
+									data-testid="indicator"
+								>
+									<span
+										className={`${indicatorSizeClasses}`}
+									/>
+								</div>
+							) : null}
+						</div>
+					</div>
+					{text && <div className="absolute top-10 ">{text}</div>}
+				</a>
+			</div>
+		);
+	}
+};
+
+export default Icon;

package/src/components/Icon/Icon.types.ts

@@ -0,0 +1,24 @@
+import React, { ReactNode } from "react";
+
+export interface IconTypes {
+	onClick?: (
+		e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+	) => void;
+	text?: ReactNode;
+	iconColor?: string;
+	iconLabel: string;
+	backgroundColor?: string;
+	size?: "xs" | "sm" | "md" | "lg" | "xl" | string;
+	icon: JSX.Element | null;
+	iconBorder?: "border" | "none" | string;
+	to?: string;
+	href?: string;
+	additionalContainerClasses?: string;
+	hoverColor: "green" | "blue" | string;
+	hoverBackground: "blue" | "green" | "grey" | "none" | string;
+	hoverBorder?: "border" | "none" | string;
+	limitCharacters?: (text: string) => string;
+	indicatorSize?: "xs" | "sm" | "md" | "lg" | string;
+	indicatorNumber?: string;
+	limitIndicator?: boolean;
+}

package/src/components/Icon/iconClassNames.ts

@@ -0,0 +1,79 @@
+import classNames from "classNames";
+
+export const getSizeClasses = (size: string) => {
+	return classNames({
+		"text-md": size === "sm",
+		"text-lg": size === "md",
+		"text-xl": size === "lg",
+	});
+};
+
+export const getColorClasses = (iconColor: string) => {
+	return classNames({
+		"text-blue-800": iconColor === "blue",
+		"text-teal-800": iconColor === "green",
+		"text-slate-950": iconColor === "black",
+	});
+};
+
+export const getBackgroundColorClasses = (backgroundColor: string) => {
+	return classNames({
+		"bg-blue-100": backgroundColor === "blue",
+		"bg-teal-100": backgroundColor === "green",
+		"bg-slate-100": backgroundColor === "grey",
+		"bg-transparent": backgroundColor === "none",
+	});
+};
+
+export const getHoverClasses = (
+	hoverBackground: string | undefined,
+	hoverColor: string | undefined,
+	hoverBorder: string | undefined
+) => {
+	return classNames(
+		"cursor-pointer",
+		{
+			"hover:bg-blue-100": hoverBackground === "blue",
+			"hover:bg-teal-50": hoverBackground === "green",
+			"hover:bg-gray-100": hoverBackground === "grey",
+			"hover:bg-transparent": hoverBackground === "none",
+		},
+		{
+			"hover:text-teal-800 hover:border-teal-600": hoverColor === "green",
+			"hover:text-blue-800 hover:border-blue-800": hoverColor === "blue",
+			"hover:text-slate-950 hover:border-slate-950": hoverColor === "black",
+		},
+		{
+			"hover:border-transparent": hoverBorder === "none",
+		}
+	);
+};
+
+export const getIndicatorSizeClasses = (indicatorSize: string | undefined) => {
+	return classNames({
+		"size-[.5rem] rounded-full bg-red-500 absolute top-0":
+			indicatorSize === "sm",
+		"text-[.5rem] items-center justify-center h-4 w-4 rounded-full absolute top-[-4px] left-[-1px]":
+			indicatorSize === "md",
+		"text-[.65rem] items-center justify-center rounded-full h-5 w-5 absolute top-[-5px] left-[-1px]":
+			indicatorSize === "lg",
+	});
+};
+
+export const getIndicatorColorClasses = (color: string | undefined) => {
+	return classNames({
+		"bg-blue-800 text-white border-none": color === "blue",
+		"bg-teal-600 text-white border-none": color === "green",
+		"bg-black text-white border-none": color === "black",
+	});
+};
+
+export const getBorderClasses = (
+	color: string | undefined,
+	iconBorder: "border" | "none" | undefined
+) => {
+	return classNames("cursor-pointer", "border-2", "rounded-full", {
+		[`border-${color}-500`]: iconBorder === "border",
+		"border-transparent": iconBorder === "none",
+	});
+};

package/src/components/Icon/index.ts

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

package/src/components/Image/Image.stories.tsx

@@ -0,0 +1,79 @@
+import { Meta, StoryFn } from "@storybook/react";
+import Image, { ImageTypes } from ".";
+
+interface ImageStoryProps extends ImageTypes {
+	src: string | null;
+	alt: string;
+	background?: boolean;
+	additionalClasses?: string;
+}
+
+export default {
+	title: "Components/Image",
+	argTypes: {
+		src: {
+			control: {
+				disable: true,
+			},
+			description:
+				"Image source path. If no image is found, a placeholder image will be displayed.",
+		},
+		alt: {
+			control: {
+				type: "text",
+			},
+			description:
+				"Image description provided to screen reader users or label for decorative images (indicated by empty alt text).",
+		},
+		background: {
+			control: {
+				disable: true,
+			},
+			description:
+				"Whether the image is displayed as a background image or not.",
+		},
+		additionalClasses: {
+			control: {
+				type: "text",
+			},
+			table: {
+				disable: true,
+			},
+		},
+	},
+	// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+	tags: ["autodocs"],
+} as Meta<ImageStoryProps>;
+
+const Template: StoryFn<ImageStoryProps> = (args) => <Image {...args} />;
+
+export const DefaultImage = Template.bind({});
+DefaultImage.args = {
+	src: "../../../assets/green-laptop.png",
+	alt: "Image of grey laptop open with a green decorative image displayed on screen.",
+	background: false,
+	additionalClasses: "",
+};
+
+export const BackgroundDecorativeImage = Template.bind({});
+BackgroundDecorativeImage.args = {
+	src: "../../../assets/heroImage.png",
+	alt: "",
+	background: true,
+	additionalClasses: "min-w-full",
+};
+
+export const BackgroundImage = Template.bind({});
+BackgroundImage.args = {
+	src: "../../../assets/team.png",
+	alt: "Image of five people working in office setting.",
+	background: true,
+	additionalClasses: "min-w-full",
+};
+
+export const ImageNotFound = Template.bind({});
+ImageNotFound.args = {
+	src: null,
+	alt: "",
+	background: false,
+};

package/src/components/Image/Image.test.tsx

@@ -0,0 +1,87 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, beforeEach, test } from "vitest";
+import Image from "./Image";
+
+describe("<Image /> display image", () => {
+	beforeEach(() => {
+		render(
+			<Image
+				src="../../../assets/green-laptop.png"
+				alt="Image of grey laptop open with a green decorative image displayed on screen."
+				background={false}
+				additionalClasses=""
+			/>
+		);
+	});
+
+	test("renders Image component", () => {
+		expect(screen.getByTestId("image")).toBeInTheDocument();
+	});
+
+	test("contain correct alt text for image", () => {
+		expect(screen.getByTestId("image")).toHaveAttribute(
+			"alt",
+			"Image of grey laptop open with a green decorative image displayed on screen."
+		);
+	});
+});
+
+describe("<Image /> display decorative background image", () => {
+	beforeEach(() => {
+		render(
+			<Image
+				src="../../../assets/heroImage.png"
+				alt=""
+				background={true}
+				additionalClasses=""
+			/>
+		);
+	});
+
+	test("renders Image component", () => {
+		expect(screen.getByTestId("image-background-hero")).toBeInTheDocument();
+	});
+
+	test("renders correct background image", () => {
+		// This test might need to be adjusted based on how the background image is applied
+		const backgroundImageElement = screen.getByTestId(
+			"image-background-hero"
+		);
+		expect(backgroundImageElement).toHaveStyle(
+			`background-image: url(../../../assets/heroImage.png)`
+		);
+	});
+	// FIXME:
+	// test("contain correct aria label for decorative background image", () => {
+	// 	expect(screen.getByTestId("image-background-hero")).toHaveAttribute(
+	// 		"aria-label",
+	// 		""
+	// 	);
+	// });
+});
+
+describe("<Image /> display background image", () => {
+	beforeEach(() => {
+		render(
+			<Image
+				src="../../../assets/team.png"
+				alt="Image of five people working in office setting."
+				background={true}
+				additionalClasses=""
+			/>
+		);
+	});
+
+	test("renders Image component", () => {
+		expect(screen.getByTestId("image-background-hero")).toBeInTheDocument();
+	});
+
+	test("renders correct background image", () => {
+		const backgroundImageElement = screen.getByTestId(
+			"image-background-hero"
+		);
+		expect(backgroundImageElement).toHaveStyle(
+			`background-image: url(../../../assets/team.png)`
+		);
+	});
+});

package/src/components/Image/Image.tsx

@@ -0,0 +1,49 @@
+import React, { Children, ReactNode } from "react";
+import heroImage from "../../../assets/heroImage.png";
+import imageNotFound from "../../../assets/placeholder-no-image-available.png";
+import { CSSProperties } from "react";
+import { ImageTypes } from ".";
+
+const Image: React.FC<ImageTypes> = ({
+	src = heroImage,
+	alt = "",
+	background = true,
+	additionalClasses,
+	children,
+	textAlignment,
+}) => {
+	const effectiveSrc = typeof src === "string" ? src : imageNotFound;
+	const effectiveAlt =
+		effectiveSrc === imageNotFound ? "Image not found." : alt;
+
+	let heroImg: CSSProperties = {
+		backgroundImage: `url(${effectiveSrc})`,
+	};
+
+	const defaultBgClasses = `bg-no-repeat bg-cover w-full min-h-72 p-4 flex ${textAlignment} `;
+
+	if (background) {
+		return (
+			<div
+				role={effectiveAlt != "" ? "img" : undefined}
+				data-testid="image-background-hero"
+				aria-label={effectiveAlt || undefined}
+				className={`${defaultBgClasses} ${additionalClasses}`}
+				style={heroImg}
+			>
+				{Children.map(children, (child) => child)}
+			</div>
+		);
+	} else {
+		return (
+			<img
+				src={`${effectiveSrc}`}
+				alt={alt}
+				className={`${additionalClasses}`}
+				data-testid="image"
+			/>
+		);
+	}
+};
+
+export default Image;

package/src/components/Image/Image.types.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+
+export interface ImageTypes {
+	src: string | null;
+	alt: string;
+	background?: boolean;
+	additionalClasses?: string;
+	children?: ReactNode;
+	textAlignment?: "justify-start" | "justify-end" | "justify-center";
+	renderChildren?: (props: { textPosition: string }) => React.ReactNode;
+}

package/src/components/Image/index.ts

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