Cookie Banner

v.5.0.1

Installation

yarn

yarn add @mercell/cookie-banner-react

pnpm

pnpm add @mercell/cookie-banner-react

npm

npm install --save @mercell/cookie-banner-react

The CookieBanner has necessary peerDependencies, please make sure that you have them in your project

"@carbon/icons-react": "^10.49.0",
"@mercell/button-react": "^5.0.0",
"@mercell/card-react": "^4.0.0",
"@mercell/icon-button-react": "^undefined",
"@mercell/tailwind": "^6.0.1",
"@mercell/toggle-react": "^5.0.0",
"@mercell/use-accordion-react-hook": "^3.0.6",
"@mercell/use-expanded-state-react-hook": "^2.0.6",
"classnames": "^2.3.1",
"react": "^17.0.2" 

Usage

Using the Cookie Banner component is as simple as importing it like this.

import { CookieBanner } from '@mercell/cookie-banner-react';

Live Editor

// You can play with code, with HTML tags and text as much as you want! const description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id enim ac mauris ullamcorper cursus." render ( <div className="cookie-example">{/*this class is only for that playground solution!*/} This banner will be placed fixed bottom in your project as default. it will be as long as your browser width. <CookieBanner openDetailsLabel="Cookies preferences" acceptAllLabel="Accept cookies" description="We use cookies to improve your experience and evaluate the use of each item on our site. By clicking further you accept our use of cookies." detailsHeader="Customise Your Privacy Settings" detailsSaveLabel="Save and close" detailsDescription="Some cookies are needed for the website to work and can't be turned off" onSubmit={(state) => console.log('Submitted', state)} title="Your privacy is important to us" enableAllLabel="Enable all" cookies={[ { id: 'preferences', shortDescription: 'Region/geography etc', description, onLabel: 'On', offLabel: 'Off', header: 'Preferences', }, { id: 'statistics', shortDescription: 'Interaction with the site', description, onLabel: 'On', offLabel: 'Off', header: 'Statistics', }, { id: 'marketing', shortDescription: 'Tracking across websites', description, onLabel: 'On', offLabel: 'Off', header: 'Marketing', }, ]} /> </> )

// You can play with code, with HTML tags and text as much as you want!
    const description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id enim ac mauris ullamcorper cursus."
    render (
        <div className="cookie-example">{/*this class is only for that playground solution!*/}
            This banner will be placed fixed bottom in your project as default. it will be as long as your browser width.
            <CookieBanner
                openDetailsLabel="Cookies preferences"
                acceptAllLabel="Accept cookies"
                description="We use cookies to improve your experience and evaluate the use of each item on our site. By clicking further you accept our use of cookies."
                detailsHeader="Customise Your Privacy Settings"
                detailsSaveLabel="Save and close"
                detailsDescription="Some cookies are needed for the website to work and can't be turned off"
                onSubmit={(state) => console.log('Submitted', state)}
                title="Your privacy is important to us"
                enableAllLabel="Enable all"
                cookies={[
                    {
                        id: 'preferences',
                        shortDescription: 'Region/geography etc',
                        description,
                        onLabel: 'On',
                        offLabel: 'Off',
                        header: 'Preferences',
                    },
                    {
                        id: 'statistics',
                        shortDescription: 'Interaction with the site',
                        description,
                        onLabel: 'On',
                        offLabel: 'Off',
                        header: 'Statistics',
                    },
                    {
                        id: 'marketing',
                        shortDescription: 'Tracking across websites',
                        description,
                        onLabel: 'On',
                        offLabel: 'Off',
                        header: 'Marketing',
                    },
                ]}
            />
        </>
    )

Result

Types, definitions, etc.

Types

CookieBanner

interface CookieBanner {
    title: string;
    description: string;
    openDetailsLabel: string;
    onSubmit: (details: { [key: string]: boolean }) => void;
    acceptAllLabel: string;
    cookies: Omit<CookieToggleProps, 'onChange' | 'checked'>[];
    detailsHeader: string;
    enableAllLabel: string;
    detailsSaveLabel: string;
}

Name	Type	Default	Required	Description
title	string	-	yes	Title in the menu
description	string	-	yes	Description in the menu
openDetailsLabel	string	-	yes	Text for the label to open toggles and in-depth cookie information
onSubmit	function	-	yes	What happens when the user presses the accept button
acceptAllLabel	string	-	yes	Text for the button which accepts all the cookies
cookies		-	yes	Omits the onchange from CookieToggleProps
detailsHeader	string	-	yes	Header for the details
enableAllLabel	string	-	yes	Text for the button that enables all cookies in detail view
detailsSaveLabel	string	-	yes	Save button text in the preferences

CookieToggleProps

interface CookieToggleProps {
    id: string;
    header: string;
    shortDescription: string;
    description: string;
    onLabel: string;
    offLabel: string;
    checked?: boolean;
    onChange: JSX.IntrinsicElements['input']['onChange'];
}

Name	Type	Default	Required	Description
id	string	-	yes	A unique identifier for the label and toggle inside the component to work together
header	string	-	yes	Header of the toggle
shortDescription	string	-	yes	Short description of the toggle
description	string	-	yes	Description of the toggle
onLabel	string	-	yes	The label for when the toggle is toggled on
offLabel	string	-	yes	The label for when the toggle is toggled off
checked	boolean	-	no	Optional toggle to check the toggle on render
onChange	JSX.IntrinsicElements['input']['onchange']	-	no	onChange method for toggle

