@affinda/wc 0.0.15 → 0.0.16

package/dist/collection/components/af-in-page-banner/af-in-page-banner.css

@@ -0,0 +1,379 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* ==========================================================================
+   Banner Container
+   
+   Design specs from Figma:
+   - Desktop: max-width 1280px, gap 40px, left padding 40px, right padding 148px
+   - Border radius: 32px (desktop), 24px (mobile)
+   - Content padding vertical: 48px (margins/margin TB tight)
+   ========================================================================== */
+
+.banner {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 40px;
+  padding-left: 40px;
+  padding-right: 148px;
+  padding-top: 0;
+  padding-bottom: 0;
+  border-radius: var(--radii-card-level-1, 32px);
+  overflow: hidden;
+  max-width: 1280px;
+  width: 100%;
+}
+
+/* ==========================================================================
+   Theme Variants - Background Colors
+   
+   Colors from Figma:
+   - mist-green: #c6d5d1 (background/base)
+   - inkwell: #14343b (Colour/Brand/Inkwell)
+   - soft-clay: #c0ab8d (softclay-400)
+   - white-ivory: #fff9ee (background/ivory-paper)
+   ========================================================================== */
+
+.banner.theme-mist-green {
+  background-color: var(--colour-brand-mist-green, #c6d5d1);
+  
+  /* Typography */
+  --banner-heading-color: var(--colour-brand-inkwell, #14343b);
+  --banner-body-color: var(--colour-inkwell-400, #2b484f);
+  
+  /* Buttons - ice primary, inkwell secondary */
+  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);
+  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);
+  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
+}
+
+.banner.theme-inkwell {
+  background-color: var(--colour-brand-inkwell, #14343b);
+  
+  /* Typography - light colors on dark background */
+  --banner-heading-color: var(--colour-brand-mist-green, #c6d5d1);
+  --banner-body-color: var(--colour-inkwell-100, #d0d6d8);
+  
+  /* Buttons - ice primary, white secondary */
+  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);
+  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);
+  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-text: var(--colour-brand-white, #ffffff);
+  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);
+}
+
+.banner.theme-soft-clay {
+  background-color: var(--colour-softclay-400, #c0ab8d);
+  
+  /* Typography */
+  --banner-heading-color: var(--colour-brand-inkwell, #14343b);
+  --banner-body-color: var(--colour-inkwell-450, #203e45);
+  
+  /* Buttons */
+  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);
+  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);
+  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
+}
+
+.banner.theme-white-ivory {
+  background-color: var(--colour-brand-ivory-paper, #fff9ee);
+  
+  /* Typography */
+  --banner-heading-color: var(--colour-brand-inkwell, #14343b);
+  --banner-body-color: var(--colour-inkwell-400, #2b484f);
+  
+  /* Buttons */
+  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);
+  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);
+  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
+}
+
+/* ==========================================================================
+   Decorative Wave Overlay
+   
+   Figma specs:
+   - Position: bottom -17.41px, right -156px
+   - Size: 521px x 323px
+   - Fill colors per theme
+   ========================================================================== */
+
+.banner__wave-overlay {
+  position: absolute;
+  bottom: -17px;
+  right: -156px;
+  width: 521px;
+  height: 323px;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.banner__wave-svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* ==========================================================================
+   Theme-specific Wave Colors
+   The SVG uses currentColor, so we set color on the overlay container.
+   ========================================================================== */
+
+.banner.theme-mist-green .banner__wave-overlay {
+  color: #d1ddda;
+}
+
+.banner.theme-inkwell .banner__wave-overlay {
+  color: rgba(255, 255, 255, 0.06);
+}
+
+.banner.theme-soft-clay .banner__wave-overlay {
+  color: rgba(20, 52, 59, 0.06);
+}
+
+.banner.theme-white-ivory .banner__wave-overlay {
+  color: rgba(20, 52, 59, 0.04);
+}
+
+/* ==========================================================================
+   Illustration Area
+   
+   Figma specs:
+   - Desktop: max 360px x 360px, aspect ratio preserved
+   - Mobile: 212px x 212px, positioned absolute top-right
+   ========================================================================== */
+
+.banner__illustration {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 360px;
+  height: 360px;
+  max-width: 360px;
+  max-height: 360px;
+  aspect-ratio: 1;
+}
+
+.banner__illustration-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* Allow slotted content to fill the illustration area */
+.banner__illustration ::slotted(*) {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* ==========================================================================
+   Content Area (Typography Lockup)
+   
+   Figma specs:
+   - Vertical padding: 48px (margins/margin TB tight)
+   - Gap between copy and buttons: 40px
+   - Gap between heading and description: 16px
+   - Max-width for copy: 840px
+   ========================================================================== */
+
+.banner__content {
+  position: relative;
+  z-index: 1;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  padding-top: var(--margins-margin-tb-tight, 48px);
+  padding-bottom: var(--margins-margin-tb-tight, 48px);
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.banner__copy {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 840px;
+  width: 100%;
+  white-space: pre-wrap;
+}
+
+/* ==========================================================================
+   Heading
+   
+   Figma specs:
+   - Desktop: 44px, line-height 1, letter-spacing -0.88px (-2%)
+   - Mobile: 32px, line-height 1, letter-spacing -0.64px (-2%)
+   - Font: Typography/primaryFont (NeuSans), weight: Typography/headingWeight (500)
+   ========================================================================== */
+
+.banner__heading {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: var(--typography-headingweight, 500);
+  font-size: 44px;
+  line-height: 1;
+  letter-spacing: -0.88px;
+  color: var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+/* ==========================================================================
+   Description
+   
+   Figma specs:
+   - Font size: 18px
+   - Line height: 26px
+   - Font: Typography/primaryFont, weight: Typography/bodyWeight (400)
+   - Color: typography/body-default #2b484f (or theme variant)
+   ========================================================================== */
+
+.banner__description {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: var(--typography-bodyweight, 400);
+  font-size: 18px;
+  line-height: 26px;
+  color: var(--banner-body-color, var(--colour-inkwell-400, #2b484f));
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+/* ==========================================================================
+   Button Group
+   
+   Figma specs:
+   - Desktop: horizontal, gap 12px
+   - Mobile: vertical, full-width buttons, gap 12px
+   - Button padding: 24px horizontal, 12px vertical
+   - Button border-radius: 9999px (radii/button)
+   ========================================================================== */
+
+.banner__buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+/* ==========================================================================
+   Mobile Responsive Styles (≤768px)
+   
+   Figma mobile specs:
+   - Width: 100%
+   - Border radius: 24px
+   - Padding top: 224px (space for illustration)
+   - Content padding: pb 48px, pt 16px, px 28px
+   - Content min-height: 320px
+   - Illustration: 212px x 212px, positioned at top: 12px, centered horizontally
+   ========================================================================== */
+
+@media (max-width: 768px) {
+  .banner {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 224px 0 0 0;
+    border-radius: var(--radii-card-level-1-mobile, 24px);
+    max-width: 100%;
+    min-height: auto;
+  }
+
+  /* Wave overlay hidden on mobile */
+  .banner__wave-overlay {
+    display: none;
+  }
+
+  /* Illustration positioned at top-right on mobile */
+  .banner__illustration {
+    position: absolute;
+    top: 12px;
+    left: auto;
+    right: 0;
+    transform: none;
+    width: 212px;
+    height: 212px;
+    max-width: 280px;
+    max-height: 280px;
+  }
+
+  /* Content takes full width with min-height */
+  .banner__content {
+    width: 100%;
+    min-height: 320px;
+    padding: 16px 28px 48px 28px;
+    gap: 40px;
+    flex: none;
+  }
+
+  /* Ensure copy section doesn't constrain width on mobile */
+  .banner__copy {
+    max-width: 100%;
+  }
+
+  /* Mobile heading size */
+  .banner__heading {
+    font-size: 32px;
+    letter-spacing: -0.64px;
+  }
+
+  /* Buttons stack vertically on mobile, full width */
+  .banner__buttons {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+    width: 100%;
+  }
+
+  /* Ensure af-button takes full width on mobile */
+  .banner__buttons {
+    --af-button-width: 100%;
+  }
+
+  .banner__buttons af-button {
+    display: block;
+    width: 100%;
+  }
+}
+
+/* ==========================================================================
+   Small Mobile (≤480px)
+   ========================================================================== */
+
+@media (max-width: 480px) {
+  .banner {
+    padding-top: 200px;
+  }
+
+  .banner__illustration {
+    /* Keep right-aligned, just adjust size */
+    right: 0;
+    width: 180px;
+    height: 180px;
+  }
+
+  .banner__content {
+    padding: 16px 20px 36px 20px;
+    min-height: 280px;
+  }
+
+  .banner__heading {
+    font-size: 28px;
+    letter-spacing: -0.56px;
+  }
+}

package/dist/collection/components/{af-cta-section/af-cta-section.js → af-in-page-banner/af-in-page-banner.js}

@@ -1,13 +1,35 @@
 import { h, Host } from "@stencil/core";
 /**
- * Call-to-action section component with illustration and decorative background
- * A flexible CTA section with customizable content, buttons, and optional illustration
+ * In-page banner component for call-to-action content.
+ *
+ * A banner card with illustration, heading, description, and action buttons.
+ * Typically placed inside a neutral (white) Section to show off its themed background.
+ *
+ * The component has its own theme prop to control its background color and styling.
+ *
+ * **Illustration Usage:**
+ * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,
+ * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:
+ *
+ * ```tsx
+ * import { getIllustrationUrlByScene } from '@affinda/illustrations';
+ *
+ * <InPageBanner
+ *   theme="inkwell"
+ *   illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}
+ *   ...
+ * />
+ * ```
+ *
+ * Alternatively, use the `illustration` slot for completely custom content.
  */
-export class AfCtaSection {
+export class AfInPageBanner {
     constructor() {
-        /** Section heading */
+        /** Theme - sets the banner background color and typography colors */
+        this.theme = 'mist-green';
+        /** Banner heading */
         this.heading = '';
-        /** Section description */
+        /** Banner description */
         this.description = '';
         /** Primary button text */
         this.primaryButtonText = '';
@@ -17,28 +39,64 @@ export class AfCtaSection {
         this.secondaryButtonText = '';
         /** Secondary button URL */
         this.secondaryButtonUrl = '#';
-        /** Illustration URL - if provided, displays this image */
+        /**
+         * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene()
+         * from @affinda/illustrations in your app code.
+         */
         this.illustrationUrl = '';
-        /** Whether to show the decorative wave background */
+        /** Whether to show the decorative wave overlay */
         this.showWaveDecoration = true;
     }
+    /**
+     * Renders the decorative wave SVG overlay.
+     * Uses the Affinda brand "infinity loop" wave pattern.
+     * Fill color is controlled via CSS custom properties per theme.
+     */
+    renderWaveOverlay() {
+        return (h("div", { class: "banner__wave-overlay", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 521 323", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "banner__wave-svg" }, h("path", { d: "M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z", fill: "currentColor" }))));
+    }
     render() {
-        return (h(Host, { key: 'e9f0a58563bdaa67ff950b0e2ebb70ef4600a7b8' }, h("div", { key: '5cf583e9fd622cff15e61eb772e45bf8af020d09', class: "cta-section" }, h("div", { key: 'c1d43e16f3684299bc5c82d90c02e1deaf3cf824', class: "cta-section__container" }, this.showWaveDecoration && (h("div", { key: 'fb79dea8af188428e54a7e214200ca5fc2905329', class: "cta-section__wave-bg" }, h("svg", { key: 'c5d14799b1613e3c8cada805bdf343df40a539cc', viewBox: "0 0 1200 400", preserveAspectRatio: "none", class: "cta-section__wave-svg" }, h("ellipse", { key: '2d331cefb1d3a5881c83d34a61fc7c66fa47db1b', cx: "900", cy: "450", rx: "600", ry: "350", fill: "rgba(255,255,255,0.2)" }), h("ellipse", { key: 'cb9a17fd4cbd1e69b241148536511c0ebfd8de85', cx: "1000", cy: "500", rx: "400", ry: "250", fill: "rgba(255,255,255,0.15)" })))), (this.illustrationUrl || true) && (h("div", { key: '39305e7825aee761bb31652cb3765698c6ba3e88', class: "cta-section__illustration" }, this.illustrationUrl ? (h("img", { src: this.illustrationUrl, alt: "", class: "cta-section__illustration-img" })) : (h("slot", { name: "illustration" })))), h("div", { key: 'df1ab05bdc3834683ce7fcf070d64aa42d0e87b5', class: "cta-section__content" }, this.heading && h("h2", { key: '4aa79be8dd38f866a01847d8aae01a7cdd07409d', class: "cta-section__heading" }, this.heading), this.description && h("p", { key: '3e75362c397895545e75548f2b35602def38f007', class: "cta-section__description" }, this.description), h("div", { key: 'b66121d982806657298e4399579202daed91900b', class: "cta-section__buttons" }, this.primaryButtonText && (h("a", { key: '00380240c2507c3ba6b61e54c8ec0e91bfc8fea1', href: this.primaryButtonUrl, class: "cta-section__button cta-section__button--primary" }, this.primaryButtonText)), this.secondaryButtonText && (h("a", { key: '49704465778c7a29d40e6064d71e9ddfd821c223', href: this.secondaryButtonUrl, class: "cta-section__button cta-section__button--secondary" }, this.secondaryButtonText))))))));
+        return (h(Host, { key: '41403ba6ca0b60c416dd41d81f1eedbfe566f5c4' }, h("div", { key: '0c68549f2f1664d676fd969500702ccb8d4e43f5', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), h("div", { key: '213397e65a87e0999f857af1201219ec1987c5b1', class: "banner__illustration" }, this.illustrationUrl ? (h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (h("slot", { name: "illustration" }))), h("div", { key: '972c0ba5f99a8cc22bb9bf04402ee6f7feabb6be', class: "banner__content" }, h("div", { key: '659301eefed48b4abdfaaafa2c4db3fe242703fc', class: "banner__copy" }, this.heading && (h("h2", { key: 'aa4e2b0acf38d149b302c573da7e8f5bf097b846', class: "banner__heading" }, this.heading)), this.description && (h("p", { key: 'e0bb0b75f31b1a3c5bb0c61e48521a3ee0085f6e', class: "banner__description" }, this.description))), (this.primaryButtonText || this.secondaryButtonText) && (h("div", { key: '8a029743425b837cc8275eea38a1313366add6ec', class: "banner__buttons" }, this.primaryButtonText && (h("af-button", { key: '9a237dc0b9c4165c7b96ba526aae791b8504941e', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (h("af-button", { key: 'a9ab21d4efa1f68061b64f6e64c1da2d179eb0d2', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
     }
-    static get is() { return "af-cta-section"; }
+    static get is() { return "af-in-page-banner"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
-            "$": ["af-cta-section.css"]
+            "$": ["af-in-page-banner.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["af-cta-section.css"]
+            "$": ["af-in-page-banner.css"]
         };
     }
     static get properties() {
         return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BannerTheme",
+                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white-ivory\"",
+                    "references": {
+                        "BannerTheme": {
+                            "location": "global",
+                            "id": "global::BannerTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme - sets the banner background color and typography colors"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'mist-green'"
+            },
             "heading": {
                 "type": "string",
                 "mutable": false,
@@ -51,7 +109,7 @@ export class AfCtaSection {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Section heading"
+                    "text": "Banner heading"
                 },
                 "getter": false,
                 "setter": false,
@@ -71,7 +129,7 @@ export class AfCtaSection {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Section description"
+                    "text": "Banner description"
                 },
                 "getter": false,
                 "setter": false,
@@ -170,8 +228,11 @@ export class AfCtaSection {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Illustration URL - if provided, displays this image"
+                    "tags": [{
+                            "name": "affinda",
+                            "text": "/illustrations in your app code."
+                        }],
+                    "text": "Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene() \nfrom"
                 },
                 "getter": false,
                 "setter": false,
@@ -191,7 +252,7 @@ export class AfCtaSection {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to show the decorative wave background"
+                    "text": "Whether to show the decorative wave overlay"
                 },
                 "getter": false,
                 "setter": false,
@@ -202,4 +263,4 @@ export class AfCtaSection {
         };
     }
 }
-//# sourceMappingURL=af-cta-section.js.map
+//# sourceMappingURL=af-in-page-banner.js.map

package/dist/collection/components/af-in-page-banner/af-in-page-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-in-page-banner.js","sourceRoot":"","sources":["../../../src/components/af-in-page-banner/af-in-page-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAOH,MAAM,OAAO,cAAc;IAN3B;QAOE,qEAAqE;QAC7D,UAAK,GAAgB,YAAY,CAAC;QAE1C,qBAAqB;QACb,YAAO,GAAW,EAAE,CAAC;QAE7B,yBAAyB;QACjB,gBAAW,GAAW,EAAE,CAAC;QAEjC,0BAA0B;QAClB,sBAAiB,GAAW,EAAE,CAAC;QAEvC,yBAAyB;QACjB,qBAAgB,GAAW,GAAG,CAAC;QAEvC,qEAAqE;QAC7D,wBAAmB,GAAW,EAAE,CAAC;QAEzC,2BAA2B;QACnB,uBAAkB,GAAW,GAAG,CAAC;QAEzC;;;WAGG;QACK,oBAAe,GAAW,EAAE,CAAC;QAErC,kDAAkD;QAC1C,uBAAkB,GAAY,IAAI,CAAC;KAmF5C;IAjFC;;;;OAIG;IACK,iBAAiB;QACvB,OAAO,CACL,WAAK,KAAK,EAAC,sBAAsB,iBAAa,MAAM;YAClD,WACE,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,kBAAkB;gBAExB,YACE,CAAC,EAAC,ilBAAilB,EACnlB,IAAI,EAAC,cAAc,GACnB,CACE,CACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE;gBAErC,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,iBAAiB,EAAE;gBAGpD,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CACtB,WACE,GAAG,EAAE,IAAI,CAAC,eAAe,EACzB,GAAG,EAAC,EAAE,EACN,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAC,MAAM,GACd,CACH,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,CACG;gBAGN,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,4DAAK,KAAK,EAAC,cAAc;wBACtB,IAAI,CAAC,OAAO,IAAI,CACf,2DAAI,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,OAAO,CAAM,CAChD;wBACA,IAAI,CAAC,WAAW,IAAI,CACnB,0DAAG,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,WAAW,CAAK,CACtD,CACG;oBAGL,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,mBAAmB,CAAC,IAAI,CACvD,4DAAK,KAAK,EAAC,iBAAiB;wBACzB,IAAI,CAAC,iBAAiB,IAAI,CACzB,kEACE,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAC3B,OAAO,EAAC,SAAS,IAEhB,IAAI,CAAC,iBAAiB,CACb,CACb;wBACA,IAAI,CAAC,mBAAmB,IAAI,CAC3B,kEACE,IAAI,EAAE,IAAI,CAAC,kBAAkB,EAC7B,OAAO,EAAC,WAAW,IAElB,IAAI,CAAC,mBAAmB,CACf,CACb,CACG,CACP,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\ntype BannerTheme = 'white-ivory' | 'mist-green' | 'soft-clay' | 'inkwell';\n\n/**\n * In-page banner component for call-to-action content.\n * \n * A banner card with illustration, heading, description, and action buttons.\n * Typically placed inside a neutral (white) Section to show off its themed background.\n * \n * The component has its own theme prop to control its background color and styling.\n * \n * **Illustration Usage:**\n * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,\n * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:\n * \n * ```tsx\n * import { getIllustrationUrlByScene } from '@affinda/illustrations';\n * \n * <InPageBanner\n *   theme=\"inkwell\"\n *   illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}\n *   ...\n * />\n * ```\n * \n * Alternatively, use the `illustration` slot for completely custom content.\n */\n@Component({\n  tag: 'af-in-page-banner',\n  styleUrl: 'af-in-page-banner.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfInPageBanner {\n  /** Theme - sets the banner background color and typography colors */\n  @Prop() theme: BannerTheme = 'mist-green';\n\n  /** Banner heading */\n  @Prop() heading: string = '';\n\n  /** Banner description */\n  @Prop() description: string = '';\n\n  /** Primary button text */\n  @Prop() primaryButtonText: string = '';\n\n  /** Primary button URL */\n  @Prop() primaryButtonUrl: string = '#';\n\n  /** Secondary button text (optional - if empty, button won't show) */\n  @Prop() secondaryButtonText: string = '';\n\n  /** Secondary button URL */\n  @Prop() secondaryButtonUrl: string = '#';\n\n  /** \n   * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene() \n   * from @affinda/illustrations in your app code.\n   */\n  @Prop() illustrationUrl: string = '';\n\n  /** Whether to show the decorative wave overlay */\n  @Prop() showWaveDecoration: boolean = true;\n\n  /**\n   * Renders the decorative wave SVG overlay.\n   * Uses the Affinda brand \"infinity loop\" wave pattern.\n   * Fill color is controlled via CSS custom properties per theme.\n   */\n  private renderWaveOverlay() {\n    return (\n      <div class=\"banner__wave-overlay\" aria-hidden=\"true\">\n        <svg \n          viewBox=\"0 0 521 323\" \n          fill=\"none\" \n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"banner__wave-svg\"\n        >\n          <path \n            d=\"M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z\" \n            fill=\"currentColor\"\n          />\n        </svg>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={`banner theme-${this.theme}`}>\n          {/* Decorative wave overlay */}\n          {this.showWaveDecoration && this.renderWaveOverlay()}\n\n          {/* Illustration area */}\n          <div class=\"banner__illustration\">\n            {this.illustrationUrl ? (\n              <img \n                src={this.illustrationUrl} \n                alt=\"\" \n                class=\"banner__illustration-img\" \n                loading=\"lazy\"\n              />\n            ) : (\n              <slot name=\"illustration\"></slot>\n            )}\n          </div>\n\n          {/* Content area with typography lockup */}\n          <div class=\"banner__content\">\n            <div class=\"banner__copy\">\n              {this.heading && (\n                <h2 class=\"banner__heading\">{this.heading}</h2>\n              )}\n              {this.description && (\n                <p class=\"banner__description\">{this.description}</p>\n              )}\n            </div>\n\n            {/* Button group */}\n            {(this.primaryButtonText || this.secondaryButtonText) && (\n              <div class=\"banner__buttons\">\n                {this.primaryButtonText && (\n                  <af-button \n                    href={this.primaryButtonUrl}\n                    variant=\"primary\"\n                  >\n                    {this.primaryButtonText}\n                  </af-button>\n                )}\n                {this.secondaryButtonText && (\n                  <af-button \n                    href={this.secondaryButtonUrl}\n                    variant=\"secondary\"\n                  >\n                    {this.secondaryButtonText}\n                  </af-button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}