@proprioo/salatim 20.7.0 → 21.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/lib/index.js +201 -210
  3. package/lib/index.js.map +1 -1
  4. package/lib/ui/index.d.ts +3 -3
  5. package/lib/ui/index.js +4 -3
  6. package/lib/ui/index.js.map +1 -1
  7. package/lib/ui/src/button/Button.d.ts +15 -2
  8. package/lib/ui/src/button/Button.interfaces.d.ts +10 -24
  9. package/lib/ui/src/button/Button.interfaces.js +19 -19
  10. package/lib/ui/src/button/Button.interfaces.js.map +1 -1
  11. package/lib/ui/src/button/Button.js +3 -10
  12. package/lib/ui/src/button/Button.js.map +1 -1
  13. package/lib/ui/src/button/Button.stories.js +23 -49
  14. package/lib/ui/src/button/Button.stories.js.map +1 -1
  15. package/lib/ui/src/button/Button.styles.d.ts +1 -1
  16. package/lib/ui/src/button/Button.styles.js +48 -46
  17. package/lib/ui/src/button/Button.styles.js.map +1 -1
  18. package/lib/ui/src/button/Button.test.js.map +1 -1
  19. package/lib/ui/src/card/Card.d.ts +5 -0
  20. package/lib/ui/src/card/Card.js +8 -2
  21. package/lib/ui/src/card/Card.js.map +1 -1
  22. package/lib/ui/src/card/Card.styles.d.ts +2 -1
  23. package/lib/ui/src/card/Card.styles.js +2 -2
  24. package/lib/ui/src/card/Card.styles.js.map +1 -1
  25. package/lib/ui/src/tag/Tag.js +3 -3
  26. package/lib/ui/src/tag/Tag.js.map +1 -1
  27. package/lib/ui/src/tag/Tag.styles.d.ts +1 -1
  28. package/lib/ui/src/tag/Tag.styles.js +27 -32
  29. package/lib/ui/src/tag/Tag.styles.js.map +1 -1
  30. package/package.json +1 -1
package/lib/ui/index.d.ts CHANGED
@@ -11,12 +11,12 @@ export { default as AgentCard } from './src/agentCard/AgentCard';
11
11
  export { default as Autocomplete } from './src/autocomplete/Autocomplete';
12
12
  export { default as Block, BlockProps } from './src/block/Block';
13
13
  export { default as Burger, BurgerProps } from './src/burger/Burger';
14
- export { default as Button } from './src/button/Button';
14
+ export { default as Button, ButtonProps } from './src/button/Button';
15
15
  export { default as ButtonRadioGroup, ButtonRadioGroupProps } from './src/buttonRadioGroup/ButtonRadioGroup';
16
16
  export { default as BlockCheckIcon } from './src/blockCheckIcon/BlockCheckIcon';
17
17
  export { default as BlockIcon } from './src/blockIcon/BlockIcon';
18
- export { default as Card, CardProps } from './src/card/Card';
19
- export { ButtonAppearance, ButtonColors, ButtonProps, ButtonSizes, IconPosition } from './src/button/Button.interfaces';
18
+ export { default as Card, CardProps, CardHeaderIconSize } from './src/card/Card';
19
+ export { ButtonAppearance, ButtonTheme, ButtonSizes, IconPosition } from './src/button/Button.interfaces';
20
20
  export { default as Checkbox } from './src/checkbox/Checkbox';
21
21
  export { default as DateInput, isValidDate } from './src/dateInput/DateInput';
22
22
  export { default as EmailInput } from './src/emailInput/EmailInput';
package/lib/ui/index.js CHANGED
@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.Subtitle = exports.Option = exports.Toggle = exports.titles = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Radio = exports.NumberInput = exports.Loader = exports.InputLoading = exports.InputColors = exports.Input = exports.InputType = exports.Logo = exports.PanelOrientation = exports.PanelColorsTypes = exports.Panel = exports.useModal = exports.GmapsGeocode = exports.GmapsAutocomplete = exports.Fieldset = exports.EmailInput = exports.isValidDate = exports.DateInput = exports.Checkbox = exports.IconPosition = exports.ButtonSizes = exports.ButtonColors = exports.ButtonAppearance = exports.Card = exports.BlockIcon = exports.BlockCheckIcon = exports.ButtonRadioGroup = exports.Button = exports.Burger = exports.Block = exports.Autocomplete = exports.AgentCard = exports.AgentBanner = exports.AccordionPanel = exports.AccordionHeader = exports.AccordionItem = exports.Accordion = exports.AccordionItemColors = exports.geocodeByAddress = exports.PlacesAutocomplete = void 0;
7
- exports.ShowMoreTextToggle = exports.Select = exports.Tooltip = exports.TextToggle = exports.Textarea = exports.TagBase = exports.Tag = exports.TagColorsTypes = exports.TagAppearance = void 0;
6
+ exports.Option = exports.Toggle = exports.titles = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Radio = exports.NumberInput = exports.Loader = exports.InputLoading = exports.InputColors = exports.Input = exports.InputType = exports.Logo = exports.PanelOrientation = exports.PanelColorsTypes = exports.Panel = exports.useModal = exports.GmapsGeocode = exports.GmapsAutocomplete = exports.Fieldset = exports.EmailInput = exports.isValidDate = exports.DateInput = exports.Checkbox = exports.IconPosition = exports.ButtonSizes = exports.ButtonTheme = exports.ButtonAppearance = exports.CardHeaderIconSize = exports.Card = exports.BlockIcon = exports.BlockCheckIcon = exports.ButtonRadioGroup = exports.Button = exports.Burger = exports.Block = exports.Autocomplete = exports.AgentCard = exports.AgentBanner = exports.AccordionPanel = exports.AccordionHeader = exports.AccordionItem = exports.Accordion = exports.AccordionItemColors = exports.geocodeByAddress = exports.PlacesAutocomplete = void 0;
7
+ exports.ShowMoreTextToggle = exports.Select = exports.Tooltip = exports.TextToggle = exports.Textarea = exports.TagBase = exports.Tag = exports.TagColorsTypes = exports.TagAppearance = exports.Subtitle = void 0;
8
8
  var react_places_autocomplete_1 = require("react-places-autocomplete");
9
9
  Object.defineProperty(exports, "PlacesAutocomplete", { enumerable: true, get: function () { return __importDefault(react_places_autocomplete_1).default; } });
10
10
  Object.defineProperty(exports, "geocodeByAddress", { enumerable: true, get: function () { return react_places_autocomplete_1.geocodeByAddress; } });
@@ -38,9 +38,10 @@ var BlockIcon_1 = require("./src/blockIcon/BlockIcon");
38
38
  Object.defineProperty(exports, "BlockIcon", { enumerable: true, get: function () { return __importDefault(BlockIcon_1).default; } });
