@agilant/toga-blox 1.0.5

package/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,185 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, beforeEach, test } from "vitest";
+import Badge from "./Badge";
+import Text from "../Text/Text";
+import Image from "../Image/Image";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+	faCircleExclamation,
+	faCheck,
+} from "@fortawesome/free-solid-svg-icons";
+
+describe("<Badge />", () => {
+	beforeEach(() => {
+		render(
+			<Badge
+				type="span"
+				color="red"
+				borderColor="red"
+				hoverColor="none"
+				badgeSize="large"
+				testId="priority-badge"
+				mobileIcon={<FontAwesomeIcon icon={faCircleExclamation} />}
+				mobileIconLabel="Priority"
+				text={
+					<Text
+						size="md"
+						color="black"
+						text="Priority"
+						fontFamily="serif"
+						tag="h2"
+						additionalClasses="font-bold"
+					/>
+				}
+			/>
+		);
+	});
+
+	test("renders badge", () => {
+		const badge = screen.getByTestId("priority-badge");
+		expect(badge).toBeInTheDocument();
+	});
+
+	test("has correct text", () => {
+		expect(screen.getByTestId("priority-badge")).toHaveTextContent("Priority");
+	});
+
+	test("has correct background color", () => {
+		const badge = screen.getByTestId("priority-badge");
+		expect(badge).toHaveClass("bg-red-200");
+	});
+
+	test("has correct border color", () => {
+		const badge = screen.getByTestId("priority-badge");
+		expect(badge).toHaveClass("border-red-500");
+	});
+
+});
+
+describe("<Badge /> with icon", () => {
+	beforeEach(() => {
+		render(
+			<Badge
+				type="span"
+				color="green"
+				borderColor="green"
+				hoverColor="none"
+				badgeSize="large"
+				testId="icon-badge"
+				tagStyle={false}
+				cursorPointer={false}
+				icon={<FontAwesomeIcon icon={faCheck} />}
+				mobileIcon={<FontAwesomeIcon icon={faCheck} />}
+				mobileIconLabel="Complete"
+				text={
+					<Text
+						size="md"
+						color="black"
+						text="Complete"
+						fontFamily="serif"
+						tag="h2"
+						additionalClasses="font-bold"
+					/>
+				}
+			/>
+		);
+	});
+
+	test("renders badge with icon", () => {
+		const badge = screen.getByTestId("icon-badge");
+		expect(badge).toBeInTheDocument();
+	});
+
+	test("has correct text", () => {
+		expect(screen.getByTestId("icon-badge")).toHaveTextContent("Complete");
+	});
+
+	test("has correct background color", () => {
+		const badge = screen.getByTestId("icon-badge");
+		expect(badge).toHaveClass("bg-teal-100");
+	});
+
+	test("has correct border color", () => {
+		const badge = screen.getByTestId("icon-badge");
+		expect(badge).toHaveClass("border-teal-700");
+	});
+
+	test("has correct icon", () => {
+		const icon = screen.getByTestId("badge-icon");
+		expect(icon).toBeInTheDocument();
+	});
+
+});
+
+describe("<Badge /> with pill style", () => {
+	beforeEach(() => {
+		render(
+			<Badge
+				type="href"
+				to="#"
+				color="blue"
+				borderColor="none"
+				hoverColor="blue"
+				testId="pill-badge"
+				tagStyle={false}
+				cursorPointer={false}
+				icon={<FontAwesomeIcon icon={faCheck} />}
+				mobileIcon={<FontAwesomeIcon icon={faCheck} />}
+				mobileIconLabel="Complete"
+				text={
+					<>
+						<Text
+							size="md"
+							color="primary"
+							fontFamily="serif"
+							text="Contact Us"
+							tag="h2"
+							additionalClasses="pl-2 pb-0 font-bold"
+						/>
+						<Text
+							size="md"
+							color="primary"
+							fontFamily="serif"
+							text="1-800-800-8000"
+							tag="p"
+							additionalClasses="pl-2 pt-0"
+						/>
+					</>
+				}
+				image={
+					<Image
+						src="../../../assets/contact-image.png"
+						alt=""
+						background={false}
+						additionalClasses="flex justify-center w-12 h-12 max-md:hidden"
+					/>
+				}
+			/>
+		);
+	});
+
+	test("renders badge with pill style", () => {
+		const pill = screen.getByTestId("pill-badge");
+		expect(pill).toBeInTheDocument();
+	});
+
+	test("has correct text", () => {
+		expect(screen.getByTestId("badge-text")).toHaveTextContent("Contact Us");
+	});
+
+	test("has correct text", () => {
+		expect(screen.getByTestId("badge-text")).toHaveTextContent(
+			"1-800-800-8000"
+		);
+	});
+
+	test("has correct background color", () => {
+		const pill = screen.getByTestId("pill-badge");
+		expect(pill).toHaveClass("bg-blue-200");
+	});
+
+	test("has correct image", () => {
+		const pillImage = screen.getByTestId("image");
+		expect(pillImage).toBeInTheDocument();
+	});
+});

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,137 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { BadgeTypes } from "./Badge.types";
+
+import {
+	getHoverClasses,
+	getIconClasses,
+	getColorClassNames,
+	getBadgeClasses,
+	getPillStyleClasses,
+	getBadgeSizeClasses,
+	getTagClasses,
+} from "./badgeClassNames";
+
+const Badge: React.FC<BadgeTypes> = ({
+	onClick,
+	color = "blue",
+	badgeSize,
+	cursorPointer = true,
+	type = "span",
+	to,
+	href,
+	testId,
+	hoverColor = "blue",
+	borderColor,
+	fontColor = "black",
+	hasMobileStyle,
+	mobileIcon,
+	mobileIconLabel,
+	additionalClasses,
+	icon,
+	iconOrder = "first",
+	image,
+	tagStyle,
+	tagStyleIconColor,
+	text,
+}) => {
+	let badgeColorClasses = getColorClassNames(color, borderColor, fontColor);
+	let badgeSizeClasses = getBadgeSizeClasses(badgeSize);
+	let hoverClasses = getHoverClasses(hoverColor, cursorPointer);
+	let iconClasses = getIconClasses(iconOrder, tagStyle, tagStyleIconColor);
+
+	let badgeClasses = getBadgeClasses({
+		badgeColorClasses,
+		hoverClasses,
+		badgeSizeClasses,
+		additionalClasses,
+	});
+
+	let pillClasses = getPillStyleClasses({
+		badgeColorClasses,
+		hoverClasses,
+		additionalClasses,
+	});
+
+	let tagClasses = getTagClasses({
+		badgeColorClasses,
+		hoverClasses,
+		additionalClasses,
+	});
+
+	const handleClick = (
+		e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+	) => {
+		e.preventDefault();
+		onClick?.(e);
+	};
+
+	const baseProps = {
+		className: image
+			? pillClasses.trim()
+			: tagStyle
+			? tagClasses.trim()
+			: badgeClasses.trim(),
+		onClick: handleClick,
+		type: type,
+		"data-testid": testId,
+	};
+
+	switch (type) {
+		case "href":
+			return (
+				<a {...baseProps} href={href}>
+					{renderContent()}
+				</a>
+			);
+		case "to":
+			if (to) {
+				return (
+					<Link {...baseProps} to={to}>
+						{renderContent()}
+					</Link>
+				);
+			}
+			break;
+		case "span":
+			return <span {...baseProps}>{renderContent()}</span>;
+		default:
+			return null;
+	}
+
+	function renderContent() {
+		return (
+			<>
+				{image && <span>{image}</span>}
+				{icon && (
+					<span
+						className={`${iconClasses} max-md:hidden`}
+						data-testid="badge-icon"
+					>
+						<>{icon}</>
+					</span>
+				)}
+				{mobileIcon && hasMobileStyle && (
+					<span
+						className={`${iconClasses} hidden max-md:flex max-md:p-0`}
+						data-testid="mobile-badge-icon"
+						aria-hidden="false"
+						aria-label={mobileIconLabel}
+					>
+						<>{mobileIcon}</>
+					</span>
+				)}
+				<div
+					className={` ${hasMobileStyle ? "max-md:hidden" : ""} ${
+						tagStyle ? "px-3" : ""
+					}`}
+					data-testid="badge-text"
+				>
+					{text}
+				</div>
+			</>
+		);
+	}
+};
+
+export default Badge;

