@agilant/toga-blox 1.0.5 → 1.0.7

package/src/components/Input/Input.test.tsx

@@ -15,9 +15,9 @@ describe("<Input /> with all props", () => {
 				// LABEL
 				label={
 					<Text
-						size="md"
-						color="primary"
-						fontFamily="serif"
+						size="text-md"
+						color="text-black"
+						fontFamily="font-serif"
 						text="Search for items"
 						tag="h2"
 						additionalClasses="mb-0 pb-2 pl-2"
@@ -48,7 +48,7 @@ describe("<Input /> with all props", () => {
 						text="Submit"
 						as="button"
 						hoverBackground="green"
-						color="green"
+						backgroundColor="green"
 						icon={<FontAwesomeIcon icon={faCircleArrowRight} />}
 						fontColor="white"
 						additionalClasses="items-center px-4"

package/src/components/Input/Input.tsx

@@ -63,7 +63,7 @@ const Input: React.FC<InputTypes> = ({
 			text="Submit"
 			as="button"
 			hoverBackground="green"
-			color="red"
+			backgroundColor="red"
 			icon={<FontAwesomeIcon icon={faCircleArrowRight} />}
 			fontColor="white"
 			borderColor="green"
@@ -158,11 +158,10 @@ const Input: React.FC<InputTypes> = ({
 							onChange={handleChange}
 							value={inputValue}
 							data-testid="input-element"
-							className={`block w-full border-2 p-2 ${inputTextClasses} ${inputWithButtonClasses} ${inputBackgroundClasses} ${inputPaddingClasses}  ${
-								!hasValidation
+							className={`block w-full border-2 p-2 ${inputTextClasses} ${inputWithButtonClasses} ${inputBackgroundClasses} ${inputPaddingClasses}  ${!hasValidation
 									? inputBorderColor
 									: inputBorderClasses
-							}`}
+								}`}
 						/>
 					</div>
 
@@ -196,11 +195,10 @@ const Input: React.FC<InputTypes> = ({
 						onChange={handleChange}
 						value={inputValue}
 						data-testid="input-element"
-						className={`block w-full border-2 ${inputTextClasses} ${inputShapeClasses} ${inputBackgroundClasses} ${inputPaddingClasses} ${
-							!hasValidation
+						className={`block w-full border-2 ${inputTextClasses} ${inputShapeClasses} ${inputBackgroundClasses} ${inputPaddingClasses} ${!hasValidation
 								? inputBorderColor
 								: inputBorderClasses
-						}`}
+							}`}
 					/>
 					{hasRightIcon && (
 						<div

package/src/components/Nav/DUMMYNAVDATA.json

@@ -231,4 +231,4 @@
 			]
 		}
 	]
-}
+}

package/src/components/Page/ViewPageTemplate.stories.tsx

@@ -35,8 +35,7 @@ export default {
 			description: "nodes that can be passed to the component",
 		},
 	},
-
-	// tags: ["autodocs"],
+	tags: ["autodocs"],
 } as Meta;
 
 const Template: StoryFn<typeof StorybookViewTemplatePage> = (args) => (
@@ -71,12 +70,12 @@ ViewWithHeroAndCardsWithGlassHeader.args = {
 				hasNavItems={true}
 				hasMobileMenu={true}
 				logoBorderRadius={true}
-				logoHoverColor="blue"
-				backgroundColor="gray"
-				bottomBorderColor="black"
+				logoHoverColor="hover:bg-blue-500"
+				backgroundColor="bg-gray-500"
+				bottomBorderColor="border-black"
 				mobileOpenIcon={getFontAwesomeIcon("hamburger")}
 				mobileCloseIcon={getFontAwesomeIcon("x")}
-				mobileMenuBackground="blue"
+				mobileMenuBackground="bg-blue-500"
 				hasMobileIcons={true}
 				hasMobileNavItems={true}
 				hasMobileBadge={false}
@@ -96,10 +95,9 @@ ViewWithHeroAndCardsWithGlassHeader.args = {
 					<Badge
 						type="href"
 						to="#"
-						color="blue"
-						hoverColor="blue"
-						borderColor="none"
-						tagStyle={false}
+						color="text-blue-500"
+						hoverColor="hover:text-blue-500"
+						borderColor="border-none"
 						mobileIcon={getFontAwesomeIcon("phone")}
 						mobileIconLabel="Contact Us"
 						onClick={() => alert("Redirect to Contact Us page")}
@@ -114,17 +112,17 @@ ViewWithHeroAndCardsWithGlassHeader.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"
@@ -146,20 +144,20 @@ ViewWithHeroAndCardsWithGlassHeader.args = {
 						navData={DUMMYCOMPASSNAVDATA}
 						navBackgroundColor={"#FFFFF"}
 						parentHoverBackground={"none"}
-						parentHoverFontColor={"black"}
+						parentHoverFontColor={"text-black"}
 						parentHoverUnderline={true}
 						parentHoverBorderColor={"none"}
-						parentShape={"cornered"}
+						parentShape={"rounded"}
 						parentBackground={"none"}
 						parentBorderColor={"none"}
-						submenuBackgroundColor={"white"}
-						submenuHoverBackground={"blue"}
+						submenuBackgroundColor={"bg-white"}
+						submenuHoverBackground={"hover:bg-blue-500"}
 						submenuHoverBorderStyle={"top-bottom"}
-						submenuHoverBorderColor={"blue"}
+						submenuHoverBorderColor={"border-blue-500"}
 						includeSubmenuImages={true}
 						mobileBreakpoint={"extraLarge"}
 						accordionParentStyle={
-							"cornered p-2 w-full border-b-2 border-b-blue-700 text-black"
+							"rounded p-2 w-full border-b-2 border-b-blue-700 text-black"
 						}
 						accordionExpandedStyle={"pl-2 py-3"}
 					/>
@@ -170,18 +168,18 @@ ViewWithHeroAndCardsWithGlassHeader.args = {
 						label={undefined}
 						inputType={"text"}
 						inputName={"search"}
-						borderColor="gray"
+						borderColor="border-gray-500"
 						hasPlaceholder
 						placeholder={"Search"}
 						hasButton
-						backgroundColor="white"
+						backgroundColor="bg-white"
 						additionalClasses="bg-blue-500"
 						button={
 							<FormButton
 								icon={getFontAwesomeIcon("search")}
-								color="blue"
-								hoverBackground="black"
-								hoverFontColor="white"
+								backgroundColor="bg-blue-500"
+								hoverBackground="hover:bg-black"
+								hoverFontColor="hover:text-white"
 								additionalClasses="h-full w-8 justify-center"
 								shape="none"
 							/>
@@ -195,7 +193,7 @@ ViewWithHeroAndCardsWithGlassHeader.args = {
 		<PageSection
 			key="pageSectionOne"
 			sectionContainerClasses="flex flex-col w-full h-full bg-slate-100 p-6
-			justify-center items-center max-sm:p-2 max-w-pageSectionMaxWidth mx-auto"
+      justify-center items-center max-sm:p-2 max-w-pageSectionMaxWidth mx-auto"
 		>
 			<GenericList
 				data={DUMMYCOMPASSPRODUCTDATA}
@@ -237,8 +235,8 @@ ViewWithTableAndTitle.args = {
 		<Hero key="hero" textAlignment={"left"} background="gradient" />,
 		<PageSection key="37">
 			<Text
-				size={"xxxl"}
-				color={"black"}
+				size={"text-2xl"}
+				color={"text-black"}
 				text={"Staff"}
 				fontFamily={""}
 				tag="h1"
@@ -278,12 +276,12 @@ CompassPageView.args = {
 					hasMobileMenu={true}
 					hasAnimatedHamburgerButton={true}
 					logoBorderRadius={true}
-					logoHoverColor="green"
-					backgroundColor="gray"
-					bottomBorderColor="green"
+					logoHoverColor="hover:bg-green-500"
+					backgroundColor="bg-gray-500"
+					bottomBorderColor="border-green-500"
 					mobileOpenIcon={getFontAwesomeIcon("hamburger")}
 					mobileCloseIcon={getFontAwesomeIcon("x")}
-					mobileMenuBackground="green"
+					mobileMenuBackground="bg-green-500"
 					hasMobileIcons={true}
 					hasMobileNavItems={true}
 					hasMobileBadge={false}
@@ -292,10 +290,9 @@ CompassPageView.args = {
 						<Badge
 							type="href"
 							to="#"
-							color="green"
-							hoverColor="green"
-							borderColor="none"
-							tagStyle={false}
+							color="text-green-500"
+							hoverColor="hover:text-green-500"
+							borderColor="border-none"
 							mobileIcon={getFontAwesomeIcon("phone")}
 							mobileIconLabel="Contact Us"
 							onClick={() => alert("Redirect to Contact Us page")}
@@ -310,17 +307,17 @@ CompassPageView.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"
@@ -342,20 +339,20 @@ CompassPageView.args = {
 							navData={DUMMYCOMPASSNAVDATA}
 							navBackgroundColor={"#FFFFF"}
 							parentHoverBackground={"none"}
-							parentHoverFontColor={"black"}
+							parentHoverFontColor={"text-black"}
 							parentHoverUnderline={true}
 							parentHoverBorderColor={"none"}
-							parentShape={"cornered"}
+							parentShape={"rounded"}
 							parentBackground={"none"}
 							parentBorderColor={"none"}
-							submenuBackgroundColor={"white"}
-							submenuHoverBackground={"green"}
+							submenuBackgroundColor={"bg-white"}
+							submenuHoverBackground={"hover:bg-green-500"}
 							submenuHoverBorderStyle={"top-bottom"}
-							submenuHoverBorderColor={"green"}
+							submenuHoverBorderColor={"border-green-500"}
 							includeSubmenuImages={true}
 							mobileBreakpoint={"extraLarge"}
 							accordionParentStyle={
-								"cornered p-2 w-full border-b-2 border-b-teal-700 text-black"
+								"rounded p-2 w-full border-b-2 border-b-teal-700 text-black"
 							}
 							accordionExpandedStyle={"pl-2 py-3"}
 						/>
@@ -366,18 +363,18 @@ CompassPageView.args = {
 							label={undefined}
 							inputType={"text"}
 							inputName={"search"}
-							borderColor="gray"
+							borderColor="border-gray-500"
 							hasPlaceholder
 							placeholder={"Search"}
 							hasButton
-							backgroundColor="white"
+							backgroundColor="bg-white"
 							additionalClasses="bg-blue-500"
 							button={
 								<FormButton
 									icon={getFontAwesomeIcon("search")}
-									color="green"
-									hoverBackground="black"
-									hoverFontColor="white"
+									backgroundColor="bg-green-500"
+									hoverBackground="hover:bg-black"
+									hoverFontColor="hover:text-white"
 									additionalClasses="h-full w-8 justify-center"
 									shape="none"
 								/>
@@ -394,9 +391,9 @@ CompassPageView.args = {
 				src="../../../assets/compass-tech-hero-bg.png"
 				text={
 					<Text
-						size="xxxl"
-						color="white"
-						fontFamily="serif"
+						size="text-2xl"
+						color="text-white"
+						fontFamily="font-serif"
 						text="Equip your team with exactly what they need"
 						tag="h1"
 						additionalClasses="w-3/4 max-sm:text-xl max-sm:w-3/4"
@@ -406,12 +403,12 @@ CompassPageView.args = {
 			<PageSection
 				key="pageSection"
 				sectionContainerClasses="w-full bg-slate-100 flex flex-col p-6
-			justify-center items-center h-[100%]"
+      justify-center items-center h-[100%]"
 			>
 				<Text
-					size="xxxl"
-					color="black"
-					fontFamily="serif"
+					size="text-2xl"
+					color="text-black"
+					fontFamily="font-serif"
 					text="Kits"
 					tag="h2"
 					additionalClasses="my-4  max-sm:text-xl"
@@ -420,7 +417,7 @@ CompassPageView.args = {
 			<PageSection
 				key="pageSectionOne"
 				sectionContainerClasses="flex flex-col w-full h-full bg-slate-100 p-6
-			justify-center items-center max-sm:p-2 max-w-pageSectionMaxWidth mx-auto"
+      justify-center items-center max-sm:p-2 max-w-pageSectionMaxWidth mx-auto"
 			>
 				<GenericList
 					data={DUMMYCOMPASSPRODUCTDATA}
@@ -445,9 +442,9 @@ CompassPageView.args = {
 			</PageSection>
 			<PageSection sectionContainerClasses="flex w-full bg-yellow-400 flex p-6 justify-center items-center h-[100%] mt-6 max-sm:flex-col">
 				<Text
-					size="xl"
-					color="black"
-					fontFamily="serif"
+					size="text-xl"
+					color="text-black"
+					fontFamily="font-serif"
 					text="Help us improve your experience:"
 					tag="h2"
 					additionalClasses="p-6 max-sm:p-2 max-sm:text-lg"
@@ -461,14 +458,14 @@ CompassPageView.args = {
 							fontFamily={""}
 						/>
 					}
-					color="green"
-					fontColor="white"
+					backgroundColor="bg-green-500"
+					fontColor="text-white"
 					size="md"
-					shape="semiRounded"
-					borderColor="none"
-					hoverBackground="green"
-					hoverFontColor="green"
-					hoverBorderColor="green"
+					shape="rounded"
+					borderColor="border-none"
+					hoverBackground="hover:bg-green-500"
+					hoverFontColor="hover:text-green-500"
+					hoverBorderColor="hover:border-green-500"
 					hoverUnderline={true}
 					onClick={() => alert("Button clicked!")}
 					as="a"
@@ -485,7 +482,7 @@ CompassPageView.args = {
 				}
 				title={
 					<Text
-						size={"xl"}
+						size={"text-xl"}
 						color={""}
 						text={"Compass Website"}
 						fontFamily={""}
@@ -495,7 +492,7 @@ CompassPageView.args = {
 				}
 				slogan={
 					<Text
-						size={"md"}
+						size={"text-md"}
 						color={""}
 						text={"Great slogan goes here."}
 						fontFamily={""}
@@ -506,7 +503,7 @@ CompassPageView.args = {
 				copyRightText={
 					<Text
 						size={"md"}
-						color={"black"}
+						color={"text-black"}
 						text="Copyright © 2024 - All right reserved by Generic Company"
 						fontFamily={""}
 						additionalClasses="text-center"
@@ -515,7 +512,7 @@ CompassPageView.args = {
 				socialTitle={
 					<Text
 						size={"md"}
-						color={"black"}
+						color={"text-black"}
 						text="Connect"
 						fontFamily={""}
 						additionalClasses="font-bold uppercase w-full"
@@ -524,7 +521,7 @@ CompassPageView.args = {
 				contactTitle={
 					<Text
 						size={"md"}
-						color={"black"}
+						color={"text-black"}
 						text="Contact Us:"
 						fontFamily={""}
 						additionalClasses="font-bold uppercase"
@@ -533,8 +530,8 @@ CompassPageView.args = {
 				logoBorderRadius={true}
 				hasNavItems={true}
 				hasSocial={true}
-				logoHoverColor="green"
-				backgroundColor="green"
+				logoHoverColor="hover:bg-green-500"
+				backgroundColor="bg-green-500"
 				accordionGap="gap-1"
 				copyRightTextPlacement="center"
 				socialPlacement="center"

package/src/components/Text/Text.stories.tsx

@@ -1,60 +1,50 @@
-import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
-import Text, { TextTypes } from ".";
-
-interface TextStoryProps extends TextTypes {
-	size: "xs" | "sm" | "md" | "lg" | "xl";
-	color: "red" | "blue" | "green" | "primary" | "slate";
-	as: "h1" | "h2" | "h3" | "h4" | "h5" | "p";
-	fontFamily: "sans" | "mono" | "serif";
-	children: React.ReactNode;
-}
+import Text from "./Text";
+import { TextTypes } from "./Text.types";
 
 export default {
 	title: "Components/Text",
 	component: Text,
 	argTypes: {
 		size: {
-			control: "select",
-			options: ["xs", "sm", "md", "lg", "xl"],
-			description: "The font size for the text.",
+			control: "none",
+			description: "The font size for the text. Use Tailwind CSS classes like 'text-xs', 'text-sm', 'text-md', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl'. Default is 'text-base'.",
 		},
 		color: {
-			control: "select",
-			options: ["red", "blue", "green", "slate"],
-			description: "The color of the text.",
+			control: "none",
+			description: "The color of the text. Use Tailwind CSS classes like 'text-red-800', 'text-blue-800', 'text-green-800', 'text-slate-950', 'text-black', etc. Default is 'text-black'.",
 		},
 		tag: {
-			control: "select",
-			options: ["h1", "h2", "h3", "h4", "h5", "p"],
-			description: "The type of HTML element the text should be.",
+			control: "none",
+			description: "The type of HTML element the text should be. Options include 'h1', 'h2', 'h3', 'h4', 'h5', 'p', 'span'. Default is 'span'.",
 		},
 		fontFamily: {
-			control: "select",
-			options: ["sans", "mono", "serif"],
-			description: "The type of font family.",
+			control: "none",
+			description: "The type of font family. Use Tailwind CSS classes like 'font-sans', 'font-mono', 'font-serif'. Default is 'font-sans'.",
 		},
 		text: {
-			control: "text",
-			description: "The main text displayed on the toaster.",
+			control: "none",
+			description: "The main text displayed on the component.",
+		},
+		additionalClasses: {
+			control: "none",
+			description: "Additional Tailwind CSS classes to be added.",
 		},
 	},
-	// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
 	tags: ["autodocs"],
 	parameters: {
-		// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
 		layout: "centered",
 	},
-} as Meta<TextStoryProps>;
+} as Meta<TextTypes>;
 
-const Template: StoryFn<TextStoryProps> = (args) => <Text {...args} />;
+const Template: StoryFn<TextTypes> = (args) => <Text {...args} />;
 
 export const Primary = Template.bind({});
 Primary.args = {
-	size: "xl",
-	color: "slate",
+	size: "text-2xl",
+	color: "text-blue-500",
 	tag: "h2",
-	fontFamily: "sans",
+	fontFamily: "font-mono",
 	text: "Testing",
 	additionalClasses: "p-5",
 };

package/src/components/Text/Text.tsx

@@ -1,77 +1,26 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import { TextTypes } from "./Text.types";
 
-const sizeClassesMap = {
-	xs: "text-xs",
-	sm: "text-sm",
-	md: "text-md",
-	lg: "text-lg",
-	xl: "text-xl",
-	xxl: "text-2xl",
-	xxxl: "text-3xl",
-};
-
-const colorClassesMap: { [key: string]: string } = {
-	slate: "text-slate-950",
-	red: "text-red-800",
-	blue: "text-blue-800",
-	green: "text-teal-800",
-	black: "text-slate-950",
-	white: "text-slate-100",
-};
-
-const fontFamilyMap = {
-	sans: "font-sans",
-	serif: "font-serif",
-	mono: "font-mono",
-};
-
 const Text: React.FC<TextTypes> = ({
-	size,
-	color = "slate",
+	size = "text-base",
+	color = "text-black",
 	tag = "span",
 	text,
-	fontFamily = "sans",
-	additionalClasses,
+	fontFamily = "font-sans",
+	additionalClasses = "",
 	...props
 }) => {
-	const textSizeClasses = sizeClassesMap[size as keyof typeof sizeClassesMap];
-	const textColorClasses = colorClassesMap[color];
-	const fontFamilyClasses =
-		fontFamilyMap[fontFamily as keyof typeof fontFamilyMap];
+	const ElementTag: React.ElementType = tag as keyof JSX.IntrinsicElements | React.ComponentType;
 
-	let textClasses = `
+	const className = `
+		${size}
+		${color}
+		${fontFamily}
 		${additionalClasses}
-	    ${textSizeClasses}
-		${textColorClasses}
-		${fontFamilyClasses}
-
-	  `;
-
-	// Fixing the TS error on TagName w/ adding type string triggered this error on ElementTag:
-		// The error message is indicating that a string value is not assignable to
-		// the type React.ElementType. This is because React.ElementType is expecting
-		// a React component, not a string. However, in React, a string can be used
-		// as a component if it represents a valid HTML tag.
-
-		// The issue here is that TypeScript is not correctly inferring the type of tag.
-		// You can solve this by explicitly telling TypeScript that tag can be a string
-		// representing a valid HTML tag or a React component. Here's how you can do it:
-		// This tells TypeScript that tag can be a string representing a valid HTML tag
-		// (like "span", "div", etc.) or a React component. This should solve your issue.
-		// If it doesn't, please provide more context or check the rest of
-		// your code for potential type mismatches.
-
-	// Solution:
-	const ElementTag: React.ElementType = tag as
-		| keyof JSX.IntrinsicElements
-		| React.ComponentType;
-
-	// Was previously:
-	// const ElementTag = tag ?? "span";
+	`;
 
 	return (
-		<ElementTag data-testid="text" className={`${textClasses}`} {...props}>
+		<ElementTag data-testid="text" className={className} {...props}>
 			{text}
 		</ElementTag>
 	);

package/src/components/Text/Text.types.ts

@@ -3,10 +3,10 @@ import { ReactNode } from "react";
 export type TagName = "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | string;
 
 export interface TextTypes {
-	size: string;
-	color: "red" | "blue" | "green" | "black" | "slate" | string;
+	size?: string;
+	color?: string;
 	tag?: TagName;
 	text: ReactNode;
-	fontFamily: "sans" | "mono" | "serif" | string;
-	additionalClasses?: string | undefined;
+	fontFamily?: string;
+	additionalClasses?: string;
 }