From 02d7ebce910a95a5d30065eb355615a6ca65908a Mon Sep 17 00:00:00 2001
From: Keegan Kavanagh <keegankavanagh@live.com>
Date: Thu, 25 Aug 2022 15:08:52 -0700
Subject: [PATCH 01/13] working and has storybook and styles

---
 packages/search-package/.gitignore            |   2 +
 packages/search-package/.storybook/main.js    |  39 ++++++
 .../.storybook/preview-head.html              |   1 +
 packages/search-package/.storybook/preview.js |  24 ++++
 packages/search-package/CHANGELOG.md          |  65 ++++++++++
 packages/search-package/README.md             |  26 ++++
 packages/search-package/package.json          |  84 ++++++++++++
 .../src/components/Search/Results.stories.tsx |  64 ++++++++++
 .../src/components/Search/Results.tsx         | 112 ++++++++++++++++
 .../src/components/Search/Search.stories.tsx  |  19 +++
 .../src/components/Search/Search.tsx          | 114 +++++++++++++++++
 .../src/components/Search/SearchFunctions.ts  |  35 +++++
 .../src/components/Search/SearchStyles.tsx    |  73 +++++++++++
 .../src/components/Search/UseSearch.tsx       | 110 ++++++++++++++++
 .../components/SmallViews/BreadcrumbLink.tsx  |  30 +++++
 .../SmallViews/ItemView.stories.tsx           |  29 +++++
 .../src/components/SmallViews/ItemView.tsx    |  74 +++++++++++
 packages/search-package/src/index.d.ts        |   0
 packages/search-package/src/index.ts          |   6 +
 packages/search-package/src/styles.css        | 120 ++++++++++++++++++
 packages/search-package/tsconfig.json         |  35 +++++
 21 files changed, 1062 insertions(+)
 create mode 100644 packages/search-package/.gitignore
 create mode 100644 packages/search-package/.storybook/main.js
 create mode 100644 packages/search-package/.storybook/preview-head.html
 create mode 100644 packages/search-package/.storybook/preview.js
 create mode 100644 packages/search-package/CHANGELOG.md
 create mode 100644 packages/search-package/README.md
 create mode 100644 packages/search-package/package.json
 create mode 100644 packages/search-package/src/components/Search/Results.stories.tsx
 create mode 100644 packages/search-package/src/components/Search/Results.tsx
 create mode 100644 packages/search-package/src/components/Search/Search.stories.tsx
 create mode 100644 packages/search-package/src/components/Search/Search.tsx
 create mode 100644 packages/search-package/src/components/Search/SearchFunctions.ts
 create mode 100644 packages/search-package/src/components/Search/SearchStyles.tsx
 create mode 100644 packages/search-package/src/components/Search/UseSearch.tsx
 create mode 100644 packages/search-package/src/components/SmallViews/BreadcrumbLink.tsx
 create mode 100644 packages/search-package/src/components/SmallViews/ItemView.stories.tsx
 create mode 100644 packages/search-package/src/components/SmallViews/ItemView.tsx
 create mode 100644 packages/search-package/src/index.d.ts
 create mode 100644 packages/search-package/src/index.ts
 create mode 100644 packages/search-package/src/styles.css
 create mode 100644 packages/search-package/tsconfig.json

