@myelmut/design-system 0.1.47 → 0.1.48

package/src/components/Inputs/TagSelect/TagSelect.stories.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { TagSelect } from './TagSelect';
+
+const meta = {
+    title: 'Components/Inputs/TagSelect',
+    component: TagSelect,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        onChange: { action: 'onChange' },
+        values: { control: 'object' },
+        required: { control: 'boolean' },
+        options: { control: 'object' },
+        label: { control: 'text' },
+        id: { control: 'text' },
+        placeholder: { control: 'text' },
+        className: { control: 'text', description: 'Additional class names' },
+    },
+} satisfies Meta<typeof TagSelect>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Sélectionnez une pathologie?',
+        id: 'tagSelect',
+        options: [
+            { label: 'Pathologie 1', value: 'pathologie1' },
+            { label: 'Pathologie 2', value: 'pathologie2' },
+            { label: 'Pathologie 3', value: 'pathologie3' },
+        ],
+        onChange: () => {},
+        values: [],
+        required: true,
+        placeholder: 'Pathologie',
+        className: 'w-80 md:w-100',
+    },
+    render: (arg) => {
+        const [values, setValues] = useState<string[]>([]);
+
+        return <TagSelect {...arg} values={values} onChange={(values) => setValues(values)} />;
+    },
+};

package/src/components/Inputs/TagSelect/TagSelect.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { useCallback, useMemo } from 'react';
+
+import clsx from 'clsx';
+
+import { Dropdown } from '../Dropdown/Dropdown';
+import { Tag } from '../Tag/Tag';
+
+export interface TagSelectProps {
+    label: string;
+    id: string;
+    options: { label: string; value: string }[];
+    onChange: (values: string[]) => void;
+    values: string[];
+    required: boolean;
+    placeholder: string;
+    className?: string;
+}
+
+export const TagSelect = ({ label, id, options, onChange, values, required, placeholder, className }: TagSelectProps) => {
+    const handleChange = useCallback(
+        (value: string) => {
+            onChange([...values, value]);
+        },
+        [onChange],
+    );
+
+    const handleClear = useCallback(
+        (value: string) => {
+            onChange(values.filter((v) => v != value));
+        },
+        [onChange],
+    );
+
+    const filteredOptions = useMemo(() => options.filter((option) => !values.includes(option.value)), [options, values]);
+
+    return (
+        <div className={clsx('w-full', className)}>
+            <Dropdown disabled={!filteredOptions.length} placeholder={placeholder} label={label} id={id} name={id} options={filteredOptions} onChange={handleChange} value={''} required={required} />
+            <div className="mt-1 flex flex-wrap gap-2">
+                {values.map((value) => (
+                    <Tag key={value} label={options.find((option) => option.value === value)?.label ?? ''} value={value} onRemove={handleClear} />
+                ))}
+            </div>
+        </div>
+    );
+};

package/src/components/Inputs/TextInput/TextInput.stories.tsx

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { TextInput } from './TextInput';
+
+const meta = {
+    title: 'Components/Inputs/TextInput',
+    component: TextInput,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        label: { control: 'text' },
+        placeholder: { control: 'text' },
+        id: { control: 'text' },
+        name: { control: 'text' },
+        disabled: { control: 'boolean' },
+        className: { control: 'text' },
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof TextInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Name',
+        placeholder: 'Enter your name',
+        id: 'name',
+        name: 'name',
+        type: 'text',
+        className: 'w-80 md:w-100',
+    },
+};

package/src/components/Inputs/TextInput/TextInput.tsx

