@agilant/toga-blox 1.0.7 → 1.0.9

package/src/components/Icon/Icon.stories.tsx

@@ -1,227 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import Text from "../Text/Text";
-import Icon from ".";
-import { IconTypes } from ".";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-	faUser,
-	faCircleInfo,
-	faBell,
-	faCartShopping,
-	faCircleQuestion,
-} from "@fortawesome/free-solid-svg-icons";
-
-export default {
-	title: "Components/Icon",
-	component: Icon,
-	argTypes: {
-		iconColor: {
-			control: "select",
-			options: ["blue", "green", "black"],
-			description: "The icon color.",
-		},
-		backgroundColor: {
-			control: "select",
-			options: ["blue", "green", "grey", "none"],
-			description: "The background color.",
-		},
-		size: {
-			control: "select",
-			options: ["sm", "md", "lg"],
-			description: "The icon size.",
-		},
-		iconBorder: {
-			control: "select",
-			options: ["border", "none"],
-			description: "Whether there is a border around the icon.",
-		},
-		hoverColor: {
-			control: "select",
-			options: ["green", "blue", "black"],
-			description: "The icon and text color on hover.",
-		},
-		hoverBackground: {
-			control: "select",
-			options: ["blue", "green", "grey", "none"],
-			description: "The background color of the icon on hover.",
-		},
-		hoverBorder: {
-			control: "select",
-			options: ["border", "none"],
-			description: "Whether there is a border around the icon on hover.",
-		},
-		limitIndicator: {
-			control: "boolean",
-			description:
-				"Whether the indicator number should be limited to 2 characters. If set to true and the number is greater than 99, the indicator will display '99+'.",
-		},
-		indicatorNumber: {
-			control: "text",
-			description:
-				"The value of notifications that is shown in the indicator. Note: if the indicator number is '' or '0', the indicator will not be displayed.",
-		},
-		indicatorSize: {
-			control: "select",
-			options: ["sm", "md", "lg"],
-			description:
-				"The indicator size displaying notifications. Note: if the indicator size is 'lg', it is recommended that the icon size is also set to 'lg'.",
-		},
-		iconLabel: {
-			table: {
-				disable: true,
-			},
-		},
-		onClick: {
-			table: {
-				disable: true,
-			},
-		},
-		to: {
-			table: {
-				disable: true,
-			},
-		},
-		text: {
-			control: "text",
-			description: "The text that is displayed below the icon.",
-		},
-		icon: {
-			table: {
-				disable: true,
-			},
-		},
-		href: {
-			table: {
-				disable: true,
-			},
-		},
-		additionalContainerClasses: {
-			table: {
-				disable: true,
-			},
-		},
-		limitCharacters: {
-			table: {
-				disable: true,
-			},
-			description:
-				"Pass a function to limit the number of characters in the text.",
-		},
-	},
-	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;
-
-const Template: StoryFn<IconTypes> = (args) => <Icon {...args} />;
-
-export const Profile = Template.bind({});
-Profile.args = {
-	iconColor: "green",
-	iconLabel: "Profile",
-	backgroundColor: "green",
-	size: "sm",
-	icon: <FontAwesomeIcon icon={faUser} />,
-	hoverBackground: "none",
-	hoverColor: "green",
-	indicatorNumber: "0",
-	text: (
-		<Text
-			size="text-md"
-			color="text-black"
-			fontFamily="font-serif"
-			text="Profile"
-			tag="h2"
-			additionalClasses="p-0"
-		/>
-	),
-	onClick: () => alert("Redirect to profile"),
-};
-
-export const Support = Template.bind({});
-Support.args = {
-	iconColor: "black",
-	iconLabel: "Support",
-	backgroundColor: "grey",
-	size: "sm",
-	icon: <FontAwesomeIcon icon={faCircleInfo} />,
-	hoverBackground: "none",
-	hoverColor: "blue",
-	indicatorNumber: "100",
-	limitIndicator: true,
-	indicatorSize: "lg",
-	text: (
-		<Text
-			size="text-md"
-			color="text-black"
-			fontFamily="font-serif"
-			text="Support"
-			tag="h2"
-			additionalClasses="p-0"
-		/>
-	),
-	onClick: () => alert("Redirect to support"),
-};
-
-export const Messages = Template.bind({});
-Messages.args = {
-	iconColor: "black",
-	iconLabel: "Messages",
-	backgroundColor: "grey",
-	size: "sm",
-	icon: <FontAwesomeIcon icon={faBell} />,
-	hoverBackground: "none",
-	hoverColor: "blue",
-	indicatorNumber: "12",
-	indicatorSize: "sm",
-	text: (
-		<Text
-			size="text-md"
-			color="text-black"
-			fontFamily="font-serif"
-			text="Messages"
-			tag="h2"
-			additionalClasses="p-0"
-		/>
-	),
-	onClick: () => alert("Redirect to messages"),
-};
-
-export const Cart = Template.bind({});
-Cart.args = {
-	iconColor: "blue",
-	iconLabel: "Cart",
-	size: "lg",
-	icon: <FontAwesomeIcon icon={faCartShopping} />,
-	hoverBackground: "blue",
-	hoverColor: "none",
-	indicatorNumber: "",
-	indicatorSize: "lg",
-	text: (
-		<Text
-			size="text-md"
-			color="text-black"
-			fontFamily="font-serif"
-			text="Cart"
-			tag="h2"
-			additionalClasses="p-0"
-		/>
-	),
-	onClick: () => alert("Redirect to cart"),
-};
-
-export const NoText = Template.bind({});
-NoText.args = {
-	iconColor: "blue",
-	iconLabel: "Question",
-	backgroundColor: "grey",
-	size: "lg",
-	icon: <FontAwesomeIcon icon={faCircleQuestion} />,
-	hoverBackground: "grey",
-	hoverColor: "black",
-	iconBorder: "border",
-	indicatorNumber: "100",
-	onClick: () => alert("Redirect to question page"),
-};

package/src/components/Icon/Icon.tsx

@@ -1,208 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import { IconTypes } from "./Icon.types";
-import {
-	getBorderClasses,
-	getColorClasses,
-	getHoverClasses,
-	getIndicatorSizeClasses,
-	getSizeClasses,
-	getIndicatorColorClasses,
-	getBackgroundColorClasses,
-} from "./iconClassNames";
-
-const containerSizeMap = {
-	xs: "size-8",
-	sm: "size-8",
-	md: "size-10",
-	lg: "size-10",
-};
-
-const Icon: React.FC<IconTypes> = ({
-	onClick,
-	text,
-	iconLabel,
-	iconColor = "black",
-	backgroundColor = "none",
-	size = "md",
-	icon,
-	iconBorder = "none",
-	additionalContainerClasses,
-	to,
-	href,
-	hoverBackground = "primary",
-	hoverColor = "blue",
-	hoverBorder,
-	indicatorSize = "md",
-	indicatorNumber,
-	limitIndicator = true,
-	limitCharacters = (text: string) => {
-		if (text.length > 12) {
-			window.confirm(
-				`Text length is ${text.length} characters, and should be less than or equal to 12.`
-			);
-			return text.slice(0, 12);
-		}
-		return text;
-	},
-}) => {
-	let ariaLabel;
-	let ariaNotification = indicatorNumber;
-	let iconSizeClasses = getSizeClasses(size);
-	let iconColorClasses = getColorClasses(iconColor);
-	let containerSize = containerSizeMap[size as keyof typeof containerSizeMap];
-	let iconName = icon?.props.icon.iconName;
-	let iconClasses = ` flex flex-col justify-center
-            ${iconSizeClasses}
-        `;
-	let backgroundColorClasses = getBackgroundColorClasses(backgroundColor);
-	let hoverClasses = getHoverClasses(
-		hoverBackground,
-		hoverColor,
-		hoverBorder
-	);
-	let indicatorSizeClasses = getIndicatorSizeClasses(indicatorSize);
-	let indicatorColorClasses = getIndicatorColorClasses(iconColor);
-	let borderClasses = getBorderClasses(iconColor, iconBorder as "none" | "border" | undefined);
-
-	let isIndicatorRedCircle = indicatorSize === "sm";
-
-	if (indicatorNumber && parseInt(indicatorNumber) > 99 && limitIndicator) {
-		indicatorNumber = "99+";
-	}
-
-	if (typeof text === "string" && limitCharacters) {
-		text = limitCharacters(text);
-	}
-
-	// if there is no text for the icon and no notifications, screen reader needs label to be announced for link
-	if (ariaNotification == "" && !text) {
-		ariaLabel = `${iconLabel}`;
-
-		// if there is no text for the icon and the icon has notifications, screen reader needs label to be announced type of link and number of notifications
-		// OR
-		// if there is text for the icon and the icon has notifications, screen reader needs label to be announced type of link and number of notifications because either
-		// way the ariaLabel will override the text
-	} else if (
-		(ariaNotification !== "" && !text) ||
-		(ariaNotification !== "" && text)
-	) {
-		ariaLabel = `${iconLabel} with ${ariaNotification} notifications`;
-	} else {
-		ariaLabel = "null";
-	}
-
-	if (to) {
-		return (
-			<div>
-				<Link
-					to={to}
-					onClick={onClick}
-					tabIndex={0}
-					className={`flex flex-col items-center justify-center`}
-					aria-label={ariaLabel}
-				>
-					<div
-						data-testid="icon"
-						className={`flex flex-col items-center justify-center ${containerSize} ${hoverClasses} ${borderClasses} ${iconColorClasses} ${backgroundColorClasses} ${additionalContainerClasses}`}
-					>
-						<div className="flex h-full">
-							<span
-								data-testid={iconName}
-								className={iconClasses}
-							>
-								{icon}
-							</span>
-							{indicatorNumber &&
-								parseInt(indicatorNumber) !== 0 &&
-								!isIndicatorRedCircle ? (
-								<div
-									className="indicator"
-									data-testid="indicator"
-								>
-									<span
-										className={` ${indicatorSizeClasses} ${indicatorColorClasses}`}
-									>
-										<p className="flex items-center justify-center h-full w-full">
-											{indicatorNumber}
-										</p>
-									</span>
-								</div>
-							) : null}
-							{isIndicatorRedCircle &&
-								indicatorNumber &&
-								parseInt(indicatorNumber) !== 0 ? (
-								<div
-									className="indicator"
-									data-testid="indicator"
-								>
-									<span
-										className={`${indicatorSizeClasses}`}
-									/>
-								</div>
-							) : null}
-						</div>
-					</div>
-					{text && <div className="">{text}</div>}
-				</Link>
-			</div>
-		);
-	} else {
-		return (
-			<div>
-				<a
-					href={href}
-					onClick={onClick}
-					tabIndex={0}
-					className={`flex flex-col items-center justify-center p-2 relative min-w-14`}
-					aria-label={ariaLabel}
-				>
-					<div
-						data-testid="icon"
-						className={`flex flex-col items-center justify-center  ${containerSize} ${hoverClasses} ${borderClasses} ${iconColorClasses}  ${backgroundColorClasses} ${additionalContainerClasses}`}
-					>
-						<div className="flex h-full">
-							<span
-								data-testid={iconName}
-								className={iconClasses}
-							>
-								{icon}
-							</span>
-							{indicatorNumber &&
-								parseInt(indicatorNumber) !== 0 &&
-								!isIndicatorRedCircle ? (
-								<div
-									className="indicator"
-									data-testid="indicator"
-								>
-									<span
-										className={` ${indicatorSizeClasses} ${indicatorColorClasses}`}
-									>
-										<p className="flex items-center justify-center h-full w-full">
-											{indicatorNumber}
-										</p>
-									</span>
-								</div>
-							) : null}
-							{isIndicatorRedCircle &&
-								indicatorNumber &&
-								parseInt(indicatorNumber) !== 0 ? (
-								<div
-									className="indicator"
-									data-testid="indicator"
-								>
-									<span
-										className={`${indicatorSizeClasses}`}
-									/>
-								</div>
-							) : null}
-						</div>
-					</div>
-					{text && <div className="absolute top-10 ">{text}</div>}
-				</a>
-			</div>
-		);
-	}
-};
-
-export default Icon;

package/src/components/Icon/Icon.types.ts

@@ -1,24 +0,0 @@
-import React, { ReactNode } from "react";
-
-export interface IconTypes {
-	onClick?: (
-		e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
-	) => void;
-	text?: ReactNode;
-	iconColor?: string;
-	iconLabel: string;
-	backgroundColor?: string;
-	size?: "xs" | "sm" | "md" | "lg" | "xl" | string;
-	icon: JSX.Element | null;
-	iconBorder?: "border" | "none" | string;
-	to?: string;
-	href?: string;
-	additionalContainerClasses?: string;
-	hoverColor: "green" | "blue" | string;
-	hoverBackground: "blue" | "green" | "grey" | "none" | string;
-	hoverBorder?: "border" | "none" | string;
-	limitCharacters?: (text: string) => string;
-	indicatorSize?: "xs" | "sm" | "md" | "lg" | string;
-	indicatorNumber?: string;
-	limitIndicator?: boolean;
-}

package/src/components/Icon/iconClassNames.ts

@@ -1,79 +0,0 @@
-import classNames from "classNames";
-
-export const getSizeClasses = (size: string) => {
-	return classNames({
-		"text-md": size === "sm",
-		"text-lg": size === "md",
-		"text-xl": size === "lg",
-	});
-};
-
-export const getColorClasses = (iconColor: string) => {
-	return classNames({
-		"text-blue-800": iconColor === "blue",
-		"text-teal-800": iconColor === "green",
-		"text-slate-950": iconColor === "black",
-	});
-};
-
-export const getBackgroundColorClasses = (backgroundColor: string) => {
-	return classNames({
-		"bg-blue-100": backgroundColor === "blue",
-		"bg-teal-100": backgroundColor === "green",
-		"bg-slate-100": backgroundColor === "grey",
-		"bg-transparent": backgroundColor === "none",
-	});
-};
-
-export const getHoverClasses = (
-	hoverBackground: string | undefined,
-	hoverColor: string | undefined,
-	hoverBorder: string | undefined
-) => {
-	return classNames(
-		"cursor-pointer",
-		{
-			"hover:bg-blue-100": hoverBackground === "blue",
-			"hover:bg-teal-50": hoverBackground === "green",
-			"hover:bg-gray-100": hoverBackground === "grey",
-			"hover:bg-transparent": hoverBackground === "none",
-		},
-		{
-			"hover:text-teal-800 hover:border-teal-600": hoverColor === "green",
-			"hover:text-blue-800 hover:border-blue-800": hoverColor === "blue",
-			"hover:text-slate-950 hover:border-slate-950": hoverColor === "black",
-		},
-		{
-			"hover:border-transparent": hoverBorder === "none",
-		}
-	);
-};
-
-export const getIndicatorSizeClasses = (indicatorSize: string | undefined) => {
-	return classNames({
-		"size-[.5rem] rounded-full bg-red-500 absolute top-0":
-			indicatorSize === "sm",
-		"text-[.5rem] items-center justify-center h-4 w-4 rounded-full absolute top-[-4px] left-[-1px]":
-			indicatorSize === "md",
-		"text-[.65rem] items-center justify-center rounded-full h-5 w-5 absolute top-[-5px] left-[-1px]":
-			indicatorSize === "lg",
-	});
-};
-
-export const getIndicatorColorClasses = (color: string | undefined) => {
-	return classNames({
-		"bg-blue-800 text-white border-none": color === "blue",
-		"bg-teal-600 text-white border-none": color === "green",
-		"bg-black text-white border-none": color === "black",
-	});
-};
-
-export const getBorderClasses = (
-	color: string | undefined,
-	iconBorder: "border" | "none" | undefined
-) => {
-	return classNames("cursor-pointer", "border-2", "rounded-full", {
-		[`border-${color}-500`]: iconBorder === "border",
-		"border-transparent": iconBorder === "none",
-	});
-};

package/src/components/Icon/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./Icon";
-export * from "./Icon.types";