docs: add live demo to privacy shield

packages/docs/docs/core/privacy-shield.md

@@ -1,28 +1,46 @@
 ---
 title: <PrivacyShield />
 ---
+
+import { PrivacyShield } from '@consent-manager/core';
+import { DisableButton } from '../../src/components/disable-button';
+
 # `<PrivacyShield />`
 
 `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 }) => (
   <PrivacyShield id="youtube">
     {/* Your YouTube embed component */}
   </PrivacyShield>
-);
-```
+)
+```
+
+### Example Rendering
+
+Here's an example of what a shield will appear as:
+
+<PrivacyShield id="demo">
+  <center>
+    <h4>Looking for the privacy shield?</h4>
+    <p>The demo integration has been enabled!</p>
+    <DisableButton id="demo">Display Privacy Shield</DisableButton>
+  </center>
+</PrivacyShield>

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 <button onClick={() => setEnabled(false)}>{children}</button>
+}

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 = {}

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 :)',
+  }
+}