@agilant/toga-blox 1.0.8 → 1.0.9

package/src/components/Input/inputClassNames.tsx

@@ -1,169 +0,0 @@
-import classNames from "classNames";
-
-// edits the input container border color & focus outline color
-export const getInputBorderClassNames = (borderColor: string | undefined) =>
-	classNames({
-		"border-teal-500 focus-within:outline-teal-500 focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
-			borderColor === "green",
-		"border-blue-500 focus-within:outline-blue-500 focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
-			borderColor === "blue",
-		"border-slate-400 focus-within:outline-slate-400 focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
-			borderColor === "grey",
-		"border-black focus-within:outline-black focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
-			borderColor === "black",
-		"border-transparent focus-within:outline-transparent focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
-			borderColor === "none",
-		[`border-${borderColor} focus-within:outline-${borderColor} focus-within:outline focus-within:outline-2 focus-within:outline-offset-1`]:
-			borderColor !== undefined,
-	});
-
-export const getSuccessColorClasses = (successBorder: string | undefined) =>
-	classNames({
-		"focus-within:outline-green-500 border-green-500 focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
-			successBorder === "green",
-		"focus-within:outline-blue-500 border-blue-500 focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
-			successBorder === "blue",
-		"focus-within:outline-grey-500 border-grey-500 focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
-			successBorder === "grey",
-		"focus-within:outline-black border-black focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
-			successBorder === "black",
-		[`focus-within:outline-${successBorder} border-${successBorder} focus-within:outline focus-within:outline-2 focus-within:outline-offset-1`]:
-			successBorder !== undefined,
-	});
-
-export const getErrorColorClasses = (errorBorder: string | undefined) =>
-	classNames({
-		"focus-within:outline-red-500 border-red-500 focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
-			errorBorder === "red",
-		"focus-within:outline-orange-500 border-orange-500 focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
-			errorBorder === "orange",
-		"focus-within:outline-black border-black focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
-			errorBorder === "black",
-		[`focus-within:outline-${errorBorder} border-${errorBorder} focus-within:outline focus-within:outline-2 focus-within:outline-offset-1`]:
-			errorBorder !== undefined,
-	});
-
-export const getInputPaddingClassNames = (
-	hasButton: boolean | undefined,
-	hasLeftIcon: boolean | undefined,
-	hasRightIcon: boolean | undefined
-) =>
-	classNames({
-		// NO ICONS OR BUTTON
-		"py-2 px-3":
-			hasButton === false &&
-			hasLeftIcon === false &&
-			hasRightIcon === false,
-
-		// LEFT ICON AND BUTTON
-		"py-3 pl-14":
-			hasButton === true &&
-			hasLeftIcon === true &&
-			hasRightIcon === false,
-
-		// BUTTON ONLY
-		"py-3 px-3":
-			hasButton === true &&
-			hasLeftIcon === false &&
-			hasRightIcon === false,
-
-		// LEFT ICON ONLY
-		"pl-12 py-2":
-			hasLeftIcon === true &&
-			hasRightIcon === false &&
-			hasButton === false,
-
-		// RIGHT ICON ONLY
-		"pr-10 py-2 pl-3":
-			hasRightIcon === true &&
-			hasLeftIcon === false &&
-			hasButton === false,
-
-		// DUAL ICONS ONLY
-		"py-2 pl-12":
-			hasRightIcon === true &&
-			hasLeftIcon === true &&
-			hasButton === false,
-	});
-
-// edits the background color of the input element
-export const getInputBackgroundClassNames = (
-	backgroundColor: string | undefined
-) =>
-	classNames({
-		"bg-white": backgroundColor === "white",
-		"bg-blue-100": backgroundColor === "blue",
-		"bg-slate-100": backgroundColor === "grey",
-		"bg-transparent": backgroundColor === "none",
-		[`bg-${backgroundColor}`]: backgroundColor !== undefined,
-	});
-
-// edits text styles of the input element
-export const getInputTextClasses = (inputTextSize: string | undefined) => {
-	return classNames({
-		"text-sm": inputTextSize === "small",
-		"text-md": inputTextSize === "medium",
-		"text-lg": inputTextSize === "large",
-		[`text-${inputTextSize}`]: inputTextSize !== undefined,
-	});
-};
-
-// manages the border radius of the input
-export const getInputShape = (inputShape: string | undefined) =>
-	classNames({
-		"rounded-none": inputShape === "cornered",
-		"rounded-md": inputShape === "semiRounded",
-		"rounded-full": inputShape === "rounded",
-	});
-
-// manages the border radius of the input when the input has a button with it
-export const inputButtonWithClasses = (inputShape: string | undefined) =>
-	classNames({
-		"rounded-tl-none rounded-bl-none": true,
-		"rounded-tr-none rounded-br-none": inputShape === "cornered",
-		"rounded-tr-md rounded-br-md": inputShape === "semiRounded",
-		"rounded-tr-full rounded-br-full": inputShape === "rounded",
-	});
-
-// manages the placement of the label
-export const getLabelPlacement = (labelPlacement: string | undefined) =>
-	classNames({
-		"flex items-center pr-3": labelPlacement === "left",
-		"": labelPlacement === "top",
-	});
-
-// toggles whether label is visible or not
-export const getLabelVisibility = (labelVisible: boolean | undefined) =>
-	classNames({
-		"sr-only": labelVisible === false,
-		"": labelVisible === true,
-	});
-
-export const getIconClasses = (
-	iconColor: string | undefined,
-	iconBackgroundColor: string | undefined,
-	inputShape: string | undefined
-) => {
-	return classNames(
-		{
-			"text-blue-500": iconColor === "blue",
-			"text-teal-500": iconColor === "green",
-			"text-black": iconColor === "black",
-			"text-white": iconColor === "white",
-			[`text-${iconColor}`]: iconColor !== undefined,
-		},
-		{
-			"bg-blue-200": iconBackgroundColor === "blue",
-			"bg-slate-200": iconBackgroundColor === "grey",
-			"bg-teal-100": iconBackgroundColor === "green",
-			"bg-black": iconBackgroundColor === "black",
-			"bg-transparent": iconBackgroundColor === "none",
-			[`bg-${iconBackgroundColor}`]: iconBackgroundColor !== undefined,
-		},
-		{
-			"rounded-none": inputShape === "cornered",
-			"rounded-md": inputShape === "semiRounded",
-			"rounded-full": inputShape === "rounded",
-		}
-	);
-};

