npm - @shopify/ui-extensions - Versions diffs - 2025.10.0-rc.4 → 2025.10.0-rc.40 - Mend

@shopify/ui-extensions 2025.10.0-rc.4 → 2025.10.0-rc.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1251) hide show

package/src/surfaces/admin/components/patterns/examples/index.html ADDED Viewed

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>
+    <title>Pattern</title>
+  </head>
+  <body>
+    <!-- === -->
+    <!-- Index page pattern -->
+    <!-- === -->
+    <s-page heading="Puzzles">
+      <s-button slot="primary-action" variant="primary">Create puzzle</s-button>
+      <s-button slot="secondary-actions" variant="secondary">Export puzzles</s-button>
+      <s-button slot="secondary-actions" variant="secondary">Import puzzles</s-button>
+      <!-- === -->
+      <!-- Empty state -->
+      <!-- This should only be visible if the merchant has not created any puzzles yet. -->
+      <!-- === -->
+      <s-section accessibilityLabel="Empty state section">
+        <s-grid gap="base" justifyItems="center" paddingBlock="large-400">
+          <s-box maxInlineSize="200px" maxBlockSize="200px">
+            <s-image
+              maxInlineSize="200px"
+              maxBlockSize="200px"
+              aspectRatio="1/0.5"
+              src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
+              alt="A stylized graphic of four characters, each holding a puzzle piece"
+            />
+          </s-box>
+          <s-grid justifyItems="center" maxInlineSize="450px" gap="base">
+            <s-stack alignItems="center">
+              <s-heading>Start creating puzzles</s-heading>
+              <s-paragraph>
+                Create and manage your collection of puzzles for players to enjoy.
+              </s-paragraph>
+            </s-stack>
+            <s-button-group>
+              <s-button slot="secondary-actions" aria-label="Learn more about creating puzzles"> Learn more </s-button>
+              <s-button slot="primary-action" aria-label="Add a new puzzle"> Create puzzle </s-button>
+            </s-button-group>
+          </s-grid>
+        </s-grid>
+      </s-section>
+      <!-- === -->
+      <!-- Table -->
+      <!-- This should only be visible if the merchant has created one or more puzzles. -->
+      <!-- === -->
+      <s-section padding="none" accessibilityLabel="Puzzles table section">
+        <s-table>
+          <s-table-header-row>
+            <s-table-header listSlot="primary">Puzzle</s-table-header>
+            <s-table-header format="numeric">Pieces</s-table-header>
+            <s-table-header>Created</s-table-header>
+            <s-table-header>Status</s-table-header>
+          </s-table-header-row>
+          <s-table-body>
+            <s-table-row>
+              <s-table-cell>
+                <s-stack direction="inline" gap="small" alignItems="center">
+                  <s-clickable
+                    href="/app/details"
+                    accessibilityLabel="Mountain View puzzle thumbnail"
+                    border="base"
+                    borderRadius="base"
+                    overflow="hidden"
+                    inlineSize="40px"
+                    blockSize="40px"
+                  >
+                    <s-image objectFit="cover" alt="Mountain View puzzle thumbnail" src="https://picsum.photos/id/29/80/80"></s-image>
+                  </s-clickable>
+                  <s-link href="/app/details">Mountain View</s-link>
+                </s-stack>
+              </s-table-cell>
+              <s-table-cell>16</s-table-cell>
+              <s-table-cell>Today</s-table-cell>
+              <s-table-cell>
+                <s-badge color="base" tone="success"> Active </s-badge>
+              </s-table-cell>
+            </s-table-row>
+            <s-table-row>
+              <s-table-cell>
+                <s-stack direction="inline" gap="small" alignItems="center">
+                  <s-clickable
+                    href="/app/details"
+                    accessibilityLabel="Ocean Sunset puzzle thumbnail"
+                    border="base"
+                    borderRadius="base"
+                    overflow="hidden"
+                    inlineSize="40px"
+                    blockSize="40px"
+                  >
+                    <s-image objectFit="cover" alt="Ocean Sunset puzzle thumbnail" src="https://picsum.photos/id/12/80/80"></s-image>
+                  </s-clickable>
+                  <s-link href="/app/details">Ocean Sunset</s-link>
+                </s-stack>
+              </s-table-cell>
+              <s-table-cell>9</s-table-cell>
+              <s-table-cell>Yesterday</s-table-cell>
+              <s-table-cell>
+                <s-badge color="base" tone="success"> Active </s-badge>
+              </s-table-cell>
+            </s-table-row>
+            <s-table-row>
+              <s-table-cell>
+                <s-stack direction="inline" gap="small" alignItems="center">
+                  <s-clickable
+                    href="/app/details"
+                    accessibilityLabel="Forest Animals puzzle thumbnail"
+                    border="base"
+                    borderRadius="base"
+                    overflow="hidden"
+                    inlineSize="40px"
+                    blockSize="40px"
+                  >
+                    <s-image objectFit="cover" alt="Forest Animals puzzle thumbnail" src="https://picsum.photos/id/324/80/80"></s-image>
+                  </s-clickable>
+                  <s-link href="/app/details">Forest Animals</s-link>
+                </s-stack>
+              </s-table-cell>
+              <s-table-cell>25</s-table-cell>
+              <s-table-cell>Last week</s-table-cell>
+              <s-table-cell>
+                <s-badge color="base" tone="neutral"> Draft </s-badge>
+              </s-table-cell>
+            </s-table-row>
+            <!-- Add more rows as needed here -->
+            <!-- If more than 100 rows are needed, index page tables should use the paginate, hasPreviousPage, hasNextPage, onPreviousPage, and onNextPage attributes to display and handle pagination) -->
+          </s-table-body>
+        </s-table>
+      </s-section>
+    </s-page>
+  </body>
+</html>

