You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.4 KiB
TypeScript
121 lines
3.4 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import styled, { CSSProperties } from 'styled-components';
|
|
|
|
type TextProps = {
|
|
text: string;
|
|
subtle?: boolean;
|
|
maxWidth?: string;
|
|
padding?: string;
|
|
textAlign?: 'center';
|
|
ellipsisOverflow?: boolean;
|
|
};
|
|
|
|
const StyledDefaultText = styled.div<Omit<TextProps, 'text'>>`
|
|
transition: var(--default-duration);
|
|
max-width: ${props => (props.maxWidth ? props.maxWidth : '')};
|
|
padding: ${props => (props.padding ? props.padding : '')};
|
|
text-align: ${props => (props.textAlign ? props.textAlign : '')};
|
|
font-family: var(--font-default);
|
|
color: ${props => (props.subtle ? 'var(--text-secondary-color)' : 'var(--text-primary-color)')};
|
|
white-space: ${props => (props.ellipsisOverflow ? 'nowrap' : null)};
|
|
overflow: ${props => (props.ellipsisOverflow ? 'hidden' : null)};
|
|
text-overflow: ${props => (props.ellipsisOverflow ? 'ellipsis' : null)};
|
|
`;
|
|
|
|
export const Text = (props: TextProps) => {
|
|
return <StyledDefaultText {...props}>{props.text}</StyledDefaultText>;
|
|
};
|
|
|
|
export const TextWithChildren = (props: Omit<TextProps, 'text'> & { children: ReactNode }) => {
|
|
return <StyledDefaultText {...props}>{props.children}</StyledDefaultText>;
|
|
};
|
|
|
|
type SpacerProps = {
|
|
size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
|
|
style?: CSSProperties;
|
|
};
|
|
|
|
const SpacerStyled = styled.div<SpacerProps>`
|
|
height: ${props =>
|
|
props.size === '3xl'
|
|
? 'var(--margins-3xl)'
|
|
: props.size === '2xl'
|
|
? 'var(--margins-2xl)'
|
|
: props.size === 'xl'
|
|
? 'var(--margins-xl)'
|
|
: props.size === 'lg'
|
|
? 'var(--margins-lg)'
|
|
: props.size === 'md'
|
|
? 'var(--margins-md)'
|
|
: props.size === 'sm'
|
|
? 'var(--margins-sm)'
|
|
: 'var(--margins-xs)'};
|
|
|
|
width: ${props =>
|
|
props.size === '3xl'
|
|
? 'var(--margins-3xl)'
|
|
: props.size === '2xl'
|
|
? 'var(--margins-2xl)'
|
|
: props.size === 'xl'
|
|
? 'var(--margins-xl)'
|
|
: props.size === 'lg'
|
|
? 'var(--margins-lg)'
|
|
: props.size === 'md'
|
|
? 'var(--margins-md)'
|
|
: props.size === 'sm'
|
|
? 'var(--margins-sm)'
|
|
: 'var(--margins-xs)'};
|
|
`;
|
|
|
|
const Spacer = (props: SpacerProps) => {
|
|
return <SpacerStyled {...props} />;
|
|
};
|
|
|
|
/** 5px */
|
|
export const SpacerXS = (props: { style?: CSSProperties }) => {
|
|
return <Spacer size="xs" style={props.style} />;
|
|
};
|
|
|
|
/** 10px */
|
|
export const SpacerSM = (props: { style?: CSSProperties }) => {
|
|
return <Spacer size="sm" style={props.style} />;
|
|
};
|
|
|
|
/** 15px */
|
|
export const SpacerMD = (props: { style?: CSSProperties }) => {
|
|
return <Spacer size="md" style={props.style} />;
|
|
};
|
|
|
|
/** 20px */
|
|
export const SpacerLG = (props: { style?: CSSProperties }) => {
|
|
return <Spacer size="lg" style={props.style} />;
|
|
};
|
|
|
|
/** 25px */
|
|
export const SpacerXL = (props: { style?: CSSProperties }) => {
|
|
return <Spacer size="xl" style={props.style} />;
|
|
};
|
|
|
|
/** 30px */
|
|
export const Spacer2XL = (props: { style?: CSSProperties }) => {
|
|
return <Spacer size="2xl" style={props.style} />;
|
|
};
|
|
|
|
/** 35px */
|
|
export const Spacer3XL = (props: { style?: CSSProperties }) => {
|
|
return <Spacer size="3xl" style={props.style} />;
|
|
};
|
|
|
|
type H3Props = {
|
|
text: string;
|
|
};
|
|
|
|
const StyledH3 = styled.div<H3Props>`
|
|
transition: var(--default-duration);
|
|
font-family: var(--font-default);
|
|
font-size: var(--font-size-md);
|
|
font-weight: 700;
|
|
`;
|
|
|
|
export const H3 = (props: H3Props) => <StyledH3 {...props}>{props.text}</StyledH3>;
|