1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
| import { createElement } from "react";
| import { IconInfoOutline } from "@humansignal/icons";
| import { Tooltip } from "@humansignal/ui";
| import { cn } from "../../../../utils/bem";
| import "./Label.scss";
| import { clsx } from "clsx";
| /** @deprecated - needs to be replaced with @humansignal/ui Label - visualizes differently currently */
| const Label = ({
| text,
| children,
| required,
| placement,
| description,
| footer,
| size,
| large,
| style,
| simple,
| flat,
| className,
| tooltip,
| tooltipIcon,
| }) => {
| const rootClass = cn("label-ls");
| const classList = [rootClass.toClassName()];
| const tagName = simple ? "div" : "label";
| const mods = {
| size,
| large,
| flat,
| placement,
| withDescription: !!description,
| withFooter: !!footer,
| empty: !children,
| };
|
| classList.push(rootClass.mod(mods).toClassName());
| const rootProps = {
| className: clsx(classList, className),
| style: style,
| };
|
| if (required) {
| rootProps["data-required"] = true;
| }
|
| return createElement(
| tagName,
| rootProps,
| <>
| <div className={rootClass.elem("text")}>
| <div className={rootClass.elem("content")}>
| <div className={rootClass.elem("label")}>
| <span>{text}</span>
| {tooltip && (
| <div className={rootClass.elem("tooltip")}>
| <Tooltip title={tooltip}>{tooltipIcon ? tooltipIcon : <IconInfoOutline />}</Tooltip>
| </div>
| )}
| </div>
| {description && <div className={rootClass.elem("description")}>{description}</div>}
| </div>
| </div>
| <div className={rootClass.elem("field")}>{children}</div>
| {footer && <div className={rootClass.elem("footer")}>{footer}</div>}
| </>,
| );
| };
|
| export default Label;
|
|
