@qiwi/pijma-desktop 1.141.3 → 1.143.1

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