@shopify/ui-extensions 2024.1.1 → 2024.4.0

package/src/surfaces/admin/components/HeadingGroup/HeadingGroup.doc.ts

@@ -17,12 +17,12 @@ const data: ReferenceEntityTemplateSchema = {
       tabs: [
         {
           title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/HeadingGroup/examples/basic-HeadingGroup.example.tsx',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/HeadingGroup/examples/basic-headinggroup.example.tsx',
           language: 'tsx',
         },
         {
           title: 'JS',
-          code: './examples/basic-HeadingGroup.example.ts',
+          code: './examples/basic-headinggroup.example.ts',
           language: 'js',
         },
       ],

package/src/surfaces/admin/components/Icon/Icon.doc.ts

@@ -29,12 +29,12 @@ const data: ReferenceEntityTemplateSchema = {
       tabs: [
         {
           title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-Icon.example.tsx',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx',
           language: 'tsx',
         },
         {
           title: 'JS',
-          code: './examples/basic-Icon.example.ts',
+          code: './examples/basic-icon.example.ts',
           language: 'js',
         },
       ],

package/src/surfaces/admin/components/Image/Image.doc.ts

@@ -23,12 +23,12 @@ const data: ReferenceEntityTemplateSchema = {
       tabs: [
         {
           title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Image/examples/basic-Image.example.tsx',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Image/examples/basic-image.example.tsx',
           language: 'tsx',
         },
         {
           title: 'JS',
-          code: './examples/basic-Image.example.ts',
+          code: './examples/basic-image.example.ts',
           language: 'js',
         },
       ],

package/src/surfaces/admin/components/MoneyField/MoneyField.doc.ts

@@ -24,12 +24,12 @@ const data: ReferenceEntityTemplateSchema = {
       tabs: [
         {
           title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/MoneyField/examples/basic-MoneyField.example.tsx',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/MoneyField/examples/basic-moneyfield.example.tsx',
           language: 'tsx',
         },
         {
           title: 'JS',
-          code: './examples/basic-MoneyField.example.ts',
+          code: './examples/basic-moneyfield.example.ts',
           language: 'js',
         },
       ],

package/src/surfaces/admin/components/NumberField/NumberField.doc.ts

@@ -24,12 +24,12 @@ const data: ReferenceEntityTemplateSchema = {
       tabs: [
         {
           title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/NumberField/examples/basic-NumberField.example.tsx',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/NumberField/examples/basic-numberfield.example.tsx',
           language: 'tsx',
         },
         {
           title: 'JS',
-          code: './examples/basic-NumberField.example.ts',
+          code: './examples/basic-numberfield.example.ts',
           language: 'js',
         },
       ],

package/src/surfaces/admin/components/Paragraph/Paragraph.doc.ts

@@ -3,7 +3,7 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 const data: ReferenceEntityTemplateSchema = {
   name: 'Paragraph',
   description:
-    'Use this to display a block of text similar to the <p> tag in HTML.',
+    'Use this to display a block of text similar to the `<p>` tag in HTML.',
   requires: '',
   thumbnail: 'paragraph-thumbnail.png',
   isVisualComponent: true,

package/src/surfaces/admin/components/PasswordField/PasswordField.doc.ts

@@ -24,12 +24,12 @@ const data: ReferenceEntityTemplateSchema = {
       tabs: [
         {
           title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/PasswordField/examples/basic-PasswordField.example.tsx',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/PasswordField/examples/basic-passwordfield.example.tsx',
           language: 'tsx',
         },
         {
           title: 'JS',
-          code: './examples/basic-PasswordField.example.ts',
+          code: './examples/basic-passwordfield.example.ts',
           language: 'js',
         },
       ],

package/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.doc.ts

@@ -24,12 +24,12 @@ const data: ReferenceEntityTemplateSchema = {
       tabs: [
         {
           title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-ProgressIndicator.example.tsx',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-progressindicator.example.tsx',
           language: 'tsx',
         },
         {
           title: 'JS',
-          code: './examples/basic-ProgressIndicator.example.ts',
+          code: './examples/basic-progressindicator.example.ts',
           language: 'js',
         },
       ],

package/src/surfaces/admin/components/Section/README.md

@@ -0,0 +1,95 @@
+# Section
+
+`Section` is a structural component that allows thematic grouping of content. Its visual style is contextual and controlled by Shopify, so a `Section` may look different depending on the component it is nested inside.
+
+`Section` also automatically increases the heading level for its content to ensure a semantically correct heading structure in the document. To further increase the heading level inside the `Section`, consider nesting new `Section`s.
+
+## Expected HTML in Web host
+
+Note that the rendered heading level in the examples are assuming that the `Section` is nested within the root of the HTML document. The document itself is a "section", therefore its children `Heading` will be level 1. Sibling `Section`s will start their heading level at 2.
+
+<table>
+<tr>
+<th width="50%">React</th>
+<th width="50%">Expected HTML</th>
+</tr>
+<tr>
+<td valign="top">
+
+```jsx
+<Section heading="Provinces of Canada" />
+```
+
+</td>
+<td valign="top">
+
+```html
+<section>
+  <h2>Provinces of Canada</h2>
+</section>
+```
+
+</td>
+</tr>
+
+<tr>
+<td valign="top">
+
+```jsx
+<Section>
+  <Heading>Provinces of Canada</Heading>
+</Section>
+```
+
+</td>
+<td valign="top">
+
+```html
+<section>
+  <h2>Provinces of Canada</h2>
+</section>
+```
+
+</td>
+</tr>
+
+<tr>
+<td valign="top">
+
+```jsx
+<Section heading="Some provinces of Canada">
+    <Section>
+        <Heading>Quebec</Heading>
+        <Text>Most of its residents are in eastern time.<Text>
+
+        <Heading>Ontario</Heading>
+        <Text>Most of its residents are in eastern time.</Text>
+
+        <Heading>British Columbia</Heading>
+        <Text>Most of its residents are in pacific time.</Text>
+    </Section>
+</Section>
+```
+
+</td>
+<td valign="top">
+
+```html
+<section>
+    <h2>Some provinces of Canada</h2>
+    <section>
+        <h3>Quebec</h3>
+        <span>Most of its residents are in eastern time.<span>
+
+        <h3>Ontario</h3>
+        <span>Most of its residents are in eastern time.</span>
+
+        <h3>British Columbia</h3>
+        <span>Most of its residents are in pacific time.</span>
+    </section>
+</section>
+```
+
+</td>
+</tr>
+</table>

package/src/surfaces/admin/components/Section/Section.doc.ts

@@ -0,0 +1,41 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Section',
+  description:
+    '`Section` is a structural component that allows thematic grouping of content. Its visual style is contextual and controlled by Shopify, so a `Section` may look different depending on the component it is nested inside.\n\n`Section` also automatically increases the heading level for its content to ensure a semantically correct heading structure in the document. To further increase the heading level inside the `Section`, consider nesting new `Section`s.',
+  requires: '',
+  thumbnail: 'section-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'SectionProps',
+      description: '',
+      type: 'SectionProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Structure',
+  defaultExample: {
+    image: 'section-default.png',
+    codeblock: {
+      title: 'Section to an app page',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Section/examples/basic-Section.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-Section.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+  related: [],
+};
+
+export default data;

package/src/surfaces/admin/components/Section/Section.ts

@@ -0,0 +1,35 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface SectionProps {
+  /**
+   * A label used to describe the section that will be announced by assistive technologies.
+   *
+   * When no `heading` property is provided or included as a children of the Section, you **must** provide an
+   * `accessibilityLabel` to describe the Section. This is important as it allows assistive technologies to provide
+   * the right context to users.
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * A title that describes the content of the section.
+   */
+  heading?: string;
+
+  /**
+   * Adjust the padding of all edges.
+   *
+   * `base`: applies padding that is appropriate for the element. Note that it may result in no padding if Shopify
+   * believes this is the right design decision in a particular context.
+   *
+   * `none`: removes all padding from the element. This can be useful when elements inside the Section need to span
+   * to the edge of the Section. For example, a full-width image. In this case, rely on `Box` or any other layout
+   * element to bring back the desired padding for the rest of the content.
+   *
+   * @default: "base"
+   */
+  padding?: 'base' | 'none';
+}
+
+export const Section = createRemoteComponent<'Section', SectionProps>(
+  'Section',
+);

package/src/surfaces/admin/components/Section/examples/basic-Section.example.ts

@@ -0,0 +1,19 @@
+import {
+  extend,
+  Section,
+} from '@shopify/ui-extensions/admin';
+
+export default extend(
+  'Playground',
+  (root) => {
+    const section = root.createComponent(
+      Section,
+      {
+        heading: 'Section heading',
+      },
+      'Section content'
+    );
+
+    root.appendChild(section);
+  },
+);

package/src/surfaces/admin/components/Select/Select.doc.ts

@@ -24,12 +24,12 @@ const data: ReferenceEntityTemplateSchema = {
       tabs: [
         {
           title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Select/examples/basic-Select.example.tsx',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Select/examples/basic-select.example.tsx',
           language: 'tsx',
         },
         {
           title: 'JS',
-          code: './examples/basic-Select.example.ts',
+          code: './examples/basic-select.example.ts',
           language: 'js',
         },
       ],

package/src/surfaces/admin/components/Text/Text.doc.ts

@@ -24,12 +24,12 @@ const data: ReferenceEntityTemplateSchema = {
       tabs: [
         {
           title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-Text.example.tsx',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx',
           language: 'tsx',
         },
         {
           title: 'JS',
-          code: './examples/basic-Text.example.ts',
+          code: './examples/basic-text.example.ts',
           language: 'js',
         },
       ],

package/src/surfaces/admin/components/TextArea/TextArea.doc.ts

@@ -24,12 +24,12 @@ const data: ReferenceEntityTemplateSchema = {
       tabs: [
         {
           title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/TextArea/examples/basic-TextArea.example.tsx',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/TextArea/examples/basic-textarea.example.tsx',
           language: 'tsx',
         },
         {
           title: 'JS',
-          code: './examples/basic-TextArea.example.ts',
+          code: './examples/basic-textarea.example.ts',
           language: 'js',
         },
       ],

package/src/surfaces/admin/components/TextField/TextField.doc.ts

@@ -24,12 +24,12 @@ const data: ReferenceEntityTemplateSchema = {
       tabs: [
         {
           title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/TextField/examples/basic-TextField.example.tsx',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/TextField/examples/basic-textfield.example.tsx',
           language: 'tsx',
         },
         {
           title: 'JS',
-          code: './examples/basic-TextField.example.ts',
+          code: './examples/basic-textfield.example.ts',
           language: 'js',
         },
       ],

package/src/surfaces/admin/components/URLField/URLField.doc.ts

@@ -23,12 +23,12 @@ const data: ReferenceEntityTemplateSchema = {
       tabs: [
         {
           title: 'React',
-          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/URLField/examples/basic-URLField.example.tsx',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/URLField/examples/basic-urlfield.example.tsx',
           language: 'tsx',
         },
         {
           title: 'JS',
-          code: './examples/basic-URLField.example.ts',
+          code: './examples/basic-urlfield.example.ts',
           language: 'js',
         },
       ],

package/src/surfaces/admin/components.ts

@@ -18,9 +18,9 @@ export {Checkbox} from './components/Checkbox/Checkbox';
 export type {CheckboxProps} from './components/Checkbox/Checkbox';
 export {ChoiceList} from './components/ChoiceList/ChoiceList';
 export type {ChoiceListProps} from './components/ChoiceList/ChoiceList';
-export {CustomerSegmentTemplate} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate';
 export {ColorPicker} from './components/ColorPicker/ColorPicker';
 export type {ColorPickerProps} from './components/ColorPicker/ColorPicker';
+export {CustomerSegmentTemplate} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate';
 export type {CustomerSegmentTemplateProps} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate';
 export {DateField} from './components/DateField/DateField';
 export type {DateFieldProps} from './components/DateField/DateField';
@@ -32,6 +32,11 @@ export {EmailField} from './components/EmailField/EmailField';
 export type {EmailFieldProps} from './components/EmailField/EmailField';
 export {Form} from './components/Form/Form';
 export type {FormProps} from './components/Form/Form';
+export {FunctionSettings} from './components/FunctionSettings/FunctionSettings';
+export type {
+  FunctionSettingsProps,
+  FunctionSettingsError,
+} from './components/FunctionSettings/FunctionSettings';
 export {Heading} from './components/Heading/Heading';
 export type {HeadingProps} from './components/Heading/Heading';
 export {HeadingGroup} from './components/HeadingGroup/HeadingGroup';
@@ -66,6 +71,8 @@ export {ResourceItem} from './components/ResourceItem/ResourceItem';
 export type {ResourceItemProps} from './components/ResourceItem/ResourceItem';
 export {ResourceList} from './components/ResourceList/ResourceList';
 export type {ResourceListProps} from './components/ResourceList/ResourceList';
+export {Section} from './components/Section/Section';
+export type {SectionProps} from './components/Section/Section';
 export {Select} from './components/Select/Select';
 export type {
   OptionDescription,