Revert "Add PoweredBy component (#103029)" (#103261)

This reverts commit 89c45bd.

Author: ciampo

packages/components/src/index.ts

@@ -63,7 +63,6 @@ export { ExperienceControl } from './experience-control';
 export { default as SummaryButton } from './summary-button';
 export { default as CoreBadge } from './core-badge';
 export { default as Menu } from './menu';
-export { PoweredBy } from './powered-by';
 export { Tabs } from './tabs';
 
 // Logos

packages/components/src/logos/jetpack-logo/index.tsx

@@ -8,8 +8,6 @@ const PALETTE = colorStudio.colors;
 const COLOR_JETPACK = PALETTE[ 'Jetpack Green 40' ];
 const COLOR_WHITE = PALETTE[ 'White' ]; // eslint-disable-line dot-notation
 
-export type JetpackLogoColorVariant = 'color' | 'black' | 'white';
-
 type JetpackLogoProps = {
 	/**
 	 * Whether to render the full logo.
@@ -26,46 +24,27 @@ type JetpackLogoProps = {
 	 * @default false
 	 */
 	monochrome?: boolean;
-	/**
-	 * Color variant
-	 * @default 'color'
-	 */
-	colorVariant?: JetpackLogoColorVariant;
-	className?: string;
 };
 
-const getJetpackColors = ( colorVariant: JetpackLogoColorVariant ) => {
-	switch ( colorVariant ) {
-		case 'black':
-			return { primary: 'black', secondary: 'white' };
-		case 'white':
-			return { primary: 'white', secondary: 'black' };
-		case 'color':
-		default:
-			return { primary: COLOR_JETPACK, secondary: COLOR_WHITE };
-	}
-};
+const LogoPathSize32 = ( { monochrome = false }: Pick< JetpackLogoProps, 'monochrome' > ) => {
+	const primary = monochrome ? 'white' : COLOR_JETPACK;
+	const secondary = monochrome ? 'black' : COLOR_WHITE;
 
-const LogoPathSize32 = ( {
-	colorVariant = 'color',
-	monochrome = false,
-}: Pick< JetpackLogoProps, 'colorVariant' | 'monochrome' > ) => {
-	const { primary, secondary } = getJetpackColors( colorVariant );
 	return (
 		<>
 			<path
 				className="jetpack-logo__icon-circle"
-				fill={ monochrome ? 'white' : primary }
+				fill={ primary }
 				d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z"
 			/>
 			<polygon
 				className="jetpack-logo__icon-triangle"
-				fill={ monochrome ? 'black' : secondary }
+				fill={ secondary }
 				points="15,19 7,19 15,3 "
 			/>
 			<polygon
 				className="jetpack-logo__icon-triangle"
-				fill={ monochrome ? 'black' : secondary }
+				fill={ secondary }
 				points="17,29 17,13 25,13 "
 			/>
 		</>
@@ -85,40 +64,22 @@ const LogoPathSize32Monochrome = () => (
 	</>
 );
 
-/**
- * JetpackLogo component
- *
- * The 'colorVariant' prop controls the color scheme of the logo: 'color', 'black', or 'white'.
- * - 'color': Uses Jetpack green and white (default).
- * - 'black': Renders the logo in black and white.
- * - 'white': Renders the logo in white and black (for dark backgrounds).
- *
- * The 'monochrome' prop, when true, overrides the 'colorVariant' and renders the logo and text in a single color scheme:
- * - The icon is white, and the text and triangles are black, regardless of the 'colorVariant'.
- */
 export const JetpackLogo = ( {
 	full = false,
 	monochrome = false,
 	size = 32,
-	colorVariant = 'color',
 	className,
 	...props
 }: JetpackLogoProps & React.SVGProps< SVGSVGElement > ) => {
 	const classes = clsx( 'jetpack-logo', className );
 
 	if ( full === true ) {
-		const textFill = colorVariant === 'white' && ! monochrome ? '#fff' : '#151E25';
 		return (
 			<svg height={ size } className={ classes } viewBox="0 0 118 32" { ...props }>
 				<title>Jetpack</title>
-				{ monochrome ? (
-					<LogoPathSize32Monochrome />
-				) : (
-					<LogoPathSize32 colorVariant={ colorVariant } />
-				) }
+				{ monochrome ? <LogoPathSize32Monochrome /> : <LogoPathSize32 /> }
 				<path
 					className="jetpack-logo__text"
-					fill={ textFill }
 					d="M41.3 26.6c-.5-.7-.9-1.4-1.3-2.1 2.3-1.4 3-2.5 3-4.6V8h-3V6h6v13.4C46 22.8 45 24.8 41.3 26.6zM58.5 21.3c-1.5.5-2.7.6-4.2.6-3.6 0-5.8-1.8-5.8-6 0-3.1 1.9-5.9 5.5-5.9s4.9 2.5 4.9 4.9c0 .8 0 1.5-.1 2h-7.3c.1 2.5 1.5 2.8 3.6 2.8 1.1 0 2.2-.3 3.4-.7C58.5 19 58.5 21.3 58.5 21.3zM56 15c0-1.4-.5-2.9-2-2.9-1.4 0-2.3 1.3-2.4 2.9C51.6 15 56 15 56 15zM65 18.4c0 1.1.8 1.3 1.4 1.3.5 0 2-.2 2.6-.4v2.1c-.9.3-2.5.5-3.7.5-1.5 0-3.2-.5-3.2-3.1V12H60v-2h2.1V7.1H65V10h4v2h-4V18.4zM71 10h3v1.3c1.1-.8 1.9-1.3 3.3-1.3 2.5 0 4.5 1.8 4.5 5.6s-2.2 6.3-5.8 6.3c-.9 0-1.3-.1-2-.3V28h-3V10zM76.5 12.3c-.8 0-1.6.4-2.5 1.2v5.9c.6.1.9.2 1.8.2 2 0 3.2-1.3 3.2-3.9C79 13.4 78.1 12.3 76.5 12.3zM93 22h-3v-1.5c-.9.7-1.9 1.5-3.5 1.5-1.5 0-3.1-1.1-3.1-3.2 0-2.9 2.5-3.4 4.2-3.7l2.4-.3v-.3c0-1.5-.5-2.3-2-2.3-.7 0-2.3.5-3.7 1.1L84 11c1.2-.4 3-1 4.4-1 2.7 0 4.6 1.4 4.6 4.7L93 22zM90 16.4l-2.2.4c-.7.1-1.4.5-1.4 1.6 0 .9.5 1.4 1.3 1.4s1.5-.5 2.3-1V16.4zM104.5 21.3c-1.1.4-2.2.6-3.5.6-4.2 0-5.9-2.4-5.9-5.9 0-3.7 2.3-6 6.1-6 1.4 0 2.3.2 3.2.5V13c-.8-.3-2-.6-3.2-.6-1.7 0-3.2.9-3.2 3.6 0 2.9 1.5 3.8 3.3 3.8.9 0 1.9-.2 3.2-.7V21.3zM110 15.2c.2-.3.2-.8 3.8-5.2h3.7l-4.6 5.7 5 6.3h-3.7l-4.2-5.8V22h-3V6h3V15.2z"
 				/>
 			</svg>
@@ -135,11 +96,7 @@ export const JetpackLogo = ( {
 
 	return (
 		<svg className={ classes } height={ size } width={ size } viewBox="0 0 32 32" { ...props }>
-			{ monochrome ? (
-				<LogoPathSize32Monochrome />
-			) : (
-				<LogoPathSize32 colorVariant={ colorVariant } />
-			) }
+			{ monochrome ? <LogoPathSize32Monochrome /> : <LogoPathSize32 /> }
 		</svg>
 	);
 };

packages/components/src/logos/jetpack-logo/stories/index.stories.tsx

@@ -9,44 +9,16 @@ export default meta;
 
 type Story = StoryObj< typeof JetpackLogo >;
 
-export const Color: Story = {
-	args: { colorVariant: 'color' },
-};
-
-export const Black: Story = {
-	args: { colorVariant: 'black' },
-};
-
-export const White: Story = {
-	args: { colorVariant: 'white' },
-	decorators: [
-		( Story ) => (
-			<div style={ { background: '#000', padding: '20px' } }>
-				<Story />
-			</div>
-		),
-	],
-};
-
-export const FullColor: Story = {
-	args: { full: true, colorVariant: 'color' },
-};
-
-export const FullBlack: Story = {
-	args: { full: true, colorVariant: 'black' },
-};
+export const Default: Story = {};
 
-export const FullWhite: Story = {
-	args: { full: true, colorVariant: 'white' },
-	decorators: [
-		( Story ) => (
-			<div style={ { background: '#000', padding: '20px' } }>
-				<Story />
-			</div>
-		),
-	],
+export const Full: Story = {
+	args: {
+		full: true,
+	},
 };
 
 export const Monochrome: Story = {
-	args: { monochrome: true },
+	args: {
+		monochrome: true,
+	},
 };

packages/components/src/logos/woo-logo/index.tsx

@@ -1,60 +1,42 @@
-import colorStudio from '@automattic/color-studio';
-
-const PALETTE = colorStudio.colors;
-const COLOR_WOO_PURPLE = PALETTE[ 'WooCommerce Purple 40' ];
-
-export type WooLogoColorVariant = 'color' | 'black' | 'white';
-
-interface WooLogoProps extends React.SVGProps< SVGSVGElement > {
-	colorVariant?: WooLogoColorVariant;
-	height?: number;
-	width?: number;
-}
-
-export const WooLogo = ( {
-	colorVariant = 'color',
-	height = 19,
-	width = 30,
-	...props
-}: WooLogoProps ) => {
-	let fill = COLOR_WOO_PURPLE;
-	if ( colorVariant === 'white' ) {
-		fill = '#fff';
-	} else if ( colorVariant === 'black' ) {
-		fill = '#000';
-	}
-
-	return (
-		<svg
-			version="1.1"
-			id="Layer_1"
-			xmlns="http://www.w3.org/2000/svg"
-			xmlnsXlink="http://www.w3.org/1999/xlink"
-			x="0px"
-			y="0px"
-			width={ width }
-			height={ height }
-			viewBox="0 0 183.6 47.5"
-			{ ...props }
-		>
-			<g>
-				<path
-					fill={ fill }
-					d="M77.4,0c-4.3,0-7.1,1.4-9.6,6.1L56.4,27.6V8.5c0-5.7-2.7-8.5-7.7-8.5s-7.1,1.7-9.6,6.5L28.3,27.6V8.7
-					c0-6.1-2.5-8.7-8.6-8.7H7.3C2.6,0,0,2.2,0,6.2s2.5,6.4,7.1,6.4h5.1v24.1c0,6.8,4.6,10.8,11.2,10.8s9.6-2.6,12.9-8.7l7.2-13.5v11.4
-					c0,6.7,4.4,10.8,11.1,10.8s9.2-2.3,13-8.7l16.6-28C87.8,4.7,85.3,0,77.3,0C77.3,0,77.3,0,77.4,0z"
-				/>
-				<path
-					fill={ fill }
-					d="M108.6,0C95,0,84.7,10.1,84.7,23.8s10.4,23.7,23.9,23.7s23.8-10.1,23.9-23.7C132.5,10.1,122.1,0,108.6,0z
-					 M108.6,32.9c-5.1,0-8.6-3.8-8.6-9.1s3.5-9.2,8.6-9.2s8.6,3.9,8.6,9.2S113.8,32.9,108.6,32.9z"
-				/>
-				<path
-					fill={ fill }
-					d="M159.7,0c-13.5,0-23.9,10.1-23.9,23.8s10.4,23.7,23.9,23.7s23.9-10.1,23.9-23.7S173.2,0,159.7,0z M159.7,32.9
-					c-5.2,0-8.5-3.8-8.5-9.1s3.4-9.2,8.5-9.2s8.6,3.9,8.6,9.2S164.9,32.9,159.7,32.9z"
-				/>
-			</g>
-		</svg>
-	);
-};
+export const WooLogo = ( props: React.SVGProps< SVGSVGElement > ) => (
+	<svg
+		version="1.1"
+		id="Layer_1"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlnsXlink="http://www.w3.org/1999/xlink"
+		x="0px"
+		y="0px"
+		width="30"
+		height="19"
+		viewBox="0 0 183.6 47.5"
+		{ ...props }
+	>
+		<style type="text/css">
+			{ `
+				.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#873EFF;}
+				.st1{fill-rule:evenodd;clip-rule:evenodd;}
+				.st2{fill:#873EFF;}
+				.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+				.st4{fill:#FFFFFF;}
+			` }
+		</style>
+		<g>
+			<path
+				className="st0"
+				d="M77.4,0c-4.3,0-7.1,1.4-9.6,6.1L56.4,27.6V8.5c0-5.7-2.7-8.5-7.7-8.5s-7.1,1.7-9.6,6.5L28.3,27.6V8.7
+				c0-6.1-2.5-8.7-8.6-8.7H7.3C2.6,0,0,2.2,0,6.2s2.5,6.4,7.1,6.4h5.1v24.1c0,6.8,4.6,10.8,11.2,10.8s9.6-2.6,12.9-8.7l7.2-13.5v11.4
+				c0,6.7,4.4,10.8,11.1,10.8s9.2-2.3,13-8.7l16.6-28C87.8,4.7,85.3,0,77.3,0C77.3,0,77.3,0,77.4,0z"
+			/>
+			<path
+				className="st0"
+				d="M108.6,0C95,0,84.7,10.1,84.7,23.8s10.4,23.7,23.9,23.7s23.8-10.1,23.9-23.7C132.5,10.1,122.1,0,108.6,0z
+				 M108.6,32.9c-5.1,0-8.6-3.8-8.6-9.1s3.5-9.2,8.6-9.2s8.6,3.9,8.6,9.2S113.8,32.9,108.6,32.9z"
+			/>
+			<path
+				className="st0"
+				d="M159.7,0c-13.5,0-23.9,10.1-23.9,23.8s10.4,23.7,23.9,23.7s23.9-10.1,23.9-23.7S173.2,0,159.7,0z M159.7,32.9
+				c-5.2,0-8.5-3.8-8.5-9.1s3.4-9.2,8.5-9.2s8.6,3.9,8.6,9.2S164.9,32.9,159.7,32.9z"
+			/>
+		</g>
+	</svg>
+);

packages/components/src/logos/woo-logo/stories/index.stories.tsx

@@ -9,21 +9,4 @@ export default meta;
 
 type Story = StoryObj< typeof WooLogo >;
 
-export const Color: Story = {
-	args: { colorVariant: 'color' },
-};
-
-export const Black: Story = {
-	args: { colorVariant: 'black' },
-};
-
-export const White: Story = {
-	args: { colorVariant: 'white' },
-	decorators: [
-		( Story ) => (
-			<div style={ { background: '#000', padding: '20px' } }>
-				<Story />
-			</div>
-		),
-	],
-};
+export const Default: Story = {};