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

package/src/index.ts

@@ -0,0 +1,19 @@
+// Atlas Copco VTBA Design System – entry point
+
+export { Button } from "./components/Button";
+export type { ButtonProps, ButtonVariant } from "./components/Button";
+
+export { Image } from "./components/Image";
+export type { ImageProps } from "./components/Image";
+
+export {
+  ProductCardHorizontal,
+  ProductCardHorizontalParts,
+} from "./components/ProductCardHorizontal";
+export type { ProductCardHorizontalProps } from "./types/cards";
+
+export { ProductCardDetails } from "./components/ProductCardDetails";
+export type { ProductCardDetailsProps } from "./types/cards";
+
+export { AlgoliaDynamicSearchVT } from "./experience/algolia-dynamic-search";
+export { QrFormVT } from "./experience/qr-form-journey";

package/src/stories/foundation/_components/StoryLayout.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+
+interface StoryFooterProps {
+  children: React.ReactNode;
+}
+
+export const StoryFooter = ({ children }: StoryFooterProps) => (
+  <div
+    style={{
+      backgroundColor: "color-mix(in srgb, var(--atlascopco-grey-300) 30%, transparent)",
+      width: "100vw",
+      marginLeft: "calc(50% - 50vw)",
+      paddingTop: "64px",
+      paddingBottom: "64px",
+      paddingLeft: "calc(50vw - 50%)",
+      paddingRight: "calc(50vw - 50%)",
+    }}
+  >
+    {children}
+  </div>
+);
+
+interface StoryHeaderProps {
+  title: string;
+  subtitle: string;
+}
+
+export const StoryHeader = ({ title, subtitle }: StoryHeaderProps) => (
+  <div
+    style={{
+      backgroundColor: "color-mix(in srgb, var(--atlascopco-grey-300) 30%, transparent)",
+      width: "100vw",
+      marginLeft: "calc(50% - 50vw)",
+      marginBottom: "54px",
+      paddingTop: "85px",
+      paddingBottom: "85px",
+      paddingLeft: "calc(50vw - 50%)",
+      paddingRight: "calc(50vw - 50%)",
+    }}
+  >
+    <h1
+      style={{
+        fontFamily: "var(--font-family-base)",
+        fontWeight: 700,
+        fontSize: "var(--text-xxl-size)",
+        color: "var(--atlascopco-blue)",
+        margin: 0,
+        marginBottom: "24px",
+        lineHeight: "var(--text-xxl-line-height)",
+      }}
+    >
+      {title}
+    </h1>
+    <div
+      style={{
+        fontFamily: "var(--font-family-base)",
+        fontWeight: 400,
+        fontSize: "var(--text-xl-size)",
+        color: "var(--atlascopco-black)",
+        margin: 0,
+        lineHeight: "var(--text-xl-line-height)",
+      }}
+    >
+      {subtitle}
+    </div>
+  </div>
+);

package/src/stories/introduction/Welcome.mdx

