@wix/editor-react-components 1.2632.0 → 1.2634.0

package/dist/site/components/HeadingTextBlock/manifest.js

@@ -0,0 +1,251 @@
+import { C as CSS_PROPERTIES, L as LAYOUT, a as ACTIONS, b as DISPLAY_GROUPS, D as DATA, A as Archetype, E as ELEMENTS } from "../chunks/chunk-ZHYIPFVN.js";
+import { g as getSelector } from "../chunks/manifest.js";
+import { p as presets, D as DisplayNames, d as defaultValues, m as manifestClasses } from "../chunks/constants33.js";
+const ORIENTATION_PANEL_ID = "2a2f4252-217b-413a-8717-a1d0e1cc2470";
+const TEXT_CSS_PROPERTIES = {
+  display: {
+    display: {
+      displayValues: [
+        CSS_PROPERTIES.DISPLAY_VALUE.none,
+        CSS_PROPERTIES.DISPLAY_VALUE.block
+      ]
+    }
+  },
+  font: {},
+  color: {},
+  lineHeight: {},
+  letterSpacing: {},
+  textAlign: {},
+  textTransform: {},
+  textDecorationLine: {},
+  textShadow: {}
+};
+const createInlineTextPart = (selector, displayName) => ({
+  elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+  inlineElement: {
+    selector: getSelector(selector),
+    displayName,
+    behaviors: {
+      removable: true,
+      selectable: false
+    },
+    cssProperties: TEXT_CSS_PROPERTIES
+  }
+});
+const manifest = {
+  id: "83aedbba-6ee5-4358-8f2b-02683c4e3537",
+  type: "wixEditorElements.HeadingTextBlock",
+  description: "Semantic heading tag wrapping heading, title, subtitle, and caption in one tag",
+  editorElement: {
+    selector: getSelector(manifestClasses.root),
+    displayName: DisplayNames.root.elementDisplayName,
+    archetype: Archetype.Text,
+    data: {
+      direction: {
+        dataType: DATA.DATA_TYPE.direction
+      },
+      headingTag: {
+        dataType: DATA.DATA_TYPE.textEnum,
+        displayName: DisplayNames.root.data.headingTag.displayName,
+        [DATA.DATA_TYPE.textEnum]: {
+          options: [
+            {
+              value: "h1",
+              displayName: DisplayNames.root.data.headingTag.options.h1
+            },
+            {
+              value: "h2",
+              displayName: DisplayNames.root.data.headingTag.options.h2
+            },
+            {
+              value: "h3",
+              displayName: DisplayNames.root.data.headingTag.options.h3
+            },
+            {
+              value: "h4",
+              displayName: DisplayNames.root.data.headingTag.options.h4
+            },
+            {
+              value: "h5",
+              displayName: DisplayNames.root.data.headingTag.options.h5
+            },
+            {
+              value: "h6",
+              displayName: DisplayNames.root.data.headingTag.options.h6
+            }
+          ]
+        },
+        defaultValue: defaultValues.headingTag
+      },
+      heading: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.heading,
+        defaultValue: defaultValues.heading
+      },
+      title: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.title,
+        defaultValue: defaultValues.title
+      },
+      subtitle: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.subtitle,
+        defaultValue: defaultValues.subtitle
+      },
+      caption: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.caption,
+        defaultValue: defaultValues.caption
+      }
+    },
+    elements: {
+      headingTextBlockHeading: createInlineTextPart(
+        manifestClasses.heading,
+        DisplayNames.root.elements.heading
+      ),
+      headingTextBlockTitle: createInlineTextPart(
+        manifestClasses.title,
+        DisplayNames.root.elements.title
+      ),
+      headingTextBlockSubtitle: createInlineTextPart(
+        manifestClasses.subtitle,
+        DisplayNames.root.elements.subtitle
+      ),
+      headingTextBlockCaption: createInlineTextPart(
+        manifestClasses.caption,
+        DisplayNames.root.elements.caption
+      )
+    },
+    cssCustomProperties: {
+      "parts-row-gap": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.rowGap,
+        defaultValue: defaultValues.partsRowGap
+      },
+      "parts-column-gap": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.columnGap,
+        defaultValue: defaultValues.partsColumnGap
+      }
+    },
+    displayGroups: {
+      partsSpacing: {
+        displayName: DisplayNames.root.displayGroups.partsSpacing,
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.gap,
+        gap: {
+          rowGap: "parts-row-gap",
+          columnGap: "parts-column-gap"
+        }
+      },
+      partsOrder: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.elements,
+        elements: {
+          items: [
+            "headingTextBlockHeading",
+            "headingTextBlockTitle",
+            "headingTextBlockSubtitle",
+            "headingTextBlockCaption"
+          ]
+        }
+      },
+      textFieldsOrder: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.data,
+        data: {
+          items: ["heading", "title", "subtitle", "caption"]
+        }
+      }
+    },
+    layout: {
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.vertical
+    },
+    presets: {
+      [presets.vertical]: {
+        presetCssUrl: `./site/components/HeadingTextBlock/presets/${presets.vertical}.css`,
+        displayName: DisplayNames.root.presets.vertical,
+        presetDefaults: {
+          layout: {
+            resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
+            contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.vertical
+          },
+          displayFilters: {
+            cssCustomProperties: {
+              hide: ["parts-column-gap"]
+            }
+          }
+        },
+        initialSize: {
+          width: {
+            sizingType: LAYOUT.SIZING_TYPE.pixels,
+            pixels: 400
+          },
+          height: {
+            sizingType: LAYOUT.SIZING_TYPE.content
+          }
+        }
+      },
+      [presets.horizontal]: {
+        presetCssUrl: `./site/components/HeadingTextBlock/presets/${presets.horizontal}.css`,
+        displayName: DisplayNames.root.presets.horizontal,
+        presetDefaults: {
+          layout: {
+            resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontal,
+            contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.horizontalAndVertical
+          },
+          displayFilters: {
+            cssCustomProperties: {
+              hide: ["parts-row-gap"]
+            }
+          }
+        },
+        initialSize: {
+          width: {
+            sizingType: LAYOUT.SIZING_TYPE.pixels,
+            pixels: 400
+          },
+          height: {
+            sizingType: LAYOUT.SIZING_TYPE.content
+          }
+        }
+      }
+    },
+    customActions: {
+      layout: {
+        displayName: DisplayNames.root.customActions.layout,
+        execution: {
+          actionType: ACTIONS.ACTION_TYPE.panel,
+          panel: {
+            panelType: ACTIONS.PANEL_TYPE.panelId,
+            panelId: ORIENTATION_PANEL_ID
+          }
+        }
+      }
+    }
+  },
+  installation: {
+    presets: {
+      large: presets.vertical,
+      small: presets.vertical
+    },
+    initialSize: {
+      width: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 400
+      },
+      height: {
+        sizingType: LAYOUT.SIZING_TYPE.content
+      }
+    }
+  },
+  resources: {
+    client: {
+      componentUrl: "./site/components/HeadingTextBlock/component.tsx",
+      moduleSpecifier: "@wix/editor-react-components/HeadingTextBlock"
+    }
+  },
+  moduleConfiguration: {
+    package: { name: "@wix/editor-react-components", version: "^1.0.0" },
+    component: { path: "site/components/HeadingTextBlock" }
+  }
+};
+export {
+  manifest as default
+};

