@magento/venia-pwa-live-search 1.0.0-alpha6

package/src/components/ProductCardShimmer/ProductCardShimmer.css

@@ -0,0 +1,72 @@
+.ds-sdk-product-item--shimmer {
+    margin: 0.625rem auto;
+    box-shadow: rgba(149, 157, 165, 0.2) 0px 0.5rem 1.5rem;
+    padding: 1.25rem;
+    width: 22rem;
+}
+
+@keyframes placeholderShimmer {
+    0% {
+        background-position: calc(-100vw + 40px);
+    }
+    100% {
+        background-position: calc(100vw - 40px);
+    }
+}
+
+.shimmer-animation-card {
+    background-color: #f6f7f8;
+    background-image: linear-gradient(
+        to right,
+        #f6f7f8 0%,
+        #edeef1 20%,
+        #f6f7f8 40%,
+        #f6f7f8 100%
+    );
+    background-repeat: no-repeat;
+    background-size: 100vw 4rem;
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: placeholderShimmer;
+    animation-timing-function: linear;
+}
+
+.ds-sdk-product-item__banner {
+    height: 22rem;
+    background-size: 100vw 22rem;
+    border-radius: 0.3125rem;
+    margin-bottom: 0.75rem;
+}
+
+.ds-sdk-product-item__header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.3125rem;
+}
+
+.ds-sdk-product-item__title {
+    height: 2.5rem;
+    flex: 0 0 auto;
+    width: 5vw;
+}
+
+.ds-sdk-product-item__list {
+    height: 2rem;
+    width: 6vw;
+    margin-bottom: 0.3125rem;
+}
+
+.ds-sdk-product-item__list:last-child {
+    margin-bottom: 0;
+}
+
+.ds-sdk-product-item__info {
+    height: 2rem;
+    width: 7vw;
+    margin-bottom: 0.3125rem;
+}
+
+.ds-sdk-product-item__info:last-child {
+    margin-bottom: 0;
+}

package/src/components/ProductCardShimmer/ProductCardShimmer.jsx

@@ -0,0 +1,28 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import React from 'react';
+import './ProductCardShimmer.css';
+
+export const ProductCardShimmer = () => {
+  return (
+    <div className="ds-sdk-product-item ds-sdk-product-item--shimmer">
+      <div className="ds-sdk-product-item__banner shimmer-animation-card" />
+      <div className="ds-sdk-product-item__content">
+        <div className="ds-sdk-product-item__header">
+          <div className="ds-sdk-product-item__title shimmer-animation-card" />
+        </div>
+        <div className="ds-sdk-product-item__list shimmer-animation-card" />
+        <div className="ds-sdk-product-item__info shimmer-animation-card" />
+      </div>
+    </div>
+  );
+};
+
+export default ProductCardShimmer;

package/src/components/ProductCardShimmer/index.js

@@ -0,0 +1,11 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+export * from './ProductCardShimmer';
+export { default } from './ProductCardShimmer';

package/src/components/ProductItem/MockData.js

