wip, elastic-search

src/app/components/elements/ElasticSearchInput/ElasticSearchInput.story.jsx

+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import ElasticSearchInput from './index';
+import { Center } from 'decorators';
+
+storiesOf('Elements', module)
+    .addDecorator(Center)
+    .add('ElasticSearchInput', () => <ElasticSearchInput />);

src/app/components/elements/ElasticSearchInput/index.jsx

+import React from 'react';
+import PropTypes from 'prop-types';
+import tt from 'counterpart';
+
+const ElasticSearchInput = ({ type }) => {
+    return (
+        <span>
+            <form
+                className={'elastic-search-input'}
+                onSubmit={() => {
+                    console.log('ELASTIC_SEARCH!');
+                }}
+            >
+                <svg
+                    className="elastic-search-input__icon"
+                    width="42"
+                    height="42"
+                    viewBox="0 0 32 32"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <g>
+                        <path
+                            className="elastic-search-input__path"
+                            d="M14.3681591,18.5706017 L11.3928571,21.6 L14.3681591,18.5706017 C13.273867,17.6916019 12.5714286,16.3293241 12.5714286,14.8 C12.5714286,12.1490332 14.6820862,10 17.2857143,10 C19.8893424,10 22,12.1490332 22,14.8 C22,17.4509668 19.8893424,19.6 17.2857143,19.6 C16.1841009,19.6 15.1707389,19.215281 14.3681591,18.5706017 Z"
+                            id="icon-svg"
+                        />
+                    </g>
+                </svg>
+                <input
+                    name="q"
+                    className="elastic-search-input__inner"
+                    type="search"
+                    placeholder={tt('g.search')}
+                />
+                <button
+                    className="input-group-button"
+                    href="/static/search.html"
+                    type="submit"
+                    title={tt('g.search')}
+                />
+            </form>
+        </span>
+    );
+};
+
+export default ElasticSearchInput;

src/app/components/elements/ElasticSearchInput/styles.scss

+form.elastic-search-input {
+
+    height: 42px;
+
+    svg.elastic-search-input__icon {
+        position: absolute;
+        pointer-events: none;
+        @include themify($themes) {
+            stroke: themed('colorAccentReverse');
+        }
+        stroke-width: 1.2;
+        fill: none;
+        
+    }
+
+    input.elastic-search-input__inner {
+        outline: none;
+        padding: 9px 10px 9px 32px;
+        width: 55px;
+        border-radius: 25pc;
+        transition: all 0.3s ease-in-out;
+        font-size: 16px;
+        background: transparent;
+        box-shadow: none;
+        width: 42px;
+        height: 42px;
+        color: transparent;
+        cursor: pointer;
+        transition: all 0.3s ease-in-out;
+        font-family: $font-primary;
+        @include themify($themes) {
+            border: 1px solid rgba(202, 202, 202, 0.6);
+        }
+        &::placeholder {
+            color: transparent
+        }
+        &:hover {
+            background-color: $color-teal;
+        }
+        &:focus {
+            width: 180px;
+            background-color: $color-white;
+            @include themify($themes) {
+                border: themed('moduleBackgroundColor');
+            }
+            border-color: $color-teal;
+            box-shadow: 0 0 5px rgba(109,207,246,.5);
+            width: 180px;
+            padding-left: 2.5rem;
+            @include themify($themes) {
+                color: themed('textColorPrimary');
+            }
+            background-color: transparent;
+            cursor: auto;
+            &::placeholder {
+                color: $color-blue-dark;
+                @include themify($themes) {
+                    color: themed('textColorSecondary');
+                }
+            }
+        }
+    }
+
+    /* small */
+    input.elastic-search-input__inner.elastic-search-input__inner--small {
+
+    }
+}
\ No newline at end of file

src/app/components/modules/Header/index.jsx

@@ -11,6 +11,7 @@ import tt from 'counterpart';
 import { APP_NAME } from 'app/client_config';
 import SortOrder from 'app/components/elements/SortOrder';
 import SearchInput from 'app/components/elements/SearchInput';
+import ElasticSearchInput from 'app/components/elements/ElasticSearchInput';
 import IconButton from 'app/components/elements/IconButton';
 import DropdownMenu from 'app/components/elements/DropdownMenu';
 import * as userActions from 'app/redux/UserReducer';
@@ -327,6 +328,7 @@ class Header extends React.Component {
                             {/*CUSTOM SEARCH*/}
                             <span className="Header__search--desktop">
                                 <SearchInput />
+                                <ElasticSearchInput />
                             </span>
                             <span className="Header__search">
                                 <a href="/static/search.html">