From 1994c98063c27a41797dec01f2ca9fcbe33ceab0 Mon Sep 17 00:00:00 2001
From: Israel Lavi <israel.lavi@intl.att.com>
Date: Mon, 21 May 2018 17:42:00 +0300
Subject: init commit onap ui

Change-Id: I1dace78817dbba752c550c182dfea118b4a38646
Issue-ID: SDC-1350
Signed-off-by: Israel Lavi <il0695@att.com>
---
 stories/react/Typography.stories.js | 62 +++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 stories/react/Typography.stories.js

(limited to 'stories/react/Typography.stories.js')

diff --git a/stories/react/Typography.stories.js b/stories/react/Typography.stories.js
new file mode 100644
index 0000000..f1475c6
--- /dev/null
+++ b/stories/react/Typography.stories.js
@@ -0,0 +1,62 @@
+import React, {Component} from 'react';
+
+const typos = [
+	{className: 'heading-1', size: 28, text: 'Major Section Heading'},
+	{className: 'heading-2', size: 24, text: 'Sub-Section Heading'},
+	{className: 'heading-3', size: 20, text: 'Small Heading'},
+	{className: 'heading-4', size: 16, text: 'Small Heading'},
+	{className: 'heading-4-emphasis', size: 16, text: 'Small Heading'},
+	{className: 'heading-5', size: 14, text: 'Small Heading'},
+	{className: 'body-1', size: 14, text: 'Body (Standard) Text'},
+	{className: 'body-1-italic', size: 14, text: 'Body (Standard) Text'},
+	{className: 'body-2', size: 13, text: 'Text in Tables'},
+	{className: 'body-2-emphasis', size: 13, text: 'Text in Tables'},
+	{className: 'body-3', size: 12, text: 'Input Labels, Table Titles'},
+	{className: 'body-3-emphasis', size: 12, text: 'Even Smaller Text'},
+	{className: 'body-4', size: 10, text: 'Even Much Smaller Text'}
+];
+
+const fontWeights = ['OpenSans Regular 400', 'OpenSans Semibold 600'];
+
+function TextRow({className, size, text}) {
+	return (
+		<div className={`typo-section ${className}`}>
+			<div>{className}</div>
+			<div>{size}px</div>
+			<div className='sample-text'>{text}</div>
+		</div>
+	);
+}
+
+class Typography extends Component {
+
+	render() {
+		return (
+			<div className='typography-screen'>
+				<h1>Typography</h1>
+				<div className='typography-section'>
+					<h3>Font Family</h3>
+					<ul>
+						<li>OpenSans</li>
+						<li style={{'fontFamily': 'Arial'}}>Arial</li>
+						<li style={{'fontFamily':'sans-serif'}}>sans-serif</li>
+					</ul>
+				</div>
+				<div className='typography-section'>
+					<h3>Font Weights</h3>
+					<ul>{fontWeights.map(font => <li key={font} className={font}>{font}</li>)}</ul>
+				</div>
+				<div className='typography-section'>
+					<h3>Font Size</h3>
+					<div className='typo-table'>
+						<TextRow className='SCSS mixin name (@include ....)' size='Size (in Pixels)' text='Sample Text'/>
+						{typos.map(typo => <TextRow key={typo.className} {...typo}/>)}
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+}
+
+export default Typography;
-- 
cgit 1.2.3-korg