@shopify/ui-extensions 2025.10.0-rc.9 → 2025.10.1

package/src/surfaces/admin/components/patterns/examples/settings.jsx

@@ -16,334 +16,192 @@ export default function SettingsPage() {
 
   return (
     <form data-save-bar onSubmit={handleFormSubmit} onReset={handleFormReset}>
-      <s-page>
+      <s-page heading="Settings" inlineSize="small">
         {/* === */}
-        {/* Title Bar */}
-        {/* Note: ui-title-bar requires AppBridge to render correctly */}
+        {/* Store Information */}
         {/* === */}
-        <ui-title-bar title="Settings"></ui-title-bar>
+        <s-section heading="Store Information">
+          <s-text-field
+            label="Store name"
+            name="store-name"
+            value="Puzzlify Store"
+            placeholder="Enter store name"
+          />
+          <s-text-field
+            label="Business address"
+            name="business-address"
+            value="123 Main St, Anytown, USA"
+            placeholder="Enter business address"
+          />
+          <s-text-field
+            label="Store phone"
+            name="store-phone"
+            value="+1 (555) 123-4567"
+            placeholder="Enter phone number"
+          />
+          <s-choice-list label="Primary currency" name="currency">
+            <s-choice value="usd" selected>US Dollar ($)</s-choice>
+            <s-choice value="cad">Canadian Dollar (CAD)</s-choice>
+            <s-choice value="eur">Euro (€)</s-choice>
+          </s-choice-list>
+        </s-section>
+
         {/* === */}
-        {/* Store settings */}
+        {/* Notifications */}
         {/* === */}
-        <s-grid gap="base">
-          <s-grid
-            gridTemplateColumns="@container (inline-size <= 700px) 1fr, 2fr 5fr"
-            gap="base"
+        <s-section heading="Notifications">
+          <s-select
+            label="Notification frequency"
+            name="notification-frequency"
           >
-            {/* Left column */}
-            <s-box>
-              <s-heading>Store Settings</s-heading>
-              <s-paragraph>Manage your store information</s-paragraph>
-            </s-box>
-            {/* Right column */}
-            <s-section accessibilityLabel="Store information section">
-              {/* Card-like container with border and padding */}
-              <s-box
-                padding="base"
-                border="base"
-                borderStyle="solid"
-                borderRadius="base"
-              >
-                <s-grid gap="base">
-                  <s-stack direction="inline" justifyContent="space-between">
-                    <s-stack
-                      direction="inline"
-                      alignItems="center"
-                      gap="small-200"
-                    >
-                      <s-icon type="store"></s-icon>
-                      <s-paragraph>Puzzlify Store</s-paragraph>
-                    </s-stack>
-                    {/* Icon-only button requires accessibilityLabel for screen readers */}
-                    <s-button
-                      icon="edit"
-                      variant="tertiary"
-                      tone="neutral"
-                      accessibilityLabel="Edit store name"
-                    ></s-button>
-                  </s-stack>
-                  <s-divider></s-divider>
-                  <s-stack
-                    direction="inline"
-                    justifyContent="space-between"
-                    alignItems="center"
-                  >
-                    <s-stack
-                      direction="inline"
-                      alignItems="center"
-                      gap="small-200"
-                    >
-                      <s-icon type="location"></s-icon>
-                      <s-box>
-                        <s-paragraph>Business address</s-paragraph>
-                        <s-paragraph>Puzzle Retailer</s-paragraph>
-                      </s-box>
-                    </s-stack>
-                    <s-box>
-                      {/* Icon-only button requires accessibilityLabel for screen readers */}
-                      <s-button
-                        icon="edit"
-                        variant="tertiary"
-                        tone="neutral"
-                        accessibilityLabel="Edit business address"
-                      ></s-button>
-                    </s-box>
-                  </s-stack>
-                </s-grid>
-              </s-box>
-            </s-section>
-          </s-grid>
-
-          {/* === */}
-          {/* Product defaults */}
-          {/* === */}
-          <s-grid
-            gridTemplateColumns="@container (inline-size <= 700px) 1fr, 2fr 5fr"
-            gap="base"
+            <s-option value="immediately" selected>
+              Immediately
+            </s-option>
+            <s-option value="hourly">Hourly digest</s-option>
+            <s-option value="daily">Daily digest</s-option>
+          </s-select>
+          <s-choice-list
+            label="Notification types"
+            name="notifications-type"
+            multiple
           >
-            {/* Left column */}
-            <s-box>
-              <s-heading>Product Defaults</s-heading>
-              <s-paragraph>Set default options for new puzzles</s-paragraph>
-            </s-box>
-            {/* Right column */}
-            <s-section accessibilityLabel="Product defaults section">
-              <s-grid gap="base">
-                <s-grid gap="base">
-                  <s-select
-                    label="Default puzzle size"
-                    name="default-puzzle-size"
-                  >
-                    <s-option value="small">Small (9" x 9")</s-option>
-                    <s-option value="medium" selected>
-                      Medium (18" x 24")
-                    </s-option>
-                    <s-option value="large">Large (24" x 36")</s-option>
-                  </s-select>
-                  <s-select
-                    label="Default piece count"
-                    name="default-piece-count"
-                  >
-                    <s-option value="250" selected>
-                      250 pieces (Easy)
-                    </s-option>
-                    <s-option value="500">500 pieces (Medium)</s-option>
-                    <s-option value="1000">1000 pieces (Hard)</s-option>
-                    <s-option value="2000">2000 pieces (Expert)</s-option>
-                  </s-select>
-                  <s-select label="Default material" name="default-material">
-                    <s-option value="standard" selected>
-                      Standard cardboard
-                    </s-option>
-                    <s-option value="premium">Premium cardboard</s-option>
-                    <s-option value="wooden">Wooden pieces</s-option>
-                  </s-select>
-                  {/* switches (rather than checkboxes) should be used to enable/disable a single option */}
-                  <s-switch
-                    label="Include reference image"
-                    name="include-reference-image"
-                    details="Ship a reference image with the puzzle"
-                  ></s-switch>
-                </s-grid>
-              </s-grid>
-            </s-section>
-          </s-grid>
+            <s-choice value="new-order" selected>
+              New order notifications
+            </s-choice>
+            <s-choice value="low-stock">Low stock alerts</s-choice>
+            <s-choice value="customer-review">
+              Customer review notifications
+            </s-choice>
+            <s-choice value="shipping-updates">Shipping updates</s-choice>
+          </s-choice-list>
+        </s-section>
 
-          {/* === */}
-          {/* Customer experience */}
-          {/* === */}
-          <s-grid
-            gridTemplateColumns="@container (inline-size <= 700px) 1fr, 2fr 5fr"
-            gap="base"
+        {/* === */}
+        {/* Preferences */}
+        {/* === */}
+        <s-section heading="Preferences">
+        <s-box
+            border="base"
+            borderRadius="base"
           >
-            {/* Left column */}
-            <s-box>
-              <s-heading>Puzzle Experience</s-heading>
-              <s-paragraph>
-                Configure how customers interact with your puzzles
-              </s-paragraph>
-            </s-box>
-            {/* Right column */}
-            <s-section accessibilityLabel="Puzzle experience settings">
-              <s-grid gap="base">
-                <s-choice-list
-                  label="Default puzzle packaging style"
-                  name="packaging-style"
-                  details="This will be used for all new puzzles"
-                >
-                  <s-choice
-                    label="Standard box with preview image"
-                    value="standard-preview"
-                    selected
-                  ></s-choice>
-                  <s-choice
-                    label="Mystery box (no preview)"
-                    value="mystery"
-                  ></s-choice>
-                  <s-choice
-                    label="Gift packaging with ribbon"
-                    value="gift"
-                  ></s-choice>
-                  <s-choice
-                    label="Eco-friendly minimal packaging"
-                    value="eco"
-                  ></s-choice>
-                </s-choice-list>
+            <s-clickable
+              padding="small-100"
+              href="/app/settings/shipping"
+              accessibilityLabel="Configure shipping methods, rates, and fulfillment options"
+            >
+              <s-grid
+                gridTemplateColumns="1fr auto"
+                alignItems="center"
+                gap="base"
+              >
+                <s-box>
+                  <s-heading>Shipping & fulfillment</s-heading>
+                  <s-paragraph color="subdued">
+                    Shipping methods, rates, zones, and fulfillment preferences.
+                  </s-paragraph>
+                </s-box>
+                <s-icon type="chevron-right"></s-icon>
               </s-grid>
-            </s-section>
-          </s-grid>
-
-          {/* === */}
-          {/* Catalog settings */}
-          {/* === */}
-          <s-grid
-            gridTemplateColumns="@container (inline-size <= 700px) 1fr, 2fr 5fr"
-            gap="base"
-          >
-            {/* Left column */}
-            <s-box>
-              <s-heading>Catalog Settings</s-heading>
-              <s-paragraph>Configure your online puzzle catalog</s-paragraph>
+            </s-clickable>
+            <s-box paddingInline="small-100">
+              <s-divider></s-divider>
             </s-box>
-            {/* Right column */}
-            <s-section accessibilityLabel="Catalog settings section">
-              <s-grid gap="base">
-                <s-grid gap="base">
-                  <s-select label="Default sorting" name="default-sorting">
-                    <s-option value="newest" selected>
-                      Newest first
-                    </s-option>
-                    <s-option value="bestselling">Best selling</s-option>
-                    <s-option value="price-low">Price: Low to high</s-option>
-                    <s-option value="price-high">Price: High to low</s-option>
-                  </s-select>
-                  <s-choice-list
-                    label="Display options"
-                    name="display-options"
-                    multiple
-                  >
-                    <s-choice
-                      label="Show difficulty levels"
-                      value="show-difficulty"
-                      selected
-                    ></s-choice>
-                    <s-choice
-                      label="Show piece counts"
-                      value="show-piece-count"
-                    ></s-choice>
-                    <s-choice
-                      label="Show dimensions"
-                      value="show-dimensions"
-                    ></s-choice>
-                  </s-choice-list>
-                </s-grid>
-              </s-grid>
-            </s-section>
-          </s-grid>
 
-          {/* === */}
-          {/* Order notifications */}
-          {/* === */}
-          <s-grid
-            gridTemplateColumns="@container (inline-size <= 700px) 1fr, 2fr 5fr"
-            gap="base"
-          >
-            {/* Left column */}
-            <s-box>
-              <s-heading>Order Notifications</s-heading>
-              <s-paragraph>Manage your business notifications</s-paragraph>
+            <s-clickable
+              padding="small-100"
+              href="/app/settings/products_catalog"
+              accessibilityLabel="Configure product defaults, customer experience, and catalog settings"
+            >
+              <s-grid
+                gridTemplateColumns="1fr auto"
+                alignItems="center"
+                gap="base"
+              >
+                <s-box>
+                  <s-heading>Products & catalog</s-heading>
+                  <s-paragraph color="subdued">
+                    Product defaults, customer experience, and catalog display
+                    options.
+                  </s-paragraph>
+                </s-box>
+                <s-icon type="chevron-right"></s-icon>
+              </s-grid>
+            </s-clickable>
+            <s-box paddingInline="small-100">
+              <s-divider></s-divider>
             </s-box>
-            {/* Right column */}
-            <s-section accessibilityLabel="Order notifications section">
-              <s-grid gap="base">
-                <s-grid gap="base">
-                  <s-select
-                    label="Notification frequency"
-                    name="notification-frequency"
-                  >
-                    <s-option value="immediately" selected>
-                      Immediately
-                    </s-option>
-                    <s-option value="hourly">Hourly digest</s-option>
-                    <s-option value="daily">Daily digest</s-option>
-                  </s-select>
-                  <s-choice-list
-                    label="Notifications type"
-                    name="notifications-type"
-                    multiple
-                  >
-                    <s-choice
-                      label="New order notifications"
-                      value="new-order"
-                      selected
-                    ></s-choice>
-                    <s-choice
-                      label="Low stock alerts"
-                      value="low-stock"
-                    ></s-choice>
-                    <s-choice
-                      label="Customer review notifications"
-                      value="customer-review"
-                    ></s-choice>
-                    <s-choice
-                      label="Shipping updates"
-                      value="shipping-updates"
-                    ></s-choice>
-                  </s-choice-list>
-                </s-grid>
+
+            <s-clickable
+              padding="small-100"
+              href="/app/settings/customer_support"
+              accessibilityLabel="Manage customer support settings and help resources"
+            >
+              <s-grid
+                gridTemplateColumns="1fr auto"
+                alignItems="center"
+                gap="base"
+              >
+                <s-box>
+                  <s-heading>Customer support</s-heading>
+                  <s-paragraph color="subdued">
+                    Support settings, help resources, and customer service
+                    tools.
+                  </s-paragraph>
+                </s-box>
+                <s-icon type="chevron-right"></s-icon>
               </s-grid>
-            </s-section>
-          </s-grid>
+            </s-clickable>
+          </s-box>
+        </s-section>
 
-          {/* === */}
-          {/* Shipping settings */}
-          {/* === */}
-          <s-grid
-            gridTemplateColumns="@container (inline-size <= 700px) 1fr, 2fr 5fr"
-            gap="base"
+        {/* === */}
+        {/* Tools */}
+        {/* === */}
+        <s-section heading="Tools">
+          <s-stack
+            gap="none"
+            border="base"
+            borderRadius="base"
+            overflow="hidden"
           >
-            {/* Left column */}
-            <s-box>
-              <s-heading>Shipping</s-heading>
-              <s-paragraph>Configure shipping settings</s-paragraph>
+            <s-box padding="small-100">
+              <s-grid
+                gridTemplateColumns="1fr auto"
+                alignItems="center"
+                gap="base"
+              >
+                <s-box>
+                  <s-heading>Reset app settings</s-heading>
+                  <s-paragraph color="subdued">
+                    Reset all settings to their default values. This action
+                    cannot be undone.
+                  </s-paragraph>
+                </s-box>
+                <s-button tone="critical">Reset</s-button>
+              </s-grid>
+            </s-box>
+            <s-box paddingInline="small-100">
+              <s-divider></s-divider>
             </s-box>
-            {/* Right column */}
-            <s-section accessibilityLabel="Shipping settings section">
-              <s-grid gap="base">
-                <s-select
-                  label="Default shipping method"
-                  name="default-shipping-method"
-                >
-                  <s-option value="standard" selected>
-                    Standard shipping
-                  </s-option>
-                  <s-option value="express">Express shipping</s-option>
-                  <s-option value="free">Free shipping (over $50)</s-option>
-                </s-select>
-                <s-choice-list
-                  label="Shipping preferences"
-                  name="shipping-preferences"
-                  multiple
-                >
-                  <s-choice
-                    label="Calculate shipping based on weight"
-                    value="calculate-shipping"
-                    selected
-                  ></s-choice>
-                  <s-choice
-                    label="Offer international shipping"
-                    value="international-shipping"
-                  ></s-choice>
-                  <s-choice
-                    label="Show estimated delivery dates"
-                    value="estimated-delivery-dates"
-                  ></s-choice>
-                </s-choice-list>
+
+            <s-box padding="small-100">
+              <s-grid
+                gridTemplateColumns="1fr auto"
+                alignItems="center"
+                gap="base"
+              >
+                <s-box>
+                  <s-heading>Export settings</s-heading>
+                  <s-paragraph color="subdued">
+                    Download a backup of all your current settings.
+                  </s-paragraph>
+                </s-box>
+                <s-button>Export</s-button>
               </s-grid>
-            </s-section>
-          </s-grid>
-        </s-grid>
+            </s-box>
+          </s-stack>
+        </s-section>
       </s-page>
     </form>
   );
-}
+}

