@hh.ru/magritte-ui-tag 2.0.11
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/Tag.d.ts +3 -0
- package/Tag.js +27 -0
- package/Tag.js.map +1 -0
- package/index.css +204 -0
- package/index.d.ts +3 -0
- package/index.js +6 -0
- package/index.js.map +1 -0
- package/index.mock.d.ts +5 -0
- package/index.mock.js +11 -0
- package/index.mock.js.map +1 -0
- package/package.json +35 -0
- package/types.d.ts +35 -0
- package/types.js +3 -0
- package/types.js.map +1 -0
package/Tag.d.ts
ADDED
package/Tag.js
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import classnames from 'classnames';
|
|
4
|
+
|
|
5
|
+
var styles = {"tag":"magritte-tag___WdGxk_2-0-11","tag_style-neutral":"magritte-tag_style-neutral___cw1Bt_2-0-11","tagStyleNeutral":"magritte-tag_style-neutral___cw1Bt_2-0-11","tag__label":"magritte-tag__label___YHV-o_2-0-11","tagLabel":"magritte-tag__label___YHV-o_2-0-11","tag_state-disabled":"magritte-tag_state-disabled___2su23_2-0-11","tagStateDisabled":"magritte-tag_state-disabled___2su23_2-0-11","tag_style-positive":"magritte-tag_style-positive___o2Zfe_2-0-11","tagStylePositive":"magritte-tag_style-positive___o2Zfe_2-0-11","tag_style-negative":"magritte-tag_style-negative___-HbQe_2-0-11","tagStyleNegative":"magritte-tag_style-negative___-HbQe_2-0-11","tag_style-special":"magritte-tag_style-special___-IqT-_2-0-11","tagStyleSpecial":"magritte-tag_style-special___-IqT-_2-0-11","tag_style-warning":"magritte-tag_style-warning___4xBGB_2-0-11","tagStyleWarning":"magritte-tag_style-warning___4xBGB_2-0-11","tag_size-medium":"magritte-tag_size-medium___Splpy_2-0-11","tagSizeMedium":"magritte-tag_size-medium___Splpy_2-0-11","tag_size-large":"magritte-tag_size-large___SWuug_2-0-11","tagSizeLarge":"magritte-tag_size-large___SWuug_2-0-11","tag__icon":"magritte-tag__icon___Avk97_2-0-11","tagIcon":"magritte-tag__icon___Avk97_2-0-11"};
|
|
6
|
+
|
|
7
|
+
const SIZE_TO_CSS = {
|
|
8
|
+
large: styles.tagSizeLarge,
|
|
9
|
+
medium: styles.tagSizeMedium,
|
|
10
|
+
};
|
|
11
|
+
const STYLE_TO_CSS = {
|
|
12
|
+
special: styles.tagStyleSpecial,
|
|
13
|
+
warning: styles.tagStyleWarning,
|
|
14
|
+
positive: styles.tagStylePositive,
|
|
15
|
+
negative: styles.tagStyleNegative,
|
|
16
|
+
neutral: styles.tagStyleNeutral,
|
|
17
|
+
};
|
|
18
|
+
const Tag = ({ style = 'neutral', size = 'medium', disabled = false, hideLabel, icon, ariaLabel, children, }) => {
|
|
19
|
+
const showLabel = !hideLabel && children;
|
|
20
|
+
const IconComponent = icon ?? null;
|
|
21
|
+
return (jsxs("div", { className: classnames(styles.tag, STYLE_TO_CSS[style], SIZE_TO_CSS[size], {
|
|
22
|
+
[styles.tagStateDisabled]: disabled,
|
|
23
|
+
}), children: [IconComponent && (jsx("div", { className: styles.tagIcon, children: jsx(IconComponent, { "aria-label": !showLabel ? ariaLabel : undefined }) })), showLabel && jsx("div", { className: styles.tagLabel, children: children })] }));
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export { Tag };
|
|
27
|
+
//# sourceMappingURL=Tag.js.map
|
package/Tag.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../src/Tag.tsx"],"sourcesContent":["import { ReactElement } from 'react';\nimport classnames from 'classnames';\n\nimport { IconWrapperComponentSize16 } from '@hh.ru/magritte-ui-icon/iconTypes';\nimport { TagProps } from '@hh.ru/magritte-ui-tag/types';\n\nimport styles from './tag.less';\n\nconst SIZE_TO_CSS = {\n large: styles.tagSizeLarge,\n medium: styles.tagSizeMedium,\n};\n\nconst STYLE_TO_CSS = {\n special: styles.tagStyleSpecial,\n warning: styles.tagStyleWarning,\n positive: styles.tagStylePositive,\n negative: styles.tagStyleNegative,\n neutral: styles.tagStyleNeutral,\n};\n\nexport const Tag = <C, I>({\n style = 'neutral',\n size = 'medium',\n disabled = false,\n hideLabel,\n icon,\n ariaLabel,\n children,\n}: TagProps<C, I>): ReactElement => {\n const showLabel = !hideLabel && children;\n const IconComponent: IconWrapperComponentSize16 | null = icon ?? null;\n return (\n <div\n className={classnames(styles.tag, STYLE_TO_CSS[style], SIZE_TO_CSS[size], {\n [styles.tagStateDisabled]: disabled,\n })}\n >\n {IconComponent && (\n <div className={styles.tagIcon}>\n <IconComponent aria-label={!showLabel ? ariaLabel : undefined} />\n </div>\n )}\n {showLabel && <div className={styles.tagLabel}>{children}</div>}\n </div>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAQA,MAAM,WAAW,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC,YAAY;IAC1B,MAAM,EAAE,MAAM,CAAC,aAAa;CAC/B,CAAC;AAEF,MAAM,YAAY,GAAG;IACjB,OAAO,EAAE,MAAM,CAAC,eAAe;IAC/B,OAAO,EAAE,MAAM,CAAC,eAAe;IAC/B,QAAQ,EAAE,MAAM,CAAC,gBAAgB;IACjC,QAAQ,EAAE,MAAM,CAAC,gBAAgB;IACjC,OAAO,EAAE,MAAM,CAAC,eAAe;CAClC,CAAC;AAEW,MAAA,GAAG,GAAG,CAAO,EACtB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,EACJ,SAAS,EACT,QAAQ,GACK,KAAkB;AAC/B,IAAA,MAAM,SAAS,GAAG,CAAC,SAAS,IAAI,QAAQ,CAAC;AACzC,IAAA,MAAM,aAAa,GAAsC,IAAI,IAAI,IAAI,CAAC;AACtE,IAAA,QACIA,IACI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE;AACtE,YAAA,CAAC,MAAM,CAAC,gBAAgB,GAAG,QAAQ;AACtC,SAAA,CAAC,aAED,aAAa,KACVC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,QAAA,EAC1BA,IAAC,aAAa,EAAA,EAAA,YAAA,EAAa,CAAC,SAAS,GAAG,SAAS,GAAG,SAAS,EAAA,CAAI,GAC/D,CACT,EACA,SAAS,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAA,QAAA,EAAG,QAAQ,EAAO,CAAA,CAAA,EAAA,CAC7D,EACR;AACN;;;;"}
|
package/index.css
ADDED
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
:root{
|
|
2
|
+
--magritte-color-component-tag-background-neutral-v18-1-1:#F1F4F9;
|
|
3
|
+
--magritte-color-component-tag-background-positive-v18-1-1:#E8F9EC;
|
|
4
|
+
--magritte-color-component-tag-background-negative-v18-1-1:#FEF2EF;
|
|
5
|
+
--magritte-color-component-tag-background-warning-v18-1-1:#FFF3E6;
|
|
6
|
+
--magritte-color-component-tag-background-special-v18-1-1:#F7F4FF;
|
|
7
|
+
--magritte-color-component-tag-background-state-neutral-disabled-v18-1-1:#f1f4f97a;
|
|
8
|
+
--magritte-color-component-tag-background-state-positive-disabled-v18-1-1:#e8f9ec7a;
|
|
9
|
+
--magritte-color-component-tag-background-state-negative-disabled-v18-1-1:#fef2ef7a;
|
|
10
|
+
--magritte-color-component-tag-background-state-warning-disabled-v18-1-1:#fff3e67a;
|
|
11
|
+
--magritte-color-component-tag-background-state-special-disabled-v18-1-1:#f7f4ff7a;
|
|
12
|
+
--magritte-color-component-tag-text-neutral-v18-1-1:#5e6c77;
|
|
13
|
+
--magritte-color-component-tag-text-positive-v18-1-1:#00984f;
|
|
14
|
+
--magritte-color-component-tag-text-negative-v18-1-1:#ee4735;
|
|
15
|
+
--magritte-color-component-tag-text-warning-v18-1-1:#ac6600;
|
|
16
|
+
--magritte-color-component-tag-text-special-v18-1-1:#883be9;
|
|
17
|
+
--magritte-color-component-tag-text-state-neutral-disabled-v18-1-1:#5e6c777a;
|
|
18
|
+
--magritte-color-component-tag-text-state-positive-disabled-v18-1-1:#00984f7a;
|
|
19
|
+
--magritte-color-component-tag-text-state-negative-disabled-v18-1-1:#ee47357a;
|
|
20
|
+
--magritte-color-component-tag-text-state-warning-disabled-v18-1-1:#ac66007a;
|
|
21
|
+
--magritte-color-component-tag-text-state-special-disabled-v18-1-1:#883be97a;
|
|
22
|
+
--magritte-color-component-tag-icon-neutral-v18-1-1:#54606a;
|
|
23
|
+
--magritte-color-component-tag-icon-positive-v18-1-1:#0d8847;
|
|
24
|
+
--magritte-color-component-tag-icon-negative-v18-1-1:#d64030;
|
|
25
|
+
--magritte-color-component-tag-icon-warning-v18-1-1:#9c5b03;
|
|
26
|
+
--magritte-color-component-tag-icon-special-v18-1-1:#7a34d3;
|
|
27
|
+
--magritte-color-component-tag-icon-state-neutral-disabled-v18-1-1:#54606a7a;
|
|
28
|
+
--magritte-color-component-tag-icon-state-positive-disabled-v18-1-1:#0d88477a;
|
|
29
|
+
--magritte-color-component-tag-icon-state-negative-disabled-v18-1-1:#d640307a;
|
|
30
|
+
--magritte-color-component-tag-icon-state-warning-disabled-v18-1-1:#9c5b037a;
|
|
31
|
+
--magritte-color-component-tag-icon-state-special-disabled-v18-1-1:#7a34d37a;
|
|
32
|
+
}
|
|
33
|
+
:root{
|
|
34
|
+
--magritte-typography-subtitle-1-semibold-font-family-v18-1-1:"Inter";
|
|
35
|
+
--magritte-typography-subtitle-1-semibold-font-weight-v18-1-1:600;
|
|
36
|
+
--magritte-typography-subtitle-1-semibold-line-height-v18-1-1:22px;
|
|
37
|
+
--magritte-typography-subtitle-1-semibold-font-size-v18-1-1:16px;
|
|
38
|
+
--magritte-typography-subtitle-1-semibold-letter-spacing-v18-1-1:0em;
|
|
39
|
+
--magritte-typography-subtitle-1-semibold-text-indent-v18-1-1:0px;
|
|
40
|
+
--magritte-typography-subtitle-1-semibold-text-transform-v18-1-1:none;
|
|
41
|
+
--magritte-typography-subtitle-1-semibold-text-decoration-v18-1-1:none;
|
|
42
|
+
--magritte-typography-label-3-regular-font-family-v18-1-1:"Inter";
|
|
43
|
+
--magritte-typography-label-3-regular-font-weight-v18-1-1:400;
|
|
44
|
+
--magritte-typography-label-3-regular-line-height-v18-1-1:20px;
|
|
45
|
+
--magritte-typography-label-3-regular-font-size-v18-1-1:14px;
|
|
46
|
+
--magritte-typography-label-3-regular-letter-spacing-v18-1-1:0.005em;
|
|
47
|
+
--magritte-typography-label-3-regular-text-indent-v18-1-1:0px;
|
|
48
|
+
--magritte-typography-label-3-regular-text-transform-v18-1-1:none;
|
|
49
|
+
--magritte-typography-label-3-regular-text-decoration-v18-1-1:none;
|
|
50
|
+
--magritte-static-space-50-v18-1-1:2px;
|
|
51
|
+
--magritte-static-space-100-v18-1-1:4px;
|
|
52
|
+
--magritte-static-border-radius-200-v18-1-1:8px;
|
|
53
|
+
--magritte-static-border-radius-450-v18-1-1:18px;
|
|
54
|
+
}
|
|
55
|
+
.magritte-night-theme{
|
|
56
|
+
--magritte-color-component-tag-background-neutral-v18-1-1:#303030;
|
|
57
|
+
--magritte-color-component-tag-background-positive-v18-1-1:#16321F;
|
|
58
|
+
--magritte-color-component-tag-background-negative-v18-1-1:#3D2622;
|
|
59
|
+
--magritte-color-component-tag-background-warning-v18-1-1:#3D270E;
|
|
60
|
+
--magritte-color-component-tag-background-special-v18-1-1:#2F293C;
|
|
61
|
+
--magritte-color-component-tag-text-neutral-v18-1-1:#B9B9B9;
|
|
62
|
+
--magritte-color-component-tag-text-positive-v18-1-1:#10b55f;
|
|
63
|
+
--magritte-color-component-tag-text-negative-v18-1-1:#ff4d3a;
|
|
64
|
+
--magritte-color-component-tag-text-warning-v18-1-1:#d17c09;
|
|
65
|
+
--magritte-color-component-tag-text-special-v18-1-1:#a579f4;
|
|
66
|
+
--magritte-color-component-tag-icon-neutral-v18-1-1:#AABBCA;
|
|
67
|
+
--magritte-color-component-tag-icon-positive-v18-1-1:#10b55f;
|
|
68
|
+
--magritte-color-component-tag-icon-negative-v18-1-1:#ff4d3a;
|
|
69
|
+
--magritte-color-component-tag-icon-warning-v18-1-1:#d17c09;
|
|
70
|
+
--magritte-color-component-tag-icon-special-v18-1-1:#a579f4;
|
|
71
|
+
--magritte-color-component-tag-icon-state-neutral-disabled-v18-1-1:#aabbca7a;
|
|
72
|
+
--magritte-color-component-tag-icon-state-positive-disabled-v18-1-1:#10b55f7a;
|
|
73
|
+
--magritte-color-component-tag-icon-state-negative-disabled-v18-1-1:#ff4d3a7a;
|
|
74
|
+
--magritte-color-component-tag-icon-state-warning-disabled-v18-1-1:#d17c097a;
|
|
75
|
+
--magritte-color-component-tag-icon-state-special-disabled-v18-1-1:#a579f47a;
|
|
76
|
+
--magritte-color-component-tag-text-state-neutral-disabled-v18-1-1:#aabbca7a;
|
|
77
|
+
--magritte-color-component-tag-text-state-positive-disabled-v18-1-1:#10b55f7a;
|
|
78
|
+
--magritte-color-component-tag-text-state-negative-disabled-v18-1-1:#ff4d3a7a;
|
|
79
|
+
--magritte-color-component-tag-text-state-warning-disabled-v18-1-1:#d17c097a;
|
|
80
|
+
--magritte-color-component-tag-text-state-special-disabled-v18-1-1:#a579f47a;
|
|
81
|
+
--magritte-color-component-tag-background-state-neutral-disabled-v18-1-1:#3030307a;
|
|
82
|
+
--magritte-color-component-tag-background-state-positive-disabled-v18-1-1:#16321f7a;
|
|
83
|
+
--magritte-color-component-tag-background-state-negative-disabled-v18-1-1:#3d26227a;
|
|
84
|
+
--magritte-color-component-tag-background-state-warning-disabled-v18-1-1:#3d270e7a;
|
|
85
|
+
--magritte-color-component-tag-background-state-special-disabled-v18-1-1:#2f293c7a;
|
|
86
|
+
}
|
|
87
|
+
.magritte-tag___WdGxk_2-0-11{
|
|
88
|
+
display:inline-flex;
|
|
89
|
+
align-items:center;
|
|
90
|
+
justify-content:center;
|
|
91
|
+
max-width:288px;
|
|
92
|
+
}
|
|
93
|
+
.magritte-tag_style-neutral___cw1Bt_2-0-11{
|
|
94
|
+
background-color:var(--magritte-color-component-tag-background-neutral-v18-1-1);
|
|
95
|
+
--magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-neutral-v18-1-1);
|
|
96
|
+
}
|
|
97
|
+
.magritte-tag_style-neutral___cw1Bt_2-0-11 .magritte-tag__label___YHV-o_2-0-11{
|
|
98
|
+
color:var(--magritte-color-component-tag-text-neutral-v18-1-1);
|
|
99
|
+
}
|
|
100
|
+
.magritte-tag_style-neutral___cw1Bt_2-0-11.magritte-tag_state-disabled___2su23_2-0-11{
|
|
101
|
+
background-color:var(--magritte-color-component-tag-background-state-neutral-disabled-v18-1-1);
|
|
102
|
+
--magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-neutral-disabled-v18-1-1);
|
|
103
|
+
}
|
|
104
|
+
.magritte-tag_style-neutral___cw1Bt_2-0-11.magritte-tag_state-disabled___2su23_2-0-11 .magritte-tag__label___YHV-o_2-0-11{
|
|
105
|
+
color:var(--magritte-color-component-tag-text-state-neutral-disabled-v18-1-1);
|
|
106
|
+
}
|
|
107
|
+
.magritte-tag_style-positive___o2Zfe_2-0-11{
|
|
108
|
+
background-color:var(--magritte-color-component-tag-background-positive-v18-1-1);
|
|
109
|
+
--magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-positive-v18-1-1);
|
|
110
|
+
}
|
|
111
|
+
.magritte-tag_style-positive___o2Zfe_2-0-11 .magritte-tag__label___YHV-o_2-0-11{
|
|
112
|
+
color:var(--magritte-color-component-tag-text-positive-v18-1-1);
|
|
113
|
+
}
|
|
114
|
+
.magritte-tag_style-positive___o2Zfe_2-0-11.magritte-tag_state-disabled___2su23_2-0-11{
|
|
115
|
+
background-color:var(--magritte-color-component-tag-background-state-positive-disabled-v18-1-1);
|
|
116
|
+
--magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-positive-disabled-v18-1-1);
|
|
117
|
+
}
|
|
118
|
+
.magritte-tag_style-positive___o2Zfe_2-0-11.magritte-tag_state-disabled___2su23_2-0-11 .magritte-tag__label___YHV-o_2-0-11{
|
|
119
|
+
color:var(--magritte-color-component-tag-text-state-positive-disabled-v18-1-1);
|
|
120
|
+
}
|
|
121
|
+
.magritte-tag_style-negative___-HbQe_2-0-11{
|
|
122
|
+
background-color:var(--magritte-color-component-tag-background-negative-v18-1-1);
|
|
123
|
+
--magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-negative-v18-1-1);
|
|
124
|
+
}
|
|
125
|
+
.magritte-tag_style-negative___-HbQe_2-0-11 .magritte-tag__label___YHV-o_2-0-11{
|
|
126
|
+
color:var(--magritte-color-component-tag-text-negative-v18-1-1);
|
|
127
|
+
}
|
|
128
|
+
.magritte-tag_style-negative___-HbQe_2-0-11.magritte-tag_state-disabled___2su23_2-0-11{
|
|
129
|
+
background-color:var(--magritte-color-component-tag-background-state-negative-disabled-v18-1-1);
|
|
130
|
+
--magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-negative-disabled-v18-1-1);
|
|
131
|
+
}
|
|
132
|
+
.magritte-tag_style-negative___-HbQe_2-0-11.magritte-tag_state-disabled___2su23_2-0-11 .magritte-tag__label___YHV-o_2-0-11{
|
|
133
|
+
color:var(--magritte-color-component-tag-text-state-negative-disabled-v18-1-1);
|
|
134
|
+
}
|
|
135
|
+
.magritte-tag_style-special___-IqT-_2-0-11{
|
|
136
|
+
background-color:var(--magritte-color-component-tag-background-special-v18-1-1);
|
|
137
|
+
--magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-special-v18-1-1);
|
|
138
|
+
}
|
|
139
|
+
.magritte-tag_style-special___-IqT-_2-0-11 .magritte-tag__label___YHV-o_2-0-11{
|
|
140
|
+
color:var(--magritte-color-component-tag-text-special-v18-1-1);
|
|
141
|
+
}
|
|
142
|
+
.magritte-tag_style-special___-IqT-_2-0-11.magritte-tag_state-disabled___2su23_2-0-11{
|
|
143
|
+
background-color:var(--magritte-color-component-tag-background-state-special-disabled-v18-1-1);
|
|
144
|
+
--magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-special-disabled-v18-1-1);
|
|
145
|
+
}
|
|
146
|
+
.magritte-tag_style-special___-IqT-_2-0-11.magritte-tag_state-disabled___2su23_2-0-11 .magritte-tag__label___YHV-o_2-0-11{
|
|
147
|
+
color:var(--magritte-color-component-tag-text-state-special-disabled-v18-1-1);
|
|
148
|
+
}
|
|
149
|
+
.magritte-tag_style-warning___4xBGB_2-0-11{
|
|
150
|
+
background-color:var(--magritte-color-component-tag-background-warning-v18-1-1);
|
|
151
|
+
--magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-warning-v18-1-1);
|
|
152
|
+
}
|
|
153
|
+
.magritte-tag_style-warning___4xBGB_2-0-11 .magritte-tag__label___YHV-o_2-0-11{
|
|
154
|
+
color:var(--magritte-color-component-tag-text-warning-v18-1-1);
|
|
155
|
+
}
|
|
156
|
+
.magritte-tag_style-warning___4xBGB_2-0-11.magritte-tag_state-disabled___2su23_2-0-11{
|
|
157
|
+
background-color:var(--magritte-color-component-tag-background-state-warning-disabled-v18-1-1);
|
|
158
|
+
--magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-warning-disabled-v18-1-1);
|
|
159
|
+
}
|
|
160
|
+
.magritte-tag_style-warning___4xBGB_2-0-11.magritte-tag_state-disabled___2su23_2-0-11 .magritte-tag__label___YHV-o_2-0-11{
|
|
161
|
+
color:var(--magritte-color-component-tag-text-state-warning-disabled-v18-1-1);
|
|
162
|
+
}
|
|
163
|
+
.magritte-tag_size-medium___Splpy_2-0-11{
|
|
164
|
+
border-radius:var(--magritte-static-border-radius-200-v18-1-1);
|
|
165
|
+
padding:4px 8px;
|
|
166
|
+
gap:var(--magritte-static-space-100-v18-1-1);
|
|
167
|
+
min-height:20px;
|
|
168
|
+
max-width:calc(288px - 8px * 2);
|
|
169
|
+
}
|
|
170
|
+
.magritte-tag_size-large___SWuug_2-0-11{
|
|
171
|
+
border-radius:var(--magritte-static-border-radius-450-v18-1-1);
|
|
172
|
+
padding:6px 10px;
|
|
173
|
+
gap:var(--magritte-static-space-50-v18-1-1);
|
|
174
|
+
min-height:24px;
|
|
175
|
+
max-width:calc(288px - 10px * 2);
|
|
176
|
+
}
|
|
177
|
+
.magritte-tag_size-large___SWuug_2-0-11 .magritte-tag__label___YHV-o_2-0-11{
|
|
178
|
+
font-family:var(--magritte-typography-subtitle-1-semibold-font-family-v18-1-1);
|
|
179
|
+
font-weight:var(--magritte-typography-subtitle-1-semibold-font-weight-v18-1-1);
|
|
180
|
+
line-height:var(--magritte-typography-subtitle-1-semibold-line-height-v18-1-1);
|
|
181
|
+
font-size:var(--magritte-typography-subtitle-1-semibold-font-size-v18-1-1);
|
|
182
|
+
letter-spacing:var(--magritte-typography-subtitle-1-semibold-letter-spacing-v18-1-1);
|
|
183
|
+
text-indent:var(--magritte-typography-subtitle-1-semibold-text-indent-v18-1-1);
|
|
184
|
+
text-transform:var(--magritte-typography-subtitle-1-semibold-text-transform-v18-1-1);
|
|
185
|
+
text-decoration:var(--magritte-typography-subtitle-1-semibold-text-decoration-v18-1-1);
|
|
186
|
+
padding:0 2px;
|
|
187
|
+
}
|
|
188
|
+
.magritte-tag__label___YHV-o_2-0-11{
|
|
189
|
+
font-family:var(--magritte-typography-label-3-regular-font-family-v18-1-1);
|
|
190
|
+
font-weight:var(--magritte-typography-label-3-regular-font-weight-v18-1-1);
|
|
191
|
+
line-height:var(--magritte-typography-label-3-regular-line-height-v18-1-1);
|
|
192
|
+
font-size:var(--magritte-typography-label-3-regular-font-size-v18-1-1);
|
|
193
|
+
letter-spacing:var(--magritte-typography-label-3-regular-letter-spacing-v18-1-1);
|
|
194
|
+
text-indent:var(--magritte-typography-label-3-regular-text-indent-v18-1-1);
|
|
195
|
+
text-transform:var(--magritte-typography-label-3-regular-text-transform-v18-1-1);
|
|
196
|
+
text-decoration:var(--magritte-typography-label-3-regular-text-decoration-v18-1-1);
|
|
197
|
+
text-overflow:ellipsis;
|
|
198
|
+
overflow:hidden;
|
|
199
|
+
white-space:nowrap;
|
|
200
|
+
}
|
|
201
|
+
.magritte-tag__icon___Avk97_2-0-11{
|
|
202
|
+
display:flex;
|
|
203
|
+
flex-shrink:0;
|
|
204
|
+
}
|
package/index.d.ts
ADDED
package/index.js
ADDED
package/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
package/index.mock.d.ts
ADDED
package/index.mock.js
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
import { mockComponent } from '@hh.ru/magritte-ui-mock-component';
|
|
3
|
+
|
|
4
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
5
|
+
const { ThemeProvider } = jest.requireActual('@hh.ru/magritte-ui-theme-provider/index');
|
|
6
|
+
const Tag = mockComponent('Tag', undefined, {
|
|
7
|
+
withChildren: true,
|
|
8
|
+
});
|
|
9
|
+
|
|
10
|
+
export { Tag, ThemeProvider };
|
|
11
|
+
//# sourceMappingURL=index.mock.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mock.js","sources":["../src/index.mock.ts"],"sourcesContent":["import { ForwardRefExoticComponent } from 'react';\n\nimport { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport { type TagStyle, type TagSize, type TagProps } from '@hh.ru/magritte-ui-tag/types';\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nconst { ThemeProvider } = jest.requireActual('@hh.ru/magritte-ui-theme-provider/index');\n\nexport { ThemeProvider };\n\nexport const Tag: ForwardRefExoticComponent<Record<string, unknown>> = mockComponent('Tag', undefined, {\n withChildren: true,\n});\n"],"names":[],"mappings":";;AAMA;AACM,MAAA,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,yCAAyC,EAAE;MAI3E,GAAG,GAAuD,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE;AACnG,IAAA,YAAY,EAAE,IAAI;AACrB,CAAA;;;;"}
|
package/package.json
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@hh.ru/magritte-ui-tag",
|
|
3
|
+
"version": "2.0.11",
|
|
4
|
+
"main": "index.js",
|
|
5
|
+
"types": "index.d.ts",
|
|
6
|
+
"sideEffects": [
|
|
7
|
+
"index.css"
|
|
8
|
+
],
|
|
9
|
+
"scripts": {
|
|
10
|
+
"build": "yarn root:build $(pwd)",
|
|
11
|
+
"build-test-branch": "yarn root:build-test-branch $(pwd)",
|
|
12
|
+
"changelog": "yarn root:changelog $(pwd)",
|
|
13
|
+
"prepack": "yarn root:prepack $(pwd)",
|
|
14
|
+
"postpublish": "yarn root:postpublish $(pwd)",
|
|
15
|
+
"stylelint-test": "yarn root:stylelint-test $(pwd)",
|
|
16
|
+
"eslint-test": "yarn root:eslint-test $(pwd)",
|
|
17
|
+
"ts-config": "yarn root:ts-config $(pwd)",
|
|
18
|
+
"ts-check": "yarn root:ts-check $(pwd)",
|
|
19
|
+
"test": "yarn root:test $(pwd)"
|
|
20
|
+
},
|
|
21
|
+
"dependencies": {
|
|
22
|
+
"@hh.ru/magritte-design-tokens": "18.1.1",
|
|
23
|
+
"@hh.ru/magritte-ui-icon": "7.1.3",
|
|
24
|
+
"@hh.ru/magritte-ui-mock-component": "1.0.10",
|
|
25
|
+
"@hh.ru/magritte-ui-theme-provider": "1.1.21"
|
|
26
|
+
},
|
|
27
|
+
"peerDependencies": {
|
|
28
|
+
"classnames": ">=2.3.2",
|
|
29
|
+
"react": ">=18.2.0"
|
|
30
|
+
},
|
|
31
|
+
"publishConfig": {
|
|
32
|
+
"access": "public"
|
|
33
|
+
},
|
|
34
|
+
"gitHead": "b660dd64fca3eaad5ec44ea9a73f92bb0d9694aa"
|
|
35
|
+
}
|
package/types.d.ts
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { ReactElement, ReactFragment, HTMLAttributes } from 'react';
|
|
2
|
+
import { IconWrapperComponentSize16 } from '@hh.ru/magritte-ui-icon/iconTypes';
|
|
3
|
+
export type TagStyle = 'neutral' | 'positive' | 'negative' | 'special' | 'warning';
|
|
4
|
+
export type TagSize = 'medium' | 'large';
|
|
5
|
+
type TagChildren = ReactElement | string | number | ReactFragment;
|
|
6
|
+
type CommonTagProps = {
|
|
7
|
+
style?: TagStyle;
|
|
8
|
+
size?: TagSize;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
};
|
|
11
|
+
type AriaByHideProps = {
|
|
12
|
+
hideLabel: boolean;
|
|
13
|
+
ariaLabel: string;
|
|
14
|
+
} | {
|
|
15
|
+
hideLabel?: false;
|
|
16
|
+
ariaLabel?: string;
|
|
17
|
+
};
|
|
18
|
+
type AriaPartialProps = {
|
|
19
|
+
hideLabel?: false;
|
|
20
|
+
ariaLabel?: string;
|
|
21
|
+
};
|
|
22
|
+
type AdditionalChildrenTagProps<I> = I extends IconWrapperComponentSize16 ? AriaByHideProps : AriaPartialProps;
|
|
23
|
+
type ChildrenTagProps<C, I> = {
|
|
24
|
+
children: C;
|
|
25
|
+
icon?: I extends IconWrapperComponentSize16 ? I : never;
|
|
26
|
+
} & CommonTagProps & AdditionalChildrenTagProps<I>;
|
|
27
|
+
type IconTagProps<I> = {
|
|
28
|
+
children?: never;
|
|
29
|
+
icon: I;
|
|
30
|
+
ariaLabel: string;
|
|
31
|
+
hideLabel?: never;
|
|
32
|
+
} & CommonTagProps;
|
|
33
|
+
export type TagPropsHelper<C, I> = C extends TagChildren ? ChildrenTagProps<C, I> : I extends IconWrapperComponentSize16 ? IconTagProps<I> : never;
|
|
34
|
+
export type TagProps<C, I> = TagPropsHelper<C, I> & Omit<HTMLAttributes<HTMLDivElement>, keyof TagPropsHelper<C, I>>;
|
|
35
|
+
export {};
|
package/types.js
ADDED
package/types.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|