fix: merge develop into master

.travis.yml

@@ -7,8 +7,10 @@ git:
 branches:
   only:
   - develop
-  - "/^feature\\/.*$/"
-  - "/^fix\\/.*$/"
+  - master
+  - "/^feature\/.*$/"
+  - "/^feat\/.*$/"
+  - "/^fix\/.*$/"
 jobs:
   include:
     - stage: "Fundamental-react: Lint"
@@ -20,3 +22,11 @@ notifications:
   email:
     on_failure: always
     on_success: change
+before_deploy:
+- bash ./ci-scripts/setup_npm.sh
+deploy:
+  - provider: script
+    script: bash ./ci-scripts/publish.sh $TRAVIS_BRANCH $TRAVIS_BUILD_NUMBER
+    on:
+      branch: master
+    skip_cleanup: true

README.md

@@ -1,22 +1,21 @@
-
 Fundamental-react is a set of [React.JS](https://reactjs.org/) components implementation of [SAP Fiori Fundamentals library](https://sap.github.io/fundamental/).
 
 **[Component Documentation](https://sap.github.io/fundamental-react/)**
 
 ## Current Version
 
 ```
-0.0.8-beta
+0.0.12-beta
 ```
 
 ## Build Status
+
 [![Build Status](https://travis-ci.org/SAP/fundamental-react.svg?branch=develop)](https://travis-ci.org/SAP/fundamental-react)
 
 ## Description
 
 Fundamental-react is a set of [React.JS](https://reactjs.org/) components implementation of [SAP Fiori Fundamentals library](https://sap.github.io/fundamental/). SAP Fiori Fundamentals library is a Design System and HTML/CSS Component Library used to build modern Product User Experiences with the SAP look and feel. This will allow you to stay/use React for your application and get SAP look and feel.
 
-
 ## Requirements
 
 To download and use Fundamental-react library, you first need to install the node package manager.
@@ -47,18 +46,16 @@ $fd-icons-path: "~fiori-fundamentals/scss/icons/";
 $fd-fonts-path: "~fiori-fundamentals/scss/fonts/";
 @import '../node_modules/fiori-fundamentals/scss/all.scss';
 ```
-
-You can now use the [Component Documentation](https://sap.github.io/fundamental-react/) to browse the components currently available with Fundamental Vue.  To use a Fundamental-react component, paste the desired code snippet from the Component Documentation and configure it as necessarry:
 
-
+You can now use the [Component Documentation](https://sap.github.io/fundamental-react/) to browse the components currently available with Fundamental Vue. To use a Fundamental-react component, paste the desired code snippet from the Component Documentation and configure it as necessarry:
+
     ...
     <Button compact>Compact</Button>
-    
+
     <Icon glyph="cart" size="l" />
     ...
-
-
-## Available Scripts 
+
+## Available Scripts
 
 `npm start`
 
@@ -102,6 +99,6 @@ Copyright (c) 2018 SAP SE or an SAP affiliate company. All rights reserved.
 This file is licensed under the Apache Software License, v. 2 except as noted otherwise in the [LICENSE file](https://github.com/SAP/fundamental-react/blob/master/LICENSE.txt)
 
 ## Similar Projects
-- [GitHub repo of Angular implementation of SAP Fiori Fundamentals](https://github.com/SAP/fundamental-ngx)
-- [GitHub repo of Vue implementation of SAP Fiori Fundamentals](https://github.com/SAP/fundamental-vue)
 
+-   [GitHub repo of Angular implementation of SAP Fiori Fundamentals](https://github.com/SAP/fundamental-ngx)
+-   [GitHub repo of Vue implementation of SAP Fiori Fundamentals](https://github.com/SAP/fundamental-vue)

ci-scripts/publish.sh

@@ -0,0 +1,23 @@
+#! /bin/bash
+git config --global user.email "travis@travisci.org"
+git config --global user.name "travis"
+
+git checkout master
+npm install
+npm run build
+
+# update the package verion and commit to the git repository
+npm run std-version
+
+# pushes changes to master
+git push --quiet --follow-tags "https://$GH_TOKEN@github.com/$TRAVIS_REPO_SLUG" "$TRAVIS_BRANCH" > /dev/null 2>&1;
+
+# commit changes made by standard-version to develop branch
+git checkout develop
+git merge master
+git commit -a -m "chore: merge master into develop [ci skip]"
+git push --quiet --follow-tags "https://$GH_TOKEN@github.com/$TRAVIS_REPO_SLUG" develop > /dev/null 2>&1;
+
+# publish master to npm
+git checkout master
+npm publish

ci-scripts/setup_npm.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+set -o nounset
+set -o errexit
+
+echo "//registry.npmjs.org/:username=${NPM_USERNAME}" >> ~/.npmrc
+echo "//registry.npmjs.org/:email=${NPM_EMAIL}" >> ~/.npmrc
+echo "//registry.npmjs.org/:_password=${NPM_PASSWORD}" > ~/.npmrc
+echo "//registry.npmjs.org/:_authToken=${AUTH_TOKEN}" >> ~/.npmrc

package.json

@@ -1,6 +1,6 @@
 {
     "name": "fundamental-react",
-    "version": "0.0.11-beta",
+    "version": "0.0.12-beta",
     "private": false,
     "license": "Apache-2.0",
     "homepage": "http://sap.github.io/fundamental-react",
@@ -22,6 +22,7 @@
         "predeploy": "npm run build",
         "start-js": "node scripts/start.js",
         "start": "node scripts/start.js",
+        "std-version": "standard-version -m \"chore(release): version %s build ${TRAVIS_BUILD_NUMBER} [ci skip]\"",
         "test:coverage": "jest --coverage",
         "test:dev": "jest",
         "test": "node scripts/test.js",
@@ -75,7 +76,7 @@
         "terser-webpack-plugin": "1.1.0",
         "url-loader": "1.1.1",
         "webpack": "4.19.1",
-        "webpack-dev-server": "3.1.14",
+        "webpack-dev-server": "3.1.9",
         "webpack-manifest-plugin": "2.0.4",
         "workbox-webpack-plugin": "3.6.3"
     },

src/SearchInput/SearchInput.Component.js

@@ -35,11 +35,28 @@ export class SearchInputComponent extends Component {
         );
     }
 
+    onChangeCallback() {
+        alert('Your custom onChange function is fired!');
+    }
+
     searchInputCode = `<SearchInput
     placeholder='Enter a fruit'
     searchList={this.searchData}
-    onEnter={term => this.getInputValue(term)}
-/>
+    onEnter={term => this.getInputValue(term)} />
+
+
+<SearchInput
+    placeholder='Enter a fruit'
+    noSearchBtn
+    onChange={this.onChangeCallback} />
+
+
+<SearchInput
+    compact
+    placeholder='Enter a fruit'
+    searchList={this.searchData}
+    onEnter={term => this.getInputValue(term)} />
+
 
 ************************************ Data ************************************
 
@@ -91,6 +108,19 @@ searchData = [
                         {
                             name: 'onEnter',
                             description: 'func - Method to execute by pressing the Enter key.'
+                        },
+                        {
+                            name: 'noSearhBtn',
+                            description: 'bool - set to true to hide the Search button.'
+                        },
+                        {
+                            name: 'onChange',
+                            description:
+                                'func - a custom implementation of onChange. If not specified, the default behavior will be applied.'
+                        },
+                        {
+                            name: 'compact',
+                            description: 'bool - Set to true to enable compact mode.'
                         }
                     ]} />
 
@@ -102,6 +132,17 @@ searchData = [
                             placeholder='Enter a fruit'
                             searchList={this.searchData}
                             onEnter={term => this.getInputValue(term)} />
+                        <br />
+                        <SearchInput
+                            placeholder='Enter a fruit'
+                            noSearchBtn
+                            onChange={this.onChangeCallback} />
+                        <br />
+                        <SearchInput
+                            placeholder='Enter a fruit'
+                            searchList={this.searchData}
+                            compact
+                            onEnter={term => this.getInputValue(term)} />
                     </div>
                 </DocsTile>
                 <DocsText>{this.searchInputCode}</DocsText>

src/SearchInput/SearchInput.js

@@ -21,6 +21,11 @@ export class SearchInput extends Component {
         this.onSearchBtnHandler = this.onSearchBtnHandler.bind(this);
     }
 
+    style = {
+        borderTopRightRadius: '4px',
+        borderBottomRightRadius: '4px'
+    };
+
     onKeyPressHandler(event) {
         if (event.key === 'Enter') {
             this.props.onEnter(this.state.value);
@@ -32,25 +37,26 @@ export class SearchInput extends Component {
     }
 
     onChangeHandler(event) {
-        if (this.state.searchList) {
-            let filteredResult = this.state.searchList.filter(item =>
-                item.text.toLowerCase().startsWith(event.target.value.toLowerCase())
-            );
-
-            this.setState({
-                filteredResult: filteredResult
-            });
-        }
-
-        if (!this.state.isExpanded) {
-            this.setState({
-                isExpanded: true
-            });
-        }
-
         this.setState({
             value: event.target.value
         });
+        if (this.props.onChange) {
+            this.props.onChange();
+        } else {
+            if (this.state.searchList) {
+                let filteredResult = this.state.searchList.filter(item =>
+                    item.text.toLowerCase().startsWith(event.target.value.toLowerCase())
+                );
+                this.setState({
+                    filteredResult: filteredResult
+                });
+            }
+            if (!this.state.isExpanded) {
+                this.setState({
+                    isExpanded: true
+                });
+            }
+        }
     }
 
     onClickHandler() {
@@ -59,7 +65,6 @@ export class SearchInput extends Component {
         } else {
             document.removeEventListener('click', this.onOutsideClickHandler, false);
         }
-
         this.setState(prevState => ({
             isExpanded: !prevState.isExpanded
         }));
@@ -78,7 +83,10 @@ export class SearchInput extends Component {
     }
 
     onEscHandler(event) {
-        if ((event.keyCode === 27 && this.state.isExpanded === true) || (event.keyCode === 27 && this.state.searchExpanded === true)) {
+        if (
+            (event.keyCode === 27 && this.state.isExpanded === true) ||
+            (event.keyCode === 27 && this.state.searchExpanded === true)
+        ) {
             this.setState({
                 isExpanded: false,
                 searchExpanded: false,
@@ -107,7 +115,6 @@ export class SearchInput extends Component {
             }
         }
     }
-
     componentDidMount() {
         document.addEventListener('keydown', this.onEscHandler, false);
         document.addEventListener('click', this.onOutsideClickHandler, false);
@@ -118,10 +125,25 @@ export class SearchInput extends Component {
     }
 
     render() {
-        const { placeholder, inShellbar, onSearch, onEnter, searchList, className, ...rest } = this.props;
+        const {
+            placeholder,
+            inShellbar,
+            onSearch,
+            onEnter,
+            searchList,
+            onChange,
+            noSearchBtn,
+            compact,
+            className,
+            ...rest
+        } = this.props;
 
         return (
-            <div className={`fd-search-input${inShellbar ? ' fd-search-input--closed' : ''}${className ? ' ' + className : ''}`} {...rest}>
+            <div
+                className={`fd-search-input${inShellbar ? ' fd-search-input--closed' : ''}${
+                    className ? ' ' + className : ''
+                }`}
+                {...rest}>
                 <div className='fd-popover'>
                     {inShellbar ? (
                         <div className='fd-popover__control fd-search-input__control'>
@@ -134,7 +156,7 @@ export class SearchInput extends Component {
                                 <div
                                     className='fd-search-input__controlinput'
                                     aria-expanded={this.state.searchExpanded}
-                                    aria-haspopup='true' >
+                                    aria-haspopup='true'>
                                     <input
                                         type='text'
                                         className='fd-input'
@@ -152,29 +174,37 @@ export class SearchInput extends Component {
                             <div
                                 className='fd-combobox-control'
                                 aria-expanded={this.state.isExpanded}
-                                aria-haspopup='true' >
-                                <div className='fd-input-group fd-input-group--after'>
+                                aria-haspopup='true'>
+                                <div
+                                    className={`fd-input-group fd-input-group--after${
+                                        compact ? ' fd-input-group--compact' : ''
+                                    }`}
+                                    ref={node => (this.node = node)}>
                                     <input
                                         type='text'
-                                        className='fd-input'
+                                        className={`fd-input${compact ? ' fd-input--compact' : ''}`}
                                         value={this.state.value}
                                         onChange={this.onChangeHandler}
                                         placeholder={placeholder}
                                         onKeyPress={this.onKeyPressHandler}
                                         onClick={() => this.onClickHandler()}
-                                        ref={node => (this.node = node)} />
-
-                                    <span className='fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button'>
-                                        <button className=' fd-button--light sap-icon--search' onClick={onSearch} />
-                                    </span>
+                                        style={noSearchBtn ? this.style : {}} />
+
+                                    {!noSearchBtn && (
+                                        <span className='fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button'>
+                                            <button
+                                                className=' fd-button--light sap-icon--search'
+                                                onClick={() => this.onClickHandler()} />
+                                        </span>
+                                    )}
                                 </div>
                             </div>
                         </div>
                     )}
                     {this.state.filteredResult && (
                         <div
                             className='fd-popover__body fd-popover__body--no-arrow'
-                            aria-hidden={!this.state.isExpanded} >
+                            aria-hidden={!this.state.isExpanded}>
                             <div className={inShellbar ? 'fd-search-input__body' : ''}>
                                 <nav className='fd-menu'>
                                     <ul className='fd-menu__list'>
@@ -184,7 +214,7 @@ export class SearchInput extends Component {
                                                     <li
                                                         key={index}
                                                         className='fd-menu__item'
-                                                        onClick={() => this.listItemClickHandler(item)} >
+                                                        onClick={() => this.listItemClickHandler(item)}>
                                                         <strong>{this.state.value}</strong>
                                                         {this.state.value && this.state.value.length
                                                             ? item.text.substring(this.state.value.length)