@@ -0,0 +1,38 @@
+import clsx from 'clsx';
+
+import { ErrorMessage } from '../ErrorMessage/ErrorMessage';
+import { Label } from '../Label/Label';
+
+export interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    placeholder: string;
+    id: string;
+    name: string;
+    type?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+    error?: string;
+    required?: boolean;
+    className?: string;
+}
+
+export const TextInput = ({ label = '', placeholder, id, name, type = 'text', className, disabled, error = '', required = false, hasError = false, ...props }: TextInputProps) => {
+    // prettier-ignore
+    const containerClasses = clsx(
+        'md:max-w-98', 
+        className,
+    );
+
+    const inputClasses = clsx(
+        'border-claret-violet-dark hover:border-claret-violet-dark/40 focus:border-claret-violet-dark/40 bg-beige-light rounded-input text-md placeholder:text-md block w-full border px-3 py-2.5 transition-all duration-300 placeholder:opacity-30 placeholder:transition-opacity placeholder:duration-300 focus:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-40 disabled:placeholder:opacity-100',
+        hasError && 'border-red-error bg-red-error/10',
+    );
+
+    return (
+        <div className={containerClasses}>
+            {label.length > 0 && <Label label={label} id={id} required={required} />}
+            <input type={type} placeholder={placeholder} id={id} name={name} disabled={disabled} required={required} {...props} className={inputClasses} aria-invalid={hasError} aria-required={required} />
+            <ErrorMessage id={`${id}-error`} hasError={hasError} message={error} className={clsx('text-red-error mt-2 min-h-5 opacity-0 transition-opacity duration-300', hasError && 'opacity-100')} />
+        </div>
+    );
+};

package/src/components/Inputs/WizardDropdown/WizardDropdown.stories.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { WizardDropdown } from './WizardDropdown';
+
+const meta = {
+    title: 'Components/Inputs/WizardDropdown',
+    component: WizardDropdown,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        placeholder: { control: 'text' },
+        className: { control: 'text', description: 'Additional CSS classes to add to the component' },
+        disabled: { control: 'boolean' },
+        options: { control: 'object' },
+        value: { control: 'text' },
+        name: { control: 'text' },
+        onChange: { action: 'onChange' },
+        searchable: { control: 'boolean' },
+    },
+    args: {
+        placeholder: '',
+        options: [],
+        value: '',
+        name: '',
+        onChange: () => {},
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof WizardDropdown>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        name: 'dropdown',
+        options: [
+            { label: 'une femelle', value: 'female' },
+            { label: 'un mâle', value: 'male' },
+        ],
+        onChange: () => {},
+        value: '',
+        placeholder: '',
+        className: 'max-md:w-80',
+    },
+    render: (arg) => {
+        const [value, setValue] = useState('');
+
+        return <WizardDropdown {...arg} onChange={(value) => setValue(value)} value={value} />;
+    },
+};