Changelog

Change Log - @mercell/cookie-banner-react

This log was last generated on Thu, 17 Nov 2022 14:09:58 GMT and should not be manually modified.

5.0.1

Thu, 17 Nov 2022 14:09:58 GMT

Patches

• Fix font-semibold

5.0.0

Fri, 11 Nov 2022 09:18:57 GMT

Breaking changes

• New styling approach - use only tailwind classes, add tailwind-merge library

4.0.0

Thu, 15 Sep 2022 06:07:41 GMT

Breaking changes

• Migration to Tailwind3, React 18 and ViteJS from webpack.

3.2.5

Fri, 26 Aug 2022 12:26:09 GMT

Patches

• Fix position of text regarding the switch, move from flex to the grid system and calculate smaller grid for smaller screens

3.2.4

Fri, 01 Jul 2022 11:30:54 GMT

Patches

• Fix cookie path to img and script to copy it

3.2.3

Thu, 30 Jun 2022 10:57:49 GMT

Patches

• Package.json refactor, add test suite, more tests soon

3.2.2

Tue, 14 Jun 2022 11:56:02 GMT

Patches

• Fixes to alignment of Tertiary button and small changes to mobile scroll logic

3.2.1

Wed, 04 May 2022 15:10:16 GMT

Patches

• copy the svg image to the build output folder for cjs

3.2.0

Mon, 02 May 2022 15:12:09 GMT

Minor changes

• Cookie-banner: set z-index to 130, fix the svg image

3.1.8

Mon, 11 Apr 2022 14:10:08 GMT

Patches

• Updated according to specs and cleanup with more testing to the component
• Split up into multiple components in core instead of one giant export

3.1.7

Fri, 08 Apr 2022 10:19:50 GMT

Patches

• Bump dependencies

3.1.6

Tue, 01 Mar 2022 11:32:03 GMT

Patches

• z-index:130

3.1.5

Mon, 28 Feb 2022 12:45:49 GMT

Patches

• Dependency update

3.1.4

Mon, 28 Feb 2022 10:55:32 GMT

Patches

• Bump typescript

3.1.3

Wed, 26 Jan 2022 16:19:19 GMT

Patches

• Move dependencies to peerDependencies to avoid duplication in installation process in project
• Adding the same peerDependencies to devDependencies

3.1.2

Tue, 25 Jan 2022 12:04:06 GMT

Patches

• Updated illustration of the cookie banner

3.1.1

Fri, 21 Jan 2022 13:08:25 GMT

Patches

• Package json update

3.1.0

Tue, 18 Jan 2022 16:51:12 GMT

Minor changes

• Updated design of the cookie banner according to design system specifications with some modifications

3.0.0

Wed, 15 Dec 2021 22:20:34 GMT

Breaking changes

• Update to match figma design

2.0.5

Fri, 12 Nov 2021 13:08:30 GMT

Patches

• Add @mercell/tailwind to devDeps to be always up to date

2.0.4

Fri, 05 Nov 2021 11:10:13 GMT

Patches

• Bump peerDependency

2.0.3

Thu, 04 Nov 2021 10:10:16 GMT

Patches

• Revert tailwind version

2.0.2

Wed, 03 Nov 2021 15:28:42 GMT

Patches

• react types >=17

2.0.1

Wed, 27 Oct 2021 12:53:13 GMT

Patches

• Gitignore fix

2.0.0

Mon, 18 Oct 2021 07:16:21 GMT

Breaking changes

• New local build process with webpack without storybook, add npmignore and update dependencies

1.0.12

Tue, 12 Oct 2021 11:37:45 GMT

Version update only

1.0.11

Mon, 23 Aug 2021 10:33:51 GMT

Version update only

1.0.10

Mon, 12 Jul 2021 10:50:09 GMT

Patches

• Updating dependencies
• Updating dependencies

1.0.9

Wed, 24 Mar 2021 10:17:01 GMT

Patches

• Enabling eslint

1.0.8

Tue, 23 Mar 2021 13:40:42 GMT

Patches

• Adding esm module export

1.0.7

Wed, 17 Mar 2021 10:01:28 GMT

Patches

• Adding readme

1.0.6

Thu, 25 Feb 2021 07:02:16 GMT

Patches

• Tuning styling

1.0.5

Wed, 24 Feb 2021 11:34:29 GMT

Patches

• Default background set

1.0.4

Fri, 19 Feb 2021 09:41:17 GMT

Patches

• bump

1.0.3

Thu, 18 Feb 2021 19:57:09 GMT

Patches

• Minor link fix

1.0.2

Thu, 18 Feb 2021 16:20:32 GMT

Patches

• bump

1.0.1

Mon, 15 Feb 2021 14:31:25 GMT

Patches

• Bumping toggle-react

1.0.0

Fri, 05 Feb 2021 13:40:11 GMT

Breaking changes

• Added component

Figma

Sometimes it can take some time until Figma will render component inside embed iframe. Try to click plus icon to 'reset' initial loader. (Works only in Chrome)

Click me to open figma in the new card