@stackshift-ui/heading 6.0.11 → 7.0.0-beta.1

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.
@@ -1 +1 @@
1
- import{DefaultComponent as y,useStackShiftUIComponents as $}from"@stackshift-ui/system";import S from"classnames";import{jsx as u}from"react/jsx-runtime";var l="Heading",T=({type:o="h1",style:C,muted:s=!1,weight:n="bold",fontSize:i="3xl",children:m,className:d,...h})=>{var x;let{[l]:r=y}=$(),f={xs:"text-xs",sm:"text-sm",base:"text-base",lg:"text-lg",xl:"text-xl","2xl":"text-2xl","3xl":"text-3xl","4xl":"text-4xl"},p={thin:"font-thin",extralight:"font-extralight",light:"font-light",normal:"font-normal",semibold:"font-semibold",bold:"font-bold",medium:"font-medium",extrabold:"font-extrabold",black:"font-black"},t=f[i],c=p[n],e=`text-primary ${s&&"text-gray-500"} ${n?`${c}`:"font-bold"} `,a={h1:`${e} font-bold font-heading ${t!=null?t:"text-4xl lg:text-5xl"} `,h2:`${e} ${t!=null?t:"text-3xl lg:text-4xl"} font-bold`,h3:`${e} font-bold ${t!=null?t:"text-2xl lg:text-3xl"}`,h4:`${e} font-bold text-2xl ${t}`,h5:`${e} font-medium text-xl ${t}`,h6:`${e} font-medium text-lg ${t}`},g=["h1","h2","h3","h4","h5","h6"].includes(o)?o:"h1",b=(x=a[g])!=null?x:a.h1;return u(r,{as:o,className:S(b,d),...h,"data-testid":l,children:m})};T.displayName=l;export{T as a};
1
+ import{DefaultComponent as y,useStackShiftUIComponents as $}from"@stackshift-ui/system";import S from"classnames";import{jsx as u}from"react/jsx-runtime";var x="Heading",T=({type:o="h1",style:C,muted:s=!1,weight:l="bold",fontSize:i="3xl",children:m,className:h,...r})=>{var a;let{[x]:d=y}=$(),f={xs:"text-xs",sm:"text-sm",base:"text-base",lg:"text-lg",xl:"text-xl","2xl":"text-2xl","3xl":"text-3xl","4xl":"text-4xl"},p={thin:"font-thin",extralight:"font-extralight",light:"font-light",normal:"font-normal",semibold:"font-semibold",bold:"font-bold",medium:"font-medium",extrabold:"font-extrabold",black:"font-black"},t=f[i],c=p[l],e=`text-primary ${s&&"text-gray-500"} ${l?`${c}`:"font-bold"} `,n={h1:`${e} font-bold font-heading ${t!=null?t:"text-4xl lg:text-5xl"} `,h2:`${e} ${t!=null?t:"text-3xl lg:text-4xl"} font-bold`,h3:`${e} font-bold ${t!=null?t:"text-2xl lg:text-3xl"}`,h4:`${e} font-bold text-2xl ${t}`,h5:`${e} font-medium text-xl ${t}`,h6:`${e} font-medium text-lg ${t}`},g=["h1","h2","h3","h4","h5","h6"].includes(o)?o:"h1",b=(a=n[g])!=null?a:n.h1;return u(d,{as:o,className:S(b,h),...r,children:m})};T.displayName=x;export{T as a};
package/dist/heading.js CHANGED
@@ -1 +1 @@
1
- "use strict";var N=Object.create;var s=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var W=(t,e)=>{for(var l in e)s(t,l,{get:e[l],enumerable:!0})},r=(t,e,l,x)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of P(e))!k.call(t,n)&&n!==l&&s(t,n,{get:()=>e[n],enumerable:!(x=M(e,n))||x.enumerable});return t};var E=(t,e,l)=>(l=t!=null?N(R(t)):{},r(e||!t||!t.__esModule?s(l,"default",{value:t,enumerable:!0}):l,t)),L=t=>r(s({},"__esModule",{value:!0}),t);var v={};W(v,{Heading:()=>p});module.exports=L(v);var i=require("@stackshift-ui/system"),f=E(require("classnames")),c=require("react/jsx-runtime"),m="Heading",p=({type:t="h1",style:e,muted:l=!1,weight:x="bold",fontSize:n="3xl",children:g,className:b,...y})=>{var h;let{[m]:$=i.DefaultComponent}=(0,i.useStackShiftUIComponents)(),S={xs:"text-xs",sm:"text-sm",base:"text-base",lg:"text-lg",xl:"text-xl","2xl":"text-2xl","3xl":"text-3xl","4xl":"text-4xl"},T={thin:"font-thin",extralight:"font-extralight",light:"font-light",normal:"font-normal",semibold:"font-semibold",bold:"font-bold",medium:"font-medium",extrabold:"font-extrabold",black:"font-black"},o=S[n],u=T[x],a=`text-primary ${l&&"text-gray-500"} ${x?`${u}`:"font-bold"} `,d={h1:`${a} font-bold font-heading ${o!=null?o:"text-4xl lg:text-5xl"} `,h2:`${a} ${o!=null?o:"text-3xl lg:text-4xl"} font-bold`,h3:`${a} font-bold ${o!=null?o:"text-2xl lg:text-3xl"}`,h4:`${a} font-bold text-2xl ${o}`,h5:`${a} font-medium text-xl ${o}`,h6:`${a} font-medium text-lg ${o}`},C=["h1","h2","h3","h4","h5","h6"].includes(t)?t:"h1",H=(h=d[C])!=null?h:d.h1;return(0,c.jsx)($,{as:t,className:(0,f.default)(H,b),...y,"data-testid":m,children:g})};p.displayName=m;0&&(module.exports={Heading});
1
+ "use strict";var N=Object.create;var s=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var W=(t,e)=>{for(var l in e)s(t,l,{get:e[l],enumerable:!0})},r=(t,e,l,x)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of P(e))!k.call(t,n)&&n!==l&&s(t,n,{get:()=>e[n],enumerable:!(x=M(e,n))||x.enumerable});return t};var E=(t,e,l)=>(l=t!=null?N(R(t)):{},r(e||!t||!t.__esModule?s(l,"default",{value:t,enumerable:!0}):l,t)),L=t=>r(s({},"__esModule",{value:!0}),t);var v={};W(v,{Heading:()=>p});module.exports=L(v);var i=require("@stackshift-ui/system"),d=E(require("classnames")),c=require("react/jsx-runtime"),f="Heading",p=({type:t="h1",style:e,muted:l=!1,weight:x="bold",fontSize:n="3xl",children:g,className:b,...y})=>{var h;let{[f]:$=i.DefaultComponent}=(0,i.useStackShiftUIComponents)(),S={xs:"text-xs",sm:"text-sm",base:"text-base",lg:"text-lg",xl:"text-xl","2xl":"text-2xl","3xl":"text-3xl","4xl":"text-4xl"},T={thin:"font-thin",extralight:"font-extralight",light:"font-light",normal:"font-normal",semibold:"font-semibold",bold:"font-bold",medium:"font-medium",extrabold:"font-extrabold",black:"font-black"},o=S[n],u=T[x],a=`text-primary ${l&&"text-gray-500"} ${x?`${u}`:"font-bold"} `,m={h1:`${a} font-bold font-heading ${o!=null?o:"text-4xl lg:text-5xl"} `,h2:`${a} ${o!=null?o:"text-3xl lg:text-4xl"} font-bold`,h3:`${a} font-bold ${o!=null?o:"text-2xl lg:text-3xl"}`,h4:`${a} font-bold text-2xl ${o}`,h5:`${a} font-medium text-xl ${o}`,h6:`${a} font-medium text-lg ${o}`},C=["h1","h2","h3","h4","h5","h6"].includes(t)?t:"h1",H=(h=m[C])!=null?h:m.h1;return(0,c.jsx)($,{as:t,className:(0,d.default)(H,b),...y,children:g})};p.displayName=f;0&&(module.exports={Heading});
package/dist/heading.mjs CHANGED
@@ -1 +1 @@
1
- import{a}from"./chunk-VO7P2XOH.mjs";export{a as Heading};
1
+ import{a}from"./chunk-BAR2AJR4.mjs";export{a as Heading};
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
1
  "use client";
