@sellout/ui 0.0.17 → 0.0.20

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 (7) hide show
  1. package/build/components/Icon.d.ts +10 -4
  2. package/build/index.d.ts +8 -3
  3. package/build/index.es.js +32 -25
  4. package/build/index.js +32 -25
  5. package/package.json +3 -3
  6. package/src/assets/images/sellout-logo-long.svg +11 -0
  7. package/src/components/Icon.tsx +33 -16
package/build/components/Icon.d.ts CHANGED
@@ -3,12 +3,14 @@ import { Colors } from "../Colors";
3
3
  export declare const Icons: {
4
4
  AnalyticsLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
5
5
  BellLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
6
+ BoxOfficeLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
6
7
  BullHornLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
7
8
  CalendarDayLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
8
9
  CalendarStarLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
9
10
  ExportLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
10
11
  FilterLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
11
12
  HelpLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
13
+ HomeLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
12
14
  mapPinLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
13
15
  MicrophoneLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
14
16
  MinusCircleLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -22,14 +24,12 @@ export declare const Icons: {
22
24
  CalendarStarSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
23
25
  CreditCardFront: import("@fortawesome/fontawesome-common-types").IconDefinition;
24
26
  FeeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
25
- HomeLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
26
27
  KeySolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
27
28
  LongRightArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
28
29
  ReportSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
29
30
  SortBy: import("@fortawesome/fontawesome-common-types").IconDefinition;
30
31
  UpgradeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
31
32
  AudienceRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
32
- BoxOfficeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
33
33
  CalculatorRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
34
34
  Check: import("@fortawesome/fontawesome-common-types").IconDefinition;
35
35
  Cheers: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -50,12 +50,15 @@ export declare const Icons: {
50
50
  PrintRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
51
51
  ReportRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
52
52
  SearchRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
53
+ Settings: import("@fortawesome/fontawesome-common-types").IconDefinition;
53
54
  TicketRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
54
55
  Unlock: import("@fortawesome/fontawesome-common-types").IconDefinition;
55
56
  UpArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
57
+ Update: import("@fortawesome/fontawesome-common-types").IconDefinition;
56
58
  UpgradeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
57
59
  Upload: import("@fortawesome/fontawesome-common-types").IconDefinition;
58
60
  UsersRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
61
+ SignOut: import("@fortawesome/fontawesome-common-types").IconDefinition;
59
62
  AudienceSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
60
63
  BackArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
61
64
  Bold: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -78,8 +81,10 @@ export declare const Icons: {
78
81
  HelpSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
79
82
  HomeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
80
83
  Italic: import("@fortawesome/fontawesome-common-types").IconDefinition;
84
+ Menu: import("@fortawesome/fontawesome-common-types").IconDefinition;
81
85
  MicrophoneSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
82
86
  Mobile: import("@fortawesome/fontawesome-common-types").IconDefinition;
87
+ Plus: import("@fortawesome/fontawesome-common-types").IconDefinition;
83
88
  PlusCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
84
89
  PrintSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
85
90
  ReceiptSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -94,19 +99,20 @@ export declare const Icons: {
94
99
  UsersSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
95
100
  VenueSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
96
101
  Warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
97
- Menu: import("@fortawesome/fontawesome-common-types").IconDefinition;
98
102
  Calendar: import("@fortawesome/fontawesome-common-types").IconDefinition;
99
103
  Clock: import("@fortawesome/fontawesome-common-types").IconDefinition;
100
104
  CopyRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
101
105
  Edit: import("@fortawesome/fontawesome-common-types").IconDefinition;
102
106
  EyeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
103
107
  EyeSlashRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
108
+ Help: import("@fortawesome/fontawesome-common-types").IconDefinition;
104
109
  SadTear: import("@fortawesome/fontawesome-common-types").IconDefinition;
105
110
  UserRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
106
111
  };
107
112
  export declare type IconProps = {
108
113
  icon: any;
109
114
  color?: Colors | string | null;
115
+ hoverColor?: Colors | string | null;
110
116
  onClick?: any | null;
111
117
  size?: string | number | undefined;
112
118
  position?: string;
@@ -116,4 +122,4 @@ export declare type IconProps = {
116
122
  zIndex?: number | void;
117
123
  margin?: string | number | undefined;
118
124
  };
119
- export default function Icon({ icon, color, onClick, size, top, left, right, position, zIndex, margin, }: IconProps): JSX.Element;
125
+ export default function Icon({ icon, color, hoverColor, onClick, size, top, left, right, position, zIndex, margin, }: IconProps): JSX.Element;
package/build/index.d.ts CHANGED
@@ -9,12 +9,14 @@ import makeEventHandler from './utils/makeEventHandler';
9
9
  declare const Icons: {
10
10
  AnalyticsLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
11
11
  BellLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
12
+ BoxOfficeLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
12
13
  BullHornLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
13
14
  CalendarDayLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
14
15
  CalendarStarLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
15
16
  ExportLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
16
17
  FilterLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
17
18
  HelpLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
19
+ HomeLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
18
20
  mapPinLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
19
21
  MicrophoneLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
20
22
  MinusCircleLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -28,14 +30,12 @@ declare const Icons: {
28
30
  CalendarStarSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
29
31
  CreditCardFront: import("@fortawesome/fontawesome-common-types").IconDefinition;
30
32
  FeeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
31
- HomeLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
32
33
  KeySolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
33
34
  LongRightArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
34
35
  ReportSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
35
36
  SortBy: import("@fortawesome/fontawesome-common-types").IconDefinition;
36
37
  UpgradeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
37
38
  AudienceRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
38
- BoxOfficeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
39
39
  CalculatorRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
40
40
  Check: import("@fortawesome/fontawesome-common-types").IconDefinition;
41
41
  Cheers: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -56,12 +56,15 @@ declare const Icons: {
56
56
  PrintRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
57
57
  ReportRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
58
58
  SearchRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
59
+ Settings: import("@fortawesome/fontawesome-common-types").IconDefinition;
59
60
  TicketRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
60
61
  Unlock: import("@fortawesome/fontawesome-common-types").IconDefinition;
61
62
  UpArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
63
+ Update: import("@fortawesome/fontawesome-common-types").IconDefinition;
62
64
  UpgradeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
63
65
  Upload: import("@fortawesome/fontawesome-common-types").IconDefinition;
64
66
  UsersRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
67
+ SignOut: import("@fortawesome/fontawesome-common-types").IconDefinition;
65
68
  AudienceSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
66
69
  BackArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
67
70
  Bold: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -84,8 +87,10 @@ declare const Icons: {
84
87
  HelpSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
85
88
  HomeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
86
89
  Italic: import("@fortawesome/fontawesome-common-types").IconDefinition;
90
+ Menu: import("@fortawesome/fontawesome-common-types").IconDefinition;
87
91
  MicrophoneSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
88
92
  Mobile: import("@fortawesome/fontawesome-common-types").IconDefinition;
93
+ Plus: import("@fortawesome/fontawesome-common-types").IconDefinition;
89
94
  PlusCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
90
95
  PrintSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
91
96
  ReceiptSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -100,13 +105,13 @@ declare const Icons: {
100
105
  UsersSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
101
106
  VenueSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
102
107
  Warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
103
- Menu: import("@fortawesome/fontawesome-common-types").IconDefinition;
104
108
  Calendar: import("@fortawesome/fontawesome-common-types").IconDefinition;
105
109
  Clock: import("@fortawesome/fontawesome-common-types").IconDefinition;
106
110
  CopyRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
107
111
  Edit: import("@fortawesome/fontawesome-common-types").IconDefinition;
108
112
  EyeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
109
113
  EyeSlashRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
114
+ Help: import("@fortawesome/fontawesome-common-types").IconDefinition;
110
115
  SadTear: import("@fortawesome/fontawesome-common-types").IconDefinition;
111
116
  UserRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
112
117
  };
package/build/index.es.js CHANGED
@@ -191,23 +191,30 @@ var IconEnum = {
191
191
  UserRegular: faUser$1,
192
192
  };
193
193
 
194
+ var Container = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n color: ", ";\n /* transition: all 0.2s; */\n\n &:hover {\n color: ", ";\n }\n"], ["\n color: ", ";\n /* transition: all 0.2s; */\n\n &:hover {\n color: ",
195
+ ";\n }\n"])), function (props) { return props.color; }, function (props) {
196
+ if (props.color === 'inherit')
197
+ return null;
198
+ return props.hoverColor;
199
+ });
194
200
  var Icons = IconEnum;
195
201
  function Icon(_a) {
196
- var _b = _a.icon, icon = _b === void 0 ? Icons.AudienceRegular : _b, _c = _a.color, color = _c === void 0 ? Colors.Orange : _c, onClick = _a.onClick, _d = _a.size, size = _d === void 0 ? 20 : _d, top = _a.top, left = _a.left, right = _a.right, _e = _a.position, position = _e === void 0 ? 'relative' : _e, zIndex = _a.zIndex, margin = _a.margin;
202
+ var _b = _a.icon, icon = _b === void 0 ? Icons.AudienceRegular : _b, _c = _a.color, color = _c === void 0 ? Colors.Orange : _c, _d = _a.hoverColor, hoverColor = _d === void 0 ? null : _d, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? 20 : _e, top = _a.top, left = _a.left, right = _a.right, _f = _a.position, position = _f === void 0 ? 'relative' : _f, zIndex = _a.zIndex, margin = _a.margin;
197
203
  var cursor = onClick ? 'pointer' : '';
198
- return (React.createElement(FontAwesomeIcon, { icon: icon, onClick: onClick, style: {
199
- color: color,
200
- top: top,
201
- left: left,
202
- right: right,
203
- position: position,
204
- zIndex: zIndex,
205
- fontSize: size,
206
- transition: "all 0.2s",
207
- margin: margin,
208
- cursor: cursor,
209
- } }));
210
- }
204
+ return (React.createElement(Container, { color: color, hoverColor: hoverColor },
205
+ React.createElement(FontAwesomeIcon, { icon: icon, onClick: onClick, style: {
206
+ top: top,
207
+ left: left,
208
+ right: right,
209
+ position: position,
210
+ zIndex: zIndex,
211
+ fontSize: size,
212
+ transition: "all 0.2s",
213
+ margin: margin,
214
+ cursor: cursor,
215
+ } })));
216
+ }
217
+ var templateObject_1$1;
211
218
 
212
219
  var ButtonTypes;
213
220
  (function (ButtonTypes) {
@@ -217,7 +224,7 @@ var ButtonStates;
217
224
  (function (ButtonStates) {
218
225
  ButtonStates["Active"] = "Active";
219
226
  })(ButtonStates || (ButtonStates = {}));
220
- var StyledButton = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n position: relative;\n height: 40px;\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n overflow: hidden;\n justify-content: center;\n white-space: nowrap;\n text-align: center;\n border-radius: 10px;\n transition: all 0.2s;\n margin: ", ";\n padding: ", ";\n background-color: ", ";\n\n &:hover {\n cursor: ", ";\n background-color: ", ";\n }\n\n &:active {\n cursor: ", ";\n background-color: ", ";\n }\n"], ["\n position: relative;\n height: 40px;\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n overflow: hidden;\n justify-content: center;\n white-space: nowrap;\n text-align: center;\n border-radius: 10px;\n transition: all 0.2s;\n margin: ", ";\n padding: ", ";\n background-color: ",
227
+ var StyledButton = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n position: relative;\n height: 40px;\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n overflow: hidden;\n justify-content: center;\n white-space: nowrap;\n text-align: center;\n border-radius: 10px;\n transition: all 0.2s;\n margin: ", ";\n padding: ", ";\n background-color: ", ";\n\n &:hover {\n cursor: ", ";\n background-color: ", ";\n }\n\n &:active {\n cursor: ", ";\n background-color: ", ";\n }\n"], ["\n position: relative;\n height: 40px;\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n overflow: hidden;\n justify-content: center;\n white-space: nowrap;\n text-align: center;\n border-radius: 10px;\n transition: all 0.2s;\n margin: ", ";\n padding: ", ";\n background-color: ",
221
228
  ";\n\n &:hover {\n cursor: ", ";\n background-color: ",
222
229
  ";\n }\n\n &:active {\n cursor: ", ";\n background-color: ",
223
230
  ";\n }\n"])), function (props) { return (Boolean(props.margin) ? props.margin : "0px"); }, function (props) { return (Boolean(props.padding) ? props.padding : "0px"); }, function (props) {
@@ -256,9 +263,9 @@ function Button(_a) {
256
263
  })()));
257
264
  })()));
