Rename skeleton components

src/components/product/ProductGrid/ProductGrid.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
 import { ITEMS_PER_PAGE } from 'src/constants'
-import ProductCardSkeleton from 'src/components/skeletons/ProductCardSkeleton'
+import SkeletonProductCard from 'src/components/skeletons/SkeletonProductCard'
 
 import ProductCard from '../ProductCard'
 import './product-grid.scss'
@@ -33,7 +33,7 @@ function ProductGrid({ products, page, pageSize }: Props) {
           ))
         : Array.from({ length: ITEMS_PER_PAGE }, (_, index) => (
             <li key={String(index)}>
-              <ProductCardSkeleton bordered />
+              <SkeletonProductCard bordered />
             </li>
           ))}
     </ul>

src/components/sections/ProductGallery/ProductGallery.tsx

@@ -9,8 +9,8 @@ import Filter from 'src/components/search/Filter'
 import Sort from 'src/components/search/Sort'
 import Button, { LinkButton } from 'src/components/ui/Button'
 import useWindowDimensions from 'src/hooks/useWindowDimensions'
-import ElementSkeleton from 'src/components/skeletons/ElementSkeleton'
-import FilterSkeleton from 'src/components/skeletons/FilterSkeleton'
+import SkeletonElement from 'src/components/skeletons/SkeletonElement'
+import SkeletonFilter from 'src/components/skeletons/SkeletonFilter'
 import ProductGrid from 'src/components/product/ProductGrid'
 
 import GalleryPage from './ProductGalleryPage'
@@ -49,20 +49,20 @@ function ProductGallery({ title, slug }: Props) {
             onDismiss={() => setIsFilterOpen(false)}
           />
         ) : (
-          <FilterSkeleton />
+          <SkeletonFilter />
         )}
       </div>
 
       <div className="product-listing__results-count" data-count={totalCount}>
         {data ? (
           <h2 data-testid="total-product-count">{totalCount} Results</h2>
         ) : (
-          <ElementSkeleton shimmer type="text" />
+          <SkeletonElement shimmer type="text" />
         )}
       </div>
 
       <div className="product-listing__sort">
-        {data ? <Sort /> : <ElementSkeleton shimmer type="text" />}
+        {data ? <Sort /> : <SkeletonElement shimmer type="text" />}
 
         {isMobile &&
           (data ? (
@@ -77,7 +77,7 @@ function ProductGallery({ title, slug }: Props) {
               Filters
             </Button>
           ) : (
-            <ElementSkeleton shimmer type="button" />
+            <SkeletonElement shimmer type="button" />
           ))}
       </div>
 

src/components/sections/ProductShelf/ProductShelf.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
 import { ITEMS_PER_SECTION } from 'src/constants'
-import ProductCardSkeleton from 'src/components/skeletons/ProductCardSkeleton'
+import SkeletonProductCard from 'src/components/skeletons/SkeletonProductCard'
 
 import ProductCard from '../../product/ProductCard'
 
@@ -24,7 +24,7 @@ function ProductShelf({ products }: ProductShelfProps) {
           ))
         : Array.from({ length: ITEMS_PER_SECTION }, (_, index) => (
             <li key={String(index)}>
-              <ProductCardSkeleton sectioned />
+              <SkeletonProductCard sectioned />
             </li>
           ))}
     </ul>

src/components/sections/ProductTiles/ProductTiles.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import Tiles, { Tile } from 'src/components/ui/Tiles'
 import ProductCard from 'src/components/product/ProductCard'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
-import ProductTileSkeleton from 'src/components/skeletons/ProductTileSkeleton'
+import SkeletonProductTile from 'src/components/skeletons/SkeletonProductTile'
 
 interface TilesProps {
   products: ProductSummary_ProductFragment[]
@@ -45,7 +45,7 @@ const ProductTiles = ({ products }: TilesProps) => {
           ))
         : Array.from({ length: 3 }, (_, index) => (
             <Tile key={String(index)}>
-              <ProductTileSkeleton tileIndex={index + 1} variant="horizontal" />
+              <SkeletonProductTile tileIndex={index + 1} variant="horizontal" />
             </Tile>
           ))}
     </Tiles>

