@bookjane2/bookjane-design-library 9.0.36 → 9.0.37

package/lib/components/BKJTableMainHeader/BKJTableMainHeader.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export type BKJTableMainHeaderProps = {
+export type BKJTableMainHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
     title: string;
 };
 export declare const BKJTableMainHeader: React.FC<BKJTableMainHeaderProps>;

package/lib/components/BKJTableMainHeader/BKJTableMainHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BKJTableMainHeader.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTableMainHeader/BKJTableMainHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAIhE,CAAC"}
+{"version":3,"file":"BKJTableMainHeader.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTableMainHeader/BKJTableMainHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,OAAO,CACR,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAOhE,CAAC"}

package/lib/components/BKJTableMainHeader/BKJTableMainHeader.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BKJTableMainHeaderWrapper, Text } from './BKJTableMainHeader.styled.js';
-export const BKJTableMainHeader = ({ title }) => (_jsx(BKJTableMainHeaderWrapper, { children: _jsx(Text, { children: title }) }));
+export const BKJTableMainHeader = ({ title, ...rest }) => (_jsx(BKJTableMainHeaderWrapper, { ...rest, children: _jsx(Text, { children: title }) }));
 //# sourceMappingURL=BKJTableMainHeader.js.map

package/lib/components/BKJTableMainHeader/BKJTableMainHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"BKJTableMainHeader.js","sourceRoot":"","sources":["../../../src/components/BKJTableMainHeader/BKJTableMainHeader.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,yBAAyB,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAM9E,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAClF,KAAC,yBAAyB,cACxB,KAAC,IAAI,cAAE,KAAK,GAAQ,GACM,CAC7B,CAAC"}
+{"version":3,"file":"BKJTableMainHeader.js","sourceRoot":"","sources":["../../../src/components/BKJTableMainHeader/BKJTableMainHeader.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,yBAAyB,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAS9E,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EACpE,KAAK,EACL,GAAG,IAAI,EACR,EAAE,EAAE,CAAC,CACJ,KAAC,yBAAyB,OAAK,IAAI,YACjC,KAAC,IAAI,cAAE,KAAK,GAAQ,GACM,CAC7B,CAAC"}

package/lib/components/BKJTableMainHeader/BKJTableMainHeader.stories.d.ts

@@ -1,3 +1,4 @@
+import { StoryFn } from '@storybook/react';
 import { BKJTableMainHeaderProps } from './BKJTableMainHeader.js';
 declare const _default: {
     title: string;
@@ -5,4 +6,5 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, BKJTableMainHeaderProps>;
+export declare const LabelledTable: StoryFn;
 //# sourceMappingURL=BKJTableMainHeader.stories.d.ts.map

package/lib/components/BKJTableMainHeader/BKJTableMainHeader.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BKJTableMainHeader.stories.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTableMainHeader/BKJTableMainHeader.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;;;;;AAGnF,wBAGE;AAQF,eAAO,MAAM,OAAO,mHAAoB,CAAC"}
+{"version":3,"file":"BKJTableMainHeader.stories.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTableMainHeader/BKJTableMainHeader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAsB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;;;;;AAGnF,wBAGE;AAQF,eAAO,MAAM,OAAO,mHAAoB,CAAC;AAKzC,eAAO,MAAM,aAAa,EAAE,OAgB3B,CAAC"}

package/lib/components/BKJTableMainHeader/BKJTableMainHeader.stories.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BKJTableMainHeader } from './BKJTableMainHeader.js';
 import { BKJTheme, BKJThemeProvider } from '../../providers/BKJThemeProvider/index.js';
 export default {
@@ -10,4 +10,13 @@ export const Default = Template.bind({});
 Default.args = {
     title: 'Main Header',
 };
+export const LabelledTable = () => (_jsxs(BKJThemeProvider, { theme: BKJTheme, children: [_jsx(BKJTableMainHeader, { id: "shifts-title", title: "Shifts this week" }), _jsx("table", { "aria-labelledby": "shifts-title", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: "10:00 AM \u2014 2:00 PM" }), _jsx("td", { children: "Toronto" })] }), _jsxs("tr", { children: [_jsx("td", { children: "3:00 PM \u2014 7:00 PM" }), _jsx("td", { children: "Mississauga" })] })] }) })] }));
+LabelledTable.parameters = {
+    docs: {
+        description: {
+            story: "When the title sits visually outside an adjacent `<table>` and you want the table's accessible name to be the title text, give the `BKJTableMainHeader` an `id` and reference it from the `<table>` via `aria-labelledby`. The accessible-name computation traverses the reference and resolves to the title's text content.",
+        },
+    },
+    controls: { disable: true },
+};
 //# sourceMappingURL=BKJTableMainHeader.stories.js.map