258
265
  }
259
- var templateObject_1$1, templateObject_2;
266
+ var templateObject_1$2, templateObject_2;
260
267
 
261
- var Container = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 85px;\n min-height: 42px;\n /* background-color: red; */\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 85px;\n min-height: 42px;\n /* background-color: red; */\n"])));
268
+ var Container$1 = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 85px;\n min-height: 42px;\n /* background-color: red; */\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 85px;\n min-height: 42px;\n /* background-color: red; */\n"])));
262
269
  var IconContainer = styled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n flex: 1;\n /* background-color: blue; */\n height: 100%;\n\n &:hover {\n cursor: ", ";\n }\n\n .svg-inline--fa {\n color: ", " !important;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n flex: 1;\n /* background-color: blue; */\n height: 100%;\n\n &:hover {\n cursor: ", ";\n }\n\n .svg-inline--fa {\n color: ",
263
270
  " !important;\n }\n"])), function (props) { return props.justify; }, function (props) { return (props.active ? "pointer" : null); }, function (props) {
264
271
  return props.active ? lighten(0.025, Colors.Orange) : null;
@@ -268,16 +275,16 @@ function Counter(_a) {
268
275
  var value = _a.value, maxValue = _a.maxValue, _b = _a.minValue, minValue = _b === void 0 ? 0 : _b, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement;
269
276
  var canDecrement = value > minValue;
270
277
  var canIncrement = Boolean(!Boolean(maxValue) || (maxValue && value < maxValue));
271
- return (React.createElement(Container, null,
278
+ return (React.createElement(Container$1, null,
272
279
  React.createElement(IconContainer, { active: canDecrement, onClick: function () { return (canDecrement ? onDecrement() : null); }, justify: "flex-start" },
273
280
  React.createElement(Icon, { icon: Icons.MinusCircleLight, color: canDecrement ? Colors.Orange : Colors.Grey5 })),
274
281
  React.createElement(Value, null, value),
275
282
  React.createElement(IconContainer, { active: canIncrement, onClick: function () { return (canIncrement ? onIncrement() : null); }, justify: "flex-end" },
276
283
  React.createElement(Icon, { icon: Icons.PlusCircleLight, color: canIncrement ? Colors.Orange : Colors.Grey5 }))));
277
284
  }
278
- var templateObject_1$2, templateObject_2$1, templateObject_3;
285
+ var templateObject_1$3, templateObject_2$1, templateObject_3;
279
286
 
280
- var Form = styled.form(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ", ";\n"], ["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ",
287
+ var Form = styled.form(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ", ";\n"], ["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ",
281
288
  ";\n"])), function (props) { return props.width; }, function (props) {
282
289
  if (props.focused)
283
290
  return Colors.Grey3;
@@ -349,11 +356,11 @@ function Input(_a) {
349
356
  return React.createElement(Spacer, null);
350
357
  })()));