package/src/components/Inputs/WizardDropdown/WizardDropdown.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import clsx from 'clsx';
+
+import { ArrowPlainIcon, DropdownMenu, SpanTitle } from '../../../components';
+import { useClickOutside } from '../../../helpers';
+
+export interface WizardDropdownProps {
+    placeholder?: string;
+    options: { label: string; value: string }[];
+    value: string;
+    name: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    className?: string;
+    searchable?: boolean;
+}
+
+export const WizardDropdown = ({ placeholder = '', options, value, onChange, name, disabled = false, className, searchable = false }: WizardDropdownProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+    const ref = useRef<HTMLDivElement>(null);
+
+    const selectedLabel = useMemo(() => options.find((option) => option.value === value)?.label, [options, value]);
+
+    const handleBlur = useCallback(() => {
+        setIsOpen(false);
+        if ((!value || searchValue !== selectedLabel) && searchable) {
+            setSearchValue('');
+            onChange('');
+        }
+    }, [value, onChange, selectedLabel, searchValue]);
+
+    useClickOutside(ref as React.RefObject<HTMLDivElement>, handleBlur);
+
+    const handleChange = useCallback(
+        (selection: string) => {
+            onChange(selection);
+            setIsOpen(false);
+            setSearchValue(options.find((option) => option.value === selection)?.label || '');
+        },
+        [onChange, options],
+    );
+
+    useEffect(() => {
+        if (!value && searchable) {
+            setSearchValue('');
+        }
+    }, [value, searchable]);
+
+    const inputClasses = clsx(
+        'border-claret-violet-dark outline-claret-violet-dark flex min-h-19.25 w-full cursor-pointer items-center justify-between gap-4 border-b py-0.5 disabled:cursor-not-allowed disabled:opacity-40',
+        disabled && 'opacity-40',
+        (isOpen || value) && 'border-claret-violet-dark/50',
+    );
+
+    const filteredOptions = useMemo(() => (searchable ? options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase())) : options), [options, searchValue, searchable]);
+
+    return (
+        <div className={clsx('text-claret-violet-dark relative w-full md:w-max md:min-w-66', className)} ref={ref}>
+            <input type="hidden" name={name} value={value} />
+            {searchable ? (
+                <div className={clsx(inputClasses)}>
+                    <input
+                        type="text"
+                        name="search"
+                        disabled={disabled}
+                        onFocus={() => setIsOpen(true)}
+                        value={searchValue}
+                        placeholder={placeholder}
+                        onChange={(e) => setSearchValue(e.target.value)}
+                        className="text-display-xl-mobile md:text-heading-lg font-pangaia w-full max-w-0 min-w-56 font-medium italic focus:outline-none"
+                    />
+                    <ArrowPlainIcon className={clsx('transition-duration-300 w-4.5 transition-transform will-change-transform md:w-6', isOpen && 'rotate-180')} />
+                </div>
+            ) : (
+                <button tabIndex={disabled ? -1 : 0} disabled={disabled} onClick={() => setIsOpen(!isOpen)} type="button" className={clsx(inputClasses)}>
+                    <SpanTitle size="display-xl" className="block md:hidden">
+                        {selectedLabel || placeholder}
+                    </SpanTitle>
+                    <SpanTitle size="heading-lg" className="hidden md:block">
+                        {selectedLabel || placeholder}
+                    </SpanTitle>
+                    <ArrowPlainIcon className={clsx('transition-duration-300 w-4.5 transition-transform will-change-transform md:w-6', isOpen && 'rotate-180')} />
+                </button>
+            )}
+
+            <DropdownMenu name={name} options={filteredOptions} value={value} onChange={handleChange} disabled={disabled} className="absolute top-full left-0 mt-3" isOpen={isOpen} />
+        </div>
+    );
+};

package/src/components/Inputs/WizardTextInput/WizardTextInput.stories.tsx

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { WizardTextInput } from './WizardTextInput';
+
+const meta = {
+    title: 'Components/Inputs/WizardTextInput',
+    component: WizardTextInput,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        placeholder: { control: 'text' },
+        name: { control: 'text' },
+        disabled: { control: 'boolean' },
+        error: { control: 'text' },
+        hasError: { control: 'boolean' },
+        className: { control: 'text' },
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof WizardTextInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        placeholder: 'Nom',
+        name: 'name',
+        disabled: false,
+        error: '',
+        hasError: false,
+        className: 'w-80 md:w-100',
+    },
+};

package/src/components/Inputs/WizardTextInput/WizardTextInput.tsx

@@ -0,0 +1,31 @@
+import clsx from 'clsx';
+
+import { ErrorMessage } from '../ErrorMessage/ErrorMessage';
+
+export interface WizardTextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    placeholder: string;
+    name: string;
+    disabled: boolean;
+    error: string;
+    hasError: boolean;
+    className?: string;
+}
+
+export const WizardTextInput = ({ placeholder, name, disabled, className, hasError, error, ...props }: WizardTextInputProps) => {
+    return (
+        <div className={className}>
+            <input
+                type="text"
+                placeholder={placeholder}
+                name={name}
+                disabled={disabled}
+                className={clsx(
+                    'font-pangaia text-display-md-mobile md:text-display-md outline-claret-violet-dark placeholder:text-claret-violet-dark/20 font-medium transition-opacity duration-300 focus:outline-none focus-visible:outline-2 disabled:opacity-40 disabled:placeholder:opacity-100 max-md:italic',
+                    className,
+                )}
+                {...props}
+            />
+            <ErrorMessage id={`${name}-error`} hasError={hasError} message={error} />
+        </div>
+    );
+};

