feat: button styles for has-recommended version

Automattic · Nov 24, 2022 · 49a99ef · 49a99ef
1 parent 79fb744
commit 49a99ef
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 8 deletions.
diff --git a/src/blocks/donate/edit/TierBasedLayout.tsx b/src/blocks/donate/edit/TierBasedLayout.tsx
@@ -54,6 +54,10 @@ const TierBasedLayout = ( props: ComponentProps ) => {
 			props.setAttributes( { tiersBasedOptions } );
 		};
 
+	const isAnyRecommended = attributes.tiersBasedOptions.some( tier =>
+		Boolean( tier.recommendLabel )
+	);
+
 	return (
 		<form className="wpbnbd__tiers" onSubmit={ e => e.preventDefault() }>
 			<div className="wpbnbd__tiers__selection">
@@ -116,8 +120,16 @@ const TierBasedLayout = ( props: ComponentProps ) => {
 							<button
 								type="submit"
 								style={ {
-									backgroundColor: attributes.buttonColor,
-									color: getColorForContrast( attributes.buttonColor ),
+									borderColor: attributes.buttonColor,
+									...( isAnyRecommended && ! recommendLabel
+										? {
+												backgroundColor: 'transparent',
+												color: attributes.buttonColor,
+										  }
+										: {
+												backgroundColor: attributes.buttonColor,
+												color: getColorForContrast( attributes.buttonColor ),
+										  } ),
 								} }
 							>
 								<RichText

diff --git a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php
@@ -172,11 +172,16 @@ function ( $item ) {
 	 * Get style for a button.
 	 *
 	 * @param array $attributes Block attributes.
+	 * @param array $is_reverse_style Reverse background/foreground colors.
 	 */
-	protected static function get_button_style( $attributes ) {
+	protected static function get_button_style( $attributes, $is_reverse_style = false ) {
 		$button_color      = $attributes['buttonColor'];
 		$button_text_color = Newspack_Blocks::get_color_for_contrast( $button_color );
-		return 'background-color: ' . esc_attr( $button_color ) . '; color: ' . esc_attr( $button_text_color ) . ';';
+		if ( $is_reverse_style ) {
+			return 'border-color: ' . esc_attr( $button_color ) . '; color: ' . esc_attr( $button_color ) . '; background: transparent;';
+		} else {
+			return 'border-color: ' . esc_attr( $button_color ) . '; background-color: ' . esc_attr( $button_color ) . '; color: ' . esc_attr( $button_text_color ) . ';';
+		}
 	}
 
 	/**

diff --git a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php
@@ -46,12 +46,14 @@ private static function get_displayed_amounts( $amounts ) {
 	 * @param int    $index Option index.
 	 * @param int    $amount Option amount.
 	 * @param string $selected_frequency Selected frequency.
+	 * @param bool   $is_any_recommended Is any option recommended.
 	 */
-	private static function render_single_tier( $attributes, $index, $amount, $selected_frequency ) {
+	private static function render_single_tier( $attributes, $index, $amount, $selected_frequency, $is_any_recommended ) {
 		$configuration = self::get_configuration( $attributes );
 
-		$button_style_attr   = 'style="' . self::get_button_style( $attributes ) . '"';
 		$has_recommend_label = isset( $attributes['tiersBasedOptions'][ $index ]['recommendLabel'] ) && ! empty( $attributes['tiersBasedOptions'][ $index ]['recommendLabel'] );
+		$is_reverse_style    = ! $has_recommend_label && $is_any_recommended;
+		$button_style_attr   = 'style="' . self::get_button_style( $attributes, $is_reverse_style ) . '"';
 
 		ob_start();
 		?>
@@ -62,7 +64,7 @@ private static function render_single_tier( $attributes, $index, $amount, $selec
 				</h2>
 				<?php if ( $has_recommend_label ) : ?>
 				<h3 class="wpbnbd__tiers__recommend-label">
-					<?php echo esc_html( $attributes['tiersBasedOptions'][ $index ]['recommendLabel'] ); ?>
+					<?php echo esc_html( wp_strip_all_tags( $attributes['tiersBasedOptions'][ $index ]['recommendLabel'] ) ); ?>
 				</h3>
 				<?php endif; ?>
 			</div>
@@ -129,6 +131,14 @@ function ( $option ) {
 			$attributes['buttonColor'],
 		];
 
+		$is_any_recommended = array_reduce(
+			$attributes['tiersBasedOptions'],
+			function ( $carry, $item ) {
+				return $carry || isset( $item['recommendLabel'] ) && ! empty( $item['recommendLabel'] );
+			},
+			false
+		);
+
 		ob_start();
 		?>
 		<div
@@ -154,7 +164,7 @@ class="wpbnbd__button <?php echo $intial_selected_frequency === $frequency_slug
 						<div class="wpbnbd__tiers__options">
 							<?php foreach ( $displayed_amounts as $index => $amount ) : ?>
 								<?php
-									echo self::render_single_tier( $attributes, $index, $amount, $intial_selected_frequency ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+									echo self::render_single_tier( $attributes, $index, $amount, $intial_selected_frequency, $is_any_recommended ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 								?>
 							<?php endforeach; ?>
 						</div>

diff --git a/src/blocks/donate/tiers-based/style.scss b/src/blocks/donate/tiers-based/style.scss
@@ -111,6 +111,7 @@
 			}
 			button[type='submit'] {
 				border-radius: 3px;
+				border: 2px solid;
 				font-size: 14px;
 				line-height: 1;
 				padding: 10px 16px;