Skip to content

Commit 3058b0c

Browse files
gioboagioboa
committed
Revert "replace Link with a"
This reverts commit 4a4369f.
1 parent 7071f31 commit 3058b0c

File tree

9 files changed

+83
-72
lines changed

9 files changed

+83
-72
lines changed

‎src/components/CartIcon/CartIcon.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { component$, useComputed$, useContext } from '@builder.io/qwik';
2+
import { Link } from '@builder.io/qwik-city';
23
import { STORE_CONTEXT } from '~/shared/constants';
34
import { getCartQuantity } from '~/store/selectors';
45

@@ -7,7 +8,7 @@ export const CartIcon = component$(() => {
78
const cartQuantitySig = useComputed$(() => getCartQuantity(store.cart));
89
return (
910
<nav class='flex flex-row flex-nowrap ml-auto'>
10-
<a
11+
<Link
1112
class='inline-flex items-center justify-center font-medium text-base focus-visible:outline focus-visible:outline-offset rounded-md disabled:text-disabled-500 disabled:bg-disabled-300 disabled:shadow-none disabled:ring-0 disabled:cursor-not-allowed p-2 gap-2 text-primary-700 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 disabled:bg-transparent mr-2 -ml-0.5 text-white bg-primary-700 hover:bg-primary-800 hover:text-white active:bg-primary-900 active:text-white'
1213
data-testid='button'
1314
aria-label='cart icon'
@@ -28,7 +29,7 @@ export const CartIcon = component$(() => {
2829
</div>
2930
</div>
3031
</div>
31-
</a>
32+
</Link>
3233
</nav>
3334
);
3435
});

‎src/components/CartProductCard/CartProductCard.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { component$, useContext } from '@builder.io/qwik';
2+
import { Link } from '@builder.io/qwik-city';
23
import { Image } from 'qwik-image';
34
import { useTranslate } from 'qwik-speak';
45
import { SfIconDelete } from 'qwik-storefront-ui';
@@ -21,7 +22,7 @@ export const CartProductCard = component$<CartProductCardProps>(
2122
data-testid='cart-product-card'
2223
>
2324
<div class='relative overflow-hidden rounded-md w-[150px]'>
24-
<a
25+
<Link
2526
class='focus-visible:outline focus-visible:outline-offset focus-visible:rounded-sm text-primary-700 underline hover:text-primary-800 active:text-primary-900'
2627
data-testid='link'
2728
href={`/product/${product.slug}`}
@@ -37,7 +38,7 @@ export const CartProductCard = component$<CartProductCardProps>(
3738
src={product.image.url}
3839
alt={product.image.alt}
3940
/>
40-
</a>
41+
</Link>
4142
{product.price.isDiscounted && (
4243
<div class='absolute top-0 left-0 text-white bg-secondary-600 py-1 pl-1.5 pr-2 text-xs font-medium'>
4344
<svg
@@ -53,13 +54,13 @@ export const CartProductCard = component$<CartProductCardProps>(
5354
)}
5455
</div>
5556
<div class='flex flex-col pl-4 min-w-[180px] flex-1'>
56-
<a
57+
<Link
5758
class='focus-visible:outline focus-visible:outline-offset focus-visible:rounded-sm underline hover:text-primary-800 active:text-primary-900 no-underline typography-text-sm sm:typography-text-lg'
5859
data-testid='link'
5960
href='/product/athletic-sneakers'
6061
>
6162
{product.name}
62-
</a>
63+
</Link>
6364
<div class='mt-auto sm:mb-0 '>
6465
<ul class='text-xs font-normal leading-5 sm:typography-text-sm text-neutral-700 flex justify-between'>
6566
<div
@@ -138,8 +139,7 @@ export const CartProductCard = component$<CartProductCardProps>(
138139
)}
139140
</span>
140141
<span class='font-medium mt-2 ml-1'>
141-
{quantity} x{' '}
142-
{formatPrice(
142+
{quantity} x {formatPrice(
143143
product.price.discounted.amount,
144144
product.price.discounted.precisionAmount
145145
)}

‎src/components/Footer/Footer.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { component$ } from '@builder.io/qwik';
2+
import { Link } from '@builder.io/qwik-city';
23
import { useTranslate } from 'qwik-speak';
34
import { contactOptions, homePageCategories, socialMedia } from '~/mocks';
45
import { Divider } from '../UI/Divider/Divider';
@@ -22,13 +23,13 @@ export const Footer = component$<FooterProps>(({ class: _class = '' }) => {
2223
{t(`categories.${key}.label`)}
2324
</p>
2425
{subcategories.map(({ link, key: subcategoryKey }) => (
25-
<a
26+
<Link
2627
href={link}
2728
class='text-sm leading-5 py-2 text-neutral-600 hover:underline'
2829
key={subcategoryKey}
2930
>
3031
{t(`categories.${key}.subcategories.${subcategoryKey}`)}
31-
</a>
32+
</Link>
3233
))}
3334
</div>
3435
))}
@@ -44,12 +45,12 @@ export const Footer = component$<FooterProps>(({ class: _class = '' }) => {
4445
class='mx-auto my-4 text-center flex flex-col items-center'
4546
>
4647
<div class='w-8'>{icon}</div>
47-
<a
48+
<Link
4849
href={link}
4950
class='py-1 my-2 font-medium typography-text-lg font-body no-underline text-neutral-600 hover:underline hover:!text-neutral-900 active:underline active:!text-neutral-900'
5051
>
5152
{t(`contactOptions.${key}.label`)}
52-
</a>
53+
</Link>
5354
{details.map((option) => (
5455
<p class='text-sm leading-5' key={option}>
5556
{t(`contactOptions.${key}.details.${option}`)}
@@ -62,15 +63,15 @@ export const Footer = component$<FooterProps>(({ class: _class = '' }) => {
6263
<div class='mx-auto max-w-screen-3xl text-sm leading-5 text-white justify-end px-4 py-10 lg:flex lg:py-6'>
6364
<div class='flex justify-center gap-6 lg:self-start'>
6465
{socialMedia.map(({ icon, label, link }) => (
65-
<a
66+
<Link
6667
key={label}
6768
href={link}
6869
title={t('socialLabel', { label })}
6970
class='hover:bg-neutral-500 hover:shadow-[0_0_0_8px] hover:shadow-neutral-500 rounded-sm'
7071
data-testid={label}
7172
>
7273
{icon}
73-
</a>
74+
</Link>
7475
))}
7576
</div>
7677
<div class='flex items-center justify-center gap-6 leading-5 text-center typography-text-sm font-body pt-6 lg:pt-0 lg:ml-auto '>

‎src/components/NavbarTop/NavbarTop.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Slot, component$ } from '@builder.io/qwik';
2+
import { Link } from '@builder.io/qwik-city';
23
import { Image } from 'qwik-image';
34

45
type NavBarTopProps = {
@@ -17,7 +18,7 @@ export const NavbarTop = component$<NavBarTopProps>(({ isCheckoutPath }) => {
1718
data-testid='navbar-top'
1819
>
1920
<div class='flex gap-[clamp(1rem,3vw,3rem)] items-center w-full md:h-[60px] max-w-screen-3xl py-6 px-4 md:px-6 lg:px-10 mx-auto sticky top-0'>
20-
<a href='/' aria-label='SF Homepage' class='h-6 md:h-7 -mt-1.5'>
21+
<Link href='/' aria-label='SF Homepage' class='h-6 md:h-7 -mt-1.5'>
2122
<Image
2223
loading='eager'
2324
layout='constrained'
@@ -29,7 +30,7 @@ export const NavbarTop = component$<NavBarTopProps>(({ isCheckoutPath }) => {
2930
}
3031
alt='SFUI Logo'
3132
/>
32-
</a>
33+
</Link>
3334
<Slot />
3435
</div>
3536
</header>

‎src/components/UI/CategoryCard/CategoryCard.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { component$ } from '@builder.io/qwik';
2+
import { Link } from '@builder.io/qwik-city';
23
import { Image } from 'qwik-image';
34

45
type CategoryCardProps = {
@@ -22,7 +23,7 @@ export const CategoryCard = component$(
2223
>
2324
{items.map(({ name, image, slug }) => (
2425
<div class='mr-2 md:mr-6 group' key={name}>
25-
<a
26+
<Link
2627
class='w-full h-full z-1 focus-visible:outline focus-visible:outline-offset focus-visible:rounded-md'
2728
href={slug}
2829
aria-label={name}
@@ -43,7 +44,7 @@ export const CategoryCard = component$(
4344
{name}
4445
</p>
4546
</div>
46-
</a>
47+
</Link>
4748
</div>
4849
))}
4950
</div>

‎src/routes/cart/index.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { component$, useComputed$, useContext } from '@builder.io/qwik';
2+
import { Link } from '@builder.io/qwik-city';
23
import { useTranslate } from 'qwik-speak';
34
import { CartProductCard } from '~/components/CartProductCard/CartProductCard';
45
import { EmptyCart } from '~/components/EmpyCart/EmpyCart';
@@ -27,7 +28,7 @@ export default component$(() => {
2728
<h1 class='font-bold typography-headline-3 md:typography-headline-2'>
2829
{t('myCart@@My Cart')}
2930
</h1>
30-
<a
31+
<Link
3132
class='inline-flex items-center justify-center font-medium text-base focus-visible:outline focus-visible:outline-offset rounded-md disabled:text-disabled-500 disabled:bg-disabled-300 disabled:shadow-none disabled:ring-0 disabled:cursor-not-allowed leading-5 text-sm py-1.5 px-3 gap-1.5 text-primary-700 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 disabled:bg-transparent flex md:hidden whitespace-nowrap'
3233
data-testid='button'
3334
href='/category'
@@ -41,8 +42,8 @@ export default component$(() => {
4142
<path d='m10.875 19.3-6.6-6.6a.883.883 0 0 1-.213-.325A1.115 1.115 0 0 1 4 12c0-.133.02-.258.062-.375a.883.883 0 0 1 .213-.325l6.6-6.6a.978.978 0 0 1 .687-.288.933.933 0 0 1 .713.288c.2.183.304.412.313.687a.933.933 0 0 1-.288.713L7.4 11h11.175a.97.97 0 0 1 .713.287.97.97 0 0 1 .287.713.97.97 0 0 1-.287.712.968.968 0 0 1-.713.288H7.4l4.9 4.9c.183.183.28.417.288.7a.872.872 0 0 1-.288.7c-.183.2-.417.3-.7.3a.988.988 0 0 1-.725-.3Z'></path>
4243
</svg>
4344
{t('backToShopping')}
44-
</a>
45-
<a
45+
</Link>
46+
<Link
4647
class='inline-flex items-center justify-center font-medium text-base focus-visible:outline focus-visible:outline-offset rounded-md disabled:text-disabled-500 disabled:bg-disabled-300 disabled:shadow-none disabled:ring-0 disabled:cursor-not-allowed py-2 leading-6 px-4 gap-2 text-primary-700 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 disabled:bg-transparent hidden md:flex'
4748
data-testid='button'
4849
href='/category'
@@ -56,7 +57,7 @@ export default component$(() => {
5657
<path d='m10.875 19.3-6.6-6.6a.883.883 0 0 1-.213-.325A1.115 1.115 0 0 1 4 12c0-.133.02-.258.062-.375a.883.883 0 0 1 .213-.325l6.6-6.6a.978.978 0 0 1 .687-.288.933.933 0 0 1 .713.288c.2.183.304.412.313.687a.933.933 0 0 1-.288.713L7.4 11h11.175a.97.97 0 0 1 .713.287.97.97 0 0 1 .287.713.97.97 0 0 1-.287.712.968.968 0 0 1-.713.288H7.4l4.9 4.9c.183.183.28.417.288.7a.872.872 0 0 1-.288.7c-.183.2-.417.3-.7.3a.988.988 0 0 1-.725-.3Z'></path>
5758
</svg>
5859
{t('backToShopping')}
59-
</a>
60+
</Link>
6061
</div>
6162
<div
6263
class='md:grid md:grid-cols-12 md:gap-x-6'
@@ -77,13 +78,13 @@ export default component$(() => {
7778
})}
7879
</div>
7980
<OrderSummary>
80-
<a
81+
<Link
8182
class='inline-flex items-center justify-center font-medium text-base focus-visible:outline focus-visible:outline-offset rounded-md disabled:text-disabled-500 disabled:bg-disabled-300 disabled:shadow-none disabled:ring-0 disabled:cursor-not-allowed py-3 leading-6 px-6 gap-3 text-white shadow hover:shadow-md active:shadow bg-primary-700 hover:bg-primary-800 active:bg-primary-900 disabled:bg-disabled-300 w-full mb-4 md:mb-0'
8283
data-testid='button'
8384
href='/checkout'
8485
>
8586
{t('goToCheckout')}
86-
</a>
87+
</Link>
8788
</OrderSummary>
8889
</div>
8990
</div>

‎src/routes/category/index.tsx

+28-23
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import { $, component$, useComputed$, useContext } from '@builder.io/qwik';
2-
import { routeLoader$, useLocation, useNavigate } from '@builder.io/qwik-city';
2+
import {
3+
Link,
4+
routeLoader$,
5+
useLocation,
6+
useNavigate,
7+
} from '@builder.io/qwik-city';
38
import { Image } from 'qwik-image';
49
import { useTranslate } from 'qwik-speak';
510
import {
@@ -78,22 +83,22 @@ export default component$(() => {
7883
</div>
7984
</li>
8085
<li class="peer hidden sm:flex peer-[:nth-of-type(even)]:before:content-['/'] peer-[:nth-of-type(even)]:before:px-2 peer-[:nth-of-type(even)]:before:leading-5 last-of-type:flex last-of-type:before:font-normal last-of-type:before:text-neutral-500 text-neutral-500 last-of-type:text-neutral-900 last-of-type:font-medium">
81-
<a
86+
<Link
8287
class='focus-visible:outline focus-visible:outline-offset focus-visible:rounded-sm underline hover:text-primary-800 active:text-primary-900 leading-5 no-underline hover:underline active:underline whitespace-nowrap outline-secondary-600 text-inherit'
8388
data-testid='link'
8489
href='/'
8590
>
8691
{t('home')}
87-
</a>
92+
</Link>
8893
</li>
8994
<li class="peer hidden sm:flex peer-[:nth-of-type(even)]:before:content-['/'] peer-[:nth-of-type(even)]:before:px-2 peer-[:nth-of-type(even)]:before:leading-5 last-of-type:flex last-of-type:before:font-normal last-of-type:before:text-neutral-500 text-neutral-500 last-of-type:text-neutral-900 last-of-type:font-medium">
90-
<a
95+
<Link
9196
class='focus-visible:outline focus-visible:outline-offset focus-visible:rounded-sm underline hover:text-primary-800 active:text-primary-900 leading-5 no-underline hover:underline active:underline whitespace-nowrap outline-secondary-600 text-inherit'
9297
data-testid='link'
9398
href='/category'
9499
>
95100
{t('allProducts')}
96-
</a>
101+
</Link>
97102
</li>
98103
</ol>
99104
</nav>
@@ -139,7 +144,7 @@ export default component$(() => {
139144
>
140145
category
141146
</span>
142-
<a data-testid='category-tree-item' href='/category'>
147+
<Link data-testid='category-tree-item' href='/category'>
143148
<span
144149
class='inline-flex items-center gap-2 w-full hover:bg-neutral-100 active:bg-neutral-200 cursor-pointer focus-visible:outline focus-visible:outline-offset focus-visible:relative focus-visible:z-10 p-4 md:sf-list-item-sm md:py-1.5 sf-list-item'
145150
data-testid='list-item'
@@ -163,9 +168,9 @@ export default component$(() => {
163168
</span>
164169
</span>
165170
</span>
166-
</a>
171+
</Link>
167172
<div class='mt-4 mb-6 md:mt-2' data-testid='categories'>
168-
<a data-testid='category-tree-item' href='/category'>
173+
<Link data-testid='category-tree-item' href='/category'>
169174
<span
170175
class='inline-flex items-center gap-2 w-full hover:bg-neutral-100 active:bg-neutral-200 cursor-pointer focus-visible:outline focus-visible:outline-offset focus-visible:relative focus-visible:z-10 p-4 md:sf-list-item-sm md:py-1.5 sf-list-item'
171176
data-testid='list-item'
@@ -187,8 +192,8 @@ export default component$(() => {
187192
</span>
188193
</span>
189194
</span>
190-
</a>
191-
<a data-testid='category-tree-item' href='/category'>
195+
</Link>
196+
<Link data-testid='category-tree-item' href='/category'>
192197
<span
193198
class='inline-flex items-center gap-2 w-full hover:bg-neutral-100 active:bg-neutral-200 cursor-pointer focus-visible:outline focus-visible:outline-offset focus-visible:relative focus-visible:z-10 p-4 md:sf-list-item-sm md:py-1.5 sf-list-item'
194199
data-testid='list-item'
@@ -210,8 +215,8 @@ export default component$(() => {
210215
</span>
211216
</span>
212217
</span>
213-
</a>
214-
<a data-testid='category-tree-item' href='/category'>
218+
</Link>
219+
<Link data-testid='category-tree-item' href='/category'>
215220
<span
216221
class='inline-flex items-center gap-2 w-full hover:bg-neutral-100 active:bg-neutral-200 cursor-pointer focus-visible:outline focus-visible:outline-offset focus-visible:relative focus-visible:z-10 p-4 md:sf-list-item-sm md:py-1.5 sf-list-item'
217222
data-testid='list-item'
@@ -233,8 +238,8 @@ export default component$(() => {
233238
</span>
234239
</span>
235240
</span>
236-
</a>
237-
<a data-testid='category-tree-item' href='/category'>
241+
</Link>
242+
<Link data-testid='category-tree-item' href='/category'>
238243
<span
239244
class='inline-flex items-center gap-2 w-full hover:bg-neutral-100 active:bg-neutral-200 cursor-pointer focus-visible:outline focus-visible:outline-offset focus-visible:relative focus-visible:z-10 p-4 md:sf-list-item-sm md:py-1.5 sf-list-item'
240245
data-testid='list-item'
@@ -256,8 +261,8 @@ export default component$(() => {
256261
</span>
257262
</span>
258263
</span>
259-
</a>
260-
<a data-testid='category-tree-item' href='/category'>
264+
</Link>
265+
<Link data-testid='category-tree-item' href='/category'>
261266
<span
262267
class='inline-flex items-center gap-2 w-full hover:bg-neutral-100 active:bg-neutral-200 cursor-pointer focus-visible:outline focus-visible:outline-offset focus-visible:relative focus-visible:z-10 p-4 md:sf-list-item-sm md:py-1.5 sf-list-item'
263268
data-testid='list-item'
@@ -279,7 +284,7 @@ export default component$(() => {
279284
</span>
280285
</span>
281286
</span>
282-
</a>
287+
</Link>
283288
</div>
284289
<span
285290
class='block py-2 px-4 mb-6 bg-neutral-100 typography-headline-6 font-bold text-neutral-900 uppercase tracking-widest md:rounded-md'
@@ -378,7 +383,7 @@ export default component$(() => {
378383
data-testid='product-card'
379384
>
380385
<div class='relative'>
381-
<a
386+
<Link
382387
class='focus-visible:outline focus-visible:outline-offset focus-visible:rounded-sm text-primary-700 underline hover:text-primary-800 active:text-primary-900 relative block w-[230px] p-1'
383388
data-testid='link'
384389
href={`/product/${product.slug}`}
@@ -393,23 +398,23 @@ export default component$(() => {
393398
src={product.image.url}
394399
alt={product.image.alt}
395400
/>
396-
</a>
401+
</Link>
397402
</div>
398403
<div class='p-2 border-t border-neutral-200 typography-text-sm px-6 py-4'>
399-
<a
404+
<Link
400405
class='focus-visible:outline focus-visible:outline-offset focus-visible:rounded-sm underline hover:text-primary-800 active:text-primary-900 no-underline'
401406
data-testid='link'
402407
href={`/product/${product.slug}`}
403408
>
404409
{product.name}
405-
</a>
410+
</Link>
406411
<div class='flex items-center mt-2'>
407412
<SfRating
408413
size='xs'
409414
value={product.rating.average}
410415
ariaLabel={`${product.rating.average} out of 5`}
411416
/>
412-
<a
417+
<Link
413418
class='focus-visible:outline focus-visible:outline-offset focus-visible:rounded-sm underline hover:text-primary-800 active:text-primary-900 ml-1 no-underline'
414419
data-testid='link'
415420
href='/category#'
@@ -420,7 +425,7 @@ export default component$(() => {
420425
>
421426
{product.rating.count}
422427
</span>
423-
</a>
428+
</Link>
424429
</div>
425430
<p class='block py-2 font-normal typography-text-xs text-neutral-700 text-justify'></p>
426431
<div class='flex items-center justify-between'>

0 commit comments

Comments
 (0)