@qoretechnologies/reqore 0.34.11 → 0.34.13

package/src/components/Breadcrumbs/index.tsx

@@ -15,8 +15,7 @@ import { IReqoreBreadcrumbsTheme, IReqoreTheme, TReqoreIntent } from '../../cons
 import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
 import { calculateStringSizeInPixels } from '../../helpers/utils';
 import { useReqoreTheme } from '../../hooks/useTheme';
-import { TReqoreTooltipProp } from '../../types/global';
-import { IReqoreIconName } from '../../types/icons';
+import { IReqoreButtonProps } from '../Button';
 import ReqoreIcon from '../Icon';
 import ReqoreMenu from '../Menu';
 import ReqoreMenuItem from '../Menu/item';
@@ -32,15 +31,11 @@ export interface IReqoreBreadcrumbItemTabs {
   activeTabIntent?: TReqoreIntent;
 }
 
-export interface IReqoreBreadcrumbItem {
-  tooltip?: TReqoreTooltipProp;
+export interface IReqoreBreadcrumbItem extends IReqoreButtonProps {
   label?: string;
-  icon?: IReqoreIconName;
-  active?: boolean;
   as?: any;
   props?: React.HTMLAttributes<any>;
   withTabs?: IReqoreBreadcrumbItemTabs;
-  customTheme?: IReqoreBreadcrumbsTheme;
 }
 
 export interface IReqoreBreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -58,14 +53,14 @@ interface IStyledBreadcrumbs extends Omit<IReqoreBreadcrumbsProps, 'items'> {
 }
 
 const StyledReqoreBreadcrumbs = styled.div<IStyledBreadcrumbs>`
-  ${({ theme, size }: IStyledBreadcrumbs) => css`
+  ${({ theme, size, flat }: IStyledBreadcrumbs) => css`
     width: 100%;
-    height: ${TABS_SIZE_TO_PX[size!]}px;
+    min-height: ${TABS_SIZE_TO_PX[size!]}px;
     margin: ${MARGIN_FROM_SIZE[size!]}px 0;
     display: flex;
     padding: 0 ${PADDING_FROM_SIZE[size!]}px;
     justify-content: space-between;
-    border-bottom: 1px solid ${changeLightness(theme.main, 0.05)};
+    border-bottom: ${flat ? undefined : `1px solid ${changeLightness(theme.main, 0.05)}`};
     background-color: ${({ theme }: { theme: IReqoreTheme }) =>
       theme.breadcrumbs?.main || 'transparent'};
 
@@ -104,7 +99,6 @@ const StyledBreadcrumbsTabsWrapper = styled.div`
   width: 100%;
 `;
 
-const itemPadding = 27;
 const arrowSize = 50;
 
 const getBreadcrumbsLength = (
@@ -119,7 +113,7 @@ const getBreadcrumbsLength = (
     if (item.withTabs) {
       return (
         len +
-        itemPadding +
+        PADDING_FROM_SIZE[size] +
         arrowSize +
         getTabsLength(item.withTabs.tabs, 'width', item.withTabs.activeTab, size)
       );
@@ -127,7 +121,7 @@ const getBreadcrumbsLength = (
 
     return (
       len +
-      itemPadding +
+      PADDING_FROM_SIZE[size] +
       ICON_FROM_SIZE[size] +
       arrowSize +
       calculateStringSizeInPixels(item.label || '', TEXT_FROM_SIZE[size])

package/src/components/Breadcrumbs/item.tsx

@@ -1,20 +1,9 @@
-import { forwardRef, useState } from 'react';
-import styled, { css } from 'styled-components';
+import { forwardRef } from 'react';
 import { IReqoreBreadcrumbItem } from '.';
-import { PADDING_FROM_SIZE, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
-import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
-import { useTooltip } from '../../hooks/useTooltip';
-import { ActiveIconScale, InactiveIconScale } from '../../styles';
-import {
-  StyledActiveContent,
-  StyledAnimatedTextWrapper,
-  StyledInActiveContent,
-  StyledInvisibleContent,
-} from '../Button';
-import ReqoreIcon from '../Icon';
+import ReqoreButton from '../Button';
 
 export interface IReqoreBreadcrumbItemProps extends IReqoreBreadcrumbItem {
   interactive?: boolean;
@@ -25,131 +14,24 @@ export interface IReqoreBreadcrumbItemStyle extends IReqoreBreadcrumbItemProps {
   theme: IReqoreTheme;
 }
 
-const StyledBreadcrumbItem = styled.div<IReqoreBreadcrumbItemStyle>`
-  ${({ theme, active, interactive, size }: IReqoreBreadcrumbItemStyle) => {
-    const textColor =
-      theme.breadcrumbs?.item?.color ||
-      (theme.breadcrumbs?.main
-        ? getReadableColorFrom(theme.breadcrumbs.main, true)
-        : getReadableColor(theme, undefined, undefined, true));
-
-    return css`
-      display: flex;
-      flex-shrink: 0;
-      height: 100%;
-      justify-content: space-evenly;
-      align-items: center;
-      padding: 0 ${PADDING_FROM_SIZE[size!]}px;
-      transition: background-color 0.15s ease-out;
-      font-size: ${TEXT_FROM_SIZE[size!]}px;
-      font-weight: 450;
-      position: relative;
-      overflow: hidden;
-
-      * {
-        color: ${textColor};
-      }
-
-      ${InactiveIconScale}
-
-      ${active &&
-      css`
-        * {
-          font-weight: 600;
-          color: ${theme.breadcrumbs?.item?.activeColor ||
-          (theme.breadcrumbs?.main
-            ? getReadableColorFrom(theme.breadcrumbs.main, true)
-            : getReadableColor(theme, undefined, undefined))};
-        }
-
-        ${ActiveIconScale}
-      `}
-
-      ${interactive &&
-      css`
-        cursor: pointer;
-        &:hover {
-          color: ${theme.breadcrumbs?.item?.hoverColor ||
-          (theme.breadcrumbs?.main
-            ? getReadableColorFrom(theme.breadcrumbs.main)
-            : getReadableColor(theme, undefined, undefined))};
-          background-color: ${changeLightness(theme.breadcrumbs?.main || theme.main, 0.05)};
-          ${ActiveIconScale}
-
-          ${StyledActiveContent} {
-            transform: translateY(0px);
-            filter: blur(0);
-            opacity: 1;
-          }
-
-          ${StyledInActiveContent} {
-            transform: translateY(150%);
-            filter: blur(10px);
-            opacity: 0;
-          }
-        }
-      `}
-
-    a:hover {
-        color: ${theme.breadcrumbs?.item?.hoverColor ||
-        (theme.breadcrumbs?.main
-          ? getReadableColorFrom(theme.breadcrumbs?.main)
-          : getReadableColor(theme, undefined, undefined))};
-      }
-    `;
-  }}
-
-  a {
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-`;
-
-const ReqoreBreadcrumbsItem = forwardRef<HTMLDivElement, IReqoreBreadcrumbItemProps>(
-  (
-    {
-      tooltip,
-      label,
-      props,
-      icon,
-      active,
-      as,
-      interactive,
-      customTheme,
-      size = 'normal',
-    }: IReqoreBreadcrumbItemProps,
-    ref
-  ) => {
-    const { targetRef } = useCombinedRefs(ref);
-    const [itemRef, setItemRef] = useState(undefined);
+const ReqoreBreadcrumbsItem = forwardRef<HTMLButtonElement, IReqoreBreadcrumbItemProps>(
+  ({ label, props, as, customTheme, ...rest }: IReqoreBreadcrumbItemProps, ref) => {
     const theme = useReqoreTheme('breadcrumbs', customTheme);
 
-    useTooltip(itemRef, tooltip);
-
     return (
-      <StyledBreadcrumbItem
-        ref={(ref) => {
-          targetRef.current = ref;
-          setItemRef(ref);
-        }}
-        active={active}
-        interactive={interactive || !!props?.onClick}
+      <ReqoreButton
+        // @ts-ignore
+        as={as}
+        ref={ref}
         className='reqore-breadcrumbs-item'
-        theme={theme}
-        size={size}
+        customTheme={theme}
+        minimal
+        flat
+        {...rest}
+        {...props}
       >
-        {icon && <ReqoreIcon icon={icon} size={size} margin={label ? 'right' : undefined} />}
-        {label && (
-          <StyledAnimatedTextWrapper as={as || 'span'} {...props}>
-            <StyledActiveContent>{label}</StyledActiveContent>
-            <StyledInActiveContent>{label}</StyledInActiveContent>
-            <StyledInvisibleContent>{label}</StyledInvisibleContent>
-          </StyledAnimatedTextWrapper>
-        )}
-      </StyledBreadcrumbItem>
+        {label}
+      </ReqoreButton>
     );
   }
 );

package/src/components/Button/index.tsx

@@ -76,6 +76,7 @@ export interface IReqoreButtonProps
   labelEffect?: IReqoreEffect;
   descriptionEffect?: IReqoreEffect;
   label?: React.HTMLAttributes<HTMLButtonElement>['children'];
+  as?: string | React.ElementType;
 }
 
 export interface IReqoreButtonStyle extends Omit<IReqoreButtonProps, 'intent'> {
@@ -398,6 +399,7 @@ const ReqoreButton = memo(
         iconColor,
         iconsAlign,
         label,
+        as,
         ...rest
       }: IReqoreButtonProps,
       ref
@@ -434,7 +436,7 @@ const ReqoreButton = memo(
                 }
           }
           tabindex={rest.disabled ? -1 : 0}
-          as='button'
+          as={as || 'button'}
           theme={theme}
           ref={(ref) => {
             targetRef.current = ref;

package/src/components/Paging/index.tsx

@@ -16,14 +16,17 @@ export interface IReqorePaginationComponentProps
   listPageButtonProps?: IReqoreDropdownProps;
   controlPageButtonProps?: IReqoreButtonProps;
   loadMoreButtonProps?: IReqoreButtonProps;
+  loadAllButtonProps?: IReqoreButtonProps;
   firstPageLabel?: string;
   lastPageLabel?: string;
   nextPageLabel?: string;
   previousPageLabel?: string;
   pageLabel?: string;
   loadMoreLabel?: string;
+  loadAllLabel?: string;
   showPages?: boolean;
   showControls?: boolean;
+  showLoadAllButton?: boolean;
   showPagesAs?: 'buttons' | 'list';
   showLabels?: boolean;
   scrollOnLoadMore?: boolean;
@@ -66,15 +69,18 @@ function Pagination<T>({
   listPageButtonProps = {},
   controlPageButtonProps = {},
   loadMoreButtonProps = {},
+  loadAllButtonProps = {},
   firstPageLabel = 'First',
   lastPageLabel = 'Last',
   nextPageLabel = 'Next',
   previousPageLabel = 'Back',
   pageLabel = 'Page',
   loadMoreLabel = 'Load more',
+  loadAllLabel = 'Load all',
   showLabels,
   showPages = true,
   showControls = true,
+  showLoadAllButton = true,
   scrollOnLoadMore,
   autoLoadMore,
   itemsPerPage,
@@ -191,19 +197,35 @@ function Pagination<T>({
       {infinite && !isLastPage ? (
         <ReqoreControlGroup vertical>
           <div className='reqore-auto-scroll-target' ref={setScrollTargetRef} />
-          <ReqoreButton
-            icon='ArrowDropDownLine'
-            badge={itemsLeft}
-            iconsAlign='center'
-            {...loadMoreButtonProps}
-            onClick={next}
-            ref={setLoadMoreRef}
-            style={{
-              scrollMarginTop: '200px',
-            }}
-          >
-            {showLabels && loadMoreLabel}
-          </ReqoreButton>
+          <ReqoreControlGroup stack>
+            <ReqoreButton
+              icon='ArrowDropDownLine'
+              badge={itemsPerPage}
+              iconsAlign='center'
+              {...loadMoreButtonProps}
+              onClick={next}
+              ref={setLoadMoreRef}
+              style={{
+                scrollMarginTop: '200px',
+              }}
+            >
+              {showLabels && loadMoreLabel}
+            </ReqoreButton>
+            {showLoadAllButton && (
+              <ReqoreButton
+                icon='ArrowDropDownLine'
+                badge={itemsLeft}
+                iconsAlign='center'
+                {...loadAllButtonProps}
+                onClick={last}
+                style={{
+                  scrollMarginTop: '200px',
+                }}
+              >
+                {showLabels && loadAllLabel}
+              </ReqoreButton>
+            )}
+          </ReqoreControlGroup>
         </ReqoreControlGroup>
       ) : null}
       {!infinite ? (

package/src/mock/breadcrumbs.ts

@@ -1,5 +1,6 @@
 import { noop } from 'lodash';
 import { IReqoreBreadcrumbItem, IReqoreBreadcrumbItemTabs } from '../components/Breadcrumbs';
+import { ReqoreH3 } from '../components/Header';
 import { Icons } from './icons';
 
 export default [
@@ -10,18 +11,21 @@ export default [
     active: true,
   },
   {
-    label: 'Workflows',
-    icon: Icons.Workflow,
+    label: 'Workflows as Link',
     tooltip: 'Opens in a new window',
     as: 'a',
     props: {
       href: 'https://google.com',
     },
+    icon: Icons.Workflows,
+    flat: false,
+    intent: 'info',
   },
   {
-    label: 'Services',
     icon: Icons.Services,
-    tooltip: 'Services',
+    tooltip: 'Services as H3',
+    as: ReqoreH3,
+    label: 'Services as H3',
     props: {
       onClick: noop,
     },
@@ -30,6 +34,10 @@ export default [
     label: 'Jobs',
     icon: Icons.Jobs,
     customTheme: '#a9a9a9',
+    badge: 10,
+    description: 'Some item description',
+    intent: 'warning',
+    minimal: false,
   },
   {
     tooltip: 'Connections',

package/src/stories/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -3,6 +3,7 @@ import { IReqoreBreadcrumbItem, IReqoreBreadcrumbsProps } from '../../components
 import { ReqoreBreadcrumbs } from '../../index';
 import breadcrumbs, { breadcrumbsTabs } from '../../mock/breadcrumbs';
 import { buildTemplate } from '../utils';
+import { SizeArg } from '../utils/args';
 
 export default {
   title: 'Components/Breadcrumbs',
@@ -13,6 +14,7 @@ export default {
       description: 'Whether tabs should be shown alongside the breadcrumbs',
       control: 'boolean',
     },
+    ...SizeArg,
   },
   parameters: {
     jest: ['breadcrumbs.test.tsx'],
@@ -36,3 +38,4 @@ const Template: ComponentStory<typeof ReqoreBreadcrumbs & { withTabs?: boolean }
 
 export const Default = buildTemplate(Template);
 export const WithTabs = buildTemplate(Template, { withTabs: true });
+export const Flat = buildTemplate(Template, { flat: true });

package/src/stories/Paging/Paging.stories.tsx

@@ -174,7 +174,7 @@ export const Infinite: Story<
 > = Template.bind({});
 Infinite.args = {
   showLabels: true,
-  fluid: true,
+  fluid: false,
   loadMoreButtonProps: {
     textAlign: 'center',
   },
@@ -195,6 +195,10 @@ InfiniteWithAutoScroll.args = {
     textAlign: 'center',
     size: 'big',
   },
+  loadAllButtonProps: {
+    textAlign: 'center',
+    size: 'big',
+  },
   loadMoreLabel: 'Load 100 more',
   pagingOptions: {
     infinite: true,