Fixed the return type of getCookieConsentValue in the dts file.

Co-authored-by: Ubuntu <ubuntu@ip-172-31-14-150.eu-north-1.compute.internal>

.babelrc

@@ -1,8 +1,8 @@
 {
-    "presets": ["env"],
+    "presets": ["@babel/preset-env"],
     "plugins": [
-      "transform-object-rest-spread",
-      "transform-react-jsx",
-      "transform-object-assign"
+      "@babel/plugin-proposal-object-rest-spread",
+      "@babel/plugin-transform-react-jsx",
+      "@babel/plugin-transform-object-assign"
     ]
   }

.gitignore

@@ -1,2 +1,2 @@
 node_modules
-package-lock.json
+build/index.js.LICENSE.txt

CHANGELOG.md

@@ -5,7 +5,42 @@ 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/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [5.1.3]
+## [[6.2.2](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.2)]
+
+- Fixed the return type of getCookieConsentValue in the dts file.
+
+## [[6.2.1](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.1)]
+
+Added the `getCookieConsentValue` to the dts file.
+
+## [[6.2.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.0)]
+
+Added the exported function `getCookieConsentValue` to get the cookie value from custom code
+
+## [[6.1.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.1.0)]
+
+Added support for React 17
+
+## [[6.0.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.0.0)]
+
+### removed
+
+Accepting by scrolling is no longer allowed and has thus been removed from the package.
+For details see [issue 88](https://github.com/Mastermindzh/react-cookie-consent/issues/88)
+
+## [[5.2.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/5.2.0)]
+
+### added
+
+Added aria labels for both the decline and accept button
+
+## [[5.1.4](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/5.1.4)]
+
+### changed
+
+- set default SameSite attribute to "lax" because browsers are already implementing the cookie policy changes.
+
+## [[5.1.3](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/5.1.3)]
 
 ### changed
 

CONTRIBUTING.md

@@ -0,0 +1,152 @@
+# Contributing
+
+When contributing to this repository, please first discuss the change you wish to make via issue,
+email, or any other method with the owners of this repository before making a changes in order to avoid wasting your time.
+
+## scope
+
+Please keep the scope of a PR down to a single change.
+You can make multiple prs to change multiple things though.
+
+## builds
+
+Don't modify anything in the build/ directory please.
+This will be done on release.
+
+## Pull Request Process
+
+1. Code away :D
+2. Update the README.md with details of changes to the interface, this includes new environment
+   variables, exposed ports, useful file locations and container parameters.
+   _Please don't change the format of the variable table in the README_
+3. Add the section "[next]" to the CHANGELOG.md and describe what you changed and why.
+4. Create the PR. yay.
+
+## Contributor Covenant Code of Conduct
+
+### Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+### Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+### Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+### Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+### Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+[info@rickvanlieshout.com](mailto:info@rickvanlieshout.com).
+All complaints will be reviewed and investigated fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+### Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+#### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+#### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+#### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+#### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+### Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

README.md

@@ -22,17 +22,16 @@ Example branch: https://github.com/Mastermindzh/react-cookie-consent/tree/exampl
 - [Using it](#using-it)
 - [Props](#props)
 - [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)
   - [Examples](#examples)
-    - [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 bar background to red](#changing-the-bar-background-to-red)
+    - [Changing the button font-weight to bold](#changing-the-button-font-weight-to-bold)
     - [Using predefined CSS classes](#using-predefined-css-classes)
-    - [Accept on scroll](#accept-on-scroll)
     - [Flipping the buttons](#flipping-the-buttons)
     - [Extra cookie options](#extra-cookie-options)
-    - [rainbows!](#rainbows)
-- [contributor information](#contributor-information)
+    - [Rainbows!](#rainbows)
+- [Contributor information](#contributor-information)
 - [Projects using react-cookie-consent](#projects-using-react-cookie-consent)
 
 <!-- tocstop -->
@@ -85,18 +84,12 @@ You can optionally set some props like this (next chapter will show all props):
 </CookieConsent>
 ```
 
-One of the props (onAccept) is a function, this function will be called after the user has clicked the accept button. It is called with an object containing a boolean property `acceptedByScrolling` to indicate if the acceptance was triggered by the user scrolling. You can provide a function like so:
+One of the props (onAccept) is a function, this function will be called after the user has clicked the accept button. You can provide a function like so:
 
 ```js
 <CookieConsent
-  acceptOnScroll={true}
-  onAccept={({ acceptedByScrolling }) => {
-    if (acceptedByScrolling) {
-      // triggered if user scrolls past threshold
-      alert("Accept was triggered by user scrolling");
-    } else {
+  onAccept={() => {
     alert("Accept was triggered by clicking the Accept button");
-    }
   }}
 ></CookieConsent>
 ```
@@ -112,23 +105,31 @@ If the decline button is enabled then the (onDecline) prop function can be used,
 ></CookieConsent>
 ```
 
+### getting the cookies value in your own code
+
+react-cookie-consent exports a function called `getCookieConsentValue`. You can use it in your own code like so:
+
+```js
+import CookieConsent, { Cookies, getCookieConsentValue } from "react-cookie-consent";
+
+console.log(getCookieConsentValue());
+```
+
 ## Props
 
 | Prop                 |               Type                | Default value                        | Description                                                                                                                             |
-| ------------------------ | :-------------------------------: | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
+| -------------------- | :-------------------------------: | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
 | location             | string, "top", "bottom" or "none" | "bottom"                             | Syntactic sugar to easily enable you to place the bar at the top or the bottom of the browser window. Use "none" to disable.            |
 | children             |     string or React component     |                                      | Content to appear inside the bar                                                                                                        |
 | disableStyles        |              boolean              | false                                | If enabled the component will have no default style. (you can still supply style through props)                                         |
 | 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) |
-| acceptOnScroll           |              boolean              | false                                | Defines whether "accept" should be fired after the user scrolls a certain distance (see acceptOnScrollPercentage)                       |
-| acceptOnScrollPercentage |              number               | 25                                   | Percentage of the page height the user has to scroll to trigger the accept function if acceptOnScroll is enabled                        |
 | 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                                                                                                    |
 | 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.                                                                                                 |
 | 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"                                                                                  |
-| onAccept                 |             function              | `({ acceptedByScrolling }) => {}`    | Function to be called after the accept button has been clicked.                                                                         |
+| onAccept             |             function              | `() => {}`                           | Function to be called after the accept button has been clicked.                                                                         |
 | onDecline            |             function              | `() => {}`                           | Function to be called after the decline button has been clicked.                                                                        |
 | debug                |              boolean              | undefined                            | Bar will be drawn regardless of cookie for debugging purposes.                                                                          |
 | expires              |              number               | 365                                  | Number of days before the cookie expires.                                                                                               |
@@ -153,6 +154,8 @@ If the decline button is enabled then the (onDecline) prop function can be used,
 | ButtonComponent      |          React component          | button                               | React Component to render as a button.                                                                                                  |
 | sameSite             | string, "strict", "lax" or "none" | none                                 | Cookies sameSite attribute value                                                                                                        |
 | cookieSecurity       |              boolean              | undefined                            | Cookie security level. Defaults to true unless running on http.                                                                         |
+| ariaAcceptLabel      |              string               | Accept cookies                       | Aria label to set on the accept button                                                                                                  |
+| ariaDeclineLabel     |              string               | Decline cookies                      | Aria label to set on the decline button                                                                                                 |
 
 ## Debugging it
 
@@ -180,7 +183,6 @@ When checking the cookie it'll do it in reverse. If the regular cookie exists, i
 
 The long story can be found here: [pull-request#68](https://github.com/Mastermindzh/react-cookie-consent/pull/68)
 
-
 ## Styling it
 
 You can provide styling for the bar, the button and the content. Note that the bar has a `display: flex` property as default and is parent to its children "content" and "button".
@@ -194,13 +196,13 @@ You can use `disableStyles={true}` to disable any built-in styling.
 
 ### Examples
 
-#### changing the bar background to red
+#### Changing the bar background to red
 
 ```js
 <CookieConsent style={{ background: "red" }}></CookieConsent>
 ```
 
-#### changing the button font-weight to bold
+#### Changing the button font-weight to bold
 
 ```js
 <CookieConsent buttonStyle={{ fontWeight: "bold" }}></CookieConsent>
@@ -227,22 +229,6 @@ Which results in:
 
 ![bootstrap styling](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/css_classes.png?raw=true)
 
-#### Accept on scroll
-
-You can make the cookiebar disappear after scrolling a certain percentage using acceptOnScroll and acceptOnScrollPercentage.
-
-```js
-<CookieConsent
-  acceptOnScroll={true}
-  acceptOnScrollPercentage={50}
-  onAccept={() => {
-    alert("consent given");
-  }}
->
-  Hello scroller :)
-</CookieConsent>
-```
-
 #### Flipping the buttons
 
 If you enable the decline button you can pass along the "flipButtons" property to turn the buttons around:
@@ -265,7 +251,7 @@ You can add more cookie options using the extraCookieOptions parameter like so:
 <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)
 
@@ -311,7 +297,7 @@ You can also generate a page-obfuscating overlay that will prevent actions other
 [contentstyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L52-L55
 [overlaystyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L62-L69
 
-## contributor information
+## Contributor information
 
 When making a PR please think about the following things:
 

build/index.d.ts

@@ -12,7 +12,7 @@ export interface CookieConsentProps {
   children?: React.ReactNode;
   disableStyles?: boolean;
   hideOnAccept?: boolean;
-  onAccept?: ({ acceptedByScrolling }: { acceptedByScrolling?: boolean }) => void;
+  onAccept?: Function;
   onDecline?: Function;
   buttonText?: Function | React.ReactNode;
   declineButtonText?: Function | React.ReactNode;
@@ -24,12 +24,11 @@ export interface CookieConsentProps {
   expires?: number;
   containerClasses?: string;
   contentClasses?: string;
+  buttonWrapperClasses?: string;
   buttonClasses?: string;
   declineButtonClasses?: string;
   buttonId?: string;
   declineButtonId?: string;
-  acceptOnScroll?: boolean;
-  acceptOnScrollPercentage?: number;
   extraCookieOptions?: object;
   disableButtonStyles?: boolean;
   enableDeclineButton?: boolean;
@@ -38,8 +37,18 @@ export interface CookieConsentProps {
   overlay?: boolean;
   overlayClasses?: string;
   overlayStyle?: object;
+  ariaAcceptLabel?: string;
+  ariaDeclineLabel?: string;
 }
 
 export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
 
+/**
+ * Returns the value of the consent cookie
+ * Retrieves the regular value first and if not found the legacy one according
+ * to: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
+ * @param {*} name optional name of the cookie
+ */
+export function getCookieConsentValue(name?: string);
+
 export { Cookies };

package.json

@@ -4,15 +4,16 @@
     "name": "Rick van Lieshout",
     "email": "info@rickvanlieshout.com"
   },
-  "version": "5.1.2",
+  "version": "6.2.1",
   "description": "A small, simple and customizable cookie consent bar for use in React applications.",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "dependencies": {
-    "js-cookie": "^2.2.1"
+    "js-cookie": "^2.2.1",
+    "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "^16.13.1"
+    "react": "^16.13.1 || ^17.0.0"
   },
   "scripts": {
     "build": "webpack",
@@ -20,7 +21,8 @@
     "patch": "npm --no-git-tag-version version patch",
     "minor": "npm --no-git-tag-version version minor",
     "major": "npm --no-git-tag-version version major",
-    "release": "npm run build && git add -A && git commit -m 'version bump and build' && git push && npm publish",
+    "preversion": "grep \"\\[$npm_package_version\\]\" CHANGELOG.md > /dev/null || ( echo 'You need to add an entry in CHANGELOG.md for this version.' && false )",
+    "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-patch": "npm run patch && npm run release",
     "release-minor": "npm run minor && npm run release",
     "release-major": "npm run major && npm run release"
@@ -41,28 +43,27 @@
   },
   "homepage": "https://github.com/Mastermindzh/react-cookie-consent#readme",
   "devDependencies": {
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.12.3",
+    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+    "@babel/plugin-transform-object-assign": "^7.12.1",
+    "@babel/plugin-transform-react-jsx": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
     "@mastermindzh/prettier-config": "^1.0.0",
     "@types/js-cookie": "^2.2.6",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-transform-object-assign": "^6.22.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-stage-1": "^6.24.1",
-    "copy-webpack-plugin": "^4.6.0",
-    "husky": "^4.2.5",
-    "lint-staged": "^10.2.10",
-    "prettier": "^2.0.5",
+    "babel-loader": "^8.1.0",
+    "copy-webpack-plugin": "^6.2.1",
+    "husky": "^4.3.0",
+    "lint-staged": "^10.5.1",
+    "prettier": "^2.1.2",
     "react": "^16.13.1",
-    "webpack": "^2.6.1"
+    "webpack": "^5.3.2",
+    "webpack-cli": "^4.1.0"
   },
   "prettier": "@mastermindzh/prettier-config",
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+      "pre-commit": "lint-staged --allow-empty"
     }
   },
   "lint-staged": {

src/index.d.ts

@@ -12,7 +12,7 @@ export interface CookieConsentProps {
   children?: React.ReactNode;
   disableStyles?: boolean;
   hideOnAccept?: boolean;
-  onAccept?: ({ acceptedByScrolling }: { acceptedByScrolling?: boolean }) => void;
+  onAccept?: Function;
   onDecline?: Function;
   buttonText?: Function | React.ReactNode;
   declineButtonText?: Function | React.ReactNode;
@@ -24,23 +24,31 @@ export interface CookieConsentProps {
   expires?: number;
   containerClasses?: string;
   contentClasses?: string;
-  buttonWrapperClasses?: string,
+  buttonWrapperClasses?: string;
   buttonClasses?: string;
   declineButtonClasses?: string;
   buttonId?: string;
   declineButtonId?: string;
-  acceptOnScroll?: boolean;
-  acceptOnScrollPercentage?: number;
   extraCookieOptions?: object;
   disableButtonStyles?: boolean;
   enableDeclineButton?: boolean;
   flipButtons?: boolean;
   ButtonComponent?: React.ElementType;
-  overlay?: boolean,
-  overlayClasses?: string,
-  overlayStyle?: object,
+  overlay?: boolean;
+  overlayClasses?: string;
+  overlayStyle?: object;
+  ariaAcceptLabel?: string;
+  ariaDeclineLabel?: string;
 }
 
 export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
 
+/**
+ * Returns the value of the consent cookie
+ * Retrieves the regular value first and if not found the legacy one according
+ * to: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
+ * @param {*} name optional name of the cookie
+ */
+export function getCookieConsentValue(name?: string): string;
+
 export { Cookies };

src/index.js

@@ -14,6 +14,35 @@ export const SAME_SITE_OPTIONS = {
   NONE: "none",
 };
 
+/**
+ * Returns the value of the consent cookie
+ * Retrieves the regular value first and if not found the legacy one according
+ * to: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
+ * @param {*} name optional name of the cookie
+ */
+export const getCookieConsentValue = (name = defaultCookieConsentName) => {
+  let cookieValue = Cookies.get(name);
+
+  // if the cookieValue is undefined check for the legacy cookie
+  if (cookieValue === undefined) {
+    cookieValue = Cookies.get(getLegacyCookieName(name));
+  }
+  return cookieValue;
+};
+
+/**
+ * Get the legacy cookie name by the regular cookie name
+ * @param {string} name of cookie to get
+ */
+const getLegacyCookieName = (name) => {
+  return `${name}-legacy`;
+};
+
+/**
+ * Default name of the cookie which is set by CookieConsent
+ */
+const defaultCookieConsentName = "CookieConsent";
+
 /**
  * A function to wrap elements with a "wrapper" on a condition
  * @param {object} wrappingOptions
@@ -28,7 +57,6 @@ const ConditionalWrapper = ({ condition, wrapper, children }) => {
 class CookieConsent extends Component {
   constructor(props) {
     super(props);
-    this.accept.bind(this);
 
     this.state = {
       visible: false,
@@ -80,8 +108,6 @@ class CookieConsent extends Component {
         backgroundColor: "rgba(0,0,0,0.3)",
       },
     };
-
-    this.handleScroll = this.handleScroll.bind(this);
   }
 
   componentDidMount() {
@@ -90,52 +116,18 @@ class CookieConsent extends Component {
     // if cookie undefined or debug
     if (this.getCookieValue() === undefined || debug) {
       this.setState({ visible: true });
-
-      // if acceptOnScroll is set to true and (cookie is undefined or debug is set to true), add a listener.
-      if (this.props.acceptOnScroll) {
-        window.addEventListener("scroll", this.handleScroll, { passive: true });
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    // remove listener if still set
-    window.removeEventListener("scroll", this.handleScroll);
-  }
-
-  /**
-   * checks whether scroll has exceeded set amount and fire accept if so.
-   */
-  handleScroll() {
-    // (top / height) - height * 100
-    let rootNode = document.documentElement,
-      body = document.body,
-      top = "scrollTop",
-      height = "scrollHeight";
-
-    let percentage =
-      ((rootNode[top] || body[top]) /
-        ((rootNode[height] || body[height]) - rootNode.clientHeight)) *
-      100;
-
-    if (percentage > this.props.acceptOnScrollPercentage) {
-      this.accept({ acceptedByScrolling: true });
     }
   }
 
   /**
    * Set a persistent accept cookie
    */
-  accept({ acceptedByScrolling = false }) {
+  accept() {
     const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props;
 
     this.setCookie(cookieName, cookieValue);
 
-    // fire onAccept
-    onAccept({ acceptedByScrolling });
-
-    // remove listener if set
-    window.removeEventListener("scroll", this.handleScroll);
+    onAccept();
 
     if (hideOnAccept) {
       this.setState({ visible: false });
@@ -149,10 +141,8 @@ class CookieConsent extends Component {
     const {
       cookieName,
       declineCookieValue,
-      expires,
       hideOnDecline,
       onDecline,
-      extraCookieOptions,
       setDeclineCookie,
     } = this.props;
 
@@ -160,25 +150,13 @@ class CookieConsent extends Component {
       this.setCookie(cookieName, declineCookieValue);
     }
 
-    // fire onDecline
     onDecline();
 
-    // remove listener if set
-    window.removeEventListener("scroll", this.handleScroll);
-
     if (hideOnDecline) {
       this.setState({ visible: false });
     }
   }
 
-  /**
-   * Get the legacy cookie name by the regular cookie name
-   * @param {string} name of cookie to get
-   */
-  getLegacyCookieName(name) {
-    return `${name}-legacy`;
-  }
-
   /**
    * Function to set the consent cookie based on the provided variables
    * Sets two cookies to handle incompatible browsers, more details:
@@ -196,7 +174,7 @@ class CookieConsent extends Component {
 
     // Fallback for older browsers where can not set SameSite=None, SEE: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
     if (sameSite === SAME_SITE_OPTIONS.NONE) {
-      Cookies.set(this.getLegacyCookieName(cookieName), cookieValue, cookieOptions);
+      Cookies.set(getLegacyCookieName(cookieName), cookieValue, cookieOptions);
     }
 
     // set the regular cookie
@@ -210,14 +188,7 @@ class CookieConsent extends Component {
    */
   getCookieValue() {
     const { cookieName } = this.props;
-
-    let cookieValue = Cookies.get(cookieName);
-
-    // if the cookieValue is undefined check for the legacy cookie
-    if (cookieValue === undefined) {
-      cookieValue = Cookies.get(this.getLegacyCookieName(cookieName));
-    }
-    return cookieValue;
+    return getCookieConsentValue(cookieName);
   }
 
   render() {
@@ -249,6 +220,8 @@ class CookieConsent extends Component {
       overlay,
       overlayClasses,
       overlayStyle,
+      ariaAcceptLabel,
+      ariaDeclineLabel,
     } = this.props;
 
     let myStyle = {};
@@ -304,6 +277,7 @@ class CookieConsent extends Component {
           style={myDeclineButtonStyle}
           className={declineButtonClasses}
           id={declineButtonId}
+          aria-label={ariaDeclineLabel}
           onClick={() => {
             this.decline();
           }}
@@ -319,8 +293,9 @@ class CookieConsent extends Component {
         style={myButtonStyle}
         className={buttonClasses}
         id={buttonId}
+        aria-label={ariaAcceptLabel}
         onClick={() => {
-          this.accept({ acceptedByScrolling: false });
+          this.accept();
         }}
       >
         {buttonText}
@@ -383,8 +358,6 @@ CookieConsent.propTypes = {
   declineButtonClasses: PropTypes.string,
   buttonId: PropTypes.string,
   declineButtonId: PropTypes.string,
-  acceptOnScroll: PropTypes.bool,
-  acceptOnScrollPercentage: PropTypes.number,
   extraCookieOptions: PropTypes.object,
   disableButtonStyles: PropTypes.bool,
   enableDeclineButton: PropTypes.bool,
@@ -394,18 +367,18 @@ CookieConsent.propTypes = {
   overlay: PropTypes.bool,
   overlayClasses: PropTypes.string,
   overlayStyle: PropTypes.object,
+  ariaAcceptLabel: PropTypes.string,
+  ariaDeclineLabel: PropTypes.string,
 };
 
 CookieConsent.defaultProps = {
   disableStyles: false,
   hideOnAccept: true,
   hideOnDecline: true,
-  acceptOnScroll: false,
-  acceptOnScrollPercentage: 25,
   location: OPTIONS.BOTTOM,
   onAccept: () => {},
   onDecline: () => {},
-  cookieName: "CookieConsent",
+  cookieName: defaultCookieConsentName,
   cookieValue: true,
   declineCookieValue: false,
   setDeclineCookie: true,
@@ -424,10 +397,12 @@ CookieConsent.defaultProps = {
   disableButtonStyles: false,
   enableDeclineButton: false,
   flipButtons: false,
-  sameSite: SAME_SITE_OPTIONS.NONE,
+  sameSite: SAME_SITE_OPTIONS.LAX,
   ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>,
   overlay: false,
   overlayClasses: "",
+  ariaAcceptLabel: "Accept cookies",
+  ariaDeclineLabel: "Decline cookies",
 };
 
 export default CookieConsent;

stale.yml

@@ -0,0 +1,17 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 30
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 2
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - good first issue
+  - security
+# Label to use when marking an issue as stale
+staleLabel: stale
+# 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

webpack.config.js

@@ -1,32 +1,30 @@
-var path = require('path');
-var CopyWebpackPlugin = require('copy-webpack-plugin');
+var path = require("path");
+var CopyWebpackPlugin = require("copy-webpack-plugin");
 
 module.exports = {
-  entry: './src/index.js',
+  entry: "./src/index.js",
   output: {
-    path: path.resolve(__dirname, 'build'),
-    filename: 'index.js',
-    libraryTarget: 'commonjs2' // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide.
+    path: path.resolve(__dirname, "build"),
+    filename: "index.js",
+    libraryTarget: "commonjs2", // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide.
   },
   module: {
     rules: [
       {
         test: /\.js$/,
-        include: path.resolve(__dirname, 'src'),
+        include: path.resolve(__dirname, "src"),
         exclude: /(node_modules|bower_components|build)/,
         use: {
-          loader: 'babel-loader',
+          loader: "babel-loader",
           options: {
-            presets: ['env']
-          }
-        }
-      }
-    ]
+            presets: ["@babel/preset-env"],
+          },
+        },
+      },
+    ],
   },
   externals: {
-    'react': 'commonjs react' // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
+    react: "commonjs react", // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
   },
-  plugins: [
-    new CopyWebpackPlugin([{ from: 'src/index.d.ts', to: 'index.d.ts' }])
-  ]
+  plugins: [new CopyWebpackPlugin({ patterns: [{ from: "src/index.d.ts", to: "index.d.ts" }] })],
 };