@agilant/toga-blox 1.0.9 → 1.0.11

package/src/components/HamburgerButton/HamburgerButton.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { HamburgerButtonProps } from './HamburgerButton.types';
-
-const HamburgerButton: React.FC<HamburgerButtonProps> = ({
-	containerClasses,
-	burgerAriaLabel,
-	burgerExpandedAlert,
-	animateBoolean,
-	handleNav,
-}) => {
-	return (
-		<div className={`relative ${containerClasses}`}>
-			<motion.button
-				aria-label={burgerAriaLabel}
-				aria-expanded={burgerExpandedAlert === 'True'}
-				initial="hide"
-				animate={animateBoolean ? 'show' : 'hide'}
-				onClick={handleNav}
-				className={`flex flex-col space-y-1 p-2 ${burgerExpandedAlert === 'True' ? 'fixed' : ''}`}
-				tabIndex={0}
-			>
-				<motion.span
-					variants={{
-						hide: { rotate: 0 },
-						show: { rotate: 45, y: 5 },
-					}}
-					className="w-6 bg-black h-px block"
-				/>
-				<motion.span
-					variants={{
-						hide: { opacity: 1 },
-						show: { opacity: 0 },
-					}}
-					className="w-6 bg-black h-px block"
-				/>
-				<motion.span
-					variants={{
-						hide: { rotate: 0 },
-						show: { rotate: -45, y: -5 },
-					}}
-					className="w-6 bg-black h-px block"
-				/>
-			</motion.button>
-		</div>
-	);
-};
-
-export default HamburgerButton;

package/src/components/HamburgerButton/HamburgerButton.types.tsx

@@ -1,7 +0,0 @@
-export interface HamburgerButtonProps {
-	containerClasses: string;
-	burgerAriaLabel: string;
-	burgerExpandedAlert: string;
-	animateBoolean: boolean;
-	handleNav: () => void;
-}

package/src/components/Header/DUMMYICONDATA.json

@@ -1,136 +0,0 @@
-{
-	"DUMMYICONCOMPASSDATA": [
-		{
-			"id": "1",
-			"icon": "user",
-			"href": "#",
-			"to": "",
-			"iconColor": "black",
-			"iconLabel": "account",
-			"iconBorder": "none",
-			"backgroundColor": "green",
-			"hoverBackground": "green",
-			"hoverBorder": "green",
-			"hoverColor": "green",
-			"size": "xs",
-			"additionalContainerClasses": "",
-			"indicatorNumber": "",
-			"limitIndicator": true,
-			"indicatorSize": "sm",
-			"text": {
-				"size": "xs",
-				"color": "primary",
-				"text": "Account",
-				"fontFamily": "serif",
-				"tag": "span",
-				"additionalClasses": "m-0 p-0"
-			}
-		},
-		{
-			"id": "2",
-			"icon": "infoCircle",
-			"href": "#",
-			"to": "",
-			"iconColor": "black",
-			"iconLabel": "information",
-			"iconBorder": "none",
-			"backgroundColor": "green",
-			"hoverBackground": "green",
-			"hoverBorder": "green",
-			"hoverColor": "green",
-			"size": "xs",
-			"additionalContainerClasses": "",
-			"indicatorNumber": "",
-			"limitIndicator": true,
-			"indicatorSize": "sm",
-			"text": {
-				"size": "xs",
-				"color": "primary",
-				"text": "Info",
-				"fontFamily": "serif",
-				"tag": "span",
-				"additionalClasses": "m-0 p-0"
-			}
-		},
-		{
-			"id": "3",
-			"icon": "bell",
-			"href": "#",
-			"to": "",
-			"iconColor": "black",
-			"iconLabel": "notifications",
-			"iconBorder": "none",
-			"backgroundColor": "green",
-			"hoverBackground": "green",
-			"hoverBorder": "green",
-			"hoverColor": "green",
-			"size": "xs",
-			"additionalContainerClasses": "",
-			"indicatorNumber": "100",
-			"limitIndicator": true,
-			"indicatorSize": "sm",
-			"text": {
-				"size": "xs",
-				"color": "primary",
-				"text": "Notifications",
-				"fontFamily": "serif",
-				"tag": "span",
-				"additionalClasses": "m-0 p-0"
-			}
-		},
-		{
-			"id": "4",
-			"icon": "shoppingCart",
-			"href": "#",
-			"to": "",
-			"iconColor": "black",
-			"iconLabel": "shopping cart",
-			"iconBorder": "none",
-			"backgroundColor": "green",
-			"hoverBackground": "green",
-			"hoverBorder": "green",
-			"hoverColor": "green",
-			"size": "xs",
-			"additionalContainerClasses": "",
-			"indicatorNumber": "",
-			"limitIndicator": true,
-			"indicatorSize": "sm",
-			"text": {
-				"size": "xs",
-				"color": "primary",
-				"text": "Cart",
-				"fontFamily": "serif",
-				"tag": "span",
-				"additionalClasses": "m-0 p-0"
-			}
-		}
-	],
-	"DUMMYICONTOGADATA": [
-		{
-			"id": "1",
-			"icon": "user",
-			"href": "#",
-			"to": "",
-			"iconColor": "black",
-			"iconLabel": "account",
-			"iconBorder": "none",
-			"backgroundColor": "blue",
-			"hoverBackground": "blue",
-			"hoverBorder": "none",
-			"hoverColor": "blue",
-			"size": "xs",
-			"additionalContainerClasses": "",
-			"indicatorNumber": "",
-			"limitIndicator": true,
-			"indicatorSize": "sm",
-			"text": {
-				"size": "xs",
-				"color": "primary",
-				"text": "Account",
-				"fontFamily": "serif",
-				"tag": "span",
-				"additionalClasses": "m-0 p-0"
-			}
-		}
-	]
-}

