import * as React from 'react';
import { Text, View } from 'react-native';
import { Stack } from '@fluentui-react-native/stack';
import { globalTokens } from '@fluentui-react-native/theme-tokens';
import { SPACING_TESTPAGE } from '../../../../E2E/src/Spacing/consts';
import { stackStyle } from '../Common/styles';
import { Test } from '../Test';
var BasicUsage = function () {
    function spacingExample(tokenName, spacing) {
        return (React.createElement(View, null,
            React.createElement(Text, null,
                tokenName,
                " (",
                spacing,
                ")"),
            React.createElement(View, { style: { flexDirection: 'row', alignItems: 'baseline' } },
                React.createElement(Text, { style: { padding: spacing, backgroundColor: '#f80' } }, "First"),
                React.createElement(Text, { style: { padding: spacing, backgroundColor: '#0af' } }, "Second"))));
    }
    return (React.createElement(View, null,
        React.createElement(Stack, { style: stackStyle, gap: 5 },
            spacingExample('None', globalTokens.sizeNone),
            spacingExample('size20', globalTokens.size20),
            spacingExample('size40', globalTokens.size40),
            spacingExample('size60', globalTokens.size60),
            spacingExample('size80', globalTokens.size80),
            spacingExample('size100', globalTokens.size100),
            spacingExample('size120', globalTokens.size120),
            spacingExample('size160', globalTokens.size160),
            spacingExample('size200', globalTokens.size200),
            spacingExample('size240', globalTokens.size240),
            spacingExample('size280', globalTokens.size280),
            spacingExample('size320', globalTokens.size320),
            spacingExample('size360', globalTokens.size360),
            spacingExample('size400', globalTokens.size400),
            spacingExample('size480', globalTokens.size480),
            spacingExample('size560', globalTokens.size560),
            spacingExample('size640', globalTokens.size640),
            spacingExample('size720', globalTokens.size720),
            spacingExample('size800', globalTokens.size800),
            spacingExample('size1200', globalTokens.size1200))));
};
export var SpacingTokensTest = function () {
    var status = {
        win32Status: 'Beta',
        uwpStatus: 'Experimental',
        iosStatus: 'Experimental',
        macosStatus: 'Experimental',
        androidStatus: 'Experimental',
    };
    var description = 'This showcases the different spacing tokens available in Fluent UI.';
    var spacingSections = [
        {
            name: 'Basic Usage',
            testID: SPACING_TESTPAGE,
            component: BasicUsage,
        },
    ];
    return React.createElement(Test, { name: "Spacing Tokens Test", description: description, sections: spacingSections, status: status });
};
//# sourceMappingURL=SpacingTest.js.map