@keboola/design 2.0.1 → 2.1.0

package/src/components/Button/ButtonInline.tsx

@@ -1,77 +0,0 @@
-import type { ComponentProps, ElementRef, Ref } from 'react';
-import { Root } from '@radix-ui/react-slot';
-import type { VariantProps } from 'class-variance-authority';
-import { cva } from 'class-variance-authority';
-
-const buttonInlineVariants = cva(
-  [
-    'tailwindcss-preflight',
-
-    'tw-inline-flex',
-    'tw-items-center',
-    'tw-gap-2',
-
-    'tw-underline-offset-2',
-
-    'disabled:tw-opacity-40',
-    'disabled:tw-cursor-not-allowed',
-    'disabled:tw-text-neutral-500',
-    'disabled:tw-no-underline',
-    '[&_svg]:disabled:tw-text-neutral-400',
-
-    // Default size for nested Lucide icons; callers can override on the icon.
-    "[&_svg:not([class*='tw-size-'])]:tw-size-4",
-    '[&_svg]:tw-shrink-0',
-  ],
-  {
-    defaultVariants: {
-      variant: 'link',
-      color: 'link',
-    },
-    variants: {
-      color: {
-        link: [
-          'tw-text-secondary-500',
-          'hover:tw-text-secondary-600',
-          '[&_svg]:tw-text-secondary-500',
-        ],
-        dark: ['tw-text-neutral-800 [&_svg]:tw-text-neutral-400'],
-        danger: ['tw-text-error-500 [&_svg]:tw-text-error-500'],
-        muted: ['tw-text-muted-foreground [&_svg]:tw-text-muted-foreground'],
-        custom: [],
-      },
-      variant: {
-        link: ['tw-underline', 'hover:tw-no-underline'],
-        'link-reverse': ['tw-no-underline', '', 'hover:tw-underline'],
-        custom: [],
-      },
-    },
-  },
-);
-
-type Props = ComponentProps<'button'> &
-  VariantProps<typeof buttonInlineVariants> & { asChild?: boolean };
-
-export const ButtonInline = ({
-  ref,
-  children,
-  className,
-  variant,
-  color,
-  type = 'button',
-  asChild = false,
-  ...buttonProps
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
-  const Comp = asChild ? Root : 'button';
-
-  return (
-    <Comp
-      {...buttonProps}
-      ref={ref}
-      type={asChild ? undefined : type}
-      className={buttonInlineVariants({ variant, color, className })}
-    >
-      {children}
-    </Comp>
-  );
-};

package/src/components/Button/index.ts

@@ -1,3 +0,0 @@
-export * from './Button';
-export * from './ButtonInline';
-export { argoVariants } from './styles';

package/src/components/Button/styles.ts

@@ -1,313 +0,0 @@
-import { cva } from 'class-variance-authority';
-
-export const variants = cva(
-  [
-    'tailwindcss-preflight',
-    'tw-group/button',
-    'tw-border-box',
-
-    // layout
-    'tw-relative',
-    'tw-flex',
-    'tw-items-center',
-    'tw-justify-center',
-    'tw-gap-2',
-
-    // text
-    'tw-text-xs',
-    'tw-leading-5',
-    'tw-font-medium',
-    'tw-tracking-[1px]',
-    'tw-uppercase',
-
-    // border
-    'tw-rounded',
-    'tw-border',
-    'tw-border-transparent',
-
-    // styling
-    'tw-shadow-none',
-    '[a]:tw-cursor-pointer', // explicitly set for anchor
-
-    'focus-visible:tw-outline',
-    'focus-visible:tw-outline-1',
-    'focus-visible:-tw-outline-offset-1',
-    'focus-visible:tw-outline-secondary-500',
-    'focus-visible:tw-ring-4',
-    'focus-visible:tw-ring-secondary-200',
-
-    // disabled
-    'disabled:tw-opacity-40',
-    'disabled:tw-cursor-not-allowed',
-
-    // anchor support
-    '!tw-no-underline',
-    'aria-disabled:tw-opacity-40',
-    'aria-disabled:tw-cursor-not-allowed',
-
-    '[&_svg]:tw-shrink-0',
-  ],
-  {
-    defaultVariants: {
-      size: 'medium',
-      variant: 'primary',
-      block: false,
-    },
-    variants: {
-      block: {
-        true: ['tw-w-full'],
-      },
-      variant: {
-        primary: [
-          'tw-text-white',
-          'tw-bg-primary-500',
-
-          'focus:tw-text-white',
-          'hover:tw-text-white',
-          'hover:not-disabled:tw-bg-primary-600',
-          'active:not-disabled:tw-bg-primary-800',
-
-          // anchor disabled override
-          'aria-disabled:!tw-bg-primary-500',
-        ],
-        secondary: [
-          'tw-text-white',
-          'tw-bg-secondary-500',
-
-          'focus:tw-text-white',
-          'hover:tw-text-white',
-          'hover:not-disabled:tw-bg-secondary-700',
-          'active:not-disabled:tw-bg-secondary-800',
-
-          // anchor disabled override
-          'aria-disabled:!tw-bg-secondary-500',
-        ],
-        danger: [
-          'tw-text-white',
-          'tw-bg-error-500',
-
-          'focus:tw-text-white',
-          'hover:tw-text-white',
-          'hover:not-disabled:tw-bg-error-600',
-          'active:not-disabled:tw-bg-error-700',
-
-          // anchor disabled override
-          'aria-disabled:!tw-bg-error-500',
-        ],
-        invisible: [
-          'tw-text-neutral-800',
-          'tw-bg-transparent',
-
-          'focus:tw-text-neutral-800',
-          'hover:not-disabled:tw-bg-neutral-100',
-          'hover:tw-text-neutral-800',
-          'active:not-disabled:tw-bg-neutral-150',
-
-          // contrasting icon on hover/active
-          '[&_svg]:tw-text-neutral-400',
-          '[&_svg]:hover:not-disabled:tw-text-secondary-600',
-          '[&_svg]:active:not-disabled:tw-text-secondary-600',
-
-          // anchor disabled override
-          'aria-disabled:!tw-bg-transparent',
-        ],
-        outline: [
-          'tw-text-neutral-800',
-          'tw-bg-white',
-          // border
-          '!tw-border-neutral-200',
-          'hover:tw-text-neutral-800',
-          'focus:tw-text-neutral-800',
-          'hover:not-disabled:!tw-border-neutral-300',
-          'hover:not-disabled:tw-bg-neutral-100',
-          'active:not-disabled:tw-bg-neutral-200',
-
-          // contrasting icon hover, same as invisible
-          '[&_svg]:tw-text-neutral-400',
-          '[&_svg]:not-disabled:hover:tw-text-secondary-600',
-          '[&_svg]:active:not-disabled:tw-text-secondary-600',
-
-          // anchor disabled override
-          'aria-disabled:!tw-bg-white',
-          'aria-disabled:!tw-border-neutral-200',
-        ],
-
-        inline: [
-          'tw-text-neutral-800',
-          'tw-bg-transparent',
-          'tw-rounded-full',
-
-          '[&_svg]:tw-text-neutral-400',
-          '[&_svg]:not-disabled:hover:tw-text-secondary-600',
-          '[&_svg]:not-disabled:focus:tw-text-secondary-600',
-        ],
-      },
-      size: {
-        medium: [
-          'tw-max-h-10',
-          'tw-min-h-10',
-          'tw-px-4',
-          'tw-py-2.5',
-          '[&_svg:not([class*="tw-size-"])]:tw-size-4',
-        ],
-        small: [
-          'tw-max-h-8',
-          'tw-min-h-8',
-          'tw-px-4',
-          'tw-py-1.5',
-          '[&_svg:not([class*="tw-size-"])]:tw-size-4',
-        ],
-        large: [
-          'tw-max-h-12',
-          'tw-min-h-12',
-          'tw-px-4',
-          'tw-py-3.5',
-          '[&_svg:not([class*="tw-size-"])]:tw-size-4',
-        ],
-
-        'icon-lg': ['tw-size-12', 'tw-p-0', '[&_svg:not([class*="tw-size-"])]:tw-size-6'],
-        icon: ['tw-size-10', 'tw-p-0', '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
-        'icon-sm': ['tw-size-8', 'tw-p-0', '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
-        'icon-xs': ['tw-size-6', 'tw-p-0', '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
-        'icon-2xs': [
-          '!tw-inline-flex',
-          'tw-size-5',
-          'tw-max-h-5',
-          '[&_svg:not([class*="tw-size-"])]:tw-size-3',
-        ],
-        'icon-3xs': ['tw-h-fit', 'tw-w-fit', '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
-      },
-    },
-  },
-);
-
-export const argoVariants = cva(
-  [
-    'tailwindcss-preflight',
-
-    // layout
-    'tw-relative',
-    'tw-inline-flex',
-    'tw-items-center',
-    'tw-justify-center',
-    'tw-whitespace-nowrap',
-    'tw-gap-2',
-
-    // border
-    'tw-border',
-    'tw-border-transparent',
-    'tw-rounded-lg',
-
-    // text
-    'tw-font-medium',
-    'tw-select-none',
-
-    // focus visible
-    '!tw-outline-none',
-    'focus-visible:tw-ring-2',
-
-    // disabled
-    'disabled:tw-cursor-not-allowed',
-    'disabled:tw-opacity-50',
-    'active:tw-opacity-60',
-
-    'tw-transition-all',
-    'tw-bg-clip-padding',
-
-    // anchor support
-    '!tw-no-underline',
-
-    // icon
-    'tw-shrink-0',
-    '[&_svg]:tw-pointer-events-none',
-    '[&_svg]:tw-shrink-0',
-    "[&_svg:not([class*='tw-size-'])]:tw-size-4",
-  ],
-  {
-    defaultVariants: {
-      variant: 'primary',
-      size: 'medium',
-    },
-    variants: {
-      block: {
-        true: ['tw-w-full'],
-      },
-      variant: {
-        primary: [
-          'tw-bg-primary',
-          'tw-text-primary-foreground',
-          '[a]:hover:tw-bg-primary/80',
-          'hover:not-disabled:tw-bg-primary/90',
-          'hover:tw-text-primary-foreground',
-          'focus:tw-text-primary-foreground',
-
-          'focus-visible:tw-border-primary',
-          'focus-visible:tw-ring-primary/50',
-        ],
-        secondary: [
-          'tw-bg-primary/10',
-          'tw-text-primary',
-          'hover:not-disabled:tw-bg-primary/20',
-
-          'focus-visible:tw-border-primary',
-          'focus-visible:tw-ring-primary/50',
-        ],
-
-        // should be called "destructive" by Figma
-        danger: [
-          'tw-bg-destructive',
-          'tw-text-destructive-foreground',
-          'hover:tw-text-destructive-foreground',
-          'focus:tw-text-destructive-foreground',
-
-          'focus-visible:tw-border-destructive',
-          'focus-visible:tw-ring-destructive/20',
-        ],
-        outline: [
-          '!tw-border-input',
-          'tw-bg-background',
-          'hover:not-disabled:tw-bg-accent',
-          'hover:not-disabled:tw-text-accent-foreground',
-          'hover:active:tw-bg-background',
-          'focus-visible:!tw-border-primary',
-          'focus-visible:tw-ring-primary/50',
-        ],
-
-        // should be called "ghost" by Figma
-        invisible: [
-          'tw-bg-transparent',
-          'tw-text-foreground',
-          'hover:not-disabled:tw-bg-accent',
-          'hover:not-disabled:tw-text-accent-foreground',
-          'hover:not-disabled:tw-border-accent',
-
-          'focus-visible:tw-ring-primary/50',
-        ],
-        // should be called "link" by Figma
-        inline: [
-          'tw-bg-transparent',
-          'tw-text-primary',
-          'hover:tw-underline',
-          'hover:active:tw-bg-transparent',
-          'focus-visible:tw-ring-primary/50',
-        ],
-      },
-      size: {
-        // should be called "default" by Figma
-        medium: ['tw-max-h-9', 'tw-py-2', 'tw-px-4', 'tw-text-sm'],
-        // should be called "small" by Figma
-        small: ['tw-max-h-8', 'tw-py-2', 'tw-px-3', 'tw-text-xs'],
-        // should be called "large" by Figma
-        large: ['tw-max-h-10', 'tw-py-2.5', 'tw-px-6', 'tw-text-sm'],
-
-        'icon-lg': ['tw-size-10'],
-        icon: ['tw-size-9'],
-        'icon-sm': ['tw-size-8'],
-        // unsupported in ARGO, remove when old design is gone
-        'icon-xs': [],
-        'icon-2xs': [],
-        'icon-3xs': [],
-      },
-    },
-  },
-);

package/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,140 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { ArrowLeft, ArrowRight, ChevronLeft, ChevronRight, Plus } from '@keboola/design/icons';
-
-import { Button } from '../Button';
-
-import { ButtonGroup } from './ButtonGroup';
-
-type Props = ComponentProps<typeof ButtonGroup>;
-type Space = NonNullable<Props['space']>;
-type Variant = NonNullable<Props['variant']>;
-
-const spaces: Space[] = ['large', 'medium', 'small', 'extra-small', 'compact'];
-const variants: Variant[] = ['inline', 'block'];
-
-export default {
-  component: ButtonGroup,
-  args: {
-    space: 'medium',
-    variant: 'inline',
-  },
-  argTypes: {
-    space: {
-      options: spaces,
-      control: { type: 'radio' },
-    },
-    variant: {
-      options: variants,
-      control: { type: 'radio' },
-    },
-  },
-} satisfies Meta<typeof ButtonGroup>;
-
-type Story = StoryObj<typeof ButtonGroup>;
-
-export const Default: Story = {
-  args: {
-    children: (
-      <>
-        <Button variant="outline">Left button</Button>
-        <Button>Right Button</Button>
-      </>
-    ),
-  },
-};
-
-export const Argo: Story = {
-  args: {
-    children: (
-      <>
-        <Button argo variant="outline">
-          Left button
-        </Button>
-        <Button argo>Right Button</Button>
-      </>
-    ),
-  },
-};
-
-export const BlockWithIcons: Story = {
-  args: {
-    variant: 'block',
-    children: (
-      <>
-        <Button variant="outline" size="icon" aria-label="Left">
-          <ChevronLeft className="tw-size-5" />
-        </Button>
-        <Button variant="outline">Left button</Button>
-        <Button variant="outline" size="icon" aria-label="Plus">
-          <Plus className="tw-size-4" />
-        </Button>
-        <Button>Right Button</Button>
-        <Button variant="outline" size="icon" aria-label="Right">
-          <ChevronRight className="tw-size-5" />
-        </Button>
-      </>
-    ),
-  },
-};
-
-export const ArgoBlock: Story = {
-  args: {
-    space: 'small',
-    variant: 'block',
-    children: (
-      <>
-        <Button argo size="icon" variant="outline" aria-label="move-left">
-          <ChevronLeft className="tw-size-5" />
-        </Button>
-        <Button argo variant="primary">
-          Left button
-        </Button>
-        <Button argo size="icon" variant="outline" aria-label="add">
-          <Plus className="tw-size-4" />
-        </Button>
-        <Button argo variant="danger">
-          Right Button
-        </Button>
-        <Button argo size="icon" variant="outline" aria-label="move-right">
-          <ChevronRight className="tw-size-5" />
-        </Button>
-      </>
-    ),
-  },
-};
-
-export const Compact: Story = {
-  args: {
-    space: 'compact',
-    children: (
-      <>
-        <Button variant="outline" size="icon" aria-label="Left">
-          <ArrowLeft className="tw-size-4" />
-        </Button>
-        <Button variant="outline">Submit</Button>
-        <Button variant="outline" size="icon" aria-label="Right">
-          <ArrowRight className="tw-size-4" />
-        </Button>
-      </>
-    ),
-  },
-};
-
-export const ArgoCompact: Story = {
-  args: {
-    space: 'compact',
-    children: (
-      <>
-        <Button argo size="icon" aria-label="move-right">
-          <ArrowLeft className="tw-size-4" />
-        </Button>
-        <Button argo>Submit</Button>
-        <Button argo size="icon" aria-label="move-right">
-          <ArrowRight className="tw-size-4" />
-        </Button>
-      </>
-    ),
-  },
-};

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,79 +0,0 @@
-import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
-import type { VariantProps } from 'class-variance-authority';
-import { cva } from 'class-variance-authority';
-
-const buttonGroupVariant = cva(
-  ['tailwindcss-preflight', 'tw-inline-flex', 'tw-items-center', 'tw-group/button-group'],
-  {
-    defaultVariants: {
-      variant: 'inline',
-      space: 'small',
-    },
-    variants: {
-      variant: {
-        inline: [],
-        block: [
-          'tw-w-full',
-          'tw-flex-col',
-          'sm:tw-flex-row',
-          '[&_a]:tw-flex-1',
-          '[&>button:not([data-icon-only=true])]:tw-flex-1',
-        ],
-      },
-      space: {
-        'extra-small': 'tw-gap-1',
-        'little-small': 'tw-gap-2',
-        small: 'tw-gap-3',
-        medium: 'tw-gap-4',
-        large: 'tw-gap-6',
-        compact: [
-          'tw-border-collapse',
-          '!tw-gap-0',
-
-          // ensure that focus visible outline is at the top
-          '[&>*:focus-visible]:!tw-z-10',
-
-          '[&>*:not(:first-child)]:tw-rounded-l-none',
-          '[&>*:not(:last-child)]:tw-rounded-r-none',
-          '[&>*:not(:last-child)]:tw-border-r-0',
-          '[&>*:not(:first-child)]:tw-border-l-0',
-
-          // separator
-          '[&>*:not(:first-child)]:before:tw-content',
-          '[&>*:not(:first-child)]:before:tw-absolute',
-          '[&>*:not(:first-child)]:before:tw-left-0',
-          '[&>*:not(:first-child)]:before:tw-h-full',
-          '[&>*:not(:first-child)]:before:tw-w-px',
-          '[&>*:not(:first-child)]:before:tw-bg-black/10',
-        ],
-      },
-    },
-  },
-);
-
-type Props = {
-  children: ReactNode;
-  className?: string;
-} & VariantProps<typeof buttonGroupVariant> &
-  ComponentProps<'div'>;
-
-export const ButtonGroup = ({
-  ref,
-  children,
-  space = 'small',
-  className,
-  variant,
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'div'>> }) => {
-  return (
-    <div
-      ref={ref}
-      {...rest}
-      role="group"
-      data-variant={variant}
-      className={buttonGroupVariant({ variant, className, space })}
-    >
-      {children}
-    </div>
-  );
-};

package/src/components/ButtonGroup/index.ts

@@ -1 +0,0 @@
-export * from './ButtonGroup';