@automattic/newspack-blocks 2.4.0 → 2.5.0-alpha.1

package/src/blocks/donate/styles/style-variations.scss

@@ -21,6 +21,26 @@
 			}
 		}
 	}
+
+	&.wpbnbd--frequency-based {
+		.wpbnbd__button {
+			border-width: 0 0 1px;
+			&--active {
+				background: #fff;
+				border-bottom: 0;
+			}
+		}
+	}
+
+	&.wpbnbd-frequencies {
+		&--2 .tab-container .freq-label:nth-of-type( 2 )  {
+			border-left-width: 1px;
+		}
+		&--3 .tab-container .freq-label:nth-of-type( 2 ) {
+			border-left-width: 1px;
+			border-right-width: 1px;
+		}
+	}
 }
 
 /* Alternate Style */
@@ -65,17 +85,12 @@
 		}
 	}
 
-	.frequencies {
-		@include mixins.media( tablet ) {
-			padding-top: calc( 1.14rem + 1.6em + 4px );
-		}
-	}
-
-	.freq-label,
+	.tab-container .freq-label,
 	.wpbnbd__tiers__selection {
 		background: colors.$color__background-screen;
 		border-color: colors.$color__background-screen;
 	}
+
 	.wpbnbd__tiers__selection {
 		width: min-content;
 		margin-left: auto;
@@ -87,32 +102,35 @@
 			padding: 0 15px;
 		}
 	}
-	.freq-label {
-		border-width: 1px;
-		padding: calc( 0.57rem + 1px ) 0.5rem;
-		@include mixins.media( mobile ) {
-			padding: calc( 0.57rem + 1px ) 0.76rem;
-		}
-	}
 
