-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(components-toc): re-implement
ArticleToc component (#774)
- Loading branch information
1 parent
7a1f49b
commit 1ef8800
Showing
19 changed files
with
121 additions
and
241 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import type { AnchorLinkProps, AnchorProps } from 'antd'; | ||
| import { Anchor as AntAnchor } from 'antd'; | ||
|
|
||
| interface AProps extends AnchorProps {} | ||
| interface LProps extends AnchorLinkProps {} | ||
|
|
||
| const Anchor = (props: AProps): JSX.Element => <AntAnchor {...props} />; | ||
| const Link = (props: LProps): JSX.Element => <AntAnchor.Link {...props} />; | ||
|
|
||
| export { Anchor, Link }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { Anchor, Link } from './Anchor'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,6 @@ | ||
| .toc ul, | ||
| .toc li, | ||
| .toc p { | ||
| @apply my-0; | ||
| @apply text-left; | ||
| } | ||
|
|
||
| .toc ul { | ||
| @apply pl-4; | ||
| @apply mt-0 mb-1; | ||
| @apply text-left; | ||
| @apply list-none; | ||
| } | ||
|
|
||
| .toc ul ul { | ||
| @apply my-0; | ||
| } | ||
|
|
||
| @media screen and (prefers-reduced-motion: reduce) { | ||
| .toc a { | ||
| @apply text-sm font-normal; | ||
| @apply leading-relaxed break-all; | ||
| @apply transition-none; | ||
| } | ||
| } | ||
|
|
||
| .toc a { | ||
| @apply text-sm font-normal; | ||
| @apply leading-relaxed break-all; | ||
| @apply transition-colors; | ||
| .toc { | ||
| @apply hidden md:block; | ||
| @apply absolute; | ||
| @apply w-min; | ||
| @apply mt-36 ml-24; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,10 @@ | ||
| import mockData from '@mocks/data'; | ||
| import { fireEvent, render, screen } from '@testing-library/react'; | ||
| import { axe } from 'jest-axe'; | ||
| import { render } from '@testing-library/react'; | ||
| import ArticleToc from './ArticleToc'; | ||
|
|
||
| describe('ArticleToc', () => { | ||
| const mockToc = mockData.posts[0].toc; | ||
|
|
||
| test('should render correctly (snapshot)', () => { | ||
| const { container } = render(<ArticleToc toc={mockToc} />); | ||
| const { container } = render(<ArticleToc />); | ||
|
|
||
| expect(container).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('Should render accessibility guidelines (AXE)', async () => { | ||
| const { container } = render(<ArticleToc toc={mockToc} />); | ||
|
|
||
| const a11y = await axe(container); | ||
|
|
||
| expect(a11y).toHaveNoViolations(); | ||
| }); | ||
|
|
||
| test('should expand ToC when clicked', () => { | ||
| render(<ArticleToc toc={mockToc} />); | ||
|
|
||
| fireEvent.click(screen.getByRole('button')); | ||
|
|
||
| expect(screen.getByText(mockToc)).toBeInTheDocument(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
1ef8800There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
blog – ./
blog.tazimi.dev
blog-sabertaz.vercel.app
blog-git-main-sabertaz.vercel.app