feat(Breadcrumbs): для хлебных крошек добавлен параметр iconStart, по…

…зволяющий задавать иконку слева от отекста крошки
AdmiralDS · Feb 6, 2024 · 2283272 · 2283272
1 parent ddeef1e
commit 2283272
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 22 deletions.
diff --git a/src/components/Breadcrumbs/BreadCrumb.tsx b/src/components/Breadcrumbs/BreadCrumb.tsx
@@ -26,11 +26,15 @@ export const Crumb = styled.li<{ $dimension: BreadcrumbsProps['dimension'] }>`
   ${getTypography}
 `;
 
-//inset-padding, inset-margin
 const IconContainer = styled.div<{ $dimension: BreadcrumbsProps['dimension'] }>`
   width: ${({ $dimension }) => ($dimension == 'l' ? 20 : 16)}px;
   height: ${({ $dimension }) => ($dimension == 'l' ? 20 : 16)}px;
+  flex-shrink: 0;
   margin-right: 8px;
+
+  & *[fill^='#'] {
+    fill: ${({ theme }) => theme.color['Neutral/Neutral 50']};
+  }
 `;
 
 export const Content = styled.span`
@@ -52,9 +56,15 @@ const TextWithTooltip = TooltipHoc(TextWrapper);
 const activeCrumbMixin = css`
   &:hover {
     color: ${({ theme }) => theme.color['Primary/Primary 70']};
+    ${IconContainer} *[fill^='#'] {
+      fill: ${({ theme }) => theme.color['Primary/Primary 70']};
+    }
   }
   &:active {
     color: ${({ theme }) => theme.color['Primary/Primary 80']};
+    ${IconContainer} *[fill^='#'] {
+      fill: ${({ theme }) => theme.color['Primary/Primary 80']};
+    }
   }
 `;
 
@@ -123,8 +133,8 @@ export const Breadcrumb = React.forwardRef<HTMLLIElement, BreadcrumbProps & Inte
           $active={active}
           {...linkProps}
         >
-          {iconStart && <IconContainer $dimension={dimension}>{iconStart}</IconContainer>}
           <Content tabIndex={-1} role="link">
+            {iconStart && <IconContainer $dimension={dimension}>{iconStart}</IconContainer>}
             {tooltip ? <TextWithTooltip renderContent={() => text}>{text.slice(0, 37) + '...'}</TextWithTooltip> : text}
             {children}
           </Content>

diff --git a/src/components/Breadcrumbs/Menu.tsx b/src/components/Breadcrumbs/Menu.tsx
@@ -27,6 +27,17 @@ const Option = styled.a`
   }
 `;
 
+const IconContainer = styled.div<{ $dimension: MenuButtonProps['dimension'] }>`
+  width: ${({ $dimension }) => ($dimension == 'm' ? 20 : 16)}px;
+  height: ${({ $dimension }) => ($dimension == 'm' ? 20 : 16)}px;
+  flex-shrink: 0;
+  margin-right: 8px;
+
+  & *[fill^='#'] {
+    fill: ${({ theme }) => theme.color['Neutral/Neutral 50']};
+  }
+`;
+
 const MenuItemWithTooltip = TooltipHoc(MenuItem);
 
 export interface MenuButtonProps {
@@ -65,12 +76,14 @@ export const MenuButton: React.FC<MenuButtonProps> = ({
               role="option"
             >
               <Option href={item.url} as={item.linkAs} {...item.linkProps}>
+                {item.iconStart && <IconContainer $dimension={dimension}>{item.iconStart}</IconContainer>}
                 {item.text.slice(0, 37) + '...'}
               </Option>
             </MenuItemWithTooltip>
           ) : (
             <MenuItem dimension={dimension} {...options} key={id} role="option">
               <Option href={item.url} as={item.linkAs} {...item.linkProps}>
+                {item.iconStart && <IconContainer $dimension={dimension}>{item.iconStart}</IconContainer>}
                 {item.text}
               </Option>
             </MenuItem>

diff --git a/src/components/Breadcrumbs/stories/Breadcrumbs.stories.tsx b/src/components/Breadcrumbs/stories/Breadcrumbs.stories.tsx
@@ -207,9 +207,8 @@ export const CrumbWithIconExample = {
         code: BreadcrumbsIconsRaw,
       },
       description: {
-        story: `Последняя вкладка в компоненте может быть либо неактивной (по умолчанию), в таком случае она отображает 
-        текущее местоположение. Либо последняя вкладка активна и отображает предыдущий уровень сайта. Управляет 
-        поведением последней вкладки параметр lastBreadcrumbActive.`,
+        story: `При необходимости в любой хлебной крошке можно отобразить иконку слева от текста, для этого
+        у хлебной крошки должен быть задан параметр iconStart.`,
       },
     },
   },

diff --git a/src/components/Breadcrumbs/stories/BreadcrumbsIcons.template.tsx b/src/components/Breadcrumbs/stories/BreadcrumbsIcons.template.tsx
@@ -1,28 +1,23 @@
 import * as React from 'react';
 import { Breadcrumbs } from '@admiral-ds/react-ui';
-import type { BreadcrumbsProps } from '@admiral-ds/react-ui';
 import { ReactComponent as HomeOutline } from '@admiral-ds/icons/build/system/HomeOutline.svg';
-import { ReactComponent as IconsOutline } from '@admiral-ds/icons/build/category/IconsOutline.svg';
+import { ReactComponent as JpgOutline } from '@admiral-ds/icons/build/documents/JpgOutline.svg';
 
 const items = [
   { url: '#', text: 'page 1', iconStart: <HomeOutline /> },
-  { url: '#', text: 'page 2222222222222222222222222222222222222222' },
-  { url: '#', text: 'page 3', iconStart: <IconsOutline /> },
-  { url: '#', text: 'page 4', iconStart: <IconsOutline /> },
-  { url: '#', text: 'page 5', iconStart: <IconsOutline /> },
-  { url: '#', text: 'page 6', iconStart: <IconsOutline /> },
-  { url: '#', text: 'page 7', iconStart: <IconsOutline /> },
-  { url: '#', text: 'page 8', iconStart: <IconsOutline /> },
-  { url: '#', text: 'page 9', iconStart: <IconsOutline /> },
-  { url: '#', text: 'page 10', iconStart: <IconsOutline /> },
-  { url: '#', text: 'page 11', iconStart: <IconsOutline /> },
+  { url: '#', text: 'page 2222222222222222222222222222222222222222', iconStart: <JpgOutline /> },
+  { url: '#', text: 'page 3', iconStart: <JpgOutline /> },
+  { url: '#', text: 'page 4', iconStart: <JpgOutline /> },
+  { url: '#', text: 'page 5', iconStart: <JpgOutline /> },
+  { url: '#', text: 'page 6', iconStart: <JpgOutline /> },
+  { url: '#', text: 'page 7', iconStart: <JpgOutline /> },
+  { url: '#', text: 'page 8', iconStart: <JpgOutline /> },
+  { url: '#', text: 'page 9', iconStart: <JpgOutline /> },
+  { url: '#', text: 'page 10', iconStart: <JpgOutline /> },
+  { url: '#', text: 'page 11', iconStart: <JpgOutline /> },
   { text: 'current page' },
 ];
 
 export const BreadcrumbsIconsTemplate = () => {
-  return (
-    <>
-      <Breadcrumbs items={items} dropContainerClassName="dropContainerClass" />
-    </>
-  );
+  return <Breadcrumbs items={items} dropContainerClassName="dropContainerClass" />;
 };