feat: create Card component

packages/ui-extensions-react/src/surfaces/admin/components/Card/Card.ts

@@ -0,0 +1,6 @@
+import {Card as BaseCard} from '@shopify/ui-extensions/admin';
+import type {CardProps} from '@shopify/ui-extensions/admin';
+import {createRemoteReactComponent} from '@remote-ui/react';
+
+export const Card = createRemoteReactComponent<'Card', CardProps>(BaseCard);
+export type {CardProps} from '@shopify/ui-extensions/admin';

packages/ui-extensions-react/src/surfaces/admin/components/Card/examples/basic-card.example.tsx

@@ -0,0 +1,11 @@
+import {render, Card} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Card padding={true}>
+      Card
+    </Card>
+  );
+}

packages/ui-extensions/src/surfaces/admin/components.ts

@@ -8,6 +8,8 @@ export {Box} from './components/Box/Box';
 export type {BoxProps} from './components/Box/Box';
 export {Button} from './components/Button/Button';
 export type {ButtonProps} from './components/Button/Button';
+export {Card} from './components/Card/Card';
+export type {CardProps} from './components/Card/Card';
 export {Checkbox} from './components/Checkbox/Checkbox';
 export type {CheckboxProps} from './components/Checkbox/Checkbox';
 export {CustomerSegmentTemplate} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate';

packages/ui-extensions/src/surfaces/admin/components/Card/Card.doc-skip.ts

@@ -0,0 +1,42 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Card',
+  description:
+    'Cards are used to group similar concepts and tasks together for users to scan, read, and get things done. It displays content in a familiar and recognizable style.',
+  requires: '',
+  thumbnail: 'card-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'CardProps',
+      description: '',
+      type: 'CardProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Structure',
+  defaultExample: {
+    image: 'card-default.png',
+    codeblock: {
+      title: 'Use Card to build your layout',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Card/examples/basic-Card.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-Card.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+
+  related: [],
+};
+
+export default data;

packages/ui-extensions/src/surfaces/admin/components/Card/Card.ts

@@ -0,0 +1,13 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import {BackgroundProps} from '../shared';
+
+export interface CardProps extends BackgroundProps {
+  /**
+   * Adjust the padding of all edges.
+   *
+   * `true` applies a default padding that is appropriate for the component.
+   */
+  padding?: boolean;
+}
+
+export const Card = createRemoteComponent<'Card', CardProps>('Card');

packages/ui-extensions/src/surfaces/admin/components/Card/examples/basic-card.example.ts

@@ -0,0 +1,11 @@
+import {extend, Card} from '@shopify/ui-extensions/admin';
+
+extend('Playground', (root) => {
+  const card = root.createComponent(
+    Card,
+    {padding: true},
+    'Card',
+  );
+
+  root.appendChild(card);
+});

packages/ui-extensions/src/surfaces/admin/components/shared/index.ts

@@ -662,3 +662,14 @@ export interface AnchorProps {
    */
   onPress?(): void;
 }
+
+export type BackgroundColorKeyword = 'transparent' | 'base' | 'subdued';
+
+export interface BackgroundProps {
+  /**
+   * Adjust the background of the element.
+   *
+   * @default: 'transparent'
+   */
+  background?: BackgroundColorKeyword;
+}