@qiwi/pijma-mobile 1.141.2 → 1.142.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 (4) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/lib/es6/button/Button.js +104 -120
  3. package/lib/es6/link/Link.js +37 -34
  4. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,18 @@
1
+ # @qiwi/pijma-mobile [1.142.0](https://github.com/qiwi/pijma/compare/@qiwi/pijma-mobile@1.141.2...@qiwi/pijma-mobile@1.142.0) (2022-03-24)
2
+
3
+
4
+ ### Features
5
+
6
+ * theme link, button, input, tabs ([#476](https://github.com/qiwi/pijma/issues/476)) ([dc20f15](https://github.com/qiwi/pijma/commit/dc20f156a976b1355044b8b7508b4f62ceb9875f))
7
+
8
+
9
+
10
+
11
+
12
+ ### Dependencies
13
+
14
+ * **@qiwi/pijma-core:** upgraded to 1.145.0
15
+
1
16
  ## @qiwi/pijma-mobile [1.141.2](https://github.com/qiwi/pijma/compare/@qiwi/pijma-mobile@1.141.1...@qiwi/pijma-mobile@1.141.2) (2022-03-23)
2
17
 
3
18
 
package/lib/es6/button/Button.js CHANGED
@@ -8,29 +8,14 @@ import {
8
8
  FlexItem,
9
9
  Typo,
10
10
  Btn,
11
- Stub
11
+ Stub,
12
+ useTheme
12
13
  } from "@qiwi/pijma-core";
13
14
  const buttonSize = {
14
15
  accent: 12,
15
16
  normal: 10,
16
17
  minor: 8
17
18
  };
18
- const buttonBackground = {
19
- brand: "#ff8c00",
20
- simple: "#fff padding-box"
21
- };
22
- const buttonHoverBackground = {
23
- brand: "#ff8200",
24
- simple: "#fff padding-box"
25
- };
26
- const buttonBorder = {
27
- brand: "none",
28
- simple: "1px solid rgba(0, 0, 0, 0.14)"
29
- };
30
- const buttonHoverBorder = {
31
- brand: "none",
32
- simple: "1px solid rgba(0, 0, 0, 0.28)"
33
- };
34
19
  const buttonRadius = {
35
20
  accent: 24,
36
21
  normal: 20,
@@ -61,10 +46,6 @@ const textHeight = {
61
46
  normal: 4,
62
47
  minor: 4
63
48
  };
64
- const textColor = {
65
- brand: "#fff",
66
- simple: "#000"
67
- };
68
49
  const stubHeight = {
69
50
  accent: 3,
70
51
  normal: 2,
@@ -75,112 +56,115 @@ const stubWidth = {
75
56
  normal: 21,
76
57
  minor: 19
77
58
  };
78
- export const Button = (props) => props.stub ? /* @__PURE__ */ React.createElement(Card, {
79
- width: !props.icon || props.text ? 1 : buttonSize[props.size],
80
- height: buttonSize[props.size],
81
- bg: buttonBackground.simple,
82
- b: buttonBorder.simple,
83
- r: buttonRadius[props.size]
84
- }, /* @__PURE__ */ React.createElement(Flex, {
85
- align: "center",
86
- justify: "center",
87
- width: 1,
88
- height: 1,
89
- px: props.icon && !props.text ? 0 : contextPaddingX[props.size]
90
- }, /* @__PURE__ */ React.createElement(Fragment, null, props.icon ? /* @__PURE__ */ React.createElement(FlexItem, {
91
- shrink: 0,
92
- mr: props.text ? iconMargin[props.size] : 0,
93
- width: iconSize[props.size],
94
- height: iconSize[props.size]
95
- }, /* @__PURE__ */ React.createElement(Stub, {
96
- top: 0.5,
97
- right: 0.5,
98
- bottom: 0.5,
99
- left: 0.5,
100
- width: iconSize[props.size] - 1,
101
- height: iconSize[props.size] - 1,
102
- r: (iconSize[props.size] - 1) * 2
103
- })) : null, props.text || !props.icon ? /* @__PURE__ */ React.createElement(Stub, {
104
- width: stubWidth[props.size] - (props.icon ? 9 : 0),
105
- height: stubHeight[props.size]
106
- }) : null))) : /* @__PURE__ */ React.createElement(ButtonControl, {
107
- onClick: props.onClick,
108
- onFocus: props.onFocus,
109
- onBlur: props.onBlur,
110
- children: (renderProps) => /* @__PURE__ */ React.createElement(Btn, {
111
- disabled: props.disabled,
112
- type: props.type,
59
+ export const Button = (props) => {
60
+ const theme = useTheme();
61
+ return props.stub ? /* @__PURE__ */ React.createElement(Card, {
113
62
  width: !props.icon || props.text ? 1 : buttonSize[props.size],
114
63
  height: buttonSize[props.size],
115
- bg: props.disabled ? "#e6e6e6" : renderProps.hover || renderProps.focus ? buttonHoverBackground[props.kind] : buttonBackground[props.kind],
116
- b: props.disabled ? "none" : renderProps.hover || renderProps.focus ? buttonHoverBorder[props.kind] : buttonBorder[props.kind],
117
- r: buttonRadius[props.size],
118
- transition: "all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
119
- onClick: renderProps.onClick,
120
- onFocus: renderProps.onFocus,
121
- onBlur: renderProps.onBlur,
122
- onMouseEnter: renderProps.onMouseEnter,
123
- onMouseLeave: renderProps.onMouseLeave,
124
- children: /* @__PURE__ */ React.createElement(Pos, {
125
- type: "relative",
126
- width: 1,
127
- height: 1,
128
- cursor: props.disabled ? "not-allowed" : "pointer",
129
- children: /* @__PURE__ */ React.createElement(Flex, {
130
- align: "center",
131
- justify: "center",
64
+ bg: theme.button.bg.kind.simple,
65
+ b: theme.button.border.kind.simple,
66
+ r: buttonRadius[props.size]
67
+ }, /* @__PURE__ */ React.createElement(Flex, {
68
+ align: "center",
69
+ justify: "center",
70
+ width: 1,
71
+ height: 1,
72
+ px: props.icon && !props.text ? 0 : contextPaddingX[props.size]
73
+ }, /* @__PURE__ */ React.createElement(Fragment, null, props.icon ? /* @__PURE__ */ React.createElement(FlexItem, {
74
+ shrink: 0,
75
+ mr: props.text ? iconMargin[props.size] : 0,
76
+ width: iconSize[props.size],
77
+ height: iconSize[props.size]
78
+ }, /* @__PURE__ */ React.createElement(Stub, {
79
+ top: 0.5,
80
+ right: 0.5,
81
+ bottom: 0.5,
82
+ left: 0.5,
83
+ width: iconSize[props.size] - 1,
84
+ height: iconSize[props.size] - 1,
85
+ r: (iconSize[props.size] - 1) * 2
86
+ })) : null, props.text || !props.icon ? /* @__PURE__ */ React.createElement(Stub, {
87
+ width: stubWidth[props.size] - (props.icon ? 9 : 0),
88
+ height: stubHeight[props.size]
89
+ }) : null))) : /* @__PURE__ */ React.createElement(ButtonControl, {
90
+ onClick: props.onClick,
91
+ onFocus: props.onFocus,
92
+ onBlur: props.onBlur,
93
+ children: (renderProps) => /* @__PURE__ */ React.createElement(Btn, {
94
+ disabled: props.disabled,
95
+ type: props.type,
96
+ width: !props.icon || props.text ? 1 : buttonSize[props.size],
97
+ height: buttonSize[props.size],
98
+ bg: props.disabled ? "#e6e6e6" : renderProps.hover || renderProps.focus ? theme.button.bg.hover[props.kind] : theme.button.bg.kind[props.kind],
99
+ b: props.disabled ? "none" : renderProps.hover || renderProps.focus ? theme.button.border.hover[props.kind] : theme.button.border.kind[props.kind],
100
+ r: buttonRadius[props.size],
101
+ transition: "all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
102
+ onClick: renderProps.onClick,
103
+ onFocus: renderProps.onFocus,
104
+ onBlur: renderProps.onBlur,
105
+ onMouseEnter: renderProps.onMouseEnter,
106
+ onMouseLeave: renderProps.onMouseLeave,
107
+ children: /* @__PURE__ */ React.createElement(Pos, {
108
+ type: "relative",
132
109
  width: 1,
133
110
  height: 1,
134
- px: props.icon && !props.text ? 0 : contextPaddingX[props.size],
135
- transition: "all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
136
- children: /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(Pos, {
137
- type: "absolute",
138
- top: 0,
139
- right: 0,
140
- bottom: 0,
141
- left: 0,
142
- opacity: props.loading ? renderProps.hover || renderProps.active || renderProps.focus ? 0.9 : 1 : 0,
111
+ cursor: props.disabled ? "not-allowed" : "pointer",
112
+ children: /* @__PURE__ */ React.createElement(Flex, {
113
+ align: "center",
114
+ justify: "center",
115
+ width: 1,
116
+ height: 1,
117
+ px: props.icon && !props.text ? 0 : contextPaddingX[props.size],
143
118
  transition: "all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
144
- children: /* @__PURE__ */ React.createElement(Flex, {
145
- align: "center",
146
- justify: "center",
147
- width: 1,
148
- height: 1,
149
- children: /* @__PURE__ */ React.createElement(Spinner, {
150
- paused: !props.loading,
151
- width: iconSize[props.size],
152
- height: iconSize[props.size],
153
- color: props.disabled ? "#666" : textColor[props.kind]
119
+ children: /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(Pos, {
120
+ type: "absolute",
121
+ top: 0,
122
+ right: 0,
123
+ bottom: 0,
124
+ left: 0,
125
+ opacity: props.loading ? renderProps.hover || renderProps.active || renderProps.focus ? 0.9 : 1 : 0,
126
+ transition: "all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
127
+ children: /* @__PURE__ */ React.createElement(Flex, {
128
+ align: "center",
129
+ justify: "center",
130
+ width: 1,
131
+ height: 1,
132
+ children: /* @__PURE__ */ React.createElement(Spinner, {
133
+ paused: !props.loading,
134
+ width: iconSize[props.size],
135
+ height: iconSize[props.size],
136
+ color: props.disabled ? "#666" : theme.button.text.color[props.kind]
137
+ })
154
138
  })
155
- })
156
- }), props.icon ? /* @__PURE__ */ React.createElement(FlexItem, {
157
- shrink: 0,
158
- opacity: props.loading ? 0 : renderProps.hover || renderProps.active || renderProps.focus ? 0.9 : 1,
159
- mr: props.text ? iconMargin[props.size] : 0,
160
- width: iconSize[props.size],
161
- height: iconSize[props.size],
162
- transition: "all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
163
- children: React.cloneElement(props.icon, {
164
- color: props.disabled ? "#666" : props.kind === "brand" ? "#fff" : "#000",
165
- size: 1
166
- })
167
- }) : null, props.text || !props.icon ? /* @__PURE__ */ React.createElement(FlexItem, {
168
- opacity: props.loading ? 0 : renderProps.hover || renderProps.active || renderProps.focus ? 0.9 : 1,
169
- overflow: "hidden",
170
- transition: "all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
171
- children: /* @__PURE__ */ React.createElement(Typo, {
172
- nowrap: true,
173
- display: "block",
174
- weight: 500,
175
- color: props.disabled ? "#666" : textColor[props.kind],
176
- size: textSize[props.size],
177
- height: textHeight[props.size],
139
+ }), props.icon ? /* @__PURE__ */ React.createElement(FlexItem, {
140
+ shrink: 0,
141
+ opacity: props.loading ? 0 : renderProps.hover || renderProps.active || renderProps.focus ? 0.9 : 1,
142
+ mr: props.text ? iconMargin[props.size] : 0,
143
+ width: iconSize[props.size],
144
+ height: iconSize[props.size],
145
+ transition: "all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
146
+ children: React.cloneElement(props.icon, {
147
+ color: props.disabled ? "#666" : props.kind === "brand" ? "#fff" : "#000",
148
+ size: 1
149
+ })
150
+ }) : null, props.text || !props.icon ? /* @__PURE__ */ React.createElement(FlexItem, {
151
+ opacity: props.loading ? 0 : renderProps.hover || renderProps.active || renderProps.focus ? 0.9 : 1,
152
+ overflow: "hidden",
178
153
  transition: "all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
179
- children: props.text
180
- })
181
- }) : null)
154
+ children: /* @__PURE__ */ React.createElement(Typo, {
155
+ nowrap: true,
156
+ display: "block",
157
+ weight: 500,
158
+ color: props.disabled ? "#666" : theme.button.text.color[props.kind],
159
+ size: textSize[props.size],
160
+ height: textHeight[props.size],
161
+ transition: "all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
162
+ children: props.text
163
+ })
164
+ }) : null)
165
+ })
182
166
  })
183
167
  })
184
- })
185
- });
168
+ });
169
+ };
186
170
  Button.displayName = "Button";
package/lib/es6/link/Link.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { LinkControl, Stub, TypoLnk } from "@qiwi/pijma-core";
2
+ import { LinkControl, Stub, TypoLnk, useTheme } from "@qiwi/pijma-core";
3
3
  const LinkSize = {
4
4
  s: 3.5,
5
5
  m: 4,
@@ -30,41 +30,44 @@ const LinkHeightCompact = {
30
30
  m: 5,
31
31
  l: 7
32
32
  };
33
- export const Link = (props) => props.stub ? props.size === void 0 ? null : /* @__PURE__ */ React.createElement(Stub, {
34
- top: props.compact ? StubOffSetCompact[props.size] : StubOffSet[props.size],
35
- bottom: props.compact ? StubOffSetCompact[props.size] : StubOffSet[props.size],
36
- height: StubLinkSize[props.size],
37
- width: 1
38
- }) : /* @__PURE__ */ React.createElement(LinkControl, {
39
- onClick: props.onClick,
40
- onFocus: props.onFocus,
41
- onBlur: props.onBlur,
42
- href: props.href,
43
- target: props.target,
44
- download: props.download,
45
- rel: props.rel,
46
- children: (renderProps) => /* @__PURE__ */ React.createElement(TypoLnk, {
47
- tabIndex: props.tabIndex,
33
+ export const Link = (props) => {
34
+ const theme = useTheme();
35
+ return props.stub ? props.size === void 0 ? null : /* @__PURE__ */ React.createElement(Stub, {
36
+ top: props.compact ? StubOffSetCompact[props.size] : StubOffSet[props.size],
37
+ bottom: props.compact ? StubOffSetCompact[props.size] : StubOffSet[props.size],
38
+ height: StubLinkSize[props.size],
39
+ width: 1
40
+ }) : /* @__PURE__ */ React.createElement(LinkControl, {
41
+ onClick: props.onClick,
42
+ onFocus: props.onFocus,
43
+ onBlur: props.onBlur,
48
44
  href: props.href,
49
- onClick: renderProps.onClick,
50
- onFocus: renderProps.onFocus,
51
- onBlur: renderProps.onBlur,
52
- onMouseEnter: renderProps.onMouseEnter,
53
- onMouseLeave: renderProps.onMouseLeave,
54
- onMouseUp: renderProps.onMouseUp,
55
- onMouseDown: renderProps.onMouseDown,
56
- color: renderProps.hover || renderProps.focus ? props.inverse ? "#CCC" : "#FF8C00" : props.inverse ? "#FFF" : "#0055BB",
57
- transition: "all 100ms cubic-bezier(0.4, 0.0, 0.2, 1)",
58
- cursor: "pointer",
59
- decoration: "none",
60
45
  target: props.target,
61
46
  download: props.download,
62
47
  rel: props.rel,
63
- title: props.title,
64
- size: props.size === void 0 ? void 0 : props.compact ? LinkHeightCompact[props.size] : LinkSize[props.size],
65
- height: props.size === void 0 ? void 0 : LinkHeight[props.size],
66
- weight: props.bold === void 0 ? void 0 : props.bold ? 500 : 300,
67
- children: props.children
68
- })
69
- });
48
+ children: (renderProps) => /* @__PURE__ */ React.createElement(TypoLnk, {
49
+ tabIndex: props.tabIndex,
50
+ href: props.href,
51
+ onClick: renderProps.onClick,
52
+ onFocus: renderProps.onFocus,
53
+ onBlur: renderProps.onBlur,
54
+ onMouseEnter: renderProps.onMouseEnter,
55
+ onMouseLeave: renderProps.onMouseLeave,
56
+ onMouseUp: renderProps.onMouseUp,
57
+ onMouseDown: renderProps.onMouseDown,
58
+ color: renderProps.hover || renderProps.focus ? props.inverse ? theme.link.color.inverse.hover : theme.link.color.brand.hover : props.inverse ? theme.link.color.inverse.default : theme.link.color.brand.default,
59
+ transition: "all 100ms cubic-bezier(0.4, 0.0, 0.2, 1)",
60
+ cursor: "pointer",
61
+ decoration: "none",
62
+ target: props.target,
63
+ download: props.download,
64
+ rel: props.rel,
65
+ title: props.title,
66
+ size: props.size === void 0 ? void 0 : props.compact ? LinkHeightCompact[props.size] : LinkSize[props.size],
67
+ height: props.size === void 0 ? void 0 : LinkHeight[props.size],
68
+ weight: props.bold === void 0 ? void 0 : props.bold ? 500 : 300,
69
+ children: props.children
70
+ })
71
+ });
72
+ };
70
73
  Link.displayName = "Link";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qiwi/pijma-mobile",
3
- "version": "1.141.2",
3
+ "version": "1.142.0",
4
4
  "main": "./lib/es6/index.js",
5
5
  "types": "./lib/es6/index.d.ts",
6
6
  "license": "MIT",
@@ -26,7 +26,7 @@
26
26
  "lib"
27
27
  ],
28
28
  "dependencies": {
29
- "@qiwi/pijma-core": "1.144.0",
29
+ "@qiwi/pijma-core": "1.145.0",
30
30
  "@qiwi/pijma-fonts": "1.0.0"
31
31
  },
32
32
  "devDependencies": {