Skip to content

Commit 047a611

Browse files
w3bdesignw3bdesign
committed
Add conditional border on focus on search box
Also add input form for billing
1 parent 6bf7d7b commit 047a611

File tree

3 files changed

+243
-6
lines changed

3 files changed

+243
-6
lines changed

‎components/Checkout/Billing.component.jsx

Lines changed: 222 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ const Billing = ({ input, handleOnChange }) => {
1919
value={input.firstName}
2020
type="text"
2121
name="firstName"
22-
className="form-control woo-next-checkout-input"
2322
id="first-name"
2423
/>
2524
<Error errors={input.errors} fieldName={'firstName'} />
@@ -210,12 +209,231 @@ const Billing = ({ input, handleOnChange }) => {
210209

211210
<br />
212211

213-
{ // https://tailwindcss.com/components/forms/#
212+
{
213+
// https://tailwindcss.com/components/forms/#
214214
}
215215

216-
216+
<section className="relative text-gray-700 body-font">
217+
<div className="container px-5 py-24 mx-auto">
218+
<div className="flex flex-col w-full mb-12 text-center">
219+
<h1 className="mb-4 text-2xl font-medium text-gray-900 sm:text-3xl title-font">
220+
Betalingsdetaljer
221+
</h1>
222+
</div>
223+
<div className="mx-auto lg:w-1/2 md:w-2/3">
224+
<div className="flex flex-wrap -m-2">
225+
<div className="w-1/2 p-2">
226+
<input
227+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
228+
placeholder="Fornavn"
229+
type="text"
230+
onChange={handleOnChange}
231+
value={input.firstName}
232+
name="firstName"
233+
id="first-name"
234+
/>
235+
<Error errors={input.errors} fieldName={'firstName'} />
236+
</div>
237+
<div className="w-1/2 p-2">
238+
<input
239+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
240+
placeholder="Etternavn"
241+
type="text"
242+
onChange={handleOnChange}
243+
value={input.lastName}
244+
name="lastName"
245+
id="last-name"
246+
/>
247+
<Error errors={input.errors} fieldName={'lastName'} />
248+
</div>
249+
<div className="w-1/2 p-2">
250+
<input
251+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
252+
placeholder="Firmanavn"
253+
type="text"
254+
onChange={handleOnChange}
255+
value={input.firstName}
256+
name="company"
257+
id="company"
258+
/>
259+
<Error errors={input.errors} fieldName={'company'} />
260+
</div>
261+
<div className="w-1/2 p-2">
262+
<input
263+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
264+
placeholder="Addresse"
265+
type="text"
266+
onChange={handleOnChange}
267+
value={input.firstName}
268+
name="address1"
269+
id="address1"
270+
/>
271+
<Error errors={input.errors} fieldName={'address1'} />
272+
</div>
273+
274+
<div className="w-1/2 p-2">
275+
<select
276+
onChange={handleOnChange}
277+
value={input.country}
278+
name="country"
279+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
280+
id="country-select"
281+
>
282+
<option value="">Velg ditt land ...</option>
283+
{countryList.length &&
284+
countryList.map((country, index) => (
285+
<option
286+
key={`${country}-${index}`}
287+
value={country.countryCode}
288+
>
289+
{country.countryName}
290+
</option>
291+
))}
292+
</select>
293+
<Error errors={input.errors} fieldName={'country'} />
294+
</div>
295+
296+
<div className="w-1/2 p-2">
297+
<input
298+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
299+
placeholder="Addresse"
300+
type="text"
301+
onChange={handleOnChange}
302+
value={input.firstName}
303+
name="address1"
304+
id="address1"
305+
/>
306+
<Error errors={input.errors} fieldName={'address1'} />
307+
</div>
308+
309+
<div className="w-1/2 p-2">
310+
<input
311+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
312+
placeholder="Addresse"
313+
type="text"
314+
onChange={handleOnChange}
315+
value={input.firstName}
316+
name="address1"
317+
id="address1"
318+
/>
319+
<Error errors={input.errors} fieldName={'address1'} />
320+
</div>
217321

218-
322+
<div className="w-1/2 p-2">
323+
<input
324+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
325+
placeholder="Addresse"
326+
type="text"
327+
onChange={handleOnChange}
328+
value={input.firstName}
329+
name="address1"
330+
id="address1"
331+
/>
332+
<Error errors={input.errors} fieldName={'address1'} />
333+
</div>
334+
335+
<div className="w-1/2 p-2">
336+
<input
337+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
338+
placeholder="Addresse"
339+
type="text"
340+
onChange={handleOnChange}
341+
value={input.firstName}
342+
name="address1"
343+
id="address1"
344+
/>
345+
<Error errors={input.errors} fieldName={'address1'} />
346+
</div>
347+
348+
<div className="w-1/2 p-2">
349+
<input
350+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
351+
placeholder="Addresse"
352+
type="text"
353+
onChange={handleOnChange}
354+
value={input.firstName}
355+
name="address1"
356+
id="address1"
357+
/>
358+
<Error errors={input.errors} fieldName={'address1'} />
359+
</div>
360+
361+
<div className="w-full p-2">
362+
<button className="flex px-8 py-2 mx-auto text-lg text-white bg-indigo-500 border-0 rounded focus:outline-none hover:bg-indigo-600">
363+
Button
364+
</button>
365+
</div>
366+
<div className="w-full p-2 pt-8 mt-8 text-center border-t border-gray-200">
367+
<a className="text-indigo-500">[email protected]</a>
368+
<p className="my-5 leading-normal">
369+
49 Smith St.
370+
<br />
371+
Saint Cloud, MN 56301
372+
</p>
373+
<span className="inline-flex">
374+
<a className="text-gray-500">
375+
<svg
376+
fill="currentColor"
377+
stroke-linecap="round"
378+
stroke-linejoin="round"
379+
stroke-width="2"
380+
className="w-5 h-5"
381+
viewBox="0 0 24 24"
382+
>
383+
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
384+
</svg>
385+
</a>
386+
<a className="ml-4 text-gray-500">
387+
<svg
388+
fill="currentColor"
389+
stroke-linecap="round"
390+
stroke-linejoin="round"
391+
stroke-width="2"
392+
className="w-5 h-5"
393+
viewBox="0 0 24 24"
394+
>
395+
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
396+
</svg>
397+
</a>
398+
<a className="ml-4 text-gray-500">
399+
<svg
400+
fill="none"
401+
stroke="currentColor"
402+
stroke-linecap="round"
403+
stroke-linejoin="round"
404+
stroke-width="2"
405+
className="w-5 h-5"
406+
viewBox="0 0 24 24"
407+
>
408+
<rect
409+
width="20"
410+
height="20"
411+
x="2"
412+
y="2"
413+
rx="5"
414+
ry="5"
415+
></rect>
416+
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
417+
</svg>
418+
</a>
419+
<a className="ml-4 text-gray-500">
420+
<svg
421+
fill="currentColor"
422+
stroke-linecap="round"
423+
stroke-linejoin="round"
424+
stroke-width="2"
425+
className="w-5 h-5"
426+
viewBox="0 0 24 24"
427+
>
428+
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
429+
</svg>
430+
</a>
431+
</span>
432+
</div>
433+
</div>
434+
</div>
435+
</div>
436+
</section>
219437
</>
220438
);
221439
};

‎components/Search/AlgoliaSearchBox.component.jsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const searchClient = algoliasearch(
1717
*/
1818
const AlgoliaSearchBox = () => {
1919
const [search, setSearch] = useState(null);
20+
const [hasFocus, sethasFocus] = useState(false);
2021

2122
return (
2223
<>
@@ -26,13 +27,22 @@ const AlgoliaSearchBox = () => {
2627
indexName="wp_posts_product"
2728
searchClient={searchClient}
2829
>
30+
{/*We need to conditionally add a border because the element has position:fixed*/}
2931
<SearchBox
3032
translations={{
3133
submitTitle: 'Søk',
3234
resetTitle: 'Slett søketekst',
3335
placeholder: 'Søk her ...',
3436
}}
35-
className="px-6 py-2 bg-white border border-gray-500 rounded-lg focus:outline-none focus:shadow-outline"
37+
className={`px-4 py-2 text-base bg-gray-100 border outline-none rounded ${
38+
hasFocus ? 'border-black' : 'border-gray-400'
39+
}`}
40+
onFocus={() => {
41+
sethasFocus(true);
42+
}}
43+
onBlur={() => {
44+
sethasFocus(false);
45+
}}
3646
onReset={() => {
3747
setSearch(null);
3848
}}

‎components/Search/MobileSearch.component.jsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const searchClient = algoliasearch(
1515
*/
1616
const MobileSearch = () => {
1717
const [search, setSearch] = useState(null);
18+
const [hasFocus, sethasFocus] = useState(false);
1819
return (
1920
<>
2021
<div className="inline mt-4">
@@ -25,7 +26,15 @@ const MobileSearch = () => {
2526
resetTitle: 'Slett søketekst',
2627
placeholder: 'Søk her ...',
2728
}}
28-
className="px-6 py-2 bg-white border border-gray-500 rounded-lg focus:outline-none focus:shadow-outline"
29+
className={`px-4 py-2 text-base bg-gray-100 border outline-none rounded ${
30+
hasFocus ? 'border-black' : 'border-gray-400'
31+
}`}
32+
onFocus={() => {
33+
sethasFocus(true);
34+
}}
35+
onBlur={() => {
36+
sethasFocus(false);
37+
}}
2938
onReset={() => {
3039
setSearch(null);
3140
}}

0 commit comments

Comments
 (0)