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

package/dist/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/dist/blocks/toast/block.json

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

package/dist/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/dist/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: 1.6rem;
+  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: 1.6rem;
+  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;
 }

package/dist/index.cjs

@@ -374,6 +374,7 @@ var supports$9 = {
 	customClassName: true
 };
 var textdomain = "times-design-system";
+var render$9 = "file:./render.php";
 var attributes$9 = {
 	label: {
 		type: "string",
@@ -481,6 +482,7 @@ var metadata$9 = {
 	icon: icon$9,
 	supports: supports$9,
 	textdomain: textdomain,
+	render: render$9,
 	attributes: attributes$9,
 	editorScript: editorScript,
 	editorStyle: editorStyle,
@@ -509,6 +511,7 @@ var supports$8 = {
 		"full"
 	]
 };
+var render$8 = "file:./render.php";
 var attributes$8 = {
 	isDashed: {
 		type: "boolean",
@@ -534,6 +537,7 @@ var metadata$8 = {
 	description: description$8,
 	icon: icon$8,
 	supports: supports$8,
+	render: render$8,
 	attributes: attributes$8,
 	example: example$8
 };
@@ -620,6 +624,7 @@ var supports$7 = {
 		padding: false
 	}
 };
+var render$7 = "file:./render.php";
 var attributes$7 = {
 	as: {
 		type: "string",
@@ -654,6 +659,7 @@ var metadata$7 = {
 	description: description$7,
 	icon: icon$7,
 	supports: supports$7,
+	render: render$7,
 	attributes: attributes$7,
 	example: example$7
 };
@@ -761,6 +767,7 @@ var supports$6 = {
 		margin: true
 	}
 };
+var render$6 = "file:./render.php";
 var attributes$6 = {
 	label: {
 		type: "string",
@@ -810,6 +817,7 @@ var metadata$6 = {
 	description: description$6,
 	icon: icon$6,
 	supports: supports$6,
+	render: render$6,
 	attributes: attributes$6,
 	example: example$6
 };
@@ -957,6 +965,7 @@ var supports$5 = {
 		margin: true
 	}
 };
+var render$5 = "file:./render.php";
 var attributes$5 = {
 	iconName: {
 		type: "string",
@@ -1000,6 +1009,7 @@ var metadata$5 = {
 	description: description$5,
 	icon: icon$5,
 	supports: supports$5,
+	render: render$5,
 	attributes: attributes$5,
 	example: example$5
 };
@@ -1139,6 +1149,7 @@ var supports$4 = {
 		margin: true
 	}
 };
+var render$4 = "file:./render.php";
 var attributes$4 = {
 	content: {
 		type: "string",
@@ -1204,6 +1215,7 @@ var metadata$4 = {
 	description: description$4,
 	icon: icon$4,
 	supports: supports$4,
+	render: render$4,
 	attributes: attributes$4,
 	example: example$4
 };
@@ -1400,6 +1412,7 @@ var supports$3 = {
 		margin: true
 	}
 };
+var render$3 = "file:./render.php";
 var attributes$3 = {
 	label: {
 		type: "string",
@@ -1452,6 +1465,7 @@ var metadata$3 = {
 	description: description$3,
 	icon: icon$3,
 	supports: supports$3,
+	render: render$3,
 	attributes: attributes$3,
 	example: example$3
 };
@@ -1616,6 +1630,7 @@ var supports$2 = {
 		margin: true
 	}
 };
+var render$2 = "file:./render.php";
 var attributes$2 = {
 	label: {
 		type: "string",
@@ -1655,6 +1670,7 @@ var metadata$2 = {
 	description: description$2,
 	icon: icon$2,
 	supports: supports$2,
+	render: render$2,
 	attributes: attributes$2,
 	example: example$2
 };
@@ -1796,6 +1812,7 @@ var supports$1 = {
 		margin: true
 	}
 };
+var render$1 = "file:./render.php";
 var attributes$1 = {
 	href: {
 		type: "string",
@@ -1885,6 +1902,7 @@ var metadata$1 = {
 	description: description$1,
 	icon: icon$1,
 	supports: supports$1,
+	render: render$1,
 	attributes: attributes$1,
 	example: example$1
 };
@@ -2145,6 +2163,7 @@ var supports = {
 		padding: true
 	}
 };
+var render = "file:./render.php";
 var attributes = {
 	type: {
 		type: "string",
@@ -2170,6 +2189,7 @@ var metadata = {
 	description: description,
 	icon: icon,
 	supports: supports,
+	render: render,
 	attributes: attributes,
 	example: example
 };