351
358
  }
352
- var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6;
359
+ var templateObject_1$4, templateObject_2$2, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6;
353
360
 
354
- var Row = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n"])), function (props) { return props.justify; });
361
+ var Row = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n"])), function (props) { return props.justify; });
355
362
  var Column = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
356
- var Container$1 = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n background-color: ", ";\n padding: 15px;\n border-bottom: 1px solid ", ";\n"], ["\n background-color: ", ";\n padding: 15px;\n border-bottom: 1px solid ", ";\n"])), Colors.White, Colors.Grey6);
363
+ var Container$2 = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n background-color: ", ";\n padding: 15px;\n border-bottom: 1px solid ", ";\n"], ["\n background-color: ", ";\n padding: 15px;\n border-bottom: 1px solid ", ";\n"])), Colors.White, Colors.Grey6);
357
364
  var Title = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n font-size: 1.8rem;\n color: ", ";\n font-weight: 600;\n margin-bottom: 5px;\n"], ["\n font-size: 1.8rem;\n color: ", ";\n font-weight: 600;\n margin-bottom: 5px;\n"])), Colors.Grey1);
358
365
  var Price = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n font-size: 1.4rem;\n font-weight: 500;\n color: ", ";\n margin-bottom: 5px;\n"], ["\n font-size: 1.4rem;\n font-weight: 500;\n color: ", ";\n margin-bottom: 5px;\n"])), Colors.Grey2);
