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

package/src/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);
+}

package/src/index.js

@@ -1,13 +1,16 @@
-export * from './Button/Button.js';
-export * from './AdContainer/AdContainer.js';
-export * from './CommentsDisabled/CommentsDisabled.js';
-export * from './Text/Text.js';
-export * from './Input/Input.tsx';
-export * from './Divider/Divider.tsx';
-export * from './Link/Link.tsx';
+/**
+ * WordPress Blocks Entry Point
+ * Registers all Times Design System blocks with Gutenberg
+ */
 
-// ARTICLE COMPONENTS
-export * from './Article/UpNextArticles/UpNextArticles.js';
-
-// UTILS
-export * from './utils/hooks.js';
+// Register blocks
+import './blocks/button/index.js';
+import './blocks/divider/index.js';
+import './blocks/text/index.js';
+import './blocks/input/index.js';
+import './blocks/icon-button/index.js';
+import './blocks/chip/index.js';
+import './blocks/flag/index.js';
+import './blocks/toast/index.js';
+import './blocks/link/index.js';
+import './blocks/ad-container/index.js';

package/src/utils/classBuilder.js

@@ -0,0 +1,53 @@
+/**
+ * Build className string for Button component based on attributes.
+ * Maps component properties to TDS (Times Design System) SCSS classes.
+ *
+ * @param {Object} options - Button configuration options
+ * @param {string} options.intent - Visual style variant (primary, secondary, negative)
+ * @param {string} options.size - Button size (small, medium, large)
+ * @param {string} options.behaviour - Width behaviour (hug, full)
+ * @param {string} options.state - Interaction state (base, hover, pressed, loading, disabled, focus)
+ * @param {boolean} options.disabled - Whether button is disabled
+ * @returns {string} Complete className string
+ */
+export function buildButtonClass({
+  intent = 'primary',
+  size = 'large',
+  behaviour = 'hug',
+  state = 'base',
+  disabled = false
+}) {
+  const classes = [
+    'tds-button',
+    `tds-button--intent-${intent}`,
+    `tds-button--size-${size}`,
+    `tds-button--behaviour-${behaviour}`,
+    `tds-button--state-${state}`
+  ];
+
+  if (disabled) {
+    classes.push('tds-button--disabled');
+  }
+
+  return classes.join(' ');
+}
+
+/**
+ * Generic class builder utility for consistent naming conventions.
+ * Creates BEM-style className strings.
+ *
+ * @param {string} blockName - Base block name (e.g., 'tds-button')
+ * @param {Object} modifiers - Object with modifier names as keys
+ * @returns {string} Complete className string
+ */
+export function buildClassName(blockName, modifiers = {}) {
+  const classes = [blockName];
+
+  Object.entries(modifiers).forEach(([key, value]) => {
+    if (value && value !== '') {
+      classes.push(`${blockName}--${key}-${value}`);
+    }
+  });
+
+  return classes.join(' ');
+}

package/tsconfig.json

@@ -25,9 +25,9 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "es2015" /* Specify what module code is generated. */,
+    "module": "node16" /* Specify what module code is generated. */,
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
+    "moduleResolution": "node16" /* Specify how TypeScript looks up a file from a given module specifier. */,
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
@@ -44,7 +44,7 @@
     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
 
     /* JavaScript Support */
-    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    "allowJs": true /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
     // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
 
@@ -57,7 +57,7 @@
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
     // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
     // "removeComments": true,                           /* Disable emitting comments. */
-    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    "noEmit": true /* Disable emitting files from a compilation. */,
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
     // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */

package/dist/AdContainer/AdContainer.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import './styles.css';
-interface AdContainerProps {
-    type?: 'header' | 'inline';
-    slotID?: string;
-}
-/** Primary AdContainer UI component for user interaction */
-export declare const AdContainer: React.FC<AdContainerProps>;
-export {};

package/dist/Article/ArticleMetaContainer/ArticleMetaContainer.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import './styles.css';
-interface ArticleMetaProps {
-    children?: React.ReactNode;
-}
-/** Primary ArticleMeta UI component for user interaction */
-export declare const ArticleMetaContainer: React.FC<ArticleMetaProps>;
-export {};

package/dist/Article/UpNextArticles/UpNextArticles.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import './styles.css';
-interface UpNextArticlesProps {
-    upNextArticles: {
-        url: string;
-        headline: string;
-        duration?: string;
-        thumbnail: string;
-    }[];
-}
-/** Primary UpNextArticles UI component for user interaction */
-export declare const UpNextArticles: React.FC<UpNextArticlesProps>;
-export {};

