@frontify/fondue-components 0.1.0-beta.0

package/src/components/Divider/Divider.stories.ts

@@ -0,0 +1,47 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { Divider } from './Divider';
+
+type Story = StoryObj<typeof Divider>;
+const meta: Meta<typeof Divider> = {
+    component: Divider,
+    tags: ['autodocs'],
+    parameters: {
+        status: {
+            type: 'released',
+        },
+    },
+};
+export default meta;
+
+export const Primary: Story = {
+    args: {
+        color: '#FF0000',
+        style: 'dashed',
+        height: 'medium',
+    },
+};
+
+export const Minimal: Story = {
+    args: {},
+};
+
+export const CustomColor: Story = {
+    args: {
+        color: '#FF0000',
+    },
+};
+
+export const CustomStyle: Story = {
+    args: {
+        style: 'dotted',
+    },
+};
+
+export const CustomHeight: Story = {
+    args: {
+        height: 'large',
+    },
+};

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,69 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { type ReactElement } from 'react';
+
+export type DividerStyle = 'noline' | 'dashed' | 'solid' | 'dotted';
+
+export type DividerHeight = 'small' | 'medium' | 'large';
+
+export type DividerProps = {
+    style?: DividerStyle;
+    height?: DividerHeight;
+    color?: string;
+    vertical?: boolean;
+    'data-test-id'?: string;
+};
+
+const styleMap = {
+    noline: 'tw-border-none',
+    dashed: 'tw-border-dashed',
+    solid: 'tw-border-solid',
+    dotted: 'tw-border-dotted',
+};
+
+const heightMap = {
+    small: 36,
+    medium: 60,
+    large: 96,
+};
+
+const DIVIDER_TEST_ID = 'fondue-divider';
+
+export const Divider = ({
+    vertical = false,
+    style = 'solid',
+    height = 'small',
+    'data-test-id': dataTestId = DIVIDER_TEST_ID,
+    color = '#CCC',
+}: DividerProps): ReactElement => {
+    return vertical ? (
+        <div
+            aria-hidden="true"
+            className="tw-flex tw-self-stretch tw-mt-0 tw-mb-0 tw-items-center tw-justify-center"
+            data-test-id={dataTestId}
+            style={{
+                marginLeft: heightMap[height] / 2,
+                marginRight: heightMap[height] / 2,
+            }}
+        >
+            <div
+                className={`tw-w-px tw-h-full tw-border-r tw-m-0 ${styleMap[style]}`}
+                style={{ borderRightColor: color }}
+                data-test-id="fondue-divider-line"
+            />
+        </div>
+    ) : (
+        <div
+            aria-hidden="true"
+            className="tw-flex tw-items-center tw-w-full"
+            style={{ height: heightMap[height] }}
+            data-test-id={dataTestId}
+        >
+            <hr
+                className={`tw-border-t tw-m-0 tw-w-full ${styleMap[style]}`}
+                style={{ borderTopColor: color }}
+                data-test-id="fondue-divider-line"
+            />
+        </div>
+    );
+};

package/src/components/Divider/__tests__/Divider.spec.tsx

