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

package/src/components/ProductCardHorizontal/ProductCardHorizontal.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProductCardHorizontal, ProductCardHorizontalParts } from "./ProductCardHorizontal";
+
+const meta: Meta<typeof ProductCardHorizontal> = {
+  title: "Components/Cards/ProductCardHorizontal",
+  component: ProductCardHorizontal,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ProductCardHorizontal>;
+
+export const Default: Story = {
+  args: {
+    id: "1",
+    title: "GA 30+ - Oil-injected rotary screw compressor",
+    url: "#",
+    imageUrl: "https://via.placeholder.com/150",
+    price: "GBP 5,600.00",
+    description: "Reliable industrial compressor for demanding applications",
+  },
+};
+
+export const WithoutImage: Story = {
+  args: {
+    id: "2",
+    title: "GX 11 - Oil-free scroll compressor",
+    url: "#",
+    price: "GBP 3,250.00",
+  },
+};
+
+export const WithoutPrice: Story = {
+  args: {
+    id: "3",
+    title: "Vacuum Pump - Industrial Grade",
+    url: "#",
+    imageUrl: "https://via.placeholder.com/150",
+    description: "High-performance vacuum pump for industrial use",
+  },
+};
+
+export const WithButton: Story = {
+  args: {
+    id: "4",
+    title: "GA 30+ - Oil-injected rotary screw compressor",
+    url: "#",
+    imageUrl: "https://via.placeholder.com/150",
+    price: "GBP 5,600.00",
+    description: "Reliable industrial compressor",
+    button: { label: "View Product", onClick: () => window.open("#", "_blank") },
+  },
+};
+
+export const ProductCardHorizontalPartsDefault: StoryObj<typeof ProductCardHorizontalParts> = {
+  render: (args) => (
+    <div style={{ width: "300px" }}>
+      <ProductCardHorizontalParts {...args} />
+    </div>
+  ),
+  args: {
+    url: "#",
+    title: "GA 30+ - Oil-injected rotary screw compressor",
+    description: "A50873130",
+    price: "GBP 5,600.00",
+    button: { label: "Buy Now", onClick: () => window.open("#", "_blank") },
+    imageUrl: "https://via.placeholder.com/150",
+  },
+};

package/src/components/ProductCardHorizontal/ProductCardHorizontal.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { ProductCardHorizontalProps } from "../../types/cards";
+import styles from "./ProductCardHorizontal.module.scss";
+import { Button } from "../Button";
+import { Image } from "../Image";
+
+export const ProductCardHorizontal: React.FC<ProductCardHorizontalProps> = ({
+  id,
+  imageUrl,
+  url,
+  title,
+  description,
+  price,
+  button,
+  className = "",
+}) => {
+  if (!title) {
+    return null;
+  }
+
+  return (
+    <a
+      href={url}
+      className={`${styles.productCard} ${className}`}
+      aria-label={`View product: ${title}`}
+    >
+      <div className={`${styles.productWrapper} ${imageUrl ? styles.withImage : ""}`}>
+        {imageUrl && (
+          <div className={styles.productImage}>
+            <Image src={imageUrl} alt={title} />
+          </div>
+        )}
+        <div className={styles.productTitleDescriptionWrapper}>
+          <h3 className={styles.productTitle}>{title}</h3>
+          {description && <p className={styles.productDescription}>{description}</p>}
+        </div>
+        <div className={styles.productPriceCtaWrapper}>
+          <p className={styles.productPrice}>{price || " "}</p>
+          {button && (
+            <Button className={styles.productButton} onClick={button.onClick} size="small">
+              {button.label}
+            </Button>
+          )}
+        </div>
+      </div>
+    </a>
+  );
+};
+
+export const ProductCardHorizontalParts = ProductCardHorizontal;

package/src/components/ProductCardHorizontal/index.ts

@@ -0,0 +1,2 @@
+export { ProductCardHorizontal, ProductCardHorizontalParts } from "./ProductCardHorizontal";
+export type { ProductCardHorizontalProps } from "../../types/cards";

package/src/experience/algolia-dynamic-search/AlgoliaDynamicSearch.scss

@@ -0,0 +1,135 @@
+@use "../../utils/styles/base.scss" as *;
+
+:global {
+  @keyframes loading {
+    0% {
+      transform: skewX(-10deg) translateX(-100%);
+    }
+    100% {
+      transform: skewX(-10deg) translateX(200%);
+    }
+  }
+}
+
+.cmpAlgoliaDynamicSearchWidget {
+  position: relative;
+  padding: 2rem 1rem;
+  @media (min-width: 768px) {
+    padding: 4rem 1rem;
+  }
+
+  &.isLoading {
+    .cmpAlgoliaDynamicSearchWidget__placeholder {
+      opacity: 1;
+      z-index: 1;
+    }
+    .cmpAlgoliaDynamicSearchWidget__container {
+      opacity: 0;
+      z-index: -1;
+    }
+  }
+
+  &__container {
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    z-index: 1;
+    transition: opacity 0.5s;
+    @media (min-width: 961px) {
+      max-width: 1280px;
+    }
+  }
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    @media screen and (min-width: 768px) {
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: flex-start;
+    }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
+      margin: 0;
+      color: $secondary-color;
+    }
+    &__text {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      @media screen and (min-width: 768px) {
+        max-width: 75%;
+      }
+    }
+  }
+
+  &__cards {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr;
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    @media (min-width: 961px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  &.isQueryContent .cmpAlgoliaDynamicSearchWidget__cards {
+    grid-template-columns: repeat(2, 1fr);
+    @media (min-width: 961px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+
+  &.hasStyleSilverGradientBackground {
+    background: $bg-secondary;
+  }
+
+  &.hasStyleGreyBackground {
+    background: $secondary-color;
+    .cmpAlgoliaDynamicSearchWidget__header__text {
+      color: white;
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p {
+        color: white;
+      }
+    }
+  }
+}
+
+.cmpAlgoliaDynamicSearchWidget__placeholder {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 500px;
+  z-index: -1;
+  background-color: $secondary-color;
+  transition: opacity 0.5s;
+  &__loading::before {
+    content: "";
+    position: absolute;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
+    width: 50%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    animation: loading 1s infinite;
+  }
+}

package/src/experience/algolia-dynamic-search/AlgoliaDynamicSearch.stories.tsx

@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import AlgoliaDynamicSearchVT from "./AlgoliaDynamicSearch";
+import productData from "../../utils/data/algolia-dynamic-widget-product-data.json";
+
+const VT_DOMAIN = "https://www.atlascopco.com";
+
+const generatePath = (src: string) => `${VT_DOMAIN}${src}`;
+
+const cleanProductData = productData.hits.map((product: any) => {
+  const title = product.name
+    ? product.name.split(",").shift()?.trim() || "Product Title"
+    : "Product Title";
+  const code = product.code ? product.code : product.name?.split(",").pop()?.trim() || "";
+  const link = product.url ? generatePath(product.url) : "#";
+  const price = product.priceValue ? String(product.priceValue) : "£0.00";
+  const image = product["img-product"] ? generatePath(product["img-product"]) : "";
+  const spares = product.related_products ? product.related_products : [];
+  return {
+    image,
+    title,
+    code,
+    link,
+    price,
+    imageAlt: title,
+    spares,
+    ...product,
+  };
+});
+
+const meta: Meta<typeof AlgoliaDynamicSearchVT> = {
+  title: "Experience/AlgoliaDynamicSearch",
+  component: AlgoliaDynamicSearchVT,
+  argTypes: {
+    className: { table: { disable: true } },
+    backgroundColour: {
+      options: ["dark-grey", "silver", "white"],
+      control: { type: "select" },
+    },
+    queryType: {
+      options: ["products", "content", "careers"],
+      control: { type: "select" },
+    },
+    titleSize: {
+      options: ["h2", "h3", "h4", "h5", "h6"],
+      control: { type: "select" },
+    },
+    callToActionText: { control: { type: "text" }, table: { category: "Call To Action" } },
+    callToActionType: {
+      options: ["External", "Internal", "Email", "Phone"],
+      control: { type: "radio" },
+      table: { category: "Call To Action" },
+    },
+    callToActionTargetSelector: {
+      control: { type: "text" },
+      table: { category: "Call To Action" },
+    },
+    callToActionUrl: { control: { type: "text" }, table: { category: "Call To Action" } },
+    maxResults: { control: { type: "range", min: 3, max: 6, step: 1 } },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AlgoliaDynamicSearchVT>;
+
+export const Products: Story = {
+  args: {
+    className: "cmp-algolia-dynamic-search-widget",
+    heading: "Products from the webstore",
+    titleSize: "h2",
+    subtext:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    callToActionText: "Search",
+    callToActionUrl: "https://www.atlascopco.com",
+    queryType: "products",
+    hits: cleanProductData,
+    hitCta: "View Product",
+    query: "compressor",
+    showProductPrice: false,
+    backgroundColour: "dark-grey",
+    maxResults: 6,
+    isLoading: false,
+  },
+};
+
+export const ProductDetails: Story = {
+  render: (args) => (
+    <div style={{ maxWidth: "1200px", margin: "0 auto", backgroundColor: "#F6F7F9" }}>
+      <AlgoliaDynamicSearchVT {...args} />
+    </div>
+  ),
+  name: "Single Product",
+  args: {
+    className: "cmp-algolia-dynamic-search-widget",
+    queryType: "productDetails",
+    hits: cleanProductData,
+    hitCta: "View Product",
+    query: cleanProductData[0]?.code || "A50873130",
+    showProductPrice: true,
+    backgroundColour: "white",
+    maxResults: 1,
+    isLoading: false,
+    facets: [
+      { name: "powerTotalRated", label: "Power Total Rated" },
+      { name: "connectionVacuumInletFlange", label: "Connection Vacuum Inlet Flange" },
+      { name: "pumpingSpeedAirNitrogen", label: "Pumping Speed Air Nitrogen" },
+      { name: "pressureUltimate", label: "Pressure Ultimate" },
+    ],
+  },
+};

package/src/experience/algolia-dynamic-search/AlgoliaDynamicSearch.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { AlgoliaDynamicSearchRaw } from "@asantemedia-org/edwardsvacuum-design-system";
+import { ProductCardHorizontalParts } from "../../components/ProductCardHorizontal/ProductCardHorizontal";
+import { ProductCardDetails } from "../../components/ProductCardDetails/ProductCardDetails";
+import "./AlgoliaDynamicSearch.scss";
+
+const ProductCardAdapter = (props: any) => {
+  const { hit, title, cardLink, productPrice, cta, showProductPrice, className, code } = props;
+  const url = cardLink || hit?.link || "#";
+  const price = showProductPrice ? productPrice || hit?.price || "" : "";
+  const productTitle = title || hit?.title || "";
+  const productCode = code || hit?.code || "";
+  const buttonLabel = cta || "View Product";
+
+  return (
+    <ProductCardHorizontalParts
+      imageUrl=""
+      url={url}
+      title={productTitle}
+      description={productCode}
+      price={price}
+      button={{ label: buttonLabel, onClick: () => window.open(url, "_blank") }}
+      className={className}
+    />
+  );
+};
+
+const ProductCardDetailsAdapter = (props: any) => {
+  const {
+    hit,
+    title,
+    cardLink,
+    productPrice,
+    cta,
+    showProductPrice,
+    className,
+    code,
+    facets,
+    related_products,
+  } = props;
+  if (!title) {
+    return null;
+  }
+  return (
+    <ProductCardDetails
+      imageUrl={hit?.image || ""}
+      title={title}
+      description={hit?.description || ""}
+      price={hit?.price || productPrice || ""}
+      code={hit?.code || code || ""}
+      hit={hit}
+      className={className}
+      facets={facets}
+      relatedProducts={hit?.related_products || related_products}
+    />
+  );
+};
+
+export const AlgoliaDynamicSearchVT = (props: any) => {
+  const innerComponents = {
+    ProductCard: ProductCardAdapter,
+    ProductDetailsCard: ProductCardDetailsAdapter,
+  };
+  return <AlgoliaDynamicSearchRaw {...props} innerComponents={innerComponents} />;
+};
+
+export default AlgoliaDynamicSearchVT;

package/src/experience/algolia-dynamic-search/index.ts

@@ -0,0 +1,2 @@
+export { AlgoliaDynamicSearchVT } from "./AlgoliaDynamicSearch";
+export { default } from "./AlgoliaDynamicSearch";

package/src/experience/qr-form-journey/QrFormJourney.scss

@@ -0,0 +1,37 @@
+@use "../../utils/styles/base.scss" as *;
+
+.qr-journey-form-wrapper {
+  * {
+    font-family: $font-family-base;
+    font-size: $font-size-base;
+  }
+
+  ::placeholder {
+    font-style: normal;
+  }
+
+  h1 {
+    font-size: 28px;
+    font-weight: 400;
+    color: $text-secondary;
+    margin-bottom: 2em;
+    position: relative;
+    &::after {
+      content: "";
+      display: block;
+      position: relative;
+      top: 0.8em;
+      width: 100%;
+      height: 2px;
+      background-color: $border-color;
+    }
+  }
+
+  h2 {
+    font-size: 21px;
+    font-weight: 700;
+    line-height: 1.6em;
+    color: $primary-color;
+    margin: $spacing-md 0 0 0;
+  }
+}

package/src/experience/qr-form-journey/QrFormJourney.stories.tsx

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { QrFormVT } from "./QrFormJourney";
+
+const meta: Meta<typeof QrFormVT> = {
+  title: "Experience/QrFormJourney",
+  component: QrFormVT,
+  parameters: {
+    layout: "padded",
+  },
+};
+
+const defaultArgs = {
+  formHeader: "Contact Atlas Copco VT support for technical guidance",
+  next: "Next",
+  previous: "Previous",
+  submit: "Submit",
+  required: "This field is mandatory",
+  consents: [
+    {
+      policyMandatory: true,
+      policyText: "I have read and agree to the Privacy Policy.",
+      policyLink: "https://www.atlascopco.com/privacy-policy",
+    },
+    {
+      policyMandatory: false,
+      policyText: "I agree to receive marketing communications.",
+      policyLink: "https://www.atlascopco.com/marketing-opt-in",
+    },
+    {
+      policyMandatory: true,
+      policyText: "I confirm that I have read the Terms & Conditions.",
+      policyLink: "https://www.atlascopco.com/terms",
+    },
+  ],
+  fields: [
+    {
+      name: "serial-number",
+      label: "Serial Number",
+      value: "SerialNumber",
+      type: "text",
+      errorMessage: "",
+      isDisabled: true,
+    },
+    {
+      name: "product-number",
+      label: "Product Number",
+      value: "productNumber",
+      type: "text",
+      errorMessage: "",
+      isDisabled: true,
+    },
+    {
+      name: "product-hierarchy",
+      label: "Product Hierarchy",
+      value: "",
+      type: "text",
+      errorMessage: "",
+      isDisabled: true,
+    },
+    {
+      name: "software-version",
+      label: "Software Version",
+      value: "softwareVersion",
+      type: "text",
+      errorMessage: "",
+      isDisabled: true,
+    },
+  ],
+  showThankYou: false,
+  buttonText: "Submit",
+  linkType: "INTERNAL" as const,
+  url: "#",
+  newTab: false,
+  captchaKey: "FCMV995O03V7RIMQ",
+};
+
+export default meta;
+type Story = StoryObj<typeof QrFormVT>;
+
+function QrFormWithState(props: React.ComponentProps<typeof QrFormVT>) {
+  const [showThankYou, setShowThankYou] = React.useState(false);
+  return (
+    <QrFormVT {...props} showThankYou={showThankYou} onSubmit={() => setShowThankYou(true)} />
+  );
+}
+
+export const Default: Story = {
+  name: "QR Form Journey",
+  args: defaultArgs,
+  render: (args) => <QrFormWithState {...args} />,
+};
+
+export const InWrapper: Story = {
+  name: "QR Form (AEM-style wrapper)",
+  render: (args) => (
+    <div
+      className="qr-form-journey-aem-wrapper"
+      style={{ backgroundColor: "#f0f0f0", padding: "32px" }}
+    >
+      <QrFormVT {...args} />
+    </div>
+  ),
+  args: {
+    ...defaultArgs,
+    hubspotId: "formId123",
+    hubspotAppId: "PortalId123",
+    formAction: "",
+    fields: [
+      {
+        name: "serialNumber",
+        label: "Serial Number",
+        required: false,
+        value: "",
+        type: "text",
+        placeholder: "",
+        errorMessage: "",
+        isDisabled: true,
+        checked: false,
+      },
+      {
+        name: "productNumber",
+        label: "Product Number",
+        required: false,
+        value: "",
+        placeholder: "",
+        type: "text",
+        errorMessage: "",
+        isDisabled: false,
+        checked: false,
+      },
+    ],
+  },
+};

package/src/experience/qr-form-journey/QrFormJourney.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { QrForm } from "@asantemedia-org/edwardsvacuum-design-system";
+import "./QrFormJourney.scss";
+import { Button } from "../../components/Button";
+
+interface QrFormButtonProps {
+  label?: string;
+  onClick?: (e: React.MouseEvent) => void;
+  buttonStyle?: "primary" | "secondary";
+  href?: string;
+  target?: string;
+  type?: "button" | "submit";
+  element?: "a" | "button";
+  "data-page_target"?: number;
+  className?: string;
+}
+
+const QrFormButtonAdapter: React.FC<QrFormButtonProps> = ({
+  label,
+  onClick,
+  buttonStyle = "primary",
+  href,
+  target,
+  type = "button",
+  element,
+  "data-page_target": pageTarget,
+  className,
+}) => {
+  const variant = buttonStyle === "secondary" ? "secondary" : "primary";
+
+  if (element === "a" || href) {
+    return (
+      <a
+        href={href}
+        target={target}
+        className={className}
+        data-page_target={pageTarget}
+        onClick={onClick}
+        style={{ display: "inline-block", textDecoration: "none" }}
+      >
+        <Button variant={variant} type={type} size="small">
+          {label}
+        </Button>
+      </a>
+    );
+  }
+
+  return (
+    <Button
+      variant={variant}
+      type={type}
+      onClick={onClick ? (e) => onClick(e as React.MouseEvent) : undefined}
+      className={className}
+      size="small"
+    >
+      {label}
+    </Button>
+  );
+};
+
+export const QrFormVT = (props: any) => {
+  return (
+    <div className="qr-journey-form-wrapper">
+      <QrForm {...props} ButtonComponent={QrFormButtonAdapter} />
+    </div>
+  );
+};
+
+export default QrFormVT;

package/src/experience/qr-form-journey/index.ts

@@ -0,0 +1,2 @@
+export { QrFormVT } from "./QrFormJourney";
+export { default } from "./QrFormJourney";