package/dist/site/components/HeadingTextBlock/panels/orientation/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const dataHooks: {
+    contentWrapper: string;
+    layoutSelector: string;
+};

package/dist/site/components/HeadingTextBlock/panels/orientation/extension.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    type: string;
+};
+export default _default;

package/dist/site/components/HeadingTextBlock/panels/orientation/panel.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/site/components/HeadingTextBlock/panels/orientation/test-utils.d.ts

@@ -0,0 +1,5 @@
+import { presets } from '../../constants';
+import { MockElementConfig } from '../../../../../test-utils';
+type Preset = typeof presets.horizontal | typeof presets.vertical;
+export declare const createElementMock: (preset: Preset) => MockElementConfig;
+export {};

package/dist/site/components/HeadingTextBlock/panels/orientation/translations/consts.d.ts

@@ -0,0 +1,6 @@
+export declare const TranslationKeys: {
+    readonly layoutRowOption: "custompanel_headingtextblock_layout_panel_row_option";
+    readonly layoutStackedOption: "custompanel_headingtextblock_layout_panel_stacked_option";
+};
+export type Translations = Record<keyof typeof TranslationKeys, string>;
+export declare const DefaultTranslations: Translations;

package/dist/site/components/HeadingTextBlock/types.d.ts

@@ -0,0 +1,29 @@
+import { Direction } from '@wix/editor-react-types';
+export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type HeadingTextBlockProps = {
+    id: string;
+    className?: string;
+    direction?: Direction;
+    headingTag?: HeadingTag;
+    heading?: string;
+    title?: string;
+    subtitle?: string;
+    caption?: string;
+    elementProps?: {
+        heading?: {
+            className?: string;
+        };
+        title?: {
+            className?: string;
+        };
+        subtitle?: {
+            className?: string;
+        };
+        caption?: {
+            className?: string;
+        };
+    };
+    wix?: {
+        presetsWrapperProps?: Record<string, unknown>;
+    };
+};

package/dist/site/components/chunks/constants33.js

