@agilant/toga-blox 1.0.5

package/src/components/Card/cardClassNames.ts

@@ -0,0 +1,49 @@
+import classNames from "classNames";
+
+export const getCardStyleClasses = (
+	cardShape: string | undefined,
+	cardBorderColor: string | undefined,
+	cardBackgroundColor: string | undefined,
+	cardBoxShadow: boolean | undefined
+) => {
+	return classNames(
+		{
+			"shadow-md": cardBoxShadow === true,
+			"": cardBoxShadow === false,
+		},
+		{
+			"rounded-none": cardShape === "cornered",
+			"overflow-hidden rounded-md": cardShape === "semiRounded",
+			"overflow-hidden rounded-lg": cardShape === "rounded",
+		},
+		{
+			"bg-blue-100": cardBackgroundColor === "light blue",
+			"bg-teal-100": cardBackgroundColor === "light green",
+			"bg-blue-500": cardBackgroundColor === "blue",
+			"bg-lime-500": cardBackgroundColor === "lime",
+			"bg-teal-500": cardBackgroundColor === "green",
+			"bg-yellow-400": cardBackgroundColor === "yellow",
+			"bg-orange-500": cardBackgroundColor === "orange",
+			"bg-rose-500": cardBackgroundColor === "pink",
+			"bg-fuchsia-500": cardBackgroundColor === "fuchsia",
+			"bg-purple-500": cardBackgroundColor === "purple",
+			"bg-slate-50": cardBackgroundColor === "gray",
+			"bg-white": cardBackgroundColor === "white",
+			"bg-transparent": cardBackgroundColor === "none",
+		},
+		{
+			"border-2 border-blue-500": cardBorderColor === "blue",
+			"border-2 border-lime-500": cardBorderColor === "lime",
+			"border-2 border-teal-500": cardBorderColor === "green",
+			"border-2 border-yellow-400": cardBorderColor === "yellow",
+			"border-2 border-orange-500": cardBorderColor === "orange",
+			"border-2 border-rose-500": cardBorderColor === "pink",
+			"border-2 border-fuchsia-500": cardBorderColor === "fuchsia",
+			"border-2 border-purple-500": cardBorderColor === "purple",
+			"border-2 border-slate-50": cardBorderColor === "gray",
+			"border-2 border-white": cardBorderColor === "white",
+			"border-2 border-black": cardBorderColor === "black",
+			"border-0 border-transparent": cardBorderColor === "none",
+		}
+	);
+};

package/src/components/Card/index.ts

@@ -0,0 +1,3 @@
+import Card from "./Card"; // Add the missing import statement
+export { Card };
+export * from "./Card.types";

package/src/components/Card/templates/CompassCardTemplate.tsx

@@ -0,0 +1,58 @@
+import Text from "../../Text/Text";
+import Image from "../../Image/Image";
+import { TagName } from "../../Text/Text.types";
+
+type DataTypes = {
+	id: string;
+	title: string;
+	rating: number;
+	link: string;
+	linkTitle: boolean;
+	imageBackgroundColor: string;
+	textBackgroundColor: string;
+	titleProps: {
+		tag: TagName;
+		size: string;
+		fontColor: string;
+		fontFamily: string;
+		additionalClasses: string;
+	};
+	imageUrl: string | null;
+	altText: string;
+};
+
+const CompassCardTemplate = ({ data }: { data: DataTypes }) => {
+	return (
+		<a
+			href="#"
+			className={`flex flex-col justify-center w-full max-sm:w-full h-full`}
+			data-testid="card"
+		>
+			<div
+				className={data.imageBackgroundColor}
+				data-testid="card-image-container"
+			>
+				<Image
+					background={false}
+					src={data.imageUrl}
+					alt={data.altText}
+				/>
+			</div>
+			<div
+				data-testid="card-text-container"
+				className={`flex flex-col w-full p-2 h-full items-center justify-center max-sm:text-xs ${data.textBackgroundColor}`}
+			>
+				<Text
+					tag={data.titleProps.tag as TagName}
+					size={data.titleProps.size}
+					text={data.title}
+					color={"black"}
+					fontFamily={""}
+					additionalClasses={data.titleProps.additionalClasses}
+				/>
+			</div>
+		</a>
+	);
+};
+
+export default CompassCardTemplate;

package/src/components/Card/templates/HorizontalCardTemplate.tsx