package/lib/components/BKJTableMainHeader/BKJTableMainHeader.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"BKJTableMainHeader.stories.js","sourceRoot":"","sources":["../../../src/components/BKJTableMainHeader/BKJTableMainHeader.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAA2B,MAAM,sBAAsB,CAAC;AACnF,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAE9E,eAAe;IACb,KAAK,EAAE,mCAAmC;IAC1C,SAAS,EAAE,kBAAkB;CAC9B,CAAC;AAEF,MAAM,QAAQ,GAAqC,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACnE,KAAC,gBAAgB,IAAC,KAAK,EAAE,QAAQ,YAC/B,KAAC,kBAAkB,OAAK,KAAK,GAAI,GAChB,CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,aAAa;CACrB,CAAC"}
+{"version":3,"file":"BKJTableMainHeader.stories.js","sourceRoot":"","sources":["../../../src/components/BKJTableMainHeader/BKJTableMainHeader.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAA2B,MAAM,sBAAsB,CAAC;AACnF,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAE9E,eAAe;IACb,KAAK,EAAE,mCAAmC;IAC1C,SAAS,EAAE,kBAAkB;CAC9B,CAAC;AAEF,MAAM,QAAQ,GAAqC,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACnE,KAAC,gBAAgB,IAAC,KAAK,EAAE,QAAQ,YAC/B,KAAC,kBAAkB,OAAK,KAAK,GAAI,GAChB,CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,aAAa;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAY,GAAG,EAAE,CAAC,CAC1C,MAAC,gBAAgB,IAAC,KAAK,EAAE,QAAQ,aAC/B,KAAC,kBAAkB,IAAC,EAAE,EAAC,cAAc,EAAC,KAAK,EAAC,kBAAkB,GAAG,EACjE,mCAAuB,cAAc,YACnC,4BACE,yBACE,mDAA2B,EAC3B,mCAAgB,IACb,EACL,yBACE,kDAA0B,EAC1B,uCAAoB,IACjB,IACC,GACF,IACS,CACpB,CAAC;AAEF,aAAa,CAAC,UAAU,GAAG;IACzB,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EACH,8TAA8T;SACjU;KACF;IACD,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;CAC5B,CAAC"}

package/lib/components/BKJTableMainHeader/BKJTableMainHeader.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=BKJTableMainHeader.test.d.ts.map

package/lib/components/BKJTableMainHeader/BKJTableMainHeader.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BKJTableMainHeader.test.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTableMainHeader/BKJTableMainHeader.test.tsx"],"names":[],"mappings":""}

package/lib/components/BKJTableMainHeader/BKJTableMainHeader.test.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { screen } from '@testing-library/react';
+import { renderAndCheckA11y, renderWithTheme } from '../../test-utils/index.js';
+import { BKJTableMainHeader } from './BKJTableMainHeader.js';
+describe('BKJTableMainHeader', () => {
+    describe('Accessibility', () => {
+        it('has no accessibility violations on the default render', async () => {
+            const { axeResults } = await renderAndCheckA11y(_jsx(BKJTableMainHeader, { title: "Shifts this week" }));
+            expect(axeResults).toHaveNoViolations();
+        });
+        it('has no accessibility violations on the labelled-table render', async () => {
+            const { axeResults } = await renderAndCheckA11y(_jsxs(_Fragment, { children: [_jsx(BKJTableMainHeader, { id: "shifts-title", title: "Shifts this week" }), _jsx("table", { "aria-labelledby": "shifts-title", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: "10:00 AM \u2014 2:00 PM" }), _jsx("td", { children: "Toronto" })] }), _jsxs("tr", { children: [_jsx("td", { children: "3:00 PM \u2014 7:00 PM" }), _jsx("td", { children: "Mississauga" })] })] }) })] }));
+            expect(axeResults).toHaveNoViolations();
+        });
+    });
+    describe('HTML attribute forwarding', () => {
+        it('forwards id to the wrapping <div> byte-identically', () => {
+            const { getByText } = renderWithTheme(_jsx(BKJTableMainHeader, { id: "shifts-title", title: "Shifts this week" }));
+            const wrapper = getByText('Shifts this week').closest('div');
+            expect(wrapper).toHaveAttribute('id', 'shifts-title');
+            expect(getByText('Shifts this week')).not.toHaveAttribute('id');
+        });
+        it('forwards className to the wrapping <div> while preserving the styled-components class', () => {
+            const { getByText } = renderWithTheme(_jsx(BKJTableMainHeader, { className: "my-custom-class", title: "Shifts this week" }));
+            const wrapper = getByText('Shifts this week').closest('div');
+            expect(wrapper).toHaveClass('my-custom-class');
+            expect(wrapper?.className).toMatch(/sc-[a-zA-Z0-9]+/);
+        });
+        it('forwards data-* attributes to the wrapping <div> byte-identically', () => {
+            const { getByText } = renderWithTheme(_jsx(BKJTableMainHeader, { "data-testid": "shifts-header", title: "Shifts this week" }));
+            const wrapper = getByText('Shifts this week').closest('div');
+            expect(wrapper).toHaveAttribute('data-testid', 'shifts-header');
+        });
+        it('exposes the title as the accessible name of an adjacent <table aria-labelledby>', () => {
+            renderWithTheme(_jsxs(_Fragment, { children: [_jsx(BKJTableMainHeader, { id: "shifts-title", title: "Shifts this week" }), _jsx("table", { "aria-labelledby": "shifts-title", children: _jsx("tbody", { children: _jsxs("tr", { children: [_jsx("td", { children: "10:00 AM \u2014 2:00 PM" }), _jsx("td", { children: "Toronto" })] }) }) })] }));
+            expect(screen.getByRole('table', { name: 'Shifts this week' })).toBeInTheDocument();
+        });
+    });
+});
+//# sourceMappingURL=BKJTableMainHeader.test.js.map

package/lib/components/BKJTableMainHeader/BKJTableMainHeader.test.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bookjane2/bookjane-design-library",
-  "version": "9.0.36",
+  "version": "9.0.37",
   "main": "./lib/index.js",
   "typings": "./lib/index.d.ts",
   "engines": {