@asantemedia-org/atlas-copco-vt-storybook 1.0.0

package/src/components/Button/Button.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import styles from "./Button.module.scss";
+import classNames from "classnames";
+
+export type ButtonVariant = "primary" | "secondary" | "outlined";
+
+export interface ButtonProps {
+  children?: React.ReactNode;
+  variant?: ButtonVariant;
+  size?: "small" | "medium" | "large";
+  disabled?: boolean;
+  onClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
+  type?: "button" | "submit" | "reset";
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  variant = "primary",
+  size = "medium",
+  disabled = false,
+  onClick,
+  type = "button",
+  className,
+  ...props
+}) => {
+  const buttonClasses = classNames(
+    styles.button,
+    styles[`button--${variant}`],
+    styles[`button--${size}`],
+    { [styles["button--disabled"]]: disabled },
+    className
+  );
+
+  return (
+    <button
+      type={type}
+      className={buttonClasses}
+      disabled={disabled}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+export type { ButtonProps, ButtonVariant } from "./Button";

package/src/components/Image/Image.module.scss

@@ -0,0 +1,75 @@
+.imageContainer {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  border-radius: 0.25rem;
+
+  &.loading {
+    .image {
+      opacity: 0;
+    }
+  }
+
+  &.error {
+    .image {
+      display: none;
+    }
+  }
+}
+
+.image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.skeleton {
+  position: absolute;
+  inset: 0;
+  background-color: #e5e7eb;
+  overflow: hidden;
+}
+
+.shimmer {
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.errorState {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  background-color: #f9fafb;
+  color: #9ca3af;
+}
+
+.errorIcon {
+  width: 2rem;
+  height: 2rem;
+  opacity: 0.6;
+}
+
+.errorText {
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.imageContainer:focus-visible {
+  outline: 2px solid #0062b0;
+  outline-offset: 2px;
+}

package/src/components/Image/Image.tsx

@@ -0,0 +1,114 @@
+import React, { useState, useCallback } from "react";
+import { ImageProps } from "./Image.types";
+import styles from "./Image.module.scss";
+
+export const Image: React.FC<ImageProps> = ({
+  src,
+  alt,
+  width,
+  height,
+  loading = "lazy",
+  decoding = "async",
+  objectFit = "cover",
+  objectPosition = "center",
+  aspectRatio,
+  isDecorative = false,
+  fallbackSrc,
+  onLoad,
+  onError,
+  className = "",
+  srcSet,
+  sizes,
+}) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+  const [currentSrc, setCurrentSrc] = useState(src);
+
+  const handleLoad = useCallback(() => {
+    setIsLoading(false);
+    setHasError(false);
+    onLoad?.();
+  }, [onLoad]);
+
+  const handleError = useCallback(() => {
+    setIsLoading(false);
+    setHasError(true);
+    if (fallbackSrc && currentSrc !== fallbackSrc) {
+      setCurrentSrc(fallbackSrc);
+      setHasError(false);
+      setIsLoading(true);
+    } else {
+      onError?.();
+    }
+  }, [fallbackSrc, currentSrc, onError]);
+
+  const accessibilityProps = isDecorative
+    ? { alt: "", "aria-hidden": true as const, role: "presentation" as const }
+    : { alt };
+
+  const containerStyle: React.CSSProperties = {
+    ...(aspectRatio && { aspectRatio }),
+    ...(width && { width: typeof width === "number" ? `${width}px` : width }),
+    ...(height && { height: typeof height === "number" ? `${height}px` : height }),
+  };
+
+  const imageStyle: React.CSSProperties = {
+    objectFit,
+    objectPosition,
+  };
+
+  return (
+    <div
+      className={`${styles.imageContainer} ${className} ${isLoading ? styles.loading : ""} ${
+        hasError ? styles.error : ""
+      }`}
+      style={containerStyle}
+    >
+      {isLoading && (
+        <div className={styles.skeleton} aria-hidden="true">
+          <div className={styles.shimmer} />
+        </div>
+      )}
+      {hasError && !fallbackSrc ? (
+        <div className={styles.errorState} role="img" aria-label={alt || "Image failed to load"}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className={styles.errorIcon}
+            aria-hidden="true"
+          >
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+            <circle cx="8.5" cy="8.5" r="1.5" />
+            <polyline points="21 15 16 10 5 21" />
+          </svg>
+          <span className={styles.errorText}>Image unavailable</span>
+        </div>
+      ) : (
+        // Design system Image uses <img> for portability; next/image not required here
+        // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+        <img
+          src={currentSrc}
+          alt={isDecorative ? "" : alt ?? ""}
+          {...(isDecorative && { "aria-hidden": true, role: "presentation" })}
+          width={width}
+          height={height}
+          loading={loading}
+          decoding={decoding}
+          onLoad={handleLoad}
+          onError={handleError}
+          className={styles.image}
+          style={imageStyle}
+          srcSet={srcSet}
+          sizes={sizes}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Image;

package/src/components/Image/Image.types.ts

@@ -0,0 +1,34 @@
+export interface ImageProps {
+  /** Image source URL */
+  src: string;
+  /** Alt text for accessibility - required for non-decorative images */
+  alt: string;
+  /** Optional width */
+  width?: number | string;
+  /** Optional height */
+  height?: number | string;
+  /** Loading strategy */
+  loading?: "lazy" | "eager";
+  /** Decoding hint */
+  decoding?: "async" | "sync" | "auto";
+  /** Object fit behavior */
+  objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+  /** Object position */
+  objectPosition?: string;
+  /** Aspect ratio (e.g., "16/9", "4/3", "1/1") */
+  aspectRatio?: string;
+  /** Whether this is a decorative image (sets alt="" and aria-hidden) */
+  isDecorative?: boolean;
+  /** Fallback image URL if src fails to load */
+  fallbackSrc?: string;
+  /** Callback when image loads successfully */
+  onLoad?: () => void;
+  /** Callback when image fails to load */
+  onError?: () => void;
+  /** Additional CSS class */
+  className?: string;
+  /** Responsive image srcset */
+  srcSet?: string;
+  /** Responsive image sizes */
+  sizes?: string;
+}

package/src/components/Image/index.ts

@@ -0,0 +1,2 @@
+export { Image } from "./Image";
+export type { ImageProps } from "./Image.types";

package/src/components/ProductCardDetails/ProductCardDetails.module.scss

@@ -0,0 +1,129 @@
+@use "../../utils/styles/base.scss" as *;
+
+.productDetails {
+  :global(.cmp-card--type-product_details) {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    grid-template-rows: auto;
+    @include respond-to($breakpoint-md) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  :global(.cmp-card--type-product_details__product-info) {
+    position: relative;
+    max-width: 480px;
+  }
+
+  :global(.cmp-card--type-product_details__header) {
+    margin-bottom: 1rem;
+  }
+
+  :global(.cmp-card--type-product_details__header__title) {
+    font-size: 21px;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    text-transform: uppercase;
+    color: $primary-color;
+    @media (min-width: 768px) {
+      max-width: 325px;
+    }
+  }
+
+  :global(.cmp-card--type-product_details__header__product-code) {
+    font-size: 0.875rem;
+    color: $text-secondary;
+    margin-bottom: 1rem;
+  }
+
+  :global(.cmp-card--type-product_details__header__product-image) {
+    max-width: 100%;
+    height: auto;
+  }
+
+  :global(.cmp-card--type-product_details__spares-list) {
+    position: relative;
+  }
+
+  :global(.folding-spares-list) {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    grid-template-rows: auto;
+    gap: 10px;
+    margin-left: 0;
+    padding-left: 0;
+    @include respond-to($breakpoint-md) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    li {
+      list-style: none;
+      margin-bottom: 0;
+      font-size: 14px;
+    }
+  }
+
+  :global(.folding-specification-list) {
+    margin-left: 0;
+    padding-left: 0;
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    grid-template-rows: auto;
+    gap: 10px;
+    @include respond-to($breakpoint-md) {
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-areas: "list-item-1 list-item-2";
+    }
+    li {
+      list-style: none;
+      margin-bottom: 0.75rem;
+      font-size: 14px;
+      strong {
+        color: $atlascopco-grey-600;
+      }
+      & > *:first-child {
+        line-height: 2;
+      }
+    }
+  }
+
+  :global(.folding-specification-holder) {
+    margin-bottom: 1rem;
+  }
+
+  :global(.folding-spares-holder) {
+    margin-bottom: 1rem;
+  }
+
+  :global(.accordion-section) {
+    margin-bottom: 0.5rem;
+    &.open {
+      border-color: $primary-color;
+    }
+  }
+
+  :global(.accordion-section__header) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0;
+    cursor: pointer;
+  }
+
+  :global(.accordion-section__title) {
+    font-size: 1rem;
+    font-weight: 600;
+    color: $atlascopco-grey-600;
+    margin: 0;
+  }
+
+  :global(.accordion-section__icon) {
+    color: $text-primary !important;
+    svg {
+      color: inherit !important;
+    }
+  }
+
+  :global(.accordion-section__content) {
+    padding: 0 0 1rem 0;
+  }
+}

package/src/components/ProductCardDetails/ProductCardDetails.stories.tsx

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProductCardDetails } from "./ProductCardDetails";
+
+const meta: Meta<typeof ProductCardDetails> = {
+  title: "Components/Cards/ProductCardDetails",
+  component: ProductCardDetails,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ProductCardDetails>;
+
+const sampleImage = "https://via.placeholder.com/400x300?text=Atlas+Copco+Product";
+
+const sampleHit = {
+  objectID: "U20084880",
+  code: "U20084880",
+  name: "Pump Kit And Checklist",
+  title: "Pump Kit And Checklist",
+  image: sampleImage,
+  description:
+    "<h2>Kits</h2><p>Choose genuine Atlas Copco service kits for reliable operation of pumps when properly fitted.</p><ul><li>Genuine parts</li><li>Complete kit contents</li><li>Quality assured</li></ul>",
+  price: "£49.99",
+  priceValue: "0-49.99",
+  itemtype: "Spare Part",
+  powerTotalRated: "N/A",
+  stockLevelStatus: "In Stock",
+  url: "#",
+  spares: [
+    {
+      objectID: "spare-1",
+      code: "SP001",
+      name: "O-Ring Kit",
+      "img-product": sampleImage,
+      priceValue: "£12.99",
+      url: "#",
+    },
+    {
+      objectID: "spare-2",
+      code: "SP002",
+      name: "Gasket Set",
+      "img-product": sampleImage,
+      priceValue: "£24.99",
+      url: "#",
+    },
+    {
+      objectID: "spare-3",
+      code: "SP003",
+      name: "Bearing Assembly",
+      "img-product": sampleImage,
+      priceValue: "£89.99",
+      url: "#",
+    },
+  ],
+};
+
+const sampleFacets = [
+  { name: "itemtype", label: "Item Type" },
+  { name: "powerTotalRated", label: "Power Total Rated" },
+  { name: "stockLevelStatus", label: "Stock Level Status" },
+];
+
+export const Default: Story = {
+  args: {
+    title: "Pump Kit And Checklist",
+    imageUrl: sampleImage,
+    code: "U20084880",
+    hit: sampleHit,
+    facets: sampleFacets,
+  },
+};
+
+export const WithSpares: Story = {
+  args: {
+    title: "GA 30+ - Oil-injected rotary screw compressor",
+    imageUrl: sampleImage,
+    code: "GA30-VT",
+    hit: {
+      ...sampleHit,
+      title: "GA 30+ - Oil-injected rotary screw compressor",
+      code: "GA30-VT",
+      description:
+        "<h2>Industrial Compressor</h2><p>The GA 30+ series offers reliable performance for demanding industrial applications.</p>",
+      itemtype: "Compressor",
+      powerTotalRated: "30 kW",
+      stockLevelStatus: "Available",
+    },
+    facets: sampleFacets,
+  },
+};
+
+export const WithoutSpares: Story = {
+  args: {
+    title: "Replacement Filter Element",
+    imageUrl: sampleImage,
+    code: "FE-001",
+    hit: {
+      objectID: "FE-001",
+      code: "FE-001",
+      name: "Replacement Filter Element",
+      title: "Replacement Filter Element",
+      image: sampleImage,
+      description: "<p>High-quality replacement filter for optimal performance.</p>",
+      price: "£35.00",
+      itemtype: "Filter",
+      stockLevelStatus: "In Stock",
+      spares: [],
+    },
+    facets: [
+      { name: "itemtype", label: "Item Type" },
+      { name: "stockLevelStatus", label: "Stock Level Status" },
+      { name: "description", label: "Description", returnsHTML: true },
+    ],
+  },
+};
+
+export const NoImage: Story = {
+  args: {
+    title: "Service Manual - Digital",
+    code: "SM-DIG-001",
+    hit: {
+      objectID: "SM-DIG-001",
+      code: "SM-DIG-001",
+      title: "Service Manual - Digital",
+      description: "<p>Comprehensive digital service manual for maintenance.</p>",
+      itemtype: "Documentation",
+      stockLevelStatus: "Available",
+    },
+    facets: [
+      { name: "itemtype", label: "Item Type" },
+      { name: "stockLevelStatus", label: "Availability" },
+      { name: "description", label: "Description", returnsHTML: true },
+    ],
+  },
+};

package/src/components/ProductCardDetails/ProductCardDetails.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { ProductDetailsCard as ProductDetailsCardBase } from "@asantemedia-org/edwardsvacuum-design-system";
+import { ProductCardHorizontalParts } from "../ProductCardHorizontal/ProductCardHorizontal";
+import { ProductCardDetailsProps } from "../../types/cards";
+import styles from "./ProductCardDetails.module.scss";
+
+const SpareCardAdapter = (props: any) => {
+  const { spare, ...rest } = props;
+  return (
+    <ProductCardHorizontalParts
+      url={spare?.url || spare?.link || "#"}
+      title={spare?.name || spare?.title || ""}
+      description={spare?.description || ""}
+      price={spare?.priceValue || spare?.price || ""}
+      imageUrl={spare?.["img-product"] || spare?.image || ""}
+      button={{
+        label: rest.cta || "View Product",
+        onClick: () => window.open(spare?.url || spare?.link || "#", "_blank"),
+      }}
+    />
+  );
+};
+
+export const ProductCardDetails: React.FC<ProductCardDetailsProps> = ({
+  id,
+  imageUrl,
+  title,
+  description,
+  price,
+  code,
+  facets,
+  hit,
+  className = "",
+  ProductCardComponent,
+}) => {
+  const hitData = hit || {
+    id,
+    title,
+    description,
+    price,
+    code,
+    image: imageUrl,
+  };
+
+  return (
+    <div className={styles.productDetails}>
+      <ProductDetailsCardBase
+        className={`${className}`}
+        title={title}
+        imageUrl={imageUrl}
+        imageAlt={title}
+        hit={hitData}
+        facets={facets}
+        usePlainClasses={true}
+        ProductCardComponent={ProductCardComponent || SpareCardAdapter}
+      />
+    </div>
+  );
+};
+
+export default ProductCardDetails;

package/src/components/ProductCardDetails/index.ts

@@ -0,0 +1,2 @@
+export { ProductCardDetails } from "./ProductCardDetails";
+export type { ProductCardDetailsProps } from "../../types/cards";

package/src/components/ProductCardHorizontal/ProductCardHorizontal.module.scss

@@ -0,0 +1,93 @@
+@use "../../utils/styles/base.scss" as *;
+
+.productCard {
+  display: block;
+  border: 1px solid transparent;
+  h3,
+  p {
+    margin: 0;
+  }
+  &:focus-visible {
+    outline: 1px solid $primary-color;
+    outline-offset: 1px;
+  }
+}
+
+.productWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+  padding: calc($spacing-md * 0.5) !important;
+  background-color: white;
+  box-shadow: 2.7px 2.7px 5px 0 rgba(0, 0, 0, 0.1);
+
+  &.withImage {
+    display: grid;
+    grid-template-columns: 75px repeat(2, minmax(80px, 1fr));
+    grid-template-rows: repeat(3, auto);
+    grid-template-areas:
+      "image description description"
+      "image description description"
+      "image cta cta";
+    row-gap: calc($spacing-xs * 0.5);
+    .productTitle {
+      font-size: clamp(12px, 1.25vw, 14px);
+    }
+    .productDescription {
+      font-size: clamp(12px, 1.25vw, 14px);
+    }
+    .productPrice {
+      font-size: clamp(12px, 1.25vw, 14px);
+    }
+  }
+}
+
+.productImage {
+  grid-area: image;
+  flex-shrink: 0;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.productTitle,
+h3.productTitle {
+  margin: 0 0 0.25rem 0;
+  font-size: clamp(12px, 1.25vw, 14px);
+  font-weight: 600;
+  color: $text-primary;
+  line-height: 1.4;
+}
+
+.productDescription {
+  margin: 0 0 0.5rem 0;
+  font-size: clamp(14px, 1.25vw, 1.5rem);
+  color: $text-secondary;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.productPrice {
+  margin: 0;
+  font-size: clamp(14px, 1.25vw, 1.5rem);
+  font-weight: 700;
+  color: $text-primary;
+}
+
+.productTitleDescriptionWrapper {
+  grid-area: description;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.productPriceCtaWrapper {
+  grid-area: cta;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}