@times-design-system/components-wordpress 0.1.1-alpha.831 → 0.7.2-alpha.2

package/dist/blocks/input/block.json

@@ -0,0 +1,47 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "times/input",
+  "title": "Input",
+  "category": "common",
+  "description": "Form input field component",
+  "icon": "text",
+  "supports": {
+    "html": false,
+    "spacing": {
+      "margin": true
+    }
+  },
+  "attributes": {
+    "label": {
+      "type": "string",
+      "default": ""
+    },
+    "placeholder": {
+      "type": "string",
+      "default": ""
+    },
+    "type": {
+      "type": "string",
+      "default": "text",
+      "enum": ["text", "email", "password", "number", "tel", "url"]
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "required": {
+      "type": "boolean",
+      "default": false
+    },
+    "name": {
+      "type": "string",
+      "default": ""
+    },
+    "id": {
+      "type": "string",
+      "default": ""
+    }
+  },
+  "example": {}
+}

package/dist/blocks/input/edit.js

@@ -0,0 +1,78 @@
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import {
+  PanelBody,
+  TextControl,
+  SelectControl,
+  ToggleControl
+} from '@wordpress/components';
+
+const edit = ({ attributes, setAttributes }) => {
+  const { label, placeholder, type, disabled, required, name, id } = attributes;
+  const blockProps = useBlockProps();
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="Input Settings">
+          <TextControl
+            label="Label"
+            value={label}
+            onChange={(val) => setAttributes({ label: val })}
+          />
+          <TextControl
+            label="Placeholder"
+            value={placeholder}
+            onChange={(val) => setAttributes({ placeholder: val })}
+          />
+          <SelectControl
+            label="Type"
+            value={type}
+            options={[
+              { label: 'Text', value: 'text' },
+              { label: 'Email', value: 'email' },
+              { label: 'Password', value: 'password' },
+              { label: 'Number', value: 'number' },
+              { label: 'Tel', value: 'tel' },
+              { label: 'URL', value: 'url' }
+            ]}
+            onChange={(val) => setAttributes({ type: val })}
+          />
+          <TextControl
+            label="Name"
+            value={name}
+            onChange={(val) => setAttributes({ name: val })}
+          />
+          <TextControl
+            label="ID"
+            value={id}
+            onChange={(val) => setAttributes({ id: val })}
+          />
+          <ToggleControl
+            label="Required"
+            checked={required}
+            onChange={(val) => setAttributes({ required: val })}
+          />
+          <ToggleControl
+            label="Disabled"
+            checked={disabled}
+            onChange={(val) => setAttributes({ disabled: val })}
+          />
+        </PanelBody>
+      </InspectorControls>
+      <div {...blockProps}>
+        {label && <label className="tds-input__label">{label}</label>}
+        <input
+          type={type}
+          placeholder={placeholder}
+          disabled={disabled}
+          required={required}
+          name={name}
+          id={id}
+          className="tds-input"
+        />
+      </div>
+    </>
+  );
+};
+
+export default edit;

package/dist/blocks/input/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/input/save.js

@@ -0,0 +1,27 @@
+import { useBlockProps } from '@wordpress/block-editor';
+
+const save = ({ attributes }) => {
+  const { label, placeholder, type, disabled, required, name, id } = attributes;
+  const blockProps = useBlockProps.save();
+
+  return (
+    <div {...blockProps}>
+      {label && (
+        <label htmlFor={id} className="tds-input__label">
+          {label}
+        </label>
+      )}
+      <input
+        type={type}
+        placeholder={placeholder}
+        disabled={disabled}
+        required={required}
+        name={name}
+        id={id}
+        className="tds-input"
+      />
+    </div>
+  );
+};
+
+export default save;

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

@@ -0,0 +1,8 @@
+/* Input Editor Styles */
+.wp-block-times-input {
+  margin: var(--spacing-m) 0;
+}
+
+.wp-block-times-input .tds-input {
+  opacity: 0.7;
+}

package/dist/blocks/input/style.css

@@ -0,0 +1,30 @@
+/* Input Block Styles */
+.tds-input {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-s) var(--spacing-m);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-s);
+  font: var(--typography-body-standard);
+  color: var(--color-text-primary);
+  background-color: var(--color-fill-primary);
+}
+
+.tds-input:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: 0 0 0 2px var(--color-fill-focus);
+}
+
+.tds-input:disabled {
+  background-color: var(--color-fill-disabled);
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+
+.tds-input__label {
+  display: block;
+  margin-bottom: var(--spacing-s);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}

package/dist/blocks/link/block.json

@@ -0,0 +1,71 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "times/link",
+  "title": "Link",
+  "category": "common",
+  "description": "Styled link component with variants and states",
+  "icon": "link",
+  "supports": {
+    "html": false,
+    "spacing": {
+      "margin": true
+    }
+  },
+  "attributes": {
+    "href": {
+      "type": "string",
+      "default": ""
+    },
+    "content": {
+      "type": "string",
+      "default": ""
+    },
+    "intent": {
+      "type": "string",
+      "default": "primary",
+      "enum": ["primary", "secondary", "negative"]
+    },
+    "sentiment": {
+      "type": "string",
+      "default": "neutral",
+      "enum": ["neutral", "positive", "negative"]
+    },
+    "size": {
+      "type": "string",
+      "default": "medium",
+      "enum": ["small", "medium", "large"]
+    },
+    "state": {
+      "type": "string",
+      "default": "base",
+      "enum": ["base", "hover", "visited", "focus", "disabled"]
+    },
+    "iconLeft": {
+      "type": "string",
+      "default": ""
+    },
+    "iconRight": {
+      "type": "string",
+      "default": ""
+    },
+    "inline": {
+      "type": "boolean",
+      "default": true
+    },
+    "ariaLabel": {
+      "type": "string",
+      "default": ""
+    },
+    "target": {
+      "type": "string",
+      "default": "_self",
+      "enum": ["_self", "_blank", "_parent", "_top"]
+    },
+    "rel": {
+      "type": "string",
+      "default": ""
+    }
+  },
+  "example": {}
+}

