@redocly/theme 0.66.0-next.4 → 0.66.0-next.5

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 (11) hide show
  1. package/lib/components/PageNavigation/NavigationButton.js +8 -0
  2. package/lib/components/PageNavigation/NextButton.d.ts +1 -1
  3. package/lib/components/PageNavigation/NextButton.js +1 -1
  4. package/lib/components/PageNavigation/PreviousButton.d.ts +1 -1
  5. package/lib/components/PageNavigation/PreviousButton.js +1 -1
  6. package/lib/components/PageNavigation/variables.js +2 -2
  7. package/package.json +4 -4
  8. package/src/components/PageNavigation/NavigationButton.tsx +8 -0
  9. package/src/components/PageNavigation/NextButton.tsx +2 -2
  10. package/src/components/PageNavigation/PreviousButton.tsx +2 -2
  11. package/src/components/PageNavigation/variables.ts +2 -2
package/lib/components/PageNavigation/NavigationButton.js CHANGED
@@ -9,6 +9,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
9
9
  const ArrowRightIcon_1 = require("../../icons/ArrowRightIcon/ArrowRightIcon");
10
10
  const ArrowLeftIcon_1 = require("../../icons/ArrowLeftIcon/ArrowLeftIcon");
11
11
  const Button_1 = require("../../components/Button/Button");
