Search box storybook

src/css/main.css

@@ -24,7 +24,7 @@
   --white:#fff;
   --gray:#6c757d;
   --gray-dark:#343a40;
-  --primary:#007bff;
+  --primary:#0858A1;
   --secondary:#6c757d;
   --success:#28a745;
   --info:#17a2b8;
@@ -1498,7 +1498,14 @@ button::-moz-focus-inner,input::-moz-focus-inner {
 }
 
 input {
-  line-height:normal
+  border: none;
+  height: 38px;
+  line-height:normal;
+  border:1px solid #ced4da;
+  border-radius: 0.25rem;
+  width: 100%;
+  padding-left: 12px;
+  padding-right: 10px;
 }
 
 input[type="checkbox"],input[type="radio"] {
@@ -1510,6 +1517,14 @@ input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-ou
   height:auto
 }
 
+input:focus {
+  outline: var(--primary) solid 2px !important;
+}
+
+input:focus-visible {
+  outline: var(--primary) solid 2px !important;
+}
+
 fieldset {
   border:1px solid #c0c0c0;
   margin:0 2px;
@@ -3030,9 +3045,9 @@ h1,h2,h3,h4,h5,h6 {
 
 .search-bar {
   width:100%;
-  height:38px;
   overflow:hidden;
-  position:relative
+  position:relative;
+  padding: 4px;
 }
 
 .search-bar .search-bar-options {

src/js/common/stories/Button.stories.js

@@ -2,26 +2,18 @@ import React from 'react';
 import styled from 'styled-components';
 import Button from '../../components/Buttons/BaseButton';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 export default {
   title: 'Design System',
   component: Button,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  // argTypes: {
-  //   backgroundColor: { control: 'color' },
-  // },
   args: {
     primary: true,
   },
 };
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const AllButtons = (args) => (
   <ButtonContainer>
     <Button {...Primary.args} primary size="large" label="Primary Large Disabled Button" aria-label="Primary Large Disabled Button" />

src/js/common/stories/Searchbox.stories.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+import BaseSearchbox from '../../components/Search/BaseSearchbox';
+
+export default {
+  title: 'Design System/Inputs',
+  component: BaseSearchbox,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 340px;
+`;
+
+export const Searchbox = () => (
+  <Container>
+    <BaseSearchbox placeholder="Search by name, office or state"/>
+  </Container>
+);

src/js/components/Buttons/BaseButton.jsx

@@ -83,6 +83,7 @@ const Button = ({ primary, size, label, onClick, ...props }) => (
 );
 
 export default Button;
+
 Button.propTypes = {
   primary: PropTypes.bool,
   secondary: PropTypes.bool,

src/js/components/CampaignsHome/CampaignsHomeFilter.jsx

@@ -7,7 +7,7 @@ import { renderLog } from '../../common/utils/logging';
 import { SearchTitleTop } from '../../common/components/Style/FilterStyles';
 import StateDropDownCore from '../Filter/StateDropDownCore';
 import SearchBar from '../Search/SearchBar';
-
+import BaseSearchbox from '../../../js/components/Search/BaseSearchbox';
 
 // React functional component example
 function CampaignsHomeFilter (props) {
@@ -16,13 +16,13 @@ function CampaignsHomeFilter (props) {
   // console.log('CampaignsHomeFilter props.listModeFiltersAvailable:', props.listModeFiltersAvailable);
   return (
     <CampaignsHomeFilterWrapper>
-      {(isSearching && searchText) && (
+      {/* {(isSearching && searchText) && (
         <SearchTitleTop>
           Searching for &quot;
           {searchText}
           &quot;
         </SearchTitleTop>
-      )}
+      )} */}
       {!!(listModeFiltersAvailable) && (
         <CampaignsHomeFilterChoices>
           {listModeFiltersAvailable.map((oneFilter) => (
@@ -96,16 +96,16 @@ const styles = () => ({
 
 
 const CampaignsHomeFilterChoices = styled('div')`
-  margin-top: 8px;
+  margin-top: 14px;
 `;
 
 const CampaignsHomeFilterWrapper = styled('div')`
-  margin-top: 48px;
+  margin-top: 20px;
   margin-bottom: 24px;
 `;
 
 const SearchBarWrapper = styled('div')`
-  margin-top: 4px;
+  margin-top: 14px;
   margin-bottom: 8px;
 `;
 

src/js/components/Search/BaseSearchbox.jsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import colors from '../../common/components/Style/Colors';
+import searchIcon from '../../../img/global/icons/search.svg';
+import closeIcon from '../../../img/global/icons/cross.svg';
+
+const SearchWrapper = styled.div`
+  position: relative;
+  display: inline-block;
+  width: 100%;
+`;
+
+const SearchIcon = styled.div`
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+    color: gray; 
+    background-image: url(${searchIcon});
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    width: 24px;
+    height: 24px;
+`;
+
+const ClearButton = styled.div`
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background-image: url(${closeIcon});
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+`;
+
+const SearchInput = styled.input`
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    display: none;
+  }
+
+  border: none;
+  height: 38px;
+  width: 100%;
+  border: 1px solid rgb(206, 212, 218);
+  border-radius: 0.25rem;
+  padding-right: 40px;
+  padding-left: 12px;
+  border-radius: 0.25rem;
+  padding-right: 40px;
+
+
+  &:focus-visible {
+    border: none;
+    outline: ${colors.primary} solid 2px !important;
+  }
+`;
+
+class BaseSearchbox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { searchText: '' };
+  }
+
+  handleInputChange = (event) => {
+    this.setState({ searchText: event.target.value }, () => {
+        if (this.props.onChange) {
+            this.props.onChange(event);
+        }
+        if (this.props.onKeyDown) {
+            this.props.onKeyDown(event);
+        }
+        if(this.props.onFocus) {
+            this.props.onFocus(event);
+        }
+    });
+  }
+
+  handleClear = () => {
+    this.setState({ searchText: '' }, () => {
+        if (this.props.onClear) {
+            this.props.onClear();
+        }
+    });
+  }
+
+  render() {
+    return (
+      <SearchWrapper>
+        {!this.state.searchText && <SearchIcon />}
+        <SearchInput 
+            type="search" 
+            placeholder={this.props.placeholder} 
+            value={this.state.searchText} 
+            onChange={this.handleInputChange} 
+            onClear={this.handleClear}
+            maxLength={50}
+        />
+        {this.state.searchText && <ClearButton onClick={this.handleClear}/>}
+      </SearchWrapper>
+    );
+  }
+}
+
+BaseSearchbox.propTypes = {
+    placeholder: PropTypes.string,
+    onChange: PropTypes.func,
+    onKeyDown: PropTypes.func,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    onClear: PropTypes.func,
+};
+
+export default BaseSearchbox;