@majordigital/create-acorn 1.0.4 → 1.0.6

package/template/src/ui/components/Accordion.tsx

@@ -0,0 +1,73 @@
+import { MinusIcon, PlusIcon } from '@heroicons/react/24/solid';
+import clsx from 'clsx';
+import {
+	Accordion as AccordionPanel,
+	AccordionItem,
+	AccordionItemButton,
+	AccordionItemHeading,
+	AccordionItemPanel,
+	AccordionItemState,
+} from 'react-accessible-accordion';
+
+interface AccordionProps {
+	children: AccordionItemProps[];
+	className?: string;
+}
+
+const Accordion = ({ children, className }: AccordionProps) => {
+	if (!children) return null;
+
+	return (
+		<AccordionPanel
+			allowMultipleExpanded
+			allowZeroExpanded
+			className={clsx('w-full', className)}
+		>
+			{children.map(panel => (
+				<Accordion.Item
+					key={panel.id}
+					id={panel.id}
+					label={panel.label}
+				>
+					{panel.children}
+				</Accordion.Item>
+			))}
+		</AccordionPanel>
+	);
+};
+
+interface AccordionItemProps {
+	id: string;
+	label: string;
+	children: React.ReactNode;
+}
+
+const Item = ({ id, label, children }: AccordionItemProps) => {
+	return (
+		<AccordionItem uuid={id} className="mb-6 border-b">
+			<AccordionItemHeading className="">
+				<AccordionItemButton className="flex place-content-between items-center gap-6 pb-6">
+					{label}
+					<AccordionItemState>
+						{({ expanded }) =>
+							!expanded ? (
+								<PlusIcon
+									className="size-10 shrink-0"
+									aria-label="Open panel"
+								/>
+							) : (
+								<MinusIcon
+									className="size-10 shrink-0"
+									aria-label="Close panel"
+								/>
+							)
+						}
+					</AccordionItemState>
+				</AccordionItemButton>
+			</AccordionItemHeading>
+			<AccordionItemPanel className="pb-6">{children}</AccordionItemPanel>
+		</AccordionItem>
+	);
+};
+
+Accordion.Item = Item;

package/template/src/ui/components/AnnouncementBar.tsx

@@ -0,0 +1,36 @@
+import { XMarkIcon } from '@heroicons/react/24/solid';
+import clsx from 'clsx';
+
+interface AnnouncementBarProps {
+	children: React.ReactNode;
+	className?: string;
+}
+
+const AnnouncementBar = ({ children, className }: AnnouncementBarProps) => {
+	return (
+		<div
+			className={clsx(
+				'relative isolate flex items-center gap-x-6 overflow-hidden bg-gray-50 px-6 py-2.5 sm:px-3.5 sm:before:flex-1',
+				className
+			)}
+		>
+			<div className="flex flex-wrap items-center gap-x-4 gap-y-2">
+				{children}
+			</div>
+			<div className="flex flex-1 justify-end">
+				<button
+					type="button"
+					className="-m-3 p-3 focus-visible:outline-offset-[-4px]"
+				>
+					<span className="sr-only">Dismiss</span>
+					<XMarkIcon
+						className="size-5 text-gray-900"
+						aria-hidden="true"
+					/>
+				</button>
+			</div>
+		</div>
+	);
+};
+
+export default AnnouncementBar;

package/template/src/ui/components/Breadcrumbs.tsx

@@ -0,0 +1,60 @@
+import clsx from 'clsx';
+import Link from 'next/link';
+import type { ComponentProps } from 'react';
+
+interface BreadcrumbProps extends ComponentProps<'nav'> {
+	breadcrumbs: BreadcrumbItemProps[];
+	className?: string;
+}
+interface BreadcrumbItemProps {
+	label: string;
+	href: string;
+	isActive?: boolean;
+}
+
+const Breadcrumbs = ({ breadcrumbs, className, ...props }: BreadcrumbProps) => {
+	const itemClassName = 'flex gap-2 py-2';
+	const textClassName =
+		'text-xs lg:text-sm capitalize font-light hover:underline';
+
+	return (
+		<nav
+			aria-label="Breadcrumbs"
+			className={clsx('mb-4 block', className)}
+			{...props}
+		>
+			<ol className="flex gap-2">
+				<li className={itemClassName}>
+					<Link href="/" className={textClassName}>
+						Home
+					</Link>
+					<span className={textClassName}>/</span>
+				</li>
+				{breadcrumbs.map((crumb: BreadcrumbItemProps, key: number) => (
+					<li
+						aria-current={crumb.isActive}
+						className={clsx(itemClassName, {
+							'': crumb.isActive,
+						})}
+						key={key}
+					>
+						<Link href={crumb.href} className={textClassName}>
+							{crumb.label}
+						</Link>
+						{key + 1 !== breadcrumbs.length && (
+							<span
+								className={textClassName}
+								aria-disabled="true"
+								aria-current="page"
+							>
+								/
+							</span>
+						)}
+					</li>
+				))}
+			</ol>
+		</nav>
+	);
+};
+
+export default Breadcrumbs;

