@veeqo/ui 9.1.2 → 9.2.0
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/dist/components/Choice/Choice.cjs +3 -3
- package/dist/components/Choice/Choice.cjs.map +1 -1
- package/dist/components/Choice/Choice.d.ts +5 -4
- package/dist/components/Choice/Choice.js +3 -3
- package/dist/components/Choice/Choice.js.map +1 -1
- package/dist/hoc/withLabels/withLabels.cjs +3 -3
- package/dist/hoc/withLabels/withLabels.cjs.map +1 -1
- package/dist/hoc/withLabels/withLabels.d.ts +5 -4
- package/dist/hoc/withLabels/withLabels.js +3 -3
- package/dist/hoc/withLabels/withLabels.js.map +1 -1
- package/package.json +2 -2
|
@@ -17,7 +17,7 @@ const generateClassNames = (prefix) => ({
|
|
|
17
17
|
tooltip: prefix ? 'choice__tooltip' : undefined,
|
|
18
18
|
error: prefix ? 'choice__error' : undefined,
|
|
19
19
|
});
|
|
20
|
-
const Choice = ({ id, className, label, hint, tooltip, error, bordered, Badge, Accessory, Footer, children, disabled = false, labelVariant = 'body', inputPosition = 'left', }) => {
|
|
20
|
+
const Choice = ({ id, className, label, hint, tooltip, tooltipContent, error, bordered, Badge, Accessory, Footer, children, disabled = false, labelVariant = 'body', inputPosition = 'left', }) => {
|
|
21
21
|
const classNames = generateClassNames(className);
|
|
22
22
|
const contentMarkup = (React__default.default.createElement(styled.RootLayout, null,
|
|
23
23
|
inputPosition === 'left' && (React__default.default.createElement(styled.InputLayout, { align: Accessory ? 'center' : 'top' }, children)),
|
|
@@ -26,8 +26,8 @@ const Choice = ({ id, className, label, hint, tooltip, error, bordered, Badge, A
|
|
|
26
26
|
React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
|
|
27
27
|
Badge,
|
|
28
28
|
label && (React__default.default.createElement(Text.Text, { variant: labelVariant, className: classNames.label }, label)),
|
|
29
|
-
tooltip && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip, className: classNames.tooltip },
|
|
30
|
-
React__default.default.createElement(HelpIcon.HelpIcon, { name: "help", width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.lightest })))),
|
|
29
|
+
(tooltip || tooltipContent) && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
|
|
30
|
+
React__default.default.createElement(HelpIcon.HelpIcon, { "data-testid": "tooltip-help", name: "help", width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.lightest })))),
|
|
31
31
|
hint && React__default.default.createElement(styled.HintText, { className: classNames.hint }, hint),
|
|
32
32
|
error && React__default.default.createElement(styled.ErrorText, { className: classNames.error }, error),
|
|
33
33
|
Footer)) : null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Choice.cjs","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n Wrapper,\n BorderedWrapper,\n RootLayout,\n InputLayout,\n AccessoryLayout,\n TextLayout,\n HintText,\n ErrorText,\n BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n className?: string;\n disabled?: boolean;\n label?:
|
|
1
|
+
{"version":3,"file":"Choice.cjs","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n Wrapper,\n BorderedWrapper,\n RootLayout,\n InputLayout,\n AccessoryLayout,\n TextLayout,\n HintText,\n ErrorText,\n BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n className?: string;\n disabled?: boolean;\n label?: ReactNode;\n hint?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n error?: ReactNode;\n bordered?: boolean;\n Badge?: ReactNode;\n Accessory?: ReactNode;\n Footer?: ReactNode;\n inputPosition?: 'left' | 'right';\n labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n id: string;\n children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n hint: prefix ? 'choice__hint' : undefined,\n label: prefix ? 'choice__label' : undefined,\n tooltip: prefix ? 'choice__tooltip' : undefined,\n error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n id,\n className,\n label,\n hint,\n tooltip,\n tooltipContent,\n error,\n bordered,\n Badge,\n Accessory,\n Footer,\n children,\n disabled = false,\n labelVariant = 'body',\n inputPosition = 'left',\n}: ChoiceProps) => {\n const classNames = generateClassNames(className);\n\n const contentMarkup = (\n <RootLayout>\n {inputPosition === 'left' && (\n <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n )}\n {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n {label || hint || error || Badge || Footer ? (\n <TextLayout>\n <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n {Badge}\n {label && (\n <Text variant={labelVariant} className={classNames.label}>\n {label}\n </Text>\n )}\n {(tooltip || tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n name=\"help\"\n width={theme.sizes.base}\n color={theme.colors.neutral.ink.lightest}\n />\n </BlockTooltip>\n )}\n </Stack>\n {hint && <HintText className={classNames.hint}>{hint}</HintText>}\n {error && <ErrorText className={classNames.error}>{error}</ErrorText>}\n {Footer}\n </TextLayout>\n ) : null}\n {inputPosition === 'right' && (\n <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n )}\n </RootLayout>\n );\n\n if (bordered) {\n return (\n <BorderedWrapper disabled={disabled} htmlFor={id} className={className}>\n {contentMarkup}\n </BorderedWrapper>\n );\n }\n\n return (\n <Wrapper disabled={disabled} htmlFor={id} className={className}>\n {contentMarkup}\n </Wrapper>\n );\n};\n"],"names":["React","RootLayout","InputLayout","AccessoryLayout","TextLayout","Stack","Text","BlockTooltip","HelpIcon","theme","HintText","ErrorText","BorderedWrapper","Wrapper"],"mappings":"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"}
|
|
@@ -3,10 +3,11 @@ import { TextVariant } from '../Text/types';
|
|
|
3
3
|
export interface ForwardedChoiceProps {
|
|
4
4
|
className?: string;
|
|
5
5
|
disabled?: boolean;
|
|
6
|
-
label?:
|
|
7
|
-
hint?:
|
|
6
|
+
label?: ReactNode;
|
|
7
|
+
hint?: ReactNode;
|
|
8
8
|
tooltip?: string;
|
|
9
|
-
|
|
9
|
+
tooltipContent?: ReactNode;
|
|
10
|
+
error?: ReactNode;
|
|
10
11
|
bordered?: boolean;
|
|
11
12
|
Badge?: ReactNode;
|
|
12
13
|
Accessory?: ReactNode;
|
|
@@ -18,4 +19,4 @@ export interface ChoiceProps extends ForwardedChoiceProps {
|
|
|
18
19
|
id: string;
|
|
19
20
|
children: ReactNode;
|
|
20
21
|
}
|
|
21
|
-
export declare const Choice: ({ id, className, label, hint, tooltip, error, bordered, Badge, Accessory, Footer, children, disabled, labelVariant, inputPosition, }: ChoiceProps) => React.JSX.Element;
|
|
22
|
+
export declare const Choice: ({ id, className, label, hint, tooltip, tooltipContent, error, bordered, Badge, Accessory, Footer, children, disabled, labelVariant, inputPosition, }: ChoiceProps) => React.JSX.Element;
|
|
@@ -11,7 +11,7 @@ const generateClassNames = (prefix) => ({
|
|
|
11
11
|
tooltip: prefix ? 'choice__tooltip' : undefined,
|
|
12
12
|
error: prefix ? 'choice__error' : undefined,
|
|
13
13
|
});
|
|
14
|
-
const Choice = ({ id, className, label, hint, tooltip, error, bordered, Badge, Accessory, Footer, children, disabled = false, labelVariant = 'body', inputPosition = 'left', }) => {
|
|
14
|
+
const Choice = ({ id, className, label, hint, tooltip, tooltipContent, error, bordered, Badge, Accessory, Footer, children, disabled = false, labelVariant = 'body', inputPosition = 'left', }) => {
|
|
15
15
|
const classNames = generateClassNames(className);
|
|
16
16
|
const contentMarkup = (React.createElement(RootLayout, null,
|
|
17
17
|
inputPosition === 'left' && (React.createElement(InputLayout, { align: Accessory ? 'center' : 'top' }, children)),
|
|
@@ -20,8 +20,8 @@ const Choice = ({ id, className, label, hint, tooltip, error, bordered, Badge, A
|
|
|
20
20
|
React.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
|
|
21
21
|
Badge,
|
|
22
22
|
label && (React.createElement(Text, { variant: labelVariant, className: classNames.label }, label)),
|
|
23
|
-
tooltip && (React.createElement(BlockTooltip, { text: tooltip, className: classNames.tooltip },
|
|
24
|
-
React.createElement(HelpIcon, { name: "help", width: theme.sizes.base, color: theme.colors.neutral.ink.lightest })))),
|
|
23
|
+
(tooltip || tooltipContent) && (React.createElement(BlockTooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
|
|
24
|
+
React.createElement(HelpIcon, { "data-testid": "tooltip-help", name: "help", width: theme.sizes.base, color: theme.colors.neutral.ink.lightest })))),
|
|
25
25
|
hint && React.createElement(HintText, { className: classNames.hint }, hint),
|
|
26
26
|
error && React.createElement(ErrorText, { className: classNames.error }, error),
|
|
27
27
|
Footer)) : null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Choice.js","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n Wrapper,\n BorderedWrapper,\n RootLayout,\n InputLayout,\n AccessoryLayout,\n TextLayout,\n HintText,\n ErrorText,\n BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n className?: string;\n disabled?: boolean;\n label?:
|
|
1
|
+
{"version":3,"file":"Choice.js","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n Wrapper,\n BorderedWrapper,\n RootLayout,\n InputLayout,\n AccessoryLayout,\n TextLayout,\n HintText,\n ErrorText,\n BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n className?: string;\n disabled?: boolean;\n label?: ReactNode;\n hint?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n error?: ReactNode;\n bordered?: boolean;\n Badge?: ReactNode;\n Accessory?: ReactNode;\n Footer?: ReactNode;\n inputPosition?: 'left' | 'right';\n labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n id: string;\n children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n hint: prefix ? 'choice__hint' : undefined,\n label: prefix ? 'choice__label' : undefined,\n tooltip: prefix ? 'choice__tooltip' : undefined,\n error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n id,\n className,\n label,\n hint,\n tooltip,\n tooltipContent,\n error,\n bordered,\n Badge,\n Accessory,\n Footer,\n children,\n disabled = false,\n labelVariant = 'body',\n inputPosition = 'left',\n}: ChoiceProps) => {\n const classNames = generateClassNames(className);\n\n const contentMarkup = (\n <RootLayout>\n {inputPosition === 'left' && (\n <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n )}\n {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n {label || hint || error || Badge || Footer ? (\n <TextLayout>\n <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n {Badge}\n {label && (\n <Text variant={labelVariant} className={classNames.label}>\n {label}\n </Text>\n )}\n {(tooltip || tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n name=\"help\"\n width={theme.sizes.base}\n color={theme.colors.neutral.ink.lightest}\n />\n </BlockTooltip>\n )}\n </Stack>\n {hint && <HintText className={classNames.hint}>{hint}</HintText>}\n {error && <ErrorText className={classNames.error}>{error}</ErrorText>}\n {Footer}\n </TextLayout>\n ) : null}\n {inputPosition === 'right' && (\n <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n )}\n </RootLayout>\n );\n\n if (bordered) {\n return (\n <BorderedWrapper disabled={disabled} htmlFor={id} className={className}>\n {contentMarkup}\n </BorderedWrapper>\n );\n }\n\n return (\n <Wrapper disabled={disabled} htmlFor={id} className={className}>\n {contentMarkup}\n </Wrapper>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
12
|
|
|
13
13
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
14
14
|
|
|
15
|
-
const withLabels = (Component) => ({ label, hint, error, tooltip, ...otherProps }) => {
|
|
15
|
+
const withLabels = (Component) => ({ label, hint, error, tooltip, tooltipContent, ...otherProps }) => {
|
|
16
16
|
const componentId = useId.useId({ id: otherProps === null || otherProps === undefined ? undefined : otherProps.id, prefix: Component.name });
|
|
17
17
|
if (!label)
|
|
18
18
|
return React__default.default.createElement(Component, { hasError: !!error, ...otherProps });
|
|
@@ -20,8 +20,8 @@ const withLabels = (Component) => ({ label, hint, error, tooltip, ...otherProps
|
|
|
20
20
|
React__default.default.createElement("div", { style: { marginBottom: index.theme.sizes.xs } },
|
|
21
21
|
React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
|
|
22
22
|
React__default.default.createElement(styled.Label, { id: `${componentId}-label`, htmlFor: componentId }, label),
|
|
23
|
-
tooltip && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip },
|
|
24
|
-
React__default.default.createElement(HelpIcon.HelpIcon, { width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.neutral.ink.light })))),
|
|
23
|
+
(tooltip || tooltipContent) && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip, content: tooltipContent },
|
|
24
|
+
React__default.default.createElement(HelpIcon.HelpIcon, { "data-testid": "tooltip-help", width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.neutral.ink.light })))),
|
|
25
25
|
hint && React__default.default.createElement(styled.Hint, { id: `${componentId}-hint` }, hint)),
|
|
26
26
|
React__default.default.createElement(Component, { id: componentId, hasError: !!error, ...otherProps }),
|
|
27
27
|
error && (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: "xs" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC } from 'react';\nimport { AttentionIcon } from '../../tempIcons/AttentionIcon';\nimport { theme } from '../../theme';\nimport { Stack } from '../../components/Stack';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip } from './styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { useId } from '../../hooks/useId';\n\nexport interface WithLabelsProps {\n id?: string;\n label?:
|
|
1
|
+
{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC, ReactNode } from 'react';\nimport { AttentionIcon } from '../../tempIcons/AttentionIcon';\nimport { theme } from '../../theme';\nimport { Stack } from '../../components/Stack';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip } from './styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { useId } from '../../hooks/useId';\n\nexport interface WithLabelsProps {\n id?: string;\n label?: ReactNode;\n hint?: ReactNode;\n error?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n}\n\nexport const withLabels =\n <P extends object>(Component: ComponentType<P>): FC<P & WithLabelsProps> =>\n ({ label, hint, error, tooltip, tooltipContent, ...otherProps }: WithLabelsProps) => {\n const componentId = useId({ id: otherProps?.id, prefix: Component.name });\n\n if (!label) return <Component hasError={!!error} {...(otherProps as P)} />;\n\n return (\n <RootStack spacing=\"sm\" alignX=\"stretch\">\n <div style={{ marginBottom: theme.sizes.xs }}>\n <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n <Label id={`${componentId}-label`} htmlFor={componentId}>\n {label}\n </Label>\n {(tooltip || tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n </BlockTooltip>\n )}\n </Stack>\n {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n </div>\n <Component id={componentId} hasError={!!error} {...(otherProps as P)} />\n {error && (\n <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n <AttentionIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n <Error>{error}</Error>\n </Stack>\n )}\n </RootStack>\n );\n };\n"],"names":["useId","React","RootStack","theme","Stack","Label","BlockTooltip","HelpIcon","Hint","AttentionIcon","Error"],"mappings":";;;;;;;;;;;;;;AAkBa,MAAA,UAAU,GACrB,CAAmB,SAA2B,KAC9C,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,UAAU,EAAmB,KAAI;IAClF,MAAM,WAAW,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,SAAA,GAAA,SAAA,GAAV,UAAU,CAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzE,IAAA,IAAI,CAAC,KAAK;QAAE,OAAOC,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAA,CAAI;IAE1E,QACEA,sBAAC,CAAA,aAAA,CAAAC,gBAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;QACtCD,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,YAAY,EAAEE,WAAK,CAAC,KAAK,CAAC,EAAE,EAAE,EAAA;AAC1C,YAAAF,sBAAA,CAAA,aAAA,CAACG,WAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;AACxD,gBAAAH,sBAAA,CAAA,aAAA,CAACI,YAAK,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAQ,MAAA,CAAA,EAAE,OAAO,EAAE,WAAW,EAAA,EACpD,KAAK,CACA;AACP,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBJ,sBAAA,CAAA,aAAA,CAACK,mBAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAL,sBAAA,CAAA,aAAA,CAACM,iBAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAEJ,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EACrC,CAAA,CACW,CAChB,CACK;AACP,YAAA,IAAI,IAAIF,sBAAA,CAAA,aAAA,CAACO,WAAI,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAO,KAAA,CAAA,EAAA,EAAG,IAAI,CAAQ,CACnD;AACN,QAAAP,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAI,CAAA;AACvE,QAAA,KAAK,KACJA,sBAAC,CAAA,aAAA,CAAAG,WAAK,IAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;YACxDH,sBAAC,CAAA,aAAA,CAAAQ,2BAAa,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAEN,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA;YAChFF,sBAAC,CAAA,aAAA,CAAAS,YAAK,QAAE,KAAK,CAAS,CAChB,CACT,CACS;AAEhB;;;;"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import React, { ComponentType, FC } from 'react';
|
|
1
|
+
import React, { ComponentType, FC, ReactNode } from 'react';
|
|
2
2
|
export interface WithLabelsProps {
|
|
3
3
|
id?: string;
|
|
4
|
-
label?:
|
|
5
|
-
hint?:
|
|
6
|
-
error?:
|
|
4
|
+
label?: ReactNode;
|
|
5
|
+
hint?: ReactNode;
|
|
6
|
+
error?: ReactNode;
|
|
7
7
|
tooltip?: string;
|
|
8
|
+
tooltipContent?: ReactNode;
|
|
8
9
|
}
|
|
9
10
|
export declare const withLabels: <P extends object>(Component: React.ComponentType<P>) => React.FC<P & WithLabelsProps>;
|
|
@@ -6,7 +6,7 @@ import { RootStack, Label, BlockTooltip, Hint, Error } from './styled.js';
|
|
|
6
6
|
import { HelpIcon } from '../../tempIcons/HelpIcon.js';
|
|
7
7
|
import { useId } from '../../hooks/useId.js';
|
|
8
8
|
|
|
9
|
-
const withLabels = (Component) => ({ label, hint, error, tooltip, ...otherProps }) => {
|
|
9
|
+
const withLabels = (Component) => ({ label, hint, error, tooltip, tooltipContent, ...otherProps }) => {
|
|
10
10
|
const componentId = useId({ id: otherProps === null || otherProps === undefined ? undefined : otherProps.id, prefix: Component.name });
|
|
11
11
|
if (!label)
|
|
12
12
|
return React.createElement(Component, { hasError: !!error, ...otherProps });
|
|
@@ -14,8 +14,8 @@ const withLabels = (Component) => ({ label, hint, error, tooltip, ...otherProps
|
|
|
14
14
|
React.createElement("div", { style: { marginBottom: theme.sizes.xs } },
|
|
15
15
|
React.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
|
|
16
16
|
React.createElement(Label, { id: `${componentId}-label`, htmlFor: componentId }, label),
|
|
17
|
-
tooltip && (React.createElement(BlockTooltip, { text: tooltip },
|
|
18
|
-
React.createElement(HelpIcon, { width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.neutral.ink.light })))),
|
|
17
|
+
(tooltip || tooltipContent) && (React.createElement(BlockTooltip, { text: tooltip, content: tooltipContent },
|
|
18
|
+
React.createElement(HelpIcon, { "data-testid": "tooltip-help", width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.neutral.ink.light })))),
|
|
19
19
|
hint && React.createElement(Hint, { id: `${componentId}-hint` }, hint)),
|
|
20
20
|
React.createElement(Component, { id: componentId, hasError: !!error, ...otherProps }),
|
|
21
21
|
error && (React.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: "xs" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC } from 'react';\nimport { AttentionIcon } from '../../tempIcons/AttentionIcon';\nimport { theme } from '../../theme';\nimport { Stack } from '../../components/Stack';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip } from './styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { useId } from '../../hooks/useId';\n\nexport interface WithLabelsProps {\n id?: string;\n label?:
|
|
1
|
+
{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC, ReactNode } from 'react';\nimport { AttentionIcon } from '../../tempIcons/AttentionIcon';\nimport { theme } from '../../theme';\nimport { Stack } from '../../components/Stack';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip } from './styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { useId } from '../../hooks/useId';\n\nexport interface WithLabelsProps {\n id?: string;\n label?: ReactNode;\n hint?: ReactNode;\n error?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n}\n\nexport const withLabels =\n <P extends object>(Component: ComponentType<P>): FC<P & WithLabelsProps> =>\n ({ label, hint, error, tooltip, tooltipContent, ...otherProps }: WithLabelsProps) => {\n const componentId = useId({ id: otherProps?.id, prefix: Component.name });\n\n if (!label) return <Component hasError={!!error} {...(otherProps as P)} />;\n\n return (\n <RootStack spacing=\"sm\" alignX=\"stretch\">\n <div style={{ marginBottom: theme.sizes.xs }}>\n <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n <Label id={`${componentId}-label`} htmlFor={componentId}>\n {label}\n </Label>\n {(tooltip || tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n </BlockTooltip>\n )}\n </Stack>\n {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n </div>\n <Component id={componentId} hasError={!!error} {...(otherProps as P)} />\n {error && (\n <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n <AttentionIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n <Error>{error}</Error>\n </Stack>\n )}\n </RootStack>\n );\n };\n"],"names":[],"mappings":";;;;;;;;AAkBa,MAAA,UAAU,GACrB,CAAmB,SAA2B,KAC9C,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,UAAU,EAAmB,KAAI;IAClF,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,SAAA,GAAA,SAAA,GAAV,UAAU,CAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzE,IAAA,IAAI,CAAC,KAAK;QAAE,OAAO,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAA,CAAI;IAE1E,QACE,KAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;QACtC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,EAAA;AAC1C,YAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;AACxD,gBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAQ,MAAA,CAAA,EAAE,OAAO,EAAE,WAAW,EAAA,EACpD,KAAK,CACA;AACP,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzB,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EACrC,CAAA,CACW,CAChB,CACK;AACP,YAAA,IAAI,IAAI,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAO,KAAA,CAAA,EAAA,EAAG,IAAI,CAAQ,CACnD;AACN,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAI,CAAA;AACvE,QAAA,KAAK,KACJ,KAAC,CAAA,aAAA,CAAA,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;YACxD,KAAC,CAAA,aAAA,CAAA,aAAa,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA;YAChF,KAAC,CAAA,aAAA,CAAA,KAAK,QAAE,KAAK,CAAS,CAChB,CACT,CACS;AAEhB;;;;"}
|
package/package.json
CHANGED