Checkout: update docs for components.

Author: jffortier

packages/ui-extensions/docs/surfaces/checkout/screenshots/icon-default.png

@@ -2,10 +2,26 @@ import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
 
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Abbreviation',
-  description:
-    'A text that represents an abbreviation or acronym. Abbreviation has an inline layout. Surfaces may apply styling to this component.',
+  description: 'A text that represents an abbreviation or acronym.',
   category: 'Polaris web components',
   subCategory: 'Titles and text',
+  related: [
+    {
+      name: 'Text',
+      url: 'text',
+      type: 'Component',
+    },
+    {
+      name: 'Paragraph',
+      url: 'paragraph',
+      type: 'Component',
+    },
+    {
+      name: 'Time',
+      url: 'time',
+      type: 'Component',
+    },
+  ],
 };
 
 export default data;

packages/ui-extensions/docs/surfaces/checkout/screenshots/icon-thumbnail.png

@@ -6,6 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = {
     'Use `s-banner` to communicate important status updates or indicate that there are important actions that users must take. \n\n You can use banners both as a standalone component on a page or inside of a `s-section`.',
   category: 'Polaris web components',
   subCategory: 'Feedback',
+  related: [],
 };
 
 export default data;

packages/ui-extensions/docs/surfaces/checkout/screenshots/listitem-default.png

@@ -6,6 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = {
     'The `s-box` component is an escape hatch for building custom user interfaces. You should only use `s-box` when you cannot build what you need with the existing components.',
   category: 'Polaris web components',
   subCategory: 'Structure',
+  related: [],
 };
 
 export default data;

packages/ui-extensions/docs/surfaces/checkout/screenshots/listitem-thumbnail.png

@@ -6,6 +6,13 @@ const data: SharedReferenceEntityTemplateSchema = {
     'Use `s-button` when you want to provide users the ability to perform specific actions, submitting forms, or opening dialogs.',
   category: 'Polaris web components',
   subCategory: 'Actions',
+  related: [
+    {
+      name: 'Link',
+      url: 'link',
+      type: 'Component',
+    },
+  ],
 };
 
 export default data;

packages/ui-extensions/src/docs/shared/components/Abbreviation.ts

@@ -11,6 +11,18 @@ const data: SharedReferenceEntityTemplateSchema = {
 `,
   category: 'Polaris web components',
   subCategory: 'utilities',
+  related: [
+    {
+      name: 'Button',
+      url: 'button',
+      type: 'Component',
+    },
+    {
+      name: 'Link',
+      url: 'link',
+      type: 'Component',
+    },
+  ],
 };
 
 export default data;

packages/ui-extensions/src/docs/shared/components/Banner.ts

@@ -2,11 +2,14 @@ import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
 
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'DropZone',
-  description: `DropZone allows file uploads through drag-and-drop functionality into a designated area on a page, or by activating a button. At present, DropZone does not offer image upload preview capabilities. The use of object URLs directly in an image component is not possible due to the extension and host operating on separate domains.
-    \n Any element focused within the Dropzone component, including child elements such as the 'Add file' button, will initiate the file selector when the Enter or Spacebar key is pressed.
+  description: `
+    \`s-drop-zone\` allows file uploads through drag-and-drop functionality into a designated area on a page, or by activating a button. At present, \`s-drop-zone\` does not offer image upload preview capabilities. The use of object URLs directly in an image component is not possible due to the extension and host operating on separate domains.
+
+    Any element focused within the \`s-drop-zone\` component, including child elements such as the 'Add file' button, will initiate the file selector when the Enter or Spacebar key is pressed.
     `,
   category: 'Polaris web components',
   subCategory: 'Forms',
+  related: [],
 };
 
 export default data;