@times-design-system/components-wordpress 1.4.0 → 1.5.0

package/dist/blocks/icon/render.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Block Rendering: Icon
+ * 
+ * Server-side rendering for the Icon block.
+ * Reference: packages/components-react/src/Icon/
+ * 
+ * @param array $attributes Block attributes
+ * @param string $content Saved block content
+ * @param WP_Block $block The block instance
+ * @return string Rendered HTML
+ */
+
+$wrapper_attributes = get_block_wrapper_attributes();
+
+// TODO: Render the Icon component
+// Extract attributes and render appropriate HTML with BEM classes
+
+?>
+<div <?php echo wp_kses_post( $wrapper_attributes ); ?>>
+  <!-- TODO: Render Icon component here -->
+  <!-- Use CSS custom properties from packages/tokens/data/resolved-hexes.json -->
+  <!-- Apply BEM naming: tds-icon--{modifier} -->
+</div>

package/dist/blocks/icon/save.js

@@ -0,0 +1,23 @@
+/**
+ * Block Save Component: Icon
+ *
+ * Renders the static output saved to the database.
+ * Reference: packages/components-react/src/Icon/
+ */
+
+import { useBlockProps } from '@wordpress/block-editor';
+
+export function save(props) {
+  const { attributes } = props;
+  const blockProps = useBlockProps.save();
+
+  // TODO: Render the actual Icon component with attributes
+  // This output is saved to the database and displayed on the frontend
+
+  return (
+    <div {...blockProps}>
+      {/* TODO: Render Icon component */}
+      {attributes.content && <p>{attributes.content}</p>}
+    </div>
+  );
+}

package/dist/blocks/icon/style.css

@@ -0,0 +1,23 @@
+/**
+ * Styles for Icon Block
+ * 
+ * Reference: packages/components-react/src/Icon/
+ * Token Reference: packages/tokens/data/resolved-hexes.json
+ * 
+ * TODO: Adapt styles from React component
+ * - Copy relevant CSS from React component
+ * - Map CSS custom properties to resolved hex values
+ * - Use BEM naming: .tds-icon--{modifier}
+ */
+
+.tds-icon {
+  /* TODO: Add component styles here */
+}
+
+.tds-icon--focus {
+  /* TODO: Add focus state styles */
+}
+
+.tds-icon--disabled {
+  /* TODO: Add disabled state styles */
+}

package/dist/blocks/input-helper-message/block.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "tds/input-helper-message",
+  "title": "Times Design System - InputHelperMessage",
+  "category": "common",
+  "description": "WordPress block for Times Design System InputHelperMessage component",
+  "icon": "block-default",
+  "supports": {
+    "html": false,
+    "multiple": true,
+    "reusable": true,
+    "customClassName": true
+  },
+  "textdomain": "times-blocks",
+  "attributes": {
+    "content": {
+      "type": "string",
+      "default": ""
+    }
+  },
+  "render": "file:./render.php",
+  "editorScript": "file:./index.js"
+}

package/dist/blocks/input-helper-message/edit.js

@@ -0,0 +1,42 @@
+/**
+ * Block Editor Component: InputHelperMessage
+ *
+ * Renders the editor UI for the InputHelperMessage block in Gutenberg.
+ * Reference: packages/components-react/src/InputHelperMessage/
+ */
+
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, TextControl } from '@wordpress/components';
+
+export function edit(props) {
+  const { attributes, setAttributes } = props;
+  const blockProps = useBlockProps();
+
+  // TODO: Implement editor UI based on component props
+  // - Add inspector controls for attributes
+  // - Render preview of component in editor
+  // - Handle attribute changes via setAttributes()
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="InputHelperMessage Settings" initialOpen={true}>
+          <TextControl
+            label="Content"
+            value={attributes.content || ''}
+            onChange={(content) => setAttributes({ content })}
+            placeholder="Enter content..."
+          />
+          {/* TODO: Add more controls based on component variants */}
+        </PanelBody>
+      </InspectorControls>
+      <div {...blockProps}>
+        <p>📝 InputHelperMessage block editor</p>
+        <p style={{ fontSize: '12px', color: '#666' }}>
+          TODO: Render the InputHelperMessage component here with current
+          attributes
+        </p>
+      </div>
+    </>
+  );
+}

package/dist/blocks/input-helper-message/index.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress Block Loader: InputHelperMessage
+ *
+ * Reference: packages/components-react/src/InputHelperMessage/
+ * TODO: Update attributes in block.json based on component props
+ */
+
+import { registerBlockType } from '@wordpress/blocks';
+import { edit as Edit } from './edit';
+import { save as Save } from './save';
+import blockConfig from './block.json';
+
+registerBlockType(blockConfig.name, {
+  ...blockConfig,
+  edit: Edit,
+  save: Save
+});

