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
+}) =>
+
+// 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.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
+}) =>
+
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("