diff --git a/packages/components/src/organisms/SKUMatrix/SKUMatrixSidebar.tsx b/packages/components/src/organisms/SKUMatrix/SKUMatrixSidebar.tsx index fee3a1acc9..fa8e32361e 100644 --- a/packages/components/src/organisms/SKUMatrix/SKUMatrixSidebar.tsx +++ b/packages/components/src/organisms/SKUMatrix/SKUMatrixSidebar.tsx @@ -1,8 +1,9 @@ -import Image from 'next/image' +/* eslint-disable @next/next/no-img-element */ +import type { FunctionComponent } from 'react' import React, { useMemo } from 'react' import { Badge, Button, QuantitySelector, Skeleton } from '../..' -import Price, { PriceFormatter } from '../../atoms/Price' import Icon from '../../atoms/Icon' +import Price, { PriceFormatter } from '../../atoms/Price' import { useFadeEffect, useSKUMatrix, useUI } from '../../hooks' import { Table, @@ -12,7 +13,6 @@ import { TableRow, } from '../../molecules/Table' import SlideOver, { SlideOverHeader, SlideOverProps } from '../SlideOver' - interface VariationProductColumn { name: string additionalColumns: Array<{ label: string; value: string }> @@ -24,8 +24,15 @@ interface VariationProductColumn { quantitySelector: number } +const ImageComponentFallback: SKUMatrixSidebarProps['ImageComponent'] = ({ + src, + alt, + ...otherProps +}) => {alt} + +// TODO: Moves this component to the `@faststore/core` package. We decided that it doesn't make sense to have this component in the library since it's vey specific to the SKU Matrix feature. export interface SKUMatrixSidebarProps - extends Omit { + extends Omit { /** * Title for the SKUMatrixSidebar component. */ @@ -51,18 +58,28 @@ export interface SKUMatrixSidebarProps * Check if some result is still loading before render the result. */ loading?: boolean + /** + * Function that returns a React component that will be used to render images. + */ + ImageComponent: FunctionComponent<{ + src: string + alt: string + width?: number + height?: number + }> } function SKUMatrixSidebar({ - direction = 'rightSide', title, - overlayProps, + direction = 'rightSide', size = 'partial', children, columns, - buyProps: { onClick: buyButtonOnClick, ...buyProps }, loading, formatter, + ImageComponent = ImageComponentFallback, + buyProps: { onClick: buyButtonOnClick, ...buyProps }, + overlayProps, ...otherProps }: SKUMatrixSidebarProps) { const { @@ -177,11 +194,9 @@ function SKUMatrixSidebar({ {allVariantProducts.map((variantProduct) => ( - {variantProduct.image.alternateName} {variantProduct.name} diff --git a/packages/core/src/components/ui/SKUMatrix/SKUMatrixSidebar.tsx b/packages/core/src/components/ui/SKUMatrix/SKUMatrixSidebar.tsx index ff641090cd..4f08dd32d7 100644 --- a/packages/core/src/components/ui/SKUMatrix/SKUMatrixSidebar.tsx +++ b/packages/core/src/components/ui/SKUMatrix/SKUMatrixSidebar.tsx @@ -7,9 +7,16 @@ import { gql } from '@generated/gql' import { useBuyButton } from 'src/sdk/cart/useBuyButton' import { usePDP } from 'src/sdk/overrides/PageProvider' import { useAllVariantProducts } from 'src/sdk/product/useAllVariantProducts' +import { Image } from '../Image' interface SKUMatrixProps extends UISKUMatrixSidebarProps {} +const ImageComponent: UISKUMatrixSidebarProps['ImageComponent'] = ({ + src, + alt, + ...otherProps +}) => {alt} + function SKUMatrixSidebar(props: SKUMatrixProps) { const { data: { product }, @@ -76,6 +83,7 @@ function SKUMatrixSidebar(props: SKUMatrixProps) { buyProps={buyProps} title={product.isVariantOf.name ?? ''} loading={isValidating} + ImageComponent={ImageComponent} {...props} /> ) diff --git a/packages/ui/src/components/organisms/SKUMatrix/styles.scss b/packages/ui/src/components/organisms/SKUMatrix/styles.scss index e0bc712f48..fd232836ba 100644 --- a/packages/ui/src/components/organisms/SKUMatrix/styles.scss +++ b/packages/ui/src/components/organisms/SKUMatrix/styles.scss @@ -4,22 +4,23 @@ // -------------------------------------------------------- // Default properties - - // Background - --fs-sku-matrix-sidebar-bkg-color : var(--fs-color-body-bkg); + --fs-sku-matrix-sidebar-bkg-color : var(--fs-color-body-bkg); // Title - --fs-sku-matrix-sidebar-title-size : var(--fs-text-size-6); - --fs-sku-matrix-sidebar-title-text-weight : var(--fs-text-weight-semibold); - + --fs-sku-matrix-sidebar-title-size : var(--fs-text-size-6); + --fs-sku-matrix-sidebar-title-text-weight : var(--fs-text-weight-semibold); + // Cell - --fs-sku-matrix-sidebar-table-cell-font-size : var(--fs-text-size-tiny); - --fs-sku-matrix-sidebar-table-cell-text-weight : var(--fs-text-weight-medium); + --fs-sku-matrix-sidebar-table-cell-font-size : var(--fs-text-size-tiny); + --fs-sku-matrix-sidebar-table-cell-text-weight : var(--fs-text-weight-medium); + // Image + --fs-sku-matrix-sidebar-table-cell-image-width : var(--fs-spacing-7); // 48px + --fs-sku-matrix-sidebar-table-cell-image-border-radius : var(--fs-border-radius); // Partial - --fs-sku-matrix-slide-over-partial-gap : calc(2 * var(--fs-grid-padding)); - --fs-sku-matrix-slide-over-partial-width-mobile : calc(100vw - var(--fs-sku-matrix-slide-over-partial-gap)); + --fs-sku-matrix-slide-over-partial-gap : calc(2 * var(--fs-grid-padding)); + --fs-sku-matrix-slide-over-partial-width-mobile : calc(100vw - var(--fs-sku-matrix-slide-over-partial-gap)); // -------------------------------------------------------- // Structural Styles @@ -34,8 +35,8 @@ flex-shrink: 0; padding: var(--fs-spacing-3) var(--fs-spacing-8); padding-bottom: 0; - - @include media("=notebook") { + @include media('>=notebook') { max-width: var(--fs-sku-matrix-slide-over-partial-width-mobile); } } @@ -91,7 +92,7 @@ } [data-fs-table-cell], - [data-fs-price-variant="spot"] { + [data-fs-price-variant='spot'] { font-weight: var(--fs-text-weight-medium); } @@ -115,11 +116,12 @@ align-items: center; gap: var(--fs-spacing-2); - > div { - img { - object-fit: cover; - object-position: center; - } + img { + object-fit: cover; + object-position: center; + width: var(--fs-sku-matrix-sidebar-table-cell-image-width); + height: var(--fs-sku-matrix-sidebar-table-cell-image-width); + border-radius: var(--fs-sku-matrix-sidebar-table-cell-image-border-radius); } } @@ -131,19 +133,16 @@ [data-fs-sku-matrix-sidebar-footer] { display: flex; + width: 100%; + padding: var(--fs-spacing-4) var(--fs-spacing-8); justify-content: space-between; - position: sticky; bottom: 0; left: 0; right: 0; margin-top: auto; - - background-color: var(--fs-sku-matrix-sidebar-bkg-color); - - padding: var(--fs-spacing-4) var(--fs-spacing-8); border-top: var(--fs-border-width) solid var(--fs-border-color-light); - width: 100%; + background-color: var(--fs-sku-matrix-sidebar-bkg-color); > div { display: flex; @@ -156,7 +155,7 @@ } } - @include media("