@namroodinc/liquid-editorial 0.1.9 → 0.1.10
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 +2 -0
- package/UPGRADING.md +18 -0
- package/dist/components/Field/index.cjs +1 -1
- package/dist/components/Field/index.cjs.map +1 -1
- package/dist/components/Field/index.d.cts +2 -1
- package/dist/components/Field/index.d.cts.map +1 -1
- package/dist/components/Field/index.d.ts +2 -1
- package/dist/components/Field/index.d.ts.map +1 -1
- package/dist/components/Field/index.js +2 -2
- package/dist/components/Field/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -29,6 +29,8 @@ export function ArticleForm() {
|
|
|
29
29
|
}
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
+
`Field.hint` accepts a string or React node, such as `hint={<>Use a <strong>short headline</strong>.</>}`. Hints are associated with the control through `aria-describedby`; an error replaces the hint while present.
|
|
33
|
+
|
|
32
34
|
Every family also has a direct entry point:
|
|
33
35
|
|
|
34
36
|
```tsx
|
package/UPGRADING.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
## Unreleased
|
|
4
4
|
|
|
5
|
+
## 0.1.10
|
|
6
|
+
|
|
7
|
+
### Changes
|
|
8
|
+
|
|
9
|
+
- `Field.hint` now accepts `ReactNode`, including strings, formatted text, and links. Falsy conditional hints are omitted without leaving a stray `0`.
|
|
10
|
+
|
|
11
|
+
### Adoption
|
|
12
|
+
|
|
13
|
+
Existing string hints need no changes. Pass inline JSX for richer guidance, for example `hint={<>Use a <strong>short headline</strong>.</>}`. Continue spreading Field's render props onto its control to retain accessible hint associations.
|
|
14
|
+
|
|
15
|
+
### Compatibility
|
|
16
|
+
|
|
17
|
+
This widens the optional hint type without changing the hint's styling, wrapper, or ID association. Errors still replace hints and mark the control invalid. Falsy hints remain hidden. No dependency, stylesheet, or version changes are required; the release workflow owns version increments.
|
|
18
|
+
|
|
19
|
+
### Verification
|
|
20
|
+
|
|
21
|
+
Run the consuming project's typecheck, tests, and build. Check string and JSX hints, confirm the control's `aria-describedby` points to the displayed hint, and verify that an error hides either hint and becomes the control's description. Check that a falsy conditional hint leaves no text or description reference. The library's `RichHint` Field story demonstrates formatted content.
|
|
22
|
+
|
|
5
23
|
## 0.1.9
|
|
6
24
|
|
|
7
25
|
### Changes
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});/* empty css */let e=require("react"),t=require("react/jsx-runtime");function n({label:n,hint:r,error:i,isRequired:a,isGroup:o=!1,children:s}){let c=(0,e.useId)(),l=`${c}-hint`,u=`${c}-error`,d=i?u:r?l:void 0,f=`${c}-label`,p=o?`fieldset`:`div`,m=(0,t.jsxs)(t.Fragment,{children:[n,a&&(0,t.jsx)(`span`,{className:`ds-field__required`,"aria-hidden":`true`,children:`*`})]});return(0,t.jsxs)(p,{className:`ds-field`,children:[o?(0,t.jsx)(`legend`,{id:f,className:`ds-field__label`,children:m}):(0,t.jsx)(`label`,{id:f,className:`ds-field__label`,htmlFor:c,children:m}),s({id:c,"aria-describedby":d,"aria-labelledby":f,"aria-invalid":i?!0:void 0,required:a}),r&&!i
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});/* empty css */let e=require("react"),t=require("react/jsx-runtime");function n({label:n,hint:r,error:i,isRequired:a,isGroup:o=!1,children:s}){let c=(0,e.useId)(),l=`${c}-hint`,u=`${c}-error`,d=i?u:r?l:void 0,f=`${c}-label`,p=o?`fieldset`:`div`,m=(0,t.jsxs)(t.Fragment,{children:[n,a&&(0,t.jsx)(`span`,{className:`ds-field__required`,"aria-hidden":`true`,children:`*`})]});return(0,t.jsxs)(p,{className:`ds-field`,children:[o?(0,t.jsx)(`legend`,{id:f,className:`ds-field__label`,children:m}):(0,t.jsx)(`label`,{id:f,className:`ds-field__label`,htmlFor:c,children:m}),s({id:c,"aria-describedby":d,"aria-labelledby":f,"aria-invalid":i?!0:void 0,required:a}),r&&!i?(0,t.jsx)(`span`,{className:`ds-field__hint`,id:l,children:r}):null,i&&(0,t.jsx)(`span`,{className:`ds-field__error`,id:u,children:i})]})}exports.Field=n;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":["useId","_Fragment","react","react_jsx_runtime","Field","id","hintId","errorId","describedBy","error","hint","labelId","Wrapper","isGroup","labelContent","label","isRequired","children"],"sources":["../../../src/components/Field/index.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\nimport \"../Field/style.css\";\n\nexport type FieldSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface FieldProps {\n label: string;\n hint?:
|
|
1
|
+
{"version":3,"file":"index.cjs","names":["useId","_Fragment","react","react_jsx_runtime","Field","id","hintId","errorId","describedBy","error","hint","labelId","Wrapper","isGroup","labelContent","label","isRequired","children"],"sources":["../../../src/components/Field/index.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\nimport \"../Field/style.css\";\n\nexport type FieldSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface FieldProps {\n label: string;\n /** Supporting text or inline content, hidden while an error is present. */\n hint?: ReactNode;\n /** Present means invalid: the message renders and the control is marked. */\n error?: string;\n isRequired?: boolean;\n /** Use a legend for a field containing a group of controls. */\n isGroup?: boolean;\n /** Receives the ids and invalid flag the control must carry. */\n children: (props: {\n id: string;\n \"aria-describedby\"?: string;\n \"aria-labelledby\": string;\n \"aria-invalid\"?: true;\n required?: boolean;\n }) => ReactNode;\n}\n\n/** Label, hint, error and required marker around any control wearing the field skin. */\nexport function Field({ label, hint, error, isRequired, isGroup = false, children }: FieldProps) {\n const id = useId();\n const hintId = `${id}-hint`;\n const errorId = `${id}-error`;\n const describedBy = error ? errorId : hint ? hintId : undefined;\n const labelId = `${id}-label`;\n const Wrapper = isGroup ? \"fieldset\" : \"div\";\n const labelContent = <>{label}{isRequired && <span className=\"ds-field__required\" aria-hidden=\"true\">*</span>}</>;\n\n return (\n <Wrapper className=\"ds-field\">\n {isGroup\n ? <legend id={labelId} className=\"ds-field__label\">{labelContent}</legend>\n : <label id={labelId} className=\"ds-field__label\" htmlFor={id}>{labelContent}</label>}\n {children({\n id,\n \"aria-describedby\": describedBy,\n \"aria-labelledby\": labelId,\n \"aria-invalid\": error ? true : undefined,\n required: isRequired,\n })}\n {hint && !error ? (\n <span className=\"ds-field__hint\" id={hintId}>\n {hint}\n </span>\n ) : null}\n {error && (\n <span className=\"ds-field__error\" id={errorId}>\n {error}\n </span>\n )}\n </Wrapper>\n );\n}\n"],"mappings":"A,oKAyBA,SAAgBI,EAAM,CAAE,QAAO,OAAM,QAAO,aAAY,UAAU,GAAO,YAAwB,CAC/F,IAAMC,GAAA,EAAKL,EAAAA,MAAAA,CAAM,EACXM,EAAS,GAAGD,EAAG,OACfE,EAAU,GAAGF,EAAG,QAChBG,EAAcC,EAAQF,EAAUG,EAAOJ,EAAS,IAAA,GAChDK,EAAU,GAAGN,EAAG,QAChBO,EAAUC,EAAU,WAAa,MACjCC,GAAe,EAAAX,EAAA,KAAA,CAAAF,EAAAA,SAAA,CAAA,SAAA,CAAGc,EAAOC,IAAc,EAAAb,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,cAAY,OAAO,SAAA,GAAO,CAAA,CAAI,CAAA,CAAA,EAEhH,OACE,EAAAA,EAAA,KAAA,CAACS,EAAD,CAAS,UAAU,WAAnB,SAAA,CACGC,GACG,EAAAV,EAAA,IAAA,CAAC,SAAD,CAAQ,GAAIQ,EAAS,UAAU,kBAAmB,SAAAG,CAAqB,CAAA,GACvE,EAAAX,EAAA,IAAA,CAAC,QAAD,CAAO,GAAIQ,EAAS,UAAU,kBAAkB,QAASN,EAAK,SAAAS,CAAoB,CAAA,EACrFG,EAAS,CACR,KACA,mBAAoBT,EACpB,kBAAmBG,EACnB,eAAgBF,EAAQ,GAAO,IAAA,GAC/B,SAAUO,CACZ,CAAC,EACAN,GAAQ,CAACD,GACR,EAAAN,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,iBAAiB,GAAIG,EAClC,SAAAI,CACG,CAAA,EACJ,KACHD,IACC,EAAAN,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,kBAAkB,GAAII,EACnC,SAAAE,CACG,CAAA,CAED,C,EAEb,C"}
|
|
@@ -2,7 +2,8 @@ import { type ReactNode } from "react";
|
|
|
2
2
|
export type FieldSize = "sm" | "md" | "lg";
|
|
3
3
|
export interface FieldProps {
|
|
4
4
|
label: string;
|
|
5
|
-
|
|
5
|
+
/** Supporting text or inline content, hidden while an error is present. */
|
|
6
|
+
hint?: ReactNode;
|
|
6
7
|
/** Present means invalid: the message renders and the control is marked. */
|
|
7
8
|
error?: string;
|
|
8
9
|
isRequired?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gEAAgE;IAChE,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,EAAE,EAAE,MAAM,CAAC;QACX,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,iBAAiB,EAAE,MAAM,CAAC;QAC1B,cAAc,CAAC,EAAE,IAAI,CAAC;QACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,KAAK,SAAS,CAAC;CACjB;AAED,wFAAwF;AACxF,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,OAAe,EAAE,QAAQ,EAAE,EAAE,UAAU,+BAiC9F"}
|
|
@@ -2,7 +2,8 @@ import { type ReactNode } from "react";
|
|
|
2
2
|
export type FieldSize = "sm" | "md" | "lg";
|
|
3
3
|
export interface FieldProps {
|
|
4
4
|
label: string;
|
|
5
|
-
|
|
5
|
+
/** Supporting text or inline content, hidden while an error is present. */
|
|
6
|
+
hint?: ReactNode;
|
|
6
7
|
/** Present means invalid: the message renders and the control is marked. */
|
|
7
8
|
error?: string;
|
|
8
9
|
isRequired?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gEAAgE;IAChE,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,EAAE,EAAE,MAAM,CAAC;QACX,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,iBAAiB,EAAE,MAAM,CAAC;QAC1B,cAAc,CAAC,EAAE,IAAI,CAAC;QACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,KAAK,SAAS,CAAC;CACjB;AAED,wFAAwF;AACxF,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,OAAe,EAAE,QAAQ,EAAE,EAAE,UAAU,+BAiC9F"}
|
|
@@ -28,11 +28,11 @@ function i({ label: i, hint: a, error: o, isRequired: s, isGroup: c = !1, childr
|
|
|
28
28
|
"aria-invalid": o ? !0 : void 0,
|
|
29
29
|
required: s
|
|
30
30
|
}),
|
|
31
|
-
a && !o
|
|
31
|
+
a && !o ? /* @__PURE__ */ n("span", {
|
|
32
32
|
className: "ds-field__hint",
|
|
33
33
|
id: d,
|
|
34
34
|
children: a
|
|
35
|
-
}),
|
|
35
|
+
}) : null,
|
|
36
36
|
o && /* @__PURE__ */ n("span", {
|
|
37
37
|
className: "ds-field__error",
|
|
38
38
|
id: f,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_Fragment","Fragment$1","Field","id","useId","hintId","errorId","describedBy","error","hint","labelId","Wrapper","isGroup","labelContent","label","isRequired","children"],"sources":["../../../src/components/Field/index.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\nimport \"../Field/style.css\";\n\nexport type FieldSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface FieldProps {\n label: string;\n hint?:
|
|
1
|
+
{"version":3,"file":"index.js","names":["_Fragment","Fragment$1","Field","id","useId","hintId","errorId","describedBy","error","hint","labelId","Wrapper","isGroup","labelContent","label","isRequired","children"],"sources":["../../../src/components/Field/index.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\nimport \"../Field/style.css\";\n\nexport type FieldSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface FieldProps {\n label: string;\n /** Supporting text or inline content, hidden while an error is present. */\n hint?: ReactNode;\n /** Present means invalid: the message renders and the control is marked. */\n error?: string;\n isRequired?: boolean;\n /** Use a legend for a field containing a group of controls. */\n isGroup?: boolean;\n /** Receives the ids and invalid flag the control must carry. */\n children: (props: {\n id: string;\n \"aria-describedby\"?: string;\n \"aria-labelledby\": string;\n \"aria-invalid\"?: true;\n required?: boolean;\n }) => ReactNode;\n}\n\n/** Label, hint, error and required marker around any control wearing the field skin. */\nexport function Field({ label, hint, error, isRequired, isGroup = false, children }: FieldProps) {\n const id = useId();\n const hintId = `${id}-hint`;\n const errorId = `${id}-error`;\n const describedBy = error ? errorId : hint ? hintId : undefined;\n const labelId = `${id}-label`;\n const Wrapper = isGroup ? \"fieldset\" : \"div\";\n const labelContent = <>{label}{isRequired && <span className=\"ds-field__required\" aria-hidden=\"true\">*</span>}</>;\n\n return (\n <Wrapper className=\"ds-field\">\n {isGroup\n ? <legend id={labelId} className=\"ds-field__label\">{labelContent}</legend>\n : <label id={labelId} className=\"ds-field__label\" htmlFor={id}>{labelContent}</label>}\n {children({\n id,\n \"aria-describedby\": describedBy,\n \"aria-labelledby\": labelId,\n \"aria-invalid\": error ? true : undefined,\n required: isRequired,\n })}\n {hint && !error ? (\n <span className=\"ds-field__hint\" id={hintId}>\n {hint}\n </span>\n ) : null}\n {error && (\n <span className=\"ds-field__error\" id={errorId}>\n {error}\n </span>\n )}\n </Wrapper>\n );\n}\n"],"mappings":";;;;AAyBA,SAAgBE,EAAM,EAAE,UAAO,SAAM,UAAO,eAAY,aAAU,IAAO,eAAwB;CAC/F,IAAMC,IAAKC,EAAM,GACXC,IAAS,GAAGF,EAAG,QACfG,IAAU,GAAGH,EAAG,SAChBI,IAAcC,IAAQF,IAAUG,IAAOJ,IAAS,KAAA,GAChDK,IAAU,GAAGP,EAAG,SAChBQ,IAAUC,IAAU,aAAa,OACjCC,IAAe,kBAAAb,GAAA,EAAA,UAAA,CAAGc,GAAOC,KAAc,kBAAC,QAAD;EAAM,WAAU;EAAqB,eAAY;EAAO,UAAA;CAAO,CAAA,CAAI,EAAA,CAAA;CAEhH,OACE,kBAACJ,GAAD;EAAS,WAAU;EAAnB,UAAA;GACGC,IACG,kBAAC,UAAD;IAAQ,IAAIF;IAAS,WAAU;IAAmB,UAAAG;GAAqB,CAAA,IACvE,kBAAC,SAAD;IAAO,IAAIH;IAAS,WAAU;IAAkB,SAASP;IAAK,UAAAU;GAAoB,CAAA;GACrFG,EAAS;IACR;IACA,oBAAoBT;IACpB,mBAAmBG;IACnB,gBAAgBF,IAAQ,KAAO,KAAA;IAC/B,UAAUO;GACZ,CAAC;GACAN,KAAQ,CAACD,IACR,kBAAC,QAAD;IAAM,WAAU;IAAiB,IAAIH;IAClC,UAAAI;GACG,CAAA,IACJ;GACHD,KACC,kBAAC,QAAD;IAAM,WAAU;IAAkB,IAAIF;IACnC,UAAAE;GACG,CAAA;EAED;;AAEb"}
|