Framer X - Type Stack - Data Example

Data.tsx

import * as React from 'react'
import styled from '@emotion/styled'
import { css } from '@emotion/core'
import { addPropertyControls, ControlType } from 'framer'

type DataTypes = {
	format: 'data40' | 'data30' | 'data20' | 'data10'
}

interface IDataTextProps {
	width?: number | string | any
	height?: number | string | any
	align?: string
	direction?: string
	format?: string
	transform?: string
	text?: string | number | any
}

const sizes = {
	data40: 24,
	data30: 18,
	data20: 14,
	data10: 12
}

const spacing = {
	data40: 32,
	data30: 24,
	data20: 20,
	data10: 16
}

const colorVariants = {
	data40: '#1f2d46',
	data30: '#1f2d46',
	data20: '#1f2d46',
	data10: '#5c697f'
}

const DataStyle = styled.p(
	[],
	({ format, transform, align, direction }: IDataTextProps) =>
		css`
			font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
				sans-serif;
			font-size: ${sizes[format]}px;
			color: ${colorVariants[format]};
			line-height: ${spacing[format]}px;
			text-transform: ${transform || 'none'};
			text-align: ${align};
			direction: ${direction};
			margin: 0;
			font-variant-numeric: tabular-nums;
		`
)

export function Data(props: IDataTextProps) {
	return (
		<>
			<DataStyle format={props.format} {...props}>
				{props.text}
			</DataStyle>
		</>
	)
}

Data.defaultProps = {
	height: 32,
	text: '$90,836',
	format: 'data40',
	align: 'left',
	direction: 'ltr',
	transform: 'none'
}

addPropertyControls(Data, {
	text: {
		type: ControlType.String,
		defaultValue: Data.defaultProps.text,
		title: 'Text'
	},
	format: {
		type: ControlType.Enum,
		title: 'Format',
		options: ['data40', 'data30', 'data20', 'data10'],
		optionTitles: ['Data 40', 'Data 30', 'Data 20', 'Data 10']
	},
	align: {
		type: ControlType.Enum,
		title: 'Align',
		options: ['left', 'center', 'right', 'justify', 'start', 'end'],
		optionTitles: ['Left', 'Center', 'Right', 'Justify', 'Start', 'End']
	},
	direction: {
		type: ControlType.Enum,
		title: 'Direction',
		options: ['ltr', 'rtl'],
		optionTitles: ['Left to Right', 'Right to Left']
	},
	transform: {
		type: ControlType.Enum,
		title: 'Transform',
		options: ['none', 'capitalize', 'uppercase', 'lowercase', 'full-width'],
		optionTitles: ['none', 'capitalize', 'uppercase', 'lowercase', 'full-width']
	}
})