@redocly/theme 0.30.3 → 0.30.4

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.
@@ -41,7 +41,7 @@ var MOOD_STATES;
41
41
  MOOD_STATES["SATISFIED"] = "satisfied";
42
42
  MOOD_STATES["NEUTRAL"] = "neutral";
43
43
  MOOD_STATES["DISSATISFIED"] = "dissatisfied";
44
- })(MOOD_STATES = exports.MOOD_STATES || (exports.MOOD_STATES = {}));
44
+ })(MOOD_STATES || (exports.MOOD_STATES = MOOD_STATES = {}));
45
45
  const Mood = ({ settings, onSubmit, className }) => {
46
46
  const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
47
47
  const [score, setScore] = React.useState('');
@@ -50,7 +50,7 @@ const Mood = ({ settings, onSubmit, className }) => {
50
50
  const [reasons, setReasons] = React.useState([]);
51
51
  const { translate } = (0, hooks_1.useTranslate)();
52
52
  const renderCommentLabel = (score) => {
53
- if (!(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable))
53
+ if (!commentSettings || (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide) === true)
54
54
  return '';
55
55
  switch (score) {
56
56
  case MOOD_STATES.SATISFIED:
@@ -66,8 +66,8 @@ const Mood = ({ settings, onSubmit, className }) => {
66
66
  return translate('theme.feedback.settings.comment.satisfiedLabel', 'What can we improve?');
67
67
  }
68
68
  };
69
- const displayReasons = !!score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable);
70
- const displayComment = !!score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable);
69
+ const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
70
+ const displayComment = !!score && commentSettings && !commentSettings.hide;
71
71
  const displaySubmitBnt = !!score && (displayReasons || displayComment);
72
72
  const onSubmitMoodForm = () => {
73
73
  onSubmit({
@@ -53,8 +53,8 @@ const Rating = ({ settings, onSubmit, className }) => {
53
53
  });
54
54
  setIsSubmitted(true);
55
55
  };
56
- const displayReasons = !!score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable);
57
- const displayComment = !!score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable);
56
+ const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
57
+ const displayComment = !!score && commentSettings && !commentSettings.hide;
58
58
  const displaySubmitBnt = !!score && (displayReasons || displayComment);