12
+ const utils_1 = require("../../core/utils");
12
13
  function NavigationButton({ label, link, text, translationKey, position, icon = position === 'left' ? react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null) : react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, null), className, }) {
13
14
  return (react_1.default.createElement(NavigationButtonWrapper, { "data-component-name": "PageNavigation/NavigationButton", "data-translation-key": translationKey, position: position },
14
15
  react_1.default.createElement(PageNavigationTitle, null, label),
@@ -19,12 +20,19 @@ const NavigationButtonWrapper = styled_components_1.default.div `
19
20
  flex-direction: column;
20
21
  width: var(--page-navigation-button-width);
21
22
  text-align: ${({ position }) => position};
23
+ margin: ${({ position }) => (position === 'right' ? '0 0 0 auto' : '0 auto 0 0')};
22
24
  padding: var(--page-navigation-button-padding);
23
25
  gap: var(--page-navigation-button-gap);
24
26
  border: var(--page-navigation-button-border);
25
27
  border-radius: var(--page-navigation-button-border-radius);
26
28
  min-width: var(--page-navigation-button-min-width);
27
29
 
30
+ @media screen and (max-width: ${utils_1.breakpoints.medium}) {
31
+ flex: 1;
32
+ width: auto;
33
+ margin: 0;
34
+ }
35
+
28
36
  &:hover {
29
37
  border: var(--page-navigation-button-border-hover);
30
38
  }
package/lib/components/PageNavigation/NextButton.d.ts CHANGED
@@ -4,4 +4,4 @@ export type NextPageType = {
4
4
  nextPage?: ResolvedNavItemWithLink | null;
5
5
  className?: string;
6
6
  };
7
- export declare function NextButton({ nextPage, className }: NextPageType): JSX.Element;
7
+ export declare function NextButton({ nextPage, className }: NextPageType): JSX.Element | null;
package/lib/components/PageNavigation/NextButton.js CHANGED
@@ -49,7 +49,7 @@ function NextButton({ nextPage, className }) {
49
49
  const link = ((_d = (_c = frontmatter === null || frontmatter === void 0 ? void 0 : frontmatter.navigation) === null || _c === void 0 ? void 0 : _c.nextButton) === null || _d === void 0 ? void 0 : _d.link) || (nextPage === null || nextPage === void 0 ? void 0 : nextPage.link);
50
50
  const text = ((_e = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _e === void 0 ? void 0 : _e.text) || translate(translationKey, { defaultValue: 'Next page' });
51
51
  if (((_f = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _f === void 0 ? void 0 : _f.hide) || !link || !label) {
52
- return React.createElement("div", null, '\u00A0');
52
+ return null;
53
53
  }
54
54
  return (React.createElement(NavigationButton_1.NavigationButton, { label: label, link: link, text: text, translationKey: translationKey, position: "right", className: className, icon: React.createElement(ArrowRightIcon_1.ArrowRightIcon, null) }));
55
55
  }
package/lib/components/PageNavigation/PreviousButton.d.ts CHANGED
@@ -4,4 +4,4 @@ export type PreviousPageType = {
4
4
  prevPage?: ResolvedNavItemWithLink | null;
5
5
  className?: string;
6
6
  };
7
- export declare function PreviousButton({ prevPage, className }: PreviousPageType): JSX.Element;
7
+ export declare function PreviousButton({ prevPage, className }: PreviousPageType): JSX.Element | null;
package/lib/components/PageNavigation/PreviousButton.js CHANGED
@@ -20,7 +20,7 @@ function PreviousButton({ prevPage, className }) {
20
20
  const text = ((_e = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _e === void 0 ? void 0 : _e.text) ||
21
21
  translate(translationKey, { defaultValue: 'Previous page' });
22
22
  if (((_f = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _f === void 0 ? void 0 : _f.hide) || !link || !label) {
23
- return react_1.default.createElement("div", null, '\u00A0');
23
+ return null;
24
24
  }
25
25
  return (react_1.default.createElement(NavigationButton_1.NavigationButton, { label: label, link: link, text: text, translationKey: translationKey, position: "left", className: className, icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null) }));
26
26
  }
package/lib/components/PageNavigation/variables.js CHANGED
@@ -7,9 +7,9 @@ exports.pageNavigation = (0, styled_components_1.css) `
7
7
  * @tokens Page Navigation
8
8
  */
9
9
 
10
- --page-navigations-wrapper-gap: var(--spacing-base); // @presenter Spacing
10
+ --page-navigations-wrapper-gap: var(--spacing-sm); // @presenter Spacing
11
11
 
12
- --page-navigation-button-width: var(--container-max-width); // @presenter Width
12
+ --page-navigation-button-width: 50%; // @presenter Width
13
13
  --page-navigation-button-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
14
14
  --page-navigation-button-title-font-size: var(--font-size-lg); // @presenter FontSize
15
15
  --page-navigation-button-title-font-weight: var(--font-weight-medium); // @presenter FontWeight
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.66.0-next.4",
3
+ "version": "0.66.0-next.5",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
@@ -48,8 +48,8 @@
48
48
  "@types/nprogress": "0.2.3",
49
49
  "@types/react": "^19.2.7",
50
50
  "@types/react-dom": "^19.2.3",
51
- "@vitest/coverage-v8": "4.0.10",
52
- "@vitest/ui": "4.0.10",
51
+ "@vitest/coverage-v8": "4.1.8",
52
+ "@vitest/ui": "4.1.8",
53
53
  "concurrently": "7.6.0",
54
54
  "react-router-dom": "^6.30.3",
55
55
  "resize-observer-polyfill": "1.5.1",
@@ -60,7 +60,7 @@
60
60
  "tsconfig-paths": "4.2.0",
61
61
  "tsconfig-paths-webpack-plugin": "3.5.2",
62
62
  "typescript": "6.0.3",
63
- "vitest": "4.0.10",
63
+ "vitest": "4.1.8",
64
64
  "vitest-when": "0.6.2",
65
65
  "webpack": "5.105.2",
66
66
  "@redocly/realm-asyncapi-sdk": "0.12.0-next.3"
package/src/components/PageNavigation/NavigationButton.tsx CHANGED
@@ -6,6 +6,7 @@ import type { JSX } from 'react';
6
6
  import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
7
7
  import { ArrowLeftIcon } from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';
8
8
  import { Button } from '@redocly/theme/components/Button/Button';
9
+ import { breakpoints } from '@redocly/theme/core/utils';
9
10
 
10
11
  type NavigationButtonPosition = 'left' | 'right';
11
12
 
@@ -49,12 +50,19 @@ const NavigationButtonWrapper = styled.div<{
49
50
  flex-direction: column;
50
51
  width: var(--page-navigation-button-width);
51
52
  text-align: ${({ position }) => position};
53
+ margin: ${({ position }) => (position === 'right' ? '0 0 0 auto' : '0 auto 0 0')};
52
54
  padding: var(--page-navigation-button-padding);
53
55
  gap: var(--page-navigation-button-gap);
54
56
  border: var(--page-navigation-button-border);
55
57
  border-radius: var(--page-navigation-button-border-radius);
56
58
  min-width: var(--page-navigation-button-min-width);
57
59
 
60
+ @media screen and (max-width: ${breakpoints.medium}) {
61
+ flex: 1;
62
+ width: auto;
63
+ margin: 0;
64
+ }
65
+
58
66
  &:hover {
59
67
  border: var(--page-navigation-button-border-hover);
60
68
  }
package/src/components/PageNavigation/NextButton.tsx CHANGED
@@ -12,7 +12,7 @@ export type NextPageType = {
12
12
  className?: string;
13
13
  };
14
14
 
15
- export function NextButton({ nextPage, className }: NextPageType): JSX.Element {
15
+ export function NextButton({ nextPage, className }: NextPageType): JSX.Element | null {
16
16
  const { navigation } = useThemeConfig();
17
17
  const { useTranslate, usePageProps } = useThemeHooks();
18
18
  const { frontmatter } = usePageProps();
@@ -26,7 +26,7 @@ export function NextButton({ nextPage, className }: NextPageType): JSX.Element {
26
26
  navigation?.nextButton?.text || translate(translationKey, { defaultValue: 'Next page' });
27
27
 
28
28
  if (navigation?.nextButton?.hide || !link || !label) {
29
- return <div>{'\u00A0'}</div>;
29
+ return null;
30
30
  }
31
31
 
32
32
  return (
package/src/components/PageNavigation/PreviousButton.tsx CHANGED
@@ -12,7 +12,7 @@ export type PreviousPageType = {
12
12
  className?: string;
13
13
  };
14
14
 
15
- export function PreviousButton({ prevPage, className }: PreviousPageType): JSX.Element {
15
+ export function PreviousButton({ prevPage, className }: PreviousPageType): JSX.Element | null {
16
16
  const { navigation } = useThemeConfig();
17
17
  const { useTranslate, usePageProps } = useThemeHooks();
18
18
  const { frontmatter } = usePageProps();
@@ -27,7 +27,7 @@ export function PreviousButton({ prevPage, className }: PreviousPageType): JSX.E
27
27
  translate(translationKey, { defaultValue: 'Previous page' });
28
28
 
29
29
  if (navigation?.previousButton?.hide || !link || !label) {
30
- return <div>{'\u00A0'}</div>;
30
+ return null;
31
31
  }
32
32
 
33
33
  return (
package/src/components/PageNavigation/variables.ts CHANGED
@@ -5,9 +5,9 @@ export const pageNavigation = css`
5
5
  * @tokens Page Navigation
6
6
  */
7
7
 
8
- --page-navigations-wrapper-gap: var(--spacing-base); // @presenter Spacing
8
+ --page-navigations-wrapper-gap: var(--spacing-sm); // @presenter Spacing
9
9
 
10
- --page-navigation-button-width: var(--container-max-width); // @presenter Width
10
+ --page-navigation-button-width: 50%; // @presenter Width
11
11
  --page-navigation-button-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
12
12
  --page-navigation-button-title-font-size: var(--font-size-lg); // @presenter FontSize
13
13
  --page-navigation-button-title-font-weight: var(--font-weight-medium); // @presenter FontWeight