@frontify/fondue-components 1.0.0 → 1.0.1

package/src/components/Button/Button.tsx

@@ -1,111 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { cloneElement, forwardRef, type ForwardedRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';
-
-import { buttonIconSizeMap, buttonStyles } from './styles/buttonStyles';
-import { iconStyles } from './styles/iconStyles';
-import { textStyles } from './styles/textStyles';
-
-type ButtonRounding = 'medium' | 'full';
-
-type ButtonStyle = 'default' | 'positive' | 'negative' | 'danger' | 'loud';
-
-type ButtonSize = 'small' | 'medium' | 'large';
-
-type ButtonType = 'button' | 'submit' | 'reset';
-
-type ButtonEmphasis = 'default' | 'weak' | 'strong';
-
-export type ButtonProps = {
-    /**
-     * @default null
-     */
-    type?: ButtonType;
-    /**
-     * @default null
-     */
-    title?: string;
-    /**
-     * @default 'default'
-     */
-    style?: ButtonStyle;
-    /**
-     * @default 'strong'
-     */
-    emphasis?: ButtonEmphasis;
-    /**
-     * @default false
-     */
-    hideLabel?: boolean;
-    /**
-     * @default 'medium'
-     */
-    size?: ButtonSize;
-    /**
-     * @default 'medium'
-     */
-    rounding?: ButtonRounding;
-    /**
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * @default true
-     */
-    hugWidth?: boolean;
-    icon?: ReactElement;
-    children?: ReactNode;
-    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;
-    'aria-label'?: string;
-    'aria-describedby'?: string;
-    'data-test-id'?: string;
-};
-
-export const Button = forwardRef<HTMLButtonElement | null, ButtonProps>(
-    (
-        {
-            icon,
-            children,
-            hideLabel,
-            style,
-            size = 'medium',
-            'data-test-id': dataTestId = 'fondue-button',
-            ...props
-        }: ButtonProps,
-        ref: ForwardedRef<HTMLButtonElement | null>,
-    ) => {
-        return (
-            <button
-                ref={ref}
-                data-test-id={dataTestId}
-                className={buttonStyles({
-                    iconOnly: (icon && !children) || hideLabel,
-                    size,
-                    style,
-                    ...props,
-                })}
-                {...props}
-            >
-                {icon && (
-                    <span
-                        data-test-id={`${dataTestId}-icon`}
-                        className={iconStyles({
-                            iconSpacing: children && !hideLabel ? size : 'none',
-                            style,
-                            ...props,
-                        })}
-                    >
-                        {cloneElement(icon, { size: buttonIconSizeMap[size] })}
-                    </span>
-                )}
-                {children && (
-                    <span className={textStyles({ hideLabel, style, ...props })} data-test-id={`${dataTestId}-text`}>
-                        {children}
-                    </span>
-                )}
-            </button>
-        );
-    },
-);
-
-Button.displayName = 'Button';

package/src/components/Button/styles/buttonStyles.ts

@@ -1,175 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { type FondueIconProps } from '@frontify/fondue-icons';
-
-import { sv } from '#/utilities/styleUtilities';
-
-import { type ButtonProps } from '../Button';
-
-export const buttonIconSizeMap: { [buttonSize in Exclude<ButtonProps['size'], undefined>]: FondueIconProps['size'] } = {
-    small: 16,
-    medium: 20,
-    large: 24,
-};
-
-export const buttonStyles = sv({
-    base: 'tw-group tw-border tw-box-box tw-relative tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-outline-none tw-font-body tw-font-medium',
-    variants: {
-        disabled: {
-            true: 'tw-not-allowed tw-pointer-events-none tw-border-transparent tw-text-box-disabled-inverse tw-bg-box-disabled',
-        },
-        rounding: {
-            medium: 'tw-rounded',
-            full: 'tw-rounded-full',
-        },
-        size: {
-            small: 'tw-px-2 tw-h-6 tw-text-body-small',
-            medium: 'tw-px-4 tw-h-9 tw-text-body-medium',
-            large: 'tw-px-6 tw-h-12 tw-text-body-large',
-        },
-        iconOnly: {
-            true: 'tw-aspect-square tw-px-0',
-        },
-        hugWidth: {
-            false: 'tw-w-full',
-        },
-        emphasis: {
-            default: '',
-            weak: '',
-            strong: '',
-        },
-        style: {
-            default: '',
-            positive: '',
-            negative: '',
-            danger: '',
-            loud: '',
-        },
-    },
-    compoundVariants: [
-        {
-            style: 'default',
-            emphasis: 'default',
-            class:
-                'tw-bg-button-background tw-border-button-border ' +
-                'hover:tw-bg-button-background-hover ' +
-                'active:tw-bg-button-background-pressed',
-        },
-        {
-            style: 'default',
-            emphasis: 'weak',
-            class:
-                'tw-border-transparent ' +
-                'hover:tw-bg-button-background-hover hover:tw-border-button-border ' +
-                'active:tw-bg-button-background-pressed',
-        },
-        {
-            style: 'default',
-            emphasis: 'strong',
-            class:
-                'tw-bg-button-strong-background tw-border-button-strong-border ' +
-                'hover:tw-bg-button-strong-background-hover ' +
-                'active:tw-bg-button-strong-background-pressed',
-        },
-        {
-            style: 'positive',
-            emphasis: 'default',
-            class:
-                'tw-bg-button-positive-background tw-border-button-positive-border ' +
-                'hover:tw-bg-button-positive-background-hover ' +
-                'active:tw-bg-button-positive-background-pressed',
-        },
-        {
-            style: 'positive',
-            emphasis: 'weak',
-            class:
-                'tw-border-transparent ' +
-                'hover:tw-bg-button-positive-background-hover hover:tw-border-button-positive-border ' +
-                'active:tw-bg-button-positive-background-pressed',
-        },
-        {
-            style: 'positive',
-            emphasis: 'strong',
-            class:
-                'tw-bg-button-strong-positive-background tw-border-button-strong-positive-border ' +
-                'hover:tw-bg-button-strong-positive-background-hover ' +
-                'active:tw-bg-button-strong-positive-background-pressed',
-        },
-        {
-            style: 'negative',
-            emphasis: 'default',
-            class:
-                'tw-bg-button-negative-background tw-border-button-negative-border ' +
-                'hover:tw-bg-button-negative-background-hover ' +
-                'active:tw-bg-button-negative-background-pressed',
-        },
-        {
-            style: 'negative',
-            emphasis: 'weak',
-            class:
-                'tw-border-transparent ' +
-                'hover:tw-bg-button-negative-background-hover hover:tw-border-button-negative-border ' +
-                'active:tw-bg-button-negative-background-pressed',
-        },
-        {
-            style: 'negative',
-            emphasis: 'strong',
-            class:
-                'tw-bg-button-strong-negative-background tw-border-button-strong-negative-border ' +
-                'hover:tw-bg-button-strong-negative-background-hover ' +
-                'active:tw-bg-button-strong-negative-background-pressed',
-        },
-        {
-            style: 'danger',
-            emphasis: 'default',
-            class:
-                'tw-bg-button-background tw-border-button-border ' +
-                'hover:tw-bg-button-background-hover ' +
-                'active:tw-bg-button-background-pressed',
-        },
-        {
-            style: 'danger',
-            emphasis: 'weak',
-            class:
-                'tw-border-transparent ' +
-                'hover:tw-bg-button-background-hover ' +
-                'active:tw-bg-button-background-pressed',
-        },
-        {
-            style: 'danger',
-            emphasis: 'strong',
-            class:
-                'tw-bg-button-danger-background tw-border-button-danger-border ' +
-                'hover:tw-bg-button-danger-background-hover ' +
-                'active:tw-bg-button-danger-background-pressed',
-        },
-        {
-            style: 'loud',
-            emphasis: 'default',
-            class:
-                'tw-bg-box-selected tw-border-button-border ' +
-                'hover:tw-bg-box-selected-hover ' +
-                'active:tw-bg-box-selected-pressed ',
-        },
-        {
-            style: 'loud',
-            emphasis: 'weak',
-            class: 'tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed',
-        },
-        {
-            style: 'loud',
-            emphasis: 'strong',
-            class:
-                'tw-bg-box-selected-strong tw-border-box-selected-strong ' +
-                'hover:tw-bg-box-selected-strong-hover ' +
-                'active:tw-bg-box-selected-strong-pressed ',
-        },
-    ],
-    defaultVariants: {
-        style: 'default',
-        emphasis: 'strong',
-        size: 'medium',
-        rounding: 'medium',
-        hugWidth: true,
-    },
-});

package/src/components/Button/styles/iconStyles.ts

@@ -1,152 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { sv } from '#/utilities/styleUtilities';
-
-export const iconStyles = sv({
-    variants: {
-        iconSpacing: {
-            none: '',
-            small: 'tw--ml-0.5 tw-mr-1',
-            medium: 'tw--ml-1 tw-mr-1.5',
-            large: 'tw--ml-1 tw-mr-2',
-        },
-        emphasis: {
-            default: '',
-            weak: '',
-            strong: '',
-        },
-        style: {
-            default: '',
-            positive: '',
-            negative: '',
-            danger: '',
-            loud: '',
-        },
-    },
-    compoundVariants: [
-        {
-            style: 'default',
-            emphasis: 'default',
-            class:
-                'tw-text-button-icon ' +
-                'group-hover:tw-text-button-icon-hover ' +
-                'group-active:tw-text-button-icon-pressed tw-leading-none',
-        },
-        {
-            style: 'default',
-            emphasis: 'weak',
-            class:
-                'tw-text-button-icon ' +
-                'group-hover:tw-text-button-icon-hover ' +
-                'group-active:tw-text-button-icon-pressed tw-leading-none',
-        },
-        {
-            style: 'default',
-            emphasis: 'strong',
-            class:
-                'tw-text-button-strong-icon ' +
-                'group-hover:tw-text-button-strong-icon-hover ' +
-                'group-active:tw-text-button-strong-icon-pressed tw-leading-none',
-        },
-        {
-            style: 'positive',
-            emphasis: 'default',
-            class:
-                'tw-text-button-positive-icon ' +
-                'group-hover:tw-text-button-positive-icon-hover ' +
-                'group-active:tw-text-button-positive-icon-pressed tw-leading-none',
-        },
-        {
-            style: 'positive',
-            emphasis: 'weak',
-            class:
-                'tw-text-button-strong-positive-icon ' +
-                'group-hover:tw-text-button-strong-positive-icon-hover' +
-                'group-active:tw-text-button-strong-positive-icon-pressed tw-leading-none',
-        },
-        {
-            style: 'positive',
-            emphasis: 'strong',
-            class:
-                'tw-text-button-strong-positive-icon ' +
-                'group-hover:tw-text-button-strong-positive-icon-hover ' +
-                'group-active:tw-text-button-strong-positive-icon-pressed tw-leading-none',
-        },
-        {
-            style: 'negative',
-            emphasis: 'default',
-            class:
-                'tw-text-button-negative-icon ' +
-                'group-hover:tw-text-button-negative-icon-hover' +
-                'group-active:tw-text-button-negative-icon-pressed tw-leading-none',
-        },
-        {
-            style: 'negative',
-            emphasis: 'weak',
-            class:
-                'tw-text-button-negative-icon ' +
-                'group-hover:tw-text-button-negative-icon-hover' +
-                'group-active:tw-text-button-negative-icon-pressed tw-leading-none',
-        },
-        {
-            style: 'negative',
-            emphasis: 'strong',
-            class:
-                'tw-text-button-strong-negative-icon ' +
-                'group-hover:tw-text-button-strong-negative-icon-hover' +
-                'group-active:tw-text-button-strong-negative-icon-pressed tw-leading-none',
-        },
-        {
-            style: 'danger',
-            emphasis: 'default',
-            class:
-                'tw-text-button-negative-icon ' +
-                'group-hover:tw-text-button-negative-icon-hover' +
-                'group-active:tw-text-button-negative-icon-pressed tw-leading-none',
-        },
-        {
-            style: 'danger',
-            emphasis: 'weak',
-            class:
-                'tw-text-button-negative-icon ' +
-                'group-hover:tw-text-button-negative-icon-hover' +
-                'group-active:tw-text-button-negative-icon-pressed tw-leading-none',
-        },
-        {
-            style: 'danger',
-            emphasis: 'strong',
-            class:
-                'tw-text-button-danger-icon ' +
-                'group-hover:tw-text-button-danger-icon-hover' +
-                'group-active:tw-text-button-danger-icon-pressed tw-leading-none',
-        },
-        {
-            style: 'loud',
-            emphasis: 'default',
-            class:
-                'tw-text-box-selected-inverse ' +
-                'group-hover:tw-text-box-selected-inverse-hover' +
-                'group-active:tw-text-box-selected-inverse-pressed tw-leading-none',
-        },
-        {
-            style: 'loud',
-            emphasis: 'weak',
-            class:
-                'tw-text-box-selected-inverse ' +
-                'group-hover:tw-text-box-selected-inverse-hover' +
-                'group-active:tw-text-box-selected-inverse-pressed tw-leading-none',
-        },
-        {
-            style: 'loud',
-            emphasis: 'strong',
-            class:
-                'tw-text-box-selected-strong-inverse ' +
-                'group-hover:tw-text-box-selected-strong-inverse' +
-                'group-active:tw-text-box-selected-strong-inverse tw-leading-none',
-        },
-    ],
-    defaultVariants: {
-        emphasis: 'strong',
-        style: 'default',
-    },
-});

package/src/components/Button/styles/textStyles.ts

@@ -1,149 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { sv } from '#/utilities/styleUtilities';
-
-export const textStyles = sv({
-    variants: {
-        hideLabel: {
-            true: 'tw-sr-only',
-        },
-        emphasis: {
-            default: '',
-            weak: '',
-            strong: '',
-        },
-        style: {
-            default: '',
-            positive: '',
-            negative: '',
-            danger: '',
-            loud: '',
-        },
-    },
-    compoundVariants: [
-        {
-            style: 'default',
-            emphasis: 'default',
-            class:
-                'tw-text-button-text ' +
-                'group-hover:tw-text-button-text-hover ' +
-                'group-active:tw-text-button-text-pressed',
-        },
-        {
-            style: 'default',
-            emphasis: 'weak',
-            class:
-                'tw-text-button-text ' +
-                'group-hover:tw-text-button-text-hover ' +
-                'group-active:tw-text-button-text-pressed',
-        },
-        {
-            style: 'default',
-            emphasis: 'strong',
-            class:
-                'tw-text-button-strong-icon ' +
-                'group-hover:tw-text-button-strong-icon-hover ' +
-                'group-active:tw-text-button-strong-text-pressed',
-        },
-        {
-            style: 'positive',
-            emphasis: 'default',
-            class:
-                'tw-text-button-positive-text ' +
-                'group-hover:tw-text-button-positive-text-hover ' +
-                'group-active:tw-text-button-positive-text-pressed',
-        },
-        {
-            style: 'positive',
-            emphasis: 'weak',
-            class:
-                'tw-text-button-positive-text ' +
-                'group-hover:tw-text-button-positive-text-hover ' +
-                'group-active:tw-text-button-positive-text-pressed',
-        },
-        {
-            style: 'positive',
-            emphasis: 'strong',
-            class:
-                'tw-text-button-strong-positive-text ' +
-                'group-hover:tw-text-button-strong-positive-text-hover ' +
-                'group-active:tw-text-button-strong-positive-text-pressed',
-        },
-        {
-            style: 'negative',
-            emphasis: 'default',
-            class:
-                'tw-text-button-negative-text ' +
-                'group-hover:tw-text-button-negative-text-hover' +
-                'group-active:tw-text-button-negative-text-pressed',
-        },
-        {
-            style: 'negative',
-            emphasis: 'weak',
-            class:
-                'tw-text-button-negative-text ' +
-                'group-hover:tw-text-button-negative-text-hover' +
-                'group-active:tw-text-button-negative-text-pressed',
-        },
-        {
-            style: 'negative',
-            emphasis: 'strong',
-            class:
-                'tw-text-button-strong-negative-text ' +
-                'group-hover:tw-text-button-strong-negative-text-hover' +
-                'group-active:tw-text-button-strong-negative-text-pressed',
-        },
-        {
-            style: 'danger',
-            emphasis: 'default',
-            class:
-                'tw-text-button-negative-icon ' +
-                'group-hover:tw-text-button-negative-icon-hover' +
-                'group-active:tw-text-button-negative-icon-pressed',
-        },
-        {
-            style: 'danger',
-            emphasis: 'weak',
-            class:
-                'tw-text-button-negative-icon ' +
-                'group-hover:tw-text-button-negative-icon-hover' +
-                'group-active:tw-text-button-negative-icon-pressed',
-        },
-        {
-            style: 'danger',
-            emphasis: 'strong',
-            class:
-                'tw-text-button-danger-text ' +
-                'group-hover:tw-text-button-danger-text-hover' +
-                'group-active:tw-text-button-danger-text-pressed',
-        },
-        {
-            style: 'loud',
-            emphasis: 'default',
-            class:
-                'tw-text-box-selected-inverse ' +
-                'group-hover:tw-text-box-selected-inverse-hover' +
-                'group-active:tw-text-box-selected-inverse-pressed',
-        },
-        {
-            style: 'loud',
-            emphasis: 'weak',
-            class:
-                'tw-text-box-selected-inverse ' +
-                'group-hover:tw-text-box-selected-inverse-hover' +
-                'group-active:tw-text-box-selected-inverse-pressed',
-        },
-        {
-            style: 'loud',
-            emphasis: 'strong',
-            class:
-                'tw-text-box-selected-strong-inverse ' +
-                'group-hover:tw-text-box-selected-strong-inverse' +
-                'group-active:tw-text-box-selected-strong-inverse',
-        },
-    ],
-    defaultVariants: {
-        emphasis: 'strong',
-        style: 'default',
-    },
-});

package/src/components/Button/tests/Button.ct.tsx

@@ -1,61 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { IconIcon } from '@frontify/fondue-icons';
-import { expect, test } from '@playwright/experimental-ct-react';
-
-import { Button } from '../Button';
-
-const BUTTON_TEXT = 'Frontify';
-
-test('should render without error', async ({ mount }) => {
-    const component = await mount(<Button>{BUTTON_TEXT}</Button>);
-    await expect(component).toContainText(BUTTON_TEXT);
-});
-
-test('should render in positive medium and with only text.', async ({ mount }) => {
-    const component = await mount(
-        <Button style="positive" size="medium">
-            {BUTTON_TEXT}
-        </Button>,
-    );
-    await expect(component).toBeVisible();
-    await expect(component).toContainText(BUTTON_TEXT);
-});
-
-test('should react on Click', async ({ mount }) => {
-    const component = await mount(
-        <Button style="positive" size="medium">
-            {BUTTON_TEXT}
-        </Button>,
-    );
-    await expect(component).toBeVisible();
-    await expect(component).toContainText(BUTTON_TEXT);
-});
-
-test('should render in positive medium and with only icon.', async ({ mount }) => {
-    const component = await mount(
-        <Button style="positive" size="medium" icon={<IconIcon data-test-id="fondue-icon-icon" />} />,
-    );
-    await expect(component).toBeVisible();
-    await expect(component.locator('data-test-id=fondue-icon-icon')).toBeVisible();
-});
-
-test('should render in positive medium and with only only an icon and fully rounded.', async ({ mount }) => {
-    const component = await mount(
-        <Button style="positive" size="medium" icon={<IconIcon data-test-id="fondue-icon-icon" />} rounding="full" />,
-    );
-    await expect(component).toBeVisible();
-    await expect(component).toHaveClass(/tw-rounded-full/);
-    await expect(component.locator('data-test-id=fondue-icon-icon')).toBeVisible();
-});
-
-test('should render in positive medium with an icon and text.', async ({ mount }) => {
-    const component = await mount(
-        <Button style="positive" size="medium" icon={<IconIcon data-test-id="fondue-icon-icon" />}>
-            {BUTTON_TEXT}
-        </Button>,
-    );
-    await expect(component).toBeVisible();
-    await expect(component).toHaveText(BUTTON_TEXT);
-    await expect(component.locator('data-test-id=fondue-icon-icon')).toBeVisible();
-});

package/src/components/Button/tests/Button.spec.tsx

@@ -1,34 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { render } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-
-import { Button } from '../Button';
-
-const BUTTON_TEXT = 'Frontify';
-const BUTTON_TEST_ID = 'fondue-button';
-
-describe('Button component', () => {
-    it('reacts on click', () => {
-        const clickListener = vi.fn();
-        const { getByTestId } = render(<Button onClick={clickListener}>{BUTTON_TEXT}</Button>);
-        const button = getByTestId(BUTTON_TEST_ID);
-        expect(clickListener).not.toHaveBeenCalled();
-        button.click();
-        expect(clickListener).toHaveBeenCalledOnce();
-    });
-
-    it('does not react on click when disabled', () => {
-        const clickListener = vi.fn();
-        const { getByTestId } = render(
-            <Button onClick={clickListener} disabled>
-                {BUTTON_TEXT}
-            </Button>,
-        );
-        const button = getByTestId(BUTTON_TEST_ID);
-        expect(clickListener).not.toHaveBeenCalled();
-        expect(button).toHaveAttribute('disabled');
-        button.click();
-        expect(clickListener).not.toHaveBeenCalled();
-    });
-});