Skip to content

Commit 2d96d08

Browse files
axe312geraxe312ger
committed
WIP - new default ui integration
1 parent 055581e commit 2d96d08

9 files changed

Lines changed: 103 additions & 164 deletions

File tree

‎gatsby/package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@
55
"version": "0.1.0",
66
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
77
"dependencies": {
8-
"@techboi/consent-manager": "^0.2.0",
9-
"@techboi/consent-manager-integration-matomo": "^0.2.0",
10-
"@techboi/consent-manager-integration-youtube": "^0.2.0",
8+
"@techboi/consent-manager": "^0.3.0",
9+
"@techboi/consent-manager-integration-matomo": "^0.3.0",
10+
"@techboi/consent-manager-integration-youtube": "^0.3.0",
11+
"@techboi/consent-manager-interface-unobtrusive-control-ui": "^0.3.0",
1112
"autoprefixer": "^10.2.5",
1213
"final-form": "^4.20.2",
1314
"gatsby": "^3.1.0",

‎gatsby/src/components/consent-manager/decisions-form.js‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎gatsby/src/components/consent-manager/fallback-component.js‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
1-
import React, { useContext, useCallback } from "react"
1+
import React, { useCallback } from "react"
22

3-
import { useIntegration } from "@techboi/consent-manager"
3+
import { useIntegration, useDecision } from "@techboi/consent-manager"
44
import { HiCog } from "react-icons/hi"
55

6-
import ConsentManagerUIContext from "./ui-context"
7-
86
export const FallbackComponent = ({ integrationId, fallbackUrl }) => {
97
const integration = useIntegration(integrationId)
8+
const [, setDecision] = useDecision(integrationId)
109

11-
const { setIsOpen } = useContext(ConsentManagerUIContext)
12-
13-
const openConsentManager = useCallback(() => {
14-
setIsOpen(true)
15-
}, [setIsOpen])
10+
const enableIntegration = useCallback(() => {
11+
setDecision(true)
12+
}, [setDecision])
1613

1714
if (!integration) {
1815
throw new Error(`No integration found for "${integrationId}"`)
@@ -35,8 +32,8 @@ export const FallbackComponent = ({ integrationId, fallbackUrl }) => {
3532
</p>
3633
)}
3734
<p>
38-
<button onClick={openConsentManager}>
39-
<HiCog style={{ display: "inline" }} /> Change privacy settings
35+
<button onClick={enableIntegration}>
36+
<HiCog style={{ display: "inline" }} /> Enable {title}
4037
</button>
4138
</p>
4239
{fallbackUrl && (

‎gatsby/src/components/consent-manager/switch.js‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎gatsby/src/components/consent-manager/tailwind-switch.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React, { useMemo } from "react"
2+
import { FieldRenderProps } from "react-final-form"
3+
4+
interface SwitchProps extends FieldRenderProps<string, any> {
5+
enabledColor: string
6+
}
7+
8+
export const Switch: React.FC<SwitchProps> = ({
9+
children,
10+
input,
11+
meta,
12+
enabledColor = "#48bb78",
13+
...rest
14+
}) => {
15+
const key = `switch-${input.name}`
16+
const checked: boolean = useMemo(() => !!input.value, [input.value])
17+
18+
return (
19+
<label htmlFor={key} className="flex items-center cursor-pointer" {...rest}>
20+
<div className="relative">
21+
<input
22+
id={key}
23+
type="checkbox"
24+
checked={checked}
25+
{...input}
26+
className="hidden"
27+
/>
28+
<div
29+
className="w-10 h-4 bg-gray-400 rounded-full shadow-inner"
30+
style={{
31+
backgroundColor: checked ? enabledColor : undefined,
32+
transition: "background-color 0.3s ease-out",
33+
}}
34+
/>
35+
<div
36+
className="absolute w-6 h-6 bg-white rounded-full shadow inset-y-0 left-0"
37+
style={{
38+
top: "-.25rem",
39+
left: "-.25rem",
40+
transition: "transform 0.3s ease-in-out",
41+
transform: checked ? "translateX(100%)" : undefined,
42+
}}
43+
/>
44+
</div>
45+
<div className="ml-3 text-gray-700 font-medium">{children} </div>
46+
</label>
47+
)
48+
}

‎gatsby/src/components/consent-manager/toggle.js‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎gatsby/src/components/consent-manager/ui-context.js‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎gatsby/src/components/consent-manager/wrapper.js‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import React from "react"
2+
23
import { ConsentManager, ConsentManagerForm } from "@techboi/consent-manager"
34

4-
import { DecisionsForm } from "./decisions-form"
5-
import { FallbackComponent } from "./fallback-component"
6-
import ConsentManagerUIContext from "./ui-context"
7-
import ConsentManagerToggle from "./toggle"
85
import { matomoIntegration } from "@techboi/consent-manager-integration-matomo"
96
import { youTubeIntegration } from "@techboi/consent-manager-integration-youtube"
107

8+
import { UnobtrusiveConsentControlUI } from "@techboi/consent-manager-interface-unobtrusive-control-ui"
9+
import "@techboi/consent-manager-interface-unobtrusive-control-ui/dist/unobtrusive-control-ui.min.css"
10+
11+
import { FallbackComponent } from "./fallback-component"
12+
1113
const consentManagerConfig = {
1214
integrations: [
1315
matomoIntegration({
@@ -43,21 +45,15 @@ export function ConsentManagerWrapper({ children }) {
4345
const storage = React.useState({
4446
decisions: {},
4547
})
46-
const [isOpen, setIsOpen] = React.useState(
47-
!storage.decisions || !!Object.keys(storage.decisions).length
48-
)
4948

5049
return (
51-
<ConsentManagerUIContext.Provider value={{ isOpen, setIsOpen }}>
52-
<ConsentManager
53-
config={consentManagerConfig}
54-
store={storage}
55-
fallbackComponent={FallbackComponent}
56-
>
57-
{children}
58-
<ConsentManagerForm formComponent={DecisionsForm} />
59-
<ConsentManagerToggle />
60-
</ConsentManager>
61-
</ConsentManagerUIContext.Provider>
50+
<ConsentManager
51+
config={consentManagerConfig}
52+
store={storage}
53+
fallbackComponent={FallbackComponent}
54+
>
55+
{children}
56+
<ConsentManagerForm formComponent={UnobtrusiveConsentControlUI} />
57+
</ConsentManager>
6258
)
6359
}

‎gatsby/yarn.lock‎

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1673,27 +1673,37 @@
16731673
dependencies:
16741674
defer-to-connect "^2.0.0"
16751675

1676-
"@techboi/consent-manager-integration-matomo@^0.2.0":
1677-
version "0.2.0"
1678-
resolved "http://localhost:4873/@techboi%2fconsent-manager-integration-matomo/-/consent-manager-integration-matomo-0.2.0.tgz#e3c2a68bb45560c720c348abedb9faa99b7364f9"
1679-
integrity sha512-XYZ95K2NLCzZ4mKPNIhV37oyBGVhz4KQjCcuMGPVPmoYI8zr+FkiOJK6ZUjmS/orme8dMV0VD4AkbSHRTQMdBA==
1676+
"@techboi/consent-manager-integration-matomo@^0.3.0":
1677+
version "0.3.0"
1678+
resolved "http://localhost:4873/@techboi%2fconsent-manager-integration-matomo/-/consent-manager-integration-matomo-0.3.0.tgz#77dd5df18b14d1ab68397f93780f236d9d761b8f"
1679+
integrity sha512-YB9Bf/ccyCmWnekre7c/ZVAfzL0WdK99AFyfDuceXh7DJdJfEsN6Mq1P0KI6f7jRZSY/tBiSKGlnaIPAEzsKgg==
16801680
dependencies:
1681-
"@techboi/consent-manager" "0.2.0"
1681+
"@techboi/consent-manager" "^0.3.0"
16821682
simple-icons "^4.14.0"
16831683

1684-
"@techboi/consent-manager-integration-youtube@^0.2.0":
1685-
version "0.2.0"
1686-
resolved "http://localhost:4873/@techboi%2fconsent-manager-integration-youtube/-/consent-manager-integration-youtube-0.2.0.tgz#0d8c87de83be7f9e8d4cca2d29163131449cb775"
1687-
integrity sha512-sOVdKE1soXWt9l2USqmdHOcNVBd9sp1h4p8Pmsinb354/KEy/H0Vei4gbJdWR5Q58U3CG0dHNNBaXuHrByyapw==
1684+
"@techboi/consent-manager-integration-youtube@^0.3.0":
1685+
version "0.3.0"
1686+
resolved "http://localhost:4873/@techboi%2fconsent-manager-integration-youtube/-/consent-manager-integration-youtube-0.3.0.tgz#6aac52436c8653bdc7abe1f9459590e9fc6c5bc2"
1687+
integrity sha512-S1PoqouJt6t/LxUcw4+m/j3WV+jlF6tiGzUGNSgp8hQbN5u51KUQXUtMAg2jkmnx+39fpSV3lY0vbFvXh1mHHw==
16881688
dependencies:
1689-
"@techboi/consent-manager" "0.2.0"
1689+
"@techboi/consent-manager" "^0.3.0"
16901690
react-youtube "^7.13.1"
16911691
simple-icons "^4.14.0"
16921692

1693-
"@techboi/consent-manager@0.2.0", "@techboi/consent-manager@^0.2.0":
1694-
version "0.2.0"
1695-
resolved "http://localhost:4873/@techboi%2fconsent-manager/-/consent-manager-0.2.0.tgz#791a989f1dc1180bb9abcbb20cb0ca2906af3046"
1696-
integrity sha512-1J1eOhEOzXn8rvnJzwFMDqKD1Jtt9SV5M8CBxY9FRzB+NN/dDl1qs1Pdsiic6ctFvsm8xex0DjXFSa34qtNWlA==
1693+
"@techboi/consent-manager-interface-unobtrusive-control-ui@^0.3.0":
1694+
version "0.3.0"
1695+
resolved "http://localhost:4873/@techboi%2fconsent-manager-interface-unobtrusive-control-ui/-/consent-manager-interface-unobtrusive-control-ui-0.3.0.tgz#e17fc0614203ef42e503a35a5b984c3d39b96fb7"
1696+
integrity sha512-9IyDL+WVqrPjK4NmcISpty3eKkG79oVMbyNqw6QyYqbhTC7FEzIFu4L0fPV3ZyFVRbeqxYrGKWaZk+kBEtjHrw==
1697+
dependencies:
1698+
"@techboi/consent-manager" "^0.3.0"
1699+
clsx "^1.1.1"
1700+
react-final-form "^6.5.2"
1701+
react-icons "^4.2.0"
1702+
1703+
"@techboi/consent-manager@^0.3.0":
1704+
version "0.3.0"
1705+
resolved "http://localhost:4873/@techboi%2fconsent-manager/-/consent-manager-0.3.0.tgz#54c5d5fbdf2abbd6d37379c805139164202a7040"
1706+
integrity sha512-3qHo8uWv+yaqT79jYcrE7IdRqVr4HRJmik9rNFsh67EXHF7TBOozbDRrq1QpdrlEBCizgW2xcCp3xjhVN7i3bQ==
16971707
dependencies:
16981708
"@types/history" "^4.7.8"
16991709
history "^5.0.0"
@@ -3499,6 +3509,11 @@ clone-response@1.0.2, clone-response@^1.0.2:
34993509
dependencies:
35003510
mimic-response "^1.0.0"
35013511

3512+
clsx@^1.1.1:
3513+
version "1.1.1"
3514+
resolved "http://localhost:4873/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
3515+
integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
3516+
35023517
coa@^2.0.2:
35033518
version "2.0.2"
35043519
resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"

0 commit comments

Comments
 (0)