package/src/surfaces/admin/components/patterns/examples/index.jsx ADDED Viewed

@@ -0,0 +1,150 @@
+// ===
+// Index page pattern
+// ===
+export default function IndexPage() {
+  return (
+    <s-page heading="Puzzles">
+      <s-button slot="primary-action" variant="primary">Create puzzle</s-button>
+      <s-button slot="secondary-actions" variant="secondary">Export puzzles</s-button>
+      <s-button slot="secondary-actions" variant="secondary">Import puzzles</s-button>
+      {/* === */}
+      {/* Empty state */}
+      {/* This should only be visible if the merchant has not created any puzzles yet. */}
+      {/* === */}
+      <s-section accessibilityLabel="Empty state section">
+        <s-grid gap="base" justifyItems="center" paddingBlock="large-400">
+          <s-box maxInlineSize="200px" maxBlockSize="200px">
+            <s-image
+              aspectRatio="1/0.5"
+              src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
+              alt="A stylized graphic of four characters, each holding a puzzle piece"
+            />
+          </s-box>
+          <s-grid
+            justifyItems="center"
+            maxInlineSize="450px"
+            gap="base"
+          >
+            <s-stack alignItems="center">
+              <s-heading>Start creating puzzles</s-heading>
+              <s-paragraph>
+                Create and manage your collection of puzzles for players to enjoy.
+              </s-paragraph>
+            </s-stack>
+            <s-button-group>
+              <s-button slot="secondary-actions" aria-label="Learn more about creating puzzles"> Learn more </s-button>
+              <s-button slot="primary-action" aria-label="Add a new puzzle"> Create puzzle </s-button>
+            </s-button-group>
+          </s-grid>
+        </s-grid>
+      </s-section>
+      {/* === */}
+      {/* Table */}
+      {/* This should only be visible if the merchant has created one or more puzzles. */}
+      {/* === */}
+      <s-section padding="none" accessibilityLabel="Puzzles table section">
+        <s-table>
+          <s-table-header-row>
+            <s-table-header listSlot="primary">Puzzle</s-table-header>
+            <s-table-header format="numeric">Pieces</s-table-header>
+            <s-table-header>Created</s-table-header>
+            <s-table-header>Status</s-table-header>
+          </s-table-header-row>
+          <s-table-body>
+            <s-table-row>
+              <s-table-cell>
+                <s-stack direction="inline" gap="small" alignItems="center">
+                  <s-clickable
+                    href="/app/details"
+                    accessibilityLabel="Mountain View puzzle thumbnail"
+                    border="base"
+                    borderRadius="base"
+                    overflow="hidden"
+                    inlineSize="40px"
+                    blockSize="40px"
+                  >
+                    <s-image
+                      objectFit="cover"
+                      alt="Mountain View puzzle thumbnail"
+                      src="https://picsum.photos/id/29/80/80"
+                    ></s-image>
+                  </s-clickable>
+                  <s-link href="/app/details">Mountain View</s-link>
+                </s-stack>
+              </s-table-cell>
+              <s-table-cell>16</s-table-cell>
+              <s-table-cell>Today</s-table-cell>
+              <s-table-cell>
+                <s-badge color="base" tone="success">
+                  Active
+                </s-badge>
+              </s-table-cell>
+            </s-table-row>
+            <s-table-row>
+              <s-table-cell>
+                <s-stack direction="inline" gap="small" alignItems="center">
+                  <s-clickable
+                    href="/app/details"
+                    accessibilityLabel="Ocean Sunset puzzle thumbnail"
+                    border="base"
+                    borderRadius="base"
+                    overflow="hidden"
+                    inlineSize="40px"
+                    blockSize="40px"
+                  >
+                    <s-image
+                      objectFit="cover"
+                      alt="Ocean Sunset puzzle thumbnail"
+                      src="https://picsum.photos/id/12/80/80"
+                    ></s-image>
+                  </s-clickable>
+                  <s-link href="/app/details">Ocean Sunset</s-link>
+                </s-stack>
+              </s-table-cell>
+              <s-table-cell>9</s-table-cell>
+              <s-table-cell>Yesterday</s-table-cell>
+              <s-table-cell>
+                <s-badge color="base" tone="success">
+                  Active
+                </s-badge>
+              </s-table-cell>
+            </s-table-row>
+            <s-table-row>
+              <s-table-cell>
+                <s-stack direction="inline" gap="small" alignItems="center">
+                  <s-clickable
+                    href="/app/details"
+                    accessibilityLabel="Forest Animals puzzle thumbnail"
+                    border="base"
+                    borderRadius="base"
+                    overflow="hidden"
+                    inlineSize="40px"
+                    blockSize="40px"
+                  >
+                    <s-image
+                      objectFit="cover"
+                      alt="Forest Animals puzzle thumbnail"
+                      src="https://picsum.photos/id/324/80/80"
+                    ></s-image>
+                  </s-clickable>
+                  <s-link href="/app/details">Forest Animals</s-link>
+                </s-stack>
+              </s-table-cell>
+              <s-table-cell>25</s-table-cell>
+              <s-table-cell>Last week</s-table-cell>
+              <s-table-cell>
+                <s-badge color="base" tone="neutral">
+                  Draft
+                </s-badge>
+              </s-table-cell>
+            </s-table-row>
+            {/* Add more rows as needed here */}
+            {/* If more than 100 rows are needed, index page tables should use the paginate, hasPreviousPage, hasNextPage, onPreviousPage, and onNextPage attributes to display and handle pagination) */}
+          </s-table-body>
+        </s-table>
+      </s-section>
+    </s-page>
+  );
+}

