@arbor-education/design-system.components 0.0.3 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/components/button/Button.d.ts +5 -2
- package/dist/components/button/Button.d.ts.map +1 -1
- package/dist/components/button/Button.js +3 -1
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/card/Card.d.ts +1 -2
- package/dist/components/card/Card.d.ts.map +1 -1
- package/dist/components/card/Card.js +3 -3
- package/dist/components/card/Card.js.map +1 -1
- package/dist/components/card/Card.test.js +0 -5
- package/dist/components/card/Card.test.js.map +1 -1
- package/dist/components/formField/FormField.d.ts +4 -0
- package/dist/components/formField/FormField.d.ts.map +1 -1
- package/dist/components/formField/FormField.js +2 -1
- package/dist/components/formField/FormField.js.map +1 -1
- package/dist/components/formField/FormField.stories.d.ts.map +1 -1
- package/dist/components/formField/FormField.stories.js +3 -1
- package/dist/components/formField/FormField.stories.js.map +1 -1
- package/dist/components/formField/FormField.test.js +5 -0
- package/dist/components/formField/FormField.test.js.map +1 -1
- package/dist/components/formField/inputs/checkbox/CheckboxInput.d.ts +7 -0
- package/dist/components/formField/inputs/checkbox/CheckboxInput.d.ts.map +1 -0
- package/dist/components/formField/inputs/checkbox/CheckboxInput.js +31 -0
- package/dist/components/formField/inputs/checkbox/CheckboxInput.js.map +1 -0
- package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.d.ts +17 -0
- package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.d.ts.map +1 -0
- package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.js +19 -0
- package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.js.map +1 -0
- package/dist/components/formField/inputs/checkbox/CheckboxInput.test.d.ts +2 -0
- package/dist/components/formField/inputs/checkbox/CheckboxInput.test.d.ts.map +1 -0
- package/dist/components/formField/inputs/checkbox/CheckboxInput.test.js +30 -0
- package/dist/components/formField/inputs/checkbox/CheckboxInput.test.js.map +1 -0
- package/dist/components/formField/inputs/dropdown/Dropdown.d.ts +11 -0
- package/dist/components/formField/inputs/dropdown/Dropdown.d.ts.map +1 -0
- package/dist/components/formField/inputs/dropdown/Dropdown.js +43 -0
- package/dist/components/formField/inputs/dropdown/Dropdown.js.map +1 -0
- package/dist/components/formField/inputs/dropdown/Dropdown.stories.d.ts +161 -0
- package/dist/components/formField/inputs/dropdown/Dropdown.stories.d.ts.map +1 -0
- package/dist/components/formField/inputs/dropdown/Dropdown.stories.js +172 -0
- package/dist/components/formField/inputs/dropdown/Dropdown.stories.js.map +1 -0
- package/dist/components/formField/inputs/dropdown/Dropdown.test.d.ts +2 -0
- package/dist/components/formField/inputs/dropdown/Dropdown.test.d.ts.map +1 -0
- package/dist/components/formField/inputs/dropdown/Dropdown.test.js +93 -0
- package/dist/components/formField/inputs/dropdown/Dropdown.test.js.map +1 -0
- package/dist/components/formField/inputs/dropdown/buttons/dropdownButton/DropdownButton.d.ts +11 -0
- package/dist/components/formField/inputs/dropdown/buttons/dropdownButton/DropdownButton.d.ts.map +1 -0
- package/dist/components/formField/inputs/dropdown/buttons/dropdownButton/DropdownButton.js +15 -0
- package/dist/components/formField/inputs/dropdown/buttons/dropdownButton/DropdownButton.js.map +1 -0
- package/dist/components/formField/inputs/dropdown/items/DropdownItemRenderer.d.ts +10 -0
- package/dist/components/formField/inputs/dropdown/items/DropdownItemRenderer.d.ts.map +1 -0
- package/dist/components/formField/inputs/dropdown/items/DropdownItemRenderer.js +12 -0
- package/dist/components/formField/inputs/dropdown/items/DropdownItemRenderer.js.map +1 -0
- package/dist/components/formField/inputs/dropdown/items/dropdownItem/DropdownItem.d.ts +9 -0
- package/dist/components/formField/inputs/dropdown/items/dropdownItem/DropdownItem.d.ts.map +1 -0
- package/dist/components/formField/inputs/dropdown/items/dropdownItem/DropdownItem.js +17 -0
- package/dist/components/formField/inputs/dropdown/items/dropdownItem/DropdownItem.js.map +1 -0
- package/dist/components/formField/inputs/dropdown/items/dropdownMultiLineItem/DropdownMultiLineItem.d.ts +7 -0
- package/dist/components/formField/inputs/dropdown/items/dropdownMultiLineItem/DropdownMultiLineItem.d.ts.map +1 -0
- package/dist/components/formField/inputs/dropdown/items/dropdownMultiLineItem/DropdownMultiLineItem.js +16 -0
- package/dist/components/formField/inputs/dropdown/items/dropdownMultiLineItem/DropdownMultiLineItem.js.map +1 -0
- package/dist/components/formField/inputs/dropdown/wrapper/DropdownWrapper.d.ts +16 -0
- package/dist/components/formField/inputs/dropdown/wrapper/DropdownWrapper.d.ts.map +1 -0
- package/dist/components/formField/inputs/dropdown/wrapper/DropdownWrapper.js +73 -0
- package/dist/components/formField/inputs/dropdown/wrapper/DropdownWrapper.js.map +1 -0
- package/dist/components/formField/inputs/number/NumberInput.d.ts +6 -0
- package/dist/components/formField/inputs/number/NumberInput.d.ts.map +1 -0
- package/dist/components/formField/inputs/number/NumberInput.js +39 -0
- package/dist/components/formField/inputs/number/NumberInput.js.map +1 -0
- package/dist/components/formField/inputs/number/NumberInput.stories.d.ts +20 -0
- package/dist/components/formField/inputs/number/NumberInput.stories.d.ts.map +1 -0
- package/dist/components/formField/inputs/number/NumberInput.stories.js +22 -0
- package/dist/components/formField/inputs/number/NumberInput.stories.js.map +1 -0
- package/dist/components/formField/inputs/number/NumberInput.test.d.ts +2 -0
- package/dist/components/formField/inputs/number/NumberInput.test.d.ts.map +1 -0
- package/dist/components/formField/inputs/number/NumberInput.test.js +30 -0
- package/dist/components/formField/inputs/number/NumberInput.test.js.map +1 -0
- package/dist/components/formField/inputs/radio/RadioButtonInput.d.ts +7 -0
- package/dist/components/formField/inputs/radio/RadioButtonInput.d.ts.map +1 -0
- package/dist/components/formField/inputs/radio/RadioButtonInput.js +9 -0
- package/dist/components/formField/inputs/radio/RadioButtonInput.js.map +1 -0
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.d.ts +46 -0
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.d.ts.map +1 -0
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.js +83 -0
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.js.map +1 -0
- package/dist/components/formField/inputs/radio/RadioButtonInput.test.d.ts +2 -0
- package/dist/components/formField/inputs/radio/RadioButtonInput.test.d.ts.map +1 -0
- package/dist/components/formField/inputs/radio/RadioButtonInput.test.js +34 -0
- package/dist/components/formField/inputs/radio/RadioButtonInput.test.js.map +1 -0
- package/dist/components/heading/Heading.d.ts +392 -388
- package/dist/components/heading/Heading.d.ts.map +1 -1
- package/dist/components/heading/Heading.js +8 -1
- package/dist/components/heading/Heading.js.map +1 -1
- package/dist/components/heading/Heading.stories.d.ts.map +1 -1
- package/dist/components/heading/Heading.stories.js +7 -8
- package/dist/components/heading/Heading.stories.js.map +1 -1
- package/dist/components/heading/HeadingInnerContainer.d.ts +2 -2
- package/dist/components/heading/HeadingInnerContainer.js +4 -4
- package/dist/components/icon/Icon.d.ts +2 -2
- package/dist/components/icon/Icon.d.ts.map +1 -1
- package/dist/components/icon/Icon.js.map +1 -1
- package/dist/components/icon/Icon.stories.d.ts +7 -0
- package/dist/components/icon/Icon.stories.d.ts.map +1 -1
- package/dist/components/icon/Icon.stories.js +8 -0
- package/dist/components/icon/Icon.stories.js.map +1 -1
- package/dist/components/icon/allowedIcons.d.ts +1 -0
- package/dist/components/icon/allowedIcons.d.ts.map +1 -1
- package/dist/components/section/Section.d.ts +18 -0
- package/dist/components/section/Section.d.ts.map +1 -0
- package/dist/components/section/Section.js +36 -0
- package/dist/components/section/Section.js.map +1 -0
- package/dist/components/section/Section.stories.d.ts +18 -0
- package/dist/components/section/Section.stories.d.ts.map +1 -0
- package/dist/components/section/Section.stories.js +27 -0
- package/dist/components/section/Section.stories.js.map +1 -0
- package/dist/components/section/Section.test.d.ts +2 -0
- package/dist/components/section/Section.test.d.ts.map +1 -0
- package/dist/components/section/Section.test.js +157 -0
- package/dist/components/section/Section.test.js.map +1 -0
- package/dist/components/slideover/Slideover.d.ts +11 -0
- package/dist/components/slideover/Slideover.d.ts.map +1 -0
- package/dist/components/slideover/Slideover.js +11 -0
- package/dist/components/slideover/Slideover.js.map +1 -0
- package/dist/components/slideover/Slideover.test.d.ts +2 -0
- package/dist/components/slideover/Slideover.test.d.ts.map +1 -0
- package/dist/components/slideover/Slideover.test.js +33 -0
- package/dist/components/slideover/Slideover.test.js.map +1 -0
- package/dist/components/slideoverManager/SlideoverManager.d.ts +7 -0
- package/dist/components/slideoverManager/SlideoverManager.d.ts.map +1 -0
- package/dist/components/slideoverManager/SlideoverManager.js +29 -0
- package/dist/components/slideoverManager/SlideoverManager.js.map +1 -0
- package/dist/components/slideoverManager/SlideoverManager.stories.d.ts +15 -0
- package/dist/components/slideoverManager/SlideoverManager.stories.d.ts.map +1 -0
- package/dist/components/slideoverManager/SlideoverManager.stories.js +102 -0
- package/dist/components/slideoverManager/SlideoverManager.stories.js.map +1 -0
- package/dist/components/slideoverManager/SlideoverManager.test.d.ts +2 -0
- package/dist/components/slideoverManager/SlideoverManager.test.d.ts.map +1 -0
- package/dist/components/slideoverManager/SlideoverManager.test.js +53 -0
- package/dist/components/slideoverManager/SlideoverManager.test.js.map +1 -0
- package/dist/components/tabs/Tabs.d.ts +14 -18
- package/dist/components/tabs/Tabs.d.ts.map +1 -1
- package/dist/components/tabs/Tabs.js +6 -39
- package/dist/components/tabs/Tabs.js.map +1 -1
- package/dist/components/tabs/Tabs.stories.d.ts +35 -6
- package/dist/components/tabs/Tabs.stories.d.ts.map +1 -1
- package/dist/components/tabs/Tabs.stories.js +17 -45
- package/dist/components/tabs/Tabs.stories.js.map +1 -1
- package/dist/components/tabs/Tabs.test.d.ts.map +1 -1
- package/dist/components/tabs/Tabs.test.js +90 -97
- package/dist/components/tabs/Tabs.test.js.map +1 -1
- package/dist/components/tabs/TabsItem.d.ts +15 -0
- package/dist/components/tabs/TabsItem.d.ts.map +1 -0
- package/dist/components/tabs/TabsItem.js +18 -0
- package/dist/components/tabs/TabsItem.js.map +1 -0
- package/dist/components/tabs/TabsItem.stories.d.ts +618 -0
- package/dist/components/tabs/TabsItem.stories.d.ts.map +1 -0
- package/dist/components/tabs/TabsItem.stories.js +48 -0
- package/dist/components/tabs/TabsItem.stories.js.map +1 -0
- package/dist/index.css +1996 -1326
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +8 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +8 -1
- package/dist/index.js.map +1 -1
- package/dist/utils/Constants.d.ts +6 -0
- package/dist/utils/Constants.d.ts.map +1 -0
- package/dist/utils/Constants.js +6 -0
- package/dist/utils/Constants.js.map +1 -0
- package/dist/utils/PopupParentContext.d.ts +3 -0
- package/dist/utils/PopupParentContext.d.ts.map +1 -0
- package/dist/utils/PopupParentContext.js +6 -0
- package/dist/utils/PopupParentContext.js.map +1 -0
- package/dist/utils/PubSub.d.ts +11 -0
- package/dist/utils/PubSub.d.ts.map +1 -0
- package/dist/utils/PubSub.js +27 -0
- package/dist/utils/PubSub.js.map +1 -0
- package/dist/utils/PubSub.test.d.ts +2 -0
- package/dist/utils/PubSub.test.d.ts.map +1 -0
- package/dist/utils/PubSub.test.js +229 -0
- package/dist/utils/PubSub.test.js.map +1 -0
- package/dist/utils/SlideoverUtils.d.ts +7 -0
- package/dist/utils/SlideoverUtils.d.ts.map +1 -0
- package/dist/utils/SlideoverUtils.js +8 -0
- package/dist/utils/SlideoverUtils.js.map +1 -0
- package/dist/utils/getDefaultPopupParent.d.ts +2 -0
- package/dist/utils/getDefaultPopupParent.d.ts.map +1 -0
- package/dist/utils/getDefaultPopupParent.js +13 -0
- package/dist/utils/getDefaultPopupParent.js.map +1 -0
- package/dist/utils/hooks/useComponentDidMount.d.ts +3 -0
- package/dist/utils/hooks/useComponentDidMount.d.ts.map +1 -0
- package/dist/utils/hooks/useComponentDidMount.js +5 -0
- package/dist/utils/hooks/useComponentDidMount.js.map +1 -0
- package/dist/utils/hooks/usePubSub.d.ts +2 -0
- package/dist/utils/hooks/usePubSub.d.ts.map +1 -0
- package/dist/utils/hooks/usePubSub.js +12 -0
- package/dist/utils/hooks/usePubSub.js.map +1 -0
- package/package.json +3 -3
- package/src/components/button/Button.story.tsx +9 -0
- package/src/components/button/Button.tsx +10 -2
- package/src/components/button/button.scss +75 -33
- package/src/components/card/Card.test.tsx +0 -6
- package/src/components/card/Card.tsx +12 -7
- package/src/components/card/card.scss +32 -18
- package/src/components/formField/FormField.stories.tsx +9 -1
- package/src/components/formField/FormField.test.tsx +6 -0
- package/src/components/formField/FormField.tsx +5 -0
- package/src/components/formField/formField.scss +20 -8
- package/src/components/formField/inputs/checkbox/CheckboxInput.stories.tsx +22 -0
- package/src/components/formField/inputs/checkbox/CheckboxInput.test.tsx +35 -0
- package/src/components/formField/inputs/checkbox/CheckboxInput.tsx +79 -0
- package/src/components/formField/inputs/checkbox/checkboxInput.scss +96 -0
- package/src/components/formField/inputs/dropdown/Dropdown.stories.tsx +185 -0
- package/src/components/formField/inputs/dropdown/Dropdown.test.tsx +185 -0
- package/src/components/formField/inputs/dropdown/Dropdown.tsx +82 -0
- package/src/components/formField/inputs/dropdown/buttons/dropdownButton/DropdownButton.tsx +41 -0
- package/src/components/formField/inputs/dropdown/buttons/dropdownButton/dropdownButton.scss +12 -0
- package/src/components/formField/inputs/dropdown/dropdown.scss +24 -0
- package/src/components/formField/inputs/dropdown/items/DropdownItemRenderer.tsx +38 -0
- package/src/components/formField/inputs/dropdown/items/dropdownItem/DropdownItem.tsx +49 -0
- package/src/components/formField/inputs/dropdown/items/dropdownItem/dropdownItem.scss +62 -0
- package/src/components/formField/inputs/dropdown/items/dropdownMultiLineItem/DropdownMultiLineItem.tsx +48 -0
- package/src/components/formField/inputs/dropdown/items/dropdownMultiLineItem/dropdownMultiLineItem.scss +52 -0
- package/src/components/formField/inputs/dropdown/wrapper/DropdownWrapper.tsx +138 -0
- package/src/components/formField/inputs/dropdown/wrapper/dropdownWrapper.scss +32 -0
- package/src/components/formField/inputs/input.scss +25 -26
- package/src/components/formField/inputs/number/NumberInput.stories.tsx +25 -0
- package/src/components/formField/inputs/number/NumberInput.test.tsx +33 -0
- package/src/components/formField/inputs/number/NumberInput.tsx +107 -0
- package/src/components/formField/inputs/number/numberInput.scss +68 -0
- package/src/components/formField/inputs/radio/RadioButtonInput.stories.tsx +97 -0
- package/src/components/formField/inputs/radio/RadioButtonInput.test.tsx +37 -0
- package/src/components/formField/inputs/radio/RadioButtonInput.tsx +46 -0
- package/src/components/formField/inputs/radio/radioButtonInput.scss +100 -0
- package/src/components/formField/label/label.scss +5 -1
- package/src/components/heading/Heading.stories.tsx +11 -12
- package/src/components/heading/Heading.tsx +21 -2
- package/src/components/heading/heading.scss +4 -0
- package/src/components/icon/Icon.stories.tsx +8 -0
- package/src/components/icon/Icon.tsx +2 -2
- package/src/components/icon/allowedIcons.tsx +2 -0
- package/src/components/pill/pill.scss +7 -7
- package/src/components/section/Section.stories.tsx +34 -0
- package/src/components/section/Section.test.tsx +308 -0
- package/src/components/section/Section.tsx +131 -0
- package/src/components/section/section.scss +42 -0
- package/src/components/slideover/Slideover.test.tsx +36 -0
- package/src/components/slideover/Slideover.tsx +38 -0
- package/src/components/slideover/slideover.scss +50 -0
- package/src/components/slideoverManager/SlideoverManager.stories.tsx +374 -0
- package/src/components/slideoverManager/SlideoverManager.test.tsx +64 -0
- package/src/components/slideoverManager/SlideoverManager.tsx +51 -0
- package/src/components/slideoverManager/slideoverManager.scss +13 -0
- package/src/components/tabs/Tabs.stories.tsx +92 -0
- package/src/components/tabs/Tabs.test.tsx +220 -0
- package/src/components/tabs/Tabs.tsx +14 -0
- package/src/components/tabs/TabsItem.stories.tsx +55 -0
- package/src/components/tabs/TabsItem.tsx +42 -0
- package/src/components/tabs/tabs.scss +62 -0
- package/src/global.scss +10 -1
- package/src/index.scss +15 -3
- package/src/index.ts +10 -3
- package/src/tokens.scss +1321 -1238
- package/src/utils/Constants.ts +5 -0
- package/src/utils/PopupParentContext.ts +6 -0
- package/src/utils/PubSub.test.ts +303 -0
- package/src/utils/PubSub.ts +34 -0
- package/src/utils/SlideoverUtils.ts +9 -0
- package/src/utils/getDefaultPopupParent.ts +14 -0
- package/src/utils/hooks/useComponentDidMount.ts +5 -0
- package/src/utils/hooks/usePubSub.ts +12 -0
- package/tokens/export-config.json +32 -0
- package/tokens/json/$metadata.json +5 -0
- package/tokens/json/$themes.json +1333 -0
- package/tokens/json/Arbor.json +6329 -0
- package/src/components/heading/HeadingInnerContainer.tsx +0 -18
|
@@ -1,115 +1,108 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { expect, test, describe, vi } from
|
|
3
|
-
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
|
4
|
-
import userEvent from '@testing-library/user-event';
|
|
2
|
+
import { expect, test, describe, vi } from 'vitest';
|
|
5
3
|
import { Tabs } from './Tabs';
|
|
4
|
+
import { render, screen, fireEvent } from '@testing-library/react';
|
|
6
5
|
import '@testing-library/jest-dom/vitest';
|
|
7
|
-
describe('Tabs
|
|
8
|
-
test('renders tabs with
|
|
9
|
-
render(_jsxs(Tabs, {
|
|
10
|
-
|
|
11
|
-
expect(
|
|
12
|
-
expect(
|
|
13
|
-
expect(
|
|
6
|
+
describe('Tabs component', () => {
|
|
7
|
+
test('renders tabs container with correct role', () => {
|
|
8
|
+
render(_jsxs(Tabs, { children: [_jsx(Tabs.Item, { children: "Tab 1" }), _jsx(Tabs.Item, { children: "Tab 2" })] }));
|
|
9
|
+
const tabsContainer = screen.getByRole('tablist');
|
|
10
|
+
expect(tabsContainer).toBeInTheDocument();
|
|
11
|
+
expect(tabsContainer.tagName).toBe('UL');
|
|
12
|
+
expect(tabsContainer).toHaveClass('ds-tabs');
|
|
14
13
|
});
|
|
15
|
-
test('
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
expect(screen.getByText('Content 2')).toBeInTheDocument();
|
|
21
|
-
expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
|
|
14
|
+
test('renders children correctly', () => {
|
|
15
|
+
render(_jsxs(Tabs, { children: [_jsx(Tabs.Item, { children: "Overview" }), _jsx(Tabs.Item, { children: "Details" }), _jsx(Tabs.Item, { children: "Settings" })] }));
|
|
16
|
+
expect(screen.getByText('Overview')).toBeInTheDocument();
|
|
17
|
+
expect(screen.getByText('Details')).toBeInTheDocument();
|
|
18
|
+
expect(screen.getByText('Settings')).toBeInTheDocument();
|
|
22
19
|
});
|
|
23
|
-
test('
|
|
24
|
-
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
const tab2Button = screen.getByText('Tab 2');
|
|
28
|
-
await user.click(tab2Button);
|
|
29
|
-
expect(onTabChange).toHaveBeenCalledWith('tab2');
|
|
20
|
+
test('applies custom className', () => {
|
|
21
|
+
render(_jsx(Tabs, { className: "custom-tabs", children: _jsx(Tabs.Item, { children: "Tab 1" }) }));
|
|
22
|
+
const tabsContainer = screen.getByRole('tablist');
|
|
23
|
+
expect(tabsContainer).toHaveClass('ds-tabs', 'custom-tabs');
|
|
30
24
|
});
|
|
31
|
-
test('
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
tab2Button.focus();
|
|
36
|
-
await user.keyboard('{Enter}');
|
|
37
|
-
expect(screen.getByText('Content 2')).toBeInTheDocument();
|
|
38
|
-
expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
|
|
25
|
+
test('passes through additional props', () => {
|
|
26
|
+
render(_jsx(Tabs, { "data-testid": "tabs-container", "aria-label": "Navigation tabs", children: _jsx(Tabs.Item, { children: "Tab 1" }) }));
|
|
27
|
+
const tabsContainer = screen.getByTestId('tabs-container');
|
|
28
|
+
expect(tabsContainer).toHaveAttribute('aria-label', 'Navigation tabs');
|
|
39
29
|
});
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
expect(
|
|
47
|
-
|
|
30
|
+
});
|
|
31
|
+
describe('TabsItem component', () => {
|
|
32
|
+
test('renders as button by default', () => {
|
|
33
|
+
render(_jsx(Tabs, { children: _jsx(Tabs.Item, { children: "Tab Button" }) }));
|
|
34
|
+
const tabButton = screen.getByRole('tab');
|
|
35
|
+
expect(tabButton.tagName).toBe('BUTTON');
|
|
36
|
+
expect(tabButton).toHaveTextContent('Tab Button');
|
|
37
|
+
});
|
|
38
|
+
test('renders as link when tabElement is link', () => {
|
|
39
|
+
render(_jsx(Tabs, { children: _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#overview' }, children: "Overview Link" }) }));
|
|
40
|
+
const tabLink = screen.getByRole('tab');
|
|
41
|
+
expect(tabLink.tagName).toBe('A');
|
|
42
|
+
expect(tabLink).toHaveAttribute('href', '#overview');
|
|
43
|
+
expect(tabLink).toHaveTextContent('Overview Link');
|
|
48
44
|
});
|
|
49
|
-
test('
|
|
50
|
-
|
|
51
|
-
const
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
expect(
|
|
56
|
-
expect(
|
|
57
|
-
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
|
|
45
|
+
test('applies active state correctly', () => {
|
|
46
|
+
render(_jsxs(Tabs, { children: [_jsx(Tabs.Item, { active: true, children: "Active Tab" }), _jsx(Tabs.Item, { children: "Inactive Tab" })] }));
|
|
47
|
+
const activeTab = screen.getByText('Active Tab');
|
|
48
|
+
const inactiveTab = screen.getByText('Inactive Tab');
|
|
49
|
+
expect(activeTab).toHaveClass('ds-tabs-item__tab--active');
|
|
50
|
+
expect(activeTab).toHaveAttribute('aria-selected', 'true');
|
|
51
|
+
expect(inactiveTab).not.toHaveClass('ds-tabs-item__tab--active');
|
|
52
|
+
expect(inactiveTab).toHaveAttribute('aria-selected', 'false');
|
|
58
53
|
});
|
|
59
|
-
test('
|
|
60
|
-
|
|
61
|
-
const
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
await user.keyboard('{Enter}');
|
|
66
|
-
expect(onTabChange).not.toHaveBeenCalled();
|
|
67
|
-
expect(screen.getByText('Content 1')).toBeInTheDocument();
|
|
68
|
-
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
|
|
54
|
+
test('applies correct CSS classes', () => {
|
|
55
|
+
render(_jsx(Tabs, { children: _jsx(Tabs.Item, { children: "Tab Item" }) }));
|
|
56
|
+
const listItem = screen.getByRole('presentation');
|
|
57
|
+
const tabElement = screen.getByRole('tab');
|
|
58
|
+
expect(listItem).toHaveClass('ds-tabs-item');
|
|
59
|
+
expect(tabElement).toHaveClass('ds-tabs-item__tab');
|
|
69
60
|
});
|
|
70
|
-
test('applies custom className to
|
|
71
|
-
render(_jsx(Tabs, {
|
|
72
|
-
const
|
|
73
|
-
expect(
|
|
61
|
+
test('applies custom className to list item', () => {
|
|
62
|
+
render(_jsx(Tabs, { children: _jsx(Tabs.Item, { className: "custom-tab-item", children: "Tab Item" }) }));
|
|
63
|
+
const listItem = screen.getByRole('presentation');
|
|
64
|
+
expect(listItem).toHaveClass('ds-tabs-item', 'custom-tab-item');
|
|
74
65
|
});
|
|
75
|
-
test('
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
66
|
+
test('handles click events on button tabs', () => {
|
|
67
|
+
const handleClick = vi.fn();
|
|
68
|
+
render(_jsx(Tabs, { children: _jsx(Tabs.Item, { tabElementProps: { onClick: handleClick }, children: "Clickable Tab" }) }));
|
|
69
|
+
fireEvent.click(screen.getByRole('tab'));
|
|
70
|
+
expect(handleClick).toHaveBeenCalledTimes(1);
|
|
79
71
|
});
|
|
80
|
-
test('
|
|
81
|
-
render(
|
|
82
|
-
const
|
|
83
|
-
|
|
84
|
-
expect(tab1Button).toHaveAttribute('role', 'tab');
|
|
85
|
-
expect(tab1Button).toHaveAttribute('aria-selected', 'true');
|
|
86
|
-
expect(tab1Button).toHaveAttribute('aria-controls', 'tabpanel-tab1');
|
|
87
|
-
expect(tab1Button).toHaveAttribute('id', 'tab-tab1');
|
|
88
|
-
expect(tab2Button).toHaveAttribute('role', 'tab');
|
|
89
|
-
expect(tab2Button).toHaveAttribute('aria-selected', 'false');
|
|
90
|
-
expect(tab2Button).toHaveAttribute('aria-controls', 'tabpanel-tab2');
|
|
91
|
-
expect(tab2Button).toHaveAttribute('id', 'tab-tab2');
|
|
92
|
-
const contentPanel = screen.getByText('Content 1');
|
|
93
|
-
expect(contentPanel).toHaveAttribute('role', 'tabpanel');
|
|
94
|
-
expect(contentPanel).toHaveAttribute('id', 'tabpanel-tab1');
|
|
95
|
-
expect(contentPanel).toHaveAttribute('aria-labelledby', 'tab-tab1');
|
|
72
|
+
test('passes through additional props to button', () => {
|
|
73
|
+
render(_jsx(Tabs, { children: _jsx(Tabs.Item, { tabElementProps: { 'disabled': true, 'data-testid': 'tab-button' }, children: "Disabled Tab" }) }));
|
|
74
|
+
const tabButton = screen.getByTestId('tab-button');
|
|
75
|
+
expect(tabButton).toBeDisabled();
|
|
96
76
|
});
|
|
97
|
-
test('
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
77
|
+
test('passes through additional props to link', () => {
|
|
78
|
+
render(_jsx(Tabs, { children: _jsx(Tabs.Item, { tabElement: "link", tabElementProps: {
|
|
79
|
+
'href': '#test',
|
|
80
|
+
'target': '_blank',
|
|
81
|
+
// @ts-expect-error - data-testid is not a valid prop for AnchorHTMLAttributes
|
|
82
|
+
'data-testid': 'tab-link',
|
|
83
|
+
}, children: "Link Tab" }) }));
|
|
84
|
+
const tabLink = screen.getByTestId('tab-link');
|
|
85
|
+
expect(tabLink).toHaveAttribute('href', '#test');
|
|
86
|
+
expect(tabLink).toHaveAttribute('target', '_blank');
|
|
104
87
|
});
|
|
105
88
|
test('renders multiple tabs correctly', () => {
|
|
106
|
-
render(_jsxs(Tabs, {
|
|
107
|
-
|
|
108
|
-
expect(
|
|
109
|
-
expect(
|
|
110
|
-
expect(
|
|
111
|
-
expect(
|
|
112
|
-
expect(
|
|
89
|
+
render(_jsxs(Tabs, { children: [_jsx(Tabs.Item, { active: true, children: "Tab 1" }), _jsx(Tabs.Item, { children: "Tab 2" }), _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#tab3' }, children: "Tab 3" })] }));
|
|
90
|
+
const tabs = screen.getAllByRole('tab');
|
|
91
|
+
expect(tabs).toHaveLength(3);
|
|
92
|
+
expect(tabs[0]).toHaveTextContent('Tab 1');
|
|
93
|
+
expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
|
|
94
|
+
expect(tabs[1]).toHaveTextContent('Tab 2');
|
|
95
|
+
expect(tabs[1]).toHaveAttribute('aria-selected', 'false');
|
|
96
|
+
expect(tabs[2]).toHaveTextContent('Tab 3');
|
|
97
|
+
expect(tabs[2]).toHaveAttribute('href', '#tab3');
|
|
98
|
+
});
|
|
99
|
+
test('handles mixed tab types', () => {
|
|
100
|
+
render(_jsxs(Tabs, { children: [_jsx(Tabs.Item, { active: true, children: "Button Tab" }), _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#link-tab' }, children: "Link Tab" })] }));
|
|
101
|
+
const buttonTab = screen.getByText('Button Tab');
|
|
102
|
+
const linkTab = screen.getByText('Link Tab');
|
|
103
|
+
expect(buttonTab.tagName).toBe('BUTTON');
|
|
104
|
+
expect(linkTab.tagName).toBe('A');
|
|
105
|
+
expect(linkTab).toHaveAttribute('href', '#link-tab');
|
|
113
106
|
});
|
|
114
107
|
});
|
|
115
108
|
//# sourceMappingURL=Tabs.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.test.js","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Tabs.test.js","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { allowedIcons } from '../icon/allowedIcons';
|
|
2
|
+
import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'react';
|
|
3
|
+
type TabsItemProps = {
|
|
4
|
+
active?: boolean;
|
|
5
|
+
iconName?: keyof typeof allowedIcons;
|
|
6
|
+
} & ({
|
|
7
|
+
tabElement?: 'button';
|
|
8
|
+
tabElementProps?: ButtonHTMLAttributes<HTMLButtonElement>;
|
|
9
|
+
} | {
|
|
10
|
+
tabElement?: 'link';
|
|
11
|
+
tabElementProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
12
|
+
}) & HTMLAttributes<HTMLLIElement>;
|
|
13
|
+
export declare const TabsItem: (props: TabsItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export {};
|
|
15
|
+
//# sourceMappingURL=TabsItem.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/TabsItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAExF,KAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;CACtC,GAAG,CACA;IAAE,UAAU,CAAC,EAAE,QAAQ,CAAC;IAAC,eAAe,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAA;CAAE,GACpF;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,eAAe,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAA;CAAE,CACnF,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AAEpC,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,4CA4B5C,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { Icon } from '../icon/Icon';
|
|
4
|
+
export const TabsItem = (props) => {
|
|
5
|
+
const { children, className, tabElement = 'button', tabElementProps, active = false, iconName, ...rest } = props;
|
|
6
|
+
const elementClassNames = classNames('ds-tabs-item__tab', {
|
|
7
|
+
'ds-tabs-item__tab--active': active,
|
|
8
|
+
});
|
|
9
|
+
const sharedProps = {
|
|
10
|
+
'role': 'tab',
|
|
11
|
+
'className': elementClassNames,
|
|
12
|
+
'aria-selected': active,
|
|
13
|
+
};
|
|
14
|
+
return (_jsx("li", { role: "presentation", className: classNames('ds-tabs-item', className), ...rest, children: tabElement === 'button'
|
|
15
|
+
? (_jsxs("button", { ...tabElementProps, ...sharedProps, children: [iconName && _jsx(Icon, { name: iconName, size: 16 }), children] }))
|
|
16
|
+
: (_jsxs("a", { ...tabElementProps, ...sharedProps, children: [iconName && _jsx(Icon, { name: iconName, size: 16 }), children] })) }));
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=TabsItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TabsItem.js","sourceRoot":"","sources":["../../../src/components/tabs/TabsItem.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAW5C,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,GAAG,QAAQ,EAAE,eAAe,EAAE,MAAM,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjH,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE;QACxD,2BAA2B,EAAE,MAAM;KACpC,CAAC,CAAC;IACH,MAAM,WAAW,GAAG;QAClB,MAAM,EAAE,KAAK;QACb,WAAW,EAAE,iBAAiB;QAC9B,eAAe,EAAE,MAAM;KACxB,CAAC;IACF,OAAO,CACL,aAAI,IAAI,EAAC,cAAc,EAAC,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,SAAS,CAAC,KAAM,IAAI,YAC/E,UAAU,KAAK,QAAQ;YACtB,CAAC,CAAC,CACE,qBAAa,eAA2D,KAAM,WAAW,aACtF,QAAQ,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAI,EAC9C,QAAQ,IACF,CACV;YACH,CAAC,CAAC,CACE,gBAAQ,eAA2D,KAAM,WAAW,aACjF,QAAQ,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAI,EAC9C,QAAQ,IACP,CACL,GACF,CACN,CAAC;AACJ,CAAC,CAAC"}
|