package/src/surfaces/admin/components/patterns/examples/setupGuide.html

@@ -0,0 +1,91 @@
+<s-section>
+  <s-grid gap="base">
+    <s-grid gap="small-200">
+      <s-grid gridTemplateColumns="1fr auto auto" gap="small-300" alignItems="center">
+        <s-heading>Setup Guide</s-heading>
+        <s-button
+          accessibilityLabel="Dismiss Guide"
+          variant="tertiary"
+          tone="neutral"
+          icon="x"
+        ></s-button>
+        <s-button
+          accessibilityLabel="Toggle setup guide"
+          variant="tertiary"
+          tone="neutral"
+          icon="chevron-up"
+        ></s-button>
+      </s-grid>
+      <s-paragraph>
+        Use this personalized guide to get your store ready for sales.
+      </s-paragraph>
+        <s-paragraph tone="subdued">0 out of 3 steps completed</s-paragraph>
+    </s-grid>
+    <s-box borderRadius="base" border="base" background="base">
+      <s-box>
+          <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
+            <s-checkbox
+              label="Upload an image for your puzzle"
+            ></s-checkbox>
+            <s-button
+              accessibilityLabel="Toggle step 1 details"
+              variant="tertiary"
+              icon="chevron-up"
+            ></s-button>
+          </s-grid>
+        <s-box padding="small" paddingBlockStart="none">
+          <s-box padding="base" background="subdued" borderRadius="base">
+            <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+              <s-grid gap="small-200">
+                <s-paragraph>
+                  Start by uploading a high-quality image that will be used to create your
+                  puzzle. For best results, use images that are at least 1200x1200 pixels.
+                </s-paragraph>
+                <s-stack direction="inline" gap="small-200">
+                  <s-button variant="primary">
+                    Upload image
+                  </s-button>
+                  <s-button variant="tertiary" tone="neutral"> Image requirements </s-button>
+                </s-stack>
+              </s-grid>
+              <s-box maxBlockSize="80px" maxInlineSize="80px">
+                <s-image
+                  src="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
+                  alt="Customize checkout illustration"
+                ></s-image>
+              </s-box>
+            </s-grid>
+          </s-box>
+        </s-box>
+      </s-box>
+      <s-divider></s-divider>
+      <s-box>
+          <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
+            <s-checkbox
+              label="Choose a puzzle template"
+            ></s-checkbox>
+            <s-button
+              accessibilityLabel="Toggle step 2 details"
+              variant="tertiary"
+              icon="chevron-down"
+            ></s-button>
+          </s-grid>
+        <s-box padding="small" paddingBlockStart="none" style="display: none;"></s-box>
+      </s-box>
+      <s-divider></s-divider>
+      <s-box>
+          <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
+            <s-checkbox
+              label="Customize puzzle piece shapes"
+            ></s-checkbox>
+            <s-button
+              accessibilityLabel="Toggle step 3 details"
+              variant="tertiary"
+              icon="chevron-down"
+            ></s-button>
+          </s-grid>
+        <s-box padding="small" paddingBlockStart="none" style="display: none;"></s-box>
+      </s-box>
+    </s-box>
+  </s-grid>
+</s-section>

