@agilant/toga-blox 1.0.8 → 1.0.9

package/tailwind.config.js

@@ -1,18 +1,28 @@
 /** @type {import('tailwindcss').Config} */
 
-
 module.exports = {
 	mode: "jit",
 	content: ["./src/**/*.{js,jsx,ts,tsx}"],
 
 	theme: {
 		extend: {
+			width: {
+				"42px": "42px",
+				"26px": "26px",
+				"18px": "18px",
+			},
+			height: {
+				"42px": "42px",
+				"26px": "26px",
+				"18px": "18px",
+			},
 			maxHeight: {
 				"view-page": "1000px",
 			},
 			fontSize: {
 				"3xl": "2.25rem",
 				xxs: ".6rem",
+				"11px": "11px",
 			},
 			minWidth: {
 				navDropDown: "25em",
@@ -27,6 +37,4 @@ module.exports = {
 			mono: ["ui-monospace"],
 		},
 	},
-
-	plugins: [require("daisyui")],
 };

package/src/components/Badge/badgeClassNames.tsx

@@ -1,173 +0,0 @@
-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,
-	width: number | undefined,
-	height: number | undefined
-) => {
-	return classNames({
-		[`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,
-	backgroundColor: 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": borderColor === "orange",
-			"border-slate-950": borderColor === "black",
-			"border-purple-500": borderColor === "purple",
-			"border-transparent": borderColor === "none",
-		},
-		{
-			[`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;
-	additionalClasses?: string;
-	badgeSizeClasses?: string;
-}
-
-interface PillStyleClassProps {
-	badgeColorClasses: string;
-	hoverClasses: string;
-	additionalClasses?: string;
-	hasMobileStyle?: boolean;
-}
-
-interface TagProps {
-	badgeColorClasses: string;
-	hoverClasses: string;
-	additionalClasses?: string;
-	hasMobileStyle?: boolean;
-}
-
-export const getBadgeClasses = ({
-	badgeColorClasses,
-	hoverClasses,
-	additionalClasses,
-	badgeSizeClasses,
-}: BadgeClassProps) => {
-	return classNames(
-		"badge border-2 flex justify-center items-center",
-		badgeColorClasses,
-		hoverClasses,
-		additionalClasses,
-		badgeSizeClasses
-	);
-};
-
-export const getPillStyleClasses = ({
-	badgeColorClasses,
-	hoverClasses,
-	additionalClasses,
-	hasMobileStyle,
-}: PillStyleClassProps) => {
-	return classNames(
-		"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,
-		additionalClasses
-	);
-};
-
-export const getTagClasses = ({
-	badgeColorClasses,
-	hoverClasses,
-	additionalClasses,
-	hasMobileStyle,
-}: TagProps) => {
-	return classNames(
-		"flex justify-between items-center w-fit border-2",
-		hasMobileStyle ? "max-md:w-12 max-md:h-6 max-md:p-2" : "",
-		badgeColorClasses,
-		hoverClasses,
-		additionalClasses
-	);
-};

package/src/components/Card/cardClassNames.ts

@@ -1,49 +0,0 @@
-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/Footer/footerClassNames.tsx

@@ -1,57 +0,0 @@
-import classNames from "classNames";
-
-export const getLogoClasses = (
-	logoHoverColor: string | undefined,
-	logoBorderRadius: boolean | undefined
-) => {
-	return classNames(
-		"flex",
-		"justify-center",
-		{
-			"rounded-full": logoBorderRadius === true,
-			"rounded-none": logoBorderRadius === false,
-		},
-		{
-			"hover:bg-blue-300": logoHoverColor === "blue",
-			"hover:bg-teal-300": logoHoverColor === "green",
-		}
-	);
-};
-
-
-export const getBackgroundColor = (
-	backgroundColor: string | undefined,
-) => {
-	return classNames(
-		{
-			"bg-teal-50": backgroundColor === "green",
-			"bg-slate-200": backgroundColor === "gray",
-			"bg-transparent": backgroundColor === "none",
-		},
-	);
-};
-
-export const getSocialPlacement = (
-	socialPlacement: string | undefined,
-) => {
-	return classNames(
-		{
-			"justify-start pl-4": socialPlacement === "left",
-			"justify-center text-center": socialPlacement === "center",
-			"justify-end": socialPlacement === "right",
-		}
-	);
-};
-
-export const getCopyRightPlacement = (
-	copyRightTextPlacement: string | undefined,
-) => {
-	return classNames(
-		{
-			"justify-start pl-4": copyRightTextPlacement === "left",
-			"justify-center": copyRightTextPlacement === "center",
-			"justify-end": copyRightTextPlacement === "right",
-		}
-	);
-};
-

package/src/components/FormButton/formButtonClassNames.tsx

@@ -1,153 +0,0 @@
-import classNames from "classNames";
-
-export const getHoverClassNames = (
-	hoverBackground: string | undefined,
-	hoverFontColor: string | undefined,
-	hoverUnderline: boolean | undefined,
-	hoverBorderColor: string | undefined,
-	isDisabled: boolean | undefined
-) => {
-	return classNames(
-		{
-			"hover:bg-blue-200": hoverBackground === "blue" && !isDisabled,
-			"hover:bg-teal-100": hoverBackground === "green" && !isDisabled,
-			"hover:bg-gray-200": hoverBackground === "grey" && !isDisabled,
-			"hover:bg-slate-950": hoverBackground === "black" && !isDisabled,
-			"hover:bg-transparent text-black": hoverBackground === "none" && !isDisabled,
-		},
-		{
-			"hover:text-blue-800": hoverFontColor === "blue" && !isDisabled,
-			"hover:text-teal-800": hoverFontColor === "green" && !isDisabled,
-			"hover:text-gray-800": hoverFontColor === "grey" && !isDisabled,
-			"hover:text-slate-50": hoverFontColor === "white" && !isDisabled,
-			"hover:text-black": hoverFontColor === "black" && !isDisabled,
-		},
-		{
-			"hover:border-blue-800": hoverBorderColor === "blue" && !isDisabled,
-			"hover:border-teal-800":
-				hoverBorderColor === "green" && !isDisabled,
-			"hover:border-gray-800": hoverBorderColor === "grey" && !isDisabled,
-			"hover:border-black": hoverBorderColor === "black" && !isDisabled,
-			"hover:border-transparent":
-				hoverBackground === "none" && !isDisabled,
-		},
-		{
-			"hover:underline hover:underline-offset-4":
-				hoverUnderline === true && !isDisabled,
-			"": hoverUnderline === false || isDisabled,
-		},
-		{
-			"opacity-50 cursor-not-allowed": isDisabled === true,
-			"cursor-pointer": isDisabled === false,
-		}
-	);
-};
-
-export const getColorClassNames = (
-	color: string | undefined,
-	fontColor: string | undefined,
-	borderColor: string | undefined
-) => {
-	return classNames(
-		{
-			"bg-blue-600": color === "blue",
-			"bg-teal-700": color === "green",
-			"bg-gray-600": color === "grey",
-			"bg-transparent border-black": color === "clear",
-		},
-		{
-			"border-blue-600": borderColor === "blue",
-			"border-teal-700": borderColor === "green",
-			"border-gray-600": borderColor === "grey",
-			"border-transparent": borderColor === "none",
-		},
-		{
-			"text-white": fontColor === "white" && color !== "clear",
-			"text-black": fontColor === "black",
-		},
-		{}
-	);
-};
-
-export const getIconClasses = (iconOrder: string | undefined) => {
-	return classNames({
-		"flex items-center order-first": iconOrder === "first",
-		"flex items-center order-last pl-2": iconOrder === "last",
-	});
-};
-
-export const getSizeClasses = (
-	buttonWide: boolean | undefined,
-	size: string | undefined
-) => {
-	return classNames(
-		{
-			"btn-wide": buttonWide === true,
-			"": buttonWide === false,
-		},
-		{
-			"text-xs": size === "xs",
-			"text-sm": size === "sm",
-			"text-md": size === "md",
-			"text-lg": size === "lg",
-			"text-xl": size === "xl",
-			[`text-${size}`]: size !== undefined,
-		}
-	);
-};
-
-export const getTextClasses = (
-	textStyle: string | undefined,
-	fontFamily: string | undefined
-) => {
-	return classNames(
-		{
-			"font-normal": textStyle === "normal",
-			"font-bold": textStyle === "bold",
-		},
-		{
-			"font-sans": fontFamily === "sans",
-			"font-serif": fontFamily === "serif",
-			"font-mono": fontFamily === "mono",
-		}
-	);
-};
-
-interface ButtonClassProps {
-	buttonColorClasses: string;
-	buttonSizeClasses: string;
-	buttonShapeClasses: string;
-	textStyleClasses: string;
-	hoverClasses: string;
-	hasShadow: boolean;
-	customWidth?: string;
-	customHeight?: string;
-	additionalClasses?: string;
-}
-
-export const getButtonClasses = ({
-	buttonColorClasses,
-	buttonSizeClasses,
-	buttonShapeClasses,
-	textStyleClasses,
-	hoverClasses,
-	hasShadow,
-	customWidth,
-	customHeight,
-	additionalClasses,
-}: ButtonClassProps) => {
-	return classNames(
-		"border-2 p-1 rounded-full flex justify-center max-sm:text-xs",
-		buttonColorClasses,
-		buttonSizeClasses,
-		buttonShapeClasses,
-		textStyleClasses,
-		hoverClasses,
-		{
-			"shadow-md": hasShadow,
-		},
-		customWidth,
-		customHeight,
-		additionalClasses
-	);
-};

package/src/components/GenericList/genericListClassNames.tsx

@@ -1,8 +0,0 @@
-import classNames from "classNames";
-
-export const getListDirectionClasses = (listDirection: string | undefined) => {
-	return classNames({
-		"flex": listDirection === "horizontal",
-		"flex flex-col": listDirection === "vertical",
-	});
-};

package/src/components/Header/headerClassNames.tsx

@@ -1,50 +0,0 @@
-import classNames from "classNames";
-
-
-export const getLogoClasses = (logoBorderRadius: boolean | undefined, logoHoverColor: string | undefined) => {
-
-	return classNames(
-		"border-transparent",
-		"p-1",
-		{
-			"rounded-full": logoBorderRadius === true,
-			"rounded-none": logoBorderRadius === false,
-		},
-		{
-			"hover:bg-blue-300": logoHoverColor === "blue",
-			"hover:bg-red-300": logoHoverColor === "red",
-			"hover:bg-teal-100": logoHoverColor === "green",
-		}
-	);
-};
-
-export const getHeaderClasses = (backgroundColor: string | undefined, bottomBorderColor: string | undefined,) => {
-	return classNames(
-		{
-			"bg-teal-100": backgroundColor === "green",
-			"bg-blue-100": backgroundColor === "blue",
-			"bg-slate-200": backgroundColor === "gray",
-			"bg-transparent": backgroundColor === "none",
-		},
-		{
-			"border-teal-500": bottomBorderColor === "green",
-			"border-blue-500": bottomBorderColor === "blue",
-			"border-slate-950": bottomBorderColor === "black",
-			"border-transparent": bottomBorderColor === "none",
-		}
-	);
-};
-
-export const getMobileMenuClasses = (
-	mobileMenuBackground: string | undefined,
-) => {
-	return classNames(
-		{
-			"bg-teal-50": mobileMenuBackground === "green",
-			"bg-blue-50": mobileMenuBackground === "blue",
-			"bg-slate-100": mobileMenuBackground === "gray",
-			"bg-slate-50": mobileMenuBackground === "white",
-			"bg-transparent": mobileMenuBackground === "none",
-		}
-	);
-};