@takaro/lib-components 0.0.14 → 0.0.18

package/src/components/feedback/Alert/Alert.test.tsx

@@ -1,5 +1,6 @@
 import { Alert } from '.';
-import { render } from 'test-utils';
+import { render } from '../../../test/testUtils';
+import { expect, it } from 'vitest';
 
 it('Should render <Alert/>', () => {
   const { container } = render(<Alert text="Alert text" title="Alert title" variant="info" />);

package/src/components/feedback/Alert/__snapshots__/Alert.test.tsx.snap

@@ -0,0 +1,44 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <Alert/> 1`] = `
+<div>
+  <div
+    class="sc-aXZVg eHujeX"
+    role="status"
+    style="opacity: 0; will-change: opacity;"
+  >
+    <div
+      class="sc-gEvEer xJHes"
+    >
+      <div
+        class="sc-eqUAAy cuxXJQ"
+      >
+        <svg
+          fill="currentColor"
+          height="24"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 1024 1024"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
+          />
+        </svg>
+      </div>
+      <h2>
+        Alert title
+      </h2>
+      <p>
+        <p>
+          Alert text
+        </p>
+      </p>
+      <div
+        class="sc-fqkvVR JhYnd action"
+      />
+    </div>
+  </div>
+</div>
+`;

package/src/components/feedback/Alert/index.tsx

@@ -24,11 +24,10 @@ export interface AlertProps {
   elevation?: Elevation;
   dismiss?: boolean;
   action?: Action;
-  showIcon?: boolean;
 }
 
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
-  { variant, title, text, dismiss = false, elevation = 4, action, showIcon = true },
+  { variant, title, text, dismiss = false, elevation = 4, action },
   ref,
 ) {
   const [visible, setVisible] = useState(true);
@@ -85,19 +84,16 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
           ref={ref}
           role="status"
         >
-          <Grid hasTitle={hasTitle} showIcon={showIcon}>
-            {showIcon && <IconContainer variant={variant}>{getIcon()}</IconContainer>}
-
-            {/* If title is declared set title, otherwise put everything on single line */}
-            {title && (
-              <>
-                <h2>{title}</h2>
-                <div />
-              </>
-            )}
-            {renderText()}
-            {hasTitle ? <div /> : null}
-            <ButtonContainer hasTitle={hasTitle} show={dismiss || action ? true : false} variant={variant}>
+          <Grid>
+            <IconContainer variant={variant}>{getIcon()}</IconContainer>
+            {title && <h2>{title}</h2>}
+            <p>{renderText()}</p>
+            <ButtonContainer
+              hasTitle={hasTitle}
+              show={dismiss || action ? true : false}
+              variant={variant}
+              className="action"
+            >
               {action && (
                 <Button size="tiny" variant="outline" onClick={handleExecute} text={action.text} color={variant} />
               )}

package/src/components/feedback/Alert/style.ts

@@ -12,7 +12,8 @@ export const Container = styled(motion.div)<{
   $elevation: Elevation;
 }>`
   width: 100%;
-  padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing[1]}`};
+  padding: ${({ theme }) =>
+    `${theme.spacing['0_75']} ${theme.spacing['0_75']} ${theme.spacing['0_75']} ${theme.spacing['0']}`};
   border-radius: ${({ theme }) => theme.borderRadius.large};
   box-shadow: ${({ theme, $elevation }) => theme.elevation[$elevation]};
   margin: ${({ theme }) => `${theme.spacing['1_5']} auto`};
@@ -58,24 +59,21 @@ export const Container = styled(motion.div)<{
   }}
 `;
 
-export const Grid = styled.div<{ hasTitle: boolean; showIcon: boolean }>`
+export const Grid = styled.div`
   display: grid;
-  grid-template-columns: ${({ theme, hasTitle, showIcon }) => {
-    const result = '';
-    if (showIcon) result.concat(`${theme.spacing[5]}`);
-    result.concat(' 1fr');
-    if (hasTitle) result.concat(' fit-content(100px)');
-    return result;
-  }}
+  grid-template-columns: 40px 1fr;
   align-items: center;
-  gap: ${({ theme, hasTitle }) => (hasTitle ? 0 : theme.spacing['0_5'])};
+
+  p,
+  .action {
+    grid-column: 2;
+  }
 `;
 
 export const IconContainer = styled.div<{ variant: AlertVariants }>`
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: ${({ theme }) => theme.spacing['1']};
   svg {
     fill: ${({ variant, theme }): string => theme.colors[variant]};
   }

package/src/components/feedback/ErrorPage/index.tsx

@@ -122,7 +122,7 @@ const defaultListItems = [
     icon: <AiOutlineBook />,
     title: 'Documentation',
     description: 'Learn how to integrate our tools with your app',
-    to: 'docs.takaro.io',
+    to: 'https://docs.takaro.io',
   },
   {
     icon: <AiOutlineMenu />,

package/src/components/feedback/IconTooltip/IconTooltip.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { IconTooltip, IconTooltipProps } from '.';
+import { AiOutlineQuestion as QuestionIcon } from 'react-icons/ai';
+
+export default {
+  title: 'Feedback/IconTooltip',
+  component: IconTooltip,
+  args: {
+    placement: 'bottom',
+  },
+} as Meta<IconTooltipProps>;
+
+export const Default: StoryFn<IconTooltipProps> = (args) => {
+  return (
+    <div style={{ width: '200px' }}>
+      <IconTooltip placement={args.placement} initialOpen={args.initialOpen} icon={<QuestionIcon />}>
+        this is the tooltip content
+      </IconTooltip>
+    </div>
+  );
+};

package/src/components/feedback/IconTooltip/index.tsx

@@ -0,0 +1,50 @@
+import { cloneElement, FC, ReactElement } from 'react';
+import { Tooltip, TooltipProps } from '../Tooltip';
+import { Size, styled } from '../../../styled';
+import { getIconSize } from '../../actions/IconButton/getIconSize';
+import { ButtonColor } from '../../actions/Button/style';
+import { shade } from 'polished';
+
+type TooltipIconColor = Exclude<ButtonColor, 'white'>;
+
+const TriggerContainer = styled.div<{ color: TooltipIconColor }>`
+  background: ${({ theme, color }) => shade(0.5, theme.colors[color])};
+  border: 1px solid ${({ theme, color }) => theme.colors[color]};
+  border-radius: ${({ theme }) => theme.borderRadius.small};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: ${({ theme }) => theme.spacing['0_5']};
+  margin-right: ${({ theme }) => theme.spacing['0_5']};
+`;
+
+const ContentContainer = styled.div`
+  max-width: 450px;
+  hyphens: auto;
+`;
+
+export interface IconTooltipProps extends TooltipProps {
+  icon: ReactElement;
+  size?: Size;
+  color?: TooltipIconColor;
+}
+
+export const IconTooltip: FC<IconTooltipProps> = ({
+  children,
+  initialOpen,
+  open,
+  icon,
+  size = 'medium',
+  color = 'primary',
+}) => {
+  return (
+    <Tooltip initialOpen={initialOpen} open={open}>
+      <Tooltip.Trigger asChild>
+        <TriggerContainer color={color}>{cloneElement(icon, { size: getIconSize(size) })}</TriggerContainer>
+      </Tooltip.Trigger>
+      <Tooltip.Content>
+        <ContentContainer>{children}</ContentContainer>
+      </Tooltip.Content>
+    </Tooltip>
+  );
+};

package/src/components/feedback/Loaders/Loading.test.tsx

@@ -1,5 +1,6 @@
 import { Loading } from '.';
-import { render } from 'test-utils';
+import { render } from '../../../test/testUtils';
+import { it, expect } from 'vitest';
 
 it('Should render <Loading/>', () => {
   const { container } = render(<Loading />);

package/src/components/feedback/Loaders/Spinner.test.tsx

@@ -1,5 +1,6 @@
 import { Spinner } from '.';
-import { render } from 'test-utils';
+import { render } from '../../../test/testUtils';
+import { it, expect } from 'vitest';
 
 it('Should render <Spinner/>', () => {
   const { container } = render(<Spinner size="small" />);

package/src/components/feedback/Loaders/__snapshots__/Loading.test.tsx.snap

@@ -0,0 +1,141 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <Loading/> 1`] = `
+<div>
+  <svg
+    fill="#664de5"
+    height="105"
+    viewBox="0 0 105 105"
+    width="105"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="12.5"
+      cy="12.5"
+      r="12.5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="0s"
+        calcMode="linear"
+        dur="1s"
+        repeatCount="indefinite"
+        values="1;.2;1"
+      />
+    </circle>
+    <circle
+      cx="12.5"
+      cy="52.5"
+      fill-opacity=".5"
+      r="12.5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="100ms"
+        calcMode="linear"
+        dur="1s"
+        repeatCount="indefinite"
+        values="1;.2;1"
+      />
+    </circle>
+    <circle
+      cx="52.5"
+      cy="12.5"
+      r="12.5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="300ms"
+        calcMode="linear"
+        dur="1s"
+        repeatCount="indefinite"
+        values="1;.2;1"
+      />
+    </circle>
+    <circle
+      cx="52.5"
+      cy="52.5"
+      r="12.5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="600ms"
+        calcMode="linear"
+        dur="1s"
+        repeatCount="indefinite"
+        values="1;.2;1"
+      />
+    </circle>
+    <circle
+      cx="92.5"
+      cy="12.5"
+      r="12.5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="800ms"
+        calcMode="linear"
+        dur="1s"
+        repeatCount="indefinite"
+        values="1;.2;1"
+      />
+    </circle>
+    <circle
+      cx="92.5"
+      cy="52.5"
+      r="12.5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="400ms"
+        calcMode="linear"
+        dur="1s"
+        repeatCount="indefinite"
+        values="1;.2;1"
+      />
+    </circle>
+    <circle
+      cx="12.5"
+      cy="92.5"
+      r="12.5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="700ms"
+        calcMode="linear"
+        dur="1s"
+        repeatCount="indefinite"
+        values="1;.2;1"
+      />
+    </circle>
+    <circle
+      cx="52.5"
+      cy="92.5"
+      r="12.5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="500ms"
+        calcMode="linear"
+        dur="1s"
+        repeatCount="indefinite"
+        values="1;.2;1"
+      />
+    </circle>
+    <circle
+      cx="92.5"
+      cy="92.5"
+      r="12.5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="200ms"
+        calcMode="linear"
+        dur="1s"
+        repeatCount="indefinite"
+        values="1;.2;1"
+      />
+    </circle>
+  </svg>
+</div>
+`;

package/src/components/feedback/Loaders/__snapshots__/Spinner.test.tsx.snap

@@ -0,0 +1,10 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <Spinner/> 1`] = `
+<div>
+  <div
+    class="sc-aXZVg gDGTCm"
+    style="will-change: transform;"
+  />
+</div>
+`;

package/src/components/feedback/NetworkDetector/NetworkDetector.test.tsx

@@ -1,5 +1,6 @@
 import { NetworkDetector } from '.';
-import { render } from 'test-utils';
+import { render } from '../../../test/testUtils';
+import { it, expect } from 'vitest';
 
 it('Should render <NetworkDetector/>', () => {
   const { container } = render(<NetworkDetector />);

package/src/components/feedback/NetworkDetector/__snapshots__/NetworkDetector.test.tsx.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <NetworkDetector/> 1`] = `<div />`;

package/src/components/feedback/NotificationBanner/NotificationBanner.test.tsx

@@ -1,5 +1,6 @@
 import { NotificationBanner } from '.';
-import { render } from 'test-utils';
+import { it, expect } from 'vitest';
+import { render } from '../../../test/testUtils';
 
 it('Should render <NotificationBanner/>', () => {
   // we need to create the portal

package/src/components/feedback/NotificationBanner/__snapshots__/NotificationBanner.test.tsx.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <NotificationBanner/> 1`] = `<div />`;

package/src/components/feedback/ProgressBar/ProgressBar.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 import { ProgressBar, ProgressBarProps } from '.';
@@ -28,7 +29,7 @@ export const Determinate: StoryFn<ProgressBarProps> = () => {
 
   return (
     <>
-      <ProgressBar mode="determinate" showValue value={value} />
+      <ProgressBar mode="determinate" showPercentage value={value} />
       <ButtonContainer>
         <button onClick={() => setValue(value + 5)}>+5</button>
         <button onClick={() => setValue(value + 10)}>+10</button>

package/src/components/feedback/ProgressBar/index.tsx

@@ -1,7 +1,10 @@
 import { FC } from 'react';
-import { styled, Color } from '../../../styled';
-import { darken } from 'polished';
+import { shade } from 'polished';
+import { styled, Color as C, Size } from '../../../styled';
 import { keyframes } from 'styled-components';
+import { AlertVariants } from '../Alert';
+
+type Color = C | AlertVariants;
 
 const indeterminateAnimation = keyframes`
   0% {
@@ -28,12 +31,13 @@ const IndeterminateProgress = styled.div<{ color: Color }>`
     position: absolute;
     content: '';
     width: 100%;
-    height: 100%;
-    background-color: ${({ theme, color }) => theme.colors[color]};
+    top: 1px;
+    height: calc(100% - 4px);
+    background-color: ${({ theme, color }) => shade(0.5, theme.colors[color])};
+    border: 1px solid ${({ theme, color }) => theme.colors[color]};
     animation: ${indeterminateAnimation} 5s infinite linear;
     transform-origin: 0% 50%;
-    border-radius: ${({ theme }) => theme.borderRadius.large};
-    background-color: ${({ theme, color }) => theme.colors[color]};
+    border-radius: ${({ theme }) => theme.borderRadius.small};
   }
 `;
 
@@ -43,15 +47,28 @@ const Container = styled.div`
   align-items: center;
   justify-content: flex-start;
   width: 100%;
-  padding: ${({ theme }) => theme.spacing[1]};
 `;
-const Progress = styled.div<{ color: Color; progress: number }>`
-  width: calc(100% - 50px);
+const Progress = styled.div<{ color: Color; progress: number; size: Size }>`
+  width: 100%;
   position: relative;
   background-color: ${({ theme }) => theme.colors.background};
-  height: ${({ theme }) => theme.spacing[1]};
-  border-radius: ${({ theme }) => theme.borderRadius.large};
+  height: ${({ theme, size }) => {
+    switch (size) {
+      case 'tiny':
+        return theme.spacing['0_5'];
+      case 'small':
+        return theme.spacing['0_75'];
+      case 'medium':
+        return theme.spacing['1_5'];
+      case 'large':
+        return theme.spacing['2_5'];
+      case 'huge':
+        return theme.spacing['4'];
+    }
+  }};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
   overflow: hidden;
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
 
   &::after {
     position: absolute;
@@ -60,17 +77,23 @@ const Progress = styled.div<{ color: Color; progress: number }>`
     top: 50%;
     transform: translateY(-50%);
     left: 0;
-    height: ${({ theme }) => theme.spacing[1]};
+    height: ${({ theme, size }) => {
+      switch (size) {
+        case 'tiny':
+          return theme.spacing['0_5'];
+        case 'small':
+          return theme.spacing['0_75'];
+        case 'medium':
+          return theme.spacing['1_5'];
+        case 'large':
+          return theme.spacing['2_5'];
+        case 'huge':
+          return theme.spacing['4'];
+      }
+    }};
     max-width: 100%;
     transition: 0.2s width ease-out;
-    background-color: ${({ theme, color }) => darken(0.2, theme.colors[color])};
-    background-image: ${({ theme, color }): string =>
-      `url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23${theme.colors[
-        color
-      ].slice(
-        1,
-        theme.colors[color].length,
-      )}' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E")`};
+    background-color: ${({ theme, color }) => theme.colors[color]};
   }
 `;
 
@@ -82,15 +105,26 @@ export interface ProgressBarProps {
   mode: 'determinate' | 'indeterminate';
   value?: number;
   color?: Color;
-  showValue?: boolean;
+  showPercentage?: boolean;
+  size?: Size;
+  /// To make the progressbar a bit more visually pleasing, you can set a minimum fill value.
+  /// If the actual value is below this value, the progressbar will still show the minimum fill value.
+  minFill?: number;
 }
 
-export const ProgressBar: FC<ProgressBarProps> = ({ mode, value = 0, color = 'primary', showValue = false }) => {
+export const ProgressBar: FC<ProgressBarProps> = ({
+  mode,
+  value = 0,
+  color = 'primary',
+  showPercentage = false,
+  size = 'medium',
+  minFill = 0,
+}) => {
   if (mode === 'determinate') {
     return (
       <Container>
-        <Progress color={color} progress={value} />
-        {showValue && <Label>{Math.min(value, 100)}%</Label>}
+        <Progress color={color} progress={value > minFill ? value : value == 0 ? 0 : minFill} size={size} />
+        {showPercentage && <Label>{Math.min(value, 100)}%</Label>}
       </Container>
     );
   }

package/src/components/feedback/Skeleton/Skeleton.test.tsx

@@ -1,5 +1,6 @@
 import { Skeleton } from '.';
-import { render } from 'test-utils';
+import { it, expect } from 'vitest';
+import { render } from '../../../test/testUtils';
 
 it('Should render <Skeleton/>', () => {
   const { container } = render(<Skeleton variant="rectangular" />);

package/src/components/feedback/Skeleton/__snapshots__/Skeleton.test.tsx.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <Skeleton/> 1`] = `
+<div>
+  <div
+    class="sc-aXZVg dMeLsA"
+  />
+</div>
+`;

package/src/components/feedback/Tooltip/TooltipContent.tsx

@@ -22,10 +22,10 @@ export const TooltipContent = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElemen
   propRef,
 ) {
   const theme = useTheme();
-  const { floatingStyles, open, arrowRef, context, getFloatingProps } = useTooltipContext();
+  const { floatingStyles, open, arrowRef, context, getFloatingProps, disabled } = useTooltipContext();
   const ref = useMergeRefs([context.refs.setFloating, propRef]);
 
-  if (!open) return null;
+  if (!open || disabled) return null;
 
   return (
     <FloatingPortal>

package/src/components/feedback/Tooltip/useTooltip.tsx

@@ -20,12 +20,14 @@ export interface TooltipOptions {
   placement?: Placement;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
 }
 
 export function useTooltip({
   initialOpen = false,
   placement = 'top',
   open: controlledOpen,
+  disabled = false,
   onOpenChange: setControlledOpen,
 }: TooltipOptions = {}) {
   const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
@@ -73,6 +75,7 @@ export function useTooltip({
       arrowRef,
       ...interactions,
       ...data,
+      disabled,
     }),
     [open, setOpen, interactions, data],
   );

package/src/components/feedback/index.ts

@@ -21,7 +21,8 @@ export type { ProgressBarProps } from './ProgressBar';
 export { Tooltip } from './Tooltip';
 export type { TooltipProps } from './Tooltip';
 
-export { QuestionTooltip } from './QuestionTooltip';
+export { IconTooltip } from './IconTooltip';
+export type { IconTooltipProps } from './IconTooltip';
 
 export { Popover } from './Popover';
 export type { PopoverProps } from './Popover';

package/src/components/feedback/snacks/Drawer/Drawer.stories.tsx

@@ -34,7 +34,7 @@ export const Downloads: StoryFn = () => {
       children: (
         <CustomContent>
           <h4>Pdf Ready</h4>
-          <p>
+          <p style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
             <CheckMarkIcon /> Download now
           </p>
         </CustomContent>