From 8e9c0653dd6c6862123c9609ae34e1206d86456e Mon Sep 17 00:00:00 2001
From: talig <talig@amdocs.com>
Date: Wed, 20 Dec 2017 14:30:43 +0200
Subject: Add collaboration feature

Issue-ID: SDC-767
Change-Id: I14fb4c1f54086ed03a56a7ff7fab9ecd40381795
Signed-off-by: talig <talig@amdocs.com>
---
 .../src/sdc-app/onboarding/GridStyling.stories.js  | 221 +++++++++++++++++++++
 1 file changed, 221 insertions(+)
 create mode 100644 openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js

(limited to 'openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js')

diff --git a/openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js b/openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js
new file mode 100644
index 0000000000..81a29cf046
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js
@@ -0,0 +1,221 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import {withKnobs} from '@kadira/storybook-addon-knobs';
+
+import GridSection from 'nfvo-components/grid/GridSection.jsx';
+import GridItem from 'nfvo-components/grid/GridItem.jsx';
+
+
+const stories = storiesOf('GridColumns', module);
+stories.addDecorator(withKnobs);
+
+var divStyle = {
+	'border-style': 'solid',
+	'border-size': 1
+};
+
+const myDiv =  (<div style={divStyle}>Text Text Text</div>);
+
+stories
+	.add('Grid Options', () => (
+		<div>
+			<GridSection title='No last column set on item'>
+				<GridItem colSpan={2}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={2}>
+					{myDiv}
+				</GridItem>
+			</GridSection>
+
+			<GridSection hasLastColSet={true} title='With last column set on item and gridsection'>
+				<GridItem colSpan={2}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={2} lastColInRow={true}>
+					{myDiv}
+				</GridItem>
+			</GridSection>
+
+			<GridSection title='With last column set on item and NOT on gridsection'>
+				<GridItem colSpan={2}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={2} lastColInRow={true}>
+					{myDiv}
+				</GridItem>
+			</GridSection>
+
+		</div>
+	))
+	.add('Last Column', () => (
+
+		<div>
+			<GridSection hasLastColSet={true} title='Testing different configurations with all settings'>
+				<GridItem colSpan={2}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={2} lastColInRow={true}>
+					{myDiv}
+				</GridItem>
+			</GridSection>
+			<GridSection hasLastColSet={true}>
+				<GridItem colSpan={1}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={1}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={1}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={1} lastColInRow={true}>
+					{myDiv}
+				</GridItem>
+			</GridSection>
+			<GridSection hasLastColSet={true}>
+				<GridItem colSpan={1}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={1}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={2} lastColInRow={true}>
+					{myDiv}
+				</GridItem>
+			</GridSection>
+			<GridSection hasLastColSet={true}>
+				<GridItem colSpan={2}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={1}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={1} lastColInRow={true}>
+					{myDiv}
+				</GridItem>
+			</GridSection>
+			<GridSection hasLastColSet={true}>
+				<GridItem colSpan={4} lastColInRow={true}>
+					{myDiv}
+				</GridItem>
+			</GridSection>
+			<GridSection hasLastColSet={true}>
+				<GridItem colSpan={3}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={1} lastColInRow={true}>
+					{myDiv}
+				</GridItem>
+			</GridSection>
+			<GridSection hasLastColSet={true}>
+				<GridItem colSpan={1}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={3} lastColInRow={true}>
+					{myDiv}
+				</GridItem>
+			</GridSection>
+		</div>
+	))
+	.add('No Last Column', () => (
+		<div>
+			<GridSection title='Testing different configurations'>
+				<GridItem colSpan={2}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={2}>
+					{myDiv}
+				</GridItem>
+			</GridSection>
+			<GridSection>
+				<GridItem colSpan={1}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={1}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={1}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={1}>
+					{myDiv}
+				</GridItem>
+			</GridSection>
+			<GridSection>
+				<GridItem colSpan={1}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={1}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={2}>
+					{myDiv}
+				</GridItem>
+			</GridSection>
+			<GridSection>
+				<GridItem colSpan={2}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={1}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={1}>
+					{myDiv}
+				</GridItem>
+			</GridSection>
+			<GridSection>
+				<GridItem colSpan={4}>
+					{myDiv}
+				</GridItem>
+			</GridSection>
+			<GridSection>
+				<GridItem colSpan={3}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={1}>
+					{myDiv}
+				</GridItem>
+			</GridSection>
+			<GridSection>
+				<GridItem colSpan={1}>
+					{myDiv}
+				</GridItem>
+				<GridItem colSpan={3}>
+					{myDiv}
+				</GridItem>
+			</GridSection>
+		</div>
+	))	.add('Test LKG form', () => (
+	<div>
+		<GridSection title='Testing VLM LKG configurations'>
+			<GridItem colSpan={2}>
+				{myDiv}
+			</GridItem>
+			<GridItem colSpan={2} lastColInRow={true}>
+				{myDiv}
+			</GridItem>
+			<GridItem colSpan={2}>
+				{myDiv}
+			</GridItem>
+			<GridItem colSpan={2} lastColInRow={true}>
+				{myDiv}
+			</GridItem>
+			<GridItem colSpan={1}>
+				{myDiv}
+			</GridItem>
+			<GridItem colSpan={1}>
+				{myDiv}
+			</GridItem>
+			<GridItem colSpan={1}>
+				{myDiv}
+			</GridItem>
+			<GridItem colSpan={1} lastColInRow={true}>
+				{myDiv}
+			</GridItem>
+			<GridItem colSpan={2}>
+				<div style={divStyle}>1</div>
+			</GridItem>
+		</GridSection>
+	</div>
+));
\ No newline at end of file
-- 
cgit 1.2.3-korg