package/dist/blocks/input-helper-message/render.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Block Rendering: InputHelperMessage
+ * 
+ * Server-side rendering for the InputHelperMessage block.
+ * Reference: packages/components-react/src/InputHelperMessage/
+ * 
+ * @param array $attributes Block attributes
+ * @param string $content Saved block content
+ * @param WP_Block $block The block instance
+ * @return string Rendered HTML
+ */
+
+$wrapper_attributes = get_block_wrapper_attributes();
+
+// TODO: Render the InputHelperMessage component
+// Extract attributes and render appropriate HTML with BEM classes
+
+?>
+<div <?php echo wp_kses_post( $wrapper_attributes ); ?>>
+  <!-- TODO: Render InputHelperMessage component here -->
+  <!-- Use CSS custom properties from packages/tokens/data/resolved-hexes.json -->
+  <!-- Apply BEM naming: tds-input-helper-message--{modifier} -->
+</div>

package/dist/blocks/input-helper-message/save.js

@@ -0,0 +1,23 @@
+/**
+ * Block Save Component: InputHelperMessage
+ *
+ * Renders the static output saved to the database.
+ * Reference: packages/components-react/src/InputHelperMessage/
+ */
+
+import { useBlockProps } from '@wordpress/block-editor';
+
+export function save(props) {
+  const { attributes } = props;
+  const blockProps = useBlockProps.save();
+
+  // TODO: Render the actual InputHelperMessage component with attributes
+  // This output is saved to the database and displayed on the frontend
+
+  return (
+    <div {...blockProps}>
+      {/* TODO: Render InputHelperMessage component */}
+      {attributes.content && <p>{attributes.content}</p>}
+    </div>
+  );
+}

package/dist/blocks/input-helper-message/style.css

@@ -0,0 +1,23 @@
+/**
+ * Styles for InputHelperMessage Block
+ * 
+ * Reference: packages/components-react/src/InputHelperMessage/
+ * Token Reference: packages/tokens/data/resolved-hexes.json
+ * 
+ * TODO: Adapt styles from React component
+ * - Copy relevant CSS from React component
+ * - Map CSS custom properties to resolved hex values
+ * - Use BEM naming: .tds-input-helper-message--{modifier}
+ */
+
+.tds-input-helper-message {
+  /* TODO: Add component styles here */
+}
+
+.tds-input-helper-message--focus {
+  /* TODO: Add focus state styles */
+}
+
+.tds-input-helper-message--disabled {
+  /* TODO: Add disabled state styles */
+}

package/dist/blocks/tab/block.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "tds/tab",
+  "title": "Times Design System - Tab",
+  "category": "common",
+  "description": "WordPress block for Times Design System Tab component",
+  "icon": "block-default",
+  "supports": {
+    "html": false,
+    "multiple": true,
+    "reusable": true,
+    "customClassName": true
+  },
+  "textdomain": "times-blocks",
+  "attributes": {
+    "content": {
+      "type": "string",
+      "default": ""
+    }
+  },
+  "render": "file:./render.php",
+  "editorScript": "file:./index.js"
+}

package/dist/blocks/tab/edit.js

@@ -0,0 +1,41 @@
+/**
+ * Block Editor Component: Tab
+ *
+ * Renders the editor UI for the Tab block in Gutenberg.
+ * Reference: packages/components-react/src/Tab/
+ */
+
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, TextControl } from '@wordpress/components';
+
+export function edit(props) {
+  const { attributes, setAttributes } = props;
+  const blockProps = useBlockProps();
+
+  // TODO: Implement editor UI based on component props
+  // - Add inspector controls for attributes
+  // - Render preview of component in editor
+  // - Handle attribute changes via setAttributes()
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="Tab Settings" initialOpen={true}>
+          <TextControl
+            label="Content"
+            value={attributes.content || ''}
+            onChange={(content) => setAttributes({ content })}
+            placeholder="Enter content..."
+          />
+          {/* TODO: Add more controls based on component variants */}
+        </PanelBody>
+      </InspectorControls>
+      <div {...blockProps}>
+        <p>📝 Tab block editor</p>
+        <p style={{ fontSize: '12px', color: '#666' }}>
+          TODO: Render the Tab component here with current attributes
+        </p>
+      </div>
+    </>
+  );
+}

