@artsy/palette 36.1.1 → 37.0.0-canary.1250.28823.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/elements/BorderedRadio/BorderedRadio.d.ts +20 -20
- package/dist/elements/Input/Input.d.ts +3 -0
- package/dist/elements/Input/Input.js +59 -15
- package/dist/elements/Input/Input.js.map +1 -1
- package/dist/elements/Input/Input.story.js +14 -0
- package/dist/elements/Input/Input.story.js.map +1 -1
- package/dist/elements/Input/tokens.js +7 -6
- package/dist/elements/Input/tokens.js.map +1 -1
- package/dist/elements/Input/types.d.ts +1 -1
- package/dist/elements/Input/types.js.map +1 -1
- package/dist/elements/Label/Label.js +2 -2
- package/dist/elements/Label/Label.js.map +1 -1
- package/dist/elements/LabeledInput/LabeledInput.d.ts +2 -1
- package/dist/elements/LabeledInput/LabeledInput.js +12 -10
- package/dist/elements/LabeledInput/LabeledInput.js.map +1 -1
- package/dist/elements/LabeledInput/LabeledInput.story.js +12 -0
- package/dist/elements/LabeledInput/LabeledInput.story.js.map +1 -1
- package/dist/elements/PhoneInput/PhoneInput.d.ts +33 -0
- package/dist/elements/PhoneInput/PhoneInput.js +319 -0
- package/dist/elements/PhoneInput/PhoneInput.js.map +1 -0
- package/dist/elements/PhoneInput/PhoneInput.story.d.ts +5 -0
- package/dist/elements/PhoneInput/PhoneInput.story.js +207 -0
- package/dist/elements/PhoneInput/PhoneInput.story.js.map +1 -0
- package/dist/elements/PhoneInput/index.d.ts +1 -0
- package/dist/elements/PhoneInput/index.js +17 -0
- package/dist/elements/PhoneInput/index.js.map +1 -0
- package/dist/elements/PhoneInput/tokens.d.ts +9 -0
- package/dist/elements/PhoneInput/tokens.js +19 -0
- package/dist/elements/PhoneInput/tokens.js.map +1 -0
- package/dist/elements/Select/Select.d.ts +0 -2
- package/dist/elements/Select/Select.js +25 -28
- package/dist/elements/Select/Select.js.map +1 -1
- package/dist/elements/Select/Select.story.d.ts +0 -1
- package/dist/elements/Select/Select.story.js +16 -34
- package/dist/elements/Select/Select.story.js.map +1 -1
- package/dist/elements/Select/tokens.d.ts +2 -7
- package/dist/elements/Select/tokens.js +6 -5
- package/dist/elements/Select/tokens.js.map +1 -1
- package/dist/elements/Select/types.d.ts +1 -2
- package/dist/elements/Select/types.js.map +1 -1
- package/dist/elements/TextArea/TextArea.d.ts +1 -1
- package/dist/elements/TextArea/TextArea.js +34 -26
- package/dist/elements/TextArea/TextArea.js.map +1 -1
- package/dist/elements/TextArea/tokens.js +7 -6
- package/dist/elements/TextArea/tokens.js.map +1 -1
- package/dist/elements/TextArea/types.d.ts +1 -1
- package/dist/elements/TextArea/types.js.map +1 -1
- package/dist/elements/index.d.ts +1 -0
- package/dist/elements/index.js +11 -0
- package/dist/elements/index.js.map +1 -1
- package/dist/shared/RequiredField.d.ts +3 -0
- package/dist/shared/RequiredField.js +20 -0
- package/dist/shared/RequiredField.js.map +1 -0
- package/dist/themes/Themes.story.js +0 -38
- package/dist/themes/Themes.story.js.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.Default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _storybookStates = require("storybook-states");
|
|
9
|
+
var _PhoneInput = require("./PhoneInput");
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
var _default = {
|
|
12
|
+
title: "Components/PhoneInput"
|
|
13
|
+
};
|
|
14
|
+
exports.default = _default;
|
|
15
|
+
var countriesExample = [{
|
|
16
|
+
text: "🇦🇫 +93",
|
|
17
|
+
name: "Afghanistan",
|
|
18
|
+
value: "af",
|
|
19
|
+
countryCode: "+93",
|
|
20
|
+
flag: "🇦🇫"
|
|
21
|
+
}, {
|
|
22
|
+
text: "🇦🇽 +358",
|
|
23
|
+
name: "Aland Islands",
|
|
24
|
+
value: "ax",
|
|
25
|
+
countryCode: "+358",
|
|
26
|
+
flag: "🇦🇽"
|
|
27
|
+
}, {
|
|
28
|
+
text: "🇦🇱 +355",
|
|
29
|
+
name: "Albania",
|
|
30
|
+
value: "al",
|
|
31
|
+
countryCode: "+355",
|
|
32
|
+
flag: "🇦🇱"
|
|
33
|
+
}, {
|
|
34
|
+
text: "🇩🇿 +213",
|
|
35
|
+
name: "Algeria",
|
|
36
|
+
value: "dz",
|
|
37
|
+
countryCode: "+213",
|
|
38
|
+
flag: "🇩🇿"
|
|
39
|
+
}, {
|
|
40
|
+
text: "🇦🇸 +1684",
|
|
41
|
+
name: "American Samoa",
|
|
42
|
+
value: "as",
|
|
43
|
+
countryCode: "+1684",
|
|
44
|
+
flag: "🇦🇸"
|
|
45
|
+
}, {
|
|
46
|
+
text: "🇦🇩 +376",
|
|
47
|
+
name: "Andorra",
|
|
48
|
+
value: "ad",
|
|
49
|
+
countryCode: "+376",
|
|
50
|
+
flag: "🇦🇩"
|
|
51
|
+
}, {
|
|
52
|
+
text: "🇦🇴 +244",
|
|
53
|
+
name: "Angola",
|
|
54
|
+
value: "ao",
|
|
55
|
+
countryCode: "+244",
|
|
56
|
+
flag: "🇦🇴"
|
|
57
|
+
}, {
|
|
58
|
+
text: "🇦🇮 +1264",
|
|
59
|
+
name: "Anguilla",
|
|
60
|
+
value: "ai",
|
|
61
|
+
countryCode: "+1264",
|
|
62
|
+
flag: "🇦🇮"
|
|
63
|
+
}, {
|
|
64
|
+
text: "🇦🇶 +672",
|
|
65
|
+
name: "Antarctica",
|
|
66
|
+
value: "aq",
|
|
67
|
+
countryCode: "+672",
|
|
68
|
+
flag: "🇦🇶"
|
|
69
|
+
}, {
|
|
70
|
+
text: "🇦🇬 +1268",
|
|
71
|
+
name: "Antigua and Barbuda",
|
|
72
|
+
value: "ag",
|
|
73
|
+
countryCode: "+1268",
|
|
74
|
+
flag: "🇦🇬"
|
|
75
|
+
}, {
|
|
76
|
+
text: "🇦🇷 +54",
|
|
77
|
+
name: "Argentina",
|
|
78
|
+
value: "ar",
|
|
79
|
+
countryCode: "+54",
|
|
80
|
+
flag: "🇦🇷"
|
|
81
|
+
}, {
|
|
82
|
+
text: "🇦🇲 +374",
|
|
83
|
+
name: "Armenia",
|
|
84
|
+
value: "am",
|
|
85
|
+
countryCode: "+374",
|
|
86
|
+
flag: "🇦🇲"
|
|
87
|
+
}, {
|
|
88
|
+
text: "🇦🇼 +297",
|
|
89
|
+
name: "Aruba",
|
|
90
|
+
value: "aw",
|
|
91
|
+
countryCode: "+297",
|
|
92
|
+
flag: "🇦🇼"
|
|
93
|
+
}, {
|
|
94
|
+
text: "🇦🇺 +61",
|
|
95
|
+
name: "Australia",
|
|
96
|
+
value: "au",
|
|
97
|
+
countryCode: "+61",
|
|
98
|
+
flag: "🇦🇺"
|
|
99
|
+
}, {
|
|
100
|
+
text: "🇦🇹 +43",
|
|
101
|
+
name: "Austria",
|
|
102
|
+
value: "at",
|
|
103
|
+
countryCode: "+43",
|
|
104
|
+
flag: "🇦🇹"
|
|
105
|
+
}, {
|
|
106
|
+
text: "🇦🇿 +994",
|
|
107
|
+
name: "Azerbaijan",
|
|
108
|
+
value: "az",
|
|
109
|
+
countryCode: "+994",
|
|
110
|
+
flag: "🇦🇿"
|
|
111
|
+
}, {
|
|
112
|
+
text: "🇧🇸 +1242",
|
|
113
|
+
name: "Bahamas",
|
|
114
|
+
value: "bs",
|
|
115
|
+
countryCode: "+1242",
|
|
116
|
+
flag: "🇧🇸"
|
|
117
|
+
}, {
|
|
118
|
+
text: "🇧🇭 +973",
|
|
119
|
+
name: "Bahrain",
|
|
120
|
+
value: "bh",
|
|
121
|
+
countryCode: "+973",
|
|
122
|
+
flag: "🇧🇭"
|
|
123
|
+
}, {
|
|
124
|
+
text: "🇧🇩 +880",
|
|
125
|
+
name: "Bangladesh",
|
|
126
|
+
value: "bd",
|
|
127
|
+
countryCode: "+880",
|
|
128
|
+
flag: "🇧🇩"
|
|
129
|
+
}, {
|
|
130
|
+
text: "🇧🇧 +1246",
|
|
131
|
+
name: "Barbados",
|
|
132
|
+
value: "bb",
|
|
133
|
+
countryCode: "+1246",
|
|
134
|
+
flag: "🇧🇧"
|
|
135
|
+
}, {
|
|
136
|
+
text: "🇧🇾 +375",
|
|
137
|
+
name: "Belarus",
|
|
138
|
+
value: "by",
|
|
139
|
+
countryCode: "+375",
|
|
140
|
+
flag: "🇧🇾"
|
|
141
|
+
}, {
|
|
142
|
+
text: "🇧🇪 +32",
|
|
143
|
+
name: "Belgium",
|
|
144
|
+
value: "be",
|
|
145
|
+
countryCode: "+32",
|
|
146
|
+
flag: "🇧🇪"
|
|
147
|
+
}, {
|
|
148
|
+
text: "🇧🇿 +501",
|
|
149
|
+
name: "Belize",
|
|
150
|
+
value: "bz",
|
|
151
|
+
countryCode: "+501",
|
|
152
|
+
flag: "🇧🇿"
|
|
153
|
+
}, {
|
|
154
|
+
text: "🇧🇯 +229",
|
|
155
|
+
name: "Benin",
|
|
156
|
+
value: "bj",
|
|
157
|
+
countryCode: "+229",
|
|
158
|
+
flag: "🇧🇯"
|
|
159
|
+
}, {
|
|
160
|
+
text: "🇧🇲 +1441",
|
|
161
|
+
name: "Bermuda",
|
|
162
|
+
value: "bm",
|
|
163
|
+
countryCode: "+1441",
|
|
164
|
+
flag: "🇧🇲"
|
|
165
|
+
}, {
|
|
166
|
+
text: "🇧🇹 +975",
|
|
167
|
+
name: "Bhutan",
|
|
168
|
+
value: "bt",
|
|
169
|
+
countryCode: "+975",
|
|
170
|
+
flag: "🇧🇹"
|
|
171
|
+
}, {
|
|
172
|
+
text: "🇧🇴 +591",
|
|
173
|
+
name: "Bolivia",
|
|
174
|
+
value: "bo",
|
|
175
|
+
countryCode: "+591",
|
|
176
|
+
flag: "🇧🇴"
|
|
177
|
+
}, {
|
|
178
|
+
text: "🇧🇦 +387",
|
|
179
|
+
name: "Bosnia and Herzegovina",
|
|
180
|
+
value: "ba",
|
|
181
|
+
countryCode: "+387",
|
|
182
|
+
flag: "🇧🇦"
|
|
183
|
+
}];
|
|
184
|
+
var Default = function Default() {
|
|
185
|
+
return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
|
|
186
|
+
states: [{}, {
|
|
187
|
+
placeholder: "(000) 000 0000"
|
|
188
|
+
}, {
|
|
189
|
+
placeholder: "(000) 000 0000",
|
|
190
|
+
required: true
|
|
191
|
+
}, {
|
|
192
|
+
placeholder: "(000) 000 0000",
|
|
193
|
+
disabled: true
|
|
194
|
+
}, {
|
|
195
|
+
placeholder: "(000) 000 0000",
|
|
196
|
+
error: "Something is wrong"
|
|
197
|
+
}]
|
|
198
|
+
}, /*#__PURE__*/_react.default.createElement(_PhoneInput.PhoneInput, {
|
|
199
|
+
options: countriesExample,
|
|
200
|
+
onSelect: function onSelect(option) {
|
|
201
|
+
return console.log(option);
|
|
202
|
+
}
|
|
203
|
+
}));
|
|
204
|
+
};
|
|
205
|
+
exports.Default = Default;
|
|
206
|
+
Default.displayName = "Default";
|
|
207
|
+
//# sourceMappingURL=PhoneInput.story.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PhoneInput.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_PhoneInput","obj","__esModule","default","_default","title","exports","countriesExample","text","name","value","countryCode","flag","Default","createElement","States","states","placeholder","required","disabled","error","PhoneInput","options","onSelect","option","console","log","displayName"],"sources":["../../../src/elements/PhoneInput/PhoneInput.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { PhoneInput, PhoneInputProps } from \"./PhoneInput\"\n\nexport default {\n title: \"Components/PhoneInput\",\n}\n\nconst countriesExample = [\n {\n text: \"🇦🇫 +93\",\n name: \"Afghanistan\",\n value: \"af\",\n countryCode: \"+93\",\n flag: \"🇦🇫\",\n },\n {\n text: \"🇦🇽 +358\",\n name: \"Aland Islands\",\n value: \"ax\",\n countryCode: \"+358\",\n flag: \"🇦🇽\",\n },\n {\n text: \"🇦🇱 +355\",\n name: \"Albania\",\n value: \"al\",\n countryCode: \"+355\",\n flag: \"🇦🇱\",\n },\n {\n text: \"🇩🇿 +213\",\n name: \"Algeria\",\n value: \"dz\",\n countryCode: \"+213\",\n flag: \"🇩🇿\",\n },\n {\n text: \"🇦🇸 +1684\",\n name: \"American Samoa\",\n value: \"as\",\n countryCode: \"+1684\",\n flag: \"🇦🇸\",\n },\n {\n text: \"🇦🇩 +376\",\n name: \"Andorra\",\n value: \"ad\",\n countryCode: \"+376\",\n flag: \"🇦🇩\",\n },\n {\n text: \"🇦🇴 +244\",\n name: \"Angola\",\n value: \"ao\",\n countryCode: \"+244\",\n flag: \"🇦🇴\",\n },\n {\n text: \"🇦🇮 +1264\",\n name: \"Anguilla\",\n value: \"ai\",\n countryCode: \"+1264\",\n flag: \"🇦🇮\",\n },\n {\n text: \"🇦🇶 +672\",\n name: \"Antarctica\",\n value: \"aq\",\n countryCode: \"+672\",\n flag: \"🇦🇶\",\n },\n {\n text: \"🇦🇬 +1268\",\n name: \"Antigua and Barbuda\",\n value: \"ag\",\n countryCode: \"+1268\",\n flag: \"🇦🇬\",\n },\n {\n text: \"🇦🇷 +54\",\n name: \"Argentina\",\n value: \"ar\",\n countryCode: \"+54\",\n flag: \"🇦🇷\",\n },\n {\n text: \"🇦🇲 +374\",\n name: \"Armenia\",\n value: \"am\",\n countryCode: \"+374\",\n flag: \"🇦🇲\",\n },\n {\n text: \"🇦🇼 +297\",\n name: \"Aruba\",\n value: \"aw\",\n countryCode: \"+297\",\n flag: \"🇦🇼\",\n },\n {\n text: \"🇦🇺 +61\",\n name: \"Australia\",\n value: \"au\",\n countryCode: \"+61\",\n flag: \"🇦🇺\",\n },\n {\n text: \"🇦🇹 +43\",\n name: \"Austria\",\n value: \"at\",\n countryCode: \"+43\",\n flag: \"🇦🇹\",\n },\n {\n text: \"🇦🇿 +994\",\n name: \"Azerbaijan\",\n value: \"az\",\n countryCode: \"+994\",\n flag: \"🇦🇿\",\n },\n {\n text: \"🇧🇸 +1242\",\n name: \"Bahamas\",\n value: \"bs\",\n countryCode: \"+1242\",\n flag: \"🇧🇸\",\n },\n {\n text: \"🇧🇭 +973\",\n name: \"Bahrain\",\n value: \"bh\",\n countryCode: \"+973\",\n flag: \"🇧🇭\",\n },\n {\n text: \"🇧🇩 +880\",\n name: \"Bangladesh\",\n value: \"bd\",\n countryCode: \"+880\",\n flag: \"🇧🇩\",\n },\n {\n text: \"🇧🇧 +1246\",\n name: \"Barbados\",\n value: \"bb\",\n countryCode: \"+1246\",\n flag: \"🇧🇧\",\n },\n {\n text: \"🇧🇾 +375\",\n name: \"Belarus\",\n value: \"by\",\n countryCode: \"+375\",\n flag: \"🇧🇾\",\n },\n {\n text: \"🇧🇪 +32\",\n name: \"Belgium\",\n value: \"be\",\n countryCode: \"+32\",\n flag: \"🇧🇪\",\n },\n {\n text: \"🇧🇿 +501\",\n name: \"Belize\",\n value: \"bz\",\n countryCode: \"+501\",\n flag: \"🇧🇿\",\n },\n {\n text: \"🇧🇯 +229\",\n name: \"Benin\",\n value: \"bj\",\n countryCode: \"+229\",\n flag: \"🇧🇯\",\n },\n {\n text: \"🇧🇲 +1441\",\n name: \"Bermuda\",\n value: \"bm\",\n countryCode: \"+1441\",\n flag: \"🇧🇲\",\n },\n {\n text: \"🇧🇹 +975\",\n name: \"Bhutan\",\n value: \"bt\",\n countryCode: \"+975\",\n flag: \"🇧🇹\",\n },\n {\n text: \"🇧🇴 +591\",\n name: \"Bolivia\",\n value: \"bo\",\n countryCode: \"+591\",\n flag: \"🇧🇴\",\n },\n {\n text: \"🇧🇦 +387\",\n name: \"Bosnia and Herzegovina\",\n value: \"ba\",\n countryCode: \"+387\",\n flag: \"🇧🇦\",\n },\n]\n\nexport const Default = () => {\n return (\n <States<Partial<PhoneInputProps>>\n states={[\n {},\n { placeholder: \"(000) 000 0000\" },\n { placeholder: \"(000) 000 0000\", required: true },\n { placeholder: \"(000) 000 0000\", disabled: true },\n { placeholder: \"(000) 000 0000\", error: \"Something is wrong\" },\n ]}\n >\n <PhoneInput\n options={countriesExample}\n onSelect={(option) => console.log(option)}\n />\n </States>\n )\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./PhoneInput";
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _PhoneInput = require("./PhoneInput");
|
|
7
|
+
Object.keys(_PhoneInput).forEach(function (key) {
|
|
8
|
+
if (key === "default" || key === "__esModule") return;
|
|
9
|
+
if (key in exports && exports[key] === _PhoneInput[key]) return;
|
|
10
|
+
Object.defineProperty(exports, key, {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function get() {
|
|
13
|
+
return _PhoneInput[key];
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
});
|
|
17
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["_PhoneInput","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../../src/elements/PhoneInput/index.ts"],"sourcesContent":["export * from \"./PhoneInput\"\n"],"mappings":";;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,WAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,WAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,WAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare const PHONE_INPUT_STATES: {
|
|
2
|
+
default: import("styled-components").FlattenInterpolation<any>[];
|
|
3
|
+
active: import("styled-components").FlattenInterpolation<any>[];
|
|
4
|
+
focus: import("styled-components").FlattenInterpolation<any>[];
|
|
5
|
+
hover: import("styled-components").FlattenInterpolation<any>[];
|
|
6
|
+
completed: import("styled-components").FlattenInterpolation<any>[];
|
|
7
|
+
disabled: import("styled-components").FlattenInterpolation<any>[];
|
|
8
|
+
error: import("styled-components").FlattenInterpolation<any>[];
|
|
9
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.PHONE_INPUT_STATES = void 0;
|
|
7
|
+
var _themeGet = require("@styled-system/theme-get");
|
|
8
|
+
var _styledComponents = require("styled-components");
|
|
9
|
+
var PHONE_INPUT_STATES = {
|
|
10
|
+
default: (0, _styledComponents.css)(["> div{border-color:", ";}> input{border-color:", ";outline:none;}> input::placeholder,> label{color:", ";}"], (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black60")),
|
|
11
|
+
active: (0, _styledComponents.css)(["> div,> input{border-color:", ";color:", ";}> input::placeholder{color:", ";}> label{color:", ";}"], (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.blue100")),
|
|
12
|
+
focus: (0, _styledComponents.css)(["> div,> input{border-color:", ";}> input::placeholder{color:", ";}> label{color:", ";}"], (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.blue100")),
|
|
13
|
+
hover: (0, _styledComponents.css)(["> div,> input{border-color:", ";}> input::placeholder,> label{color:", ";}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black100")),
|
|
14
|
+
completed: (0, _styledComponents.css)(["> div,> input{border-color:", ";color:", ";}> label{color:", ";}"], (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black60")),
|
|
15
|
+
disabled: (0, _styledComponents.css)(["> div,> input{cursor:default;background-color:transparent;border-color:", ";}> input::placeholder,> label{color:", ";}"], (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30")),
|
|
16
|
+
error: (0, _styledComponents.css)(["> div,> input{border-color:", ";}> label{color:", ";}"], (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("colors.red100"))
|
|
17
|
+
};
|
|
18
|
+
exports.PHONE_INPUT_STATES = PHONE_INPUT_STATES;
|
|
19
|
+
//# sourceMappingURL=tokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","PHONE_INPUT_STATES","default","css","themeGet","active","focus","hover","completed","disabled","error","exports"],"sources":["../../../src/elements/PhoneInput/tokens.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\n\nexport const PHONE_INPUT_STATES = {\n default: css`\n > div {\n border-color: ${themeGet(\"colors.black30\")};\n }\n\n > input {\n border-color: ${themeGet(\"colors.black30\")};\n outline: none;\n }\n\n > input::placeholder,\n > label {\n color: ${themeGet(\"colors.black60\")};\n }\n `,\n active: css`\n > div,\n > input {\n border-color: ${themeGet(\"colors.blue100\")};\n color: ${themeGet(\"colors.black100\")};\n }\n\n > input::placeholder {\n color: ${themeGet(\"colors.black100\")};\n }\n\n > label {\n color: ${themeGet(\"colors.blue100\")};\n }\n `,\n focus: css`\n > div,\n > input {\n border-color: ${themeGet(\"colors.blue100\")};\n }\n\n > input::placeholder {\n color: ${themeGet(\"colors.black60\")};\n }\n\n > label {\n color: ${themeGet(\"colors.blue100\")};\n }\n `,\n hover: css`\n > div,\n > input {\n border-color: ${themeGet(\"colors.black100\")};\n }\n\n > input::placeholder,\n > label {\n color: ${themeGet(\"colors.black100\")};\n }\n `,\n completed: css`\n > div,\n > input {\n border-color: ${themeGet(\"colors.black60\")};\n color: ${themeGet(\"colors.black100\")};\n }\n\n > label {\n color: ${themeGet(\"colors.black60\")};\n }\n `,\n disabled: css`\n > div,\n > input {\n cursor: default;\n background-color: transparent;\n border-color: ${themeGet(\"colors.black30\")};\n }\n\n > input::placeholder,\n > label {\n color: ${themeGet(\"colors.black30\")};\n }\n `,\n error: css`\n > div,\n > input {\n border-color: ${themeGet(\"colors.red100\")};\n }\n\n > label {\n color: ${themeGet(\"colors.red100\")};\n }\n `,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAEO,IAAME,kBAAkB,GAAG;EAChCC,OAAO,MAAEC,qBAAG,kHAEQ,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAMjC,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAEtC;EACDC,MAAM,MAAEF,qBAAG,yGAGS,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACjC,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EAI3B,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EAI3B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAEtC;EACDE,KAAK,MAAEH,qBAAG,8FAGU,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EAIjC,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAEtC;EACDG,KAAK,MAAEJ,qBAAG,kFAGU,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EAKlC,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,CAEvC;EACDI,SAAS,MAAEL,qBAAG,wEAGM,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACjC,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EAI3B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAEtC;EACDK,QAAQ,MAAEN,qBAAG,8HAKO,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EAKjC,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAEtC;EACDM,KAAK,MAAEP,qBAAG,6DAGU,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAIhC,IAAAA,kBAAQ,EAAC,eAAe,CAAC;AAGxC,CAAC;AAAAO,OAAA,CAAAV,kBAAA,GAAAA,kBAAA"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React, { ForwardRefExoticComponent, Ref } from "react";
|
|
2
2
|
import { BoxProps } from "../Box";
|
|
3
|
-
import { Variant } from "./types";
|
|
4
3
|
export interface Option {
|
|
5
4
|
value: string;
|
|
6
5
|
text: string;
|
|
@@ -16,7 +15,6 @@ export interface SelectProps extends BoxProps, Omit<React.SelectHTMLAttributes<H
|
|
|
16
15
|
required?: boolean;
|
|
17
16
|
selected?: string;
|
|
18
17
|
title?: string;
|
|
19
|
-
variant?: Variant;
|
|
20
18
|
onSelect?: (value: string) => void;
|
|
21
19
|
}
|
|
22
20
|
/** A drop-down select menu */
|
|
@@ -9,10 +9,11 @@ var _themeGet = require("@styled-system/theme-get");
|
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
11
11
|
var _Box = require("../Box");
|
|
12
|
-
var _Flex = require("../Flex");
|
|
13
12
|
var _Text = require("../Text");
|
|
14
13
|
var _tokens = require("./tokens");
|
|
15
|
-
var
|
|
14
|
+
var _Tooltip = require("../Tooltip");
|
|
15
|
+
var _RequiredField = require("../../shared/RequiredField");
|
|
16
|
+
var _excluded = ["description", "disabled", "error", "focus", "hover", "id", "name", "options", "required", "selected", "title", "onSelect"];
|
|
16
17
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
18
19
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
@@ -37,8 +38,6 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
37
38
|
required = _ref.required,
|
|
38
39
|
selected = _ref.selected,
|
|
39
40
|
title = _ref.title,
|
|
40
|
-
_ref$variant = _ref.variant,
|
|
41
|
-
variant = _ref$variant === void 0 ? "default" : _ref$variant,
|
|
42
41
|
onSelect = _ref.onSelect,
|
|
43
42
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
44
43
|
var _splitBoxProps = (0, _Box.splitBoxProps)(rest),
|
|
@@ -47,32 +46,20 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
47
46
|
selectProps = _splitBoxProps2[1];
|
|
48
47
|
return /*#__PURE__*/_react.default.createElement(_Box.Box, _extends({
|
|
49
48
|
width: "100%"
|
|
50
|
-
}, boxProps), /*#__PURE__*/_react.default.createElement(
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
} : {
|
|
56
|
-
flexDirection: "column",
|
|
57
|
-
alignItems: "flex-start"
|
|
58
|
-
}, id ? {
|
|
59
|
-
for: id
|
|
60
|
-
} : {}), /*#__PURE__*/_react.default.createElement("div", null, title && /*#__PURE__*/_react.default.createElement(_Text.Text, {
|
|
49
|
+
}, boxProps), !!description && /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
|
|
50
|
+
pointer: true,
|
|
51
|
+
content: description,
|
|
52
|
+
placement: "top-end"
|
|
53
|
+
}, /*#__PURE__*/_react.default.createElement(_Text.Text, {
|
|
61
54
|
variant: "xs",
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
color: "brand"
|
|
66
|
-
}, "*")), description && /*#__PURE__*/_react.default.createElement(_Text.Text, {
|
|
67
|
-
variant: "xs",
|
|
68
|
-
color: "black60"
|
|
69
|
-
}, description)), /*#__PURE__*/_react.default.createElement(Container, {
|
|
70
|
-
variant: variant,
|
|
55
|
+
color: "black60",
|
|
56
|
+
textAlign: "right"
|
|
57
|
+
}, /*#__PURE__*/_react.default.createElement("u", null, "What is this?"))), /*#__PURE__*/_react.default.createElement(Container, {
|
|
71
58
|
disabled: !!disabled,
|
|
72
59
|
hover: !!hover,
|
|
73
60
|
error: error,
|
|
74
61
|
focus: !!focus,
|
|
75
|
-
|
|
62
|
+
title: title
|
|
76
63
|
}, /*#__PURE__*/_react.default.createElement("select", _extends({
|
|
77
64
|
ref: ref,
|
|
78
65
|
id: id,
|
|
@@ -89,9 +76,15 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
89
76
|
value: value,
|
|
90
77
|
key: value
|
|
91
78
|
}, text);
|
|
92
|
-
}))
|
|
79
|
+
})), !!title && /*#__PURE__*/_react.default.createElement(StyledLabel, {
|
|
80
|
+
htmlFor: id
|
|
81
|
+
}, title)), required && !(error && typeof error === "string") && /*#__PURE__*/_react.default.createElement(_RequiredField.RequiredField, {
|
|
82
|
+
mt: 0.5,
|
|
83
|
+
ml: 1
|
|
84
|
+
}), error && typeof error === "string" && /*#__PURE__*/_react.default.createElement(_Text.Text, {
|
|
93
85
|
variant: "xs",
|
|
94
86
|
mt: 0.5,
|
|
87
|
+
ml: 1,
|
|
95
88
|
color: "red100"
|
|
96
89
|
}, error));
|
|
97
90
|
});
|
|
@@ -108,7 +101,11 @@ exports.caretMixin = caretMixin;
|
|
|
108
101
|
var Container = (0, _styledComponents.default)(_Box.Box).withConfig({
|
|
109
102
|
displayName: "Select__Container",
|
|
110
103
|
componentId: "sc-1weszjl-0"
|
|
111
|
-
})(["position:relative;width:100%;> select{", ";width:100%;padding:0 24px 0 ", ";font-family:", ";border:
|
|
112
|
-
return (0, _styledComponents.css)(["", " ", " ", " ", " ", " &:hover{", "}&:focus{", "}&:disabled{cursor:default;", "}"], _tokens.SELECT_STATES.default, props.hover && _tokens.SELECT_STATES.hover, props.focus && _tokens.SELECT_STATES.focus, props.disabled && _tokens.SELECT_STATES.disabled, props.error && _tokens.SELECT_STATES.error, _tokens.SELECT_STATES.hover, _tokens.SELECT_STATES.focus, _tokens.SELECT_STATES.disabled);
|
|
104
|
+
})(["position:relative;width:100%;> select{", ";width:100%;padding:0 24px 0 ", ";font-family:", ";border:1px solid;border-radius:3px;border-color:", ";cursor:pointer;line-height:1;transition:color 0.25s,background-color 0.25s,border-color 0.25s;", ";}", ""], resetMixin, (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("fonts.sans"), (0, _themeGet.themeGet)("colors.black30"), function (props) {
|
|
105
|
+
return (0, _styledComponents.css)(["", " ", " ", " ", " ", " &:hover{", "}&:focus{", "}&:disabled{cursor:default;", "}&:not(:has(option[value=\"\"]:checked)):not(:focus){", " ", "}&:not(:focus):has(option[value=\"\"]:checked){", "}"], _tokens.SELECT_STATES.default, props.hover && _tokens.SELECT_STATES.hover, props.focus && _tokens.SELECT_STATES.focus, props.disabled && _tokens.SELECT_STATES.disabled, props.error && _tokens.SELECT_STATES.error, _tokens.SELECT_STATES.hover, _tokens.SELECT_STATES.focus, _tokens.SELECT_STATES.disabled, !(props.disabled || props.focus) && _tokens.SELECT_STATES.completed, props.error && _tokens.SELECT_STATES.error, props.title && (0, _styledComponents.css)(["color:transparent;"]));
|
|
113
106
|
}, caretMixin);
|
|
107
|
+
var StyledLabel = _styledComponents.default.label.withConfig({
|
|
108
|
+
displayName: "Select__StyledLabel",
|
|
109
|
+
componentId: "sc-1weszjl-1"
|
|
110
|
+
})(["position:absolute;top:50%;left:5px;padding:0 5px;pointer-events:none;transform:translateY(-50%);transition:0.25s cubic-bezier(0.64,0.05,0.36,1);transision-property:color,font-size,transform;background-color:", ";font-family:", ";"], (0, _themeGet.themeGet)("colors.white100"), (0, _themeGet.themeGet)("fonts.sans"));
|
|
114
111
|
//# sourceMappingURL=Select.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_Box","_Flex","_Text","_tokens","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Select","forwardRef","_ref","ref","description","disabled","error","focus","hover","id","options","required","selected","title","_ref$variant","variant","onSelect","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","selectProps","createElement","Box","width","Flex","as","flexDirection","alignItems","for","Text","lineHeight","undefined","color","Container","mt","onChange","event","map","_ref2","text","exports","displayName","resetMixin","css","caretMixin","themeGet","_ref3","styled","withConfig","componentId","props","SELECT_STATES"],"sources":["../../../src/elements/Select/Select.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef, ForwardRefExoticComponent, Ref } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Variant } from \"./types\"\nimport { SELECT_STATES } from \"./tokens\"\n\nexport interface Option {\n value: string\n text: string\n}\n\nexport interface SelectProps\n extends BoxProps,\n Omit<React.SelectHTMLAttributes<HTMLSelectElement>, \"onSelect\" | \"size\"> {\n description?: string\n disabled?: boolean\n error?: string | boolean\n focus?: boolean\n hover?: boolean\n name?: string\n options: Option[]\n required?: boolean\n selected?: string\n title?: string\n variant?: Variant\n onSelect?: (value: string) => void\n}\n\n/** A drop-down select menu */\nexport const Select: ForwardRefExoticComponent<\n SelectProps & { ref?: Ref<HTMLElement> }\n> = forwardRef(\n (\n {\n description,\n disabled,\n error,\n focus,\n hover,\n id,\n name,\n options,\n required,\n selected,\n title,\n variant = \"default\",\n onSelect,\n ...rest\n },\n ref\n ) => {\n const [boxProps, selectProps] = splitBoxProps(rest)\n\n return (\n <Box width=\"100%\" {...boxProps}>\n <Flex\n as=\"label\"\n {...(variant === \"inline\"\n ? {\n flexDirection: \"row\",\n alignItems: \"center\",\n }\n : {\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n })}\n {...(id ? { for: id } : {})}\n >\n <div>\n {title && (\n <Text\n variant=\"xs\"\n lineHeight={\n variant === \"inline\" && description === undefined\n ? 1\n : undefined\n }\n >\n {title}\n {required && (\n <Box as=\"span\" color=\"brand\">\n *\n </Box>\n )}\n </Text>\n )}\n\n {description && (\n <Text variant=\"xs\" color=\"black60\">\n {description}\n </Text>\n )}\n </div>\n\n <Container\n variant={variant}\n disabled={!!disabled}\n hover={!!hover}\n error={error!}\n focus={!!focus}\n mt={variant !== \"inline\" && (title || description) ? 0.5 : 0}\n >\n <select\n ref={ref as any}\n id={id}\n disabled={disabled}\n name={name}\n value={selected}\n onChange={(event) => {\n onSelect && onSelect(event.target.value)\n }}\n {...selectProps}\n >\n {options.map(({ value, text }) => {\n return (\n <option value={value} key={value}>\n {text}\n </option>\n )\n })}\n </select>\n </Container>\n </Flex>\n\n {error && typeof error === \"string\" && (\n <Text variant=\"xs\" mt={0.5} color=\"red100\">\n {error}\n </Text>\n )}\n </Box>\n )\n }\n)\n\nSelect.displayName = \"Select\"\n\nconst resetMixin = css`\n appearance: none;\n background: none;\n border: none;\n outline: 0;\n text-indent: 0.01px;\n text-overflow: \"\";\n border-radius: 0;\n\n &:-moz-focusring {\n color: transparent;\n text-shadow: 0 0 0 black;\n }\n\n option:not(:checked) {\n color: black; /* prevent <option>s from becoming transparent as well */\n }\n`\n\n/** Creates a small caret */\nexport const caretMixin = css`\n &::after {\n content: \"\";\n cursor: inherit;\n width: 0;\n height: 0;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n right: ${themeGet(\"space.1\")};\n pointer-events: none;\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-top: 4px solid\n ${({ disabled }) => {\n return disabled\n ? themeGet(\"colors.black10\")\n : themeGet(\"colors.black100\")\n }};\n }\n`\n\ntype ContainerProps = Required<\n Pick<SelectProps, \"variant\" | \"disabled\" | \"error\" | \"hover\" | \"focus\">\n>\n\nconst Container = styled(Box)<ContainerProps>`\n position: relative;\n width: 100%;\n\n > select {\n ${resetMixin};\n width: 100%;\n /* 24px = space.1 + 4px-wide caret + space.1 */\n padding: 0 24px 0 ${themeGet(\"space.1\")};\n font-family: ${themeGet(\"fonts.sans\")};\n border: 0;\n border-bottom: 1px solid;\n cursor: pointer;\n line-height: 1;\n transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n\n ${(props) => {\n return css`\n ${SELECT_STATES.default}\n\n ${props.hover && SELECT_STATES.hover}\n ${props.focus && SELECT_STATES.focus}\n ${props.disabled && SELECT_STATES.disabled}\n ${props.error && SELECT_STATES.error}\n\n &:hover {\n ${SELECT_STATES.hover}\n }\n\n &:focus {\n ${SELECT_STATES.focus}\n }\n\n &:disabled {\n cursor: default;\n ${SELECT_STATES.disabled}\n }\n `\n }};\n }\n\n ${caretMixin}\n`\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Select.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_Box","_Text","_tokens","_Tooltip","_RequiredField","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Select","forwardRef","_ref","ref","description","disabled","error","focus","hover","id","options","required","selected","title","onSelect","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","selectProps","createElement","Box","width","Tooltip","pointer","content","placement","Text","variant","color","textAlign","Container","onChange","event","map","_ref2","text","StyledLabel","htmlFor","RequiredField","mt","ml","exports","displayName","resetMixin","css","caretMixin","themeGet","_ref3","styled","withConfig","componentId","props","SELECT_STATES","completed","label"],"sources":["../../../src/elements/Select/Select.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef, ForwardRefExoticComponent, Ref } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { SELECT_STATES } from \"./tokens\"\nimport { Tooltip } from \"../Tooltip\"\nimport { RequiredField } from \"../../shared/RequiredField\"\n\nexport interface Option {\n value: string\n text: string\n}\n\nexport interface SelectProps\n extends BoxProps,\n Omit<React.SelectHTMLAttributes<HTMLSelectElement>, \"onSelect\" | \"size\"> {\n description?: string\n disabled?: boolean\n error?: string | boolean\n focus?: boolean\n hover?: boolean\n name?: string\n options: Option[]\n required?: boolean\n selected?: string\n title?: string\n onSelect?: (value: string) => void\n}\n\n/** A drop-down select menu */\nexport const Select: ForwardRefExoticComponent<\n SelectProps & { ref?: Ref<HTMLElement> }\n> = forwardRef(\n (\n {\n description,\n disabled,\n error,\n focus,\n hover,\n id,\n name,\n options,\n required,\n selected,\n title,\n onSelect,\n ...rest\n },\n ref\n ) => {\n const [boxProps, selectProps] = splitBoxProps(rest)\n\n return (\n <Box width=\"100%\" {...boxProps}>\n {!!description && (\n <Tooltip pointer content={description} placement=\"top-end\">\n <Text variant=\"xs\" color=\"black60\" textAlign=\"right\">\n <u>What is this?</u>\n </Text>\n </Tooltip>\n )}\n\n <Container\n disabled={!!disabled}\n hover={!!hover}\n error={error!}\n focus={!!focus}\n title={title}\n >\n <select\n ref={ref as any}\n id={id}\n disabled={disabled}\n name={name}\n value={selected}\n onChange={(event) => {\n onSelect && onSelect(event.target.value)\n }}\n {...selectProps}\n >\n {options.map(({ value, text }) => {\n return (\n <option value={value} key={value}>\n {text}\n </option>\n )\n })}\n </select>\n\n {!!title && <StyledLabel htmlFor={id}>{title}</StyledLabel>}\n </Container>\n\n {required && !(error && typeof error === \"string\") && (\n <RequiredField mt={0.5} ml={1} />\n )}\n\n {error && typeof error === \"string\" && (\n <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n {error}\n </Text>\n )}\n </Box>\n )\n }\n)\n\nSelect.displayName = \"Select\"\n\nconst resetMixin = css`\n appearance: none;\n background: none;\n border: none;\n outline: 0;\n text-indent: 0.01px;\n text-overflow: \"\";\n border-radius: 0;\n\n &:-moz-focusring {\n color: transparent;\n text-shadow: 0 0 0 black;\n }\n\n option:not(:checked) {\n color: black; /* prevent <option>s from becoming transparent as well */\n }\n`\n\n/** Creates a small caret */\nexport const caretMixin = css`\n &::after {\n content: \"\";\n cursor: inherit;\n width: 0;\n height: 0;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n right: ${themeGet(\"space.1\")};\n pointer-events: none;\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-top: 4px solid\n ${({ disabled }) => {\n return disabled\n ? themeGet(\"colors.black10\")\n : themeGet(\"colors.black100\")\n }};\n }\n`\n\ntype ContainerProps = Required<\n Pick<SelectProps, \"disabled\" | \"error\" | \"hover\" | \"focus\">\n>\n\nconst Container = styled(Box)<ContainerProps>`\n position: relative;\n width: 100%;\n\n > select {\n ${resetMixin};\n width: 100%;\n /* 24px = space.1 + 4px-wide caret + space.1 */\n padding: 0 24px 0 ${themeGet(\"space.1\")};\n font-family: ${themeGet(\"fonts.sans\")};\n border: 1px solid;\n border-radius: 3px;\n border-color: ${themeGet(\"colors.black30\")};\n cursor: pointer;\n line-height: 1;\n transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n\n ${(props) => {\n return css`\n ${SELECT_STATES.default}\n\n ${props.hover && SELECT_STATES.hover}\n ${props.focus && SELECT_STATES.focus}\n ${props.disabled && SELECT_STATES.disabled}\n ${props.error && SELECT_STATES.error}\n\n &:hover {\n ${SELECT_STATES.hover}\n }\n\n &:focus {\n ${SELECT_STATES.focus}\n }\n\n &:disabled {\n cursor: default;\n ${SELECT_STATES.disabled}\n }\n\n &:not(:has(option[value=\"\"]:checked)):not(:focus) {\n ${!(props.disabled || props.focus) && SELECT_STATES.completed}\n ${props.error && SELECT_STATES.error}\n }\n\n &:not(:focus):has(option[value=\"\"]:checked) {\n ${props.title &&\n css`\n color: transparent;\n `}\n }\n `\n }};\n }\n\n ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n position: absolute;\n top: 50%;\n left: 5px;\n padding: 0 5px;\n pointer-events: none;\n transform: translateY(-50%);\n transition: 0.25s cubic-bezier(0.64, 0.05, 0.36, 1);\n transision-property: color, font-size, transform;\n background-color: ${themeGet(\"colors.white100\")};\n font-family: ${themeGet(\"fonts.sans\")};\n`\n"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.
|
|
6
|
+
exports.default = exports.Default = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _storybookStates = require("storybook-states");
|
|
9
9
|
var _Select = require("./Select");
|
|
@@ -13,6 +13,9 @@ var _default = {
|
|
|
13
13
|
};
|
|
14
14
|
exports.default = _default;
|
|
15
15
|
var OPTIONS = [{
|
|
16
|
+
text: "Please select",
|
|
17
|
+
value: ""
|
|
18
|
+
}, {
|
|
16
19
|
text: "Default",
|
|
17
20
|
value: "-decayed_merch"
|
|
18
21
|
}, {
|
|
@@ -36,9 +39,7 @@ var OPTIONS = [{
|
|
|
36
39
|
}];
|
|
37
40
|
var Default = function Default() {
|
|
38
41
|
return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
|
|
39
|
-
states: [
|
|
40
|
-
// variant="default"
|
|
41
|
-
{}, {
|
|
42
|
+
states: [{}, {
|
|
42
43
|
focus: true
|
|
43
44
|
}, {
|
|
44
45
|
hover: true
|
|
@@ -46,35 +47,28 @@ var Default = function Default() {
|
|
|
46
47
|
error: "Something went wrong."
|
|
47
48
|
}, {
|
|
48
49
|
disabled: true
|
|
49
|
-
},
|
|
50
|
-
// variant="inline"
|
|
51
|
-
{
|
|
52
|
-
variant: "inline"
|
|
53
50
|
}, {
|
|
54
|
-
|
|
51
|
+
title: "Sort"
|
|
52
|
+
}, {
|
|
53
|
+
title: "Sort",
|
|
54
|
+
description: "A description of sorting"
|
|
55
|
+
}, {
|
|
56
|
+
title: "Sort",
|
|
55
57
|
focus: true
|
|
56
58
|
}, {
|
|
57
|
-
|
|
59
|
+
title: "Sort",
|
|
58
60
|
hover: true
|
|
59
61
|
}, {
|
|
60
|
-
|
|
62
|
+
title: "Sort",
|
|
61
63
|
error: "Something went wrong."
|
|
62
64
|
}, {
|
|
63
|
-
|
|
65
|
+
title: "Sort",
|
|
64
66
|
disabled: true
|
|
65
67
|
}, {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
+
title: "Sort",
|
|
69
|
+
required: true
|
|
68
70
|
}, {
|
|
69
|
-
variant: "inline",
|
|
70
|
-
title: "Sort:",
|
|
71
|
-
description: "A description of sorting"
|
|
72
|
-
},
|
|
73
|
-
// variant="default"
|
|
74
|
-
{
|
|
75
71
|
selected: "lastValue"
|
|
76
|
-
}, {
|
|
77
|
-
title: "Pick something"
|
|
78
72
|
}, {
|
|
79
73
|
title: "Pick something",
|
|
80
74
|
required: true,
|
|
@@ -89,16 +83,4 @@ var Default = function Default() {
|
|
|
89
83
|
};
|
|
90
84
|
exports.Default = Default;
|
|
91
85
|
Default.displayName = "Default";
|
|
92
|
-
var Example = function Example() {
|
|
93
|
-
return /*#__PURE__*/_react.default.createElement(_Select.Select, {
|
|
94
|
-
display: "inline-flex",
|
|
95
|
-
variant: "inline",
|
|
96
|
-
title: "Sort:",
|
|
97
|
-
options: OPTIONS,
|
|
98
|
-
selected: "-year",
|
|
99
|
-
autoComplete: "year"
|
|
100
|
-
});
|
|
101
|
-
};
|
|
102
|
-
exports.Example = Example;
|
|
103
|
-
Example.displayName = "Example";
|
|
104
86
|
//# sourceMappingURL=Select.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_Select","obj","__esModule","default","_default","title","exports","OPTIONS","text","value","Default","createElement","States","states","focus","hover","error","disabled","
|
|
1
|
+
{"version":3,"file":"Select.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_Select","obj","__esModule","default","_default","title","exports","OPTIONS","text","value","Default","createElement","States","states","focus","hover","error","disabled","description","required","selected","id","Select","options","displayName"],"sources":["../../../src/elements/Select/Select.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Select, SelectProps } from \"./Select\"\n\nexport default {\n title: \"Components/Select\",\n}\n\nconst OPTIONS = [\n { text: \"Please select\", value: \"\" },\n { text: \"Default\", value: \"-decayed_merch\" },\n { text: \"Price (desc.)\", value: \"-has_price,-prices\" },\n { text: \"Price (asc.)\", value: \"-has_price,prices\" },\n { text: \"Recently updated\", value: \"-partner_updated_at\" },\n { text: \"Recently added\", value: \"-published_at\" },\n { text: \"Artwork year (desc.)\", value: \"-year\" },\n { text: \"Artwork year (asc.)\", value: \"year\" },\n]\n\nexport const Default = () => {\n return (\n <States<Partial<SelectProps>>\n states={[\n {},\n { focus: true },\n { hover: true },\n { error: \"Something went wrong.\" },\n { disabled: true },\n { title: \"Sort\" },\n { title: \"Sort\", description: \"A description of sorting\" },\n { title: \"Sort\", focus: true },\n { title: \"Sort\", hover: true },\n { title: \"Sort\", error: \"Something went wrong.\" },\n { title: \"Sort\", disabled: true },\n { title: \"Sort\", required: true },\n { selected: \"lastValue\" },\n { title: \"Pick something\", required: true, id: \"pick\" },\n { title: \"Pick something\", description: \"This matters a lot.\" },\n ]}\n >\n <Select options={OPTIONS} />\n </States>\n )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAA8C,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAE/B;EACbC,KAAK,EAAE;AACT,CAAC;AAAAC,OAAA,CAAAH,OAAA,GAAAC,QAAA;AAED,IAAMG,OAAO,GAAG,CACd;EAAEC,IAAI,EAAE,eAAe;EAAEC,KAAK,EAAE;AAAG,CAAC,EACpC;EAAED,IAAI,EAAE,SAAS;EAAEC,KAAK,EAAE;AAAiB,CAAC,EAC5C;EAAED,IAAI,EAAE,eAAe;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtD;EAAED,IAAI,EAAE,cAAc;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACpD;EAAED,IAAI,EAAE,kBAAkB;EAAEC,KAAK,EAAE;AAAsB,CAAC,EAC1D;EAAED,IAAI,EAAE,gBAAgB;EAAEC,KAAK,EAAE;AAAgB,CAAC,EAClD;EAAED,IAAI,EAAE,sBAAsB;EAAEC,KAAK,EAAE;AAAQ,CAAC,EAChD;EAAED,IAAI,EAAE,qBAAqB;EAAEC,KAAK,EAAE;AAAO,CAAC,CAC/C;AAEM,IAAMC,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEd,MAAA,CAAAO,OAAA,CAAAQ,aAAA,CAACZ,gBAAA,CAAAa,MAAM;IACLC,MAAM,EAAE,CACN,CAAC,CAAC,EACF;MAAEC,KAAK,EAAE;IAAK,CAAC,EACf;MAAEC,KAAK,EAAE;IAAK,CAAC,EACf;MAAEC,KAAK,EAAE;IAAwB,CAAC,EAClC;MAAEC,QAAQ,EAAE;IAAK,CAAC,EAClB;MAAEZ,KAAK,EAAE;IAAO,CAAC,EACjB;MAAEA,KAAK,EAAE,MAAM;MAAEa,WAAW,EAAE;IAA2B,CAAC,EAC1D;MAAEb,KAAK,EAAE,MAAM;MAAES,KAAK,EAAE;IAAK,CAAC,EAC9B;MAAET,KAAK,EAAE,MAAM;MAAEU,KAAK,EAAE;IAAK,CAAC,EAC9B;MAAEV,KAAK,EAAE,MAAM;MAAEW,KAAK,EAAE;IAAwB,CAAC,EACjD;MAAEX,KAAK,EAAE,MAAM;MAAEY,QAAQ,EAAE;IAAK,CAAC,EACjC;MAAEZ,KAAK,EAAE,MAAM;MAAEc,QAAQ,EAAE;IAAK,CAAC,EACjC;MAAEC,QAAQ,EAAE;IAAY,CAAC,EACzB;MAAEf,KAAK,EAAE,gBAAgB;MAAEc,QAAQ,EAAE,IAAI;MAAEE,EAAE,EAAE;IAAO,CAAC,EACvD;MAAEhB,KAAK,EAAE,gBAAgB;MAAEa,WAAW,EAAE;IAAsB,CAAC;EAC/D,gBAEFtB,MAAA,CAAAO,OAAA,CAAAQ,aAAA,CAACX,OAAA,CAAAsB,MAAM;IAACC,OAAO,EAAEhB;EAAQ,EAAG,CACrB;AAEb,CAAC;AAAAD,OAAA,CAAAI,OAAA,GAAAA,OAAA;AAxBYA,OAAO,CAAAc,WAAA"}
|
|
@@ -1,7 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
focus: import("styled-components").FlattenInterpolation<any>[];
|
|
4
|
-
hover: import("styled-components").FlattenInterpolation<any>[];
|
|
5
|
-
disabled: import("styled-components").FlattenInterpolation<any>[];
|
|
6
|
-
error: import("styled-components").FlattenInterpolation<any>[];
|
|
7
|
-
};
|
|
1
|
+
import { State } from "./types";
|
|
2
|
+
export declare const SELECT_STATES: Record<State, any>;
|