package/src/components/Inputs/index.ts

@@ -0,0 +1,16 @@
+import { ButtonSelect } from './ButtonSelect/ButtonSelect';
+import { Checkbox } from './Checkbox/Checkbox';
+import { Dropdown } from './Dropdown/Dropdown';
+import { DropdownMenu } from './DropdownMenu/DropdownMenu';
+import { ErrorMessage } from './ErrorMessage/ErrorMessage';
+import { Filters } from './Filters/Filters';
+import { Label } from './Label/Label';
+import { Newsletter } from './Newsletter/Newsletter';
+import { QuantityInput } from './QuantityInput/QuantityInput';
+import { Tag } from './Tag/Tag';
+import { TagSelect } from './TagSelect/TagSelect';
+import { TextInput } from './TextInput/TextInput';
+import { WizardDropdown } from './WizardDropdown/WizardDropdown';
+import { WizardTextInput } from './WizardTextInput/WizardTextInput';
+
+export { Label, ErrorMessage, DropdownMenu, TextInput, Dropdown, WizardDropdown, Newsletter, QuantityInput, Checkbox, ButtonSelect, Filters, TagSelect, Tag, WizardTextInput };

package/src/components/Navigation/Footer/Footer.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Footer } from './Footer';
+
+const meta = {
+    title: 'Components/Navigation/Footer',
+    component: Footer,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+        },
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof Footer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Navigation/Footer/Footer.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+
+import { Button, FooterTips, Logo, Newsletter, SocialButton, Text } from '../../../components';
+import { SocialButtonProps } from '../../Buttons/SocialButton/SocialButton';
+
+export type FooterProps = {
+    className?: string;
+};
+
+const socialLinks: SocialButtonProps['variant'][] = ['Facebook', 'Instagram', 'LinkedIn', 'Tiktok'];
+
+export const Footer = ({ className }: FooterProps) => {
+    const { t } = useTranslation('design');
+
+    //todo update nav links and add newsletter logic
+    const linksColumns = [
+        {
+            links: [
+                { label: t('navigation.home'), href: '/' },
+                { label: t('navigation.ourStory'), href: '/notre-histoire' },
+                { label: t('navigation.whyElmut'), href: '/pourquoi-elmut' },
+                { label: t('navigation.faq'), href: 'https://elmuthelp.zendesk.com/hc/fr' },
+            ],
+            className: 'col-1',
+            name: 'elmut',
+        },
+        {
+            links: [
+                { label: t('navigation.dog'), href: '/chiens' },
+                { label: t('navigation.recipes'), href: '/recettes-chien' },
+                { label: t('navigation.blog'), href: '/blog/chiens' },
+                { label: t('navigation.homemadeRation'), href: '/ration-menagere-chien' },
+            ],
+            className: 'col-1 row-2 md:col-2 md:row-1',
+            name: 'doc',
+        },
+        {
+            links: [
+                { label: t('navigation.cat'), href: '/chats' },
+                { label: t('navigation.recipes'), href: '/recettes-chat' },
+                { label: t('navigation.blog'), href: '/blog/chats' },
+                { label: t('navigation.homemadeRation'), href: '/ration-menagere-chat' },
+            ],
+            className: 'col-2 row-2 md:col-3 md:row-1',
+            name: 'cat',
+        },
+        {
+            links: [
+                { label: t('navigation.contact'), href: 'https://elmuthelp.zendesk.com/hc/fr/requests/new' },
+                { label: t('navigation.signIn'), href: '/auth/sign-in' },
+                { label: t('navigation.sponsorship'), href: '/parrainage' },
+                { label: t('navigation.help'), href: '/aide' },
+            ],
+            className: 'col-2 md:col-4',
+            name: 'account',
+        },
+    ];
+
+    const legalLinks = [
+        {
+            label: t('navigation.legal'),
+            href: '/mentions-legales',
+        },
+        {
+            label: t('navigation.terms'),
+            href: '/cgv',
+        },
+        {
+            label: t('navigation.sitemap'),
+            href: '/plan-du-site',
+        },
+    ];
+
+    return (
+        <footer className={clsx('', className)}>
+            <div className={clsx('bg-lavender-blue-light py-10')}>
+                <div className="container mx-auto">
+                    <Logo className="mb-9 w-25 md:w-51" />
+                    <div className="flex items-stretch justify-between max-xl:gap-15 max-md:flex-col-reverse md:flex-col xl:flex-row">
+                        <nav className="-ms-2.5 grid min-w-2/3 grid-cols-2 gap-y-15 md:grid-cols-5">
+                            {linksColumns.map((column) => (
+                                <ul key={column.name} className={clsx('grid grid-cols-subgrid gap-1 md:py-3', column.className)}>
+                                    {column.links.map((link) => (
+                                        <li key={link.href} className="w-max">
+                                            <Button variant="terciary" color="dark" href={link.href}>
+                                                {link.label}
+                                            </Button>
+                                        </li>
+                                    ))}
+                                </ul>
+                            ))}
+                            <ul className="col-span-1 flex gap-3.5 md:flex-col md:gap-1 md:py-3">
+                                {socialLinks.map((link) => (
+                                    <li key={link} className="flex h-11 items-center">
+                                        <SocialButton variant={link} labelVisible={true} />
+                                    </li>
+                                ))}
+                            </ul>
+                        </nav>
+                        <div className="flex flex-col justify-between gap-4 md:flex-row md:gap-6 xl:-mb-1.5 xl:w-1/3 xl:flex-col xl:gap-0">
+                            <FooterTips className="md:w-1/2 xl:w-full" />
+                            <Newsletter onSubscribe={() => {}} variant="footer" className="md:w-1/2 xl:w-full" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className="bg-claret-violet-dark text-beige-light px-6 py-8 md:px-0 md:py-6.5">
+                <div className="container mx-auto flex justify-between max-md:flex-col max-md:gap-4 md:items-center">
+                    <nav>
+                        <ul className="-ms-2.5 flex gap-1 max-md:flex-col md:gap-10">
+                            {legalLinks.map((link) => (
+                                <li key={link.href}>
+                                    <Button variant="terciary" href={link.href}>
+                                        {link.label}
+                                    </Button>
+                                </li>
+                            ))}
+                        </ul>
+                    </nav>
+                    <Text size="button">
+                        {t('footer.copyright')} {new Date().getFullYear()}
+                    </Text>
+                </div>
+            </div>
+        </footer>
+    );
+};

package/src/components/Navigation/FooterTips/FooterTips.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FooterTips } from './FooterTips';
+
+const meta = {
+    title: 'Components/Navigation/FooterTips',
+    component: FooterTips,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    globals: {
+        background: {
+            value: 'lavender',
+        },
+    },
+} satisfies Meta<typeof FooterTips>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Navigation/FooterTips/FooterTips.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+
+import ClaudineImage from '../../../assets/images/tips/claudine-head.webp';
+import { Text } from '../../../components';
+
+export const FooterTips = ({ className }: { className?: string }) => {
+    const { t } = useTranslation('design');
+
+    return (
+        <div className={clsx('flex items-center gap-5', className)}>
+            <div className="bg-pink-oyster-light h-9 w-9 shrink-0 overflow-hidden rounded-full md:h-17 md:w-17">
+                <img src={ClaudineImage} alt={t('tips.claudineAlt')} loading="lazy" decoding="async" className="h-full w-full object-cover" />
+            </div>
+            <div className={clsx('text-claret-violet-dark')}>
+                <Text size="md" className="max-md:not-italic">
+                    "&nbsp;{t('tips.footerMessage')}&nbsp;"
+                </Text>
+            </div>
+        </div>
+    );
+};