@arbor-education/design-system.components 0.0.2 → 0.0.3

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+type TabsProps = {
+    children: ReactNode;
+    defaultActiveTab?: string;
+    className?: string;
+    onTabChange?: (tabId: string) => void;
+};
+export declare const Tabs: {
+    ({ children, defaultActiveTab, className, onTabChange, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, tabId, label, disabled, className, }: TabsItemProps) => import("react/jsx-runtime").JSX.Element;
+};
+type TabsItemProps = {
+    children: ReactNode;
+    tabId: string;
+    label: string;
+    disabled?: boolean;
+    className?: string;
+};
+export declare const TabsItem: ({ children, tabId, label, disabled, className, }: TabsItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/components/tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAc,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBnF,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,IAAI;8DAKd,SAAS;6DA+BT,aAAa;CAhBf,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,kDAMtB,aAAa,4CAiDf,CAAC"}

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import React, { createContext, useContext, useState } from 'react';
+const TabsContext = createContext(undefined);
+const useTabsContext = () => {
+    const context = useContext(TabsContext);
+    if (!context) {
+        throw new Error('Tabs.Item must be used within a Tabs component');
+    }
+    return context;
+};
+export const Tabs = ({ children, defaultActiveTab, className = '', onTabChange, }) => {
+    const [activeTab, setActiveTab] = useState(defaultActiveTab || '');
+    const handleTabChange = (tabId) => {
+        setActiveTab(tabId);
+        onTabChange?.(tabId);
+    };
+    return (_jsx(TabsContext.Provider, { value: { activeTab, setActiveTab: handleTabChange }, children: _jsx("div", { className: classNames('ds-tabs', className), children: children }) }));
+};
+export const TabsItem = ({ children, tabId, label, disabled = false, className = '', }) => {
+    const { activeTab, setActiveTab } = useTabsContext();
+    const isActive = activeTab === tabId;
+    const handleClick = () => {
+        if (!disabled) {
+            setActiveTab(tabId);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            if (!disabled) {
+                setActiveTab(tabId);
+            }
+        }
+    };
+    return (_jsxs("div", { className: classNames('ds-tabs__item', className), children: [_jsx("button", { className: classNames('ds-tabs__tab', {
+                    'ds-tabs__tab--active': isActive,
+                    'ds-tabs__tab--disabled': disabled,
+                }), onClick: handleClick, onKeyDown: handleKeyDown, disabled: disabled, role: "tab", "aria-selected": isActive, "aria-controls": `tabpanel-${tabId}`, id: `tab-${tabId}`, tabIndex: isActive ? 0 : -1, children: label }), isActive && (_jsx("div", { className: "ds-tabs__content", role: "tabpanel", id: `tabpanel-${tabId}`, "aria-labelledby": `tab-${tabId}`, children: children }))] }));
+};
+// Compound component pattern
+Tabs.Item = TabsItem;
+//# sourceMappingURL=Tabs.js.map

package/dist/components/tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"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"}

package/dist/components/tabs/Tabs.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tabs } from './Tabs';
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithDisabledTab: Story;
+export declare const ManyTabs: Story;
+export declare const WithRichContent: Story;
+export declare const CustomStyling: Story;
+//# sourceMappingURL=Tabs.stories.d.ts.map

package/dist/components/tabs/Tabs.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAyB3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA0B7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA4CtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA2D7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAqC3B,CAAC"}

