@sellout/ui 0.0.9 → 0.0.12

package/build/Colors.d.ts

@@ -3,7 +3,9 @@ export declare enum Colors {
     Black = "#000000",
     Green = "#419D78",
     OffWhite = "#FCFCFC",
-    Blue = "#020151",
+    LightBlue = "#39159C",
+    Blue = "#2D0E84",
+    DarkBlue = "#1D0858",
     Red = "#E63946",
     Orange = "#FF700F",
     DarkOrange = "#D65600",

package/build/components/Button.d.ts

@@ -6,11 +6,11 @@ export declare enum ButtonStates {
     Active = "Active"
 }
 export declare type ButtonProps = {
-    type: string;
+    type?: string;
     state?: string;
-    text: string;
+    text?: string;
     onClick?: any;
-    icon?: string;
+    icon?: any;
     margin?: string;
     padding?: string;
     loading?: boolean;

package/build/components/Icon.d.ts

@@ -104,5 +104,6 @@ export declare type IconProps = {
     left?: string | number | undefined;
     right?: string | number | undefined;
     zIndex?: number | void;
+    margin?: string | number | undefined;
 };
-export default function Icon({ icon, color, onClick, size, top, left, right, position, zIndex, }: IconProps): JSX.Element;
+export default function Icon({ icon, color, onClick, size, top, left, right, position, zIndex, margin, }: IconProps): JSX.Element;

package/build/index.es.js

@@ -16,7 +16,9 @@ var Colors;
     Colors["Black"] = "#000000";
     Colors["Green"] = "#419D78";
     Colors["OffWhite"] = "#FCFCFC";
-    Colors["Blue"] = "#020151";
+    Colors["LightBlue"] = "#39159C";
+    Colors["Blue"] = "#2D0E84";
+    Colors["DarkBlue"] = "#1D0858";
     Colors["Red"] = "#E63946";
     Colors["Orange"] = "#FF700F";
     Colors["DarkOrange"] = "#D65600";
@@ -75,54 +77,6 @@ function Loader(_a) {
 }
 var templateObject_1;
 
-// import Icon from "./Icon";
-var ButtonTypes;
-(function (ButtonTypes) {
-    ButtonTypes["Submit"] = "Submit";
-})(ButtonTypes || (ButtonTypes = {}));
-var ButtonStates;
-(function (ButtonStates) {
-    ButtonStates["Active"] = "Active";
-})(ButtonStates || (ButtonStates = {}));
-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  justify-content: center;\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  justify-content: center;\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"])), function (props) { return (Boolean(props.margin) ? props.margin : "0px"); }, function (props) { return (Boolean(props.padding) ? props.padding : "0px"); }, function (props) {
-    if (props.type === ButtonTypes.Submit) {
-        return Colors.Orange;
-    }
-    return null;
-}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
-    if (props.onClick && props.type === ButtonTypes.Submit) {
-        return lighten(0.025, Colors.Orange);
-    }
-    return null;
-}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
-    if (props.onClick && props.type === ButtonTypes.Submit) {
-        return darken(0.025, Colors.Orange);
-    }
-    return null;
-});
-var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 1.4rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  margin-left: ", ";\n  color: ", ";\n"], ["\n  font-size: 1.4rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  margin-left: ", ";\n  color: ",
-    ";\n"])), function (props) { return (props.icon ? "10px" : 0); }, function (props) {
-    if (props.type === ButtonTypes.Submit) {
-        return Colors.White;
-    }
-    return null;
-});
-function Button(_a) {
-    var _b = _a.type, type = _b === void 0 ? ButtonTypes.Submit : _b, _c = _a.state, state = _c === void 0 ? ButtonStates.Active : _c, text = _a.text, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, icon = _a.icon, margin = _a.margin, padding = _a.padding, _e = _a.loading, loading = _e === void 0 ? false : _e;
-    return (React.createElement(StyledButton, { type: type, onClick: loading ? null : function () { return onClick(); }, margin: margin, padding: padding, state: state }, (function () {
-        return (React.createElement(Fragment, null, (function () {
-            if (loading) {
-                return React.createElement(Loader, { size: LoaderSizes.VerySmall });
-            }
-            return (React.createElement(Text, { type: type, icon: Boolean(icon) }, text));
-        })()));
-    })()));
-}
-var templateObject_1$1, templateObject_2;
-
 // import { library } from "@fortawesome/fontawesome-svg-core";
 var IconEnum = {
     AudienceRegular: faUserFriends,
@@ -221,7 +175,8 @@ var IconEnum = {
 
 var Icons = IconEnum;
 function Icon(_a) {
-    var _b = _a.icon, icon = _b === void 0 ? Icons.AudienceRegular : _b, _c = _a.color, color = _c === void 0 ? Colors.Orange : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _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;
+    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;
+    var cursor = onClick ? 'pointer' : '';
     return (React.createElement(FontAwesomeIcon, { icon: icon, onClick: onClick, style: {
             color: color,
             top: top,
@@ -230,10 +185,61 @@ function Icon(_a) {
             position: position,
             zIndex: zIndex,
             fontSize: size,
-            transition: "all 0.2s"
+            transition: "all 0.2s",
+            margin: margin,
+            cursor: cursor,
         } }));
 }
 
+var ButtonTypes;
+(function (ButtonTypes) {
+    ButtonTypes["Submit"] = "Submit";
+})(ButtonTypes || (ButtonTypes = {}));
+var ButtonStates;
+(function (ButtonStates) {
+    ButtonStates["Active"] = "Active";
+})(ButtonStates || (ButtonStates = {}));
+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: ",
+    ";\n\n  &:hover {\n    cursor: ", ";\n    background-color: ",
+    ";\n  }\n\n  &:active {\n    cursor: ", ";\n    background-color: ",
+    ";\n  }\n"])), function (props) { return (Boolean(props.margin) ? props.margin : "0px"); }, function (props) { return (Boolean(props.padding) ? props.padding : "0px"); }, function (props) {
+    if (props.type === ButtonTypes.Submit) {
+        return Colors.Orange;
+    }
+    return null;
+}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
+    if (props.onClick && props.type === ButtonTypes.Submit) {
+        return lighten(0.025, Colors.Orange);
+    }
+    return null;
+}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
+    if (props.onClick && props.type === ButtonTypes.Submit) {
+        return darken(0.025, Colors.Orange);
+    }
+    return null;
+});
+var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 1.4rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  margin-left: ", ";\n  color: ", ";\n"], ["\n  font-size: 1.4rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  margin-left: ", ";\n  color: ",
+    ";\n"])), function (props) { return (props.icon ? "10px" : 0); }, function (props) {
+    if (props.type === ButtonTypes.Submit) {
+        return Colors.White;
+    }
+    return null;
+});
+function Button(_a) {
+    var _b = _a.type, type = _b === void 0 ? ButtonTypes.Submit : _b, _c = _a.state, state = _c === void 0 ? ButtonStates.Active : _c, text = _a.text, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, icon = _a.icon, margin = _a.margin, padding = _a.padding, _e = _a.loading, loading = _e === void 0 ? false : _e;
+    return (React.createElement(StyledButton, { type: type, onClick: loading ? null : function () { return onClick(); }, margin: margin, padding: padding, state: state }, (function () {
+        return (React.createElement(Fragment, null,
+            icon && (React.createElement(Icon, { icon: icon, color: Colors.White })),
+            (function () {
+                if (loading) {
+                    return React.createElement(Loader, { size: LoaderSizes.VerySmall });
+                }
+                return (text && (React.createElement(Text, { type: type, icon: Boolean(icon) }, text)));
+            })()));
+    })()));
+}
+var templateObject_1$1, templateObject_2;
+
 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"])));
 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: ",
     " !important;\n  }\n"])), function (props) { return props.justify; }, function (props) { return (props.active ? "pointer" : null); }, function (props) {

package/build/index.js

@@ -22,7 +22,9 @@ var PriceUtil = require('@sellout/utils/.dist/price');
     Colors["Black"] = "#000000";
     Colors["Green"] = "#419D78";
     Colors["OffWhite"] = "#FCFCFC";
-    Colors["Blue"] = "#020151";
+    Colors["LightBlue"] = "#39159C";
+    Colors["Blue"] = "#2D0E84";
+    Colors["DarkBlue"] = "#1D0858";
     Colors["Red"] = "#E63946";
     Colors["Orange"] = "#FF700F";
     Colors["DarkOrange"] = "#D65600";
@@ -80,51 +82,6 @@ function Loader(_a) {
 }
 var templateObject_1;
 
-(function (ButtonTypes) {
-    ButtonTypes["Submit"] = "Submit";
-})(exports.ButtonTypes || (exports.ButtonTypes = {}));
-(function (ButtonStates) {
-    ButtonStates["Active"] = "Active";
-})(exports.ButtonStates || (exports.ButtonStates = {}));
-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  justify-content: center;\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  justify-content: center;\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"])), function (props) { return (Boolean(props.margin) ? props.margin : "0px"); }, function (props) { return (Boolean(props.padding) ? props.padding : "0px"); }, function (props) {
-    if (props.type === exports.ButtonTypes.Submit) {
-        return exports.Colors.Orange;
-    }
-    return null;
-}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
-    if (props.onClick && props.type === exports.ButtonTypes.Submit) {
-        return Polished.lighten(0.025, exports.Colors.Orange);
-    }
-    return null;
-}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
-    if (props.onClick && props.type === exports.ButtonTypes.Submit) {
-        return Polished.darken(0.025, exports.Colors.Orange);
-    }
-    return null;
-});
-var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 1.4rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  margin-left: ", ";\n  color: ", ";\n"], ["\n  font-size: 1.4rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  margin-left: ", ";\n  color: ",
-    ";\n"])), function (props) { return (props.icon ? "10px" : 0); }, function (props) {
-    if (props.type === exports.ButtonTypes.Submit) {
-        return exports.Colors.White;
-    }
-    return null;
-});
-function Button(_a) {
-    var _b = _a.type, type = _b === void 0 ? exports.ButtonTypes.Submit : _b, _c = _a.state, state = _c === void 0 ? exports.ButtonStates.Active : _c, text = _a.text, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, icon = _a.icon, margin = _a.margin, padding = _a.padding, _e = _a.loading, loading = _e === void 0 ? false : _e;
-    return (React__default.createElement(StyledButton, { type: type, onClick: loading ? null : function () { return onClick(); }, margin: margin, padding: padding, state: state }, (function () {
-        return (React__default.createElement(React.Fragment, null, (function () {
-            if (loading) {
-                return React__default.createElement(Loader, { size: exports.LoaderSizes.VerySmall });
-            }
-            return (React__default.createElement(Text, { type: type, icon: Boolean(icon) }, text));
-        })()));
-    })()));
-}
-var templateObject_1$1, templateObject_2;
-
 // import { library } from "@fortawesome/fontawesome-svg-core";
 var IconEnum = {
     AudienceRegular: proRegularSvgIcons.faUserFriends,
@@ -223,7 +180,8 @@ var IconEnum = {
 
 var Icons = IconEnum;
 function Icon(_a) {
-    var _b = _a.icon, icon = _b === void 0 ? Icons.AudienceRegular : _b, _c = _a.color, color = _c === void 0 ? exports.Colors.Orange : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _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;
+    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;
+    var cursor = onClick ? 'pointer' : '';
     return (React__default.createElement(reactFontawesome.FontAwesomeIcon, { icon: icon, onClick: onClick, style: {
             color: color,
             top: top,
@@ -232,10 +190,59 @@ function Icon(_a) {
             position: position,
             zIndex: zIndex,
             fontSize: size,
-            transition: "all 0.2s"
+            transition: "all 0.2s",
+            margin: margin,
+            cursor: cursor,
         } }));
 }
 
+(function (ButtonTypes) {
+    ButtonTypes["Submit"] = "Submit";
+})(exports.ButtonTypes || (exports.ButtonTypes = {}));
+(function (ButtonStates) {
+    ButtonStates["Active"] = "Active";
+})(exports.ButtonStates || (exports.ButtonStates = {}));
+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: ",
+    ";\n\n  &:hover {\n    cursor: ", ";\n    background-color: ",
+    ";\n  }\n\n  &:active {\n    cursor: ", ";\n    background-color: ",
+    ";\n  }\n"])), function (props) { return (Boolean(props.margin) ? props.margin : "0px"); }, function (props) { return (Boolean(props.padding) ? props.padding : "0px"); }, function (props) {
+    if (props.type === exports.ButtonTypes.Submit) {
+        return exports.Colors.Orange;
+    }
+    return null;
+}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
+    if (props.onClick && props.type === exports.ButtonTypes.Submit) {
+        return Polished.lighten(0.025, exports.Colors.Orange);
+    }
+    return null;
+}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
+    if (props.onClick && props.type === exports.ButtonTypes.Submit) {
+        return Polished.darken(0.025, exports.Colors.Orange);
+    }
+    return null;
+});
+var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 1.4rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  margin-left: ", ";\n  color: ", ";\n"], ["\n  font-size: 1.4rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  margin-left: ", ";\n  color: ",
+    ";\n"])), function (props) { return (props.icon ? "10px" : 0); }, function (props) {
+    if (props.type === exports.ButtonTypes.Submit) {
+        return exports.Colors.White;
+    }
+    return null;
+});
+function Button(_a) {
+    var _b = _a.type, type = _b === void 0 ? exports.ButtonTypes.Submit : _b, _c = _a.state, state = _c === void 0 ? exports.ButtonStates.Active : _c, text = _a.text, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, icon = _a.icon, margin = _a.margin, padding = _a.padding, _e = _a.loading, loading = _e === void 0 ? false : _e;
+    return (React__default.createElement(StyledButton, { type: type, onClick: loading ? null : function () { return onClick(); }, margin: margin, padding: padding, state: state }, (function () {
+        return (React__default.createElement(React.Fragment, null,
+            icon && (React__default.createElement(Icon, { icon: icon, color: exports.Colors.White })),
+            (function () {
+                if (loading) {
+                    return React__default.createElement(Loader, { size: exports.LoaderSizes.VerySmall });
+                }
+                return (text && (React__default.createElement(Text, { type: type, icon: Boolean(icon) }, text)));
+            })()));
+    })()));
+}
+var templateObject_1$1, templateObject_2;
+
 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"])));
 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: ",
     " !important;\n  }\n"])), function (props) { return props.justify; }, function (props) { return (props.active ? "pointer" : null); }, function (props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sellout/ui",
-  "version": "0.0.9",
+  "version": "0.0.12",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "jsnext:main": "build/index.es.js",
@@ -24,7 +24,7 @@
     "@fortawesome/pro-regular-svg-icons": "^5.12.1",
     "@fortawesome/pro-solid-svg-icons": "^5.12.1",
     "@fortawesome/react-fontawesome": "^0.1.9",
-    "@sellout/utils": "^0.0.9",
+    "@sellout/utils": "^0.0.12",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
@@ -35,8 +35,6 @@
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.6",
     "jest": "^24.9.0",
-    "polished": "^3.4.4",
-    "react-animate-height": "^2.0.20",
     "rollup": "^1.27.13",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
@@ -46,7 +44,11 @@
     "ts-jest": "^24.2.0",
     "typescript": "^3.7.5"
   },
