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

package/dist/blocks/divider/style.css

@@ -1,25 +1,37 @@
-/* Divider Block Styles */
+/* Divider Block Frontend Styles */
+/* Using resolved design token values for self-contained styling */
+
 .tds-divider {
-  height: 1px;
-  background-color: var(--color-border-secondary);
-  margin: var(--spacing-m) 0;
+  box-sizing: content-box;
+  border: 0;
+  border-top: 1px;
+  border-style: solid;
+  border-color: #999999;
+  flex-shrink: 0;
+  height: 0;
+  width: 100%;
 }
 
-.tds-divider--dashed {
-  border-top: 1px dashed var(--color-border-secondary);
-  background-color: transparent;
+.tds-divider.tds-divider--dashed {
+  border-style: dashed;
 }
 
+/* Vertical */
 .tds-divider--vertical {
-  width: 1px;
-  height: auto;
-  margin: 0 var(--spacing-m);
+  width: 0;
+  height: 100%;
+  align-self: stretch;
+  border-top: none;
+  border-left: 1px;
+  border-style: solid;
 }
 
-.tds-divider--padding {
-  margin: var(--spacing-xl) 0;
+/* Padding — gutter spacing around the line */
+.tds-divider--horizontal.tds-divider--padding {
+  margin-block: 24px;
 }
 
 .tds-divider--vertical.tds-divider--padding {
-  margin: 0 var(--spacing-xl);
+  margin-inline: 24px;
+  margin-block: 0;
 }

package/dist/blocks/flag/block.json

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

package/dist/blocks/flag/render.php

@@ -0,0 +1,34 @@
+<?php
+/**
+ * Flag Block Render Callback
+ * 
+ * Renders the Flag 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']) : '';
+$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']) : '';
+$aria_label = isset($attributes['ariaLabel']) ? sanitize_text_field($attributes['ariaLabel']) : '';
+
+$classes = ['tds-flag'];
+$classes[] = 'tds-flag--intent-' . $intent;
+$classes[] = 'tds-flag--size-' . $size;
+
+$wrapper_attrs = get_block_wrapper_attributes(['class' => implode(' ', $classes)]);
+?>
+
+<div 
+	<?php echo wp_kses_post($wrapper_attrs); ?>
+	<?php echo $aria_label ? 'aria-label="' . esc_attr($aria_label) . '"' : ''; ?>
+>
+	<?php if ($label) : ?>
+		<div class="tds-flag__label"><?php echo wp_kses_post($label); ?></div>
+	<?php endif; ?>
+	<div class="tds-flag__content"><?php echo wp_kses_post($content_text); ?></div>
+</div>

package/dist/blocks/flag/style.css

@@ -1,45 +1,54 @@
-/* Flag Block Styles */
+/* Flag Block Frontend Styles */
+/* Using resolved design token values for self-contained styling */
+
 .tds-flag {
+  --tds-flag-bg: #000000;
+  --tds-flag-fg: #f2f2f2;
+  --tds-flag-icon: var(--flag-fg);
+  --tds-flag-border: transparent;
+
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-s);
-  padding: var(--spacing-s) var(--spacing-m);
-  border-radius: var(--border-radius-s);
-  background-color: var(--color-fill-secondary);
-  color: var(--color-text-primary);
-  font: var(--typography-body-small);
-}
-
-.tds-flag--intent-primary {
-  background-color: var(--color-fill-primary);
-  color: var(--color-text-on-primary);
-}
-
-.tds-flag--intent-negative {
-  background-color: var(--color-fill-negative);
-  color: var(--color-text-on-negative);
+  justify-content: center;
+  gap: 4px;
+  min-height: 19px;
+  min-width: 42px;
+  padding: 0 2px;
+  border-radius: 2px;
+  border: 1px solid var(--tds-flag-border);
+  background-color: var(--tds-flag-bg);
+  color: var(--tds-flag-fg);
+  font-family: Roboto;
+  font-size: 1.4rem;
+  font-weight: 500;
+  line-height: 1.125;
+  text-transform: uppercase;
+  white-space: nowrap;
+  box-sizing: border-box;
 }
 
-.tds-flag--intent-positive {
-  background-color: var(--color-fill-positive);
-  color: var(--color-text-on-positive);
+.tds-flag--size-small {
+  font-size: 1.2rem;
 }
 
-.tds-flag--size-small {
-  padding: var(--spacing-xs) var(--spacing-s);
-  font-size: 12px;
+.tds-flag--intent-secondary {
+  --tds-flag-bg: transparent;
+  --tds-flag-fg: #1a1a1a;
+  --tds-flag-icon: var(--tds-flag-fg);
 }
 
-.tds-flag--size-large {
-  padding: var(--spacing-m) var(--spacing-l);
-  font-size: 16px;
+.tds-flag--intent-callout {
+  --tds-flag-bg: #b20908;
+  --tds-flag-fg: #ffffff;
+  --tds-flag-icon: var(--tds-flag-fg);
 }
 
 .tds-flag__label {
-  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
 }
 
-.tds-flag__icon-left,
-.tds-flag__icon-right {
-  font-size: 14px;
+.tds-flag__content {
+  display: inline-flex;
+  align-items: center;
 }

package/dist/blocks/icon-button/block.json

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

package/dist/blocks/icon-button/render.php

@@ -0,0 +1,46 @@
+<?php
+/**
+ * Icon Button Block Render Callback
+ * 
+ * Renders the Icon Button block on the frontend.
+ * 
+ * @package TimesDesignSystem\ComponentsWordPress
+ * @var array $attributes Block attributes
+ * @var string $content Block content
+ * @var WP_Block $block Block instance
+ */
+
+$icon_name = isset($attributes['iconName']) ? sanitize_text_field($attributes['iconName']) : '';
+$round = isset($attributes['round']) ? (bool) $attributes['round'] : 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']) : '';
+$aria_label = isset($attributes['ariaLabel']) ? sanitize_text_field($attributes['ariaLabel']) : '';
+
+$classes = ['tds-icon-button'];
+if ($round) {
+	$classes[] = 'tds-icon-button--round';
+}
+
+$element_tag = $href ? 'a' : 'button';
+$wrapper_attrs = get_block_wrapper_attributes(['class' => implode(' ', $classes)]);
+?>
+
+<?php if ($element_tag === 'a') : ?>
+	<a 
+		<?php echo wp_kses_post($wrapper_attrs); ?>
+		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-icon-button__icon"><?php echo wp_kses_post($icon_name); ?></span>
+	</a>
+<?php else : ?>
+	<button 
+		<?php echo wp_kses_post($wrapper_attrs); ?>
+		<?php echo $aria_label ? 'aria-label="' . esc_attr($aria_label) . '"' : ''; ?>
+	>
+		<span class="tds-icon-button__icon"><?php echo wp_kses_post($icon_name); ?></span>
+	</button>
+<?php endif; ?>

package/dist/blocks/icon-button/style.css

@@ -1,32 +1,31 @@
-/* Icon Button Styles */
-.tds-icon-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border: none;
-  border-radius: var(--border-radius-s);
-  background-color: var(--color-fill-secondary);
-  color: var(--color-text-primary);
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  text-decoration: none;
+/* Icon Button Block Frontend Styles */
+/* Using resolved design token values for self-contained styling */
+/* Icon buttons inherit base button styles for colors, intents, etc. */
+
+.tds-icon-button--size-small {
+  width: 32px;
+  height: 32px;
+  padding: 6px;
 }
 
-.tds-icon-button:hover {
-  background-color: var(--color-fill-hover);
+.tds-icon-button--size-medium {
+  width: 48px;
+  height: 48px;
+  padding: 12px;
 }
 
-.tds-icon-button:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--color-fill-focus);
+.tds-icon-button--size-large {
+  width: 64px;
+  height: 64px;
+  padding: 16px;
 }
 
-.tds-icon-button--round {
-  border-radius: 50%;
+.tds-icon-button--round.tds-button {
+  border-radius: 9999px;
 }
 
 .tds-icon-button__icon {
-  font-size: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }

package/dist/blocks/input/block.json

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

package/dist/blocks/input/render.php

@@ -0,0 +1,39 @@
+<?php
+/**
+ * Input Block Render Callback
+ * 
+ * Renders the Input 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']) : '';
+$placeholder = isset($attributes['placeholder']) ? sanitize_text_field($attributes['placeholder']) : '';
+$type = isset($attributes['type']) ? sanitize_text_field($attributes['type']) : 'text';
+$disabled = isset($attributes['disabled']) ? (bool) $attributes['disabled'] : false;
+$required = isset($attributes['required']) ? (bool) $attributes['required'] : false;
+$name = isset($attributes['name']) ? sanitize_text_field($attributes['name']) : '';
+$id = isset($attributes['id']) ? sanitize_text_field($attributes['id']) : '';
+
+$wrapper_attrs = get_block_wrapper_attributes();
+?>
+
+<div <?php echo wp_kses_post($wrapper_attrs); ?>>
+	<?php if ($label) : ?>
+		<label for="<?php echo esc_attr($id); ?>" class="tds-input__label">
+			<?php echo wp_kses_post($label); ?>
+		</label>
+	<?php endif; ?>
+	<input 
+		type="<?php echo esc_attr($type); ?>"
+		<?php echo $placeholder ? 'placeholder="' . esc_attr($placeholder) . '"' : ''; ?>
+		<?php echo $disabled ? 'disabled' : ''; ?>
+		<?php echo $required ? 'required' : ''; ?>
+		<?php echo $name ? 'name="' . esc_attr($name) . '"' : ''; ?>
+		<?php echo $id ? 'id="' . esc_attr($id) . '"' : ''; ?>
+		class="tds-input"
+	/>
+</div>

package/dist/blocks/input/style.css

@@ -1,30 +1,53 @@
-/* Input Block Styles */
+/* Input Block Frontend Styles */
+/* Using resolved design token values for self-contained styling */
+
+.tds-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Label styles */
+.tds-input__label {
+  color: #1a1a1a;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Input field styles */
 .tds-input {
-  display: block;
   width: 100%;
-  padding: var(--spacing-s) var(--spacing-m);
-  border: 1px solid var(--color-border-primary);
-  border-radius: var(--border-radius-s);
-  font: var(--typography-body-standard);
-  color: var(--color-text-primary);
-  background-color: var(--color-fill-primary);
+  padding: 8px 12px;
+  color: #1a1a1a;
+  background-color: #ffffff;
+  border: 1px solid #999999;
+  border-radius: 0;
+  transition: all 0.2s ease-in-out;
+  box-sizing: border-box;
 }
 
+/* Input focus state */
 .tds-input:focus {
   outline: none;
-  border-color: var(--color-border-focus);
-  box-shadow: 0 0 0 2px var(--color-fill-focus);
+  border-color: #0f4aa2;
+  box-shadow: 0 0 0 2px rgba(15, 74, 162, 0.1);
+}
+
+/* Input hover state */
+.tds-input:hover:not(:disabled) {
+  border-color: #0f4aa2;
 }
 
+/* Input disabled state */
 .tds-input:disabled {
-  background-color: var(--color-fill-disabled);
-  color: var(--color-text-disabled);
+  background-color: #f2f2f2;
+  color: #999999;
+  border-color: #cccccc;
   cursor: not-allowed;
 }
 
-.tds-input__label {
-  display: block;
-  margin-bottom: var(--spacing-s);
-  font-weight: 600;
-  color: var(--color-text-primary);
+/* Input placeholder */
+.tds-input::placeholder {
+  color: #666666;
 }

package/dist/blocks/link/block.json

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

package/dist/blocks/link/render.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Link Block Render Callback
+ * 
+ * Renders the Link block on the frontend.
+ * 
+ * @package TimesDesignSystem\ComponentsWordPress
+ * @var array $attributes Block attributes
+ * @var string $content Block content
+ * @var WP_Block $block Block instance
+ */
+
+$href = isset($attributes['href']) ? esc_url($attributes['href']) : '';
+$content_text = isset($attributes['content']) ? wp_kses_post($attributes['content']) : '';
+$intent = isset($attributes['intent']) ? sanitize_text_field($attributes['intent']) : '';
+$sentiment = isset($attributes['sentiment']) ? sanitize_text_field($attributes['sentiment']) : '';
+$size = isset($attributes['size']) ? sanitize_text_field($attributes['size']) : '';
+$state = isset($attributes['state']) ? sanitize_text_field($attributes['state']) : '';
+$inline = isset($attributes['inline']) ? (bool) $attributes['inline'] : true;
+$aria_label = isset($attributes['ariaLabel']) ? sanitize_text_field($attributes['ariaLabel']) : '';
+$target = isset($attributes['target']) ? sanitize_text_field($attributes['target']) : '_self';
+$rel = isset($attributes['rel']) ? sanitize_text_field($attributes['rel']) : '';
+
+$classes = ['tds-link'];
+$classes[] = 'tds-link--intent-' . $intent;
+$classes[] = 'tds-link--sentiment-' . $sentiment;
+$classes[] = 'tds-link--size-' . $size;
+$classes[] = 'tds-link--state-' . $state;
+if (!$inline) {
+	$classes[] = 'tds-link--block';
+}
+
+$wrapper_attrs = get_block_wrapper_attributes(['class' => implode(' ', $classes)]);
+?>
+
+<a 
+	<?php echo wp_kses_post($wrapper_attrs); ?>
+	href="<?php echo esc_attr($href); ?>"
+	<?php echo $aria_label ? 'aria-label="' . esc_attr($aria_label) . '"' : ''; ?>
+	<?php echo ($target !== '_self') ? 'target="' . esc_attr($target) . '"' : ''; ?>
+	<?php echo $rel ? 'rel="' . esc_attr($rel) . '"' : ''; ?>
+>
+	<span class="tds-link__content"><?php echo wp_kses_post($content_text); ?></span>
+</a>

package/dist/blocks/link/style.css

@@ -1,66 +1,119 @@
-/* Link Block Styles */
+/* Link Block Frontend Styles */
+/* These styles mirror the React Link component styles */
+
 .tds-link {
+  --tds-link-color-default: #286c96;
+  --tds-link-color-hover: #286c96;
+  --tds-link-color-pressed: #286c96;
+  --tds-link-color-visited: #286c96;
+  --tds-link-color-disabled: #bfbfbf;
+  --tds-link-underline-default: #286c96;
+  --tds-link-underline-hover: #286c96;
+  --tds-link-underline-pressed: #286c96;
+  --tds-link-underline-visited: #286c96;
+  --tds-link-focus-ring: #737373;
+  --tds-link-icon-size: 20px;
+
+  position: relative;
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-xs);
-  text-decoration: none;
+  gap: 4px;
+  color: var(--tds-link-color-default);
   cursor: pointer;
-  transition: all 0.2s ease-in-out;
-}
-
-.tds-link--intent-primary {
-  color: var(--color-text-link-primary);
+  font-family: Roboto;
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 1.5;
+  text-decoration: underline;
+  text-decoration-color: var(--tds-link-underline-default);
+  text-decoration-skip-ink: auto;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 2px;
+  transition: color 0.36s cubic-bezier(0.22, 1, 0.36, 1), text-decoration-color 0.36s cubic-bezier(0.22, 1, 0.36, 1), text-decoration-thickness 0.36s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .tds-link--intent-secondary {
-  color: var(--color-text-link-secondary);
+  --tds-link-color-default: var(--interactive-link-secondary-text-default, #1a191a);
+  --tds-link-color-hover: var(--interactive-link-secondary-text-hover, #1a191a);
+  --tds-link-color-pressed: var(--interactive-link-secondary-text-pressed, #1a191a);
+  --tds-link-color-visited: var(--interactive-link-secondary-text-visited, var(--interactive-link-secondary-text-default, #1a191a));
+  --tds-link-underline-default: var(--interactive-link-secondary-underline-default, var(--tds-link-color-default));
+  --tds-link-underline-hover: var(--interactive-link-secondary-underline-hover, var(--tds-link-color-hover));
+  --tds-link-underline-pressed: var(--interactive-link-secondary-underline-pressed, var(--tds-link-color-pressed));
+  --tds-link-underline-visited: var(--interactive-link-secondary-underline-visited, var(--tds-link-color-visited));
 }
 
-.tds-link--intent-negative {
-  color: var(--color-text-link-negative);
+.tds-link--sentiment-brand {
+  font-family: var(--fontFamily020);
 }
 
-.tds-link--sentiment-positive {
-  font-weight: 600;
+.tds-link--sentiment-utility {
+  font-family: var(--fontFamily040);
+  font-weight: var(--fontWeight070);
 }
 
-.tds-link--sentiment-negative {
-  font-weight: 400;
-  opacity: 0.8;
+.tds-link--size-xsmall {
+  font-size: 1.2rem;
+  gap: 4px;
+  --tds-link-icon-size: 16px;
 }
 
 .tds-link--size-small {
-  font-size: 12px;
+  font-size: 1.4rem;
+  gap: 4px;
+  --tds-link-icon-size: 16px;
+}
+
+.tds-link--size-medium {
+  font-size: 1.6rem;
+  gap: 6px;
+  --tds-link-icon-size: 20px;
 }
 
 .tds-link--size-large {
-  font-size: 18px;
+  font-size: 1.8rem;
+  gap: 8px;
+  --tds-link-icon-size: 24px;
 }
 
-.tds-link--state-hover {
-  text-decoration: underline;
+.tds-link__content {
+  white-space: nowrap;
 }
 
-.tds-link--state-visited {
-  color: var(--color-text-link-visited);
+.tds-link:hover:not(.tds-link--is-disabled) {
+  color: var(--tds-link-color-hover);
+  text-decoration-color: var(--tds-link-underline-hover);
+  text-decoration-thickness: var(--spacing-02);
 }
 
-.tds-link--state-focus {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
+.tds-link:active:not(.tds-link--is-disabled) {
+  color: var(--tds-link-color-pressed);
+  text-decoration-color: var(--tds-link-underline-pressed);
 }
 
-.tds-link--state-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.tds-link:visited:not(.tds-link--is-disabled) {
+  color: var(--tds-link-color-visited);
+  text-decoration-color: var(--tds-link-underline-visited);
 }
 
-.tds-link--block {
-  display: flex;
-  width: 100%;
+.tds-link:focus-visible:not(.tds-link--is-disabled) {
+  outline: none;
+  color: var(--tds-link-color-default);
+  text-decoration-color: var(--tds-link-underline-default);
 }
 
-.tds-link__icon-left,
-.tds-link__icon-right {
-  font-size: 1em;
+.tds-link:focus-visible:not(.tds-link--is-disabled)::after {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  border: 2px solid #737373;
+  pointer-events: none;
+}
+
+.tds-link.tds-link--is-disabled,
+.tds-link[aria-disabled='true'] {
+  color: var(--tds-link-color-disabled);
+  text-decoration-color: var(--tds-link-color-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
 }

package/dist/blocks/text/block.json

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

package/dist/blocks/text/render.php

@@ -0,0 +1,26 @@
+<?php
+/**
+ * Text Block Render Callback
+ * 
+ * Renders the Text typography block on the frontend.
+ * 
+ * @package TimesDesignSystem\ComponentsWordPress
+ * @var array $attributes Block attributes
+ * @var string $content Block content
+ * @var WP_Block $block Block instance
+ */
+
+$as = isset($attributes['as']) ? sanitize_text_field($attributes['as']) : 'p';
+$typography_style = isset($attributes['typographyStyle']) ? sanitize_text_field($attributes['typographyStyle']) : '';
+$text_content = isset($attributes['content']) ? wp_kses_post($attributes['content']) : '';
+
+$tag_name = in_array($as, ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5'], true) ? $as : 'p';
+$class_name = 'tds-text';
+if ($typography_style) {
+	$class_name .= ' tds-text--' . sanitize_html_class($typography_style);
+}
+
+$wrapper_attrs = get_block_wrapper_attributes(['class' => $class_name]);
+?>
+
+<?php echo wp_sprintf('<%s %s>%s</%s>', $tag_name, wp_kses_post($wrapper_attrs), wp_kses_post($text_content), $tag_name); ?>