Merge pull request #2 from antistatique/feature/personalization

antistatique · Jul 19, 2023 · 61d864f · 61d864f
2 parents ec40fb2 + 9a22cfc
commit 61d864f
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.1.0] - 2023-07-19
+### Added
+- Add classes to override default banner style
+- Add cookie expires property and possiblity to override it
+
+### Changed
+- Ensure title, description and customise btn are optionnal elements
+- Ensure description can contains whitelisted HTML
+
 ## [1.0.7] - 2023-06-29
 ### Changed
 - Settings scrollbar

diff --git a/README.md b/README.md
@@ -73,6 +73,10 @@ It's the `name` of your cookie.
 
 It's the `domain` of your cookie, by default the current website (`window.location.hostname`).
 
+### expires
+
+It's the `expires` of your cookie, by default it is set for a month from the current day. It should be either a Date or a number.
+
 ### banner
 
 `banner` is an object with the text content to override. By default:
@@ -92,6 +96,31 @@ window.leckerliSettings = {
 }
 ```
 
+if the `title` or `description` are not provided, it won't be shown.
+
+The `description` can contain markup in a restricted way: only the following tags are allowed:
+
+```ts
+const allowedTags = [
+  'b',
+  'i',
+  'em',
+  'strong',
+  'p',
+  'ul',
+  'li',
+  'ol',
+  'span',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'a',
+  'div',
+]
+```
+
 ### permissions
 
 The core of Leckerli, it's all the `permissions` that you want to manage. By default:
@@ -110,6 +139,16 @@ window.leckerliSettings = {
 }
 ```
 
+if the `permissions` setting is set to an empty array, the "customize" button won't be shown.
+
+```ts
+window.leckerliSettings = {
+  //...
+  permissions: [],
+  //...
+}
+```
+
 ### baseData
 
 `baseData` is an object of any kind that **will be passed to the final cookie** as well. For example for store consent-id of some sort.