package/dist/Button/Button.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import './styles.css';
-interface ButtonProps {
-    /** Is this the principal call to action on the page? */
-    primary?: boolean;
-    /** How large should the button be? */
-    size?: 'small' | 'medium' | 'large';
-    /** Button contents */
-    label: string;
-    /** Optional click handler */
-    onClick?: () => void;
-}
-/** Primary UI component for user interaction */
-export declare const Button: React.FC<ButtonProps>;
-export {};

package/dist/CommentsDisabled/CommentsDisabled.d.ts

@@ -1,10 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-import './styles.css';
-export interface CommentsDisabledProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
-    heading?: string;
-    contentText?: React.ReactNode;
-    guidelinesUrl?: string;
-    guidelinesLinkText?: string;
-    className?: string;
-}
-export declare const CommentsDisabled: React.ForwardRefExoticComponent<CommentsDisabledProps & React.RefAttributes<HTMLDivElement>>;

package/dist/CommentsDisabled/CommentsDisabled.stories.d.ts

@@ -1,44 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { CommentsDisabled } from './CommentsDisabled';
-/**
- * CommentsDisabled Component Storybook Stories
- * Showcases the component in various states and configurations
- */
-declare const meta: Meta<typeof CommentsDisabled>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-/**
- * Default
- * The default state of the CommentsDisabled component with all default text
- */
-export declare const Default: Story;
-/**
- * With Custom Heading
- * Demonstrates customizing the heading text
- */
-export declare const CustomHeading: Story;
-/**
- * With Custom Content
- * Demonstrates customizing the content text
- */
-export declare const CustomContent: Story;
-/**
- * With External Link
- * Demonstrates opening the guidelines in a new window
- */
-export declare const ExternalLink: Story;
-/**
- * Minimal
- * Minimal version with shorter content
- */
-export declare const Minimal: Story;
-/**
- * All Variations
- * Showcases different variations side-by-side
- */
-export declare const AllVariations: Story;
-/**
- * Interactive
- * Interactive story showing all customizable props
- */
-export declare const Interactive: Story;

package/dist/CommentsDisabled/index.d.ts

@@ -1,2 +0,0 @@
-export { CommentsDisabled } from './CommentsDisabled';
-export type { CommentsDisabledProps } from './CommentsDisabled';

package/dist/Divider/Divider.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import './styles.css';
-interface DividerProps {
-    /** Whether the divider should span full width of its container */
-    fullWidth?: boolean;
-    /** Orientation of the divider */
-    orientation?: 'horizontal' | 'vertical';
-    /** Custom spacing/margin */
-    spacing?: 'small' | 'medium' | 'large';
-    /** CSS class for additional styling */
-    className?: string;
-}
-/** Divider component that uses design tokens for styling */
-export declare const Divider: React.FC<DividerProps>;
-export {};

package/dist/Input/Input.d.ts

@@ -1,25 +0,0 @@
-import React from 'react';
-import './styles.css';
-interface InputProps {
-    /** Label text for the input */
-    label?: string;
-    /** Input placeholder text */
-    placeholder?: string;
-    /** Input type */
-    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
-    /** Input value */
-    value?: string;
-    /** Change handler */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Required state */
-    required?: boolean;
-    /** Input name attribute */
-    name?: string;
-    /** Input id attribute */
-    id?: string;
-}
-/** Input component with label using design tokens */
-export declare const Input: React.FC<InputProps>;
-export {};

package/dist/Link/Link.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import './styles.css';
-interface LinkProps {
-    href: string;
-    variant?: 'primary' | 'secondary' | 'danger';
-    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
-    target?: '_self' | '_blank' | '_parent' | '_top';
-    rel?: string;
-    className?: string;
-    classes?: string;
-    styles?: {
-        [key: string]: string;
-    };
-    children?: React.ReactNode;
-}
-/** Link UI component for navigation and interactive linking */
-export declare const Link: React.FC<LinkProps>;
-export {};

package/dist/Text/Text.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import './styles.css';
-import './typographyStyles.css';
-interface TextProps {
-    as?: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
-    typographyStyle?: string;
-    classes?: string;
-    styles?: {
-        [key: string]: string;
-    };
-    children?: React.ReactNode;
-}
-export declare const Text: React.FC<TextProps>;
-export {};