@@ -0,0 +1,184 @@
+import FormButton from "../../FormButton/FormButton";
+import Text from "../../Text/Text";
+import Image from "../../Image/Image";
+import { TagName } from "../../Text/Text.types";
+import { getFontAwesomeIcon } from "../../../utils/getFontAwesomeIcon";
+
+type DataTypes = {
+	id: string;
+	title: string;
+	rating: number;
+	ratingProps: {
+		tag: TagName;
+		size: string;
+		fontColor: string;
+		fontFamily: string;
+		additionalClasses: string;
+	};
+	link: string;
+	inStock: boolean;
+	inStockProps: {
+		tag: TagName;
+		size: string;
+		fontColor: string;
+		fontFamily: string;
+		inStockIcon: string;
+		outOfStockIcon: string;
+		additionalClasses: string;
+	};
+	linkTitle: boolean;
+	identifier: string;
+	identifierProps: {
+		tag: TagName;
+		size: string;
+		fontColor: string;
+		fontFamily: string;
+		additionalClasses: string;
+	};
+	titleProps: {
+		tag: TagName;
+		size: string;
+		fontColor: string;
+		fontFamily: string;
+		additionalClasses: string;
+	};
+	price: string;
+	priceProps: {
+		tag: TagName;
+		size: string;
+		fontColor: string;
+		fontFamily: string;
+		additionalClasses: string;
+	};
+	imageUrl: string | null;
+	altText: string;
+	buttonProps: {
+		text: string;
+		as: string;
+		size: string;
+		fontColor: string;
+		borderColor: string;
+		shape: string;
+		color: string;
+		hoverBackground: string;
+		additionalClasses: string;
+	};
+};
+
+const HorizontalCardTemplate = ({ data }: { data: DataTypes }) => {
+	return (
+		<>
+			<a href="#" className={`flex justify-center w-72  max-sm:w-full`}>
+				<Image
+					background={false}
+					src={data.imageUrl}
+					alt={data.altText}
+				/>
+			</a>
+			<div className="flex flex-col justify-between w-3/4 h-full p-3 max-sm:w-full">
+				<div className="flex h-full mb-12 max-sm:mb-2">
+					<a href={data.link}>
+						<Text
+							tag={data.titleProps.tag as TagName}
+							size={data.titleProps.size}
+							text={data.title}
+							color={"black"}
+							fontFamily={""}
+							additionalClasses={
+								data.titleProps.additionalClasses
+							}
+						/>
+					</a>
+				</div>
+				<div
+					className={`flex justify-between mb-12  max-sm:flex-col max-sm:items-end max-sm:mb-2`}
+				>
+					<div className="flex items-center space-x-1 rtl:space-x-reverse max-sm:mb-1">
+						<Text
+							tag={data.identifierProps.tag as TagName}
+							size={data.identifierProps.size}
+							text={data.identifier}
+							color={""}
+							fontFamily={""}
+							additionalClasses={
+								data.identifierProps.additionalClasses
+							}
+						/>
+					</div>
+					<div className="flex items-center justify-center px-2 max-sm:mb-1">
+						<div className="pr-2 text-xs">
+							{data.inStock === true
+								? getFontAwesomeIcon(
+										data.inStockProps.inStockIcon
+								  )
+								: getFontAwesomeIcon(
+										data.inStockProps.outOfStockIcon
+								  )}
+						</div>
+						<Text
+							tag={data.inStockProps.tag as TagName}
+							size={data.inStockProps.size}
+							text={
+								data.inStock === true
+									? "In Stock"
+									: "Out of Stock"
+							}
+							color={"black"}
+							fontFamily={""}
+							additionalClasses={
+								data.inStockProps.additionalClasses
+							}
+						/>
+					</div>
+					<div className="flex px-2 items-center space-x-1 rtl:space-x-reverse max-sm:mb-1">
+						<svg
+							className="w-4 h-4 text-yellow-300"
+							aria-hidden="true"
+							xmlns="http://www.w3.org/2000/svg"
+							fill="currentColor"
+							viewBox="0 0 22 20"
+						>
+							<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
+						</svg>
+						<Text
+							tag={data.ratingProps.tag as TagName}
+							size={data.ratingProps.size}
+							text={data.rating}
+							color={""}
+							fontFamily={""}
+							additionalClasses={
+								data.ratingProps.additionalClasses
+							}
+						/>
+					</div>
+				</div>
+				<div className="flex items-end flex-col w-full max-sm:flex-row max-sm:justify-between">
+					<div className="px-2">
+						<Text
+							tag={data.priceProps.tag as TagName}
+							size={data.priceProps.size}
+							text={data.price}
+							color={"black"}
+							fontFamily={""}
+							additionalClasses={
+								data.priceProps.additionalClasses
+							}
+						/>
+					</div>
+					<FormButton
+						text={data.buttonProps.text}
+						color={data.buttonProps.color}
+						fontColor={data.buttonProps.fontColor}
+						size={data.buttonProps.size}
+						shape={data.buttonProps.shape}
+						borderColor={data.buttonProps.borderColor}
+						hoverBackground={data.buttonProps.hoverBackground}
+						additionalClasses="w-24"
+					/>
+				</div>
+			</div>
+		</>
+	);
+};
+
+export default HorizontalCardTemplate;

