Components: Make local copy of Icon (#103562)

* Copy code from `@wordpress/components`

* Apply changes

Author: mirka

packages/components/src/icon/index.stories.tsx

@@ -0,0 +1,109 @@
+import { wordpress } from '@wordpress/icons';
+import { SVG, Path } from '@wordpress/primitives';
+import { Icon } from '.';
+import type { Meta, StoryFn } from '@storybook/react';
+
+const meta: Meta< typeof Icon > = {
+	title: 'Still Internal/Icon',
+	component: Icon,
+	parameters: {
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Icon > = ( args ) => <Icon { ...args } />;
+
+export const Default = Template.bind( {} );
+Default.args = {
+	icon: wordpress,
+};
+
+export const FillColor: StoryFn< typeof Icon > = ( args ) => {
+	return (
+		<div
+			style={ {
+				fill: 'blue',
+			} }
+		>
+			<Icon { ...args } />
+		</div>
+	);
+};
+FillColor.args = {
+	...Default.args,
+};
+
+/**
+ * When `icon` is a function, it will be passed the `size` prop and any other additional props.
+ */
+export const WithAFunction = Template.bind( {} );
+WithAFunction.args = {
+	...Default.args,
+	icon: ( { size }: { size?: number } ) => (
+		<img
+			width={ size }
+			height={ size }
+			src="https://s.w.org/style/images/about/WordPress-logotype-wmark.png"
+			alt="WordPress"
+		/>
+	),
+};
+WithAFunction.parameters = {
+	docs: {
+		source: {
+			code: `
+<Icon
+  icon={ ( { size } ) => (
+    <img
+      width={ size }
+      height={ size }
+      src="https://s.w.org/style/images/about/WordPress-logotype-wmark.png"
+      alt="WordPress"
+    />
+  ) }
+/>
+		`,
+		},
+	},
+};
+
+const MyIconComponent = ( { size }: { size?: number } ) => (
+	<SVG width={ size } height={ size }>
+		<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+	</SVG>
+);
+
+/**
+ * When `icon` is a component, it will be passed the `size` prop and any other additional props.
+ */
+export const WithAComponent = Template.bind( {} );
+WithAComponent.args = {
+	...Default.args,
+	icon: <MyIconComponent />,
+};
+WithAComponent.parameters = {
+	docs: {
+		source: {
+			code: `
+const MyIconComponent = ( { size } ) => (
+  <SVG width={ size } height={ size }>
+    <Path d="M5 4v3h5.5v12h3V7H19V4z" />
+  </SVG>
+);
+
+<Icon icon={ <MyIconComponent /> } />
+		`,
+		},
+	},
+};
+
+export const WithAnSVG = Template.bind( {} );
+WithAnSVG.args = {
+	...Default.args,
+	icon: (
+		<SVG>
+			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+		</SVG>
+	),
+};

packages/components/src/icon/index.tsx

@@ -0,0 +1,76 @@
+/**
+ * Forked from `@wordpress/components`
+ *
+ * Only forked for CSS collision safety, in case styles or classnames are added upstream.
+ *
+ * - Removed Gridicons support (non-critical).
+ */
+
+import { cloneElement, createElement, isValidElement } from '@wordpress/element';
+import { SVG } from '@wordpress/primitives';
+import type { ComponentType } from 'react';
+
+type IconType =
+	| ComponentType< { size?: number } >
+	| ( ( props: { size?: number } ) => JSX.Element )
+	| JSX.Element;
+
+type AdditionalProps< T > = T extends ComponentType< infer U > ? U : Record< string, unknown >;
+
+type Props = {
+	/**
+	 * The icon to render. In most cases, you should use an icon from
+	 * [the `@wordpress/icons` package](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library).
+	 *
+	 * Other supported values are: component instances, functions, and `null`.
+	 *
+	 * The `size` value, as well as any other additional props, will be passed through.
+	 * @default null
+	 */
+	icon?: IconType | null;
+	/**
+	 * The size (width and height) of the icon.
+	 * @default 24
+	 */
+	size?: number;
+} & AdditionalProps< IconType >;
+
+/**
+ * Renders a raw icon without any initial styling or wrappers.
+ *
+ * ```jsx
+ * import { Icon } from '@automattic/ui';
+ * import { wordpress } from '@wordpress/icons';
+ *
+ * <Icon icon={ wordpress } />
+ * ```
+ */
+export function Icon( { icon = null, size = 24, ...additionalProps }: Props ) {
+	if ( 'function' === typeof icon ) {
+		return createElement( icon, {
+			size,
+			...additionalProps,
+		} );
+	}
+
+	if ( icon && ( icon.type === 'svg' || icon.type === SVG ) ) {
+		const appliedProps = {
+			...icon.props,
+			width: size,
+			height: size,
+			...additionalProps,
+		};
+
+		return <SVG { ...appliedProps } />;
+	}
+
+	if ( isValidElement( icon ) ) {
+		return cloneElement( icon, {
+			// @ts-ignore Just forwarding the size prop along
+			size,
+			...additionalProps,
+		} );
+	}
+
+	return icon;
+}

packages/components/src/icon/test/index.tsx

@@ -0,0 +1,81 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render, screen } from '@testing-library/react';
+import { Path, SVG } from '@wordpress/primitives';
+import { Icon } from '..';
+
+describe( 'Icon', () => {
+	const testId = 'icon';
+	const className = 'example-class';
+	const svg = (
+		<SVG>
+			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+		</SVG>
+	);
+
+	it( 'renders nothing when icon omitted', () => {
+		render( <Icon data-testid={ testId } /> );
+
+		expect( screen.queryByTestId( testId ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'renders a function', () => {
+		render( <Icon icon={ () => <span data-testid={ testId } /> } /> );
+
+		expect( screen.getByTestId( testId ) ).toBeVisible();
+	} );
+
+	it( 'renders an element', () => {
+		render( <Icon icon={ <span data-testid={ testId } /> } /> );
+
+		expect( screen.getByTestId( testId ) ).toBeVisible();
+	} );
+
+	it( 'renders an svg element', () => {
+		render( <Icon data-testid={ testId } icon={ svg } /> );
+
+		expect( screen.getByTestId( testId ) ).toBeVisible();
+	} );
+
+	it( 'renders an svg element with a default width and height of 24', () => {
+		render( <Icon data-testid={ testId } icon={ svg } /> );
+		const icon = screen.getByTestId( testId );
+
+		expect( icon ).toHaveAttribute( 'width', '24' );
+		expect( icon ).toHaveAttribute( 'height', '24' );
+	} );
+
+	it( 'renders an svg element and override its width and height', () => {
+		render(
+			<Icon
+				data-testid={ testId }
+				icon={
+					<SVG width={ 64 } height={ 64 }>
+						<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+					</SVG>
+				}
+				size={ 32 }
+			/>
+		);
+		const icon = screen.getByTestId( testId );
+
+		expect( icon ).toHaveAttribute( 'width', '32' );
+		expect( icon ).toHaveAttribute( 'height', '32' );
+	} );
+
+	it( 'renders an svg element and does not override width and height if already specified', () => {
+		render( <Icon data-testid={ testId } icon={ svg } size={ 32 } /> );
+		const icon = screen.getByTestId( testId );
+
+		expect( icon ).toHaveAttribute( 'width', '32' );
+		expect( icon ).toHaveAttribute( 'height', '32' );
+	} );
+
+	it( 'renders a component', () => {
+		const MyComponent = () => <span data-testid={ testId } className={ className } />;
+		render( <Icon icon={ MyComponent } /> );
+
+		expect( screen.getByTestId( testId ) ).toHaveClass( className );
+	} );
+} );