@redocly/theme 0.12.3 → 0.12.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.
Files changed (13) hide show
  1. package/lib/I18n/LanguagePicker.js +2 -2
  2. package/lib/components/ColorModeSwitcher/ColorModeSwitcher.js +1 -1
  3. package/lib/components/Filter/Filter.js +1 -1
  4. package/lib/components/Menu/MenuGroup.js +1 -1
  5. package/lib/components/Profile/Profile.js +2 -2
  6. package/lib/components/Profile/UserProfileMenu.js +1 -1
  7. package/package.json +1 -1
  8. package/src/I18n/LanguagePicker.tsx +2 -1
  9. package/src/components/ColorModeSwitcher/ColorModeSwitcher.tsx +1 -0
  10. package/src/components/Filter/Filter.tsx +1 -1
  11. package/src/components/Menu/MenuGroup.tsx +1 -0
  12. package/src/components/Profile/Profile.tsx +2 -2
  13. package/src/components/Profile/UserProfileMenu.tsx +5 -1
package/lib/I18n/LanguagePicker.js CHANGED
@@ -45,13 +45,13 @@ const LanguagePicker = (props) => {
45
45
  return null;
46
46
  }
47
47
  return (react_1.default.createElement(Dropdown, { "data-component-name": "I18n/LanguagePicker", ref: dropdownRef, isOpen: isOpen, onClick: () => setIsOpen(!isOpen), onBlur: () => setIsOpen(false) },
48
- react_1.default.createElement(DropdownValue, null, currentLocale.toUpperCase()),
48
+ react_1.default.createElement(DropdownValue, { role: "link" }, currentLocale.toUpperCase()),
49
49
  react_1.default.createElement(DropdownMenu, null, locales.map((locale) => (react_1.default.createElement(MenuItem, { onClick: () => {
50
50
  const newLangPathname = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(location.pathname, defaultLocale, locale.code, locales));
51
51
  const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
52
52
  history.push(newUrlWithLanguage);
53
53
  props.onChangeLanguage(locale.code);
54
- }, key: locale.code }, locale.name || locale.code || ''))))));
54
+ }, key: locale.code, role: "link" }, locale.name || locale.code || ''))))));
55
55
  };
56
56
  exports.LanguagePicker = LanguagePicker;
57
57
  const Dropdown = styled_components_1.default.div `
package/lib/components/ColorModeSwitcher/ColorModeSwitcher.js CHANGED
@@ -53,7 +53,7 @@ function ColorModeSwitcher() {
53
53
  document.documentElement.classList.remove('notransition');
54
54
  });
55
55
  };
56
- return (react_1.default.createElement(Wrapper, { "data-component-name": "ColorModeSwitcher/ColorModeSwitcher", onClick: handelChangeColorMode, modes: modes }, modes.map((mode) => (react_1.default.createElement(ColorModeIcon_1.ColorModeIcon, { mode: mode, key: mode })))));
56
+ return (react_1.default.createElement(Wrapper, { "data-component-name": "ColorModeSwitcher/ColorModeSwitcher", onClick: handelChangeColorMode, modes: modes, role: "link" }, modes.map((mode) => (react_1.default.createElement(ColorModeIcon_1.ColorModeIcon, { mode: mode, key: mode })))));
57
57
  }
58
58
  exports.ColorModeSwitcher = ColorModeSwitcher;
59
59
  const Wrapper = styled_components_1.default.div `
package/lib/components/Filter/Filter.js CHANGED
@@ -47,7 +47,7 @@ function Filter({ filter }) {
47
47
  filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { to: formatDateWithNoTimeZone(to) }));