359
366
  var Subtitle = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n font-size: 1.2rem;\n font-weight: 500;\n line-height: 160%;\n color: ", ";\n"], ["\n font-size: 1.2rem;\n font-weight: 500;\n line-height: 160%;\n color: ", ";\n"])), Colors.Grey3);
@@ -374,7 +381,7 @@ function Product(_a) {
374
381
  setShowEllipsis(!showEllipsis);
375
382
  setShowMore(!showMore);
376
383
  };
377
- return (React.createElement(Container$1, null,
384
+ return (React.createElement(Container$2, null,
378
385
  React.createElement(Row, { justify: "space-between" },
379
386
  React.createElement(Column, null,
380
387
  React.createElement(Title, null, title),
@@ -393,7 +400,7 @@ function Product(_a) {
393
400
  React.createElement(ShowMore, { onClick: function () { return toggle(); } }, showMore ? "Show Less" : "Show More")));
394
401
  })()));
395
402
  }
396
- var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
403
+ var templateObject_1$5, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
397
404
 
398
405
  function makeEventHandler(executeOnEvent) {
399
406
  if (executeOnEvent === void 0) { executeOnEvent = function () { }; }
package/build/index.js CHANGED
@@ -196,23 +196,30 @@ var IconEnum = {
196
196
  UserRegular: freeRegularSvgIcons.faUser,
197
197
  };
198
198
 
199
+ var Container = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n color: ", ";\n /* transition: all 0.2s; */\n\n &:hover {\n color: ", ";\n }\n"], ["\n color: ", ";\n /* transition: all 0.2s; */\n\n &:hover {\n color: ",
200
+ ";\n }\n"])), function (props) { return props.color; }, function (props) {
201
+ if (props.color === 'inherit')
202
+ return null;
203
+ return props.hoverColor;
204
+ });
199
205
  var Icons = IconEnum;
