@times-design-system/components-wordpress 0.4.0 → 1.2.0

package/dist/blocks/ad-container/edit.js

@@ -0,0 +1,42 @@
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, SelectControl, TextControl } from '@wordpress/components';
+
+const edit = ({ attributes, setAttributes }) => {
+  const { type, slotID } = attributes;
+  const blockProps = useBlockProps();
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="Ad Container Settings">
+          <SelectControl
+            label="Type"
+            value={type}
+            options={[
+              { label: 'Header', value: 'header' },
+              { label: 'Inline', value: 'inline' }
+            ]}
+            onChange={(val) => setAttributes({ type: val })}
+          />
+          <TextControl
+            label="Slot ID"
+            value={slotID}
+            onChange={(val) => setAttributes({ slotID: val })}
+            placeholder="e.g., /123456789/section/article-top"
+          />
+        </PanelBody>
+      </InspectorControls>
+      <div
+        {...blockProps}
+        className={`tds-ad-container tds-ad-container--${type}`}
+        data-slot-id={slotID}
+      >
+        <div className="tds-ad-container__placeholder">
+          <p>Ad Slot: {slotID || '(not configured)'}</p>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default edit;

package/dist/blocks/ad-container/index.js

@@ -0,0 +1,10 @@
+import { registerBlockType } from '@wordpress/blocks';
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+registerBlockType(metadata.name, {
+  ...metadata,
+  edit,
+  save
+});

package/dist/blocks/ad-container/save.js

@@ -0,0 +1,16 @@
+import { useBlockProps } from '@wordpress/block-editor';
+
+const save = ({ attributes }) => {
+  const { type, slotID } = attributes;
+  const blockProps = useBlockProps.save();
+
+  return (
+    <div
+      {...blockProps}
+      className={`tds-ad-container tds-ad-container--${type}`}
+      data-slot-id={slotID}
+    />
+  );
+};
+
+export default save;

package/dist/blocks/ad-container/style-editor.css

@@ -0,0 +1,4 @@
+/* Ad Container Editor Styles */
+.wp-block-times-ad-container {
+  margin: var(--spacing-m) 0;
+}

package/dist/blocks/ad-container/style.css

@@ -0,0 +1,27 @@
+/* Ad Container Styles */
+.tds-ad-container {
+  display: block;
+  min-height: 250px;
+  background-color: var(--color-fill-secondary);
+  border: 1px dashed var(--color-border-secondary);
+  border-radius: var(--border-radius-s);
+}
+
+.tds-ad-container--header {
+  min-height: 90px;
+}
+
+.tds-ad-container--inline {
+  min-height: 250px;
+}
+
+.tds-ad-container__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  color: var(--color-text-secondary);
+  font: var(--typography-body-small);
+}

package/dist/blocks/button/block.json

@@ -0,0 +1,89 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "times/button",
+  "title": "Button",
+  "category": "common",
+  "description": "A customizable button component for user interactions",
+  "icon": "admin-generic",
+  "supports": {
+    "html": false,
+    "spacing": {
+      "margin": true,
+      "padding": false
+    },
+    "align": true,
+    "customClassName": true
+  },
+  "textdomain": "times-design-system",
+  "attributes": {
+    "label": {
+      "type": "string",
+      "default": "Button label",
+      "description": "The text label displayed inside the button"
+    },
+    "intent": {
+      "type": "string",
+      "enum": ["primary", "secondary", "negative"],
+      "default": "primary",
+      "description": "Visual style variant"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["small", "medium", "large"],
+      "default": "large",
+      "description": "Controls the overall dimensions of the button"
+    },
+    "behaviour": {
+      "type": "string",
+      "enum": ["hug", "full"],
+      "default": "hug",
+      "description": "Controls the width behaviour"
+    },
+    "state": {
+      "type": "string",
+      "enum": ["base", "hover", "pressed", "loading", "disabled", "focus"],
+      "default": "base",
+      "description": "The interaction state"
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "description": "Whether the button is disabled"
+    },
+    "href": {
+      "type": "string",
+      "description": "Optional href to render as a link"
+    },
+    "target": {
+      "type": "string",
+      "enum": ["_blank", "_self", "_parent", "_top"],
+      "description": "Optional target attribute for links"
+    },
+    "rel": {
+      "type": "string",
+      "description": "Optional rel attribute for links"
+    },
+    "type": {
+      "type": "string",
+      "enum": ["button", "submit", "reset"],
+      "default": "button",
+      "description": "Button type"
+    },
+    "iconLeft": {
+      "type": "string",
+      "description": "Icon name to display on the left side of the label"
+    },
+    "iconRight": {
+      "type": "string",
+      "description": "Icon name to display on the right side of the label"
+    },
+    "ariaLabel": {
+      "type": "string",
+      "description": "Accessible name for icon-only buttons"
+    }
+  },
+  "editorScript": "file:./index.js",
+  "editorStyle": "file:./style-editor.css",
+  "style": "file:./style.css"
+}

