@agilant/toga-blox 1.0.5 → 1.0.7

package/src/components/Input/Input.stories.tsx

@@ -1,12 +1,8 @@
-import { Input, InputTypes } from ".";
 import { Meta, StoryFn } from "@storybook/react";
+import { Input, InputTypes } from ".";
 import Text from "../Text/Text";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-	faMagnifyingGlass,
-	faCircleArrowRight,
-	faEnvelope,
-} from "@fortawesome/free-solid-svg-icons";
+import { faMagnifyingGlass, faCircleArrowRight, faEnvelope } from "@fortawesome/free-solid-svg-icons";
 import { minCharactersRegex } from "../../utils/inputValidation";
 import { withMemo } from "../../userHoc";
 import { arePropsEqual } from "./InputMemoTypes";
@@ -20,6 +16,7 @@ export default {
 	component: MemoizedInput,
 	argTypes: {
 		validateInput: {
+			control: "none",
 			table: {
 				disable: true,
 			},
@@ -30,18 +27,21 @@ export default {
 			description: "Whether the input has validation styles turned on.",
 		},
 		errorMessage: {
+			control: "none",
 			table: {
 				disable: true,
 			},
 			description: "The error message if the input validation fails.",
 		},
 		regex: {
+			control: "none",
 			table: {
 				disable: true,
 			},
 			description: "The regex used to validate the input.",
 		},
 		inputType: {
+			control: "none",
 			table: {
 				disable: true,
 			},
@@ -52,129 +52,124 @@ export default {
 			description: "The width of the input.",
 		},
 		inputTextSize: {
-			control: "select",
-			options: ["small", "medium", "large"],
+			control: "none",
 			description: "The size of the text in the input.",
 		},
 		hasPlaceholder: {
-			control: "boolean",
+			control: "none",
 			description: "Whether the input has a placeholder.",
 		},
 		placeholder: {
-			control: "text",
+			control: "none",
 			description: "The text that appears in the input field.",
 		},
 		hasLeftIcon: {
-			control: "boolean",
+			control: "none",
 			description: "If the input has an icon on the left.",
 		},
 		leftIcon: {
+			control: "none",
 			table: {
 				disable: true,
 			},
 			description: "If the input has an icon on the left.",
 		},
 		hasRightIcon: {
-			control: "boolean",
-			description:
-				"If the input has an icon on the right. IF the input has a button the right icon will need to be set to false",
+			control: "none",
+			description: "If the input has an icon on the right.",
 		},
 		rightIcon: {
+			control: "none",
 			table: {
 				disable: true,
 			},
 			description: "If the input has an icon on the left.",
 		},
 		iconColor: {
-			control: "select",
-			options: ["green", "blue", "black", "white"],
-			description: "If the icons have a background color.",
+			control: "none",
+			description: "The color of the icons.",
 		},
 		iconBackgroundColor: {
-			control: "select",
-			options: ["green", "blue", "grey", "black", "none"],
-			description: "If the icons have a background color.",
+			control: "none",
+			description: "The background color of the icons.",
 		},
 		inputShape: {
-			control: "select",
-			options: ["cornered", "semiRounded", "rounded"],
-			description: "If the input has rounded corners.",
+			control: "none",
+			description: "The shape of the input.",
 		},
 		borderColor: {
-			control: "select",
-			options: ["green", "blue", "grey", "black", "none"],
+			control: "none",
 			description: "The border color of the input.",
 		},
 		successBorder: {
-			control: "select",
-			options: ["green", "blue", "grey", "black"],
-			description:
-				"The border color when the input validation results in success.",
+			control: "none",
+			description: "The border color when the input validation results in success.",
 		},
 		errorBorder: {
-			control: "select",
-			options: ["red", "orange", "black"],
-			description:
-				"The border color when the input validation results in error.",
+			control: "none",
+			description: "The border color when the input validation results in error.",
 		},
 		backgroundColor: {
-			control: "select",
-			options: ["white", "blue", "grey", "none"],
+			control: "none",
 			description: "The background color of the input.",
 		},
 		hasButton: {
-			control: "boolean",
-			description:
-				"If the input has a button. IF the in input has a button the inputShape should be set to cornered",
+			control: "none",
+			description: "If the input has a button.",
 		},
 		button: {
+			control: "none",
 			table: {
 				disable: true,
 			},
 			description: "The button that is displayed on the input.",
 		},
 		onClick: {
+			control: "none",
 			table: {
 				disable: true,
 			},
 		},
 		label: {
+			control: "none",
 			table: {
 				disable: true,
 			},
 		},
 		labelVisible: {
-			control: "boolean",
-			description:
-				"If the input label is visible to all or just screen readers.",
+			control: "none",
+			description: "If the input label is visible to all or just screen readers.",
 		},
 		labelPlacement: {
-			control: "select",
-			options: ["left", "top"],
-			description:
-				"Where the label is placed in relation to the input field.",
+			control: "none",
+			description: "Where the label is placed in relation to the input field.",
 		},
 		value: {
+			control: "none",
 			table: {
 				disable: true,
 			},
 		},
 		inputName: {
+			control: "none",
 			table: {
 				disable: true,
 			},
 		},
 		onChange: {
+			control: "none",
 			table: {
 				disable: true,
 			},
 		},
 		onButtonClick: {
+			control: "none",
 			table: {
 				disable: true,
 			},
 		},
 		additionalClasses: {
+			control: "none",
 			table: {
 				disable: true,
 			},
@@ -190,183 +185,131 @@ const Template: StoryFn<InputTypes> = (args) => <MemoizedInput {...args} />;
 
 export const NoIcons = Template.bind({});
 NoIcons.args = {
-	// INPUT DETAILS
 	inputType: "search",
 	inputName: "search",
-
-	// FUNCTIONALITY
 	hasValidation: false,
-
-	// PLACEHOLDER
 	hasPlaceholder: true,
 	placeholder: "Search",
-
-	// LABEL DETAILS
 	labelVisible: false,
 	label: (
 		<Text
-			size="md"
-			color="primary"
-			fontFamily="serif"
+			size="text-md"
+			color="text-black"
+			fontFamily="font-serif"
 			text="Search"
 			tag="h2"
 			additionalClasses="mb-0 pb-0 pr-2"
 		/>
 	),
-
-	// ICONS
 	hasLeftIcon: false,
 	hasRightIcon: false,
 	leftIcon: <FontAwesomeIcon icon={faMagnifyingGlass} />,
 	rightIcon: <FontAwesomeIcon icon={faCircleArrowRight} />,
-
-	// BUTTON
 	hasButton: true,
 	button: (
 		<FormButton
 			text=""
 			size="lg"
 			as="button"
-			hoverBackground="green"
-			color="green"
+			hoverBackground="hover:bg-green-500"
+			backgroundColor="bg-green-500"
 			icon={getFontAwesomeIcon("search")}
-			fontColor="white"
+			fontColor="text-white"
 			additionalClasses="items-center px-2 h-full"
-			borderColor="none"
-			hoverFontColor="black"
-			shape="cornered"
+			borderColor="border-none"
+			hoverFontColor="hover:text-black"
+			shape="rounded"
 			onClick={() => alert("Button clicked!")}
 		/>
 	),
-
-	// INPUT STYLES
-	inputTextSize: "md",
+	inputTextSize: "text-md",
 	inputWidth: "w-96",
 	inputShape: "rounded",
-	backgroundColor: "white",
-	borderColor: "green",
+	backgroundColor: "bg-white",
+	borderColor: "border-green-500",
 };
 
 export const LeftIcon = Template.bind({});
 LeftIcon.args = {
-	// INPUT DETAILS
 	inputType: "text",
 	inputName: "search",
-
-	// FUNCTIONALITY
 	hasValidation: false,
-
-	// INPUT STYLES
 	inputWidth: "w-96",
-	inputShape: "cornered",
-	backgroundColor: "white",
-	borderColor: "green",
-
-	// PLACEHOLDER
+	inputShape: "rounded",
+	backgroundColor: "bg-white",
+	borderColor: "border-green-500",
 	hasPlaceholder: true,
 	placeholder: "Search",
-
-	// LABEL DETAILS
 	labelVisible: false,
 	label: (
 		<Text
-			size="md"
-			color="primary"
-			fontFamily="serif"
+			size="text-md"
+			color="text-black"
+			fontFamily="font-serif"
 			text="Search:"
 			tag="h2"
 			additionalClasses="mb-0 pb-0 pr-2"
 		/>
 	),
-
-	// ICONS
 	hasLeftIcon: true,
 	leftIcon: <FontAwesomeIcon icon={faMagnifyingGlass} />,
 	iconBackgroundColor: "none",
 	hasRightIcon: false,
-	iconColor: "green",
-
-	// BUTTON
+	iconColor: "text-green-500",
 	hasButton: false,
 };
 
 export const RightIcon = Template.bind({});
 RightIcon.args = {
-	// INPUT DETAILS
 	inputType: "text",
 	inputName: "search",
-
-	// FUNCTIONALITY
 	hasValidation: false,
-
-	// INPUT STYLES
 	inputWidth: "w-96",
 	inputShape: "rounded",
-	backgroundColor: "grey",
-	borderColor: "green",
-
-	// PLACEHOLDER
+	backgroundColor: "bg-gray-500",
+	borderColor: "border-green-500",
 	hasPlaceholder: true,
 	placeholder: "Search",
-
-	// LABEL DETAILS
 	labelVisible: false,
 	label: (
 		<Text
-			size="md"
-			color="primary"
-			fontFamily="serif"
+			size="text-md"
+			color="text-black"
+			fontFamily="font-serif"
 			text="Search:"
 			tag="h2"
 			additionalClasses="mb-0 pb-0 pr-2"
 		/>
 	),
-
-	// ICONS
 	hasLeftIcon: false,
 	hasRightIcon: true,
 	rightIcon: <FontAwesomeIcon icon={faCircleArrowRight} />,
 	iconBackgroundColor: "none",
-
-	// BUTTON
 	hasButton: false,
 };
 
 export const DualIcons = Template.bind({});
 DualIcons.args = {
-	// INPUT DETAILS
 	inputType: "text",
 	inputName: "search",
-
-	// FUNCTIONALITY
 	hasValidation: false,
-
-	// INPUT STYLES
 	inputWidth: "w-[40rem]",
 	inputShape: "rounded",
-	backgroundColor: "white",
-	borderColor: "green",
-
-	// PLACEHOLDER
+	backgroundColor: "bg-white",
+	borderColor: "border-green-500",
 	placeholder: "Search",
-
-	// BUTTON
 	hasButton: false,
-
-	// LABEL DETAILS
 	labelVisible: false,
 	label: (
 		<Text
-			size="md"
-			color="primary"
-			fontFamily="serif"
+			size="text-md"
+			color="text-black"
+			fontFamily="font-serif"
 			text="Search:"
 			tag="h2"
 			additionalClasses="mb-0 pb-0 pr-2"
 		/>
 	),
-
-	// ICONS
 	hasRightIcon: true,
 	hasLeftIcon: true,
 	rightIcon: <FontAwesomeIcon icon={faCircleArrowRight} />,
@@ -376,58 +319,45 @@ DualIcons.args = {
 
 export const ButtonWithValidation = Template.bind({});
 ButtonWithValidation.args = {
-	// INPUT DETAILS
 	inputType: "search",
 	inputName: "search",
-
-	// FUNCTIONALITY
 	hasValidation: true,
 	regex: minCharactersRegex,
 	errorMessage: "Input must be at least three characters",
-
-	// INPUT STYLES
 	inputWidth: "w-[40rem]",
-	inputShape: "cornered",
-	backgroundColor: "white",
-	borderColor: "green",
-	errorBorder: "red",
-	successBorder: "green",
-
-	// PLACEHOLDER
+	inputShape: "rounded",
+	backgroundColor: "bg-white",
+	borderColor: "border-green-500",
+	errorBorder: "border-red-500",
+	successBorder: "border-green-500",
 	placeholder: "Enter input here...",
-
-	// LABEL DETAILS
 	labelVisible: false,
 	label: (
 		<Text
-			size="md"
-			color="primary"
-			fontFamily="serif"
+			size="text-md"
+			color="text-black"
+			fontFamily="font-serif"
 			text="Search:"
 			tag="h2"
 			additionalClasses="mb-0 pb-0 pr-2"
 		/>
 	),
-
-	// ICONS
 	hasRightIcon: false,
 	hasLeftIcon: false,
-
-	// BUTTON
 	hasButton: true,
 	button: (
 		<FormButton
 			text=""
 			size="lg"
 			as="button"
-			hoverBackground="green"
-			color="green"
+			hoverBackground="hover:bg-green-500"
+			backgroundColor="bg-green-500"
 			icon={<FontAwesomeIcon icon={faCircleArrowRight} />}
-			fontColor="white"
+			fontColor="text-white"
 			additionalClasses="items-center px-2 h-full"
-			borderColor="none"
-			hoverFontColor="black"
-			shape="cornered"
+			borderColor="border-none"
+			hoverFontColor="hover:text-black"
+			shape="rounded"
 			onClick={() => alert("Button clicked!")}
 		/>
 	),
@@ -435,56 +365,43 @@ ButtonWithValidation.args = {
 
 export const ButtonWithLeftIcon = Template.bind({});
 ButtonWithLeftIcon.args = {
-	// INPUT DETAILS
 	inputType: "text",
 	inputName: "search",
-
-	// FUNCTIONALITY
 	hasValidation: false,
-
-	// INPUT STYLES
 	inputWidth: "w-[40rem]",
-	inputShape: "cornered",
-	backgroundColor: "white",
-	borderColor: "green",
-
-	// PLACEHOLDER
+	inputShape: "rounded",
+	backgroundColor: "bg-white",
+	borderColor: "border-green-500",
 	placeholder: "Search",
-
-	// LABEL DETAILS
 	labelVisible: false,
 	label: (
 		<Text
-			size="md"
-			color="primary"
-			fontFamily="serif"
+			size="text-md"
+			color="text-black"
+			fontFamily="font-serif"
 			text="Search:"
 			tag="h2"
 			additionalClasses="mb-0 pb-2 pl-2"
 		/>
 	),
-
-	// ICONS
 	hasRightIcon: false,
 	hasLeftIcon: true,
 	leftIcon: <FontAwesomeIcon icon={faMagnifyingGlass} />,
 	iconBackgroundColor: "none",
-
-	// BUTTON
 	hasButton: true,
 	button: (
 		<FormButton
 			text=""
 			size="lg"
 			as="button"
-			hoverBackground="green"
-			color="green"
+			hoverBackground="hover:bg-green-500"
+			backgroundColor="bg-green-500"
 			icon={<FontAwesomeIcon icon={faCircleArrowRight} />}
-			fontColor="white"
+			fontColor="text-white"
 			additionalClasses="items-center px-2 h-full"
-			borderColor="none"
-			hoverFontColor="black"
-			shape="cornered"
+			borderColor="border-none"
+			hoverFontColor="hover:text-black"
+			shape="rounded"
 			onClick={() => alert("Button clicked!")}
 		/>
 	),
@@ -492,160 +409,106 @@ ButtonWithLeftIcon.args = {
 
 export const DateInput = Template.bind({});
 DateInput.args = {
-	// INPUT DETAILS
 	inputType: "date",
 	inputName: "birthday",
-
-	// FUNCTIONALITY
 	hasValidation: true,
-
-	// INPUT STYLES
 	inputWidth: "w-48",
 	inputShape: "rounded",
-	backgroundColor: "white",
-	borderColor: "green",
-
-	// PLACEHOLDER
+	backgroundColor: "bg-white",
+	borderColor: "border-green-500",
 	hasPlaceholder: false,
-
-	// LABEL DETAILS
 	labelVisible: true,
 	label: (
 		<Text
-			size="md"
-			color="primary"
-			fontFamily="serif"
+			size="text-md"
+			color="text-black"
+			fontFamily="font-serif"
 			text="Date of Birth:"
 			tag="h2"
 			additionalClasses="mb-0 pb-1 pl-2"
 		/>
 	),
-
-	// ICONS
 	hasRightIcon: false,
 	hasLeftIcon: false,
-	rightIcon: false,
-	leftIcon: false,
-
-	// BUTTON
 	hasButton: false,
 };
 
 export const EmailInput = Template.bind({});
 EmailInput.args = {
-	// INPUT DETAILS
 	inputType: "email",
 	inputName: "email",
-
-	// FUNCTIONALITY
 	hasValidation: false,
-
-	// INPUT STYLES
 	inputWidth: "w-72",
 	inputShape: "rounded",
-	backgroundColor: "white",
-	borderColor: "green",
-
-	// PLACEHOLDER
+	backgroundColor: "bg-white",
+	borderColor: "border-green-500",
 	hasPlaceholder: false,
-
-	// LABEL DETAILS
 	labelVisible: true,
 	label: (
 		<Text
-			size="md"
-			color="primary"
-			fontFamily="serif"
+			size="text-md"
+			color="text-black"
+			fontFamily="font-serif"
 			text="Email:"
 			tag="h2"
 			additionalClasses="mb-0 pb-1 pl-2"
 		/>
 	),
-
-	// ICONS
 	hasRightIcon: false,
 	hasLeftIcon: true,
 	leftIcon: <FontAwesomeIcon icon={faEnvelope} />,
-
-	// BUTTON
 	hasButton: false,
 };
 
 export const NumberInput = Template.bind({});
 NumberInput.args = {
-	// INPUT DETAILS
 	inputType: "number",
 	inputName: "number",
-
-	// FUNCTIONALITY
 	hasValidation: false,
-
-	// INPUT STYLES
 	inputWidth: "w-36",
-	inputShape: "semiRounded",
-	backgroundColor: "white",
-	borderColor: "green",
-
-	// PLACEHOLDER
+	inputShape: "rounded",
+	backgroundColor: "bg-white",
+	borderColor: "border-green-500",
 	hasPlaceholder: false,
-
-	// LABEL DETAILS
 	labelVisible: true,
 	labelPlacement: "left",
 	label: (
 		<Text
-			size="md"
-			color="primary"
-			fontFamily="serif"
+			size="text-md"
+			color="text-black"
+			fontFamily="font-serif"
 			text="Enter Your Age:"
 			tag="h2"
 			additionalClasses="mb-0 pb-0 pr-3"
 		/>
 	),
-
-	// ICONS
 	hasRightIcon: false,
 	hasLeftIcon: false,
-
-	// BUTTON
 	hasButton: false,
 };
 
 export const RangeInput = Template.bind({});
 RangeInput.args = {
-	// INPUT DETAILS
 	inputType: "range",
 	inputName: "number",
-
-	// FUNCTIONALITY
 	hasValidation: false,
-
-	// INPUT STYLES
 	inputWidth: "w-36",
-	backgroundColor: "white",
-	borderColor: "none",
-
-	// PLACEHOLDER
+	backgroundColor: "bg-white",
+	borderColor: "border-none",
 	hasPlaceholder: false,
-
-	// LABEL DETAILS
 	labelVisible: true,
 	labelPlacement: "left",
 	label: (
 		<Text
-			size="md"
-			color="primary"
-			fontFamily="serif"
+			size="text-md"
+			color="text-black"
+			fontFamily="font-serif"
 			text="Select:"
 			tag="h2"
 			additionalClasses="mb-0 pb-0 pr-4"
 		/>
 	),
-
-	// ICONS
 	hasRightIcon: false,
 	hasLeftIcon: false,
-
-	// BUTTON
 	hasButton: false,
 };