@@ -256,6 +295,18 @@ You can theme Leckerli with the following CSS custom properties (variables):
 </style>
 ```
 
+To override any other style, you can use the following classes:
+
+| Class                   | Description                         |
+| ----------------------- | ----------------------------------- |
+| `.banner-wrapper`       | Override the banner display style   |
+| `.banner-title`         | Override the title style            |
+| `.banner-description`   | Override the description style      |
+| `.banner-btns`          | Override the buttons display style  |
+| `.banner-btn-customise` | Override the customize button style |
+| `.banner-btn-accept`    | Override the accept button style    |
+| `.banner-btn-reject`    | Override the reject button style    |
+
 ## 🧑‍💻 Contribute
 
 To locally run the project:

diff --git a/dist/assets/leckerli.min.js b/dist/assets/leckerli.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antistatique/leckerli",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "Lightweight and customisable GDPR cookie consent manager",
   "private": false,
   "repository": "https://github.com/antistatique/leckerli",
@@ -19,13 +19,15 @@
   },
   "dependencies": {
     "@types/ramda": "^0.29.2",
+    "dompurify": "^3.0.5",
     "js-cookie": "^3.0.5",
     "preact": "^10.13.2",
     "ramda": "^0.29.0",
     "zustand": "^4.3.8"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.5.0",
+    "@types/dompurify": "^3.0.2",
     "@types/js-cookie": "^3.0.3",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",
@@ -54,4 +56,4 @@
     "typescript": "^5.1.5",
     "vite": "^4.3.9"
   }
-}
+}
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -1,36 +1,74 @@
+import DOMPurify from 'dompurify';
+import { isEmpty } from 'ramda';
+
 import useSettings from '../hooks/useSettings';
 
 const Banner = () => {
-  const { banner, acceptAll, rejectAll, setModal } = useSettings();
+  const { banner, acceptAll, rejectAll, setModal, permissions } = useSettings();
+
+  // Prevent the injection of unwanted HTML tags in the banner description
+  const allowedTags = [
+    'b',
+    'i',
+    'em',
+    'strong',
+    'p',
+    'ul',
+    'li',
+    'ol',
+    'span',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'a',
+    'div',
+  ];
+  const allowedAttributes = ['href', 'target'];
 
   return (
-    <div className="fixed bottom-0 left-0 max-w-md px-5 py-4 m-2 shadow-md shadow-black/25 z-[9998] bg-background space-y-4 font-primary text-foreground rounded-md">
-      <h3 className="m-0 text-lg font-semibold font-primary md:text-xl">
-        {banner.title}
-      </h3>
+    <div className="fixed bottom-0 left-0 max-w-md px-5 py-4 m-2 shadow-md shadow-black/25 z-[9998] bg-background space-y-4 font-primary text-foreground rounded-md banner-wrapper">
+      {banner.title && (
+        <h3 className="m-0 text-lg font-semibold font-primary md:text-xl banner-title">
+          {banner.title}
+        </h3>
+      )}
 
-      <p className="m-0 text-sm leading-snug font-primary md:text-base">
-        {banner.description}
-      </p>
+      {banner.description && (
+        <p
+          className="m-0 text-sm leading-snug font-primary md:text-base banner-description"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: DOMPurify.sanitize(banner.description, {
+              USE_PROFILES: { html: true },
+              ALLOWED_TAGS: allowedTags,
+              ALLOWED_ATTR: allowedAttributes,
+            }),
+          }}
+        />
+      )}
 
-      <div className="pt-2 space-y-2">
-        <button
-          type="button"
-          className="px-2 mr-2 text-sm font-semibold border-2 border-solid rounded bg-background font-primary text-primary md:px-3.5 py-1.5 md:py-2.5 border-primary hover:border-primary-hover hover:text-primary-hover active:border-primary-active active:text-primary-active transition-colors"
-          onClick={() => setModal(true)}
-        >
-          {banner.customise}
-        </button>
+      <div className="pt-2 space-y-2 banner-btns">
+        {!isEmpty(permissions) && (
+          <button
+            type="button"
+            className="px-2 mr-2 text-sm font-semibold border-2 border-solid rounded bg-background font-primary text-primary md:px-3.5 py-1.5 md:py-2.5 border-primary hover:border-primary-hover hover:text-primary-hover active:border-primary-active active:text-primary-active transition-colors banner-btn-customise"
+            onClick={() => setModal(true)}
+          >
+            {banner.customise}
+          </button>
+        )}
         <button
           type="button"
-          className="px-2 mr-2 text-sm font-semibold border-2 border-solid rounded bg-background font-primary text-primary md:px-3.5 py-1.5 md:py-2.5 border-primary hover:border-primary-hover hover:text-primary-hover active:border-primary-active active:text-primary-active transition-colors"
+          className="px-2 mr-2 text-sm font-semibold border-2 border-solid rounded bg-background font-primary text-primary md:px-3.5 py-1.5 md:py-2.5 border-primary hover:border-primary-hover hover:text-primary-hover active:border-primary-active active:text-primary-active transition-colors banner-btn-reject"
           onClick={rejectAll}
         >
           {banner.reject}
         </button>
         <button
           type="button"
-          className="px-2 mr-2 text-sm font-semibold border-2 border-solid rounded bg-primary font-primary text-background md:px-3.5 py-1.5 md:py-2.5 border-primary hover:bg-primary-hover hover:border-primary-hover active:bg-primary-active active:border-primary-active transition-colors"
+          className="px-2 mr-2 text-sm font-semibold border-2 border-solid rounded bg-primary font-primary text-background md:px-3.5 py-1.5 md:py-2.5 border-primary hover:bg-primary-hover hover:border-primary-hover active:bg-primary-active active:border-primary-active transition-colors banner-btn-accept"
           onClick={acceptAll}
         >
           {banner.accept}

diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts
@@ -27,13 +27,19 @@ const initialState = mergeDeepRight(
   window.leckerliSettings ?? {}
 );
 
+// Build the expiration date
+const expirationDate = new Date();
+expirationDate.setMonth(expirationDate.getMonth() + 1);
+
 // Define cookie configuration
 const cookieConfig: {
   sameSite: 'strict';
   domain: string;
+  expires?: number | Date;
 } = {
   sameSite: 'strict',
   domain: initialState.domain,
+  expires: expirationDate, // 1 month by default
 };
 
 // Get cookie value

diff --git a/yarn.lock b/yarn.lock
@@ -524,6 +524,13 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
+"@types/dompurify@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-3.0.2.tgz#c1cd33a475bc49c43c2a7900e41028e2136a4553"
+  integrity sha512-YBL4ziFebbbfQfH5mlC+QTJsvh0oJUrWbmxKMyEdL7emlHJqGR2Qb34TEFKj+VCayBvjKy3xczMFNhugThUsfQ==
+  dependencies:
+    "@types/trusted-types" "*"
+
 "@types/js-cookie@^3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-3.0.3.tgz#d6bfbbdd0c187354ca555213d1962f6d0691ff4e"
@@ -551,6 +558,11 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.0.tgz#591c1ce3a702c45ee15f47a42ade72c2fd78978a"
   integrity sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==
 
+"@types/trusted-types@*":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.3.tgz#a136f83b0758698df454e328759dbd3d44555311"
+  integrity sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==
+
 "@typescript-eslint/eslint-plugin@^5.60.1":
   version "5.60.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.60.1.tgz#81382d6ecb92b8dda70e91f9035611cb2fecd1c3"
@@ -1242,6 +1254,11 @@ domhandler@^5.0.2, domhandler@^5.0.3:
   dependencies:
     domelementtype "^2.3.0"
 
+dompurify@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.5.tgz#eb3d9cfa10037b6e73f32c586682c4b2ab01fbed"
+  integrity sha512-F9e6wPGtY+8KNMRAVfxeCOHU0/NPWMSENNq4pQctuXRqqdEPW7q3CrLbR5Nse044WwacyjHGOMlvNsBe1y6z9A==
+
 domutils@^1.5.1:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"