@codecademy/tracking 1.0.46 → 1.0.47-alpha.91cdf69b7d.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const initializeFides: () => void;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { theme } from '@codecademy/gamut-styles';
|
|
2
|
+
/**
|
|
3
|
+
* Fides property ID for `www.codecademy.com`.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
const PROPERTY_ID = 'FDS-3RC5S1';
|
|
7
|
+
export const initializeFides = () => {
|
|
8
|
+
const script = document.createElement('script');
|
|
9
|
+
script.setAttribute('async', 'true');
|
|
10
|
+
script.setAttribute('src', "https://skillsoft-codecademy.fides-cdn.ethyca.com/fides.js?property_id=".concat(PROPERTY_ID));
|
|
11
|
+
script.setAttribute('type', 'text/javascript');
|
|
12
|
+
script.addEventListener('load', () => {
|
|
13
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
14
|
+
// @ts-ignore
|
|
15
|
+
const fides = window.Fides;
|
|
16
|
+
fides.gtm();
|
|
17
|
+
const unsubscribe = fides.onFidesEvent('FidesUIShown', detail => {
|
|
18
|
+
if (detail.extraDetails.servingComponent === 'banner') {
|
|
19
|
+
const banner = document.getElementById('fides-banner');
|
|
20
|
+
if (banner) {
|
|
21
|
+
banner.setAttribute('tabIndex', '-1');
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
unsubscribe();
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
document.body.appendChild(script);
|
|
28
|
+
const style = document.createElement('style');
|
|
29
|
+
style.textContent = rawStyles;
|
|
30
|
+
document.body.appendChild(style);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
// For now, these three values duplicate theme colors from gamut-styles
|
|
34
|
+
// We don't want to take a full dependency on that package here...
|
|
35
|
+
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\n /* CSS reset values, adapted from https://www.joshwcomeau.com/css/custom-css-reset/ */\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}\nf\n#fides-modal-link.fides-modal-link-shown {\n display: inline;\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\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 position: fixed;\n z-index: 1;\n width: 100%;\n transform: translateY(0%);\n transition: transform 1s, visibility 1s;\n display: flex;\n justify-content: center;\n visibility: visible;\n max-height: 100%;\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 font-size: var(--fides-overlay-font-size-body-small);\n line-height: var(--fides-overlay-line-height);\n background: var(--fides-overlay-background-color);\n color: var(--fides-overlay-body-font-color) !important;\n box-sizing: border-box;\n padding: var(--fides-overlay-padding);\n overflow-y: scroll;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n position: relative;\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 width: 100%;\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\ndiv#fides-banner-container.fides-banner-bottom {\n bottom: 0;\n left: 0;\n}\n\ndiv#fides-banner-container.fides-banner-bottom.fides-banner-hidden {\n transform: translateY(150%);\n visibility: hidden;\n}\n\ndiv#fides-banner-container.fides-banner-top {\n top: 0;\n left: 0;\n}\n\ndiv#fides-banner-container.fides-banner-top.fides-banner-hidden {\n transform: translateY(-150%);\n visibility: hidden;\n}\n\n/* Responsive banner */\n@media screen and (min-width: 48em) {\n div#fides-banner {\n border-radius: var(--fides-overlay-component-border-radius);\n border: 1px solid var(--fides-overlay-primary-color);\n }\n div#fides-banner-container.fides-banner-bottom {\n bottom: var(--fides-overlay-banner-offset);\n }\n div#fides-banner-container.fides-banner-top {\n top: var(--fides-overlay-banner-offset);\n }\n}\n\ndiv#fides-banner-heading {\n display: flex;\n margin-right: 0.8em;\n align-items: center;\n}\n\ndiv#fides-banner-title {\n font-size: var(--fides-overlay-font-size-title);\n font-weight: 600;\n margin-top: 0.2em;\n min-width: 33%;\n flex: 1;\n color: var(--fides-overlay-title-font-color);\n}\n\ndiv#fides-banner-description {\n margin-top: 0;\n line-height: 1.2em;\n min-width: 33%;\n flex: 1;\n margin-bottom: 10px;\n\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 margin-top: 0.5em;\n display: flex;\n display: flex;\n justify-content: center;\n gap: 2em;\n background-color: transparent;\n}\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\ndiv.fides-acknowledge-button-container {\n margin-top: 0.5em;\n display: flex;\n justify-content: end;\n}\n\ndiv.fides-banner-acknowledge .fides-banner-button {\n max-width: 168px;\n}\n\nbutton.fides-banner-button {\n font-size: var(--fides-overlay-font-size-buttons);\n display: inline-block;\n flex: auto;\n cursor: pointer;\n text-align: center;\n margin: 0;\n margin-top: 0.25em;\n margin-right: 0.5em;\n padding: var(--fides-overlay-button-padding);\n background: var(--fides-overlay-primary-button-background-color);\n color: var(--fides-overlay-primary-button-text-color);\n border: 1px solid;\n font-family: inherit;\n line-height: 1.15;\n text-decoration: none;\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:hover {\n background: var(--fides-overlay-primary-button-background-hover-color);\n}\n\nbutton.fides-banner-button.fides-banner-button-primary {\n background: var(--fides-overlay-primary-button-background-color);\n color: var(--fides-overlay-primary-button-text-color);\n border: none;\n}\n\nbutton.fides-banner-button.fides-banner-button-primary:hover {\n background: var(--fides-overlay-primary-button-background-hover-color);\n}\n\nbutton.fides-banner-button.fides-banner-button-secondary {\n background: var(--fides-overlay-secondary-button-background-color);\n color: var(--fides-overlay-secondary-button-text-color);\n border: 1px solid var(--fides-overlay-primary-button-background-color);\n}\n\nbutton.fides-banner-button.fides-banner-button-secondary:hover {\n background: var(--fides-overlay-secondary-button-background-hover-color);\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 font-size: var(--fides-overlay-font-size-body);\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-modal-container, .fides-modal-overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n.fides-modal-container {\n z-index: 2;\n display: flex;\n}\n\n.fides-modal-container[aria-hidden='true'] {\n display: none;\n}\n\ndiv#fides-modal .fides-modal-header {\n text-align: center;\n margin-top: 0.2em;\n margin-bottom: 0.2em;\n font-weight: 600;\n font-size: var(--fides-overlay-font-size-title);\n color: var(--fides-overlay-title-font-color);\n}\n\ndiv#fides-modal .fides-modal-description {\n margin: 1em 0 1em 0;\n}\n\ndiv#fides-modal .fides-modal-button-group {\n display: flex;\n width: 100%;\n}\n\n.fides-close-button {\n position: absolute;\n top: 0.5em;\n right: 0.2em;\n cursor: pointer;\n background: none;\n border: none;\n /* display: flex; */\n display: none !important;\n}\n\n.fides-close-button:hover {\n background: var(--fides-overlay-hover-color);\n}\n\n.fides-back-button {\n position: absolute;\n top: 0.5em;\n left: 0.2em;\n cursor: pointer;\n background: none;\n border: 1px solid var(--fides-overlay-background-dark-color);\n border-radius: var(--fides-overlay-button-border-radius);\n display: flex;\n padding: 0.4em;\n align-items: center;\n}\n\n.fides-back-button > svg {\n margin-right: 0.6em;\n}\n\n.fides-modal-notices {\n margin-bottom: 1em;\n}\n\n.fides-modal-privacy-policy {\n display: block;\n text-align: center;\n margin-top: 1.5em;\n color: var(--fides-overlay-primary-color);\n}\n\n/** Toggle, adapted from https://kittygiraudel.com/2021/04/05/an-accessible-toggle/ */\n\n@media (prefers-reduced-motion: reduce) {\n .fides-toggle-display {\n transition-duration: 0ms;\n }\n}\n\n.fides-toggle {\n display: inline-flex;\n align-items: center;\n flex-wrap: wrap;\n position: relative;\n gap: 1ch;\n}\n\n.fides-toggle .fides-toggle-input {\n position: absolute;\n opacity: 0;\n width: 100%;\n height: 100%;\n z-index: 4;\n cursor: pointer;\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.fides-toggle .fides-toggle-display::before {\n content: '';\n width: var(--diameter);\n height: var(--diameter);\n border-radius: 50%;\n box-sizing: border-box;\n position: absolute;\n z-index: 3;\n top: 50%;\n left: var(--offset);\n transform: translate(0, -50%);\n background-color: ").concat(theme.colors.white, ";\n transition: inherit;\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/* Divider */\n\n.fides-divider {\n border-width: 0px 0px 1px;\n border-color: var(--fides-overlay-row-divider-color);\n margin: 0;\n}\n\n/* Disclosure */\n\n.fides-disclosure-hidden {\n display: flex;\n visibility: hidden;\n height: 0px;\n margin-top: 0px;\n margin-bottom: 0px;\n}\n\n.fides-notice-toggle .fides-notice-toggle-title {\n padding-inline: 0.5em 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\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 width: 100%;\n display: flex;\n justify-content: space-between;\n margin-right: 0.5em;\n min-height: 40px;\n align-items: center;\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.fides-notice-toggle .fides-notice-toggle-title:hover {\n cursor: pointer;\n background-color: var(--fides-overlay-row-hover-color);\n}\n\n.fides-notice-toggle .fides-disclosure-visible {\n padding-inline: 0.5em;\n}\n\n.fides-notice-toggle p {\n margin: 0;\n margin-bottom: 1.1em;\n}\n\n.fides-notice-toggle-expanded {\n background-color: var(--fides-overlay-row-hover-color);\n}\n\n.fides-notice-toggle-header {\n text-transform: uppercase;\n font-weight: 600;\n}\n\n/* GPC */\n.fides-gpc-banner {\n border: 1px solid var(--fides-overlay-primary-color);\n border-radius: var(--fides-overlay-component-border-radius);\n display: flex;\n padding: 1.1em;\n margin-bottom: 1em;\n}\n\n.fides-gpc-banner p {\n margin: 0;\n}\n\n.fides-gpc-warning {\n color: var(--fides-overlay-primary-color);\n margin-right: 0.5em;\n}\n\n.fides-gpc-header {\n font-weight: 700;\n}\n\n.fides-gpc-label {\n font-weight: 600;\n font-size: 0.9em;\n}\n\n.fides-gpc-badge {\n text-transform: uppercase;\n padding: 0 4px;\n font-weight: 700;\n border-radius: var(--fides-overlay-button-border-radius);\n}\n\n.fides-gpc-badge-applied,\n.fides-gpc-badge-detected {\n background: var(--fides-overlay-gpc-applied-background-color);\n color: var(--fides-overlay-gpc-applied-text-color);\n}\n\n.fides-gpc-badge-overridden {\n background: var(--fides-overlay-gpc-overridden-background-color);\n color: var(--fides-overlay-gpc-overridden-text-color);\n}\n\n/* Tabs */\n\n.fides-tab-list {\n padding: 0;\n display: flex;\n list-style-type: none;\n}\n\n.fides-tab-list > li {\n width: 100%;\n}\n\n.fides-tab-button {\n background: none;\n border-width: 0 0 1px 0;\n border-bottom: 1px solid var(--fides-overlay-row-divider-color);\n color: var(--fides-overlay-body-font-color);\n font-weight: 500;\n padding: 0.6em 1.2em;\n cursor: pointer;\n width: 100%;\n}\n\n.fides-tab-button[aria-selected='true'] {\n color: var(--fides-overlay-primary-active-color);\n border-bottom-width: 2px;\n border-color: var(--fides-overlay-primary-active-color);\n font-weight: 600;\n}\n\n.fides-tab-button::focus-visible {\n outline: 1px auto ").concat(theme.colors.black, ";\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/* GVL Badge */\n\n.fides-notice-badge {\n display: inline-flex;\n align-items: center;\n height: 18px;\n margin-left: 0.6em;\n text-transform: uppercase;\n padding: 0 4px;\n font-weight: 600;\n border-radius: var(--fides-overlay-button-border-radius);\n background: var(--fides-overlay-badge-background-color);\n color: ").concat(theme.colors.white, ";\n font-size: 0.7em;\n}\n.fides-background-dark {\n background-color: var(--fides-overlay-background-dark-color);\n}\n\n/* Filter button */\n\n.fides-filter-button-group {\n background-color: var(--fides-overlay-secondary-button-background-hover-color);\n border-radius: var(--fides-overlay-button-border-radius);\n width: fit-content;\n padding: 0.3em;\n}\n\n.fides-filter-button {\n background-color: transparent;\n border: none;\n padding: 0.3em 1em;\n cursor: pointer;\n}\n\n.fides-filter-button[aria-checked='true'] {\n background-color: var(--fides-overlay-primary-button-background-color);\n color: var(--fides-overlay-primary-button-text-color);\n border-radius: var(--fides-overlay-button-border-radius);\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/* General classes */\n.fides-flex-center {\n display: flex;\n align-items: center;\n}\n\n.fides-margin-right {\n margin-right: 0.2em;\n}\n\n/* TCF toggles */\n.fides-tcf-toggle-content {\n margin-right: 60px;\n font-size: 0.9em;\n font-weight: 400;\n}\n\n.fides-tcf-purpose-vendor-title {\n font-weight: 600;\n display: flex;\n justify-content: space-between;\n}\n\n.fides-tcf-illustration {\n font-size: 0.9em;\n padding: 0.8em;\n padding-right: 60px;\n border-radius: var(--fides-overlay-component-border-radius);\n}\n\n.fides-tcf-purpose-vendor {\n padding: 0.8em;\n border-radius: var(--fides-overlay-component-border-radius);\n}\n\n.fides-tcf-purpose-vendor-list {\n font-weight: 400;\n padding-left: 0;\n list-style: none;\n margin-left: 0;\n}\n\n.fides-tcf-vendor-toggles {\n display: flex;\n}\n\n.fides-legal-basis-labels {\n display: flex;\n align-items: end;\n justify-content: end;\n font-size: 0.8em;\n font-weight: 500;\n}\n\n/* Vendor purpose table */\n.fides-vendor-details-table {\n width: 100%;\n margin-bottom: 1em;\n}\n\n.fides-vendor-details-table th,\n.fides-vendor-details-table td {\n padding: 0.5em 1em;\n text-align: left;\n font-size: 0.9em;\n}\n\n.fides-vendor-details-table td {\n border-bottom: 1px solid var(--fides-overlay-row-divider-color);\n}\n\n/* Link button */\n.fides-link-button {\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n text-decoration: underline;\n color: var(--fides-overlay-body-font-color);\n}\n\n/* Link */\n.fides-external-link {\n color: var(--fides-overlay-primary-color);\n font-weight: 500;\n font-size: 0.9em;\n margin-right: 1em;\n}\n\n/* Dropdown */\n\n.fides-select-dropdown {\n display: block;\n width: 100%;\n border-radius: var(--fides-overlay-component-border-radius);\n padding: 0.4em;\n border: 1px solid var(--fides-overlay-select-border-color);\n}\n\n/* Vendor info (initial layer) */\n.fides-vendor-info div {\n margin-right: 2em;\n}\n\n.fides-vendor-info {\n display: flex;\n padding: 1.1em;\n border-radius: var(--fides-overlay-component-border-radius);\n}\n\n.fides-vendor-info-label {\n font-weight: 600;\n font-size: 1em;\n}\n\n/* Info box */\n.fides-info-box {\n background-color: var(--fides-overlay-background-dark-color);\n border-radius: var(--fides-overlay-component-border-radius);\n padding: 1.1em;\n margin-bottom: 1em;\n}\n\n.fides-info-box p {\n margin: 0;\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 {\nflex-direction: row !important;\n}\n\n.fides-banner-description a:hover, .fides-modal-description a:hover {\n text-decoration: none;\n}\n\n\n#fides-banner-inner-container a.focus-visible {\n outline: 1px solid ").concat(theme.colors.black, " !important;\n}\n\n div#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}\n");
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { initializeFides } from './fides';
|
|
1
2
|
import { initializeGTM } from './gtm';
|
|
2
3
|
import { initializeOneTrust } from './onetrust';
|
|
3
4
|
import { initializePartytown } from './partytown';
|
|
@@ -27,6 +28,7 @@ export const initializeTrackingIntegrations = async _ref => {
|
|
|
27
28
|
environment,
|
|
28
29
|
scriptId: oneTrustScript
|
|
29
30
|
});
|
|
31
|
+
initializeFides();
|
|
30
32
|
|
|
31
33
|
// Load GTM
|
|
32
34
|
initializeGTM({
|
|
@@ -31,4 +31,4 @@ export const initializeOneTrust = async _ref => {
|
|
|
31
31
|
|
|
32
32
|
// For now, these three values duplicate theme colors from gamut-styles
|
|
33
33
|
// We don't want to take a full dependency on that package here...
|
|
34
|
-
const rawStyles = "\n:root {\n --onetrust-brand-purple: #3A10E5;\n --onetrust-color-gray-500: #828285;\n --onetrust-color-white: #fff;\n}\n\n#onetrust-banner-sdk {\n padding: 1rem !important;\n}\n#onetrust-banner-sdk > .ot-sdk-container {\n width: 100% !important;\n}\n#onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row {\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n max-width: 1436px !important;\n margin: 0 auto !important;\n}\n#onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row:after {\n content: none !important;\n}\n#onetrust-banner-sdk > div > .ot-sdk-container > .ot-sdk-row {\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n max-width: 1436px !important;\n margin: 0 auto !important;\n}\n#onetrust-banner-sdk > div > .ot-sdk-container > .ot-sdk-row:after {\n content: none !important;\n}\n#onetrust-group-container {\n display: flex !important;\n justify-content: center;\n float: none !important;\n width: 100% !important;\n max-width: 1148px !important;\n margin-left: 0 !important;\n margin-bottom: 0.625rem !important;\n}\n\n#onetrust-policy,\n#onetrust-policy-text {\n margin: 0 !important;\n font-size: 0.875rem !important;\n line-height: 1.375rem !important;\n text-align: center !important;\n float: none !important;\n}\n#onetrust-policy-text a {\n text-decoration: none;\n line-height: 26px !important;\n margin-left: 0 !important;\n}\n#onetrust-button-group-parent {\n position: relative !important;\n top: initial !important;\n left: initial !important;\n transform: initial !important;\n width: 264px !important;\n margin: 0 !important;\n padding: 0 !important;\n float: none !important;\n}\n#onetrust-button-group {\n display: flex !important;\n margin: 0 !important;\n}\n#onetrust-pc-btn-handler, #onetrust-accept-btn-handler {\n min-width: initial !important;\n padding: 0.375rem 1rem !important;\n margin: 0 !important;\n opacity: 1 !important;\n border-radius: 2px !important;\n line-height: 1.5 !important;\n user-select: none !important;\n font-size: 1rem !important;\n}\n#onetrust-pc-btn-handler:focus, #onetrust-accept-btn-handler:focus {\n box-shadow: 0 0 0 2px var(--onetrust-color-white), 0 0 0 4px var(--onetrust-brand-purple);\n text-decoration: none !important;\n outline: none !important;\n}\n#onetrust-pc-btn-handler{\n color: var(--onetrust-brand-purple) !important;\n border: 1px solid var(--onetrust-brand-purple)!important;\n background: var(--onetrust-color-white) !important\n}\n#onetrust-accept-btn-handler {\n color: var(--onetrust-color-white) !important;\n background: var(--onetrust-brand-purple)!important;\n margin-left: 1rem !important;\n}\n#onetrust-close-btn-container {\n display: none !important;\n}\n\n.pc-logo {\n display: none !important;\n}\n\n#accept-recommended-btn-handler,\n.ot-pc-refuse-all-handler,\n.save-preference-btn-handler {\n margin-left: 4px !important;\n font-size: 14px !important;\n}\n\n#accept-recommended-btn-handler:focus,\n#onetrust-pc-sdk .ot-pc-refuse-all-handler:focus,\n#onetrust-pc-sdk .save-preference-btn-handler:focus {\n box-shadow: 0 0 0 2px var(--onetrust-color-white), 0 0 0 4px var(--onetrust-brand-purple);\n text-decoration: none !important;\n outline: none !important;\n opacity: 1 !important;\n}\n\n.ot-switch-label {\n border: 1px solid var(--onetrust-color-gray-500) !important;\n background-color: var(--onetrust-color-gray-500) !important;\n}\n\n.ot-switch-nob {\n background: var(--onetrust-color-white) !important;\n}\n\n.ot-switch-inner:before {\n background-color: var(--onetrust-brand-purple) !important;\n}\n\n.switch-checkbox:checked+.ot-switch-label .ot-switch-nob {\n border-color: var(--onetrust-brand-purple) !important;\n}\n\n.ot-pc-footer-logo {\n display: none !important;\n}\n\n#onetrust-banner-sdk>.ot-sdk-container {\n overflow: visible !important;\n}\n\n#onetrust-pc-sdk .category-item .ot-switch.ot-toggle input:focus + .ot-switch-label {\n \toutline-color: var(--onetrust-brand-purple) !important;\n}\n#onetrust-pc-sdk .category-item .ot-switch.ot-toggle input:focus+.ot-switch-label {\n outline-width: 3px !important;\n outline-offset: 2px !important;\n}\n\n@media (max-width: 30rem) {\n #accept-recommended-btn-handler,\n .ot-pc-refuse-all-handler,\n .save-preference-btn-handler {\n width: 96% !important;\n }\n}\n\n@media (min-width: 37.5rem) {\n #onetrust-banner-sdk {\n padding: 0.875rem 1rem !important;\n }\n}\n@media (min-width: 48rem) {\n #onetrust-banner-sdk {\n padding: 0.875rem 1.25rem !important;\n }\n}\n@media (min-width: 1650px) {\n #onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row {\n flex-direction: row !important;\n justify-content: space-between !important;\n }\n #onetrust-banner-sdk > div > .ot-sdk-container > .ot-sdk-row {\n flex-direction: row !important;\n justify-content: space-between !important;\n }\n #onetrust-group-container {\n margin-bottom: 0 !important;\n }\n #onetrust-button-group {\n flex-direction: row !important;\n }\n}\n";
|
|
34
|
+
const rawStyles = "\n:root {\n --onetrust-brand-purple: #3A10E5;\n --onetrust-color-gray-500: #828285;\n --onetrust-color-white: #fff;\n}\n\n#onetrust-banner-sdk {\n padding: 1rem !important;\n display: none !important;\n}\n#onetrust-banner-sdk > .ot-sdk-container {\n width: 100% !important;\n}\n#onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row {\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n max-width: 1436px !important;\n margin: 0 auto !important;\n}\n#onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row:after {\n content: none !important;\n}\n#onetrust-banner-sdk > div > .ot-sdk-container > .ot-sdk-row {\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n max-width: 1436px !important;\n margin: 0 auto !important;\n}\n#onetrust-banner-sdk > div > .ot-sdk-container > .ot-sdk-row:after {\n content: none !important;\n}\n#onetrust-group-container {\n display: flex !important;\n justify-content: center;\n float: none !important;\n width: 100% !important;\n max-width: 1148px !important;\n margin-left: 0 !important;\n margin-bottom: 0.625rem !important;\n}\n\n#onetrust-policy,\n#onetrust-policy-text {\n margin: 0 !important;\n font-size: 0.875rem !important;\n line-height: 1.375rem !important;\n text-align: center !important;\n float: none !important;\n}\n#onetrust-policy-text a {\n text-decoration: none;\n line-height: 26px !important;\n margin-left: 0 !important;\n}\n#onetrust-button-group-parent {\n position: relative !important;\n top: initial !important;\n left: initial !important;\n transform: initial !important;\n width: 264px !important;\n margin: 0 !important;\n padding: 0 !important;\n float: none !important;\n}\n#onetrust-button-group {\n display: flex !important;\n margin: 0 !important;\n}\n#onetrust-pc-btn-handler, #onetrust-accept-btn-handler {\n min-width: initial !important;\n padding: 0.375rem 1rem !important;\n margin: 0 !important;\n opacity: 1 !important;\n border-radius: 2px !important;\n line-height: 1.5 !important;\n user-select: none !important;\n font-size: 1rem !important;\n}\n#onetrust-pc-btn-handler:focus, #onetrust-accept-btn-handler:focus {\n box-shadow: 0 0 0 2px var(--onetrust-color-white), 0 0 0 4px var(--onetrust-brand-purple);\n text-decoration: none !important;\n outline: none !important;\n}\n#onetrust-pc-btn-handler{\n color: var(--onetrust-brand-purple) !important;\n border: 1px solid var(--onetrust-brand-purple)!important;\n background: var(--onetrust-color-white) !important\n}\n#onetrust-accept-btn-handler {\n color: var(--onetrust-color-white) !important;\n background: var(--onetrust-brand-purple)!important;\n margin-left: 1rem !important;\n}\n#onetrust-close-btn-container {\n display: none !important;\n}\n\n.pc-logo {\n display: none !important;\n}\n\n#accept-recommended-btn-handler,\n.ot-pc-refuse-all-handler,\n.save-preference-btn-handler {\n margin-left: 4px !important;\n font-size: 14px !important;\n}\n\n#accept-recommended-btn-handler:focus,\n#onetrust-pc-sdk .ot-pc-refuse-all-handler:focus,\n#onetrust-pc-sdk .save-preference-btn-handler:focus {\n box-shadow: 0 0 0 2px var(--onetrust-color-white), 0 0 0 4px var(--onetrust-brand-purple);\n text-decoration: none !important;\n outline: none !important;\n opacity: 1 !important;\n}\n\n.ot-switch-label {\n border: 1px solid var(--onetrust-color-gray-500) !important;\n background-color: var(--onetrust-color-gray-500) !important;\n}\n\n.ot-switch-nob {\n background: var(--onetrust-color-white) !important;\n}\n\n.ot-switch-inner:before {\n background-color: var(--onetrust-brand-purple) !important;\n}\n\n.switch-checkbox:checked+.ot-switch-label .ot-switch-nob {\n border-color: var(--onetrust-brand-purple) !important;\n}\n\n.ot-pc-footer-logo {\n display: none !important;\n}\n\n#onetrust-banner-sdk>.ot-sdk-container {\n overflow: visible !important;\n}\n\n#onetrust-pc-sdk .category-item .ot-switch.ot-toggle input:focus + .ot-switch-label {\n \toutline-color: var(--onetrust-brand-purple) !important;\n}\n#onetrust-pc-sdk .category-item .ot-switch.ot-toggle input:focus+.ot-switch-label {\n outline-width: 3px !important;\n outline-offset: 2px !important;\n}\n\n@media (max-width: 30rem) {\n #accept-recommended-btn-handler,\n .ot-pc-refuse-all-handler,\n .save-preference-btn-handler {\n width: 96% !important;\n }\n}\n\n@media (min-width: 37.5rem) {\n #onetrust-banner-sdk {\n padding: 0.875rem 1rem !important;\n }\n}\n@media (min-width: 48rem) {\n #onetrust-banner-sdk {\n padding: 0.875rem 1.25rem !important;\n }\n}\n@media (min-width: 1650px) {\n #onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row {\n flex-direction: row !important;\n justify-content: space-between !important;\n }\n #onetrust-banner-sdk > div > .ot-sdk-container > .ot-sdk-row {\n flex-direction: row !important;\n justify-content: space-between !important;\n }\n #onetrust-group-container {\n margin-bottom: 0 !important;\n }\n #onetrust-button-group {\n flex-direction: row !important;\n }\n}\n";
|
package/package.json
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/tracking",
|
|
3
3
|
"description": "Tracking library for Codecademy",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.47-alpha.91cdf69b7d.0",
|
|
5
5
|
"author": "Codecademy Engineering <dev@codecademy.com>",
|
|
6
6
|
"dependencies": {
|
|
7
|
+
"@codecademy/gamut-styles": "*",
|
|
7
8
|
"@qwik.dev/partytown": "0.11.0"
|
|
8
9
|
},
|
|
9
10
|
"files": [
|
|
@@ -16,5 +17,5 @@
|
|
|
16
17
|
"access": "public"
|
|
17
18
|
},
|
|
18
19
|
"repository": "git@github.com:codecademy-engineering/mono.git",
|
|
19
|
-
"gitHead": "
|
|
20
|
+
"gitHead": "585f39fdda86c68230df69d96ddc7160340ed8ea"
|
|
20
21
|
}
|