pentatrion-design 1.0.5 → 1.0.6

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.
Files changed (6) hide show
  1. package/dist/components/form/InputField.d.ts +2 -1
  2. package/dist/components/form/InputField.d.ts.map +1 -1
  3. package/dist/components/form/InputField.js +2 -2
  4. package/package.json +1 -1
  5. package/src/components/form/InputField.stories.tsx +7 -2
  6. package/src/components/form/InputField.tsx +5 -0
package/dist/components/form/InputField.d.ts CHANGED
@@ -3,6 +3,7 @@ export interface InputFieldProps {
3
3
  label?: ReactNode;
4
4
  hint?: ReactNode;
5
5
  description?: ReactNode;
6
+ footerDescription?: ReactNode;
6
7
  errors?: ReactNode | boolean;
7
8
  warning?: ReactNode | boolean;
8
9
  children: ReactNode;
@@ -11,5 +12,5 @@ export interface InputFieldProps {
11
12
  "data-testid"?: string;
12
13
  className?: string;
13
14
  }
14
- export declare function InputField({ label, hint, description, errors, warning, id: providedId, children, preventLayerShift, "data-testid": dataTestId, className, }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
15
+ export declare function InputField({ label, hint, description, footerDescription, errors, warning, id: providedId, children, preventLayerShift, "data-testid": dataTestId, className, }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
15
16
  //# sourceMappingURL=InputField.d.ts.map
package/dist/components/form/InputField.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../../src/components/form/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,SAAS,EAAS,MAAM,OAAO,CAAC;AAIzD,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,WAAW,EACX,MAAM,EACN,OAAO,EACP,EAAE,EAAE,UAAU,EACd,QAAQ,EACR,iBAAwB,EACxB,aAAa,EAAE,UAAU,EACzB,SAAS,GACV,EAAE,eAAe,2CAyDjB"}
1
+ {"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../../src/components/form/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,SAAS,EAAS,MAAM,OAAO,CAAC;AAIzD,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,WAAW,EACX,iBAAiB,EACjB,MAAM,EACN,OAAO,EACP,EAAE,EAAE,UAAU,EACd,QAAQ,EACR,iBAAwB,EACxB,aAAa,EAAE,UAAU,EACzB,SAAS,GACV,EAAE,eAAe,2CA4DjB"}
package/dist/components/form/InputField.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { isValidElement, useId } from "react";
3
3
  import { Slot } from "../slot/index.js";
4
- export function InputField({ label, hint, description, errors, warning, id: providedId, children, preventLayerShift = true, "data-testid": dataTestId, className, }) {
4
+ export function InputField({ label, hint, description, footerDescription, errors, warning, id: providedId, children, preventLayerShift = true, "data-testid": dataTestId, className, }) {
5
5
  const internalId = useId();
6
6
  const id = isValidElement(children)
7
7
  ? children?.props.id
@@ -15,5 +15,5 @@ export function InputField({ label, hint, description, errors, warning, id: prov
15
15
  const showFooter = preventLayerShift || errorsElement || warningElement;
16
16
  const testIdProp = dataTestId ? { "data-testid": `input-field-${dataTestId}` } : {};
17
17
  return (_jsxs("div", { role: "group", className: className, ...testIdProp, children: [showLabel &&
18
- (label || hint ? (_jsxs("label", { className: "mb-1 flex flex-wrap items-center justify-between", htmlFor: id, children: [labelElement, hintElement] })) : (_jsx("label", { htmlFor: id, className: "invisible" }))), description && _jsx("div", { className: "text-body-sm text-gray-6 mb-2", children: description }), _jsx(Slot, { id: id, color: color, children: children }), showFooter && (_jsx("div", { className: "text-body-sm text-gray-6 mt-1 min-h-5", children: errorsElement || warningElement }))] }));
18
+ (label || hint ? (_jsxs("label", { className: "mb-1 flex flex-wrap items-center justify-between", htmlFor: id, children: [labelElement, hintElement] })) : (_jsx("label", { htmlFor: id, className: "invisible" }))), description && _jsx("div", { className: "text-body-sm text-gray-6 mb-2", children: description }), _jsx(Slot, { id: id, color: color, children: children }), showFooter && (_jsx("div", { className: "text-body-sm text-gray-6 mt-1 min-h-5", children: errorsElement || warningElement })), footerDescription && (_jsx("div", { className: "text-body-sm text-gray-6 mb-2", children: footerDescription }))] }));
19
19
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pentatrion-design",
3
- "version": "1.0.5",
3
+ "version": "1.0.6",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "Hugues Tavernier",
package/src/components/form/InputField.stories.tsx CHANGED
@@ -45,18 +45,20 @@ export const Playbook = () => {
45
45
  const [hint, setHint] = useState("Any hint related to input field");
46
46
  const [placeholder, setPlaceholder] = useState("Ex: Fernando");
47
47
  const [description, setDescription] = useState("");
48
+ const [footerDescription, setFooterDescription] = useState("");
48
49
  const [warning, setWarning] = useState("");
49
50
  const [errors, setErrors] = useState("");
50
51
 
51
52
  return (
52
53
  <>
53
- <div className="mb-12 rounded-2xl p-12 shadow-md dark:shadow-dark">
54
+ <div className="dark:shadow-dark mb-12 rounded-2xl p-12 shadow-md">
54
55
  <InputField
55
56
  label={label}
56
57
  hint={hint}
57
58
  description={description}
58
59
  warning={warning}
59
60
  errors={errors}
61
+ footerDescription={footerDescription}
60
62
  >
61
63
  <Input
62
64
  placeholder={placeholder}
@@ -79,9 +81,12 @@ export const Playbook = () => {
79
81
  <InputField label="Placeholder">
80
82
  <Input value={placeholder} onChange={(e) => setPlaceholder(e.target.value)} />
81
83
  </InputField>
82
- <InputField label="Help">
84
+ <InputField label="Description">
83
85
  <Input value={description} onChange={(e) => setDescription(e.target.value)} />
84
86
  </InputField>
87
+ <InputField label="Footer Description">
88
+ <Input value={footerDescription} onChange={(e) => setFooterDescription(e.target.value)} />
89
+ </InputField>
85
90
  <InputField label="Warning">
86
91
  <Input
87
92
  placeholder="warning message"
package/src/components/form/InputField.tsx CHANGED
@@ -6,6 +6,7 @@ export interface InputFieldProps {
6
6
  label?: ReactNode;
7
7
  hint?: ReactNode;
8
8
  description?: ReactNode;
9
+ footerDescription?: ReactNode;
9
10
  errors?: ReactNode | boolean;
10
11
  warning?: ReactNode | boolean;
11
12
  children: ReactNode;
@@ -19,6 +20,7 @@ export function InputField({
19
20
  label,
20
21
  hint,
21
22
  description,
23
+ footerDescription,
22
24
  errors,
23
25
  warning,
24
26
  id: providedId,
@@ -81,6 +83,9 @@ export function InputField({
81
83
  {errorsElement || warningElement}
82
84
  </div>
83
85
  )}
86
+ {footerDescription && (
87
+ <div className="text-body-sm text-gray-6 mb-2">{footerDescription}</div>
88
+ )}
84
89
  </div>
85
90
  );
86
91
  }