package/dist/blocks/tab/index.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress Block Loader: Tab
+ *
+ * Reference: packages/components-react/src/Tab/
+ * TODO: Update attributes in block.json based on component props
+ */
+
+import { registerBlockType } from '@wordpress/blocks';
+import { edit as Edit } from './edit';
+import { save as Save } from './save';
+import blockConfig from './block.json';
+
+registerBlockType(blockConfig.name, {
+  ...blockConfig,
+  edit: Edit,
+  save: Save
+});

package/dist/blocks/tab/render.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Block Rendering: Tab
+ * 
+ * Server-side rendering for the Tab block.
+ * Reference: packages/components-react/src/Tab/
+ * 
+ * @param array $attributes Block attributes
+ * @param string $content Saved block content
+ * @param WP_Block $block The block instance
+ * @return string Rendered HTML
+ */
+
+$wrapper_attributes = get_block_wrapper_attributes();
+
+// TODO: Render the Tab component
+// Extract attributes and render appropriate HTML with BEM classes
+
+?>
+<div <?php echo wp_kses_post( $wrapper_attributes ); ?>>
+  <!-- TODO: Render Tab component here -->
+  <!-- Use CSS custom properties from packages/tokens/data/resolved-hexes.json -->
+  <!-- Apply BEM naming: tds-tab--{modifier} -->
+</div>

package/dist/blocks/tab/save.js

@@ -0,0 +1,23 @@
+/**
+ * Block Save Component: Tab
+ *
+ * Renders the static output saved to the database.
+ * Reference: packages/components-react/src/Tab/
+ */
+
+import { useBlockProps } from '@wordpress/block-editor';
+
+export function save(props) {
+  const { attributes } = props;
+  const blockProps = useBlockProps.save();
+
+  // TODO: Render the actual Tab component with attributes
+  // This output is saved to the database and displayed on the frontend
+
+  return (
+    <div {...blockProps}>
+      {/* TODO: Render Tab component */}
+      {attributes.content && <p>{attributes.content}</p>}
+    </div>
+  );
+}

package/dist/blocks/tab/style.css

@@ -0,0 +1,23 @@
+/**
+ * Styles for Tab Block
+ * 
+ * Reference: packages/components-react/src/Tab/
+ * Token Reference: packages/tokens/data/resolved-hexes.json
+ * 
+ * TODO: Adapt styles from React component
+ * - Copy relevant CSS from React component
+ * - Map CSS custom properties to resolved hex values
+ * - Use BEM naming: .tds-tab--{modifier}
+ */
+
+.tds-tab {
+  /* TODO: Add component styles here */
+}
+
+.tds-tab--focus {
+  /* TODO: Add focus state styles */
+}
+
+.tds-tab--disabled {
+  /* TODO: Add disabled state styles */
+}

package/dist/blocks/tab-group/block.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "tds/tab-group",
+  "title": "Times Design System - TabGroup",
+  "category": "common",
+  "description": "WordPress block for Times Design System TabGroup component",
+  "icon": "block-default",
+  "supports": {
+    "html": false,
+    "multiple": true,
+    "reusable": true,
+    "customClassName": true
+  },
+  "textdomain": "times-blocks",
+  "attributes": {
+    "content": {
+      "type": "string",
+      "default": ""
+    }
+  },
+  "render": "file:./render.php",
+  "editorScript": "file:./index.js"
+}

package/dist/blocks/tab-group/edit.js

@@ -0,0 +1,41 @@
+/**
+ * Block Editor Component: TabGroup
+ *
+ * Renders the editor UI for the TabGroup block in Gutenberg.
+ * Reference: packages/components-react/src/TabGroup/
+ */
+
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, TextControl } from '@wordpress/components';
+
+export function edit(props) {
+  const { attributes, setAttributes } = props;
+  const blockProps = useBlockProps();
+
+  // TODO: Implement editor UI based on component props
+  // - Add inspector controls for attributes
+  // - Render preview of component in editor
+  // - Handle attribute changes via setAttributes()
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="TabGroup Settings" initialOpen={true}>
+          <TextControl
+            label="Content"
+            value={attributes.content || ''}
+            onChange={(content) => setAttributes({ content })}
+            placeholder="Enter content..."
+          />
+          {/* TODO: Add more controls based on component variants */}
+        </PanelBody>
+      </InspectorControls>
+      <div {...blockProps}>
+        <p>📝 TabGroup block editor</p>
+        <p style={{ fontSize: '12px', color: '#666' }}>
+          TODO: Render the TabGroup component here with current attributes
+        </p>
+      </div>
+    </>
+  );
+}

package/dist/blocks/tab-group/index.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress Block Loader: TabGroup
+ *
+ * Reference: packages/components-react/src/TabGroup/
+ * TODO: Update attributes in block.json based on component props
+ */
+
+import { registerBlockType } from '@wordpress/blocks';
+import { edit as Edit } from './edit';
+import { save as Save } from './save';
+import blockConfig from './block.json';
+
+registerBlockType(blockConfig.name, {
+  ...blockConfig,
+  edit: Edit,
+  save: Save
+});

