From 0ad7444fb1dc2cdb82830df4ef241d75a6bfd82d Mon Sep 17 00:00:00 2001 From: Vijay Aravamudhan Date: Fri, 15 Oct 2021 15:25:41 +0530 Subject: chore: move 'packages/ui' into 'src' (no longer an injected package) (#2077) --- src/components/ui/headline/index.tsx | 70 ++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 src/components/ui/headline/index.tsx (limited to 'src/components/ui/headline') diff --git a/src/components/ui/headline/index.tsx b/src/components/ui/headline/index.tsx new file mode 100644 index 000000000..3a3654f02 --- /dev/null +++ b/src/components/ui/headline/index.tsx @@ -0,0 +1,70 @@ +import classnames from 'classnames'; +import { Component, createElement, ReactNode } from 'react'; +import injectStyle from 'react-jss'; + +import { Theme } from '@meetfranz/theme'; +import { IWithStyle, Omit } from '../typings/generic'; + +interface IProps extends IWithStyle { + level?: number; + className?: string; + children: string | ReactNode; + id?: string; +} + +const styles = (theme: Theme) => ({ + headline: { + fontWeight: 'lighter', + color: theme.colorText, + marginTop: 0, + marginBottom: 10, + textAlign: 'left', + }, + h1: { + fontSize: 30, + marginTop: 0, + }, + h2: { + fontSize: 20, + }, + h3: { + fontSize: 18, + }, + h4: { + fontSize: theme.uiFontSize, + }, +}); + +class HeadlineComponent extends Component { + render() { + const { classes, level, className, children, id } = this.props; + + return createElement( + `h${level}`, + { + id, + className: classnames({ + [classes.headline]: true, + [classes[level ? `h${level}` : 'h1']]: true, + [`${className}`]: className, + }), + 'data-type': 'franz-headline', + }, + children, + ); + } +} + +const Headline = injectStyle(styles)(HeadlineComponent); + +const createH = (level: number) => (props: Omit) => + ( + + {props.children} + + ); + +export const H1 = createH(1); +export const H2 = createH(2); +export const H3 = createH(3); +export const H4 = createH(4); -- cgit v1.2.3-70-g09d2