200
206
  function Icon(_a) {
201
- var _b = _a.icon, icon = _b === void 0 ? Icons.AudienceRegular : _b, _c = _a.color, color = _c === void 0 ? exports.Colors.Orange : _c, onClick = _a.onClick, _d = _a.size, size = _d === void 0 ? 20 : _d, top = _a.top, left = _a.left, right = _a.right, _e = _a.position, position = _e === void 0 ? 'relative' : _e, zIndex = _a.zIndex, margin = _a.margin;
207
+ var _b = _a.icon, icon = _b === void 0 ? Icons.AudienceRegular : _b, _c = _a.color, color = _c === void 0 ? exports.Colors.Orange : _c, _d = _a.hoverColor, hoverColor = _d === void 0 ? null : _d, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? 20 : _e, top = _a.top, left = _a.left, right = _a.right, _f = _a.position, position = _f === void 0 ? 'relative' : _f, zIndex = _a.zIndex, margin = _a.margin;
202
208
  var cursor = onClick ? 'pointer' : '';
203
- return (React__default.createElement(reactFontawesome.FontAwesomeIcon, { icon: icon, onClick: onClick, style: {
204
- color: color,
205
- top: top,
206
- left: left,
207
- right: right,
208
- position: position,
209
- zIndex: zIndex,
210
- fontSize: size,
211
- transition: "all 0.2s",
212
- margin: margin,
213
- cursor: cursor,
214
- } }));
215
- }
209
+ return (React__default.createElement(Container, { color: color, hoverColor: hoverColor },
210
+ React__default.createElement(reactFontawesome.FontAwesomeIcon, { icon: icon, onClick: onClick, style: {
211
+ top: top,
212
+ left: left,
213
+ right: right,
214
+ position: position,
215
+ zIndex: zIndex,
216
+ fontSize: size,
217
+ transition: "all 0.2s",
218
+ margin: margin,
219
+ cursor: cursor,
220
+ } })));
221
+ }
222
+ var templateObject_1$1;
216
223
 
217
224
  (function (ButtonTypes) {
218
225
  ButtonTypes["Submit"] = "Submit";
@@ -220,7 +227,7 @@ function Icon(_a) {
220
227
  (function (ButtonStates) {
221
228
  ButtonStates["Active"] = "Active";
222
229
  })(exports.ButtonStates || (exports.ButtonStates = {}));
223
- var StyledButton = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n position: relative;\n height: 40px;\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n overflow: hidden;\n justify-content: center;\n white-space: nowrap;\n text-align: center;\n border-radius: 10px;\n transition: all 0.2s;\n margin: ", ";\n padding: ", ";\n background-color: ", ";\n\n &:hover {\n cursor: ", ";\n background-color: ", ";\n }\n\n &:active {\n cursor: ", ";\n background-color: ", ";\n }\n"], ["\n position: relative;\n height: 40px;\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n overflow: hidden;\n justify-content: center;\n white-space: nowrap;\n text-align: center;\n border-radius: 10px;\n transition: all 0.2s;\n margin: ", ";\n padding: ", ";\n background-color: ",
230
+ var StyledButton = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n position: relative;\n height: 40px;\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n overflow: hidden;\n justify-content: center;\n white-space: nowrap;\n text-align: center;\n border-radius: 10px;\n transition: all 0.2s;\n margin: ", ";\n padding: ", ";\n background-color: ", ";\n\n &:hover {\n cursor: ", ";\n background-color: ", ";\n }\n\n &:active {\n cursor: ", ";\n background-color: ", ";\n }\n"], ["\n position: relative;\n height: 40px;\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n overflow: hidden;\n justify-content: center;\n white-space: nowrap;\n text-align: center;\n border-radius: 10px;\n transition: all 0.2s;\n margin: ", ";\n padding: ", ";\n background-color: ",
224
231
  ";\n\n &:hover {\n cursor: ", ";\n background-color: ",
225
232
  ";\n }\n\n &:active {\n cursor: ", ";\n background-color: ",
226
233
  ";\n }\n"])), function (props) { return (Boolean(props.margin) ? props.margin : "0px"); }, function (props) { return (Boolean(props.padding) ? props.padding : "0px"); }, function (props) {
@@ -259,9 +266,9 @@ function Button(_a) {
259
266
  })()));
260
267
  })()));
261
268
  }
262
- var templateObject_1$1, templateObject_2;
269
+ var templateObject_1$2, templateObject_2;
263
270
 
