@bookjane2/bookjane-design-library 8.3.1 → 8.3.2

package/lib/components/BKJTypography/BKJTypography.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import { IBKJTypographyProps } from './BKJTypography.types.js';
-export declare const BKJTypography: FC<IBKJTypographyProps>;
+export declare const BKJTypography: ({ variant, element, as: asProp, children, ...rest }: IBKJTypographyProps) => JSX.Element;
 //# sourceMappingURL=BKJTypography.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BKJTypography.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,mBAAmB,CAOjD,CAAC"}
+{"version":3,"file":"BKJTypography.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,eAAO,MAAM,aAAa,GAAI,qDAM3B,mBAAmB,gBAOrB,CAAC"}

package/lib/components/BKJTypography/BKJTypography.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { typographyComponents } from './BKJTypography.styled.js';
-export const BKJTypography = ({ variant = 'Body', element = 'span', children, }) => {
-    const Component = typographyComponents[element];
-    return _jsx(Component, { "$variant": variant, children: children });
+import { StyledTypography } from './BKJTypography.styled.js';
+export const BKJTypography = ({ variant = 'Body', element = 'span', as: asProp, children, ...rest }) => {
+    const resolvedAs = asProp || element;
+    return (_jsx(StyledTypography, { as: resolvedAs, "$variant": variant, ...rest, children: children }));
 };
 //# sourceMappingURL=BKJTypography.js.map

package/lib/components/BKJTypography/BKJTypography.js.map

@@ -1 +1 @@
-{"version":3,"file":"BKJTypography.js","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,CAAC,MAAM,aAAa,GAA4B,CAAC,EACrD,OAAO,GAAG,MAAM,EAChB,OAAO,GAAG,MAAM,EAChB,QAAQ,GACT,EAAe,EAAE;IAChB,MAAM,SAAS,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAChD,OAAO,KAAC,SAAS,gBAAW,OAAO,YAAG,QAAQ,GAAa,CAAC;AAC9D,CAAC,CAAC"}
+{"version":3,"file":"BKJTypography.js","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAG1D,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,OAAO,GAAG,MAAM,EAChB,OAAO,GAAG,MAAM,EAChB,EAAE,EAAE,MAAM,EACV,QAAQ,EACR,GAAG,IAAI,EACa,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,MAAM,IAAI,OAAO,CAAC;IACrC,OAAO,CACL,KAAC,gBAAgB,IAAC,EAAE,EAAE,UAAU,cAAY,OAAO,KAAM,IAAI,YAC1D,QAAQ,GACQ,CACpB,CAAC;AACJ,CAAC,CAAC"}

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

@@ -1,7 +1,8 @@
+import { StoryFn } from '@storybook/react';
 import { IBKJTypographyProps } from './BKJTypography.types.js';
 declare const _default: {
     title: string;
-    component: import("react").FC<IBKJTypographyProps>;
+    component: ({ variant, element, as: asProp, children, ...rest }: IBKJTypographyProps) => JSX.Element;
     argTypes: {
         variant: {
             name: string;
@@ -11,6 +12,10 @@ declare const _default: {
             name: string;
             options: string[];
         };
+        as: {
+            name: string;
+            options: string[];
+        };
         children: {
             name: string;
             type: string;
@@ -19,4 +24,5 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, IBKJTypographyProps>;
+export declare const HeadingHierarchy: StoryFn;
 //# sourceMappingURL=BKJTypography.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BKJTypography.stories.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;;;;;;;;;;;;;;;;;;AAE5D,wBA6BE;AAIF,eAAO,MAAM,OAAO,+GAAoB,CAAC"}
+{"version":3,"file":"BKJTypography.stories.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;;;;;;;;;;;;;;;;;;;;;;AAE5D,wBA6CE;AAIF,eAAO,MAAM,OAAO,+GAAoB,CAAC;AAMzC,eAAO,MAAM,gBAAgB,EAAE,OAqB9B,CAAC"}

package/lib/components/BKJTypography/BKJTypography.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 { BKJTypography } from './index.js';
 export default {
     title: 'Basic Elements/BKJTypography',
@@ -24,6 +24,22 @@ export default {
             name: 'Element',
             options: ['h1', 'h2', 'h3', 'h4', 'span', 'b', 'p'],
         },
+        as: {
+            name: 'As (Semantic Element)',
+            options: [
+                'h1',
+                'h2',
+                'h3',
+                'h4',
+                'h5',
+                'h6',
+                'p',
+                'span',
+                'label',
+                'legend',
+                'caption',
+            ],
+        },
         children: {
             name: 'Text',
             type: 'string',
@@ -35,4 +51,8 @@ export const Default = Template.bind({});
 Default.args = {
     children: 'Lorem ipsum',
 };
+export const HeadingHierarchy = () => (_jsxs("div", { children: [_jsx(BKJTypography, { as: "h1", variant: "H1", children: "Heading Level 1 (h1)" }), _jsx(BKJTypography, { as: "h2", variant: "H2", children: "Heading Level 2 (h2)" }), _jsx(BKJTypography, { as: "h3", variant: "H3", children: "Heading Level 3 (h3)" }), _jsx(BKJTypography, { as: "h4", variant: "H4", children: "Heading Level 4 (h4)" }), _jsx(BKJTypography, { as: "h5", variant: "Bold", children: "Heading Level 5 (h5)" }), _jsx(BKJTypography, { as: "h6", variant: "CaptionBold", children: "Heading Level 6 (h6)" })] }));
+HeadingHierarchy.parameters = {
+    controls: { disable: true },
+};
 //# sourceMappingURL=BKJTypography.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BKJTypography.stories.js","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,CAAC;AAGlC,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE;gBACP,IAAI;gBACJ,IAAI;gBACJ,IAAI;gBACJ,IAAI;gBACJ,MAAM;gBACN,eAAe;gBACf,MAAM;gBACN,SAAS;gBACT,aAAa;gBACb,QAAQ;gBACR,UAAU;aACX;SACF;QACD,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC;SACpD;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,QAAQ;SACf;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAiC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,aAAa,OAAK,IAAI,GAAI,CAAC;AAErF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,OAAO,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,aAAa;CACxB,CAAC"}
+{"version":3,"file":"BKJTypography.stories.js","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,CAAC;AAGlC,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE;gBACP,IAAI;gBACJ,IAAI;gBACJ,IAAI;gBACJ,IAAI;gBACJ,MAAM;gBACN,eAAe;gBACf,MAAM;gBACN,SAAS;gBACT,aAAa;gBACb,QAAQ;gBACR,UAAU;aACX;SACF;QACD,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC;SACpD;QACD,EAAE,EAAE;YACF,IAAI,EAAE,uBAAuB;YAC7B,OAAO,EAAE;gBACP,IAAI;gBACJ,IAAI;gBACJ,IAAI;gBACJ,IAAI;gBACJ,IAAI;gBACJ,IAAI;gBACJ,GAAG;gBACH,MAAM;gBACN,OAAO;gBACP,QAAQ;gBACR,SAAS;aACV;SACF;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,QAAQ;SACf;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAiC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,aAAa,OAAK,IAAI,GAAI,CAAC;AAErF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,OAAO,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,aAAa;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAY,GAAG,EAAE,CAAC,CAC7C,0BACE,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,qCAEnB,EAChB,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,qCAEnB,EAChB,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,qCAEnB,EAChB,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,qCAEnB,EAChB,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,qCAErB,EAChB,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,aAAa,qCAE5B,IACZ,CACP,CAAC;AAEF,gBAAgB,CAAC,UAAU,GAAG;IAC5B,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;CAC5B,CAAC"}

package/lib/components/BKJTypography/BKJTypography.styled.d.ts

@@ -1,11 +1,3 @@
-import { IBKJTypographyStyledElement } from './BKJTypography.types.js';
-export declare const typographyComponents: {
-    h1: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, IBKJTypographyStyledElement>> & string;
-    h2: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, IBKJTypographyStyledElement>> & string;
-    h3: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, IBKJTypographyStyledElement>> & string;
-    h4: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, IBKJTypographyStyledElement>> & string;
-    span: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, IBKJTypographyStyledElement>> & string;
-    b: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, IBKJTypographyStyledElement>> & string;
-    p: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, IBKJTypographyStyledElement>> & string;
-};
+import { IStyledTypographyProps } from './BKJTypography.types.js';
+export declare const StyledTypography: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, IStyledTypographyProps>> & string;
 //# sourceMappingURL=BKJTypography.styled.d.ts.map

package/lib/components/BKJTypography/BKJTypography.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BKJTypography.styled.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.styled.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AAEpE,eAAO,MAAM,oBAAoB;;;;;;;;CAsBhC,CAAC"}
+{"version":3,"file":"BKJTypography.styled.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.styled.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,eAAO,MAAM,gBAAgB,6PAK5B,CAAC"}

package/lib/components/BKJTypography/BKJTypography.styled.js

@@ -1,25 +1,8 @@
 import styled from 'styled-components';
-export const typographyComponents = {
-    h1: styled.h1 `
-    ${({ theme, $variant }) => theme.typography[$variant]};
-  `,
-    h2: styled.h2 `
-    ${({ theme, $variant }) => theme.typography[$variant]};
-  `,
-    h3: styled.h3 `
-    ${({ theme, $variant }) => theme.typography[$variant]};
-  `,
-    h4: styled.h4 `
-    ${({ theme, $variant }) => theme.typography[$variant]};
-  `,
-    span: styled.span `
-    ${({ theme, $variant }) => theme.typography[$variant]};
-  `,
-    b: styled.b `
-    ${({ theme, $variant }) => theme.typography[$variant]};
-  `,
-    p: styled.p `
-    ${({ theme, $variant }) => theme.typography[$variant]};
-  `,
-};
+export const StyledTypography = styled.span `
+  margin: 0;
+  padding: 0;
+  border: 0;
+  ${({ theme, $variant }) => theme.typography[$variant]};
+`;
 //# sourceMappingURL=BKJTypography.styled.js.map

package/lib/components/BKJTypography/BKJTypography.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"BKJTypography.styled.js","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAC,EAAE,CAA6B;MACtC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;GACtD;IACD,EAAE,EAAE,MAAM,CAAC,EAAE,CAA6B;MACtC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;GACtD;IACD,EAAE,EAAE,MAAM,CAAC,EAAE,CAA6B;MACtC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;GACtD;IACD,EAAE,EAAE,MAAM,CAAC,EAAE,CAA6B;MACtC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;GACtD;IACD,IAAI,EAAE,MAAM,CAAC,IAAI,CAA6B;MAC1C,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;GACtD;IACD,CAAC,EAAE,MAAM,CAAC,CAAC,CAA6B;MACpC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;GACtD;IACD,CAAC,EAAE,MAAM,CAAC,CAAC,CAA6B;MACpC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;GACtD;CACF,CAAC"}
+{"version":3,"file":"BKJTypography.styled.js","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAwB;;;;IAI/D,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;CACtD,CAAC"}

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

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

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

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

package/lib/components/BKJTypography/BKJTypography.test.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { BKJTypography } from './BKJTypography.js';
+import { BKJThemeProvider } from '../../providers/BKJThemeProvider/index.js';
+expect.extend(toHaveNoViolations);
+const renderWithTheme = (component) => {
+    return render(_jsx(BKJThemeProvider, { children: component }));
+};
+describe('US1: Semantic heading rendering', () => {
+    it('renders as h1 when as="h1" is passed', () => {
+        const { getByRole } = renderWithTheme(_jsx(BKJTypography, { as: "h1", variant: "H1", children: "Heading 1" }));
+        expect(getByRole('heading', { level: 1 })).toBeInTheDocument();
+    });
+    it('renders as h2 when as="h2" is passed', () => {
+        const { getByRole } = renderWithTheme(_jsx(BKJTypography, { as: "h2", variant: "H2", children: "Heading 2" }));
+        expect(getByRole('heading', { level: 2 })).toBeInTheDocument();
+    });
+    it('renders as h3 when as="h3" is passed', () => {
+        const { getByRole } = renderWithTheme(_jsx(BKJTypography, { as: "h3", variant: "H3", children: "Heading 3" }));
+        expect(getByRole('heading', { level: 3 })).toBeInTheDocument();
+    });
+    it('renders as h4 when as="h4" is passed', () => {
+        const { getByRole } = renderWithTheme(_jsx(BKJTypography, { as: "h4", variant: "H4", children: "Heading 4" }));
+        expect(getByRole('heading', { level: 4 })).toBeInTheDocument();
+    });
+    it('renders as h5 when as="h5" is passed', () => {
+        const { getByRole } = renderWithTheme(_jsx(BKJTypography, { as: "h5", variant: "Body", children: "Heading 5" }));
+        expect(getByRole('heading', { level: 5 })).toBeInTheDocument();
+    });
+    it('renders as h6 when as="h6" is passed', () => {
+        const { getByRole } = renderWithTheme(_jsx(BKJTypography, { as: "h6", variant: "Caption", children: "Heading 6" }));
+        expect(getByRole('heading', { level: 6 })).toBeInTheDocument();
+    });
+    it('has no accessibility violations for heading hierarchy', async () => {
+        const { container } = renderWithTheme(_jsxs("main", { children: [_jsx(BKJTypography, { as: "h1", variant: "H1", children: "Main Title" }), _jsx(BKJTypography, { as: "h2", variant: "H2", children: "Section" }), _jsx(BKJTypography, { as: "h3", variant: "H3", children: "Subsection" }), _jsx(BKJTypography, { as: "h4", variant: "H4", children: "Detail" }), _jsx(BKJTypography, { as: "h5", variant: "Body", children: "Sub-detail" }), _jsx(BKJTypography, { as: "h6", variant: "Caption", children: "Fine print" })] }));
+        const results = await axe(container);
+        expect(results).toHaveNoViolations();
+    });
+});
+describe('US2: Backward-compatible default behavior', () => {
+    it('renders as span by default when no as or element prop is provided', () => {
+        const { getByText } = renderWithTheme(_jsx(BKJTypography, { children: "Default text" }));
+        expect(getByText('Default text').tagName).toBe('SPAN');
+    });
+    it('renders correct element when element prop is used without as', () => {
+        const { getByRole } = renderWithTheme(_jsx(BKJTypography, { element: "h1", variant: "H1", children: "Element heading" }));
+        expect(getByRole('heading', { level: 1 })).toBeInTheDocument();
+    });
+    it('renders as p when element="p" is used without as', () => {
+        const { getByText } = renderWithTheme(_jsx(BKJTypography, { element: "p", children: "Paragraph via element" }));
+        expect(getByText('Paragraph via element').tagName).toBe('P');
+    });
+    it('renders as b when element="b" is used without as', () => {
+        const { getByText } = renderWithTheme(_jsx(BKJTypography, { element: "b", variant: "Bold", children: "Bold via element" }));
+        expect(getByText('Bold via element').tagName).toBe('B');
+    });
+    it('as prop takes precedence over element when both provided', () => {
+        const { getByRole } = renderWithTheme(_jsx(BKJTypography, { as: "h2", element: "h3", variant: "H2", children: "Precedence test" }));
+        expect(getByRole('heading', { level: 2 })).toBeInTheDocument();
+    });
+});
+describe('US3: Non-heading semantic elements', () => {
+    it('renders as p when as="p" is passed', () => {
+        const { getByText } = renderWithTheme(_jsx(BKJTypography, { as: "p", children: "Paragraph text" }));
+        expect(getByText('Paragraph text').tagName).toBe('P');
+    });
+    it('renders as label when as="label" is passed', () => {
+        const { getByText } = renderWithTheme(_jsx(BKJTypography, { as: "label", children: "Label text" }));
+        expect(getByText('Label text').tagName).toBe('LABEL');
+    });
+    it('renders as legend when as="legend" is passed', () => {
+        const { getByText } = renderWithTheme(_jsx("fieldset", { children: _jsx(BKJTypography, { as: "legend", children: "Legend text" }) }));
+        expect(getByText('Legend text').tagName).toBe('LEGEND');
+    });
+    it('renders as caption when as="caption" is passed', () => {
+        const { getByText } = renderWithTheme(_jsxs("table", { children: [_jsx(BKJTypography, { as: "caption", children: "Caption text" }), _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { children: "data" }) }) })] }));
+        expect(getByText('Caption text').tagName).toBe('CAPTION');
+    });
+    it('forwards htmlFor attribute when as="label"', () => {
+        const { getByText } = renderWithTheme(_jsx(BKJTypography, { as: "label", htmlFor: "email-input", children: "Email" }));
+        expect(getByText('Email')).toHaveAttribute('for', 'email-input');
+    });
+    it('renders as span when as="span" is explicitly passed', () => {
+        const { getByText } = renderWithTheme(_jsx(BKJTypography, { as: "span", children: "Explicit span" }));
+        expect(getByText('Explicit span').tagName).toBe('SPAN');
+    });
+});
+//# sourceMappingURL=BKJTypography.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BKJTypography.test.js","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;AAElC,MAAM,eAAe,GAAG,CAAC,SAAoB,EAAE,EAAE;IAC/C,OAAO,MAAM,CAAC,KAAC,gBAAgB,cAAE,SAAS,GAAoB,CAAC,CAAC;AAClE,CAAC,CAAC;AAEF,QAAQ,CAAC,iCAAiC,EAAE,GAAG,EAAE;IAC/C,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CACnC,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,0BAA0B,CAC9D,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CACnC,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,0BAA0B,CAC9D,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CACnC,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,0BAA0B,CAC9D,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CACnC,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,0BAA0B,CAC9D,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CACnC,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,0BAA0B,CAChE,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CACnC,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,0BAA0B,CACnE,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uDAAuD,EAAE,KAAK,IAAI,EAAE;QACrE,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CACnC,2BACE,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,2BAA2B,EAC9D,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,wBAAwB,EAC3D,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,2BAA2B,EAC9D,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,uBAAuB,EAC1D,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,2BAA2B,EAChE,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,2BAA2B,IAC9D,CACR,CAAC;QACF,MAAM,OAAO,GAAG,MAAM,GAAG,CAAC,SAAS,CAAC,CAAC;QACrC,MAAM,CAAC,OAAO,CAAC,CAAC,kBAAkB,EAAE,CAAC;IACvC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,2CAA2C,EAAE,GAAG,EAAE;IACzD,EAAE,CAAC,mEAAmE,EAAE,GAAG,EAAE;QAC3E,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CACnC,KAAC,aAAa,+BAA6B,CAC5C,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8DAA8D,EAAE,GAAG,EAAE;QACtE,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CACnC,KAAC,aAAa,IAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,gCAAgC,CACzE,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,GAAG,EAAE;QAC1D,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CACnC,KAAC,aAAa,IAAC,OAAO,EAAC,GAAG,sCAAsC,CACjE,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,GAAG,EAAE;QAC1D,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CACnC,KAAC,aAAa,IAAC,OAAO,EAAC,GAAG,EAAC,OAAO,EAAC,MAAM,iCAAiC,CAC3E,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0DAA0D,EAAE,GAAG,EAAE;QAClE,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CACnC,KAAC,aAAa,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,gCAAgC,CACjF,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,oCAAoC,EAAE,GAAG,EAAE;IAClD,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;QAC5C,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CACnC,KAAC,aAAa,IAAC,EAAE,EAAC,GAAG,+BAA+B,CACrD,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,GAAG,EAAE;QACpD,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CACnC,KAAC,aAAa,IAAC,EAAE,EAAC,OAAO,2BAA2B,CACrD,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;QACtD,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CACnC,6BACE,KAAC,aAAa,IAAC,EAAE,EAAC,QAAQ,4BAA4B,GAC7C,CACZ,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,GAAG,EAAE;QACxD,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CACnC,4BACE,KAAC,aAAa,IAAC,EAAE,EAAC,SAAS,6BAA6B,EACxD,0BACE,uBAAI,gCAAa,GAAK,GAChB,IACF,CACT,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,GAAG,EAAE;QACpD,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CACnC,KAAC,aAAa,IAAC,EAAE,EAAC,OAAO,EAAC,OAAO,EAAC,aAAa,sBAAsB,CACtE,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IACnE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qDAAqD,EAAE,GAAG,EAAE;QAC7D,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CACnC,KAAC,aAAa,IAAC,EAAE,EAAC,MAAM,8BAA8B,CACvD,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/lib/components/BKJTypography/BKJTypography.types.d.ts

@@ -1,13 +1,16 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { Interpolation } from 'styled-components';
-export interface IBKJTypographyStyledElement {
+export interface IStyledTypographyProps {
     $variant: BKJTypographyVariantType;
 }
-export interface IBKJTypographyProps {
-    variant: BKJTypographyVariantType;
-    element: BKJTypographyElementType;
+export interface IBKJTypographyProps extends HTMLAttributes<HTMLElement> {
+    variant?: BKJTypographyVariantType;
+    element?: BKJTypographyElementType;
+    as?: BKJTypographyAsType;
     children: ReactNode;
+    [key: string]: unknown;
 }
+export type BKJTypographyAsType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'legend' | 'caption';
 export interface IBKJThemeTypography {
     H1: Interpolation<any>;
     H2: Interpolation<any>;

package/lib/components/BKJTypography/BKJTypography.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BKJTypography.types.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,wBAAwB,CAAC;CACpC;AACD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,wBAAwB,CAAC;IAClC,OAAO,EAAE,wBAAwB,CAAC;IAClC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACvB,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACvB,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACvB,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACvB,IAAI,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACzB,aAAa,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAClC,IAAI,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACzB,OAAO,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC5B,WAAW,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAChC,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC3B,QAAQ,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;CAC9B;AAED,MAAM,MAAM,wBAAwB,GAChC,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,MAAM,GACN,eAAe,GACf,MAAM,GACN,SAAS,GACT,aAAa,GACb,QAAQ,GACR,UAAU,CAAC;AACf,MAAM,MAAM,wBAAwB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,CAAC"}
+{"version":3,"file":"BKJTypography.types.d.ts","sourceRoot":"","sources":["../../../src/components/BKJTypography/BKJTypography.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,wBAAwB,CAAC;CACpC;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACtE,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,EAAE,CAAC,EAAE,mBAAmB,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,mBAAmB,GAC3B,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,GAAG,GACH,MAAM,GACN,OAAO,GACP,QAAQ,GACR,SAAS,CAAC;AAEd,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACvB,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACvB,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACvB,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACvB,IAAI,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACzB,aAAa,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAClC,IAAI,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IACzB,OAAO,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC5B,WAAW,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAChC,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC3B,QAAQ,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;CAC9B;AAED,MAAM,MAAM,wBAAwB,GAChC,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,MAAM,GACN,eAAe,GACf,MAAM,GACN,SAAS,GACT,aAAa,GACb,QAAQ,GACR,UAAU,CAAC;AACf,MAAM,MAAM,wBAAwB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,CAAC"}

package/package.json

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