59
59
  (0, react_1.useEffect)(() => {
60
60
  if (score && !displayComment && !displayReasons) {
@@ -47,8 +47,8 @@ const Scale = ({ settings, onSubmit, className }) => {
47
47
  for (let i = 1; i <= exports.MAX_SCALE; i++) {
48
48
  scaleOptions.push(React.createElement(ScaleOption, { id: `scale-option-${i}`, key: `scale-option-${i}`, onClick: () => setScore(i), className: `${score === i ? 'active' : ''}` }, i));
49
49
  }
50
- const displayReasons = !!score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable);
51
- const displayComment = !!score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable);
50
+ const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
51
+ const displayComment = !!score && commentSettings && !commentSettings.hide;
52
52
  const displaySubmitBnt = !!score && (displayReasons || displayComment);
53
53
  const onSubmitScaleForm = () => {
54
54
  onSubmit({
@@ -43,8 +43,8 @@ const Sentiment = ({ settings, onSubmit, className }) => {
43
43
  const [comment, setComment] = React.useState('');
44
44
  const [reasons, setReasons] = React.useState([]);
45
45
  const { translate } = (0, hooks_1.useTranslate)();
46
- const displayReasons = !!score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable);
47
- const displayComment = !!score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable);
46
+ const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
47
+ const displayComment = !!score && commentSettings && !commentSettings.hide;
48
48
  const displaySubmitBnt = !!score && (displayReasons || displayComment);
49
49
  const commentLabel = score === 1
50
50
  ? (commentSettings && commentSettings.likeLabel) ||
@@ -10,11 +10,11 @@ export type RatingProps = {
10
10
  label?: string;
11
11
  submitText?: string;
12
12
  comment?: {
13
- enable: boolean;
13
+ hide?: boolean;
14
14
  label?: string;
15
15
  };
16
16
  reasons?: {
17
- enable: boolean;
17
+ hide?: boolean;
18
18
  label?: string;
19
19
  component?: string;
20
20
  items: string[];
@@ -35,11 +35,11 @@ export type ScaleProps = {
35
35
  leftScaleLabel?: string;
36
36
  rightScaleLabel?: string;
37
37
  comment?: {
38
- enable: boolean;
38
+ hide?: boolean;
39
39
  label?: string;
40
40
  };
41
41
  reasons?: {
42
- enable: boolean;
42
+ hide?: boolean;
43
43
  label?: string;
44
44
  component?: string;
45
45
  items: string[];
@@ -57,13 +57,13 @@ export type MoodProps = {
57
57
  label?: string;
58
58
  submitText?: string;
59
59
  comment?: {
60
- enable: boolean;
60
+ hide?: boolean;
61
61
  satisfiedLabel?: string;
62
62
  neutralLabel?: string;
63
63
  dissatisfiedLabel?: string;
64
64
  };
65
65
  reasons?: {
66
- enable: boolean;
66
+ hide?: boolean;
67
67
  label?: string;
68
68
  component?: string;
69
69
  items: string[];
@@ -81,12 +81,12 @@ export type SentimentProps = {
81
81
  label?: string;
82
82
  submitText?: string;
83
83
  comment?: {
84
- enable: boolean;
84
+ hide?: boolean;
85
85
  likeLabel?: string;
86
86
  dislikeLabel?: string;
87
87
  };
88
88
  reasons?: {
89
- enable: boolean;
89
+ hide?: boolean;
90
90
  label?: string;
91
91
  component?: string;
92
92
  items: string[];
@@ -6,5 +6,5 @@ var MenuType;
6
6
  MenuType["MAIN_MENU"] = "MAIN_MENU";
7
7
  MenuType["PRODUCT"] = "PRODUCT";
8
8
  MenuType["PAGE"] = "PAGE";
9
- })(MenuType = exports.MenuType || (exports.MenuType = {}));
9
+ })(MenuType || (exports.MenuType = MenuType = {}));
10
10
  //# sourceMappingURL=constants.js.map
@@ -64,15 +64,13 @@ function Navbar() {
64
64
  if (!menu && !logo) {
65
65
  return react_1.default.createElement(EmptyNavbarHack, null);
66
66
  }
67
- return (react_1.default.createElement(NavbarPresentational, Object.assign({}, {
68
- closeMobileMenu,
67
+ return (react_1.default.createElement(NavbarPresentational, { closeMobileMenu,
69
68
  openMobileMenu,
70
69
  isOpen,
71
70
  hideSearch: Boolean(hideSearch),
72
71
  logo: logo,
73
72
  hideUserProfile,
74
- changeLanguage,
75
- })));
73
+ changeLanguage }));
76
74
  }
77
75
  exports.Navbar = Navbar;
78
76
  function NavbarPresentational(props) {
@@ -4,5 +4,5 @@ exports.MenuStyle = void 0;
4
4
  var MenuStyle;
5
5
  (function (MenuStyle) {
6
6
  MenuStyle["Drilldown"] = "drilldown";
7
- })(MenuStyle = exports.MenuStyle || (exports.MenuStyle = {}));
7
+ })(MenuStyle || (exports.MenuStyle = MenuStyle = {}));
8
8
  //# sourceMappingURL=types.js.map
@@ -14,7 +14,7 @@ var LayoutVariant;
14
14
  (function (LayoutVariant) {
15
15
  LayoutVariant["STACKED"] = "stacked";
16
16
  LayoutVariant["THREE_PANEL"] = "three-panel";
17
- })(LayoutVariant = exports.LayoutVariant || (exports.LayoutVariant = {}));
17
+ })(LayoutVariant || (exports.LayoutVariant = LayoutVariant = {}));
18
18
  const SidebarActions = ({ showChangeLayoutButton, showRightPanelToggle, layout, initialShowRightPanelToggle, hideCollapseSidebarButton = false, collapsedSidebar, isOpenapiDocs, onChangeRightPanelViewClick, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }) => {
19
19
  return (react_1.default.createElement(styled_1.ControlsWrap, { className: className, isOpenapiDocs: isOpenapiDocs, isCollapsed: collapsedSidebar, "data-component-name": "Sidebar/Actions" },
20
20
  isOpenapiDocs && (react_1.default.createElement(styled_1.ControlsWrapChangeLayoutButtons, { isCollapsed: collapsedSidebar },
@@ -40,10 +40,12 @@ function Tabs(props) {
40
40
  const { label, key } = child.props;
41
41
  return (react_1.default.createElement(Tabs_1.Tab, { activeTab: activeTab, key: `${key || label}-${idx}`, label: label, onClick: onTabSelect }));
42
42
  })),
43
- react_1.default.createElement(TabContent, null, children.map((child) => {
43
+ react_1.default.createElement(TabContent, null, children.map((child, idx) => {
44
44
  if (child.props.label !== activeTab)
45
45
  return undefined;
46
- return child.props.children;
46
+ return react_1.default.createElement(react_1.default.Fragment, { key: idx },
47
+ " ",
48
+ child.props.children);
47
49
  }))));
48
50
  }
49
51
  exports.Tabs = Tabs;
package/lib/config.d.ts CHANGED
@@ -1065,9 +1065,9 @@ export declare const themeConfigSchema: {
1065
1065
  readonly reasons: {
1066
1066
  readonly type: "object";
1067
1067
  readonly properties: {
1068
- readonly enable: {
1068
+ readonly hide: {
1069
1069
  readonly type: "boolean";
1070
- readonly default: true;
1070
+ readonly default: false;
1071
1071
  };
1072
1072
  readonly component: {
1073
1073
  readonly type: "string";
@@ -1089,9 +1089,9 @@ export declare const themeConfigSchema: {
1089
1089
  readonly comment: {
1090
1090
  readonly type: "object";
1091
1091
  readonly properties: {
1092
- readonly enable: {
1092
+ readonly hide: {
1093
1093
  readonly type: "boolean";
1094
- readonly default: true;
1094
+ readonly default: false;
1095
1095
  };
1096
1096
  readonly label: {
1097
1097
  readonly type: "string";
package/lib/config.js CHANGED
@@ -407,7 +407,10 @@ exports.themeConfigSchema = {
407
407
  reasons: {
408
408
  type: 'object',
409
409
  properties: {
410
- enable: { type: 'boolean', default: true },
410
+ hide: {
411
+ type: 'boolean',
412
+ default: false,
413
+ },
411
414
  component: {
412
415
  type: 'string',
413
416
  enum: ['radio', 'checkbox'],
@@ -421,7 +424,10 @@ exports.themeConfigSchema = {
421
424
  comment: {
422
425
  type: 'object',
423
426
  properties: {
424
- enable: { type: 'boolean', default: true },
427
+ hide: {
428
+ type: 'boolean',
429
+ default: false,
430
+ },
425
431
  label: { type: 'string' },
426
432
  likeLabel: { type: 'string' },
427
433
  dislikeLabel: { type: 'string' },
@@ -603,5 +609,5 @@ var ScorecardStatus;
603
609
  ScorecardStatus["BelowMinimum"] = "Below minimum";
604
610
  ScorecardStatus["Highest"] = "Highest";
605
611
  ScorecardStatus["Minimum"] = "Minimum";
606
- })(ScorecardStatus = exports.ScorecardStatus || (exports.ScorecardStatus = {}));
612
+ })(ScorecardStatus || (exports.ScorecardStatus = ScorecardStatus = {}));
607
613
  //# sourceMappingURL=config.js.map
@@ -7,5 +7,5 @@ var MenuType;
7
7
  MenuType["DrillDown"] = "drilldown";
8
8
  MenuType["Group"] = "group";
9
9
  MenuType["Operation"] = "operation";
10
- })(MenuType = exports.MenuType || (exports.MenuType = {}));
10
+ })(MenuType || (exports.MenuType = MenuType = {}));
11
11
  //# sourceMappingURL=types.js.map
@@ -12,14 +12,14 @@ var FEEDBACK_TYPES;
12
12
  FEEDBACK_TYPES["MOOD"] = "mood";
13
13
  FEEDBACK_TYPES["PROBLEM"] = "problem";
14
14
  FEEDBACK_TYPES["SCALE"] = "scale";
15
- })(FEEDBACK_TYPES = exports.FEEDBACK_TYPES || (exports.FEEDBACK_TYPES = {}));
15
+ })(FEEDBACK_TYPES || (exports.FEEDBACK_TYPES = FEEDBACK_TYPES = {}));
16
16
  exports.DEV_LOGIN_SLUG = '/login/';
17
17
  var ExternalRoutes;
18
18
  (function (ExternalRoutes) {
19
19
  ExternalRoutes["AUTH0_PASS"] = "/auth/auth0-pass";
20
- })(ExternalRoutes = exports.ExternalRoutes || (exports.ExternalRoutes = {}));
20
+ })(ExternalRoutes || (exports.ExternalRoutes = ExternalRoutes = {}));
21
21
  var FsErrors;
22
22
  (function (FsErrors) {
23
23
  FsErrors["NotExist"] = "ENOENT";
24
- })(FsErrors = exports.FsErrors || (exports.FsErrors = {}));
24
+ })(FsErrors || (exports.FsErrors = FsErrors = {}));
25
25
  //# sourceMappingURL=constants.js.map
@@ -4,5 +4,5 @@ exports.MenuStyle = void 0;
4
4
  var MenuStyle;
5
5
  (function (MenuStyle) {
6
6
  MenuStyle["Drilldown"] = "drilldown";
7
- })(MenuStyle = exports.MenuStyle || (exports.MenuStyle = {}));
7
+ })(MenuStyle || (exports.MenuStyle = MenuStyle = {}));
8
8
  //# sourceMappingURL=nav.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.30.3",
3
+ "version": "0.30.4",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
@@ -28,18 +28,18 @@
28
28
  "styled-system": "^5.1.5"
29
29
  },
30
30
  "devDependencies": {
31
- "@storybook/addon-actions": "^7.4.6",
32
- "@storybook/addon-essentials": "^7.4.6",
33
- "@storybook/addon-interactions": "^7.4.6",
34
- "@storybook/addon-links": "^7.4.6",
35
- "@storybook/addon-viewport": "^7.4.6",
36
- "@storybook/addons": "^7.4.6",
37
- "@storybook/core-common": "^7.4.6",
38
- "@storybook/node-logger": "^7.4.6",
39
- "@storybook/react": "^7.4.6",
40
- "@storybook/react-webpack5": "^7.4.6",
31
+ "@storybook/addon-actions": "^7.5.0",
32
+ "@storybook/addon-essentials": "^7.5.0",
33
+ "@storybook/addon-interactions": "^7.5.0",
34
+ "@storybook/addon-links": "^7.5.0",
35
+ "@storybook/addon-viewport": "^7.5.0",
36
+ "@storybook/addons": "^7.5.0",
37
+ "@storybook/core-common": "^7.5.0",
38
+ "@storybook/node-logger": "^7.5.0",
39
+ "@storybook/react": "^7.5.0",
40
+ "@storybook/react-webpack5": "^7.5.0",
41
41
  "@storybook/testing-library": "^0.2.2",
42
- "@storybook/theming": "^7.4.6",
42
+ "@storybook/theming": "^7.5.0",
43
43
  "@testing-library/jest-dom": "^5.16.5",
44
44
  "@testing-library/react": "^12.1.4",
45
45
  "@testing-library/react-hooks": "^8.0.1",
@@ -68,7 +68,7 @@
68
68
  "npm-run-all": "^4.1.5",
69
69
  "react-refresh": "^0.14.0",
70
70
  "react-router-dom": "^6.10.0",
71
- "storybook": "^7.4.6",
71
+ "storybook": "^7.5.0",
72
72
  "storybook-addon-pseudo-states": "^2.1.2",
73
73
  "storybook-design-token": "3.0.0-beta.6",
74
74
  "styled-components": "^5.3.7",
@@ -79,7 +79,7 @@
79
79
  "tsc-alias": "^1.8.2",
80
80
  "tsconfig-paths": "^4.2.0",
81
81
  "tsconfig-paths-webpack-plugin": "^3.5.2",
82
- "typescript": "^4.8.4",
82
+ "typescript": "^5.2.2",
83
83
  "webpack": "^5.72.0",
84
84
  "@redocly/portal-types": "1.2.0"
85
85
  },
@@ -25,7 +25,7 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
25
25
  const { translate } = useTranslate();
26
26
 
27
27
  const renderCommentLabel = (score: string) => {
28
- if (!commentSettings?.enable) return '';
28
+ if (!commentSettings || commentSettings?.hide === true) return '';
29
29
 
30
30
  switch (score) {
31
31
  case MOOD_STATES.SATISFIED:
@@ -48,8 +48,8 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
48
48
  }
49
49
  };
50
50
 
51
- const displayReasons = !!score && reasonsSettings?.enable;
52
- const displayComment = !!score && commentSettings?.enable;
51
+ const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
52
+ const displayComment = !!score && commentSettings && !commentSettings.hide;
53
53
  const displaySubmitBnt = !!score && (displayReasons || displayComment);
54
54
 
55
55
  const onSubmitMoodForm = () => {
@@ -31,8 +31,8 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
31
31
  setIsSubmitted(true);
32
32
  };
33
33
 
34
- const displayReasons = !!score && reasonsSettings?.enable;
35
- const displayComment = !!score && commentSettings?.enable;
34
+ const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
35
+ const displayComment = !!score && commentSettings && !commentSettings.hide;
36
36
  const displaySubmitBnt = !!score && (displayReasons || displayComment);
37
37
 
38
38
  useEffect(() => {
@@ -41,8 +41,8 @@ export const Scale = ({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
41
41
  );
42
42
  }
43
43
 
44
- const displayReasons = !!score && reasonsSettings?.enable;
45
- const displayComment = !!score && commentSettings?.enable;
44
+ const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
45
+ const displayComment = !!score && commentSettings && !commentSettings.hide;
46
46
  const displaySubmitBnt = !!score && (displayReasons || displayComment);
47
47
 
48
48
  const onSubmitScaleForm = () => {
@@ -18,8 +18,8 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
18
18
  const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
19
19
  const { translate } = useTranslate();
20
20
 
21
- const displayReasons = !!score && reasonsSettings?.enable;
22
- const displayComment = !!score && commentSettings?.enable;
21
+ const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
22
+ const displayComment = !!score && commentSettings && !commentSettings.hide;
23
23
  const displaySubmitBnt = !!score && (displayReasons || displayComment);
24
24
 
25
25
  const commentLabel =
@@ -6,11 +6,11 @@ export type RatingProps = {
6
6
  label?: string;
7
7
  submitText?: string;
8
8
  comment?: {
9
- enable: boolean;
9
+ hide?: boolean;
10
10
  label?: string;
11
11
  };
12
12
  reasons?: {
13
- enable: boolean;
13
+ hide?: boolean;
14
14
  label?: string;
15
15
  component?: string;
16
16
  items: string[];
@@ -27,11 +27,11 @@ export type ScaleProps = {
27
27
  leftScaleLabel?: string;
28
28
  rightScaleLabel?: string;
29
29
  comment?: {
30
- enable: boolean;
30
+ hide?: boolean;
31
31
  label?: string;
32
32
  };
33
33
  reasons?: {
34
- enable: boolean;
34
+ hide?: boolean;
35
35
  label?: string;
36
36
  component?: string;
37
37
  items: string[];
@@ -46,13 +46,13 @@ export type MoodProps = {
46
46
  label?: string;
47
47
  submitText?: string;
48
48
  comment?: {
49
- enable: boolean;
49
+ hide?: boolean;
50
50
  satisfiedLabel?: string;
51
51
  neutralLabel?: string;
52
52
  dissatisfiedLabel?: string;
53
53
  };
54
54
  reasons?: {
55
- enable: boolean;
55
+ hide?: boolean;
56
56
  label?: string;
57
57
  component?: string;
58
58
  items: string[];
@@ -67,12 +67,12 @@ export type SentimentProps = {
67
67
  label?: string;
68
68
  submitText?: string;
69
69
  comment?: {
70
- enable: boolean;
70
+ hide?: boolean;
71
71
  likeLabel?: string;
72
72
  dislikeLabel?: string;
73
73
  };
74
74
  reasons?: {
75
- enable: boolean;
75
+ hide?: boolean;
76
76
  label?: string;
77
77
  component?: string;
78
78
  items: string[];
@@ -29,9 +29,9 @@ export function Tabs(props: TabsProps): JSX.Element {
29
29
  })}
30
30
  </TabList>
31
31
  <TabContent>
32
- {children.map((child) => {
32
+ {children.map((child, idx) => {
33
33
  if (child.props.label !== activeTab) return undefined;
34
- return child.props.children;
34
+ return <React.Fragment key={idx}> {child.props.children}</React.Fragment>;
35
35
  })}
36
36
  </TabContent>
37
37
  </TabsContainer>
package/src/config.ts CHANGED
@@ -463,7 +463,10 @@ export const themeConfigSchema = {
463
463
  reasons: {
464
464
  type: 'object',
465
465
  properties: {
466
- enable: { type: 'boolean', default: true },
466
+ hide: {
467
+ type: 'boolean',
468
+ default: false,
469
+ },
467
470
  component: {
468
471
  type: 'string',
469
472
  enum: ['radio', 'checkbox'],
@@ -477,7 +480,10 @@ export const themeConfigSchema = {
477
480
  comment: {
478
481
  type: 'object',
479
482
  properties: {
480
- enable: { type: 'boolean', default: true },
483
+ hide: {
484
+ type: 'boolean',
485
+ default: false,
486
+ },
481
487
  label: { type: 'string' },
482
488
  likeLabel: { type: 'string' },
483
489
  dislikeLabel: { type: 'string' },