package/src/surfaces/admin/components/patterns/examples/indexTable.html ADDED Viewed

@@ -0,0 +1,127 @@
+<s-section padding="none" accessibilityLabel="Puzzles table section">
+  <s-table>
+    <s-grid slot="filters" gap="small-200" gridTemplateColumns="1fr auto">
+      <s-text-field
+        icon="search"
+        placeholder="Searching all puzzles"
+      ></s-text-field>
+      <s-button
+        icon="sort"
+        variant="secondary"
+        interestFor="sort-tooltip"
+        commandFor="sort-actions"
+      ></s-button>
+      <s-tooltip id="sort-tooltip">
+        <s-text>Sort</s-text>
+      </s-tooltip>
+      <s-popover id="sort-actions">
+        <s-stack gap="none">
+          <s-box padding="small">
+            <s-choice-list label="Sort by" name="Sort by">
+              <s-choice value="puzzle-name" selected>Puzzle name</s-choice>
+              <s-choice value="pieces">Pieces</s-choice>
+              <s-choice value="created">Created</s-choice>
+              <s-choice value="status">Status</s-choice>
+            </s-choice-list>
+          </s-box>
+          <s-divider></s-divider>
+          <s-box padding="small">
+            <s-choice-list label="Order by" name="Order by">
+              <s-choice value="product-title" selected>A-Z</s-choice>
+              <s-choice value="created">Z-A</s-choice>
+            </s-choice-list>
+          </s-box>
+        </s-stack>
+      </s-popover>
+    </s-grid>
+    <s-table-header-row>
+      <s-table-header listSlot="primary">Puzzle</s-table-header>
+      <s-table-header format="numeric">Pieces</s-table-header>
+      <s-table-header>Created</s-table-header>
+      <s-table-header listSlot="secondary">Status</s-table-header>
+    </s-table-header-row>
+    <s-table-body>
+      <s-table-row clickDelegate="mountain-view-checkbox">
+        <s-table-cell>
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox id="mountain-view-checkbox"></s-checkbox>
+            <s-clickable
+              href=""
+              accessibilityLabel="Mountain View puzzle thumbnail"
+              border="base"
+              borderRadius="base"
+              overflow="hidden"
+              inlineSize="40px"
+              blockSize="40px"
+            >
+              <s-image
+                objectFit="cover"
+                src="https://picsum.photos/id/29/80/80"
+              ></s-image>
+            </s-clickable>
+            <s-link href="">Mountain View</s-link>
+          </s-stack>
+        </s-table-cell>
+        <s-table-cell>16</s-table-cell>
+        <s-table-cell>Today</s-table-cell>
+        <s-table-cell>
+          <s-badge color="base" tone="success">Active</s-badge>
+        </s-table-cell>
+      </s-table-row>
+      <s-table-row clickDelegate="ocean-sunset-checkbox">
+        <s-table-cell>
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox id="ocean-sunset-checkbox"></s-checkbox>
+            <s-clickable
+              href=""
+              accessibilityLabel="Ocean Sunset puzzle thumbnail"
+              border="base"
+              borderRadius="base"
+              overflow="hidden"
+              inlineSize="40px"
+              blockSize="40px"
+            >
+              <s-image
+                objectFit="cover"
+                src="https://picsum.photos/id/12/80/80"
+              ></s-image>
+            </s-clickable>
+            <s-link href="">Ocean Sunset</s-link>
+          </s-stack>
+        </s-table-cell>
+        <s-table-cell>9</s-table-cell>
+        <s-table-cell>Yesterday</s-table-cell>
+        <s-table-cell>
+          <s-badge color="base" tone="success">Active</s-badge>
+        </s-table-cell>
+      </s-table-row>
+      <s-table-row clickDelegate="forest-animals-checkbox">
+        <s-table-cell>
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox id="forest-animals-checkbox"></s-checkbox>
+            <s-clickable
+              href=""
+              accessibilityLabel="Forest Animals puzzle thumbnail"
+              border="base"
+              borderRadius="base"
+              overflow="hidden"
+              inlineSize="40px"
+              blockSize="40px"
+            >
+              <s-image
+                objectFit="cover"
+                src="https://picsum.photos/id/324/80/80"
+              ></s-image>
+            </s-clickable>
+            <s-link href="">Forest Animals</s-link>
+          </s-stack>
+        </s-table-cell>
+        <s-table-cell>25</s-table-cell>
+        <s-table-cell>Last week</s-table-cell>
+        <s-table-cell>
+          <s-badge color="base" tone="neutral">Draft</s-badge>
+        </s-table-cell>
+      </s-table-row>
+    </s-table-body>
+  </s-table>
+</s-section>

