refactor(icons)!: change FlairIcon to BadgeIcon

.changeset/proud-dragons-sin.md

@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/icons": patch
+---
+
+Change `FlairIcon` to `BadgeIcon`

packages/icons/__tests__/Icon.spec.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from '../../../test/utils';
-import { FlairIcon, Icon, StatusIcon } from '../src';
+import { BadgeIcon, Icon, StatusIcon } from '../src';
 
 describe('Icon', () => {
 	it('renders', () => {
@@ -42,11 +42,11 @@ describe('Icon', () => {
 		expect(screen.getByRole('img', { hidden: true })).toHaveAttribute('aria-hidden', 'true');
 	});
 
-	it('renders a flair icon', () => {
+	it('renders a badge icon', () => {
 		render(
-			<FlairIcon>
+			<BadgeIcon>
 				<Icon name="info" size="medium" />
-			</FlairIcon>,
+			</BadgeIcon>,
 		);
 		expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
 	});

packages/icons/src/BadgeIcon.tsx

@@ -0,0 +1,59 @@
+import type { BoxProps } from '@launchpad-ui/box';
+import type { VariantProps } from 'class-variance-authority';
+
+import { Box } from '@launchpad-ui/box';
+import { cva } from 'class-variance-authority';
+
+import { IconContext } from './Icon';
+import styles from './styles/BadgeIcon.module.css';
+
+const badge = cva(styles.base, {
+	variants: {
+		size: {
+			tiny: styles.tiny,
+			small: styles.small,
+			medium: styles.medium,
+			large: styles.large,
+		},
+		variant: {
+			default: styles.default,
+			blue: styles.blue,
+			cyan: styles.cyan,
+			purple: styles.purple,
+			pink: styles.pink,
+			orange: styles.orange,
+			yellow: styles.yellow,
+			green: styles.green,
+			'gradient-1': styles.gradient1,
+			'gradient-2': styles.gradient2,
+			'gradient-3': styles.gradient3,
+			'gradient-4': styles.gradient4,
+			'gradient-5': styles.gradient5,
+			'gradient-6': styles.gradient6,
+			'gradient-7': styles.gradient7,
+		},
+	},
+	defaultVariants: {
+		size: 'medium',
+		variant: 'default',
+	},
+});
+
+interface BadgeIconProps extends BoxProps, VariantProps<typeof badge> {}
+
+const BadgeIcon = ({
+	children,
+	className,
+	size = 'medium',
+	variant = 'default',
+	...props
+}: BadgeIconProps) => {
+	return (
+		<Box className={badge({ size, variant, className })} {...props}>
+			<IconContext.Provider value={{ size }}>{children}</IconContext.Provider>
+		</Box>
+	);
+};
+
+export { BadgeIcon };
+export type { BadgeIconProps };

packages/icons/src/Icon.tsx

@@ -3,12 +3,14 @@ import type { SVGAttributes } from 'react';
 import type { IconName } from './types';
 
 import { cva } from 'class-variance-authority';
+import { createContext, useContext } from 'react';
 
 import styles from './styles/Icon.module.css';
 
 const icon = cva(styles.base, {
 	variants: {
 		size: {
+			tiny: styles.tiny,
 			small: styles.small,
 			medium: styles.medium,
 			large: styles.large,
@@ -24,6 +26,8 @@ const icon = cva(styles.base, {
 	},
 });
 
+const IconContext = createContext<IconProps>({});
+
 interface IconProps extends SVGAttributes<SVGElement>, VariantProps<typeof icon> {
 	name?: IconName;
 }
@@ -38,12 +42,13 @@ const Icon = ({
 	variant = 'default',
 	...props
 }: IconProps) => {
+	const ctx = useContext(IconContext);
 	return (
 		<svg
 			aria-hidden={props['aria-hidden'] ?? (!props['aria-labelledby'] && !props['aria-label'])}
 			focusable={focusable}
 			role={role}
-			className={icon({ size, variant, className })}
+			className={icon({ size: ctx.size || size, variant, className })}
 			data-icon={name}
 			{...props}
 		>
@@ -53,5 +58,5 @@ const Icon = ({
 	);
 };
 
-export { Icon };
+export { Icon, IconContext };
 export type { IconProps };

packages/icons/src/index.ts

@@ -1,8 +1,8 @@
 export type { IconProps } from './Icon';
-export type { FlairIconProps } from './FlairIcon';
+export type { BadgeIconProps } from './BadgeIcon';
 export type { StatusIconProps } from './StatusIcon';
 export type { IconName } from './types';
 
 export { Icon } from './Icon';
-export { FlairIcon } from './FlairIcon';
+export { BadgeIcon } from './BadgeIcon';
 export { StatusIcon } from './StatusIcon';

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

@@ -0,0 +1,110 @@
+.base {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+}
+
+.default {
+	background: var(--lp-color-bg-ui-tertiary);
+
+	& [data-icon] {
+		fill: var(--lp-color-fill-ui-secondary);
+	}
+}
+
+.tiny {
+	padding: var(--lp-size-2);
+}
+
+.small {
+	padding: var(--lp-spacing-200);
+}
+
+.medium {
+	padding: var(--lp-spacing-300);
+}
+
+.large {
+	padding: var(--lp-spacing-400);
+}
+
+.blue {
+	background: var(--lp-color-brand-blue-light);
+}
+
+.cyan {
+	background: var(--lp-color-brand-cyan-base);
+}
+
+.purple {
+	background: var(--lp-color-brand-purple-base);
+}
+
+.pink {
+	background: var(--lp-color-brand-pink-base);
+}
+
+.orange {
+	background: var(--lp-color-brand-orange-base);
+}
+
+.yellow {
+	background: var(--lp-color-brand-yellow-base);
+}
+
+.green {
+	background: var(--lp-color-brand-green-base);
+}
+
+.gradient1 {
+	background: var(--lp-color-gradient-yellow-cyan);
+}
+
+.gradient2 {
+	background: var(--lp-color-gradient-yellow-pink);
+}
+
+.gradient3 {
+	background: var(--lp-color-gradient-cyan-purple);
+}
+
+.gradient4 {
+	background: var(--lp-color-gradient-cyan-blue);
+}
+
+.gradient5 {
+	background: var(--lp-color-gradient-purple-blue);
+}
+
+.gradient6 {
+	background: var(--lp-color-gradient-purple-pink);
+}
+
+.gradient7 {
+	background: var(--lp-color-gradient-yellow-blue-pale);
+}
+
+.blue,
+.cyan,
+.purple,
+.pink,
+.orange,
+.gradient1,
+.gradient2,
+.gradient3,
+.gradient4,
+.gradient5,
+.gradient6 {
+	& [data-icon] {
+		fill: var(--lp-color-white-900);
+	}
+}
+
+.yellow,
+.green,
+.gradient7 {
+	& [data-icon] {
+		fill: var(--lp-color-black-700);
+	}
+}

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

@@ -12,6 +12,11 @@
 	fill: var(--lp-color-fill-ui-secondary);
 }
 
+.tiny {
+	width: var(--lp-size-12);
+	height: var(--lp-size-12);
+}
+
 .small {
 	width: var(--lp-size-16);
 	height: var(--lp-size-16);

packages/icons/stories/BadgeIcon.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { BadgeIcon, Icon } from '../src';
+
+const meta: Meta<typeof BadgeIcon> = {
+	component: BadgeIcon,
+	title: 'Foundations/Icons/BadgeIcon',
+	parameters: {
+		status: {
+			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__ICONS,
+		},
+	},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BadgeIcon>;
+
+const children = <Icon name="crown" />;
+
+export const Default: Story = {
+	args: { children },
+};
+
+export const Blue: Story = {
+	args: { children, variant: 'blue' },
+};
+
+export const Cyan: Story = {
+	args: { children, variant: 'cyan' },
+};
+
+export const Puple: Story = {
+	args: { children, variant: 'purple' },
+};
+
+export const Pink: Story = {
+	args: { children, variant: 'pink' },
+};
+
+export const Orange: Story = {
+	args: { children, variant: 'orange' },
+};
+
+export const Yellow: Story = {
+	args: { children, variant: 'yellow' },
+};
+
+export const Green: Story = {
+	args: { children, variant: 'green' },
+};
+
+export const Gradient1: Story = {
+	args: { children, variant: 'gradient-1' },
+};
+
+export const Gradient2: Story = {
+	args: { children, variant: 'gradient-2' },
+};
+
+export const Gradient3: Story = {
+	args: { children, variant: 'gradient-3' },
+};
+
+export const Gradient4: Story = {
+	args: { children, variant: 'gradient-4' },
+};
+
+export const Gradient5: Story = {
+	args: { children, variant: 'gradient-5' },
+};
+
+export const Gradient6: Story = {
+	args: { children, variant: 'gradient-6' },
+};
+
+export const Gradient7: Story = {
+	args: { children, variant: 'gradient-7' },
+};