39
39
  var Card_1 = require("./src/card/Card");
40
40
  Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return __importDefault(Card_1).default; } });
41
+ Object.defineProperty(exports, "CardHeaderIconSize", { enumerable: true, get: function () { return Card_1.CardHeaderIconSize; } });
41
42
  var Button_interfaces_1 = require("./src/button/Button.interfaces");
42
43
  Object.defineProperty(exports, "ButtonAppearance", { enumerable: true, get: function () { return Button_interfaces_1.ButtonAppearance; } });
43
- Object.defineProperty(exports, "ButtonColors", { enumerable: true, get: function () { return Button_interfaces_1.ButtonColors; } });
44
+ Object.defineProperty(exports, "ButtonTheme", { enumerable: true, get: function () { return Button_interfaces_1.ButtonTheme; } });
44
45
  Object.defineProperty(exports, "ButtonSizes", { enumerable: true, get: function () { return Button_interfaces_1.ButtonSizes; } });
45
46
  Object.defineProperty(exports, "IconPosition", { enumerable: true, get: function () { return Button_interfaces_1.IconPosition; } });
46
47
  var Checkbox_1 = require("./src/checkbox/Checkbox");
package/lib/ui/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../packages/ui/index.ts"],"names":[],"mappings":";;;;;;;AACA,uEAImC;AAHjC,gJAAA,OAAO,OAAsB;AAE7B,6HAAA,gBAAgB,OAAA;AAGlB,6EAK8C;AAF5C,2HAAA,mBAAmB,OAAA;AAGrB,uDAAiE;AAAxD,uHAAA,OAAO,OAAa;AAC7B,+DAAyE;AAAhE,+HAAA,OAAO,OAAiB;AACjC,mEAA6E;AAApE,mIAAA,OAAO,OAAmB;AACnC,iEAA2E;AAAlE,iIAAA,OAAO,OAAkB;AAClC,6DAAuE;AAA9D,2HAAA,OAAO,OAAe;AAC/B,uDAAiE;AAAxD,uHAAA,OAAO,OAAa;AAC7B,gEAA0E;AAAjE,6HAAA,OAAO,OAAgB;AAChC,2CAAiE;AAAxD,+GAAA,OAAO,OAAS;AACzB,8CAAqE;AAA5D,iHAAA,OAAO,OAAU;AAC1B,8CAAwD;AAA/C,iHAAA,OAAO,OAAU;AAC1B,4EAGiD;AAF/C,qIAAA,OAAO,OAAoB;AAG7B,sEAAgF;AAAvE,iIAAA,OAAO,OAAkB;AAClC,uDAAiE;AAAxD,uHAAA,OAAO,OAAa;AAC7B,wCAA6D;AAApD,6GAAA,OAAO,OAAQ;AACxB,oEAMwC;AALtC,qHAAA,gBAAgB,OAAA;AAChB,iHAAA,YAAY,OAAA;AAEZ,gHAAA,WAAW,OAAA;AACX,iHAAA,YAAY,OAAA;AAEd,oDAA8D;AAArD,qHAAA,OAAO,OAAY;AAC5B,uDAA8E;AAArE,uHAAA,OAAO,OAAa;AAAE,wGAAA,WAAW,OAAA;AAC1C,0DAAoE;AAA3D,yHAAA,OAAO,OAAc;AAK9B,oDAA6E;AAApE,qHAAA,OAAO,OAAY;AAC5B,+EAGmD;AAFjD,uIAAA,OAAO,OAAqB;AAG9B,gEAGyC;AAFvC,6HAAA,OAAO,OAAgB;AAGzB,2CAI2B;AAHzB,kHAAA,OAAO,OAAY;AAIrB,2CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,iEAIsC;AAFpC,oHAAA,gBAAgB,OAAA;AAChB,oHAAA,gBAAgB,OAAA;AAGlB,wCAAkD;AAAzC,6GAAA,OAAO,OAAQ;AACxB,2CAA8C;AAArC,kGAAA,SAAS,OAAA;AAClB,uDAImC;AAHjC,mHAAA,OAAO,OAAS;AAIlB,+DAA4D;AAAnD,4GAAA,WAAW,OAAA;AACpB,gEAA0E;AAAjE,6HAAA,OAAO,OAAgB;AAChC,8CAAqE;AAA5D,iHAAA,OAAO,OAAU;AAC1B,6DAAuE;AAA9D,2HAAA,OAAO,OAAe;AAC/B,2CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,qCAA+C;AAAtC,yGAAA,OAAO,OAAM;AACtB,qCAA+C;AAAtC,yGAAA,OAAO,OAAM;AACtB,qCAA+C;AAAtC,yGAAA,OAAO,OAAM;AACtB,qCAA+C;AAAtC,yGAAA,OAAO,OAAM;AACtB,qCAA+C;AAAtC,yGAAA,OAAO,OAAM;AACtB,qCAA+C;AAAtC,yGAAA,OAAO,OAAM;AACtB,2CAA2C;AAAlC,+FAAA,MAAM,OAAA;AACf,8CAAqE;AAA5D,iHAAA,OAAO,OAAU;AAC1B,8CAAqE;AAA5D,iHAAA,OAAO,OAAU;AAC1B,oDAA6E;AAApE,qHAAA,OAAO,OAAY;AAC5B,mDAA+E;AAAtE,2GAAA,aAAa,OAAA;AAAE,4GAAA,cAAc,OAAA;AACtC,qCAA+C;AAAtC,2GAAA,OAAO,OAAO;AACvB,mDAA+C;AAAtC,qGAAA,OAAO,OAAA;AAChB,oDAA8D;AAArD,qHAAA,OAAO,OAAY;AAC5B,0DAAoE;AAA3D,yHAAA,OAAO,OAAc;AAC9B,iDAA2D;AAAlD,mHAAA,OAAO,OAAW;AAC3B,mEAG2C;AAFzC,wHAAA,OAAO,OAAU;AAGnB,kFAA4F;AAAnF,yIAAA,OAAO,OAAsB"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../packages/ui/index.ts"],"names":[],"mappings":"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"}
package/lib/ui/src/button/Button.d.ts CHANGED
@@ -1,4 +1,17 @@
1
- import { FC } from 'react';
2
- import { ButtonProps } from './Button.interfaces';
1
+ import { FC, MouseEvent, ReactElement } from 'react';
2
+ import { ButtonAppearance, ButtonSizes, ButtonTheme, IconPosition } from './Button.interfaces';
3
+ export interface ButtonProps {
4
+ label: string;
5
+ appearance?: ButtonAppearance;
6
+ disabled?: boolean;
7
+ icon?: ReactElement<Element>;
8
+ iconPosition?: IconPosition;
9
+ id?: string;
10
+ rounded?: boolean;
11
+ size?: ButtonSizes;
12
+ theme?: ButtonTheme;
13
+ type?: 'submit' | 'reset' | 'button';
14
+ onClick?(event: MouseEvent<HTMLElement>): void;
15
+ }
3
16
  declare const Button: FC<ButtonProps>;
