@agilant/toga-blox 1.0.5 → 1.0.6

package/src/components/Badge/Badge.tsx

@@ -2,62 +2,36 @@ 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",
+	hoverColor,
 	borderColor,
-	fontColor = "black",
+	borderHoverColor,
+	borderWidth,
+	borderRadius,
+	backgroundColor,
 	hasMobileStyle,
 	mobileIcon,
 	mobileIconLabel,
-	additionalClasses,
+	iconSize,
+	hasLeftIcon,
+	hasRightIcon,
 	icon,
-	iconOrder = "first",
 	image,
-	tagStyle,
-	tagStyleIconColor,
 	text,
+	badgeContainerClasses,
 }) => {
-	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 baseBadgeContainerClasses = "flex items-center justify-center px-[10px] py-[3px] rounded gap-[4px]";
+	const iconClasses = `${iconSize}`;
+	const badgeBackgroundClasses = `${backgroundColor} hover:${hoverColor}`;
+	const badgeBorderClasses = `${borderWidth} ${borderColor} ${borderRadius} hover:${borderHoverColor}`;
+	const cursorClasses = cursorPointer ? "cursor-pointer" : "";
+	const badgeClasses = `${cursorClasses} ${baseBadgeContainerClasses} ${badgeBorderClasses} ${badgeContainerClasses} ${badgeBackgroundClasses}`;
 
 	const handleClick = (
 		e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
@@ -67,11 +41,6 @@ const Badge: React.FC<BadgeTypes> = ({
 	};
 
 	const baseProps = {
-		className: image
-			? pillClasses.trim()
-			: tagStyle
-			? tagClasses.trim()
-			: badgeClasses.trim(),
 		onClick: handleClick,
 		type: type,
 		"data-testid": testId,
@@ -80,21 +49,33 @@ const Badge: React.FC<BadgeTypes> = ({
 	switch (type) {
 		case "href":
 			return (
-				<a {...baseProps} href={href}>
-					{renderContent()}
-				</a>
+				<>
+					<a {...baseProps} href={href} className={`${badgeClasses}`}>
+						{renderContent()}
+					</a>
+				</>
 			);
 		case "to":
 			if (to) {
 				return (
-					<Link {...baseProps} to={to}>
-						{renderContent()}
-					</Link>
+					<>
+						<Link
+							{...baseProps}
+							to={to}
+							className={`${badgeClasses}`}
+						>
+							{renderContent()}
+						</Link>
+					</>
 				);
 			}
 			break;
 		case "span":
-			return <span {...baseProps}>{renderContent()}</span>;
+			return (
+				<>
+					<span className={`${badgeClasses}`}>{renderContent()}</span>
+				</>
+			);
 		default:
 			return null;
 	}
@@ -103,7 +84,7 @@ const Badge: React.FC<BadgeTypes> = ({
 		return (
 			<>
 				{image && <span>{image}</span>}
-				{icon && (
+				{icon && hasLeftIcon && (
 					<span
 						className={`${iconClasses} max-md:hidden`}
 						data-testid="badge-icon"
@@ -122,13 +103,19 @@ const Badge: React.FC<BadgeTypes> = ({
 					</span>
 				)}
 				<div
-					className={` ${hasMobileStyle ? "max-md:hidden" : ""} ${
-						tagStyle ? "px-3" : ""
-					}`}
+					className={` ${hasMobileStyle ? "max-md:hidden" : ""} `}
 					data-testid="badge-text"
 				>
 					{text}
 				</div>
+				{icon && hasRightIcon && (
+					<span
+						className={`${iconClasses} max-md:hidden`}
+						data-testid="badge-icon"
+					>
+						<>{icon}</>
+					</span>
+				)}
 			</>
 		);
 	}

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

@@ -1,4 +1,4 @@
-import React, { ElementType } from "react";
+import React, { CSSProperties } from "react";
 
 export interface BadgeTypes {
 	onClick?: (
@@ -7,22 +7,31 @@ export interface BadgeTypes {
 	text?: React.ReactNode;
 	cursorPointer?: boolean;
 	type: "href" | "to" | "span";
-	badgeSize?: string | undefined;
 	image?: React.ReactNode;
-	color?: string | undefined;
-	fontColor?: string | undefined;
 	borderColor?: string | undefined;
+	backgroundColor?: string | undefined;
+	borderWidth?: string | undefined;
+	borderRadius?: string | undefined;
+	borderHoverColor?: string | undefined;
+	hoverColor?: string;
 	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;
+	hasLeftIcon?: boolean;
+	hasRightIcon?: boolean;
+	badgeContainerClasses?: string;
+	iconSize?: string | undefined;
+
+	// STORYBOOK PROP TYPES
+	color?: string | undefined;
+	badgeSize?: string | undefined;
 	iconOrder?: "first" | "last";
+	children?: React.ReactNode;
 	testId?: string;
-	tagStyle?: boolean;
-	tagStyleIconColor?: string;
+	textSize?: string;
+	fontColor?: string | undefined;
+	additionalClasses?: string;
 }

package/src/components/Badge/badgeClassNames.tsx

@@ -12,7 +12,6 @@ export const getHoverClasses = (
 			"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",
 		},
 		{
@@ -28,10 +27,8 @@ export const getIconClasses = (
 	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,
+		"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":
@@ -47,18 +44,25 @@ export const getIconClasses = (
 	});
 };
 
-export const getBadgeSizeClasses = (badgeSize: string | undefined) => {
+export const getBadgeSizeClasses = (
+	badgeSize: string | undefined,
+	width: number | undefined,
+	height: number | 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",
+		[`w-${width}`]: width,
+		[`h-${height}`]: height,
+		"w-16 h-8 px-2 py-1 text-xs text-nowrap": badgeSize === "small",
+		"w-20 h-10 px-3 py-2 text-sm text-nowrap": badgeSize === "medium",
+		"w-24 h-12 px-4 py-3 text-base text-nowrap": badgeSize === "large",
 	});
 };
 
 export const getColorClassNames = (
 	color: string | undefined,
 	borderColor: string | undefined,
-	fontColor: string | undefined
+	fontColor: string | undefined,
+	backgroundColor: string | undefined
 ) => {
 	return classNames(
 		{
@@ -75,18 +79,33 @@ export const getColorClassNames = (
 			"border-blue-600": borderColor === "blue",
 			"border-teal-700": borderColor === "green",
 			"border-red-500": borderColor === "red",
-			"border-orange-500": color === "orange",
+			"border-orange-500": borderColor === "orange",
 			"border-slate-950": borderColor === "black",
-			"border-purple-500": color === "purple",
+			"border-purple-500": borderColor === "purple",
 			"border-transparent": borderColor === "none",
 		},
 		{
-			"text-white": fontColor === "white" && color !== "clear",
-			"text-black": fontColor === "black",
+			[`text-${fontColor}`]: fontColor,
+		},
+		{
+			[`bg-${backgroundColor}`]: backgroundColor,
 		}
 	);
 };
 
+export const getBorderRadiusClasses = (borderRadius: string | undefined) => {
+	return classNames({
+		"rounded": borderRadius === "rounded",
+		"rounded-sm": borderRadius === "rounded-sm",
+		"rounded-md": borderRadius === "rounded-md",
+		"rounded-lg": borderRadius === "rounded-lg",
+		"rounded-xl": borderRadius === "rounded-xl",
+		"rounded-2xl": borderRadius === "rounded-2xl",
+		"rounded-3xl": borderRadius === "rounded-3xl",
+		"rounded-full": borderRadius === "rounded-full",
+	});
+};
+
 interface BadgeClassProps {
 	badgeColorClasses: string;
 	hoverClasses: string;
@@ -98,12 +117,14 @@ interface PillStyleClassProps {
 	badgeColorClasses: string;
 	hoverClasses: string;
 	additionalClasses?: string;
+	hasMobileStyle?: boolean;
 }
 
 interface TagProps {
 	badgeColorClasses: string;
 	hoverClasses: string;
 	additionalClasses?: string;
+	hasMobileStyle?: boolean;
 }
 
 export const getBadgeClasses = ({
@@ -113,7 +134,7 @@ export const getBadgeClasses = ({
 	badgeSizeClasses,
 }: BadgeClassProps) => {
 	return classNames(
-		"badge border-2 rounded-full flex justify-center items-center",
+		"badge border-2 flex justify-center items-center",
 		badgeColorClasses,
 		hoverClasses,
 		additionalClasses,
@@ -126,9 +147,9 @@ export const getPillStyleClasses = ({
 	hoverClasses,
 	additionalClasses,
 	hasMobileStyle,
-}: PillStyleClassProps & { hasMobileStyle?: boolean }) => {
+}: PillStyleClassProps) => {
 	return classNames(
-		"flex justify-center items-center w-full border-2 p-2 rounded-full",
+		"flex justify-center items-center w-full border-2 p-2",
 		hasMobileStyle ? "max-md:w-12 max-md:h-12 max-md:p-4" : "",
 		badgeColorClasses,
 		hoverClasses,
@@ -141,9 +162,9 @@ export const getTagClasses = ({
 	hoverClasses,
 	additionalClasses,
 	hasMobileStyle,
-}: TagProps & { hasMobileStyle?: boolean }) => {
+}: TagProps) => {
 	return classNames(
-		"flex justify-between items-center w-fit border-2 rounded-full",
+		"flex justify-between items-center w-fit border-2",
 		hasMobileStyle ? "max-md:w-12 max-md:h-6 max-md:p-2" : "",
 		badgeColorClasses,
 		hoverClasses,

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

@@ -109,11 +109,11 @@ const HorizontalCardTemplate = ({ data }: { data: DataTypes }) => {
 						<div className="pr-2 text-xs">
 							{data.inStock === true
 								? getFontAwesomeIcon(
-										data.inStockProps.inStockIcon
-								  )
+									data.inStockProps.inStockIcon
+								)
 								: getFontAwesomeIcon(
-										data.inStockProps.outOfStockIcon
-								  )}
+									data.inStockProps.outOfStockIcon
+								)}
 						</div>
 						<Text
 							tag={data.inStockProps.tag as TagName}
@@ -167,7 +167,7 @@ const HorizontalCardTemplate = ({ data }: { data: DataTypes }) => {
 					</div>
 					<FormButton
 						text={data.buttonProps.text}
-						color={data.buttonProps.color}
+						backgroundColor={data.buttonProps.color}
 						fontColor={data.buttonProps.fontColor}
 						size={data.buttonProps.size}
 						shape={data.buttonProps.shape}

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

@@ -84,11 +84,11 @@ const VerticalCardTemplate = ({ data }: { data: DataTypes }) => {
 						<div className="pr-2 text-xs">
 							{data.inStock === true
 								? getFontAwesomeIcon(
-										data.inStockProps.inStockIcon
-								  )
+									data.inStockProps.inStockIcon
+								)
 								: getFontAwesomeIcon(
-										data.inStockProps.outOfStockIcon
-								  )}
+									data.inStockProps.outOfStockIcon
+								)}
 						</div>
 						<Text
 							tag={data.inStockProps.tag as TagName}
@@ -136,7 +136,7 @@ const VerticalCardTemplate = ({ data }: { data: DataTypes }) => {
 						</div>
 						<FormButton
 							text={data.buttonProps.text}
-							color={data.buttonProps.color}
+							backgroundColor={data.buttonProps.color}
 							fontColor={data.buttonProps.fontColor}
 							size={data.buttonProps.size}
 							shape={data.buttonProps.shape}