@k8slens/lds-form 0.41.3 → 0.41.5
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/lib/cjs/FormSwitchGroup/FormSwitchGroup.d.ts +2 -1
- package/lib/cjs/FormSwitchGroup/FormSwitchGroup.js +1 -1
- package/lib/cjs/index.css +1 -1
- package/lib/es/FormSwitchGroup/FormSwitchGroup.d.ts +2 -1
- package/lib/es/FormSwitchGroup/FormSwitchGroup.js +1 -1
- package/lib/es/index.css +1 -1
- package/package.json +6 -5
|
@@ -5,6 +5,7 @@ export declare type SwitchValue = {
|
|
|
5
5
|
id: string;
|
|
6
6
|
label: string;
|
|
7
7
|
checked: boolean | undefined;
|
|
8
|
+
disabled?: boolean;
|
|
8
9
|
description?: string;
|
|
9
10
|
};
|
|
10
11
|
export interface FormSwitchGroupProps<CustomError extends string> extends Omit<FormFieldComponentProps<number, CustomError>, "onChange" | "value">, Omit<SwitchProps, "value" | "onChange" | "label"> {
|
|
@@ -19,5 +20,5 @@ export interface FormSwitchGroupProps<CustomError extends string> extends Omit<F
|
|
|
19
20
|
*
|
|
20
21
|
* Displays errors with accessible label and error notifications.
|
|
21
22
|
*/
|
|
22
|
-
declare function FormSwitchGroup<CustomError extends string>({ id: _id, label, wrapperProps, labelProps, validate, errorProps: errorComponentProps, values, onChange, type, errors, ...switchProps }: PropsWithChildren<FormSwitchGroupProps<CustomError>>): JSX.Element;
|
|
23
|
+
declare function FormSwitchGroup<CustomError extends string>({ id: _id, label, wrapperProps, labelProps, validate, errorProps: errorComponentProps, values, onChange, type, errors, disabled: allDisabled, ...switchProps }: PropsWithChildren<FormSwitchGroupProps<CustomError>>): JSX.Element;
|
|
23
24
|
export default FormSwitchGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("../_virtual/_tslib.js"),r=require("react"),a=require("clsx"),s=require("../FormField/FormField.js"),l=require("../common/useFieldIds.js"),t=require("../common/useInputErrorProps.js"),i=require("./FormSwitchGroup.module.css.js"),o=require("../node_modules/@k8slens/lds/lib/es/Switch/Switch.js");function
|
|
1
|
+
"use strict";var e=require("../_virtual/_tslib.js"),r=require("react"),a=require("clsx"),s=require("../FormField/FormField.js"),l=require("../common/useFieldIds.js"),t=require("../common/useInputErrorProps.js"),i=require("./FormSwitchGroup.module.css.js"),o=require("../node_modules/@k8slens/lds/lib/es/Switch/Switch.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=d(r),u=d(a);module.exports=function(a){var d=a.id,c=a.label,p=a.wrapperProps,m=a.labelProps;a.validate;var _=a.errorProps,b=a.values,f=a.onChange;a.type;var v=a.errors,g=a.disabled,h=e.__rest(a,["id","label","wrapperProps","labelProps","validate","errorProps","values","onChange","type","errors","disabled"]),N=l.useFieldIds(d),P=N.id,w=N.labelId,q=N.errorId,E=t.useInputErrorProps({id:q,errors:v}),F=r.useCallback((function(r,a){var s=b.map((function(s){return s.id===r?e.__assign(e.__assign({},s),{checked:a}):s}));f(s,[r])}),[b,f]);return n.default.createElement(s,e.__assign({id:P,className:i.formSwitchGroup,label:c,labelId:w,errorId:q,errors:v,labelProps:e.__assign(e.__assign({},m),{className:u.default(i.groupLabel,null==m?void 0:m.className)}),errorProps:e.__assign(e.__assign({},E),{className:u.default(i.error,null==_?void 0:_.className)})},p),b.map((function(a){var s=a.id,l=a.label,t=a.checked,d=a.description,c=a.disabled;return n.default.createElement(r.Fragment,{key:s},n.default.createElement(o.Switch,e.__assign({key:s,id:s,checked:t,onChange:function(e){return F(s,e)},disabled:g||c},h,{className:u.default(h.className,i.switch)}),n.default.createElement("span",{className:i.labelWrapper},n.default.createElement("span",{className:i.switchLabel},l),d&&n.default.createElement("p",{className:i.description},d))))})))};
|
package/lib/cjs/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--size-form-field-min-block-size:6.5rem;--
|
|
1
|
+
:root{--size-form-field-min-block-size:6.5rem;--color-font-form-switch-group-heading:var(--alias-color-text-accent);--spacing-form-field-label-margin-block-end:var(--spacing-sm);--spacing-form-field-label-padding-inline-start:var(--spacing-xxs);--spacing-form-field-error-margin-block-start:var(--spacing-xs);--spacing-form-field-error-margin-block-end:var(--spacing-sm);--spacing-form-field-error-padding-inline-start:var(--spacing-xs);--spacing-form-switch-group-heading-margin-block-end:var(--spacing-xl);--spacing-form-switch-group-switch-margin-block-end:var(--spacing-xl);--spacing-form-switch-group-switch-gap:var(--spacing-xl);--spacing-form-switch-group-label-margin-inline-start:var(--spacing-xxs);--spacing-form-switch-group-label-margin-block-end:var(--spacing-md);--spacing-form-switch-group-description-margin-inline-start:var(--spacing-xxs);--color-font-form-field-label:var(--alias-color-text-primary);--color-font-form-field-error:var(--alias-color-danger);--color-font-form-switch-group-label:var(--alias-color-text-primary);--color-font-form-switch-group-description:var(--alias-color-text-tertiary)}.lds-form-label{color:var(--color-font-form-field-label);display:block;font-size:var(--typography-size-sm);font-size:var(--typography-heading-size-h3);font-weight:700;line-height:var(--typography-line-height-sm);text-align:left;text-transform:uppercase}.lds-form-label--required-asterisk:after{color:var(--alias-color-text-accent);content:"*";display:inline-block}.lds-form-error-message{color:var(--color-font-form-field-error);display:block;font-size:var(--typography-size-xs);line-height:var(--typography-line-height-xs);line-height:1rem}.lds-form-error-message>ul{list-style-type:none;padding-left:0}.lds-form-field{min-height:var(--size-form-field-min-block-size)}.lds-form-field--label{margin-bottom:var(--spacing-form-field-label-margin-block-end);padding-left:var(--spacing-form-field-label-padding-inline-start)}.lds-form-field--error{margin-bottom:var(--spacing-form-field-error-margin-block-end);margin-top:var(--spacing-form-field-error-margin-block-start);padding-left:var(--spacing-form-field-error-padding-inline-start)}.lds-form-switch-group .lds-form-switch-group--group-label{color:var(--color-font-form-switch-group-heading);font-size:var(--typography-heading-size-h3);font-weight:700;line-height:var(--typography-heading-line-height-h3);margin-bottom:var(--spacing-form-switch-group-heading-margin-block-end);text-transform:none}.lds-form-switch-group--label-wrapper{display:flex;flex-direction:column;margin-bottom:var(--spacing-form-switch-group-switch-margin-block-end)}.lds-form-switch-group--switch-label{color:var(--color-font-form-switch-group-label);font-size:var(--typography-heading-size-h4);font-weight:700;line-height:var(--typography-heading-line-height-h4);margin-bottom:var(--spacing-form-switch-group-label-margin-block-end);margin-left:var(--spacing-form-switch-group-label-margin-inline-start);text-transform:uppercase}.lds-form-switch-group label{gap:var(--spacing-form-switch-group-switch-gap)}.lds-form-switch-group input{align-self:flex-start}.lds-form-switch-group--description{color:var(--color-font-form-switch-group-description);font-size:var(--typography-size-sm);line-height:var(--typography-line-height-sm);margin:0;margin-left:var(--spacing-form-switch-group-description-margin-inline-start)}
|
|
@@ -5,6 +5,7 @@ export declare type SwitchValue = {
|
|
|
5
5
|
id: string;
|
|
6
6
|
label: string;
|
|
7
7
|
checked: boolean | undefined;
|
|
8
|
+
disabled?: boolean;
|
|
8
9
|
description?: string;
|
|
9
10
|
};
|
|
10
11
|
export interface FormSwitchGroupProps<CustomError extends string> extends Omit<FormFieldComponentProps<number, CustomError>, "onChange" | "value">, Omit<SwitchProps, "value" | "onChange" | "label"> {
|
|
@@ -19,5 +20,5 @@ export interface FormSwitchGroupProps<CustomError extends string> extends Omit<F
|
|
|
19
20
|
*
|
|
20
21
|
* Displays errors with accessible label and error notifications.
|
|
21
22
|
*/
|
|
22
|
-
declare function FormSwitchGroup<CustomError extends string>({ id: _id, label, wrapperProps, labelProps, validate, errorProps: errorComponentProps, values, onChange, type, errors, ...switchProps }: PropsWithChildren<FormSwitchGroupProps<CustomError>>): JSX.Element;
|
|
23
|
+
declare function FormSwitchGroup<CustomError extends string>({ id: _id, label, wrapperProps, labelProps, validate, errorProps: errorComponentProps, values, onChange, type, errors, disabled: allDisabled, ...switchProps }: PropsWithChildren<FormSwitchGroupProps<CustomError>>): JSX.Element;
|
|
23
24
|
export default FormSwitchGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__rest as e,__assign as r}from"../_virtual/_tslib.js";import a,{useCallback as
|
|
1
|
+
import{__rest as e,__assign as r}from"../_virtual/_tslib.js";import a,{useCallback as s,Fragment as o}from"react";import l from"clsx";import t from"../FormField/FormField.js";import{useFieldIds as i}from"../common/useFieldIds.js";import{useInputErrorProps as m}from"../common/useInputErrorProps.js";import c from"./FormSwitchGroup.module.css.js";import{Switch as d}from"../node_modules/@k8slens/lds/lib/es/Switch/Switch.js";function n(n){var p=n.id,u=n.label,b=n.wrapperProps,f=n.labelProps;n.validate;var h=n.errorProps,v=n.values,N=n.onChange;n.type;var w=n.errors,P=n.disabled,E=e(n,["id","label","wrapperProps","labelProps","validate","errorProps","values","onChange","type","errors","disabled"]),j=i(p),k=j.id,F=j.labelId,I=j.errorId,S=m({id:I,errors:w}),g=s((function(e,a){var s=v.map((function(s){return s.id===e?r(r({},s),{checked:a}):s}));N(s,[e])}),[v,N]);return a.createElement(t,r({id:k,className:c.formSwitchGroup,label:u,labelId:F,errorId:I,errors:w,labelProps:r(r({},f),{className:l(c.groupLabel,null==f?void 0:f.className)}),errorProps:r(r({},S),{className:l(c.error,null==h?void 0:h.className)})},b),v.map((function(e){var s=e.id,t=e.label,i=e.checked,m=e.description,n=e.disabled;return a.createElement(o,{key:s},a.createElement(d,r({key:s,id:s,checked:i,onChange:function(e){return g(s,e)},disabled:P||n},E,{className:l(E.className,c.switch)}),a.createElement("span",{className:c.labelWrapper},a.createElement("span",{className:c.switchLabel},t),m&&a.createElement("p",{className:c.description},m))))})))}export{n as default};
|
package/lib/es/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--size-form-field-min-block-size:6.5rem;--
|
|
1
|
+
:root{--size-form-field-min-block-size:6.5rem;--color-font-form-switch-group-heading:var(--alias-color-text-accent);--spacing-form-field-label-margin-block-end:var(--spacing-sm);--spacing-form-field-label-padding-inline-start:var(--spacing-xxs);--spacing-form-field-error-margin-block-start:var(--spacing-xs);--spacing-form-field-error-margin-block-end:var(--spacing-sm);--spacing-form-field-error-padding-inline-start:var(--spacing-xs);--spacing-form-switch-group-heading-margin-block-end:var(--spacing-xl);--spacing-form-switch-group-switch-margin-block-end:var(--spacing-xl);--spacing-form-switch-group-switch-gap:var(--spacing-xl);--spacing-form-switch-group-label-margin-inline-start:var(--spacing-xxs);--spacing-form-switch-group-label-margin-block-end:var(--spacing-md);--spacing-form-switch-group-description-margin-inline-start:var(--spacing-xxs);--color-font-form-field-label:var(--alias-color-text-primary);--color-font-form-field-error:var(--alias-color-danger);--color-font-form-switch-group-label:var(--alias-color-text-primary);--color-font-form-switch-group-description:var(--alias-color-text-tertiary)}.lds-form-label{color:var(--color-font-form-field-label);display:block;font-size:var(--typography-size-sm);font-size:var(--typography-heading-size-h3);font-weight:700;line-height:var(--typography-line-height-sm);text-align:left;text-transform:uppercase}.lds-form-label--required-asterisk:after{color:var(--alias-color-text-accent);content:"*";display:inline-block}.lds-form-error-message{color:var(--color-font-form-field-error);display:block;font-size:var(--typography-size-xs);line-height:var(--typography-line-height-xs);line-height:1rem}.lds-form-error-message>ul{list-style-type:none;padding-left:0}.lds-form-field{min-height:var(--size-form-field-min-block-size)}.lds-form-field--label{margin-bottom:var(--spacing-form-field-label-margin-block-end);padding-left:var(--spacing-form-field-label-padding-inline-start)}.lds-form-field--error{margin-bottom:var(--spacing-form-field-error-margin-block-end);margin-top:var(--spacing-form-field-error-margin-block-start);padding-left:var(--spacing-form-field-error-padding-inline-start)}.lds-form-switch-group .lds-form-switch-group--group-label{color:var(--color-font-form-switch-group-heading);font-size:var(--typography-heading-size-h3);font-weight:700;line-height:var(--typography-heading-line-height-h3);margin-bottom:var(--spacing-form-switch-group-heading-margin-block-end);text-transform:none}.lds-form-switch-group--label-wrapper{display:flex;flex-direction:column;margin-bottom:var(--spacing-form-switch-group-switch-margin-block-end)}.lds-form-switch-group--switch-label{color:var(--color-font-form-switch-group-label);font-size:var(--typography-heading-size-h4);font-weight:700;line-height:var(--typography-heading-line-height-h4);margin-bottom:var(--spacing-form-switch-group-label-margin-block-end);margin-left:var(--spacing-form-switch-group-label-margin-inline-start);text-transform:uppercase}.lds-form-switch-group label{gap:var(--spacing-form-switch-group-switch-gap)}.lds-form-switch-group input{align-self:flex-start}.lds-form-switch-group--description{color:var(--color-font-form-switch-group-description);font-size:var(--typography-size-sm);line-height:var(--typography-line-height-sm);margin:0;margin-left:var(--spacing-form-switch-group-description-margin-inline-start)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@k8slens/lds-form",
|
|
3
|
-
"version": "0.41.
|
|
3
|
+
"version": "0.41.5",
|
|
4
4
|
"description": "Lens Design System – React Form components",
|
|
5
5
|
"author": "Mirantis Inc",
|
|
6
6
|
"license": "MIT",
|
|
@@ -28,13 +28,14 @@
|
|
|
28
28
|
"format": "eslint --fix ."
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@k8slens/lds": "^0.46.
|
|
31
|
+
"@k8slens/lds": "^0.46.5"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@k8slens/lds-tokens": "^0.47.
|
|
34
|
+
"@k8slens/lds-tokens": "^0.47.5",
|
|
35
35
|
"@rollup/plugin-node-resolve": "15.0.2",
|
|
36
36
|
"@storybook/react": "6.5.16",
|
|
37
|
-
"@testing-library/react": "14.0.0"
|
|
37
|
+
"@testing-library/react": "14.0.0",
|
|
38
|
+
"typescript": "4.8.4"
|
|
38
39
|
},
|
|
39
40
|
"peerDependencies": {
|
|
40
41
|
"@types/react": "18.2.0",
|
|
@@ -54,5 +55,5 @@
|
|
|
54
55
|
"\\.svg": "<rootDir>/../../__mocks__/SVGStub.js"
|
|
55
56
|
}
|
|
56
57
|
},
|
|
57
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "ba4fcd0c91e8b4fc818e4f95ee77f790b714d572"
|
|
58
59
|
}
|