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

package/src/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); ?>

package/src/blocks/text/style.css

@@ -1,20 +1,7 @@
-/* Text Block Styles */
-.tds-text {
-  margin: 0;
-  padding: 0;
-}
-
-.tds-text--body-standard {
-  font: var(--typography-body-standard);
-  color: var(--color-text-primary);
-}
+/* Text Block Frontend Styles */
+/* Using resolved design token values for self-contained styling */
+/* Text component is typography-based, minimal CSS needed */
 
-.tds-text--body-small {
-  font: var(--typography-body-small);
-  color: var(--color-text-secondary);
-}
-
-.tds-text--headline {
-  font: var(--typography-headline);
-  color: var(--color-text-primary);
+.tds-text {
+  /* Base typography handled by design tokens and parent context */
 }

package/src/blocks/toast/block.json

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

package/src/blocks/toast/render.php

@@ -0,0 +1,37 @@
+<?php
+/**
+ * Toast Block Render Callback
+ * 
+ * Renders the Toast notification 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']) ? wp_kses_post($attributes['label']) : '';
+$intent = isset($attributes['intent']) ? sanitize_text_field($attributes['intent']) : '';
+$link = isset($attributes['link']) ? esc_url($attributes['link']) : '';
+$link_label = isset($attributes['linkLabel']) ? sanitize_text_field($attributes['linkLabel']) : '';
+$timeout = isset($attributes['timeout']) ? intval($attributes['timeout']) : 0;
+
+$classes = ['tds-toast'];
+$classes[] = 'tds-toast--intent-' . $intent;
+
+$wrapper_attrs = get_block_wrapper_attributes(['class' => implode(' ', $classes)]);
+?>
+
+<div 
+	<?php echo wp_kses_post($wrapper_attrs); ?>
+	role="status"
+	aria-live="polite"
+	<?php echo $timeout ? 'data-timeout="' . esc_attr($timeout) . '"' : ''; ?>
+>
+	<div class="tds-toast__content">
+		<div class="tds-toast__label"><?php echo wp_kses_post($label); ?></div>
+	</div>
+	<?php if ($link && $link_label) : ?>
+		<a href="<?php echo esc_attr($link); ?>" class="tds-toast__link"><?php echo wp_kses_post($link_label); ?></a>
+	<?php endif; ?>
+</div>

package/src/blocks/toast/style.css

@@ -1,51 +1,67 @@
-/* Toast Block Styles */
+/* Toast Block Frontend Styles */
+/* Using resolved design token values for self-contained styling */
+
 .tds-toast {
-  display: flex;
+  --tds-toast-fill: #22724f;
+  --tds-toast-text: #ffffff;
+  --tds-toast-link: #ffffff;
+
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-m);
-  padding: var(--spacing-m);
-  border-radius: var(--border-radius-s);
-  background-color: var(--color-fill-secondary);
-  color: var(--color-text-primary);
-  font: var(--typography-body-standard);
-  margin-bottom: var(--spacing-m);
+  gap: 12px;
+  width: 373px;
+  min-height: 48px;
+  padding: 12px 16px;
+  border-radius: 4px;
+  background: var(--tds-toast-fill);
+  color: var(--tds-toast-text);
+  box-shadow: 0 16px 24px 0 rgb(0 0 0 / 8%);
+  box-sizing: border-box;
 }
 
-.tds-toast--intent-success {
-  background-color: var(--color-fill-positive);
-  color: var(--color-text-on-positive);
+.tds-toast__content {
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
-.tds-toast--intent-warning {
-  background-color: var(--color-fill-warning);
-  color: var(--color-text-on-warning);
+.tds-toast__label {
+  font-family: Roboto;
+  font-size: 1rem;
+  line-height: 1.5;
+  font-weight: 400;
 }
 
-.tds-toast--intent-error {
-  background-color: var(--color-fill-negative);
-  color: var(--color-text-on-negative);
+.tds-toast__link {
+  flex: 0 0 auto;
+  font-family: Roboto;
+  font-size: 1rem;
+  line-height: 1.5;
+  font-weight: 700;
+  text-decoration: underline;
+  color: var(--tds-toast-link);
+  cursor: pointer;
 }
 
-.tds-toast__content {
-  flex: 1;
+.tds-toast--intent-success {
+  --tds-toast-fill: #22724f;
+  --tds-toast-text: #ffffff;
+  --tds-toast-link: #ffffff;
 }
 
-.tds-toast__label {
-  margin: 0;
+.tds-toast--intent-info {
+  --tds-toast-fill: #0a3472;
+  --tds-toast-text: #ffffff;
+  --tds-toast-link: #ffffff;
 }
 
-.tds-toast__link {
-  padding: var(--spacing-xs) var(--spacing-s);
-  border: none;
-  border-radius: var(--border-radius-xs);
-  background-color: rgba(255, 255, 255, 0.1);
-  color: inherit;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  white-space: nowrap;
+.tds-toast--intent-warning {
+  --tds-toast-fill: #e49307;
+  --tds-toast-text: #000000;
+  --tds-toast-link: #000000;
 }
 
-.tds-toast__link:hover {
-  background-color: rgba(255, 255, 255, 0.2);
+.tds-toast--intent-error {
+  --tds-toast-fill: #cb0705;
+  --tds-toast-text: #ffffff;
+  --tds-toast-link: #ffffff;
 }