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

package/dist/blocks/chip/save.js

@@ -0,0 +1,36 @@
+import { useBlockProps, RichText } from '@wordpress/block-editor';
+
+const save = ({ attributes }) => {
+  const {
+    content,
+    intent,
+    size,
+    state,
+    channel,
+    toggle,
+    iconLeft,
+    iconRight,
+    ariaLabel
+  } = attributes;
+  const blockProps = useBlockProps.save();
+
+  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 (
+    <button {...blockProps} className={buildClass()} aria-label={ariaLabel}>
+      {iconLeft && <span className="tds-chip__icon-left">{iconLeft}</span>}
+      <RichText.Content value={content} className="tds-chip__content" />
+      {iconRight && <span className="tds-chip__icon-right">{iconRight}</span>}
+    </button>
+  );
+};
+
+export default save;

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

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

package/dist/blocks/chip/style.css

@@ -0,0 +1,48 @@
+/* Chip Block Styles */
+.tds-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-m);
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 16px;
+  background-color: var(--color-fill-secondary);
+  color: var(--color-text-primary);
+  font: var(--typography-body-small);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.tds-chip--intent-primary {
+  background-color: var(--color-fill-primary);
+  border-color: var(--color-border-primary);
+}
+
+.tds-chip--intent-negative {
+  background-color: var(--color-fill-negative);
+  border-color: var(--color-border-negative);
+}
+
+.tds-chip--size-small {
+  padding: var(--spacing-xs) var(--spacing-s);
+  font-size: 12px;
+}
+
+.tds-chip--size-large {
+  padding: var(--spacing-s) var(--spacing-m);
+  font-size: 16px;
+}
+
+.tds-chip--state-hover {
+  opacity: 0.8;
+}
+
+.tds-chip--state-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tds-chip__icon-left,
+.tds-chip__icon-right {
+  font-size: 14px;
+}

package/dist/blocks/divider/block.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "times/divider",
+  "title": "Divider",
+  "category": "common",
+  "description": "A horizontal line divider component",
+  "icon": "minus",
+  "supports": {
+    "html": false,
+    "spacing": {
+      "margin": true
+    },
+    "align": ["wide", "full"]
+  },
+  "attributes": {
+    "isDashed": {
+      "type": "boolean",
+      "default": false
+    },
+    "isVertical": {
+      "type": "boolean",
+      "default": false
+    },
+    "padding": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "example": {}
+}

package/dist/blocks/divider/edit.js

@@ -0,0 +1,42 @@
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+
+const edit = ({ attributes, setAttributes }) => {
+  const { isDashed, isVertical, padding } = attributes;
+  const blockProps = useBlockProps();
+
+  const buildDividerClass = () => {
+    const classes = ['tds-divider'];
+    if (isDashed) classes.push('tds-divider--dashed');
+    if (isVertical) classes.push('tds-divider--vertical');
+    if (padding) classes.push('tds-divider--padding');
+    return classes.join(' ');
+  };
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="Divider Settings">
+          <ToggleControl
+            label="Dashed"
+            checked={isDashed}
+            onChange={(val) => setAttributes({ isDashed: val })}
+          />
+          <ToggleControl
+            label="Vertical"
+            checked={isVertical}
+            onChange={(val) => setAttributes({ isVertical: val })}
+          />
+          <ToggleControl
+            label="Padding"
+            checked={padding}
+            onChange={(val) => setAttributes({ padding: val })}
+          />
+        </PanelBody>
+      </InspectorControls>
+      <div {...blockProps} className={buildDividerClass()} />
+    </>
+  );
+};
+
+export default edit;

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

@@ -0,0 +1,18 @@
+import { useBlockProps } from '@wordpress/block-editor';
+
+const save = ({ attributes }) => {
+  const { isDashed, isVertical, padding } = attributes;
+  const blockProps = useBlockProps.save();
+
+  const buildDividerClass = () => {
+    const classes = ['tds-divider'];
+    if (isDashed) classes.push('tds-divider--dashed');
+    if (isVertical) classes.push('tds-divider--vertical');
+    if (padding) classes.push('tds-divider--padding');
+    return classes.join(' ');
+  };
+
+  return <div {...blockProps} className={buildDividerClass()} />;
+};
+
+export default save;

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

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

package/dist/blocks/divider/style.css

