[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@godaddy/gd-commerce-server@0.4.0

Minor Changes

• 7e94726: The product details route returns each SKU's attribute value names (attributeValues), so the storefront can mark option values that are sold out.

@godaddy/gd-commerce-storefront@0.7.0

Minor Changes

• 7e94726: Redesign the packaged components with a cleaner default look, legible on light and dark host pages without configuration.

  • Catalog. Cards drop their border and sit directly on the page: a square image with square corners, the name, the price, and a full-width outlined action. A "Sale" badge shows when a SKU's compare-at price is above that SKU's price; the catalog list has no SKU prices, so a card shows it only when the lowest compare-at price is above the highest price. A single price also shows its compare-at price struck through; a price range shows only the badge. The packaged card no longer shows the description; ProductCardDescription adds it back. The title and description sit beside the product count. The grid has two columns on phones, then as many 240px columns as fit. Pagination is centered and hidden when there is only one page.
  • Product page. A square gallery with the Sale badge, and options as buttons (radios) instead of selects. Until options are chosen, the price reads "From" the lowest price, with a struck-through compare-at price only when the cheapest SKUs share it, so it never pairs prices from different SKUs. An option with more than eight values stays a select. Values whose SKUs are all sold out, given the other selections, are crossed out and announced as sold out, but stay selectable. The quantity is a stepper capped at the stock, beside an add button labeled with the total, such as "Add to cart · $64.00". Before every option is chosen the button stays enabled and names the next one, such as "Select size"; pressing it shows an error on each missing option and focuses the first.
  • Product page parts in custom layouts. ProductDetailsQuantity now renders before a SKU is chosen, and changing a selection keeps the quantity instead of resetting it to 1; a quantity above the new SKU's stock shows the quantity error. ProductDetailsPurchaseStatus no longer shows "Select all options to add this item to your cart." before every option is chosen, because ProductDetailsAddToCart now names the missing option. A layout that replaces the add button should show its own prompt for missing options.
  • Cart drawer. The title shows the item count, such as "Your cart (3)". Thumbnails are square, a line's options share one line ("Color: Blue · Size: M"), and the checkout note is a "Shipping, taxes & discounts: Calculated at checkout" row under the subtotal. "Proceed to checkout" is followed by a new CartContinueShopping part. The empty cart has a bag icon and an outlined "Browse products" link. The live drawer no longer has a description; the sample drawer keeps its own.
  • CartButton is a bag icon with a count badge that pops when the count changes, named "Cart, 2 items". Its children replace the icon with a label.
  • Swatches, off by default: a new getSwatch provider prop returns a CSS background for an attribute value. Attributes whose values all have one render as swatches on the product page and as dots on cards (ProductCardSwatches). useProductDetailsOption values now include soldOut and swatch, and the option has missing.
  • RelatedProducts, a new optional component, shows other products from the catalog's first page, for placing after the product page.
  • New parts ProductCardBadge and ProductDetailsBadge, and theme properties --commerce-sale and --commerce-on-sale for the badge.
  • Muted text, hairlines, image placeholders, outlined buttons and disabled buttons now derive from the inherited text color, instead of from --commerce-surface. Previously they assumed a light background, so on a dark page muted text and lines were hard to read and controls painted light boxes.
  • Error and warning messages bring their own light background in every context. Previously inline errors were red text on whatever background was behind them.
  • Primary buttons show a focus ring in --commerce-accent, and inputs draw theirs inside the border, so focus shows on any page background.