# All files / typography examples.data.tsx

100% Statements 8/8
100% Branches 0/0
100% Functions 0/0
100% Lines 8/8

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    1031x
    1x

    1x
    1x

    1x
    1x

    1x

    1x
     import * as React from "react";
    import Typography, {
        TypographyHandledProps,
        TypographyManagedClasses,
        TypographySize,
        TypographyTag,
        TypographyUnhandledProps
    } from "./typography";
    import schema from "./typography.schema.json";
    import Documentation from "./.tmp/documentation";
    import { ComponentFactoryExample } from "@microsoft/fast-development-site-react";

    const testString: string = "Test string";
    const managedClassExamples: any = {
        typography: "typography",
        typography__1: "typography-1",
        typography__2: "typography-2",
        typography__3: "typography-3",
        typography__4: "typography-4",
        typography__5: "typography-5",
        typography__6: "typography-6",
        typography__7: "typography-7",
        typography__8: "typography-8",
        typography__9: "typography-9"
    };

    const examples: ComponentFactoryExample<TypographyHandledProps & TypographyManagedClasses> = {
        name: "Typography",
        component: Typography,
        schema: schema as any,
        documentation: <Documentation />,
        detailData: {
            managedClasses: managedClassExamples,
            tag: TypographyTag.h1,
            size: TypographySize._1,
            children: "Typography"
        },
        data: [
            {
                managedClasses: managedClassExamples,
                tag: TypographyTag.h1,
                size: TypographySize._1,
                children: testString
            },
            {
                managedClasses: managedClassExamples,
                tag: TypographyTag.h2,
                size: TypographySize._2,
                children: testString
            },
            {
                managedClasses: managedClassExamples,
                tag: TypographyTag.h3,
                size: TypographySize._3,
                children: testString
            },
            {
                managedClasses: managedClassExamples,
                tag: TypographyTag.h4,
                size: TypographySize._4,
                children: testString
            },
            {
                managedClasses: managedClassExamples,
                tag: TypographyTag.h5,
                size: TypographySize._5,
                children: testString
            },
            {
                managedClasses: managedClassExamples,
                tag: TypographyTag.h6,
                size: TypographySize._6,
                children: testString
            },
            {
                managedClasses: managedClassExamples,
                tag: TypographyTag.span,
                size: TypographySize._7,
                children: testString
            },
            {
                managedClasses: managedClassExamples,
                tag: TypographyTag.caption,
                size: TypographySize._8,
                children: testString
            },
            {
                managedClasses: managedClassExamples,
                tag: TypographyTag.p,
                size: TypographySize._9,
                children: testString
            },
            {
                managedClasses: managedClassExamples,
                tag: TypographyTag.figcaption,
                size: TypographySize._9,
                children: testString
            }
        ]
    };

    export default examples;