package/dist/blocks/link/edit.js

@@ -0,0 +1,151 @@
+import {
+  useBlockProps,
+  RichText,
+  InspectorControls
+} from '@wordpress/block-editor';
+import {
+  PanelBody,
+  TextControl,
+  SelectControl,
+  ToggleControl
+} from '@wordpress/components';
+
+const edit = ({ attributes, setAttributes }) => {
+  const {
+    href,
+    content,
+    intent,
+    sentiment,
+    size,
+    state,
+    iconLeft,
+    iconRight,
+    inline,
+    ariaLabel,
+    target,
+    rel
+  } = attributes;
+  const blockProps = useBlockProps();
+
+  const buildClass = () => {
+    const classes = ['tds-link'];
+    classes.push(`tds-link--intent-${intent}`);
+    classes.push(`tds-link--sentiment-${sentiment}`);
+    classes.push(`tds-link--size-${size}`);
+    classes.push(`tds-link--state-${state}`);
+    if (!inline) classes.push('tds-link--block');
+    return classes.join(' ');
+  };
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="Link Settings">
+          <TextControl
+            label="URL"
+            value={href}
+            onChange={(val) => setAttributes({ href: val })}
+            type="url"
+          />
+          <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="Sentiment"
+            value={sentiment}
+            options={[
+              { label: 'Neutral', value: 'neutral' },
+              { label: 'Positive', value: 'positive' },
+              { label: 'Negative', value: 'negative' }
+            ]}
+            onChange={(val) => setAttributes({ sentiment: 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: 'Visited', value: 'visited' },
+              { label: 'Focus', value: 'focus' },
+              { label: 'Disabled', value: 'disabled' }
+            ]}
+            onChange={(val) => setAttributes({ state: val })}
+          />
+          <TextControl
+            label="Left Icon"
+            value={iconLeft}
+            onChange={(val) => setAttributes({ iconLeft: val })}
+          />
+          <TextControl
+            label="Right Icon"
+            value={iconRight}
+            onChange={(val) => setAttributes({ iconRight: val })}
+          />
+          <ToggleControl
+            label="Inline"
+            checked={inline}
+            onChange={(val) => setAttributes({ inline: val })}
+          />
+          <SelectControl
+            label="Target"
+            value={target}
+            options={[
+              { label: 'Same window', value: '_self' },
+              { label: 'New window', value: '_blank' },
+              { label: 'Parent', value: '_parent' },
+              { label: 'Top', value: '_top' }
+            ]}
+            onChange={(val) => setAttributes({ target: val })}
+          />
+          <TextControl
+            label="Rel"
+            value={rel}
+            onChange={(val) => setAttributes({ rel: val })}
+          />
+          <TextControl
+            label="Aria Label"
+            value={ariaLabel}
+            onChange={(val) => setAttributes({ ariaLabel: val })}
+          />
+        </PanelBody>
+      </InspectorControls>
+      <a
+        {...blockProps}
+        href={href || '#'}
+        className={buildClass()}
+        aria-label={ariaLabel}
+        target={target}
+        rel={rel}
+      >
+        {iconLeft && <span className="tds-link__icon-left">{iconLeft}</span>}
+        <RichText
+          value={content}
+          onChange={(val) => setAttributes({ content: val })}
+          placeholder="Link text"
+          className="tds-link__content"
+        />
+        {iconRight && <span className="tds-link__icon-right">{iconRight}</span>}
+      </a>
+    </>
+  );
+};
+
+export default edit;

package/dist/blocks/link/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/link/save.js

