@revenuecat/purchases-ui-js 2.0.3 → 2.0.5

package/dist/components/tabs/Tabs.stories.svelte

@@ -0,0 +1,929 @@
+<script module lang="ts">
+  import Tabs from "./Tabs.svelte";
+  import { componentDecorator } from "../../stories/component-decorator";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import { variablesDecorator } from "../../stories/variables-decorator";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { VARIABLES } from "../paywall/fixtures/variables";
+
+  const defaultLocale = "en_US";
+
+  const { Story } = defineMeta({
+    title: "Components/Tabs",
+    component: Tabs,
+    decorators: [componentDecorator()],
+    args: {
+      type: "tabs",
+      id: "tabs",
+      name: "Tabs",
+    },
+  });
+</script>
+
+<Story
+  name="Tabs"
+  decorators={[
+    componentDecorator(),
+    variablesDecorator(VARIABLES.$rc_annual),
+    localizationDecorator({
+      defaultLocale,
+      localizations: {
+        [defaultLocale]: {
+          "3-MHHQ4eYO": "Monthly",
+          "65AzNQh0h7": "Yearly",
+          "J-lynmZD0Z": "SAVE {{ product.relative_discount }}",
+          jmQIksTeEN: "Yearly",
+          uz7USEbmZH: "Monthly",
+          "x-ZGm8CK69": "Yearly",
+          x2g2xVGxgt: "Monthly",
+        },
+      },
+    }),
+  ]}
+  args={{
+    background: null,
+    control: {
+      stack: {
+        background: {
+          type: "color",
+          value: {
+            light: {
+              type: "hex",
+              value: "#F0F0F1ff",
+            },
+          },
+        },
+        background_color: null,
+        badge: null,
+        border: null,
+        components: [
+          {
+            id: "33984XLRc9",
+            name: "Standard",
+            stack: {
+              background: null,
+              background_color: null,
+              badge: null,
+              border: null,
+              components: [
+                {
+                  background_color: null,
+                  color: {
+                    light: {
+                      type: "hex",
+                      value: "#000000cc",
+                    },
+                  },
+                  font_name: null,
+                  font_size: 16,
+                  font_weight: "medium",
+                  horizontal_alignment: "leading",
+                  id: "jHElq_6JMi",
+                  margin: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                  },
+                  name: "",
+                  overrides: [
+                    {
+                      conditions: [
+                        {
+                          type: "selected",
+                        },
+                      ],
+                      properties: {
+                        color: {
+                          light: {
+                            type: "hex",
+                            value: "#000000ff",
+                          },
+                        },
+                        font_weight: "semibold",
+                        text_lid: "x2g2xVGxgt",
+                      },
+                    },
+                  ],
+                  padding: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                  },
+                  size: {
+                    height: {
+                      type: "fit",
+                      value: null,
+                    },
+                    width: {
+                      type: "fit",
+                      value: null,
+                    },
+                  },
+                  text_lid: "3-MHHQ4eYO",
+                  type: "text",
+                },
+              ],
+              dimension: {
+                alignment: "center",
+                distribution: "center",
+                type: "horizontal",
+              },
+              id: "2cw-aXd4vE",
+              margin: {
+                bottom: 0,
+                leading: 0,
+                top: 0,
+                trailing: 0,
+              },
+              name: "",
+              overrides: [
+                {
+                  conditions: [
+                    {
+                      type: "selected",
+                    },
+                  ],
+                  properties: {
+                    background: {
+                      type: "color",
+                      value: {
+                        light: {
+                          type: "hex",
+                          value: "#ffffffff",
+                        },
+                      },
+                    },
+                    shadow: {
+                      color: {
+                        light: {
+                          type: "hex",
+                          value: "#00000033",
+                        },
+                      },
+                      radius: 6,
+                      x: 0,
+                      y: 2,
+                    },
+                    shape: {
+                      corners: {
+                        bottom_leading: 8,
+                        bottom_trailing: 8,
+                        top_leading: 8,
+                        top_trailing: 8,
+                      },
+                      type: "rectangle",
+                    },
+                  },
+                },
+              ],
+              padding: {
+                bottom: 14,
+                leading: 40,
+                top: 14,
+                trailing: 40,
+              },
+              shadow: null,
+              shape: {
+                corners: {
+                  bottom_leading: 100,
+                  bottom_trailing: 100,
+                  top_leading: 100,
+                  top_trailing: 100,
+                },
+                type: "rectangle",
+              },
+              size: {
+                height: {
+                  type: "fit",
+                  value: null,
+                },
+                width: {
+                  type: "fit",
+                  value: null,
+                },
+              },
+              spacing: 0,
+              type: "stack",
+            },
+            tab_id: "K--Iq3ASvA",
+            tab_index: 0,
+            type: "tab_control_button",
+          },
+          {
+            id: "mkWgEjANBp",
+            name: "Premium",
+            stack: {
+              background: null,
+              background_color: null,
+              badge: null,
+              border: null,
+              components: [
+                {
+                  background: null,
+                  background_color: null,
+                  badge: {
+                    alignment: "top",
+                    stack: {
+                      background: {
+                        type: "color",
+                        value: {
+                          light: {
+                            type: "hex",
+                            value: "#576CDBff",
+                          },
+                        },
+                      },
+                      background_color: {
+                        light: {
+                          type: "hex",
+                          value: "#576CDBff",
+                        },
+                      },
+                      badge: null,
+                      border: null,
+                      components: [
+                        {
+                          background_color: null,
+                          color: {
+                            light: {
+                              type: "hex",
+                              value: "#ffffffff",
+                            },
+                          },
+                          font_name: null,
+                          font_size: 10,
+                          font_weight: "bold",
+                          horizontal_alignment: "center",
+                          id: "_T7ECoTBqU",
+                          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: "J-lynmZD0Z",
+                          type: "text",
+                        },
+                      ],
+                      dimension: {
+                        alignment: "center",
+                        distribution: "center",
+                        type: "vertical",
+                      },
+                      id: "LevJGsoeFp",
+                      margin: {
+                        bottom: 0,
+                        leading: 0,
+                        top: 0,
+                        trailing: 0,
+                      },
+                      name: "",
+                      padding: {
+                        bottom: 4,
+                        leading: 8,
+                        top: 4,
+                        trailing: 8,
+                      },
+                      shadow: null,
+                      shape: {
+                        corners: {
+                          bottom_leading: 0,
+                          bottom_trailing: 0,
+                          top_leading: 0,
+                          top_trailing: 0,
+                        },
+                        type: "pill",
+                      },
+                      size: {
+                        height: {
+                          type: "fit",
+                          value: null,
+                        },
+                        width: {
+                          type: "fit",
+                          value: null,
+                        },
+                      },
+                      spacing: 0,
+                      type: "stack",
+                    },
+                    style: "overlay",
+                  },
+                  border: null,
+                  components: [
+                    {
+                      background_color: null,
+                      color: {
+                        light: {
+                          type: "hex",
+                          value: "#000000cc",
+                        },
+                      },
+                      font_name: null,
+                      font_size: 16,
+                      font_weight: "medium",
+                      horizontal_alignment: "leading",
+                      id: "Mst9n847He",
+                      margin: {
+                        bottom: 0,
+                        leading: 0,
+                        top: 0,
+                        trailing: 0,
+                      },
+                      name: "",
+                      overrides: [
+                        {
+                          conditions: [
+                            {
+                              type: "selected",
+                            },
+                          ],
+                          properties: {
+                            color: {
+                              light: {
+                                type: "hex",
+                                value: "#000000ff",
+                              },
+                            },
+                            font_weight: "semibold",
+                            text_lid: "jmQIksTeEN",
+                          },
+                        },
+                      ],
+                      padding: {
+                        bottom: 0,
+                        leading: 0,
+                        top: 0,
+                        trailing: 0,
+                      },
+                      size: {
+                        height: {
+                          type: "fit",
+                          value: null,
+                        },
+                        width: {
+                          type: "fit",
+                          value: null,
+                        },
+                      },
+                      text_lid: "x-ZGm8CK69",
+                      type: "text",
+                    },
+                  ],
+                  dimension: {
+                    alignment: "leading",
+                    distribution: "start",
+                    type: "vertical",
+                  },
+                  id: "pT4xELGru8",
+                  margin: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                  },
+                  name: "",
+                  overrides: [
+                    {
+                      conditions: [
+                        {
+                          type: "selected",
+                        },
+                      ],
+                      properties: {
+                        background: {
+                          type: "color",
+                          value: {
+                            light: {
+                              type: "hex",
+                              value: "#FFFFFFFF",
+                            },
+                          },
+                        },
+                        padding: {
+                          bottom: 14,
+                          leading: 40,
+                          top: 14,
+                          trailing: 40,
+                        },
+                        shadow: {
+                          color: {
+                            light: {
+                              type: "hex",
+                              value: "#00000033",
+                            },
+                          },
+                          radius: 6,
+                          x: 0,
+                          y: 2,
+                        },
+                      },
+                    },
+                  ],
+                  padding: {
+                    bottom: 14,
+                    leading: 40,
+                    top: 14,
+                    trailing: 40,
+                  },
+                  shadow: null,
+                  shape: {
+                    corners: {
+                      bottom_leading: 8,
+                      bottom_trailing: 8,
+                      top_leading: 8,
+                      top_trailing: 8,
+                    },
+                    type: "rectangle",
+                  },
+                  size: {
+                    height: {
+                      type: "fit",
+                      value: null,
+                    },
+                    width: {
+                      type: "fit",
+                      value: null,
+                    },
+                  },
+                  spacing: 0,
+                  type: "stack",
+                },
+              ],
+              dimension: {
+                alignment: "center",
+                distribution: "center",
+                type: "horizontal",
+              },
+              id: "KS15Wqk9-Q",
+              margin: {
+                bottom: 0,
+                leading: 0,
+                top: 0,
+                trailing: 0,
+              },
+              name: "",
+              padding: {
+                bottom: 0,
+                leading: 0,
+                top: 0,
+                trailing: 0,
+              },
+              shadow: null,
+              shape: {
+                corners: {
+                  bottom_leading: 8,
+                  bottom_trailing: 8,
+                  top_leading: 8,
+                  top_trailing: 8,
+                },
+                type: "rectangle",
+              },
+              size: {
+                height: {
+                  type: "fit",
+                  value: null,
+                },
+                width: {
+                  type: "fit",
+                  value: null,
+                },
+              },
+              spacing: 8,
+              type: "stack",
+            },
+            tab_id: "_YDy-tbaaE",
+            tab_index: 1,
+            type: "tab_control_button",
+          },
+        ],
+        dimension: {
+          alignment: "center",
+          distribution: "center",
+          type: "horizontal",
+        },
+        id: "2p__KtMwqb",
+        margin: {
+          bottom: 0,
+          leading: 0,
+          top: 0,
+          trailing: 0,
+        },
+        name: "",
+        padding: {
+          bottom: 3,
+          leading: 3,
+          top: 3,
+          trailing: 3,
+        },
+        shadow: null,
+        shape: {
+          corners: {
+            bottom_leading: 10,
+            bottom_trailing: 10,
+            top_leading: 10,
+            top_trailing: 10,
+          },
+          type: "rectangle",
+        },
+        size: {
+          height: {
+            type: "fit",
+            value: null,
+          },
+          width: {
+            type: "fit",
+            value: null,
+          },
+        },
+        spacing: 0,
+        type: "stack",
+      },
+      type: "buttons",
+    },
+    default_tab_id: "_YDy-tbaaE",
+    id: "FBh_Qx9bo3",
+    margin: {
+      bottom: 16,
+      leading: 16,
+      top: 16,
+      trailing: 16,
+    },
+    name: "",
+    padding: {
+      bottom: 0,
+      leading: 0,
+      top: 0,
+      trailing: 0,
+    },
+    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,
+      },
+    },
+    tabs: [
+      {
+        id: "K--Iq3ASvA",
+        name: "Monthly",
+        stack: {
+          background: null,
+          background_color: null,
+          badge: null,
+          border: null,
+          components: [
+            {
+              id: "xOovfczp52",
+              name: "",
+              type: "tab_control",
+            },
+            {
+              background: {
+                type: "color",
+                value: {
+                  light: {
+                    type: "hex",
+                    value: "#f0fff0FF",
+                  },
+                },
+              },
+              background_color: null,
+              badge: null,
+              border: {
+                color: {
+                  light: {
+                    type: "hex",
+                    value: "#00aa00ff",
+                  },
+                },
+                width: 3,
+              },
+              components: [
+                {
+                  background_color: null,
+                  color: {
+                    light: {
+                      type: "hex",
+                      value: "#000000",
+                    },
+                  },
+                  font_name: null,
+                  font_size: 32,
+                  font_weight: "regular",
+                  font_weight_int: 400,
+                  horizontal_alignment: "center",
+                  id: "W3LqVnhexA",
+                  margin: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                  },
+                  name: "",
+                  padding: {
+                    bottom: 64,
+                    leading: 64,
+                    top: 64,
+                    trailing: 64,
+                  },
+                  size: {
+                    height: {
+                      type: "fit",
+                      value: null,
+                    },
+                    width: {
+                      type: "fill",
+                      value: null,
+                    },
+                  },
+                  text_lid: "uz7USEbmZH",
+                  type: "text",
+                },
+              ],
+              dimension: {
+                alignment: "center",
+                distribution: "start",
+                type: "vertical",
+              },
+              id: "DODG_8o_oj",
+              margin: {
+                bottom: 0,
+                leading: 0,
+                top: 0,
+                trailing: 0,
+              },
+              name: "",
+              padding: {
+                bottom: 0,
+                leading: 0,
+                top: 0,
+                trailing: 0,
+              },
+              shadow: null,
+              shape: {
+                corners: {
+                  bottom_leading: 64,
+                  bottom_trailing: 64,
+                  top_leading: 64,
+                  top_trailing: 64,
+                },
+                type: "rectangle",
+              },
+              size: {
+                height: {
+                  type: "fit",
+                  value: null,
+                },
+                width: {
+                  type: "fill",
+                  value: null,
+                },
+              },
+              spacing: 0,
+              type: "stack",
+            },
+          ],
+          dimension: {
+            alignment: "center",
+            distribution: "center",
+            type: "vertical",
+          },
+          id: "-cvTB_f1--",
+          margin: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          name: "Tab",
+          padding: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          shadow: null,
+          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",
+        },
+        type: "tab",
+      },
+      {
+        id: "_YDy-tbaaE",
+        name: "Yearly",
+        stack: {
+          background: null,
+          background_color: null,
+          badge: null,
+          border: null,
+          components: [
+            {
+              id: "vBYpel0plp",
+              name: "",
+              type: "tab_control",
+            },
+            {
+              background: {
+                type: "color",
+                value: {
+                  light: {
+                    type: "hex",
+                    value: "#fff0f0ff",
+                  },
+                },
+              },
+              background_color: null,
+              badge: null,
+              border: {
+                color: {
+                  light: {
+                    type: "hex",
+                    value: "#aa0000ff",
+                  },
+                },
+                width: 3,
+              },
+              components: [
+                {
+                  background_color: null,
+                  color: {
+                    light: {
+                      type: "hex",
+                      value: "#000000",
+                    },
+                  },
+                  font_name: null,
+                  font_size: 32,
+                  font_weight: "regular",
+                  font_weight_int: 400,
+                  horizontal_alignment: "center",
+                  id: "2H8O9QATG9",
+                  margin: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                  },
+                  name: "",
+                  padding: {
+                    bottom: 64,
+                    leading: 64,
+                    top: 64,
+                    trailing: 64,
+                  },
+                  size: {
+                    height: {
+                      type: "fit",
+                      value: null,
+                    },
+                    width: {
+                      type: "fill",
+                      value: null,
+                    },
+                  },
+                  text_lid: "65AzNQh0h7",
+                  type: "text",
+                },
+              ],
+              dimension: {
+                alignment: "center",
+                distribution: "start",
+                type: "vertical",
+              },
+              id: "vCISjhuBtC",
+              margin: {
+                bottom: 0,
+                leading: 0,
+                top: 0,
+                trailing: 0,
+              },
+              name: "",
+              padding: {
+                bottom: 0,
+                leading: 0,
+                top: 0,
+                trailing: 0,
+              },
+              shadow: null,
+              shape: {
+                corners: {
+                  bottom_leading: 64,
+                  bottom_trailing: 64,
+                  top_leading: 64,
+                  top_trailing: 64,
+                },
+                type: "rectangle",
+              },
+              size: {
+                height: {
+                  type: "fit",
+                  value: null,
+                },
+                width: {
+                  type: "fill",
+                  value: null,
+                },
+              },
+              spacing: 0,
+              type: "stack",
+            },
+          ],
+          dimension: {
+            alignment: "center",
+            distribution: "center",
+            type: "vertical",
+          },
+          id: "ZFvNICZNOL",
+          margin: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          name: "Tab",
+          padding: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          shadow: null,
+          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",
+        },
+        type: "tab",
+      },
+    ],
+    type: "tabs",
+  }}
+/>