48
48
  } })))) : (filter.filteredOptions.map((value) => {
49
49
  const id = 'filter--' + filter.property + '--' + slug(value.value);
50
- return (react_1.default.createElement(FilterValue, { key: id },
50
+ return (react_1.default.createElement(FilterValue, { key: id, role: "link" },
51
51
  react_1.default.createElement(Checkbox_1.Checkbox, { type: "checkbox", id: id, checked: filter.selectedOptions.has(value.value), onChange: () => filter.toggleOption(value.value) }),
52
52
  react_1.default.createElement("label", { htmlFor: id },
53
53
  translate(value.value),
package/lib/components/Menu/MenuGroup.js CHANGED
@@ -54,7 +54,7 @@ function MenuGroup({ item, isExpanded, toggleExpanded, children, }) {
54
54
  }, [isExpanded]);
55
55
  return (react_1.default.createElement(Wrapper, { "data-component-name": "Menu/MenuGroup" },
56
56
  react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
57
- react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, isAlwaysExpanded: item.expanded === 'always', active: item.active },
57
+ react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, isAlwaysExpanded: item.expanded === 'always', active: item.active, role: !item.link ? 'link' : 'none' },
58
58
  react_1.default.createElement(MenuGroupArrow, { visibility: item.items.length ? 'visible' : 'hidden', direction: isExpanded ? 'down' : 'right' }),
59
59
  translate(item.labelTranslationKey, item.label))),
60
60
  react_1.default.createElement(MenuWrapper, { isExpanded: isExpanded }, showChildren ? children : null),
package/lib/components/Profile/Profile.js CHANGED
@@ -30,13 +30,13 @@ const utils_1 = require("../../utils");
30
30
  function ProfileComponent({ name = 'User', imageUrl, onClick, color }) {
31
31
  var _a;
32
32
  if (imageUrl) {
33
- return (react_1.default.createElement(ProfileWrapper, { onClick: onClick },
33
+ return (react_1.default.createElement(ProfileWrapper, { onClick: onClick, role: "link" },
34
34
  react_1.default.createElement(StyledUserName, { "data-cy": "user-name", color: color }, name),
35
35
  imageUrl && (react_1.default.createElement(AvatarWrapper, null,
36
36
  react_1.default.createElement("img", { "data-cy": "user-avatar", src: imageUrl, alt: "profile" })))));
37
37
  }
38
38
  const avatarLetters = `${name.charAt(0).toUpperCase()}${((_a = name.split(' ')[1]) === null || _a === void 0 ? void 0 : _a.charAt(0).toUpperCase()) || ''}`;
39
- return (react_1.default.createElement(ProfileWrapper, { onClick: onClick },
39
+ return (react_1.default.createElement(ProfileWrapper, { onClick: onClick, role: "link" },
40
40
  react_1.default.createElement(StyledUserName, { "data-cy": "user-name", color: color }, name),
41
41
  react_1.default.createElement(AvatarWrapper, { background: (0, utils_1.stringToHslColor)(name) },
42
42
  react_1.default.createElement("span", null, avatarLetters))));
package/lib/components/Profile/UserProfileMenu.js CHANGED
@@ -46,7 +46,7 @@ function UserProfileMenu({ hasDeveloperOnboarding, setIsOpened, handleLogout, })
46
46
  react_1.default.createElement(StyledLi, { "data-translation-key": translationKeys.myApps }, translate(translationKeys.myApps, 'My Apps')))) : null, (_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.menu) === null || _a === void 0 ? void 0 :
47
47
  _a.map((item) => (react_1.default.createElement(Link_1.Link, { external: item.external, key: item.label, to: item.link || '' },
48
48
  react_1.default.createElement(StyledLi, { separatorLine: item === null || item === void 0 ? void 0 : item.separatorLine }, item.label)))),
49
- react_1.default.createElement(StyledLi, { onClick: () => handleLogout(), "data-translation-key": translationKeys.logout }, translate(translationKeys.logout, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.logoutLabel) || 'Log out')))));
49
+ react_1.default.createElement(StyledLi, { onClick: () => handleLogout(), "data-translation-key": translationKeys.logout, role: "link" }, translate(translationKeys.logout, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.logoutLabel) || 'Log out')))));
50
50
  }
51
51
  exports.UserProfileMenu = UserProfileMenu;
