Compare commits

..

No commits in common. "master" and "v8.0.1" have entirely different histories.

11 changed files with 3287 additions and 3036 deletions

17
.github/stale.yml vendored
View File

@ -1,17 +0,0 @@
# Number of days of inactivity before an issue becomes stale
daysUntilStale: 30
# Number of days of inactivity before a stale issue is closed
daysUntilClose: 7
# Issues with these labels will never be considered stale
exemptLabels:
- pinned
- security
# Label to use when marking an issue as stale
staleLabel: wontfix
# Comment to post when marking an issue as stale. Set to `false` to disable
markComment: >
This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs. Thank you
for your contributions.
# Comment to post when closing a stale issue. Set to `false` to disable
closeComment: false

View File

@ -1,20 +0,0 @@
name: Build and Deploy storybook
on: [push]
permissions:
contents: write
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v3
- name: Install and Build 🔧
run: |
npm install
npm run build-storybook
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@v4
with:
folder: storybook-static

View File

@ -1,10 +1,8 @@
module.exports = { module.exports = {
stories: ["../stories/**/*.stories.@(ts|tsx|js|jsx)"], stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
addons: [ addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
// '@storybook/addon-links', '@storybook/addon-essentials'
],
// https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
typescript: { typescript: {
check: true, // type-check stories during Storybook build check: true, // type-check stories during Storybook build
}, }
}; };

View File

@ -1,6 +0,0 @@
{
"sonarlint.connectedMode.project": {
"connectionId": "public-sonarcloud",
"projectKey": "Mastermindzh_react-cookie-consent"
}
}

View File

