@revenuecat/purchases-ui-js
Version:
Web components for Paywalls. Powered by RevenueCat
88 lines (87 loc) • 2.84 kB
JavaScript
// Regression fixture: fixed-height empty stack collapses under flex pressure.
// Root `space_between` with children summing above viewport height. Pair with
// `viewportDecorator` in the story so the parent is bounded; otherwise the
// paywall grows to content height and no shrinkage happens.
const solidStack = (id, height, hex) => ({
type: "stack",
id,
name: id,
components: [],
dimension: {
type: "vertical",
alignment: "center",
distribution: "center",
},
size: {
width: { type: "fill" },
height: { type: "fixed", value: height },
},
background: null,
background_color: { light: { type: "hex", value: hex } },
badge: null,
border: null,
margin: { bottom: 0, leading: 0, top: 0, trailing: 0 },
padding: { bottom: 0, leading: 0, top: 0, trailing: 0 },
shadow: null,
shape: {
type: "rectangle",
corners: {
bottom_leading: 0,
bottom_trailing: 0,
top_leading: 0,
top_trailing: 0,
},
},
spacing: 0,
});
export const FIXED_HEIGHT_STACK_PAYWALL = {
id: "fixed_height_stack_paywall",
default_locale: "en_US",
components_localizations: { en_US: {} },
components_config: {
base: {
background: {
type: "color",
value: { light: { type: "hex", value: "#ffffff" } },
},
stack: {
type: "stack",
id: "root",
name: "Root",
components: [
solidStack("hero", 180, "#ff5f5f"),
solidStack("empty_spacer", 50, "#11d483"),
solidStack("card", 200, "#6366f1"),
solidStack("cta", 48, "#000000"),
],
dimension: {
type: "vertical",
alignment: "center",
distribution: "space_between",
},
size: {
width: { type: "fill" },
height: { type: "fill" },
},
background: null,
background_color: null,
badge: null,
border: null,
margin: { bottom: 0, leading: 0, top: 0, trailing: 0 },
padding: { bottom: 16, leading: 16, top: 16, trailing: 16 },
shadow: null,
shape: {
type: "rectangle",
corners: {
bottom_leading: 0,
bottom_trailing: 0,
top_leading: 0,
top_trailing: 0,
},
},
spacing: 12,
},
sticky_footer: null,
},
},
};