package/src/surfaces/admin/components/patterns/examples/interstitialNav.html ADDED Viewed

@@ -0,0 +1,72 @@
+<s-section heading="Preferences">
+  <s-box
+    border="base"
+    borderRadius="base"
+  >
+    <s-clickable
+      padding="small-100"
+      href="#"
+      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-clickable>
+    <s-box paddingInline="small-100">
+      <s-divider></s-divider>
+    </s-box>
+    <s-clickable
+      padding="small-100"
+      href="#"
+      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>
+    <s-clickable
+      padding="small-100"
+      href="#"
+      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-clickable>
+  </s-box>
+</s-section>

package/src/surfaces/admin/components/patterns/examples/mediaCard.html ADDED Viewed

@@ -0,0 +1,23 @@
+<s-box border="base" borderRadius="base" overflow="hidden" maxInlineSize="216px">
+  <s-clickable href="" accessibilityLabel="4-pieces puzzle template">
+    <s-image
+      aspectRatio="1/1"
+      objectFit="cover"
+      alt="Illustration of characters with a 4-piece puzzle"
+      src="https://cdn.shopify.com/static/images/polaris/patterns/4-pieces.png"
+    ></s-image>
+  </s-clickable>
+  <s-divider></s-divider>
+  <s-grid
+    gridTemplateColumns="1fr auto"
+    background="base"
+    padding="small"
+    gap="small"
+    alignItems="center"
+  >
+    <s-heading>4-Pieces</s-heading>
+    <s-button href="" accessibilityLabel="View 4-pieces puzzle template">
+      View
+    </s-button>
+  </s-grid>
+</s-box>