package/src/components/Header/Header.stories.tsx

@@ -1,516 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import Header from "./Header";
-import Nav from "../Nav/Nav";
-import Image from "../Image/Image";
-import Badge from "../Badge/Badge";
-import Text from "../Text/Text";
-import Input from "../Input/Input";
-import FormButton from "../FormButton/FormButton";
-import DUMMYICONDATA from "./DUMMYICONDATA.json";
-import { DUMMYCOMPASSNAVDATA, DUMMYNAVDATA } from "../Nav/DUMMYNAVDATA.json";
-import { HeaderTypes } from "./Header.types";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
-import DynamicIconList from "../GenericList/templates/DynamicIconList";
-import GenericList from "../GenericList/GenericList";
-
-export default {
-	title: "Headers/Header",
-	argTypes: {
-		iconsData: {
-			table: {
-				disable: true,
-			},
-		},
-		nav: {
-			table: {
-				disable: true,
-			},
-		},
-		input: {
-			table: {
-				disable: true,
-			},
-		},
-		logo: {
-			table: {
-				disable: true,
-			},
-		},
-		badge: {
-			table: {
-				disable: true,
-			},
-		},
-		icons: {
-			table: {
-				disable: true,
-			},
-		},
-		mobileCloseIcon: {
-			table: {
-				disable: true,
-			},
-		},
-		mobileOpenIcon: {
-			table: {
-				disable: true,
-			},
-		},
-		hasAnimatedHamburgerButton: {
-			control: "boolean",
-			description: "Whether the hamburger menu button is animated .",
-		},
-		logoBorderRadius: {
-			control: "boolean",
-			description: "Whether the logo has a border radius.",
-		},
-		logoHoverColor: {
-			control: "select",
-			options: ["red", "green", "blue", "none"],
-			description: "Whether the logo has a background color on hover.",
-		},
-		backgroundColor: {
-			control: "select",
-			options: ["red", "green", "gray", "none"],
-			description: "Whether the header has a background color.",
-		},
-		bottomBorderColor: {
-			control: "select",
-			options: ["green", "blue", "black", "none"],
-			description: "Whether the header has a background color.",
-		},
-		hasNavItems: {
-			control: "boolean",
-			description: "Whether the header has navigation items.",
-		},
-		hasSearchBar: {
-			control: "boolean",
-			description: "Whether the header has a search bar.",
-		},
-		mobileRight: {
-			control: "boolean",
-			description: "Whether the mobile menu is on the right.",
-		},
-		mobileLeft: {
-			control: "boolean",
-			description: "Whether the mobile menu is on the left.",
-		},
-		logoOrder: {
-			control: false,
-			description:
-				"This prop will change the order of the logo section. It is set internally and should not be modified.",
-		},
-		navOrder: {
-			control: false,
-			description:
-				"This prop will change the order of the navigation section. It is set internally and should not be modified.",
-		},
-		inputOrder: {
-			control: false,
-			description:
-				"This prop will change the order of the input section. It is set internally and should not be modified.",
-		},
-		badgeOrder: {
-			control: false,
-			description:
-				"This prop will change the order of the badge section. It is set internally and should not be modified.",
-		},
-		iconsOrder: {
-			control: false,
-			description:
-				"This prop will change the order of the icons section. It is set internally and should not be modified.",
-		},
-	},
-	tags: ["autodocs"],
-} as Meta<HeaderTypes>;
-
-const Template: StoryFn<HeaderTypes> = (args) => <Header {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-	mobileMenuBackground: "gray",
-	hasAnimatedHamburgerButton: true,
-	logo: (
-		<Image
-			src="../../../assets/Logo.png"
-			alt="Generic Company Logo."
-			background={false}
-			additionalClasses=" w-40 p-2"
-		/>
-	),
-	icons: (
-		<GenericList
-			hasVirtualization={false}
-			listDirection="horizontal"
-			containerClasses=""
-			listType="unordered"
-			data={DUMMYICONDATA.DUMMYICONTOGADATA}
-			renderItem={(item) => <DynamicIconList item={item} />}
-		/>
-	),
-	badge: (
-		<Badge
-			type="href"
-			to="#"
-			hoverColor="blue"
-			borderColor="none"
-			mobileIcon={getFontAwesomeIcon("square-phone")}
-			mobileIconLabel="Contact Us"
-			onClick={() => alert("Redirect to Contact Us page")}
-			image={
-				<Image
-					src="../../../assets/contact-image.png"
-					alt=""
-					background={false}
-					additionalClasses="flex justify-center w-8 h-8 max-md:hidden"
-				/>
-			}
-			text={
-				<>
-					<Text
-						size="text-sm"
-						color="text-black"
-						fontFamily="font-serif"
-						text="Contact Us"
-						tag="h2"
-						additionalClasses="pl-2 pb-0 font-bold"
-					/>
-					<Text
-						size="text-xs"
-						color="text-black"
-						fontFamily="font-serif"
-						text="1-800-800-8000"
-						tag="p"
-						additionalClasses="pl-2 pt-0"
-					/>
-				</>
-			}
-		/>
-	),
-	nav: (
-		<Nav
-			navData={DUMMYNAVDATA}
-			navBackgroundColor={"#FFFFF"}
-			parentHoverBackground={"blue"}
-			parentHoverFontColor={"white"}
-			parentHoverUnderline={true}
-			parentHoverBorderColor={"none"}
-			parentShape={"cornered"}
-			parentBackground={"none"}
-			parentBorderColor={"none"}
-			submenuBackgroundColor={"blue"}
-			submenuHoverBackground={"white"}
-			submenuHoverBorderStyle={"bottom"}
-			submenuHoverBorderColor={"black"}
-			mobileBreakpoint={"extraLarge"}
-			accordionParentStyle={
-				"cornered p-2 w-full border-b-2 border-b-blue-700 text-black"
-			}
-			accordionExpandedStyle={"pl-2 py-3"}
-		/>
-	),
-	input: (
-		<Input
-			labelVisible={false}
-			label={undefined}
-			inputType={"text"}
-			inputName={"search"}
-			hasPlaceholder
-			placeholder={"Search"}
-			borderColor="gray"
-			hasButton
-			backgroundColor="white"
-			additionalClasses="bg-blue-500"
-			button={
-				<FormButton
-					icon={getFontAwesomeIcon("search")}
-					backgroundColor="blue"
-					fontColor="white"
-					hoverBackground="black"
-					hoverFontColor="white"
-					additionalClasses="h-full w-8 justify-center"
-					shape="none"
-				/>
-			}
-			inputWidth="w-full"
-		/>
-	),
-
-	logoBorderRadius: true,
-	logoHoverColor: "blue",
-	hasIcons: false,
-	hasSearchBar: true,
-	hasBadge: false,
-	hasNavItems: true,
-	hasMobileMenu: true,
-	backgroundColor: "gray",
-	mobileLeft: true,
-	mobileRight: false,
-	bottomBorderColor: "blue",
-	mobileOpenIcon: getFontAwesomeIcon("hamburger"),
-	mobileCloseIcon: getFontAwesomeIcon("x"),
-	hasMobileIcons: false,
-	hasMobileNavItems: true,
-	hasMobileBadge: true,
-	hasMobileSearchBar: true,
-};
-
-export const TogaSupply = Template.bind({});
-TogaSupply.args = {
-	hasIcons: true,
-	logoBorderRadius: true,
-	logoHoverColor: "blue",
-	backgroundColor: "gray",
-	bottomBorderColor: "blue",
-	hasMobileMenu: false,
-	logo: (
-		<Image
-			src="../../../assets/Logo.png"
-			alt="Generic Company Logo."
-			background={false}
-			additionalClasses=" w-40 p-2"
-		/>
-	),
-	hasMobileIcons: false,
-	hasMobileNavItems: false,
-	hasMobileBadge: false,
-	hasMobileSearchBar: false,
-	hasAnimatedHamburgerButton: true,
-};
-
-export const Compass = Template.bind({});
-Compass.args = {
-	icons: (
-		<GenericList
-			hasVirtualization={false}
-			listDirection="horizontal"
-			containerClasses=""
-			listType="unordered"
-			data={DUMMYICONDATA.DUMMYICONCOMPASSDATA}
-			renderItem={(item) => <DynamicIconList item={item} />}
-		/>
-	),
-	hasIcons: true,
-	hasSearchBar: true,
-	hasBadge: true,
-	hasNavItems: true,
-	hasMobileMenu: true,
-	hasAnimatedHamburgerButton: true,
-
-	logoBorderRadius: true,
-	logoHoverColor: "green",
-	backgroundColor: "gray",
-	bottomBorderColor: "green",
-
-	mobileOpenIcon: getFontAwesomeIcon("hamburger"),
-	mobileCloseIcon: getFontAwesomeIcon("x"),
-	mobileMenuBackground: "green",
-
-	hasMobileIcons: true,
-	hasMobileNavItems: true,
-	hasMobileBadge: false,
-	hasMobileSearchBar: true,
-
-	badge: (
-		<Badge
-			type="href"
-			to="#"
-			color="green"
-			hoverColor="green"
-			borderColor="none"
-			mobileIcon={getFontAwesomeIcon("square-phone")}
-			mobileIconLabel="Contact Us"
-			onClick={() => alert("Redirect to Contact Us page")}
-			image={
-				<Image
-					src="../../../assets/contact-image.png"
-					alt=""
-					background={false}
-					additionalClasses="flex justify-center w-8 h-8 max-md:hidden"
-				/>
-			}
-			text={
-				<>
-					<Text
-						size="text-sm"
-						color="text-teal-700"
-						fontFamily="font-serif"
-						text="Contact Us"
-						tag="h2"
-						additionalClasses="pl-2 pb-0 font-bold"
-					/>
-					<Text
-						size="text-xs"
-						color="text-teal-700"
-						fontFamily="font-serif"
-						text="1-800-800-8000"
-						tag="p"
-						additionalClasses="pl-2 pt-0"
-					/>
-				</>
-			}
-		/>
-	),
-	logo: (
-		<Image
-			src="../../../assets/compass-logo.png"
-			alt="Generic Company Logo."
-			background={false}
-			additionalClasses=" w-40 p-2"
-		/>
-	),
-	nav: (
-		<Nav
-			navData={DUMMYCOMPASSNAVDATA}
-			navBackgroundColor={"#FFFFF"}
-			parentHoverBackground={"none"}
-			parentHoverFontColor={"black"}
-			parentHoverUnderline={true}
-			parentHoverBorderColor={"none"}
-			parentShape={"cornered"}
-			parentBackground={"none"}
-			parentBorderColor={"none"}
-			submenuBackgroundColor={"white"}
-			submenuHoverBackground={"green"}
-			submenuHoverBorderStyle={"top-bottom"}
-			submenuHoverBorderColor={"green"}
-			includeSubmenuImages={true}
-			mobileBreakpoint={"extraLarge"}
-			accordionParentStyle={
-				"cornered p-2 w-full border-b-2 border-b-teal-700 text-black"
-			}
-			accordionExpandedStyle={"pl-2 py-3"}
-		/>
-	),
-	input: (
-		<Input
-			labelVisible={false}
-			label={undefined}
-			inputType={"text"}
-			inputName={"search"}
-			borderColor="gray"
-			hasPlaceholder
-			placeholder={"Search"}
-			hasButton
-			backgroundColor="white"
-			additionalClasses="bg-blue-500"
-			button={
-				<FormButton
-					icon={getFontAwesomeIcon("search")}
-					backgroundColor="green"
-					hoverBackground="black"
-					hoverFontColor="white"
-					additionalClasses="h-full w-8 justify-center"
-					shape="none"
-				/>
-			}
-			inputWidth="w-full"
-		/>
-	),
-};
-
-export const NoSearchOrBadge = Template.bind({});
-NoSearchOrBadge.args = {
-	icons: (
-		<GenericList
-			hasVirtualization={false}
-			listDirection="horizontal"
-			containerClasses=""
-			listType="unordered"
-			data={DUMMYICONDATA.DUMMYICONCOMPASSDATA}
-			renderItem={(item) => <DynamicIconList item={item} />}
-		/>
-	),
-	hasIcons: true,
-	hasSearchBar: false,
-	hasBadge: false,
-	hasNavItems: true,
-	hasMobileMenu: true,
-	mobileRight: true,
-	mobileLeft: false,
-
-	logoBorderRadius: true,
-	logoHoverColor: "green",
-	backgroundColor: "gray",
-	bottomBorderColor: "green",
-
-	mobileMenuBackground: "green",
-	hasAnimatedHamburgerButton: true,
-
-	hasMobileIcons: true,
-	hasMobileNavItems: true,
-	hasMobileBadge: false,
-	hasMobileSearchBar: true,
-
-	badge: (
-		<Badge
-			type="href"
-			to="#"
-			color="green"
-			hoverColor="green"
-			borderColor="none"
-			mobileIcon={getFontAwesomeIcon("square-phone")}
-			mobileIconLabel="Contact Us"
-			onClick={() => alert("Redirect to Contact Us page")}
-			image={
-				<Image
-					src="../../../assets/contact-image.png"
-					alt=""
-					background={false}
-					additionalClasses="flex justify-center w-8 h-8 max-md:hidden"
-				/>
-			}
-			text={
-				<>
-					<Text
-						size="text-sm"
-						color="text-black"
-						fontFamily="font-serif"
-						text="Contact Us"
-						tag="h2"
-						additionalClasses="pl-2 pb-0 font-bold"
-					/>
-					<Text
-						size="text-xs"
-						color="text-black"
-						fontFamily="font-serif"
-						text="1-800-800-8000"
-						tag="p"
-						additionalClasses="pl-2 pt-0"
-					/>
-				</>
-			}
-		/>
-	),
-	logo: (
-		<Image
-			src="../../../assets/compass-logo.png"
-			alt="Generic Company Logo."
-			background={false}
-			additionalClasses=" w-40 p-2"
-		/>
-	),
-	nav: (
-		<Nav
-			navData={DUMMYNAVDATA}
-			navBackgroundColor={"#FFFFF"}
-			parentHoverBackground={"none"}
-			parentHoverFontColor={"black"}
-			parentHoverUnderline={true}
-			parentHoverBorderColor={"none"}
-			parentShape={"cornered"}
-			parentBackground={"none"}
-			parentBorderColor={"none"}
-			submenuBackgroundColor={"white"}
-			submenuHoverBackground={"green"}
-			submenuHoverBorderStyle={"top-bottom"}
-			submenuHoverBorderColor={"green"}
-			includeSubmenuImages={true}
-			mobileBreakpoint={"extraLarge"}
-			accordionParentStyle={
-				"cornered p-2 w-full border-b-2 border-b-teal-700 text-black"
-			}
-			accordionExpandedStyle={"pl-2 py-3"}
-		/>
-	),
-};