diff --git a/packages/search-package/.gitignore b/packages/search-package/.gitignore
new file mode 100644
index 0000000000..430675afe5
--- /dev/null
+++ b/packages/search-package/.gitignore
@@ -0,0 +1,2 @@
+dist/
+.out/
diff --git a/packages/search-package/.storybook/main.js b/packages/search-package/.storybook/main.js
new file mode 100644
index 0000000000..67ff1d56aa
--- /dev/null
+++ b/packages/search-package/.storybook/main.js
@@ -0,0 +1,39 @@
+module.exports = {
+  stories: ["../src/components/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
+  addons: [
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        configureJSX: true,
+        babelOptions: {},
+        sourceLoaderOptions: null,
+        transcludeMarkdown: true
+      }
+    }
+  ],
+  babel: async (options) => ({
+    ...options,
+
+    "plugins": [
+      "@babel/plugin-proposal-optional-chaining",
+      "@babel/plugin-transform-runtime",
+    ]
+  }),
+  webpackFinal: async (config) => {
+    config.module.rules[0].use[0].options.plugins[1] = [
+      '@babel/plugin-proposal-class-properties',
+      { loose: true }
+    ]
+
+    config.module.rules.push({
+      test: /\.(stories|story)\.[tj]sx?$/,
+      loader: require.resolve("@storybook/source-loader"),
+      exclude: [/node_modules/],
+      enforce: "pre"
+    });
+
+    config.resolve.extensions.push(".ts", ".tsx", ".mdx")
+
+    return config
+  }
+}
diff --git a/packages/search-package/.storybook/preview-head.html b/packages/search-package/.storybook/preview-head.html
new file mode 100644
index 0000000000..a05ce31fa3
--- /dev/null
+++ b/packages/search-package/.storybook/preview-head.html
@@ -0,0 +1 @@
+<link rel="stylesheet" href="https://i.icomoon.io/public/830a3260df/SaaSquatch/style.css">
diff --git a/packages/search-package/.storybook/preview.js b/packages/search-package/.storybook/preview.js
new file mode 100644
index 0000000000..cdb3a20801
--- /dev/null
+++ b/packages/search-package/.storybook/preview.js
@@ -0,0 +1,24 @@
+import { DocsPage, DocsContainer } from "@storybook/addon-docs";
+import { GlobalStyle } from '@saasquatch/visual-dev';
+import React from "react";
+
+export const parameters = {
+  docs: {
+    container: DocsContainer,
+    page: DocsPage,
+  },
+  options: {
+    enableShortcuts: false,
+  },
+  viewMode: "docs",
+};
+
+const withGlobalStyles = (Story, context) => {
+  return (
+    <>
+      <GlobalStyle />
+      <Story {...context} />
+    </>
+  );
+};
+export const decorators = [withGlobalStyles];
diff --git a/packages/search-package/CHANGELOG.md b/packages/search-package/CHANGELOG.md
new file mode 100644
index 0000000000..aaedbe54f3
--- /dev/null
+++ b/packages/search-package/CHANGELOG.md
@@ -0,0 +1,65 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [1.0.2] - 2022-08-02
+
+### Changed
+
+- Update global CSS variables to match new portal design system variables
+
+## [1.0.1] - 2022-07-21
+
+### Changed
+
+- Fix icons in safari by adding width to svg
+- Make Modal buttons more configurable
+- More SVG icon options added
+- Remove stopPropagation from select list to prevent conflict with Popper.js
+
+### Added
+
+## [1.0.0] - 2022-06-01
+
+### Added
+
+- New visual-dev components:
+  - \<Accordion>
+  - \<Alert>
+  - \<ArrayFieldTemplate>
+  - \<Avatar>
+  - \<Badge>
+  - \<Button>
+  - \<Card>
+  - \<Checkbox>
+  - \<Combobox>
+  - \<CopyWrapper>
+  - \<DataTable>
+  - \<Dropdown>
+  - \<ErrorListTemplate>
+  - \<FieldTemplate>
+  - \<Form>
+  - \<GlobalStyle>
+  - \<Input>
+  - \<List>
+  - \<Modal>
+  - \<ObjectFieldTemplate>
+  - \<Popover>
+  - \<Radio
+  - \<RadioAction>
+  - \<RadioCard>
+  - \<Select>
+  - \<Select2>
+  - \<Switch>
+  - \<Tabs>
+  - \<Tag>
+  - \<TextArea>
+  - \<Tooltip>
+
+[unreleased]: https://github.com/saasquatch/program-tools/compare/visual-dev%401.0.1...HEAD
+[1.0.1]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch/visual-dev%401.0.1
diff --git a/packages/search-package/README.md b/packages/search-package/README.md
new file mode 100644
index 0000000000..e32c32e4e4
--- /dev/null
+++ b/packages/search-package/README.md
@@ -0,0 +1,26 @@
+# visual-dev
+
+Template repo for visual development for Saasquatch products.
+
+## Usage
+
+To install dependencies
+``` 
+$ npm install
+```
+
+To build
+```
+$ npm run build 
+```
+
+To run tests
+```
+$ npm run test
+```
+
+To run Storybook
+``` 
+$ npm run storybook
+```
+
diff --git a/packages/search-package/package.json b/packages/search-package/package.json
new file mode 100644
index 0000000000..540d9204d5
--- /dev/null
+++ b/packages/search-package/package.json
@@ -0,0 +1,84 @@
+{
+  "name": "@saasquatch/squatch-search",
+  "version": "0.0.1",
+  "description": "SaaSquatch search",
+  "main": "dist/index.js",
+  "module": "dist/visual-dev.esm.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint",
+    "storybook": "cross-env NODE_ENV=storybook start-storybook -p 9001 -c .storybook",
+    "storybook:build": "cross-env NODE_ENV=storybook build-storybook -c .storybook -o .out"
+  },
+  "keywords": [],
+  "author": "SaaSquatch Team",
+  "license": "MIT",
+  "dependencies": {
+    "@saasquatch/visual-dev": "^1.0.3-2",
+    "jquery": "^3.6.0",
+    "react-shadow": "^19.0.2",
+    "use-debounce": "^8.0.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.12",
+    "@rjsf/core": "^2.4.1",
+    "@storybook/addon-a11y": "^6.3.8",
+    "@storybook/addon-docs": "^6.3.8",
+    "@storybook/addon-knobs": "^6.3.1",
+    "@storybook/addon-viewport": "^6.3.8",
+    "@storybook/react": "^6.3.8",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^10.0.4",
+    "@types/jest": "^25.2.1",
+    "@types/json-schema": "^7.0.9",
+    "@types/marked": "^3.0.1",
+    "@types/react": "^16.14.6",
+    "@types/react-dom": "^16.9.12",
+    "@types/react-select": "^3.1.2",
+    "@types/styled-components": "^5.1.9",
+    "awesome-typescript-loader": "^5.2.1",
+    "babel-loader": "^8.2.2",
+    "cross-env": "^7.0.3",
+    "downshift": "^6.1.7",
+    "jest": "^25.5.1",
+    "marked": "^3.0.4",
+    "prettier-standard": "^16.3.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-router-hash-link": "^1.2.2",
+    "storybook-addon-matrix": "^1.6.0",
+    "styled-components": "^5.3.0",
+    "ts-jest": "^25.5.1",
+    "ts-loader": "^7.0.3",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.3.1",
+    "typescript": "^3.9.9"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "styled-components": ">=5.3.0"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "jsdom",
+    "testPathIgnorePatterns": [
+      "dist/"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/saasquatch/program-tools.git"
+  },
+  "bugs": {
+    "url": "https://github.com/saasquatch/program-tools/issues"
+  },
+  "homepage": "https://github.com/saasquatch/program-tools#readme"
+}
diff --git a/packages/search-package/src/components/Search/Results.stories.tsx b/packages/search-package/src/components/Search/Results.stories.tsx
new file mode 100644
index 0000000000..fdb65feb2a
--- /dev/null
+++ b/packages/search-package/src/components/Search/Results.stories.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import { Results, ResultsProps } from "./Results";
+import { getBreadcrumbHook, isBlank } from "./SearchFunctions";
+
+export default {
+  title: "Results",
+  component: Results,
+};
+
+const defaultProps: ResultsProps = {
+  response: {
+    title: "test",
+    items: [
+      {
+        cacheId: "test",
+        displayLink: "docs.saasquatch.com",
+        formattedUrl: "https://docs.saasquatch.com",
+        htmlFormattedUrl: "https://docs.saasquatch.com",
+        htmlSnippet: "Testing...",
+        htmlTitle: "Test",
+        kind: "customsearch#result",
+        link: "https://docs.saasquatch.com",
+        pagemap: "",
+      },
+			{
+        cacheId: "test",
+        displayLink: "docs.saasquatch.com",
+        formattedUrl: "https://docs.saasquatch.com",
+        htmlFormattedUrl: "https://docs.saasquatch.com",
+        htmlSnippet: "Testing...",
+        htmlTitle: "Test",
+        kind: "customsearch#result",
+        link: "https://docs.saasquatch.com/something/bread/",
+        pagemap: "",
+      },
+			{
+        cacheId: "test",
+        displayLink: "docs.saasquatch.com",
+        formattedUrl: "https://docs.saasquatch.com",
+        htmlFormattedUrl: "https://docs.saasquatch.com",
+        htmlSnippet: "Testing...",
+        htmlTitle: "Test",
+        kind: "customsearch#result",
+        link: "https://docs.saasquatch.com",
+        pagemap: "",
+      },
+    ],
+    kind: "customsearch#search",
+    searchInformation: {
+      formattedSearchTime: "0.12",
+      formattedTotalResults: "0",
+      searchTime: 0.123753,
+      totalResults: "0",
+    },
+  },
+  setStartIndex: "",
+  query: "test",
+  onGetBreadcrumbs: getBreadcrumbHook,
+  onIsBlank: isBlank,
+};
+
+export const MultipleItems = () => {
+  return <Results {...defaultProps} />;
+};
diff --git a/packages/search-package/src/components/Search/Results.tsx b/packages/search-package/src/components/Search/Results.tsx
new file mode 100644
index 0000000000..c3aa276385
--- /dev/null
+++ b/packages/search-package/src/components/Search/Results.tsx
@@ -0,0 +1,112 @@
+import React from "react";
+import styled from "styled-components";
+import { BreadcrumbLinkProps } from "../SmallViews/BreadcrumbLink";
+import ItemView from "../SmallViews/ItemView";
+import { sanitizeGoogleSearchLink } from "./SearchFunctions";
+
+const ItemsContainerDiv = styled.div`
+  max-width: 1000px;
+  margin-top: var(--sq-spacing-large);
+`;
+
+const PrevNextDiv = styled.div`
+  max-width: 1000px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+`;
+
+const PrevA = styled.a`
+  color: #06966f;
+  cursor: pointer;
+  &:hover {
+    color: #06966f;
+  }
+`;
+
+const NextA = styled.a`
+  color: #06966f;
+  margin-left: var(--sq-spacing-medium);
+  cursor: pointer;
+  &:hover {
+    color: #06966f;
+  }
+`;
+
+const ContainerA = styled.a`
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  text-decoration: none;
+`;
+
+export interface ResultsProps {
+    response: any;
+    setStartIndex: any;
+    query: string;
+    onGetBreadcrumbs: (link: string) => Array<BreadcrumbLinkProps>;
+    onIsBlank: (str?: string) => boolean;
+}
+
+// @ts-ignore
+export function Results(props: ResultsProps) {
+  const { items, queries, searchInformation } = props.response;
+  console.log(props.response);
+
+  return (
+    <>
+      <ItemsContainerDiv>
+        {items &&
+          items
+            // @ts-ignore
+            .filter((item) => item)
+            // @ts-ignore
+            .map((item, i) => (
+              // getBreadcrumb(item.link)
+              <ContainerA href={item.link}>
+                <ItemView item={item} onGetBreadcrumbs={props.onGetBreadcrumbs} />
+              </ContainerA>
+            ))}
+      </ItemsContainerDiv>
+
+      {items && (
+        <p>
+          {searchInformation.totalResults} total results found in{" "}
+          {searchInformation.formattedSearchTime} seconds
+        </p>
+      )}
+      <PrevNextDiv>
+        {queries?.previousPage && (
+          <PrevA
+            onClick={() => props.setStartIndex(queries.previousPage[0].startIndex)}
+          >
+            Previous
+          </PrevA>
+        )}
+
+        {queries?.nextPage && (
+          <NextA onClick={() => props.setStartIndex(queries.nextPage[0].startIndex)}>
+            Next
+          </NextA>
+        )}
+      </PrevNextDiv>
+
+      {!items && props.onIsBlank(props.query) && (
+        <div className="search-results-none text-center">
+          <p className="lead">What are you looking for?</p>
+        </div>
+      )}
+      {!items && !props.onIsBlank(props.query) && (
+        <div className="search-results-none text-center">
+          <h3 className="visible-desktop" style={{ paddingTop: "43px" }}>
+            No matching Docs!
+          </h3>
+          <p className="lead">
+            Looks like we couldn't find any Help Center page that matches your
+            search term <strong>"{props.query}"</strong>
+          </p>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/packages/search-package/src/components/Search/Search.stories.tsx b/packages/search-package/src/components/Search/Search.stories.tsx
new file mode 100644
index 0000000000..eb28c66980
--- /dev/null
+++ b/packages/search-package/src/components/Search/Search.stories.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import Search, { SearchProps } from "./Search";
+import { getBreadcrumbHook, isBlank } from './SearchFunctions'
+import { useSearch } from "./UseSearch";
+
+export default {
+  title: "Search",
+  component: Search,
+};
+
+export const Default = () => {
+  const defaultProps: SearchProps = {
+    onGetBreadcrumbs: getBreadcrumbHook,
+    onIsBlank: isBlank,
+    useSearch: useSearch()
+  }
+
+  return <Search {...defaultProps}/>;
+};
diff --git a/packages/search-package/src/components/Search/Search.tsx b/packages/search-package/src/components/Search/Search.tsx
new file mode 100644
index 0000000000..7bfb1579ba
--- /dev/null
+++ b/packages/search-package/src/components/Search/Search.tsx
@@ -0,0 +1,114 @@
+import React from "react";
+import styled from "styled-components";
+import { InputView, RadioView } from "@saasquatch/visual-dev";
+import { Results } from "./Results";
+import { BreadcrumbLinkProps } from "../SmallViews/BreadcrumbLink";
+
+const SearchContainerDiv = styled.div`
+  max-width: 1000px;
+`;
+
+const RadioContainerDiv = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+export interface useSearchProps {
+  response: any;
+  query: string;
+  setQuery: (newValue: string) => void;
+  cat: string;
+  setCat: (cat: string) => void;
+  setStartIndex: (startIndex: any) => void;
+}
+
+export interface SearchProps {
+  onGetBreadcrumbs: (link: string) => Array<BreadcrumbLinkProps>;
+  onIsBlank: (str?: string) => boolean;
+  useSearch: useSearchProps;
+}
+
+export default function Search(props: SearchProps) {
+  if (typeof document === "undefined") {
+    return <div />;
+  }
+  return (
+    <>
+      <section className="page" id="js-docs-search-results">
+        <div className="well search-page">
+          <div className="row-fluid text-center">
+            <h3>Help Center Search</h3>
+            <form className="js-search-form form-search" action="/search/">
+              <SearchContainerDiv>
+                <InputView
+                  customCSS={"margin-bottom: var(--sq-spacing-medium);"}
+                  limitWidth="false"
+                  icon="search"
+                  position="left"
+                  value={props.useSearch.query}
+                  onChange={(e: any) => props.useSearch.setQuery(e.target.value)}
+                />
+                <RadioContainerDiv>
+                  <RadioView
+                    css=""
+                    customLabelCSS="margin-left: 0px; margin-right: 35px;"
+                    label="All"
+                    value={props.useSearch.cat === "" ? true : false}
+                    onChange={() => props.useSearch.setCat("")}
+                  />
+                  <RadioView
+                    css=""
+                    customLabelCSS="margin-left: 0px; margin-right: 35px;"
+                    label="Developer"
+                    value={props.useSearch.cat === "developerCenter" ? true : false}
+                    onChange={() => props.useSearch.setCat("developerCenter")}
+                  />
+                  <RadioView
+                    css=""
+                    customLabelCSS="margin-left: 0px; margin-right: 35px;"
+                    label="Success"
+                    value={props.useSearch.cat === "successCenter" ? true : false}
+                    onChange={() => props.useSearch.setCat("successCenter")}
+                  />
+                  <RadioView
+                    css=""
+                    label="Designer"
+                    value={props.useSearch.cat === "designerCenter" ? true : false}
+                    onChange={() => props.useSearch.setCat("designerCenter")}
+                  />
+                </RadioContainerDiv>
+              </SearchContainerDiv>
+            </form>
+          </div>
+          <div className="row-fluid">
+            <div id="pretty-results" className="search-results">
+              {!props.useSearch.response && (
+                <div className="text-center search-spinner">
+                  <h3>Searching Help Center...</h3>
+                  <i className="fa fa-spinner fa-spin fa-5x"></i>
+                </div>
+              )}
+              {/* @ts-ignore */}
+              {props.useSearch.response && props.useSearch.response.error && (
+                <div className="text-center">
+                  {/* @ts-ignore */}
+                  <h3>{props.useSearch.response.error.message}</h3>
+                </div>
+              )}
+              {/* @ts-ignore */}
+              {props.useSearch.response && !props.useSearch.response.error && (
+                <Results
+                  response={props.useSearch.response}
+                  setStartIndex={props.useSearch.setStartIndex}
+                  query={props.useSearch.query}
+                  onGetBreadcrumbs={props.onGetBreadcrumbs}
+                  onIsBlank={props.onIsBlank}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/packages/search-package/src/components/Search/SearchFunctions.ts b/packages/search-package/src/components/Search/SearchFunctions.ts
new file mode 100644
index 0000000000..4b0a54d79d
--- /dev/null
+++ b/packages/search-package/src/components/Search/SearchFunctions.ts
@@ -0,0 +1,35 @@
+import { BreadcrumbLinkProps } from "../SmallViews/BreadcrumbLink";
+
+export function sanitizeGoogleSearchLink(link: string) {
+  return link
+    .replace("https://docs.referralsaasquatch.com", "")
+    .replace("https://docs.saasquatch.com", "");
+}
+
+export function isBlank(str?: string) {
+  return !str || /^\s*$/.test(str);
+}
+
+export const getfullPath = (pathArray: Array<string>, index: number) => {
+  let fullPath: string = "";
+  for (let i = 0; i < index; i++) {
+    fullPath = fullPath + pathArray[i] + "/";
+  }
+  return fullPath;
+};
+
+export const getBreadcrumbHook = (link: string) => {
+  const fullPath: string = new URL(link).pathname;
+  const noStartEndSlashes: string = fullPath.slice(1, -1);
+  const pathArray: Array<string> = noStartEndSlashes.split("/");
+  const pathObjectsArray: Array<BreadcrumbLinkProps> = [];
+  for (let i = 0; i < pathArray.length; i++) {
+    const tempPathObject = {
+      link: "https://docs.saasquatch.com/" + getfullPath(pathArray, i + 1),
+      linkName:
+        i + 1 === pathArray.length ? pathArray[i] : pathArray[i] + " > ",
+    };
+    pathObjectsArray.push(tempPathObject);
+  }
+  return pathObjectsArray;
+};
diff --git a/packages/search-package/src/components/Search/SearchStyles.tsx b/packages/search-package/src/components/Search/SearchStyles.tsx
new file mode 100644
index 0000000000..3c3de4bfe8
--- /dev/null
+++ b/packages/search-package/src/components/Search/SearchStyles.tsx
@@ -0,0 +1,73 @@
+// import React from "react";
+import styled from "styled-components";
+// @ts-ignore
+import { HashLink } from "react-router-hash-link";
+
+export const ItemRow = styled(HashLink)`
+  display: block;
+  color: #000;
+  padding: 8px;
+  margin: 5px 0;
+  border-bottom: 1px solid #ddd;
+
+  background: ${(props) => (props.selected ? "#e0e0e0" : "white")};
+  &:hover {
+    background: #eee;
+  }
+`;
+export const DefaultInput = styled.input`
+  width: 75%;
+`;
+
+export const ItemTitle = styled.div`
+  margin: 5px 0;
+  font-weight: bold;
+  color: #000;
+`;
+export const ItemBody = styled.div`
+  font-size: 0.9em;
+  color: #444;
+  word-wrap: break-word;
+
+  br {
+    /* Hides google's automatic <br> additions */
+    display: none;
+  }
+`;
+export const ResultsSummary = styled.p`
+  color: #333;
+`;
+export const Pagination = styled.div`
+  border-top: 1px solid #ccc;
+`;
+
+export const PagerButton = styled.a`
+  padding-right: 10px;
+  cursor: pointer;
+`;
+export const NoResults = styled.div``;
+
+export const PopOver = styled.div<{ sideBar: boolean }>`
+  background: #fff;
+  border: 1px solid #eee;
+  box-shadow: 0px 0px 28px -6px rgba(0, 0, 0, 1);
+  border-radius: 5px;
+  padding: 10px;
+  z-index: 999;
+  overflow-y: scroll;
+  width: ${(props) => (props.sideBar ? "18vw" : "70vw")};
+  min-width: 200px;
+`;
+
+export const Inline = styled.div``;
+
+export const styledLink = styled.a`
+  color: #357732 !important;
+  &:hover {
+    text-decoration: underline !important;
+  }
+`;
+
+export const Container = styled.div<{ sideBar: boolean }>`
+  height: ${(props) => (props.sideBar ? "75vh" : "35vh")};
+`;
diff --git a/packages/search-package/src/components/Search/UseSearch.tsx b/packages/search-package/src/components/Search/UseSearch.tsx
new file mode 100644
index 0000000000..ce2916f0e0
--- /dev/null
+++ b/packages/search-package/src/components/Search/UseSearch.tsx
@@ -0,0 +1,110 @@
+import { useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+
+const GCSE_CX = "012261857935385488279:90grrsobq40";
+// Prod
+// const GCSE_KEY = "AIzaSyC3Lc2HenETRKNS3VIsHAMobTYhnKYG6dE";
+// Local
+const GCSE_KEY = "AIzaSyCrIbUMtCnszBe5kZzkbSMk5ii0PZJ5nqw";
+
+export function getParameterByName(name: string) {
+  name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
+  var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
+    results = regex.exec(window.location.search);
+  return results === null
+    ? ""
+    : decodeURIComponent(results[1].replace(/\+/g, " "));
+}
+
+export function useSearch() {
+  const [response, setResponse] = useState(null);
+
+  // Only run in the browser
+  const jQuery = require("jquery");
+
+  // var categoryFilter = "more:pagemap:metatags-type:jsReference";
+  let initialIndex = 0;
+  try {
+    initialIndex = parseInt(getParameterByName("startIndex"));
+  } catch (e) {}
+  const initialState = {
+    query: getParameterByName("q"),
+    cat: getParameterByName("cat"),
+    startIndex: initialIndex
+  };
+  const [{ query, cat, startIndex }, setState] = useState(initialState);
+  function setQuery(newValue: string) {
+    setState({
+      // If you change the query, go back to page 0
+      startIndex: 0,
+      cat,
+      query: newValue
+    });
+  }
+  function setCat(cat: string) {
+    setState({
+      query,
+      cat,
+      // If you change the category, go back to page 0
+      startIndex: 0
+    });
+  }
+  // @ts-ignore
+  function setStartIndex(startIndex) {
+    setState({
+      query,
+      cat,
+      startIndex
+    });
+  }
+  //   jQuery(".js-search-form input[name=cat]").val([cat]);
+  let privateQuery;
+  if (cat && cat.length > 1) {
+    // privateQuery = query + " more:pagemap:metatags-type:" + cat;
+    privateQuery = query + " more:pagemap:metatags-docsCategory:" + cat;
+  } else {
+    privateQuery = query ? query : "hi";
+  }
+  let dataObj = {
+    q: privateQuery,
+    cx: GCSE_CX,
+    key: GCSE_KEY,
+    format: "json",
+    start: undefined
+  };
+  if (startIndex) {
+      // @ts-ignore
+    dataObj.start = startIndex;
+  }
+
+  const debounced = useDebouncedCallback(
+    // function
+    (value) => {
+      jQuery.ajax({
+        url: "https://www.googleapis.com/customsearch/v1",
+        dataType: "jsonp",
+        jsonp: "callback",
+        data: value,
+        // Work with the response
+        success: function (response: any) {
+          setResponse(response);
+        }
+      });
+    },
+    // delay in ms
+    100
+  );
+
+  useEffect(() => {
+    debounced(dataObj);
+  }, [query, cat, startIndex]);
+
+  return {
+    response,
+    query,
+    setQuery,
+    cat,
+    setCat,
+    setStartIndex
+  };
+}
diff --git a/packages/search-package/src/components/SmallViews/BreadcrumbLink.tsx b/packages/search-package/src/components/SmallViews/BreadcrumbLink.tsx
new file mode 100644
index 0000000000..2784943b4f
--- /dev/null
+++ b/packages/search-package/src/components/SmallViews/BreadcrumbLink.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import styled from "styled-components";
+
+export interface BreadcrumbLinkProps {
+  link: string;
+  linkName: string;
+}
+
+const BreadLink = styled.a`
+  cursor: pointer;
+  border: none;
+  font-family: "Helvetica Neue", Helvetica, sans-serif;
+  border: none;
+  color: var(--sq-text-subdued);
+  &:hover {
+    color: #0088CC;
+  }
+  &:visited {
+    color: #681DA8;
+  }
+  text-decoration: none;
+  background: none;
+  font-size: var( --sq-font-size-regular);
+`;
+
+const BreadcrumbLink = (props: BreadcrumbLinkProps) => {
+  return <BreadLink href={props.link}>{props.linkName}</BreadLink>;
+};
+
+export default BreadcrumbLink;
diff --git a/packages/search-package/src/components/SmallViews/ItemView.stories.tsx b/packages/search-package/src/components/SmallViews/ItemView.stories.tsx
new file mode 100644
index 0000000000..712e73af52
--- /dev/null
+++ b/packages/search-package/src/components/SmallViews/ItemView.stories.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { getBreadcrumbHook } from "../Search/SearchFunctions";
+import ItemView, { ItemViewProps } from "./ItemView";
+
+
+export default {
+  title: "Item",
+  component: ItemView,
+};
+
+const defaultProps: ItemViewProps = {
+    item: {
+        cacheId: "test",
+        displayLink: "docs.saasquatch.com",
+        formattedUrl: "https://docs.saasquatch.com",
+        htmlSnippet: "Testing...",
+        htmlTitle: "Test",
+        kind: "customsearch#result",
+        link: "https://docs.saasquatch.com/Test/Test/",
+        pagemap: "",
+        snippet: "",
+        title: ""
+    },
+    onGetBreadcrumbs: getBreadcrumbHook
+}
+
+export const OneItem = () => {
+    return <ItemView {...defaultProps}/>
+}
\ No newline at end of file
diff --git a/packages/search-package/src/components/SmallViews/ItemView.tsx b/packages/search-package/src/components/SmallViews/ItemView.tsx
new file mode 100644
index 0000000000..f443d3bb66
--- /dev/null
+++ b/packages/search-package/src/components/SmallViews/ItemView.tsx
@@ -0,0 +1,74 @@
+import React from "react";
+import styled from "styled-components";
+import BreadcrumbLink, { BreadcrumbLinkProps } from "./BreadcrumbLink";
+
+export interface ItemViewProps {
+  item: {
+    cacheId: string;
+    displayLink: string;
+    formattedUrl: string;
+    htmlSnippet: string;
+    htmlTitle: string;
+    kind: string;
+    link: string;
+    pagemap: any;
+    snippet: string;
+    title: string;
+  };
+  onGetBreadcrumbs: (link: string) => Array<BreadcrumbLinkProps>;
+}
+
+const ItemContainerDiv = styled.div`
+  padding: var(--sq-spacing-large) var(--sq-spacing-x-small);
+  border-bottom: 1px solid var(--sq-border);
+  &:hover {
+    cursor: pointer;
+    /* h3 {
+      color: #06966F;
+    } */
+    background-color: #E7EDEE;
+  }
+`;
+
+const TitleDiv = styled.h3`
+  margin: 0;
+  font-weight: bold;
+  color: var(--sq-text);
+  margin-bottom: var(--sq-spacing-xxsmall);
+`;
+
+const DescriptionDiv = styled.div`
+  font-size: 15px;
+  overflow-wrap: break-word;
+  color: var(--sq-text);
+`;
+
+const BreadcrumbContainerDiv = styled.div`
+  display: row;
+  flex-direction: column;
+  margin-bottom: var(--sq-spacing-small);
+`;
+
+const ItemView = (props: ItemViewProps) => {
+  return (
+    <ItemContainerDiv>
+      <TitleDiv
+        dangerouslySetInnerHTML={{
+          __html: props.item.htmlTitle,
+        }}
+      ></TitleDiv>
+      <BreadcrumbContainerDiv>
+        {props.onGetBreadcrumbs(props.item.link).map((item) => {
+          return <BreadcrumbLink {...item} />;
+        })}
+      </BreadcrumbContainerDiv>
+      <DescriptionDiv
+        dangerouslySetInnerHTML={{
+          __html: props.item.htmlSnippet,
+        }}
+      ></DescriptionDiv>
+    </ItemContainerDiv>
+  );
+};
+
+export default ItemView;
diff --git a/packages/search-package/src/index.d.ts b/packages/search-package/src/index.d.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/search-package/src/index.ts b/packages/search-package/src/index.ts
new file mode 100644
index 0000000000..ff534a7139
--- /dev/null
+++ b/packages/search-package/src/index.ts
@@ -0,0 +1,6 @@
+import Search from './components/Search/Search';
+/// <reference types="styled-components/cssprop" />
+
+export {
+  Search
+};
diff --git a/packages/search-package/src/styles.css b/packages/search-package/src/styles.css
new file mode 100644
index 0000000000..a06a5e6ff8
--- /dev/null
+++ b/packages/search-package/src/styles.css
@@ -0,0 +1,120 @@
+:root {
+  /* font-size: 16px; */
+
+  /* ~~~ Colors ~~~ */
+
+  /* Surface */
+  --sq-surface: #ffffff;
+  --sq-surface-subdued: #f6f6f6;
+  --sq-background: #f9f9f9;
+
+  /* On Surface */
+  --sq-text: #575757;
+  --sq-text-dark: #232323;
+  --sq-text-subdued: #858585;
+  --sq-border: #e2e2e2;
+
+  /* Top Nav Bar */
+  --sq-nav-surface-primary: #003b45;
+  --sq-nav-text-on-primary: #ffffff;
+  --sq-nav-text-on-primary-subdued: #999999;
+  --sq-nav-surface-secondary: #ffffff;
+  --sq-nav-text-on-secondary: #003b45;
+  --sq-nav-text-on-secondary-subdued: #7c7c7c;
+
+  /* Primary */
+  --sq-action-primary: #f49c20;
+  --sq-action-primary-hovered: #dc8f32;
+  --sq-text-on-primary: #ffffff;
+  --sq-action-primary-disabled: #e2e2e2;
+
+  /* Secondary */
+  --sq-action-secondary: #ffffff;
+  --sq-action-secondary-hovered: #a6b9bd;
+  --sq-action-secondary-border: #a6b9bd;
+  --sq-text-on-secondary: #575757;
+  --sq-text-on-secondary-hovered: #ffffff;
+  --sq-placeholder-text-on-secondary: #bdbdbd;
+
+  /* Success */
+  --sq-surface-success: #57ac59;
+  --sq-surface-success-hovered: #479449;
+  --sq-surface-success-subdued: #e4fce3;
+  --sq-border-success: #57ac59;
+
+  /* Warning */
+  --sq-surface-warning: #f1c359;
+  --sq-surface-warning-subdued: #fcf8e3;
+  --sq-border-warning: #f1c359;
+
+  /* Critical */
+  --sq-surface-critical: #fe6666;
+  --sq-surface-critical-hovered: #cb0000;
+  --sq-surface-critical-subdued: #faf2ee;
+  --sq-border-critical: #d14040;
+  --sq-on-surface-critical: #c71d06;
+
+  /* Interactive */
+  --sq-text-interactive: #0088cc;
+  --sq-focused: #458edf;
+  --sq-icon-interactive: #0275fb;
+  --sq-surface-hover: #eef6ff;
+
+  /* Typography */
+  --sq-font-family-sans: "Helvetica Neue", Helvetica, sans-serif;
+
+  --sq-font-weight-regular: 400;
+  --sq-font-weight-semibold: 600;
+  --sq-font-weight-bold: 700;
+
+  --sq-font-size-header-one: 26px;
+  --sq-font-size-header-two: 22px;
+  --sq-font-size-header-three: 18px;
+  --sq-font-size-regular: 14px;
+  --sq-font-size-small: 12px;
+  --sq-font-size-caption: 16px;
+
+  --sq-line-height-header-one: 28px;
+  --sq-line-height-header-two: 28px;
+  --sq-line-height-header-three: 20px;
+  --sq-line-height-regular: 20px;
+  --sq-line-height-caption: 16px;
+
+  /* Button */
+  --sq-font-size-button-small: 12px;
+  --sq-font-size-button-medium: 14px;
+  --sq-font-size-button-large: 18px;
+  --sq-line-height-button-small: 16px;
+  --sq-line-height-button-medium: 16px;
+  --sq-line-height-button-large: 18px;
+
+  /* Icon Sizes */
+  --sq-icon-size-small: 12px;
+  --sq-icon-size-medium: 20px;
+  --sq-icon-size-large: 36px;
+  --sq-icon-size-badge: 18px;
+
+  /* Avatar Sizes */
+  --sq-icon-size-avatar: 36px;
+  --sq-icon-size-avatar-large: 50px;
+  --sq-font-size-avatar: 24px;
+
+  /* Modal */
+  --sq-surface-modal-banner: #12c8d7;
+
+  /* Input */
+  --sq-surface-input-disabled: #ebebeb;
+  --sq-text-input-disabled: #bdbdbd;
+
+  /* Spacing */
+  --sq-spacing-xxx-small: 2px;
+  --sq-spacing-xx-small: 4px;
+  --sq-spacing-x-small: 8px;
+  --sq-spacing-small: 12px;
+  --sq-spacing-medium: 16px;
+  --sq-spacing-large: 20px;
+  --sq-spacing-x-large: 24px;
+  --sq-spacing-xx-large: 32px;
+  --sq-spacing-xxx-large: 48px;
+  --sq-spacing-xxxx-large: 64px;
+}
diff --git a/packages/search-package/tsconfig.json b/packages/search-package/tsconfig.json
new file mode 100644
index 0000000000..2d7419fbbf
--- /dev/null
+++ b/packages/search-package/tsconfig.json
@@ -0,0 +1,35 @@
+{
+  // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
+  "include": ["src", "types"],
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "importHelpers": true,
+    // output .d.ts declaration files for consumers
+    "declaration": true,
+    // output .js.map sourcemap files for consumers
+    "sourceMap": true,
+    // match output dir to input dir. e.g. dist/index instead of dist/src/index
+    "rootDir": "./src",
+    // stricter type-checking for stronger correctness. Recommended by TS
+    "strict": true,
+    // linter checks for common issues
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    // use Node's module resolution algorithm, instead of the legacy TS one
+    "moduleResolution": "node",
+    // transpile JSX to React.createElement
+    "jsx": "react",
+    // interop between ESM and CJS modules. Recommended by TS
+    "esModuleInterop": true,
+    // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
+    "skipLibCheck": true,
+    // error out if import and file system have a casing mismatch. Recommended by TS
+    "forceConsistentCasingInFileNames": true,
+    // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
+    "noEmit": true
+  }
+}

From 29f9b4f3a04aca7e0c1b0b4cbdd5ccdf6ea1815c Mon Sep 17 00:00:00 2001
From: Keegan Kavanagh <keegankavanagh@live.com>
Date: Thu, 25 Aug 2022 15:15:25 -0700
Subject: [PATCH 02/13] added functions exports

---
 .../src/components/Search/Results.stories.tsx              | 4 ++--
 .../src/components/Search/Search.stories.tsx               | 4 ++--
 .../src/components/Search/SearchFunctions.ts               | 2 +-
 .../src/components/SmallViews/ItemView.stories.tsx         | 4 ++--
 packages/search-package/src/index.ts                       | 7 ++++++-
 5 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/search-package/src/components/Search/Results.stories.tsx b/packages/search-package/src/components/Search/Results.stories.tsx
index fdb65feb2a..f61a445473 100644
--- a/packages/search-package/src/components/Search/Results.stories.tsx
+++ b/packages/search-package/src/components/Search/Results.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Results, ResultsProps } from "./Results";
-import { getBreadcrumbHook, isBlank } from "./SearchFunctions";
+import { getBreadcrumb, isBlank } from "./SearchFunctions";
 
 export default {
   title: "Results",
@@ -55,7 +55,7 @@ const defaultProps: ResultsProps = {
   },
   setStartIndex: "",
   query: "test",
-  onGetBreadcrumbs: getBreadcrumbHook,
+  onGetBreadcrumbs: getBreadcrumb,
   onIsBlank: isBlank,
 };
 
diff --git a/packages/search-package/src/components/Search/Search.stories.tsx b/packages/search-package/src/components/Search/Search.stories.tsx
index eb28c66980..1248e82983 100644
--- a/packages/search-package/src/components/Search/Search.stories.tsx
+++ b/packages/search-package/src/components/Search/Search.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import Search, { SearchProps } from "./Search";
-import { getBreadcrumbHook, isBlank } from './SearchFunctions'
+import { getBreadcrumb, isBlank } from './SearchFunctions'
 import { useSearch } from "./UseSearch";
 
 export default {
@@ -10,7 +10,7 @@ export default {
 
 export const Default = () => {
   const defaultProps: SearchProps = {
-    onGetBreadcrumbs: getBreadcrumbHook,
+    onGetBreadcrumbs: getBreadcrumb,
     onIsBlank: isBlank,
     useSearch: useSearch()
   }
diff --git a/packages/search-package/src/components/Search/SearchFunctions.ts b/packages/search-package/src/components/Search/SearchFunctions.ts
index 4b0a54d79d..39ad3a56f1 100644
--- a/packages/search-package/src/components/Search/SearchFunctions.ts
+++ b/packages/search-package/src/components/Search/SearchFunctions.ts
@@ -18,7 +18,7 @@ export const getfullPath = (pathArray: Array<string>, index: number) => {
   return fullPath;
 };
 
-export const getBreadcrumbHook = (link: string) => {
+export const getBreadcrumb = (link: string) => {
   const fullPath: string = new URL(link).pathname;
   const noStartEndSlashes: string = fullPath.slice(1, -1);
   const pathArray: Array<string> = noStartEndSlashes.split("/");
diff --git a/packages/search-package/src/components/SmallViews/ItemView.stories.tsx b/packages/search-package/src/components/SmallViews/ItemView.stories.tsx
index 712e73af52..52ba21d558 100644
--- a/packages/search-package/src/components/SmallViews/ItemView.stories.tsx
+++ b/packages/search-package/src/components/SmallViews/ItemView.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { getBreadcrumbHook } from "../Search/SearchFunctions";
+import { getBreadcrumb } from "../Search/SearchFunctions";
 import ItemView, { ItemViewProps } from "./ItemView";
 
 
@@ -21,7 +21,7 @@ const defaultProps: ItemViewProps = {
         snippet: "",
         title: ""
     },
-    onGetBreadcrumbs: getBreadcrumbHook
+    onGetBreadcrumbs: getBreadcrumb
 }
 
 export const OneItem = () => {
diff --git a/packages/search-package/src/index.ts b/packages/search-package/src/index.ts
index ff534a7139..530cce96a7 100644
--- a/packages/search-package/src/index.ts
+++ b/packages/search-package/src/index.ts
@@ -1,6 +1,11 @@
 import Search from './components/Search/Search';
+import { getBreadcrumb, isBlank } from './components/Search/SearchFunctions';
+import { useSearch } from './components/Search/UseSearch';
 /// <reference types="styled-components/cssprop" />
 
 export {
-  Search
+  Search,
+  getBreadcrumb,
+  isBlank,
+  useSearch
 };

From 919df16686cc141f8d8a55322a1effadd912fa54 Mon Sep 17 00:00:00 2001
From: Keegan Kavanagh <keegankavanagh@live.com>
Date: Thu, 25 Aug 2022 16:11:05 -0700
Subject: [PATCH 03/13] removed sanitizegooglesearchlink

---
 packages/search-package/package.json                     | 2 +-
 .../search-package/src/components/Search/Results.tsx     | 1 -
 packages/search-package/src/components/Search/Search.tsx | 9 +++++++++
 .../src/components/Search/SearchFunctions.ts             | 6 ------
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/search-package/package.json b/packages/search-package/package.json
index 540d9204d5..43aba974d7 100644
--- a/packages/search-package/package.json
+++ b/packages/search-package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saasquatch/squatch-search",
-  "version": "0.0.1",
+  "version": "0.1.0-1",
   "description": "SaaSquatch search",
   "main": "dist/index.js",
   "module": "dist/visual-dev.esm.js",
diff --git a/packages/search-package/src/components/Search/Results.tsx b/packages/search-package/src/components/Search/Results.tsx
index c3aa276385..0de4bb9993 100644
--- a/packages/search-package/src/components/Search/Results.tsx
+++ b/packages/search-package/src/components/Search/Results.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import styled from "styled-components";
 import { BreadcrumbLinkProps } from "../SmallViews/BreadcrumbLink";
 import ItemView from "../SmallViews/ItemView";
-import { sanitizeGoogleSearchLink } from "./SearchFunctions";
 
 const ItemsContainerDiv = styled.div`
   max-width: 1000px;
diff --git a/packages/search-package/src/components/Search/Search.tsx b/packages/search-package/src/components/Search/Search.tsx
index 7bfb1579ba..712eb932de 100644
--- a/packages/search-package/src/components/Search/Search.tsx
+++ b/packages/search-package/src/components/Search/Search.tsx
@@ -23,8 +23,17 @@ export interface useSearchProps {
 }
 
 export interface SearchProps {
+  /**
+   * Pass in getBreadcrum function, or a function to create a breadcrumb changed 
+   */
   onGetBreadcrumbs: (link: string) => Array<BreadcrumbLinkProps>;
+  /**
+   * Pass in isBlank function to check if query is blank
+   */
   onIsBlank: (str?: string) => boolean;
+  /**
+   * Pass in useSearch function in here
+   */
   useSearch: useSearchProps;
 }
 
diff --git a/packages/search-package/src/components/Search/SearchFunctions.ts b/packages/search-package/src/components/Search/SearchFunctions.ts
index 39ad3a56f1..8c13674355 100644
--- a/packages/search-package/src/components/Search/SearchFunctions.ts
+++ b/packages/search-package/src/components/Search/SearchFunctions.ts
@@ -1,11 +1,5 @@
 import { BreadcrumbLinkProps } from "../SmallViews/BreadcrumbLink";
 
-export function sanitizeGoogleSearchLink(link: string) {
-  return link
-    .replace("https://docs.referralsaasquatch.com", "")
-    .replace("https://docs.saasquatch.com", "");
-}
-
 export function isBlank(str?: string) {
   return !str || /^\s*$/.test(str);
 }

From 9aa6315ea142097bb07a603dc89736c89d75208c Mon Sep 17 00:00:00 2001
From: Keegan Kavanagh <keegankavanagh@live.com>
Date: Fri, 26 Aug 2022 14:37:05 -0700
Subject: [PATCH 04/13] removed old styles

---
 .../src/components/Search/SearchStyles.tsx    | 73 -------------------
 1 file changed, 73 deletions(-)
 delete mode 100644 packages/search-package/src/components/Search/SearchStyles.tsx

diff --git a/packages/search-package/src/components/Search/SearchStyles.tsx b/packages/search-package/src/components/Search/SearchStyles.tsx
deleted file mode 100644
index 3c3de4bfe8..0000000000
--- a/packages/search-package/src/components/Search/SearchStyles.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-// import React from "react";
-import styled from "styled-components";
-// @ts-ignore
-import { HashLink } from "react-router-hash-link";
-
-export const ItemRow = styled(HashLink)`
-  display: block;
-  color: #000;
-  padding: 8px;
-  margin: 5px 0;
-  border-bottom: 1px solid #ddd;
-
-  background: ${(props) => (props.selected ? "#e0e0e0" : "white")};
-  &:hover {
-    background: #eee;
-  }
-`;
-export const DefaultInput = styled.input`
-  width: 75%;
-`;
-
-export const ItemTitle = styled.div`
-  margin: 5px 0;
-  font-weight: bold;
-  color: #000;
-`;
-export const ItemBody = styled.div`
-  font-size: 0.9em;
-  color: #444;
-  word-wrap: break-word;
-
-  br {
-    /* Hides google's automatic <br> additions */
-    display: none;
-  }
-`;
-export const ResultsSummary = styled.p`
-  color: #333;
-`;
-export const Pagination = styled.div`
-  border-top: 1px solid #ccc;
-`;
-
-export const PagerButton = styled.a`
-  padding-right: 10px;
-  cursor: pointer;
-`;
-export const NoResults = styled.div``;
-
-export const PopOver = styled.div<{ sideBar: boolean }>`
-  background: #fff;
-  border: 1px solid #eee;
-  box-shadow: 0px 0px 28px -6px rgba(0, 0, 0, 1);
-  border-radius: 5px;
-  padding: 10px;
-  z-index: 999;
-  overflow-y: scroll;
-  width: ${(props) => (props.sideBar ? "18vw" : "70vw")};
-  min-width: 200px;
-`;
-
-export const Inline = styled.div``;
-
-export const styledLink = styled.a`
-  color: #357732 !important;
-  &:hover {
-    text-decoration: underline !important;
-  }
-`;
-
-export const Container = styled.div<{ sideBar: boolean }>`
-  height: ${(props) => (props.sideBar ? "75vh" : "35vh")};
-`;

From ac11d5d466094417af1deea2ab3ac9ef431e7c1b Mon Sep 17 00:00:00 2001
From: Keegan Kavanagh <keegankavanagh@live.com>
Date: Mon, 29 Aug 2022 11:27:29 -0700
Subject: [PATCH 05/13] changed text decoration to work better on links

---
 packages/search-package/package.json                      | 2 +-
 packages/search-package/src/components/Search/Results.tsx | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/search-package/package.json b/packages/search-package/package.json
index 43aba974d7..2794ce9dbc 100644
--- a/packages/search-package/package.json
+++ b/packages/search-package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saasquatch/squatch-search",
-  "version": "0.1.0-1",
+  "version": "0.1.0-6",
   "description": "SaaSquatch search",
   "main": "dist/index.js",
   "module": "dist/visual-dev.esm.js",
diff --git a/packages/search-package/src/components/Search/Results.tsx b/packages/search-package/src/components/Search/Results.tsx
index 0de4bb9993..736a7083f0 100644
--- a/packages/search-package/src/components/Search/Results.tsx
+++ b/packages/search-package/src/components/Search/Results.tsx
@@ -36,7 +36,10 @@ const ContainerA = styled.a`
   display: flex;
   flex-direction: column;
   margin: 0;
-  text-decoration: none;
+  text-decoration: none !important;
+  & div:hover {
+    text-decoration: none !important;
+  }
 `;
 
 export interface ResultsProps {

From 19fecec133a7c653d0547e515f0830dc2ce5b7f7 Mon Sep 17 00:00:00 2001
From: Keegan Kavanagh <keegankavanagh@live.com>
Date: Mon, 29 Aug 2022 11:28:45 -0700
Subject: [PATCH 06/13] updating version

---
 packages/search-package/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/search-package/package.json b/packages/search-package/package.json
index 2794ce9dbc..4872ff7af6 100644
--- a/packages/search-package/package.json
+++ b/packages/search-package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saasquatch/squatch-search",
-  "version": "0.1.0-6",
+  "version": "0.1.0-7",
   "description": "SaaSquatch search",
   "main": "dist/index.js",
   "module": "dist/visual-dev.esm.js",

From 511cff911e6850ccbeaf239fc2efe44449282082 Mon Sep 17 00:00:00 2001
From: Keegan Kavanagh <keegankavanagh@live.com>
Date: Mon, 29 Aug 2022 11:45:41 -0700
Subject: [PATCH 07/13] trying different css

---
 packages/search-package/src/components/Search/Results.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/search-package/src/components/Search/Results.tsx b/packages/search-package/src/components/Search/Results.tsx
index 736a7083f0..4eb7364074 100644
--- a/packages/search-package/src/components/Search/Results.tsx
+++ b/packages/search-package/src/components/Search/Results.tsx
@@ -37,7 +37,7 @@ const ContainerA = styled.a`
   flex-direction: column;
   margin: 0;
   text-decoration: none !important;
-  & div:hover {
+  &:hover > div {
     text-decoration: none !important;
   }
 `;

From 10227681c42166ff70bf2c8c52fe212ea5be09fc Mon Sep 17 00:00:00 2001
From: Keegan Kavanagh <keegankavanagh@live.com>
Date: Mon, 29 Aug 2022 17:03:30 -0700
Subject: [PATCH 08/13] make sidebar search

---
 packages/search-package/package.json          |  2 +-
 .../src/components/Search/Results.tsx         | 40 +++++----
 .../src/components/Search/Search.stories.tsx  | 11 +++
 .../src/components/Search/Search.tsx          | 88 +++++++++++--------
 4 files changed, 88 insertions(+), 53 deletions(-)

diff --git a/packages/search-package/package.json b/packages/search-package/package.json
index 4872ff7af6..5370a7f918 100644
--- a/packages/search-package/package.json
+++ b/packages/search-package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saasquatch/squatch-search",
-  "version": "0.1.0-7",
+  "version": "0.1.0-9",
   "description": "SaaSquatch search",
   "main": "dist/index.js",
   "module": "dist/visual-dev.esm.js",
diff --git a/packages/search-package/src/components/Search/Results.tsx b/packages/search-package/src/components/Search/Results.tsx
index 4eb7364074..c03d926b6b 100644
--- a/packages/search-package/src/components/Search/Results.tsx
+++ b/packages/search-package/src/components/Search/Results.tsx
@@ -3,16 +3,16 @@ import styled from "styled-components";
 import { BreadcrumbLinkProps } from "../SmallViews/BreadcrumbLink";
 import ItemView from "../SmallViews/ItemView";
 
-const ItemsContainerDiv = styled.div`
-  max-width: 1000px;
+const ItemsContainerDiv = styled.div<{sidebar?: boolean}>`
+  max-width: ${(props) => (props.sidebar ? "300px" : "1000px")};
   margin-top: var(--sq-spacing-large);
 `;
 
-const PrevNextDiv = styled.div`
-  max-width: 1000px;
+const PrevNextDiv = styled.div<{ sidebar?: boolean }>`
+  max-width: ${(props) => (props.sidebar ? "300px" : "1000px")};
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: ${(props) => (props.sidebar ? "right" : "center")};
 `;
 
 const PrevA = styled.a`
@@ -43,11 +43,12 @@ const ContainerA = styled.a`
 `;
 
 export interface ResultsProps {
-    response: any;
-    setStartIndex: any;
-    query: string;
-    onGetBreadcrumbs: (link: string) => Array<BreadcrumbLinkProps>;
-    onIsBlank: (str?: string) => boolean;
+  response: any;
+  setStartIndex: any;
+  query: string;
+  onGetBreadcrumbs: (link: string) => Array<BreadcrumbLinkProps>;
+  onIsBlank: (str?: string) => boolean;
+  sidebar?: boolean;
 }
 
 // @ts-ignore
@@ -57,7 +58,7 @@ export function Results(props: ResultsProps) {
 
   return (
     <>
-      <ItemsContainerDiv>
+      <ItemsContainerDiv sidebar={props.sidebar}>
         {items &&
           items
             // @ts-ignore
@@ -66,7 +67,10 @@ export function Results(props: ResultsProps) {
             .map((item, i) => (
               // getBreadcrumb(item.link)
               <ContainerA href={item.link}>
-                <ItemView item={item} onGetBreadcrumbs={props.onGetBreadcrumbs} />
+                <ItemView
+                  item={item}
+                  onGetBreadcrumbs={props.onGetBreadcrumbs}
+                />
               </ContainerA>
             ))}
       </ItemsContainerDiv>
@@ -77,23 +81,27 @@ export function Results(props: ResultsProps) {
           {searchInformation.formattedSearchTime} seconds
         </p>
       )}
-      <PrevNextDiv>
+      <PrevNextDiv sidebar={props.sidebar}>
         {queries?.previousPage && (
           <PrevA
-            onClick={() => props.setStartIndex(queries.previousPage[0].startIndex)}
+            onClick={() =>
+              props.setStartIndex(queries.previousPage[0].startIndex)
+            }
           >
             Previous
           </PrevA>
         )}
 
         {queries?.nextPage && (
-          <NextA onClick={() => props.setStartIndex(queries.nextPage[0].startIndex)}>
+          <NextA
+            onClick={() => props.setStartIndex(queries.nextPage[0].startIndex)}
+          >
             Next
           </NextA>
         )}
       </PrevNextDiv>
 
-      {!items && props.onIsBlank(props.query) && (
+      {!props.sidebar && !items && props.onIsBlank(props.query) && (
         <div className="search-results-none text-center">
           <p className="lead">What are you looking for?</p>
         </div>
diff --git a/packages/search-package/src/components/Search/Search.stories.tsx b/packages/search-package/src/components/Search/Search.stories.tsx
index 1248e82983..3808dcbfa4 100644
--- a/packages/search-package/src/components/Search/Search.stories.tsx
+++ b/packages/search-package/src/components/Search/Search.stories.tsx
@@ -17,3 +17,14 @@ export const Default = () => {
 
   return <Search {...defaultProps}/>;
 };
+
+export const MiniSearch = () => {
+  const miniProps: SearchProps = {
+    onGetBreadcrumbs: getBreadcrumb,
+    onIsBlank: isBlank,
+    useSearch: useSearch(),
+    sidebar: true
+  }
+
+  return <Search {...miniProps}/>;
+};
diff --git a/packages/search-package/src/components/Search/Search.tsx b/packages/search-package/src/components/Search/Search.tsx
index 712eb932de..9f15411523 100644
--- a/packages/search-package/src/components/Search/Search.tsx
+++ b/packages/search-package/src/components/Search/Search.tsx
@@ -4,8 +4,8 @@ import { InputView, RadioView } from "@saasquatch/visual-dev";
 import { Results } from "./Results";
 import { BreadcrumbLinkProps } from "../SmallViews/BreadcrumbLink";
 
-const SearchContainerDiv = styled.div`
-  max-width: 1000px;
+const SearchContainerDiv = styled.div<{sidebar?: boolean}>`
+  max-width: ${(props) => (props.sidebar ? "300px" : "1000px")};
 `;
 
 const RadioContainerDiv = styled.div`
@@ -24,7 +24,7 @@ export interface useSearchProps {
 
 export interface SearchProps {
   /**
-   * Pass in getBreadcrum function, or a function to create a breadcrumb changed 
+   * Pass in getBreadcrum function, or a function to create a breadcrumb changed
    */
   onGetBreadcrumbs: (link: string) => Array<BreadcrumbLinkProps>;
   /**
@@ -35,63 +35,78 @@ export interface SearchProps {
    * Pass in useSearch function in here
    */
   useSearch: useSearchProps;
+  /**
+   * If sidebar is true, it'll be mini and remove radio buttons
+   */
+  sidebar?: boolean;
 }
 
 export default function Search(props: SearchProps) {
   if (typeof document === "undefined") {
     return <div />;
   }
+  console.log(props.sidebar);
   return (
     <>
       <section className="page" id="js-docs-search-results">
         <div className="well search-page">
           <div className="row-fluid text-center">
-            <h3>Help Center Search</h3>
+          {!props.sidebar &&<h3>Help Center Search</h3>}
             <form className="js-search-form form-search" action="/search/">
-              <SearchContainerDiv>
+              <SearchContainerDiv sidebar={props.sidebar}>
                 <InputView
                   customCSS={"margin-bottom: var(--sq-spacing-medium);"}
                   limitWidth="false"
                   icon="search"
                   position="left"
                   value={props.useSearch.query}
-                  onChange={(e: any) => props.useSearch.setQuery(e.target.value)}
+                  onChange={(e: any) =>
+                    props.useSearch.setQuery(e.target.value)
+                  }
                 />
-                <RadioContainerDiv>
-                  <RadioView
-                    css=""
-                    customLabelCSS="margin-left: 0px; margin-right: 35px;"
-                    label="All"
-                    value={props.useSearch.cat === "" ? true : false}
-                    onChange={() => props.useSearch.setCat("")}
-                  />
-                  <RadioView
-                    css=""
-                    customLabelCSS="margin-left: 0px; margin-right: 35px;"
-                    label="Developer"
-                    value={props.useSearch.cat === "developerCenter" ? true : false}
-                    onChange={() => props.useSearch.setCat("developerCenter")}
-                  />
-                  <RadioView
-                    css=""
-                    customLabelCSS="margin-left: 0px; margin-right: 35px;"
-                    label="Success"
-                    value={props.useSearch.cat === "successCenter" ? true : false}
-                    onChange={() => props.useSearch.setCat("successCenter")}
-                  />
-                  <RadioView
-                    css=""
-                    label="Designer"
-                    value={props.useSearch.cat === "designerCenter" ? true : false}
-                    onChange={() => props.useSearch.setCat("designerCenter")}
-                  />
-                </RadioContainerDiv>
+                {!props.sidebar && (
+                  <RadioContainerDiv>
+                    <RadioView
+                      css=""
+                      customLabelCSS="margin-left: 0px; margin-right: 35px;"
+                      label="All"
+                      value={props.useSearch.cat === "" ? true : false}
+                      onChange={() => props.useSearch.setCat("")}
+                    />
+                    <RadioView
+                      css=""
+                      customLabelCSS="margin-left: 0px; margin-right: 35px;"
+                      label="Developer"
+                      value={
+                        props.useSearch.cat === "developerCenter" ? true : false
+                      }
+                      onChange={() => props.useSearch.setCat("developerCenter")}
+                    />
+                    <RadioView
+                      css=""
+                      customLabelCSS="margin-left: 0px; margin-right: 35px;"
+                      label="Success"
+                      value={
+                        props.useSearch.cat === "successCenter" ? true : false
+                      }
+                      onChange={() => props.useSearch.setCat("successCenter")}
+                    />
+                    <RadioView
+                      css=""
+                      label="Designer"
+                      value={
+                        props.useSearch.cat === "designerCenter" ? true : false
+                      }
+                      onChange={() => props.useSearch.setCat("designerCenter")}
+                    />
+                  </RadioContainerDiv>
+                )}
               </SearchContainerDiv>
             </form>
           </div>
           <div className="row-fluid">
             <div id="pretty-results" className="search-results">
-              {!props.useSearch.response && (
+              {!props.sidebar && !props.useSearch.response && (
                 <div className="text-center search-spinner">
                   <h3>Searching Help Center...</h3>
                   <i className="fa fa-spinner fa-spin fa-5x"></i>
@@ -112,6 +127,7 @@ export default function Search(props: SearchProps) {
                   query={props.useSearch.query}
                   onGetBreadcrumbs={props.onGetBreadcrumbs}
                   onIsBlank={props.onIsBlank}
+                  sidebar={props.sidebar}
                 />
               )}
             </div>

From d601db9df7a814fdb27c87a88e5434ec517fca6d Mon Sep 17 00:00:00 2001
From: Keegan Kavanagh <keegankavanagh@live.com>
Date: Mon, 29 Aug 2022 17:05:52 -0700
Subject: [PATCH 09/13] exporting searchprops

---
 packages/search-package/package.json | 2 +-
 packages/search-package/src/index.ts | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/search-package/package.json b/packages/search-package/package.json
index 5370a7f918..cc92676f92 100644
--- a/packages/search-package/package.json
+++ b/packages/search-package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saasquatch/squatch-search",
-  "version": "0.1.0-9",
+  "version": "0.1.0-10",
   "description": "SaaSquatch search",
   "main": "dist/index.js",
   "module": "dist/visual-dev.esm.js",
diff --git a/packages/search-package/src/index.ts b/packages/search-package/src/index.ts
index 530cce96a7..e14d44123f 100644
--- a/packages/search-package/src/index.ts
+++ b/packages/search-package/src/index.ts
@@ -1,4 +1,4 @@
-import Search from './components/Search/Search';
+import Search, { SearchProps } from './components/Search/Search';
 import { getBreadcrumb, isBlank } from './components/Search/SearchFunctions';
 import { useSearch } from './components/Search/UseSearch';
 /// <reference types="styled-components/cssprop" />
@@ -7,5 +7,6 @@ export {
   Search,
   getBreadcrumb,
   isBlank,
-  useSearch
+  useSearch,
+  SearchProps
 };

From afe9733d400baf00ed4747f0c4203df89a2bcb4e Mon Sep 17 00:00:00 2001
From: Keegan Kavanagh <keegankavanagh@live.com>
Date: Tue, 30 Aug 2022 10:08:20 -0700
Subject: [PATCH 10/13] making sidebar mandatory in searchprops

---
 packages/search-package/package.json                        | 2 +-
 packages/search-package/src/components/Search/Results.tsx   | 6 +++---
 .../search-package/src/components/Search/Search.stories.tsx | 3 ++-
 packages/search-package/src/components/Search/Search.tsx    | 4 ++--
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/search-package/package.json b/packages/search-package/package.json
index cc92676f92..ac37963344 100644
--- a/packages/search-package/package.json
+++ b/packages/search-package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saasquatch/squatch-search",
-  "version": "0.1.0-10",
+  "version": "0.1.0-11",
   "description": "SaaSquatch search",
   "main": "dist/index.js",
   "module": "dist/visual-dev.esm.js",
diff --git a/packages/search-package/src/components/Search/Results.tsx b/packages/search-package/src/components/Search/Results.tsx
index c03d926b6b..5f7d1a9d4d 100644
--- a/packages/search-package/src/components/Search/Results.tsx
+++ b/packages/search-package/src/components/Search/Results.tsx
@@ -3,12 +3,12 @@ import styled from "styled-components";
 import { BreadcrumbLinkProps } from "../SmallViews/BreadcrumbLink";
 import ItemView from "../SmallViews/ItemView";
 
-const ItemsContainerDiv = styled.div<{sidebar?: boolean}>`
+const ItemsContainerDiv = styled.div<{sidebar: boolean}>`
   max-width: ${(props) => (props.sidebar ? "300px" : "1000px")};
   margin-top: var(--sq-spacing-large);
 `;
 
-const PrevNextDiv = styled.div<{ sidebar?: boolean }>`
+const PrevNextDiv = styled.div<{ sidebar: boolean }>`
   max-width: ${(props) => (props.sidebar ? "300px" : "1000px")};
   display: flex;
   flex-direction: row;
@@ -48,7 +48,7 @@ export interface ResultsProps {
   query: string;
   onGetBreadcrumbs: (link: string) => Array<BreadcrumbLinkProps>;
   onIsBlank: (str?: string) => boolean;
-  sidebar?: boolean;
+  sidebar: boolean;
 }
 
 // @ts-ignore
diff --git a/packages/search-package/src/components/Search/Search.stories.tsx b/packages/search-package/src/components/Search/Search.stories.tsx
index 3808dcbfa4..89419eb0a6 100644
--- a/packages/search-package/src/components/Search/Search.stories.tsx
+++ b/packages/search-package/src/components/Search/Search.stories.tsx
@@ -12,7 +12,8 @@ export const Default = () => {
   const defaultProps: SearchProps = {
     onGetBreadcrumbs: getBreadcrumb,
     onIsBlank: isBlank,
-    useSearch: useSearch()
+    useSearch: useSearch(),
+    sidebar: false
   }
 
   return <Search {...defaultProps}/>;
diff --git a/packages/search-package/src/components/Search/Search.tsx b/packages/search-package/src/components/Search/Search.tsx
index 9f15411523..1fb3d0639f 100644
--- a/packages/search-package/src/components/Search/Search.tsx
+++ b/packages/search-package/src/components/Search/Search.tsx
@@ -4,7 +4,7 @@ import { InputView, RadioView } from "@saasquatch/visual-dev";
 import { Results } from "./Results";
 import { BreadcrumbLinkProps } from "../SmallViews/BreadcrumbLink";
 
-const SearchContainerDiv = styled.div<{sidebar?: boolean}>`
+const SearchContainerDiv = styled.div<{sidebar: boolean}>`
   max-width: ${(props) => (props.sidebar ? "300px" : "1000px")};
 `;
 
@@ -38,7 +38,7 @@ export interface SearchProps {
   /**
    * If sidebar is true, it'll be mini and remove radio buttons
    */
-  sidebar?: boolean;
+  sidebar: boolean;
 }
 
 export default function Search(props: SearchProps) {

From a212e2f45decfa9f0e655bc6f9826e46a12614f3 Mon Sep 17 00:00:00 2001
From: Keegan Kavanagh <keegankavanagh@live.com>
Date: Tue, 30 Aug 2022 16:40:20 -0700
Subject: [PATCH 11/13] added styling

---
 packages/search-package/package.json          |  2 +-
 .../src/components/Search/Results.tsx         | 35 +++++++++++------
 .../src/components/Search/Search.tsx          | 39 ++++++++++++-------
 3 files changed, 50 insertions(+), 26 deletions(-)

diff --git a/packages/search-package/package.json b/packages/search-package/package.json
index ac37963344..89240c2334 100644
--- a/packages/search-package/package.json
+++ b/packages/search-package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saasquatch/squatch-search",
-  "version": "0.1.0-11",
+  "version": "0.1.0-13",
   "description": "SaaSquatch search",
   "main": "dist/index.js",
   "module": "dist/visual-dev.esm.js",
diff --git a/packages/search-package/src/components/Search/Results.tsx b/packages/search-package/src/components/Search/Results.tsx
index 5f7d1a9d4d..a74d8fb106 100644
--- a/packages/search-package/src/components/Search/Results.tsx
+++ b/packages/search-package/src/components/Search/Results.tsx
@@ -3,13 +3,24 @@ import styled from "styled-components";
 import { BreadcrumbLinkProps } from "../SmallViews/BreadcrumbLink";
 import ItemView from "../SmallViews/ItemView";
 
-const ItemsContainerDiv = styled.div<{sidebar: boolean}>`
-  max-width: ${(props) => (props.sidebar ? "300px" : "1000px")};
+const ItemsContainerDiv = styled.div<{sidebar: boolean, query: string}>`
+  max-width: ${(props) => (props.sidebar ? "470px" : "1000px")};
   margin-top: var(--sq-spacing-large);
+  min-height: ${(props) => (props.query && props.sidebar  && "20px")}; 
+  padding: ${(props) => (props.query && props.sidebar  && "19px;")};
+  margin-bottom: ${(props) => (props.query && props.sidebar  && "20px;")};
+  background-color: ${(props) => (props.query && props.sidebar  && "#f5f5f5;")};
+  border: ${(props) => (props.query && props.sidebar  && "1px solid #e3e3e3;")};
+  -webkit-border-radius: ${(props) => (props.query && props.sidebar  && "4px;")};
+  -moz-border-radius: ${(props) => (props.query && props.sidebar  && "4px;")};
+  border-radius: ${(props) => (props.query && props.sidebar  && "4px;")};
+  -webkit-box-shadow: ${(props) => (props.query && props.sidebar  && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
+  -moz-box-shadow: ${(props) => (props.query && props.sidebar  && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
+  box-shadow: ${(props) => (props.query && props.sidebar  && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
 `;
 
 const PrevNextDiv = styled.div<{ sidebar: boolean }>`
-  max-width: ${(props) => (props.sidebar ? "300px" : "1000px")};
+  max-width: ${(props) => (props.sidebar ? "470px" : "1000px")};
   display: flex;
   flex-direction: row;
   justify-content: ${(props) => (props.sidebar ? "right" : "center")};
@@ -56,9 +67,10 @@ export function Results(props: ResultsProps) {
   const { items, queries, searchInformation } = props.response;
   console.log(props.response);
 
+  console.log("query: ", props.query)
   return (
     <>
-      <ItemsContainerDiv sidebar={props.sidebar}>
+      <ItemsContainerDiv sidebar={props.sidebar} query={props.query}>
         {items &&
           items
             // @ts-ignore
@@ -73,9 +85,7 @@ export function Results(props: ResultsProps) {
                 />
               </ContainerA>
             ))}
-      </ItemsContainerDiv>
-
-      {items && (
+            {items && (
         <p>
           {searchInformation.totalResults} total results found in{" "}
           {searchInformation.formattedSearchTime} seconds
@@ -102,21 +112,22 @@ export function Results(props: ResultsProps) {
       </PrevNextDiv>
 
       {!props.sidebar && !items && props.onIsBlank(props.query) && (
-        <div className="search-results-none text-center">
-          <p className="lead">What are you looking for?</p>
+        <div>
+          <p>What are you looking for?</p>
         </div>
       )}
       {!items && !props.onIsBlank(props.query) && (
-        <div className="search-results-none text-center">
-          <h3 className="visible-desktop" style={{ paddingTop: "43px" }}>
+        <div>
+          <h3>
             No matching Docs!
           </h3>
-          <p className="lead">
+          <p>
             Looks like we couldn't find any Help Center page that matches your
             search term <strong>"{props.query}"</strong>
           </p>
         </div>
       )}
+      </ItemsContainerDiv>
     </>
   );
 }
diff --git a/packages/search-package/src/components/Search/Search.tsx b/packages/search-package/src/components/Search/Search.tsx
index 1fb3d0639f..2eddddbbd1 100644
--- a/packages/search-package/src/components/Search/Search.tsx
+++ b/packages/search-package/src/components/Search/Search.tsx
@@ -5,7 +5,7 @@ import { Results } from "./Results";
 import { BreadcrumbLinkProps } from "../SmallViews/BreadcrumbLink";
 
 const SearchContainerDiv = styled.div<{sidebar: boolean}>`
-  max-width: ${(props) => (props.sidebar ? "300px" : "1000px")};
+  max-width: ${(props) => (props.sidebar ? "470px" : "1000px")};
 `;
 
 const RadioContainerDiv = styled.div`
@@ -13,6 +13,21 @@ const RadioContainerDiv = styled.div`
   flex-direction: row;
 `;
 
+const WellDiv = styled.div<{sidebar: boolean}>`
+  min-height: ${(props) => (!props.sidebar && "20px")}; 
+  padding: ${(props) => (!props.sidebar && "19px;")};
+  text-align: center;
+  margin-bottom: ${(props) => (!props.sidebar && "20px;")};
+  background-color: ${(props) => (!props.sidebar && "#f5f5f5;")};
+  border: ${(props) => (!props.sidebar && "1px solid #e3e3e3;")};
+  -webkit-border-radius: ${(props) => (!props.sidebar && "4px;")};
+  -moz-border-radius: ${(props) => (!props.sidebar && "4px;")};
+  border-radius: ${(props) => (!props.sidebar && "4px;")};
+  -webkit-box-shadow: ${(props) => (!props.sidebar && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
+  -moz-box-shadow: ${(props) => (!props.sidebar && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
+  box-shadow: ${(props) => (!props.sidebar && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
+`
+
 export interface useSearchProps {
   response: any;
   query: string;
@@ -48,11 +63,10 @@ export default function Search(props: SearchProps) {
   console.log(props.sidebar);
   return (
     <>
-      <section className="page" id="js-docs-search-results">
-        <div className="well search-page">
-          <div className="row-fluid text-center">
-          {!props.sidebar &&<h3>Help Center Search</h3>}
-            <form className="js-search-form form-search" action="/search/">
+      <section>
+        <WellDiv sidebar={props.sidebar}>
+          {!props.sidebar && <h3>Help Center Search</h3>}
+            <form action="/search/">
               <SearchContainerDiv sidebar={props.sidebar}>
                 <InputView
                   customCSS={"margin-bottom: var(--sq-spacing-medium);"}
@@ -103,18 +117,17 @@ export default function Search(props: SearchProps) {
                 )}
               </SearchContainerDiv>
             </form>
-          </div>
-          <div className="row-fluid">
-            <div id="pretty-results" className="search-results">
+          <div>
+            <div>
               {!props.sidebar && !props.useSearch.response && (
-                <div className="text-center search-spinner">
+                <div>
                   <h3>Searching Help Center...</h3>
-                  <i className="fa fa-spinner fa-spin fa-5x"></i>
+                  <i></i>
                 </div>
               )}
               {/* @ts-ignore */}
               {props.useSearch.response && props.useSearch.response.error && (
-                <div className="text-center">
+                <div>
                   {/* @ts-ignore */}
                   <h3>{props.useSearch.response.error.message}</h3>
                 </div>
@@ -132,7 +145,7 @@ export default function Search(props: SearchProps) {
               )}
             </div>
           </div>
-        </div>
+        </WellDiv>
       </section>
     </>
   );

From 1e91c2f3311451f9316d9352ba99f14bb55218d4 Mon Sep 17 00:00:00 2001
From: Keegan Kavanagh <keegankavanagh@live.com>
Date: Wed, 31 Aug 2022 10:58:45 -0700
Subject: [PATCH 12/13] removed breadcrumb and added optional backgrounds

---
 packages/search-package/package.json          |  2 +-
 .../src/components/Search/Results.stories.tsx |  3 +-
 .../src/components/Search/Results.tsx         | 37 +++++++--------
 .../src/components/Search/Search.stories.tsx  | 28 +++++++++--
 .../src/components/Search/Search.tsx          | 46 +++++++++---------
 .../src/components/Search/SearchFunctions.ts  | 47 ++++++++++---------
 .../src/components/SmallViews/ItemView.tsx    | 16 +++----
 packages/search-package/src/index.ts          |  3 +-
 8 files changed, 100 insertions(+), 82 deletions(-)

diff --git a/packages/search-package/package.json b/packages/search-package/package.json
index 89240c2334..efeecb1cd0 100644
--- a/packages/search-package/package.json
+++ b/packages/search-package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saasquatch/squatch-search",
-  "version": "0.1.0-13",
+  "version": "0.1.0-14",
   "description": "SaaSquatch search",
   "main": "dist/index.js",
   "module": "dist/visual-dev.esm.js",
diff --git a/packages/search-package/src/components/Search/Results.stories.tsx b/packages/search-package/src/components/Search/Results.stories.tsx
index f61a445473..bc46997fa6 100644
--- a/packages/search-package/src/components/Search/Results.stories.tsx
+++ b/packages/search-package/src/components/Search/Results.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Results, ResultsProps } from "./Results";
-import { getBreadcrumb, isBlank } from "./SearchFunctions";
+import { isBlank } from "./SearchFunctions";
 
 export default {
   title: "Results",
@@ -55,7 +55,6 @@ const defaultProps: ResultsProps = {
   },
   setStartIndex: "",
   query: "test",
-  onGetBreadcrumbs: getBreadcrumb,
   onIsBlank: isBlank,
 };
 
diff --git a/packages/search-package/src/components/Search/Results.tsx b/packages/search-package/src/components/Search/Results.tsx
index a74d8fb106..f672583827 100644
--- a/packages/search-package/src/components/Search/Results.tsx
+++ b/packages/search-package/src/components/Search/Results.tsx
@@ -3,23 +3,23 @@ import styled from "styled-components";
 import { BreadcrumbLinkProps } from "../SmallViews/BreadcrumbLink";
 import ItemView from "../SmallViews/ItemView";
 
-const ItemsContainerDiv = styled.div<{sidebar: boolean, query: string}>`
+const ItemsContainerDiv = styled.div<{sidebar?: boolean, query: string, background?: boolean}>`
   max-width: ${(props) => (props.sidebar ? "470px" : "1000px")};
   margin-top: var(--sq-spacing-large);
-  min-height: ${(props) => (props.query && props.sidebar  && "20px")}; 
-  padding: ${(props) => (props.query && props.sidebar  && "19px;")};
-  margin-bottom: ${(props) => (props.query && props.sidebar  && "20px;")};
-  background-color: ${(props) => (props.query && props.sidebar  && "#f5f5f5;")};
-  border: ${(props) => (props.query && props.sidebar  && "1px solid #e3e3e3;")};
-  -webkit-border-radius: ${(props) => (props.query && props.sidebar  && "4px;")};
-  -moz-border-radius: ${(props) => (props.query && props.sidebar  && "4px;")};
-  border-radius: ${(props) => (props.query && props.sidebar  && "4px;")};
-  -webkit-box-shadow: ${(props) => (props.query && props.sidebar  && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
-  -moz-box-shadow: ${(props) => (props.query && props.sidebar  && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
-  box-shadow: ${(props) => (props.query && props.sidebar  && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
+  min-height: ${(props) => (props.background && props.query && props.sidebar  && "20px")}; 
+  padding: ${(props) => (props.background && props.query && props.sidebar  && "19px;")};
+  margin-bottom: ${(props) => (props.background && props.query && props.sidebar  && "20px;")};
+  background-color: ${(props) => (props.background && props.query && props.sidebar  && "#f5f5f5;")};
+  border: ${(props) => (props.background && props.query && props.sidebar  && "1px solid #e3e3e3;")};
+  -webkit-border-radius: ${(props) => (props.background && props.query && props.sidebar  && "4px;")};
+  -moz-border-radius: ${(props) => (props.background && props.query && props.sidebar  && "4px;")};
+  border-radius: ${(props) => (props.background && props.query && props.sidebar  && "4px;")};
+  -webkit-box-shadow: ${(props) => (props.background && props.query && props.sidebar  && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
+  -moz-box-shadow: ${(props) => (props.background && props.query && props.sidebar  && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
+  box-shadow: ${(props) => (props.background && props.query && props.sidebar  && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
 `;
 
-const PrevNextDiv = styled.div<{ sidebar: boolean }>`
+const PrevNextDiv = styled.div<{ sidebar?: boolean }>`
   max-width: ${(props) => (props.sidebar ? "470px" : "1000px")};
   display: flex;
   flex-direction: row;
@@ -57,20 +57,20 @@ export interface ResultsProps {
   response: any;
   setStartIndex: any;
   query: string;
-  onGetBreadcrumbs: (link: string) => Array<BreadcrumbLinkProps>;
   onIsBlank: (str?: string) => boolean;
-  sidebar: boolean;
+  sidebar?: boolean;
+  background?: boolean;
+  linkComponent?: React.ReactNode;
 }
 
 // @ts-ignore
 export function Results(props: ResultsProps) {
   const { items, queries, searchInformation } = props.response;
-  console.log(props.response);
+  const { background = true, linkComponent = ContainerA } = props;
 
-  console.log("query: ", props.query)
   return (
     <>
-      <ItemsContainerDiv sidebar={props.sidebar} query={props.query}>
+      <ItemsContainerDiv sidebar={props.sidebar} query={props.query} background={background}>
         {items &&
           items
             // @ts-ignore
@@ -81,7 +81,6 @@ export function Results(props: ResultsProps) {
               <ContainerA href={item.link}>
                 <ItemView
                   item={item}
-                  onGetBreadcrumbs={props.onGetBreadcrumbs}
                 />
               </ContainerA>
             ))}
diff --git a/packages/search-package/src/components/Search/Search.stories.tsx b/packages/search-package/src/components/Search/Search.stories.tsx
index 89419eb0a6..592e2174d8 100644
--- a/packages/search-package/src/components/Search/Search.stories.tsx
+++ b/packages/search-package/src/components/Search/Search.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import Search, { SearchProps } from "./Search";
-import { getBreadcrumb, isBlank } from './SearchFunctions'
+import { isBlank } from './SearchFunctions'
 import { useSearch } from "./UseSearch";
 
 export default {
@@ -10,10 +10,18 @@ export default {
 
 export const Default = () => {
   const defaultProps: SearchProps = {
-    onGetBreadcrumbs: getBreadcrumb,
     onIsBlank: isBlank,
     useSearch: useSearch(),
-    sidebar: false
+    background: true
+  }
+
+  return <Search {...defaultProps}/>;
+};
+
+export const NoBackground = () => {
+  const defaultProps: SearchProps = {
+    onIsBlank: isBlank,
+    useSearch: useSearch(),
   }
 
   return <Search {...defaultProps}/>;
@@ -21,10 +29,20 @@ export const Default = () => {
 
 export const MiniSearch = () => {
   const miniProps: SearchProps = {
-    onGetBreadcrumbs: getBreadcrumb,
     onIsBlank: isBlank,
     useSearch: useSearch(),
-    sidebar: true
+    sidebar: true,
+  }
+
+  return <Search {...miniProps}/>;
+};
+
+export const MiniSearchNoBackground = () => {
+  const miniProps: SearchProps = {
+    onIsBlank: isBlank,
+    useSearch: useSearch(),
+    sidebar: true,
+    background: false
   }
 
   return <Search {...miniProps}/>;
diff --git a/packages/search-package/src/components/Search/Search.tsx b/packages/search-package/src/components/Search/Search.tsx
index 2eddddbbd1..a10c5bf5ef 100644
--- a/packages/search-package/src/components/Search/Search.tsx
+++ b/packages/search-package/src/components/Search/Search.tsx
@@ -2,9 +2,8 @@ import React from "react";
 import styled from "styled-components";
 import { InputView, RadioView } from "@saasquatch/visual-dev";
 import { Results } from "./Results";
-import { BreadcrumbLinkProps } from "../SmallViews/BreadcrumbLink";
 
-const SearchContainerDiv = styled.div<{sidebar: boolean}>`
+const SearchContainerDiv = styled.div<{sidebar?: boolean}>`
   max-width: ${(props) => (props.sidebar ? "470px" : "1000px")};
 `;
 
@@ -13,19 +12,19 @@ const RadioContainerDiv = styled.div`
   flex-direction: row;
 `;
 
-const WellDiv = styled.div<{sidebar: boolean}>`
-  min-height: ${(props) => (!props.sidebar && "20px")}; 
-  padding: ${(props) => (!props.sidebar && "19px;")};
+const WellDiv = styled.div<{sidebar?: boolean, background?: boolean}>`
+  min-height: ${(props) => (props.background && !props.sidebar && "20px")}; 
+  padding: ${(props) => (props.background && !props.sidebar && "19px;")};
   text-align: center;
-  margin-bottom: ${(props) => (!props.sidebar && "20px;")};
-  background-color: ${(props) => (!props.sidebar && "#f5f5f5;")};
-  border: ${(props) => (!props.sidebar && "1px solid #e3e3e3;")};
-  -webkit-border-radius: ${(props) => (!props.sidebar && "4px;")};
-  -moz-border-radius: ${(props) => (!props.sidebar && "4px;")};
-  border-radius: ${(props) => (!props.sidebar && "4px;")};
-  -webkit-box-shadow: ${(props) => (!props.sidebar && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
-  -moz-box-shadow: ${(props) => (!props.sidebar && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
-  box-shadow: ${(props) => (!props.sidebar && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
+  margin-bottom: ${(props) => (props.background && !props.sidebar && "20px;")};
+  background-color: ${(props) => (props.background && !props.sidebar && "#f5f5f5;")};
+  border: ${(props) => (props.background && !props.sidebar && "1px solid #e3e3e3;")};
+  -webkit-border-radius: ${(props) => (props.background && !props.sidebar && "4px;")};
+  -moz-border-radius: ${(props) => (props.background && !props.sidebar && "4px;")};
+  border-radius: ${(props) => (props.background && !props.sidebar && "4px;")};
+  -webkit-box-shadow: ${(props) => (props.background && !props.sidebar && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
+  -moz-box-shadow: ${(props) => (props.background && !props.sidebar && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
+  box-shadow: ${(props) => (props.background && !props.sidebar && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
 `
 
 export interface useSearchProps {
@@ -38,10 +37,6 @@ export interface useSearchProps {
 }
 
 export interface SearchProps {
-  /**
-   * Pass in getBreadcrum function, or a function to create a breadcrumb changed
-   */
-  onGetBreadcrumbs: (link: string) => Array<BreadcrumbLinkProps>;
   /**
    * Pass in isBlank function to check if query is blank
    */
@@ -53,7 +48,15 @@ export interface SearchProps {
   /**
    * If sidebar is true, it'll be mini and remove radio buttons
    */
-  sidebar: boolean;
+  sidebar?: boolean;
+  /**
+   * If this is true, the search will have a greyish background container - defaulted to true for sidebar
+   */
+  background?: boolean;
+  /**
+   * 
+   */
+  linkComponent?: React.ReactNode;
 }
 
 export default function Search(props: SearchProps) {
@@ -64,7 +67,7 @@ export default function Search(props: SearchProps) {
   return (
     <>
       <section>
-        <WellDiv sidebar={props.sidebar}>
+        <WellDiv sidebar={props.sidebar} background={props.background}>
           {!props.sidebar && <h3>Help Center Search</h3>}
             <form action="/search/">
               <SearchContainerDiv sidebar={props.sidebar}>
@@ -138,9 +141,10 @@ export default function Search(props: SearchProps) {
                   response={props.useSearch.response}
                   setStartIndex={props.useSearch.setStartIndex}
                   query={props.useSearch.query}
-                  onGetBreadcrumbs={props.onGetBreadcrumbs}
                   onIsBlank={props.onIsBlank}
                   sidebar={props.sidebar}
+                  background={props.background}
+                  linkComponent={props.linkComponent}
                 />
               )}
             </div>
diff --git a/packages/search-package/src/components/Search/SearchFunctions.ts b/packages/search-package/src/components/Search/SearchFunctions.ts
index 8c13674355..9229ff8c78 100644
--- a/packages/search-package/src/components/Search/SearchFunctions.ts
+++ b/packages/search-package/src/components/Search/SearchFunctions.ts
@@ -1,29 +1,30 @@
-import { BreadcrumbLinkProps } from "../SmallViews/BreadcrumbLink";
+// import { BreadcrumbLinkProps } from "../SmallViews/BreadcrumbLink";
 
 export function isBlank(str?: string) {
   return !str || /^\s*$/.test(str);
 }
 
-export const getfullPath = (pathArray: Array<string>, index: number) => {
-  let fullPath: string = "";
-  for (let i = 0; i < index; i++) {
-    fullPath = fullPath + pathArray[i] + "/";
-  }
-  return fullPath;
-};
+//Logan didn't want it - had non-existant saasquatch links
+// export const getfullPath = (pathArray: Array<string>, index: number) => {
+//   let fullPath: string = "";
+//   for (let i = 0; i < index; i++) {
+//     fullPath = fullPath + pathArray[i] + "/";
+//   }
+//   return fullPath;
+// };
 
-export const getBreadcrumb = (link: string) => {
-  const fullPath: string = new URL(link).pathname;
-  const noStartEndSlashes: string = fullPath.slice(1, -1);
-  const pathArray: Array<string> = noStartEndSlashes.split("/");
-  const pathObjectsArray: Array<BreadcrumbLinkProps> = [];
-  for (let i = 0; i < pathArray.length; i++) {
-    const tempPathObject = {
-      link: "https://docs.saasquatch.com/" + getfullPath(pathArray, i + 1),
-      linkName:
-        i + 1 === pathArray.length ? pathArray[i] : pathArray[i] + " > ",
-    };
-    pathObjectsArray.push(tempPathObject);
-  }
-  return pathObjectsArray;
-};
+// export const getBreadcrumb = (link: string) => {
+//   const fullPath: string = new URL(link).pathname;
+//   const noStartEndSlashes: string = fullPath.slice(1, -1);
+//   const pathArray: Array<string> = noStartEndSlashes.split("/");
+//   const pathObjectsArray: Array<BreadcrumbLinkProps> = [];
+//   for (let i = 0; i < pathArray.length; i++) {
+//     const tempPathObject = {
+//       link: "https://docs.saasquatch.com/" + getfullPath(pathArray, i + 1),
+//       linkName:
+//         i + 1 === pathArray.length ? pathArray[i] : pathArray[i] + " > ",
+//     };
+//     pathObjectsArray.push(tempPathObject);
+//   }
+//   return pathObjectsArray;
+// };
diff --git a/packages/search-package/src/components/SmallViews/ItemView.tsx b/packages/search-package/src/components/SmallViews/ItemView.tsx
index f443d3bb66..3abc2a4259 100644
--- a/packages/search-package/src/components/SmallViews/ItemView.tsx
+++ b/packages/search-package/src/components/SmallViews/ItemView.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "styled-components";
-import BreadcrumbLink, { BreadcrumbLinkProps } from "./BreadcrumbLink";
 
 export interface ItemViewProps {
   item: {
@@ -15,7 +14,6 @@ export interface ItemViewProps {
     snippet: string;
     title: string;
   };
-  onGetBreadcrumbs: (link: string) => Array<BreadcrumbLinkProps>;
 }
 
 const ItemContainerDiv = styled.div`
@@ -43,11 +41,11 @@ const DescriptionDiv = styled.div`
   color: var(--sq-text);
 `;
 
-const BreadcrumbContainerDiv = styled.div`
-  display: row;
-  flex-direction: column;
-  margin-bottom: var(--sq-spacing-small);
-`;
+// const BreadcrumbContainerDiv = styled.div`
+//   display: row;
+//   flex-direction: column;
+//   margin-bottom: var(--sq-spacing-small);
+// `;
 
 const ItemView = (props: ItemViewProps) => {
   return (
@@ -57,11 +55,11 @@ const ItemView = (props: ItemViewProps) => {
           __html: props.item.htmlTitle,
         }}
       ></TitleDiv>
-      <BreadcrumbContainerDiv>
+      {/* <BreadcrumbContainerDiv>
         {props.onGetBreadcrumbs(props.item.link).map((item) => {
           return <BreadcrumbLink {...item} />;
         })}
-      </BreadcrumbContainerDiv>
+      </BreadcrumbContainerDiv> */}
       <DescriptionDiv
         dangerouslySetInnerHTML={{
           __html: props.item.htmlSnippet,
diff --git a/packages/search-package/src/index.ts b/packages/search-package/src/index.ts
index e14d44123f..4d5a44a867 100644
--- a/packages/search-package/src/index.ts
+++ b/packages/search-package/src/index.ts
@@ -1,11 +1,10 @@
 import Search, { SearchProps } from './components/Search/Search';
-import { getBreadcrumb, isBlank } from './components/Search/SearchFunctions';
+import { isBlank } from './components/Search/SearchFunctions';
 import { useSearch } from './components/Search/UseSearch';
 /// <reference types="styled-components/cssprop" />
 
 export {
   Search,
-  getBreadcrumb,
   isBlank,
   useSearch,
   SearchProps

From 5b5afe275458d3c5fabd72e4e8368cf752f3c6c9 Mon Sep 17 00:00:00 2001
From: Keegan Kavanagh <keegankavanagh@live.com>
Date: Wed, 31 Aug 2022 11:11:13 -0700
Subject: [PATCH 13/13] centered everything

---
 packages/search-package/package.json                      | 2 +-
 packages/search-package/src/components/Search/Results.tsx | 3 +--
 packages/search-package/src/components/Search/Search.tsx  | 3 +++
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/search-package/package.json b/packages/search-package/package.json
index efeecb1cd0..277f750acb 100644
--- a/packages/search-package/package.json
+++ b/packages/search-package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saasquatch/squatch-search",
-  "version": "0.1.0-14",
+  "version": "0.1.0-16",
   "description": "SaaSquatch search",
   "main": "dist/index.js",
   "module": "dist/visual-dev.esm.js",
diff --git a/packages/search-package/src/components/Search/Results.tsx b/packages/search-package/src/components/Search/Results.tsx
index f672583827..9c5adde0b4 100644
--- a/packages/search-package/src/components/Search/Results.tsx
+++ b/packages/search-package/src/components/Search/Results.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "styled-components";
-import { BreadcrumbLinkProps } from "../SmallViews/BreadcrumbLink";
 import ItemView from "../SmallViews/ItemView";
 
 const ItemsContainerDiv = styled.div<{sidebar?: boolean, query: string, background?: boolean}>`
@@ -66,7 +65,7 @@ export interface ResultsProps {
 // @ts-ignore
 export function Results(props: ResultsProps) {
   const { items, queries, searchInformation } = props.response;
-  const { background = true, linkComponent = ContainerA } = props;
+  const { background = true } = props;
 
   return (
     <>
diff --git a/packages/search-package/src/components/Search/Search.tsx b/packages/search-package/src/components/Search/Search.tsx
index a10c5bf5ef..a0f6953f47 100644
--- a/packages/search-package/src/components/Search/Search.tsx
+++ b/packages/search-package/src/components/Search/Search.tsx
@@ -5,6 +5,9 @@ import { Results } from "./Results";
 
 const SearchContainerDiv = styled.div<{sidebar?: boolean}>`
   max-width: ${(props) => (props.sidebar ? "470px" : "1000px")};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 `;
 
 const RadioContainerDiv = styled.div`