@ -5,23 +5,17 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [[9.0.0]((https://github.com/Mastermindzh/react-cookie-consent/releases/tag/9.0.0)]
Made all props optional and fixed documentation.
Fixes [#191](https://github.com/Mastermindzh/react-cookie-consent/issues/191) and [#193](https://github.com/Mastermindzh/react-cookie-consent/issues/193)
## [[8.0.1]((https://github.com/Mastermindzh/react-cookie-consent/releases/tag/8.0.1)] ## [[8.0.1]((https://github.com/Mastermindzh/react-cookie-consent/releases/tag/8.0.1)]
~~Second try of [np](https://github.com/sindresorhus/np)...~~ Second try of [np](https://github.com/sindresorhus/np)...
Removed postinstall Removed postinstall
np is not my thing.. reverted to old release strategy
## [[8.0.0]((https://github.com/Mastermindzh/react-cookie-consent/releases/tag/8.0.0)] ## [[8.0.0]((https://github.com/Mastermindzh/react-cookie-consent/releases/tag/8.0.0)]
- Switched to tsdx and Typescript - Switched to tsdx and Typescript
- Added storybook with examples from readme - Added storybook with examples from readme
## [[7.6.0]](<https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.6.0>] ## [[7.6.0]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.6.0]
- Added `customButtonWrapperAttributes` prop which allows to add custom attributes to the button wrapper div - Added `customButtonWrapperAttributes` prop which allows to add custom attributes to the button wrapper div

View File

@ -4,7 +4,9 @@ A small, simple and customizable cookie consent bar for use in React application
[![NPM](https://nodei.co/npm/react-cookie-consent.png)](https://npmjs.org/package/react-cookie-consent) [![NPM](https://nodei.co/npm/react-cookie-consent.png)](https://npmjs.org/package/react-cookie-consent)
Demo (storybook): <https://mastermindzh.github.io/react-cookie-consent/> Demo: https://mastermindzh.github.io/react-cookie-consent/
Example branch: https://github.com/Mastermindzh/react-cookie-consent/tree/example
![Downloads](https://img.shields.io/npm/dm/react-cookie-consent) ![Dependent repos (via libraries.io)](https://img.shields.io/librariesio/dependent-repos/npm/react-cookie-consent) ![GitHub contributors](https://img.shields.io/github/contributors/mastermindzh/react-cookie-consent) ![Minified size](https://img.shields.io/bundlephobia/min/react-cookie-consent) ![npm type definitions](https://img.shields.io/npm/types/react-cookie-consent) ![license-mit](https://img.shields.io/badge/license-MIT-green) ![Downloads](https://img.shields.io/npm/dm/react-cookie-consent) ![Dependent repos (via libraries.io)](https://img.shields.io/librariesio/dependent-repos/npm/react-cookie-consent) ![GitHub contributors](https://img.shields.io/github/contributors/mastermindzh/react-cookie-consent) ![Minified size](https://img.shields.io/bundlephobia/min/react-cookie-consent) ![npm type definitions](https://img.shields.io/npm/types/react-cookie-consent) ![license-mit](https://img.shields.io/badge/license-MIT-green)
@ -16,17 +18,13 @@ Demo (storybook): <https://mastermindzh.github.io/react-cookie-consent/>
<!-- toc --> <!-- toc -->
- [:cookie: react-cookie-consent :cookie:](#cookie-react-cookie-consent-cookie) - [Installation](#installation)
- [Default look](#default-look) - [Using it](#using-it)
- [Table of contents](#table-of-contents)
- [Installation](#installation)
- [Using it](#using-it)
- [getting the cookies value in your own code](#getting-the-cookies-value-in-your-own-code) - [getting the cookies value in your own code](#getting-the-cookies-value-in-your-own-code)
- [reset the cookies value in your own code](#reset-the-cookies-value-in-your-own-code) - [Props](#props)
- [Props](#props) - [Debugging it](#debugging-it)
- [Debugging it](#debugging-it) - [Why are there two cookies? One of which named "Legacy"](#why-are-there-two-cookies-one-of-which-named-legacy)
- [Why are there two cookies? One of which named "Legacy"](#why-are-there-two-cookies-one-of-which-named-legacy) - [Styling it](#styling-it)
- [Styling it](#styling-it)
- [Examples](#examples) - [Examples](#examples)
- [Changing the bar background to red](#changing-the-bar-background-to-red) - [Changing the bar background to red](#changing-the-bar-background-to-red)
- [Changing the button font-weight to bold](#changing-the-button-font-weight-to-bold) - [Changing the button font-weight to bold](#changing-the-button-font-weight-to-bold)
@ -34,10 +32,10 @@ Demo (storybook): <https://mastermindzh.github.io/react-cookie-consent/>
- [Accept on scroll](#accept-on-scroll) - [Accept on scroll](#accept-on-scroll)
- [Flipping the buttons](#flipping-the-buttons) - [Flipping the buttons](#flipping-the-buttons)
- [Extra cookie options](#extra-cookie-options) - [Extra cookie options](#extra-cookie-options)
- [Rainbows](#rainbows) - [Rainbows!](#rainbows)
- [Overlay](#overlay) - [Overlay](#overlay)
- [Contributor information](#contributor-information) - [Contributor information](#contributor-information)
- [Projects using react-cookie-consent](#projects-using-react-cookie-consent) - [Projects using react-cookie-consent](#projects-using-react-cookie-consent)
<!-- tocstop --> <!-- tocstop -->
@ -117,12 +115,12 @@ If the decline button is enabled then the (onDecline) prop function can be used,
### getting the cookies value in your own code ### getting the cookies value in your own code
react-cookie-consent exports a function called `getCookieConsentValue(cookieName: string)`. You can use it in your own code like so: react-cookie-consent exports a function called `getCookieConsentValue`. You can use it in your own code like so:
```js ```js
import CookieConsent, { Cookies, getCookieConsentValue } from "react-cookie-consent"; import CookieConsent, { Cookies, getCookieConsentValue } from "react-cookie-consent";
console.log(getCookieConsentValue("your_custom_cookie_name")); console.log(getCookieConsentValue());
``` ```
### reset the cookies value in your own code ### reset the cookies value in your own code
@ -148,7 +146,7 @@ That option would be interesting if you want to allow user to change their conse
| hideOnAccept | boolean | true | If disabled the component will not hide it self after the accept button has been clicked. You will need to hide yourself (see onAccept) | | hideOnAccept | boolean | true | If disabled the component will not hide it self after the accept button has been clicked. You will need to hide yourself (see onAccept) |
| buttonText | string or React component | "I understand" | Text to appear on the button | | buttonText | string or React component | "I understand" | Text to appear on the button |
| declineButtonText | string or React component | "I decline" | Text to appear on the decline button | | declineButtonText | string or React component | "I decline" | Text to appear on the decline button |
| cookieName | string | "CookieConsent" | Name of the cookie used to track whether the user has agreed. Note that you also have to pass this to the `getCookieConsentValue` and `resetCookieConsentValue` functions as they default to "CookieConsent" as well. | | cookieName | string | "CookieConsent" | Name of the cookie used to track whether the user has agreed. |
| cookieValue | string or boolean or number | true | Value to be saved under the cookieName. | | cookieValue | string or boolean or number | true | Value to be saved under the cookieName. |
| declineCookieValue | string or boolean or number | false | Value to be saved under the cookieName when declined. | | declineCookieValue | string or boolean or number | false | Value to be saved under the cookieName when declined. |
| setDeclineCookie | boolean | true | Whether to set a cookie when the user clicks "decline" | | setDeclineCookie | boolean | true | Whether to set a cookie when the user clicks "decline" |
@ -300,7 +298,7 @@ You can add more cookie options using the extraCookieOptions parameter like so:
<CookieConsent extraCookieOptions={{ domain: "myexample.com" }}>cookie bar</CookieConsent> <CookieConsent extraCookieOptions={{ domain: "myexample.com" }}>cookie bar</CookieConsent>
``` ```
#### Rainbows #### Rainbows!
![rainbows!](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/rainbow.png?raw=true) ![rainbows!](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/rainbow.png?raw=true)

6085
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{ {
"name": "react-cookie-consent", "name": "react-cookie-consent",
"version": "9.0.0", "version": "8.0.1",
"description": "A small, simple and customizable cookie consent bar for use in React applications.", "description": "A small, simple and customizable cookie consent bar for use in React applications.",
"keywords": [ "keywords": [
"react", "react",
@ -32,7 +32,6 @@
"analyze": "size-limit --why", "analyze": "size-limit --why",
"build": "tsdx build", "build": "tsdx build",
"build-storybook": "build-storybook", "build-storybook": "build-storybook",
"install-husky": "npx husky install",
"lint": "tsdx lint", "lint": "tsdx lint",
"major": "npm --no-git-tag-version version major", "major": "npm --no-git-tag-version version major",
"minor": "npm --no-git-tag-version version minor", "minor": "npm --no-git-tag-version version minor",
@ -40,11 +39,8 @@
"patch": "npm --no-git-tag-version version patch", "patch": "npm --no-git-tag-version version patch",
"prepare": "tsdx build", "prepare": "tsdx build",
"prettier": "prettier 'src/**/*.{js*,ts*,htm*,md,scss}' --write", "prettier": "prettier 'src/**/*.{js*,ts*,htm*,md,scss}' --write",
"install-husky": "npx husky install",
"publish": "npx np", "publish": "npx np",
"release": "npm run build && git add -A && git tag $npm_package_version && git commit -m \"release $npm_package_version\" && git push && git push --tags && npm publish",
"release-major": "npm run major && npm run release",
"release-minor": "npm run minor && npm run release",
"release-patch": "npm run patch && npm run release",
"size": "size-limit", "size": "size-limit",
"start": "tsdx watch", "start": "tsdx watch",
"storybook": "start-storybook -p 6006", "storybook": "start-storybook -p 6006",
@ -73,7 +69,6 @@
"@types/react": "^18.0.15", "@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6", "@types/react-dom": "^18.0.6",
"babel-loader": "^8.2.5", "babel-loader": "^8.2.5",
"gh-pages": "^4.0.0",
"husky": "^8.0.1", "husky": "^8.0.1",
"prettier": "^2.6.2", "prettier": "^2.6.2",
"react": "^18.2.0", "react": "^18.2.0",

View File

@ -8,54 +8,54 @@ import {
export interface CookieConsentProps { export interface CookieConsentProps {
children?: ReactNode; children?: ReactNode;
style?: React.CSSProperties; style: React.CSSProperties;
buttonStyle?: React.CSSProperties; buttonStyle: React.CSSProperties;
declineButtonStyle?: React.CSSProperties; declineButtonStyle: React.CSSProperties;
contentStyle?: React.CSSProperties; contentStyle: React.CSSProperties;
disableStyles?: boolean; disableStyles: boolean;
hideOnAccept?: boolean; hideOnAccept: boolean;
hideOnDecline?: boolean; hideOnDecline: boolean;
onAccept?: (acceptedByScrolling: boolean) => void; onAccept: (acceptedByScrolling: boolean) => void;
onDecline?: () => void; onDecline: () => void;
buttonText?: string | ReactNode | Function; buttonText: string | ReactNode | Function;
declineButtonText?: string | ReactNode | Function; declineButtonText: string | ReactNode | Function;
cookieName?: string; cookieName: string;
cookieValue?: string | object; cookieValue: string | object;
declineCookieValue?: string | object; declineCookieValue: string | object;
setDeclineCookie?: boolean; setDeclineCookie: boolean;
debug?: boolean; debug: boolean;
expires?: number; expires: number;
containerClasses?: string; containerClasses: string;
contentClasses?: string; contentClasses: string;
buttonClasses?: string; buttonClasses: string;
buttonWrapperClasses?: string; buttonWrapperClasses: string;
declineButtonClasses?: string; declineButtonClasses: string;
buttonId?: string; buttonId: string;
declineButtonId?: string; declineButtonId: string;
overlayClasses?: string; overlayClasses: string;
ariaAcceptLabel?: string; ariaAcceptLabel: string;
ariaDeclineLabel?: string; ariaDeclineLabel: string;
disableButtonStyles?: boolean; disableButtonStyles: boolean;
enableDeclineButton?: boolean; enableDeclineButton: boolean;
flipButtons?: boolean; flipButtons: boolean;
cookieSecurity?: boolean; cookieSecurity?: boolean;
overlay?: boolean; overlay: boolean;
acceptOnOverlayClick?: boolean; acceptOnOverlayClick: boolean;
acceptOnScroll?: boolean; acceptOnScroll: boolean;
acceptOnScrollPercentage?: number; acceptOnScrollPercentage: number;
ButtonComponent?: any; ButtonComponent: any;
extraCookieOptions?: Object; extraCookieOptions: Object;
overlayStyle?: Object; overlayStyle: Object;
customContentAttributes?: Object; customContentAttributes: Object;
customContainerAttributes?: Object; customContainerAttributes: Object;
customButtonProps?: Object; customButtonProps: Object;
customDeclineButtonProps?: Object; customDeclineButtonProps: Object;
customButtonWrapperAttributes?: Object; customButtonWrapperAttributes: Object;
onOverlayClick?: () => void; onOverlayClick: () => void;
// these should be enums // these should be enums
location?: string; location: string;
visible?: string; visible: string;
sameSite?: "strict" | "Strict" | "lax" | "Lax" | "none" | "None"; sameSite: "strict" | "Strict" | "lax" | "Lax" | "none" | "None" | undefined;
} }
const DefaultButtonComponent: FunctionComponent<{ children: ReactNode; [x: string]: any }> = ({ const DefaultButtonComponent: FunctionComponent<{ children: ReactNode; [x: string]: any }> = ({
@ -65,13 +65,13 @@ const DefaultButtonComponent: FunctionComponent<{ children: ReactNode; [x: strin
return <button {...props}>{children}</button>; return <button {...props}>{children}</button>;
}; };
export const defaultCookieConsentProps = { export const defaultCookieConsentProps: CookieConsentProps = {
disableStyles: false, disableStyles: false,
hideOnAccept: true, hideOnAccept: true,
hideOnDecline: true, hideOnDecline: true,
location: POSITION_OPTIONS.BOTTOM, location: POSITION_OPTIONS.BOTTOM,
visible: VISIBILITY_OPTIONS.BY_COOKIE_VALUE, visible: VISIBILITY_OPTIONS.BY_COOKIE_VALUE,
onAccept: (_acceptedByScrolling: boolean) => {}, onAccept: (_acceptedByScrolling) => {},
onDecline: () => {}, onDecline: () => {},
cookieName: defaultCookieConsentName, cookieName: defaultCookieConsentName,
cookieValue: "true", cookieValue: "true",

View File

@ -33,10 +33,7 @@ export class CookieConsent extends Component<CookieConsentProps, CookieConsentSt
* Set a persistent accept cookie * Set a persistent accept cookie
*/ */
accept(acceptedByScrolling = false) { accept(acceptedByScrolling = false) {
const { cookieName, cookieValue, hideOnAccept, onAccept } = { const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props;
...defaultCookieConsentProps,
...this.props,
};
this.setCookie(cookieName, cookieValue); this.setCookie(cookieName, cookieValue);
@ -52,10 +49,7 @@ export class CookieConsent extends Component<CookieConsentProps, CookieConsentSt
* Handle a click on the overlay * Handle a click on the overlay
*/ */
overlayClick() { overlayClick() {
const { acceptOnOverlayClick, onOverlayClick } = { const { acceptOnOverlayClick, onOverlayClick } = this.props;
...defaultCookieConsentProps,
...this.props,
};
if (acceptOnOverlayClick) { if (acceptOnOverlayClick) {
this.accept(); this.accept();
} }
@ -66,10 +60,8 @@ export class CookieConsent extends Component<CookieConsentProps, CookieConsentSt
* Set a persistent decline cookie * Set a persistent decline cookie
*/ */
decline() { decline() {
const { cookieName, declineCookieValue, hideOnDecline, onDecline, setDeclineCookie } = { const { cookieName, declineCookieValue, hideOnDecline, onDecline, setDeclineCookie } =
...defaultCookieConsentProps, this.props;
...this.props,
};
if (setDeclineCookie) { if (setDeclineCookie) {
this.setCookie(cookieName, declineCookieValue); this.setCookie(cookieName, declineCookieValue);
@ -121,7 +113,7 @@ export class CookieConsent extends Component<CookieConsentProps, CookieConsentSt
* checks whether scroll has exceeded set amount and fire accept if so. * checks whether scroll has exceeded set amount and fire accept if so.
*/ */
handleScroll = () => { handleScroll = () => {
const { acceptOnScrollPercentage } = { ...defaultCookieConsentProps, ...this.props }; const { acceptOnScrollPercentage } = this.props;
// (top / height) - height * 100 // (top / height) - height * 100
const rootNode = document.documentElement; const rootNode = document.documentElement;

View File

@ -1,7 +1,7 @@
import { FunctionComponent, ReactNode } from "react"; import { FunctionComponent, ReactNode } from "react";
type Props = { type Props = {
condition?: boolean; condition: boolean;
wrapper: (_: ReactNode) => any; wrapper: (_: ReactNode) => any;
children: ReactNode; children: ReactNode;
}; };