Cabonline Cookie Consent

A simple cookie consent modal for various Cabonline frontend services

Installation & development

Please use yarn.

yarn install

Development

• You can run yarn storybook to start a local storybook on http://localhost:6006

Build & publish to npm

You need to be logged in to Cabonline's npm account (with npm login) then you can run ./publish to build and publish the latest version.

Usage

Import component and supply relevant properties, texts and a list of necessary + optional cookies. The state of the checkboxes and modal must be handled by the client.

Example

import { CookieConsentModal } from "@cabonline/cookie-consent"

const MyComponent = () => {
  const [show, setShow] = useState<boolean>(true)
  const [optional, setOptional] = useState<Settings["optional"]>([
    {
      name: "analytics",
      text: "Analytics",
      description:
        "Cookies that help us understand how users use the site. Data we collect to improve the user experience.",
      checked: true,
    },
    {
      name: "marketing",
      text: "Marketing",
      description: "Cookies used for marketing purposes.",
      checked: true,
    },
  ])
  return (
    <>
      <button onClick={() => setShow(true)}>Show</button>
      <CookieConsentModal
        colors={props?.colors}
        onClose={(settings) => {
          console.log("🚀 ~ settings:", settings)
          if (settings.optional) setOptional(settings.optional)
          setShow(false)
        }}
        show={show}
        text={{
          title: "We use cookies",
          body: "Sed fringilla mauris sit amet nibh. Duis leo. Duis vel nibh at velit scelerisque suscipit. Vivamus aliquet elit ac nisl. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.",
          acceptCookies: "Accept cookies",
          manageCookies: "Manage cookies",
          acceptSelection: "Confirm selection",
        }}
        links={{
          policy: {
            url: "https://www.cabonline.com/cookies",
            text: "Personal data and cookie policy",
          },
        }}
        cookies={{
          necessary: {
            name: "necessary",
            text: "Necessary cookies",
            description:
              "Cookies that are essential for the functionality of the service",
            checked: true,
          },
          optional,
        }}
        footerContent={
          <>
            <p>Custom footer content</p>
          </>
        }
        focusAccept={true}
      />
    </>
  )
}

export { MyComponent }

Props

type Props = {
  show: boolean
  text: Text
  cookies: Cookies
  links: {
    policy: Link
  }
  onClose?: (settings: Settings) => void
  colors?: {
    primaryColor?: string
    primaryTextColor?: string
  }
  footerContent?: React.ReactNode
  focusAccept?: boolean
}

type Text = {
  title: string
  body: string
  acceptCookies: string
  manageCookies: string
  acceptSelection: string
}

type Link = {
  url: string
  text: string
}

type Cookie = {
  name: string
  text: string
  description?: string
  checked: boolean
}

interface Settings {
  necessary: Cookie
  optional?: Cookie[]
}