@shopify/ui-extensions 2022.10.5 → 2023.4.0

package/src/surfaces/checkout/components/Checkbox/Checkbox.ts

@@ -1,6 +1,8 @@
 import {createRemoteComponent} from '@remote-ui/core';
 
-export interface CheckboxProps {
+import {DisclosureActivatorProps} from '../shared';
+
+export interface CheckboxProps extends DisclosureActivatorProps {
   /**
    * A unique identifier for the field. When no `id` is set,
    * a globally unique value will be used instead.
@@ -38,10 +40,8 @@ export interface CheckboxProps {
   error?: string;
 
   /**
-   * A label to use for the field that will be used for buyers using
-   * assistive technologies. When set, any `children` supplied to
-   * this component are hidden from being seen for accessibility purposes
-   * to prevent duplicate content from being read.
+   * A label used for buyers using assistive technologies. When set, any
+   * `children` supplied to this component will not be announced to screen reader users.
    */
   accessibilityLabel?: string;
 

package/src/surfaces/checkout/components/Checkbox/content/guidelines.md

@@ -6,4 +6,4 @@
 
 ## Related components
 
-- [`ChoiceList`](https://github.com/Shopify/checkout-web/tree/master/packages/checkout-ui-extensions/src/components/ChoiceList): Creates a group of related options for customers to choose from. `ChoiceList` can be made up of radio buttons or checkboxes.
+- [`ChoiceList`](https://github.com/Shopify/checkout-web/tree/main/packages/checkout-ui-extensions/src/components/ChoiceList): Creates a group of related options for customers to choose from. `ChoiceList` can be made up of radio buttons or checkboxes.

package/src/surfaces/checkout/components/Checkbox/examples/basic-checkbox.example.ts

@@ -1,6 +1,6 @@
-import {extend, Checkbox} from '@shopify/ui-extensions/checkout';
+import {extension, Checkbox} from '@shopify/ui-extensions/checkout';
 
-extend('Checkout::Dynamic::Render', (root) => {
+extension('Checkout::Dynamic::Render', (root) => {
   const checkbox = root.createComponent(
     Checkbox,
     {id: 'checkbox', name: 'checkbox'},

package/src/surfaces/checkout/components/Choice/Choice.doc.ts

@@ -0,0 +1,57 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Choice',
+  description:
+    'Options inside a `ChoiceList`.\n\nThe wrapping `ChoiceList` component will dictate if the choice renders as radio buttons or checkboxes.',
+  thumbnail: 'choice-thumbnail.png',
+  requires: '',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'ChoiceProps',
+      description: '',
+      type: 'ChoiceProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Forms',
+  defaultExample: {
+    image: 'choice-default.png',
+    codeblock: {
+      title: 'Basic Choice',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/checkout/components/Choice/examples/basic-choice.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-choice.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+  subSections: [
+    {
+      type: 'Generic',
+      anchorLink: 'best-practices',
+      title: 'Best Practices',
+      sectionContent:
+        '- Include a title that either tells customers what to do or explains their available options.\n\n- Label options clearly based on what the option will do.\n\n- Avoid options that contradict each other when you’re allowing for multiple selections.',
+    },
+  ],
+  related: [
+    {
+      name: 'ChoiceList',
+      subtitle: 'Component',
+      url: 'choicelist',
+      type: 'Component',
+    },
+  ],
+};
+
+export default data;

package/src/surfaces/checkout/components/Choice/Choice.ts

@@ -10,10 +10,8 @@ export interface ChoiceProps {
    */
   disabled?: boolean;
   /**
-   * A label to use for the choice that will be used for buyers using
-   * assistive technologies. When set, any `children` supplied to
-   * this component are hidden from being seen for accessibility purposes
-   * to prevent duplicate content from being read.
+   * A label used for buyers using assistive technologies. When set, any
+   * `children` supplied to this component will not be announced to screen reader users.
    */
   accessibilityLabel?: string;
 }

package/src/surfaces/checkout/components/Choice/examples/basic-choice.example.ts

@@ -1,12 +1,12 @@
 import {
-  extend,
+  extension,
   ChoiceList,
   Choice,
   BlockStack,
   InlineStack,
 } from '@shopify/ui-extensions/checkout';
 
-extend('Checkout::Dynamic::Render', (root) => {
+extension('Checkout::Dynamic::Render', (root) => {
   const choiceList = root.createComponent(
     ChoiceList,
     {

package/src/surfaces/checkout/components/ChoiceList/ChoiceList.doc.ts

@@ -0,0 +1,63 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'ChoiceList',
+  description:
+    'Use choice lists to present a list of choices where buyers can make a single selection or multiple selections.',
+  thumbnail: 'choicelist-thumbnail.png',
+  requires: '',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'ChoiceListProps',
+      description: '',
+      type: 'ChoiceListProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Forms',
+  defaultExample: {
+    image: 'choicelist-default.png',
+    codeblock: {
+      title: 'Basic ChoiceList',
+      tabs: [
+        {
+          title: 'JS',
+          code: './examples/basic-choicelist.example.ts',
+          language: 'js',
+        },
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/checkout/components/ChoiceList/examples/basic-choicelist.example.tsx',
+          language: 'tsx',
+        },
+      ],
+    },
+  },
+  subSections: [
+    {
+      type: 'Generic',
+      anchorLink: 'best-practices',
+      title: 'Best Practices',
+      sectionContent:
+        '- Include a title that either tells customers what to do or explains their available options.\n\n- Label options clearly based on what the option will do.\n\n- Avoid options that contradict each other when you’re allowing for multiple selections.',
+    },
+  ],
+  related: [
+    {
+      name: 'Choice',
+      subtitle: 'Component',
+      url: 'choice',
+      type: 'Component',
+    },
+    {
+      name: 'Checkbox',
+      subtitle: 'Component',
+      url: 'checkox',
+      type: 'Component',
+    },
+  ],
+};
+
+export default data;

package/src/surfaces/checkout/components/ChoiceList/content/guidelines.md

@@ -6,5 +6,5 @@
 
 ## Related components
 
-- [`Choice`](https://github.com/Shopify/checkout-web/tree/master/packages/checkout-ui-extensions/src/components/Choice): The options inside the `ChoiceList` component.
-- [`Checkbox`](https://github.com/Shopify/checkout-web/tree/master/packages/checkout-ui-extensions/src/components/Checkbox): Gives customers a single binary option, such as signed up for marketing, or agreeing to terms and conditions.
+- [`Choice`](https://github.com/Shopify/checkout-web/tree/main/packages/checkout-ui-extensions/src/components/Choice): The options inside the `ChoiceList` component.
+- [`Checkbox`](https://github.com/Shopify/checkout-web/tree/main/packages/checkout-ui-extensions/src/components/Checkbox): Gives customers a single binary option, such as signed up for marketing, or agreeing to terms and conditions.

package/src/surfaces/checkout/components/ChoiceList/examples/basic-choicelist.example.ts

@@ -1,12 +1,12 @@
 import {
-  extend,
+  extension,
   ChoiceList,
   Choice,
   BlockStack,
   InlineStack,
 } from '@shopify/ui-extensions/checkout';
 
-extend('Checkout::Dynamic::Render', (root) => {
+extension('Checkout::Dynamic::Render', (root) => {
   const choiceList = root.createComponent(
     ChoiceList,
     {

package/src/surfaces/checkout/components/DateField/DateField.doc.ts

@@ -0,0 +1,49 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'DateField',
+  description: 'Use a date field to get a date input from a customer.',
+  thumbnail: 'datefield-thumbnail.png',
+  requires: '',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'DateFieldProps',
+      description: '',
+      type: 'DateFieldProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Forms',
+  defaultExample: {
+    image: 'datefield-default.png',
+    codeblock: {
+      title: 'Basic DateField',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/checkout/components/DateField/examples/basic-datefield.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-datefield.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+  subSections: [
+    {
+      type: 'Generic',
+      anchorLink: 'best-practices',
+      title: 'Best Practices',
+      sectionContent:
+        '- Use clear and concise labels for the DateField component to help customers understand what information is expected.\n\n**When to use a DateField**\n\n- Use when the dates are memorable to the customer.\n\n- Use when all dates are available to be chosen by the customer.\n\n**When not to use a DateField**\n\n- Don’t use when customers require a visual representation of the dates, rather than manual entry, consider using a DatePicker component instead.\n\n- Don’t use when date availability logic is in place. Customers may find it difficult to determine which dates are available if they’re typing. Use a DatePicker instead.',
+    },
+  ],
+  related: [],
+};
+
+export default data;

package/src/surfaces/checkout/components/DateField/DateField.ts

@@ -0,0 +1,50 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import {DatePickerProps, SelectedDate} from '../DatePicker/DatePicker';
+import {TextFieldProps} from '../TextField/TextField';
+
+export interface DateFieldProps
+  extends Pick<
+      TextFieldProps<string>,
+      | 'label'
+      | 'error'
+      | 'name'
+      | 'id'
+      | 'readonly'
+      | 'onFocus'
+      | 'onInput'
+      | 'onBlur'
+      | 'onChange'
+      | 'value'
+    >,
+    Pick<
+      DatePickerProps<SelectedDate>,
+      'yearMonth' | 'defaultYearMonth' | 'disabled' | 'onYearMonthChange'
+    > {
+  /**
+   * Callback when the field has an invalid date.
+   * This callback will be called, if the date typed is invalid or disabled.
+   *
+   * Dates that don’t exist or have formatting errors are considered invalid. Some examples of invalid dates are:
+   * - 2021-02-31: February doesn’t have 31 days
+   * - 2021-02-00: The day can’t be 00
+   *
+   * Dates and ranges specified in the `disabled` property are considered disabled dates.
+   * If the `disabled` property is `2021-06-14`, and the user types `2021-06-14`,
+   * this callback will be called as this date is disabled.
+   *
+   * Note that this will be called only when the user **finishes editing** the date,
+   * after the `onChange` callback.
+   * The field is **not** validated on every change to the input. Once the buyer has signalled that
+   * they have finished editing the field (typically, by blurring the field), the field gets validated and the callback is run if the value is invalid.
+   */
+  onInvalid?(): void;
+}
+
+/**
+ * The DateField component is used to collect date information from buyers.
+ * It also provides the ability to display a DatePicker UI, which allows users to select dates with ease.
+ */
+export const DateField = createRemoteComponent<'DateField', DateFieldProps>(
+  'DateField',
+);

package/src/surfaces/checkout/components/DateField/examples/basic-datefield.example.ts

@@ -0,0 +1,9 @@
+import {extension, DateField} from '@shopify/ui-extensions/checkout';
+
+extension('Checkout::Dynamic::Render', (root) => {
+  const datefield = root.createComponent(DateField, {
+    label: 'Select a date',
+  });
+
+  root.appendChild(datefield);
+});

package/src/surfaces/checkout/components/DatePicker/DatePicker.doc.ts

@@ -0,0 +1,50 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'DatePicker',
+  description:
+    'The DatePicker component is a calendar picker UI that allows users to select a single date or a date range',
+  thumbnail: 'datepicker-thumbnail.png',
+  requires: '',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'DatePickerProps',
+      description: '',
+      type: 'DatePickerProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Forms',
+  defaultExample: {
+    image: 'datepicker-default.png',
+    codeblock: {
+      title: 'Basic DatePicker',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/checkout/components/DatePicker/examples/basic-datepicker.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-datepicker.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+  subSections: [
+    {
+      type: 'Generic',
+      anchorLink: 'best-practices',
+      title: 'Best Practices',
+      sectionContent:
+        'By adhering to these design guidelines, the DatePicker component can offer a seamless and efficient method for users to select dates, thereby enhancing the overall user experience.\n\n- Default to showing today’s date if available.\n\n- Display the first available date when selecting future dates.\n\n- To minimize errors, the process of selecting a date range may require multiple steps. Therefore, providing a way for users to explicitly confirm their selection is recommended.\n\n**When to use a DatePicker**\n\nThe DatePicker component is well-suited for the following scenarios:\n\n- Specifying shipping or delivery dates\n\n- Scheduling pick-up dates\n\n- Booking dates for service providers\n\n- Selecting event dates for ticket offerings\n\n- Specifying rental dates to determine start and end dates for renting a product\n\n**When not to use a DatePicker component**\n\nA DatePicker component might not be the most appropriate choice in the following situations:\n\n- When the date to be entered is several years in the future or the past.\n\n- When the date is easily memorable and can be quickly typed using the keyboard e.g. Date of birth.',
+    },
+  ],
+  related: [],
+};
+
+export default data;

package/src/surfaces/checkout/components/DatePicker/DatePicker.ts

@@ -0,0 +1,81 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface DateRange {
+  /** First day (inclusive) of the selected range */
+  start?: DateString;
+  /** Last day (inclusive) of the selected range */
+  end?: DateString;
+}
+
+export enum Day {
+  Sunday,
+  Monday,
+  Tuesday,
+  Wednesday,
+  Thursday,
+  Friday,
+  Saturday,
+}
+
+export type DayString = keyof typeof Day;
+
+/* A date string using the simplified ISO 8601 format (`YYYY-MM-DD`) */
+export type DateString = string;
+/** A year/month string using the simplified ISO 8601 format (`YYYY-MM`) */
+type YearMonthString = string;
+export type YearMonth = {year: number; month: number} | YearMonthString;
+
+export type SelectedDate = DateString | DateString[] | DateRange;
+export type DisabledDate = DateString | DateRange | DayString;
+
+export interface DatePickerProps<T extends SelectedDate> {
+  /**
+   * [Controlled](https://reactjs.org/docs/forms.html#controlled-components) year and month to display.
+   * Use in combination with `onYearMonthChange`.
+   * Makes year/month navigation controlled.
+   */
+  yearMonth?: YearMonth;
+  /**
+   * Default [uncontrolled](https://reactjs.org/docs/forms.html#controlled-components) year and month to display.
+   * Ignored when year/month navigation is controlled.
+   */
+  defaultYearMonth?: YearMonth;
+  /**
+   * Disabled dates, days, and/or ranges, or the date picker.
+   * Unbound range disables all dates either from `start` date or to `end` date.
+   * `true` disables the date picker.
+   */
+  disabled?: DisabledDate[] | boolean;
+  /**
+   * Whether the date picker is read-only.
+   */
+  readOnly?: boolean;
+  /**
+   * A date, an array of dates, or a range object with `start` and/or `end` keys indicating the selected dates.
+   * When a range is set, dates between the boundaries will be selected.
+   */
+  selected: T;
+  /**
+   * A callback that is run whenever a date is selected or unselected. This callback
+   * is called with a string, an array of strings or a range object representing the selected dates.
+   * This component is [controlled](https://reactjs.org/docs/forms.html#controlled-components),
+   * so you must store these values in state and reflect it back in the
+   * `selected` props.
+   */
+  onChange?(selected: T): void;
+  /**
+   * A callback that is run whenever the month is changed. This callback
+   * is called with an object indicating the year/month the UI should change to.
+   * When year/month navigation is controlled you must store these values in state and
+   * reflect it back in the `yearMonth` prop.
+   */
+  onYearMonthChange?(yearMonth: {year: number; month: number}): void;
+}
+
+/**
+ * The DatePicker component is a calendar picker UI that allows users to select a single date or a date range.
+ */
+export const DatePicker = createRemoteComponent<
+  'DatePicker',
+  DatePickerProps<SelectedDate>
+>('DatePicker');

package/src/surfaces/checkout/components/DatePicker/examples/basic-datepicker.example.ts

@@ -0,0 +1,9 @@
+import {extension, DatePicker} from '@shopify/ui-extensions/checkout';
+
+extension('Checkout::Dynamic::Render', (root) => {
+  const datepicker = root.createComponent(DatePicker, {
+    selected: '2021-06-01',
+  });
+
+  root.appendChild(datepicker);
+});

package/src/surfaces/checkout/components/Disclosure/Disclosure.doc.ts

@@ -0,0 +1,61 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+import {getExample} from '../../helper.docs';
+
+const disclosureAndAlignment = getExample(
+  'ui-components/disclosure-and-alignment',
+  ['jsx', 'js'],
+);
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Disclosure',
+  description:
+    'Disclosure is an optionally controlled component used to put long sections of information under content blocks that users can expand or collapse by pressing an activator. The activator can be specified as children using an action component (`Button`, `Link` or `Pressable`) or `Checkbox` component. The content blocks can be specified as children inside a structure component (`View`, `InlineLayout`, `BlockStack`, `Grid`, etc.).\n\nThe library takes care of applying the WAI-ARIA Accordion pattern automatically for the activator and the toggled content.',
+  thumbnail: 'disclosure-thumbnail.png',
+  requires: '',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'DisclosureProps',
+      description: '',
+      type: 'DisclosureProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Interactive',
+  defaultExample: {
+    image: 'disclosure-default.png',
+    codeblock: {
+      title: 'Basic Disclosure',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/checkout/components/Disclosure/examples/basic-disclosure.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-disclosure.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+  examples: {
+    description: '',
+    examples: [disclosureAndAlignment],
+  },
+  subSections: [
+    {
+      type: 'Generic',
+      anchorLink: 'best-practices',
+      title: 'Best Practices',
+      sectionContent:
+        '- Disclosures should be initiated by the buyer.\n\n- Use disclosures to hide content until they are relevant to the buyer.\n\n- Avoid hiding critical information that buyers need to complete their checkout.\n\n- Keep content inside disclosures concise.\n\n- Avoid nesting of disclosures.\n\n- Keep the activator and the content it toggles in close proximity to each other.',
+    },
+  ],
+  related: [],
+};
+
+export default data;

package/src/surfaces/checkout/components/Disclosure/Disclosure.ts

@@ -0,0 +1,46 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import {MaybeResponsiveConditionalStyle} from '../../style';
+import type {DisclosureOpen} from '../shared';
+
+export interface DisclosureProps {
+  /**
+   * For uncontrolled disclosure components, the default `open` state on the initial render.
+   *
+   * It's possible to specify a boolean value, a string value, or an array of string values:
+   *
+   * - `true` will expand all content
+   * - `false` will collapse all content
+   * - `string` will expand the content with the matching `id`
+   * - `string[]` will expand the content with the matching `id`s
+   */
+  defaultOpen?: MaybeResponsiveConditionalStyle<DisclosureOpen | undefined>;
+  /**
+   * For controlled disclosure components, the open state. The `open` prop should be used
+   * along with `onToggle` to create a controlled disclosure component.
+   */
+  open?: DisclosureOpen;
+  /**
+   * Callback fired when the open state of the disclosure changes.
+   */
+  onToggle?(open: string[]): void;
+  /**
+   * Set to 'none' to disable the default transition animation.
+   */
+  transition?: 'none';
+}
+
+/**
+ * Disclosure is an optionally controlled component used to put long sections of information
+ * under content blocks that users can expand or collapse by pressing an activator.
+ * The activator can be specified as children using an action component (`Button`, `Link` or `Pressable`)
+ * or `Checkbox` component.
+ * The content blocks can be specified as children inside a structure component (`View`, `InlineLayout`,
+ * `BlockStack`, `Grid`, etc.).
+ *
+ * The library takes care of applying the WAI-ARIA Accordion pattern automatically for the activator
+ * and the toggled content.
+ */
+export const Disclosure = createRemoteComponent<'Disclosure', DisclosureProps>(
+  'Disclosure',
+);

package/src/surfaces/checkout/components/Disclosure/examples/basic-disclosure.example.ts

@@ -0,0 +1,19 @@
+import {
+  extension,
+  Button,
+  View,
+  Disclosure,
+} from '@shopify/ui-extensions/checkout';
+
+extension('Checkout::Dynamic::Render', (root) => {
+  const disclosure = root.createComponent(Disclosure, {}, [
+    root.createComponent(Button, {toggles: 'one'}, 'Toggle'),
+    root.createComponent(
+      View,
+      {border: 'base', padding: 'base', id: 'one'},
+      'Content',
+    ),
+  ]);
+
+  root.appendChild(disclosure);
+});

package/src/surfaces/checkout/components/Divider/Divider.doc.ts

@@ -0,0 +1,41 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Divider',
+  description:
+    'A divider separates content and represents a thematic break between elements.',
+  thumbnail: 'divider-thumbnail.png',
+  requires: '',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'DividerProps',
+      description: '',
+      type: 'DividerProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Structure',
+  defaultExample: {
+    image: 'divider-default.png',
+    codeblock: {
+      title: 'Basic Divider',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/checkout/components/Divider/examples/basic-divider.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-divider.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+  related: [],
+};
+
+export default data;

package/src/surfaces/checkout/components/Divider/Divider.ts

@@ -1,8 +1,8 @@
 import {createRemoteComponent} from '@remote-ui/core';
 
-import type {Size, Alignment, Direction} from '../shared';
+import type {Alignment, Direction, IdProps, Size} from '../shared';
 
-export interface DividerProps {
+export interface DividerProps extends IdProps {
   /**
    * Use to create dividers with varying widths.
    *

package/src/surfaces/checkout/components/Divider/examples/basic-divider.example.ts

@@ -1,6 +1,6 @@
-import {extend, Divider} from '@shopify/ui-extensions/checkout';
+import {extension, Divider} from '@shopify/ui-extensions/checkout';
 
-extend('Checkout::Dynamic::Render', (root) => {
+extension('Checkout::Dynamic::Render', (root) => {
   const divider = root.createComponent(Divider);
 
   root.appendChild(divider);