@qoretechnologies/reqore 0.34.10 → 0.34.12

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/Drawer/index.tsx

@@ -210,8 +210,9 @@ export const ReqoreDrawer: React.FC<IReqoreDrawerProps> = ({
         icon: getHideShowIcon(position, _isHidden),
         onClick: () => {
           setIsHidden(!_isHidden);
+
           if (onHideToggle) {
-            onHideToggle(_isHidden);
+            onHideToggle(!_isHidden);
           }
         },
         className: 'reqore-drawer-hide-button',
@@ -219,7 +220,7 @@ export const ReqoreDrawer: React.FC<IReqoreDrawerProps> = ({
     }
 
     return builtActions;
-  }, [hidable, position, onClose]);
+  }, [hidable, position, onClose, actions, _isHidden]);
 
   const positions = useMemo(() => {
     /* Centering the modal. */
@@ -345,7 +346,7 @@ export const ReqoreDrawer: React.FC<IReqoreDrawerProps> = ({
                   icon={getHideShowIcon(position, _isHidden)}
                   onClick={() => {
                     setIsHidden(!_isHidden);
-                    onHideToggle && onHideToggle(!_isHidden);
+                    onHideToggle?.(!_isHidden);
                   }}
                 />
               </StyledCloseWrapper>

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/Drawer/Drawer.stories.tsx

@@ -10,7 +10,7 @@ import {
   ReqoreTabsContent,
   useReqoreProperty,
 } from '../../index';
-import { argManager, FlatArg, IntentArg } from '../utils/args';
+import { FlatArg, IntentArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreDrawerProps>();
 
@@ -136,6 +136,7 @@ const Template: Story<IReqoreDrawerProps> = (args: IReqoreDrawerProps) => {
         label='This is a test'
         icon='EmphasisCn'
         onClose={noop}
+        onHideToggle={(isHidden) => console.log(isHidden)}
         actions={[
           {
             responsive: false,