import { Meta, Story, Preview, Source } from '@storybook/addon-docs/blocks';
import { View, Text, theme } from '@tedconf/monterey';
import { select, text } from '@storybook/addon-knobs';
# Text
The `` primitive should be treated as a dumb building block. by default
it renders as a `span`. It should be wrapped with whichever semantic attributes
necessary - they neednt be applied directly to it, but you can use whichever
tag you want via the `as` prop. `` should be your new default wrapping
element for any text content. You should _only ever_ use this component and its
variants to style text.
## Import the Text
## Use the text
Pick the appropriate variant for your situation.
### Default
{
if (typeof v === 'object') {
return Object.entries(v).map(([l, val]) => ({
name: `${k}.${l}`,
value: val,
}));
}
return {
name: k,
value: v,
};
})
.reduce((acc, curr) => {
acc[curr.name] = curr.value;
return acc;
}, {}),
'black',
)}
>
{text('children', 'Hello')}
## Variants
Each text style is defined as a `variant`. you can gain access to them by specifying a `variant` prop on the text component, or from the `textVariants` named export.
Text: -1m.Text: -1r.Text: -1u.Text: 1rserif.Text: 1r.Text: 1b.Text: 2r.Text: 2b.Text: 3r.Text: 3b.Text: 3serif.Text: 4b.Text: 5.Text: 5b.Text: 6.Text: 7.