@@ -1,15 +1,64 @@
-const ARIA_LABEL_NAMESPACE = "ariaLabels";
+const presets = {
+  horizontal: "horizontal",
+  vertical: "vertical"
+};
+const manifestClasses = {
+  root: "heading-text-block",
+  heading: "heading-text-block-heading",
+  title: "heading-text-block-title",
+  subtitle: "heading-text-block-subtitle",
+  caption: "heading-text-block-caption"
+};
+const defaultValues = {
+  headingTag: "h1",
+  heading: "",
+  title: "",
+  subtitle: "",
+  caption: "",
+  partsRowGap: "12px",
+  partsColumnGap: "12px"
+};
 const DisplayNames = {
-  data: {
-    onClick: "On Click",
-    onDblClick: "On Double Click",
-    onMouseIn: "On Mouse In",
-    onMouseOut: "On Mouse Out",
-    onFocus: "On Focus",
-    onBlur: "On Blur"
+  root: {
+    elementDisplayName: "Heading Text Block",
+    data: {
+      headingTag: {
+        displayName: "Heading Tag",
+        options: {
+          h1: "H1",
+          h2: "H2",
+          h3: "H3",
+          h4: "H4",
+          h5: "H5",
+          h6: "H6"
+        }
+      },
+      heading: "Heading",
+      title: "Title",
+      subtitle: "Subtitle",
+      caption: "Caption"
+    },
+    elements: {
+      heading: "Heading",
+      title: "Title",
+      subtitle: "Subtitle",
+      caption: "Caption"
+    },
+    displayGroups: {
+      partsSpacing: "Parts Spacing"
+    },
+    presets: {
+      horizontal: "Row",
+      vertical: "Stacked"
+    },
+    customActions: {
+      layout: "Layout"
+    }
   }
 };
 export {
-  ARIA_LABEL_NAMESPACE as A,
-  DisplayNames as D
+  DisplayNames as D,
+  defaultValues as d,
+  manifestClasses as m,
+  presets as p
 };

package/dist/site/components/chunks/constants34.js

@@ -1,211 +1,15 @@
-const DesignStates = {
-  root: {
-    hover: { displayName: "Hover", className: "dropdown--hover" },
-    disabled: { displayName: "Disabled", className: "dropdown--disabled" }
-  },
-  input: {
-    hover: { displayName: "Hover", className: "dropdown__input--hover" },
-    focus: { displayName: "Focus", className: "dropdown__input--focus" },
-    disabled: {
-      displayName: "Disabled",
-      className: "dropdown__input--disabled"
-    }
-  },
-  trigger: {
-    hover: { displayName: "Hover", className: "dropdown__trigger--hover" },
-    selected: {
-      displayName: "Selected",
-      className: "dropdown__trigger--selected"
-    }
-  },
-  clearButton: {
-    hover: { displayName: "Hover", className: "dropdown__clear--hover" },
-    selected: {
-      displayName: "Selected",
-      className: "dropdown__clear--selected"
-    }
-  },
-  option: {
-    hover: { displayName: "Hover", className: "dropdown__option--hover" },
-    selected: {
-      displayName: "Selected",
-      className: "dropdown__option--selected"
-    }
-  },
-  chip: {
-    hover: { displayName: "Hover", className: "dropdown__chip--hover" },
-    selected: {
-      displayName: "Selected",
-      className: "dropdown__chip--selected"
-    }
-  }
-};
-const FunctionalStateKeys = {
-  previewList: "previewList",
-  previewChips: "previewChips"
-};
+const ARIA_LABEL_NAMESPACE = "ariaLabels";
 const DisplayNames = {
-  root: {
-    elementDisplayName: "Dropdown",
-    data: {
-      options: "Options",
-      optionLabel: "Label",
-      optionValue: "Value",
-      value: "Selected value",
-      values: "Selected values",
-      defaultValue: "Default value",
-      defaultValues: "Default values",
-      inputValue: "Search query",
-      open: "Open",
-      isDisabled: "Disabled",
-      placeholder: "Placeholder",
-      searchable: "Allow search",
-      multiple: "Allow multiple selection",
-      clearable: "Show clear button",
-      autoHighlight: "Highlight first match",
-      openOnInputClick: "Open list on click",
-      inline: "Show options inline",
-      grid: "Show options in a grid",
-      columns: "Columns",
-      limit: "Max visible options",
-      label: "Label",
-      required: "Required",
-      readOnly: "Read only",
-      description: "Helper text",
-      triggerMode: {
-        displayName: "Apply filter",
-        options: {
-          onSelection: "On selection",
-          onApply: "On button click"
-        }
-      },
-      applyButtonLabel: "Apply button text"
-    },
-    cssCustomProperties: {
-      width: "Width",
-      maxWidth: "Max width",
-      backgroundColor: "Background",
-      borderColor: "Border color",
-      borderWidth: "Border width",
-      paddingTop: "Padding top",
-      paddingBottom: "Padding bottom",
-      paddingInlineStart: "Padding start",
-      paddingInlineEnd: "Padding end",
-      gap: "Spacing",
-      boxShadow: "Shadow",
-      textAlign: "Value alignment",
-      font: "Value font",
-      textColor: "Value color",
-      labelFont: "Label font",
-      labelColor: "Label color",
-      helperFont: "Helper text font",
-      helperColor: "Helper text color",
-      optionTextColor: "Option text color",
-      optionHoverBackgroundColor: "Option hover background",
-      placeholderColor: "Placeholder color",
-      chipBackgroundColor: "Chip background",
-      chipTextColor: "Chip text color"
-    },
-    elements: {
-      label: "Label",
-      input: "Input",
-      trigger: "Button",
-      clearButton: "Clear button",
-      list: "List",
-      option: "Option",
-      chip: "Chip"
-    },
-    displayGroups: {
-      optionsGroup: "Manage options",
-      sizeGroup: "Size",
-      backgroundGroup: "Background",
-      cornersGroup: "Corner radius",
-      paddingGroup: "Padding"
-    }
+  data: {
+    onClick: "On Click",
+    onDblClick: "On Double Click",
+    onMouseIn: "On Mouse In",
+    onMouseOut: "On Mouse Out",
+    onFocus: "On Focus",
+    onBlur: "On Blur"
   }
 };
-const defaultValues = {
-  placeholder: "Select a value",
-  inputValue: "",
-  open: false,
-  isDisabled: false,
-  searchable: false,
-  multiple: false,
-  clearable: false,
-  autoHighlight: false,
-  openOnInputClick: true,
-  inline: false,
-  grid: false,
-  columns: 2,
-  limit: -1,
-  label: "",
-  required: false,
-  readOnly: false,
-  name: "",
-  description: "",
-  triggerMode: "onSelection",
-  applyButtonLabel: "Apply",
-  noResultsText: "No results"
-};
-var TriggerModeValues = /* @__PURE__ */ ((TriggerModeValues2) => {
-  TriggerModeValues2["OnSelection"] = "onSelection";
-  TriggerModeValues2["OnApply"] = "onApply";
-  return TriggerModeValues2;
-})(TriggerModeValues || {});
-const ALL_VALUE = "";
-const TestIds = {
-  root: "dropdown-root",
-  label: "dropdown-label",
-  requiredIndicator: "dropdown-required-indicator",
-  trigger: "dropdown-trigger",
-  listbox: "dropdown-listbox",
-  clear: "dropdown-clear",
-  applyButton: "dropdown-apply-button",
-  description: "dropdown-description",
-  errorMessage: "dropdown-error-message"
-};
-const selectors = {
-  root: "dropdown",
-  label: "dropdown-label",
-  input: "dropdown-input",
-  trigger: "dropdown-trigger",
-  clear: "dropdown-clear",
-  list: "dropdown-list",
-  option: "dropdown-option",
-  chip: "dropdown-chip"
-};
-const semanticClassNames = {
-  root: "dropdown",
-  label: "dropdown__label",
-  requiredIndicator: "dropdown__required-indicator",
-  input: "dropdown__input",
-  trigger: "dropdown__trigger",
-  clear: "dropdown__clear",
-  listbox: "dropdown__listbox",
-  option: "dropdown__option",
-  chips: "dropdown__chips",
-  chip: "dropdown__chip",
-  applyButton: "dropdown__apply-button",
-  errorMessage: "dropdown__error-message"
-};
-const ARIA_LABEL_NAMESPACE = "ariaLabels";
-const AriaLabels = {
-  root: { key: "Dropdown_AriaLabel", default: "Dropdown" },
-  clear: { key: "Dropdown_AriaLabel_Clear", default: "Clear" },
-  removeItem: { key: "Dropdown_AriaLabel_RemoveItem", default: "Remove" }
-};
-const VALUE_MISSING_MESSAGE = "Please select an option.";
 export {
-  ALL_VALUE as A,
-  DesignStates as D,
-  FunctionalStateKeys as F,
-  TestIds as T,
-  VALUE_MISSING_MESSAGE as V,
-  semanticClassNames as a,
-  TriggerModeValues as b,
-  ARIA_LABEL_NAMESPACE as c,
-  defaultValues as d,
-  AriaLabels as e,
-  DisplayNames as f,
-  selectors as s
+  ARIA_LABEL_NAMESPACE as A,
+  DisplayNames as D
 };