Merge pull request #2716 from Shopify/add-docs-for-the-new-target

add docs for customer-account.footer.render-after target

Author: brianshen1990

packages/ui-extensions/docs/surfaces/customer-account/reference/examples/targets/customer-account.footer.render-after/default.example.ts

@@ -0,0 +1,22 @@
+import {
+  BlockStack,
+  Text,
+  extension,
+} from '@shopify/ui-extensions/customer-account';
+
+export default extension(
+  'customer-account.footer.render-after',
+  (root, {extension}) => {
+    root.appendChild(
+      root.createComponent(
+        BlockStack,
+        undefined,
+        root.createComponent(
+          Text,
+          undefined,
+          `target: ${extension.target}`,
+        ),
+      ),
+    );
+  },
+);

packages/ui-extensions/docs/surfaces/customer-account/reference/examples/targets/customer-account.footer.render-after/default.example.tsx

@@ -0,0 +1,24 @@
+import {
+  BlockStack,
+  reactExtension,
+  Text,
+  useApi,
+} from '@shopify/ui-extensions-react/customer-account';
+
+// 1. Choose an extension target
+export default reactExtension(
+  'customer-account.footer.render-after',
+  () => <Extension />,
+);
+
+function Extension() {
+  // 2. Use the extension API to gather context from extension
+  const {extension} = useApi();
+
+  // 3. Render a UI
+  return (
+    <BlockStack>
+      <Text>target: {extension.target}</Text>
+    </BlockStack>
+  );
+}

packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.footer.render-after.doc.ts

@@ -0,0 +1,40 @@
+import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+import {CUSTOMER_ACCOUNT_STANDARD_API_DEFINITION} from '../helper.docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'customer-account.footer.render-after',
+  description: `A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that is rendered below \
+the footer on all customer account pages (**Order index**, **Order status**, **Profile**, **Settings** and new pages added by [Full-page extensions](/docs/api/customer-account-ui-extensions/extension-targets-overview#full-page-extension-target)).
+  
+> Tip:
+> To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading.
+> See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer).
+`,
+  category: 'Targets',
+  isVisualComponent: false,
+  subCategory: 'Footer',
+  defaultExample: {
+    description: '',
+    codeblock: {
+      title: 'Customer account footer extension example',
+      tabs: [
+        {
+          code: '../examples/targets/customer-account.footer.render-after/default.example.tsx',
+          language: 'jsx',
+          title: 'React',
+        },
+        {
+          code: '../examples/targets/customer-account.footer.render-after/default.example.ts',
+          language: 'js',
+          title: 'Javascript',
+        },
+      ],
+    },
+  },
+  definitions: [CUSTOMER_ACCOUNT_STANDARD_API_DEFINITION],
+  related: [],
+  type: 'Target',
+};
+
+export default data;