264
- var Container = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 85px;\n min-height: 42px;\n /* background-color: red; */\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 85px;\n min-height: 42px;\n /* background-color: red; */\n"])));
271
+ var Container$1 = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 85px;\n min-height: 42px;\n /* background-color: red; */\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 85px;\n min-height: 42px;\n /* background-color: red; */\n"])));
265
272
  var IconContainer = styled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n flex: 1;\n /* background-color: blue; */\n height: 100%;\n\n &:hover {\n cursor: ", ";\n }\n\n .svg-inline--fa {\n color: ", " !important;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n flex: 1;\n /* background-color: blue; */\n height: 100%;\n\n &:hover {\n cursor: ", ";\n }\n\n .svg-inline--fa {\n color: ",
266
273
  " !important;\n }\n"])), function (props) { return props.justify; }, function (props) { return (props.active ? "pointer" : null); }, function (props) {
267
274
  return props.active ? Polished.lighten(0.025, exports.Colors.Orange) : null;
@@ -271,16 +278,16 @@ function Counter(_a) {
271
278
  var value = _a.value, maxValue = _a.maxValue, _b = _a.minValue, minValue = _b === void 0 ? 0 : _b, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement;
272
279
  var canDecrement = value > minValue;
273
280
  var canIncrement = Boolean(!Boolean(maxValue) || (maxValue && value < maxValue));
274
- return (React__default.createElement(Container, null,
281
+ return (React__default.createElement(Container$1, null,
275
282
  React__default.createElement(IconContainer, { active: canDecrement, onClick: function () { return (canDecrement ? onDecrement() : null); }, justify: "flex-start" },
276
283
  React__default.createElement(Icon, { icon: Icons.MinusCircleLight, color: canDecrement ? exports.Colors.Orange : exports.Colors.Grey5 })),
277
284
  React__default.createElement(Value, null, value),
278
285
  React__default.createElement(IconContainer, { active: canIncrement, onClick: function () { return (canIncrement ? onIncrement() : null); }, justify: "flex-end" },
279
286
  React__default.createElement(Icon, { icon: Icons.PlusCircleLight, color: canIncrement ? exports.Colors.Orange : exports.Colors.Grey5 }))));
280
287
  }
281
- var templateObject_1$2, templateObject_2$1, templateObject_3;
288
+ var templateObject_1$3, templateObject_2$1, templateObject_3;
282
289
 
283
- var Form = styled.form(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ", ";\n"], ["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ",
290
+ var Form = styled.form(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ", ";\n"], ["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ",
284
291
  ";\n"])), function (props) { return props.width; }, function (props) {
285
292
  if (props.focused)
286
293
  return exports.Colors.Grey3;
@@ -352,11 +359,11 @@ function Input(_a) {
352
359
  return React__default.createElement(Spacer, null);
353
360
  })()));
354
361
  }
355
- var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6;
362
+ var templateObject_1$4, templateObject_2$2, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6;
356
363
 
357
- var Row = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n"])), function (props) { return props.justify; });
364
+ var Row = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n"])), function (props) { return props.justify; });
358
365
  var Column = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
359
- var Container$1 = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n background-color: ", ";\n padding: 15px;\n border-bottom: 1px solid ", ";\n"], ["\n background-color: ", ";\n padding: 15px;\n border-bottom: 1px solid ", ";\n"])), exports.Colors.White, exports.Colors.Grey6);
366
+ var Container$2 = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n background-color: ", ";\n padding: 15px;\n border-bottom: 1px solid ", ";\n"], ["\n background-color: ", ";\n padding: 15px;\n border-bottom: 1px solid ", ";\n"])), exports.Colors.White, exports.Colors.Grey6);
360
367
  var Title = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n font-size: 1.8rem;\n color: ", ";\n font-weight: 600;\n margin-bottom: 5px;\n"], ["\n font-size: 1.8rem;\n color: ", ";\n font-weight: 600;\n margin-bottom: 5px;\n"])), exports.Colors.Grey1);
361
368
  var Price = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n font-size: 1.4rem;\n font-weight: 500;\n color: ", ";\n margin-bottom: 5px;\n"], ["\n font-size: 1.4rem;\n font-weight: 500;\n color: ", ";\n margin-bottom: 5px;\n"])), exports.Colors.Grey2);
362
369
  var Subtitle = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n font-size: 1.2rem;\n font-weight: 500;\n line-height: 160%;\n color: ", ";\n"], ["\n font-size: 1.2rem;\n font-weight: 500;\n line-height: 160%;\n color: ", ";\n"])), exports.Colors.Grey3);
@@ -377,7 +384,7 @@ function Product(_a) {
377
384
  setShowEllipsis(!showEllipsis);
378
385
  setShowMore(!showMore);
379
386
  };
380
- return (React__default.createElement(Container$1, null,
387
+ return (React__default.createElement(Container$2, null,
381
388
  React__default.createElement(Row, { justify: "space-between" },
382
389
  React__default.createElement(Column, null,
383
390
  React__default.createElement(Title, null, title),
@@ -396,7 +403,7 @@ function Product(_a) {
396
403
  React__default.createElement(ShowMore, { onClick: function () { return toggle(); } }, showMore ? "Show Less" : "Show More")));
397
404
  })()));
398
405
  }
399
- var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
406
+ var templateObject_1$5, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
400
407
 
