From 2259bf55c720495ae72bb055f2fca8c3633e006c Mon Sep 17 00:00:00 2001 From: Rajat Pandey Date: Sun, 26 Nov 2023 15:09:49 -0500 Subject: [PATCH 01/13] fix(pagination): updating lastPage variable correctly for table layout (#1151) fix(pagination): updating lastPage variable to currPage+4 when layout is table for firstpage var fix The page number was not showing correctly on firsrt few clicks because lastPage variable was not updating on first few clicks when layout is table due to incorrect addition. Was working correctly when layout is pagination. fix #1150 --- src/components/Pagination/Pagination.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index 2f3d6c6b27..e64cd37c61 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -65,7 +65,7 @@ const PaginationComponent: FC = ({ }) => { const theme = mergeDeep(getTheme().pagination, customTheme); - const lastPage = Math.min(Math.max(currentPage + 2, 5), totalPages); + const lastPage = Math.min(Math.max(layout === 'pagination' ? currentPage + 2 : currentPage + 4, 5), totalPages); const firstPage = Math.max(1, lastPage - 4); const goToNextPage = (): void => { From 7c1275e255f8dcbefcd73a7acec21b17e043273f Mon Sep 17 00:00:00 2001 From: Rajat Pandey Date: Sun, 26 Nov 2023 23:05:40 -0500 Subject: [PATCH 02/13] fix(footer>theme.ts): adding margin to right in footer links (#1153) The link elements were not responsive because there was no default margin set. me-4 was added to #1085 --- src/components/Footer/theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Footer/theme.ts b/src/components/Footer/theme.ts index e608c3d26f..4550e9a312 100644 --- a/src/components/Footer/theme.ts +++ b/src/components/Footer/theme.ts @@ -9,7 +9,7 @@ export const footerTheme: FlowbiteFooterTheme = { groupLink: { base: 'flex flex-wrap text-sm text-gray-500 dark:text-white', link: { - base: 'last:mr-0 md:mr-6', + base: 'last:mr-0 md:mr-6 me-4', href: 'hover:underline', }, col: 'flex-col space-y-4', From acfc504f129723539278c30f934bde838290b0dc Mon Sep 17 00:00:00 2001 From: Sutu Sebastian <41998826+SutuSebastian@users.noreply.github.com> Date: Tue, 28 Nov 2023 09:22:31 +0200 Subject: [PATCH 03/13] docs sidebar (typography): add missing `List` link (#1154) docs sidebar (typography): add missing list link Co-authored-by: Sebastian Sutu --- data/docs-sidebar.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/data/docs-sidebar.ts b/data/docs-sidebar.ts index 939c654227..38e99c2bb1 100644 --- a/data/docs-sidebar.ts +++ b/data/docs-sidebar.ts @@ -79,6 +79,9 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [ { title: 'typography', href: '/typography/', - items: [{ title: 'Blockquote', href: '/docs/typography/blockquote', isNew: true }], + items: [ + { title: 'Blockquote', href: '/docs/typography/blockquote', isNew: true }, + { title: 'List', href: '/docs/typography/list', isNew: true }, + ], }, ]; From be0df88f5190e1f41730ea0e9890e7609a552b32 Mon Sep 17 00:00:00 2001 From: fatemeh paghar <66066475+paghar@users.noreply.github.com> Date: Tue, 28 Nov 2023 08:25:16 +0100 Subject: [PATCH 04/13] Fix/unnecessary spaceing class name (#1148) fix(list theme.ts): list theme.ts > remove space-y-1 That has beem inherited from base. --- src/components/List/theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/List/theme.ts b/src/components/List/theme.ts index 19014789cd..62963a1f86 100644 --- a/src/components/List/theme.ts +++ b/src/components/List/theme.ts @@ -8,6 +8,6 @@ export const listTheme: FlowbiteListTheme = { on: 'list-decimal', }, unstyled: 'list-none', - nested: 'ps-5 mt-2 space-y-1', + nested: 'ps-5 mt-2', }, }; From c51552a2e63e3f2709b0ee8aef5f7cedc3234941 Mon Sep 17 00:00:00 2001 From: Conner Davis Date: Wed, 29 Nov 2023 16:53:05 -0800 Subject: [PATCH 05/13] test: add missing unit tests (#1157) * test: add missing unit tests for ``, ``, `` * chore: enable coverage report in `yarn test:open` You can now view test coverage in the local `vitest` window that is open in your browser, instead of needing to run `yarn test:coverage` in tandem. --- src/components/Banner/Banner.spec.tsx | 22 ++++++ src/components/Datepicker/Datepicker.spec.tsx | 77 +++++++++++++++++++ .../ThemeModeScript/ThemeModeScript.spec.tsx | 15 ++++ vitest.config.ts | 1 + 4 files changed, 115 insertions(+) create mode 100644 src/components/Banner/Banner.spec.tsx create mode 100644 src/components/Datepicker/Datepicker.spec.tsx create mode 100644 src/components/ThemeModeScript/ThemeModeScript.spec.tsx diff --git a/src/components/Banner/Banner.spec.tsx b/src/components/Banner/Banner.spec.tsx new file mode 100644 index 0000000000..bff1dc57b7 --- /dev/null +++ b/src/components/Banner/Banner.spec.tsx @@ -0,0 +1,22 @@ +import userEvent from '@testing-library/user-event'; +import { Banner } from './Banner'; +import { render, screen } from '@testing-library/react'; +import { describe, expect, it } from 'vitest'; + +describe('Components / Banner', () => { + it('should close when collapse button is clicked', async () => { + const user = userEvent.setup(); + render( +
+ + Click me + +
, + ); + + await user.tab(); + await user.keyboard('[Space]'); + + expect(screen.queryByRole('banner')).not.toBeInTheDocument(); + }); +}); diff --git a/src/components/Datepicker/Datepicker.spec.tsx b/src/components/Datepicker/Datepicker.spec.tsx new file mode 100644 index 0000000000..8db97a3863 --- /dev/null +++ b/src/components/Datepicker/Datepicker.spec.tsx @@ -0,0 +1,77 @@ +import { render, screen } from '@testing-library/react'; +import { describe, expect, it, vi } from 'vitest'; +import { Datepicker } from './Datepicker'; +import { getFormattedDate } from './helpers'; +import userEvent from '@testing-library/user-event'; + +describe('Components / Datepicker', () => { + it("should display today's date by default", () => { + const todaysDateInDefaultLanguage = getFormattedDate('en', new Date()); + + render(); + + expect(screen.getByDisplayValue(todaysDateInDefaultLanguage)).toBeInTheDocument(); + }); + + it('should update date when a different day is clicked', async () => { + const todaysDayOfMonth = new Date().getDate(); + const anotherDay = todaysDayOfMonth === 1 ? 2 : 1; + + render(); + + await userEvent.click(screen.getByRole('textbox')); + await userEvent.click(screen.getAllByText(anotherDay)[0]); + + expect((screen.getByRole('textbox') as HTMLInputElement).value?.includes(`${anotherDay}`)).toBeTruthy(); + }); + + it("should reset to today's date when Clear button is clicked", async () => { + const todaysDateInDefaultLanguage = getFormattedDate('en', new Date()); + const todaysDayOfMonth = new Date().getDate(); + const anotherDay = todaysDayOfMonth === 1 ? 2 : 1; + + render(); + + await userEvent.click(screen.getByRole('textbox')); + await userEvent.click(screen.getAllByText(anotherDay)[0]); + await userEvent.click(screen.getByRole('textbox')); + await userEvent.click(screen.getByText('Clear')); + + expect(screen.getByDisplayValue(todaysDateInDefaultLanguage)).toBeInTheDocument(); + }); + + it("should use today's date when Today button is clicked", async () => { + const todaysDateInDefaultLanguage = getFormattedDate('en', new Date()); + const todaysDayOfMonth = new Date().getDate(); + const anotherDay = todaysDayOfMonth === 1 ? 2 : 1; + + render(); + + await userEvent.click(screen.getByRole('textbox')); + await userEvent.click(screen.getAllByText(anotherDay)[0]); + await userEvent.click(screen.getByRole('textbox')); + await userEvent.click(screen.getByText('Today')); + + expect(screen.getByDisplayValue(todaysDateInDefaultLanguage)).toBeInTheDocument(); + }); + + it('should call `onSelectedDateChange` when a new date is selected', async () => { + const onSelectedDateChange = vi.fn(); + const todaysDayOfMonth = new Date().getDate(); + const anotherDay = todaysDayOfMonth === 1 ? 2 : 1; + + render(); + + await userEvent.click(screen.getByRole('textbox')); + await userEvent.click(screen.getAllByText(anotherDay)[0]); + + expect(onSelectedDateChange).toHaveBeenCalledOnce(); + }); + + it('should close month overlay when user clicks outside of it', async () => { + render(); + + await userEvent.click(screen.getByRole('textbox')); + await userEvent.click(document.body); + }); +}); diff --git a/src/components/ThemeModeScript/ThemeModeScript.spec.tsx b/src/components/ThemeModeScript/ThemeModeScript.spec.tsx new file mode 100644 index 0000000000..72ee2a4fa0 --- /dev/null +++ b/src/components/ThemeModeScript/ThemeModeScript.spec.tsx @@ -0,0 +1,15 @@ +import { render } from '@testing-library/react'; +import { describe, expect, it } from 'vitest'; +import { ThemeModeScript } from './ThemeModeScript'; + +describe('Components / ThemeModeScript', () => { + it('should insert `