52
52
  const StyledUl = styled_components_1.default.ul `
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.12.3",
3
+ "version": "0.12.4",
4
4
  "description": "Shared UI components library",
5
5
  "keywords": [],
6
6
  "author": "team@redocly.com",
package/src/I18n/LanguagePicker.tsx CHANGED
@@ -31,7 +31,7 @@ export const LanguagePicker = (props: { onChangeLanguage: (newLang: string) => v
31
31
  onClick={() => setIsOpen(!isOpen)}
32
32
  onBlur={() => setIsOpen(false)}
33
33
  >
34
- <DropdownValue>{currentLocale.toUpperCase()}</DropdownValue>
34
+ <DropdownValue role="link">{currentLocale.toUpperCase()}</DropdownValue>
35
35
  <DropdownMenu>
36
36
  {locales.map((locale) => (
37
37
  <MenuItem
@@ -44,6 +44,7 @@ export const LanguagePicker = (props: { onChangeLanguage: (newLang: string) => v
44
44
  props.onChangeLanguage(locale.code);
45
45
  }}
46
46
  key={locale.code}
47
+ role="link"
47
48
  >
48
49
  {locale.name || locale.code || ''}
49
50
  </MenuItem>
package/src/components/ColorModeSwitcher/ColorModeSwitcher.tsx CHANGED
@@ -36,6 +36,7 @@ export function ColorModeSwitcher(): JSX.Element | null {
36
36
  data-component-name="ColorModeSwitcher/ColorModeSwitcher"
37
37
  onClick={handelChangeColorMode}
38
38
  modes={modes}
39
+ role="link"
39
40
  >
40
41
  {modes.map((mode) => (
41
42
  <ColorModeIcon mode={mode} key={mode} />
package/src/components/Filter/Filter.tsx CHANGED
@@ -89,7 +89,7 @@ export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions:
89
89
  filter.filteredOptions.map((value: any) => {
90
90
  const id = 'filter--' + filter.property + '--' + slug(value.value);
91
91
  return (
92
- <FilterValue key={id}>
92
+ <FilterValue key={id} role="link">
93
93
  <Checkbox
94
94
  type="checkbox"
95
95
  id={id}
package/src/components/Menu/MenuGroup.tsx CHANGED
@@ -45,6 +45,7 @@ export function MenuGroup({
45
45
  onClick={toggleExpanded}
46
46
  isAlwaysExpanded={item.expanded === 'always'}
47
47
  active={item.active}
48
+ role={!item.link ? 'link' : 'none'}
48
49
  >
49
50
  <MenuGroupArrow
50
51
  visibility={item.items.length ? 'visible' : 'hidden'}
package/src/components/Profile/Profile.tsx CHANGED
@@ -13,7 +13,7 @@ export interface ProfileProps {
13
13
  function ProfileComponent({ name = 'User', imageUrl, onClick, color }: ProfileProps): JSX.Element {
14
14
  if (imageUrl) {
15
15
  return (
16
- <ProfileWrapper onClick={onClick}>
16
+ <ProfileWrapper onClick={onClick} role="link">
17
17
  <StyledUserName data-cy="user-name" color={color}>
18
18
  {name}
19
19
  </StyledUserName>
@@ -31,7 +31,7 @@ function ProfileComponent({ name = 'User', imageUrl, onClick, color }: ProfilePr
31
31
  }`;
32
32
 
33
33
  return (
34
- <ProfileWrapper onClick={onClick}>
34
+ <ProfileWrapper onClick={onClick} role="link">
35
35
  <StyledUserName data-cy="user-name" color={color}>
36
36
  {name}
37
37
  </StyledUserName>
package/src/components/Profile/UserProfileMenu.tsx CHANGED
@@ -40,7 +40,11 @@ export function UserProfileMenu({
40
40
  </Link>
41
41
  ))}
42
42
 
43
- <StyledLi onClick={() => handleLogout()} data-translation-key={translationKeys.logout}>
43
+ <StyledLi
44
+ onClick={() => handleLogout()}
45
+ data-translation-key={translationKeys.logout}
46
+ role="link"
47
+ >
44
48
  {translate(translationKeys.logout, userProfile?.logoutLabel || 'Log out')}
45
49
  </StyledLi>
46
50
  </StyledUl>