package/dist/components/tabs/Tabs.stories.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs } from './Tabs';
+const meta = {
+    title: 'Components/Tabs',
+    component: Tabs,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: 'A flexible tabs component with compound component pattern. Use Tabs.Item to create individual tab items.',
+            },
+        },
+    },
+    argTypes: {
+        defaultActiveTab: {
+            control: 'text',
+            description: 'The ID of the tab that should be active by default',
+        },
+        onTabChange: {
+            action: 'tab changed',
+            description: 'Callback function called when the active tab changes',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class name for the tabs container',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        defaultActiveTab: 'tab1',
+    },
+    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Overview", children: _jsxs("div", { children: [_jsx("h3", { children: "Overview" }), _jsx("p", { children: "This is the overview tab content. It contains general information about the topic." })] }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Details", children: _jsxs("div", { children: [_jsx("h3", { children: "Details" }), _jsx("p", { children: "This is the details tab content. It provides more specific information and data." })] }) }), _jsx(Tabs.Item, { tabId: "tab3", label: "Settings", children: _jsxs("div", { children: [_jsx("h3", { children: "Settings" }), _jsx("p", { children: "This is the settings tab content. It contains configuration options and preferences." })] }) })] })),
+};
+export const WithDisabledTab = {
+    args: {
+        defaultActiveTab: 'tab1',
+    },
+    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Available", children: _jsxs("div", { children: [_jsx("h3", { children: "Available" }), _jsx("p", { children: "This tab is available and can be clicked." })] }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Disabled", disabled: true, children: _jsxs("div", { children: [_jsx("h3", { children: "Disabled" }), _jsx("p", { children: "This tab is disabled and cannot be clicked." })] }) }), _jsx(Tabs.Item, { tabId: "tab3", label: "Another Available", children: _jsxs("div", { children: [_jsx("h3", { children: "Another Available" }), _jsx("p", { children: "This tab is also available and can be clicked." })] }) })] })),
+};
+export const ManyTabs = {
+    args: {
+        defaultActiveTab: 'tab3',
+    },
+    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "First", children: _jsxs("div", { children: [_jsx("h3", { children: "First Tab" }), _jsx("p", { children: "Content for the first tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Second", children: _jsxs("div", { children: [_jsx("h3", { children: "Second Tab" }), _jsx("p", { children: "Content for the second tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab3", label: "Third", children: _jsxs("div", { children: [_jsx("h3", { children: "Third Tab" }), _jsx("p", { children: "Content for the third tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab4", label: "Fourth", children: _jsxs("div", { children: [_jsx("h3", { children: "Fourth Tab" }), _jsx("p", { children: "Content for the fourth tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab5", label: "Fifth", children: _jsxs("div", { children: [_jsx("h3", { children: "Fifth Tab" }), _jsx("p", { children: "Content for the fifth tab." })] }) }), _jsx(Tabs.Item, { tabId: "tab6", label: "Sixth", children: _jsxs("div", { children: [_jsx("h3", { children: "Sixth Tab" }), _jsx("p", { children: "Content for the sixth tab." })] }) })] })),
+};
+export const WithRichContent = {
+    args: {
+        defaultActiveTab: 'dashboard',
+    },
+    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "dashboard", label: "Dashboard", children: _jsxs("div", { children: [_jsx("h3", { children: "Dashboard" }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginTop: '16px' }, children: [_jsxs("div", { style: { padding: '16px', backgroundColor: '#f5f5f5', borderRadius: '8px' }, children: [_jsx("h4", { children: "Total Users" }), _jsx("p", { style: { fontSize: '24px', fontWeight: 'bold', margin: '8px 0' }, children: "1,234" })] }), _jsxs("div", { style: { padding: '16px', backgroundColor: '#f5f5f5', borderRadius: '8px' }, children: [_jsx("h4", { children: "Active Sessions" }), _jsx("p", { style: { fontSize: '24px', fontWeight: 'bold', margin: '8px 0' }, children: "567" })] })] })] }) }), _jsx(Tabs.Item, { tabId: "analytics", label: "Analytics", children: _jsxs("div", { children: [_jsx("h3", { children: "Analytics" }), _jsx("p", { children: "View detailed analytics and reports for your application." }), _jsxs("ul", { style: { marginTop: '16px' }, children: [_jsx("li", { children: "Page views" }), _jsx("li", { children: "User engagement" }), _jsx("li", { children: "Conversion rates" }), _jsx("li", { children: "Performance metrics" })] })] }) }), _jsx(Tabs.Item, { tabId: "settings", label: "Settings", children: _jsxs("div", { children: [_jsx("h3", { children: "Settings" }), _jsxs("form", { style: { marginTop: '16px' }, children: [_jsxs("div", { style: { marginBottom: '16px' }, children: [_jsx("label", { htmlFor: "theme", children: "Theme:" }), _jsxs("select", { id: "theme", style: { marginLeft: '8px', padding: '4px 8px' }, children: [_jsx("option", { children: "Light" }), _jsx("option", { children: "Dark" }), _jsx("option", { children: "Auto" })] })] }), _jsx("div", { style: { marginBottom: '16px' }, children: _jsxs("label", { children: [_jsx("input", { type: "checkbox", style: { marginRight: '8px' } }), "Enable notifications"] }) }), _jsx("button", { type: "submit", style: { padding: '8px 16px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px' }, children: "Save Settings" })] })] }) })] })),
+};
+export const CustomStyling = {
+    args: {
+        defaultActiveTab: 'tab1',
+        className: 'custom-tabs-container',
+    },
+    render: (args) => (_jsxs("div", { children: [_jsx("style", { children: `
+        .custom-tabs-container {
+          border: 2px solid #e0e0e0;
+          border-radius: 8px;
+          padding: 16px;
+        }
+        .custom-tabs-container .ds-tabs__tab {
+          border-radius: 4px;
+          margin-right: 4px;
+        }
+        .custom-tabs-container .ds-tabs__tab--active {
+          background-color: #f0f8ff;
+        }
+      ` }), _jsxs(Tabs, { ...args, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Styled Tab 1", children: _jsxs("div", { children: [_jsx("h3", { children: "Custom Styled Tab" }), _jsx("p", { children: "This tab has custom styling applied to the container." })] }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Styled Tab 2", children: _jsxs("div", { children: [_jsx("h3", { children: "Another Custom Tab" }), _jsx("p", { children: "Notice the custom border and styling around the tabs container." })] }) })] })] })),
+};
+//# sourceMappingURL=Tabs.stories.js.map

package/dist/components/tabs/Tabs.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/tabs/Tabs.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=Tabs.test.d.ts.map

package/dist/components/tabs/Tabs.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.test.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.test.tsx"],"names":[],"mappings":"AAIA,OAAO,kCAAkC,CAAC"}

package/dist/components/tabs/Tabs.test.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { expect, test, describe, vi } from "vitest";
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Tabs } from './Tabs';
+import '@testing-library/jest-dom/vitest';
+describe('Tabs Component', () => {
+    test('renders tabs with default active tab', () => {
+        render(_jsxs(Tabs, { defaultActiveTab: "tab1", children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", children: _jsx("div", { children: "Content 2" }) })] }));
+        expect(screen.getByText('Tab 1')).toBeInTheDocument();
+        expect(screen.getByText('Tab 2')).toBeInTheDocument();
+        expect(screen.getByText('Content 1')).toBeInTheDocument();
+        expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+    });
+    test('switches active tab when clicked', async () => {
+        const user = userEvent.setup();
+        render(_jsxs(Tabs, { defaultActiveTab: "tab1", children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", children: _jsx("div", { children: "Content 2" }) })] }));
+        const tab2Button = screen.getByText('Tab 2');
+        await user.click(tab2Button);
+        expect(screen.getByText('Content 2')).toBeInTheDocument();
+        expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+    });
+    test('calls onTabChange when tab is switched', async () => {
+        const user = userEvent.setup();
+        const onTabChange = vi.fn();
+        render(_jsxs(Tabs, { defaultActiveTab: "tab1", onTabChange: onTabChange, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", children: _jsx("div", { children: "Content 2" }) })] }));
+        const tab2Button = screen.getByText('Tab 2');
+        await user.click(tab2Button);
+        expect(onTabChange).toHaveBeenCalledWith('tab2');
+    });
+    test('handles keyboard navigation', async () => {
+        const user = userEvent.setup();
+        render(_jsxs(Tabs, { defaultActiveTab: "tab1", children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", children: _jsx("div", { children: "Content 2" }) })] }));
+        const tab2Button = screen.getByText('Tab 2');
+        tab2Button.focus();
+        await user.keyboard('{Enter}');
+        expect(screen.getByText('Content 2')).toBeInTheDocument();
+        expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+    });
+    test('handles space key navigation', async () => {
+        const user = userEvent.setup();
+        render(_jsxs(Tabs, { defaultActiveTab: "tab1", children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", children: _jsx("div", { children: "Content 2" }) })] }));
+        const tab2Button = screen.getByText('Tab 2');
+        tab2Button.focus();
+        await user.keyboard(' ');
+        expect(screen.getByText('Content 2')).toBeInTheDocument();
+        expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+    });
+    test('disabled tab does not respond to clicks', async () => {
+        const user = userEvent.setup();
+        const onTabChange = vi.fn();
+        render(_jsxs(Tabs, { defaultActiveTab: "tab1", onTabChange: onTabChange, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", disabled: true, children: _jsx("div", { children: "Content 2" }) })] }));
+        const tab2Button = screen.getByText('Tab 2');
+        await user.click(tab2Button);
+        expect(onTabChange).not.toHaveBeenCalled();
+        expect(screen.getByText('Content 1')).toBeInTheDocument();
+        expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+    });
+    test('disabled tab does not respond to keyboard events', async () => {
+        const user = userEvent.setup();
+        const onTabChange = vi.fn();
+        render(_jsxs(Tabs, { defaultActiveTab: "tab1", onTabChange: onTabChange, children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", disabled: true, children: _jsx("div", { children: "Content 2" }) })] }));
+        const tab2Button = screen.getByText('Tab 2');
+        tab2Button.focus();
+        await user.keyboard('{Enter}');
+        expect(onTabChange).not.toHaveBeenCalled();
+        expect(screen.getByText('Content 1')).toBeInTheDocument();
+        expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+    });
+    test('applies custom className to tabs container', () => {
+        render(_jsx(Tabs, { className: "custom-tabs", children: _jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }) }));
+        const tabsContainer = screen.getByText('Tab 1').closest('.ds-tabs');
+        expect(tabsContainer).toHaveClass('custom-tabs');
+    });
+    test('applies custom className to tab item', () => {
+        render(_jsx(Tabs, { children: _jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", className: "custom-tab-item", children: _jsx("div", { children: "Content 1" }) }) }));
+        const tabItem = screen.getByText('Tab 1').closest('.ds-tabs__item');
+        expect(tabItem).toHaveClass('custom-tab-item');
+    });
+    test('has proper ARIA attributes', () => {
+        render(_jsxs(Tabs, { defaultActiveTab: "tab1", children: [_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Tab 2", children: _jsx("div", { children: "Content 2" }) })] }));
+        const tab1Button = screen.getByText('Tab 1');
+        const tab2Button = screen.getByText('Tab 2');
+        expect(tab1Button).toHaveAttribute('role', 'tab');
+        expect(tab1Button).toHaveAttribute('aria-selected', 'true');
+        expect(tab1Button).toHaveAttribute('aria-controls', 'tabpanel-tab1');
+        expect(tab1Button).toHaveAttribute('id', 'tab-tab1');
+        expect(tab2Button).toHaveAttribute('role', 'tab');
+        expect(tab2Button).toHaveAttribute('aria-selected', 'false');
+        expect(tab2Button).toHaveAttribute('aria-controls', 'tabpanel-tab2');
+        expect(tab2Button).toHaveAttribute('id', 'tab-tab2');
+        const contentPanel = screen.getByText('Content 1');
+        expect(contentPanel).toHaveAttribute('role', 'tabpanel');
+        expect(contentPanel).toHaveAttribute('id', 'tabpanel-tab1');
+        expect(contentPanel).toHaveAttribute('aria-labelledby', 'tab-tab1');
+    });
+    test('throws error when Tabs.Item is used outside Tabs context', () => {
+        // Suppress console.error for this test since we expect an error
+        const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+        expect(() => {
+            render(_jsx(Tabs.Item, { tabId: "tab1", label: "Tab 1", children: _jsx("div", { children: "Content 1" }) }));
+        }).toThrow('Tabs.Item must be used within a Tabs component');
+        consoleSpy.mockRestore();
+    });
+    test('renders multiple tabs correctly', () => {
+        render(_jsxs(Tabs, { defaultActiveTab: "tab2", children: [_jsx(Tabs.Item, { tabId: "tab1", label: "First Tab", children: _jsx("div", { children: "First Content" }) }), _jsx(Tabs.Item, { tabId: "tab2", label: "Second Tab", children: _jsx("div", { children: "Second Content" }) }), _jsx(Tabs.Item, { tabId: "tab3", label: "Third Tab", children: _jsx("div", { children: "Third Content" }) })] }));
+        expect(screen.getByText('First Tab')).toBeInTheDocument();
+        expect(screen.getByText('Second Tab')).toBeInTheDocument();
+        expect(screen.getByText('Third Tab')).toBeInTheDocument();
+        expect(screen.getByText('Second Content')).toBeInTheDocument();
+        expect(screen.queryByText('First Content')).not.toBeInTheDocument();
+        expect(screen.queryByText('Third Content')).not.toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=Tabs.test.js.map

package/dist/components/tabs/Tabs.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.test.js","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.test.tsx"],"names":[],"mappings":"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"}

package/dist/index.css

@@ -1455,7 +1455,7 @@ h4.ds-heading {
 
 .ds-card__container {
   display: flex;
-  width: 348px;
+  width: 100%;
   padding: var(--card-spacing-y, 24px) var(--card-spacing-x, 24px);
   flex-direction: column;
   align-items: flex-start;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arbor-education/design-system.components",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "The component library for the design system (the baby)",
   "main": "dist/index.js",
   "repository": {

package/src/components/card/card.scss

@@ -1,6 +1,6 @@
 .ds-card__container {
   display: flex;
-  width: 348px;
+  width: 100%;
   padding: var(--card-spacing-y, 24px) var(--card-spacing-x, 24px);
   flex-direction: column;
   align-items: flex-start;