src/components/skeletons/SkeletonElement/SkeletonElement.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import Shimmer from '../Shimmer'
+
+import './skeleton-element.scss'
+
+type ElementVariant = 'text' | 'button' | 'image' | 'badge'
+
+interface Props {
+  shimmer?: boolean
+  type: ElementVariant
+}
+
+function SkeletonElement({ type, shimmer = false }: Props) {
+  return (
+    <div data-store-skeleton-element data-shimmer={shimmer}>
+      <div data-skeleton-element-content data-element-variant={type} />
+      {shimmer && <Shimmer />}
+    </div>
+  )
+}
+
+export default SkeletonElement

src/components/skeletons/SkeletonElement/index.ts

@@ -0,0 +1 @@
+export { default } from './SkeletonElement'

src/components/skeletons/ElementSkeleton/element-skeleton.scss → src/components/skeletons/SkeletonElement/skeleton-element.scss

@@ -1,10 +1,10 @@
-[data-store-element-skeleton] {
+[data-store-skeleton-element] {
   &[data-shimmer="true"] {
     position: relative;
     overflow: hidden;
   }
 
-  [data-element-skeleton] {
+  [data-skeleton-element-content] {
     overflow: hidden;
     background: var(--color-neutral-2);
     border-radius: var(--border-radius-default);

src/components/skeletons/SkeletonFilter/SkeletonFilter.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import Shimmer from '../Shimmer'
+import SkeletonElement from '../SkeletonElement'
+import './skeleton-filter.scss'
+
+function SkeletonFilter() {
+  return (
+    <div data-store-skeleton-filter>
+      <SkeletonElement shimmer type="text" />
+
+      <div data-skeleton-filter-content>
+        <SkeletonElement type="text" />
+        <SkeletonElement type="text" />
+        <SkeletonElement type="text" />
+        <Shimmer />
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonFilter

src/components/skeletons/SkeletonFilter/index.ts

@@ -0,0 +1 @@
+export { default } from './SkeletonFilter'

src/components/skeletons/FilterSkeleton/filter-skeleton.scss → src/components/skeletons/SkeletonFilter/skeleton-filter.scss

@@ -1,11 +1,11 @@
 @import "../../../styles/scaffold";
 
-[data-store-filter-skeleton] {
+[data-store-skeleton-filter] {
   margin-top: var(--space-1);
 
   @include media("<notebook") { display: none; }
 
-  [data-filter-skeleton-content] {
+  [data-skeleton-filter-content] {
     position: relative;
     display: flex;
     flex-direction: column;

src/components/skeletons/SkeletonProductCard/SkeletonProductCard.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import Shimmer from '../Shimmer'
+import SkeletonElement from '../SkeletonElement'
+import './skeleton-product-card.scss'
+
+interface Props {
+  bordered?: boolean
+  sectioned?: boolean
+  showActions?: boolean
+  variant?: 'vertical' | 'horizontal'
+}
+
+const SkeletonProductCard = ({
+  bordered,
+  sectioned = false,
+  showActions = false,
+  variant = 'vertical',
+}: Props) => {
+  return (
+    <div
+      data-store-skeleton-product-card
+      data-bordered={bordered}
+      data-variant={variant}
+    >
+      <div data-skeleton-product-card-image data-sectioned={sectioned}>
+        <SkeletonElement type="image" />
+      </div>
+      <div data-skeleton-product-card-content>
+        <SkeletonElement type="text" />
+        <SkeletonElement type="text" />
+        <SkeletonElement type="badge" />
+        {showActions && <SkeletonElement type="button" />}
+      </div>
+      <Shimmer />
+    </div>
+  )
+}
+
+export default SkeletonProductCard

src/components/skeletons/SkeletonProductCard/index.ts

@@ -0,0 +1 @@
+export { default } from './SkeletonProductCard'

src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss → src/components/skeletons/SkeletonProductCard/skeleton-product-card.scss

@@ -1,6 +1,6 @@
 @import "../../../styles/scaffold";
 
-[data-store-product-card-skeleton] {
+[data-store-skeleton-product-card] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -27,7 +27,7 @@
     }
   }
 
-  [data-product-card-skeleton-image] {
+  [data-skeleton-product-card-image] {
     [data-element-variant="image"] {
       height: 45vw;
 
@@ -44,7 +44,7 @@
     }
   }
 
-  [data-product-card-skeleton-content] {
+  [data-skeleton-product-card-content] {
     position: relative;
     height: 20%;
     margin-top: var(--space-2);