oolib 2.238.2 → 2.240.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/stories/v2/components/Tags/TagSelect.stories.d.ts +142 -0
- package/dist/stories/v2/components/Tags/TagSelect.stories.js +167 -0
- package/dist/v2/components/Tags/Comps/TagDisplay/index.d.ts +1 -1
- package/dist/v2/components/Tags/Comps/TagDisplay/index.js +2 -5
- package/dist/v2/components/Tags/Comps/TagSelect/index.d.ts +37 -0
- package/dist/v2/components/Tags/Comps/TagSelect/index.js +56 -0
- package/dist/v2/components/Tags/Comps/TagSelect/styled.d.ts +6 -0
- package/dist/v2/components/Tags/Comps/TagSelect/styled.js +64 -0
- package/dist/v2/components/Tags/index.d.ts +1 -0
- package/dist/v2/components/Tags/index.js +3 -1
- package/package.json +1 -1
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
declare namespace _default {
|
|
2
|
+
let title: string;
|
|
3
|
+
namespace argTypes {
|
|
4
|
+
namespace display {
|
|
5
|
+
let name: string;
|
|
6
|
+
let description: string;
|
|
7
|
+
namespace control {
|
|
8
|
+
let type: string;
|
|
9
|
+
}
|
|
10
|
+
namespace table {
|
|
11
|
+
export namespace type_1 {
|
|
12
|
+
let summary: string;
|
|
13
|
+
}
|
|
14
|
+
export { type_1 as type };
|
|
15
|
+
export namespace defaultValue {
|
|
16
|
+
let summary_1: string;
|
|
17
|
+
export { summary_1 as summary };
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
namespace size {
|
|
22
|
+
let name_1: string;
|
|
23
|
+
export { name_1 as name };
|
|
24
|
+
let description_1: string;
|
|
25
|
+
export { description_1 as description };
|
|
26
|
+
export let options: string[];
|
|
27
|
+
export namespace control_1 {
|
|
28
|
+
let type_2: string;
|
|
29
|
+
export { type_2 as type };
|
|
30
|
+
}
|
|
31
|
+
export { control_1 as control };
|
|
32
|
+
export namespace table_1 {
|
|
33
|
+
export namespace type_3 {
|
|
34
|
+
let summary_2: string;
|
|
35
|
+
export { summary_2 as summary };
|
|
36
|
+
}
|
|
37
|
+
export { type_3 as type };
|
|
38
|
+
export namespace defaultValue_1 {
|
|
39
|
+
let summary_3: string;
|
|
40
|
+
export { summary_3 as summary };
|
|
41
|
+
}
|
|
42
|
+
export { defaultValue_1 as defaultValue };
|
|
43
|
+
}
|
|
44
|
+
export { table_1 as table };
|
|
45
|
+
}
|
|
46
|
+
namespace isSelected {
|
|
47
|
+
let name_2: string;
|
|
48
|
+
export { name_2 as name };
|
|
49
|
+
let description_2: string;
|
|
50
|
+
export { description_2 as description };
|
|
51
|
+
export namespace control_2 {
|
|
52
|
+
let type_4: string;
|
|
53
|
+
export { type_4 as type };
|
|
54
|
+
}
|
|
55
|
+
export { control_2 as control };
|
|
56
|
+
export namespace table_2 {
|
|
57
|
+
export namespace type_5 {
|
|
58
|
+
let summary_4: string;
|
|
59
|
+
export { summary_4 as summary };
|
|
60
|
+
}
|
|
61
|
+
export { type_5 as type };
|
|
62
|
+
export namespace defaultValue_2 {
|
|
63
|
+
let summary_5: string;
|
|
64
|
+
export { summary_5 as summary };
|
|
65
|
+
}
|
|
66
|
+
export { defaultValue_2 as defaultValue };
|
|
67
|
+
}
|
|
68
|
+
export { table_2 as table };
|
|
69
|
+
}
|
|
70
|
+
namespace disabled {
|
|
71
|
+
let name_3: string;
|
|
72
|
+
export { name_3 as name };
|
|
73
|
+
export namespace control_3 {
|
|
74
|
+
let type_6: string;
|
|
75
|
+
export { type_6 as type };
|
|
76
|
+
}
|
|
77
|
+
export { control_3 as control };
|
|
78
|
+
export namespace table_3 {
|
|
79
|
+
export namespace type_7 {
|
|
80
|
+
let summary_6: string;
|
|
81
|
+
export { summary_6 as summary };
|
|
82
|
+
}
|
|
83
|
+
export { type_7 as type };
|
|
84
|
+
export namespace defaultValue_3 {
|
|
85
|
+
let summary_7: string;
|
|
86
|
+
export { summary_7 as summary };
|
|
87
|
+
}
|
|
88
|
+
export { defaultValue_3 as defaultValue };
|
|
89
|
+
}
|
|
90
|
+
export { table_3 as table };
|
|
91
|
+
}
|
|
92
|
+
namespace colorPreset {
|
|
93
|
+
let name_4: string;
|
|
94
|
+
export { name_4 as name };
|
|
95
|
+
let description_3: string;
|
|
96
|
+
export { description_3 as description };
|
|
97
|
+
let options_1: string[];
|
|
98
|
+
export { options_1 as options };
|
|
99
|
+
export namespace control_4 {
|
|
100
|
+
let type_8: string;
|
|
101
|
+
export { type_8 as type };
|
|
102
|
+
}
|
|
103
|
+
export { control_4 as control };
|
|
104
|
+
export namespace table_4 {
|
|
105
|
+
export namespace type_9 {
|
|
106
|
+
let summary_8: string;
|
|
107
|
+
export { summary_8 as summary };
|
|
108
|
+
}
|
|
109
|
+
export { type_9 as type };
|
|
110
|
+
export namespace defaultValue_4 {
|
|
111
|
+
let summary_9: string;
|
|
112
|
+
export { summary_9 as summary };
|
|
113
|
+
}
|
|
114
|
+
export { defaultValue_4 as defaultValue };
|
|
115
|
+
}
|
|
116
|
+
export { table_4 as table };
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
namespace args {
|
|
120
|
+
let display_1: string;
|
|
121
|
+
export { display_1 as display };
|
|
122
|
+
let size_1: string;
|
|
123
|
+
export { size_1 as size };
|
|
124
|
+
let isSelected_1: boolean;
|
|
125
|
+
export { isSelected_1 as isSelected };
|
|
126
|
+
let disabled_1: boolean;
|
|
127
|
+
export { disabled_1 as disabled };
|
|
128
|
+
let colorPreset_1: string;
|
|
129
|
+
export { colorPreset_1 as colorPreset };
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
export default _default;
|
|
133
|
+
export function Tag_Select(args: any): React.JSX.Element;
|
|
134
|
+
export function playground(): React.JSX.Element;
|
|
135
|
+
export namespace playground {
|
|
136
|
+
namespace parameters {
|
|
137
|
+
namespace controls {
|
|
138
|
+
let disable: boolean;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
import React from "react";
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
30
|
+
var ownKeys = function(o) {
|
|
31
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
32
|
+
var ar = [];
|
|
33
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
34
|
+
return ar;
|
|
35
|
+
};
|
|
36
|
+
return ownKeys(o);
|
|
37
|
+
};
|
|
38
|
+
return function (mod) {
|
|
39
|
+
if (mod && mod.__esModule) return mod;
|
|
40
|
+
var result = {};
|
|
41
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
42
|
+
__setModuleDefault(result, mod);
|
|
43
|
+
return result;
|
|
44
|
+
};
|
|
45
|
+
})();
|
|
46
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
47
|
+
exports.playground = exports.Tag_Select = void 0;
|
|
48
|
+
var react_1 = __importStar(require("react"));
|
|
49
|
+
var Tags_1 = require("../../../../v2/components/Tags");
|
|
50
|
+
var Typo2_1 = require("../../../../v2/components/Typo2");
|
|
51
|
+
// NOTE: we intentionally do NOT set `component: TagSelect` here. Doing so makes
|
|
52
|
+
// Storybook auto-generate a control for every prop (color object, onClick,
|
|
53
|
+
// style, etc.) which render as non-functional controls. We declare only the
|
|
54
|
+
// controls that actually drive the demo.
|
|
55
|
+
exports.default = {
|
|
56
|
+
title: "Oolib V 2.0/Components/Tags/Tag Select",
|
|
57
|
+
argTypes: {
|
|
58
|
+
display: {
|
|
59
|
+
name: "Text",
|
|
60
|
+
description: "The display text.",
|
|
61
|
+
control: { type: "text" },
|
|
62
|
+
table: { type: { summary: "string" }, defaultValue: { summary: "" } },
|
|
63
|
+
},
|
|
64
|
+
size: {
|
|
65
|
+
name: "Size",
|
|
66
|
+
description: "Size of the tag.",
|
|
67
|
+
options: ["XS", "S", "M"],
|
|
68
|
+
control: { type: "inline-radio" },
|
|
69
|
+
table: { type: { summary: "XS | S | M" }, defaultValue: { summary: "S" } },
|
|
70
|
+
},
|
|
71
|
+
isSelected: {
|
|
72
|
+
name: "Selected",
|
|
73
|
+
description: "Selected (filled) state.",
|
|
74
|
+
control: { type: "boolean" },
|
|
75
|
+
table: { type: { summary: "boolean" }, defaultValue: { summary: "false" } },
|
|
76
|
+
},
|
|
77
|
+
disabled: {
|
|
78
|
+
name: "Disabled",
|
|
79
|
+
control: { type: "boolean" },
|
|
80
|
+
table: { type: { summary: "boolean" }, defaultValue: { summary: "false" } },
|
|
81
|
+
},
|
|
82
|
+
colorPreset: {
|
|
83
|
+
name: "Color Preset",
|
|
84
|
+
description: "TagDisplay color preset. Custom `color` object (not shown here) overrides it.",
|
|
85
|
+
options: ["default", "positive", "inProgress", "warning", "negative", "special"],
|
|
86
|
+
control: { type: "select" },
|
|
87
|
+
table: { type: { summary: "string" }, defaultValue: { summary: "default" } },
|
|
88
|
+
},
|
|
89
|
+
},
|
|
90
|
+
args: {
|
|
91
|
+
display: "Tag Select",
|
|
92
|
+
size: "S",
|
|
93
|
+
isSelected: false,
|
|
94
|
+
disabled: false,
|
|
95
|
+
colorPreset: "default",
|
|
96
|
+
},
|
|
97
|
+
};
|
|
98
|
+
// Control-driven single tag — every control in the panel works here, AND
|
|
99
|
+
// clicking the tag toggles it (the `Selected` control seeds the initial state).
|
|
100
|
+
var Tag_Select = function (args) {
|
|
101
|
+
var _a = (0, react_1.useState)(args.isSelected), selected = _a[0], setSelected = _a[1];
|
|
102
|
+
// Keep the click-driven state in sync when the `Selected` control changes.
|
|
103
|
+
(0, react_1.useEffect)(function () { return setSelected(args.isSelected); }, [args.isSelected]);
|
|
104
|
+
return (react_1.default.createElement("div", { style: { padding: "4rem" } },
|
|
105
|
+
react_1.default.createElement(Tags_1.TagSelect, __assign({}, args, { isSelected: selected, onClick: function (_a) {
|
|
106
|
+
var isSelected = _a.isSelected;
|
|
107
|
+
return setSelected(isSelected);
|
|
108
|
+
} }))));
|
|
109
|
+
};
|
|
110
|
+
exports.Tag_Select = Tag_Select;
|
|
111
|
+
// Custom-color presets used in the static demos below.
|
|
112
|
+
var CATEGORY_COLORS = {
|
|
113
|
+
needs: { outline: "#2D6BE0", text: "#2D6BE0", fill: "#2D6BE0", textOnFill: "#ffffff" },
|
|
114
|
+
behaviour: { outline: "#8B5CF6", text: "#8B5CF6", fill: "#8B5CF6", textOnFill: "#ffffff" },
|
|
115
|
+
dissatisfaction: { outline: "#D6455F", text: "#D6455F", fill: "#D6455F", textOnFill: "#ffffff" },
|
|
116
|
+
satisfaction: { outline: "#2E9E6B", text: "#2E9E6B", fill: "#2E9E6B", textOnFill: "#ffffff" },
|
|
117
|
+
};
|
|
118
|
+
// A single-select row of tags (click to toggle).
|
|
119
|
+
var SelectableRow = function (_a) {
|
|
120
|
+
var options = _a.options;
|
|
121
|
+
var _b = (0, react_1.useState)(null), selected = _b[0], setSelected = _b[1];
|
|
122
|
+
return (react_1.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.6rem" } }, options.map(function (o) { return (react_1.default.createElement(Tags_1.TagSelect, { key: o.value, display: o.display, value: o.value, color: o.color, colorPreset: o.colorPreset, isSelected: selected === o.value, onClick: function () { return setSelected(function (prev) { return (prev === o.value ? null : o.value); }); } })); })));
|
|
123
|
+
};
|
|
124
|
+
var Section = function (_a) {
|
|
125
|
+
var label = _a.label, children = _a.children;
|
|
126
|
+
return (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "0.8rem" } },
|
|
127
|
+
react_1.default.createElement(Typo2_1.UI_TAG, null, label),
|
|
128
|
+
children));
|
|
129
|
+
};
|
|
130
|
+
var playground = function () { return (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "3rem", padding: "2rem" } },
|
|
131
|
+
react_1.default.createElement(Section, { label: "Default (neutral grey) \u2014 click to toggle, hover for the ghost overlay" },
|
|
132
|
+
react_1.default.createElement(SelectableRow, { options: [
|
|
133
|
+
{ display: "All", value: "all" },
|
|
134
|
+
{ display: "Interview", value: "interview" },
|
|
135
|
+
{ display: "NPS", value: "nps" },
|
|
136
|
+
{ display: "Review", value: "review" },
|
|
137
|
+
{ display: "Support", value: "support" },
|
|
138
|
+
] })),
|
|
139
|
+
react_1.default.createElement(Section, { label: "colorPreset (positive / inProgress / warning / negative / special)" },
|
|
140
|
+
react_1.default.createElement(SelectableRow, { options: [
|
|
141
|
+
{ display: "Positive", value: "positive", colorPreset: "positive" },
|
|
142
|
+
{ display: "In Progress", value: "inProgress", colorPreset: "inProgress" },
|
|
143
|
+
{ display: "Warning", value: "warning", colorPreset: "warning" },
|
|
144
|
+
{ display: "Negative", value: "negative", colorPreset: "negative" },
|
|
145
|
+
{ display: "Special", value: "special", colorPreset: "special" },
|
|
146
|
+
] })),
|
|
147
|
+
react_1.default.createElement(Section, { label: "Custom color={`{ outline, text, fill, textOnFill }`}" },
|
|
148
|
+
react_1.default.createElement(SelectableRow, { options: [
|
|
149
|
+
{ display: "User Needs", value: "userNeeds", color: CATEGORY_COLORS.needs },
|
|
150
|
+
{ display: "User Behaviour", value: "userBehaviour", color: CATEGORY_COLORS.behaviour },
|
|
151
|
+
{ display: "User Dissatisfaction", value: "userDissatisfaction", color: CATEGORY_COLORS.dissatisfaction },
|
|
152
|
+
{ display: "User Satisfaction", value: "userSatisfaction", color: CATEGORY_COLORS.satisfaction },
|
|
153
|
+
] })),
|
|
154
|
+
react_1.default.createElement(Section, { label: "States" },
|
|
155
|
+
react_1.default.createElement("div", { style: { display: "flex", gap: "0.6rem", alignItems: "center" } },
|
|
156
|
+
react_1.default.createElement(Tags_1.TagSelect, { display: "Unselected", onClick: function () { } }),
|
|
157
|
+
react_1.default.createElement(Tags_1.TagSelect, { display: "Selected", isSelected: true, onClick: function () { } }),
|
|
158
|
+
react_1.default.createElement(Tags_1.TagSelect, { display: "Disabled", disabled: true, onClick: function () { } }),
|
|
159
|
+
react_1.default.createElement(Tags_1.TagSelect, { display: "Selected + colored", isSelected: true, color: CATEGORY_COLORS.behaviour, onClick: function () { } }))),
|
|
160
|
+
react_1.default.createElement(Section, { label: "Sizes (XS / S)" },
|
|
161
|
+
react_1.default.createElement("div", { style: { display: "flex", gap: "0.6rem", alignItems: "center" } },
|
|
162
|
+
react_1.default.createElement(Tags_1.TagSelect, { display: "Extra small", size: "XS", onClick: function () { } }),
|
|
163
|
+
react_1.default.createElement(Tags_1.TagSelect, { display: "Small (default)", size: "S", onClick: function () { } }))))); };
|
|
164
|
+
exports.playground = playground;
|
|
165
|
+
// The playground is a static gallery — its controls would do nothing, so hide
|
|
166
|
+
// the Controls panel for this story.
|
|
167
|
+
exports.playground.parameters = { controls: { disable: true } };
|
|
@@ -9,6 +9,6 @@ export interface TagDisplayInterface extends Omit<TagInterface, 'variant'> {
|
|
|
9
9
|
fill?: string;
|
|
10
10
|
icon?: string;
|
|
11
11
|
weight?: "bold" | "light" | "default";
|
|
12
|
-
colorPreset
|
|
12
|
+
colorPreset?: 'positive' | 'inProgress' | 'warning' | 'negative' | 'special' | "default";
|
|
13
13
|
}
|
|
14
14
|
export declare const TagDisplay: React.FunctionComponent<TagDisplayInterface>;
|
|
@@ -29,11 +29,8 @@ var mixins_1 = require("../../../../../themes/mixins");
|
|
|
29
29
|
var white = themes_1.colors.white;
|
|
30
30
|
var STYLED_UI_TAG_DF = (0, styled_components_1.default)(Typo2_1.UI_TAG_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), mixins_1.ellipsis);
|
|
31
31
|
var TagDisplay = function (_a) {
|
|
32
|
-
var id = _a.id, display = _a.display, size = _a.size,
|
|
33
|
-
|
|
34
|
-
// textColor,
|
|
35
|
-
fill = _a.fill, icon = _a.icon, _b = _a.colorPreset, colorPreset = _b === void 0 ? 'default' : _b, weight = _a.weight;
|
|
36
|
-
return (react_1.default.createElement(Tag_1.Tag, { weight: weight, id: id, display: display, icon: icon, size: size, fill: fill, style: __assign({ padding: "0.25rem 0.5rem", borderRadius: "4px", color: white }, (0, getTagDisplayStyles_1.getTagDisplayStyles)({ colorPreset: colorPreset })), typo: STYLED_UI_TAG_DF }));
|
|
32
|
+
var id = _a.id, display = _a.display, size = _a.size, tagColor = _a.tagColor, textColor = _a.textColor, fill = _a.fill, icon = _a.icon, badgeColor = _a.badgeColor, _b = _a.colorPreset, colorPreset = _b === void 0 ? 'default' : _b, weight = _a.weight;
|
|
33
|
+
return (react_1.default.createElement(Tag_1.Tag, { weight: weight, id: id, display: display, icon: icon, badgeColor: badgeColor, size: size, fill: fill, style: __assign(__assign(__assign({ padding: "0.25rem 0.5rem", borderRadius: "4px", color: white }, (0, getTagDisplayStyles_1.getTagDisplayStyles)({ colorPreset: colorPreset })), (tagColor ? { backgroundColor: tagColor } : {})), (textColor ? { color: textColor } : {})), typo: STYLED_UI_TAG_DF }));
|
|
37
34
|
};
|
|
38
35
|
exports.TagDisplay = TagDisplay;
|
|
39
36
|
var templateObject_1;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export type TagColorPreset = "positive" | "inProgress" | "warning" | "negative" | "special" | "default";
|
|
3
|
+
export interface TagSelectColor {
|
|
4
|
+
outline?: string;
|
|
5
|
+
text?: string;
|
|
6
|
+
fill?: string;
|
|
7
|
+
textOnFill?: string;
|
|
8
|
+
}
|
|
9
|
+
export interface TagSelectInterface {
|
|
10
|
+
id?: string;
|
|
11
|
+
display: string;
|
|
12
|
+
value?: string;
|
|
13
|
+
size?: "XS" | "S" | "M";
|
|
14
|
+
isSelected?: boolean;
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
icon?: string;
|
|
17
|
+
badgeColor?: string;
|
|
18
|
+
weight?: "bold" | "light" | "default";
|
|
19
|
+
colorPreset?: TagColorPreset;
|
|
20
|
+
color?: TagSelectColor;
|
|
21
|
+
onClick?: (next: {
|
|
22
|
+
display: string;
|
|
23
|
+
value?: string;
|
|
24
|
+
isSelected: boolean;
|
|
25
|
+
}) => void;
|
|
26
|
+
style?: React.CSSProperties;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* A selectable v2 tag — wraps TagDisplay and adds a selected (fill) state plus
|
|
30
|
+
* the common black-overlay hover (same as ButtonGhostV2). Colors come from a
|
|
31
|
+
* `colorPreset` (TagDisplay's presets) and/or a custom
|
|
32
|
+
* `color: { outline, text, fill, textOnFill }` object; defaults to neutral grey.
|
|
33
|
+
*
|
|
34
|
+
* Unselected → transparent fill, `text` text, `outline` border.
|
|
35
|
+
* Selected → `fill` background, `textOnFill` text, `fill` border.
|
|
36
|
+
*/
|
|
37
|
+
export declare const TagSelect: React.FunctionComponent<TagSelectInterface>;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.TagSelect = void 0;
|
|
18
|
+
var react_1 = __importDefault(require("react"));
|
|
19
|
+
var TagDisplay_1 = require("../TagDisplay");
|
|
20
|
+
var getTagDisplayStyles_1 = require("../TagDisplay/getTagDisplayStyles");
|
|
21
|
+
var themes_1 = require("../../../../themes");
|
|
22
|
+
var styled_1 = require("./styled");
|
|
23
|
+
var grey80 = themes_1.colors.grey80, white = themes_1.colors.white;
|
|
24
|
+
// Neutral default — outline, text and fill are all the same grey (same way the
|
|
25
|
+
// presets use one color for outline/text/fill).
|
|
26
|
+
var DEFAULT_COLOR = {
|
|
27
|
+
outline: grey80,
|
|
28
|
+
text: grey80,
|
|
29
|
+
fill: grey80,
|
|
30
|
+
textOnFill: white,
|
|
31
|
+
};
|
|
32
|
+
// Derive the 4-facet color from a TagDisplay preset: the preset's background
|
|
33
|
+
// color drives outline/text/fill, with white text on the fill.
|
|
34
|
+
var colorFromPreset = function (colorPreset) {
|
|
35
|
+
var presetColor = (0, getTagDisplayStyles_1.getTagDisplayStyles)({ colorPreset: colorPreset }).backgroundColor;
|
|
36
|
+
return { outline: presetColor, text: presetColor, fill: presetColor, textOnFill: white };
|
|
37
|
+
};
|
|
38
|
+
/**
|
|
39
|
+
* A selectable v2 tag — wraps TagDisplay and adds a selected (fill) state plus
|
|
40
|
+
* the common black-overlay hover (same as ButtonGhostV2). Colors come from a
|
|
41
|
+
* `colorPreset` (TagDisplay's presets) and/or a custom
|
|
42
|
+
* `color: { outline, text, fill, textOnFill }` object; defaults to neutral grey.
|
|
43
|
+
*
|
|
44
|
+
* Unselected → transparent fill, `text` text, `outline` border.
|
|
45
|
+
* Selected → `fill` background, `textOnFill` text, `fill` border.
|
|
46
|
+
*/
|
|
47
|
+
var TagSelect = function (_a) {
|
|
48
|
+
var id = _a.id, display = _a.display, value = _a.value, _b = _a.size, size = _b === void 0 ? "S" : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, icon = _a.icon, badgeColor = _a.badgeColor, weight = _a.weight, colorPreset = _a.colorPreset, color = _a.color, onClick = _a.onClick, style = _a.style;
|
|
49
|
+
var base = colorPreset ? colorFromPreset(colorPreset) : DEFAULT_COLOR;
|
|
50
|
+
var c = __assign(__assign({}, base), (color || {}));
|
|
51
|
+
return (react_1.default.createElement(styled_1.StyledTagSelect, { bgColor: isSelected ? c.fill : "transparent", borderColor: isSelected ? c.fill : c.outline, disabled: disabled, onClick: function () {
|
|
52
|
+
return !disabled && onClick && onClick({ display: display, value: value, isSelected: !isSelected });
|
|
53
|
+
}, style: style },
|
|
54
|
+
react_1.default.createElement(TagDisplay_1.TagDisplay, { id: id, display: display, size: size, icon: icon, badgeColor: badgeColor, weight: weight, tagColor: "transparent", textColor: isSelected ? c.textOnFill : c.text })));
|
|
55
|
+
};
|
|
56
|
+
exports.TagSelect = TagSelect;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
|
+
if (k2 === undefined) k2 = k;
|
|
8
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
9
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
10
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
11
|
+
}
|
|
12
|
+
Object.defineProperty(o, k2, desc);
|
|
13
|
+
}) : (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
o[k2] = m[k];
|
|
16
|
+
}));
|
|
17
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
18
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
19
|
+
}) : function(o, v) {
|
|
20
|
+
o["default"] = v;
|
|
21
|
+
});
|
|
22
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
23
|
+
var ownKeys = function(o) {
|
|
24
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
25
|
+
var ar = [];
|
|
26
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
27
|
+
return ar;
|
|
28
|
+
};
|
|
29
|
+
return ownKeys(o);
|
|
30
|
+
};
|
|
31
|
+
return function (mod) {
|
|
32
|
+
if (mod && mod.__esModule) return mod;
|
|
33
|
+
var result = {};
|
|
34
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
35
|
+
__setModuleDefault(result, mod);
|
|
36
|
+
return result;
|
|
37
|
+
};
|
|
38
|
+
})();
|
|
39
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
+
exports.StyledTagSelect = void 0;
|
|
41
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
42
|
+
var baseStyling_1 = require("../../../../themes/utils/baseStyling");
|
|
43
|
+
// Wrapper around TagDisplay that owns ALL the selectable affordances:
|
|
44
|
+
// - the fill (background) + a 1px border. The wrapper is the ONLY element
|
|
45
|
+
// painting a rounded rect — TagDisplay is kept transparent — so there's no
|
|
46
|
+
// nested-radius mismatch. Border width stays 1px across states, so toggling
|
|
47
|
+
// causes no layout shift.
|
|
48
|
+
// - the common black-overlay hover (same as ButtonGhostV2). Needs
|
|
49
|
+
// position: relative + overflow: hidden so the ::before clips to the radius.
|
|
50
|
+
exports.StyledTagSelect = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n border-radius: 4px;\n overflow: hidden;\n background-color: ", ";\n border: 1px solid ", ";\n /* Clip the background to the padding box so a translucent fill (e.g. the\n grey default) doesn't paint UNDER the border \u2014 otherwise the border region\n stacks fill+border and reads darker than the fill. */\n background-clip: padding-box;\n cursor: ", ";\n ", "\n"], ["\n position: relative;\n display: inline-flex;\n border-radius: 4px;\n overflow: hidden;\n background-color: ", ";\n border: 1px solid ", ";\n /* Clip the background to the padding box so a translucent fill (e.g. the\n grey default) doesn't paint UNDER the border \u2014 otherwise the border region\n stacks fill+border and reads darker than the fill. */\n background-clip: padding-box;\n cursor: ", ";\n ", "\n"])), function (_a) {
|
|
51
|
+
var bgColor = _a.bgColor;
|
|
52
|
+
return bgColor;
|
|
53
|
+
}, function (_a) {
|
|
54
|
+
var borderColor = _a.borderColor;
|
|
55
|
+
return borderColor;
|
|
56
|
+
}, function (_a) {
|
|
57
|
+
var disabled = _a.disabled;
|
|
58
|
+
return (disabled ? "not-allowed" : "pointer");
|
|
59
|
+
}, function (_a) {
|
|
60
|
+
var disabled = _a.disabled;
|
|
61
|
+
return disabled
|
|
62
|
+
? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n opacity: 0.5;\n "], ["\n opacity: 0.5;\n "]))) : (0, baseStyling_1.applyBlackOverlayOnHover)({ borderRadius: "4px" });
|
|
63
|
+
});
|
|
64
|
+
var templateObject_1, templateObject_2;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Tag = exports.TagLink = exports.TagClear = exports.TagDisplay = void 0;
|
|
3
|
+
exports.TagSelect = exports.Tag = exports.TagLink = exports.TagClear = exports.TagDisplay = void 0;
|
|
4
4
|
var TagDisplay_1 = require("./Comps/TagDisplay");
|
|
5
5
|
Object.defineProperty(exports, "TagDisplay", { enumerable: true, get: function () { return TagDisplay_1.TagDisplay; } });
|
|
6
6
|
var TagClear_1 = require("./Comps/TagClear");
|
|
@@ -9,3 +9,5 @@ var TagLink_1 = require("./Comps/TagLink");
|
|
|
9
9
|
Object.defineProperty(exports, "TagLink", { enumerable: true, get: function () { return TagLink_1.TagLink; } });
|
|
10
10
|
var Tag_1 = require("./Comps/Tag");
|
|
11
11
|
Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
|
|
12
|
+
var TagSelect_1 = require("./Comps/TagSelect");
|
|
13
|
+
Object.defineProperty(exports, "TagSelect", { enumerable: true, get: function () { return TagSelect_1.TagSelect; } });
|