package/src/components/Card/templates/VerticalCardTemplate.tsx

@@ -0,0 +1,154 @@
+import FormButton from "../../FormButton/FormButton";
+import Text from "../../Text/Text";
+import Image from "../../Image/Image";
+import { TagName } from "../../Text/Text.types";
+import { getFontAwesomeIcon } from "../../../utils/getFontAwesomeIcon";
+
+type DataTypes = {
+	id: string;
+	title: string;
+	rating: number;
+	link: string;
+	inStock: boolean;
+	inStockProps: {
+		tag: TagName;
+		size: string;
+		fontColor: string;
+		fontFamily: string;
+		inStockIcon: string;
+		outOfStockIcon: string;
+		additionalClasses: string;
+	};
+	linkTitle: boolean;
+	identifier: string;
+	titleProps: {
+		tag: TagName;
+		size: string;
+		fontColor: string;
+		fontFamily: string;
+		additionalClasses: string;
+	};
+	price: string;
+	priceProps: {
+		tag: TagName;
+		size: string;
+		fontColor: string;
+		fontFamily: string;
+		additionalClasses: string;
+	};
+	imageUrl: string | null;
+	altText: string;
+	buttonProps: {
+		text: string;
+		as: string;
+		size: string;
+		fontColor: string;
+		borderColor: string;
+		shape: string;
+		color: string;
+		hoverBackground: string;
+		additionalClasses: string;
+	};
+};
+
+const VerticalCardTemplate = ({ data }: { data: DataTypes }) => {
+	return (
+		<>
+			<a href="#" className={`flex justify-center w-full max-sm:w-full`}>
+				<Image
+					background={false}
+					src={data.imageUrl}
+					alt={data.altText}
+				/>
+			</a>
+			<div className="flex flex-col w-full p-2 justify-between">
+				<div className="flex h-full mb-8 max-sm:mb-4">
+					<a href={data.link}>
+						<Text
+							tag={data.titleProps.tag as TagName}
+							size={data.titleProps.size}
+							text={data.title}
+							color={"black"}
+							fontFamily={""}
+							additionalClasses={
+								data.titleProps.additionalClasses
+							}
+						/>
+					</a>
+				</div>
+				<div
+					className={`flex w-full items-center justify-between mb-2 max-sm:items-end max-sm:mb-4`}
+				>
+
+					<div className="flex items-center justify-center px-2">
+						<div className="pr-2 text-xs">
+							{data.inStock === true
+								? getFontAwesomeIcon(
+										data.inStockProps.inStockIcon
+								  )
+								: getFontAwesomeIcon(
+										data.inStockProps.outOfStockIcon
+								  )}
+						</div>
+						<Text
+							tag={data.inStockProps.tag as TagName}
+							size={data.inStockProps.size}
+							text={
+								data.inStock === true
+									? "In Stock"
+									: "Out of Stock"
+							}
+							color={"black"}
+							fontFamily={""}
+							additionalClasses={
+								data.inStockProps.additionalClasses
+							}
+						/>
+					</div>
+					<div className="flex px-2 items-center space-x-1 rtl:space-x-reverse ">
+						<svg
+							className="w-4 h-4 text-yellow-300"
+							aria-hidden="true"
+							xmlns="http://www.w3.org/2000/svg"
+							fill="currentColor"
+							viewBox="0 0 22 20"
+						>
+							<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
+						</svg>
+						<span className="bg-white text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ms-3">
+							{data.rating}
+						</span>
+					</div>
+				</div>
+				<div className={`flex w-full`}>
+					<div className="flex items-end flex-col w-full">
+						<div className="px-2 mb-2">
+							<Text
+								tag={data.priceProps.tag as TagName}
+								size={data.priceProps.size}
+								text={data.price}
+								color={"black"}
+								fontFamily={""}
+								additionalClasses={
+									data.priceProps.additionalClasses
+								}
+							/>
+						</div>
+						<FormButton
+							text={data.buttonProps.text}
+							color={data.buttonProps.color}
+							fontColor={data.buttonProps.fontColor}
+							size={data.buttonProps.size}
+							shape={data.buttonProps.shape}
+							borderColor={data.buttonProps.borderColor}
+							hoverBackground={data.buttonProps.hoverBackground}
+							additionalClasses="w-24"
+						/>
+					</div>
+				</div>
+			</div>
+		</>
+	);
+};
+
+export default VerticalCardTemplate;

