@naarni/design-system
Version:
Naarni React Native Design System for EV Fleet Apps
85 lines (78 loc) • 4.12 kB
JavaScript
import React from 'react';
import { View, ScrollView } from 'react-native';
import { Text } from '../Text/Text';
import { styles } from './styles';
const TypographyExample = ({ label, variant, text }) => (<View style={styles.exampleContainer}>
<Text variant="caption" style={styles.label}>{label}</Text>
<Text variant={variant}>{text}</Text>
</View>);
export const Typography = () => {
return (<ScrollView style={styles.container}>
<View style={styles.section}>
<Text variant="h1" style={styles.sectionTitle}>Typography System</Text>
<TypographyExample label="Heading 1" variant="h1" text="The quick brown fox jumps over the lazy dog"/>
<TypographyExample label="Heading 2" variant="h2" text="The quick brown fox jumps over the lazy dog"/>
<TypographyExample label="Heading 3" variant="h3" text="The quick brown fox jumps over the lazy dog"/>
<TypographyExample label="Heading 4" variant="h4" text="The quick brown fox jumps over the lazy dog"/>
<TypographyExample label="Heading 5" variant="h5" text="The quick brown fox jumps over the lazy dog"/>
<TypographyExample label="Heading 6" variant="h6" text="The quick brown fox jumps over the lazy dog"/>
</View>
<View style={styles.section}>
<Text variant="h2" style={styles.sectionTitle}>Body Text</Text>
<TypographyExample label="Body 1" variant="body1" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."/>
<TypographyExample label="Body 2" variant="body2" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."/>
</View>
<View style={styles.section}>
<Text variant="h2" style={styles.sectionTitle}>Subtitles</Text>
<TypographyExample label="Subtitle 1" variant="subtitle1" text="This is a subtitle with medium weight and wider letter spacing"/>
<TypographyExample label="Subtitle 2" variant="subtitle2" text="This is a smaller subtitle with medium weight and wider letter spacing"/>
</View>
<View style={styles.section}>
<Text variant="h2" style={styles.sectionTitle}>Special Text Styles</Text>
<TypographyExample label="Button Text" variant="button" text="BUTTON TEXT"/>
<TypographyExample label="Caption" variant="caption" text="This is caption text, typically used for small print"/>
<TypographyExample label="Overline" variant="overline" text="OVERLINE TEXT"/>
<TypographyExample label="Code" variant="code" text="const example = 'This is code text';"/>
</View>
<View style={styles.section}>
<Text variant="h2" style={styles.sectionTitle}>Text Colors</Text>
<TypographyExample label="Primary Text" variant="body1" text="This is primary text color"/>
<Text variant="body1" color="#007AFF">
This is primary color text
</Text>
<Text variant="body1" color="#5856D6">
This is secondary color text
</Text>
<Text variant="body1" color="#FF3B30">
This is error color text
</Text>
</View>
<View style={styles.section}>
<Text variant="h2" style={styles.sectionTitle}>Text Alignment</Text>
<Text variant="body1" align="left">
Left aligned text
</Text>
<Text variant="body1" align="center">
Center aligned text
</Text>
<Text variant="body1" align="right">
Right aligned text
</Text>
</View>
<View style={styles.section}>
<Text variant="h2" style={styles.sectionTitle}>Text Weights</Text>
<Text variant="body1" weight="thin">
Thin weight text
</Text>
<Text variant="body1" weight="regular">
Regular weight text
</Text>
<Text variant="body1" weight="medium">
Medium weight text
</Text>
<Text variant="body1" weight="bold">
Bold weight text
</Text>
</View>
</ScrollView>);
};