feat: add search variant for home page (resolve #162) (#164)

* feat: add search variant for home page (resolve #162)
* fix: add placeholder to home search
* fix: remove opacity
* fix: input border

src/assets/styles/components/_search.scss

@@ -65,6 +65,10 @@
 		border-right-color: $grey-300;
 		border-right-width: rem(1);
 
+		&::placeholder {
+			color: transparent;
+		}
+
 		&:hover {
 			border-color: $blue-300;
 		}
@@ -104,3 +108,48 @@
 		}
 	}
 }
+
+.home .search-form.search-form--inverse {
+	[type="search"] {
+		box-shadow: 0 rem(3) rem(6) rgba(0, 0, 0, 0.16);
+	}
+
+	@include breakpoint-up(sm) {
+		[type="search"] {
+			height: rem(60);
+
+			&:focus {
+				box-shadow: 0 0 0 rem(2) $blue-300 inset;
+			}
+
+			&::placeholder {
+				color: $grey-500;
+				opacity: 1;
+			}
+		}
+
+		[type="submit"] {
+			height: rem(60);
+			width: rem(60);
+
+			&::before {
+				height: rem(56);
+			}
+		}
+	}
+
+	@include breakpoint-up(lg) {
+		[type="search"] {
+			height: rem(70);
+		}
+
+		[type="submit"] {
+			height: rem(70);
+			width: rem(70);
+
+			&::before {
+				height: rem(66);
+			}
+		}
+	}
+}

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

@@ -15,6 +15,15 @@ module.exports = {
 				modifier: 'inverse',
 				bodyClass: 'has-blue-700-background-color'
 			}
+		},
+		{
+			name: 'Home',
+			label: 'Home',
+			context: {
+				modifier: 'inverse',
+				placeholder: 'Search resource name, publisher, or topic…',
+				bodyClass: 'has-blue-400-background-color home'
+			}
 		}
 	]
 };

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

@@ -2,7 +2,7 @@
 <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 }}" type="search"{% if disabled %} disabled{% endif %} />
+		<input id="{{ name }}" name="{{ name }}" {% if placeholder %}placeholder="{{ placeholder }}" {% endif %} 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>