From bd670f2d9f83045cbe7b92b2a9220452a5a53e77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?= Date: Mon, 1 Jan 2024 15:31:10 +0100 Subject: [PATCH] docs: add live demo to privacy shield --- packages/docs/docs/core/privacy-shield.md | 34 ++++++++++++++----- .../docs/src/components/disable-button.tsx | 14 ++++++++ packages/docs/src/theme/Root.js | 2 ++ packages/docs/src/theme/demo-integration.ts | 27 +++++++++++++++ 4 files changed, 69 insertions(+), 8 deletions(-) create mode 100644 packages/docs/src/components/disable-button.tsx create mode 100644 packages/docs/src/theme/demo-integration.ts diff --git a/packages/docs/docs/core/privacy-shield.md b/packages/docs/docs/core/privacy-shield.md index ac376042..6e32cd3f 100644 --- a/packages/docs/docs/core/privacy-shield.md +++ b/packages/docs/docs/core/privacy-shield.md @@ -1,28 +1,46 @@ --- title: --- + +import { PrivacyShield } from '@consent-manager/core'; +import { DisableButton } from '../../src/components/disable-button'; + # `` `PrivacyShield` is a component that conditionally renders children based on the consent decision for a specific integration. It's typically used to wrap content that should only be displayed if the user has consented to the associated integration. ## Props -| Prop | Type | Description | -|--------------|-----------------------------|--------------------------------------------------------------| -| `id` | `string` | The identifier for the integration to check consent for. | -| `children` | `React.ReactNode` | The content to render if consent is given. | -| `...props` | `unknown` | Additional props passed to the fallback component. | + +| Prop | Type | Description | +| ---------- | ----------------- | -------------------------------------------------------- | +| `id` | `string` | The identifier for the integration to check consent for. | +| `children` | `React.ReactNode` | The content to render if consent is given. | +| `...props` | `unknown` | Additional props passed to the fallback component. | ## Prefer a Custom Placeholder or Fallback Component? Set it up globally using the `fallbackComponent` property in the [`ConsentManager` component](./consent-manager.md). ## Example Usage + ```jsx -import { PrivacyShield } from '@consent-manager/core'; +import { PrivacyShield } from '@consent-manager/core' const YouTubeEmbed = ({ videoId }) => ( {/* Your YouTube embed component */} -); -``` \ No newline at end of file +) +``` + +### Example Rendering + +Here's an example of what a shield will appear as: + + +
+

Looking for the privacy shield?

+

The demo integration has been enabled!

+ Display Privacy Shield +
+
diff --git a/packages/docs/src/components/disable-button.tsx b/packages/docs/src/components/disable-button.tsx new file mode 100644 index 00000000..7a9e92dd --- /dev/null +++ b/packages/docs/src/components/disable-button.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import { useDecision } from '@consent-manager/core' + +export function DisableButton({ + children, + id, +}: { + children: React.ReactNode + id: string +}) { + const [, setEnabled]= useDecision(id) + + return +} diff --git a/packages/docs/src/theme/Root.js b/packages/docs/src/theme/Root.js index 7641b98d..ffb9e1e7 100644 --- a/packages/docs/src/theme/Root.js +++ b/packages/docs/src/theme/Root.js @@ -15,6 +15,7 @@ import { googleAnalyticsIntegration } from '@consent-manager/integration-google- import { googleTagManagerIntegration } from '@consent-manager/integration-google-tag-manager' import { hubspotIntegration } from '@consent-manager/integration-hubspot' import { linkedinIntegration } from '@consent-manager/integration-linkedin' +import { demoIntegration } from './demo-integration' import { ConsentManagerDefaultInterface } from '@consent-manager/interface-default' import '@consent-manager/interface-default/dist/default.min.css' @@ -39,6 +40,7 @@ function Root({ children }) { googleTagManagerIntegration({ gtmId: 'GTM-PPHGBCL' }), hubspotIntegration({ hubId: 19627404 }), linkedinIntegration({ partnerId: 2990578 }), + demoIntegration() ], onChangeDecision: (last, next) => { const changed = {} diff --git a/packages/docs/src/theme/demo-integration.ts b/packages/docs/src/theme/demo-integration.ts new file mode 100644 index 00000000..a1241518 --- /dev/null +++ b/packages/docs/src/theme/demo-integration.ts @@ -0,0 +1,27 @@ +import { siCreativecommons } from 'simple-icons' + +import { + createIconComponentFromSimpleIconsSvgPath, + getForegroundColor, + IntegrationConfig, +} from '@consent-manager/core' + +export function demoIntegration(): IntegrationConfig { + const { title, hex, path } = siCreativecommons + const color = `#${hex}` + const contrastColor = getForegroundColor(color) + const Icon = createIconComponentFromSimpleIconsSvgPath(title, path) + const lang = + typeof window !== 'undefined' ? window.navigator.language : 'en-US' + + return { + id: 'demo', + title: 'Demo Integration', + category: 'Demo', + color, + contrastColor, + Icon, + privacyPolicyUrl: `https://example.com?hl=${lang}`, + description: 'Please: Keep me disabled for the privacy shield demo in the docs :)', + } +}