Added docs and example for tile

packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/Tile.doc.ts

@@ -1,4 +1,8 @@
 import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+import {generateCodeBlock} from '../helpers/generateCodeBlock';
+
+const generateCodeBlockForTile = (title: string, fileName: string) =>
+  generateCodeBlock(title, 'tile', fileName);
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'Tile',
@@ -15,6 +19,12 @@ const data: ReferenceEntityTemplateSchema = {
   ],
   category: 'Components',
   related: [],
+  defaultExample: {
+    codeblock: generateCodeBlockForTile(
+      'Render a tile on smart grid',
+      'default.example',
+    ),
+  },
 };
 
 export default data;

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/tile/default.example.ts

@@ -0,0 +1,20 @@
+import {
+  Tile,
+  extension,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension(
+  'pos.home.tile.render',
+  (root, api) => {
+    const tile = root.createComponent(Tile, {
+      title: 'My app',
+      subtitle: 'Hello world!',
+      enabled: true,
+      onPress: () => {
+        api.action.presentModal();
+      },
+    });
+
+    root.append(tile);
+  },
+);

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/tile/default.example.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Tile, reactExtension, useApi } from '@shopify/ui-extensions-react/point-of-sale'
+
+const TileComponent = () => {
+  const api = useApi()
+  return (
+    <Tile
+      title="My app"
+      subtitle="Hello world!"
+      onPress={() => {
+        api.action.presentModal()
+      }}
+      enabled
+    />
+  )
+}
+
+export default reactExtension('pos.home.tile.render', () => {
+  return <TileComponent />
+})

packages/ui-extensions/src/surfaces/point-of-sale/components/Tile/Tile.ts

@@ -1,11 +1,37 @@
 import {createRemoteComponent} from '@remote-ui/core';
 
+/**
+ * @property `title` the text set on the main label of the tile.
+ * @property `subtitle` the text set on the secondary label of the tile.
+ * @property `enabled` sets whether or not the tile can be tapped.
+ * @property `destructive` sets whether or not the tile is in a red destructive appearance.
+ * @property `badgeValue` the number value displayed in the top right corner of the tile.
+ * @property `onPress` the callback that is executed when the tile is tapped.
+ */
 export interface TileProps {
+  /**
+   * The text set on the main label of the tile.
+   */
   title: string;
+  /**
+   * The text set on the secondary label of the tile.
+   */
   subtitle?: string;
+  /**
+   * Sets whether or not the tile can be tapped.
+   */
   enabled?: boolean;
+  /**
+   * Sets whether or not the tile is in a red destructive appearance.
+   */
   destructive?: boolean;
+  /**
+   * The number value displayed in the top right corner of the tile.
+   */
   badgeValue?: number;
+  /**
+   * The callback that is executed when the tile is tapped.
+   */
   onPress?: () => void;
 }