2
- "use strict";var N=Object.create;var s=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var W=(t,e)=>{for(var l in e)s(t,l,{get:e[l],enumerable:!0})},h=(t,e,l,x)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of P(e))!k.call(t,n)&&n!==l&&s(t,n,{get:()=>e[n],enumerable:!(x=M(e,n))||x.enumerable});return t};var E=(t,e,l)=>(l=t!=null?N(R(t)):{},h(e||!t||!t.__esModule?s(l,"default",{value:t,enumerable:!0}):l,t)),L=t=>h(s({},"__esModule",{value:!0}),t);var v={};W(v,{Heading:()=>p});module.exports=L(v);var i=require("@stackshift-ui/system"),f=E(require("classnames")),c=require("react/jsx-runtime"),m="Heading",p=({type:t="h1",style:e,muted:l=!1,weight:x="bold",fontSize:n="3xl",children:g,className:b,...y})=>{var d;let{[m]:$=i.DefaultComponent}=(0,i.useStackShiftUIComponents)(),u={xs:"text-xs",sm:"text-sm",base:"text-base",lg:"text-lg",xl:"text-xl","2xl":"text-2xl","3xl":"text-3xl","4xl":"text-4xl"},S={thin:"font-thin",extralight:"font-extralight",light:"font-light",normal:"font-normal",semibold:"font-semibold",bold:"font-bold",medium:"font-medium",extrabold:"font-extrabold",black:"font-black"},o=u[n],T=S[x],a=`text-primary ${l&&"text-gray-500"} ${x?`${T}`:"font-bold"} `,r={h1:`${a} font-bold font-heading ${o!=null?o:"text-4xl lg:text-5xl"} `,h2:`${a} ${o!=null?o:"text-3xl lg:text-4xl"} font-bold`,h3:`${a} font-bold ${o!=null?o:"text-2xl lg:text-3xl"}`,h4:`${a} font-bold text-2xl ${o}`,h5:`${a} font-medium text-xl ${o}`,h6:`${a} font-medium text-lg ${o}`},C=["h1","h2","h3","h4","h5","h6"].includes(t)?t:"h1",H=(d=r[C])!=null?d:r.h1;return(0,c.jsx)($,{as:t,className:(0,f.default)(H,b),...y,"data-testid":m,children:g})};p.displayName=m;0&&(module.exports={Heading});
2
+ "use strict";var N=Object.create;var s=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var W=(t,e)=>{for(var l in e)s(t,l,{get:e[l],enumerable:!0})},h=(t,e,l,x)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of P(e))!k.call(t,n)&&n!==l&&s(t,n,{get:()=>e[n],enumerable:!(x=M(e,n))||x.enumerable});return t};var E=(t,e,l)=>(l=t!=null?N(R(t)):{},h(e||!t||!t.__esModule?s(l,"default",{value:t,enumerable:!0}):l,t)),L=t=>h(s({},"__esModule",{value:!0}),t);var v={};W(v,{Heading:()=>p});module.exports=L(v);var i=require("@stackshift-ui/system"),d=E(require("classnames")),c=require("react/jsx-runtime"),f="Heading",p=({type:t="h1",style:e,muted:l=!1,weight:x="bold",fontSize:n="3xl",children:g,className:b,...y})=>{var r;let{[f]:$=i.DefaultComponent}=(0,i.useStackShiftUIComponents)(),u={xs:"text-xs",sm:"text-sm",base:"text-base",lg:"text-lg",xl:"text-xl","2xl":"text-2xl","3xl":"text-3xl","4xl":"text-4xl"},S={thin:"font-thin",extralight:"font-extralight",light:"font-light",normal:"font-normal",semibold:"font-semibold",bold:"font-bold",medium:"font-medium",extrabold:"font-extrabold",black:"font-black"},o=u[n],T=S[x],a=`text-primary ${l&&"text-gray-500"} ${x?`${T}`:"font-bold"} `,m={h1:`${a} font-bold font-heading ${o!=null?o:"text-4xl lg:text-5xl"} `,h2:`${a} ${o!=null?o:"text-3xl lg:text-4xl"} font-bold`,h3:`${a} font-bold ${o!=null?o:"text-2xl lg:text-3xl"}`,h4:`${a} font-bold text-2xl ${o}`,h5:`${a} font-medium text-xl ${o}`,h6:`${a} font-medium text-lg ${o}`},C=["h1","h2","h3","h4","h5","h6"].includes(t)?t:"h1",H=(r=m[C])!=null?r:m.h1;return(0,c.jsx)($,{as:t,className:(0,d.default)(H,b),...y,children:g})};p.displayName=f;0&&(module.exports={Heading});
package/dist/index.mjs CHANGED
@@ -1,2 +1,2 @@
1
1
  "use client";
