feat: add new search bar (resolves #117) (#144)

* feat: move search component into molecules
* feat: adjust search input style
* feat: rename inverse variant
* feat: implement states
* fix: align with WordPress search form pattern
* fix: icon alignment
* fix: align focus state with text inputs

src/assets/styles/components/_buttons.scss

@@ -48,6 +48,7 @@
 [type="submit"]:focus {
 	background: $blue-700;
 	box-shadow: 0 0 0 rem(2) $white, 0 0 0 rem(4) $blue-700;
+	color: $white;
 	outline: none;
 }
 

src/assets/styles/components/_forms.scss

@@ -55,15 +55,6 @@ input[type="radio"] {
 	cursor: default;
 }
 
-input[type="search"] {
-	background-image: url("../images/search.svg");
-	background-position: rem(12) center;
-	background-repeat: no-repeat;
-	background-size: 1.25em;
-	padding-left: rem(40);
-	position: relative;
-}
-
 textarea {
 	height: rem(118);
 	max-width: rem(367);
@@ -325,21 +316,6 @@ input[type="checkbox"]:checked:focus + label::before,
 	box-shadow: 0 0 0 rem(2) $blue-300 inset;
 }
 
-input[type="search"]::-webkit-search-cancel-button {
-	-webkit-appearance: none;
-	background: $grey-300;
-	background-image: url("../images/close.svg");
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: rem(12.5) rem(12.5);
-	border-radius: 50%;
-	height: rem(24);
-	position: absolute;
-	right: rem(10);
-	top: rem(7);
-	width: rem(24);
-}
-
 .input-group__description {
 	font-size: rem(14);
 	font-style: italic;

src/assets/styles/components/_search.scss

@@ -0,0 +1,101 @@
+.search-form {
+	display: flex;
+	flex-direction: row;
+
+	[type="search"] {
+		background-color: $blue-50;
+		border-bottom-right-radius: 0;
+		border-color: transparent;
+		border-right-width: 0;
+		border-top-right-radius: 0;
+		font-family: $font-family-sans;
+		height: rem(50);
+
+		&:hover {
+			border-color: $blue-500;
+		}
+
+		&:focus {
+			box-shadow: 0 0 0 rem(1) $blue-500 inset;
+		}
+	}
+
+	[type="submit"] {
+		border-bottom-left-radius: 0;
+		border-top-left-radius: 0;
+		border-width: rem(2);
+		height: rem(50);
+		margin-left: 0;
+		position: relative;
+		width: rem(50);
+
+		.icon {
+			margin-left: 0;
+		}
+
+		&:focus {
+			border-bottom-left-radius: rem(3);
+			border-top-left-radius: rem(3);
+			box-shadow: 0 0 0 rem(2) $white inset;
+
+			&::before {
+				border-bottom: solid rem(2) $blue-700;
+				border-left: solid rem(2) $blue-700;
+				border-top: solid rem(2) $blue-700;
+				content: "";
+				display: block;
+				height: rem(46);
+				left: rem(-2);
+				position: absolute;
+				top: rem(-2);
+				width: rem(3);
+			}
+		}
+	}
+}
+
+.search-form.search-form--inverse {
+	[type="search"] {
+		background-color: $off-white;
+		border-right-color: $grey-300;
+		border-right-width: rem(1);
+
+		&:hover {
+			border-color: $blue-300;
+		}
+
+		&:focus {
+			border-color: $blue-300;
+			border-right-color: $blue-300;
+			box-shadow: 0 0 0 rem(1) $blue-300 inset;
+		}
+	}
+
+	[type="submit"] {
+		background-color: $blue-50;
+		border-bottom: solid rem(1) $grey-300;
+		border-left: 0;
+		border-right: solid rem(1) $grey-300;
+		border-top: solid rem(1) $grey-300;
+		color: $blue-500;
+		padding-left: rem(4);
+
+		&:hover {
+			background-color: $blue-50;
+			color: $blue-600;
+		}
+
+		&:focus {
+			background-color: $blue-50;
+			border-color: $blue-50;
+			box-shadow: 0 0 0 rem(1) $blue-50 inset, 0 0 0 rem(3) $blue-600 inset;
+
+			&::before {
+				border-bottom: solid rem(2) $blue-50;
+				border-left: solid rem(2) $blue-50;
+				border-top: solid rem(2) $blue-50;
+				top: rem(-1);
+			}
+		}
+	}
+}

src/assets/styles/pinecone.scss

@@ -29,7 +29,8 @@
 @import "components/card";
 @import "components/menu";
 @import "components/menu--home";
-@import "components/menu-button.scss";
+@import "components/menu-button";
+@import "components/search";
 @import "layouts/header";
 @import "layouts/page";
 @import "layouts/archive";

src/components/02-molecules/07-search/search.config.js

@@ -5,14 +5,16 @@ module.exports = {
 		standAlone: false,
 		name: 's',
 		placeholder: 'Search…',
-		label: 'Search'
+		label: 'search',
+		submitLabel: 'submit search'
 	},
 	variants: [
 		{
-			name: 'Default (Light on Dark)',
-			label: 'Default (Light on Dark)',
+			name: 'Inverse',
+			label: 'Inverse',
 			context: {
-				bodyClass: 'has-dark-mint-500-background-color'
+				modifier: 'inverse',
+				bodyClass: 'has-blue-700-background-color'
 			}
 		}
 	]

src/components/02-molecules/07-search/search.njk

@@ -1,6 +1,8 @@
 {% if not standAlone %}<div class="spacer"></div>{% endif %}
-<form class="search-input">
-	<label for="{{ name }}" class="screen-reader-text">{{ label }}</label>
-	<input id="{{ name }}" name="{{ name }}" placeholder="{{ placeholder }}" type="search"{% if disabled %} disabled{% endif %} />
-	<button type="submit"{% if disabled %} disabled{% endif %}><span class="screen-reader-text">{{ submitLabel }}</span>{% render '@svg', {svg: 'search'}, true %}</button>
+<form role="search" method="get" class="search-form{% if modifier %} search-form--{{ modifier }}{% endif %}" action="/">
+	<label>
+		<span class="screen-reader-text">{{ label }}</span>
+		<input id="{{ name }}" name="{{ name }}" placeholder="{{ placeholder }}" type="search"{% if disabled %} disabled{% endif %} />
+	</label>
+	<button type="submit" class="search-submit"><span class="screen-reader-text">{{ submitLabel }}</span>{% render '@svg', {svg: 'search'}, true %}</button>
 </form>