@revenuecat/purchases-ui-js
Version:
Web components for Paywalls. Powered by RevenueCat
132 lines (131 loc) • 3.49 kB
JavaScript
import { STORY_BACKGROUND_VIDEO_FILL } from "../../stories/video-background-story-fixture";
const spacer = { bottom: 0, leading: 0, top: 0, trailing: 0 };
const simpleTextStack = ({ tid, textLid, }) => ({
type: "stack",
id: `${tid}-inner`,
name: "",
background_color: null,
background: null,
badge: null,
border: null,
shadow: null,
spacing: 0,
dimension: {
alignment: "center",
distribution: "center",
type: "vertical",
},
shape: null,
margin: spacer,
padding: {
bottom: 24,
leading: 24,
top: 24,
trailing: 24,
},
size: {
width: { type: "fill" },
height: { type: "fit" },
},
components: [
{
type: "text",
id: `${tid}-t`,
name: "",
text_lid: textLid,
background_color: null,
color: {
light: { type: "hex", value: "#ffffff" },
},
font_name: null,
font_size: "heading_m",
font_weight: "semibold",
horizontal_alignment: "center",
margin: spacer,
padding: spacer,
size: {
width: { type: "fit" },
height: { type: "fit" },
},
},
],
});
const tabToggle = {
type: "tab_control_toggle",
id: "vbg-toggle",
name: "",
default_value: false,
thumb_color_on: {
light: { type: "hex", value: "#ffffffff" },
},
thumb_color_off: {
light: { type: "hex", value: "#ccccccff" },
},
track_color_on: {
light: { type: "hex", value: "#4488ffff" },
},
track_color_off: {
light: { type: "hex", value: "#00000044" },
},
};
function tab(contentId, bodyLid) {
return {
type: "tab",
id: contentId,
name: "",
stack: simpleTextStack({ tid: contentId, textLid: bodyLid }),
};
}
/** Minimal Tabs tree for Storybook layering checks (`rc-tabs-video-bg`). */
export const TABS_VIDEO_STACKING_STORY_ARGS = {
type: "tabs",
id: "tabs-video-z",
name: "Tabs · video layering",
size: {
width: { type: "fixed", value: 400 },
height: { type: "fixed", value: 300 },
},
padding: { bottom: 12, leading: 12, top: 12, trailing: 12 },
margin: spacer,
background: STORY_BACKGROUND_VIDEO_FILL,
shape: {
corners: {
bottom_leading: 20,
bottom_trailing: 20,
top_leading: 20,
top_trailing: 20,
},
type: "rectangle",
},
border: null,
shadow: null,
default_tab_id: "tab-a",
control: {
type: "toggle",
stack: {
type: "stack",
id: "vbg-toggle-stack",
name: "",
background_color: null,
background: null,
badge: null,
border: null,
shadow: null,
spacing: 16,
dimension: {
alignment: "center",
distribution: "center",
type: "horizontal",
},
shape: null,
margin: { bottom: 8, leading: 0, top: 0, trailing: 0 },
padding: spacer,
size: {
width: { type: "fill" },
height: { type: "fit" },
},
components: [tabToggle],
},
},
tabs: [tab("tab-a", "t-a-body"), tab("tab-b", "t-b-body")],
};