@redocly/theme 0.53.0 → 0.54.0-next.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 (15) hide show
  1. package/lib/components/Feedback/Mood.js +13 -2
  2. package/lib/components/Feedback/Rating.js +13 -2
  3. package/lib/components/Feedback/Scale.js +13 -2
  4. package/lib/components/Feedback/Sentiment.js +13 -2
  5. package/lib/components/Switch/Switch.js +22 -8
  6. package/lib/components/Switch/variables.dark.js +23 -9
  7. package/lib/components/Switch/variables.js +18 -4
  8. package/package.json +2 -2
  9. package/src/components/Feedback/Mood.tsx +15 -2
  10. package/src/components/Feedback/Rating.tsx +15 -2
  11. package/src/components/Feedback/Scale.tsx +15 -2
  12. package/src/components/Feedback/Sentiment.tsx +15 -4
  13. package/src/components/Switch/Switch.tsx +25 -10
  14. package/src/components/Switch/variables.dark.ts +23 -9
  15. package/src/components/Switch/variables.ts +18 -4
package/lib/components/Feedback/Mood.js CHANGED
@@ -157,10 +157,15 @@ function Mood({ settings, onSubmit, className }) {
157
157
  }, onChange: setReasons })),
158
158
  displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } })))),
159
159
  displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
160
- React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
160
+ React.createElement(InputLabel, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
161
161
  translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
162
162
  React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
163
- translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
163
+ translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email, onKeyDown: (e) => {
164
+ if (e.key === 'Enter') {
165
+ e.preventDefault();
166
+ onSubmitMoodForm();
167
+ }
168
+ } }))),
164
169
  displaySubmitBnt && (React.createElement(ButtonsContainer, null,
165
170
  React.createElement(Button_1.Button, { onClick: onCancelMoodForm, variant: "text", size: "small" }, "Cancel"),
166
171
  React.createElement(Button_1.Button, { type: "submit", variant: "secondary", size: "small" }, "Submit"))))));
@@ -199,6 +204,12 @@ const Label = styled_components_1.default.h4 `
199
204
 
200
205
  margin: 0;
201
206
  `;
207
+ const InputLabel = styled_components_1.default.h4 `
208
+ font-weight: var(--font-weight-regular);
209
+ font-size: var(--feedback-font-size);
210
+ line-height: var(--feedback-line-height);
211
+ margin: 0;
212
+ `;
202
213
  const ButtonsContainer = styled_components_1.default.div `
203
214
  display: flex;
204
215
  justify-content: end;
package/lib/components/Feedback/Rating.js CHANGED
@@ -102,10 +102,15 @@ function Rating({ settings, onSubmit, className }) {
102
102
  translate('feedback.settings.comment.label', 'Please share your feedback with us.'),
103
103
  } })))),
104
104
  displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
105
- React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
105
+ React.createElement(InputLabel, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
106
106
  translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
107
107
  React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
108
- translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
108
+ translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email, onKeyDown: (e) => {
109
+ if (e.key === 'Enter') {
110
+ e.preventDefault();
111
+ onSubmitRatingForm();
112
+ }
113
+ } }))),
109
114
  displaySubmitBnt && (React.createElement(ButtonsContainer, null,
110
115
  React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "text", size: "small" }, "Cancel"),
111
116
  React.createElement(Button_1.Button, { onClick: onSubmitRatingForm, variant: "secondary", size: "small" }, "Submit"))))));
@@ -143,6 +148,12 @@ const Label = styled_components_1.default.h4 `
143
148
  color: var(--feedback-header-text-color);
144
149
  margin: 0;
145
150
  `;
151
+ const InputLabel = styled_components_1.default.h4 `
152
+ font-weight: var(--font-weight-regular);
153
+ font-size: var(--feedback-font-size);
154
+ line-height: var(--feedback-line-height);
155
+ margin: 0;
156
+ `;
146
157
  const ButtonsContainer = styled_components_1.default.div `
