@redocly/theme 0.12.4 → 0.13.0

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

@@ -4,4 +4,8 @@ interface FooterColumnProps {
     column: ResolvedNavItem;
 }
 export declare function FooterColumn({ column }: FooterColumnProps): JSX.Element;
+export declare const FooterLinkIcon: import("styled-components").StyledComponent<"i", any, {
+    url?: string | undefined;
+    withIconPadding: boolean;
+}, never>;
 export {};

package/lib/components/Footer/FooterColumn.js

@@ -1,23 +1,49 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FooterColumn = void 0;
+exports.FooterLinkIcon = exports.FooterColumn = void 0;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_components_1 = __importStar(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
 const hooks_1 = require("../../mocks/hooks");
 function FooterColumn({ column }) {
     var _a;
     const { translate } = (0, hooks_1.useTranslate)();
+    const hasIcon = column.items ? column.items.some((item) => !!item.icon) : false;
     return (react_1.default.createElement(FooterColumnContainer, { "data-component-name": "Footer/FooterColumn" },
-        react_1.default.createElement(FooterColumnTitle, null, translate(column.labelTranslationKey, column.label)), (_a = column === null || column === void 0 ? void 0 : column.items) === null || _a === void 0 ? void 0 :
+        react_1.default.createElement(FooterColumnTitle, { withIconPadding: hasIcon }, translate(column.labelTranslationKey, column.label)), (_a = column === null || column === void 0 ? void 0 : column.items) === null || _a === void 0 ? void 0 :
         _a.map((columnItem, columnItemIndex) => {
             if (columnItem.type === 'error') {
                 return null;
             }
-            return columnItem.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { key: columnItem.label + '_' + columnItemIndex }, translate(columnItem.labelTranslationKey, columnItem.label))) : (react_1.default.createElement(FooterLink, { key: columnItemIndex, to: columnItem.link, external: columnItem.external, target: columnItem.target, "data-cy": columnItem.label }, translate(columnItem.labelTranslationKey, columnItem.label)));
+            return columnItem.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { key: columnItem.label + '_' + columnItemIndex }, translate(columnItem.labelTranslationKey, columnItem.label))) : (react_1.default.createElement(FooterLink, { key: columnItemIndex, to: columnItem.link, external: columnItem.external, target: columnItem.target, "data-cy": columnItem.label },
+                react_1.default.createElement(exports.FooterLinkIcon, { url: columnItem.icon, withIconPadding: hasIcon }),
+                translate(columnItem.labelTranslationKey, columnItem.label)));
         })));
 }
 exports.FooterColumn = FooterColumn;
@@ -26,6 +52,10 @@ const FooterColumnTitle = styled_components_1.default.p `
   font-weight: var(--footer-title-font-weight);
   font-size: var(--footer-title-font-size);
   margin-bottom: var(--footer-title-margin-vertical);
+  ${({ withIconPadding }) => withIconPadding &&
+    (0, styled_components_1.css) `
+      padding-left: calc(var(--footer-item-icon-width) + var(--footer-item-icon-margin-right));
+    `}
   font-family: var(--footer-font-family);
   color: var(--footer-title-text-color);
 `;
@@ -53,4 +83,23 @@ const FooterLink = (0, styled_components_1.default)(Link_1.Link) `
     color: var(--footer-link-hover-color);
   }
 `;
+exports.FooterLinkIcon = styled_components_1.default.i `
+  ${({ withIconPadding, url }) => withIconPadding &&
+    !url &&
+    (0, styled_components_1.css) `
+      padding-left: calc(var(--footer-item-icon-width) + var(--footer-item-icon-margin-right));
+    `}
+  ${({ url }) => url &&
+    (0, styled_components_1.css) `
+      background-image: url('${url}');
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
+      width: var(--footer-item-icon-width);
+      height: var(--footer-item-icon-height);
+      display: inline-block;
+      margin-right: var(--footer-item-icon-margin-right);
+      vertical-align: middle;
+    `}
+`;
 //# sourceMappingURL=FooterColumn.js.map

package/lib/components/Navbar/NavbarItem.d.ts

@@ -11,3 +11,6 @@ export declare const NavbarLink: import("styled-components").StyledComponent<typ
 export declare const NavbarMenuItem: import("styled-components").StyledComponent<"li", any, {
     active?: boolean | undefined;
 }, never>;
+export declare const NavbarIcon: import("styled-components").StyledComponent<"i", any, {
+    url?: string | undefined;
+}, never>;

