@sellout/ui 0.0.89 → 0.0.91

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.
Files changed (4) hide show
  1. package/build/components/FormattedInput.js +3 -2
  2. package/build/components/Icon.d.ts +52 -42
  3. package/build/components/Input.js +5 -5
  4. package/package.json +4 -4
package/build/components/FormattedInput.js CHANGED
@@ -31,6 +31,7 @@ var InputStyled = styled.input(templateObject_6 || (templateObject_6 = __makeTem
31
31
  ";\n\n ::placeholder {\n color: ", ";\n }\n"])), function (props) {
32
32
  return props.disabled ? Colors.Grey6 + " !important" : null;
33
33
  }, function (props) { return (props.disabled ? Colors.Grey4 : Colors.Grey1); }, media.mobile(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 1.6rem;\n "], ["\n font-size: 1.6rem;\n "]))), media.desktop(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 1.4rem;\n "], ["\n font-size: 1.4rem;\n "]))), Colors.Grey4);
34
+ var IconText = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-size: 1.4rem;\n font-weight: 600;\n color: ", ";\n"], ["\n font-size: 1.4rem;\n font-weight: 600;\n color: ", ";\n"])), Colors.Grey3);
34
35
  function Input(_a) {
35
36
  var inputRef = _a.inputRef, autoFocus = _a.autoFocus, placeholder = _a.placeholder, value = _a.value, defaultValue = _a.defaultValue, _b = _a.format, format = _b === void 0 ? InputFormats.Price : _b, _c = _a.type, type = _c === void 0 ? "text" : _c, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onSubmit = _a.onSubmit, _d = _a.canSubmit, canSubmit = _d === void 0 ? true : _d, loading = _a.loading, margin = _a.margin, width = _a.width, onEnter = _a.onEnter, label = _a.label, subLabel = _a.subLabel, tip = _a.tip, maxLength = _a.maxLength, validationError = _a.validationError, _e = _a.disabled, disabled = _e === void 0 ? false : _e;
36
37
  var _f = useState(false), hovered = _f[0], setHovered = _f[1];
@@ -75,10 +76,10 @@ function Input(_a) {
75
76
  onMouseLeave(event);
76
77
  } }),
77
78
  format === InputFormats.Percent && (React.createElement(PriceContainer, null,
78
- React.createElement(Icon, { icon: Icons.GiftRegular, size: 14, color: Colors.Grey3 })))),
79
+ React.createElement(IconText, null, "%")))),
79
80
  validationError && (React.createElement(ValidationError, { validationError: validationError }))));
80
81
  }
81
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
82
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
82
83
 
83
84
  export default Input;
84
85
  export { InputFormats };
package/build/components/Icon.d.ts CHANGED
@@ -1,7 +1,55 @@
1
1
  import { Colors } from "../Colors";
