add box component and image sizing

Author: merkoyep

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

@@ -1,6 +1,7 @@
 export {ActionItem} from './components/ActionItem/ActionItem';
 export {Badge} from './components/Badge/Badge';
 export {Banner} from './components/Banner/Banner';
+export {Box} from './components/Box/Box';
 export {Button} from './components/Button/Button';
 export {CameraScanner} from './components/CameraScanner/CameraScanner';
 export {DateField} from './components/DateField/DateField';

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

@@ -0,0 +1,4 @@
+import {Box as BaseBox} from '@shopify/ui-extensions/point-of-sale';
+import {createRemoteReactComponent} from '@remote-ui/react';
+
+export const Box = createRemoteReactComponent(BaseBox);

packages/ui-extensions/CHANGELOG.md

@@ -8,6 +8,8 @@
 
 ### Minor Changes
 
+- [#2524](https://github.com/Shopify/ui-extensions/pull/2524)[`4a76915c79dd0ee0cee20c1e61936fd8bd736015`](https://github.com/Shopify/ui-extensions/pull/2524/commits/4a76915c79dd0ee0cee20c1e61936fd8bd736015) - Add Sizing properties to `Image`, and a `Box` component.
+
 - [#2307](https://github.com/Shopify/ui-extensions/pull/2307) [`21234eea51b50dfc53d3fc4962512728b4a19446`](https://github.com/Shopify/ui-extensions/commit/21234eea51b50dfc53d3fc4962512728b4a19446) Thanks [@oliverigor](https://github.com/oliverigor)! - Add size property to Modal
 
 - [#2371](https://github.com/Shopify/ui-extensions/pull/2371) [`28edde440ceee584c71c5ac983252ca71a7f853a`](https://github.com/Shopify/ui-extensions/commit/28edde440ceee584c71c5ac983252ca71a7f853a) Thanks [@shopify-github-actions-access](https://github.com/apps/shopify-github-actions-access)! - Adds `type` property to `selectedPaymentOption`

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

@@ -0,0 +1,26 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+import {generateCodeBlock} from '../helpers/generateCodeBlock';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Box',
+  description:
+    'The Box component provides styling options for spacing and layout.',
+  isVisualComponent: true,
+  type: 'component',
+  definitions: [
+    {
+      title: 'Box',
+      description: '',
+      type: 'BoxProps',
+    },
+  ],
+  category: 'Components',
+  related: [],
+  defaultExample: {
+    image: 'box-default.png',
+    codeblock: generateCodeBlock('Example box', 'box', 'default.example'),
+  },
+  thumbnail: 'box-thumbnail.png',
+};
+
+export default data;

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

@@ -0,0 +1,26 @@
+import {
+  Box,
+  extension,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension(
+  'pos.purchase.post.block.render',
+  (root, api) => {
+    const posBlock = root.createComponent(
+      Box,
+      {
+        blockSize: 600,
+        inlineSize: 600,
+      }
+    );
+    const image = root.createComponent(Image, {
+      src: 'example.png',
+      size: 'fill',
+      resizeMode: 'contain',
+    });
+
+    posBlock.append(image);
+
+    root.append(posBlock);
+  },
+);

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

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {
+  Box,
+  Image,
+  Navigator,
+  Screen,
+  ScrollView,
+  SectionHeader,
+  reactExtension,
+} from '@shopify/ui-extensions-react/src/surfaces/point-of-sale';
+
+const ImageModal = () => {
+  return (
+    <Navigator>
+      <Screen name="ImageBox" title="ImageBox">
+        <ScrollView>
+          <SectionHeader title="Box-Contain" />
+          <Box blockSize={600} inlineSize={600}>
+            <Image
+              src="example.png"
+              size="fill"
+              resizeMode="contain"
+            />
+          </Box>
+        </ScrollView>
+      </Screen>
+    </Navigator>
+  );
+};
+
+export default reactExtension(
+  'pos.home.modal.render',
+  () => <ImageModal />,
+);

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

@@ -11,6 +11,7 @@ export default extension(
   (root, api) => {
     const image = root.createComponent(Image, {
       src: 'example.png',
+      size: 's',
     });
 
     const scrollView =

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

@@ -13,7 +13,7 @@ const SmartGridModal = () => {
     <Navigator>
       <Screen name="Image" title="Image Example">
         <ScrollView>
-          <Image src="example.png" />
+          <Image src="example.png" size='s'/>
         </ScrollView>
       </Screen>
     </Navigator>