@@ -0,0 +1,36 @@
+import { Meta, Unstyled } from "@storybook/blocks";
+import { StoryHeader, StoryFooter } from "../foundation/_components/StoryLayout";
+
+<Meta title="Introduction/Welcome" />
+
+<Unstyled>
+
+<StoryHeader
+  title="Welcome to the Atlas Copco VTBA Design System"
+  subtitle="A design system for consistent, on-brand experiences across VTBA digital products."
+/>
+
+<div style={{ fontFamily: "var(--font-family-base)", fontSize: "24px", fontWeight: 400, color: "var(--atlascopco-grey-500)", lineHeight: "32px", marginBottom: "32px", maxWidth: "1002px", paddingLeft: "32px" }}>
+  This Storybook is your single source of truth for components, patterns, and guidelines. Use it to build accessible, consistent UIs for Atlas Copco VTBA applications.
+</div>
+
+<div style={{ fontFamily: "var(--font-family-base)", fontSize: "24px", fontWeight: 700, color: "var(--atlascopco-grey-500)", lineHeight: "32px", marginBottom: "32px", maxWidth: "1002px", paddingLeft: "32px" }}>
+  Built with React and Storybook 7—ready for designers and developers.
+</div>
+
+<div style={{ fontFamily: "var(--font-family-base)", fontSize: "24px", fontWeight: 400, color: "var(--atlascopco-grey-500)", lineHeight: "32px", marginBottom: "64px", maxWidth: "1002px", paddingLeft: "32px" }}>
+  Explore the sidebar for Introduction, Foundation, and Components. Add new stories as you build.
+</div>
+
+<StoryFooter>
+  <div style={{ paddingLeft: "32px" }}>
+    <h2 style={{ fontFamily: "var(--font-family-base)", fontWeight: 700, fontSize: "32px", color: "var(--atlascopco-grey-500)", margin: 0, marginBottom: "24px", lineHeight: "1.4" }}>
+      Questions or feedback?
+    </h2>
+    <p style={{ fontFamily: "var(--font-family-base)", fontSize: "24px", fontWeight: 400, color: "var(--atlascopco-grey-500)", lineHeight: "32px", margin: 0, maxWidth: "1002px" }}>
+      Reach out to your design or development lead to contribute or request new components.
+    </p>
+  </div>
+</StoryFooter>
+
+</Unstyled>

package/src/types/buttons.ts

@@ -0,0 +1,4 @@
+export interface ButtonProps {
+  label: string;
+  onClick: () => void;
+}

package/src/types/cards.ts

@@ -0,0 +1,37 @@
+import type React from "react";
+import type { ButtonProps } from "./buttons";
+
+export interface ProductCardHorizontalProps {
+  id?: string;
+  title: string;
+  url: string;
+  imageUrl?: string;
+  productId?: string;
+  price?: string;
+  description?: string;
+  className?: string;
+  button?: ButtonProps;
+}
+
+export type ProductCardHorizontalPartsProps = ProductCardHorizontalProps;
+
+export interface ProductCardDetailsProps {
+  id?: string;
+  title: string;
+  description?: string;
+  price?: string;
+  code?: string;
+  imageUrl?: string;
+  className?: string;
+  button?: ButtonProps;
+  facets?: Array<{ name: string; label: string; returnsHTML?: boolean }>;
+  hit?: Record<string, unknown>;
+  ProductCardComponent?: React.FC<ProductCardHorizontalProps>;
+  relatedProducts?: Array<{
+    code: string;
+    name: string;
+    price_range: string;
+    img_product: string;
+    url: string;
+  }>;
+}

package/src/utils/data/algolia-dynamic-widget-product-data.json

@@ -0,0 +1,46 @@
+{
+  "hits": [
+    {
+      "name": "GA 30+ - Oil-injected rotary screw compressor, A50873130",
+      "code": "A50873130",
+      "url": "/vt/products/compressors/ga-30/p/A50873130",
+      "img-product": "/medias/ga-30-product.png",
+      "priceValue": "5600",
+      "description": "<h2>Industrial Compressors</h2><p>Atlas Copco GA 30+ oil-injected rotary screw compressors deliver reliable performance for demanding industrial applications.</p>",
+      "related_products": [
+        {
+          "code": "A50871100",
+          "name": "Service Kit - GA 30",
+          "price_range": "200-499.99",
+          "img_product": "",
+          "url": "/vt/products/kits/A50871100"
+        }
+      ],
+      "objectID": "11867339653121",
+      "powerTotalRated": "power_kW|30.00#power_W|30000.00",
+      "connectionVacuumInletFlange": "3/4\" BSPP Female",
+      "pumpingSpeedAirNitrogen": "volumeFlowRate_l/s|30.56",
+      "pressureUltimate": "pressure_bar|0.200#pressure_mbar|200.00"
+    },
+    {
+      "name": "GX 11 - Oil-free scroll compressor, A50871954",
+      "code": "A50871954",
+      "url": "/vt/products/compressors/gx-11/p/A50871954",
+      "img-product": "/medias/gx-11-product.png",
+      "priceValue": "3250",
+      "description": "<h2>Oil-free Scroll</h2><p>Atlas Copco GX 11 oil-free scroll compressors are designed for clean air applications with minimal maintenance.</p>",
+      "related_products": [
+        {
+          "code": "A50871100",
+          "name": "Filter Kit - GX 11",
+          "price_range": "100-199.99",
+          "img_product": "",
+          "url": "/vt/products/kits/A50871100"
+        }
+      ],
+      "objectID": "13068074123265",
+      "powerTotalRated": "power_kW|11.00#power_W|11000.00",
+      "pressureUltimate": "pressure_bar|0.150#pressure_mbar|150.00"
+    }
+  ]
+}

