Demo

package.json

@@ -24,6 +24,10 @@
     "@elbwalker/jest": "*",
     "@elbwalker/tsconfig": "*",
     "@elbwalker/tsup": "*",
+    "css-loader": "^7.1.2",
+    "sass": "^1.85.1",
+    "sass-loader": "^16.0.5",
+    "style-loader": "^4.0.0",
     "turbo": "^2.0.5",
     "typescript": "^5.5.2"
   },

website/docs/destinations/google-ads.mdx

@@ -103,15 +103,7 @@ Configure the Google Ads destination with a Conversion ID and Conversion label.
 | currency       | string | Default currency for conversions.                |
 | defaultValue   | number | Default value used for conversions.              |
 
-### CustomEvent
-
-For the custom event mapping (`mapping.entity.action.custom`):
-
-| Property | Type   | Description                                     |
-| -------- | ------ | ----------------------------------------------- |
-| label\*  | string | Google Ads Conversion label.                    |
-| id       | string | Property key to use as transaction ID.          |
-| value    | string | Name of the data property key to use for value. |
+Use `name` to specify the conversion label and `data` for other parameters.
 
 ## Mapping
 

website/docusaurus.config.ts

@@ -184,6 +184,18 @@ async function tailwindPlugin() {
       postcssOptions.plugins.push(require('autoprefixer'));
       return postcssOptions;
     },
+    configureWebpack(config) {
+      return {
+        module: {
+          rules: [
+            {
+              test: /\.scss$/,
+              use: ['style-loader', 'css-loader', 'sass-loader'],
+            },
+          ],
+        },
+      };
+    },
   };
 }
 

website/package.json

@@ -31,12 +31,13 @@
     "@elbwalker/walker.js": "^3.3.0",
     "@iconify/react": "^5.0.2",
     "@mdx-js/react": "^3.1.0",
+    "css-loader": "^7.1.2",
     "prism-react-renderer": "^2.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-inspector": "^6.0.2",
-    "react-live": "^4.1.8",
-    "react-simple-code-editor": "^0.14.1"
+    "react-simple-code-editor": "^0.14.1",
+    "sass-loader": "^16.0.5",
+    "style-loader": "^4.0.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.6.2",

website/src/components/atoms/buttons.tsx

@@ -10,12 +10,7 @@ type ButtonProps = {
   isSecondary?: boolean;
   elbaction?: string; // @TODO
 };
-export function Button({
-  children,
-  link,
-  text,
-  isSecondary,
-}: ButtonProps): JSX.Element {
+export function Button({ children, link, text, isSecondary }: ButtonProps) {
   const classColor = !isSecondary
     ? 'bg-elbwalker hover:bg-elbwalker-400'
     : 'bg-gray-800 hover:bg-gray-700 ';
@@ -35,7 +30,7 @@ export function ButtonCentered({
   link,
   text,
   isSecondary,
-}: ButtonProps): JSX.Element {
+}: ButtonProps) {
   return (
     <div className="mx-auto mt-5 max-w-md sm:flex sm:justify-center md:mt-8">
       <Button link={link} text={text} isSecondary={isSecondary}>