package/template/src/ui/components/ButtonGroup.tsx

@@ -0,0 +1,42 @@
+import clsx from 'clsx';
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+
+interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+	as?: React.ElementType;
+	align?: 'left' | 'center' | 'right' | 'stretch';
+	spacing?: 'md' | 'lg' | 'xl' | 'auto';
+}
+
+const ButtonGroup = ({
+	children,
+	as: Component = 'div',
+	className,
+	align = 'left',
+	spacing,
+	...props
+}: ButtonGroupProps) => {
+	const alignClass = clsx('flex flex-col items-center sm:flex-row', {
+		'justify-start': align === 'left',
+		'justify-center': align === 'center',
+		'justify-end': align === 'right',
+		'justify-stretch': align === 'stretch',
+	});
+
+	const spacingClass = clsx({
+		'gap-4': spacing === 'md',
+		'gap-8': spacing === 'lg',
+		'gap-12': spacing === 'xl',
+	});
+
+	return (
+		<Component
+			className={clsx(alignClass, spacingClass, className)}
+			{...props}
+		>
+			{children}
+		</Component>
+	);
+};
+
+export default ButtonGroup;

package/template/src/ui/components/CallToAction.tsx

@@ -0,0 +1,21 @@
+import clsx from 'clsx';
+import type { HTMLAttributes } from 'react';
+
+interface CallToActionProps extends HTMLAttributes<HTMLDivElement> {
+	as?: React.ElementType;
+}
+
+const CallToAction = ({
+	children,
+	as: Component = 'section',
+	className,
+	...props
+}: CallToActionProps) => {
+	return (
+		<Component className={clsx('rounded', className)} {...props}>
+			{children}
+		</Component>
+	);
+};
+
+export default CallToAction;

package/template/src/ui/components/Card.tsx

@@ -0,0 +1,21 @@
+import clsx from 'clsx';
+import type { HTMLAttributes } from 'react';
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+	as?: React.ElementType;
+}
+
+const Card = ({
+	children,
+	as: Component = 'article',
+	className,
+	...props
+}: CardProps) => {
+	return (
+		<Component className={clsx('', className)} {...props}>
+			{children}
+		</Component>
+	);
+};
+
+export default Card;

package/template/src/ui/components/FeaturedContent.tsx

@@ -0,0 +1,21 @@
+import clsx from 'clsx';
+import type { HTMLAttributes } from 'react';
+
+interface FeaturedContentProps extends HTMLAttributes<HTMLDivElement> {
+	as?: React.ElementType;
+}
+
+const FeaturedContent = ({
+	children,
+	as: Component = 'div',
+	className,
+	...props
+}: FeaturedContentProps) => {
+	return (
+		<Component className={clsx('', className)} {...props}>
+			{children}
+		</Component>
+	);
+};
+
+export default FeaturedContent;

