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

package/dist/blocks/text/style.css

@@ -0,0 +1,20 @@
+/* Text Block Styles */
+.tds-text {
+  margin: 0;
+  padding: 0;
+}
+
+.tds-text--body-standard {
+  font: var(--typography-body-standard);
+  color: var(--color-text-primary);
+}
+
+.tds-text--body-small {
+  font: var(--typography-body-small);
+  color: var(--color-text-secondary);
+}
+
+.tds-text--headline {
+  font: var(--typography-headline);
+  color: var(--color-text-primary);
+}

package/dist/blocks/toast/block.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "times/toast",
+  "title": "Toast",
+  "category": "common",
+  "description": "Notification toast component",
+  "icon": "bell",
+  "supports": {
+    "html": false,
+    "spacing": {
+      "margin": true
+    }
+  },
+  "attributes": {
+    "label": {
+      "type": "string",
+      "default": ""
+    },
+    "intent": {
+      "type": "string",
+      "default": "info",
+      "enum": ["info", "success", "warning", "error"]
+    },
+    "link": {
+      "type": "boolean",
+      "default": false
+    },
+    "linkLabel": {
+      "type": "string",
+      "default": ""
+    },
+    "timeout": {
+      "type": "number",
+      "default": 5000
+    }
+  },
+  "example": {}
+}

package/dist/blocks/toast/edit.js

@@ -0,0 +1,85 @@
+import {
+  useBlockProps,
+  RichText,
+  InspectorControls
+} from '@wordpress/block-editor';
+import {
+  PanelBody,
+  SelectControl,
+  TextControl,
+  ToggleControl,
+  NumberControl
+} from '@wordpress/components';
+
+const edit = ({ attributes, setAttributes }) => {
+  const { label, intent, link, linkLabel, timeout } = attributes;
+  const blockProps = useBlockProps();
+
+  const buildClass = () => {
+    const classes = ['tds-toast'];
+    classes.push(`tds-toast--intent-${intent}`);
+    return classes.join(' ');
+  };
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="Toast Settings">
+          <TextControl
+            label="Label"
+            value={label}
+            onChange={(val) => setAttributes({ label: val })}
+          />
+          <SelectControl
+            label="Intent"
+            value={intent}
+            options={[
+              { label: 'Info', value: 'info' },
+              { label: 'Success', value: 'success' },
+              { label: 'Warning', value: 'warning' },
+              { label: 'Error', value: 'error' }
+            ]}
+            onChange={(val) => setAttributes({ intent: val })}
+          />
+          <ToggleControl
+            label="Show Link"
+            checked={link}
+            onChange={(val) => setAttributes({ link: val })}
+          />
+          {link && (
+            <TextControl
+              label="Link Label"
+              value={linkLabel}
+              onChange={(val) => setAttributes({ linkLabel: val })}
+            />
+          )}
+          <NumberControl
+            label="Timeout (ms)"
+            value={timeout}
+            onChange={(val) => setAttributes({ timeout: val || 0 })}
+            min={0}
+            step={1000}
+          />
+        </PanelBody>
+      </InspectorControls>
+      <div
+        {...blockProps}
+        className={buildClass()}
+        role="status"
+        aria-live="polite"
+      >
+        <div className="tds-toast__content">
+          <RichText
+            value={label}
+            onChange={(val) => setAttributes({ label: val })}
+            placeholder="Toast message"
+            className="tds-toast__label"
+          />
+        </div>
+        {link && <button className="tds-toast__link">{linkLabel}</button>}
+      </div>
+    </>
+  );
+};
+
+export default edit;

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

@@ -0,0 +1,29 @@
+import { useBlockProps, RichText } from '@wordpress/block-editor';
+
+const save = ({ attributes }) => {
+  const { label, intent, link, linkLabel, timeout } = attributes;
+  const blockProps = useBlockProps.save();
+
+  const buildClass = () => {
+    const classes = ['tds-toast'];
+    classes.push(`tds-toast--intent-${intent}`);
+    return classes.join(' ');
+  };
+
+  return (
+    <div
+      {...blockProps}
+      className={buildClass()}
+      role="status"
+      aria-live="polite"
+      data-timeout={timeout}
+    >
+      <div className="tds-toast__content">
+        <RichText.Content value={label} className="tds-toast__label" />
+      </div>
+      {link && <button className="tds-toast__link">{linkLabel}</button>}
+    </div>
+  );
+};
+
+export default save;

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

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

package/dist/blocks/toast/style.css

@@ -0,0 +1,51 @@
+/* Toast Block Styles */
+.tds-toast {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-m);
+  padding: var(--spacing-m);
+  border-radius: var(--border-radius-s);
+  background-color: var(--color-fill-secondary);
+  color: var(--color-text-primary);
+  font: var(--typography-body-standard);
+  margin-bottom: var(--spacing-m);
+}
+
+.tds-toast--intent-success {
+  background-color: var(--color-fill-positive);
+  color: var(--color-text-on-positive);
+}
+
+.tds-toast--intent-warning {
+  background-color: var(--color-fill-warning);
+  color: var(--color-text-on-warning);
+}
+
+.tds-toast--intent-error {
+  background-color: var(--color-fill-negative);
+  color: var(--color-text-on-negative);
+}
+
+.tds-toast__content {
+  flex: 1;
+}
+
+.tds-toast__label {
+  margin: 0;
+}
+
+.tds-toast__link {
+  padding: var(--spacing-xs) var(--spacing-s);
+  border: none;
+  border-radius: var(--border-radius-xs);
+  background-color: rgba(255, 255, 255, 0.1);
+  color: inherit;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  white-space: nowrap;
+}
+
+.tds-toast__link:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}