Text

Text

import React from 'react';

import { Screen, reactExtension, Text, ScrollView } from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridModal = () => {
  return (
    <Screen name='text' title='Text'>
      <ScrollView>
        <Text variant="body">body</Text>
        <Text variant="captionMedium">captionMedium</Text>
        <Text variant="captionRegular">captionRegular</Text>
        <Text variant="captionRegularTall">captionRegularTall</Text>
        <Text variant="display">display</Text>
        <Text variant="headingLarge">headingLarge</Text>
        <Text variant="headingSmall">headingSmall</Text>
        <Text variant="sectionHeader">sectionHeader</Text>
        <Text variant="headingSmall" color="TextCritical">
          TextCritical
        </Text>
        <Text variant="headingSmall" color="TextDisabled">
          TextDisabled
        </Text>
        <Text variant="headingSmall" color="TextHighlight">
          TextHighlight
        </Text>
        <Text variant="headingSmall" color="TextInteractive">
          TextInteractive
        </Text>
        <Text variant="headingSmall" color="TextNeutral">
          TextNeutral
        </Text>
        <Text variant="headingSmall" color="TextSubdued">
          TextSubdued
        </Text>
        <Text variant="headingSmall" color="TextSuccess">
          TextSuccess
        </Text>
        <Text variant="headingSmall" color="TextWarning">
          TextWarning
        </Text>
      </ScrollView>
    </Screen>
  );
}

export default reactExtension('pos.home.modal.render', () => {
  return <SmartGridModal />
})

import {
  extension,
  Screen,
  ScrollView,
  Text,
} from '@shopify/ui-extensions/point-of-sale';

export default extension(
  'pos.home.modal.render',
  (root) => {
    const mainScreen = root.createComponent(
      Screen,
      {name: 'text', title: 'Text'},
    );
    const scrollView =
      root.createComponent(ScrollView);

    scrollView.append(
      root.createComponent(
        Text,
        {variant: 'body'},
        'body',
      ),
    );
    scrollView.append(
      root.createComponent(
        Text,
        {variant: 'captionMedium'},
        'captionMedium',
      ),
    );
    scrollView.append(
      root.createComponent(
        Text,
        {variant: 'captionRegular'},
        'captionRegular',
      ),
    );
    scrollView.append(
      root.createComponent(
        Text,
        {variant: 'captionRegularTall'},
        'captionRegularTall',
      ),
    );
    scrollView.append(
      root.createComponent(
        Text,
        {variant: 'display'},
        'display',
      ),
    );
    scrollView.append(
      root.createComponent(
        Text,
        {variant: 'headingLarge'},
        'headingLarge',
      ),
    );
    scrollView.append(
      root.createComponent(
        Text,
        {variant: 'headingSmall'},
        'headingSmall',
      ),
    );
    scrollView.append(
      root.createComponent(
        Text,
        {variant: 'sectionHeader'},
        'sectionHeader',
      ),
    );
    scrollView.append(
      root.createComponent(
        Text,
        {
          variant: 'headingSmall',
          color: 'TextCritical',
        },
        'TextCritical',
      ),
    );
    scrollView.append(
      root.createComponent(
        Text,
        {
          variant: 'headingSmall',
          color: 'TextHighlight',
        },
        'TextHighlight',
      ),
    );
    scrollView.append(
      root.createComponent(
        Text,
        {
          variant: 'headingSmall',
          color: 'TextInteractive',
        },
        'TextInteractive',
      ),
    );
    scrollView.append(
      root.createComponent(
        Text,
        {
          variant: 'headingSmall',
          color: 'TextNeutral',
        },
        'TextNeutral',
      ),
    );
    scrollView.append(
      root.createComponent(
        Text,
        {
          variant: 'headingSmall',
          color: 'TextSubdued',
        },
        'TextSubdued',
      ),
    );
    scrollView.append(
      root.createComponent(
        Text,
        {
          variant: 'headingSmall',
          color: 'TextSuccess',
        },
        'TextSuccess',
      ),
    );
    scrollView.append(
      root.createComponent(
        Text,
        {
          variant: 'headingSmall',
          color: 'TextWarning',
        },
        'TextWarning',
      ),
    );

    mainScreen.append(scrollView);
    root.append(mainScreen);
  },
);