From 2059f0a6760a1849921375900f50a584f2fd86e6 Mon Sep 17 00:00:00 2001
From: Vladyslav Zubko <42296182+what1s1ove@users.noreply.github.com>
Date: Tue, 18 Jun 2024 17:48:11 +0300
Subject: [PATCH] feat(whatislove-dev): add search html element to index page
 wd-275 (#653)

* style(careers-whatislove-dev): edit lit eslint plugin style in config wd-275

* feat(whatislove-dev): add search html element to index page wd-275
---
 apps/careers-whatislove-dev/eslint.config.js  |  2 +-
 apps/whatislove-dev/.w3c-validator            |  1 +
 apps/whatislove-dev/src/pages/index/index.njk | 65 ++++++++++---------
 3 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/apps/careers-whatislove-dev/eslint.config.js b/apps/careers-whatislove-dev/eslint.config.js
index dc3498ca..7875bfe6 100644
--- a/apps/careers-whatislove-dev/eslint.config.js
+++ b/apps/careers-whatislove-dev/eslint.config.js
@@ -17,7 +17,7 @@ let ignoresConfig = {
 /** @type {FlatConfig} */
 let litConfig = {
 	plugins: {
-		lit: lit,
+		lit,
 	},
 	rules: /** @type {RulesRecord} */ (lit.configs.all.rules),
 }
diff --git a/apps/whatislove-dev/.w3c-validator b/apps/whatislove-dev/.w3c-validator
index 062c8b53..fcde208a 100644
--- a/apps/whatislove-dev/.w3c-validator
+++ b/apps/whatislove-dev/.w3c-validator
@@ -1 +1,2 @@
 /When the “srcset” attribute has any image candidate string with a width descriptor, the “sizes” attribute must also be specified./
+/Element “search” not allowed as child of element “section” in this context./
diff --git a/apps/whatislove-dev/src/pages/index/index.njk b/apps/whatislove-dev/src/pages/index/index.njk
index 5e6a28ff..ec326921 100644
--- a/apps/whatislove-dev/src/pages/index/index.njk
+++ b/apps/whatislove-dev/src/pages/index/index.njk
@@ -74,35 +74,42 @@ stickersCount: 0
 	<div class="main__row main__row--experience-stickers box">
 		<section class="experience">
 			<h2 class="experience__title">Experience</h2>
-			<form class="experience__form" action="/timeline">
-				<label class="experience__form-label">
-					<input
-						class="experience__form-control visually-hidden"
-						type="radio"
-						name="type"
-						value="position"
-						checked
-					/>
-					Positions
-				</label>
-				<label class="experience__form-label">
-					<input
-						class="experience__form-control visually-hidden"
-						type="radio"
-						name="type"
-						value="certificate"
-					/>
-					Certificates
-				</label>
-				<label class="experience__form-label">
-					<input class="experience__form-control visually-hidden" type="radio" name="type" value="meetup" />
-					Meetups
-				</label>
-				<label class="experience__form-label">
-					<input class="experience__form-control visually-hidden" type="radio" name="type" value="book" />
-					Book
-				</label>
-			</form>
+			<search class="experience__form-wrapper">
+				<form class="experience__form" action="/timeline">
+					<label class="experience__form-label">
+						<input
+							class="experience__form-control visually-hidden"
+							type="radio"
+							name="type"
+							value="position"
+							checked
+						/>
+						Positions
+					</label>
+					<label class="experience__form-label">
+						<input
+							class="experience__form-control visually-hidden"
+							type="radio"
+							name="type"
+							value="certificate"
+						/>
+						Certificates
+					</label>
+					<label class="experience__form-label">
+						<input
+							class="experience__form-control visually-hidden"
+							type="radio"
+							name="type"
+							value="meetup"
+						/>
+						Meetups
+					</label>
+					<label class="experience__form-label">
+						<input class="experience__form-control visually-hidden" type="radio" name="type" value="book" />
+						Book
+					</label>
+				</form>
+			</search>
 			<div class="experience__timeline-wrapper scroll-shadows">
 				<ul class="experience__timeline-list timeline timeline--loading timeline--columns"></ul>
 			</div>