@@ -0,0 +1,508 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+export const sampleProductNoImage = {
+    product: {
+        __typename: 'SimpleProduct',
+        id: 21,
+        uid: '21',
+        name: 'Sprite Foam Yoga Brick',
+        sku: '24-WG084',
+        description: {
+            html:
+                '<p>Our top-selling yoga prop, the 4-inch, high-quality Sprite Foam Yoga Brick is popular among yoga novices and studio professionals alike. An essential yoga accessory, the yoga brick is a critical tool for finding balance and alignment in many common yoga poses. Choose from 5 color options.</p>\n<ul>\n<li>Standard Large Size: 4" x 6" x 9".\n<li>Beveled edges for ideal contour grip.\n<li>Durable and soft, scratch-proof foam.\n<li>Individually wrapped.\n<li>Ten color choices.\n</ul> '
+        },
+        short_description: null,
+        attribute_set_id: null,
+        meta_title: null,
+        meta_keyword: null,
+        meta_description: null,
+        image: null,
+        small_image: null,
+        thumbnail: null,
+        new_from_date: null,
+        new_to_date: null,
+        created_at: null,
+        updated_at: null,
+        price_range: {
+            minimum_price: {
+                fixed_product_taxes: null,
+                regular_price: { value: 8, currency: 'USD' },
+                final_price: { value: 5, currency: 'USD' },
+                discount: null
+            },
+            maximum_price: {
+                fixed_product_taxes: null,
+                regular_price: { value: 5, currency: 'USD' },
+                final_price: { value: 5, currency: 'USD' },
+                discount: null
+            }
+        },
+        gift_message_available: null,
+        canonical_url:
+            '//master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/sprite-foam-yoga-brick.html',
+        media_gallery: null,
+        custom_attributes: null,
+        add_to_cart_allowed: null
+    },
+    productView: {
+        __typename: 'SimpleProduct',
+        id: 21,
+        uid: '21',
+        name: 'Sprite Foam Yoga Brick',
+        sku: '24-WG084',
+        description: {
+            html:
+                '<p>Our top-selling yoga prop, the 4-inch, high-quality Sprite Foam Yoga Brick is popular among yoga novices and studio professionals alike. An essential yoga accessory, the yoga brick is a critical tool for finding balance and alignment in many common yoga poses. Choose from 5 color options.</p>\n<ul>\n<li>Standard Large Size: 4" x 6" x 9".\n<li>Beveled edges for ideal contour grip.\n<li>Durable and soft, scratch-proof foam.\n<li>Individually wrapped.\n<li>Ten color choices.\n</ul> '
+        },
+        short_description: null,
+        attribute_set_id: null,
+        meta_title: null,
+        meta_keyword: null,
+        meta_description: null,
+        images: null,
+        new_from_date: null,
+        new_to_date: null,
+        created_at: null,
+        updated_at: null,
+        price: {
+            final: {
+                amount: {
+                    value: 5,
+                    currency: 'USD'
+                },
+                adjustments: null
+            },
+            regular: {
+                amount: {
+                    value: 5,
+                    currency: 'USD'
+                },
+                adjustments: null
+            }
+        },
+        priceRange: {
+            maximum: {
+                final: {
+                    amount: {
+                        value: 5,
+                        currency: 'USD'
+                    },
+                    adjustments: null
+                },
+                regular: {
+                    amount: {
+                        value: 5,
+                        currency: 'USD'
+                    },
+                    adjustments: null
+                }
+            },
+            minimum: {
+                final: {
+                    amount: {
+                        value: 5,
+                        currency: 'USD'
+                    },
+                    adjustments: null
+                },
+                regular: {
+                    amount: {
+                        value: 8,
+                        currency: 'USD'
+                    },
+                    adjustments: null
+                }
+            }
+        },
+        gift_message_available: null,
+        url:
+            'http://master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/sprite-foam-yoga-brick.html',
+        urlKey: 'sprite-foam-yoga-brick',
+        media_gallery: null,
+        custom_attributes: null,
+        add_to_cart_allowed: null,
+        options: null
+    },
+    highlights: [
+        {
+            attribute: 'name',
+            value: 'Sprite Foam <em>Yoga</em> Brick',
+            matched_words: []
+        },
+        {
+            attribute: 'description',
+            value:
+                '<p>Our top-selling <em>yoga</em> prop, the 4-inch, high-quality Sprite Foam <em>Yoga</em> Brick is popular among <em>yoga</em> novices and studio professionals alike. An essential <em>yoga</em> accessory, the <em>yoga</em> brick is a critical tool for finding balance and alignment in many common <em>yoga</em> poses. Choose from 5 color options.</p>\n<ul>\n<li>Standard Large Size: 4" x 6" x 9".\n<li>Beveled edges for ideal contour grip.\n<li>Durable and soft, scratch-proof foam.\n<li>Individually wrapped.\n<li>Ten color choices.\n</ul>',
+            matched_words: []
+        }
+    ]
+};
+
+export const sampleProductDiscounted = {
+    product: {
+        __typename: 'SimpleProduct',
+        id: 21,
+        uid: '21',
+        name: 'Sprite Foam Yoga Brick',
+        sku: '24-WG084',
+        description: {
+            html:
+                '<p>Our top-selling yoga prop, the 4-inch, high-quality Sprite Foam Yoga Brick is popular among yoga novices and studio professionals alike. An essential yoga accessory, the yoga brick is a critical tool for finding balance and alignment in many common yoga poses. Choose from 5 color options.</p>\n<ul>\n<li>Standard Large Size: 4" x 6" x 9".\n<li>Beveled edges for ideal contour grip.\n<li>Durable and soft, scratch-proof foam.\n<li>Individually wrapped.\n<li>Ten color choices.\n</ul> '
+        },
+        short_description: null,
+        attribute_set_id: null,
+        meta_title: null,
+        meta_keyword: null,
+        meta_description: null,
+        image: {
+            url:
+                '//master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/media/catalog/product/l/u/luma-yoga-brick.jpg',
+            label: null,
+            position: null,
+            disabled: null
+        },
+        small_image: {
+            url:
+                '//master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/media/catalog/product/l/u/luma-yoga-brick.jpg',
+            label: null,
+            position: null,
+            disabled: null
+        },
+        thumbnail: {
+            url:
+                '//master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/media/catalog/product/l/u/luma-yoga-brick.jpg',
+            label: null,
+            position: null,
+            disabled: null
+        },
+        new_from_date: null,
+        new_to_date: null,
+        created_at: null,
+        updated_at: null,
+        price_range: {
+            minimum_price: {
+                fixed_product_taxes: null,
+                regular_price: { value: 8, currency: 'USD' },
+                final_price: { value: 5, currency: 'USD' },
+                discount: null
+            },
+            maximum_price: {
+                fixed_product_taxes: null,
+                regular_price: { value: 5, currency: 'USD' },
+                final_price: { value: 5, currency: 'USD' },
+                discount: null
+            }
+        },
+        gift_message_available: null,
+        canonical_url:
+            '//master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/sprite-foam-yoga-brick.html',
+        media_gallery: null,
+        custom_attributes: null,
+        add_to_cart_allowed: null
+    },
+    productView: {
+        __typename: 'SimpleProduct',
+        id: 21,
+        uid: '21',
+        name: 'Sprite Foam Yoga Brick',
+        sku: '24-WG084',
+        description: {
+            html:
+                '<p>Our top-selling yoga prop, the 4-inch, high-quality Sprite Foam Yoga Brick is popular among yoga novices and studio professionals alike. An essential yoga accessory, the yoga brick is a critical tool for finding balance and alignment in many common yoga poses. Choose from 5 color options.</p>\n<ul>\n<li>Standard Large Size: 4" x 6" x 9".\n<li>Beveled edges for ideal contour grip.\n<li>Durable and soft, scratch-proof foam.\n<li>Individually wrapped.\n<li>Ten color choices.\n</ul> '
+        },
+        short_description: null,
+        attribute_set_id: null,
+        meta_title: null,
+        meta_keyword: null,
+        meta_description: null,
+        images: [
+            {
+                url:
+                    'http://master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/media/catalog/product/l/u/luma-yoga-brick.jpg',
+                label: null,
+                position: null,
+                disabled: null,
+                roles: ['thumbnail']
+            },
+            {
+                url:
+                    'http://master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/media/catalog/product/l/u/luma-yoga-brick.jpg',
+                label: null,
+                position: null,
+                disabled: null,
+                roles: ['thumbnail']
+            },
+            {
+                url:
+                    'http://master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/media/catalog/product/l/u/luma-yoga-brick.jpg',
+                label: null,
+                position: null,
+                disabled: null,
+                roles: ['thumbnail']
+            }
+        ],
+        new_from_date: null,
+        new_to_date: null,
+        created_at: null,
+        updated_at: null,
+        price: {
+            final: {
+                amount: {
+                    value: 5,
+                    currency: 'USD'
+                },
+                adjustments: null
+            },
+            regular: {
+                amount: {
+                    value: 5,
+                    currency: 'USD'
+                },
+                adjustments: null
+            }
+        },
+        priceRange: {
+            maximum: {
+                final: {
+                    amount: {
+                        value: 5,
+                        currency: 'USD'
+                    },
+                    adjustments: null
+                },
+                regular: {
+                    amount: {
+                        value: 5,
+                        currency: 'USD'
+                    },
+                    adjustments: null
+                }
+            },
+            minimum: {
+                final: {
+                    amount: {
+                        value: 5,
+                        currency: 'USD'
+                    },
+                    adjustments: null
+                },
+                regular: {
+                    amount: {
+                        value: 8,
+                        currency: 'USD'
+                    },
+                    adjustments: null
+                }
+            }
+        },
+        gift_message_available: null,
+        url:
+            'http://master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/sprite-foam-yoga-brick.html',
+        urlKey: 'sprite-foam-yoga-brick',
+        media_gallery: null,
+        custom_attributes: null,
+        add_to_cart_allowed: null,
+        options: null
+    },
+    highlights: [
+        {
+            attribute: 'name',
+            value: 'Sprite Foam <em>Yoga</em> Brick',
+            matched_words: []
+        },
+        {
+            attribute: 'description',
+            value:
+                '<p>Our top-selling <em>yoga</em> prop, the 4-inch, high-quality Sprite Foam <em>Yoga</em> Brick is popular among <em>yoga</em> novices and studio professionals alike. An essential <em>yoga</em> accessory, the <em>yoga</em> brick is a critical tool for finding balance and alignment in many common <em>yoga</em> poses. Choose from 5 color options.</p>\n<ul>\n<li>Standard Large Size: 4" x 6" x 9".\n<li>Beveled edges for ideal contour grip.\n<li>Durable and soft, scratch-proof foam.\n<li>Individually wrapped.\n<li>Ten color choices.\n</ul>',
+            matched_words: []
+        }
+    ]
+};
+
+export const sampleProductNotDiscounted = {
+    product: {
+        __typename: 'SimpleProduct',
+        id: 21,
+        uid: '21',
+        name: 'Sprite Foam Yoga Brick',
+        sku: '24-WG084',
+        description: {
+            html:
+                '<p>Our top-selling yoga prop, the 4-inch, high-quality Sprite Foam Yoga Brick is popular among yoga novices and studio professionals alike. An essential yoga accessory, the yoga brick is a critical tool for finding balance and alignment in many common yoga poses. Choose from 5 color options.</p>\n<ul>\n<li>Standard Large Size: 4" x 6" x 9".\n<li>Beveled edges for ideal contour grip.\n<li>Durable and soft, scratch-proof foam.\n<li>Individually wrapped.\n<li>Ten color choices.\n</ul> '
+        },
+        short_description: null,
+        attribute_set_id: null,
+        meta_title: null,
+        meta_keyword: null,
+        meta_description: null,
+        image: {
+            url:
+                '//master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/media/catalog/product/l/u/luma-yoga-brick.jpg',
+            label: null,
+            position: null,
+            disabled: null
+        },
+        small_image: {
+            url:
+                '//master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/media/catalog/product/l/u/luma-yoga-brick.jpg',
+            label: null,
+            position: null,
+            disabled: null
+        },
+        thumbnail: {
+            url:
+                '//master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/media/catalog/product/l/u/luma-yoga-brick.jpg',
+            label: null,
+            position: null,
+            disabled: null
+        },
+        new_from_date: null,
+        new_to_date: null,
+        created_at: null,
+        updated_at: null,
+        price_range: {
+            minimum_price: {
+                fixed_product_taxes: null,
+                regular_price: { value: 5, currency: 'USD' },
+                final_price: { value: 5, currency: 'USD' },
+                discount: null
+            },
+            maximum_price: {
+                fixed_product_taxes: null,
+                regular_price: { value: 8, currency: 'USD' },
+                final_price: { value: 8, currency: 'USD' },
+                discount: null
+            }
+        },
+        gift_message_available: null,
+        canonical_url:
+            '//master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/sprite-foam-yoga-brick.html',
+        media_gallery: null,
+        custom_attributes: null,
+        add_to_cart_allowed: null
+    },
+    productView: {
+        __typename: 'SimpleProduct',
+        id: 21,
+        uid: '21',
+        name: 'Sprite Foam Yoga Brick',
+        sku: '24-WG084',
+        description: {
+            html:
+                '<p>Our top-selling yoga prop, the 4-inch, high-quality Sprite Foam Yoga Brick is popular among yoga novices and studio professionals alike. An essential yoga accessory, the yoga brick is a critical tool for finding balance and alignment in many common yoga poses. Choose from 5 color options.</p>\n<ul>\n<li>Standard Large Size: 4" x 6" x 9".\n<li>Beveled edges for ideal contour grip.\n<li>Durable and soft, scratch-proof foam.\n<li>Individually wrapped.\n<li>Ten color choices.\n</ul> '
+        },
+        short_description: null,
+        attribute_set_id: null,
+        meta_title: null,
+        meta_keyword: null,
+        meta_description: null,
+        images: [
+            {
+                url:
+                    'http://master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/media/catalog/product/l/u/luma-yoga-brick.jpg',
+                label: null,
+                position: null,
+                disabled: null,
+                roles: ['thumbnail']
+            },
+            {
+                url:
+                    'http://master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/media/catalog/product/l/u/luma-yoga-brick.jpg',
+                label: null,
+                position: null,
+                disabled: null,
+                roles: ['thumbnail']
+            },
+            {
+                url:
+                    'http://master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/media/catalog/product/l/u/luma-yoga-brick.jpg',
+                label: null,
+                position: null,
+                disabled: null,
+                roles: ['thumbnail']
+            }
+        ],
+        new_from_date: null,
+        new_to_date: null,
+        created_at: null,
+        updated_at: null,
+        price: {
+            final: {
+                amount: {
+                    value: 5,
+                    currency: 'USD'
+                },
+                adjustments: null
+            },
+            regular: {
+                amount: {
+                    value: 5,
+                    currency: 'USD'
+                },
+                adjustments: null
+            }
+        },
+        priceRange: {
+            maximum: {
+                final: {
+                    amount: {
+                        value: 8,
+                        currency: 'USD'
+                    },
+                    adjustments: null
+                },
+                regular: {
+                    amount: {
+                        value: 8,
+                        currency: 'USD'
+                    },
+                    adjustments: null
+                }
+            },
+            minimum: {
+                final: {
+                    amount: {
+                        value: 5,
+                        currency: 'USD'
+                    },
+                    adjustments: null
+                },
+                regular: {
+                    amount: {
+                        value: 8,
+                        currency: 'USD'
+                    },
+                    adjustments: null
+                }
+            }
+        },
+        gift_message_available: null,
+        url:
+            'http://master-7rqtwti-eragxvhtzr4am.us-4.magentosite.cloud/sprite-foam-yoga-brick.html',
+        urlKey: 'sprite-foam-yoga-brick',
+        media_gallery: null,
+        custom_attributes: null,
+        add_to_cart_allowed: null,
+        options: null
+    },
+    highlights: [
+        {
+            attribute: 'name',
+            value: 'Sprite Foam <em>Yoga</em> Brick',
+            matched_words: []
+        },
+        {
+            attribute: 'description',
+            value:
+                '<p>Our top-selling <em>yoga</em> prop, the 4-inch, high-quality Sprite Foam <em>Yoga</em> Brick is popular among <em>yoga</em> novices and studio professionals alike. An essential <em>yoga</em> accessory, the <em>yoga</em> brick is a critical tool for finding balance and alignment in many common <em>yoga</em> poses. Choose from 5 color options.</p>\n<ul>\n<li>Standard Large Size: 4" x 6" x 9".\n<li>Beveled edges for ideal contour grip.\n<li>Durable and soft, scratch-proof foam.\n<li>Individually wrapped.\n<li>Ten color choices.\n</ul>',
+            matched_words: []
+        }
+    ]
+};