@@ -0,0 +1,25 @@
+/* Divider Block Styles */
+.tds-divider {
+  height: 1px;
+  background-color: var(--color-border-secondary);
+  margin: var(--spacing-m) 0;
+}
+
+.tds-divider--dashed {
+  border-top: 1px dashed var(--color-border-secondary);
+  background-color: transparent;
+}
+
+.tds-divider--vertical {
+  width: 1px;
+  height: auto;
+  margin: 0 var(--spacing-m);
+}
+
+.tds-divider--padding {
+  margin: var(--spacing-xl) 0;
+}
+
+.tds-divider--vertical.tds-divider--padding {
+  margin: 0 var(--spacing-xl);
+}

package/dist/blocks/flag/block.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "times/flag",
+  "title": "Flag",
+  "category": "common",
+  "description": "Badge or status indicator component",
+  "icon": "flag",
+  "supports": {
+    "html": false,
+    "spacing": {
+      "margin": true
+    }
+  },
+  "attributes": {
+    "label": {
+      "type": "string",
+      "default": ""
+    },
+    "content": {
+      "type": "string",
+      "default": ""
+    },
+    "intent": {
+      "type": "string",
+      "default": "secondary",
+      "enum": ["primary", "secondary", "negative", "positive"]
+    },
+    "size": {
+      "type": "string",
+      "default": "medium",
+      "enum": ["small", "medium", "large"]
+    },
+    "iconLeft": {
+      "type": "string",
+      "default": ""
+    },
+    "iconRight": {
+      "type": "string",
+      "default": ""
+    },
+    "ariaLabel": {
+      "type": "string",
+      "default": ""
+    }
+  },
+  "example": {}
+}

package/dist/blocks/flag/edit.js

@@ -0,0 +1,82 @@
+import {
+  useBlockProps,
+  RichText,
+  InspectorControls
+} from '@wordpress/block-editor';
+import { PanelBody, SelectControl, TextControl } from '@wordpress/components';
+
+const edit = ({ attributes, setAttributes }) => {
+  const { label, content, intent, size, iconLeft, iconRight, ariaLabel } =
+    attributes;
+  const blockProps = useBlockProps();
+
+  const buildClass = () => {
+    const classes = ['tds-flag'];
+    classes.push(`tds-flag--intent-${intent}`);
+    classes.push(`tds-flag--size-${size}`);
+    return classes.join(' ');
+  };
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="Flag Settings">
+          <TextControl
+            label="Label"
+            value={label}
+            onChange={(val) => setAttributes({ label: val })}
+          />
+          <SelectControl
+            label="Intent"
+            value={intent}
+            options={[
+              { label: 'Primary', value: 'primary' },
+              { label: 'Secondary', value: 'secondary' },
+              { label: 'Negative', value: 'negative' },
+              { label: 'Positive', value: 'positive' }
+            ]}
+            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 })}
+          />
+          <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>
+      <div {...blockProps} className={buildClass()} aria-label={ariaLabel}>
+        {label && <div className="tds-flag__label">{label}</div>}
+        {iconLeft && <span className="tds-flag__icon-left">{iconLeft}</span>}
+        <RichText
+          value={content}
+          onChange={(val) => setAttributes({ content: val })}
+          placeholder="Flag content"
+          className="tds-flag__content"
+        />
+        {iconRight && <span className="tds-flag__icon-right">{iconRight}</span>}
+      </div>
+    </>
+  );
+};
+
+export default edit;

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

@@ -0,0 +1,25 @@
+import { useBlockProps, RichText } from '@wordpress/block-editor';
+
+const save = ({ attributes }) => {
+  const { label, content, intent, size, iconLeft, iconRight, ariaLabel } =
+    attributes;
+  const blockProps = useBlockProps.save();
+
+  const buildClass = () => {
+    const classes = ['tds-flag'];
+    classes.push(`tds-flag--intent-${intent}`);
+    classes.push(`tds-flag--size-${size}`);
+    return classes.join(' ');
+  };
+
+  return (
+    <div {...blockProps} className={buildClass()} aria-label={ariaLabel}>
+      {label && <div className="tds-flag__label">{label}</div>}
+      {iconLeft && <span className="tds-flag__icon-left">{iconLeft}</span>}
+      <RichText.Content value={content} className="tds-flag__content" />
+      {iconRight && <span className="tds-flag__icon-right">{iconRight}</span>}
+    </div>
+  );
+};
+
+export default save;

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

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

package/dist/blocks/flag/style.css

