Skip to content

Commit 00c8200

Browse files
bashleighbashleigh
authored
feat: unstyled anchor element (#49)
* feat: added unstyled anchor element * refactor: breadcrumbs to use anchors * replaced accordion title with unstyled anchor * chore: linting * feat: updated snaps and corrected accordion title type * refactor: removed extending of styled component * fix: corrected snapahots * refactor: removed unstyled anchor * refactor: change accordion from title to item as anchor * fix: removed condition preventing breadcrumb rendering * fix: corrected storybook issue with breadcrumbs * fix: resolved linting after clearing eslint cache * docs: added changelog entry
1 parent 7f3eafd commit 00c8200

File tree

9 files changed

+74
-56
lines changed

9 files changed

+74
-56
lines changed

‎src/components/accordion/__styles__/index.ts

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,23 @@ export const ElAccordionContainer = styled.div`
88
flex-direction: column;
99
`
1010

11-
export const ElAccordionItem = styled.div`
11+
export const ElAccordionItem = styled.a`
12+
color: inherit;
13+
font-size: inherit;
14+
font-weight: inherit;
15+
16+
&:hover,
17+
&:link,
18+
&:active,
19+
&:focus {
20+
color: inherit;
21+
font-size: inherit;
22+
font-weight: inherit;
23+
}
24+
1225
display: flex;
1326
justify-content: space-between;
1427
align-items: center;
15-
cursor: pointer;
1628
padding: 0.875rem 0;
1729
border-bottom: 1px solid var(--color-grey-100);
1830

‎src/components/accordion/__tests__/__snapshots__/accordion.test.tsx.snap

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = `
66
"baseElement": <body>
77
<div>
88
<mock-styled.div>
9-
<mock-styled.div>
9+
<mock-styled.a>
1010
<mock-styled.div>
1111
Accordion Item 1
1212
</mock-styled.div>
@@ -42,13 +42,13 @@ exports[`Accordion basic usage should match a snapshot 1`] = `
4242
</mock-styled.span>
4343
</mock-styled.div>
4444
</mock-styled.div>
45-
</mock-styled.div>
45+
</mock-styled.a>
4646
<mock-styled.div
4747
classname="mock-css."
4848
>
4949
Accordion Content 1
5050
</mock-styled.div>
51-
<mock-styled.div>
51+
<mock-styled.a>
5252
<mock-styled.div>
5353
Accordion Item 2
5454
</mock-styled.div>
@@ -84,7 +84,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = `
8484
</mock-styled.span>
8585
</mock-styled.div>
8686
</mock-styled.div>
87-
</mock-styled.div>
87+
</mock-styled.a>
8888
<mock-styled.div>
8989
Accordion Content 2
9090
</mock-styled.div>
@@ -93,7 +93,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = `
9393
</body>,
9494
"container": <div>
9595
<mock-styled.div>
96-
<mock-styled.div>
96+
<mock-styled.a>
9797
<mock-styled.div>
9898
Accordion Item 1
9999
</mock-styled.div>
@@ -129,13 +129,13 @@ exports[`Accordion basic usage should match a snapshot 1`] = `
129129
</mock-styled.span>
130130
</mock-styled.div>
131131
</mock-styled.div>
132-
</mock-styled.div>
132+
</mock-styled.a>
133133
<mock-styled.div
134134
classname="mock-css."
135135
>
136136
Accordion Content 1
137137
</mock-styled.div>
138-
<mock-styled.div>
138+
<mock-styled.a>
139139
<mock-styled.div>
140140
Accordion Item 2
141141
</mock-styled.div>
@@ -171,7 +171,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = `
171171
</mock-styled.span>
172172
</mock-styled.div>
173173
</mock-styled.div>
174-
</mock-styled.div>
174+
</mock-styled.a>
175175
<mock-styled.div>
176176
Accordion Content 2
177177
</mock-styled.div>
@@ -237,7 +237,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
237237
"baseElement": <body>
238238
<div>
239239
<mock-styled.div>
240-
<mock-styled.div
240+
<mock-styled.a
241241
aria-controls=":r0:-0"
242242
id=":r1:-0"
243243
>
@@ -281,7 +281,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
281281
</mock-styled.span>
282282
</mock-styled.div>
283283
</mock-styled.div>
284-
</mock-styled.div>
284+
</mock-styled.a>
285285
<mock-styled.div
286286
aria-expanded="false"
287287
aria-labelledby=":r1:-0"
@@ -291,7 +291,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
291291
>
292292
Accordion Content 1
293293
</mock-styled.div>
294-
<mock-styled.div
294+
<mock-styled.a
295295
aria-controls=":r0:-1"
296296
id=":r1:-1"
297297
>
@@ -335,7 +335,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
335335
</mock-styled.span>
336336
</mock-styled.div>
337337
</mock-styled.div>
338-
</mock-styled.div>
338+
</mock-styled.a>
339339
<mock-styled.div
340340
aria-expanded="false"
341341
aria-labelledby=":r1:-1"
@@ -350,7 +350,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
350350
</body>,
351351
"container": <div>
352352
<mock-styled.div>
353-
<mock-styled.div
353+
<mock-styled.a
354354
aria-controls=":r0:-0"
355355
id=":r1:-0"
356356
>
@@ -394,7 +394,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
394394
</mock-styled.span>
395395
</mock-styled.div>
396396
</mock-styled.div>
397-
</mock-styled.div>
397+
</mock-styled.a>
398398
<mock-styled.div
399399
aria-expanded="false"
400400
aria-labelledby=":r1:-0"
@@ -404,7 +404,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
404404
>
405405
Accordion Content 1
406406
</mock-styled.div>
407-
<mock-styled.div
407+
<mock-styled.a
408408
aria-controls=":r0:-1"
409409
id=":r1:-1"
410410
>
@@ -448,7 +448,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
448448
</mock-styled.span>
449449
</mock-styled.div>
450450
</mock-styled.div>
451-
</mock-styled.div>
451+
</mock-styled.a>
452452
<mock-styled.div
453453
aria-expanded="false"
454454
aria-labelledby=":r1:-1"

‎src/components/accordion/accordion.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { elIsActive } from '../../styles/states'
1212
import { Icon } from '../icon'
1313

1414
export interface AccordionBaseProps extends HTMLAttributes<HTMLDivElement> {}
15+
export interface AccordionBaseItemProps extends HTMLAttributes<HTMLAnchorElement> {}
1516

1617
export interface AccordionTitleItemProps {}
1718

@@ -30,11 +31,11 @@ export const AccordionContainer: FC<AccordionBaseProps> = ({ children, ...rest }
3031
return <ElAccordionContainer {...rest}>{children}</ElAccordionContainer>
3132
}
3233

33-
export const AccordionItem: FC<AccordionBaseProps> = ({ children, ...rest }) => {
34+
export const AccordionItem: FC<AccordionBaseItemProps> = ({ children, ...rest }) => {
3435
return <ElAccordionItem {...rest}>{children}</ElAccordionItem>
3536
}
3637

37-
export const AccordionTitle: FC<AccordionBaseProps> = ({ children, ...rest }) => {
38+
export const AccordionTitle: FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...rest }) => {
3839
return <ElAccordionTitle {...rest}>{children}</ElAccordionTitle>
3940
}
4041

‎src/components/breadcrumb/__styles__/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { styled } from '@linaria/react'
22

3-
export const ElBreadCrumbItem = styled.div`
3+
export const ElBreadCrumbItem = styled.a`
4+
font-weight: inherit;
45
border-radius: 0.5rem;
56
font-size: var(--font-size-small);
67
color: var(--intent-default);

‎src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ exports[`BreadCrumb should match a snapshot 1`] = `
1313
align-items: center;
1414
"
1515
>
16-
<mock-styled.div
16+
<mock-styled.a
1717
aria-current="false"
1818
>
1919
Home
20-
</mock-styled.div>
20+
</mock-styled.a>
2121
</mock-styled.div>
2222
<mock-styled.div
2323
classname="mock-css.
@@ -37,11 +37,11 @@ exports[`BreadCrumb should match a snapshot 1`] = `
3737
style="font-size: 12px;"
3838
/>
3939
</mock-styled.span>
40-
<mock-styled.div
40+
<mock-styled.a
4141
aria-current="false"
4242
>
4343
Level 1
44-
</mock-styled.div>
44+
</mock-styled.a>
4545
</mock-styled.div>
4646
<mock-styled.div
4747
classname="mock-css.
@@ -61,11 +61,11 @@ exports[`BreadCrumb should match a snapshot 1`] = `
6161
style="font-size: 12px;"
6262
/>
6363
</mock-styled.span>
64-
<mock-styled.div
64+
<mock-styled.a
6565
aria-current="false"
6666
>
6767
Level 2
68-
</mock-styled.div>
68+
</mock-styled.a>
6969
</mock-styled.div>
7070
<mock-styled.div
7171
classname="mock-css.
@@ -85,11 +85,11 @@ exports[`BreadCrumb should match a snapshot 1`] = `
8585
style="font-size: 12px;"
8686
/>
8787
</mock-styled.span>
88-
<mock-styled.div
88+
<mock-styled.a
8989
aria-current="page"
9090
>
9191
Level 3
92-
</mock-styled.div>
92+
</mock-styled.a>
9393
</mock-styled.div>
9494
</mock-styled.div>
9595
</div>
@@ -103,11 +103,11 @@ exports[`BreadCrumb should match a snapshot 1`] = `
103103
align-items: center;
104104
"
105105
>
106-
<mock-styled.div
106+
<mock-styled.a
107107
aria-current="false"
108108
>
109109
Home
110-
</mock-styled.div>
110+
</mock-styled.a>
111111
</mock-styled.div>
112112
<mock-styled.div
113113
classname="mock-css.
@@ -127,11 +127,11 @@ exports[`BreadCrumb should match a snapshot 1`] = `
127127
style="font-size: 12px;"
128128
/>
129129
</mock-styled.span>
130-
<mock-styled.div
130+
<mock-styled.a
131131
aria-current="false"
132132
>
133133
Level 1
134-
</mock-styled.div>
134+
</mock-styled.a>
135135
</mock-styled.div>
136136
<mock-styled.div
137137
classname="mock-css.
@@ -151,11 +151,11 @@ exports[`BreadCrumb should match a snapshot 1`] = `
151151
style="font-size: 12px;"
152152
/>
153153
</mock-styled.span>
154-
<mock-styled.div
154+
<mock-styled.a
155155
aria-current="false"
156156
>
157157
Level 2
158-
</mock-styled.div>
158+
</mock-styled.a>
159159
</mock-styled.div>
160160
<mock-styled.div
161161
classname="mock-css.
@@ -175,11 +175,11 @@ exports[`BreadCrumb should match a snapshot 1`] = `
175175
style="font-size: 12px;"
176176
/>
177177
</mock-styled.span>
178-
<mock-styled.div
178+
<mock-styled.a
179179
aria-current="page"
180180
>
181181
Level 3
182-
</mock-styled.div>
182+
</mock-styled.a>
183183
</mock-styled.div>
184184
</mock-styled.div>
185185
</div>,

‎src/components/breadcrumb/breadcrumb.stories.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export default {
88
export const BasicUsage = {
99
render: ({}) => (
1010
<BreadCrumb
11+
defaultActiveIndex={3}
1112
items={[
1213
{
1314
text: 'Home',

‎src/components/breadcrumb/breadcrumb.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,19 @@ import { Icon } from '../icon'
44
import { elMr2 } from '../../styles/spacing'
55
import { FlexContainer } from '../layout'
66

7-
export interface BreadCrumbItem extends HTMLAttributes<HTMLDivElement> {
7+
export interface BreadCrumbItem extends HTMLAttributes<HTMLAnchorElement> {
88
text: string
99
onClick: () => void
1010
}
1111

12-
export interface BreadCrumbProps extends HTMLAttributes<HTMLDivElement> {
12+
export interface BreadCrumbProps extends HTMLAttributes<HTMLElement> {
1313
items: BreadCrumbItem[]
1414
defaultActiveIndex?: number
1515
}
1616

1717
export const handleNext =
1818
(setActive: Dispatch<SetStateAction<number>>, onClick: () => void, index: number) =>
19-
(e: MouseEvent<HTMLDivElement>) => {
19+
(e: MouseEvent<HTMLAnchorElement>) => {
2020
e.preventDefault()
2121
setActive(index)
2222
onClick()

0 commit comments

Comments
 (0)