package/lib/components/Navbar/NavbarItem.js

@@ -1,11 +1,34 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavbarMenuItem = exports.NavbarLink = exports.NavbarMenuItemWithDropdownWrapper = exports.NavbarItem = void 0;
+exports.NavbarIcon = exports.NavbarMenuItem = exports.NavbarLink = exports.NavbarMenuItemWithDropdownWrapper = exports.NavbarItem = void 0;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_components_1 = __importStar(require("styled-components"));
 const react_router_dom_1 = require("react-router-dom");
 const Link_1 = require("../../mocks/Link");
 const utils_1 = require("../../mocks/utils");
@@ -22,12 +45,14 @@ function NavbarItem({ navItem, className }) {
             (0, utils_2.withPathPrefix)((0, utils_1.getPathnameForLocale)(item.link, defaultLocale, currentLocale, locales));
         return (react_1.default.createElement(exports.NavbarMenuItem, { active: isActive, "data-component-name": "Navbar/NavbarItem", className: className },
             react_1.default.createElement(exports.NavbarLink, { to: item.link, external: item.external, target: item.target, active: isActive },
+                item.icon ? react_1.default.createElement(exports.NavbarIcon, { url: item.icon }) : null,
                 react_1.default.createElement(NavbarLabel, null, translate(item.labelTranslationKey, item.label)))));
     }
     if (navItem.items) {
         const item = navItem;
         return (react_1.default.createElement(exports.NavbarMenuItemWithDropdownWrapper, null,
             react_1.default.createElement(exports.NavbarMenuItem, { active: false, "data-component-name": "Navbar/NavbarItem", className: className },
+                react_1.default.createElement(exports.NavbarIcon, { url: item.icon }),
                 react_1.default.createElement(NavbarLabel, null, translate(item.labelTranslationKey, item.label))),
             react_1.default.createElement(NavbarDropdown_1.NavbarDropdown, { items: item.items })));
     }
@@ -74,4 +99,18 @@ const NavbarLabel = styled_components_1.default.span `
   cursor: pointer;
   vertical-align: middle;
 `;
+exports.NavbarIcon = styled_components_1.default.i `
+  ${({ url }) => url &&
+    (0, styled_components_1.css) `
+      background-image: url('${url}');
+      width: var(--navbar-item-icon-width);
+      height: var(--navbar-item-icon-height);
+      display: inline-block;
+      background-size: contain;
+      margin-right: var(--navbar-item-icon-margin-right);
+      vertical-align: middle;
+      background-position: center;
+      background-repeat: no-repeat;
+    `}
+`;
 //# sourceMappingURL=NavbarItem.js.map

package/lib/globalStyle.js

@@ -1530,6 +1530,10 @@ const footer = (0, styled_components_1.css) `
   --footer-item-padding-vertical: 0.5em; // @presenter Spacingv
   --footer-item-padding-horizontal: 0;
 
+  --footer-item-icon-width: 24px; // @presenter Spacing
+  --footer-item-icon-height: 24px; // @presenter Spacing
+  --footer-item-icon-margin-right: 12px; // @presenter Spacing
+
   --footer-column-width: 20%; // @presenter Spacing
   --footer-column-margin-vertical: 20px; // @presenter Spacing
   --footer-column-margin-horizontal: 0; // @presenter Spacing
@@ -1577,6 +1581,9 @@ const navbar = (0, styled_components_1.css) `
   --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color
   --navbar-item-active-text-decoration: none;
   --navbar-item-separator-line-color: var(--border-color); // @presenter Color
