@agilant/toga-blox 1.0.9 → 1.0.11

package/src/components/IconButton/IconButton.types.ts

@@ -1,28 +0,0 @@
-import React, { ReactNode } from "react";
-
-export interface IconButtonTypes {
-	onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-	role?: string;
-	icon: ReactNode;
-	iconSize?: string;
-	iconColor?: string;
-	hasNotification?: boolean;
-	notificationTextClasses?: string;
-	notificationBgColor?: string;
-	notificationCount?: number;
-	text?: string;
-	textSize?: string;
-	textColor?: string;
-	textFontFamily?: string;
-	textClasses?: string;
-	hoverBorderColor?: string;
-	hoverBackgroundColor?: string;
-	backgroundColor?: string;
-	borderColor?: string;
-	additionalContainerClasses?: string;
-	textContainerClasses?: string;
-	iconLabel?: string;
-	iconBorder?: string;
-	indicatorNumber?: string;
-	indicatorSize?: string;
-}

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

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

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

@@ -1,47 +0,0 @@
-import React, { Children, CSSProperties } from "react";
-import heroImage from "../../../assets/heroImage.png";
-import imageNotFound from "../../../assets/placeholder-no-image-available.png";
-import { ImageTypes } from "./Image.types";
-
-const Image: React.FC<ImageTypes> = ({
-	src = heroImage,
-	alt = "",
-	background = true,
-	additionalClasses = "",
-	children,
-	textAlignment = "text-left",
-}) => {
-	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={effectiveAlt}
-				className={additionalClasses}
-				data-testid="image"
-			/>
-		);
-	}
-};
-
-export default Image;

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

@@ -1,11 +0,0 @@
-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/declarations.d.ts

@@ -1,24 +0,0 @@
-declare module "*.png" {
-	const value: string;
-	export default value;
-}
-
-declare module "*.jpg" {
-	const value: string;
-	export default value;
-}
-
-declare module "*.jpeg" {
-	const value: string;
-	export default value;
-}
-
-declare module "*.gif" {
-	const value: string;
-	export default value;
-}
-
-declare module "*.svg" {
-	const value: string;
-	export default value;
-}