changes to handle dark mode on cookies banner
This commit is contained in:
Родитель
18a3179f69
Коммит
0b8f6a892b
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Двоичные данные
.yarn/cache/@essex-js-toolkit-hooks-npm-4.0.1-e24e97b223-3c120777bc.zip
поставляемый
Normal file
Двоичные данные
.yarn/cache/@essex-js-toolkit-hooks-npm-4.0.1-e24e97b223-3c120777bc.zip
поставляемый
Normal file
Двоичный файл не отображается.
Двоичные данные
.yarn/cache/@essex-js-toolkit-toolbox-npm-3.0.1-c3c0ba1acd-24b864ce18.zip
поставляемый
Normal file
Двоичные данные
.yarn/cache/@essex-js-toolkit-toolbox-npm-3.0.1-c3c0ba1acd-24b864ce18.zip
поставляемый
Normal file
Двоичный файл не отображается.
Двоичные данные
.yarn/cache/lodash-es-npm-4.17.21-b45832dfce-05cbffad6e.zip
поставляемый
Normal file
Двоичные данные
.yarn/cache/lodash-es-npm-4.17.21-b45832dfce-05cbffad6e.zip
поставляемый
Normal file
Двоичный файл не отображается.
|
@ -19,7 +19,7 @@
|
|||
"dependencies": {
|
||||
"@commitlint/cli": "^12.1.2",
|
||||
"@essex-js-toolkit/hierarchy-browser": "3.0.1",
|
||||
"@essex-js-toolkit/hooks": "3.0.0",
|
||||
"@essex-js-toolkit/hooks": "^4.0.1",
|
||||
"@essex-js-toolkit/thematic-lineup": "^1.1.5",
|
||||
"@essex-js-toolkit/themed-components": "^1.2.0",
|
||||
"@essex-js-toolkit/toolbox": "2.0.1",
|
||||
|
|
|
@ -2,17 +2,30 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { manageConsent } from '../../consent'
|
||||
|
||||
import { useMicrosoftConsentBanner } from '@essex-js-toolkit/hooks'
|
||||
import { FC, memo } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { useTheme } from '~/state'
|
||||
|
||||
export const Footer: FC = memo(function Footer() {
|
||||
const theme = useTheme()
|
||||
const CONSENT_CONF = {
|
||||
theme: theme.variant,
|
||||
elementId: 'cookie-banner',
|
||||
onChange: (c: any) => console.log('CHANGED', c),
|
||||
}
|
||||
|
||||
const [, manageConsent] = useMicrosoftConsentBanner(CONSENT_CONF)
|
||||
|
||||
return (
|
||||
<FooterEl>
|
||||
<Container>
|
||||
<Link href={constants.privacyUrl}>Privacy</Link>
|
||||
{' | '}
|
||||
<Link id={'managecookies'} onClick={manageConsent}>
|
||||
<Link
|
||||
id={'managecookies'}
|
||||
onClick={manageConsent}>
|
||||
Cookies
|
||||
</Link>
|
||||
{' | '}
|
||||
|
@ -83,3 +96,4 @@ const LinkA = styled.a`
|
|||
text-decoration: none !important;
|
||||
color: rgb(241, 241, 241);
|
||||
`
|
||||
|
||||
|
|
|
@ -1,79 +0,0 @@
|
|||
/*!
|
||||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
|
||||
declare const WcpConsent: any
|
||||
|
||||
export interface ConsentOptions {
|
||||
/**
|
||||
* Default: 'dark'
|
||||
*/
|
||||
theme?: string
|
||||
/**
|
||||
* default: 'cookie-consent'
|
||||
*/
|
||||
elementId?: string
|
||||
onConsent?: (consent: Consent) => void
|
||||
}
|
||||
|
||||
export interface Consent {
|
||||
Required: boolean
|
||||
Advertising: boolean
|
||||
Analytics: boolean
|
||||
SocialMedia: boolean
|
||||
}
|
||||
|
||||
let currentConsent: Consent = {
|
||||
Required: true,
|
||||
Advertising: false,
|
||||
Analytics: false,
|
||||
SocialMedia: false,
|
||||
}
|
||||
let consentUtil: any
|
||||
const NOOP = () => {
|
||||
/*nothing*/
|
||||
}
|
||||
|
||||
export function showCookieConsent({
|
||||
theme = 'dark',
|
||||
elementId = 'cookie-banner',
|
||||
onConsent = NOOP,
|
||||
}: ConsentOptions = {}): void {
|
||||
const element = document.getElementById(elementId)
|
||||
if (!element) {
|
||||
throw new Error(`Could not find element with id ${elementId}`)
|
||||
}
|
||||
WcpConsent.init(
|
||||
navigator.language,
|
||||
element,
|
||||
function init(err, consent) {
|
||||
if (err) {
|
||||
console.error('error initalizing WcpConsent', err)
|
||||
} else {
|
||||
consentUtil = consent
|
||||
onConsent(consent)
|
||||
}
|
||||
},
|
||||
function onChange(consent) {
|
||||
currentConsent = consent
|
||||
onConsent(consent)
|
||||
},
|
||||
theme,
|
||||
)
|
||||
}
|
||||
|
||||
export function getConsent(): Consent {
|
||||
return currentConsent
|
||||
}
|
||||
|
||||
export function manageConsent(): void {
|
||||
consentUtil.manageConsent()
|
||||
}
|
||||
|
||||
// show consent banner immediately
|
||||
showCookieConsent({
|
||||
onConsent: c => {
|
||||
console.log('consent changed', c)
|
||||
},
|
||||
})
|
|
@ -10,7 +10,6 @@ import { ApplicationStyles } from '@thematic/react'
|
|||
import ReactDOM from 'react-dom'
|
||||
import { RecoilRoot } from 'recoil'
|
||||
import { ThemeProvider } from 'styled-components'
|
||||
import './consent'
|
||||
import './index.css'
|
||||
|
||||
const ThemedApp = () => {
|
||||
|
|
31
yarn.lock
31
yarn.lock
|
@ -1805,6 +1805,21 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@essex-js-toolkit/hooks@npm:^4.0.1":
|
||||
version: 4.0.1
|
||||
resolution: "@essex-js-toolkit/hooks@npm:4.0.1"
|
||||
dependencies:
|
||||
"@essex-js-toolkit/toolbox": 3.0.1
|
||||
lodash-es: ^4.17.21
|
||||
peerDependencies:
|
||||
"@types/node": "*"
|
||||
"@types/react": "*"
|
||||
"@types/react-dom": "*"
|
||||
react: ">=16.8.0"
|
||||
checksum: 3c120777bc3653b61b0e1ad4f96addf3248e330dcc7053009120443e91e878fe44daf232c62147070ff9a83f0dbeb0ece43a9ccb37c0f644cf5d622802f600ba
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@essex-js-toolkit/thematic-lineup@npm:^1.1.5":
|
||||
version: 1.1.5
|
||||
resolution: "@essex-js-toolkit/thematic-lineup@npm:1.1.5"
|
||||
|
@ -1880,6 +1895,13 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@essex-js-toolkit/toolbox@npm:3.0.1":
|
||||
version: 3.0.1
|
||||
resolution: "@essex-js-toolkit/toolbox@npm:3.0.1"
|
||||
checksum: 24b864ce1819374b00ab6f5b8633232c3ea212993dc52467a7de4f606843cfaa19ad3239bb257fcfd0c6bf189319602005be372070bc1f4f98570288a3dfdac6
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@essex-js-toolkit/toolbox@npm:^1.1.3, @essex-js-toolkit/toolbox@npm:^1.1.4":
|
||||
version: 1.1.4
|
||||
resolution: "@essex-js-toolkit/toolbox@npm:1.1.4"
|
||||
|
@ -10557,7 +10579,7 @@ fsevents@^1.2.7:
|
|||
"@babel/runtime": ^7.14.0
|
||||
"@commitlint/cli": ^12.1.2
|
||||
"@essex-js-toolkit/hierarchy-browser": 3.0.1
|
||||
"@essex-js-toolkit/hooks": 3.0.0
|
||||
"@essex-js-toolkit/hooks": ^4.0.1
|
||||
"@essex-js-toolkit/thematic-lineup": ^1.1.5
|
||||
"@essex-js-toolkit/themed-components": ^1.2.0
|
||||
"@essex-js-toolkit/toolbox": 2.0.1
|
||||
|
@ -13294,6 +13316,13 @@ fsevents@^1.2.7:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lodash-es@npm:^4.17.21":
|
||||
version: 4.17.21
|
||||
resolution: "lodash-es@npm:4.17.21"
|
||||
checksum: 05cbffad6e2adbb331a4e16fbd826e7faee403a1a04873b82b42c0f22090f280839f85b95393f487c1303c8a3d2a010048bf06151a6cbe03eee4d388fb0a12d2
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lodash.camelcase@npm:^4.3.0":
|
||||
version: 4.3.0
|
||||
resolution: "lodash.camelcase@npm:4.3.0"
|
||||
|
|
Загрузка…
Ссылка в новой задаче