release 9.0.0

Bumps [json5](https://github.com/json5/json5) from 1.0.1 to 1.0.2.
- [Release notes](https://github.com/json5/json5/releases)
- [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md)
- [Commits](https://github.com/json5/json5/compare/v1.0.1...v1.0.2)

---
updated-dependencies:
- dependency-name: json5
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/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: 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

.github/workflows/gh-pages.yml

@@ -0,0 +1,20 @@
+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

.github/workflows/main.yml

@@ -7,8 +7,8 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: ['10.x', '12.x', '14.x']
-        os: [ubuntu-latest, windows-latest, macOS-latest]
+        node: ["10.x", "12.x", "14.x"]
+        os: [ubuntu-latest, macOS-latest]
 
     steps:
       - name: Checkout repo

.storybook/main.js

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

.vscode/settings.json

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

CHANGELOG.md

@@ -5,12 +5,23 @@ 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).
 
+## [[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)]
+
+~~Second try of [np](https://github.com/sindresorhus/np)...~~
+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)]
 
 - Switched to tsdx and Typescript
 - 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
 

README.md

@@ -4,9 +4,7 @@ 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)
 
-Demo: https://mastermindzh.github.io/react-cookie-consent/
-
-Example branch: https://github.com/Mastermindzh/react-cookie-consent/tree/example
+Demo (storybook): <https://mastermindzh.github.io/react-cookie-consent/>
 
 ![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)
 
@@ -18,24 +16,28 @@ Example branch: https://github.com/Mastermindzh/react-cookie-consent/tree/exampl
 
 <!-- toc -->
 
-- [Installation](#installation)
-- [Using it](#using-it)
-  - [getting the cookies value in your own code](#getting-the-cookies-value-in-your-own-code)
-- [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)
-- [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)
-    - [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)
-    - [Overlay](#overlay)
-- [Contributor information](#contributor-information)
-- [Projects using react-cookie-consent](#projects-using-react-cookie-consent)
+- [:cookie: react-cookie-consent :cookie:](#cookie-react-cookie-consent-cookie)
+  - [Default look](#default-look)
+  - [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)
+    - [reset the cookies value in your own code](#reset-the-cookies-value-in-your-own-code)
+  - [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)
+  - [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)
+      - [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)
+      - [Overlay](#overlay)
+  - [Contributor information](#contributor-information)
+  - [Projects using react-cookie-consent](#projects-using-react-cookie-consent)
 
 <!-- tocstop -->
 
@@ -115,12 +117,12 @@ If the decline button is enabled then the (onDecline) prop function can be used,
 
 ### 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:
+react-cookie-consent exports a function called `getCookieConsentValue(cookieName: string)`. You can use it in your own code like so:
 
 ```js
 import CookieConsent, { Cookies, getCookieConsentValue } from "react-cookie-consent";
 
-console.log(getCookieConsentValue());
+console.log(getCookieConsentValue("your_custom_cookie_name"));
 ```
 
 ### reset the cookies value in your own code
@@ -146,7 +148,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) |
 | 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.                                                                           |
+| 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.                                                                         |
 | 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"                                                                                  |
@@ -298,7 +300,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)
 

package.json

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

src/CookieConsent.props.tsx

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

src/CookieConsent.tsx

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

src/components/ConditionalWrapper.tsx

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