package/dist/blocks/button/edit.js

@@ -0,0 +1,187 @@
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import {
+  PanelBody,
+  SelectControl,
+  TextControl,
+  ToggleControl
+} from '@wordpress/components';
+import { RichText } from '@wordpress/block-editor';
+import { buildButtonClass } from '../../utils/classBuilder.js';
+import './style-editor.css';
+
+export default function Edit({ attributes, setAttributes }) {
+  const {
+    label,
+    intent,
+    size,
+    behaviour,
+    state,
+    disabled,
+    href,
+    target,
+    rel,
+    type,
+    iconLeft,
+    iconRight,
+    ariaLabel
+  } = attributes;
+
+  const blockProps = useBlockProps({
+    className: 'tds-button-wrapper'
+  });
+
+  const buttonClass = buildButtonClass({
+    intent,
+    size,
+    behaviour,
+    state,
+    disabled
+  });
+
+  const Element = href ? 'a' : 'button';
+
+  return (
+    <>
+      <div {...blockProps}>
+        <Element
+          className={buttonClass}
+          disabled={!href && disabled}
+          href={href}
+          target={target}
+          rel={rel}
+          type={!href ? type : undefined}
+          aria-label={ariaLabel}
+        >
+          <span className="tds-button__label-container">
+            <span className="tds-button__label">{label}</span>
+          </span>
+        </Element>
+      </div>
+
+      <InspectorControls>
+        <PanelBody title="Button Settings">
+          <TextControl
+            label="Label"
+            value={label}
+            onChange={(value) => setAttributes({ label: value })}
+            help="The text displayed inside the button"
+          />
+
+          <SelectControl
+            label="Intent (Style)"
+            value={intent}
+            options={[
+              { label: 'Primary', value: 'primary' },
+              { label: 'Secondary', value: 'secondary' },
+              { label: 'Negative', value: 'negative' }
+            ]}
+            onChange={(value) => setAttributes({ intent: value })}
+          />
+
+          <SelectControl
+            label="Size"
+            value={size}
+            options={[
+              { label: 'Small', value: 'small' },
+              { label: 'Medium', value: 'medium' },
+              { label: 'Large', value: 'large' }
+            ]}
+            onChange={(value) => setAttributes({ size: value })}
+          />
+
+          <SelectControl
+            label="Behaviour"
+            value={behaviour}
+            options={[
+              { label: 'Hug Content', value: 'hug' },
+              { label: 'Full Width', value: 'full' }
+            ]}
+            onChange={(value) => setAttributes({ behaviour: value })}
+          />
+
+          <SelectControl
+            label="State"
+            value={state}
+            options={[
+              { label: 'Base', value: 'base' },
+              { label: 'Hover', value: 'hover' },
+              { label: 'Pressed', value: 'pressed' },
+              { label: 'Loading', value: 'loading' },
+              { label: 'Disabled', value: 'disabled' },
+              { label: 'Focus', value: 'focus' }
+            ]}
+            onChange={(value) => setAttributes({ state: value })}
+          />
+
+          <ToggleControl
+            label="Disabled"
+            checked={disabled}
+            onChange={(value) => setAttributes({ disabled: value })}
+          />
+        </PanelBody>
+
+        <PanelBody title="Link Settings" initialOpen={false}>
+          <TextControl
+            label="URL"
+            value={href}
+            onChange={(value) => setAttributes({ href: value })}
+            placeholder="https://example.com"
+          />
+
+          <SelectControl
+            label="Link Target"
+            value={target}
+            options={[
+              { label: 'Same Window', value: '_self' },
+              { label: 'New Window', value: '_blank' },
+              { label: 'Parent Window', value: '_parent' },
+              { label: 'Top Window', value: '_top' }
+            ]}
+            onChange={(value) => setAttributes({ target: value })}
+          />
+
+          <TextControl
+            label="Link Rel"
+            value={rel}
+            onChange={(value) => setAttributes({ rel: value })}
+            placeholder="noopener noreferrer"
+          />
+        </PanelBody>
+
+        <PanelBody title="Advanced" initialOpen={false}>
+          <SelectControl
+            label="Button Type"
+            value={type}
+            options={[
+              { label: 'Button', value: 'button' },
+              { label: 'Submit', value: 'submit' },
+              { label: 'Reset', value: 'reset' }
+            ]}
+            onChange={(value) => setAttributes({ type: value })}
+          />
+
+          <TextControl
+            label="Aria Label"
+            value={ariaLabel}
+            onChange={(value) => setAttributes({ ariaLabel: value })}
+            help="Accessible name for icon-only buttons"
+          />
+
+          <TextControl
+            label="Icon Left"
+            value={iconLeft}
+            onChange={(value) => setAttributes({ iconLeft: value })}
+            placeholder="Icon name"
+          />
+
+          <TextControl
+            label="Icon Right"
+            value={iconRight}
+            onChange={(value) => setAttributes({ iconRight: value })}
+            placeholder="Icon name"
+          />
+        </PanelBody>
+      </InspectorControls>
+    </>
+  );
+}

