Hover Tile

The Hover Tile component serves as a wrapper for the Product Tile component, adding hover and focus states while displaying actions during these interactions.

Components

The hover-tile is comprised of the following sub components:

• HoverTile: The main wrapper for the hover-enabled tile.
• HoverTileActions: A container for actions that are displayed on hover or focus.

---

Example Usage

Preview

VividLux OLED TV$599.99

55 in65 in75 in

Code

import React from 'react';
import {
  ProductAddToCart,
  ProductAddToCartError,
  ProductImage,
  ProductName,
} from '@hv/commerce/ui/product';
import { ProductPricing } from '@hv/commerce/ui/product-pricing';
import * as UIProductTile from '@hv/commerce/ui/product-tile';
import { ProductStaticProvider } from '@hv/commerce/ui/product-static-provider';
import { HoverTile, HoverTileActions } from '@hv/ui/hover-tile';

export const HoverTileExample = ({ product, variationProducts }) => {
  if (!product) {
    return null;
  }

  return (
    <ProductStaticProvider
      product={product}
      variationProducts={variationProducts}
    >
      <HoverTile>
        <UIProductTile.Content>
          <ProductImage isLink zoomOnHover />
          <ProductName isLink />
          <ProductPricing />
          <HoverTileActions>
            <UIProductTile.VariationSelection
              strings={{
                unavailable: 'Unavailable',
              }}
            />
            <ProductAddToCart
              strings={{
                addToCart: 'Add to Cart',
              }}
            />
            <ProductAddToCartError strings={{}} />
          </HoverTileActions>
        </UIProductTile.Content>
      </HoverTile>
    </ProductStaticProvider>
  );
};

export default HoverTileExample;

HoverTile

The HoverTile is the main container for the hover-enabled tile.

Property	Description	Type
className	Additional classes for styling the element	String
children	Content to display inside the tile	React.ReactNode
props	Additional HTML attributes for the tile	HTMLDivElement

---

HoverTileActions

The HoverTileActions component displays actions on hover or focus within the HoverTile.

Property	Description	Type
className	Additional classes for styling the element	String
children	Content to display inside the actions area	React.ReactNode
props	Additional HTML attributes for the actions	HTMLDivElement

---

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides.