@redocly/theme 0.38.7 → 0.39.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 (17) hide show
  1. package/lib/components/Button/Button.js +0 -7
  2. package/lib/components/Button/variables.js +1 -1
  3. package/lib/components/Feedback/Comment.js +1 -0
  4. package/lib/components/Feedback/Mood.js +3 -1
  5. package/lib/components/Feedback/Rating.js +7 -3
  6. package/lib/components/Feedback/Scale.js +6 -2
  7. package/lib/components/Feedback/Sentiment.js +2 -1
  8. package/lib/components/Menu/MenuMobile.js +1 -0
  9. package/package.json +2 -2
  10. package/src/components/Button/Button.tsx +0 -7
  11. package/src/components/Button/variables.ts +1 -1
  12. package/src/components/Feedback/Comment.tsx +1 -0
  13. package/src/components/Feedback/Mood.tsx +3 -1
  14. package/src/components/Feedback/Rating.tsx +11 -3
  15. package/src/components/Feedback/Scale.tsx +10 -2
  16. package/src/components/Feedback/Sentiment.tsx +2 -1
  17. package/src/components/Menu/MenuMobile.tsx +1 -0
package/lib/components/Button/Button.js CHANGED
@@ -47,9 +47,6 @@ const getBlink = () => (0, styled_components_1.keyframes) `
47
47
  `;
48
48
  const StyledButtonLink = (0, styled_components_1.default)(Link_1.Link) `
49
49
  text-decoration: none;
50
- & + & {
51
- margin-left: var(--spacing-xs);
52
- }
53
50
  &:focus-visible {
54
51
  outline: 1px solid var(--button-border-color-focused);
55
52
  }
@@ -142,10 +139,6 @@ const StyledButton = styled_components_1.default.button.attrs((props) => ({
142
139
  border-width: var(--button-border-width-disabled);
143
140
  }
144
141
 
145
- & + & {
146
- margin-left: var(--spacing-xs);
147
- }
148
-
149
142
  ${({ variant, size }) => (variant === 'link' || variant === 'ghost') &&
150
143
  size === 'small' &&
151
144
  (0, styled_components_1.css) `
package/lib/components/Button/variables.js CHANGED
@@ -137,7 +137,7 @@ exports.button = (0, styled_components_1.css) `
137
137
  --button-content-color-danger: var(--button-content-color-inverse);
138
138
  --button-content-color-danger-hover: var(--button-content-color-inverse);
139
139
  --button-content-color-danger-pressed: var(--button-content-color-inverse);
140
- --button-border-width-disabled: 1px;
140
+ --button-border-width-disabled: 0px;
141
141
  }
142
142
 
143
143
  .button-variant-secondary {
package/lib/components/Feedback/Comment.js CHANGED
@@ -125,5 +125,6 @@ const ButtonsContainer = styled_components_1.default.div `
125
125
  justify-content: end;
126
126
  margin-bottom: var(--spacing-xxs);
127
127
  margin-top: var(--spacing-xs);
128
+ gap: var(--spacing-xs);
128
129
  `;
129
130
  //# sourceMappingURL=Comment.js.map
package/lib/components/Feedback/Mood.js CHANGED
@@ -70,7 +70,7 @@ function Mood({ settings, onSubmit, className }) {
70
70
  }
71
71
  };
72
72
  const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
73
- const displayComment = !!(score && commentSettings && !commentSettings.hide);
73
+ const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
74
74
  const displaySubmitBnt = !!(score && (displayReasons || displayComment));
75
75
  const onSubmitMoodForm = () => {
76
76
  onSubmit({
@@ -151,6 +151,7 @@ const Label = styled_components_1.default.h4 `
151
151
  const ButtonsContainer = styled_components_1.default.div `
152
152
  display: flex;
153
153
  justify-content: end;
154
+ gap: var(--spacing-xxs);
154
155
  `;
155
156
  const StyledForm = styled_components_1.default.form `
156
157
  width: 100%;
@@ -175,5 +176,6 @@ const StyledFormMandatoryFields = styled_components_1.default.div `
175
176
  const StyledMandatoryFieldContainer = styled_components_1.default.div `
176
177
  display: flex;
177
178
  align-items: center;
179
+ gap: var(--spacing-xxs);
178
180
  `;
179
181
  //# sourceMappingURL=Mood.js.map
package/lib/components/Feedback/Rating.js CHANGED
@@ -58,7 +58,7 @@ function Rating({ settings, onSubmit, className }) {
58
58
  setScore(0);
59
59
  };
60
60
  const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
61
- const displayComment = !!(score && commentSettings && !commentSettings.hide);
61
+ const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
62
62
  const displaySubmitBnt = !!(score && (displayReasons || displayComment));
63
63
  (0, react_1.useEffect)(() => {
64
64
  if (score && !displayComment && !displayReasons) {
@@ -85,10 +85,13 @@ function Rating({ settings, onSubmit, className }) {
85
85
  items: (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [],
86
86
  component: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.component,
87
87
  }, onChange: setReasons })),
88
- displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentSettings.label } })))),
88
+ displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: {
89
+ label: (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.label) ||
90
+ translate('theme.feedback.settings.comment.label', 'Please share your feedback with us.'),
91
+ } })))),
89
92
  displaySubmitBnt && (React.createElement(ButtonsContainer, null,
90
93
  React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "text", size: "small" }, "Cancel"),
91
- React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "secondary", size: "small" }, "Submit"))))));
94
+ React.createElement(Button_1.Button, { onClick: onSubmitRatingForm, variant: "secondary", size: "small" }, "Submit"))))));
92
95
  }
93
96
  exports.Rating = Rating;
94
97
  const StyledForm = styled_components_1.default.form `
@@ -128,5 +131,6 @@ const ButtonsContainer = styled_components_1.default.div `
128
131
  display: flex;
129
132
  justify-content: end;
130
133
  margin-bottom: var(--spacing-xxs);
134
+ gap: var(--spacing-xxs);
131
135
  `;
132
136
  //# sourceMappingURL=Rating.js.map
package/lib/components/Feedback/Scale.js CHANGED
@@ -50,7 +50,7 @@ function Scale({ settings, onSubmit, className }) {
50
50
  scaleOptions.push(React.createElement(Button_1.Button, { id: `scale-option-${i}`, key: `scale-option-${i}`, type: "button", onClick: () => setScore(i), className: `${score === i ? 'active' : ''}` }, i));
51
51
  }
52
52
  const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
53
- const displayComment = !!score && commentSettings && !commentSettings.hide;
53
+ const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
54
54
  const displaySubmitBnt = !!score && (displayReasons || displayComment);
55
55
  const handleCancel = () => {
56
56
  setScore(0);
@@ -94,7 +94,10 @@ function Scale({ settings, onSubmit, className }) {
94
94
  items: (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [],
95
95
  component: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.component,
96
96
  }, onChange: setReasons })),
97
- displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentSettings.label } }))),
97
+ displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: {
98
+ label: (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.label) ||
99
+ translate('theme.feedback.settings.comment.label', 'Please share your feedback with us.'),
100
+ } }))),
98
101
  displaySubmitBnt && (React.createElement(ButtonsContainer, null,
99
102
  React.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.comment.cancel", onClick: handleCancel, variant: "text", size: "small" }, translate('theme.feedback.settings.comment.cancel', 'Cancel')),
100
103
  React.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.scale.send", onClick: onSubmitScaleForm, variant: "secondary", size: "small" }, translate('theme.feedback.settings.scale.send', 'Submit')))))));
@@ -137,6 +140,7 @@ const ButtonsContainer = styled_components_1.default.div `
137
140
  display: flex;
138
141
  justify-content: end;
139
142
  margin-bottom: var(--spacing-xxs);
143
+ gap: var(--spacing-xxs);
140
144
  `;
141
145
  const StyledFormOptionalFields = styled_components_1.default.div `
142
146
  display: flex;
package/lib/components/Feedback/Sentiment.js CHANGED
@@ -46,7 +46,7 @@ function Sentiment({ settings, onSubmit, className }) {
46
46
  const { useTranslate } = (0, hooks_1.useThemeHooks)();
47
47
  const { translate } = useTranslate();
48
48
  const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
49
- const displayComment = !!(score && commentSettings && !commentSettings.hide);
49
+ const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
50
50
  const displaySubmitBnt = !!(score && (displayReasons || displayComment));
51
51
  const commentLabel = score === 1
52
52
  ? (commentSettings && commentSettings.likeLabel) ||
@@ -147,5 +147,6 @@ const ButtonsContainer = styled_components_1.default.div `
147
147
  display: flex;
148
148
  justify-content: end;
149
149
  margin-bottom: var(--spacing-xxs);
150
+ gap: var(--spacing-xxs);
150
151
  `;
151
152
  //# sourceMappingURL=Sentiment.js.map
package/lib/components/Menu/MenuMobile.js CHANGED
@@ -101,6 +101,7 @@ const ButtonsSection = styled_components_1.default.div `
101
101
  padding: var(--spacing-xs);
102
102
  margin: 0 0 var(--spacing-sm) 0;
103
103
  background: var(--layer-color);
104
+ gap: var(--spacing-xs);
104
105
  ${({ alignRight }) => alignRight && 'justify-content: flex-end'};
105
106
  `;
106
107
  const MenuWrapper = styled_components_1.default.div `
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.38.7",
3
+ "version": "0.39.0",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
@@ -98,7 +98,7 @@
98
98
  "timeago.js": "^4.0.2",
99
99
  "i18next": "^22.4.12",
100
100
  "nprogress": "^0.2.0",
101
- "@redocly/config": "0.8.0"
101
+ "@redocly/config": "0.8.1"
102
102
  },
103
103
  "scripts": {
104
104
  "start": "npm-run-all --parallel storybook storybook:tokens:watch",
package/src/components/Button/Button.tsx CHANGED
@@ -52,9 +52,6 @@ const getBlink = (): Keyframes => keyframes`
52
52
 
53
53
  const StyledButtonLink = styled(Link)`
54
54
  text-decoration: none;
55
- & + & {
56
- margin-left: var(--spacing-xs);
57
- }
58
55
  &:focus-visible {
59
56
  outline: 1px solid var(--button-border-color-focused);
60
57
  }
@@ -155,10 +152,6 @@ const StyledButton = styled.button.attrs((props: ButtonProps) => ({
155
152
  border-width: var(--button-border-width-disabled);
156
153
  }
157
154
 
158
- & + & {
159
- margin-left: var(--spacing-xs);
160
- }
161
-
162
155
  ${({ variant, size }) =>
163
156
  (variant === 'link' || variant === 'ghost') &&
164
157
  size === 'small' &&
package/src/components/Button/variables.ts CHANGED
@@ -135,7 +135,7 @@ export const button = css`
135
135
  --button-content-color-danger: var(--button-content-color-inverse);
136
136
  --button-content-color-danger-hover: var(--button-content-color-inverse);
137
137
  --button-content-color-danger-pressed: var(--button-content-color-inverse);
138
- --button-border-width-disabled: 1px;
138
+ --button-border-width-disabled: 0px;
139
139
  }
140
140
 
141
141
  .button-variant-secondary {
package/src/components/Feedback/Comment.tsx CHANGED
@@ -171,4 +171,5 @@ const ButtonsContainer = styled.div`
171
171
  justify-content: end;
172
172
  margin-bottom: var(--spacing-xxs);
173
173
  margin-top: var(--spacing-xs);
174
+ gap: var(--spacing-xs);
174
175
  `;
package/src/components/Feedback/Mood.tsx CHANGED
@@ -74,7 +74,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
74
74
  };
75
75
 
76
76
  const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
77
- const displayComment = !!(score && commentSettings && !commentSettings.hide);
77
+ const displayComment = !!(score && !commentSettings?.hide);
78
78
  const displaySubmitBnt = !!(score && (displayReasons || displayComment));
79
79
 