@@ -0,0 +1,45 @@
+/* Flag Block Styles */
+.tds-flag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-s);
+  padding: var(--spacing-s) var(--spacing-m);
+  border-radius: var(--border-radius-s);
+  background-color: var(--color-fill-secondary);
+  color: var(--color-text-primary);
+  font: var(--typography-body-small);
+}
+
+.tds-flag--intent-primary {
+  background-color: var(--color-fill-primary);
+  color: var(--color-text-on-primary);
+}
+
+.tds-flag--intent-negative {
+  background-color: var(--color-fill-negative);
+  color: var(--color-text-on-negative);
+}
+
+.tds-flag--intent-positive {
+  background-color: var(--color-fill-positive);
+  color: var(--color-text-on-positive);
+}
+
+.tds-flag--size-small {
+  padding: var(--spacing-xs) var(--spacing-s);
+  font-size: 12px;
+}
+
+.tds-flag--size-large {
+  padding: var(--spacing-m) var(--spacing-l);
+  font-size: 16px;
+}
+
+.tds-flag__label {
+  font-weight: 600;
+}
+
+.tds-flag__icon-left,
+.tds-flag__icon-right {
+  font-size: 14px;
+}

package/dist/blocks/icon-button/block.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "times/icon-button",
+  "title": "Icon Button",
+  "category": "common",
+  "description": "Button component displaying only an icon",
+  "icon": "button",
+  "supports": {
+    "html": false,
+    "spacing": {
+      "margin": true
+    }
+  },
+  "attributes": {
+    "iconName": {
+      "type": "string",
+      "default": ""
+    },
+    "round": {
+      "type": "boolean",
+      "default": false
+    },
+    "href": {
+      "type": "string",
+      "default": ""
+    },
+    "target": {
+      "type": "string",
+      "default": "_self",
+      "enum": ["_self", "_blank", "_parent", "_top"]
+    },
+    "rel": {
+      "type": "string",
+      "default": ""
+    },
+    "ariaLabel": {
+      "type": "string",
+      "default": ""
+    }
+  },
+  "example": {}
+}

package/dist/blocks/icon-button/edit.js

@@ -0,0 +1,82 @@
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import {
+  PanelBody,
+  TextControl,
+  SelectControl,
+  ToggleControl
+} from '@wordpress/components';
+
+const edit = ({ attributes, setAttributes }) => {
+  const { iconName, round, href, target, rel, ariaLabel } = attributes;
+  const blockProps = useBlockProps();
+
+  const buildClass = () => {
+    const classes = ['tds-icon-button'];
+    if (round) classes.push('tds-icon-button--round');
+    return classes.join(' ');
+  };
+
+  const Element = href ? 'a' : 'button';
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="Icon Button Settings">
+          <TextControl
+            label="Icon Name"
+            value={iconName}
+            onChange={(val) => setAttributes({ iconName: val })}
+            placeholder="e.g., arrow-right"
+          />
+          <ToggleControl
+            label="Round"
+            checked={round}
+            onChange={(val) => setAttributes({ round: val })}
+          />
+          <TextControl
+            label="URL (Leave empty for button)"
+            value={href}
+            onChange={(val) => setAttributes({ href: val })}
+          />
+          {href && (
+            <>
+              <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>
+      <Element
+        {...blockProps}
+        className={buildClass()}
+        href={href || undefined}
+        target={href ? target : undefined}
+        rel={href && rel ? rel : undefined}
+        aria-label={ariaLabel}
+      >
+        <span className="tds-icon-button__icon">{iconName}</span>
+      </Element>
+    </>
+  );
+};
+
+export default edit;

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

@@ -0,0 +1,29 @@
+import { useBlockProps } from '@wordpress/block-editor';
+
+const save = ({ attributes }) => {
+  const { iconName, round, href, target, rel, ariaLabel } = attributes;
+  const blockProps = useBlockProps.save();
+
+  const buildClass = () => {
+    const classes = ['tds-icon-button'];
+    if (round) classes.push('tds-icon-button--round');
+    return classes.join(' ');
+  };
+
+  const Element = href ? 'a' : 'button';
+
+  return (
+    <Element
+      {...blockProps}
+      className={buildClass()}
+      href={href || undefined}
+      target={href ? target : undefined}
+      rel={href && rel ? rel : undefined}
+      aria-label={ariaLabel}
+    >
+      <span className="tds-icon-button__icon">{iconName}</span>
+    </Element>
+  );
+};
+
+export default save;

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

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

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

@@ -0,0 +1,32 @@
+/* Icon Button Styles */
+.tds-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: var(--border-radius-s);
+  background-color: var(--color-fill-secondary);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  text-decoration: none;
+}
+
+.tds-icon-button:hover {
+  background-color: var(--color-fill-hover);
+}
+
+.tds-icon-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-fill-focus);
+}
+
+.tds-icon-button--round {
+  border-radius: 50%;
+}
+
+.tds-icon-button__icon {
+  font-size: 20px;
+}