package/src/surfaces/admin/components/patterns/index.ab.doc.ts

@@ -2,19 +2,18 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'Index',
-  isOneColumnLayout: true,
   overviewPreviewDescription:
     'Manage objects efficiently with dynamic table actions.',
   description: `The index layout lets merchants view and manage all their objects at once in a table format. They can filter, sort and do quick actions on their objects. To prevent tables from becoming visually cluttered, reveal actions only when the row is hovered over or selected
 
-  | Used to    | Examples |
-| -------- | ------- |
-| View all objects at once  | Products, orders, customers, discounts    |
-| Perform bulk actions | Delete products, pause/activate campaigns      |
+  | Used to | Examples |
+  | --- | --- |
+  | View all objects at once | Products, orders, customers, discounts |
+  | Perform bulk actions | Delete products, pause/activate campaigns |
 
   ![Preview of the index pattern](/assets/templated-apis-screenshots/admin/patterns/index-example.png)
 
-  This pattern uses \`Section\`, \`Stack\`, \`Heading\`, \`Button\`, \`Table\`, \`Paragraph\`, \`Box\` and \`Grid\` components.
+  This pattern uses \`Badge\`, \`Box\`, \`Button\`, \`Clickable\`, \`Grid\`, \`Heading\`, \`Image\`, \`Link\`, \`Paragraph\`, \`Section\`, \`Stack\`, and \`Table\` components.
 
   ---
 
@@ -36,8 +35,8 @@ const data: ReferenceEntityTemplateSchema = {
   ---
 
   <style>
-    div[class*="CodeBlock-module-CodeBlock_"] {
-      max-height: calc(100vh - 80px) !important;
+          div[class*="CodeBlock-module-CodeBlock_"] {
+        max-height: calc(100vh - 400px) !important;
     }
     div[class*="Tabs-module-TabsContent_"] {
       overflow: auto !important;
@@ -48,10 +47,9 @@ const data: ReferenceEntityTemplateSchema = {
   </style>`,
   isVisualComponent: true,
   category: 'Patterns',
+  subCategory: 'Templates',
   thumbnail: '/assets/templated-apis-screenshots/admin/patterns/index.png',
   defaultExample: {
-    image:
-      '/assets/templated-apis-screenshots/admin/patterns/index-example.png',
     codeblock: {
       title: 'Index',
       tabs: [