@@ -0,0 +1,46 @@
+import { useBlockProps, RichText } from '@wordpress/block-editor';
+
+const save = ({ attributes }) => {
+  const {
+    href,
+    content,
+    intent,
+    sentiment,
+    size,
+    state,
+    iconLeft,
+    iconRight,
+    inline,
+    ariaLabel,
+    target,
+    rel
+  } = attributes;
+  const blockProps = useBlockProps.save();
+
+  const buildClass = () => {
+    const classes = ['tds-link'];
+    classes.push(`tds-link--intent-${intent}`);
+    classes.push(`tds-link--sentiment-${sentiment}`);
+    classes.push(`tds-link--size-${size}`);
+    classes.push(`tds-link--state-${state}`);
+    if (!inline) classes.push('tds-link--block');
+    return classes.join(' ');
+  };
+
+  return (
+    <a
+      {...blockProps}
+      href={href}
+      className={buildClass()}
+      aria-label={ariaLabel}
+      target={target !== '_self' ? target : undefined}
+      rel={rel || undefined}
+    >
+      {iconLeft && <span className="tds-link__icon-left">{iconLeft}</span>}
+      <RichText.Content value={content} className="tds-link__content" />
+      {iconRight && <span className="tds-link__icon-right">{iconRight}</span>}
+    </a>
+  );
+};
+
+export default save;

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

@@ -0,0 +1,5 @@
+/* Link Editor Styles */
+.wp-block-times-link {
+  display: inline-block;
+  margin: var(--spacing-s);
+}

package/dist/blocks/link/style.css

@@ -0,0 +1,66 @@
+/* Link Block Styles */
+.tds-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.tds-link--intent-primary {
+  color: var(--color-text-link-primary);
+}
+
+.tds-link--intent-secondary {
+  color: var(--color-text-link-secondary);
+}
+
+.tds-link--intent-negative {
+  color: var(--color-text-link-negative);
+}
+
+.tds-link--sentiment-positive {
+  font-weight: 600;
+}
+
+.tds-link--sentiment-negative {
+  font-weight: 400;
+  opacity: 0.8;
+}
+
+.tds-link--size-small {
+  font-size: 12px;
+}
+
+.tds-link--size-large {
+  font-size: 18px;
+}
+
+.tds-link--state-hover {
+  text-decoration: underline;
+}
+
+.tds-link--state-visited {
+  color: var(--color-text-link-visited);
+}
+
+.tds-link--state-focus {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+.tds-link--state-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tds-link--block {
+  display: flex;
+  width: 100%;
+}
+
+.tds-link__icon-left,
+.tds-link__icon-right {
+  font-size: 1em;
+}

package/dist/blocks/text/block.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "times/text",
+  "title": "Text",
+  "category": "common",
+  "description": "Typography component for displaying text with style variants",
+  "icon": "editor-paragraph",
+  "supports": {
+    "html": false,
+    "spacing": {
+      "margin": true,
+      "padding": false
+    }
+  },
+  "attributes": {
+    "as": {
+      "type": "string",
+      "default": "p",
+      "enum": ["p", "span", "h1", "h2", "h3", "h4", "h5"]
+    },
+    "typographyStyle": {
+      "type": "string",
+      "default": "body-standard"
+    },
+    "content": {
+      "type": "string",
+      "default": ""
+    }
+  },
+  "example": {}
+}

package/dist/blocks/text/edit.js

@@ -0,0 +1,56 @@
+import {
+  useBlockProps,
+  RichText,
+  InspectorControls
+} from '@wordpress/block-editor';
+import { PanelBody, SelectControl } from '@wordpress/components';
+
+const edit = ({ attributes, setAttributes }) => {
+  const { as, typographyStyle, content } = attributes;
+  const blockProps = useBlockProps();
+
+  const tagName = as || 'p';
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="Text Settings">
+          <SelectControl
+            label="Tag"
+            value={as}
+            options={[
+              { label: 'Paragraph', value: 'p' },
+              { label: 'Span', value: 'span' },
+              { label: 'Heading 1', value: 'h1' },
+              { label: 'Heading 2', value: 'h2' },
+              { label: 'Heading 3', value: 'h3' },
+              { label: 'Heading 4', value: 'h4' },
+              { label: 'Heading 5', value: 'h5' }
+            ]}
+            onChange={(val) => setAttributes({ as: val })}
+          />
+          <SelectControl
+            label="Typography Style"
+            value={typographyStyle}
+            options={[
+              { label: 'Body Standard', value: 'body-standard' },
+              { label: 'Body Small', value: 'body-small' },
+              { label: 'Headline', value: 'headline' }
+            ]}
+            onChange={(val) => setAttributes({ typographyStyle: val })}
+          />
+        </PanelBody>
+      </InspectorControls>
+      <RichText
+        {...blockProps}
+        tagName={tagName}
+        value={content}
+        onChange={(val) => setAttributes({ content: val })}
+        className={`tds-text tds-text--${typographyStyle}`}
+        placeholder="Enter text..."
+      />
+    </>
+  );
+};
+
+export default edit;

package/dist/blocks/text/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/text/save.js

@@ -0,0 +1,18 @@
+import { useBlockProps, RichText } from '@wordpress/block-editor';
+
+const save = ({ attributes }) => {
+  const { as, typographyStyle, content } = attributes;
+  const blockProps = useBlockProps.save();
+  const tagName = as || 'p';
+
+  return (
+    <RichText.Content
+      {...blockProps}
+      tagName={tagName}
+      value={content}
+      className={`tds-text tds-text--${typographyStyle}`}
+    />
+  );
+};
+
+export default save;

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

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