2
- "use strict";import{a as e}from"./chunk-VO7P2XOH.mjs";export{e as Heading};
2
+ "use strict";import{a as e}from"./chunk-BAR2AJR4.mjs";export{e as Heading};
@@ -0,0 +1,2 @@
1
+ import '@testing-library/jest-dom';
2
+ export {};
@@ -0,0 +1 @@
1
+ "use strict";var e=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var b=(p,o,i,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of x(o))!a.call(p,r)&&r!==i&&e(p,r,{get:()=>o[r],enumerable:!(t=m(o,r))||t.enumerable});return p};var c=p=>b(e({},"__esModule",{value:!0}),p);var d={};module.exports=c(d);var g=require("@testing-library/jest-dom");
@@ -0,0 +1 @@
1
+ import"@testing-library/jest-dom";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stackshift-ui/heading",
3
3
  "description": "",
4
- "version": "6.0.11",
4
+ "version": "7.0.0-beta.1",
5
5
  "private": false,
6
6
  "sideEffects": false,
7
7
  "main": "./dist/index.js",
@@ -29,20 +29,21 @@
29
29
  "typescript": "^5.6.2",
30
30
  "vite-tsconfig-paths": "^5.0.1",
31
31
  "vitest": "^2.1.1",
32
- "@stackshift-ui/eslint-config": "6.0.10",
33
- "@stackshift-ui/typescript-config": "6.0.10"
32
+ "@stackshift-ui/typescript-config": "6.0.10",
33
+ "@stackshift-ui/eslint-config": "6.0.10"
34
34
  },
