refactor(icons)!: use Box for FlairIcon (#1413)

* refactor(icons)!: use `Box` for `FlairIcon`

* fix: format

.changeset/khaki-ghosts-grow.md

@@ -0,0 +1,7 @@
+---
+"@launchpad-ui/icons": minor
+---
+
+Use `Box` for `FlairIcon`:
+  - Round by default
+  - Prop `gradient` -> `background`

packages/icons/__tests__/Icon.spec.tsx

@@ -44,7 +44,7 @@ describe('Icon', () => {
 
 	it('renders a flair icon', () => {
 		render(
-			<FlairIcon isRounded>
+			<FlairIcon>
 				<Icon name="info" size="medium" />
 			</FlairIcon>,
 		);

packages/icons/package.json

@@ -34,6 +34,7 @@
 		"test": "vitest run --coverage"
 	},
 	"dependencies": {
+		"@launchpad-ui/box": "workspace:~",
 		"@launchpad-ui/tokens": "workspace:~",
 		"class-variance-authority": "0.7.0"
 	},

packages/icons/src/FlairIcon.tsx

@@ -1,46 +1,21 @@
-import type { ComponentProps, ReactElement } from 'react';
-import type { IconProps } from './Icon';
+import type { BoxProps } from '@launchpad-ui/box';
 
-import { cx } from 'class-variance-authority';
-import { cloneElement } from 'react';
+import { Box } from '@launchpad-ui/box';
 
-import styles from './styles/Icon.module.css';
-
-type FlairIconProps = Omit<ComponentProps<'div'>, 'className'> & {
-	'data-test-id'?: string;
-	gradient?: 'purpleToBlue' | 'yellowToCyan' | 'pinkToPurple' | 'cyanToBlue' | 'cyanToPurple';
-	isRounded?: boolean;
-	children: ReactElement<IconProps>;
-};
-
-const FlairIcon = ({
-	children,
-	'data-test-id': testId = 'flair-icon',
-	isRounded,
-	gradient = 'purpleToBlue',
-	...props
-}: FlairIconProps) => {
-	const getIconSize = () => {
-		let iconSize: IconProps['size'] = children.props.size;
-
-		if (!iconSize) {
-			iconSize = 'medium';
-		}
-
-		return iconSize;
-	};
-
-	const icon = cloneElement(children as ReactElement<IconProps>, {
-		className: styles.flairIcon,
-		size: getIconSize(),
-	});
-
-	const classes = cx(styles.flairIconContainer, styles[gradient], isRounded && styles.isRounded);
+interface FlairIconProps extends BoxProps {}
 
+const FlairIcon = ({ children, ...props }: FlairIconProps) => {
 	return (
-		<div className={classes} {...props} data-test-id={testId}>
-			{icon}
-		</div>
+		<Box
+			background="$purple-blue"
+			borderRadius="50%"
+			color="$white.950"
+			display="inline-flex"
+			padding="$400"
+			{...props}
+		>
+			{children}
+		</Box>
 	);
 };
 

packages/icons/src/styles/Icon.module.css

@@ -9,7 +9,7 @@
 }
 
 .subtle {
-	fill: var(--lp-color-gray-600);
+	fill: var(--lp-color-fill-ui-secondary);
 }
 
 .small {
@@ -26,41 +26,3 @@
 	width: var(--lp-size-40);
 	height: var(--lp-size-40);
 }
-
-.flairIcon {
-	fill: white;
-}
-
-.yellowToCyan {
-	background: var(--lp-color-gradient-yellow-cyan);
-}
-
-.cyanToBlue {
-	background: var(--lp-color-gradient-cyan-blue);
-}
-
-.cyanToPurple {
-	background: var(--lp-color-gradient-cyan-purple);
-}
-
-.purpleToBlue {
-	background: var(--lp-color-gradient-purple-blue);
-}
-
-.pinkToPurple {
-	background: var(--lp-color-gradient-pink-purple);
-}
-
-.isRounded {
-	border-radius: 6.25rem;
-}
-
-.flairIconContainer {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
-	padding: var(--lp-spacing-400);
-	width: fit-content;
-	height: fit-content;
-}

packages/icons/stories/FlairIcon.stories.tsx

@@ -1,41 +1,41 @@
-import type { StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { FlairIcon, Icon } from '../src';
 
-export default {
+const meta: Meta<typeof FlairIcon> = {
 	component: FlairIcon,
 	title: 'Foundations/Icons/FlairIcon',
-	description:
-		'Flair icons can be used as either square or circular icons with gradient backgrounds.',
 	parameters: {
 		status: {
 			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__ICONS,
 		},
 	},
 };
 
+export default meta;
+
 type Story = StoryObj<typeof FlairIcon>;
 
-export const Circular: Story = {
-	args: { children: <Icon name="flag" />, isRounded: true },
+export const Square: Story = {
+	args: { children: <Icon name="flag" />, borderRadius: '0' },
 };
 
 export const BlueToPurple: Story = {
-	args: { children: <Icon name="shield-key" />, gradient: 'purpleToBlue' },
+	args: { children: <Icon name="shield-key" /> },
 };
 
 export const YellowToCyan: Story = {
-	args: { children: <Icon name="arrow-up-right-circle" />, gradient: 'yellowToCyan' },
+	args: { children: <Icon name="arrow-up-right-circle" />, background: '$yellow-cyan' },
 };
 
 export const PinkToPurple: Story = {
-	args: { children: <Icon name="flask" />, gradient: 'pinkToPurple' },
+	args: { children: <Icon name="flask" />, background: '$pink-purple' },
 };
 
 export const CyanToBlue: Story = {
-	args: { children: <Icon name="a-to-b" />, gradient: 'cyanToBlue' },
+	args: { children: <Icon name="a-to-b" />, background: '$cyan-blue' },
 };
 
 export const CyanToPurple: Story = {
-	args: { children: <Icon name="warning" />, gradient: 'cyanToPurple' },
+	args: { children: <Icon name="warning" />, background: '$cyan-purple' },
 };