package/src/utils/styles/base.scss

@@ -0,0 +1,100 @@
+// Base SCSS – Atlas Copco VTBA design tokens
+// Primary palette: Atlas Copco blue
+
+// =============================================================================
+// ATLAS COPCO COLOR PALETTE
+// =============================================================================
+
+$atlascopco-blue: #0062b0;
+$atlascopco-blue-dark: #004a85;
+$atlascopco-black: #000000;
+$atlascopco-white: #ffffff;
+
+// Greyscale
+$atlascopco-grey-100: #f5f5f5;
+$atlascopco-grey-200: #e0e0e0;
+$atlascopco-grey-300: #c5c7c4;
+$atlascopco-grey-400: #99a1ab;
+$atlascopco-grey-500: #4a4e54;
+$atlascopco-grey-600: #383e42;
+
+// Semantic
+$primary-color: $atlascopco-blue;
+$secondary-color: $atlascopco-grey-500;
+$text-primary: $atlascopco-black;
+$text-secondary: $atlascopco-grey-500;
+$text-muted: $atlascopco-grey-400;
+$bg-primary: $atlascopco-white;
+$bg-secondary: $atlascopco-grey-100;
+$border-color: $atlascopco-grey-300;
+
+// =============================================================================
+// TYPOGRAPHY & SPACING
+// =============================================================================
+
+$font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
+$font-size-base: 18px;
+$font-size-root: 18px;
+$line-height-base: 1.5;
+
+$spacing-xs: 0.25rem;
+$spacing-sm: 0.5rem;
+$spacing-md: 1rem;
+$spacing-lg: 1.5rem;
+$spacing-xl: 2rem;
+
+$breakpoint-xs: 375px;
+$breakpoint-sm: 768px;
+$breakpoint-md: 992px;
+$breakpoint-lg: 1024px;
+$breakpoint-xl: 1440px;
+
+@mixin respond-to($breakpoint) {
+  @media (min-width: $breakpoint) {
+    @content;
+  }
+}
+
+// =============================================================================
+// CSS CUSTOM PROPERTIES
+// =============================================================================
+
+:root {
+  --atlascopco-blue: #{$atlascopco-blue};
+  --atlascopco-blue-dark: #{$atlascopco-blue-dark};
+  --atlascopco-black: #{$atlascopco-black};
+  --atlascopco-white: #{$atlascopco-white};
+  --atlascopco-grey-100: #{$atlascopco-grey-100};
+  --atlascopco-grey-200: #{$atlascopco-grey-200};
+  --atlascopco-grey-300: #{$atlascopco-grey-300};
+  --atlascopco-grey-400: #{$atlascopco-grey-400};
+  --atlascopco-grey-500: #{$atlascopco-grey-500};
+  --atlascopco-grey-600: #{$atlascopco-grey-600};
+  --color-primary: #{$primary-color};
+  --font-family-base: #{$font-family-base};
+
+  --h1-mobile-size: 32px;
+  --h1-mobile-line-height: 1.2;
+  --h2-mobile-size: 24px;
+  --h2-mobile-line-height: 1.2;
+  --h3-mobile-size: 18px;
+  --h3-mobile-line-height: 1.6;
+  --body-mobile-size: 14px;
+  --body-mobile-line-height: 1.5;
+
+  --h1-desktop-size: 55px;
+  --h1-desktop-line-height: 1.15;
+  --h2-desktop-size: 40px;
+  --h2-desktop-line-height: 1.2;
+  --h3-desktop-size: 32px;
+  --h3-desktop-line-height: 1.2;
+  --body-desktop-size: 18px;
+  --body-desktop-line-height: 1.6;
+
+  --text-lg-size: 27px;
+  --text-lg-line-height: 1.4;
+  --text-xl-size: 36px;
+  --text-xl-line-height: 1.4;
+  --text-xxl-size: 64px;
+  --text-xxl-line-height: 1;
+}