+  --navbar-item-icon-width: 1.5em; // @presenter Spacing
+  --navbar-item-icon-height: 1.5em; // @presenter Spacing
+  --navbar-item-icon-margin-right: 0.5em; // @presenter Spacing
 
   /**
     * @tokens Navbar dropdown

package/lib/types/portal/src/shared/types/nav.d.ts

@@ -17,6 +17,7 @@ export type ResolvedNavLinkItem = {
     separatorLine?: boolean;
     routeSlug?: string;
     active?: boolean;
+    icon?: string;
     [REDOCLY_TEAMS_RBAC]?: Rbac;
 };
 export type ResolvedNavGroupItem = {
@@ -38,6 +39,7 @@ export type ResolvedNavGroupItem = {
     separatorLine?: boolean;
     routeSlug?: string;
     active?: boolean;
+    icon?: string;
     [REDOCLY_TEAMS_RBAC]?: Rbac;
 };
 export type ResolvedNavItem = ResolvedNavLinkItem | ResolvedNavGroupItem | {
@@ -53,6 +55,7 @@ export type ResolvedNavItem = ResolvedNavLinkItem | ResolvedNavGroupItem | {
     link?: undefined;
     items?: ResolvedNavItem[];
     sidebar?: ResolvedNavItem[];
+    icon?: string;
     [REDOCLY_TEAMS_RBAC]?: Rbac;
 } | {
     type: 'error';
@@ -66,6 +69,7 @@ export type ResolvedNavItem = ResolvedNavLinkItem | ResolvedNavGroupItem | {
     link?: undefined;
     items?: ResolvedNavItem[];
     sidebar?: ResolvedNavItem[];
+    icon?: string;
     [REDOCLY_TEAMS_RBAC]?: Rbac;
 };
 export type ResolvedNavItemWithLink = (ResolvedNavLinkItem | ResolvedNavGroupItem) & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.12.4",
+  "version": "0.13.0",
   "description": "Shared UI components library",
   "keywords": [],
   "author": "team@redocly.com",
@@ -87,27 +87,6 @@
     "hotkeys-js": "^3.10.1",
     "timeago.js": "^4.0.2"
   },
-  "nx": {
-    "namedInputs": {
-      "prod": [
-        "!{projectRoot}/**/__tests__/**",
-        "!{projectRoot}/**/*.stories.{ts,tsx}"
-      ]
-    },
-    "targets": {
-      "build": {
-        "outputs": [
-          "{projectRoot}/lib"
-        ]
-      },
-      "test": {
-        "outputs": [
-          "{projectRoot}/coverage",
-          "{projectRoot}/report.json"
-        ]
-      }
-    }
-  },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",
     "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

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { Link } from '@portal/Link';
 import type { ResolvedNavItem } from '@theme/types/portal';
