@revenuecat/purchases-ui-js 3.10.0 → 3.11.0

package/dist/components/footer/Footer.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import Stack from "../stack/Stack.svelte";
   import type { FooterProps } from "../../types/components/footer";
+  import { STICKY_OVERLAY_Z_INDEX } from "../../utils/constants";
 
   const { stack }: FooterProps = $props();
 </script>
 
-<div>
+<div style="z-index: {STICKY_OVERLAY_Z_INDEX};">
   <Stack {...stack} />
 </div>
 
@@ -14,7 +15,6 @@
     position: sticky;
     bottom: 0;
     width: 100%;
-    z-index: 1000;
 
     display: flex;
     flex-direction: row;

package/dist/components/header/Header.stories.svelte

@@ -0,0 +1,140 @@
+<script module lang="ts">
+  import Header from "./Header.svelte";
+  import { componentDecorator } from "../../stories/component-decorator";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import { viewportDecorator } from "../../stories/viewport-decorator";
+  import type { HeaderProps } from "../../types/components/header";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const defaultLocale = "en_US";
+
+  const { Story } = defineMeta({
+    title: "Components/Header",
+    component: Header,
+    decorators: [
+      componentDecorator(),
+      localizationDecorator({
+        defaultLocale,
+        localizations: {
+          [defaultLocale]: {
+            "2wCGhwfDvx": "Welcome to the app!",
+          },
+        },
+      }),
+    ],
+    args: {
+      type: "header",
+      id: "header",
+      name: "Header",
+      stack: {
+        background: {
+          type: "color",
+          value: {
+            light: {
+              type: "hex",
+              value: "#BEEEEFFF",
+            },
+          },
+        },
+        background_color: null,
+        badge: null,
+        border: null,
+        components: [
+          {
+            background_color: null,
+            color: {
+              light: {
+                type: "hex",
+                value: "#000000",
+              },
+            },
+            font_name: null,
+            font_size: 14,
+            font_weight: "regular",
+            font_weight_int: 400,
+            horizontal_alignment: "leading",
+            id: "Fhqh8-bFi_",
+            margin: {
+              bottom: 0,
+              leading: 0,
+              top: 0,
+              trailing: 0,
+            },
+            name: "",
+            padding: {
+              bottom: 0,
+              leading: 0,
+              top: 0,
+              trailing: 0,
+            },
+            size: {
+              height: {
+                type: "fit",
+                value: null,
+              },
+              width: {
+                type: "fit",
+                value: null,
+              },
+            },
+            text_lid: "2wCGhwfDvx",
+            type: "text",
+          },
+        ],
+        dimension: {
+          alignment: "center",
+          distribution: "start",
+          type: "vertical",
+        },
+        id: "n_EBzFgjzA",
+        margin: {
+          bottom: 0,
+          leading: 0,
+          top: 0,
+          trailing: 0,
+        },
+        name: "Header",
+        padding: {
+          bottom: 20,
+          leading: 0,
+          top: 20,
+          trailing: 0,
+        },
+        shadow: {
+          color: {
+            light: {
+              type: "hex",
+              value: "#00000033",
+            },
+          },
+          radius: 16,
+          x: 0,
+          y: 4,
+        },
+        shape: {
+          corners: {
+            bottom_leading: 0,
+            bottom_trailing: 0,
+            top_leading: 0,
+            top_trailing: 0,
+          },
+          type: "rectangle",
+        },
+        size: {
+          height: {
+            type: "fit",
+            value: null,
+          },
+          width: {
+            type: "fill",
+            value: null,
+          },
+        },
+        spacing: 0,
+        type: "stack",
+      },
+    } satisfies HeaderProps,
+  });
+</script>
+
+<Story name="Header component" />

package/dist/components/header/Header.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Header from "./Header.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Header: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Header = InstanceType<typeof Header>;
+export default Header;

package/dist/components/header/Header.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import Stack from "../stack/Stack.svelte";
+  import type { HeaderProps } from "../../types/components/header";
+
+  const { stack }: HeaderProps = $props();
+</script>
+
+<div>
+  <Stack {...stack} />
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+  }
+</style>

package/dist/components/header/Header.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HeaderProps } from "../../types/components/header";
+declare const Header: import("svelte").Component<HeaderProps, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/components/paywall/Node.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {
     Footer,
+    Header,
     Image,
     Package,
     PurchaseButton,
@@ -38,6 +39,7 @@
     countdown: Countdown,
     express_purchase_button: ExpressPurchaseButton,
     footer: Footer,
+    header: Header,
     icon: Icon,
     image: Image,
     input_multiple_choice: InputMultipleChoice,
@@ -84,6 +86,10 @@
       ];
     }
 