80
80
  const onSubmitMoodForm = () => {
@@ -221,6 +221,7 @@ const Label = styled.h4`
221
221
  const ButtonsContainer = styled.div`
222
222
  display: flex;
223
223
  justify-content: end;
224
+ gap: var(--spacing-xxs);
224
225
  `;
225
226
 
226
227
  const StyledForm = styled.form`
@@ -249,4 +250,5 @@ const StyledFormMandatoryFields = styled.div`
249
250
  const StyledMandatoryFieldContainer = styled.div`
250
251
  display: flex;
251
252
  align-items: center;
253
+ gap: var(--spacing-xxs);
252
254
  `;
package/src/components/Feedback/Rating.tsx CHANGED
@@ -56,7 +56,7 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
56
56
  };
57
57
 
58
58
  const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
59
- const displayComment = !!(score && commentSettings && !commentSettings.hide);
59
+ const displayComment = !!(score && !commentSettings?.hide);
60
60
  const displaySubmitBnt = !!(score && (displayReasons || displayComment));
61
61
 
62
62
  useEffect(() => {
@@ -113,7 +113,14 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
113
113
  <Comment
114
114
  standAlone={false}
115
115
  onSubmit={({ comment }) => setComment(comment)}
116
- settings={{ label: commentSettings.label }}
116
+ settings={{
117
+ label:
118
+ commentSettings?.label ||
119
+ translate(
120
+ 'theme.feedback.settings.comment.label',
121
+ 'Please share your feedback with us.',
122
+ ),
123
+ }}
117
124
  />
118
125
  )}
119
126
  </StyledFormOptionalFields>
@@ -123,7 +130,7 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
123
130
  <Button onClick={onCancelRatingForm} variant="text" size="small">
124
131
  Cancel
125
132
  </Button>
126
- <Button onClick={onCancelRatingForm} variant="secondary" size="small">
133
+ <Button onClick={onSubmitRatingForm} variant="secondary" size="small">
127
134
  Submit
128
135
  </Button>
129
136
  </ButtonsContainer>
@@ -176,4 +183,5 @@ const ButtonsContainer = styled.div`
176
183
  display: flex;
177
184
  justify-content: end;
178
185
  margin-bottom: var(--spacing-xxs);
186
+ gap: var(--spacing-xxs);
179
187
  `;
package/src/components/Feedback/Scale.tsx CHANGED
@@ -67,7 +67,7 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
67
67
  }
68
68
 
69
69
  const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
70
- const displayComment = !!score && commentSettings && !commentSettings.hide;
70
+ const displayComment = !!(score && !commentSettings?.hide);
71
71
  const displaySubmitBnt = !!score && (displayReasons || displayComment);
72
72
 
73
73
  const handleCancel = () => {
@@ -145,7 +145,14 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
145
145
  <Comment
146
146
  standAlone={false}
147
147
  onSubmit={({ comment }) => setComment(comment)}
148
- settings={{ label: commentSettings.label }}
148
+ settings={{
149
+ label:
150
+ commentSettings?.label ||
151
+ translate(
152
+ 'theme.feedback.settings.comment.label',
153
+ 'Please share your feedback with us.',
154
+ ),
155
+ }}
149
156
  />
150
157
  )}
151
158
  </StyledFormOptionalFields>
@@ -217,6 +224,7 @@ const ButtonsContainer = styled.div`
217
224
  display: flex;
218
225
  justify-content: end;
219
226
  margin-bottom: var(--spacing-xxs);
227
+ gap: var(--spacing-xxs);
220
228
  `;
221
229
 
222
230
  const StyledFormOptionalFields = styled.div`
package/src/components/Feedback/Sentiment.tsx CHANGED
@@ -42,7 +42,7 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
42
42
  const { translate } = useTranslate();
43
43
 
44
44
  const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
45
- const displayComment = !!(score && commentSettings && !commentSettings.hide);
45
+ const displayComment = !!(score && !commentSettings?.hide);
46
46
  const displaySubmitBnt = !!(score && (displayReasons || displayComment));
47
47
 
48
48
  const commentLabel =
@@ -211,4 +211,5 @@ const ButtonsContainer = styled.div`
211
211
  display: flex;
212
212
  justify-content: end;
213
213
  margin-bottom: var(--spacing-xxs);
214
+ gap: var(--spacing-xxs);
214
215
  `;
package/src/components/Menu/MenuMobile.tsx CHANGED
@@ -126,6 +126,7 @@ const ButtonsSection = styled.div<{ alignRight: boolean }>`
126
126
  padding: var(--spacing-xs);
127
127
  margin: 0 0 var(--spacing-sm) 0;
128
128
  background: var(--layer-color);
129
+ gap: var(--spacing-xs);
129
130
  ${({ alignRight }) => alignRight && 'justify-content: flex-end'};
130
131
  `;
131
132