@times-design-system/components-wordpress 1.2.2-alpha.0 → 1.2.2-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@times-design-system/components-wordpress",
-  "version": "1.2.2-alpha.0+21580795",
+  "version": "1.2.2-alpha.4+ecc4f864",
   "type": "module",
   "description": "Times Design System Gutenberg blocks for WordPress Full Site Editing",
   "keywords": [
@@ -48,7 +48,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@times-design-system/theme-scss": "^2.0.2-alpha.0+21580795",
+    "@times-design-system/theme-scss": "^2.0.2-alpha.4+ecc4f864",
     "@wordpress/block-editor": "^12.0.0",
     "@wordpress/blocks": "^12.0.0",
     "@wordpress/components": "^25.0.0",
@@ -71,5 +71,5 @@
     "rollup-plugin-postcss": "^4.0.2",
     "typescript": "^5.0.0"
   },
-  "gitHead": "21580795555c759c56388a9aadd9d21562a9a0d6"
+  "gitHead": "ecc4f864f85627731169257ed9153180623038a0"
 }

package/src/blocks/ad-container/block.json

@@ -13,6 +13,7 @@
       "padding": true
     }
   },
+  "render": "file:./render.php",
   "attributes": {
     "type": {
       "type": "string",

package/src/blocks/ad-container/render.php

@@ -0,0 +1,27 @@
+<?php
+/**
+ * Ad Container Block Render Callback
+ * 
+ * Renders the Ad Container block on the frontend.
+ * 
+ * @package TimesDesignSystem\ComponentsWordPress
+ * @var array $attributes Block attributes
+ * @var string $content Block content
+ * @var WP_Block $block Block instance
+ */
+
+$type = isset($attributes['type']) ? sanitize_text_field($attributes['type']) : '';
+$slot_id = isset($attributes['slotID']) ? sanitize_text_field($attributes['slotID']) : '';
+
+$class_name = 'tds-ad-container';
+if ($type) {
+	$class_name .= ' tds-ad-container--' . sanitize_html_class($type);
+}
+
+$wrapper_attrs = get_block_wrapper_attributes(['class' => $class_name]);
+?>
+
+<div 
+	<?php echo wp_kses_post($wrapper_attrs); ?>
+	<?php echo $slot_id ? 'data-slot-id="' . esc_attr($slot_id) . '"' : ''; ?>
+></div>

package/src/blocks/ad-container/style.css

@@ -1,27 +1,30 @@
-/* Ad Container Styles */
-.tds-ad-container {
-  display: block;
-  min-height: 250px;
-  background-color: var(--color-fill-secondary);
-  border: 1px dashed var(--color-border-secondary);
-  border-radius: var(--border-radius-s);
-}
+/* Ad Container Block Frontend Styles */
+/* Using resolved design token values for self-contained styling */
 
-.tds-ad-container--header {
-  min-height: 90px;
+.tds-ad-container {
+  clear: both;
+  width: 100%;
+  min-height: 283px;
+  margin: 18px 0;
+  box-sizing: content-box;
+  padding: 0 0 8px;
+  border-bottom: 2px solid rgb(78, 78, 78);
 }
 
-.tds-ad-container--inline {
-  min-height: 250px;
+@media (min-width: 768px) and (max-width: 1023px) {
+  .tds-ad-container {
+    min-height: 123px;
+  }
 }
 
-.tds-ad-container__placeholder {
+.tds-ad-container--header {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  color: var(--color-text-secondary);
-  font: var(--typography-body-small);
+  padding-block: 8px 8px;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  max-width: 100%;
+  border-width: 0 0 2px;
+  border-style: solid;
+  border-color: #dbdbdb;
+  flex-direction: column;
 }

package/src/blocks/button/block.json

@@ -16,6 +16,7 @@
     "customClassName": true
   },
   "textdomain": "times-design-system",
+  "render": "file:./render.php",
   "attributes": {
     "label": {
       "type": "string",

package/src/blocks/button/render.php

@@ -0,0 +1,71 @@
+<?php
+/**
+ * Button Block Render Callback
+ * 
+ * Renders the Button block on the frontend.
+ * 
+ * @package TimesDesignSystem\ComponentsWordPress
+ * @var array $attributes Block attributes
+ * @var string $content Block content
+ * @var WP_Block $block Block instance
+ */
+
+$label = isset($attributes['label']) ? sanitize_text_field($attributes['label']) : 'Button label';
+$intent = isset($attributes['intent']) ? sanitize_text_field($attributes['intent']) : 'primary';
+$size = isset($attributes['size']) ? sanitize_text_field($attributes['size']) : 'large';
+$behaviour = isset($attributes['behaviour']) ? sanitize_text_field($attributes['behaviour']) : 'hug';
+$state = isset($attributes['state']) ? sanitize_text_field($attributes['state']) : 'base';
+$disabled = isset($attributes['disabled']) ? (bool) $attributes['disabled'] : false;
+$href = isset($attributes['href']) ? esc_url($attributes['href']) : '';
+$target = isset($attributes['target']) ? sanitize_text_field($attributes['target']) : '';
+$rel = isset($attributes['rel']) ? sanitize_text_field($attributes['rel']) : '';
+$type = isset($attributes['type']) ? sanitize_text_field($attributes['type']) : 'button';
+$aria_label = isset($attributes['ariaLabel']) ? sanitize_text_field($attributes['ariaLabel']) : '';
+
+// Build button classes
+$classes = ['tds-button'];
+$classes[] = 'tds-button--intent-' . $intent;
+$classes[] = 'tds-button--size-' . $size;
+$classes[] = 'tds-button--behaviour-' . $behaviour;
+$classes[] = 'tds-button--state-' . $state;
+if ($disabled) {
+	$classes[] = 'tds-button--disabled';
+}
+
+$button_class = implode(' ', $classes);
+$element_tag = $href ? 'a' : 'button';
+$wrapper_attrs = get_block_wrapper_attributes(['class' => 'tds-button-wrapper']);
+?>
+
+<div <?php echo wp_kses_post($wrapper_attrs); ?>>
+	<?php
+	if ($element_tag === 'a') {
+		?>
+		<a 
+			class="<?php echo esc_attr($button_class); ?>"
+			href="<?php echo esc_attr($href); ?>"
+			<?php echo $target ? 'target="' . esc_attr($target) . '"' : ''; ?>
+			<?php echo $rel ? 'rel="' . esc_attr($rel) . '"' : ''; ?>
+			<?php echo $aria_label ? 'aria-label="' . esc_attr($aria_label) . '"' : ''; ?>
+		>
+			<span class="tds-button__label-container">
+				<span class="tds-button__label"><?php echo wp_kses_post($label); ?></span>
+			</span>
+		</a>
+		<?php
+	} else {
+		?>
+		<button 
+			class="<?php echo esc_attr($button_class); ?>"
+			<?php echo $disabled ? 'disabled' : ''; ?>
+			type="<?php echo esc_attr($type); ?>"
+			<?php echo $aria_label ? 'aria-label="' . esc_attr($aria_label) . '"' : ''; ?>
+		>
+			<span class="tds-button__label-container">
+				<span class="tds-button__label"><?php echo wp_kses_post($label); ?></span>
+			</span>
+		</button>
+		<?php
+	}
+	?>
+</div>

package/src/blocks/button/style-resolved.css

@@ -0,0 +1,153 @@
+/* Button Block Frontend Styles */
+/* These styles mirror the React Button component styles */
+/* Using resolved design token values for self-contained styling */
+
+.tds-button {
+  --tds-button-bg: #005c8a;
+  --tds-button-fg: #ffffff;
+  --tds-button-border: transparent;
+  --tds-button-bg-hover: #004e75;
+  --tds-button-fg-hover: #ffffff;
+  --tds-button-border-hover: transparent;
+  --tds-button-bg-pressed: #00496e;
+  --tds-button-fg-pressed: #ffffff;
+  --tds-button-border-pressed: transparent;
+  --tds-button-border-focus: transparent;
+  --tds-button-focus-ring: #737373;
+  --tds-button-label-inline-padding: 8px;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  border-radius: 0;
+  border: 1px solid var(--tds-button-border);
+  background-color: var(--tds-button-bg);
+  color: var(--tds-button-fg);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: 0.15s ease;
+}
+
+.tds-button:hover:not(:disabled) {
+  background-color: var(--tds-button-bg-hover);
+  border-color: var(--tds-button-border-hover);
+  color: var(--tds-button-fg-hover);
+}
+
+.tds-button:active:not(:disabled) {
+  background-color: var(--tds-button-bg-pressed);
+  border-color: var(--tds-button-border-pressed);
+  color: var(--tds-button-fg-pressed);
+}
+
+.tds-button:focus-visible {
+  outline: none;
+  background-color: var(--tds-button-bg-hover);
+  border-color: var(--tds-button-border-focus);
+  color: var(--tds-button-fg-hover);
+}
+
+.tds-button:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  border: 2px solid #737373;
+  pointer-events: none;
+}
+
+.tds-button--loading {
+  cursor: wait;
+  gap: 0;
+}
+
+.tds-button--intent-primary {
+  --tds-button-bg: #005c8a;
+  --tds-button-fg: #ffffff;
+  --tds-button-border: transparent;
+  --tds-button-bg-hover: #004e75;
+  --tds-button-fg-hover: #ffffff;
+  --tds-button-border-hover: transparent;
+  --tds-button-bg-pressed: #00496e;
+  --tds-button-fg-pressed: #ffffff;
+  --tds-button-border-pressed: transparent;
+}
+
+.tds-button--intent-secondary {
+  --tds-button-bg: #ffffff;
+  --tds-button-fg: #1a1a1a;
+  --tds-button-border: #8c8c8c;
+  --tds-button-bg-hover: #d9d9d9;
+  --tds-button-fg-hover: #161616;
+  --tds-button-border-hover: #777777;
+  --tds-button-bg-pressed: #cccccc;
+  --tds-button-fg-pressed: #151515;
+  --tds-button-border-pressed: #707070;
+  --tds-button-border-focus: #8c8c8c;
+}
+
+.tds-button--intent-negative {
+  --tds-button-bg: #ffffff;
+  --tds-button-fg: #cb0705;
+  --tds-button-border: #cb0705;
+  --tds-button-bg-hover: #d9d9d9;
+  --tds-button-fg-hover: #ad0604;
+  --tds-button-border-hover: #ad0604;
+  --tds-button-bg-pressed: #cccccc;
+  --tds-button-fg-pressed: #a20604;
+  --tds-button-border-pressed: #a20604;
+}
+
+.tds-button--size-small {
+  min-height: 32px;
+  padding: 0 12px;
+  min-width: 80px;
+  font-size: 0.875rem;
+  --tds-button-label-inline-padding: 4px;
+}
+
+.tds-button--size-medium {
+  min-height: 48px;
+  min-width: 100px;
+  padding: 0 16px;
+  font-size: 1rem;
+  --tds-button-label-inline-padding: 8px;
+}
+
+.tds-button--size-large {
+  min-height: 64px;
+  min-width: 130px;
+  padding: 0 24px;
+  font-size: 1.125rem;
+  --tds-button-label-inline-padding: 8px;
+}
+
+.tds-button--behaviour-hug {
+  width: fit-content;
+}
+
+.tds-button--behaviour-full {
+  width: 100%;
+}
+
+.tds-button__label-container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: fit-content;
+  padding: 0 var(--tds-button-label-inline-padding);
+}
+
+.tds-button__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: fit-content;
+}

package/src/blocks/button/style.css

@@ -1,37 +1,157 @@
 /* Button Block Frontend Styles */
+/* These styles mirror the React Button component styles */
+/* Using resolved design token values for self-contained styling */
 
-.tds-button-wrapper {
-  display: inline-block;
-}
+.tds-button {
+  --tds-button-bg: #005c8a;
+  --tds-button-fg: #ffffff;
+  --tds-button-border: transparent;
+  --tds-button-bg-hover: #004e75;
+  --tds-button-fg-hover: #ffffff;
+  --tds-button-border-hover: transparent;
+  --tds-button-bg-pressed: #00496e;
+  --tds-button-fg-pressed: #ffffff;
+  --tds-button-border-pressed: transparent;
+  --tds-button-border-focus: transparent;
+  --tds-button-focus-ring: #737373;
+  --tds-button-label-inline-padding: 8px;
 
-.tds-button-wrapper .tds-button {
-  /* Styles inherited from @times-design-system/theme-scss package */
-  /* Import SCSS tokens and component styles as needed */
-  display: inline-flex;
+  position: relative;
+  display: flex;
   align-items: center;
   justify-content: center;
+  gap: 4px;
+  border-radius: 0;
+  border: 1px solid var(--tds-button-border);
+  background-color: var(--tds-button-bg);
+  color: var(--tds-button-fg);
+  font-family: Roboto;
+  font-weight: 500;
+  line-height: 1;
   cursor: pointer;
   text-decoration: none;
-  border: none;
-  border-radius: 0;
-  font-family: inherit;
-  font-size: inherit;
-  transition: all 0.2s ease-in-out;
+  white-space: nowrap;
+  transition: 0.15s ease;
+}
+
+.tds-button:hover:not(:disabled) {
+  background-color: var(--tds-button-bg-hover);
+  border-color: var(--tds-button-border-hover);
+  color: var(--tds-button-fg-hover);
+}
+
+.tds-button:active:not(:disabled) {
+  background-color: var(--tds-button-bg-pressed);
+  border-color: var(--tds-button-border-pressed);
+  color: var(--tds-button-fg-pressed);
+}
+
+.tds-button:focus-visible {
+  outline: none;
+  background-color: var(--tds-button-bg-hover);
+  border-color: var(--tds-button-border-focus);
+  color: var(--tds-button-fg-hover);
+}
+
+.tds-button:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  border: 2px solid #737373;
+  pointer-events: none;
+}
+
+.tds-button--loading {
+  cursor: wait;
+  gap: 0;
+}
+
+.tds-button--intent-primary {
+  --tds-button-bg: #005c8a;
+  --tds-button-fg: #ffffff;
+  --tds-button-border: transparent;
+  --tds-button-bg-hover: #004e75;
+  --tds-button-fg-hover: #ffffff;
+  --tds-button-border-hover: transparent;
+  --tds-button-bg-pressed: #00496e;
+  --tds-button-fg-pressed: #ffffff;
+  --tds-button-border-pressed: transparent;
+}
+
+.tds-button--intent-secondary {
+  --tds-button-bg: #ffffff;
+  --tds-button-fg: #1a1a1a;
+  --tds-button-border: #8c8c8c;
+  --tds-button-bg-hover: #d9d9d9;
+  --tds-button-fg-hover: #161616;
+  --tds-button-border-hover: #777777;
+  --tds-button-bg-pressed: #cccccc;
+  --tds-button-fg-pressed: #151515;
+  --tds-button-border-pressed: #707070;
+  --tds-button-border-focus: #8c8c8c;
+}
+
+.tds-button--intent-negative {
+  --tds-button-bg: #ffffff;
+  --tds-button-fg: #cb0705;
+  --tds-button-border: #cb0705;
+  --tds-button-bg-hover: #d9d9d9;
+  --tds-button-fg-hover: #ad0604;
+  --tds-button-border-hover: #ad0604;
+  --tds-button-bg-pressed: #cccccc;
+  --tds-button-fg-pressed: #a20604;
+  --tds-button-border-pressed: #a20604;
+}
+
+.tds-button--size-small {
+  min-height: 32px;
+  padding: 0 12px;
+  min-width: 80px;
+  font-size: 0.875rem;
+  --tds-button-label-inline-padding: 4px;
 }
 
-.tds-button-wrapper .tds-button--behaviour-full {
+.tds-button--size-medium {
+  min-height: 48px;
+  min-width: 100px;
+  padding: 0 16px;
+  font-size: 1rem;
+  --tds-button-label-inline-padding: 8px;
+}
+
+.tds-button--size-large {
+  min-height: 64px;
+  min-width: 130px;
+  padding: 0 24px;
+  font-size: 1.125rem;
+  --tds-button-label-inline-padding: 8px;
+}
+
+.tds-button--behaviour-hug {
+  width: fit-content;
+}
+
+.tds-button--behaviour-full {
   width: 100%;
 }
 
-.tds-button-wrapper .tds-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
+.tds-button-wrapper {
+  display: inline-block;
 }
 
 .tds-button__label-container {
-  display: inline;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: fit-content;
+  padding: 0 var(--tds-button-label-inline-padding);
 }
 
 .tds-button__label {
-  display: inline;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: fit-content;
 }

package/src/blocks/chip/block.json

@@ -12,6 +12,7 @@
       "margin": true
     }
   },
+  "render": "file:./render.php",
   "attributes": {
     "content": {
       "type": "string",

package/src/blocks/chip/render.php

@@ -0,0 +1,40 @@
+<?php
+/**
+ * Chip Block Render Callback
+ * 
+ * Renders the Chip block on the frontend.
+ * 
+ * @package TimesDesignSystem\ComponentsWordPress
+ * @var array $attributes Block attributes
+ * @var string $content Block content
+ * @var WP_Block $block Block instance
+ */
+
+$content_text = isset($attributes['content']) ? wp_kses_post($attributes['content']) : '';
+$intent = isset($attributes['intent']) ? sanitize_text_field($attributes['intent']) : '';
+$size = isset($attributes['size']) ? sanitize_text_field($attributes['size']) : '';
+$state = isset($attributes['state']) ? sanitize_text_field($attributes['state']) : '';
+$channel = isset($attributes['channel']) ? (bool) $attributes['channel'] : false;
+$toggle = isset($attributes['toggle']) ? (bool) $attributes['toggle'] : false;
+$aria_label = isset($attributes['ariaLabel']) ? sanitize_text_field($attributes['ariaLabel']) : '';
+
+$classes = ['tds-chip'];
+$classes[] = 'tds-chip--intent-' . $intent;
+$classes[] = 'tds-chip--size-' . $size;
+$classes[] = 'tds-chip--state-' . $state;
+if ($channel) {
+	$classes[] = 'tds-chip--channel';
+}
+if ($toggle) {
+	$classes[] = 'tds-chip--toggle';
+}
+
+$wrapper_attrs = get_block_wrapper_attributes(['class' => implode(' ', $classes)]);
+?>
+
+<button 
+	<?php echo wp_kses_post($wrapper_attrs); ?>
+	<?php echo $aria_label ? 'aria-label="' . esc_attr($aria_label) . '"' : ''; ?>
+>
+	<span class="tds-chip__content"><?php echo wp_kses_post($content_text); ?></span>
+</button>

package/src/blocks/chip/style.css

@@ -1,48 +1,87 @@
-/* Chip Block Styles */
+/* Chip Block Frontend Styles */
+/* Using resolved design token values for self-contained styling */
+
 .tds-chip {
+  --tds-chip-bg: #005c8a;
+  --tds-chip-bg-hover: #004e75;
+  --tds-chip-bg-pressed: #00496e;
+  --tds-chip-fg: #ffffff;
+  --tds-chip-fg-hover: #d9d9d9;
+  --tds-chip-fg-pressed: #cccccc;
+  --tds-chip-icon: #ffffff;
+  --tds-chip-icon-hover: #d9d9d9;
+  --tds-chip-icon-pressed: #cccccc;
+  --tds-chip-border: transparent;
+  --tds-chip-border-hover: transparent;
+  --tds-chip-border-pressed: transparent;
+  --tds-chip-focus-ring: #737373;
+
+  position: relative;
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-xs) var(--spacing-m);
-  border: 1px solid var(--color-border-secondary);
-  border-radius: 16px;
-  background-color: var(--color-fill-secondary);
-  color: var(--color-text-primary);
-  font: var(--typography-body-small);
+  justify-content: center;
+  gap: 4px;
+  border: 1px solid var(--tds-chip-border);
+  border-radius: 9999px;
+  background-color: var(--tds-chip-bg);
+  color: var(--tds-chip-fg);
+  font-family: Roboto;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
   cursor: pointer;
-  transition: all 0.2s ease-in-out;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
 }
 
-.tds-chip--intent-primary {
-  background-color: var(--color-fill-primary);
-  border-color: var(--color-border-primary);
+.tds-chip:hover:not(:disabled) {
+  background-color: var(--tds-chip-bg-hover);
+  border-color: var(--tds-chip-border-hover);
+  color: var(--tds-chip-fg-hover);
 }
 
-.tds-chip--intent-negative {
-  background-color: var(--color-fill-negative);
-  border-color: var(--color-border-negative);
+.tds-chip:active:not(:disabled) {
+  background-color: var(--tds-chip-bg-pressed);
+  border-color: var(--tds-chip-border-pressed);
+  color: var(--tds-chip-fg-pressed);
 }
 
-.tds-chip--size-small {
-  padding: var(--spacing-xs) var(--spacing-s);
-  font-size: 12px;
+.tds-chip:focus-visible {
+  outline: none;
+  background-color: var(--tds-chip-bg-hover);
+  border-color: var(--tds-chip-border-hover);
+  color: var(--tds-chip-fg-hover);
 }
 
-.tds-chip--size-large {
-  padding: var(--spacing-s) var(--spacing-m);
-  font-size: 16px;
+.tds-chip:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  border: 2px solid #737373;
+  border-radius: inherit;
+  pointer-events: none;
 }
 
-.tds-chip--state-hover {
-  opacity: 0.8;
+.tds-chip:disabled {
+  background-color: #bfbfbf;
+  border-color: transparent;
+  color: #d9d9d9;
+  cursor: not-allowed;
 }
 
-.tds-chip--state-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.tds-chip--size-small {
+  min-height: 32px;
+  padding: 0 12px;
+  font-size: 0.875rem;
+}
+
+.tds-chip--size-large {
+  min-height: 48px;
+  padding: 0 16px;
+  font-size: 1rem;
 }
 
-.tds-chip__icon-left,
-.tds-chip__icon-right {
-  font-size: 14px;
+.tds-chip__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }