npm - @shopify/ui-extensions - Versions diffs - 2025.10.0-rc.5 → 2025.10.0-rc.7 - Mend

@shopify/ui-extensions 2025.10.0-rc.5 → 2025.10.0-rc.7

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 (304) hide show

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

@@ -0,0 +1,587 @@
+<!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/app-bridge-ui-experimental.js"></script>
+    <title>Pattern</title>
+    <script>
+      // Simple global object to store handlers
+      window.puzzleApp = {
+        progress: 0,
+        // Banner handlers
+        dismissBanner: function(bannerElement) {
+          if (bannerElement) {
+            bannerElement.style.display = 'none';
+          }
+        },
+        // Guide handlers
+        dismissGuide: function(guideSection) {
+          if (guideSection) {
+            guideSection.style.display = 'none';
+          }
+        },
+        toggleGuide: function(button, container) {
+          if (button && container) {
+            const isExpanded = container.style.display !== 'none';
+            container.style.display = isExpanded ? 'none' : 'block';
+            button.setAttribute('icon', isExpanded ? 'chevron-down' : 'chevron-up');
+          }
+        },
+        // Step handlers
+        toggleStep: function(button, detailsContainer) {
+          if (button && detailsContainer) {
+            const isExpanded = detailsContainer.style.display !== 'none';
+            detailsContainer.style.display = isExpanded ? 'none' : 'block';
+            button.setAttribute('icon', isExpanded ? 'chevron-down' : 'chevron-up');
+          }
+        },
+        // Checkbox handlers
+        updateProgress: function(checkbox, progressElement) {
+          if (checkbox && progressElement) {
+            this.progress += checkbox.checked ? 1 : -1;
+            progressElement.textContent = `${this.progress} out of 3 steps completed`;
+          }
+        },
+        // Section dismissal handlers
+        dismissSection: function(section) {
+          if (section) {
+            section.style.display = 'none';
+          }
+        }
+      };
+    </script>
+  </head>
+  <body>
+    <!-- === -->
+    <!-- Home page pattern -->
+    <!-- === -->
+    <s-page inlineSize="small">
+      <!-- === -->
+      <!-- Title Bar -->
+      <!-- The ui-title-bar on the homepage should not have a title attribute -->
+      <!-- Note: ui-title-bar requires AppBridge to render correctly -->
+      <!-- === -->
+      <ui-title-bar>
+        <button variant="primary">Create puzzle</button>
+        <section>
+          <button>Browse templates</button>
+          <button>Import image</button>
+        </section>
+      </ui-title-bar>
+      <!-- === -->
+      <!-- Banner -->
+      <!-- Use banners sparingly. Only one banner should be visible at a time. -->
+      <!-- If dismissed, use local storage or a database entry to avoid showing this section again to the same user. -->
+      <!-- === -->
+      <s-banner
+        id="upgrade-banner"
+        dismissible
+        onDismiss="window.puzzleApp.dismissBanner(this)"
+      >
+        3 of 5 puzzles created.
+        <s-link href="#">Upgrade to Puzzlify Pro</s-link> to create unlimited puzzles.
+      </s-banner>
+      <!-- === -->
+      <!-- Setup Guide -->
+      <!-- Keep instructions brief and direct. Only ask merchants for required information. -->
+      <!-- If dismissed, use local storage or a database entry to avoid showing this section again to the same user. -->
+      <!-- === -->
+      <s-section id="setup-guide-section">
+        <s-grid gap="base">
+          <!-- Header -->
+          <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"
+                onClick="window.puzzleApp.dismissGuide(document.getElementById('setup-guide-section'))"
+                variant="tertiary"
+                tone="neutral"
+                icon="x"
+              ></s-button>
+              <s-button
+                id="toggle-guide-button"
+                accessibilityLabel="Toggle setup guide"
+                onClick="window.puzzleApp.toggleGuide(this, document.getElementById('steps-container'))"
+                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-stack direction="inline" gap="small-200" alignItems="center">
+              <s-paragraph id="progress-text" tone="subdued">0 out of 3 steps completed</s-paragraph>
+            </s-stack>
+          </s-grid>
+          <!-- Steps Container -->
+          <s-box id="steps-container" borderRadius="base" border="base" background="base">
+            <!-- Step 1 -->
+            <s-box>
+              <s-box padding="small">
+                <s-grid gridTemplateColumns="1fr auto" gap="base">
+                  <s-checkbox
+                    label="Upload an image for your puzzle"
+                    onInput="window.puzzleApp.updateProgress(this, document.getElementById('progress-text'))"
+                  ></s-checkbox>
+                  <s-button
+                    id="toggle-step1-button"
+                    onClick="window.puzzleApp.toggleStep(this, document.getElementById('step1-details'))"
+                    accessibilityLabel="Toggle step 1 details"
+                    variant="tertiary"
+                    icon="chevron-down"
+                  ></s-button>
+                </s-grid>
+              </s-box>
+              <s-box id="step1-details" padding="small" paddingBlockStart="none" style="display: 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" onClick="console.log('clicked')">
+                          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>
+            <!-- Step 2 -->
+            <s-divider></s-divider>
+            <s-box>
+              <s-box padding="small">
+                <s-grid gridTemplateColumns="1fr auto" gap="base">
+                  <s-checkbox
+                    label="Choose a puzzle template"
+                    onInput="window.puzzleApp.updateProgress(this, document.getElementById('progress-text'))"
+                  ></s-checkbox>
+                  <s-button
+                    id="toggle-step2-button"
+                    onClick="window.puzzleApp.toggleStep(this, document.getElementById('step2-details'))"
+                    accessibilityLabel="Toggle step 2 details"
+                    variant="tertiary"
+                    icon="chevron-down"
+                  ></s-button>
+                </s-grid>
+              </s-box>
+              <s-box id="step2-details" padding="small" paddingBlockStart="none" style="display: 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>
+                        Select a template for your puzzle - choose between 9-piece (beginner),
+                        16-piece (intermediate), or 25-piece (advanced) layouts.
+                      </s-paragraph>
+                      <s-stack direction="inline" gap="small-200">
+                        <s-button variant="primary">Choose template</s-button>
+                        <s-button variant="tertiary" tone="neutral"> See all templates </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>
+            <!-- Step 3 -->
+            <s-divider></s-divider>
+            <s-box>
+              <s-box padding="small">
+                <s-grid gridTemplateColumns="1fr auto" gap="base">
+                  <s-checkbox
+                    label="Customize puzzle piece shapes"
+                    onInput="window.puzzleApp.updateProgress(this, document.getElementById('progress-text'))"
+                  ></s-checkbox>
+                  <s-button
+                    id="toggle-step3-button"
+                    onClick="window.puzzleApp.toggleStep(this, document.getElementById('step3-details'))"
+                    accessibilityLabel="Toggle step 3 details"
+                    variant="tertiary"
+                    icon="chevron-down"
+                  ></s-button>
+                </s-grid>
+              </s-box>
+              <s-box id="step3-details" padding="small" paddingBlockStart="none" style="display: 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>
+                        Make your puzzle unique by customizing the shapes of individual pieces.
+                        Choose from classic, curved, or themed piece styles.
+                      </s-paragraph>
+                      <s-stack direction="inline" gap="small-200">
+                        <s-button variant="primary"> Customize pieces </s-button>
+                        <s-button variant="tertiary" tone="neutral">
+                          Learn about piece styles
+                        </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>
+            <!-- Add additional steps here... -->
+          </s-box>
+        </s-grid>
+      </s-section>
+      <!-- === -->
+      <!-- Metrics cards -->
+      <!-- Your app homepage should provide merchants with quick statistics or status updates that help them understand how the app is performing for them. -->
+      <!-- === -->
+      <s-section padding="none">
+        <s-box 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-box>
+      </s-section>
+      <!-- === -->
+      <!-- Callout Card -->
+      <!-- If dismissed, use local storage or a database entry to avoid showing this section again to the same user. -->
+      <!-- === -->
+      <s-section id="callout-section">
+        <s-grid gridTemplateColumns="1fr auto" gap="small-400" alignItems="start">
+          <s-grid
+            gridTemplateColumns="@container (inline-size <= 480px) 1fr, auto auto"
+            gap="base"
+            alignItems="center"
+          >
+            <s-grid gap="small-200">
+              <s-heading>Ready to create your custom puzzle?</s-heading>
+              <s-paragraph>
+                Start by uploading an image to your gallery or choose from one of our templates.
+              </s-paragraph>
+              <s-stack direction="inline" gap="small-200" wrap="nowrap">
+                <s-button onClick="console.log('clicked')"> Upload image </s-button>
+                <s-button tone="neutral" variant="tertiary"> Browse templates </s-button>
+              </s-stack>
+            </s-grid>
+            <s-stack alignItems="center">
+              <s-box maxInlineSize="200px" borderRadius="base" overflow="hidden">
+                <s-image
+                  src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
+                  alt="Customize checkout illustration"
+                  aspectRatio="1/0.5"
+                ></s-image>
+              </s-box>
+            </s-stack>
+          </s-grid>
+          <s-button
+            onClick="window.puzzleApp.dismissSection(document.getElementById('callout-section'))"
+            icon="x"
+            tone="neutral"
+            variant="tertiary"
+            accessibilityLabel="Dismiss card"
+          ></s-button>
+        </s-grid>
+      </s-section>
+      <!-- === -->
+      <!-- Puzzle templates -->
+      <!-- === -->
+      <s-section>
+        <s-heading>Puzzle Templates</s-heading>
+        <s-grid gridTemplateColumns="repeat(auto-fit, minmax(155px, 1fr))" gap="base">
+          <!-- Featured template 1 -->
+          <s-box border="base" borderRadius="base" overflow="hidden">
+            <s-clickable href="/puzzles/4-piece" 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="/puzzles/4-piece" accessibilityLabel="View 4-pieces puzzle template">
+                View
+              </s-button>
+            </s-grid>
+          </s-box>
+          <!-- Featured template 2 -->
+          <s-box border="base" borderRadius="base" background="transparent" overflow="hidden">
+            <s-clickable href="/puzzles/9-piece" accessibilityLabel="9-pieces puzzle template">
+              <s-image
+                aspectRatio="1/1"
+                objectFit="cover"
+                src="https://cdn.shopify.com/static/images/polaris/patterns/9-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>9-Pieces</s-heading>
+              <s-button href="/puzzles/9-piece" accessibilityLabel="View 9-pieces puzzle template">
+                View
+              </s-button>
+            </s-grid>
+          </s-box>
+          <!-- Featured template 3 -->
+          <s-box border="base" borderRadius="base" background="transparent" overflow="hidden">
+            <s-clickable href="/puzzles/16-piece" accessibilityLabel="16-pieces puzzle template">
+              <s-image
+                aspectRatio="1/1"
+                objectFit="cover"
+                src="https://cdn.shopify.com/static/images/polaris/patterns/16-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>16-Pieces</s-heading>
+              <s-button
+                href="/puzzles/16-piece"
+                accessibilityLabel="View 16-pieces puzzle template"
+              >
+                View
+              </s-button>
+            </s-grid>
+          </s-box>
+        </s-grid>
+        <s-stack
+          direction="inline"
+          alignItems="center"
+          justifyContent="center"
+          paddingBlockStart="base"
+        >
+          <s-link href="/puzzles">See all puzzle templates</s-link>
+        </s-stack>
+      </s-section>
+      <!-- === -->
+      <!-- News -->
+      <!-- === -->
+      <s-section>
+        <s-heading>News</s-heading>
+        <s-grid gridTemplateColumns="repeat(auto-fit, minmax(240px, 1fr))" gap="base">
+          <!-- News item 1 -->
+          <s-grid
+            background="base"
+            border="base"
+            borderRadius="base"
+            padding="base"
+            gap="small-400"
+          >
+            <s-text>Jan 21, 2025</s-text>
+            <s-link href="/news/new-shapes-and-themes">
+              <s-heading>New puzzle shapes and themes added</s-heading>
+            </s-link>
+            <s-paragraph>
+              We've added 5 new puzzle piece shapes and 3 seasonal themes to help you create more
+              engaging and unique puzzles for your customers.
+            </s-paragraph>
+          </s-grid>
+          <!-- News item 2 -->
+          <s-grid
+            background="base"
+            border="base"
+            borderRadius="base"
+            padding="base"
+            gap="small-400"
+          >
+            <s-text>Nov 6, 2024</s-text>
+            <s-link href="/news/puzzle-difficulty-customization">
+              <s-heading>Puzzle difficulty customization features</s-heading>
+            </s-link>
+            <s-paragraph>
+              Now you can fine-tune the difficulty of your puzzles with new rotation controls, edge
+              highlighting options, and piece recognition settings.
+            </s-paragraph>
+          </s-grid>
+        </s-grid>
+        <s-stack
+          direction="inline"
+          alignItems="center"
+          justifyContent="center"
+          paddingBlockStart="base"
+        >
+          <s-link href="/news">See all news items</s-link>
+        </s-stack>
+      </s-section>
+      <!-- === -->
+      <!-- Featured apps -->
+      <!-- If dismissed, use local storage or a database entry to avoid showing this section again to the same user. -->
+      <!-- === -->
+      <s-section id="featured-apps-section">
+        <s-grid gridTemplateColumns="1fr auto" alignItems="center" paddingBlockEnd="small-400">
+          <s-heading>Featured apps</s-heading>
+          <s-button
+            onClick="window.puzzleApp.dismissSection(document.getElementById('featured-apps-section'))"
+            icon="x"
+            tone="neutral"
+            variant="tertiary"
+            accessibilityLabel="Dismiss featured apps section"
+          ></s-button>
+        </s-grid>
+        <s-grid gridTemplateColumns="repeat(auto-fit, minmax(240px, 1fr))" gap="base">
+          <!-- Featured app 1 -->
+          <s-clickable
+            href="https://apps.shopify.com/flow"
+            border="base"
+            borderRadius="base"
+            padding="base"
+            inlineSize="100%"
+            accessibilityLabel="Download Shopify Flow"
+          >
+            <s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">
+              <s-box
+                border="base"
+                borderRadius="base"
+                overflow="hidden"
+                maxInlineSize="40px"
+                maxBlockSize="40px"
+              >
+                <s-image
+                  src="https://cdn.shopify.com/app-store/listing_images/15100ebca4d221b650a7671125cd1444/icon/CO25r7-jh4ADEAE=.png"
+                  alt="Shopify Flow icon"
+                ></s-image>
+              </s-box>
+              <s-box>
+                <s-heading>Shopify Flow</s-heading>
+                <s-paragraph>Free</s-paragraph>
+                <s-paragraph> Automate everything and get back to business. </s-paragraph>
+              </s-box>
+              <s-stack justifyContent="start">
+                <s-button
+                  href="https://apps.shopify.com/flow"
+                  icon="download"
+                  accessibilityLabel="Download Shopify Flow"
+                ></s-button>
+              </s-stack>
+            </s-grid>
+          </s-clickable>
+          <!-- Featured app 2 -->
+          <s-clickable
+            href="https://apps.shopify.com/planet"
+            border="base"
+            borderRadius="base"
+            padding="base"
+            inlineSize="100%"
+            accessibilityLabel="Download Shopify Planet"
+          >
+            <s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">
+              <s-box
+                border="base"
+                borderRadius="base"
+                overflow="hidden"
+                maxInlineSize="40px"
+                maxBlockSize="40px"
+              >
+                <s-image
+                  src="https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png"
+                  alt="Shopify Planet icon"
+                ></s-image>
+              </s-box>
+              <s-box>
+                <s-heading>Shopify Planet</s-heading>
+                <s-paragraph>Free</s-paragraph>
+                <s-paragraph>
+                  Offer carbon-neutral shipping and showcase your commitment.
+                </s-paragraph>
+              </s-box>
+              <s-stack justifyContent="start">
+                <s-button
+                  href="https://apps.shopify.com/planet"
+                  icon="download"
+                  accessibilityLabel="Download Shopify Planet"
+                ></s-button>
+              </s-stack>
+            </s-grid>
+          </s-clickable>
+        </s-grid>
+      </s-section>
+    </s-page>
+  </body>
+</html>