package/src/components/Footer/ContactInfoItem.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+interface ContactInfoItemProps {
+	icon: IconDefinition;
+	children: ReactNode;
+}
+
+export const ContactInfoItem: React.FC<ContactInfoItemProps> = ({
+	icon,
+	children,
+}) => (
+	<div className="flex w-full space-between pb-3">
+		<div className="flex w-[10%] my-1">
+			<FontAwesomeIcon icon={icon} />
+		</div>
+		<div className="my-1">{children}</div>
+	</div>
+);

package/src/components/Footer/DUMMYFOOTERDATA.json

@@ -0,0 +1,132 @@
+{
+	"DUMMYCONTACTDATA": [
+		{
+			"id": "1",
+			"address": "3 Seaview Boulevard",
+			"city": "Port Washington",
+			"state": "NY 11050",
+			"googleLink": "https://maps.app.goo.gl/kyLZNYZHfyKxSnSH8",
+			"phone": "217.472.0953",
+			"email": "generic-company@email.com"
+		}
+	],
+	"DUMMYNAVDATA": [
+		{
+			"id": "1",
+			"title": "About",
+			"link": "#",
+			"links": [
+				{
+					"menuItem": "Features",
+					"link": "#"
+				},
+				{
+					"menuItem": "Pricing",
+					"link": "#"
+				},
+				{
+					"menuItem": "Support",
+					"link": "#"
+				},
+				{
+					"menuItem": "Forums",
+					"link": "#"
+				}
+			]
+		},
+		{
+			"id": 2,
+			"title": "Projects",
+			"links": [
+				{
+					"menuItem": "Contribute",
+					"link": "#"
+				},
+				{
+					"menuItem": "Media assets",
+					"link": "#"
+				},
+				{
+					"menuItem": "Changelog",
+					"link": "#"
+				},
+				{
+					"menuItem": "Releases",
+					"link": "#"
+				}
+			]
+		},
+		{
+			"id": 3,
+			"title": "Community",
+			"links": [
+				{
+					"menuItem": "Join Discord",
+					"link": "#"
+				},
+				{
+					"menuItem": "Follow on Twitter",
+					"link": "#"
+				},
+				{
+					"menuItem": "Email newsletter",
+					"link": "#"
+				},
+				{
+					"menuItem": "GitHub discussions",
+					"link": "#"
+				}
+			]
+		},
+		{
+			"id": 4,
+			"title": "Store",
+			"links": [
+				{
+					"menuItem": "Computers",
+					"link": "#"
+				},
+				{
+					"menuItem": "IpadsIpads",
+					"link": "#"
+				},
+				{
+					"menuItem": "Accessories",
+					"link": "#"
+				}
+			]
+		},
+		{
+			"title": "Extra Row",
+			"links": [
+				{
+					"menuItem": "One submenu",
+					"link": "#"
+				}
+			]
+		}
+	],
+	"DUMMYSOCIALDATA": [
+		{
+			"type": "Twitter",
+			"xmlns": "http://www.w3.org/2000/svg",
+			"path": "M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z",
+			"ariaLabel": "Twitter",
+			"href": "https://twitter.com/"
+		},
+		{
+			"type": "YouTube",
+			"xmlns": "http://www.w3.org/2000/svg",
+			"path": "M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z",
+			"ariaLabel": "YouTube",
+			"href": "https://youtube.com/"
+		},
+		{
+			"type": "Facebook",
+			"xmlns": "http://www.w3.org/2000/svg",
+			"path": "M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z",
+			"ariaLabel": "Facebook",
+			"href": "https://facebook.com/"
+		}
+	]
+}