package/dist/blocks/button/index.js

@@ -0,0 +1,11 @@
+import { registerBlockType } from '@wordpress/blocks';
+import { useBlockProps } from '@wordpress/block-editor';
+import Edit from './edit.js';
+import Save from './save.js';
+import metadata from './block.json';
+
+registerBlockType(metadata.name, {
+  ...metadata,
+  edit: Edit,
+  save: Save
+});

package/dist/blocks/button/save.js

@@ -0,0 +1,52 @@
+import { useBlockProps } from '@wordpress/block-editor';
+import { buildButtonClass } from '../../utils/classBuilder.js';
+
+export default function Save({ attributes }) {
+  const {
+    label,
+    intent,
+    size,
+    behaviour,
+    state,
+    disabled,
+    href,
+    target,
+    rel,
+    type,
+    iconLeft,
+    iconRight,
+    ariaLabel
+  } = attributes;
+
+  const blockProps = useBlockProps.save({
+    className: 'tds-button-wrapper'
+  });
+
+  const buttonClass = buildButtonClass({
+    intent,
+    size,
+    behaviour,
+    state,
+    disabled
+  });
+
+  const Element = href ? 'a' : 'button';
+
+  return (
+    <div {...blockProps}>
+      <Element
+        className={buttonClass}
+        disabled={!href && disabled}
+        href={href}
+        target={target}
+        rel={rel}
+        type={!href ? type : undefined}
+        aria-label={ariaLabel}
+      >
+        <span className="tds-button__label-container">
+          <span className="tds-button__label">{label}</span>
+        </span>
+      </Element>
+    </div>
+  );
+}

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

@@ -0,0 +1,15 @@
+/* Button Block Editor Styles */
+
+.tds-button-wrapper {
+  margin-bottom: 1rem;
+}
+
+.tds-button-wrapper .tds-button {
+  /* Styles inherited from theme-scss package */
+  /* This file can be extended with editor-specific overrides */
+}
+
+/* Inspector Controls Styling */
+.block-editor .components-panel {
+  /* WordPress will handle component styling */
+}

package/dist/blocks/button/style.css

@@ -0,0 +1,37 @@
+/* Button Block Frontend Styles */
+
+.tds-button-wrapper {
+  display: inline-block;
+}
+
+.tds-button-wrapper .tds-button {
+  /* Styles inherited from @times-design-system/theme-scss package */
+  /* Import SCSS tokens and component styles as needed */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  transition: all 0.2s ease-in-out;
+}
+
+.tds-button-wrapper .tds-button--behaviour-full {
+  width: 100%;
+}
+
+.tds-button-wrapper .tds-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.tds-button__label-container {
+  display: inline;
+}
+
+.tds-button__label {
+  display: inline;
+}

package/dist/blocks/chip/block.json