4
17
  export default Button;
package/lib/ui/src/button/Button.interfaces.d.ts CHANGED
@@ -1,17 +1,10 @@
1
- import { MouseEvent, ReactElement } from 'react';
2
- export declare enum ButtonSizes {
3
- BIG = "big",
4
- LARGE = "large",
5
- SMALL = "small",
6
- FULL = "full"
7
- }
8
1
  export declare enum ButtonAppearance {
9
- PRIMARY = "primary",
10
- SECONDARY = "secondary",
2
+ BASIC = "basic",
11
3
  NO_APPEARANCE = "noAppearance",
12
- BASIC = "basic"
4
+ PRIMARY = "primary",
5
+ SECONDARY = "secondary"
13
6
  }
14
- export declare enum ButtonColors {
7
+ export declare enum ButtonTheme {
15
8
  BLACK = "black",
16
9
  BLUE = "blue",
17
10
  GREEN = "green",
@@ -20,20 +13,13 @@ export declare enum ButtonColors {
20
13
  RED = "red",
21
14
  WHITE = "white"
22
15
  }
16
+ export declare enum ButtonSizes {
17
+ BIG = "big",
18
+ FULL = "full",
19
+ LARGE = "large",
20
+ SMALL = "small"
21
+ }
23
22
  export declare enum IconPosition {
24
23
  LEFT = "left",
25
24
  RIGHT = "right"
26
25
  }
27
- export interface ButtonProps {
28
- label: string;
29
- appearance?: ButtonAppearance;
30
- type?: 'submit' | 'reset' | 'button';
31
- size?: ButtonSizes;
32
- disabled?: boolean;
33
- rounded?: boolean;
34
- icon?: ReactElement<Element>;
35
- iconPosition?: IconPosition;
36
- theme?: ButtonColors;
37
- id?: string;
38
- onClick?(event: MouseEvent<HTMLElement>): void;
39
- }
package/lib/ui/src/button/Button.interfaces.js CHANGED
@@ -1,30 +1,30 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.IconPosition = exports.ButtonColors = exports.ButtonAppearance = exports.ButtonSizes = void 0;
3
+ exports.IconPosition = exports.ButtonSizes = exports.ButtonTheme = exports.ButtonAppearance = void 0;
4
+ var ButtonAppearance;
5
+ (function (ButtonAppearance) {
6
+ ButtonAppearance["BASIC"] = "basic";
7
+ ButtonAppearance["NO_APPEARANCE"] = "noAppearance";
8
+ ButtonAppearance["PRIMARY"] = "primary";
9
+ ButtonAppearance["SECONDARY"] = "secondary";
10
+ })(ButtonAppearance = exports.ButtonAppearance || (exports.ButtonAppearance = {}));
11
+ var ButtonTheme;
12
+ (function (ButtonTheme) {
13
+ ButtonTheme["BLACK"] = "black";
14
+ ButtonTheme["BLUE"] = "blue";
15
+ ButtonTheme["GREEN"] = "green";
16
+ ButtonTheme["PINK"] = "pink";
17
+ ButtonTheme["ORANGE"] = "orange";
18
+ ButtonTheme["RED"] = "red";
19
+ ButtonTheme["WHITE"] = "white";
20
+ })(ButtonTheme = exports.ButtonTheme || (exports.ButtonTheme = {}));
4
21
  var ButtonSizes;
5
22
  (function (ButtonSizes) {
6
23
  ButtonSizes["BIG"] = "big";
24
+ ButtonSizes["FULL"] = "full";
7
25
  ButtonSizes["LARGE"] = "large";
8
26
  ButtonSizes["SMALL"] = "small";
9
- ButtonSizes["FULL"] = "full";
10
27
  })(ButtonSizes = exports.ButtonSizes || (exports.ButtonSizes = {}));
11
- var ButtonAppearance;
12
- (function (ButtonAppearance) {
13
- ButtonAppearance["PRIMARY"] = "primary";
14
- ButtonAppearance["SECONDARY"] = "secondary";
15
- ButtonAppearance["NO_APPEARANCE"] = "noAppearance";
16
- ButtonAppearance["BASIC"] = "basic";
17
- })(ButtonAppearance = exports.ButtonAppearance || (exports.ButtonAppearance = {}));
18
- var ButtonColors;
19
- (function (ButtonColors) {
20
- ButtonColors["BLACK"] = "black";
21
- ButtonColors["BLUE"] = "blue";
22
- ButtonColors["GREEN"] = "green";
23
- ButtonColors["PINK"] = "pink";
24
- ButtonColors["ORANGE"] = "orange";
25
- ButtonColors["RED"] = "red";
26
- ButtonColors["WHITE"] = "white";
27
- })(ButtonColors = exports.ButtonColors || (exports.ButtonColors = {}));
28
28
  var IconPosition;
29
29
  (function (IconPosition) {
30
30
  IconPosition["LEFT"] = "left";
package/lib/ui/src/button/Button.interfaces.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.interfaces.js","sourceRoot":"","sources":["../../../../packages/ui/src/button/Button.interfaces.ts"],"names":[],"mappings":";;;AAEA,IAAY,WAKX;AALD,WAAY,WAAW;IACrB,0BAAW,CAAA;IACX,8BAAe,CAAA;IACf,8BAAe,CAAA;IACf,4BAAa,CAAA;AACf,CAAC,EALW,WAAW,GAAX,mBAAW,KAAX,mBAAW,QAKtB;AAED,IAAY,gBAKX;AALD,WAAY,gBAAgB;IAC1B,uCAAmB,CAAA;IACnB,2CAAuB,CAAA;IACvB,kDAA8B,CAAA;IAC9B,mCAAe,CAAA;AACjB,CAAC,EALW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAK3B;AAED,IAAY,YAQX;AARD,WAAY,YAAY;IACtB,+BAAe,CAAA;IACf,6BAAa,CAAA;IACb,+BAAe,CAAA;IACf,6BAAa,CAAA;IACb,iCAAiB,CAAA;IACjB,2BAAW,CAAA;IACX,+BAAe,CAAA;AACjB,CAAC,EARW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QAQvB;AAED,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,+BAAe,CAAA;AACjB,CAAC,EAHW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QAGvB"}
1
+ {"version":3,"file":"Button.interfaces.js","sourceRoot":"","sources":["../../../../packages/ui/src/button/Button.interfaces.ts"],"names":[],"mappings":";;;AAAA,IAAY,gBAKX;AALD,WAAY,gBAAgB;IAC1B,mCAAe,CAAA;IACf,kDAA8B,CAAA;IAC9B,uCAAmB,CAAA;IACnB,2CAAuB,CAAA;AACzB,CAAC,EALW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAK3B;AAED,IAAY,WAQX;AARD,WAAY,WAAW;IACrB,8BAAe,CAAA;IACf,4BAAa,CAAA;IACb,8BAAe,CAAA;IACf,4BAAa,CAAA;IACb,gCAAiB,CAAA;IACjB,0BAAW,CAAA;IACX,8BAAe,CAAA;AACjB,CAAC,EARW,WAAW,GAAX,mBAAW,KAAX,mBAAW,QAQtB;AAED,IAAY,WAKX;AALD,WAAY,WAAW;IACrB,0BAAW,CAAA;IACX,4BAAa,CAAA;IACb,8BAAe,CAAA;IACf,8BAAe,CAAA;AACjB,CAAC,EALW,WAAW,GAAX,mBAAW,KAAX,mBAAW,QAKtB;AAED,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,+BAAe,CAAA;AACjB,CAAC,EAHW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QAGvB"}
package/lib/ui/src/button/Button.js CHANGED
@@ -18,17 +18,10 @@ const react_1 = __importDefault(require("react"));
18
18
  const Button_interfaces_1 = require("./Button.interfaces");
19
19
  const Button_styles_1 = require("./Button.styles");
20
20
  const Button = (_a) => {
21
- var { label, rounded, icon, iconPosition, size, appearance, theme } = _a, rest = __rest(_a, ["label", "rounded", "icon", "iconPosition", "size", "appearance", "theme"]);
22
- return (react_1.default.createElement(Button_styles_1.Layout, Object.assign({}, Object.assign(Object.assign({}, rest), { iconPosition, rounded, size, appearance, theme, icon }), { "aria-label": label }),
23
- icon && (react_1.default.createElement(Button_styles_1.IconWrapper, { "data-test": iconPosition === Button_interfaces_1.IconPosition.LEFT ? 'icon-left' : 'icon-right', iconPosition: iconPosition, appearance: appearance, theme: theme, size: size }, icon)),
21
+ var { appearance = Button_interfaces_1.ButtonAppearance.PRIMARY, icon, iconPosition = Button_interfaces_1.IconPosition.RIGHT, label, rounded = false, size = Button_interfaces_1.ButtonSizes.LARGE, theme = Button_interfaces_1.ButtonTheme.ORANGE } = _a, rest = __rest(_a, ["appearance", "icon", "iconPosition", "label", "rounded", "size", "theme"]);
22
+ return (react_1.default.createElement(Button_styles_1.Layout, Object.assign({}, Object.assign({ appearance, icon, iconPosition, rounded, size, theme }, rest), { "aria-label": label }),
23
+ icon && (react_1.default.createElement(Button_styles_1.IconWrapper, Object.assign({}, { appearance, iconPosition, size, theme }, { "data-test": iconPosition === Button_interfaces_1.IconPosition.LEFT ? 'icon-left' : 'icon-right' }), icon)),
24
24
  !rounded && react_1.default.createElement(Button_styles_1.LabelLayout, { "data-test": "label" }, label)));
25
25
  };
26
- Button.defaultProps = {
27
- size: Button_interfaces_1.ButtonSizes.LARGE,
28
- appearance: Button_interfaces_1.ButtonAppearance.PRIMARY,
29
- theme: Button_interfaces_1.ButtonColors.ORANGE,
30
- rounded: false,
31
- iconPosition: Button_interfaces_1.IconPosition.RIGHT
32
- };
33
26
  exports.default = Button;
34
27
  //# sourceMappingURL=Button.js.map
package/lib/ui/src/button/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../packages/ui/src/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAAkC;AAElC,2DAM6B;AAC7B,mDAAmE;AAEnE,MAAM,MAAM,GAAoB,CAAC,EASnB,EAAE,EAAE;QATe,EAC/B,KAAK,EACL,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,KAAK,OAEO,EADT,IAAI,cARwB,2EAShC,CADQ;IACU,OAAA,CACjB,8BAAC,sBAAM,oDACI,IAAI,KAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,qBACvD,KAAK;QAEhB,IAAI,IAAI,CACP,8BAAC,2BAAW,iBAER,YAAY,KAAK,gCAAY,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,EAEjE,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,IAET,IAAI,CACO,CACf;QACA,CAAC,OAAO,IAAI,8BAAC,2BAAW,iBAAW,OAAO,IAAE,KAAK,CAAe,CAC1D,CACV,CAAA;CAAA,CAAC;AAEF,MAAM,CAAC,YAAY,GAAG;IACpB,IAAI,EAAE,+BAAW,CAAC,KAAK;IACvB,UAAU,EAAE,oCAAgB,CAAC,OAAO;IACpC,KAAK,EAAE,gCAAY,CAAC,MAAM;IAC1B,OAAO,EAAE,KAAK;IACd,YAAY,EAAE,gCAAY,CAAC,KAAK;CACjC,CAAC;AAEF,kBAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../packages/ui/src/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA4D;AAE5D,2DAK6B;AAC7B,mDAAmE;AAgBnE,MAAM,MAAM,GAAoB,CAAC,EASnB,EAAE,EAAE;QATe,EAC/B,UAAU,GAAG,oCAAgB,CAAC,OAAO,EACrC,IAAI,EACJ,YAAY,GAAG,gCAAY,CAAC,KAAK,EACjC,KAAK,EACL,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,+BAAW,CAAC,KAAK,EACxB,KAAK,GAAG,+BAAW,CAAC,MAAM,OAEd,EADT,IAAI,cARwB,2EAShC,CADQ;IACU,OAAA,CACjB,8BAAC,sBAAM,oCACC,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,IAAK,IAAI,mBACvD,KAAK;QAEhB,IAAI,IAAI,CACP,8BAAC,2BAAW,oBACN,EAAE,UAAU,EAAE,YAAY,EAAE,IAAI,EAAE,KAAK,EAAE,iBAE3C,YAAY,KAAK,gCAAY,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,KAGhE,IAAI,CACO,CACf;QACA,CAAC,OAAO,IAAI,8BAAC,2BAAW,iBAAW,OAAO,IAAE,KAAK,CAAe,CAC1D,CACV,CAAA;CAAA,CAAC;AAEF,kBAAe,MAAM,CAAC"}
package/lib/ui/src/button/Button.stories.js CHANGED
@@ -5,60 +5,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  const react_1 = __importDefault(require("react"));
7
7
  const addon_actions_1 = require("@storybook/addon-actions");
8
- const react_2 = require("@storybook/react");
9
8
  const addon_knobs_1 = require("@storybook/addon-knobs");
9
+ const react_2 = require("@storybook/react");
10
10
  const utils_1 = require("../../../utils");
11
11
  const icons_1 = __importDefault(require("../icons"));
12
12
  const Button_1 = __importDefault(require("./Button"));
13
13
  const Button_interfaces_1 = require("./Button.interfaces");
14
14
  const { Arrow } = icons_1.default;
15
- const knobs = () => {
16
- return {
17
- icon: react_1.default.createElement(Arrow, null),
18
- label: (0, addon_knobs_1.text)('Label', 'Click me please'),
19
- disabled: (0, addon_knobs_1.boolean)('Disabled', false),
20
- rounded: (0, addon_knobs_1.boolean)('Rounded', false),
21
- size: (0, addon_knobs_1.select)('Size', Button_interfaces_1.ButtonSizes, Button_interfaces_1.ButtonSizes.LARGE),
22
- theme: (0, addon_knobs_1.select)('Color', Button_interfaces_1.ButtonColors, Button_interfaces_1.ButtonColors.ORANGE),
23
- iconPosition: (0, addon_knobs_1.select)('Icon position', Button_interfaces_1.IconPosition, Button_interfaces_1.IconPosition.RIGHT),
24
- onClick: (0, addon_actions_1.action)('onClick')
25
- };
26
- };
27
- (0, react_2.storiesOf)('Button', module)
28
- .add('Primary', () => {
29
- const props = Object.assign(Object.assign({}, knobs()), { appearance: Button_interfaces_1.ButtonAppearance.PRIMARY });
30
- const style = {
31
- padding: '1em',
32
- background: props.theme === Button_interfaces_1.ButtonColors.WHITE ? utils_1.colors.orange.base : 'transparent'
33
- };
34
- return (react_1.default.createElement("div", { style: style },
35
- react_1.default.createElement(Button_1.default, Object.assign({}, props))));
36
- })
37
- .add('Secondary', () => {
38
- const props = Object.assign(Object.assign({}, knobs()), { appearance: Button_interfaces_1.ButtonAppearance.SECONDARY });
39
- const style = {
40
- padding: '1em',
41
- background: props.theme === Button_interfaces_1.ButtonColors.WHITE ? utils_1.colors.orange.base : 'transparent'
42
- };
43
- return (react_1.default.createElement("div", { style: style },
44
- react_1.default.createElement(Button_1.default, Object.assign({}, props))));
45
- })
46
- .add('No Appearance', () => {
47
- const props = Object.assign(Object.assign({}, knobs()), { appearance: Button_interfaces_1.ButtonAppearance.NO_APPEARANCE });
48
- const style = {
49
- padding: '1em',
50
- background: props.theme === Button_interfaces_1.ButtonColors.WHITE ? utils_1.colors.orange.base : 'transparent'
51
- };
52
- return (react_1.default.createElement("div", { style: style },
53
- react_1.default.createElement(Button_1.default, Object.assign({}, props))));
54
- })
55
- .add('Basic', () => {
56
- const props = Object.assign(Object.assign({}, knobs()), { appearance: Button_interfaces_1.ButtonAppearance.BASIC });
57
- const style = {
58
- padding: '1em',
59
- background: props.theme === Button_interfaces_1.ButtonColors.WHITE ? utils_1.colors.orange.base : 'transparent'
60
- };
61
- return (react_1.default.createElement("div", { style: style },
62
- react_1.default.createElement(Button_1.default, Object.assign({}, props))));
15
+ const knobs = () => ({
16
+ disabled: (0, addon_knobs_1.boolean)('Disabled', false),
17
+ icon: react_1.default.createElement(Arrow, null),
18
+ iconPosition: (0, addon_knobs_1.select)('Icon position', Button_interfaces_1.IconPosition, Button_interfaces_1.IconPosition.RIGHT),
19
+ label: (0, addon_knobs_1.text)('Label', 'Click me please'),
20
+ rounded: (0, addon_knobs_1.boolean)('Rounded', false),
21
+ size: (0, addon_knobs_1.select)('Size', Button_interfaces_1.ButtonSizes, Button_interfaces_1.ButtonSizes.LARGE),
22
+ theme: (0, addon_knobs_1.select)('Theme', Button_interfaces_1.ButtonTheme, Button_interfaces_1.ButtonTheme.ORANGE),
23
+ onClick: (0, addon_actions_1.action)('onClick')
24
+ });
25
+ const getStyles = (theme) => ({
26
+ padding: '1em',
27
+ background: theme === Button_interfaces_1.ButtonTheme.WHITE ? utils_1.colors.orange.base : 'transparent'
63
28
  });
29
+ (0, react_2.storiesOf)('Button', module)
30
+ .add('Primary', () => (react_1.default.createElement("div", { style: getStyles(knobs().theme) },
31
+ react_1.default.createElement(Button_1.default, Object.assign({}, Object.assign({}, knobs()), { appearance: Button_interfaces_1.ButtonAppearance.PRIMARY })))))
32
+ .add('Secondary', () => (react_1.default.createElement("div", { style: getStyles(knobs().theme) },
33
+ react_1.default.createElement(Button_1.default, Object.assign({}, Object.assign({}, knobs()), { appearance: Button_interfaces_1.ButtonAppearance.SECONDARY })))))
34
+ .add('No Appearance', () => (react_1.default.createElement("div", { style: getStyles(knobs().theme) },
35
+ react_1.default.createElement(Button_1.default, Object.assign({}, Object.assign({}, knobs()), { appearance: Button_interfaces_1.ButtonAppearance.NO_APPEARANCE })))))
36
+ .add('Basic', () => (react_1.default.createElement("div", { style: getStyles(knobs().theme) },
37
+ react_1.default.createElement(Button_1.default, Object.assign({}, Object.assign({}, knobs()), { appearance: Button_interfaces_1.ButtonAppearance.BASIC })))));
64
38
  //# sourceMappingURL=Button.stories.js.map
package/lib/ui/src/button/Button.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../../packages/ui/src/button/Button.stories.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../../packages/ui/src/button/Button.stories.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAE1B,4DAAkD;AAClD,wDAA+D;AAC/D,4CAA6C;AAE7C,0CAAwC;AACxC,qDAA6B;AAC7B,sDAA8B;AAC9B,2DAK6B;AAE7B,MAAM,EAAE,KAAK,EAAE,GAAG,eAAK,CAAC;AACxB,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,CAAC;IACnB,QAAQ,EAAE,IAAA,qBAAO,EAAC,UAAU,EAAE,KAAK,CAAC;IACpC,IAAI,EAAE,8BAAC,KAAK,OAAG;IACf,YAAY,EAAE,IAAA,oBAAM,EAAC,eAAe,EAAE,gCAAY,EAAE,gCAAY,CAAC,KAAK,CAAC;IACvE,KAAK,EAAE,IAAA,kBAAI,EAAC,OAAO,EAAE,iBAAiB,CAAC;IACvC,OAAO,EAAE,IAAA,qBAAO,EAAC,SAAS,EAAE,KAAK,CAAC;IAClC,IAAI,EAAE,IAAA,oBAAM,EAAC,MAAM,EAAE,+BAAW,EAAE,+BAAW,CAAC,KAAK,CAAC;IACpD,KAAK,EAAE,IAAA,oBAAM,EAAC,OAAO,EAAE,+BAAW,EAAE,+BAAW,CAAC,MAAM,CAAC;IACvD,OAAO,EAAE,IAAA,sBAAM,EAAC,SAAS,CAAC;CAC3B,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,CAAC;IACzC,OAAO,EAAE,KAAK;IACd,UAAU,EAAE,KAAK,KAAK,+BAAW,CAAC,KAAK,CAAC,CAAC,CAAC,cAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa;CAC7E,CAAC,CAAC;AAEH,IAAA,iBAAS,EAAC,QAAQ,EAAE,MAAM,CAAC;KACxB,GAAG,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,CACpB,uCAAK,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC;IAClC,8BAAC,gBAAM,sCAAU,KAAK,EAAE,KAAI,UAAU,EAAE,oCAAgB,CAAC,OAAO,IAAI,CAChE,CACP,CAAC;KACD,GAAG,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,CACtB,uCAAK,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC;IAClC,8BAAC,gBAAM,sCAAU,KAAK,EAAE,KAAI,UAAU,EAAE,oCAAgB,CAAC,SAAS,IAAI,CAClE,CACP,CAAC;KACD,GAAG,CAAC,eAAe,EAAE,GAAG,EAAE,CAAC,CAC1B,uCAAK,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC;IAClC,8BAAC,gBAAM,sCAAU,KAAK,EAAE,KAAI,UAAU,EAAE,oCAAgB,CAAC,aAAa,IAAI,CACtE,CACP,CAAC;KACD,GAAG,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,CAClB,uCAAK,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC;IAClC,8BAAC,gBAAM,sCAAU,KAAK,EAAE,KAAI,UAAU,EAAE,oCAAgB,CAAC,KAAK,IAAI,CAC9D,CACP,CAAC,CAAC"}
package/lib/ui/src/button/Button.styles.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ButtonProps } from './Button.interfaces';
1
+ import { ButtonProps } from './Button';
2
2
  declare type LayoutProps = Pick<ButtonProps, 'appearance' | 'iconPosition' | 'rounded' | 'size' | 'theme' | 'icon'>;
3
3
  export declare const minusPadding: (padding: string) => string;
4
4
  export declare const LabelLayout: import("styled-components").StyledComponent<"div", any, {}, never>;
package/lib/ui/src/button/Button.styles.js CHANGED
@@ -41,11 +41,10 @@ const COMMON_BUTTON = (0, styled_components_1.css) `
41
41
  }
42
42
  `;
43
43
  const primaryStyle = (0, styled_components_1.css) `
44
- ${utils_1.ArchivoFont};
45
44
  ${COMMON_BUTTON};
46
45
  color: white;
47
46
 
48
- ${(props) => props.theme === Button_interfaces_1.ButtonColors.GREEN
47
+ ${({ theme }) => theme === Button_interfaces_1.ButtonTheme.GREEN
49
48
  ? (0, styled_components_1.css) `
50
49
  background-color: ${utils_1.colors.green.base};
51
50
 
@@ -53,7 +52,7 @@ const primaryStyle = (0, styled_components_1.css) `
53
52
  background-color: ${utils_1.colors.green.base80};
54
53
  }
55
54
  `
56
- : props.theme === Button_interfaces_1.ButtonColors.BLACK
55
+ : theme === Button_interfaces_1.ButtonTheme.BLACK
57
56
  ? (0, styled_components_1.css) `
58
57
  background-color: ${utils_1.colors.dark.base};
59
58
 
@@ -61,23 +60,25 @@ const primaryStyle = (0, styled_components_1.css) `
61
60
  background-color: ${utils_1.colors.dark.base60};
62
61
  }
63
62
  `
64
- : props.theme === Button_interfaces_1.ButtonColors.BLUE
63
+ : theme === Button_interfaces_1.ButtonTheme.BLUE
65
64
  ? (0, styled_components_1.css) `
65
+ color: ${utils_1.colors.green.base};
66
66
  background-color: ${utils_1.colors.blue.base};
67
67
 
68
68
  :not(:disabled):hover {
69
69
  background-color: ${utils_1.colors.blue.base60};
70
70
  }
71
71
  `
72
- : props.theme === Button_interfaces_1.ButtonColors.PINK
72
+ : theme === Button_interfaces_1.ButtonTheme.PINK
73
73
  ? (0, styled_components_1.css) `
74
- background-color: ${utils_1.colors.pink.base};
74
+ color: ${utils_1.colors.orange.base};
75
+ background-color: ${utils_1.colors.red.base5};
75
76
 
76
77
  :not(:disabled):hover {
77
78
  background-color: ${utils_1.colors.red.base10};
78
79
  }
79
80
  `
80
- : props.theme === Button_interfaces_1.ButtonColors.RED
81
+ : theme === Button_interfaces_1.ButtonTheme.RED
81
82
  ? (0, styled_components_1.css) `
82
83
  background-color: ${utils_1.colors.red.base};
83
84
 
@@ -85,7 +86,7 @@ const primaryStyle = (0, styled_components_1.css) `
85
86
  background-color: ${utils_1.colors.red.base80};
86
87
  }
87
88
  `
88
- : props.theme === Button_interfaces_1.ButtonColors.WHITE
89
+ : theme === Button_interfaces_1.ButtonTheme.WHITE
89
90
  ? (0, styled_components_1.css) `
90
91
  background-color: white;
91
92
  color: ${utils_1.colors.green.base};
@@ -103,16 +104,14 @@ const primaryStyle = (0, styled_components_1.css) `
103
104
  `};
104
105
  `;
105
106
  const secondaryStyle = (0, styled_components_1.css) `
106
- ${utils_1.ArchivoFont};
107
107
  ${COMMON_BUTTON};
108
-
109
108
  border-color: currentColor;
110
109
 
111
110
  :disabled {
112
111
  border-color: transparent;
113
112
  }
114
113
 
115
- ${(props) => props.theme === Button_interfaces_1.ButtonColors.GREEN
114
+ ${({ theme }) => theme === Button_interfaces_1.ButtonTheme.GREEN
116
115
  ? (0, styled_components_1.css) `
117
116
  color: ${utils_1.colors.green.base};
118
117
 
@@ -120,7 +119,7 @@ const secondaryStyle = (0, styled_components_1.css) `
120
119
  background-color: ${utils_1.colors.green.base20};
121
120
  }
122
121
  `
123
- : props.theme === Button_interfaces_1.ButtonColors.BLACK
122
+ : theme === Button_interfaces_1.ButtonTheme.BLACK
124
123
  ? (0, styled_components_1.css) `
125
124
  color: ${utils_1.colors.dark.base};
126
125
 
@@ -128,7 +127,7 @@ const secondaryStyle = (0, styled_components_1.css) `
128
127
  background-color: ${(0, polished_1.transparentize)(0.8, utils_1.colors.dark.base60)};
129
128
  }
130
129
  `
131
- : props.theme === Button_interfaces_1.ButtonColors.BLUE
130
+ : theme === Button_interfaces_1.ButtonTheme.BLUE
132
131
  ? (0, styled_components_1.css) `
133
132
  color: ${utils_1.colors.blue.base};
134
133
 
@@ -136,7 +135,7 @@ const secondaryStyle = (0, styled_components_1.css) `
136
135
  background-color: ${(0, polished_1.transparentize)(0.8, utils_1.colors.blue.base60)};
137
136
  }
138
137
  `
139
- : props.theme === Button_interfaces_1.ButtonColors.PINK
138
+ : theme === Button_interfaces_1.ButtonTheme.PINK
140
139
  ? (0, styled_components_1.css) `
141
140
  color: ${utils_1.colors.pink.base};
142
141
 
@@ -144,7 +143,7 @@ const secondaryStyle = (0, styled_components_1.css) `
144
143
  background-color: ${(0, polished_1.transparentize)(0.8, utils_1.colors.red.base10)};
145
144
  }
146
145
  `
147
- : props.theme === Button_interfaces_1.ButtonColors.RED
146
+ : theme === Button_interfaces_1.ButtonTheme.RED
148
147
  ? (0, styled_components_1.css) `
149
148
  color: ${utils_1.colors.red.base};
150
149
 
@@ -152,7 +151,7 @@ const secondaryStyle = (0, styled_components_1.css) `
152
151
  background-color: ${(0, polished_1.transparentize)(0.8, utils_1.colors.red.base60)};
153
152
  }
154
153
  `
155
- : props.theme === Button_interfaces_1.ButtonColors.WHITE
154
+ : theme === Button_interfaces_1.ButtonTheme.WHITE
156
155
  ? (0, styled_components_1.css) `
157
156
  color: white;
158
157
 
@@ -175,7 +174,6 @@ const secondaryStyle = (0, styled_components_1.css) `
175
174
  `};
176
175
  `;
177
176
  const noAppearanceStyle = (0, styled_components_1.css) `
178
- ${utils_1.ArchivoFont};
179
177
  color: ${utils_1.colors.orange.base};
180
178
  min-height: 0;
181
179
  padding: 0;
@@ -192,7 +190,7 @@ const noAppearanceStyle = (0, styled_components_1.css) `
192
190
  box-shadow: unset;
193
191
  }
194
192
 
195
- ${(props) => props.theme === Button_interfaces_1.ButtonColors.GREEN
193
+ ${({ theme }) => theme === Button_interfaces_1.ButtonTheme.GREEN
196
194
  ? (0, styled_components_1.css) `
197
195
  color: ${utils_1.colors.green.base};
198
196
 
@@ -200,7 +198,7 @@ const noAppearanceStyle = (0, styled_components_1.css) `
200
198
  color: ${utils_1.colors.green.base80};
201
199
  }
202
200
  `
203
- : props.theme === Button_interfaces_1.ButtonColors.BLACK
201
+ : theme === Button_interfaces_1.ButtonTheme.BLACK
204
202
  ? (0, styled_components_1.css) `
205
203
  color: ${utils_1.colors.dark.base};
206
204
 
@@ -212,7 +210,7 @@ const noAppearanceStyle = (0, styled_components_1.css) `
212
210
  color: ${(0, polished_1.transparentize)(0.6, 'white')};
213
211
  }
214
212
  `
215
- : props.theme === Button_interfaces_1.ButtonColors.BLUE
213
+ : theme === Button_interfaces_1.ButtonTheme.BLUE
216
214
  ? (0, styled_components_1.css) `
217
215
  color: ${utils_1.colors.blue.base};
218
216
 
@@ -220,7 +218,7 @@ const noAppearanceStyle = (0, styled_components_1.css) `
220
218
  color: ${utils_1.colors.blue.base80};
221
219
  }
222
220
  `
223
- : props.theme === Button_interfaces_1.ButtonColors.PINK
221
+ : theme === Button_interfaces_1.ButtonTheme.PINK
224
222
  ? (0, styled_components_1.css) `
225
223
  color: ${utils_1.colors.pink.base};
226
224
 
@@ -228,7 +226,7 @@ const noAppearanceStyle = (0, styled_components_1.css) `
228
226
  color: ${utils_1.colors.pink.base10};
229
227
  }
230
228
  `
231
- : props.theme === Button_interfaces_1.ButtonColors.WHITE
229
+ : theme === Button_interfaces_1.ButtonTheme.WHITE
232
230
  ? (0, styled_components_1.css) `
233
231
  color: white;
234
232
 
@@ -240,7 +238,7 @@ const noAppearanceStyle = (0, styled_components_1.css) `
240
238
  color: ${(0, polished_1.transparentize)(0.6, 'white')};
241
239
  }
242
240
  `
243
- : props.theme === Button_interfaces_1.ButtonColors.RED
241
+ : theme === Button_interfaces_1.ButtonTheme.RED
244
242
  ? (0, styled_components_1.css) `
245
243
  color: ${utils_1.colors.red.base};
246
244
 
@@ -349,7 +347,7 @@ exports.Layout = styled_components_1.default.button `
349
347
  fill: currentColor;
350
348
  }
351
349
 
352
- ${(props) => props.size === Button_interfaces_1.ButtonSizes.FULL
350
+ ${({ size, icon, iconPosition }) => size === Button_interfaces_1.ButtonSizes.FULL
353
351
  ? (0, styled_components_1.css) `
354
352
  font-size: ${utils_1.fonts.base};
355
353
  min-height: ${(0, utils_1.convertPxToRem)(48)};
@@ -357,50 +355,50 @@ exports.Layout = styled_components_1.default.button `
357
355
  justify-content: center;
358
356
  padding: ${(0, exports.minusPadding)((0, utils_1.convertPxToRem)(4))} 0;
359
357
  `
360
- : props.size === Button_interfaces_1.ButtonSizes.BIG
358
+ : size === Button_interfaces_1.ButtonSizes.BIG
361
359
  ? (0, styled_components_1.css) `
362
360
  font-size: ${utils_1.fonts.base};
363
361
  min-height: ${(0, utils_1.convertPxToRem)(48)};
364
362
  padding: ${(0, exports.minusPadding)((0, utils_1.convertPxToRem)(4))}
365
- ${props.icon && props.iconPosition === Button_interfaces_1.IconPosition.RIGHT
363
+ ${icon && iconPosition === Button_interfaces_1.IconPosition.RIGHT
366
364
  ? 0
367
365
  : (0, exports.minusPadding)((0, utils_1.convertPxToRem)(24))}
368
366
  ${(0, exports.minusPadding)((0, utils_1.convertPxToRem)(4))}
369
- ${props.icon && props.iconPosition === Button_interfaces_1.IconPosition.LEFT
367
+ ${icon && iconPosition === Button_interfaces_1.IconPosition.LEFT
370
368
  ? 0
371
369
  : (0, exports.minusPadding)((0, utils_1.convertPxToRem)(24))};
372
370
  `
373
- : props.size === Button_interfaces_1.ButtonSizes.LARGE
371
+ : size === Button_interfaces_1.ButtonSizes.LARGE
374
372
  ? (0, styled_components_1.css) `
375
373
  font-size: ${utils_1.fonts.base};
376
374
  min-height: ${(0, utils_1.convertPxToRem)(40)};
377
375
  padding: ${(0, exports.minusPadding)((0, utils_1.convertPxToRem)(4))}
378
- ${props.icon && props.iconPosition === Button_interfaces_1.IconPosition.RIGHT
376
+ ${icon && iconPosition === Button_interfaces_1.IconPosition.RIGHT
379
377
  ? 0
380
378
  : (0, exports.minusPadding)((0, utils_1.convertPxToRem)(24))}
381
379
  ${(0, exports.minusPadding)((0, utils_1.convertPxToRem)(4))}
382
- ${props.icon && props.iconPosition === Button_interfaces_1.IconPosition.LEFT
380
+ ${icon && iconPosition === Button_interfaces_1.IconPosition.LEFT
383
381
  ? 0
384
382
  : (0, exports.minusPadding)((0, utils_1.convertPxToRem)(24))};
385
383
  `
386
384
  : (0, styled_components_1.css) `
387
385
  min-height: ${(0, utils_1.convertPxToRem)(32)};
388
386
  padding: ${(0, exports.minusPadding)((0, utils_1.convertPxToRem)(4))}
389
- ${props.icon && props.iconPosition === Button_interfaces_1.IconPosition.RIGHT
387
+ ${icon && iconPosition === Button_interfaces_1.IconPosition.RIGHT
390
388
  ? 0
391
389
  : (0, exports.minusPadding)((0, utils_1.convertPxToRem)(16))}
392
390
  ${(0, exports.minusPadding)((0, utils_1.convertPxToRem)(4))}
393
- ${props.icon && props.iconPosition === Button_interfaces_1.IconPosition.LEFT
391
+ ${icon && iconPosition === Button_interfaces_1.IconPosition.LEFT
394
392
  ? 0
395
393
  : (0, exports.minusPadding)((0, utils_1.convertPxToRem)(16))};
396
394
  `}
397
395
 
398
- ${(props) => props.iconPosition === Button_interfaces_1.IconPosition.RIGHT &&
396
+ ${({ iconPosition }) => iconPosition === Button_interfaces_1.IconPosition.RIGHT &&
399
397
  (0, styled_components_1.css) `
400
398
  flex-direction: row-reverse;
401
399
  `}
402
400
 
403
- ${(props) => props.rounded &&
401
+ ${({ rounded }) => rounded &&
404
402
  (0, styled_components_1.css) `
405
403
  border-radius: ${utils_1.radius.rounded};
406
404
  padding: 0;
@@ -411,30 +409,34 @@ exports.Layout = styled_components_1.default.button `
411
409
  }
412
410
  `}
413
411
 
414
- ${(props) => props.rounded &&
415
- props.appearance !== Button_interfaces_1.ButtonAppearance.NO_APPEARANCE &&
416
- props.appearance !== Button_interfaces_1.ButtonAppearance.BASIC &&
412
+ ${({ rounded, size, appearance }) => rounded &&
413
+ appearance !== Button_interfaces_1.ButtonAppearance.NO_APPEARANCE &&
414
+ appearance !== Button_interfaces_1.ButtonAppearance.BASIC &&
417
415
  (0, styled_components_1.css) `
418
- ${props.size === Button_interfaces_1.ButtonSizes.LARGE || props.size === Button_interfaces_1.ButtonSizes.FULL
419
- ? `height: ${(0, utils_1.convertPxToRem)(40)}};
420
- width: ${(0, utils_1.convertPxToRem)(40)}};`
421
- : `height: ${(0, utils_1.convertPxToRem)(32)};
422
- width: ${(0, utils_1.convertPxToRem)(32)};`}
416
+ ${size === Button_interfaces_1.ButtonSizes.LARGE || size === Button_interfaces_1.ButtonSizes.FULL
417
+ ? `
418
+ height: ${(0, utils_1.convertPxToRem)(40)}};
419
+ width: ${(0, utils_1.convertPxToRem)(40)}};
420
+ `
421
+ : `
422
+ height: ${(0, utils_1.convertPxToRem)(32)};
423
+ width: ${(0, utils_1.convertPxToRem)(32)};
424
+ `}
423
425
  `}
424
426
 
425
- ${(props) => props.appearance === Button_interfaces_1.ButtonAppearance.PRIMARY
427
+ ${({ appearance }) => appearance === Button_interfaces_1.ButtonAppearance.PRIMARY
426
428
  ? (0, styled_components_1.css) `
427
429
  ${primaryStyle}
428
430
  `
429
- : props.appearance === Button_interfaces_1.ButtonAppearance.SECONDARY
431
+ : appearance === Button_interfaces_1.ButtonAppearance.SECONDARY
430
432
  ? (0, styled_components_1.css) `
431
433
  ${secondaryStyle}
432
434
  `
433
- : props.appearance === Button_interfaces_1.ButtonAppearance.NO_APPEARANCE
435
+ : appearance === Button_interfaces_1.ButtonAppearance.NO_APPEARANCE
434
436
  ? (0, styled_components_1.css) `
435
437
  ${noAppearanceStyle}
436
438
  `
437
- : props.appearance === Button_interfaces_1.ButtonAppearance.BASIC &&
439
+ : appearance === Button_interfaces_1.ButtonAppearance.BASIC &&
438
440
  (0, styled_components_1.css) `
439
441
  ${noAppearanceStyle}
440
442
  ${basicStyle}