Add Tooltip Component and Improve AttributeSelections

alexookah commented 3 months ago

This PR introduces the new Tooltip component to enhance the user interface by providing helpful tooltips on color selection elements. It also refactors how the dropdown and selection options display their names, ensuring consistency and readability by dynamically sourcing display names from attribute terms.

Changes Introduced

Tooltip Component:

Implemented a new Tooltip component designed to provide hover information for color options. Added support for positioning the tooltip below the target element with a clear arrow to indicate the source of the information.

Standardized Attribute Display:

Updated dropdown and selection components to display attribute names from terms.nodes. Ensured that both dropdowns and selection elements display the same human-readable names instead of relying on option slugs.

Removed the usage of the capitalize class from the dropdown options and other components. Now, option names are rendered directly from terms.nodes, reflecting how attributes are defined in WordPress. This ensures uniformity across various parts of the UI.

Terms Instead of options:

I saw that options were not ordered. So I defined the orderType in terms(where: {orderby: TERM_ORDER}) And now the order of the variations is much better. I also had to use the terms.nodes instead of options to use the ordered array to populate the attributes.

Example Attributes in Shop:

const attributes = [
  {
    variation: true,
    name: "pa_color",
    options: [
      "army",
      "berry",
      "black",
      "cardinal",
      "forest",
      "heather-deep-teal",
      "maroon",
      "navy"
    ],
    terms: {
      nodes: [
        { name: "Army", slug: "army" },
        { name: "Berry", slug: "berry" },
        { name: "Black", slug: "black" },
        { name: "Cardinal", slug: "cardinal" },
        { name: "Forest", slug: "forest" },
        { name: "Heather Deep Teal", slug: "heather-deep-teal" },
        { name: "Maroon", slug: "maroon" },
        { name: "Navy", slug: "navy" }
      ]
    }
  },
  {
    variation: true,
    name: "pa_size",
    options: ["2xl", "3xl", "4xl", "5xl", "l", "m", "s", "xl", "xs"],
    terms: {
      nodes: [
        { name: "2XL", slug: "2xl" },
        { name: "3XL", slug: "3xl" },
        { name: "4XL", slug: "4xl" },
        { name: "5XL", slug: "5xl" },
        { name: "L", slug: "l" },
        { name: "M", slug: "m" },
        { name: "S", slug: "s" },
        { name: "XL", slug: "xl" },
        { name: "XS", slug: "xs" }
      ]
    }
  }
];

Screenshots Tooltip Component

Created a Tooltip component: Screenshot 2024-07-08 at 04 59 16 Screenshot 2024-07-08 at 05 05 07 Screenshot 2024-07-09 at 04 15 03