Merge pull request #58 from sebgroup/develop

minor bug fixes

.travis.yml

@@ -28,6 +28,7 @@ git:
   depth: 3
 
 after_success:
+- npm run coveralls
 - if [ "$TRAVIS_BRANCH" == "master" ];
   then npm run travis-deploy-once "npm run semantic-release";
   fi

README.md

@@ -3,6 +3,7 @@
 [![Build Status](https://travis-ci.com/sebgroup/react-components.svg?branch=master)](https://travis-ci.com/sebgroup/react-components)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
+[![Coverage Status](https://coveralls.io/repos/github/sebgroup/react-components/badge.svg?branch=master)](https://coveralls.io/github/sebgroup/react-components?branch=master)
 
 This is a set of react components some of which are based on SEB's bootstrap. The plan for this project is to increase and improve components for future usage.
 

develop/components/pages/TextAreaPage.tsx

@@ -24,7 +24,7 @@ const TextAreaPage: React.FunctionComponent = () => {
                         <TextArea
                             name="textArea"
                             label="Textarea label"
-                            placeHolder="Text Area PlaceHolder"
+                            placeholder="Text Area PlaceHolder"
                             value={textBoxValue}
                             cols={30}
                             rows={5}
@@ -36,7 +36,7 @@ const TextAreaPage: React.FunctionComponent = () => {
                     <div className="result">
                         <TextArea
                             name="textInput"
-                            placeHolder="Text Area PlaceHolder"
+                            placeholder="Text Area PlaceHolder"
                             error="error msg will be shown here"
                             cols={30}
                             rows={5}

develop/components/pages/TextLabelPage.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
 import { TextLabel } from "../../../src/TextLabel/TextLabel";
+import { Tooltip } from "../../../src/Tooltip/Tooltip";
+import { TextBox } from "../../../src/TextBox/TextBox";
 const Highlight = (require("react-highlight")).default;
 const docMD: string = require("../../../src/TextLabel/readme.md");
 
@@ -24,6 +26,19 @@ const TextLabelPage: React.FunctionComponent = () => {
                         />
                     </div>
 
+                    <p>An example with passing ReactNode as the value (tooltip):</p>
+                    <div className="result">
+                        <TextLabel
+                            value={
+                                <>
+                                    400,000 kr
+                                    <Tooltip className="ml-1" position="top-right" />
+                                </>
+                            }
+                            label="Current savings"
+                        />
+                    </div>
+
                 </div>
 
             </div>

develop/components/pages/TooltipPage.tsx

@@ -8,8 +8,15 @@ const moneySVG: JSX.Element = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0
 const TooltipPage: React.FunctionComponent = () => {
     let myTooltip: Tooltip;
 
+    function dismissTooltip(e?: React.MouseEvent<HTMLDivElement>): void {
+        const dismissableTooltip: HTMLElement = document.getElementById("dismissable-tooltip");
+        if (event.target !== dismissableTooltip.firstChild) {
+            myTooltip.forceDismiss(e);
+        }
+    }
+
     return (
-        <div className="route-template container" onClick={(e?: React.MouseEvent<HTMLDivElement>) => myTooltip.forceDismiss(e)}>
+        <div className="route-template container" onClick={dismissTooltip}>
             <div className="info-holder">
 
                 <div className="info">
@@ -26,7 +33,6 @@ const TooltipPage: React.FunctionComponent = () => {
                             message="Tooltip message could be long, therefore, controlling the position and width is important"
                             position="right"
                             width={200}
-                            ref={(el: Tooltip) => { myTooltip = el; }}
                         />
                     </div>
 
@@ -37,6 +43,7 @@ const TooltipPage: React.FunctionComponent = () => {
                             position="right"
                             width={200}
                             customSvg={moneySVG}
+                            id="dismissable-tooltip"
                             ref={(el: Tooltip) => { myTooltip = el; }}
                         />
                     </div>

docs/contentindex.json

@@ -90,9 +90,9 @@
 		},
 		{
 			"filename": "readme.md",
-			"filepath": "/../src/DropDown/readme.md",
-			"shortpath": "/../src/DropDown/readme",
-			"longpath": "/../src/DropDown/readme.md",
+			"filepath": "/../src/Dropdown/readme.md",
+			"shortpath": "/../src/Dropdown/readme",
+			"longpath": "/../src/Dropdown/readme.md",
 			"type": "file",
 			"title": "Dropdown",
 			"componentid": "component-dropdown",