@@ -11,9 +11,13 @@ interface FooterColumnProps {
 
 export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
   const { translate } = useTranslate();
+  const hasIcon = column.items ? column.items.some((item) => !!item.icon) : false;
+
   return (
     <FooterColumnContainer data-component-name="Footer/FooterColumn">
-      <FooterColumnTitle>{translate(column.labelTranslationKey, column.label)}</FooterColumnTitle>
+      <FooterColumnTitle withIconPadding={hasIcon}>
+        {translate(column.labelTranslationKey, column.label)}
+      </FooterColumnTitle>
       {column?.items?.map((columnItem, columnItemIndex) => {
         if (columnItem.type === 'error') {
           return null;
@@ -31,6 +35,7 @@ export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
             target={columnItem.target}
             data-cy={columnItem.label}
           >
+            <FooterLinkIcon url={columnItem.icon} withIconPadding={hasIcon} />
             {translate(columnItem.labelTranslationKey, columnItem.label)}
           </FooterLink>
         );
@@ -39,11 +44,16 @@ export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
   );
 }
 
-const FooterColumnTitle = styled.p`
+const FooterColumnTitle = styled.p<{ withIconPadding: boolean }>`
   display: inline-block;
   font-weight: var(--footer-title-font-weight);
   font-size: var(--footer-title-font-size);
   margin-bottom: var(--footer-title-margin-vertical);
+  ${({ withIconPadding }) =>
+    withIconPadding &&
+    css`
+      padding-left: calc(var(--footer-item-icon-width) + var(--footer-item-icon-margin-right));
+    `}
   font-family: var(--footer-font-family);
   color: var(--footer-title-text-color);
 `;
@@ -74,3 +84,25 @@ const FooterLink = styled(Link)`
     color: var(--footer-link-hover-color);
   }
 `;
+
+export const FooterLinkIcon = styled.i<{ url?: string; withIconPadding: boolean }>`
+  ${({ withIconPadding, url }) =>
+    withIconPadding &&
+    !url &&
+    css`
+      padding-left: calc(var(--footer-item-icon-width) + var(--footer-item-icon-margin-right));
+    `}
+  ${({ url }) =>
+    url &&
+    css`
+      background-image: url('${url}');
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
+      width: var(--footer-item-icon-width);
+      height: var(--footer-item-icon-height);
+      display: inline-block;
+      margin-right: var(--footer-item-icon-margin-right);
+      vertical-align: middle;
+    `}
+`;

package/src/components/Navbar/Navbar.tsx

@@ -14,8 +14,7 @@ import { Search } from '@theme/components/Search/Search';
 import { AuthUserProfile } from '@theme/components/Profile/AuthUserProfile';
 import type { LogoConfig, ResolvedConfigLinks } from '@theme/types/portal';
 import { useI18n } from '@portal/hooks';
-
-import { LanguagePicker } from '../../I18n/LanguagePicker';
+import { LanguagePicker } from '@theme/I18n/LanguagePicker';
 
 const EmptyNavbarHack = createGlobalStyle`
   #redocly_root {

package/src/components/Navbar/NavbarItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { useLocation } from 'react-router-dom';
 
 import { Link } from '@portal/Link';
@@ -36,6 +36,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
         className={className}
       >
         <NavbarLink to={item.link} external={item.external} target={item.target} active={isActive}>
+          {item.icon ? <NavbarIcon url={item.icon} /> : null}
           <NavbarLabel>{translate(item.labelTranslationKey, item.label)}</NavbarLabel>
         </NavbarLink>
       </NavbarMenuItem>
@@ -51,6 +52,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
           data-component-name="Navbar/NavbarItem"
           className={className}
         >
+          <NavbarIcon url={item.icon} />
           <NavbarLabel>{translate(item.labelTranslationKey, item.label)}</NavbarLabel>
         </NavbarMenuItem>
         <NavbarDropdown items={item.items as ResolvedNavLinkItem[]} />
@@ -106,3 +108,19 @@ const NavbarLabel = styled.span`
   cursor: pointer;
   vertical-align: middle;
 `;
+
+export const NavbarIcon = styled.i<{ url?: string }>`
+  ${({ url }) =>
+    url &&
+    css`
+      background-image: url('${url}');
+      width: var(--navbar-item-icon-width);
+      height: var(--navbar-item-icon-height);
+      display: inline-block;
+      background-size: contain;
+      margin-right: var(--navbar-item-icon-margin-right);
+      vertical-align: middle;
+      background-position: center;
+      background-repeat: no-repeat;
+    `}
+`;

package/src/globalStyle.ts

@@ -1544,6 +1544,10 @@ const footer = css`
   --footer-item-padding-vertical: 0.5em; // @presenter Spacingv
   --footer-item-padding-horizontal: 0;
 
+  --footer-item-icon-width: 24px; // @presenter Spacing
+  --footer-item-icon-height: 24px; // @presenter Spacing
+  --footer-item-icon-margin-right: 12px; // @presenter Spacing
+
   --footer-column-width: 20%; // @presenter Spacing
   --footer-column-margin-vertical: 20px; // @presenter Spacing
   --footer-column-margin-horizontal: 0; // @presenter Spacing
@@ -1593,6 +1597,9 @@ const navbar = css`
   --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color
   --navbar-item-active-text-decoration: none;
   --navbar-item-separator-line-color: var(--border-color); // @presenter Color
+  --navbar-item-icon-width: 1.5em; // @presenter Spacing
+  --navbar-item-icon-height: 1.5em; // @presenter Spacing
+  --navbar-item-icon-margin-right: 0.5em; // @presenter Spacing
 
   /**
     * @tokens Navbar dropdown

package/src/types/portal/src/shared/types/nav.ts

@@ -20,6 +20,7 @@ export type ResolvedNavLinkItem = {
   separatorLine?: boolean;
   routeSlug?: string;
   active?: boolean;
+  icon?: string;
   [REDOCLY_TEAMS_RBAC]?: Rbac;
 };
 
@@ -44,6 +45,7 @@ export type ResolvedNavGroupItem = {
   separatorLine?: boolean;
   routeSlug?: string;
   active?: boolean;
+  icon?: string;
   [REDOCLY_TEAMS_RBAC]?: Rbac;
 };
 
@@ -65,6 +67,7 @@ export type ResolvedNavItem =
       link?: undefined;
       items?: ResolvedNavItem[]; // for typescript
       sidebar?: ResolvedNavItem[]; // for typescript
+      icon?: string;
       [REDOCLY_TEAMS_RBAC]?: Rbac;
     }
   | {
@@ -81,6 +84,7 @@ export type ResolvedNavItem =
       link?: undefined;
       items?: ResolvedNavItem[]; // for typescript
       sidebar?: ResolvedNavItem[]; // for typescript
+      icon?: string; // for typescript
       [REDOCLY_TEAMS_RBAC]?: Rbac;
     };