-  "gitHead": "c54a032fe5d7b97ad1ac2532edce24854e063180",
+  "dependencies": {
+    "polished": "^3.4.4",
+    "react-animate-height": "^2.0.20"
+  },
+  "gitHead": "8f06f6b076735d7ad101fcdb3f6c9cd301f78a6a",
   "peerDependencies": {
     "react": "^16.13.0",
     "react-dom": "^16.13.0",

package/src/Colors.ts

@@ -3,7 +3,9 @@ export enum Colors {
   Black = "#000000",
   Green = "#419D78",
   OffWhite = "#FCFCFC",
-  Blue = "#020151",
+  LightBlue = '#39159C',
+  Blue = "#2D0E84",
+  DarkBlue = '#1D0858',
   Red = "#E63946",
   Orange = "#FF700F",
   DarkOrange = "#D65600",

package/src/assets/images/sellout-logo-mono-white.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="32" viewBox="0 0 20 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.74716 1.41177C3.81431 1.41177 1.41033 3.82962 1.41033 6.81542C1.41033 7.38337 1.49047 7.91886 1.65073 8.43814C2.88477 7.01014 4.71179 6.10142 6.73113 6.10142H12.068V1.42799H6.74716V1.41177ZM1.66676 11.3103C1.50649 11.8296 1.42636 12.3651 1.42636 12.9331C1.42636 15.9026 3.81431 18.3367 6.76319 18.3367H12.1V13.6633H6.74716C4.72782 13.6471 2.9008 12.7383 1.66676 11.3103ZM12.1 19.7647H6.74716C3.02901 19.7647 0 16.6978 0 12.9331C0 11.8296 0.256424 10.7911 0.721193 9.88235C0.256424 8.9574 0 7.91887 0 6.83165C0 3.06694 3.02901 0 6.74716 0H13.4943V7.56187H6.74716C4.93616 7.56187 3.31749 8.48682 2.3559 9.89858C3.31749 11.3103 4.92014 12.2353 6.74716 12.2353H12.1V19.7647Z" fill="white"/>
+<path d="M13.2528 30.5882C16.1857 30.5882 18.5897 28.1704 18.5897 25.1846C18.5897 24.6166 18.5095 24.0811 18.3493 23.5619C17.1152 24.9899 15.2882 25.8986 13.2689 25.8986H7.93204V30.572H13.2528V30.5882ZM18.3332 20.6897C18.4935 20.1704 18.5736 19.6349 18.5736 19.0669C18.5736 16.0974 16.1857 13.6633 13.2368 13.6633L7.89999 13.6633C7.89999 15.4884 7.89999 16.5116 7.89999 18.3367H13.2528C15.2722 18.3529 17.0992 19.2617 18.3332 20.6897ZM7.89999 12.2353H13.2528C16.971 12.2353 20 15.3022 20 19.0669C20 20.1704 19.7436 21.2089 19.2788 22.1176C19.7436 23.0426 20 24.0811 20 25.1684C20 28.9331 16.971 32 13.2528 32L6.50568 32L6.50568 24.4381L13.2528 24.4381C15.0638 24.4381 16.6825 23.5132 17.6441 22.1014C16.6825 20.6897 15.0799 19.7647 13.2528 19.7647H7.89999V12.2353Z" fill="white"/>
+</svg>

package/src/components/Button.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import * as Polished from "polished";
 import { Colors } from "../Colors";
 import Loader, { LoaderSizes } from './Loader';
-// import Icon from "./Icon";
+import Icon from "./Icon";
 
 export enum ButtonTypes {
   Submit = "Submit",
@@ -28,7 +28,9 @@ const StyledButton = styled.div<StyledButtonProps>`
   display: flex;
   flex-direction: row;
   align-items: center;
+  overflow: hidden;
   justify-content: center;
+  white-space: nowrap;
   text-align: center;
   border-radius: 10px;
   transition: all 0.2s;
@@ -81,11 +83,11 @@ const Text = styled.span<TextProps>`
 `;
 
 export type ButtonProps = {
-  type: string;
+  type?: string;
   state?: string;
-  text: string;
+  text?: string;
   onClick?: any;
-  icon?: string;
+  icon?: any;
   margin?: string;
   padding?: string;
   loading?: boolean;
@@ -95,7 +97,7 @@ export default function Button({
   type = ButtonTypes.Submit,
   state = ButtonStates.Active,
   text,
-  onClick = () => { },
+  onClick = () => {},
   icon,
   margin,
   padding,
@@ -112,22 +114,23 @@ export default function Button({
       {(() => {
         return (
           <Fragment>
-            {/* {icon && (
+            {icon && (
               <Icon
                 icon={icon}
-                color={Colors.Palette.Orange}
-                margin="0 10px 0 0"
+                color={Colors.White}
               />
-            )} */}
+            )}
             {(() => {
               if (loading) {
                 return <Loader size={LoaderSizes.VerySmall} />
               }
 
               return (
-                <Text type={type} icon={Boolean(icon)}>
-                  {text}
-                </Text>
+                text && (
+                  <Text type={type} icon={Boolean(icon)}>
+                    {text}
+                  </Text>
+                )
               );
             })()}
           </Fragment>

package/src/components/Icon.tsx

@@ -15,19 +15,22 @@ export type IconProps = {
   left?: string | number | undefined;
   right?: string | number | undefined;
   zIndex?: number | void;
+  margin?: string | number | undefined;
 };
 
 export default function Icon({ 
   icon = Icons.AudienceRegular,
   color = Colors.Orange,
-  onClick = () => {},
+  onClick,
   size = 20,
   top,
   left,
   right,
   position = 'relative' as any,
   zIndex,
+  margin,
 }: IconProps) {
+  const cursor: string = onClick ? 'pointer' : '';
 
   return (
     <FontAwesomeIcon
@@ -41,7 +44,9 @@ export default function Icon({
         position: position as any,
         zIndex: zIndex as any,
         fontSize: size,
-        transition: "all 0.2s"
+        transition: "all 0.2s",
+        margin,
+        cursor,
       }}
     />
   );