35
35
  "dependencies": {
36
+ "@testing-library/jest-dom": "^6.5.0",
36
37
  "classnames": "^2.5.1",
37
- "@stackshift-ui/system": "6.0.11",
38
- "@stackshift-ui/scripts": "6.0.10"
38
+ "@stackshift-ui/scripts": "6.1.0-beta.0",
39
+ "@stackshift-ui/system": "6.1.0-beta.1"
39
40
  },
40
41
  "peerDependencies": {
42
+ "@stackshift-ui/system": ">=6.1.0-beta.1",
41
43
  "@types/react": "16.8 - 19",
42
44
  "next": "10 - 14",
43
45
  "react": "16.8 - 19",
44
- "react-dom": "16.8 - 19",
45
- "@stackshift-ui/system": ">=6.0.11"
46
+ "react-dom": "16.8 - 19"
46
47
  },
47
48
  "peerDependenciesMeta": {
48
49
  "next": {
@@ -7,7 +7,44 @@ describe.concurrent("heading", () => {
7
7
 
8
8
  test("Common: Heading - test if renders without errors", ({ expect }) => {
9
9
  const clx = "heading-class";
10
- render(<Heading className={clx} />);
11
- expect(screen.getByTestId("h1").classList).toContain(clx);
10
+ const { unmount } = render(<Heading className={clx}>Test Heading</Heading>);
11
+
12
+ const heading = screen.getByRole("heading", { name: "Test Heading", level: 1 });
13
+ expect(heading).toBeInTheDocument();
14
+ expect(heading.classList).toContain(clx);
15
+ unmount();
16
+ });
17
+
18
+ test("Common: Heading - test with different heading type", ({ expect }) => {
19
+ const { unmount } = render(
20
+ <>
21
+ <Heading data-testid="Heading1" type="h1">
22
+ Test H1
23
+ </Heading>
24
+ <Heading data-testid="Heading2" type="h2">
25
+ Test H2
26
+ </Heading>
27
+ <Heading data-testid="Heading3" type="h3">
28
+ Test H3
29
+ </Heading>
30
+ <Heading data-testid="Heading4" type="h4">
31
+ Test H4
32
+ </Heading>
33
+ <Heading data-testid="Heading5" type="h5">
34
+ Test H5
35
+ </Heading>
36
+ <Heading data-testid="Heading6" type="h6">
37
+ Test H6
38
+ </Heading>
39
+ </>,
40
+ );
41
+
42
+ expect(screen.getByRole("heading", { name: "Test H1", level: 1 })).toBeInTheDocument();
43
+ expect(screen.getByRole("heading", { name: "Test H2", level: 2 })).toBeInTheDocument();
44
+ expect(screen.getByRole("heading", { name: "Test H3", level: 3 })).toBeInTheDocument();
45
+ expect(screen.getByRole("heading", { name: "Test H4", level: 4 })).toBeInTheDocument();
46
+ expect(screen.getByRole("heading", { name: "Test H5", level: 5 })).toBeInTheDocument();
47
+ expect(screen.getByRole("heading", { name: "Test H6", level: 6 })).toBeInTheDocument();
48
+ unmount();
12
49
  });
13
50
  });
package/src/heading.tsx CHANGED
@@ -84,11 +84,7 @@ export const Heading: React.FC<HeadingProps> = ({
84
84
  const variantClass = variants[Element] ?? variants.h1;
85
85
 
86
86
  return (
87
- <Component
88
- as={type}
89
- className={cn(variantClass, className)}
90
- {...props}
91
- data-testid={displayName}>
87
+ <Component as={type} className={cn(variantClass, className)} {...props}>
92
88
  {children}
93
89
  </Component>
94
90
  );
@@ -0,0 +1,4 @@
1
+ import '@testing-library/jest-dom';
2
+
3
+ export { };
4
+