2
2
  export declare const Icons: {
3
+ VerticalEllipsisRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
4
+ AngleDownRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
5
+ AngleUpRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
6
+ AudienceRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
7
+ BoldRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
8
+ CalculatorRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
9
+ CheckRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
10
+ Cheers: import("@fortawesome/fontawesome-common-types").IconDefinition;
11
+ Clipboard: import("@fortawesome/fontawesome-common-types").IconDefinition;
12
+ CrownRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
13
+ DeleteRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
14
+ Dollar: import("@fortawesome/fontawesome-common-types").IconDefinition;
15
+ DownArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
16
+ DownloadReport: import("@fortawesome/fontawesome-common-types").IconDefinition;
17
+ Embed: import("@fortawesome/fontawesome-common-types").IconDefinition;
18
+ FeeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
19
+ FilterRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
20
+ FireRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
21
+ GiftRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
22
+ GlobeLinesRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
23
+ GlobeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
24
+ GraphGrowth: import("@fortawesome/fontawesome-common-types").IconDefinition;
25
+ ItalicRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
26
+ KeyRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
27
+ LeftArrowRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
28
+ LeftChevronRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
29
+ LinkRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
30
+ OListRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
31
+ PlusRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
32
+ PrintRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
33
+ ReportRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
34
+ RightArrowRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
35
+ RightChevronRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
36
+ SearchRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
37
+ SettingsRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
38
+ SignOut: import("@fortawesome/fontawesome-common-types").IconDefinition;
39
+ StreamRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
40
+ SyncRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
41
+ TicketRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
42
+ UListRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
43
+ UnderlineRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
44
+ UnlockRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
45
+ UpArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
46
+ Update: import("@fortawesome/fontawesome-common-types").IconDefinition;
47
+ UpgradeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
48
+ UsersRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
3
49
  Amex: import("@fortawesome/fontawesome-common-types").IconDefinition;
4
50
  Discover: import("@fortawesome/fontawesome-common-types").IconDefinition;
51
+ FacebookPlain: import("@fortawesome/fontawesome-common-types").IconDefinition;
52
+ Google: import("@fortawesome/fontawesome-common-types").IconDefinition;
5
53
  Mastercard: import("@fortawesome/fontawesome-common-types").IconDefinition;
6
54
  Visa: import("@fortawesome/fontawesome-common-types").IconDefinition;
7
55
  AnalyticsLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -13,7 +61,9 @@ export declare const Icons: {
13
61
  CalendarLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
14
62
  CalendarStarLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
15
63
  CancelLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
64
+ CartLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
16
65
  CheckLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
66
+ ClipboardLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
17
67
  CopyLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
18
68
  EditLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
19
69
  EnvelopeLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -45,6 +95,8 @@ export declare const Icons: {
45
95
  ShareLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
46
96
  SortByLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
47
97
  TeamLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
98
+ ThumbsDownLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
99
+ ThumbsUpLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
48
100
  UnlockLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
49
101
  UploadLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
50
102
  UserLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -61,48 +113,6 @@ export declare const Icons: {
61
113
  SortBy: import("@fortawesome/fontawesome-common-types").IconDefinition;
62
114
  TeamSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
63
115
  UpgradeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
64
- AngleDownRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
65
- AudienceRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
66
- BoldRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
67
- CalculatorRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
68
- CheckRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
69
- Cheers: import("@fortawesome/fontawesome-common-types").IconDefinition;
70
- Clipboard: import("@fortawesome/fontawesome-common-types").IconDefinition;
71
- CrownRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
72
- DeleteRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
73
- Dollar: import("@fortawesome/fontawesome-common-types").IconDefinition;
74
- DownArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
75
- DownloadReport: import("@fortawesome/fontawesome-common-types").IconDefinition;
76
- Embed: import("@fortawesome/fontawesome-common-types").IconDefinition;
77
- FeeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
78
- FilterRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
79
- FireRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
80
- GiftRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
81
- GlobeLinesRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
82
- GlobeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
83
- GraphGrowth: import("@fortawesome/fontawesome-common-types").IconDefinition;
84
- ItalicRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
85
- KeyRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
86
- LeftChevronRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
87
- LinkRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
88
- OListRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
89
- PlusRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
90
- PrintRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
91
- ReportRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
92
- RightChevronRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
93
- SearchRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
94
- SettingsRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
95
- SignOut: import("@fortawesome/fontawesome-common-types").IconDefinition;
96
- StreamRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
97
- SyncRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
98
- TicketRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
99
- UListRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
100
- UnderlineRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
101
- UnlockRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
102
- UpArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
103
- Update: import("@fortawesome/fontawesome-common-types").IconDefinition;
104
- UpgradeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
105
- UsersRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
106
116
  AngleDownSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
107
117
  AngleUpSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
108
118
  AudienceSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
package/build/components/Input.js CHANGED
@@ -41,7 +41,7 @@ var Button = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateOb
41
41
  return null;
42
42
  }, function (props) { return (props.onClick ? "pointer" : null); }, function (props) { return (props.onClick ? "pointer" : null); });
43
43
  var IconContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n"])));
44
- var LeftContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 15px;\n top: 0px;\n left: 0px;\n background-color: ", ";\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 15px;\n top: 0px;\n left: 0px;\n background-color: ", ";\n"])), Colors.White);
44
+ var LeftContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 16px;\n top: 0px;\n left: 0px;\n background-color: ", ";\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 16px;\n top: 0px;\n left: 0px;\n background-color: ", ";\n"])), Colors.White);
45
45
  var RightContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: ", ";\n width: ", ";\n top: -1px;\n right: -1px;\n background-color: ", ";\n\n &:hover {\n cursor: ", ";\n }\n"], ["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: ",
46
46
  ";\n width: ",
47
47
  ";\n top: -1px;\n right: -1px;\n background-color: ", ";\n\n &:hover {\n cursor: ", ";\n }\n"])), function (props) {
@@ -58,8 +58,8 @@ var RightContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTe
58
58
  return null;
59
59
  }, Colors.White, function (props) { return (props.onClick ? "pointer" : null); });
60
60
  var Spacer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 50px;\n background-color: ", ";\n"], ["\n width: 50px;\n background-color: ", ";\n"])), Colors.White);
