feat: B2 coming-soon badges on inactive tool cards (v2.1.4)

- Add 'coming_soon' key to module card definitions - Protocol Builder, Tracker, Subject Log: coming_soon = true - Calculator: fully active (shortcode_exists passes); no badge, no --inactive - New .ps-module-card__badge: absolute top-right pill, --gray-200/--gray-700, Inter 600 10px; layers on top of --inactive dim treatment - position: relative added to .ps-module-card to anchor the badge CMO-approved in thread: 2026-04-site-wide-brand-adoption seq 10
2026-04-26 09:49:32 +00:00
parent 22716b4227
commit fdaea84d72
3 changed files with 46 additions and 1 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Peptide Starter Theme - Changelog

+## [2.1.4] - 2026-04-26 — B2: Coming soon badges on inactive tool cards
+
+### Added
+- `ps-module-card__badge` CSS class — absolute-positioned pill badge overlaid top-right of inactive cards; `--gray-200` bg, `--gray-700` text, Inter 600, 10px, pill shape
+- `coming_soon` key in module card definitions; Protocol Builder, Tracker, Subject Log marked `true`
+- Badge renders on top of existing `--inactive` visual treatment (dim + no-hover); does not replace it
+
+### Changed
+- `position: relative` added to `.ps-module-card` to enable badge absolute positioning
+- Calculator card: `coming_soon` remains `false`; `available` resolves `true` via `shortcode_exists('prc_calculator')` — card now fully active with no dim, no badge, full hover
 ## [2.0.0-alpha.3] - 2026-04-26 — CMO walkthrough P1 fixes

 ### Fixed
--- a/style.css
+++ b/style.css
@@ -4,7 +4,7 @@ Theme URI: https://github.com/peptiderepo/peptide-starter
 Description: Premium, accessible WordPress theme for scientific peptide reference database
 Author: Peptide Repo
 Author URI: https://peptiderepo.com
-Version: 2.1.3
+Version: 2.1.4
 License: GPL v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: peptide-starter
