@agilant/toga-blox 1.0.5

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

@@ -0,0 +1,651 @@
+import { Input, InputTypes } from ".";
+import { Meta, StoryFn } from "@storybook/react";
+import Text from "../Text/Text";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+	faMagnifyingGlass,
+	faCircleArrowRight,
+	faEnvelope,
+} from "@fortawesome/free-solid-svg-icons";
+import { minCharactersRegex } from "../../utils/inputValidation";
+import { withMemo } from "../../userHoc";
+import { arePropsEqual } from "./InputMemoTypes";
+import FormButton from "../FormButton/FormButton";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+
+const MemoizedInput = withMemo(Input, arePropsEqual);
+
+export default {
+	title: "Components/Input",
+	component: MemoizedInput,
+	argTypes: {
+		validateInput: {
+			table: {
+				disable: true,
+			},
+			description: "The function that validates the input.",
+		},
+		hasValidation: {
+			control: "none",
+			description: "Whether the input has validation styles turned on.",
+		},
+		errorMessage: {
+			table: {
+				disable: true,
+			},
+			description: "The error message if the input validation fails.",
+		},
+		regex: {
+			table: {
+				disable: true,
+			},
+			description: "The regex used to validate the input.",
+		},
+		inputType: {
+			table: {
+				disable: true,
+			},
+			description: "The type of input.",
+		},
+		inputWidth: {
+			control: "none",
+			description: "The width of the input.",
+		},
+		inputTextSize: {
+			control: "select",
+			options: ["small", "medium", "large"],
+			description: "The size of the text in the input.",
+		},
+		hasPlaceholder: {
+			control: "boolean",
+			description: "Whether the input has a placeholder.",
+		},
+		placeholder: {
+			control: "text",
+			description: "The text that appears in the input field.",
+		},
+		hasLeftIcon: {
+			control: "boolean",
+			description: "If the input has an icon on the left.",
+		},
+		leftIcon: {
+			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",
+		},
+		rightIcon: {
+			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.",
+		},
+		iconBackgroundColor: {
+			control: "select",
+			options: ["green", "blue", "grey", "black", "none"],
+			description: "If the icons have a background color.",
+		},
+		inputShape: {
+			control: "select",
+			options: ["cornered", "semiRounded", "rounded"],
+			description: "If the input has rounded corners.",
+		},
+		borderColor: {
+			control: "select",
+			options: ["green", "blue", "grey", "black", "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.",
+		},
+		errorBorder: {
+			control: "select",
+			options: ["red", "orange", "black"],
+			description:
+				"The border color when the input validation results in error.",
+		},
+		backgroundColor: {
+			control: "select",
+			options: ["white", "blue", "grey", "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",
+		},
+		button: {
+			table: {
+				disable: true,
+			},
+			description: "The button that is displayed on the input.",
+		},
+		onClick: {
+			table: {
+				disable: true,
+			},
+		},
+		label: {
+			table: {
+				disable: true,
+			},
+		},
+		labelVisible: {
+			control: "boolean",
+			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.",
+		},
+		value: {
+			table: {
+				disable: true,
+			},
+		},
+		inputName: {
+			table: {
+				disable: true,
+			},
+		},
+		onChange: {
+			table: {
+				disable: true,
+			},
+		},
+		onButtonClick: {
+			table: {
+				disable: true,
+			},
+		},
+		additionalClasses: {
+			table: {
+				disable: true,
+			},
+		},
+	},
+	tags: ["autodocs"],
+	parameters: {
+		layout: "centered",
+	},
+} as Meta;
+
+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"
+			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"
+			icon={getFontAwesomeIcon("search")}
+			fontColor="white"
+			additionalClasses="items-center px-2 h-full"
+			borderColor="none"
+			hoverFontColor="black"
+			shape="cornered"
+			onClick={() => alert("Button clicked!")}
+		/>
+	),
+
+	// INPUT STYLES
+	inputTextSize: "md",
+	inputWidth: "w-96",
+	inputShape: "rounded",
+	backgroundColor: "white",
+	borderColor: "green",
+};
+
+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
+	hasPlaceholder: true,
+	placeholder: "Search",
+
+	// LABEL DETAILS
+	labelVisible: false,
+	label: (
+		<Text
+			size="md"
+			color="primary"
+			fontFamily="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
+	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
+	hasPlaceholder: true,
+	placeholder: "Search",
+
+	// LABEL DETAILS
+	labelVisible: false,
+	label: (
+		<Text
+			size="md"
+			color="primary"
+			fontFamily="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
+	placeholder: "Search",
+
+	// BUTTON
+	hasButton: false,
+
+	// LABEL DETAILS
+	labelVisible: false,
+	label: (
+		<Text
+			size="md"
+			color="primary"
+			fontFamily="serif"
+			text="Search:"
+			tag="h2"
+			additionalClasses="mb-0 pb-0 pr-2"
+		/>
+	),
+
+	// ICONS
+	hasRightIcon: true,
+	hasLeftIcon: true,
+	rightIcon: <FontAwesomeIcon icon={faCircleArrowRight} />,
+	leftIcon: <FontAwesomeIcon icon={faMagnifyingGlass} />,
+	iconBackgroundColor: "none",
+};
+
+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
+	placeholder: "Enter input here...",
+
+	// LABEL DETAILS
+	labelVisible: false,
+	label: (
+		<Text
+			size="md"
+			color="primary"
+			fontFamily="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"
+			icon={<FontAwesomeIcon icon={faCircleArrowRight} />}
+			fontColor="white"
+			additionalClasses="items-center px-2 h-full"
+			borderColor="none"
+			hoverFontColor="black"
+			shape="cornered"
+			onClick={() => alert("Button clicked!")}
+		/>
+	),
+};
+
+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
+	placeholder: "Search",
+
+	// LABEL DETAILS
+	labelVisible: false,
+	label: (
+		<Text
+			size="md"
+			color="primary"
+			fontFamily="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"
+			icon={<FontAwesomeIcon icon={faCircleArrowRight} />}
+			fontColor="white"
+			additionalClasses="items-center px-2 h-full"
+			borderColor="none"
+			hoverFontColor="black"
+			shape="cornered"
+			onClick={() => alert("Button clicked!")}
+		/>
+	),
+};
+
+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
+	hasPlaceholder: false,
+
+	// LABEL DETAILS
+	labelVisible: true,
+	label: (
+		<Text
+			size="md"
+			color="primary"
+			fontFamily="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
+	hasPlaceholder: false,
+
+	// LABEL DETAILS
+	labelVisible: true,
+	label: (
+		<Text
+			size="md"
+			color="primary"
+			fontFamily="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
+	hasPlaceholder: false,
+
+	// LABEL DETAILS
+	labelVisible: true,
+	labelPlacement: "left",
+	label: (
+		<Text
+			size="md"
+			color="primary"
+			fontFamily="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
+	hasPlaceholder: false,
+
+	// LABEL DETAILS
+	labelVisible: true,
+	labelPlacement: "left",
+	label: (
+		<Text
+			size="md"
+			color="primary"
+			fontFamily="serif"
+			text="Select:"
+			tag="h2"
+			additionalClasses="mb-0 pb-0 pr-4"
+		/>
+	),
+
+	// ICONS
+	hasRightIcon: false,
+	hasLeftIcon: false,
+
+	// BUTTON
+	hasButton: false,
+};