@@ -0,0 +1,88 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Divider } from '../Divider';
+
+const DEFAULT_COLOR_HEX = '#CCC';
+const COLOR_HEX = '#4065AE';
+const DIVIDER_SELECTOR = 'fondue-divider';
+const DIVIDER_LINE_SELECTOR = 'fondue-divider-line';
+
+describe('Divider component', () => {
+    it('should loads and displays divider', () => {
+        const { getByTestId } = render(<Divider />);
+        const divider = getByTestId(DIVIDER_LINE_SELECTOR);
+
+        expect(divider).toHaveStyle({ borderTopColor: DEFAULT_COLOR_HEX });
+    });
+    it('should have correct color', () => {
+        const { getByTestId } = render(<Divider color={COLOR_HEX} />);
+        const divider = getByTestId(DIVIDER_LINE_SELECTOR);
+
+        expect(divider).toHaveStyle({ borderTopColor: COLOR_HEX });
+    });
+    it('should allow for the height to be set to Small', () => {
+        const { getByTestId } = render(<Divider height={'small'} />);
+        const divider = getByTestId(DIVIDER_SELECTOR);
+
+        expect(divider).toHaveStyle({ height: '36px' });
+    });
+
+    it('should allow for the height to be set to Medium', () => {
+        const { getByTestId } = render(<Divider height={'medium'} />);
+        const divider = getByTestId(DIVIDER_SELECTOR);
+
+        expect(divider).toHaveStyle({ height: '60px' });
+    });
+
+    it('should allow for the height to be set to Large', () => {
+        const { getByTestId } = render(<Divider height={'large'} />);
+        const divider = getByTestId(DIVIDER_SELECTOR);
+
+        expect(divider).toHaveStyle({ height: '96px' });
+    });
+
+    it('should allow for the divider border style to be dashed', () => {
+        const { getByTestId } = render(<Divider style="dashed" />);
+        const divider = getByTestId(DIVIDER_LINE_SELECTOR);
+
+        expect(divider).toHaveClass('tw-border-dashed');
+    });
+
+    it('should allow for the divider to have no border', () => {
+        const { getByTestId } = render(<Divider style="noline" />);
+        const divider = getByTestId(DIVIDER_LINE_SELECTOR);
+
+        expect(divider).toHaveClass('tw-border-none');
+    });
+
+    it('should allow for the divider to have solid border', () => {
+        const { getByTestId } = render(<Divider style="solid" />);
+        const divider = getByTestId(DIVIDER_LINE_SELECTOR);
+
+        expect(divider).toHaveClass('tw-border-solid');
+    });
+
+    it('should allow for the divider to have dotted border', () => {
+        const { getByTestId } = render(<Divider style="dotted" />);
+        const divider = getByTestId(DIVIDER_LINE_SELECTOR);
+
+        expect(divider).toHaveClass('tw-border-dotted');
+    });
+
+    it('should allow for the divider to be vertical', () => {
+        const { getByTestId } = render(<Divider vertical={true} />);
+        const divider = getByTestId(DIVIDER_LINE_SELECTOR);
+
+        expect(divider).toHaveClass('tw-border-r');
+    });
+
+    it('should allow for the divider to have a custom test-id', () => {
+        const { getByTestId } = render(<Divider data-test-id="custom-divider-test-id" />);
+        const divider = getByTestId('custom-divider-test-id');
+
+        expect(divider);
+    });
+});

package/src/components/LoadingBar/LoadingBar.stories.tsx

@@ -0,0 +1,32 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { LoadingBar } from './LoadingBar';
+
+type Story = StoryObj<typeof LoadingBar>;
+const meta: Meta<typeof LoadingBar> = {
+    component: LoadingBar,
+    tags: ['autodocs'],
+    parameters: {
+        status: {
+            type: 'in_progress',
+        },
+    },
+    args: {
+        value: 42,
+        max: 100,
+        rounded: true,
+        'aria-label': 'Fondue Loading Bar',
+    },
+};
+
+export default meta;
+
+export const WithDefinedValue: Story = {};
+
+export const Indeterminate: Story = {
+    args: {
+        value: null,
+    },
+};

package/src/components/LoadingBar/LoadingBar.tsx

