gantri-components 2.252.1 → 2.253.0

package/dist/components/toggle/toggle.types.d.ts

@@ -12,6 +12,14 @@ export interface ToggleProps extends Pick<DetailedHTMLProps<InputHTMLAttributes<
     labelVariant?: TextVariant;
     name?: string;
     onSelected?: (value: boolean) => void;
+    /**
+     * Escape hatch for end-to-end tests when no other prop distinguishes two
+     * sibling Toggles. When provided, the root receives
+     * `data-testid={testId}` in addition to the auto-emitted
+     * `data-component="toggle"`, `data-name`, `data-tx`, and `data-label`
+     * attributes. Rarely needed.
+     */
+    testId?: string;
     value?: boolean;
     variant?: ToggleVariant;
 }

package/dist/components/tooltip/tooltip.types.d.ts

@@ -13,6 +13,15 @@ export type TooltipProps = Partial<TooltipDefaultProps> & Pick<OverlayProps, 'on
     descriptionHtmlText?: string;
     descriptionTx?: string;
     hideOnNonDesktops?: boolean;
+    /**
+     * Escape hatch for end-to-end tests when no other prop distinguishes two
+     * sibling instances. When provided, the root receives
+     * `data-testid={testId}` in addition to the auto-emitted `data-component`
+     * and projected `data-*` attributes. Rarely needed — the auto-emitted
+     * attributes (`data-component`, `data-name`, `data-tx`, `data-label`, etc.)
+     * are usually sufficient. See `helpers/data-component`.
+     */
+    testId?: string;
     title?: string;
     titleHtmlText?: string;
     titleTx?: string;

package/dist/components/typography/typography.types.d.ts

@@ -27,6 +27,14 @@ export interface TypographyProps extends Partial<TypographyDefaultProps>, AriaAt
     minWidth?: ResolutionAwareProp<string>;
     onClick?: (event: any) => void;
     style?: CSSProperties;
+    /**
+     * Escape hatch for end-to-end tests when no other prop distinguishes two
+     * sibling instances. When provided, the root receives
+     * `data-testid={testId}` in addition to the auto-emitted `data-component`
+     * and projected `data-*` attributes. Rarely needed — the auto-emitted
+     * attributes are usually sufficient. See `helpers/data-component`.
+     */
+    testId?: string;
     text?: string | number;
     textShadow?: Property.TextShadow;
     textStyle?: TextStyle;

package/dist/components/video/video.types.d.ts

@@ -26,8 +26,22 @@ export interface VideoProps extends Partial<VideoDefaultProps>, Omit<VideoHTMLAt
     onOpenFullscreen?: (videoUrl: string) => void;
     src: ResolutionAwareProp<string>;
     style?: CSSProperties;
+    /**
+     * Escape hatch for end-to-end tests when no other prop distinguishes two
+     * sibling instances. When provided, the root receives
+     * `data-testid={testId}` in addition to the auto-emitted `data-component`
+     * and projected `data-*` attributes. Rarely needed — the auto-emitted
+     * attributes are usually sufficient. See `helpers/data-component`.
+     */
+    testId?: string;
     transformations?: VideoTransformations;
     width?: Optional<ResolutionAwareProp<ImageDimension>>;
+    /**
+     * Optional alt-like description for the video. Only used to project
+     * `data-alt` for end-to-end tests; the underlying `<video>` element does
+     * not natively accept `alt`.
+     */
+    alt?: string;
 }
 export interface VideoTransformations {
     aspectRatio?: Optional<ResolutionAwareProp<AspectRatio>>;

package/dist/helpers/data-component/__tests__/data-component.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/helpers/data-component/data-component.d.ts

@@ -0,0 +1,43 @@
+import { DataComponentAttrs, DataComponentProjections } from './data-component.types';
+/**
+ * Slugify free-form text for use as a `data-*` value selector in end-to-end
+ * tests. Returns undefined when the input is missing, empty, all
+ * non-alphanumeric, or longer than 60 characters (in which case the slug
+ * would be unwieldy and is intentionally omitted).
+ *
+ * Examples:
+ *   slug('Action only')              → 'action-only'
+ *   slug('Add to cart')              → 'add-to-cart'
+ *   slug('Bestsellers — limited')    → 'bestsellers-limited'
+ *   slug('  ')                       → undefined
+ *   slug('A'.repeat(80))             → undefined (too long)
+ *   slug(undefined)                  → undefined
+ */
+export declare const slug: (input?: string | null) => string | undefined;
+/**
+ * Build the set of `data-*` attributes a gantri-components component emits
+ * on its root element so end-to-end tests can target it without the
+ * consumer adding any new props.
+ *
+ * - The root always receives `data-component={componentName}`.
+ * - Each entry in `projections` becomes `data-<key>="<value>"` when the
+ *   value is non-null and non-empty. Null / undefined / empty values are
+ *   skipped, so consumers who pass partial props get partial attributes
+ *   without any boilerplate.
+ * - An optional `testId` becomes `data-testid="..."` — kept as an escape
+ *   hatch for the rare case when no projected prop distinguishes two
+ *   sibling instances.
+ *
+ * Example (Toggle):
+ *   <StyledToggleContainer
+ *     {...dataComponentProps('toggle', {
+ *       name,
+ *       tx: labelTx,
+ *       label: slug(labelText),
+ *     }, testId)}
+ *   />
+ *
+ *   <Toggle name="active-only" labelText="Action only" />
+ *   // renders: data-component="toggle" data-name="active-only" data-label="action-only"
+ */
+export declare const dataComponentProps: (componentName: string, projections?: DataComponentProjections, testId?: string) => DataComponentAttrs;

package/dist/helpers/data-component/data-component.types.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Map of `data-<key>` attributes to emit on a component's root.
+ * The library helper filters out null / undefined / empty values automatically.
+ */
+export type DataComponentProjections = Record<string, string | number | null | undefined>;
+/**
+ * The strongly-typed return of `dataComponentProps`. Each key is `data-<x>`.
+ * Spread directly onto a JSX element: `<div {...dataComponentProps(...)} />`.
+ */
+export type DataComponentAttrs = Record<`data-${string}`, string>;

package/dist/helpers/data-component/index.d.ts

@@ -0,0 +1,2 @@
+export * from './data-component';
+export * from './data-component.types';

package/dist/helpers/index.d.ts

@@ -2,3 +2,4 @@ export * from './layout.helpers';
 export * from './get-file-url';
 export * from './get-folder-structure';
 export * from './generate-skus-functions';
+export * from './data-component';