@agilant/toga-blox 1.0.5 → 1.0.7

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

@@ -156,7 +156,6 @@ Default.args = {
 			to="#"
 			hoverColor="blue"
 			borderColor="none"
-			tagStyle={false}
 			mobileIcon={<FontAwesomeIcon icon={faSquarePhone} />}
 			mobileIconLabel="Contact Us"
 			onClick={() => alert("Redirect to Contact Us page")}
@@ -171,17 +170,17 @@ Default.args = {
 			text={
 				<>
 					<Text
-						size="sm"
-						color="primary"
-						fontFamily="serif"
+						size="text-sm"
+						color="text-black"
+						fontFamily="font-serif"
 						text="Contact Us"
 						tag="h2"
 						additionalClasses="pl-2 pb-0 font-bold"
 					/>
 					<Text
-						size="xs"
-						color="primary"
-						fontFamily="serif"
+						size="text-xs"
+						color="text-black"
+						fontFamily="font-serif"
 						text="1-800-800-8000"
 						tag="p"
 						additionalClasses="pl-2 pt-0"
@@ -227,7 +226,7 @@ Default.args = {
 			button={
 				<FormButton
 					icon={getFontAwesomeIcon("search")}
-					color="blue"
+					backgroundColor="blue"
 					fontColor="white"
 					hoverBackground="black"
 					hoverFontColor="white"
@@ -321,7 +320,6 @@ Compass.args = {
 			color="green"
 			hoverColor="green"
 			borderColor="none"
-			tagStyle={false}
 			mobileIcon={<FontAwesomeIcon icon={faSquarePhone} />}
 			mobileIconLabel="Contact Us"
 			onClick={() => alert("Redirect to Contact Us page")}
@@ -336,17 +334,17 @@ Compass.args = {
 			text={
 				<>
 					<Text
-						size="sm"
-						color="primary"
-						fontFamily="serif"
+						size="text-sm"
+						color="text-teal-700"
+						fontFamily="font-serif"
 						text="Contact Us"
 						tag="h2"
 						additionalClasses="pl-2 pb-0 font-bold"
 					/>
 					<Text
-						size="xs"
-						color="primary"
-						fontFamily="serif"
+						size="text-xs"
+						color="text-teal-700"
+						fontFamily="font-serif"
 						text="1-800-800-8000"
 						tag="p"
 						additionalClasses="pl-2 pt-0"
@@ -401,7 +399,7 @@ Compass.args = {
 			button={
 				<FormButton
 					icon={getFontAwesomeIcon("search")}
-					color="green"
+					backgroundColor="green"
 					hoverBackground="black"
 					hoverFontColor="white"
 					additionalClasses="h-full w-8 justify-center"
@@ -453,7 +451,6 @@ NoSearchOrBadge.args = {
 			color="green"
 			hoverColor="green"
 			borderColor="none"
-			tagStyle={false}
 			mobileIcon={<FontAwesomeIcon icon={faSquarePhone} />}
 			mobileIconLabel="Contact Us"
 			onClick={() => alert("Redirect to Contact Us page")}
@@ -468,17 +465,17 @@ NoSearchOrBadge.args = {
 			text={
 				<>
 					<Text
-						size="sm"
-						color="primary"
-						fontFamily="serif"
+						size="text-sm"
+						color="text-black"
+						fontFamily="font-serif"
 						text="Contact Us"
 						tag="h2"
 						additionalClasses="pl-2 pb-0 font-bold"
 					/>
 					<Text
-						size="xs"
-						color="primary"
-						fontFamily="serif"
+						size="text-xs"
+						color="text-black"
+						fontFamily="font-serif"
 						text="1-800-800-8000"
 						tag="p"
 						additionalClasses="pl-2 pt-0"

package/src/components/Header/Header.test.tsx

@@ -53,7 +53,6 @@ describe("<Header /> with all props (badge, icons, input, logo)", () => {
 						color="green"
 						hoverColor="green"
 						borderColor="none"
-						tagStyle={false}
 						mobileIcon={getFontAwesomeIcon("phone")}
 						mobileIconLabel="Contact Us"
 						onClick={() => alert("Redirect to Contact Us page")}

package/src/components/Hero/Hero.tsx

@@ -18,9 +18,9 @@ const Hero: React.FC<HeroTypes> = ({
 	src = "../../../assets/heroImage.png",
 	text = (
 		<Text
-			size="xl"
-			color="white"
-			fontFamily="serif"
+			size="text-xl"
+			color="text-white"
+			fontFamily="font-serif"
 			text="This is a test heading!"
 			tag="h1"
 		/>

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

@@ -129,9 +129,9 @@ Profile.args = {
 	indicatorNumber: "0",
 	text: (
 		<Text
-			size="md"
-			color="primary"
-			fontFamily="serif"
+			size="text-md"
+			color="text-black"
+			fontFamily="font-serif"
 			text="Profile"
 			tag="h2"
 			additionalClasses="p-0"
@@ -154,9 +154,9 @@ Support.args = {
 	indicatorSize: "lg",
 	text: (
 		<Text
-			size="md"
-			color="primary"
-			fontFamily="serif"
+			size="text-md"
+			color="text-black"
+			fontFamily="font-serif"
 			text="Support"
 			tag="h2"
 			additionalClasses="p-0"
@@ -178,9 +178,9 @@ Messages.args = {
 	indicatorSize: "sm",
 	text: (
 		<Text
-			size="md"
-			color="primary"
-			fontFamily="serif"
+			size="text-md"
+			color="text-black"
+			fontFamily="font-serif"
 			text="Messages"
 			tag="h2"
 			additionalClasses="p-0"
@@ -201,9 +201,9 @@ Cart.args = {
 	indicatorSize: "lg",
 	text: (
 		<Text
-			size="md"
-			color="primary"
-			fontFamily="serif"
+			size="text-md"
+			color="text-black"
+			fontFamily="font-serif"
 			text="Cart"
 			tag="h2"
 			additionalClasses="p-0"

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

@@ -17,9 +17,9 @@ describe("<Icon /> Profile", () => {
 				hoverColor="green"
 				text={
 					<Text
-						size="md"
-						color="green"
-						fontFamily="serif"
+						size="text-md"
+						color="text-green"
+						fontFamily="font-serif"
 						text="Profile"
 						tag="h2"
 					/>

package/src/components/Icon/Icon.tsx

@@ -63,7 +63,7 @@ const Icon: React.FC<IconTypes> = ({
 	);
 	let indicatorSizeClasses = getIndicatorSizeClasses(indicatorSize);
 	let indicatorColorClasses = getIndicatorColorClasses(iconColor);
-	let borderClasses = getBorderClasses(iconColor, iconBorder);
+	let borderClasses = getBorderClasses(iconColor, iconBorder as "none" | "border" | undefined);
 
 	let isIndicatorRedCircle = indicatorSize === "sm";
 
@@ -114,8 +114,8 @@ const Icon: React.FC<IconTypes> = ({
 								{icon}
 							</span>
 							{indicatorNumber &&
-							parseInt(indicatorNumber) !== 0 &&
-							!isIndicatorRedCircle ? (
+								parseInt(indicatorNumber) !== 0 &&
+								!isIndicatorRedCircle ? (
 								<div
 									className="indicator"
 									data-testid="indicator"
@@ -130,8 +130,8 @@ const Icon: React.FC<IconTypes> = ({
 								</div>
 							) : null}
 							{isIndicatorRedCircle &&
-							indicatorNumber &&
-							parseInt(indicatorNumber) !== 0 ? (
+								indicatorNumber &&
+								parseInt(indicatorNumber) !== 0 ? (
 								<div
 									className="indicator"
 									data-testid="indicator"
@@ -169,8 +169,8 @@ const Icon: React.FC<IconTypes> = ({
 								{icon}
 							</span>
 							{indicatorNumber &&
-							parseInt(indicatorNumber) !== 0 &&
-							!isIndicatorRedCircle ? (
+								parseInt(indicatorNumber) !== 0 &&
+								!isIndicatorRedCircle ? (
 								<div
 									className="indicator"
 									data-testid="indicator"
@@ -185,8 +185,8 @@ const Icon: React.FC<IconTypes> = ({
 								</div>
 							) : null}
 							{isIndicatorRedCircle &&
-							indicatorNumber &&
-							parseInt(indicatorNumber) !== 0 ? (
+								indicatorNumber &&
+								parseInt(indicatorNumber) !== 0 ? (
 								<div
 									className="indicator"
 									data-testid="indicator"

package/src/components/Image/Image.tsx

@@ -1,31 +1,29 @@
-import React, { Children, ReactNode } from "react";
+import React, { Children, ReactNode, CSSProperties } from "react";
 import heroImage from "../../../assets/heroImage.png";
 import imageNotFound from "../../../assets/placeholder-no-image-available.png";
-import { CSSProperties } from "react";
-import { ImageTypes } from ".";
+import { ImageTypes } from "./Image.types";
 
 const Image: React.FC<ImageTypes> = ({
 	src = heroImage,
 	alt = "",
 	background = true,
-	additionalClasses,
+	additionalClasses = "",
 	children,
-	textAlignment,
+	textAlignment = "text-left",
 }) => {
 	const effectiveSrc = typeof src === "string" ? src : imageNotFound;
-	const effectiveAlt =
-		effectiveSrc === imageNotFound ? "Image not found." : alt;
+	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} `;
+	const defaultBgClasses = `bg-no-repeat bg-cover w-full min-h-72 p-4 flex ${textAlignment}`;
 
 	if (background) {
 		return (
 			<div
-				role={effectiveAlt != "" ? "img" : undefined}
+				role={effectiveAlt ? "img" : undefined}
 				data-testid="image-background-hero"
 				aria-label={effectiveAlt || undefined}
 				className={`${defaultBgClasses} ${additionalClasses}`}
@@ -37,9 +35,9 @@ const Image: React.FC<ImageTypes> = ({
 	} else {
 		return (
 			<img
-				src={`${effectiveSrc}`}
-				alt={alt}
-				className={`${additionalClasses}`}
+				src={effectiveSrc}
+				alt={effectiveAlt}
+				className={additionalClasses}
 				data-testid="image"
 			/>
 		);

package/src/components/Image/declarations.d.ts

@@ -0,0 +1,24 @@
+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;
+}