+    if (nodeData.type === "fallback_header") {
+      return undefined;
+    }
+
     const { fallback } = nodeData;
     if (fallback && ComponentTypes[fallback?.type]) {
       return [

package/dist/components/paywall/Paywall.stories.svelte

@@ -14,6 +14,8 @@
     pastaPaywallData,
     paywallData,
     paywallWithFooter,
+    paywallWithHeader,
+    paywallWithTransparentHeaderAndTopImage,
     posterMakerTemplate,
     timelineTemplate,
     uiConfigData,
@@ -323,6 +325,19 @@
   }}
 />
 
+<Story
+  name="Header"
+  args={{
+    paywallData: paywallWithHeader,
+  }}
+/>
+
+<Story
+  name="Header with transparent background and top image"
+  args={{
+    paywallData: paywallWithTransparentHeaderAndTopImage,
+  }}
+/>
 <Story
   name="Timeline"
   args={{

package/dist/components/paywall/Paywall.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Footer from "../footer/Footer.svelte";
+  import Header from "../header/Header.svelte";
   import { setColorModeContext } from "../../stores/color-mode";
   import {
     createInputValidationContext,
@@ -29,6 +30,7 @@
   } from "../../types/variables";
   import { mapBackground } from "../../utils/background-utils";
   import { css } from "../../utils/base-utils";
+  import { STICKY_OVERLAY_Z_INDEX } from "../../utils/constants";
   import { registerFonts } from "../../utils/font-utils";
   import { findSelectedPackageId } from "../../utils/style-utils";
   import { onMount } from "svelte";
@@ -244,16 +246,38 @@
 
   const paywallClass = $derived(sheet ? "paywall blur" : "paywall");
 
-  const { stack, sticky_footer } = base;
+  const { stack, sticky_footer, header } = base;
+
+  const firstComponent = stack.components[0];
+  const firstComponentIsFullWidthImage =
+    firstComponent?.type === "image" &&
+    firstComponent.size.width.type === "fill";
+  const pullContentUnderHeader = !!header && firstComponentIsFullWidthImage;
+
+  let headerHeight = $state(0);
 </script>
 
 <svelte:boundary onerror={onError}>
   <div class={paywallClass} {style}>
+    {#if header}
+      <div
+        class="header-wrapper"
+        style="z-index: {STICKY_OVERLAY_Z_INDEX};"
+        bind:clientHeight={headerHeight}
+      >
+        <Header {...header} />
+      </div>
+    {/if}
     <div
       class="paywall-content"
-      style={maxContentWidth
-        ? `max-width: ${maxContentWidth}; margin-inline: auto;`
-        : ""}
+      style={[
+        maxContentWidth
+          ? `max-width: ${maxContentWidth}; margin-inline: auto;`
+          : "",
+        pullContentUnderHeader ? `margin-top: -${headerHeight}px;` : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
     >
       <Stack {...stack} class="paywall-content-scroll" />
       {#if sticky_footer}
@@ -286,6 +310,12 @@
     }
   }
 
+  .header-wrapper {
+    position: sticky;
+    top: 0;
+    width: 100%;
+  }
+
   .paywall-content {
     width: 100%;
     flex: 1;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { default as ButtonDeprecated } from "./components/button/Button.svelte";
 export { default as Countdown } from "./components/countdown/Countdown.svelte";
 export { default as Footer } from "./components/footer/Footer.svelte";
+export { default as Header } from "./components/header/Header.svelte";
 export { default as Image } from "./components/image/Image.svelte";
 export { default as InputMultipleChoice } from "./components/options/InputMultipleChoice.svelte";
 export { default as InputOption } from "./components/options/InputOption.svelte";

package/dist/index.js

@@ -2,6 +2,7 @@
 export { default as ButtonDeprecated } from "./components/button/Button.svelte";
 export { default as Countdown } from "./components/countdown/Countdown.svelte";
 export { default as Footer } from "./components/footer/Footer.svelte";
+export { default as Header } from "./components/header/Header.svelte";
 export { default as Image } from "./components/image/Image.svelte";
 export { default as InputMultipleChoice } from "./components/options/InputMultipleChoice.svelte";
 export { default as InputOption } from "./components/options/InputOption.svelte";

package/dist/stories/fixtures.d.ts

@@ -26,6 +26,8 @@ export declare const localizations: {
 };
 export declare const colorModeOverrideTemplate: PaywallData;
 export declare const paywallWithFooter: PaywallData;
+export declare const paywallWithHeader: PaywallData;
+export declare const paywallWithTransparentHeaderAndTopImage: PaywallData;
 export declare const errorPaywallData: PaywallData;
 export declare const fallbackPaywallData: PaywallData;
 export declare const brandingAppearances: Record<string, BrandingAppearance | null>;