@codecademy/tracking 1.0.46 → 1.0.47-alpha.091452b081.0

package/dist/integrations/fides.d.ts

@@ -0,0 +1 @@
+export declare const initializeFides: () => void;

package/dist/integrations/fides.js

@@ -0,0 +1,35 @@
+import { theme } from '@codecademy/gamut-styles';
+/**
+ * Fides property ID for `www.codecademy.com`.
+ */
+
+const PROPERTY_ID = 'FDS-3RC5S1';
+export const initializeFides = () => {
+  const script = document.createElement('script');
+  script.setAttribute('async', 'true');
+  script.setAttribute('src', "https://skillsoft-codecademy.fides-cdn.ethyca.com/fides.js?property_id=".concat(PROPERTY_ID));
+  script.setAttribute('type', 'text/javascript');
+  script.addEventListener('load', () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const fides = window.Fides;
+    fides.gtm();
+    const unsubscribe = fides.onFidesEvent('FidesUIShown', detail => {
+      if (detail.extraDetails.servingComponent === 'banner') {
+        const banner = document.getElementById('fides-banner');
+        if (banner) {
+          banner.setAttribute('tabIndex', '-1');
+        }
+      }
+      unsubscribe();
+    });
+  });
+  document.body.appendChild(script);
+  const style = document.createElement('style');
+  style.textContent = rawStyles;
+  document.body.appendChild(style);
+};
+
+// For now, these three values duplicate theme colors from gamut-styles
+// We don't want to take a full dependency on that package here...
+const rawStyles = "\n:root {\n  /* Colors */\n\n  --fides-overlay-primary-color: ".concat(theme.colors.hyper, ";\n  --fides-overlay-body-font-color: #484848;\n\n  /* Buttons */\n\n  --fides-overlay-primary-button-background-hover-color: ").concat(theme.colors.hyper, ";\n\n  /* Toggles */\n  --fides-overlay-primary-active-color: var(--fides-overlay-primary-color);\n  --fides-overlay-primary-active-disabled-color: #bda4f7;\n  --fides-overlay-inactive-color: #cbd5e0;\n  --fides-overlay-disabled-color: #e1e7ee;\n\n  /* Everything else */\n  --fides-overlay-button-border-radius: ").concat(theme.borderRadii.md, ";\n  --fides-overlay-font-family: inherit;\n  --fides-overlay-font-size-body: 0.875rem !important;\n  --fides-overlay-line-height: 1.375rem !important;\n  --fides-overlay-padding: padding: 1rem !important;\n  --fides-overlay-padding: 0.875rem 1rem !important;\n}\n\n.fides-banner, .fides-modal-container {\n -webkit-font-smoothing: auto;\n}\n\ndiv#fides-overlay {\n  font-size: var(--fides-overlay-font-size-body);\n  line-height: var(--fides-overlay-line-height);\n  z-index: 1000;\n  position: fixed;\n  white-space: pre-line;\n  font-family: inherit;\n  line-height: calc(1em + 0.4rem);\n  -webkit-font-smoothing: auto;\n  z-index: 9948031 !important\n}\n\n#fides-modal-link {\n  cursor: pointer;\n  display: none;\n}\n\n#fides-modal .fides-notice-toggle-title:hover {\n  background-color: ").concat(theme.colors.white, " !important\n}\n\n#fides-modal .fides-modal-content {\n  background-color: ").concat(theme.colors.white, " !important;\n  border:0;\n  font-size: 14px;\n  line-height: 1.4;\n}\n\n.fides-modal-description a:focus {\n  outline: 1px solid ").concat(theme.colors.black, " !important;\n}\n\n.fides-notice-toggle-title a:focus {\n  outline: 1px solid ").concat(theme.colors.black, " !important;\n}\n\n#fides-modal .fides-notice-toggle, #fides-modal  fides-notice-toggle-expanded {\n  background-color: ").concat(theme.colors.white, " !important;\n}\n\n#fides-modal .fides-banner-button-secondary.fides-save-button {\n  color: var(--fides-overlay-primary-button-background-color) !important;\n}\n\n#fides-modal .fides-modal-footer {\n  background-color: ").concat(theme.colors.white, "\n}\n\n#fides-modal .fides-toggle-display {\n  color: transparent;\n  padding: 0;\n  padding-block: 2px;\n  --offset: 0.2em !important;\n  --diameter: 1.2em !important;\n  background-color: #828285\n}\n\n.fides-toggle .fides-toggle-input:checked + .fides-toggle-display {\n  background-color: var(--fides-overlay-primary-active-color) !important;\n}\n\n#fides-modal .fides-divider {\n  display: none !important\n}\n\n#fides-modal .fides-modal-title {\n  text-align: left !important;\n}\n\ndiv#fides-banner-container {\n  bottom: 0 !important;\n  left: 0 !important;\n}\n\ndiv#fides-banner-container button.fides-banner-button {\n  font-size: 16px !important;\n}\n\ndiv#fides-banner {\n  line-height: var(--fides-overlay-line-height);\n  color: var(--fides-overlay-body-font-color) !important;\n  width: 100% !important;\n  overflow-y: hidden;\n  border: 0 !important;\n  box-shadow: 0 0 18px rgba(0, 0, 0, 0.2) !important;\n  background-color: ").concat(theme.colors.white, ";\n  -webkit-font-smoothing: auto;\n  bottom: 1px;\n}\n\ndiv#fides-banner:focus {\n  outline: 1px solid ").concat(theme.colors.black, " !important\n}\n\ndiv#fides-banner-inner {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  max-width: 1436px;\n  margin: 0 auto;\n  row-gap: 16px;\n  row-gap: unset !important\n}\n\n/* Responsive banner */\n\ndiv#fides-banner-description {\n  margin-top: 0;\n  margin-bottom: 10px;\n}\n\ndiv#fides-banner-description span {\n  line-height: 1.375rem !important;\n}\n\ndiv#fides-banner-description > div {\n  text-align: center;\n}\n\ndiv#fides-banner-description > div a {\n  font-weight: bold;\n}\n\ndiv#fides-button-group {\n  justify-content: center;\n  gap: 2em;\n  background-color: transparent;\n}\n\n#fides-banner div#fides-button-group {\n  margin-top: 0.5em;\n  display: flex;\n  display: flex;\n  justify-content: center;\n  background-color: transparent;\n  gap: 16px !important;\n}\n\ndiv#fides-button-group .fides-banner-secondary-actions > button {\n  cursor: pointer;\n  text-decoration: none;\n  font-weight: bold;\n  padding: 10px 16px !important\n  padding-top: 3px !important;\n  margin-top: 0;\n  border: 1px solid var(--fides-overlay-primary-color);\n  border-radius: 2px;\n  box-sizing: border-box;\n}\n\n#fides-banner .fides-acknowledge-button, #fides-banner .fides-manage-preferences-button {\n  margin-right: 0px !important;\n}\n\n.fides-modal-footer div#fides-button-group {\n  width: 100% !important\n}\n\n#fides-modal .fides-modal-button-group.fides-modal-primary-actions {\n  margin-left: 0 !important;\n}\n\n.fides-gpc-label {\n  display: none !important;\n}\n\nbutton.fides-banner-button.fides-banner-button-tertiary {\n  background: none;\n  border: none;\n  padding: 0;\n  color: var(--fides-overlay-link-font-color);\n  text-decoration: underline;\n  cursor: pointer;\n  line-height: 2em;\n}\n\n/** Modal */\n\ndiv.fides-modal-content {\n  line-height: var(--fides-overlay-line-height);\n  color: var(--fides-overlay-body-font-color) !important;\n  box-sizing: border-box;\n  padding: var(--fides-overlay-padding);\n  border: 1px solid var(--fides-overlay-primary-color);\n  background-color: var(--fides-overlay-background-color);\n  border-radius: var(--fides-overlay-component-border-radius);\n  max-height: 100%;\n  max-width: 100%;\n  overflow-y: scroll;\n  z-index: 2;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.fides-toggle .fides-toggle-display {\n  --offset: 0.1em;\n  --diameter: 1em;\n  /** Because we have a \"hidden\" attr on this toggle element, some CSS libs customers use may include a global display: none on the hidden attr. To prevent our toggles from being hidden we use !important here **/\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: space-around;\n  width: calc(var(--diameter) * 2 + var(--offset) * 2);\n  height: calc(var(--diameter) + var(--offset) * 2);\n  box-sizing: content-box;\n  position: relative;\n  border-radius: 100vw;\n  background-color: var(--fides-overlay-inactive-color);\n  transition: 250ms;\n}\n\n/* Checked/unchecked states */\n.fides-toggle .fides-toggle-input:checked + .fides-toggle-display {\n  background-color: var(--fides-overlay-primary-active-color);\n}\n.fides-toggle .fides-toggle-input:checked + .fides-toggle-display::before {\n  transform: translate(100%, -50%);\n}\n\n/* Disabled state */\n.fides-toggle .fides-toggle-input:disabled {\n  cursor: not-allowed;\n}\n.fides-toggle .fides-toggle-input:disabled + .fides-toggle-display {\n  background-color: var(--fides-overlay-disabled-color);\n}\n.fides-toggle .fides-toggle-input:disabled:checked + .fides-toggle-display {\n  background-color: var(--fides-overlay-primary-active-disabled-color);\n}\n\n/* Focus ring when using keyboard */\n.fides-toggle .fides-toggle-input:focus + .fides-toggle-display {\n  /* Firefox only has Highlight, not -webkit-focus-ring-color */\n  outline: 1px auto Highlight;\n  outline: 1px auto -webkit-focus-ring-color;\n}\n\n/* Disclosure */\n\n.fides-notice-toggle .fides-notice-toggle-title {\n  border: 0;\n}\n\n#fides-modal .fides-modal-secondary-actions {\n  display: none !important;\n}\n\n.fides-notice-toggle .fides-notice-toggle-trigger {\n  padding-left: 4px;\n  position: relative;\n  left: -4px;\n}\n\n.fides-notice-toggle-trigger > .fides-flex-center.fides-justify-space-between {\n  font-weight: bold\n}\n\n/* Tabs */\n\n.fides-tab-button::focus-visible {\n  outline: 1px auto ").concat(theme.colors.black, ";\n}\n\n.fides-tab-button:focus:not(:focus-visible) {\n  outline: 4px solid ").concat(theme.colors.hyper, " !important;\n}\n\n.fides-toggle-input.focus-visible + .fides-toggle-display,\n.fides-banner-button.fides-banner-button-primary.focus-visible,\n.fides-banner-button.fides-banner-button-secondary.focus-visible,\n.fides-banner-button.fides-banner-button-tertiary.focus-visible {\n  outline: 3px solid ").concat(theme.colors.hyper, " !important;\n  outline-offset: 2px;\n}\n\n/* Table */\n\n.fides-cookies-table {\n  border-collapse: collapse;\n  width: 100%;\n  text-align: left;\n}\n\n.fides-cookies-table th {\n  text-transform: uppercase;\n}\n\n.fides-cookies-table td, .fides-cookies-table th {\n  border: 1px solid var(--fides-overlay-row-divider-color);\n  padding-left: 1.1em;\n  padding-right: 0.6em;\n}\n\n#fides-banner #fides-button-group button {\n  font-weight: bold;\n  padding: 10px 16px;\n  margin-top: 0;\n  border: 1px solid var(--fides-overlay-primary-color);\n  border-radius: 2px;\n}\n\n#fides-banner #fides-button-group div:nth-child(2) > button:nth-child(1) {\n  background-color: white;\n  color: #3a10e5;\n}\n\n#fides-banner-button-tertiary {\n  display: none;\n}\n\n#fides-banner-heading {\n  display: none !important;\n}\n\ndiv#fides-banner-inner div#fides-button-group {\n  flex-direction: row !important;\n}\n\n.fides-banner-description a:hover, .fides-modal-description a:hover {\n    text-decoration: none;\n}\n\n#fides-banner-inner-container a.focus-visible {\n  outline: 1px solid ").concat(theme.colors.black, " !important;\n}\n\ndiv#fides-banner-inner div#fides-button-group {\n  padding-top: 0 !important\n}\n\n#fides-banner .fides-acknowledge-button, #fides-banner .fides-manage-preferences-button {\n  width: auto !important\n}\n\n#fides-banner .fides-banner-button-group.fides-banner-primary-actions {\n  align-items: flex-end !important;\n  align-self: stretch !important\n}\n\n#fides-banner .fides-banner-button-group.fides-banner-secondary-actions {\n  align-items: flex-start !important;\n}\n\n.fides-notice-toggle:focus-visible {\n    outline: 1px solid ").concat(theme.colors.black, " !important;\n}\n\n@media (min-width: 37.5rem) {\n  #fides-banner {\n    padding: 0.875rem 1rem !important;\n  }\n}\n\n").concat(theme.breakpoints.sm, " {\n  div#fides-button-group .fides-banner-secondary-actions > button {\n    padding: 4px 16px !important\n  }\n\n  div#fides-banner-inner {\n   row-gap: 16px;\n  }\n\n  #fides-banner {\n    padding: 0.875rem 1.25rem !important;\n  }\n}\n\n@media only screen and (min-width: 1650px) {\n  #fides-banner-inner {\n    flex-direction: row !important;\n    max-width: 1600px !important;\n  }\n\n  #fides-banner-inner-container {\n    width: 72%;\n  }\n\n  #fides-banner div#fides-button-group {\n    width: 28% !important;\n  }\n\n  div#fides-banner-description {\n    margin-bottom: 0 !important;\n  }\n}");

