[Feature Request]: Cookie Banner component

[dammy95]

Feature request of a cookie component banner. This component should be shown when a user first enters a website and should be able to be dismissed. On dismissal, the cookie banner should not show up again when the user is still logged in.

Suggested Component structure:

This should probably live in the root component of the App.

<Coookie
  bannerMessage=" We use cookies! Roe is awesome"
  customStyles={}
/>

Helpful link (maybe?): https://www.npmjs.com/package/react-cookie-banner

[RealOrangeOne]

Perhaps making a more generic <PageBanner /> component could be interesting, especially with https://reactjs.org/docs/portals.html.

[JakeSidSmith]

This should be 2 components:

1. <Banner />
2. <CookieBanner />

Banner should be fixed to the bottom of the page with a z-index high enough to display on top of modals, nav, etc. The cookie banner should use Banner internally, but be dismissible. After being dismissed we should store that the banner has been dismissed in a cookie. When dismissed the cookie banner should slide off the bottom using CSSTransitionGroup and transform: translate();.

document.cookie

https://www.npmjs.com/package/cookie#cookieparsestr-options

[JakeSidSmith]

Note: the cookie banner should have a customisable dismiss button / icon.

This could be done like so:

<CookieBanner
  dismissButton={Button}
/>

So it will automatically apply the onClick prop to the component.

[dammy95]

@JakeSidSmith actually I think the Banner should be placed at the top of the page and not the top? That way the user is urged to dismiss the banner as it will be more intrusive and obvious if placed at the top of the page. WDYT?

[JakeSidSmith]

@dammy95 looking at most websites, they have the banner at the bottom. We could have a prop to allow moving the banner though e.g. position="top". Which defaults to the bottom.

[dammy95]

@JakeSidSmith I agree I think giving the developer the option to either put the cookie top or bottom is a good idea! 😍

[JakeSidSmith]

Fixed in #222