@@ -0,0 +1,57 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "times/chip",
+  "title": "Chip",
+  "category": "common",
+  "description": "Small component for displaying labels, tags, or filter options",
+  "icon": "tag",
+  "supports": {
+    "html": false,
+    "spacing": {
+      "margin": true
+    }
+  },
+  "attributes": {
+    "content": {
+      "type": "string",
+      "default": ""
+    },
+    "intent": {
+      "type": "string",
+      "default": "secondary",
+      "enum": ["primary", "secondary", "negative"]
+    },
+    "size": {
+      "type": "string",
+      "default": "medium",
+      "enum": ["small", "medium", "large"]
+    },
+    "state": {
+      "type": "string",
+      "default": "base",
+      "enum": ["base", "hover", "pressed", "disabled"]
+    },
+    "channel": {
+      "type": "boolean",
+      "default": false
+    },
+    "toggle": {
+      "type": "boolean",
+      "default": false
+    },
+    "iconLeft": {
+      "type": "string",
+      "default": ""
+    },
+    "iconRight": {
+      "type": "string",
+      "default": ""
+    },
+    "ariaLabel": {
+      "type": "string",
+      "default": ""
+    }
+  },
+  "example": {}
+}

package/dist/blocks/chip/edit.js

@@ -0,0 +1,113 @@
+import {
+  useBlockProps,
+  RichText,
+  InspectorControls
+} from '@wordpress/block-editor';
+import {
+  PanelBody,
+  SelectControl,
+  TextControl,
+  ToggleControl
+} from '@wordpress/components';
+
+const edit = ({ attributes, setAttributes }) => {
+  const {
+    content,
+    intent,
+    size,
+    state,
+    channel,
+    toggle,
+    iconLeft,
+    iconRight,
+    ariaLabel
+  } = attributes;
+  const blockProps = useBlockProps();
+
+  const buildClass = () => {
+    const classes = ['tds-chip'];
+    classes.push(`tds-chip--intent-${intent}`);
+    classes.push(`tds-chip--size-${size}`);
+    classes.push(`tds-chip--state-${state}`);
+    if (channel) classes.push('tds-chip--channel');
+    if (toggle) classes.push('tds-chip--toggle');
+    return classes.join(' ');
+  };
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="Chip Settings">
+          <SelectControl
+            label="Intent"
+            value={intent}
+            options={[
+              { label: 'Primary', value: 'primary' },
+              { label: 'Secondary', value: 'secondary' },
+              { label: 'Negative', value: 'negative' }
+            ]}
+            onChange={(val) => setAttributes({ intent: val })}
+          />
+          <SelectControl
+            label="Size"
+            value={size}
+            options={[
+              { label: 'Small', value: 'small' },
+              { label: 'Medium', value: 'medium' },
+              { label: 'Large', value: 'large' }
+            ]}
+            onChange={(val) => setAttributes({ size: val })}
+          />
+          <SelectControl
+            label="State"
+            value={state}
+            options={[
+              { label: 'Base', value: 'base' },
+              { label: 'Hover', value: 'hover' },
+              { label: 'Pressed', value: 'pressed' },
+              { label: 'Disabled', value: 'disabled' }
+            ]}
+            onChange={(val) => setAttributes({ state: val })}
+          />
+          <ToggleControl
+            label="Channel"
+            checked={channel}
+            onChange={(val) => setAttributes({ channel: val })}
+          />
+          <ToggleControl
+            label="Toggle"
+            checked={toggle}
+            onChange={(val) => setAttributes({ toggle: val })}
+          />
+          <TextControl
+            label="Left Icon"
+            value={iconLeft}
+            onChange={(val) => setAttributes({ iconLeft: val })}
+          />
+          <TextControl
+            label="Right Icon"
+            value={iconRight}
+            onChange={(val) => setAttributes({ iconRight: val })}
+          />
+          <TextControl
+            label="Aria Label"
+            value={ariaLabel}
+            onChange={(val) => setAttributes({ ariaLabel: val })}
+          />
+        </PanelBody>
+      </InspectorControls>
+      <button {...blockProps} className={buildClass()} aria-label={ariaLabel}>
+        {iconLeft && <span className="tds-chip__icon-left">{iconLeft}</span>}
+        <RichText
+          value={content}
+          onChange={(val) => setAttributes({ content: val })}
+          placeholder="Chip text"
+          className="tds-chip__content"
+        />
+        {iconRight && <span className="tds-chip__icon-right">{iconRight}</span>}
+      </button>
+    </>
+  );
+};
+
+export default edit;

package/dist/blocks/chip/index.js

@@ -0,0 +1,10 @@
+import { registerBlockType } from '@wordpress/blocks';
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+registerBlockType(metadata.name, {
+  ...metadata,
+  edit,
+  save
+});