@vectoriox/iox-ui 5.40.0 → 5.41.1

package/src/generation-core/patterns.ts

@@ -21,6 +21,13 @@ import { SPEC_SITE_PATTERNS } from './site-spec.generated';
  * `binds`, a binding path per part: `image`, `eyebrow`, `title`, `text`; `href` + `param` link the whole card
  * through its title). A header pattern's `phoneMenu` names its phone shape (drawer · bar · both), stamped by
  * `planNavShape` (CC1).
+ *
+ * CC4b (`pricing.tiers`): `recipe: 'segmented'` stamps a Segmented control (Monthly · Yearly, named by `name`, its own
+ * `lay` / `resp`) · `shownWhen` hides a node at base and shows it while the pattern's segmented option of that key is
+ * on (the targeted `trigger-on`) · `ph: 'price'` a price the studio types (a publish-blocking placeholder showing its
+ * label) · on a card recipe: `words` (title / text / badge), `badge` (the badge's tone) and `icon` (its glyph), `scheme`
+ * (the Brand card), and `c` — nodes joining its Content column · `icon` an Icon's glyph · `layer` the node's name in the
+ * layer tree.
  */
 export interface PatternNode {
     readonly t: string;
@@ -59,6 +66,16 @@ export interface PatternNode {
     readonly opens?: string;
     /** CC3: a control's accessible name (`ariaLabel`). */
     readonly name?: string;
+    /** CC4b: hidden at base, shown while the pattern's Segmented option with this key is on. */
+    readonly shownWhen?: string;
+    /** CC4b: a card recipe's words (its title, text, badge). */
+    readonly words?: Readonly<Record<string, string>>;
+    /** CC4b: a card recipe's badge tone (`neutral` · `success` · `warning` · `accent`). */
+    readonly badge?: string;
+    /** CC4b: an Icon's glyph (`ph ph-check`) — on a card recipe, its badge's glyph. */
+    readonly icon?: string;
+    /** CC4b: the node's name in the layer tree (`Price · Monthly`). */
+    readonly layer?: string;
 }
 
 /** The composite-core recipes a pattern may stamp (`recipe`). */
@@ -70,6 +87,8 @@ export enum PatternRecipe {
     /** CC4a: Tabs — Manual (three placeholder tabs), or From content when the section names a list `binding`: the tab
      *  list and the panels are both Repeaters over it, one row giving its tab AND its panel. */
     Tabs = 'tabs',
+    /** CC4b: the Segmented control — Monthly · Yearly, named by the pattern (`name`). */
+    Segmented = 'segmented',
     /** CC3: the accessible carousel — a named Slider whose controls are parts, one quote per slide (placeholders). */
     Carousel = 'carousel',
     /** CC3: the Lightbox — a Dialog holding a Slider over the node's `src` (the gallery's own source). */
@@ -112,6 +131,8 @@ export enum PatternPlaceholder {
     Image = 'image',
     /** CC3: a clip the studio uploads (a Video's file): the poster blank until then, publish-blocking. */
     Video = 'video',
+    /** CC4b (Q37): a price the studio types — free text, publish-blocking, its label shown meanwhile, never a number. */
+    Price = 'price',
 }
 
 /** CC3: what an `opens` node opens. */

package/src/generation-core/site-spec.generated.ts

@@ -1025,6 +1025,645 @@ export const SPEC_SITE_PATTERNS = {
       ]
     }
   },
+  "pricing.tiers": {
+    "family": "pricing",
+    "label": "Pricing — plans with a monthly / yearly switch",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "c": [
+        {
+          "t": "Container",
+          "es": "box",
+          "lay": {
+            "display": "flex",
+            "flexDirection": "column",
+            "gap": "8px",
+            "alignItems": "center",
+            "textAlign": "center"
+          },
+          "c": [
+            {
+              "t": "Text",
+              "es": "eyebrow",
+              "slot": "eyebrow",
+              "ph": "copy",
+              "text": "Pricing",
+              "lay": {
+                "textAlign": "center"
+              }
+            },
+            {
+              "t": "Heading",
+              "es": "h2",
+              "level": "h2",
+              "slot": "title",
+              "ph": "copy",
+              "text": "Plans",
+              "lay": {
+                "textAlign": "center"
+              }
+            }
+          ]
+        },
+        {
+          "t": "Container",
+          "recipe": "segmented",
+          "name": "Billing period",
+          "lay": {
+            "alignSelf": "center"
+          },
+          "resp": {
+            "mobile": {
+              "position": "sticky",
+              "top": "calc(12px + env(safe-area-inset-top, 0px))",
+              "zIndex": "2",
+              "width": "100%"
+            }
+          }
+        },
+        {
+          "t": "Container",
+          "es": "box",
+          "layer": "Plans",
+          "lay": {
+            "display": "grid",
+            "gridTemplateColumns": "repeat(3, minmax(0, 1fr))",
+            "gap": "var(--iox-space-gap)",
+            "alignItems": "stretch"
+          },
+          "resp": {
+            "mobile": {
+              "gridTemplateColumns": "minmax(0, 1fr)"
+            }
+          },
+          "c": [
+            {
+              "t": "Container",
+              "recipe": "card",
+              "layout": "top",
+              "ph": "copy",
+              "parts": {
+                "media": false,
+                "eyebrow": false,
+                "badge": false,
+                "actions": false
+              },
+              "words": {
+                "title": "First plan",
+                "text": "Who this plan is for, in one sentence."
+              },
+              "c": [
+                {
+                  "t": "Container",
+                  "es": "box",
+                  "layer": "Price · Monthly",
+                  "shownWhen": "monthly",
+                  "lay": {
+                    "display": "flex",
+                    "alignItems": "baseline",
+                    "flexWrap": "wrap",
+                    "gap": "6px"
+                  },
+                  "c": [
+                    {
+                      "t": "Text",
+                      "es": "price",
+                      "ph": "price",
+                      "text": "Monthly price",
+                      "lay": {
+                        "width": "auto"
+                      }
+                    },
+                    {
+                      "t": "Text",
+                      "es": "small",
+                      "text": "per month",
+                      "lay": {
+                        "width": "auto"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "t": "Container",
+                  "es": "box",
+                  "layer": "Price · Yearly",
+                  "shownWhen": "yearly",
+                  "lay": {
+                    "display": "flex",
+                    "alignItems": "baseline",
+                    "flexWrap": "wrap",
+                    "gap": "6px"
+                  },
+                  "c": [
+                    {
+                      "t": "Text",
+                      "es": "price",
+                      "ph": "price",
+                      "text": "Yearly price",
+                      "lay": {
+                        "width": "auto"
+                      }
+                    },
+                    {
+                      "t": "Text",
+                      "es": "small",
+                      "text": "per year",
+                      "lay": {
+                        "width": "auto"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "t": "Container",
+                  "es": "box",
+                  "layer": "Includes",
+                  "lay": {
+                    "display": "flex",
+                    "flexDirection": "column",
+                    "gap": "8px"
+                  },
+                  "c": [
+                    {
+                      "t": "Container",
+                      "es": "box",
+                      "lay": {
+                        "display": "flex",
+                        "flexWrap": "nowrap",
+                        "gap": "8px",
+                        "alignItems": "center"
+                      },
+                      "c": [
+                        {
+                          "t": "Icon",
+                          "es": "icon",
+                          "icon": "ph ph-check"
+                        },
+                        {
+                          "t": "Text",
+                          "es": "body",
+                          "ph": "copy",
+                          "text": "What this plan includes"
+                        }
+                      ]
+                    },
+                    {
+                      "t": "Container",
+                      "es": "box",
+                      "lay": {
+                        "display": "flex",
+                        "flexWrap": "nowrap",
+                        "gap": "8px",
+                        "alignItems": "center"
+                      },
+                      "c": [
+                        {
+                          "t": "Icon",
+                          "es": "icon",
+                          "icon": "ph ph-check"
+                        },
+                        {
+                          "t": "Text",
+                          "es": "body",
+                          "ph": "copy",
+                          "text": "What this plan includes"
+                        }
+                      ]
+                    },
+                    {
+                      "t": "Container",
+                      "es": "box",
+                      "lay": {
+                        "display": "flex",
+                        "flexWrap": "nowrap",
+                        "gap": "8px",
+                        "alignItems": "center"
+                      },
+                      "c": [
+                        {
+                          "t": "Icon",
+                          "es": "icon",
+                          "icon": "ph ph-check"
+                        },
+                        {
+                          "t": "Text",
+                          "es": "body",
+                          "ph": "copy",
+                          "text": "What this plan includes"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "t": "Container",
+                  "es": "box",
+                  "role": "card.actions",
+                  "layer": "Buttons",
+                  "lay": {
+                    "display": "flex",
+                    "flexWrap": "wrap",
+                    "gap": "8px",
+                    "alignItems": "center",
+                    "width": "100%",
+                    "margin": "auto 0px 0px 0px",
+                    "padding": "6px 0px 0px 0px"
+                  },
+                  "c": [
+                    {
+                      "t": "ButtonBlock",
+                      "es": "button-primary",
+                      "href": "/contact",
+                      "text": "Choose this plan"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "t": "Container",
+              "recipe": "card",
+              "layout": "top",
+              "ph": "copy",
+              "scheme": "accent",
+              "badge": "neutral",
+              "icon": "ph ph-sparkle",
+              "parts": {
+                "media": false,
+                "eyebrow": false,
+                "badge": true,
+                "actions": false
+              },
+              "words": {
+                "title": "Second plan",
+                "text": "Who this plan is for, in one sentence.",
+                "badge": "Most popular"
+              },
+              "c": [
+                {
+                  "t": "Container",
+                  "es": "box",
+                  "layer": "Price · Monthly",
+                  "shownWhen": "monthly",
+                  "lay": {
+                    "display": "flex",
+                    "alignItems": "baseline",
+                    "flexWrap": "wrap",
+                    "gap": "6px"
+                  },
+                  "c": [
+                    {
+                      "t": "Text",
+                      "es": "price",
+                      "ph": "price",
+                      "text": "Monthly price",
+                      "lay": {
+                        "width": "auto"
+                      }
+                    },
+                    {
+                      "t": "Text",
+                      "es": "small",
+                      "text": "per month",
+                      "lay": {
+                        "width": "auto"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "t": "Container",
+                  "es": "box",
+                  "layer": "Price · Yearly",
+                  "shownWhen": "yearly",
+                  "lay": {
+                    "display": "flex",
+                    "alignItems": "baseline",
+                    "flexWrap": "wrap",
+                    "gap": "6px"
+                  },
+                  "c": [
+                    {
+                      "t": "Text",
+                      "es": "price",
+                      "ph": "price",
+                      "text": "Yearly price",
+                      "lay": {
+                        "width": "auto"
+                      }
+                    },
+                    {
+                      "t": "Text",
+                      "es": "small",
+                      "text": "per year",
+                      "lay": {
+                        "width": "auto"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "t": "Container",
+                  "es": "box",
+                  "layer": "Includes",
+                  "lay": {
+                    "display": "flex",
+                    "flexDirection": "column",
+                    "gap": "8px"
+                  },
+                  "c": [
+                    {
+                      "t": "Container",
+                      "es": "box",
+                      "lay": {
+                        "display": "flex",
+                        "flexWrap": "nowrap",
+                        "gap": "8px",
+                        "alignItems": "center"
+                      },
+                      "c": [
+                        {
+                          "t": "Icon",
+                          "es": "icon",
+                          "icon": "ph ph-check"
+                        },
+                        {
+                          "t": "Text",
+                          "es": "body",
+                          "ph": "copy",
+                          "text": "What this plan includes"
+                        }
+                      ]
+                    },
+                    {
+                      "t": "Container",
+                      "es": "box",
+                      "lay": {
+                        "display": "flex",
+                        "flexWrap": "nowrap",
+                        "gap": "8px",
+                        "alignItems": "center"
+                      },
+                      "c": [
+                        {
+                          "t": "Icon",
+                          "es": "icon",
+                          "icon": "ph ph-check"
+                        },
+                        {
+                          "t": "Text",
+                          "es": "body",
+                          "ph": "copy",
+                          "text": "What this plan includes"
+                        }
+                      ]
+                    },
+                    {
+                      "t": "Container",
+                      "es": "box",
+                      "lay": {
+                        "display": "flex",
+                        "flexWrap": "nowrap",
+                        "gap": "8px",
+                        "alignItems": "center"
+                      },
+                      "c": [
+                        {
+                          "t": "Icon",
+                          "es": "icon",
+                          "icon": "ph ph-check"
+                        },
+                        {
+                          "t": "Text",
+                          "es": "body",
+                          "ph": "copy",
+                          "text": "What this plan includes"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "t": "Container",
+                  "es": "box",
+                  "role": "card.actions",
+                  "layer": "Buttons",
+                  "lay": {
+                    "display": "flex",
+                    "flexWrap": "wrap",
+                    "gap": "8px",
+                    "alignItems": "center",
+                    "width": "100%",
+                    "margin": "auto 0px 0px 0px",
+                    "padding": "6px 0px 0px 0px"
+                  },
+                  "c": [
+                    {
+                      "t": "ButtonBlock",
+                      "es": "button-primary",
+                      "href": "/contact",
+                      "text": "Choose this plan"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "t": "Container",
+              "recipe": "card",
+              "layout": "top",
+              "ph": "copy",
+              "parts": {
+                "media": false,
+                "eyebrow": false,
+                "badge": false,
+                "actions": false
+              },
+              "words": {
+                "title": "Third plan",
+                "text": "Who this plan is for, in one sentence."
+              },
+              "c": [
+                {
+                  "t": "Container",
+                  "es": "box",
+                  "layer": "Price · Monthly",
+                  "shownWhen": "monthly",
+                  "lay": {
+                    "display": "flex",
+                    "alignItems": "baseline",
+                    "flexWrap": "wrap",
+                    "gap": "6px"
+                  },
+                  "c": [
+                    {
+                      "t": "Text",
+                      "es": "price",
+                      "ph": "price",
+                      "text": "Monthly price",
+                      "lay": {
+                        "width": "auto"
+                      }
+                    },
+                    {
+                      "t": "Text",
+                      "es": "small",
+                      "text": "per month",
+                      "lay": {
+                        "width": "auto"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "t": "Container",
+                  "es": "box",
+                  "layer": "Price · Yearly",
+                  "shownWhen": "yearly",
+                  "lay": {
+                    "display": "flex",
+                    "alignItems": "baseline",
+                    "flexWrap": "wrap",
+                    "gap": "6px"
+                  },
+                  "c": [
+                    {
+                      "t": "Text",
+                      "es": "price",
+                      "ph": "price",
+                      "text": "Yearly price",
+                      "lay": {
+                        "width": "auto"
+                      }
+                    },
+                    {
+                      "t": "Text",
+                      "es": "small",
+                      "text": "per year",
+                      "lay": {
+                        "width": "auto"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "t": "Container",
+                  "es": "box",
+                  "layer": "Includes",
+                  "lay": {
+                    "display": "flex",
+                    "flexDirection": "column",
+                    "gap": "8px"
+                  },
+                  "c": [
+                    {
+                      "t": "Container",
+                      "es": "box",
+                      "lay": {
+                        "display": "flex",
+                        "flexWrap": "nowrap",
+                        "gap": "8px",
+                        "alignItems": "center"
+                      },
+                      "c": [
+                        {
+                          "t": "Icon",
+                          "es": "icon",
+                          "icon": "ph ph-check"
+                        },
+                        {
+                          "t": "Text",
+                          "es": "body",
+                          "ph": "copy",
+                          "text": "What this plan includes"
+                        }
+                      ]
+                    },
+                    {
+                      "t": "Container",
+                      "es": "box",
+                      "lay": {
+                        "display": "flex",
+                        "flexWrap": "nowrap",
+                        "gap": "8px",
+                        "alignItems": "center"
+                      },
+                      "c": [
+                        {
+                          "t": "Icon",
+                          "es": "icon",
+                          "icon": "ph ph-check"
+                        },
+                        {
+                          "t": "Text",
+                          "es": "body",
+                          "ph": "copy",
+                          "text": "What this plan includes"
+                        }
+                      ]
+                    },
+                    {
+                      "t": "Container",
+                      "es": "box",
+                      "lay": {
+                        "display": "flex",
+                        "flexWrap": "nowrap",
+                        "gap": "8px",
+                        "alignItems": "center"
+                      },
+                      "c": [
+                        {
+                          "t": "Icon",
+                          "es": "icon",
+                          "icon": "ph ph-check"
+                        },
+                        {
+                          "t": "Text",
+                          "es": "body",
+                          "ph": "copy",
+                          "text": "What this plan includes"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "t": "Container",
+                  "es": "box",
+                  "role": "card.actions",
+                  "layer": "Buttons",
+                  "lay": {
+                    "display": "flex",
+                    "flexWrap": "wrap",
+                    "gap": "8px",
+                    "alignItems": "center",
+                    "width": "100%",
+                    "margin": "auto 0px 0px 0px",
+                    "padding": "6px 0px 0px 0px"
+                  },
+                  "c": [
+                    {
+                      "t": "ButtonBlock",
+                      "es": "button-primary",
+                      "href": "/contact",
+                      "text": "Choose this plan"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "lay": {
+        "display": "flex",
+        "flexDirection": "column",
+        "gap": "32px"
+      }
+    }
+  },
   "hero.full-bleed-media": {
     "family": "hero",
     "label": "Hero — words over a background video",