147
158
  display: flex;
148
159
  justify-content: end;
package/lib/components/Feedback/Scale.js CHANGED
@@ -109,10 +109,15 @@ function Scale({ settings, onSubmit, className }) {
109
109
  translate('feedback.settings.comment.label', 'Please share your feedback with us.'),
110
110
  } }))),
111
111
  displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
112
- React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
112
+ React.createElement(InputLabel, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
113
113
  translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
114
114
  React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
115
- translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
115
+ translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email, onKeyDown: (e) => {
116
+ if (e.key === 'Enter') {
117
+ e.preventDefault();
118
+ onSubmitScaleForm();
119
+ }
120
+ } }))),
116
121
  displaySubmitBnt && (React.createElement(ButtonsContainer, null,
117
122
  React.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.comment.cancel", onClick: handleCancel, variant: "text", size: "small" }, translate('feedback.settings.comment.cancel', 'Cancel')),
118
123
  React.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.scale.send", type: "submit", variant: "secondary", size: "small" }, translate('feedback.settings.scale.send', 'Submit')))))));
@@ -132,6 +137,12 @@ const Label = styled_components_1.default.h4 `
132
137
  margin: 0;
133
138
  width: 100%;
134
139
  `;
140
+ const InputLabel = styled_components_1.default.h4 `
141
+ font-weight: var(--font-weight-regular);
142
+ font-size: var(--feedback-font-size);
143
+ line-height: var(--feedback-line-height);
144
+ margin: 0;
145
+ `;
135
146
  const SubLabelContainer = styled_components_1.default.div `
136
147
  display: flex;
137
148
  justify-content: space-between;
package/lib/components/Feedback/Sentiment.js CHANGED
@@ -141,10 +141,15 @@ function Sentiment({ settings, onSubmit, className }) {
141
141
  }, onChange: setReasons })),
142
142
  displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } })))),
143
143
  displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
144
- React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
144
+ React.createElement(InputLabel, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
145
145
  translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
146
146
  React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
147
- translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
147
+ translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email, onKeyDown: (e) => {
148
+ if (e.key === 'Enter') {
149
+ e.preventDefault();
150
+ onSubmitSentimentForm();
151
+ }
152
+ } }))),
148
153
  displaySubmitBnt && (React.createElement(ButtonsContainer, null,
149
154
  React.createElement(Button_1.Button, { onClick: onCancelSentimentForm, variant: "text", size: "small" }, "Cancel"),
150
155
  React.createElement(Button_1.Button, { onClick: onSubmitSentimentForm, variant: "secondary", size: "small" }, "Submit"))))));
@@ -163,6 +168,12 @@ const Label = styled_components_1.default.h4 `
163
168
  color: var(--feedback-header-text-color);
164
169
  margin: 0;
165
170
  `;
171
+ const InputLabel = styled_components_1.default.h4 `
172
+ font-weight: var(--font-weight-regular);
173
+ font-size: var(--feedback-font-size);
174
+ line-height: var(--feedback-line-height);
175
+ margin: 0;
176
+ `;
166
177
  const StyledForm = styled_components_1.default.form `
167
178
  width: 100%;
168
179
  gap: var(--spacing-sm);
package/lib/components/Switch/Switch.js CHANGED
@@ -36,14 +36,22 @@ function Switch({ value = false, disabled = false, onChange }) {
36
36
  onChange(!value);
37
37
  };
38
38
  return (react_1.default.createElement(SwitchWrapper, { onClick: handleClick, role: "switch", selected: value, disabled: disabled },
39
- react_1.default.createElement(Knob, { selected: value })));
39
+ react_1.default.createElement(Knob, { selected: value, disabled: disabled })));
40
40
  }