@@ -0,0 +1,68 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import * as ProgressRadixPrimitive from '@radix-ui/react-progress';
+import { type CSSProperties, forwardRef, type ElementRef } from 'react';
+
+import { loadingBarContainerStyles, loadingBarStyles } from './styles/loadingBarStyles';
+
+export type LoadingBarProps = {
+    /**
+     * The current value of the loading bar. If `null`, the loading bar will be in an indeterminate state.
+     * @default null
+     */
+    value: number | null;
+    /**
+     * @default 100
+     */
+    max?: number;
+    /**
+     * @default 'fondue-loading-bar'
+     */
+    'data-test-id'?: string;
+    /**
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * @default 'default'
+     */
+    style?: 'default' | 'positive' | 'negative';
+    /**
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large' | 'x-large';
+    getValueLabel?: (value: number, max: number) => string;
+} & ({ 'aria-label': string } | { 'aria-labelledby': string });
+
+export const LoadingBar = forwardRef<ElementRef<typeof ProgressRadixPrimitive.Root>, LoadingBarProps>(
+    (
+        {
+            value,
+            max = 100,
+            rounded = true,
+            style = 'default',
+            size = 'medium',
+            'data-test-id': dataTestId = 'fondue-loading-bar',
+            ...props
+        },
+        ref,
+    ) => {
+        return (
+            <ProgressRadixPrimitive.Root
+                ref={ref}
+                data-test-id={dataTestId}
+                className={loadingBarContainerStyles({ rounded, size, style })}
+                aria-busy={value !== max}
+                value={value}
+                max={max}
+                style={value ? ({ '--loading-bar-value': `${value}%` } as CSSProperties) : {}}
+                {...props}
+            >
+                <ProgressRadixPrimitive.Indicator
+                    className={loadingBarStyles({ style, indeterminateState: value === null })}
+                />
+            </ProgressRadixPrimitive.Root>
+        );
+    },
+);
+LoadingBar.displayName = 'LoadingBar';

package/src/components/LoadingBar/styles/loadingBarStyles.ts

@@ -0,0 +1,38 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { sv } from '#/utilities/styleUtilities';
+
+export const loadingBarContainerStyles = sv({
+    base: 'tw-relative tw-w-full tw-overflow-hidden',
+    variants: {
+        rounded: {
+            true: 'tw-rounded',
+        },
+        size: {
+            small: 'tw-h-1',
+            medium: 'tw-h-2',
+            large: 'tw-h-3',
+            'x-large': 'tw-h-4',
+        },
+        style: {
+            default: 'tw-bg-box-selected',
+            positive: 'tw-bg-box-positive',
+            negative: 'tw-bg-box-negative',
+        },
+    },
+});
+
+export const loadingBarStyles = sv({
+    base: 'tw-h-full tw-w-full',
+    variants: {
+        style: {
+            default: 'tw-bg-text-interactive',
+            positive: 'tw-bg-text-positive',
+            negative: 'tw-bg-text-negative',
+        },
+        indeterminateState: {
+            true: 'tw-animate-loading-bar-infinite tw-origin-left-right',
+            false: 'tw-transition-all tw--translate-x-[calc(100%-var(--loading-bar-value))]',
+        },
+    },
+});

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

@@ -0,0 +1,39 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { expect, test } from '@playwright/experimental-ct-react';
+
+import { LoadingBar } from '../LoadingBar';
+
+test('should render with the correct value', async ({ mount }) => {
+    const container = await mount(<LoadingBar value={60} max={120} aria-label="Fondue Loading Bar" />);
+
+    await expect(container).toHaveAttribute('role', 'progressbar');
+    await expect(container).toHaveAttribute('aria-valuenow', '60');
+    await expect(container).toHaveAttribute('aria-valuemax', '120');
+    await expect(container).toHaveAttribute('aria-valuetext', '50%');
+});
+
+test('should render with the correct computed label', async ({ mount }) => {
+    const container = await mount(
+        <LoadingBar
+            value={60}
+            max={120}
+            aria-label="Fondue Loading Bar"
+            getValueLabel={(value, max) => {
+                return `${value} of ${max}`;
+            }}
+        />,
+    );
+
+    await expect(container).toHaveAttribute('aria-label', 'Fondue Loading Bar');
+
+    // FIXME: Playwright somehow return `undefined` when the component executes `getValueLabel`, bug?
+    // await expect(container).toHaveAttribute('aria-valuetext', '60 of 120');
+});
+
+test('should render in indeterminate state', async ({ mount }) => {
+    const container = await mount(<LoadingBar value={null} aria-label="Fondue Loading Bar" />);
+
+    await expect(container).toHaveAttribute('aria-busy', 'true');
+    await expect(container).not.toHaveAttribute('aria-valuetext');
+});

package/src/components/Tag/Tag.ct.tsx

@@ -0,0 +1,16 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Tag } from './Tag';
+
+test('should render without error', async ({ mount }) => {
+    const component = await mount(<Tag>Test</Tag>);
+    await expect(component).toContainText('Test');
+});
+
+test('should allow for the tag to have a border color and background color', async ({ mount }) => {
+    const component = await mount(<Tag>Test</Tag>);
+    await expect(component).toHaveCSS('background-color', 'rgb(240, 234, 250)');
+    await expect(component).toHaveCSS('border-color', 'rgb(124, 87, 255)');
+});

package/src/components/Tag/Tag.stories.ts

@@ -0,0 +1,29 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { Tag } from './Tag';
+
+type Story = StoryObj<typeof Tag>;
+const meta: Meta<typeof Tag> = {
+    component: Tag,
+    tags: ['autodocs'],
+    parameters: {
+        status: {
+            type: 'planned',
+        },
+    },
+};
+export default meta;
+
+export const Primary: Story = {
+    args: {
+        children: 'Tag',
+    },
+};
+
+export const Secondary: Story = {
+    args: {
+        children: 'Tag',
+    },
+};

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,18 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { type ReactNode } from 'react';
+
+type TagProps = {
+    children: ReactNode;
+};
+
+export const Tag = ({ children }: TagProps) => {
+    return (
+        <div
+            className="tw-text-text tw-bg-box-selected tw-border-box-selected-strong tw-border-2 tw-p-2 tw-rounded tw-w-fit"
+            data-test-id="fondue-tag"
+        >
+            {children}
+        </div>
+    );
+};

package/src/components/Tag/__tests__/tag.spec.tsx

@@ -0,0 +1,13 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Tag } from '../Tag';
+
+describe('Tag', () => {
+    it('should render', () => {
+        const { getByTestId } = render(<Tag>Tag</Tag>);
+        expect(getByTestId('fondue-tag')).toBeInTheDocument();
+    });
+});

package/src/index.ts

@@ -0,0 +1,8 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import './styles.css';
+
+export { Button } from './components/Button/Button';
+export { Divider } from './components/Divider/Divider';
+export { LoadingBar } from './components/LoadingBar/LoadingBar';
+export { Tag } from './components/Tag/Tag';

package/src/setupTests.ts

@@ -0,0 +1,19 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { type TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';
+import '@testing-library/jest-dom/vitest';
+import { cleanup, configure } from '@testing-library/react';
+import { afterEach, beforeAll } from 'vitest';
+
+declare module 'vitest' {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    interface Assertion<T = any> extends jest.Matchers<void, T>, TestingLibraryMatchers<T, void> {}
+}
+
+beforeAll(() => {
+    configure({ testIdAttribute: 'data-test-id' });
+});
+
+afterEach(() => {
+    cleanup();
+});

package/src/styles.css

@@ -0,0 +1,35 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+@import '@frontify/fondue-tokens/styles';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+    input.tw-hide-input-arrows::-webkit-outer-spin-button,
+    input.tw-hide-input-arrows::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    input[type='number'].tw-hide-input-arrows {
+        -moz-appearance: textfield;
+    }
+
+    .tw-popper-container[data-popper-placement^='top'] > .tw-popper-arrow {
+        bottom: -4px;
+    }
+
+    .tw-popper-container[data-popper-placement^='bottom'] > .tw-popper-arrow {
+        top: -4px;
+    }
+
+    .tw-popper-container[data-popper-placement^='left'] > .tw-popper-arrow {
+        right: -4px;
+    }
+
+    .tw-popper-container[data-popper-placement^='right'] > .tw-popper-arrow {
+        left: -4px;
+    }
+}

package/src/utilities/focusStyle.ts

@@ -0,0 +1,12 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { cn } from './styleUtilities';
+
+export const FOCUS_STYLE = 'tw-ring-4 tw-ring-blue tw-ring-offset-2 dark:tw-ring-offset-black tw-outline-none';
+export const FOCUS_STYLE_NO_OFFSET = 'tw-ring-4 tw-ring-blue dark:tw-ring-offset-black tw-outline-none';
+export const FOCUS_VISIBLE_STYLE =
+    'focus-visible:tw-ring-4 focus-visible:tw-ring-blue focus-visible:tw-ring-offset-2 focus-visible:dark:tw-ring-offset-black focus-visible:tw-outline-none';
+export const FOCUS_STYLE_INSET = cn([FOCUS_STYLE, 'tw-ring-inset']);
+export const FOCUS_VISIBLE_STYLE_INSET = cn([FOCUS_VISIBLE_STYLE, 'tw-ring-inset']);
+export const FOCUS_WITHIN_STYLE =
+    'focus-within:tw-ring-4 focus-within:tw-ring-blue focus-within:tw-ring-offset-2 focus-within:dark:tw-ring-offset-black focus-within:tw-outline-none';

package/src/utilities/styleUtilities.ts

@@ -0,0 +1,19 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { extendTailwindMerge } from 'tailwind-merge';
+import { type TV, tv } from 'tailwind-variants';
+
+type ClassNameValue = ClassNameArray | string | null | undefined | 0 | false;
+type ClassNameArray = ClassNameValue[];
+
+const customTwMerge = extendTailwindMerge({
+    prefix: 'tw-',
+});
+
+export const cn = (...classLists: ClassNameValue[]): string => {
+    return customTwMerge(...classLists);
+};
+
+export const sv: TV = (variants) => {
+    return tv(variants);
+};

package/src/utilities/tests/styleUtilities.spec.ts

@@ -0,0 +1,114 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { describe, expect, it } from 'vitest';
+
+import { cn, sv } from '#/utilities/styleUtilities';
+
+describe('class merging utility', () => {
+    it('concatinates strings from list', () => {
+        const className = cn('tw-flex', 'tw-p-8 tw-justiify-center', 'tw-items-start');
+        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
+    });
+
+    it('allows for dynamic inputs', () => {
+        // eslint-disable-next-line no-constant-condition
+        const className = cn('tw-flex', 'tw-p-8 tw-justiify-center', true ? 'tw-items-start' : 'kiwi');
+        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
+    });
+
+    it('removes whitespaces', () => {
+        const className = cn('tw-flex', 'tw-p-8     tw-justiify-center', '    tw-items-start');
+        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
+    });
+
+    it('supports arrays', () => {
+        const className = cn('tw-flex', ['tw-p-8', ' tw-justiify-center'], 'tw-items-start');
+        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
+    });
+
+    it('removes empty strings', () => {
+        const className = cn('tw-flex', 'tw-p-8', ' ', 'tw-justiify-center', 'tw-items-start');
+        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
+    });
+
+    it('removes null values', () => {
+        const className = cn('tw-flex', 'tw-p-8', null, 'tw-justiify-center', 'tw-items-start');
+        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
+    });
+
+    it('removes undefined values', () => {
+        const className = cn('tw-flex', 'tw-p-8', undefined, 'tw-justiify-center', 'tw-items-start');
+        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
+    });
+
+    it('removes false values', () => {
+        const className = cn('tw-flex', 'tw-p-8', false, 'tw-justiify-center', 'tw-items-start');
+        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
+    });
+
+    it('removes 0 values', () => {
+        const className = cn('tw-flex', 'tw-p-8', 0, 'tw-justiify-center', 'tw-items-start');
+        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
+    });
+
+    it('removes empty arrays', () => {
+        const className = cn('tw-flex', 'tw-p-8', [], 'tw-justiify-center', 'tw-items-start');
+        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
+    });
+
+    it('removes overridden classes', () => {
+        const className = cn('tw-flex', 'tw-p-8', 'tw-justiify-center', 'tw-items-start', 'tw-flex', 'tw-p-2');
+        expect(className).toBe('tw-justiify-center tw-items-start tw-flex tw-p-2');
+    });
+});
+
+describe('tailwind variants utility', () => {
+    const styledDiv = sv({
+        base: 'tw-flex tw-flex-col',
+        variants: {
+            size: {
+                small: 'tw-px-2 tw-h-6',
+                medium: 'tw-px-4 tw-h-9',
+                large: 'tw-px-6 tw-h-12',
+            },
+            emphasis: {
+                default: '',
+                weak: '',
+                strong: '',
+            },
+            alignment: {
+                start: 'tw-items-start',
+                center: 'tw-items-center',
+                end: 'tw-items-end',
+            },
+        },
+        compoundVariants: [
+            {
+                size: 'large',
+                alignment: 'end',
+                class: 'tw-border-2 tw-border-black',
+            },
+        ],
+    });
+
+    it('returns base styles', () => {
+        const className = styledDiv();
+        expect(className).toBe('tw-flex tw-flex-col');
+    });
+
+    it('applies variants', () => {
+        const className = styledDiv({ alignment: 'start', size: 'medium' });
+        expect(className).toBe('tw-flex tw-flex-col tw-px-4 tw-h-9 tw-items-start');
+    });
+
+    it('ignores invalid variants', () => {
+        // @ts-expect-error Wrong value on purpose for the test
+        const className = styledDiv({ alignment: 'weird', size: 'medium' });
+        expect(className).toBe('tw-flex tw-flex-col tw-px-4 tw-h-9');
+    });
+
+    it('applies compound variants', () => {
+        const className = styledDiv({ alignment: 'end', size: 'large' });
+        expect(className).toBe('tw-flex tw-flex-col tw-px-6 tw-h-12 tw-items-end tw-border-2 tw-border-black');
+    });
+});