package/src/utils/styles/global.scss

@@ -0,0 +1,29 @@
+// Global styles for Atlas Copco VTBA Design System
+@use "./base.scss" as *;
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 18px;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  font-family: var(--font-family-base);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

package/src/utils/styles/index.ts

@@ -0,0 +1 @@
+export {};

package/src/utils/styles/typography.scss

@@ -0,0 +1,60 @@
+@use "base" as *;
+
+h1, .h1 {
+  font-family: var(--font-family-base);
+  font-weight: 700;
+  font-size: var(--h1-mobile-size);
+  line-height: var(--h1-mobile-line-height);
+  @include respond-to($breakpoint-md) {
+    font-size: var(--h1-desktop-size);
+    line-height: var(--h1-desktop-line-height);
+  }
+}
+
+h2, .h2 {
+  font-family: var(--font-family-base);
+  font-weight: 700;
+  font-size: var(--h2-mobile-size);
+  line-height: var(--h2-mobile-line-height);
+  @include respond-to($breakpoint-md) {
+    font-size: var(--h2-desktop-size);
+    line-height: var(--h2-desktop-line-height);
+  }
+}
+
+h3, .h3 {
+  font-family: var(--font-family-base);
+  font-weight: 700;
+  font-size: var(--h3-mobile-size);
+  line-height: var(--h3-mobile-line-height);
+  @include respond-to($breakpoint-md) {
+    font-size: var(--h3-desktop-size);
+    line-height: var(--h3-desktop-line-height);
+  }
+}
+
+.body {
+  font-family: var(--font-family-base);
+  font-weight: 400;
+  font-size: var(--body-mobile-size);
+  line-height: var(--body-mobile-line-height);
+  @include respond-to($breakpoint-md) {
+    font-size: var(--body-desktop-size);
+    line-height: var(--body-desktop-line-height);
+  }
+}
+
+.text-lg {
+  font-size: var(--text-lg-size);
+  line-height: var(--text-lg-line-height);
+}
+
+.text-xl {
+  font-size: var(--text-xl-size);
+  line-height: var(--text-xl-line-height);
+}
+
+.text-xxl {
+  font-size: var(--text-xxl-size);
+  line-height: var(--text-xxl-line-height);
+}

package/tailwind.config.js

@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx}",
+    "./src/components/**/*.{js,ts,jsx,tsx}",
+    "./src/app/**/*.{js,ts,jsx,tsx}",
+    "./src/stories/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+};

package/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": false,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "declaration": true,
+    "plugins": [{ "name": "next" }],
+    "baseUrl": "./",
+    "outDir": "dist",
+    "paths": {
+      "@stories/*": ["src/stories/*"],
+      "@components/*": ["src/components/*"],
+      "*": ["types/*"]
+    },
+    "types": ["node"],
+    "typeRoots": ["./node_modules/@types"]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    ".storybook/**/*.ts",
+    ".storybook/**/*.tsx",
+    "types/**/*.d.ts"
+  ],
+  "exclude": ["node_modules", "dist"]
+}

package/types/@asantemedia-org__edwardsvacuum-design-system.d.ts

@@ -0,0 +1,8 @@
+declare module "@asantemedia-org/edwardsvacuum-design-system" {
+  export const allQrFromProps: any;
+  export const QrForm: any;
+  export const AlgoliaDynamicSearchRaw: any;
+  export const ProductDetailsCard: any;
+  const _default: any;
+  export default _default;
+}