GranularCookieSelection

import { CookiePreferences, GranularCookieSelection } from '@krakentech/coral-organisms';
 
const cookies = [
    {
        disabled: true,
        isCheckedByDefault: true,
        label: 'Essential',
        id: 'essential',
        tooltip:
            "These ones are required, and without them turned on, welp, our site just wouldn't work!",
    },
    {
        disabled: false,
        isCheckedByDefault: false,
        label: 'Analytics & customisation',
        id: 'analytics',
        tooltip:
            'These ones help us understand how customers are using our site. They help us build better features and tailor our content for different people.',
    },
    {
        disabled: false,
        isCheckedByDefault: false,
        label: 'Marketing & social media',
        id: 'marketing',
        tooltip:
            'These ones help us reach you on social media or other websites to help you with queries or present relevant offers.',
    },
];
 
const granularCookieGroups = cookies
    .filter((value) => !value.disabled)
    .map((value) => ({
        label: value.label,
        value: value.id,
    }));
 
const granularCookies = [
    {
        disabled: false,
        isCheckedByDefault: false,
        label: 'Google',
        id: 'google',
        group: 'analytics',
        tooltip: "Allow cookies from Google's tracking services",
    },
    {
        disabled: false,
        isCheckedByDefault: false,
        label: 'Hubspot',
        id: 'hubspot',
        group: 'marketing',
        tooltip: "Allow cookies from Hubspot's tracking services",
    },
];
 
<CookiePreferences initialDisplayMode="granular">
    ...
    <GranularCookieSelection
        onPreferencesChosen={(chosenCookies) => {
            console.log('chosenCookies', chosenCookies);
        }}
        cookieGroups={granularCookieGroups}
        cookies={granularCookies}
    />
</CookiePreferences>