@@ -2533,6 +2533,7 @@ html[data-theme="light"] {
  text-decoration: none;
  color: var(--color-text-primary);
  transition: all var(--transition-normal);
+  position: relative; /* Required for .ps-module-card__badge absolute positioning */
 }

 .ps-module-card:hover {
@@ -2546,6 +2547,27 @@ html[data-theme="light"] {
  pointer-events: none;
 }

+/*
+ * "Coming soon" badge — overlays top-right corner of inactive tool cards.
+ * Layered on top of --inactive treatment (dim + no-hover); does not replace it.
+ * Spec: Inter 600, 10px, --gray-200 bg, --gray-700 text, pill shape.
+ */
+.ps-module-card__badge {
+  position: absolute;
+  top: var(--spacing-md);
+  right: var(--spacing-md);
+  padding: 2px 8px;
+  background-color: var(--gray-200);
+  color: var(--gray-700);
+  border-radius: var(--radius-pill);
+  font-family: var(--font-sans);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  line-height: 1.6;
+  pointer-events: none; /* Badge is presentational; card's pointer-events handles clicks */
+}
+
 .ps-module-card__icon {
  display: flex;
  align-items: center;
--- a/template-parts/module-cards.php
+++ b/template-parts/module-cards.php
@@ -4,6 +4,8 @@
 *
 * Renders a 6-card grid of research modules (tools/sections) for the front page.
 * Each card checks if the target plugin is active; inactive cards are dimmed.
+ * Cards with 'coming_soon' => true display a "Coming soon" badge overlaid in
+ * the top-right corner — layered on top of the --inactive visual treatment.
 *
 * @see front-page.php — includes this template part
 * @see style.css — .ps-module-* classes
@@ -21,6 +23,8 @@ if ( ! defined( 'ABSPATH' ) ) {
 }

 // Module card definitions with shortcode checks for graceful degradation.
+// 'coming_soon' => true adds a "Coming soon" badge without removing existing
+// --inactive styling — the badge layers on top of the dim/no-hover treatment.
 $modules = array(
 	array(
 		'title'       => __( 'Peptides', 'peptide-starter' ),
@@ -28,6 +32,7 @@ $modules = array(
 		'url'         => '/peptides',
 		'icon'        => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L12 22"/><path d="M5 12C5 8.13 8.13 5 12 5s7 3.13 7 7-3.13 7-7 7-7-3.13-7-7z"/><circle cx="12" cy="8" r="1.5" fill="currentColor" stroke="none"/><circle cx="12" cy="16" r="1.5" fill="currentColor" stroke="none"/></svg>',
 		'available'   => shortcode_exists( 'peptide_directory' ) || post_type_exists( 'peptide' ),
+		'coming_soon' => false,
 	),
 	array(
 		'title'       => __( 'Calculator', 'peptide-starter' ),
@@ -35,6 +40,7 @@ $modules = array(
 		'url'         => '/calculator',
 		'icon'        => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="8" y1="6" x2="16" y2="6"/><line x1="8" y1="10" x2="10" y2="10"/><line x1="14" y1="10" x2="16" y2="10"/><line x1="8" y1="14" x2="10" y2="14"/><line x1="14" y1="14" x2="16" y2="14"/><line x1="8" y1="18" x2="16" y2="18"/></svg>',
 		'available'   => shortcode_exists( 'prc_calculator' ),
+		'coming_soon' => false,
 	),
 	array(
 		'title'       => __( 'Protocol Builder', 'peptide-starter' ),
@@ -42,6 +48,7 @@ $modules = array(
 		'url'         => '/protocol-builder',
 		'icon'        => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"/><rect x="9" y="3" width="6" height="4" rx="1"/><path d="M9 14l2 2 4-4"/></svg>',
 		'available'   => shortcode_exists( 'peptide_tools_protocol_builder' ),
+		'coming_soon' => true,
 	),
 	array(
 		'title'       => __( 'Tracker', 'peptide-starter' ),
@@ -49,6 +56,7 @@ $modules = array(
 		'url'         => '/tracker',
 		'icon'        => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/><line x1="3" y1="20" x2="21" y2="20"/></svg>',
 		'available'   => shortcode_exists( 'peptide_tracker' ),
+		'coming_soon' => true,
 	),
 	array(
 		'title'       => __( 'Science Feed', 'peptide-starter' ),
@@ -56,6 +64,7 @@ $modules = array(
 		'url'         => '/news',
 		'icon'        => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 22h16a2 2 0 002-2V4a2 2 0 00-2-2H8a2 2 0 00-2 2v16a2 2 0 01-2 2zm0 0a2 2 0 01-2-2v-9c0-1.1.9-2 2-2h2"/><line x1="10" y1="6" x2="18" y2="6"/><line x1="10" y1="10" x2="18" y2="10"/><line x1="10" y1="14" x2="14" y2="14"/></svg>',
 		'available'   => shortcode_exists( 'peptide_news' ),
+		'coming_soon' => false,
 	),
 	array(
 		'title'       => __( 'Subject Log', 'peptide-starter' ),
@@ -63,6 +72,7 @@ $modules = array(
 		'url'         => '/subject-log',
 		'icon'        => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>',
 		'available'   => shortcode_exists( 'peptide_tracker_subject_log' ),
+		'coming_soon' => true,
 	),
 );
 ?>
@@ -80,6 +90,9 @@ $modules = array(
 			<?php foreach ( $modules as $module ) : ?>
 				<a href="<?php echo esc_url( home_url( $module['url'] ) ); ?>"
 				   class="ps-module-card <?php echo $module['available'] ? '' : 'ps-module-card--inactive'; ?>">
+					<?php if ( ! empty( $module['coming_soon'] ) ) : ?>
+						<span class="ps-module-card__badge"><?php esc_html_e( 'Coming soon', 'peptide-starter' ); ?></span>
+					<?php endif; ?>
 					<div class="ps-module-card__icon">
 						<?php
 						// SVG icons are defined in this template — safe to output directly.