feat(lsg): new headline pattern

src/lsg/patterns/headline/demo.tsx

@@ -0,0 +1,14 @@
+import { Headline } from './index';
+import * as React from 'react';
+
+const HeadlineDemo: React.StatelessComponent<void> = (): JSX.Element => (
+	<div>
+		<Headline order={1} tagName="h1">
+			Headline Order 1
+		</Headline>
+		<Headline order={2}>Headline Order 2</Headline>
+		<Headline order={3}>Headline Order 3</Headline>
+	</div>
+);
+
+export default HeadlineDemo;

src/lsg/patterns/headline/index.tsx

@@ -0,0 +1,55 @@
+import { fonts } from '../fonts';
+import * as React from 'react';
+import styled, { css, StyledComponentClass } from 'styled-components';
+
+export interface HeadlineProps {
+	className?: string;
+	order?: 1 | 2 | 3;
+	tagName?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
+}
+
+interface StyledHeadlineProps {
+	className?: string;
+	order?: 1 | 2 | 3;
+}
+
+const StyledHeadline = styled.div`
+	margin-top: 0;
+	font-family: ${fonts().NORMAL_FONT};
+	font-weight: 500;
+
+	${(props: HeadlineProps) => {
+		switch (props.order) {
+			case 3:
+				return css`
+					font-size: 24px;
+					line-height: 30px;
+				`;
+			case 2:
+				return css`
+					font-size: 38px;
+					line-height: 45px;
+				`;
+			case 1:
+			default:
+				return css`
+					font-size: 52px;
+					line-height: 60px;
+				`;
+		}
+	}};
+`;
+
+export const Headline: React.StatelessComponent<HeadlineProps> = props => {
+	const tagName = props.tagName === undefined ? 'div' : props.tagName;
+	const Component: StyledComponentClass<
+		StyledHeadlineProps,
+		HeadlineProps
+	> = StyledHeadline.withComponent(tagName);
+
+	return (
+		<Component className={props.className} order={props.order}>
+			{props.children}
+		</Component>
+	);
+};

src/lsg/patterns/headline/pattern.json

@@ -0,0 +1,38 @@
+{
+	"name": "headline",
+	"displayName": "Headline",
+	"version": "1.0.0",
+	"tags": [
+		"atoms",
+		"headline"
+	],
+	"flag": "alpha",
+	"patterns": {
+		"fonts": "atoms/fonts",
+		"colors": "atoms/colors"
+	},
+	"properties": [
+		{
+			"name": "name",
+			"displayName": "Name",
+			"type": "string",
+			"required": true,
+			"max-length": 200
+		},
+		{
+			"name": "level",
+			"displayName": "Level",
+			"type": "enum",
+			"required": true,
+			"default": "H1",
+			"options": [
+				"H1",
+				"H2",
+				"H3",
+				"H4",
+				"H5",
+				"H6"
+			]
+		}
+	]
+}