@frontify/fondue-components 1.0.0 → 1.1.0

package/scripts/transforms.ts

@@ -1,13 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-/**
- * Converts any give input to kebab-case
- *
- * @param name String in any case (PascalCase, camelCase, ...)
- * @returns String in kebab-case
- */
-export const toKebabCase = (name: string): string =>
-    name
-        .replaceAll(/([a-z])([A-Z])/g, '$1-$2')
-        .replaceAll(/[\s_]+/g, '-')
-        .toLowerCase();

package/scripts/types.ts

@@ -1,7 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-export type ComponentFileBuilderResponse = {
-    content: string;
-    extension: string;
-    subdirectory?: string;
-};

package/src/components/Button/Button.stories.tsx

@@ -1,57 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { IconColorFan, IconIcon } from '@frontify/fondue-icons';
-import { type Meta, type StoryObj } from '@storybook/react';
-
-import { Button } from './Button';
-
-type Story = StoryObj<typeof Button>;
-const meta: Meta<typeof Button> = {
-    component: Button,
-    tags: ['autodocs'],
-    parameters: {
-        status: {
-            type: 'released',
-        },
-    },
-    args: {
-        type: 'button',
-        style: 'default',
-        emphasis: 'default',
-        size: 'medium',
-        rounding: 'medium',
-        hideLabel: false,
-        disabled: false,
-        hugWidth: true,
-        children: 'Button Text',
-    },
-};
-export default meta;
-
-export const Default: Story = {
-    name: 'Text Label Only',
-};
-
-export const WithIcon: Story = {
-    name: 'Icon Only',
-    args: {
-        hideLabel: true,
-        icon: <IconIcon />,
-    },
-};
-
-export const WithRoundedIcon: Story = {
-    name: 'Icon Only Rounded',
-    args: {
-        rounding: 'full',
-        icon: <IconIcon />,
-        hideLabel: true,
-    },
-};
-
-export const WithIconAndLabel: Story = {
-    name: 'Icon and Text Label',
-    args: {
-        icon: <IconColorFan />,
-    },
-};

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',
-    },
-});