61
- var InputStyled = styled.input(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n outline: none;\n border: 0px;\n /* border-radius: 10px; */\n height: ", ";\n width: fill-available;\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n padding: 0 0 0 10px;\n text-indent: 1px;\n transition: all 0.2s;\n padding: ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n ", ";\n\n ", ";\n"], ["\n background-color: ", ";\n color: ", ";\n outline: none;\n border: 0px;\n /* border-radius: 10px; */\n height: ",
62
- ";\n width: fill-available;\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n padding: 0 0 0 10px;\n text-indent: 1px;\n transition: all 0.2s;\n padding: ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n ",
61
+ var InputStyled = styled.input(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n outline: none;\n border: 0px;\n /* border-radius: 10px; */\n height: ", ";\n width: fill-available;\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n padding: 0px;\n padding-left: ", ";\n transition: all 0.2s;\n padding: ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n ", ";\n\n ", ";\n"], ["\n background-color: ", ";\n color: ", ";\n outline: none;\n border: 0px;\n /* border-radius: 10px; */\n height: ",
62
+ ";\n width: fill-available;\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n padding: 0px;\n padding-left: ", ";\n transition: all 0.2s;\n padding: ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n ",
63
63
  ";\n\n ",
64
64
  ";\n"])), Colors.White, function (props) { return props.disabled ? Colors.Grey4 : Colors.Grey1; }, function (props) {
65
65
  if (props.inputSize === InputSizes.Large)
@@ -67,7 +67,7 @@ var InputStyled = styled.input(templateObject_10 || (templateObject_10 = __makeT
67
67
  if (props.inputSize === InputSizes.Regular)
68
68
  return "38px";
69
69
  return null;
70
- }, function (props) { return props.padding; }, Colors.Grey4, media.mobile(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 1.6rem;\n"], ["\n font-size: 1.6rem;\n"]))), media.desktop(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-size: 1.4rem;\n"], ["\n font-size: 1.4rem;\n"]))));
70
+ }, function (props) { return props.hasIcon ? '8px' : '16px'; }, function (props) { return props.padding; }, Colors.Grey4, media.mobile(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 1.6rem;\n"], ["\n font-size: 1.6rem;\n"]))), media.desktop(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-size: 1.4rem;\n"], ["\n font-size: 1.4rem;\n"]))));
71
71
  function Input(_a) {
72
72
  var inputRef = _a.inputRef, autoFocus = _a.autoFocus, placeholder = _a.placeholder, value = _a.value, defaultValue = _a.defaultValue, icon = _a.icon, iconColor = _a.iconColor, _b = _a.size, size = _b === void 0 ? InputSizes.Regular : _b, _c = _a.type, type = _c === void 0 ? "text" : _c, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onSubmit = _a.onSubmit, onClear = _a.onClear, _d = _a.canSubmit, canSubmit = _d === void 0 ? true : _d, loading = _a.loading, margin = _a.margin, padding = _a.padding, width = _a.width, onEnter = _a.onEnter, label = _a.label, subLabel = _a.subLabel, tip = _a.tip, maxLength = _a.maxLength, iconConditionalColor = _a.iconConditionalColor, validationError = _a.validationError, _e = _a.disabled, disabled = _e === void 0 ? false : _e;
73
73
  var _f = useState(false), hovered = _f[0], setHovered = _f[1];
@@ -133,7 +133,7 @@ function Input(_a) {
133
133
  setHovered(false);
134
134
  if (onMouseLeave)
135
135
  onMouseLeave(event);
136
- }, padding: padding, inputSize: size }),
136
+ }, padding: padding, inputSize: size, hasIcon: Boolean(icon) }),
137
137
  (function () {
138
138
  if (onSubmit) {
139
139
  return (React.createElement(Fragment, null,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sellout/ui",
3
- "version": "0.0.89",
3
+ "version": "0.0.91",
4
4
  "main": "build/index.js",
5
5
  "module": "build/index.es.js",
6
6
  "files": [
@@ -56,8 +56,8 @@
56
56
  "@hapi/joi": "^17.1.1",
57
57
  "@react-pdf/primitives": "^2.0.0-beta.11",
58
58
  "@react-pdf/renderer": "^2.0.0-beta.14",
59
- "@sellout/models": "^0.0.89",
60
- "@sellout/utils": "^0.0.89",
59
+ "@sellout/models": "^0.0.91",
60
+ "@sellout/utils": "^0.0.91",
61
61
  "@types/escape-html": "^1.0.0",
62
62
  "@types/hapi__joi": "^16.0.12",
63
63
  "@types/react-pdf": "^4.0.6",
@@ -70,7 +70,7 @@
70
70
  "rollup-plugin-url": "^3.0.1",
71
71
  "shortid": "^2.2.15"
72
72
  },
73
- "gitHead": "fdef7f54d0778a3b5ed2e255647054fbd3564e5d",
73
+ "gitHead": "04cf00ff38118fcf8727c38942f603cbc1f7c2ea",
74
74
  "peerDependencies": {
75
75
  "react": "^16.13.0",
76
76
  "react-dom": "^16.13.0",