package/src/components/Badge/Badge.types.tsx

@@ -0,0 +1,28 @@
+import React, { ElementType } from "react";
+
+export interface BadgeTypes {
+	onClick?: (
+		e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+	) => void;
+	text?: React.ReactNode;
+	cursorPointer?: boolean;
+	type: "href" | "to" | "span";
+	badgeSize?: string | undefined;
+	image?: React.ReactNode;
+	color?: string | undefined;
+	fontColor?: string | undefined;
+	borderColor?: string | undefined;
+	to?: string;
+	href?: string;
+	hoverColor: string | undefined;
+	additionalClasses?: string;
+	hasMobileStyle?: boolean;
+	mobileIcon?: JSX.Element | Element | null;
+	mobileIconLabel?: string;
+	children?: React.ReactNode;
+	icon?: JSX.Element | Element | null;
+	iconOrder?: "first" | "last";
+	testId?: string;
+	tagStyle?: boolean;
+	tagStyleIconColor?: string;
+}

package/src/components/Badge/badgeClassNames.tsx

@@ -0,0 +1,152 @@
+import classNames from "classNames";
+
+export const getHoverClasses = (
+	hoverColor: string | undefined,
+	cursorPointer: boolean | undefined
+) => {
+	return classNames(
+		{
+			"hover:bg-red-800 hover:text-white": hoverColor === "red",
+			"hover:bg-teal-800 hover:text-white": hoverColor === "green",
+			"hover:bg-blue-800 hover:text-white": hoverColor === "blue",
+			"hover:bg-orange-700 hover:text-white": hoverColor === "orange",
+			"hover:bg-purple-700 hover:text-white": hoverColor === "purple",
+			"hover:bg-slate-950 hover:text-white": hoverColor === "black",
+
+			"": hoverColor === "none",
+		},
+		{
+			"cursor-pointer": cursorPointer === true,
+			"": cursorPointer === false,
+		}
+	);
+};
+
+export const getIconClasses = (
+	iconOrder: string | undefined,
+	tagStyle: boolean | undefined,
+	tagStyleIconColor: string | undefined
+) => {
+	return classNames({
+		"flex items-center order-first pr-2":
+			iconOrder === "first" && tagStyle === false,
+		"flex items-center order-last pl-2":
+			iconOrder === "last" && tagStyle === false,
+		"text-white bg-red-500 flex justify-center items-center w-8 h-8 rounded-full max-md:text-black max-md:bg-transparent":
+			tagStyle === true && tagStyleIconColor === "red",
+		"text-white bg-blue-600 flex justify-center items-center w-8 h-8 rounded-full max-md:text-black max-md:bg-transparent":
+			tagStyle === true && tagStyleIconColor === "blue",
+		"text-white bg-teal-700 flex justify-center items-center w-8 h-8 rounded-full max-md:text-black max-md:bg-transparent":
+			tagStyle === true && tagStyleIconColor === "green",
+		"text-white bg-orange-700 flex justify-center items-center w-8 h-8 rounded-full max-md:text-black max-md:bg-transparent":
+			tagStyle === true && tagStyleIconColor === "orange",
+		"text-white bg-purple-700 flex justify-center items-center w-8 h-8 rounded-full max-md:text-black max-md:bg-transparent":
+			tagStyle === true && tagStyleIconColor === "purple",
+		"text-white bg-slate-950 flex justify-center items-center w-8 h-8 rounded-full max-md:text-black max-md:bg-transparent":
+			tagStyle === true && tagStyleIconColor === "black",
+	});
+};
+
+export const getBadgeSizeClasses = (badgeSize: string | undefined) => {
+	return classNames({
+		"badge-sm px-4 py-2": badgeSize === "small",
+		"badge-md px-4 py-3": badgeSize === "medium",
+		"badge-lg px-6 py-3": badgeSize === "large",
+	});
+};
+
+export const getColorClassNames = (
+	color: string | undefined,
+	borderColor: string | undefined,
+	fontColor: string | undefined
+) => {
+	return classNames(
+		{
+			"bg-blue-200": color === "blue",
+			"bg-red-200": color === "red",
+			"bg-teal-100": color === "green",
+			"bg-orange-200": color === "orange",
+			"bg-purple-200": color === "purple",
+			"bg-slate-950": color === "black",
+			"bg-white": color === "white",
+			"bg-transparent border-black": color === "clear",
+		},
+		{
+			"border-blue-600": borderColor === "blue",
+			"border-teal-700": borderColor === "green",
+			"border-red-500": borderColor === "red",
+			"border-orange-500": color === "orange",
+			"border-slate-950": borderColor === "black",
+			"border-purple-500": color === "purple",
+			"border-transparent": borderColor === "none",
+		},
+		{
+			"text-white": fontColor === "white" && color !== "clear",
+			"text-black": fontColor === "black",
+		}
+	);
+};
+
+interface BadgeClassProps {
+	badgeColorClasses: string;
+	hoverClasses: string;
+	additionalClasses?: string;
+	badgeSizeClasses?: string;
+}
+
+interface PillStyleClassProps {
+	badgeColorClasses: string;
+	hoverClasses: string;
+	additionalClasses?: string;
+}
+
+interface TagProps {
+	badgeColorClasses: string;
+	hoverClasses: string;
+	additionalClasses?: string;
+}
+
+export const getBadgeClasses = ({
+	badgeColorClasses,
+	hoverClasses,
+	additionalClasses,
+	badgeSizeClasses,
+}: BadgeClassProps) => {
+	return classNames(
+		"badge border-2 rounded-full flex justify-center items-center",
+		badgeColorClasses,
+		hoverClasses,
+		additionalClasses,
+		badgeSizeClasses
+	);
+};
+
+export const getPillStyleClasses = ({
+	badgeColorClasses,
+	hoverClasses,
+	additionalClasses,
+	hasMobileStyle,
+}: PillStyleClassProps & { hasMobileStyle?: boolean }) => {
+	return classNames(
+		"flex justify-center items-center w-full border-2 p-2 rounded-full",
+		hasMobileStyle ? "max-md:w-12 max-md:h-12 max-md:p-4" : "",
+		badgeColorClasses,
+		hoverClasses,
+		additionalClasses
+	);
+};
+
+export const getTagClasses = ({
+	badgeColorClasses,
+	hoverClasses,
+	additionalClasses,
+	hasMobileStyle,
+}: TagProps & { hasMobileStyle?: boolean }) => {
+	return classNames(
+		"flex justify-between items-center w-fit border-2 rounded-full",
+		hasMobileStyle ? "max-md:w-12 max-md:h-6 max-md:p-2" : "",
+		badgeColorClasses,
+		hoverClasses,
+		additionalClasses
+	);
+};

