feat(Navigation): add iconSize for navigation icons, update margin between icon and text (#329)

Author: aeksandla

src/models/navigation.ts

@@ -13,6 +13,7 @@ export interface NavigationItemBase {
     text: string;
     icon?: ImageProps;
     url?: string;
+    iconSize?: number;
 }
 
 export enum NavigationGithubButtonIcon {
@@ -82,6 +83,7 @@ export type ThemedNavigationLogoData = NavigationLogoData & ThemeSupporting<Navi
 export interface HeaderData {
     leftItems: NavigationItemModel[];
     rightItems?: NavigationItemModel[];
+    iconSize?: number;
 }
 
 export interface FooterColumn {

src/navigation/components/Header/Header.tsx

@@ -1,12 +1,17 @@
-import React, {MouseEvent, useCallback, useState} from 'react';
+import React, {MouseEvent, useCallback, useMemo, useState} from 'react';
 
 import _ from 'lodash';
 
 import Control from '../../../components/Control/Control';
 import OutsideClick from '../../../components/OutsideClick/OutsideClick';
 import {Col, Grid, Row} from '../../../grid';
 import {NavigationClose, NavigationOpen} from '../../../icons';
-import {HeaderData, ThemedNavigationLogoData} from '../../../models';
+import {
+    HeaderData,
+    NavigationItemBase,
+    NavigationItemModel,
+    ThemedNavigationLogoData,
+} from '../../../models';
 import {block} from '../../../utils';
 import {ItemColumnName} from '../../constants';
 import Logo from '../Logo/Logo';
@@ -52,11 +57,32 @@ const MobileMenuButton: React.FC<MobileMenuButtonProps> = ({
     );
 };
 
+const iconSizeKey: keyof NavigationItemBase = 'iconSize';
+
 export const Header: React.FC<HeaderProps> = ({data, logo}) => {
-    const {leftItems, rightItems} = data;
+    const {leftItems, rightItems, iconSize = 20} = data;
     const [isSidebarOpened, setIsSidebarOpened] = useState(false);
     const [activeItemId, setactiveItemId] = useState<string | undefined>(undefined);
 
+    const getNavigationItemWithIconSize = useCallback(
+        (item: NavigationItemModel) => {
+            if (!(iconSizeKey in item)) {
+                return {...item, iconSize};
+            }
+            return item;
+        },
+        [iconSize],
+    );
+
+    const leftItemsWithIconSize = useMemo(
+        () => leftItems.map(getNavigationItemWithIconSize),
+        [getNavigationItemWithIconSize, leftItems],
+    );
+    const rightItemsWithIconSize = useMemo(
+        () => rightItems?.map(getNavigationItemWithIconSize),
+        [getNavigationItemWithIconSize, rightItems],
+    );
+
     const onActiveItemChange = useCallback((id?: string) => {
         setactiveItemId(id);
     }, []);
@@ -86,7 +112,7 @@ export const Header: React.FC<HeaderProps> = ({data, logo}) => {
                         <div className={b('navigation-container')}>
                             <Navigation
                                 className={b('navigation')}
-                                links={leftItems}
+                                links={leftItemsWithIconSize}
                                 activeItemId={activeItemId}
                                 onActiveItemChange={onActiveItemChange}
                             />
@@ -96,9 +122,9 @@ export const Header: React.FC<HeaderProps> = ({data, logo}) => {
                                 isSidebarOpened={isSidebarOpened}
                                 onSidebarOpenedChange={onSidebarOpenedChange}
                             />
-                            {rightItems && (
+                            {rightItemsWithIconSize && (
                                 <ul className={b('buttons')}>
-                                    {rightItems.map((button, index) => (
+                                    {rightItemsWithIconSize.map((button, index) => (
                                         <NavigationListItem
                                             key={index}
                                             className={b('buttons-item')}

src/navigation/components/NavigationDropdownItem/NavigationDropdownItem.tsx

@@ -20,7 +20,7 @@ const NavigationDropdown: React.FC<NavigationDropdownProps> = ({
     onClick,
 }) => {
     const anchorRef = useRef<HTMLElement>(null);
-    const {text, icon, items, ...popupProps} = data;
+    const {text, icon, items, iconSize, ...popupProps} = data;
 
     return (
         <Fragment>
@@ -29,7 +29,7 @@ const NavigationDropdown: React.FC<NavigationDropdownProps> = ({
                 ref={anchorRef}
                 onClick={onClick}
                 isOpened={isActive}
-                data={{text, type: NavigationItemType.Dropdown, icon}}
+                data={{text, type: NavigationItemType.Dropdown, icon, iconSize}}
             />
             <NavigationPopup
                 open={isActive}

src/navigation/components/NavigationItem/components/ContentWrapper/ContentWrapper.scss

@@ -5,9 +5,7 @@ $block: '.#{$ns}content-wrapper';
 #{$block} {
     &__icon {
         display: flex;
-        width: 20px;
-        height: 20px;
-        margin-right: $indentXXXS;
+        margin-right: $navigationIconIndent;
 
         object-fit: cover;
     }

src/navigation/components/NavigationItem/components/ContentWrapper/ContentWrapper.tsx

@@ -1,4 +1,4 @@
-import React, {Fragment} from 'react';
+import React, {Fragment, useMemo} from 'react';
 
 import {Image} from '../../../../../components';
 import {ImageProps} from '../../../../../models';
@@ -8,9 +8,24 @@ import './ContentWrapper.scss';
 
 const b = block('content-wrapper');
 
-export const ContentWrapper: React.FC<{text: string; icon?: ImageProps}> = ({text, icon}) => (
-    <Fragment>
-        {icon && typeof icon !== 'string' && <Image className={b('icon')} {...icon} />}
-        <span className={b('text')}>{text}</span>
-    </Fragment>
-);
+interface ContentWrapperProps {
+    text: string;
+    icon?: ImageProps;
+    iconSize?: number;
+}
+
+export const ContentWrapper: React.FC<ContentWrapperProps> = ({text, icon, iconSize}) => {
+    const iconSizeStyle = useMemo(
+        () => (iconSize ? {height: `${iconSize}px`, width: `${iconSize}px`} : {}),
+        [iconSize],
+    );
+
+    return (
+        <Fragment>
+            {icon && typeof icon !== 'string' && (
+                <Image className={b('icon')} {...icon} style={iconSizeStyle} />
+            )}
+            <span className={b('text')}>{text}</span>
+        </Fragment>
+    );
+};

src/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.tsx

@@ -16,12 +16,12 @@ const TOGGLE_ARROW_SIZE = 12;
 type NavigationDropdownProps = NavigationItemProps & DropdownItemData;
 
 export const NavigationDropdown = React.forwardRef<HTMLElement, NavigationDropdownProps>(
-    ({text, icon, isOpened, className, ...props}, ref) => {
+    ({text, icon, isOpened, className, iconSize, ...props}, ref) => {
         const iconData = icon && getMediaImage(icon);
 
         return (
             <span ref={ref} {...props} className={b(null, className)}>
-                <ContentWrapper text={text} icon={iconData} />
+                <ContentWrapper text={text} icon={iconData} iconSize={iconSize} />
                 <ToggleArrow
                     className={b('arrow')}
                     size={TOGGLE_ARROW_SIZE}

src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.tsx

@@ -17,14 +17,14 @@ type NavigationLinkProps = NavigationItemProps & NavigationLinkItem;
 
 export const NavigationLink: React.FC<NavigationLinkProps> = (props) => {
     const {hostname, Link} = useContext(LocationContext);
-    const {url, text, icon, arrow, target, className, ...rest} = props;
+    const {url, text, icon, arrow, target, className, iconSize, ...rest} = props;
     const linkExtraProps = getLinkProps(url, hostname, target);
     const iconData = icon && getMediaImage(icon);
 
     const classes = b(null, className);
     const content = (
         <Fragment>
-            <ContentWrapper text={text} icon={iconData} />
+            <ContentWrapper text={text} icon={iconData} iconSize={iconSize} />
             {arrow && <NavigationArrow className={b('arrow')} />}
         </Fragment>
     );

src/navigation/schema.ts

@@ -37,6 +37,9 @@ const NavigationItemBaseProps = {
         type: 'string',
         pattern: urlPattern,
     },
+    iconSize: {
+        type: 'number',
+    },
 };
 
 const NavigationItemBaseLinkProps = omit(NavigationItemBaseProps, ['url']);
@@ -96,5 +99,8 @@ export const NavigationHeaderProps = {
     properties: {
         leftItems: NavigationItemProps,
         rightItems: NavigationItemProps,
+        iconSize: {
+            type: 'number',
+        },
     },
 };

styles/variables.scss

@@ -22,6 +22,8 @@ $contentMargin: $indentM;
 $contentLiftIndent: $indentXL;
 $contentLiftIndentMobile: $indentM;
 
+$navigationIconIndent: 6px;
+
 //slider
 $sliderArrowSize: 42px;
 $headerSliderLargeBreakpoint: 1410px;