@redocly/theme 0.53.0-next.0 → 0.53.0-next.2

package/lib/components/Footer/FooterColumn.js

@@ -9,7 +9,6 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const FooterItem_1 = require("../../components/Footer/FooterItem");
 const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
-const Link_1 = require("../../components/Link/Link");
 function FooterColumn({ column, className }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -17,8 +16,8 @@ function FooterColumn({ column, className }) {
     const iconsOnly = items.every((item) => item.label === item.link && (item.icon || item.srcSet));
     const label = translate(column.labelTranslationKey, column.label);
     return (react_1.default.createElement(FooterColumnWrapper, { "data-component-name": "Footer/FooterColumn", className: className },
-        react_1.default.createElement(FooterColumnTitle, null, (0, utils_1.isNavLinkItem)(column) ? (react_1.default.createElement(Link_1.Link, { to: column.link, external: column.external, target: column.target }, label)) : (label)),
-        react_1.default.createElement(FooterColumnItems, { iconsOnly: iconsOnly }, items === null || items === void 0 ? void 0 : items.map((columnItem, columnItemIndex) => (react_1.default.createElement(FooterItem_1.FooterItem, { item: columnItem, iconsOnly: iconsOnly, key: columnItemIndex }))))));
+        !(0, utils_1.isNavLinkItem)(column) && react_1.default.createElement(FooterColumnTitle, null, label),
+        react_1.default.createElement(FooterColumnItems, { iconsOnly: (0, utils_1.isNavLinkItem)(column) ? false : iconsOnly }, (0, utils_1.isNavLinkItem)(column) ? (react_1.default.createElement(NonGroupItem, { item: column, iconsOnly: Boolean((column === null || column === void 0 ? void 0 : column.label) === (column === null || column === void 0 ? void 0 : column.link) && ((column === null || column === void 0 ? void 0 : column.icon) || (column === null || column === void 0 ? void 0 : column.srcSet))), key: column.label, className: "nonGroupFooterItem" })) : (items === null || items === void 0 ? void 0 : items.map((columnItem, columnItemIndex) => (react_1.default.createElement(FooterItem_1.FooterItem, { item: columnItem, iconsOnly: iconsOnly, key: columnItemIndex })))))));
 }
 const FooterColumnWrapper = styled_components_1.default.div `
   display: flex;
@@ -74,4 +73,7 @@ const FooterColumnItems = styled_components_1.default.div `
     justify-content: flex-start;
   }
 `;
+const NonGroupItem = (0, styled_components_1.default)(FooterItem_1.FooterItem) `
+  margin: 0;
+`;
 //# sourceMappingURL=FooterColumn.js.map

package/lib/components/Footer/FooterItem.d.ts

@@ -2,5 +2,6 @@ import type { ResolvedNavItem } from '@redocly/config';
 export type FooterItemProps = {
     item: ResolvedNavItem;
     iconsOnly?: boolean;
+    className?: string;
 };
-export declare function FooterItem({ item, iconsOnly }: FooterItemProps): JSX.Element | null;
+export declare function FooterItem({ item, iconsOnly, className }: FooterItemProps): JSX.Element | null;

package/lib/components/Footer/FooterItem.js

@@ -11,7 +11,7 @@ const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
 const Link_1 = require("../../components/Link/Link");
 const Image_1 = require("../../components/Image/Image");
 const utils_1 = require("../../core/utils");
-function FooterItem({ item, iconsOnly }) {
+function FooterItem({ item, iconsOnly, className }) {
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     const { translate } = useTranslate();
@@ -20,7 +20,7 @@ function FooterItem({ item, iconsOnly }) {
     }
     const hasIcon = Boolean(item.icon || item.srcSet);
     const iconWithoutLabel = Boolean(item.label === item.link && hasIcon);
-    return (react_1.default.createElement(FooterItemWrapper, { "data-component-name": "Footer/FooterItem", iconsOnly: iconsOnly, item: item }, item.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label))) : (react_1.default.createElement(FooterLink, { to: item.link, external: item.external, target: item.target, "data-testid": item.label, onClick: () => telemetry.send('footer_item_clicked', {}), "data-translation-key": item.labelTranslationKey },
+    return (react_1.default.createElement(FooterItemWrapper, { className: className, "data-component-name": "Footer/FooterItem", iconsOnly: iconsOnly, item: item }, item.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label))) : (react_1.default.createElement(FooterLink, { to: item.link, external: item.external, target: item.target, "data-testid": item.label, onClick: () => telemetry.send('footer_item_clicked', {}), "data-translation-key": item.labelTranslationKey },
         hasIcon ? (react_1.default.createElement(FooterLinkIcon, { iconsOnly: iconsOnly },
             react_1.default.createElement(Image_1.Image, { src: item.icon, srcSet: item.srcSet }))) : null,
         !iconWithoutLabel ? translate(item.labelTranslationKey, item.label) : null,

package/lib/core/hooks/menu/use-nested-menu.js

@@ -58,7 +58,7 @@ function useNestedMenu({ item, labelRef, nestedMenuRef }) {
     }, [labelRef, isExpanded, item.active]);
     const handleExpand = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
         if (item.expanded === 'always' ||
-            (item.link && item.hasActiveSubItem && item.link !== location.pathname)) {
+            (item.link && item.hasActiveSubItem && item.link !== (0, utils_1.withoutPathPrefix)(location.pathname))) {
             return;
         }
         const [firstChild] = item.items;

package/lib/core/utils/menu.js

@@ -36,7 +36,7 @@ const buildLanguagesGroup = (locales, defaultLocale, currentLocale) => {
         items: locales
             .filter((locale) => locale.code !== currentLocale)
             .map((locale) => {
-            const newLangPathname = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)((0, utils_1.withoutPathPrefix)(location.pathname), defaultLocale, locale.code, locales));
+            const newLangPathname = (0, utils_1.getPathnameForLocale)((0, utils_1.withoutPathPrefix)(location.pathname), defaultLocale, locale.code, locales);
             const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
             return {
                 type: 'link',

package/lib/core/utils/urls.d.ts

@@ -25,10 +25,17 @@ export declare function slash(path: string): string;
 export declare function addTrailingSlash(url: string): string;
 /**
  * Adds locale to pathname, or replaces current locale in pathname with a new one
- * @param originalPathname - Pathname without api prefix
+ * @param originalPathname - Pathname without path prefix
  * @param defaultLocale - Default locale code
  * @param newLocale - New locale code to apply
  * @param allLocales - Array of all available locales
  */
 export declare function getPathnameForLocale(originalPathname: string, defaultLocale: string, newLocale: string, allLocales: Locale[]): string;
+/**
+ * Extracts the locale code from a pathname
+ * @param pathname - URL pathname to extract locale from without path prefix
+ * @param defaultLocale - Default locale code to return if no locale found in pathname
+ * @param allLocales - Array of all available locales to check against
+ * @returns The locale code from the pathname, or the default locale if none found
+ */
 export declare function getLocaleFromPathname(pathname: string, defaultLocale?: string, allLocales?: Locale[]): string;

package/lib/core/utils/urls.js

@@ -84,7 +84,7 @@ function addTrailingSlash(url) {
 }
 /**
  * Adds locale to pathname, or replaces current locale in pathname with a new one
- * @param originalPathname - Pathname without api prefix
+ * @param originalPathname - Pathname without path prefix
  * @param defaultLocale - Default locale code
  * @param newLocale - New locale code to apply
  * @param allLocales - Array of all available locales
@@ -100,9 +100,15 @@ function getPathnameForLocale(originalPathname, defaultLocale, newLocale, allLoc
     const newLocalePrefix = newLocale === defaultLocale ? '' : '/' + newLocale;
     return `${newLocalePrefix.toLowerCase()}${pathnameWithoutLocale}`;
 }
+/**
+ * Extracts the locale code from a pathname
+ * @param pathname - URL pathname to extract locale from without path prefix
+ * @param defaultLocale - Default locale code to return if no locale found in pathname
+ * @param allLocales - Array of all available locales to check against
+ * @returns The locale code from the pathname, or the default locale if none found
+ */
 function getLocaleFromPathname(pathname, defaultLocale = constants_1.DEFAULT_LOCALE_PLACEHOLDER, allLocales = []) {
-    var _a;
-    const maybeLocale = (_a = withoutPathPrefix(pathname)) === null || _a === void 0 ? void 0 : _a.split('/')[1];
+    const maybeLocale = pathname === null || pathname === void 0 ? void 0 : pathname.split('/')[1];
     const locale = allLocales.find((locale) => locale.code.toLowerCase() === maybeLocale);
     return (locale === null || locale === void 0 ? void 0 : locale.code) || defaultLocale;
 }

package/lib/icons/__tests__/IconTestUtils.js

@@ -14,15 +14,30 @@ function testIconComponent(IconComponent, componentName) {
             const { container } = (0, react_2.render)(react_1.default.createElement(IconComponent, null));
             const svgElement = container.querySelector('svg');
             expect(svgElement).toBeInTheDocument();
-            expect(container.firstChild).toHaveStyle('height: 16px; width: 16px;');
+            // Check if styles are applied either via style attribute or CSS class
+            const element = container.firstChild;
+            const hasStyleAttr = element.style.height === '16px' && element.style.width === '16px';
+            const elementClass = element.getAttribute('class') || '';
+            const hasClassName = elementClass.includes('sc-'); // styled-components class
+            expect(hasStyleAttr || hasClassName).toBeTruthy();
         },
         appliesCustomSizeAndColor: () => {
+            var _a;
             const { container } = (0, react_2.render)(react_1.default.createElement(IconComponent, { size: "24px", color: "--color-primary" }));
             const svgElement = container.querySelector('svg');
             expect(svgElement).toBeInTheDocument();
-            expect(container.firstChild).toHaveStyle('height: 24px; width: 24px;');
+            const element = container.firstChild;
             const pathElement = container.querySelector('path');
-            expect(pathElement).toHaveStyle('fill: var(--color-primary);');
+            // Check if size styles are applied either via style attribute or CSS class
+            const hasSizeStyle = element.style.height === '24px' && element.style.width === '24px';
+            const elementClass = element.getAttribute('class') || '';
+            const hasClassName = elementClass.includes('sc-'); // styled-components class
+            expect(hasSizeStyle || hasClassName).toBeTruthy();
+            // Check if color is applied either via style attribute or CSS class
+            const hasColorStyle = ((_a = pathElement.getAttribute('style')) === null || _a === void 0 ? void 0 : _a.includes('fill: var(--color-primary)')) ||
+                pathElement.getAttribute('fill') === 'var(--color-primary)' ||
+                elementClass.includes('sc-'); // check styled-components class on the root element
+            expect(hasColorStyle).toBeTruthy();
         },
         hasCorrectDataComponentName: () => {
             const { container } = (0, react_2.render)(react_1.default.createElement(IconComponent, null));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.53.0-next.0",
+  "version": "0.53.0-next.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -88,7 +88,7 @@
     "react-calendar": "4.2.1",
     "react-date-picker": "10.0.3",
     "timeago.js": "4.0.2",
-    "@redocly/config": "0.23.0"
+    "@redocly/config": "0.24.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Footer/FooterColumn.tsx

@@ -6,7 +6,6 @@ import type { ResolvedNavItem } from '@redocly/config';
 import { FooterItem } from '@redocly/theme/components/Footer/FooterItem';
 import { breakpoints, isNavLinkItem } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { Link } from '@redocly/theme/components/Link/Link';
 
 export type FooterColumnProps = {
   column: ResolvedNavItem;
@@ -20,22 +19,22 @@ export function FooterColumn({ column, className }: FooterColumnProps): JSX.Elem
 
   const iconsOnly = items.every((item) => item.label === item.link && (item.icon || item.srcSet));
   const label = translate(column.labelTranslationKey, column.label);
-
   return (
     <FooterColumnWrapper data-component-name="Footer/FooterColumn" className={className}>
-      <FooterColumnTitle>
+      {!isNavLinkItem(column) && <FooterColumnTitle>{label}</FooterColumnTitle>}
+      <FooterColumnItems iconsOnly={isNavLinkItem(column) ? false : iconsOnly}>
         {isNavLinkItem(column) ? (
-          <Link to={column.link} external={column.external} target={column.target}>
-            {label}
-          </Link>
+          <NonGroupItem
+            item={column}
+            iconsOnly={Boolean(column?.label === column?.link && (column?.icon || column?.srcSet))}
+            key={column.label}
+            className="nonGroupFooterItem"
+          />
         ) : (
-          label
+          items?.map((columnItem, columnItemIndex) => (
+            <FooterItem item={columnItem} iconsOnly={iconsOnly} key={columnItemIndex} />
+          ))
         )}
-      </FooterColumnTitle>
-      <FooterColumnItems iconsOnly={iconsOnly}>
-        {items?.map((columnItem, columnItemIndex) => (
-          <FooterItem item={columnItem} iconsOnly={iconsOnly} key={columnItemIndex} />
-        ))}
       </FooterColumnItems>
     </FooterColumnWrapper>
   );
@@ -97,3 +96,7 @@ const FooterColumnItems = styled.div<{ iconsOnly: boolean }>`
     justify-content: flex-start;
   }
 `;
+
+const NonGroupItem = styled(FooterItem)`
+  margin: 0;
+`;

package/src/components/Footer/FooterItem.tsx

@@ -12,9 +12,10 @@ import { breakpoints } from '@redocly/theme/core/utils';
 export type FooterItemProps = {
   item: ResolvedNavItem;
   iconsOnly?: boolean;
+  className?: string;
 };
 
-export function FooterItem({ item, iconsOnly }: FooterItemProps): JSX.Element | null {
+export function FooterItem({ item, iconsOnly, className }: FooterItemProps): JSX.Element | null {
   const { useTranslate, useTelemetry } = useThemeHooks();
   const telemetry = useTelemetry();
   const { translate } = useTranslate();
@@ -24,9 +25,13 @@ export function FooterItem({ item, iconsOnly }: FooterItemProps): JSX.Element |
   }
   const hasIcon = Boolean(item.icon || item.srcSet);
   const iconWithoutLabel = Boolean(item.label === item.link && hasIcon);
-
   return (
-    <FooterItemWrapper data-component-name="Footer/FooterItem" iconsOnly={iconsOnly} item={item}>
+    <FooterItemWrapper
+      className={className}
+      data-component-name="Footer/FooterItem"
+      iconsOnly={iconsOnly}
+      item={item}
+    >
       {item.type === 'separator' ? (
         <FooterSeparator data-translation-key={item.labelTranslationKey}>
           {translate(item.labelTranslationKey, item.label)}

package/src/core/hooks/menu/use-nested-menu.ts

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useState } from 'react';
 import type { MenuItemProps } from '@redocly/theme/core/types';
 
 import { useMenuItemExpanded, useCollapse } from '@redocly/theme/core/hooks';
-import { loadAndNavigate } from '@redocly/theme/core/utils';
+import { loadAndNavigate, withoutPathPrefix } from '@redocly/theme/core/utils';
 
 type NestedMenuProps = MenuItemProps & {
   labelRef?: React.RefObject<HTMLElement>;
@@ -61,7 +61,7 @@ export function useNestedMenu({ item, labelRef, nestedMenuRef }: NestedMenuProps
   const handleExpand = useCallback(async () => {
     if (
       item.expanded === 'always' ||
-      (item.link && item.hasActiveSubItem && item.link !== location.pathname)
+      (item.link && item.hasActiveSubItem && item.link !== withoutPathPrefix(location.pathname))
     ) {
       return;
     }

package/src/core/utils/menu.ts

@@ -64,13 +64,11 @@ export const buildLanguagesGroup = (
     items: locales
       .filter((locale) => locale.code !== currentLocale)
       .map((locale) => {
-        const newLangPathname = withPathPrefix(
-          getPathnameForLocale(
-            withoutPathPrefix(location.pathname),
-            defaultLocale,
-            locale.code,
-            locales,
-          ),
+        const newLangPathname = getPathnameForLocale(
+          withoutPathPrefix(location.pathname),
+          defaultLocale,
+          locale.code,
+          locales,
         );
         const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
         return {

package/src/core/utils/urls.ts

@@ -88,7 +88,7 @@ export function addTrailingSlash(url: string): string {
 
 /**
  * Adds locale to pathname, or replaces current locale in pathname with a new one
- * @param originalPathname - Pathname without api prefix
+ * @param originalPathname - Pathname without path prefix
  * @param defaultLocale - Default locale code
  * @param newLocale - New locale code to apply
  * @param allLocales - Array of all available locales
@@ -115,12 +115,19 @@ export function getPathnameForLocale(
   return `${newLocalePrefix.toLowerCase()}${pathnameWithoutLocale}`;
 }
 
+/**
+ * Extracts the locale code from a pathname
+ * @param pathname - URL pathname to extract locale from without path prefix
+ * @param defaultLocale - Default locale code to return if no locale found in pathname
+ * @param allLocales - Array of all available locales to check against
+ * @returns The locale code from the pathname, or the default locale if none found
+ */
 export function getLocaleFromPathname(
   pathname: string,
   defaultLocale: string = DEFAULT_LOCALE_PLACEHOLDER,
   allLocales: Locale[] = [],
 ) {
-  const maybeLocale = withoutPathPrefix(pathname)?.split('/')[1];
+  const maybeLocale = pathname?.split('/')[1];
   const locale = allLocales.find((locale) => locale.code.toLowerCase() === maybeLocale);
 
   return locale?.code || defaultLocale;

package/src/icons/__tests__/IconTestUtils.tsx

@@ -10,7 +10,14 @@ export function testIconComponent(IconComponent: React.ComponentType<any>, compo
       const { container } = render(<IconComponent />);
       const svgElement = container.querySelector('svg');
       expect(svgElement).toBeInTheDocument();
-      expect(container.firstChild).toHaveStyle('height: 16px; width: 16px;');
+
+      // Check if styles are applied either via style attribute or CSS class
+      const element = container.firstChild as HTMLElement | SVGElement;
+      const hasStyleAttr = element.style.height === '16px' && element.style.width === '16px';
+      const elementClass = element.getAttribute('class') || '';
+      const hasClassName = elementClass.includes('sc-'); // styled-components class
+
+      expect(hasStyleAttr || hasClassName).toBeTruthy();
     },
 
     appliesCustomSizeAndColor: () => {
@@ -18,9 +25,24 @@ export function testIconComponent(IconComponent: React.ComponentType<any>, compo
 
       const svgElement = container.querySelector('svg');
       expect(svgElement).toBeInTheDocument();
-      expect(container.firstChild).toHaveStyle('height: 24px; width: 24px;');
-      const pathElement = container.querySelector('path');
-      expect(pathElement).toHaveStyle('fill: var(--color-primary);');
+
+      const element = container.firstChild as HTMLElement | SVGElement;
+      const pathElement = container.querySelector('path') as SVGPathElement;
+
+      // Check if size styles are applied either via style attribute or CSS class
+      const hasSizeStyle = element.style.height === '24px' && element.style.width === '24px';
+      const elementClass = element.getAttribute('class') || '';
+      const hasClassName = elementClass.includes('sc-'); // styled-components class
+
+      expect(hasSizeStyle || hasClassName).toBeTruthy();
+
+      // Check if color is applied either via style attribute or CSS class
+      const hasColorStyle =
+        pathElement.getAttribute('style')?.includes('fill: var(--color-primary)') ||
+        pathElement.getAttribute('fill') === 'var(--color-primary)' ||
+        elementClass.includes('sc-'); // check styled-components class on the root element
+
+      expect(hasColorStyle).toBeTruthy();
     },
 
     hasCorrectDataComponentName: () => {