package/src/components/Badge/index.ts

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

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,91 @@
+import { Meta, StoryFn } from "@storybook/react";
+import Card from "./Card";
+import type { CardTypes } from ".";
+import {
+	DUMMYPRODUCTDATA,
+	DUMMYCOMPASSPRODUCTDATA,
+} from "./DUMMYPRODUCTDATA.json";
+import HorizontalCardTemplate from "./templates/HorizontalCardTemplate";
+import VerticalCardTemplate from "./templates/VerticalCardTemplate";
+import CompassCardTemplate from "./templates/CompassCardTemplate";
+
+export default {
+	title: "Components/Card",
+	component: Card,
+	argTypes: {
+		cardBorderRadius: {
+			control: "select",
+			options: ["cornered", "semiRounded", "rounded"],
+			description: "The border radius of the card.",
+		},
+		cardBackgroundColor: {
+			control: "select",
+			options: ["light blue", "light green", "gray", "white"],
+			description: "The background color of the card.",
+		},
+		cardBorderColor: {
+			control: "select",
+			options: ["blue", "green", "black", "none"],
+			description: "The color of the card border.",
+		},
+		cardBoxShadow: {
+			control: "boolean",
+			description: "Whether the card has box shadow or not.",
+		},
+		children: {
+			control: {
+				type: "none",
+			},
+		},
+		containerClasses: {
+			control: {
+				type: "none",
+			},
+		},
+		key: {
+			control: {
+				type: "none",
+			},
+		},
+	},
+	tags: ["autodocs"],
+	parameters: {
+		layout: "centered",
+	},
+} as Meta;
+
+const Template: StoryFn<CardTypes> = (args) => <Card {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+	containerClasses: "flex w-full max-sm:w-1/2 max-sm:flex-col",
+	key: DUMMYPRODUCTDATA[0].id,
+	cardBorderRadius: "semiRounded",
+	cardBorderColor: "blue",
+	cardBackgroundColor: "light blue",
+	cardBoxShadow: false,
+	children: <HorizontalCardTemplate data={DUMMYPRODUCTDATA[0]} />,
+};
+
+export const VerticalCard = Template.bind({});
+VerticalCard.args = {
+	containerClasses: "w-1/2 max-sm:w-1/2overflow-hidden rounded-md",
+	key: DUMMYPRODUCTDATA[0].id,
+	cardBorderRadius: "semiRounded",
+	cardBorderColor: "green",
+	cardBackgroundColor: "light green",
+	cardBoxShadow: true,
+	children: <VerticalCardTemplate data={DUMMYPRODUCTDATA[1]} />,
+};
+
+export const CompassCard = Template.bind({});
+CompassCard.args = {
+	containerClasses:
+		"w-1/2 max-sm:w-1/2 overflow-hidden rounded-md transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
+	key: DUMMYCOMPASSPRODUCTDATA[0].id,
+	cardBorderRadius: "cornered",
+	cardBorderColor: "green",
+	cardBackgroundColor: "green",
+	cardBoxShadow: true,
+	children: <CompassCardTemplate data={DUMMYCOMPASSPRODUCTDATA[0]} />,
+};

