feat: add icon handling

lib/components/Icon/Icon.tsx

@@ -11,11 +11,13 @@ import { Box, useBoxStyles } from '../Box';
 
 import * as styles from './Icon.css';
 
+export type IconEl = IconType | ReactElement<SVGAttributes<SVGElement>, 'svg'>;
+
 export interface Props {
 	display?: Extract<BoxStyleProps['display'], 'block' | 'inlineBlock'>;
 	className?: string;
 	size?: ResponsiveProp<keyof typeof styles.size | string>;
-	icon: IconType | ReactElement<SVGAttributes<SVGElement>, 'svg'>;
+	icon: IconEl;
 }
 
 export const Icon: FunctionComponent<Props> = ({

lib/components/Icon/index.ts

@@ -1 +1 @@
-export { Icon } from './Icon';
+export { Icon, type IconEl, type Props as IconProps } from './Icon';

lib/components/IconCheckboxButton/IconCheckboxButton.css.ts

@@ -37,6 +37,11 @@ export type StyledWrapperProps = NonNullable<
 	RecipeVariants<typeof styledWrapper>
 >;
 
+export const iconContainer = style({
+	height: '26px',
+	width: '26px',
+});
+
 const checkboxBaseTransition = style({
 	transitionProperty: 'background',
 	transitionTimingFunction: 'ease-in',
@@ -77,19 +82,3 @@ export const styledCheckbox = recipe({
 export type StyledCheckboxProps = NonNullable<
 	RecipeVariants<typeof styledCheckbox>
 >;
-
-export const styledIcon = recipe({
-	base: {
-		height: '26px',
-		width: '26px',
-	},
-	variants: {
-		hidden: {
-			true: {
-				display: 'none',
-			},
-		},
-	},
-});
-
-export type StyledIconProps = NonNullable<RecipeVariants<typeof styledIcon>>;

lib/components/IconCheckboxButton/IconCheckboxButton.stories.tsx

@@ -1,3 +1,4 @@
+import { AirconIcon } from '@autoguru/icons';
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, getAllByRole, within, userEvent } from '@storybook/test';
 
@@ -7,9 +8,10 @@ const meta: Meta<typeof IconCheckboxButton> = {
 	title: 'Components/Icon Checkbox Button',
 	component: IconCheckboxButton,
 	args: {
-		children: 'Re-gas Air-conditioning',
+		label: 'Re-gas Air-conditioning',
+		icon: AirconIcon,
 		name: 'extras',
-		className: 'demo-checkbox-buttons-class',
+		// className: 'demo-checkbox-buttons-class',
 		onChange: fn(),
 	},
 	tags: ['beta'],

lib/components/IconCheckboxButton/IconCheckboxButton.tsx

@@ -3,17 +3,29 @@ import { useCheckbox, useFocusRing, useHover } from 'react-aria';
 import type { AriaCheckboxProps } from 'react-aria';
 import { useToggleState } from 'react-stately';
 
+import { Icon, type IconEl } from '../Icon';
 import { VisuallyHidden } from '../VisuallyHidden';
 
 import {
+	iconContainer,
 	styledCheckbox,
-	styledIcon,
 	styledWrapper,
 	type StyledWrapperProps,
 } from './IconCheckboxButton.css';
 
 interface IconCheckboxButtonProps extends AriaCheckboxProps {
-	icon?: React.ReactNode;
+	/**
+	 * The text label for the checkbox
+	 */
+	label: string;
+	/**
+	 * Source an icon from `@autoguru/icons`
+	 */
+	icon?: IconEl;
+	/**
+	 * Additional text description content for the checkbox button
+	 */
+	description?: string;
 	className?: string;
 }
 
@@ -48,16 +60,17 @@ const Wrapper = (props: PropsWithChildren<StyledWrapperProps>) => {
 };
 
 export const IconCheckboxButton = ({
+	description,
 	icon,
+	label,
 	...props
 }: IconCheckboxButtonProps) => {
 	const ref = useRef<HTMLInputElement>(null);
 	const state = useToggleState(props);
 	const { inputProps, isSelected } = useCheckbox(props, state, ref);
 	const { focusProps, isFocusVisible } = useFocusRing();
 	const { hoverProps, isHovered } = useHover({});
-	const hasIcon = !!icon;
-	const showCheckbox = !hasIcon || isHovered || isSelected;
+	const showCheckbox = !icon || isHovered || isSelected;
 
 	return (
 		<Wrapper
@@ -70,7 +83,7 @@ export const IconCheckboxButton = ({
 			<VisuallyHidden>
 				<input {...inputProps} ref={ref} />
 			</VisuallyHidden>
-			<div>
+			<div className={iconContainer}>
 				{showCheckbox ? (
 					<div
 						className={styledCheckbox()}
@@ -80,9 +93,13 @@ export const IconCheckboxButton = ({
 						<IconTick />
 					</div>
 				) : (
-					<div className={styledIcon()}>{icon}</div>
+					<Icon icon={icon} size="100%" />
 				)}
 			</div>
+			<div>
+				<span>{label}</span>
+				<span>{description}</span>
+			</div>
 		</Wrapper>
 	);
 };