package/dist/blocks/tab-group/render.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Block Rendering: TabGroup
+ * 
+ * Server-side rendering for the TabGroup block.
+ * Reference: packages/components-react/src/TabGroup/
+ * 
+ * @param array $attributes Block attributes
+ * @param string $content Saved block content
+ * @param WP_Block $block The block instance
+ * @return string Rendered HTML
+ */
+
+$wrapper_attributes = get_block_wrapper_attributes();
+
+// TODO: Render the TabGroup component
+// Extract attributes and render appropriate HTML with BEM classes
+
+?>
+<div <?php echo wp_kses_post( $wrapper_attributes ); ?>>
+  <!-- TODO: Render TabGroup component here -->
+  <!-- Use CSS custom properties from packages/tokens/data/resolved-hexes.json -->
+  <!-- Apply BEM naming: tds-tab-group--{modifier} -->
+</div>

package/dist/blocks/tab-group/save.js

@@ -0,0 +1,23 @@
+/**
+ * Block Save Component: TabGroup
+ *
+ * Renders the static output saved to the database.
+ * Reference: packages/components-react/src/TabGroup/
+ */
+
+import { useBlockProps } from '@wordpress/block-editor';
+
+export function save(props) {
+  const { attributes } = props;
+  const blockProps = useBlockProps.save();
+
+  // TODO: Render the actual TabGroup component with attributes
+  // This output is saved to the database and displayed on the frontend
+
+  return (
+    <div {...blockProps}>
+      {/* TODO: Render TabGroup component */}
+      {attributes.content && <p>{attributes.content}</p>}
+    </div>
+  );
+}

package/dist/blocks/tab-group/style.css

@@ -0,0 +1,23 @@
+/**
+ * Styles for TabGroup Block
+ * 
+ * Reference: packages/components-react/src/TabGroup/
+ * Token Reference: packages/tokens/data/resolved-hexes.json
+ * 
+ * TODO: Adapt styles from React component
+ * - Copy relevant CSS from React component
+ * - Map CSS custom properties to resolved hex values
+ * - Use BEM naming: .tds-tab-group--{modifier}
+ */
+
+.tds-tab-group {
+  /* TODO: Add component styles here */
+}
+
+.tds-tab-group--focus {
+  /* TODO: Add focus state styles */
+}
+
+.tds-tab-group--disabled {
+  /* TODO: Add disabled state styles */
+}

package/dist/vitest.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/dist/vitest.setup.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@times-design-system/components-wordpress",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "type": "module",
   "description": "Times Design System Gutenberg blocks for WordPress Full Site Editing",
   "keywords": [
@@ -38,7 +38,17 @@
     "clean": "rimraf dist",
     "dev": "rollup -c --watch",
     "prepublishOnly": "npm run build",
-    "_test": "node ./__tests__/*.test.js"
+    "test": "vitest --run",
+    "test:coverage": "vitest --run --coverage",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "block:create": "node scripts/create-wordpress-block.cjs",
+    "block:create:all": "node scripts/create-wordpress-block.cjs --all",
+    "block:test": "node scripts/create-wordpress-block-tests.cjs",
+    "block:checklist": "node scripts/create-wordpress-block.cjs --checklist",
+    "block:checklist:all": "node scripts/create-wordpress-block.cjs --checklist:all",
+    "block:status": "node scripts/create-wordpress-block.cjs --status",
+    "block:list": "node scripts/create-wordpress-block.cjs --list"
   },
   "bugs": {
     "url": "https://github.com/newsuk/times-design-system/issues"
@@ -48,7 +58,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@times-design-system/theme-scss": "^2.2.0",
+    "@times-design-system/theme-scss": "^2.3.0",
     "@wordpress/block-editor": "^12.0.0",
     "@wordpress/blocks": "^12.0.0",
     "@wordpress/components": "^25.0.0",
@@ -63,13 +73,19 @@
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-typescript": "^11.0.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
     "@types/react": "19.2.5",
+    "@vitest/ui": "^1.0.4",
+    "jsdom": "^23.0.0",
     "postcss": "^8.4.31",
     "rimraf": "^5.0.0",
     "rollup": "^3.0.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "vitest": "^1.0.4"
   },
-  "gitHead": "4e9bd2bc67b0dc34eb38eac29cebe11c6bcdb25b"
+  "gitHead": "f57ef06b52f90bc4c57a8e0cefd9be6c54b8f7bf"
 }