41
41
  const SwitchWrapper = styled_components_1.default.div `
42
42
  width: var(--switch-width);
43
43
  height: var(--switch-height);
44
44
  border-radius: var(--switch-border-radius);
45
+ border: var(--switch-border-width) solid
46
+ ${({ selected, disabled }) => disabled
47
+ ? 'var(--switch-border-color-disabled)'
48
+ : selected
49
+ ? 'var(--switch-border-color-selected)'
50
+ : 'var(--switch-border-color)'};
45
51
  background-color: ${({ selected, disabled }) => disabled
46
- ? 'var(--switch-bg-color-disabled)'
52
+ ? selected
53
+ ? 'var(--switch-bg-color-disabled-selected)'
54
+ : 'var(--switch-bg-color-disabled)'
47
55
  : selected
48
56
  ? 'var(--switch-bg-color-selected)'
49
57
  : 'var(--switch-bg-color)'};
@@ -53,22 +61,28 @@ const SwitchWrapper = styled_components_1.default.div `
53
61
  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
54
62
  transition: var(--switch-bg-transition);
55
63
 
56
- ${({ disabled }) => !disabled &&
64
+ ${({ selected, disabled }) => !disabled &&
65
+ !selected &&
57
66
  (0, styled_components_1.css) `
58
67
  &:hover {
59
68
  background-color: var(--switch-bg-color-hover);
69
+ border: var(--switch-border-width) solid var(--switch-border-color-hover);
70
+ }
71
+ &:active {
72
+ background-color: var(--switch-bg-color-pressed);
73
+ border: var(--switch-border-width) solid var(--switch-border-color-pressed);
60
74
  }
61
75
  `}
62
-
63
- &:active {
64
- background-color: var(--switch-bg-color-pressed);
65
- }
66
76
  `;
67
77
  const Knob = styled_components_1.default.div `
68
78
  width: var(--switch-knob-width);
69
79
  height: var(--switch-knob-height);
70
80
  border-radius: var(--switch-knob-border-radius);
71
- background-color: ${({ selected }) => selected ? 'var(--switch-knob-bg-color-selected)' : 'var(--switch-knob-bg-color)'};
81
+ background-color: ${({ selected, disabled }) => disabled
82
+ ? 'var(--switch-knob-bg-color-disabled)'
83
+ : selected
84
+ ? 'var(--switch-knob-bg-color-selected)'
85
+ : 'var(--switch-knob-bg-color)'};
72
86
  transform: ${({ selected }) => selected ? 'translateX(var(--switch-knob-width))' : 'translateX(0)'};
73
87
  transition: var(--switch-knob-transition);
74
88
  `;
package/lib/components/Switch/variables.dark.js CHANGED
@@ -3,19 +3,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.switcherDarkMode = void 0;
4
4
  const styled_components_1 = require("styled-components");
5
5
  exports.switcherDarkMode = (0, styled_components_1.css) `
6
- --switch-bg-color: var(--color-warm-grey-6); // @presenter Color
7
- --switch-bg-color-selected: var(--color-warm-grey-6); // @presenter Color
8
- --switch-bg-color-hover: var(--color-warm-grey-7); // @presenter Color
9
- --switch-bg-color-pressed: var(--color-warm-grey-7); // @presenter Color
10
- --switch-bg-color-disabled: var(--color-warm-grey-5); // @presenter Color
11
- --switch-knob-bg-color: var(--color-warm-grey-8); // @presenter Color
12
- --switch-knob-bg-color-selected: var(--color-warm-grey-11); // @presenter Color
6
+ --switch-bg-color: transparent; // @presenter Color
7
+ --switch-bg-color-selected: var(--color-warm-grey-7); // @presenter Color
8
+ --switch-bg-color-hover: transparent; // @presenter Color
9
+ --switch-bg-color-pressed: transparent; // @presenter Color
10
+ --switch-bg-color-disabled: transparent; // @presenter Color
11
+ --switch-bg-color-disabled-selected: var(--color-warm-grey-5); // @presenter Color
12
+
13
+ --switch-border-color: var(--color-warm-grey-6); // @presenter Color
14
+ --switch-border-color-hover: var(--color-warm-grey-7); // @presenter Color
15
+ --switch-border-color-pressed: var(--color-warm-grey-8); // @presenter Color
16
+ --switch-border-color-disabled: var(--color-warm-grey-5); // @presenter Color
17
+ --switch-border-color-selected: var(--color-warm-grey-7); // @presenter Color
18
+ --switch-border-width: var(--border-width); // @presenter Border
13
19
  --switch-border-radius: var(--border-radius); // @presenter BorderRadius
14
- --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
20
+
15
21
  --switch-width: 32px; // @presenter Width
16
22
  --switch-height: 18px; // @presenter Height
17
- --switch-padding: calc(var(--spacing-xxs) / 2); // @presenter Padding
23
+ --switch-padding: calc((var(--spacing-xxs) / 2) - var(--switch-border-width)); // @presenter Padding
18
24
  --switch-bg-transition: background-color 0.3s; // @presenter Transition
25
+
26
+ // Knob
27
+
28
+ --switch-knob-bg-color: var(--color-warm-grey-8); // @presenter Color
29
+ --switch-knob-bg-color-selected: var(--color-static-white); // @presenter Color
30
+ --switch-knob-bg-color-disabled: var(--color-warm-grey-6); // @presenter Color
31
+
32
+ --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
19
33
  --switch-knob-height: 14px; // @presenter Height
20
34
  --switch-knob-width: 14px; // @presenter Width
21
35
  --switch-knob-transition: all 0.3s; // @presenter Transition
package/lib/components/Switch/variables.js CHANGED
@@ -8,14 +8,28 @@ exports.switcher = (0, styled_components_1.css) `
8
8
  --switch-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
9
9
  --switch-bg-color-pressed: var(--color-warm-grey-6); // @presenter Color
10
10
  --switch-bg-color-disabled: var(--color-warm-grey-3); // @presenter Color
11
- --switch-knob-bg-color: var(--color-white); // @presenter Color
12
- --switch-knob-bg-color-selected: var(--color-white); // @presenter Color
11
+ --switch-bg-color-disabled-selected: var(--color-warm-grey-3); // @presenter Color
12
+
13
+ --switch-border-color: transparent; // @presenter Color
14
+ --switch-border-color-hover: transparent; // @presenter Color
15
+ --switch-border-color-pressed: transparent; // @presenter Color
16
+ --switch-border-color-disabled: transparent; // @presenter Color
17
+ --switch-border-color-selected: transparent; // @presenter Color
13
18
  --switch-border-radius: var(--border-radius); // @presenter BorderRadius
14
- --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
19
+ --switch-border-width: var(--border-width); // @presenter Border
20
+
15
21
  --switch-width: 32px; // @presenter Width
16
22
  --switch-height: 18px; // @presenter Height
17
- --switch-padding: calc(var(--spacing-xxs) / 2); // @presenter Padding
23
+ --switch-padding: calc((var(--spacing-xxs) / 2) - var(--switch-border-width)); // @presenter Padding
18
24
  --switch-bg-transition: background-color 0.3s; // @presenter Transition
25
+
26
+ // Knob
27
+
28
+ --switch-knob-bg-color: var(--color-white); // @presenter Color
29
+ --switch-knob-bg-color-selected: var(--color-white); // @presenter Color
30
+ --switch-knob-bg-color-disabled: var(--color-warm-grey-1); // @presenter Color
31
+
32
+ --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
19
33
  --switch-knob-height: 14px; // @presenter Height
20
34
  --switch-knob-width: 14px; // @presenter Width
21
35
  --switch-knob-transition: transform 0.3s; // @presenter Transition
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.53.0",
3
+ "version": "0.54.0-next.1",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
@@ -47,7 +47,7 @@
47
47
  "@types/jest-when": "3.5.5",
48
48
  "@types/lodash.debounce": "4.0.9",
49
49
  "@types/lodash.throttle": "4.1.9",
50
- "@types/node": "22.10.5",
50
+ "@types/node": "22.15.3",
51
51
  "@types/nprogress": "0.2.3",
52
52
  "@types/react": "18.3.9",
53
53
  "@types/react-dom": "18.3.5",
package/src/components/Feedback/Mood.tsx CHANGED
@@ -240,13 +240,13 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
240
240
 
241
241
  {displayFeedbackEmail && (
242
242
  <StyledFormOptionalFields>
243
- <Label data-translation-key="feedback.settings.optionalEmail.label">
243
+ <InputLabel data-translation-key="feedback.settings.optionalEmail.label">
244
244
  {optionalEmailSettings?.label ||
245
245
  translate(
246
246
  'feedback.settings.optionalEmail.label',
247
247
  'Your email (optional, for follow-up)',
248
248
  )}
249
- </Label>
249
+ </InputLabel>
250
250
  <EmailInput
251
251
  onChange={onEmailChange}
252
252
  placeholder={
@@ -255,6 +255,12 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
255
255
  }
256
256
  type="email"
257
257
  required={!!email}
258
+ onKeyDown={(e) => {
259
+ if (e.key === 'Enter') {
260
+ e.preventDefault();
261
+ onSubmitMoodForm();
262
+ }
263
+ }}
258
264
  />
259
265
  </StyledFormOptionalFields>
260
266
  )}
@@ -312,6 +318,13 @@ const Label = styled.h4<{ standAlone?: boolean }>`
312
318
  margin: 0;
313
319
  `;
314
320
 
321
+ const InputLabel = styled.h4`
322
+ font-weight: var(--font-weight-regular);
323
+ font-size: var(--feedback-font-size);
324
+ line-height: var(--feedback-line-height);
325
+ margin: 0;
326
+ `;
327
+
315
328
  const ButtonsContainer = styled.div`
316
329
  display: flex;
317
330
  justify-content: end;
package/src/components/Feedback/Rating.tsx CHANGED
@@ -153,13 +153,13 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
153
153
 
154
154
  {displayFeedbackEmail && (
155
155
  <StyledFormOptionalFields>
156
- <Label data-translation-key="feedback.settings.optionalEmail.label">
156
+ <InputLabel data-translation-key="feedback.settings.optionalEmail.label">
157
157
  {optionalEmailSettings?.label ||
158
158
  translate(
159
159
  'feedback.settings.optionalEmail.label',
160
160
  'Your email (optional, for follow-up)',
161
161
  )}
162
- </Label>
162
+ </InputLabel>
163
163
  <EmailInput
164
164
  onChange={onEmailChange}
165
165
  placeholder={
@@ -168,6 +168,12 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
168
168
  }
169
169
  type="email"
170
170
  required={!!email}
171
+ onKeyDown={(e) => {
172
+ if (e.key === 'Enter') {
173
+ e.preventDefault();
174
+ onSubmitRatingForm();
175
+ }
176
+ }}
171
177
  />
172
178
  </StyledFormOptionalFields>
173
179
  )}
@@ -226,6 +232,13 @@ const Label = styled.h4`
226
232
  margin: 0;
227
233
  `;
228
234
 
235
+ const InputLabel = styled.h4`
236
+ font-weight: var(--font-weight-regular);
237
+ font-size: var(--feedback-font-size);
238
+ line-height: var(--feedback-line-height);
239
+ margin: 0;
240
+ `;
241
+
229
242
  const ButtonsContainer = styled.div`
230
243
  display: flex;
231
244
  justify-content: end;
package/src/components/Feedback/Scale.tsx CHANGED
@@ -178,13 +178,13 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
178
178
 
179
179
  {displayFeedbackEmail && (
180
180
  <StyledFormOptionalFields>
181
- <Label data-translation-key="feedback.settings.optionalEmail.label">
181
+ <InputLabel data-translation-key="feedback.settings.optionalEmail.label">
182
182
  {optionalEmailSettings?.label ||
183
183
  translate(
184
184
  'feedback.settings.optionalEmail.label',
185
185
  'Your email (optional, for follow-up)',
186
186
  )}
187
- </Label>
187
+ </InputLabel>
188
188
  <EmailInput
189
189
  onChange={onEmailChange}
190
190
  placeholder={
@@ -193,6 +193,12 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
193
193
  }
194
194
  type="email"
195
195
  required={!!email}
196
+ onKeyDown={(e) => {
197
+ if (e.key === 'Enter') {
198
+ e.preventDefault();
199
+ onSubmitScaleForm();
200
+ }
201
+ }}
196
202
  />
197
203
  </StyledFormOptionalFields>
198
204
  )}
@@ -240,6 +246,13 @@ const Label = styled.h4`
240
246
  width: 100%;
241
247
  `;
242
248
 
249
+ const InputLabel = styled.h4`
250
+ font-weight: var(--font-weight-regular);
251
+ font-size: var(--feedback-font-size);
252
+ line-height: var(--feedback-line-height);
253
+ margin: 0;
254
+ `;
255
+
243
256
  const SubLabelContainer = styled.div`
244
257
  display: flex;
245
258
  justify-content: space-between;
package/src/components/Feedback/Sentiment.tsx CHANGED
@@ -210,16 +210,15 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
210
210
  )}
