@openreplay/tracker 11.0.0 → 11.0.2

package/lib/modules/userTesting/styles.js

@@ -9,28 +9,30 @@ export const bgStyle = {
     alignItems: 'center',
     justifyContent: 'center',
     zIndex: 999999,
+    fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
 };
 export const containerStyle = {
     display: 'flex',
     flexDirection: 'column',
-    gap: '8px',
+    gap: '2rem',
     alignItems: 'center',
     padding: '1.5rem',
-    borderRadius: '0.375rem',
+    borderRadius: '2px',
     border: '1px solid #D9D9D9',
     background: '#FFF',
-    width: '29rem',
+    width: '22rem',
 };
 export const containerWidgetStyle = {
     display: 'flex',
     'flex-direction': 'column',
-    gap: '8px',
+    gap: 'unset',
     'align-items': 'center',
-    padding: '1rem',
-    'border-radius': '0.375rem',
+    padding: 'unset',
+    fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
+    'border-radius': '2px',
     border: '1px solid #D9D9D9',
-    background: '#FFF',
-    width: '29rem',
+    background: 'rgba(255, 255, 255, 0.75)',
+    width: '22rem',
 };
 export const titleStyle = {
     fontFamily: 'Verdana, sans-serif',
@@ -46,10 +48,11 @@ export const descriptionStyle = {
     padding: '1.25rem 0rem',
     color: 'rgba(0, 0, 0, 0.85)',
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '1rem',
+    fontSize: '13px',
     fontStyle: 'normal',
     fontWeight: '400',
-    lineHeight: '1.5rem',
+    lineHeight: 'auto',
+    whiteSpace: 'pre-wrap',
 };
 export const noticeStyle = {
     color: 'rgba(0, 0, 0, 0.85)',
@@ -80,9 +83,9 @@ export const buttonStyle = {
 };
 export const sectionTitleStyle = {
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '0.875rem',
+    fontSize: '13px',
     fontWeight: '500',
-    lineHeight: '1.375rem',
+    lineHeight: 'auto',
     display: 'flex',
     justifyContent: 'space-between',
     width: '100%',
@@ -93,39 +96,40 @@ export const contentStyle = {
     flexDirection: 'column',
     alignItems: 'flex-start',
     gap: '0.625rem',
+    fontSize: '13px',
+    lineHeight: 'auto',
 };
 // New widget styles
 export const titleWidgetStyle = {
     padding: '0.5rem',
     gap: '0.5rem',
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '1.25rem',
+    fontSize: '16px',
     fontStyle: 'normal',
     fontWeight: '500',
-    lineHeight: '1.75rem',
+    lineHeight: 'auto',
     color: 'white',
     display: 'flex',
     alignItems: 'center',
     width: '100%',
-    borderRadius: '0.375rem',
-    background: 'rgba(0, 0, 0, 0.60)',
+    borderRadius: '2px',
+    background: 'rgba(0, 0, 0, 0.75)',
     boxSizing: 'border-box',
 };
 export const descriptionWidgetStyle = {
     boxSizing: 'border-box',
     display: 'block',
     width: '100%',
-    borderRadius: '0.375rem',
-    border: '1px solid #D9D9D9',
+    borderBottom: '1px solid #D9D9D9',
     background: '#FFF',
-    padding: '0.625rem 1rem',
+    padding: '0.65rem',
     alignSelf: 'stretch',
     color: '#000',
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '0.875rem',
+    // fontSize: '0.875rem',
     fontStyle: 'normal',
     fontWeight: '400',
-    lineHeight: '1.375rem',
+    // lineHeight: '1.375rem',
 };
 export const endSectionStyle = Object.assign(Object.assign({}, descriptionWidgetStyle), { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.625rem' });
 export const symbolIcon = {
@@ -156,10 +160,13 @@ export const buttonWidgetStyle = {
     cursor: 'pointer',
 };
 export const stopWidgetStyle = {
-    marginTop: '2rem',
+    marginTop: '1rem',
+    marginBottom: '1rem',
     cursor: 'pointer',
     display: 'block',
-    fontWeight: '600',
+    fontWeight: '500',
+    fontSize: '13px!important',
+    lineHeight: 'auto',
 };
 export const paginationStyle = {
     display: 'flex',
@@ -172,21 +179,27 @@ export const paginationStyle = {
 };
 export const taskNumberActive = {
     display: 'flex',
-    padding: '0.0625rem 0.5rem',
     flexDirection: 'column',
     alignItems: 'center',
+    justifyContent: 'center',
     borderRadius: '6.25em',
     outline: '1px solid #394EFF',
+    fontSize: '13px',
+    height: '24px',
+    width: '24px',
 };
 export const taskNumberDone = {
     display: 'flex',
-    padding: '0.0625rem 0.5rem',
     flexDirection: 'column',
     alignItems: 'center',
+    justifyContent: 'center',
     borderRadius: '6.25em',
     outline: '1px solid #D2DFFF',
     boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
     background: '#D2DFFF',
+    fontSize: '13px',
+    height: '24px',
+    width: '24px',
 };
 export const taskDescriptionCard = {
     borderRadius: '0.375rem',
@@ -203,7 +216,8 @@ export const taskTextStyle = {
     fontWeight: 'bold',
 };
 export const taskDescriptionStyle = {
-    color: '#8C8C8C',
+    fontSize: '13px',
+    lineHeight: 'auto',
 };
 export const taskButtonStyle = {
     marginRight: '0.5rem',
@@ -211,10 +225,10 @@ export const taskButtonStyle = {
     color: '#394EFF',
     textAlign: 'center',
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '0.875rem',
+    fontSize: '13px',
     fontStyle: 'normal',
     fontWeight: '500',
-    lineHeight: '1.375rem',
+    lineHeight: 'auto',
 };
 export const taskButtonBorderedStyle = Object.assign(Object.assign({}, taskButtonStyle), { display: 'flex', padding: '0.25rem 0.9375rem', justifyContent: 'center', alignItems: 'center', gap: '0.5rem', borderRadius: '0.25rem', border: '1px solid #394EFF' });
 export const taskButtonsRow = {
@@ -224,3 +238,11 @@ export const taskButtonsRow = {
     width: '100%',
     boxSizing: 'border-box',
 };
+export const spinnerStyles = {
+    border: '4px solid rgba(255, 255, 255, 0.4)',
+    width: '16px',
+    height: '16px',
+    borderRadius: '50%',
+    borderLeftColor: '#fff',
+    animation: 'spin 0.5s linear infinite',
+};

package/lib/modules/userTesting/utils.d.ts

@@ -0,0 +1,9 @@
+export declare function generateGrid(): HTMLDivElement;
+export declare function generateChevron(): HTMLDivElement;
+export declare function addKeyframes(): void;
+export declare function createSpinner(): HTMLDivElement;
+export declare function createElement(tag: string, className: string, styles: any, textContent?: string, id?: string): HTMLElement;
+export declare const TEST_START = "or_uxt_test_start";
+export declare const TASK_IND = "or_uxt_task_index";
+export declare const SESSION_ID = "or_uxt_session_id";
+export declare const TEST_ID = "or_uxt_test_id";

package/lib/modules/userTesting/utils.js

@@ -0,0 +1,79 @@
+import { spinnerStyles } from './styles.js';
+export function generateGrid() {
+    const grid = document.createElement('div');
+    grid.className = 'grid';
+    for (let i = 0; i < 16; i++) {
+        const cell = document.createElement('div');
+        Object.assign(cell.style, {
+            width: '2px',
+            height: '2px',
+            borderRadius: '10px',
+            background: 'white',
+        });
+        cell.className = 'cell';
+        grid.appendChild(cell);
+    }
+    Object.assign(grid.style, {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(4, 1fr)',
+        gridTemplateRows: 'repeat(4, 1fr)',
+        gap: '2px',
+        cursor: 'grab',
+    });
+    return grid;
+}
+export function generateChevron() {
+    const triangle = document.createElement('div');
+    Object.assign(triangle.style, {
+        width: '0',
+        height: '0',
+        borderLeft: '7px solid transparent',
+        borderRight: '7px solid transparent',
+        borderBottom: '7px solid white',
+    });
+    const container = document.createElement('div');
+    container.appendChild(triangle);
+    Object.assign(container.style, {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '16px',
+        height: '16px',
+        cursor: 'pointer',
+        marginLeft: 'auto',
+        transform: 'rotate(180deg)',
+    });
+    return container;
+}
+export function addKeyframes() {
+    const styleSheet = document.createElement('style');
+    styleSheet.type = 'text/css';
+    styleSheet.innerText = `@keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }`;
+    document.head.appendChild(styleSheet);
+}
+export function createSpinner() {
+    addKeyframes();
+    const spinner = document.createElement('div');
+    spinner.classList.add('spinner');
+    Object.assign(spinner.style, spinnerStyles);
+    return spinner;
+}
+export function createElement(tag, className, styles, textContent, id) {
+    const element = document.createElement(tag);
+    element.className = className;
+    Object.assign(element.style, styles);
+    if (textContent) {
+        element.textContent = textContent;
+    }
+    if (id) {
+        element.id = id;
+    }
+    return element;
+}
+export const TEST_START = 'or_uxt_test_start';
+export const TASK_IND = 'or_uxt_task_index';
+export const SESSION_ID = 'or_uxt_session_id';
+export const TEST_ID = 'or_uxt_test_id';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "11.0.0",
+  "version": "11.0.2",
   "keywords": [
     "logging",
     "replay"