Merge pull request #2862 from uktrade/feat/search-bar

Add search bar to the new home page

dataworkspace/dataworkspace/apps/datasets/views.py

@@ -192,6 +192,14 @@ def _get_tags_as_dict():
     return tags_dict
 
 
+@csp_update(SCRIPT_SRC=settings.REACT_SCRIPT_SRC)
+def home_view(request):
+    if not waffle.flag_is_active(request, "HOME_PAGE_FLAG"):
+        return find_datasets(request)
+    else:
+        return render(request, "datasets/index.html")
+
+
 @csp_update(SCRIPT_SRC=settings.REACT_SCRIPT_SRC)
 @require_GET
 def find_datasets(request):
@@ -370,7 +378,7 @@ def _without_none(it):
 
     return render(
         request,
-        "datasets/index.html",
+        "datasets/search_results.html",
         {
             "form": form,
             "recently_viewed_catalogue_pages": get_recently_viewed_catalogue_pages(request),

dataworkspace/dataworkspace/sass/_search-bar.scss

@@ -0,0 +1,119 @@
+.search-container {
+    background-color: #1d70b8;
+    padding: 20px 0;
+}
+
+.search-field {
+    position: relative;
+    &--secondary {
+        display: grid;
+        grid-template-columns: 1fr auto;
+    }
+}
+
+.search-field__header {
+    color: #ffffff;
+}
+
+.search-field__footer__link {
+    color: #ffffff;
+}
+
+.search-field__label {
+    font-size: 16px;
+    line-height: 2.5;
+}
+
+@media (min-width: 40.0625em) {
+    .search-field__label {
+        font-size: 19px;
+        line-height: 2.1052631579;
+    }
+}
+
+.js-enabled .search-field__label {
+    position: absolute;
+    left: 15px;
+    top: 1px;
+    z-index: 1;
+    color: #6f777b;
+}
+
+.search-field-wrapper {
+    display: table;
+    width: 100%;
+    background: #ffffff;
+}
+
+.search-field__item {
+    position: relative;
+    display: table-cell;
+    vertical-align: top;
+    &--secondary {
+        border: none;
+    }
+}
+
+.search-field__input[type="search"]:focus,
+.search-field__input[type="search"].focus {
+    z-index: 2;
+}
+
+.search-field__input[type="search"] {
+    border-right-width: 0;
+}
+
+.search-field__input[type="search"]:focus {
+    border-right-width: 2px;
+}
+
+.search-field-submit-wrapper {
+    width: 1%;
+}
+
+.search-field__submit {
+    border: 0;
+    cursor: pointer;
+    border-radius: 0;
+    position: relative;
+    padding: 0;
+    width: 40px;
+    height: 40px;
+    background-image: url("/__django_static/assets/images/search-button.png");
+    background-repeat: no-repeat;
+    background-position: 2px 50%;
+    text-indent: -5000px;
+    overflow: hidden;
+    background-color: #1d70b8;
+    color: #ffffff;
+    &:hover {
+        background-color: #207dce;
+    }
+    &--secondary {
+        background-color: #1e1e1e;
+        &:hover {
+            background-color: #313030;
+        }
+    }
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min-device-pixel-ratio: 2),
+    only screen and (min-resolution: 192dpi),
+    only screen and (min-resolution: 2dppx) {
+    .search-field__submit {
+        background-size: 52.5px auto;
+        background-position: 115% 50%;
+    }
+}
+
+.search-field__submit:focus {
+    z-index: 2;
+    outline: 3px solid $govuk-focus-colour;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 4px #0b0c0c;
+}
+
+.search-field__submit::-moz-focus-inner {
+    border: 0;
+}

dataworkspace/dataworkspace/sass/data-workspace.scss

@@ -80,101 +80,6 @@
   min-width: 300px;
 }
 
-.search-field {
-  position: relative;
-}
-
-.search-field__label {
-  font-size: 16px;
-  line-height: 2.5;
-}
-
-@media (min-width: 40.0625em) {
-  .search-field__label {
-    font-size: 19px;
-    line-height: 2.1052631579;
-  }
-}
-
-.js-enabled .search-field__label {
-  position: absolute;
-  left: 15px;
-  top: 1px;
-  z-index: 1;
-  color: #6f777b;
-}
-
-.search-field-wrapper {
-  display: table;
-  width: 100%;
-  background: #ffffff;
-}
-
-.search-field__item {
-  position: relative;
-  display: table-cell;
-  vertical-align: top;
-}
-
-.search-field__input[type="search"]:focus,
-.search-field__input[type="search"].focus {
-  z-index: 2;
-}
-
-.search-field__input[type="search"] {
-  border-right-width: 0;
-}
-
-.search-field__input[type="search"]:focus {
-  border-right-width: 2px;
-}
-
-.search-field-submit-wrapper {
-  width: 1%;
-}
-
-.search-field__submit {
-  border: 0;
-  cursor: pointer;
-  border-radius: 0;
-  position: relative;
-  padding: 0;
-  width: 40px;
-  height: 40px;
-  background-image: url("/__django_static/assets/images/search-button.png");
-  background-repeat: no-repeat;
-  background-position: 2px 50%;
-  text-indent: -5000px;
-  overflow: hidden;
-  background-color: #1d70b8;
-  color: #ffffff;
-}
-
-@media only screen and (-webkit-min-device-pixel-ratio: 2),
-  only screen and (min-device-pixel-ratio: 2),
-  only screen and (min-resolution: 192dpi),
-  only screen and (min-resolution: 2dppx) {
-  .search-field__submit {
-    background-size: 52.5px auto;
-    background-position: 115% 50%;
-  }
-}
-
-.search-field__submit:focus {
-  z-index: 2;
-  outline: 3px solid $govuk-focus-colour;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 4px #0b0c0c;
-}
-
-.search-field__submit::-moz-focus-inner {
-  border: 0;
-}
-
-.search-field__submit:hover {
-  background-color: #207dce;
-}
-
 .pagination {
   float: right;
 }
@@ -658,6 +563,7 @@ p.sidebar-section {
 
 @import "filters";
 @import "search";
+@import "search-bar";
 @import "site-search";
 @import "rich-text";
 @import "collection-button";

dataworkspace/dataworkspace/static/js/react/components/GetHelp/index.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 
-import {
-    SPACING_POINTS
-} from '@govuk-react/constants';
+import { SPACING_POINTS } from '@govuk-react/constants';
 import { typography } from '@govuk-react/lib';
 import Link from '@govuk-react/link';
 import { H4, UnorderedList } from 'govuk-react';
@@ -11,43 +9,51 @@ import styled from 'styled-components';
 import Tile from '../Tile';
 
 const StyledParagraph = styled('p')`
-    margin: ${SPACING_POINTS[6]}px 0;
-    ${typography.font({ size: 16 })};
+  margin: ${SPACING_POINTS[4]}px 0;
+  ${typography.font({ size: 16 })};
 `;
 
 const LinkList = styled(UnorderedList)`
-    list-style: none;
-    padding: ${SPACING_POINTS[0]}px;
-    margin: ${SPACING_POINTS[0]}px;
+  list-style: none;
+  padding: ${SPACING_POINTS[0]}px;
+  margin: ${SPACING_POINTS[0]}px;
 `;
 
 const LinkListItem = styled('li')`
-    margin: ${SPACING_POINTS[4]}px 0;
-    ${typography.font({ size: 16 })};
+  margin: ${SPACING_POINTS[4]}px 0;
+  ${typography.font({ size: 16 })};
 
-    &:last-child {
-        margin-bottom: 0;
-    }
+  &:last-child {
+    margin-bottom: 0;
+  }
 `;
 
 const GetHelp: React.FC = () => {
-    return (
-        <Tile title='Get help'>
-            <StyledParagraph>
-                Find documentation, guidance, standards, 
-                training and updates on the <Link href='https://data-services-help.trade.gov.uk/data-workspace/'>Data Services Help Centre</Link>
-            </StyledParagraph>
-            <H4 size={'SMALL'}>
-                Suggested articles
-            </H4>
-            <LinkList>
-                <LinkListItem><Link href='#'>How to start using tools</Link></LinkListItem>
-                <LinkListItem><Link href='#'>Share and collaborate</Link></LinkListItem>
-                <LinkListItem><Link href='#'>Getting started on Data Workspace</Link></LinkListItem>
-                <LinkListItem><Link href='#'>How to add data on Data Workspace</Link></LinkListItem>
-            </LinkList>
-        </Tile>
-    );
+  return (
+    <Tile title="Get help">
+      <StyledParagraph>
+        Find documentation, guidance, standards, training and updates on the{' '}
+        <Link href="https://data-services-help.trade.gov.uk/data-workspace/">
+          Data Services Help Centre
+        </Link>
+      </StyledParagraph>
+      <H4 size={'SMALL'}>Suggested articles</H4>
+      <LinkList>
+        <LinkListItem>
+          <Link href="#">How to start using tools</Link>
+        </LinkListItem>
+        <LinkListItem>
+          <Link href="#">Share and collaborate</Link>
+        </LinkListItem>
+        <LinkListItem>
+          <Link href="#">Getting started on Data Workspace</Link>
+        </LinkListItem>
+        <LinkListItem>
+          <Link href="#">How to add data on Data Workspace</Link>
+        </LinkListItem>
+      </LinkList>
+    </Tile>
+  );
 };
 
 export default GetHelp;

dataworkspace/dataworkspace/static/js/react/components/Tile/index.tsx

@@ -1,37 +1,29 @@
 import React, { ReactNode } from 'react';
 
-import {
-    SPACING_POINTS
-  } from '@govuk-react/constants';
+import { SPACING_POINTS } from '@govuk-react/constants';
 import { H3 } from 'govuk-react';
 import styled from 'styled-components';
 
-import {
-    MID_GREY,
-    WHITE
-} from '../../constants';
+import { MID_GREY, WHITE } from '../../constants';
 
 const TileStyling = styled('div')`
-    padding:${SPACING_POINTS['6']}px;
-    border: 1px solid ${MID_GREY};
-    background-color: ${WHITE};
+  padding: ${SPACING_POINTS['4']}px;
+  border: 1px solid ${MID_GREY};
+  background-color: ${WHITE};
 `;
 
 interface TileProps {
-    title: string;
-    children: ReactNode;
+  title: string;
+  children: ReactNode;
 }
 
-const Tile: React.FC<TileProps> = ({ 
-    title, 
-    children
-}) => {
-    return (
-        <TileStyling>
-            <H3 size={27}>{title}</H3>
-            {children}
-        </TileStyling>
-    );
+const Tile: React.FC<TileProps> = ({ title, children }) => {
+  return (
+    <TileStyling>
+      <H3 size={27}>{title}</H3>
+      {children}
+    </TileStyling>
+  );
 };
 
 export default Tile;