package/src/surfaces/admin/components/patterns/examples/metricsCard.html ADDED Viewed

@@ -0,0 +1,51 @@
+<s-section padding="small">
+    <s-grid
+      gridTemplateColumns="@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr"
+      gap="small"
+    >
+      <s-clickable
+        href=""
+        paddingBlock="small-400"
+        paddingInline="small-100"
+        borderRadius="base"
+      >
+        <s-grid gap="small-300">
+          <s-heading>Total Designs</s-heading>
+          <s-stack direction="inline" gap="small-200">
+            <s-text>156</s-text>
+            <s-badge tone="success" icon="arrow-up"> 12% </s-badge>
+          </s-stack>
+        </s-grid>
+      </s-clickable>
+      <s-divider direction="block"></s-divider>
+      <s-clickable
+        href=""
+        paddingBlock="small-400"
+        paddingInline="small-100"
+        borderRadius="base"
+      >
+        <s-grid gap="small-300">
+          <s-heading>Units Sold</s-heading>
+          <s-stack direction="inline" gap="small-200">
+            <s-text>2,847</s-text>
+            <s-badge tone="warning">0%</s-badge>
+          </s-stack>
+        </s-grid>
+      </s-clickable>
+      <s-divider direction="block"></s-divider>
+      <s-clickable
+        href=""
+        paddingBlock="small-400"
+        paddingInline="small-100"
+        borderRadius="base"
+      >
+        <s-grid gap="small-300">
+          <s-heading>Return Rate</s-heading>
+          <s-stack direction="inline" gap="small-200">
+            <s-text>3.2%</s-text>
+            <s-badge tone="critical" icon="arrow-down"> 0.8% </s-badge>
+          </s-stack>
+        </s-grid>
+      </s-clickable>
+    </s-grid>
+</s-section>