package/template/src/ui/components/FormContact.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import clsx from 'clsx';
+import React, { useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import Button from '@/ui/elements/Button';
+import H from '@/ui/elements/typography/H';
+import P from '@/ui/elements/typography/P';
+
+import { Form, FormControl, FormField, FormItem } from '../elements/form/Form';
+import FormLabel from '../elements/form/FormLabel';
+import FormMessage from '../elements/form/FormMessage';
+import Input from '../elements/form/Input';
+import Textarea from '../elements/form/Textarea';
+
+const FormSchema = z.object({
+	firstname: z.string().min(2, {
+		message: 'First name must be at least 2 characters.',
+	}),
+	lastname: z.string().min(2, {
+		message: 'Last name must be at least 2 characters.',
+	}),
+	email: z
+		.string()
+		.min(2, {
+			message: 'Email must be at least 2 characters.',
+		})
+		.email('Please enter a valid valid email.'),
+	phone: z.string().min(2, {
+		message: 'Phone must be at least 2 characters.',
+	}),
+	message: z.string().min(2, {
+		message: 'Message must be at least 2 characters.',
+	}),
+});
+
+const FormContact = ({ className }: { className?: string }) => {
+	const form = useForm<z.infer<typeof FormSchema>>({
+		resolver: zodResolver(FormSchema),
+		defaultValues: {
+			firstname: '',
+			lastname: '',
+			email: '',
+			phone: '',
+			message: '',
+		},
+	});
+
+	const [status, setStatus] = useState('');
+	const [error, setError] = useState('');
+
+	const formRef = useRef<null | HTMLFormElement>(null);
+
+	const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+		try {
+			const res = await fetch('/', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/x-www-form-urlencoded',
+				},
+				body: new URLSearchParams({
+					'form-name': 'contact',
+					...data,
+				}).toString(),
+			});
+			if (res.status === 200) {
+				setStatus('sent');
+				formRef?.current?.scrollIntoView({
+					behavior: 'smooth',
+					block: 'end',
+				});
+			} else {
+				setStatus('error');
+				setError(`${res.status} ${res.statusText}`);
+			}
+		} catch (e) {
+			setStatus('error');
+			setError(`${e}`);
+		}
+	};
+
+	return status === 'sent' ? (
+		<div className={clsx('m-auto w-96 max-w-full text-center', className)}>
+			<H level={3} spacing="b">
+				Success!
+			</H>
+			<P>
+				Thank you for your enquiry. One of our team will be in touch
+				shortly.
+			</P>
+		</div>
+	) : (
+		<Form {...form}>
+			<form
+				ref={formRef}
+				id="contact"
+				name="contact"
+				data-netlify="true"
+				data-netlify-honeypot="bot-field"
+				onSubmit={form.handleSubmit(onSubmit)}
+				className={clsx('grid max-w-xl grid-cols-2 gap-6', className)}
+			>
+				<label hidden>
+					Don&apos;t fill this out if you&apos;re human:{' '}
+					<input name="bot-field" />
+				</label>
+				<input type="hidden" name="form-name" value="contact" />
+				<FormField
+					control={form.control}
+					name="firstname"
+					render={({ field }) => (
+						<FormItem className="col-span-1">
+							<FormLabel>First name</FormLabel>
+							<FormControl>
+								<Input {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={form.control}
+					name="lastname"
+					render={({ field }) => (
+						<FormItem className="col-span-1">
+							<FormLabel>Last name</FormLabel>
+							<FormControl>
+								<Input {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={form.control}
+					name="email"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Email address</FormLabel>
+							<FormControl>
+								<Input {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={form.control}
+					name="phone"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Phone</FormLabel>
+							<FormControl>
+								<Input {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={form.control}
+					name="message"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Message</FormLabel>
+							<FormControl>
+								<Textarea {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				{status === 'error' && (
+					<FormMessage>Error: {error}</FormMessage>
+				)}
+
+				<div className="col-span-full">
+					<Button type="submit" disabled={status === 'pending'}>
+						Submit form
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+};
+
+export default FormContact;

package/template/src/ui/components/Nav.tsx

@@ -0,0 +1,39 @@
+import clsx from 'clsx';
+import type { ComponentProps } from 'react';
+
+import NavPrimaryLink from '@/ui/elements/navigation/NavPrimaryLink';
+
+import {
+	NavPopover,
+	NavPopoverButton,
+	NavPopoverPanel,
+} from '../elements/navigation/NavPopover';
+
+const NavItem = ({ children, className, ...props }: ComponentProps<'li'>) => (
+	<li className={clsx('block', className)} {...props}>
+		{children}
+	</li>
+);
+
+const Nav = ({ ...props }: ComponentProps<'nav'>) => (
+	<nav className="hidden shrink-0 lg:block" {...props}>
+		<ul className="flex gap-4 xl:gap-8">
+			<NavItem>
+				<NavPrimaryLink href="/">Home</NavPrimaryLink>
+			</NavItem>
+			<NavItem>
+				<NavPopover>
+					<NavPopoverButton href="/test">
+						Popover Button
+					</NavPopoverButton>
+					<NavPopoverPanel>Panel contents</NavPopoverPanel>
+				</NavPopover>
+			</NavItem>
+			<NavItem>
+				<NavPrimaryLink href="/">Home</NavPrimaryLink>
+			</NavItem>
+		</ul>
+	</nav>
+);
+
+export default Nav;

package/template/src/ui/components/NavCollapsed.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import {
+	Dialog,
+	DialogPanel,
+	Transition,
+	TransitionChild,
+} from '@headlessui/react';
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/solid';
+import { Fragment, useState } from 'react';
+
+import NavPrimaryLink from '@/ui/elements/navigation/NavPrimaryLink';
+import Container from '@/ui/layout/Container';
+
+const NavItem = ({ title, href }: { title: string; href: string }) => (
+	<li className="block">
+		<NavPrimaryLink href={href}>{title}</NavPrimaryLink>
+	</li>
+);
+
+const NavCollapsed = () => {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<>
+			<button
+				id="menubutton"
+				aria-label="Open menu"
+				aria-haspopup="true"
+				onClick={() => setIsOpen(true)}
+				className="grow-0 lg:hidden"
+			>
+				<Bars3Icon className="h-10" />
+			</button>
+			<Transition show={isOpen} as={Fragment}>
+				<Dialog
+					id="menu"
+					onClose={() => setIsOpen(false)}
+					as="nav"
+					aria-labelledby="menubutton"
+				>
+					<div className="fixed inset-0 z-50 overflow-hidden">
+						<div className="absolute inset-0 overflow-hidden">
+							<div className="fixed inset-y-0 right-0 flex">
+								<TransitionChild
+									as={Fragment}
+									enter="transform transition ease-in-out duration-500 sm:duration-700"
+									enterFrom="translate-x-full"
+									enterTo="translate-x-0"
+									leave="transform transition ease-in-out duration-500 sm:duration-700"
+									leaveFrom="translate-x-0"
+									leaveTo="translate-x-full"
+								>
+									<DialogPanel
+										className={`bg-blue-500 bg-gradient-to-t from-blue-500 font-sans lg:hidden`}
+									>
+										<Container className="flex items-center justify-end overflow-hidden py-2">
+											<button
+												id="menubutton"
+												aria-label="Close menu"
+												aria-haspopup="true"
+												onClick={() => setIsOpen(false)}
+												className="flex items-center gap-4 text-sm uppercase text-white"
+											>
+												<span>Close</span>
+												<XMarkIcon className="h-12 fill-white" />
+											</button>
+										</Container>
+										<nav
+											className="shrink-0 px-4 text-white lg:hidden"
+											aria-label="Main"
+										>
+											<ul className="flex flex-col">
+												<NavItem
+													title="Home"
+													href="/"
+												/>
+											</ul>
+										</nav>
+									</DialogPanel>
+								</TransitionChild>
+							</div>
+						</div>
+					</div>
+				</Dialog>
+			</Transition>
+		</>
+	);
+};
+
+export default NavCollapsed;

package/template/src/ui/components/Pagination.tsx

@@ -0,0 +1,96 @@
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid';
+import clsx from 'clsx';
+import Link from 'next/link';
+import type { AnchorHTMLAttributes, ComponentProps } from 'react';
+
+const Pagination = ({
+	children,
+	className,
+	...props
+}: ComponentProps<'nav'>) => {
+	return (
+		<nav
+			role="navigation"
+			aria-label="pagination"
+			className={clsx('mx-auto flex w-full justify-center', className)}
+			{...props}
+		>
+			<ul className="flex flex-row items-center gap-1">{children}</ul>
+		</nav>
+	);
+};
+
+const PaginationItem = ({
+	children,
+	className,
+	...props
+}: ComponentProps<'li'>) => {
+	return (
+		<li
+			className={clsx('mx-auto flex w-full justify-center', className)}
+			{...props}
+		>
+			{children}
+		</li>
+	);
+};
+
+interface PaginationLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+	href: string;
+	isActive?: boolean;
+}
+
+const PaginationLink = ({
+	href,
+	children,
+	className,
+	isActive,
+	...props
+}: PaginationLinkProps) => {
+	return (
+		<Link
+			href={href}
+			aria-current={isActive ? 'page' : undefined}
+			className={clsx('', className)}
+			{...props}
+		>
+			{children}
+		</Link>
+	);
+};
+
+const PaginationPrev = ({ href, className, ...props }: PaginationLinkProps) => {
+	return (
+		<Link
+			href={href}
+			aria-label="Go to previous page"
+			className={clsx('', className)}
+			{...props}
+		>
+			<ChevronLeftIcon className="size-4" />
+			<span>Previous</span>
+		</Link>
+	);
+};
+
+const PaginationNext = ({ href, className, ...props }: PaginationLinkProps) => {
+	return (
+		<Link
+			href={href}
+			aria-label="Go to next page"
+			className={clsx('', className)}
+			{...props}
+		>
+			<span>Next</span>
+			<ChevronRightIcon className="size-4" />
+		</Link>
+	);
+};
+
+export {
+	Pagination,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrev,
+};