package/src/components/Card/Card.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, beforeEach, test } from "vitest";
+import Card from "./Card";
+import { DUMMYCARDTESTDATA } from "./DUMMYPRODUCTDATA.json";
+import CompassCardTemplate from "./templates/CompassCardTemplate";
+
+describe("<Card />", () => {
+	beforeEach(() => {
+		render(
+			<Card
+				key={DUMMYCARDTESTDATA[0].id}
+				cardBorderRadius="cornered"
+				cardBorderColor="green"
+				cardBackgroundColor="none"
+				cardBoxShadow={true}
+				containerClasses="w-1/2 max-sm:w-1/2"
+				children={<CompassCardTemplate data={DUMMYCARDTESTDATA[0]} />}
+			/>
+		);
+	});
+
+	test("renders card", () => {
+		const card = screen.getByTestId("card-container");
+		expect(card).toBeInTheDocument();
+	});
+
+	test("renders correct card text", () => {
+		const card = screen.getByTestId("card-container");
+		expect(card).toHaveTextContent(
+			"Compass Sales Lenovo TP X13 Yoga G3 Laptop"
+		);
+	});
+
+	test("renders correct card image", () => {
+		const card = screen.getByTestId("image");
+		expect(card).toHaveAttribute("src", "./assets/compass-card-image.png");
+	});
+
+	test("renders correct card background color for image", () => {
+		const card = screen.getByTestId("card-image-container");
+		expect(card).toHaveClass("bg-teal-500");
+	});
+
+	test("renders correct card border color", () => {
+		const card = screen.getByTestId("card-container");
+		expect(card).toHaveClass("border-teal-500");
+	});
+
+	test("renders correct card background color for text", () => {
+		const card = screen.getByTestId("card-text-container");
+		expect(card).toHaveClass("bg-slate-50");
+	});
+});

package/src/components/Card/Card.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import type { CardTypes } from "./Card.types";
+import { getCardStyleClasses } from "./cardClassNames";
+
+const Card: React.FC<CardTypes> = ({
+	children,
+	containerClasses,
+	cardBackgroundColor,
+	cardBorderColor,
+	cardBorderRadius,
+	cardBoxShadow,
+}) => {
+	let cardStyleClasses = getCardStyleClasses(
+		cardBorderRadius,
+		cardBorderColor,
+		cardBackgroundColor,
+		cardBoxShadow
+	);
+
+	return (
+		<div
+			className={`${containerClasses} ${cardStyleClasses}`}
+			data-testid="card-container"
+		>
+			{children}
+		</div>
+	);
+};
+
+export default Card;

package/src/components/Card/Card.types.ts

@@ -0,0 +1,11 @@
+import React from "react";
+
+export interface CardTypes {
+	children?: React.ReactNode;
+	containerClasses?: string;
+	key?: string;
+	cardBackgroundColor?: string;
+	cardBorderColor?: string;
+	cardBorderRadius?: string;
+	cardBoxShadow?: boolean;
+}