-	.wpbnbd__button {
-		border: none;
+	// Tiers-based version.
+	.wpbnbd__tiers .wpbnbd__button {
 		border: 0.19rem solid transparent;
+
+		&--active {
+			border-color: white;
+		}
 	}
 
-	// Tiers-based version.
-	.wpbnbd__button--active,
+	.wpbnbd__tiers .wpbnbd__button--active,
 	// Frequency-based version.
-	.frequency input[type='radio']:checked + .freq-label::after {
+	.tab-container .freq-label.wpbnbd__button--active::after  {
 		background: white;
 		border-radius: 5px;
-		border: 0.19rem solid white;
 		box-shadow: 0 0 0 1px variables.$color__border;
 	}
 
-	.frequency {
-		input[type='radio']:checked {
-			+ .freq-label {
+	.tab-container {
+		.freq-label {
+			border-width: 1px;
+			padding: calc( 0.57rem + 1px ) 0.5rem;
+			position: relative;
+			@include mixins.media( mobile ) {
+				padding: calc( 0.57rem + 1px ) 0.76rem;
+			}
+
+			&.wpbnbd__button--active {
+				color: colors.$color__text-main;
 				&::after {
 					box-sizing: content-box;
 					content: '';
@@ -125,17 +143,19 @@
 					background: colors.$color__background-screen;
 				}
 			}
-			~ .tiers {
-				display: grid;
-				grid-gap: 0.28rem;
-				grid-template-columns: repeat( 2, 1fr );
-				margin: 1.12rem;
+		}
+	}
 
-				@include mixins.media( mobile ) {
-					grid-template-columns: repeat( 4, 1fr );
-					grid-gap: 0.56rem;
-				}
-			}
+	// Show/hide the tab content.
+	.frequencies input[type='radio']:checked ~ .tiers {
+		display: grid;
+		grid-gap: 0.28rem;
+		grid-template-columns: repeat( 2, 1fr );
+		margin: 1.12rem;
+
+		@include mixins.media( mobile ) {
+			grid-template-columns: repeat( 4, 1fr );
+			grid-gap: 0.56rem;
 		}
 	}
 
@@ -260,34 +280,33 @@
 		}
 	}
 
-	.frequencies {
-		padding-top: calc( 0.76rem + 1.6em + 4px );
-	}
+	.tab-container {
+		.freq-label {
+			background: transparent;
+			border: none;
+			box-shadow: 0 3px 0 white, 0 4px 0 0 variables.$color__border;
+			padding: 0.38rem 0;
+			transition: none;
+
+			@include mixins.media( tablet ) {
+				padding-left: 0.76rem;
+				padding-right: 0.76rem;
+			}
 
-	.freq-label {
-		background: transparent;
-		border: none;
-		box-shadow: 0 3px 0 white, 0 4px 0 0 variables.$color__border;
-		padding: 0.38rem 0;
-		transition: none;
+			&::before {
+				border-width: 1px;
+				border-color: variables.$color__border;
+			}
 
-		@include mixins.media( tablet ) {
-			padding-left: 0.76rem;
-			padding-right: 0.76rem;
-		}
+			&.wpbnbd__button--active {
+				box-shadow: 0 4px 0 currentcolor;
+			}
 
-		&::before {
-			border-width: 1px;
-			border-color: variables.$color__border;
 		}
 	}
 
 	.frequency {
 		input[type='radio']:checked {
-			+ .freq-label {
-				box-shadow: 0 4px 0 currentcolor;
-			}
-
 			~ .tiers {
 				display: flex;
 				flex-wrap: wrap;

package/src/blocks/donate/styles/view.scss

@@ -4,7 +4,8 @@
 @use './style-variations';
 
 .wpbnbd {
-	&__button {
+	 &__button,
+	.tab-container .freq-label {
 		border: 0 solid variables.$color__border;
 		background: colors.$color__background-body;
 		color: colors.$color__text-light;

package/vendor/autoload.php

@@ -22,4 +22,4 @@ if (PHP_VERSION_ID < 50600) {
 
 require_once __DIR__ . '/composer/autoload_real.php';
 
-return ComposerAutoloaderInitf1e5af8e56e5ac956ca5350963c657a9::getLoader();
+return ComposerAutoloaderInit61578891b6191f641b9079aa6a2b7e68::getLoader();

package/vendor/composer/autoload_real.php

@@ -2,7 +2,7 @@
 
 // autoload_real.php @generated by Composer
 
-class ComposerAutoloaderInitf1e5af8e56e5ac956ca5350963c657a9
+class ComposerAutoloaderInit61578891b6191f641b9079aa6a2b7e68
 {
     private static $loader;
 
@@ -22,12 +22,12 @@ class ComposerAutoloaderInitf1e5af8e56e5ac956ca5350963c657a9
             return self::$loader;
         }
 
-        spl_autoload_register(array('ComposerAutoloaderInitf1e5af8e56e5ac956ca5350963c657a9', 'loadClassLoader'), true, true);
+        spl_autoload_register(array('ComposerAutoloaderInit61578891b6191f641b9079aa6a2b7e68', 'loadClassLoader'), true, true);
         self::$loader = $loader = new \Composer\Autoload\ClassLoader(\dirname(__DIR__));
-        spl_autoload_unregister(array('ComposerAutoloaderInitf1e5af8e56e5ac956ca5350963c657a9', 'loadClassLoader'));
+        spl_autoload_unregister(array('ComposerAutoloaderInit61578891b6191f641b9079aa6a2b7e68', 'loadClassLoader'));
 
         require __DIR__ . '/autoload_static.php';
-        call_user_func(\Composer\Autoload\ComposerStaticInitf1e5af8e56e5ac956ca5350963c657a9::getInitializer($loader));
+        call_user_func(\Composer\Autoload\ComposerStaticInit61578891b6191f641b9079aa6a2b7e68::getInitializer($loader));
 
         $loader->register(true);
 

package/vendor/composer/autoload_static.php

@@ -4,7 +4,7 @@
 
 namespace Composer\Autoload;
 
-class ComposerStaticInitf1e5af8e56e5ac956ca5350963c657a9
+class ComposerStaticInit61578891b6191f641b9079aa6a2b7e68
 {
     public static $classMap = array (
         'Composer\\InstalledVersions' => __DIR__ . '/..' . '/composer/InstalledVersions.php',
@@ -13,7 +13,7 @@ class ComposerStaticInitf1e5af8e56e5ac956ca5350963c657a9
     public static function getInitializer(ClassLoader $loader)
     {
         return \Closure::bind(function () use ($loader) {
-            $loader->classMap = ComposerStaticInitf1e5af8e56e5ac956ca5350963c657a9::$classMap;
+            $loader->classMap = ComposerStaticInit61578891b6191f641b9079aa6a2b7e68::$classMap;
 
         }, null, ClassLoader::class);
     }

package/vendor/composer/installed.php

@@ -3,7 +3,7 @@
         'name' => 'automattic/newspack-blocks',
         'pretty_version' => 'dev-master',
         'version' => 'dev-master',
-        'reference' => '6f368a8263baaf3e7fc1efa439f626a505aa2c91',
+        'reference' => 'f47e5e1abfaf78154cb5c4a5aaa7fc54ed627595',
         'type' => 'wordpress-plugin',
         'install_path' => __DIR__ . '/../../',
         'aliases' => array(),
@@ -13,7 +13,7 @@
         'automattic/newspack-blocks' => array(
             'pretty_version' => 'dev-master',
             'version' => 'dev-master',
-            'reference' => '6f368a8263baaf3e7fc1efa439f626a505aa2c91',
+            'reference' => 'f47e5e1abfaf78154cb5c4a5aaa7fc54ed627595',
             'type' => 'wordpress-plugin',
             'install_path' => __DIR__ . '/../../',
             'aliases' => array(),