From ef0e750557f4327b5b6f887ed36151f79dffd152 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 16 Feb 2025 14:21:38 +0100 Subject: [PATCH 01/29] docs: update content --- .../docs/content/components/alert/index.mdx | 7 +- .../content/components/button-group/index.mdx | 6 +- .../docs/content/components/button/index.mdx | 7 +- .../docs/content/components/callout/index.mdx | 7 +- .../docs/content/components/card/index.mdx | 7 +- .../content/components/list-group/index.mdx | 7 +- packages/docs/content/customize/sass.mdx | 83 ++++++++++++++++-- packages/docs/src/components/Callout.tsx | 85 ++++++++++++++++++- packages/docs/src/components/ScssDocs.tsx | 26 ++++-- 9 files changed, 183 insertions(+), 52 deletions(-) diff --git a/packages/docs/content/components/alert/index.mdx b/packages/docs/content/components/alert/index.mdx index 92ce7cbb..d6e4064a 100644 --- a/packages/docs/content/components/alert/index.mdx +++ b/packages/docs/content/components/alert/index.mdx @@ -13,12 +13,7 @@ React Alert is prepared for any length of text, as well as an optional close but - - Using color to add meaning only provides a visual indication, which will not be conveyed to - users of assistive technologies – such as screen readers. Ensure that information denoted by the - color is either obvious from the content itself (e.g. the visible text), or is included through - alternative means, such as additional text hidden with the `.visually-hidden` class. - + ### Live example diff --git a/packages/docs/content/components/button-group/index.mdx b/packages/docs/content/components/button-group/index.mdx index 7fda6db8..78b875ad 100644 --- a/packages/docs/content/components/button-group/index.mdx +++ b/packages/docs/content/components/button-group/index.mdx @@ -12,10 +12,10 @@ Wrap a series of `` components in ``. - - For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a proper role attribute has to be provided. For button groups, this should be role="group", while toolbars should have a role="toolbar". +Ensure the correct role and provide a label}> + For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a proper `role` attribute has to be provided. For button groups, this should be `role="group"`, while toolbars should have a `role="toolbar"`. - Besides, groups and toolbars should be provided an understandable label, as most assistive technologies will otherwise not declare them, despite the appearance of the specific role attribute. In the following examples provided here, we apply aria-label, but options such as aria-labelledby can also be used. + Besides, groups and toolbars should be provided an understandable label, as most assistive technologies will otherwise not declare them, despite the appearance of the specific role attribute. In the following examples provided here, we apply `aria-label`, but options such as `aria-labelledby` can also be used. These classes can also be added to groups of links, as an alternative to the [`CNav`](./../navs-tabs/#base-nav) components. diff --git a/packages/docs/content/components/button/index.mdx b/packages/docs/content/components/button/index.mdx index 78144289..4d615ebb 100644 --- a/packages/docs/content/components/button/index.mdx +++ b/packages/docs/content/components/button/index.mdx @@ -12,12 +12,7 @@ CoreUI includes a bunch of predefined buttons components, each serving its own s - - Using color to add meaning only provides a visual indication, which will not be conveyed to users - of assistive technologies – such as screen readers. Ensure that information denoted by the color - is either obvious from the content itself (e.g. the visible text), or is included through - alternative means, such as additional text hidden with the `.visually-hidden` class. - + ## Disable text wrapping diff --git a/packages/docs/content/components/callout/index.mdx b/packages/docs/content/components/callout/index.mdx index b158e7a3..9463a3c5 100644 --- a/packages/docs/content/components/callout/index.mdx +++ b/packages/docs/content/components/callout/index.mdx @@ -12,12 +12,7 @@ Callout component is prepared for any length of text, as well as an optional ele - - Using color to add meaning only provides a visual indication, which will not be conveyed to - users of assistive technologies – such as screen readers. Ensure that information denoted by the - color is either obvious from the content itself (e.g. the visible text), or is included through - alternative means, such as additional text hidden with the `.visually-hidden` class. - + ## API diff --git a/packages/docs/content/components/card/index.mdx b/packages/docs/content/components/card/index.mdx index 97f8d81b..93f1b34e 100644 --- a/packages/docs/content/components/card/index.mdx +++ b/packages/docs/content/components/card/index.mdx @@ -140,12 +140,7 @@ Use `color` property to change the appearance of a card. - - Using color to add meaning only provides a visual indication, which will not be conveyed to - users of assistive technologies – such as screen readers. Ensure that information denoted by the - color is either obvious from the content itself (e.g. the visible text), or is included through - alternative means, such as additional text hidden with the `.visually-hidden` class. - + ### Border diff --git a/packages/docs/content/components/list-group/index.mdx b/packages/docs/content/components/list-group/index.mdx index 4137b3b4..f1f61ffb 100644 --- a/packages/docs/content/components/list-group/index.mdx +++ b/packages/docs/content/components/list-group/index.mdx @@ -54,12 +54,7 @@ Contextual classes also work with ``s or ` - -`; - -exports[`loads and displays CCloseButton component 1`] = ` -
- -
-`; diff --git a/packages/coreui-react/src/components/callout/__tests__/CCallout.spec.tsx b/packages/coreui-react/src/components/callout/__tests__/CCallout.spec.tsx index 86f63675..637727c7 100644 --- a/packages/coreui-react/src/components/callout/__tests__/CCallout.spec.tsx +++ b/packages/coreui-react/src/components/callout/__tests__/CCallout.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CCallout } from '../../../index' +import { CCallout } from '../index' test('loads and displays CCallout component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/card/__tests__/CCard.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCard.spec.tsx index c22e6080..6b4f9b11 100644 --- a/packages/coreui-react/src/components/card/__tests__/CCard.spec.tsx +++ b/packages/coreui-react/src/components/card/__tests__/CCard.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CCard } from '../../../index' +import { CCard } from '../index' test('loads and displays CCard component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/card/__tests__/CCardBody.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardBody.spec.tsx index 8b79b9f5..0bf1ccd9 100644 --- a/packages/coreui-react/src/components/card/__tests__/CCardBody.spec.tsx +++ b/packages/coreui-react/src/components/card/__tests__/CCardBody.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CCardBody } from '../../../index' +import { CCardBody } from '../index' test('loads and displays CCardBody component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/card/__tests__/CCardFooter.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardFooter.spec.tsx index 0b47f51f..991e3c7c 100644 --- a/packages/coreui-react/src/components/card/__tests__/CCardFooter.spec.tsx +++ b/packages/coreui-react/src/components/card/__tests__/CCardFooter.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CCardFooter } from '../../../index' +import { CCardFooter } from '../index' test('loads and displays CCardFooter component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/card/__tests__/CCardGroup.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardGroup.spec.tsx index a0228126..239c1fd9 100644 --- a/packages/coreui-react/src/components/card/__tests__/CCardGroup.spec.tsx +++ b/packages/coreui-react/src/components/card/__tests__/CCardGroup.spec.tsx @@ -12,7 +12,7 @@ import { CCardTitle, CCardText, CCardGroup, -} from '../../../index' +} from '../index' test('loads and displays CCardGroup component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/card/__tests__/CCardHeader.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardHeader.spec.tsx index ffb43bab..0477b503 100644 --- a/packages/coreui-react/src/components/card/__tests__/CCardHeader.spec.tsx +++ b/packages/coreui-react/src/components/card/__tests__/CCardHeader.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CCardHeader } from '../../../index' +import { CCardHeader } from '../index' test('loads and displays CCardHeader component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/card/__tests__/CCardImage.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardImage.spec.tsx index 88c20fd1..e1214093 100644 --- a/packages/coreui-react/src/components/card/__tests__/CCardImage.spec.tsx +++ b/packages/coreui-react/src/components/card/__tests__/CCardImage.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CCardImage } from '../../../index' +import { CCardImage } from '../index' test('loads and displays CCardImage component', async () => { const { container } = render() diff --git a/packages/coreui-react/src/components/card/__tests__/CCardImageOverlay.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardImageOverlay.spec.tsx index d161d9c2..6574856b 100644 --- a/packages/coreui-react/src/components/card/__tests__/CCardImageOverlay.spec.tsx +++ b/packages/coreui-react/src/components/card/__tests__/CCardImageOverlay.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CCardImageOverlay } from '../../../index' +import { CCardImageOverlay } from '../index' test('loads and displays CCardImageOverlay component', async () => { const { container } = render() diff --git a/packages/coreui-react/src/components/card/__tests__/CCardLink.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardLink.spec.tsx index 2251ac29..2373537f 100644 --- a/packages/coreui-react/src/components/card/__tests__/CCardLink.spec.tsx +++ b/packages/coreui-react/src/components/card/__tests__/CCardLink.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CCardLink } from '../../../index' +import { CCardLink } from '../index' test('loads and displays CCardLink component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/card/__tests__/CCardSubtitle.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardSubtitle.spec.tsx index a44165f4..8a23f9c8 100644 --- a/packages/coreui-react/src/components/card/__tests__/CCardSubtitle.spec.tsx +++ b/packages/coreui-react/src/components/card/__tests__/CCardSubtitle.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CCardSubtitle } from '../../../index' +import { CCardSubtitle } from '../index' test('loads and displays CCardSubtitle component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/card/__tests__/CCardText.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardText.spec.tsx index 06d2ca3a..3cbb4ab2 100644 --- a/packages/coreui-react/src/components/card/__tests__/CCardText.spec.tsx +++ b/packages/coreui-react/src/components/card/__tests__/CCardText.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CCardText } from '../../../index' +import { CCardText } from '../index' test('loads and displays CCardText component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/card/__tests__/CCardTitle.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardTitle.spec.tsx index ada47122..9733a7f4 100644 --- a/packages/coreui-react/src/components/card/__tests__/CCardTitle.spec.tsx +++ b/packages/coreui-react/src/components/card/__tests__/CCardTitle.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CCardTitle } from '../../../index' +import { CCardTitle } from '../index' test('loads and displays CCardTitle component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/carousel/__tests__/CCarousel.spec.tsx b/packages/coreui-react/src/components/carousel/__tests__/CCarousel.spec.tsx index ff9593b4..c681e5b7 100644 --- a/packages/coreui-react/src/components/carousel/__tests__/CCarousel.spec.tsx +++ b/packages/coreui-react/src/components/carousel/__tests__/CCarousel.spec.tsx @@ -1,7 +1,7 @@ import React from 'react' import { render, fireEvent, getByText } from '@testing-library/react' import '@testing-library/jest-dom' -import { CCarousel, CCarouselCaption, CCarouselItem } from '../../../index' +import { CCarousel, CCarouselCaption, CCarouselItem } from '../index' test('loads and displays CCarousel component', async () => { const { container } = render( diff --git a/packages/coreui-react/src/components/close-button/__tests__/CCloseButton.spec.tsx b/packages/coreui-react/src/components/close-button/__tests__/CCloseButton.spec.tsx index a70c90ea..3eb0dbc0 100644 --- a/packages/coreui-react/src/components/close-button/__tests__/CCloseButton.spec.tsx +++ b/packages/coreui-react/src/components/close-button/__tests__/CCloseButton.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CCloseButton } from '../../../index' +import { CCloseButton } from '../index' test('loads and displays CCloseButton component', async () => { const { container } = render() diff --git a/packages/coreui-react/src/components/collapse/__tests__/CCollapse.spec.tsx b/packages/coreui-react/src/components/collapse/__tests__/CCollapse.spec.tsx index 7d701afe..faee720d 100644 --- a/packages/coreui-react/src/components/collapse/__tests__/CCollapse.spec.tsx +++ b/packages/coreui-react/src/components/collapse/__tests__/CCollapse.spec.tsx @@ -1,7 +1,7 @@ import React from 'react' -import { render, screen } from '@testing-library/react' +import { render, screen, act } from '@testing-library/react' import '@testing-library/jest-dom' -import { CCollapse } from '../../../index' +import { CCollapse } from '../index' test('loads and displays CCollapse component', async () => { const { container } = render(Test) @@ -15,26 +15,45 @@ test('CCollapse customize', async () => { }) test('CCollapse use case test', async () => { + jest.useFakeTimers() + const { rerender } = render(Test) + expect(screen.getByText('Test')).toHaveClass('collapse') expect(screen.getByText('Test')).not.toHaveClass('show') expect(screen.getByText('Test')).not.toHaveClass('collapsing') - rerender(Test) + + act(() => { + rerender(Test) + }) + expect(screen.getByText('Test')).not.toHaveClass('collapse') expect(screen.getByText('Test')).not.toHaveClass('show') expect(screen.getByText('Test')).toHaveClass('collapsing') - await new Promise((r) => setTimeout(r, 1000)) + + act(() => { + jest.runAllTimers() + }) + expect(screen.getByText('Test')).toHaveClass('collapse') expect(screen.getByText('Test')).toHaveClass('show') expect(screen.getByText('Test')).not.toHaveClass('collapsing') - rerender(Test) + + act(() => { + rerender(Test) + }) + expect(screen.getByText('Test')).not.toHaveClass('collapse') expect(screen.getByText('Test')).not.toHaveClass('show') expect(screen.getByText('Test')).toHaveClass('collapsing') - await new Promise((r) => setTimeout(r, 1000)) + + act(() => { + jest.runAllTimers() + }) + expect(screen.getByText('Test')).toHaveClass('collapse') expect(screen.getByText('Test')).not.toHaveClass('show') expect(screen.getByText('Test')).not.toHaveClass('collapsing') - jest.runAllTimers() + jest.useRealTimers() }) diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx index 677e34bd..12b6e3cd 100644 --- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx +++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx @@ -9,7 +9,7 @@ import { CDropdownItemPlain, CDropdownHeader, CDropdownDivider, -} from '../../../index' +} from '../index' test('loads and displays CDropdown component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx index bc5f6667..98b9de48 100644 --- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx +++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CDropdownDivider } from '../../../index' +import { CDropdownDivider } from '../index' test('loads and displays CDropdownDivider component', async () => { const { container } = render() diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx index fe11ca28..602b8d26 100644 --- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx +++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CDropdownHeader } from '../../../index' +import { CDropdownHeader } from '../index' test('loads and displays CDropdownHeader component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItem.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItem.spec.tsx index 88091d6f..f484cc2f 100644 --- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItem.spec.tsx +++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItem.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CDropdownItem } from '../../../index' +import { CDropdownItem } from '../index' test('loads and displays CDropdownItem component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx index 8407502c..b1aafd07 100644 --- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx +++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CDropdownItemPlain } from '../../../index' +import { CDropdownItemPlain } from '../index' test('loads and displays CDropdownItemPlain component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx index 73300334..8b630833 100644 --- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx +++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CDropdown, CDropdownMenu } from '../../../index' +import { CDropdown, CDropdownMenu } from '../index' test('loads and displays CDropdownMenu component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx index 5d9db7e7..341c1048 100644 --- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx +++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CDropdownToggle } from '../../../index' +import { CDropdownToggle } from '../index' test('loads and displays CDropdownToggle component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap index f6741bfd..ed01b1d9 100644 --- a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap +++ b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap @@ -24,7 +24,6 @@ exports[`CDropdown example 1`] = ` Test