211
211
  </StyledFormOptionalFields>
212
212
  )}
213
-
214
213
  {displayFeedbackEmail && (
215
214
  <StyledFormOptionalFields>
216
- <Label data-translation-key="feedback.settings.optionalEmail.label">
215
+ <InputLabel data-translation-key="feedback.settings.optionalEmail.label">
217
216
  {optionalEmailSettings?.label ||
218
217
  translate(
219
218
  'feedback.settings.optionalEmail.label',
220
219
  'Your email (optional, for follow-up)',
221
220
  )}
222
- </Label>
221
+ </InputLabel>
223
222
  <EmailInput
224
223
  onChange={onEmailChange}
225
224
  placeholder={
@@ -228,10 +227,15 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
228
227
  }
229
228
  type="email"
230
229
  required={!!email}
230
+ onKeyDown={(e) => {
231
+ if (e.key === 'Enter') {
232
+ e.preventDefault();
233
+ onSubmitSentimentForm();
234
+ }
235
+ }}
231
236
  />
232
237
  </StyledFormOptionalFields>
233
238
  )}
234
-
235
239
  {displaySubmitBnt && (
236
240
  <ButtonsContainer>
237
241
  <Button onClick={onCancelSentimentForm} variant="text" size="small">
@@ -263,6 +267,13 @@ const Label = styled.h4`
263
267
  margin: 0;
264
268
  `;
265
269
 
270
+ const InputLabel = styled.h4`
271
+ font-weight: var(--font-weight-regular);
272
+ font-size: var(--feedback-font-size);
273
+ line-height: var(--feedback-line-height);
274
+ margin: 0;
275
+ `;
276
+
266
277
  const StyledForm = styled.form`
267
278
  width: 100%;
268
279
  gap: var(--spacing-sm);
package/src/components/Switch/Switch.tsx CHANGED
@@ -15,7 +15,7 @@ export function Switch({ value = false, disabled = false, onChange }: SwitchProp
15
15
 
16
16
  return (
17
17
  <SwitchWrapper onClick={handleClick} role="switch" selected={value} disabled={disabled}>
18
- <Knob selected={value} />
18
+ <Knob selected={value} disabled={disabled} />
19
19
  </SwitchWrapper>
20
20
  );
21
21
  }
@@ -24,9 +24,18 @@ const SwitchWrapper = styled.div<{ selected: boolean; disabled: boolean }>`
24
24
  width: var(--switch-width);
25
25
  height: var(--switch-height);
26
26
  border-radius: var(--switch-border-radius);
27
+ border: var(--switch-border-width) solid
28
+ ${({ selected, disabled }) =>
29
+ disabled
30
+ ? 'var(--switch-border-color-disabled)'
31
+ : selected
32
+ ? 'var(--switch-border-color-selected)'
33
+ : 'var(--switch-border-color)'};
27
34
  background-color: ${({ selected, disabled }) =>
28
35
  disabled
29
- ? 'var(--switch-bg-color-disabled)'
36
+ ? selected
37
+ ? 'var(--switch-bg-color-disabled-selected)'
38
+ : 'var(--switch-bg-color-disabled)'
30
39
  : selected
31
40
  ? 'var(--switch-bg-color-selected)'
32
41
  : 'var(--switch-bg-color)'};
@@ -36,25 +45,31 @@ const SwitchWrapper = styled.div<{ selected: boolean; disabled: boolean }>`
36
45
  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
37
46
  transition: var(--switch-bg-transition);
38
47
 
39
- ${({ disabled }) =>
48
+ ${({ selected, disabled }) =>
40
49
  !disabled &&
50
+ !selected &&
41
51
  css`
42
52
  &:hover {
43
53
  background-color: var(--switch-bg-color-hover);
54
+ border: var(--switch-border-width) solid var(--switch-border-color-hover);
55
+ }
56
+ &:active {
57
+ background-color: var(--switch-bg-color-pressed);
58
+ border: var(--switch-border-width) solid var(--switch-border-color-pressed);
44
59
  }
45
60
  `}
46
-
47
- &:active {
48
- background-color: var(--switch-bg-color-pressed);
49
- }
50
61
  `;
51
62
 
52
- const Knob = styled.div<{ selected: boolean }>`
63
+ const Knob = styled.div<{ selected: boolean; disabled: boolean }>`
53
64
  width: var(--switch-knob-width);
54
65
  height: var(--switch-knob-height);
55
66
  border-radius: var(--switch-knob-border-radius);
56
- background-color: ${({ selected }) =>
57
- selected ? 'var(--switch-knob-bg-color-selected)' : 'var(--switch-knob-bg-color)'};
67
+ background-color: ${({ selected, disabled }) =>
68
+ disabled
69
+ ? 'var(--switch-knob-bg-color-disabled)'
70
+ : selected
71
+ ? 'var(--switch-knob-bg-color-selected)'
72
+ : 'var(--switch-knob-bg-color)'};
58
73
  transform: ${({ selected }) =>
59
74
  selected ? 'translateX(var(--switch-knob-width))' : 'translateX(0)'};
60
75
  transition: var(--switch-knob-transition);
package/src/components/Switch/variables.dark.ts CHANGED
@@ -1,19 +1,33 @@
1
1
  import { css } from 'styled-components';
2
2
 
3
3
  export const switcherDarkMode = css`
4
- --switch-bg-color: var(--color-warm-grey-6); // @presenter Color
5
- --switch-bg-color-selected: var(--color-warm-grey-6); // @presenter Color
6
- --switch-bg-color-hover: var(--color-warm-grey-7); // @presenter Color
7
- --switch-bg-color-pressed: var(--color-warm-grey-7); // @presenter Color
8
- --switch-bg-color-disabled: var(--color-warm-grey-5); // @presenter Color
9
- --switch-knob-bg-color: var(--color-warm-grey-8); // @presenter Color
10
- --switch-knob-bg-color-selected: var(--color-warm-grey-11); // @presenter Color
4
+ --switch-bg-color: transparent; // @presenter Color
5
+ --switch-bg-color-selected: var(--color-warm-grey-7); // @presenter Color
6
+ --switch-bg-color-hover: transparent; // @presenter Color
7
+ --switch-bg-color-pressed: transparent; // @presenter Color
8
+ --switch-bg-color-disabled: transparent; // @presenter Color
9
+ --switch-bg-color-disabled-selected: var(--color-warm-grey-5); // @presenter Color
10
+
11
+ --switch-border-color: var(--color-warm-grey-6); // @presenter Color
12
+ --switch-border-color-hover: var(--color-warm-grey-7); // @presenter Color
13
+ --switch-border-color-pressed: var(--color-warm-grey-8); // @presenter Color
14
+ --switch-border-color-disabled: var(--color-warm-grey-5); // @presenter Color
15
+ --switch-border-color-selected: var(--color-warm-grey-7); // @presenter Color
16
+ --switch-border-width: var(--border-width); // @presenter Border
11
17
  --switch-border-radius: var(--border-radius); // @presenter BorderRadius
12
- --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
18
+
13
19
  --switch-width: 32px; // @presenter Width
14
20
  --switch-height: 18px; // @presenter Height
15
- --switch-padding: calc(var(--spacing-xxs) / 2); // @presenter Padding
21
+ --switch-padding: calc((var(--spacing-xxs) / 2) - var(--switch-border-width)); // @presenter Padding
16
22
  --switch-bg-transition: background-color 0.3s; // @presenter Transition
23
+
24
+ // Knob
25
+
26
+ --switch-knob-bg-color: var(--color-warm-grey-8); // @presenter Color
27
+ --switch-knob-bg-color-selected: var(--color-static-white); // @presenter Color
28
+ --switch-knob-bg-color-disabled: var(--color-warm-grey-6); // @presenter Color
29
+
30
+ --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
17
31
  --switch-knob-height: 14px; // @presenter Height
18
32
  --switch-knob-width: 14px; // @presenter Width
19
33
  --switch-knob-transition: all 0.3s; // @presenter Transition
package/src/components/Switch/variables.ts CHANGED
@@ -6,14 +6,28 @@ export const switcher = css`
6
6
  --switch-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
7
7
  --switch-bg-color-pressed: var(--color-warm-grey-6); // @presenter Color
8
8
  --switch-bg-color-disabled: var(--color-warm-grey-3); // @presenter Color
9
- --switch-knob-bg-color: var(--color-white); // @presenter Color
10
- --switch-knob-bg-color-selected: var(--color-white); // @presenter Color
9
+ --switch-bg-color-disabled-selected: var(--color-warm-grey-3); // @presenter Color
10
+
11
+ --switch-border-color: transparent; // @presenter Color
12
+ --switch-border-color-hover: transparent; // @presenter Color
13
+ --switch-border-color-pressed: transparent; // @presenter Color
14
+ --switch-border-color-disabled: transparent; // @presenter Color
15
+ --switch-border-color-selected: transparent; // @presenter Color
11
16
  --switch-border-radius: var(--border-radius); // @presenter BorderRadius
12
- --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
17
+ --switch-border-width: var(--border-width); // @presenter Border
18
+
13
19
  --switch-width: 32px; // @presenter Width
14
20
  --switch-height: 18px; // @presenter Height
15
- --switch-padding: calc(var(--spacing-xxs) / 2); // @presenter Padding
21
+ --switch-padding: calc((var(--spacing-xxs) / 2) - var(--switch-border-width)); // @presenter Padding
16
22
  --switch-bg-transition: background-color 0.3s; // @presenter Transition
23
+
24
+ // Knob
25
+
26
+ --switch-knob-bg-color: var(--color-white); // @presenter Color
27
+ --switch-knob-bg-color-selected: var(--color-white); // @presenter Color
28
+ --switch-knob-bg-color-disabled: var(--color-warm-grey-1); // @presenter Color
29
+
30
+ --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
17
31
  --switch-knob-height: 14px; // @presenter Height
18
32
  --switch-knob-width: 14px; // @presenter Width
19
33
  --switch-knob-transition: transform 0.3s; // @presenter Transition