package/dist/integrations/index.d.ts

@@ -20,8 +20,12 @@ export type TrackingIntegrationsSettings = {
      * Use Partytown to load 3rd party scripts in a worker.
      */
     enablePartytown?: boolean;
+    /**
+     * Whether to use Fides (new implementation) or OneTrust
+     */
+    isFidesEnabled?: boolean;
 };
 /**
  * @see README.md for details and usage.
  */
-export declare const initializeTrackingIntegrations: ({ environment, scope, optedOutExternalTracking, oneTrustScript, enablePartytown, }: TrackingIntegrationsSettings) => Promise<void>;
+export declare const initializeTrackingIntegrations: ({ environment, scope, optedOutExternalTracking, oneTrustScript, enablePartytown, isFidesEnabled, }: TrackingIntegrationsSettings) => Promise<void>;

package/dist/integrations/index.js

@@ -1,3 +1,4 @@
+import { initializeFides } from './fides';
 import { initializeGTM } from './gtm';
 import { initializeOneTrust } from './onetrust';
 import { initializePartytown } from './partytown';
@@ -11,7 +12,8 @@ export const initializeTrackingIntegrations = async _ref => {
     scope = _ref.scope,
     optedOutExternalTracking = _ref.optedOutExternalTracking,
     oneTrustScript = _ref.oneTrustScript,
-    enablePartytown = _ref.enablePartytown;
+    enablePartytown = _ref.enablePartytown,
+    isFidesEnabled = _ref.isFidesEnabled;
   if (init) return; // Prevent multiple initializations
   init = true;
   if (enablePartytown) {
@@ -20,13 +22,16 @@ export const initializeTrackingIntegrations = async _ref => {
     // Wait to allow any other post-hydration logic to run first
     await new Promise(resolve => setTimeout(resolve, 1000));
   }
-
-  // Load in OneTrust's banner and wait for its `OptanonWrapper` callback
-  await initializeOneTrust({
-    scope,
-    environment,
-    scriptId: oneTrustScript
-  });
+  if (isFidesEnabled) {
+    initializeFides();
+  } else {
+    // Load in OneTrust's banner and wait for its `OptanonWrapper` callback
+    await initializeOneTrust({
+      scope,
+      environment,
+      scriptId: oneTrustScript
+    });
+  }
 
   // Load GTM
   initializeGTM({

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@codecademy/tracking",
   "description": "Tracking library for Codecademy",
-  "version": "1.0.46",
+  "version": "1.0.47-alpha.091452b081.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
+    "@codecademy/gamut-styles": "*",
     "@qwik.dev/partytown": "0.11.0"
   },
   "files": [
@@ -15,6 +16,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "repository": "git@github.com:codecademy-engineering/mono.git",
-  "gitHead": "a42717fe8da2c5aff543dff57e2a078c52f9cd67"
+  "repository": "git@github.com:codecademy-engineering/mono.git"
 }