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

package/dist/blocks/icon/edit.js

@@ -0,0 +1,41 @@
+/**
+ * Block Editor Component: Icon
+ *
+ * Renders the editor UI for the Icon block in Gutenberg.
+ * Reference: packages/components-react/src/Icon/
+ */
+
+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="Icon 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>📝 Icon block editor</p>
+        <p style={{ fontSize: '12px', color: '#666' }}>
+          TODO: Render the Icon component here with current attributes
+        </p>
+      </div>
+    </>
+  );
+}

package/dist/blocks/icon/index.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress Block Loader: Icon
+ *
+ * Reference: packages/components-react/src/Icon/
+ * 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/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';