Merge pull request #50 from Jersyfi/v2.x

Fixes & Changes for v2 release

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to `react-cookify` will be documented in this file.
 
+## v2.1.3 - 2023-02-14
+
+* Fixed type CookifyOptionsType where array was given to exact strings
+* Added option to change the background overlay color for the consent
+* Added correct support link to `cookify.jersyfi.dev`
+* Fixed table settings inside consent to skip headers 
+
 ## v2.0.0-beta.1 - 2023-02-12
 
 Skipped the work on the core function from v1 to v2 and included the build-in consent manager.

src/components/consent/detail/detail.tsx

@@ -13,7 +13,7 @@ export const Detail: React.FC<ConsentDetailProps> = ({
 }) => {
 	return (
 		<Wrapper
-			className={'fixed inset-0 z-10 bg-black/30 ' + (show ? '' : 'hidden')}
+			className={'fixed inset-0 z-10 bg-[var(--c-bg-overlay-color)]' + (show ? '' : ' hidden')}
 		>
 			<Header title={content.title} support={support} />
 

src/components/consent/info/info.tsx

@@ -14,7 +14,7 @@ export const Info: React.FC<ConsentInfoProps> = ({
 	return (
 		<Wrapper
 			className={
-				(force && 'fixed inset-0 z-10 bg-black/30') + (show ? '' : ' hidden')
+				(force && 'fixed inset-0 z-10 bg-[var(--c-bg-overlay-color)]') + (show ? '' : ' hidden')
 			}
 		>
 			<div>

src/components/consent/support.tsx

@@ -9,7 +9,7 @@ export const Support: React.FC<ConsentSupportPorps> = ({ display }) => {
 	return (
 		<div className="text-sm mt-1 text-[var(--c-text-by-color)]">
 			Powered by{' '}
-			<a className="font-bold" href="#">
+			<a className="font-bold" href="https://cookify.jersyfi.dev">
 				Cookify
 			</a>
 		</div>

src/styles/index.css

@@ -35,6 +35,7 @@
     --c-border-radius: 0.5rem;
     --c-bg-primary-color: rgb(255, 255, 255);
     --c-bg-secondary-color: rgb(243, 244, 246);
+    --c-bg-overlay-color: rgba(0,0,0,.3);
     /* Collapse */
     --c-c-bar-bg-color: rgb(209, 213, 219);
     --c-c-bar-bg-hover-color: rgb(182, 185, 191);
@@ -86,6 +87,7 @@
     --c-border-radius: 0.5rem;
     --c-bg-primary-color: rgb(20, 20, 20);
     --c-bg-secondary-color: rgb(0, 0, 0);
+    --c-bg-overlay-color: rgba(0,0,0,.3);
     /* Collapse */
     --c-c-bar-bg-color: rgb(70, 70, 70);
     --c-c-bar-bg-hover-color: rgb(80, 80, 80);
@@ -137,6 +139,7 @@
     --c-border-radius: 0rem;
     --c-bg-primary-color: rgb(0, 0, 0);
     --c-bg-secondary-color: rgb(0, 0, 0);
+    --c-bg-overlay-color: rgba(0,0,0,.3);
     /* Collapse */
     --c-c-bar-bg-color: rgb(255, 255, 255);
     --c-c-bar-bg-hover-color: rgb(255, 255, 255);

src/types.ts

@@ -31,7 +31,7 @@ export interface CookifyContextProps {
 
 export type CookifyOptionsType = {
 	name?: string
-	store?: ['cookies', 'storage']
+	store?: 'cookies' | 'storage'
 	saveWithChange?: boolean
 	saveByDefault?: boolean
 	typeDefault?: string
@@ -96,7 +96,7 @@ type ConsentType = {
 		buttons?: DetailButtonType[]
 	}
 	table?: {
-		headers: string[]
+		headers?: string[]
 		types: TableTypesType[]
 	}
 }