401
408
  function makeEventHandler(executeOnEvent) {
402
409
  if (executeOnEvent === void 0) { executeOnEvent = function () { }; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sellout/ui",
3
- "version": "0.0.17",
3
+ "version": "0.0.20",
4
4
  "main": "build/index.js",
5
5
  "module": "build/index.es.js",
6
6
  "jsnext:main": "build/index.es.js",
@@ -46,12 +46,12 @@
46
46
  "@fortawesome/pro-regular-svg-icons": "^5.12.1",
47
47
  "@fortawesome/pro-solid-svg-icons": "^5.12.1",
48
48
  "@fortawesome/react-fontawesome": "^0.1.9",
49
- "@sellout/utils": "^0.0.17",
49
+ "@sellout/utils": "^0.0.20",
50
50
  "csvtojson": "^2.0.10",
51
51
  "polished": "^3.4.4",
52
52
  "react-animate-height": "^2.0.20"
53
53
  },
54
- "gitHead": "e6d1038133a82fcc73d5506b78a92e8409d879a1",
54
+ "gitHead": "50a5423ac8f4c2e1f2be7c4e851e5b75a317a193",
55
55
  "peerDependencies": {
56
56
  "react": "^16.13.0",
57
57
  "react-dom": "^16.13.0",
package/src/assets/images/sellout-logo-long.svg ADDED
@@ -0,0 +1,11 @@
1
+ <svg width="104" height="32" viewBox="0 0 104 32" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M35.4545 23.384C38.6731 23.384 41.051 21.992 41.051 19.304C41.051 16.16 38.505 15.608 36.3432 15.248C34.782 14.96 33.3889 14.84 33.3889 13.976C33.3889 13.208 34.1335 12.848 35.0942 12.848C36.1751 12.848 36.9197 13.184 37.0638 14.288H40.6667C40.4745 11.864 38.601 10.352 35.1183 10.352C32.2119 10.352 29.81 11.696 29.81 14.288C29.81 17.168 32.0918 17.744 34.2296 18.104C35.8629 18.392 37.352 18.512 37.352 19.616C37.352 20.408 36.6075 20.84 35.4305 20.84C34.1335 20.84 33.3168 20.24 33.1727 19.016H29.4738C29.5939 21.728 31.8517 23.384 35.4545 23.384Z" fill="black"/>
3
+ <path d="M48.4438 23.36C50.0051 23.36 51.2541 22.952 52.2869 22.232C53.3678 21.488 54.0884 20.432 54.3526 19.328H50.5335C50.1972 20.096 49.5247 20.552 48.4919 20.552C46.8826 20.552 45.9699 19.52 45.7297 17.864H54.5687C54.5928 15.368 53.8722 13.232 52.407 11.888C51.3502 10.928 49.9571 10.352 48.2037 10.352C44.4567 10.352 41.8866 13.16 41.8866 16.832C41.8866 20.552 44.3846 23.36 48.4438 23.36ZM45.7537 15.536C46.0179 14.072 46.7865 13.136 48.2757 13.136C49.5487 13.136 50.4615 14.072 50.6056 15.536H45.7537Z" fill="black"/>
4
+ <path d="M55.9035 23H59.8667V5.83997H55.9035V23Z" fill="black"/>
5
+ <path d="M61.791 23H65.7542V5.83997H61.791V23Z" fill="black"/>
6
+ <path d="M73.6593 20.6C71.9539 20.6 71.0652 19.112 71.0652 16.88C71.0652 14.648 71.9539 13.136 73.6593 13.136C75.3647 13.136 76.2774 14.648 76.2774 16.88C76.2774 19.112 75.3647 20.6 73.6593 20.6ZM73.6833 23.384C77.6465 23.384 80.2406 20.576 80.2406 16.88C80.2406 13.184 77.6465 10.376 73.6833 10.376C69.7442 10.376 67.1021 13.184 67.1021 16.88C67.1021 20.576 69.7442 23.384 73.6833 23.384Z" fill="black"/>
7
+ <path d="M85.7914 23.36C87.4968 23.36 88.5777 22.688 89.4664 21.488H89.5384V23H93.2854V10.712H89.3703V17.576C89.3703 19.04 88.5536 20.048 87.2086 20.048C85.9596 20.048 85.3591 19.304 85.3591 17.96V10.712H81.468V18.776C81.468 21.512 82.9572 23.36 85.7914 23.36Z" fill="black"/>
8
+ <path d="M100.045 23.144C101.101 23.144 101.846 23.048 102.182 22.952V20.096C102.038 20.096 101.654 20.12 101.318 20.12C100.477 20.12 99.9485 19.88 99.9485 18.92V13.16H102.182V10.712H99.9485V6.82397H96.1294V10.712H94.4961V13.16H96.1294V19.76C96.1294 22.4 97.7627 23.144 100.045 23.144Z" fill="black"/>
9
+ <path d="M6.75255 1.41177C3.81736 1.41177 1.41146 3.82962 1.41146 6.81542C1.41146 7.38337 1.49166 7.91886 1.65205 8.43814C2.88708 7.01014 4.71556 6.10142 6.73651 6.10142H12.0776V1.42799H6.75255V1.41177ZM1.66809 11.3103C1.5077 11.8296 1.4275 12.3651 1.4275 12.9331C1.4275 15.9026 3.81736 18.3367 6.76859 18.3367H12.1097V13.6633H6.75255C4.7316 13.6471 2.90312 12.7383 1.66809 11.3103ZM12.1097 19.7647H6.75255C3.03143 19.7647 0 16.6978 0 12.9331C0 11.8296 0.256629 10.7911 0.721769 9.88235C0.256629 8.9574 0 7.91887 0 6.83165C0 3.06694 3.03143 0 6.75255 0H13.5051V7.56187H6.75255C4.94011 7.56187 3.32014 8.48682 2.35778 9.89858C3.32014 11.3103 4.92407 12.2353 6.75255 12.2353H12.1097V19.7647Z" fill="black"/>
10
+ <path d="M13.2634 30.5882C16.1986 30.5882 18.6045 28.1704 18.6045 25.1846C18.6045 24.6166 18.5243 24.0811 18.3639 23.5619C17.1289 24.9899 15.3004 25.8986 13.2795 25.8986H7.93838V30.572H13.2634V30.5882ZM18.3479 20.6897C18.5083 20.1704 18.5885 19.6349 18.5885 19.0669C18.5885 16.0974 16.1986 13.6633 13.2474 13.6633L7.9063 13.6633C7.9063 15.4884 7.9063 16.5116 7.9063 18.3367H13.2634C15.2844 18.3529 17.1129 19.2617 18.3479 20.6897ZM7.9063 12.2353H13.2634C16.9846 12.2353 20.016 15.3022 20.016 19.0669C20.016 20.1704 19.7594 21.2089 19.2942 22.1176C19.7594 23.0426 20.016 24.0811 20.016 25.1684C20.016 28.9331 16.9846 32 13.2634 32L6.51088 32L6.51088 24.4381L13.2634 24.4381C15.0759 24.4381 16.6958 23.5132 17.6582 22.1014C16.6958 20.6897 15.0919 19.7647 13.2634 19.7647H7.9063V12.2353Z" fill="black"/>
11
+ </svg>
package/src/components/Icon.tsx CHANGED
@@ -2,12 +2,27 @@ import React from 'react';
2
2
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3
3
  import { Colors } from "../Colors";
4
4
  import { IconEnum } from "./Icons";
5
+ import styled from 'styled-components';
6
+
7
+
8
+ const Container = styled.div<any>`
9
+ color: ${props => props.color};
10
+ /* transition: all 0.2s; */
11
+
12
+ &:hover {
13
+ color: ${props => {
14
+ if(props.color === 'inherit') return null;
15
+ return props.hoverColor;
16
+ }};
17
+ }
18
+ `;
5
19
 
6
20
  export const Icons = IconEnum;
7
21
 
8
22
  export type IconProps = {
9
23
  icon: any;
10
24
  color?: Colors | string | null;
25
+ hoverColor?: Colors | string | null;
11
26
  onClick?: any | null;
12
27
  size?: string | number | undefined;
13
28
  position?: string;
@@ -21,6 +36,7 @@ export type IconProps = {
21
36
  export default function Icon({
22
37
  icon = Icons.AudienceRegular,
23
38
  color = Colors.Orange,
39
+ hoverColor = null,
24
40
  onClick,
25
41
  size = 20,
26
42
  top,
@@ -33,21 +49,22 @@ export default function Icon({
33
49
  const cursor: string = onClick ? 'pointer' : '';
34
50
 
35
51
  return (
36
- <FontAwesomeIcon
37
- icon={icon as any}
38
- onClick={onClick}
39
- style={{
40
- color: color as any,
41
- top,
42
- left,
43
- right,
44
- position: position as any,
45
- zIndex: zIndex as any,
46
- fontSize: size,
47
- transition: "all 0.2s",
48
- margin,
49
- cursor,
50
- }}
51
- />
52
+ <Container color={color} hoverColor={hoverColor}>
53
+ <FontAwesomeIcon
54
+ icon={icon as any}
55
+ onClick={onClick}
56
+ style={{
57
+ top,
58
+ left,
59
+ right,
60
+ position: position as any,
61
+ zIndex: zIndex as any,
62
+ fontSize: size,
63
+ transition: "all 0.2s",
64
+ margin,
65
+ cursor,
66
+ }}
67
+ />
68
+ </Container>
52
69
  );
53
70
  }