package/src/components/Nav/navClassNames.tsx

@@ -1,192 +0,0 @@
-import classNames from "classNames";
-
-export const getNavBackgroundColor = (navBackgroundColor: string | undefined) => {
-	return classNames(
-		{
-			"bg-blue-500": navBackgroundColor === "blue",
-			"bg-teal-800": navBackgroundColor === "green",
-			":bg-gray-500": navBackgroundColor === "grey",
-			":bg-transparent": navBackgroundColor === "none",
-		})
-};
-
-export const getParentHoverClassNames = (
-	parentHoverBackground: string | undefined,
-	parentHoverBorderColor: string | undefined,
-) => {
-	return classNames(
-		{
-			"hover:bg-blue-800": parentHoverBackground === "blue",
-			"hover:bg-teal-800": parentHoverBackground === "green",
-			"hover:bg-gray-800": parentHoverBackground === "grey",
-			"hover:bg-white": parentHoverBackground === "white",
-			"hover:bg-transparent text-black": parentHoverBackground === "none",
-		},
-		{
-			"hover:border-blue-300": parentHoverBorderColor === "blue",
-			"hover:border-teal-300": parentHoverBorderColor === "green",
-			"hover:border-gray-300": parentHoverBorderColor === "grey",
-			"hover:border-black": parentHoverBorderColor === "black",
-			"hover:border-transparent": parentHoverBorderColor === "none",
-		},
-
-	);
-};
-
-
-export const getParentHoverTextClassNames = (
-	parentHoverFontColor: string | undefined,
-	parentHoverUnderline: boolean | undefined
-) => {
-	return classNames(
-		{
-			"hover:text-blue-800": parentHoverFontColor === "blue",
-			"hover:text-teal-800": parentHoverFontColor === "green",
-			"hover:text-slate-100": parentHoverFontColor === "white",
-			"hover:text-slate-950": parentHoverFontColor === "black",
-		},
-		{
-			"hover:underline hover:underline-offset-4":
-				parentHoverUnderline === true,
-			"": parentHoverUnderline === false,
-		}
-	);
-};
-
-export const getParentStyleClasses = (
-	parentBackground: string | undefined,
-	parentBorderColor: string | undefined,
-	parentShape: string | undefined,
-) => {
-	return classNames(
-		{
-			"bg-blue-800": parentBackground === "blue",
-			"bg-teal-800": parentBackground === "green",
-			"bg-gray-800": parentBackground === "grey",
-			"bg-black": parentBackground === "black",
-			"bg-white": parentBackground === "white",
-			"bg-transparent": parentBackground === "none",
-		},
-		{
-			"border-blue-300": parentBorderColor === "blue",
-			"border-teal-300": parentBorderColor === "green",
-			"border-gray-300": parentBorderColor === "grey",
-			"border-black": parentBorderColor === "black",
-			"border-transparent": parentBorderColor === "none",
-		},
-		{
-			"rounded-none": parentShape === "cornered",
-			"rounded-md": parentShape === "semiRounded",
-			"rounded-full": parentShape === "rounded",
-		}
-	);
-};
-
-
-export const getParentTextSizeClasses = (parentTextSize: string | undefined) => {
-	return classNames({
-		"text-xs": parentTextSize === "xs",
-		"text-sm": parentTextSize === "sm",
-		"text-md": parentTextSize === "md",
-		"text-lg": parentTextSize === "lg",
-	});
-}
-
-export const getParentTextColorClasses = (parentTextColor: string | undefined) => {
-	return classNames({
-		"text-slate-100": parentTextColor === "white",
-		"text-slate-950": parentTextColor === "black",
-	});
-}
-
-export const getSubmenuTextSizeClasses = (
-	parentTextSize: string | undefined
-) => {
-	return classNames({
-		"text-xs": parentTextSize === "xs",
-		"text-sm": parentTextSize === "sm",
-		"text-md": parentTextSize === "md",
-		"text-lg": parentTextSize === "lg",
-	});
-};
-
-export const getSubmenuTextColorClasses = (submenuTextColor: string | undefined) => {
-	return classNames({
-		"text-slate-100": submenuTextColor === "white",
-		"text-slate-950": submenuTextColor === "black",
-	});
-};
-
-export const getSubmenuClasses = (
-	submenuBackgroundColor: string | undefined
-) => {
-	return classNames(
-		{
-			"bg-blue-100": submenuBackgroundColor === "blue",
-			"bg-teal-100": submenuBackgroundColor === "green",
-			"bg-gray-100": submenuBackgroundColor === "grey",
-			"bg-white": submenuBackgroundColor === "white",
-			"bg-transparent": submenuBackgroundColor === "none",
-		},
-	);
-};
-
-export const getSubmenuHoverClasses = (
-	submenuHoverBackground: string | undefined,
-	submenuHoverTextColor: string | undefined,
-	submenuHoverBorderStyle: string | undefined,
-	submenuHoverBorderColor: string | undefined
-
-) => {
-
-	return classNames(
-		{
-			"hover:bg-blue-50": submenuHoverBackground === "blue",
-			"hover:bg-teal-50": submenuHoverBackground === "green",
-			"hover:bg-gray-50": submenuHoverBackground === "grey",
-			"hover:bg-white": submenuHoverBackground === "white",
-			"hover:bg-transparent": submenuHoverBackground === "none",
-		},
-		{
-			"hover:text-slate-100": submenuHoverTextColor === "white",
-			"hover:text-slate-950": submenuHoverTextColor === "black",
-		},
-		{
-			"hover:border-y-1 border-x-0": submenuHoverBorderStyle === "top-bottom",
-			"hover:border-x-1 border-y-0": submenuHoverBorderStyle === "right-left",
-			"hover:border-b-1 border-t-0 border-x-0":
-				submenuHoverBorderStyle === "bottom",
-			"hover:border-transparent": submenuHoverBorderStyle === "none",
-		},
-		{
-			"hover:border-blue-600": submenuHoverBorderColor === "blue",
-			"hover:border-teal-600 ": submenuHoverBorderColor === "green",
-			"hover:border-black": submenuHoverBorderColor === "black",
-			"hover:border-transparent ": submenuHoverBorderColor === "none",
-		}
-	);
-};
-
-export const getMobileHiddenBreakpoint = (mobileBreakpoint: string | undefined) => {
-	return classNames({
-		"max-sm:hidden": mobileBreakpoint === "small",
-		"max-md:hidden": mobileBreakpoint === "medium",
-		"max-lg:hidden": mobileBreakpoint === "large",
-		"max-xl:hidden": mobileBreakpoint === "extraLarge",
-	});
-};
-
-export const getMobileFlexBreakpoint = (
-	mobileBreakpoint: string | undefined
-) => {
-	return classNames({
-		"max-sm:flex max-sm:flex-col": mobileBreakpoint === "small",
-		"max-md:flex max-md:flex-col": mobileBreakpoint === "medium",
-		"max-lg:flex max-lg:flex-col": mobileBreakpoint === "large",
-		"max-xl:flex max-xl:flex-col": mobileBreakpoint === "extraLarge",
-	});
-};
-
-
-
-