content tabs demo content, selected fix

Author: Andrei Alexandru

views/src/components/ContentTabs.jsx

@@ -28,7 +28,7 @@ export default class ContentTabs extends Component {
         { tabs && tabs.map((tab, idx) => {
           let className = "content-tabs-tab";
           if(this.state.selected == idx) {
-            className+= 'selected';
+            className+= ' selected';
           }
           return (
             <div className={className}  ref={`tab-content-${idx}`} key={`tab-content-${idx}`}>

views/src/screens/Home.jsx

@@ -70,9 +70,18 @@ class Home extends React.Component {
                 <div dataId="tab2">Tab 2</div>
                 <div dataId="tab3">Tab 3</div>
               </ContentTabsHeader>
-              <div>Content of tab 1</div>
-              <div>Content of tab 2</div>
-              <div>Content of tab 3</div>
+                <div>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                  <p> Suspendisse pulvinar vitae sem quis interdum.</p>
+                </div>
+                <div>
+                  <p>Duis a sodales purus. Praesent sed dignissim augue.</p>
+                  <p>Cras sodales, dui ac ornare eleifend, odio nisi iaculis nunc, in congue mi sapien sed metus.</p>
+                </div>
+                <div>
+                  <p>Sare ut placerat urna, sit amet ornare enim.</p>
+                  <p>Proin laoreet consectetur condimentum.</p>
+                </div>
             </ContentTabs>
 
           </TabPanel>

views/src/scss/components/content-tabs.scss

@@ -37,4 +37,8 @@
 
 .content-tabs-tab {
   display: none;
-}
+
+  &.selected {
+    display:inline-block;
+  }
+}