@streamlayer/react-ui 1.22.6 → 1.23.0

package/lib/ui/gamification/tabs/index.js

@@ -1,17 +1,17 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { Button as i, Title as l, Container as a, STabs as h } from "./styles.js";
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { Button as d, Title as i, Container as l, STabs as h } from "./styles.js";
 var m = /* @__PURE__ */ ((r) => (r.HOME = "home", r.LEADERBOARD = "leaderboard", r))(m || {});
-const t = ({ title: r, active: o, onClick: n }) => /* @__PURE__ */ e(i, { onClick: n, "data-selected": o, children: /* @__PURE__ */ e(l, { children: r }) }), b = ({ activePage: r = "home", toggleActivePage: o }) => /* @__PURE__ */ e(a, { children: /* @__PURE__ */ d(h, { "data-position": r === "home" ? "left" : "right", children: [
-  /* @__PURE__ */ e(t, { title: "Home", active: r === "home", onClick: () => o(
+const o = ({ title: r, active: e, onClick: n }) => /* @__PURE__ */ t(d, { "data-a": "intr", onClick: n, "data-selected": e, children: /* @__PURE__ */ t(i, { "data-a": "intr", children: r }) }), b = ({ activePage: r = "home", toggleActivePage: e }) => /* @__PURE__ */ t(l, { children: /* @__PURE__ */ a(h, { "data-position": r === "home" ? "left" : "right", children: [
+  /* @__PURE__ */ t(o, { title: "Home", active: r === "home", onClick: () => e(
     "home"
     /* HOME */
   ) }),
-  /* @__PURE__ */ e(
-    t,
+  /* @__PURE__ */ t(
+    o,
     {
       title: "Friends",
       active: r === "leaderboard",
-      onClick: () => o(
+      onClick: () => e(
         "leaderboard"
         /* LEADERBOARD */
       )
@@ -20,6 +20,6 @@ const t = ({ title: r, active: o, onClick: n }) => /* @__PURE__ */ e(i, { onClic
 ] }) });
 export {
   m as ActivePages,
-  t as Tab,
+  o as Tab,
   b as Tabs
 };

package/lib/ui/gamification/vote/insight-details/index.js

@@ -1,11 +1,11 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { jsxs as o, jsx as l } from "react/jsx-runtime";
 import { InsightContent as k } from "../../../questions/insight/index.js";
-import { Container as m, WebLinkBtn as c, WebLinkIcon as e } from "./styles.js";
-const p = ({ instantView: r, ...b }) => /* @__PURE__ */ l(m, { children: [
-  /* @__PURE__ */ o(k, { instantView: r, ...b, isDetail: !0 }),
-  (r == null ? void 0 : r.webLink) && /* @__PURE__ */ l(c, { href: r == null ? void 0 : r.webLink.url, target: "_blank", "data-analytics": "web-link", children: [
+import { Container as m, WebLinkBtn as e, WebLinkIcon as c } from "./styles.js";
+const p = ({ instantView: r, ...b }) => /* @__PURE__ */ o(m, { children: [
+  /* @__PURE__ */ l(k, { instantView: r, ...b, isDetail: !0 }),
+  (r == null ? void 0 : r.webLink) && /* @__PURE__ */ o(e, { href: r == null ? void 0 : r.webLink.url, target: "_blank", "data-a": "web-link", children: [
     r == null ? void 0 : r.webLink.label,
-    /* @__PURE__ */ o(e, { name: "icon-external-link" })
+    /* @__PURE__ */ l(c, { name: "icon-external-link" })
   ] })
 ] });
 export {

package/lib/ui/gamification/vote/vote-option/index.js

@@ -1,21 +1,21 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import { useState as j, useLayoutEffect as y } from "react";
-import { QuestionImages as a, QuestionType as o, QuestionStatus as S } from "@streamlayer/sdk-web-types";
+import { QuestionImages as s, QuestionType as o, QuestionStatus as S } from "@streamlayer/sdk-web-types";
 import { AnimatedCounter as U } from "../../../animated-counter/index.js";
 import { IconDefault as V, IconContainer as $, IconWrap as F, IconCircle as M, ButtonContainer as z, ButtonPctWrap as G, ButtonPct as H, ButtonBody as J, Title as K, PtsWrap as X, Pts as Y, Indicators as Z, CheckIcon as _, Percentage as q } from "./styles.js";
 const E = {
-  [a.CENTERED]: (t) => /* @__PURE__ */ e(V, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
-  [a.TRANSPARENT]: (t) => /* @__PURE__ */ e($, { "data-testid": "vote-icon", children: /* @__PURE__ */ e(F, { style: { backgroundImage: `url(${t})` } }) }),
-  [a.ROUNDED]: (t) => /* @__PURE__ */ e(M, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
-  [a.NONE]: () => null,
-  [a.UNSET]: () => null
-}, tt = ({ questionType: t, hasCorrectAnswer: c, correct: n, youVoted: r, questionVoted: i }) => {
+  [s.CENTERED]: (t) => /* @__PURE__ */ e(V, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
+  [s.TRANSPARENT]: (t) => /* @__PURE__ */ e($, { "data-testid": "vote-icon", children: /* @__PURE__ */ e(F, { style: { backgroundImage: `url(${t})` } }) }),
+  [s.ROUNDED]: (t) => /* @__PURE__ */ e(M, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
+  [s.NONE]: () => null,
+  [s.UNSET]: () => null
+}, tt = ({ questionType: t, hasCorrectAnswer: a, correct: n, youVoted: r, questionVoted: i }) => {
   if (t === o.POLL && r)
     return "voted";
   if (t === o.PREDICTION) {
-    if (!c && i)
+    if (!a && i)
       return r ? "voted" : "unset";
-    if (c && i)
+    if (a && i)
       return r ? n ? "correct" : "incorrect" : "unset";
     if (r)
       return "correct";
@@ -23,15 +23,15 @@ const E = {
   return t === o.TRIVIA && i && r ? n ? "correct" : "incorrect" : "unset";
 }, et = ({
   questionType: t,
-  questionVoted: c,
+  questionVoted: a,
   correct: n,
   hasCorrectAnswer: r,
   questionStatus: i
-}) => t === o.TRIVIA ? c && n : t === o.PREDICTION ? c && n && r || i === S.RESOLVED && n : !1, st = (t) => {
+}) => t === o.TRIVIA ? a && n : t === o.PREDICTION ? a && n && r || i === S.RESOLVED && n : !1, ct = (t) => {
   var N;
   const {
     // option props
-    id: c,
+    id: a,
     icon: n,
     text: r,
     percentageDecimal: i,
@@ -42,7 +42,7 @@ const E = {
     onPercentsAnimated: u,
     youSelected: h,
     youVoted: w,
-    questionVoted: s,
+    questionVoted: c,
     imageMode: P,
     answerTimeExpired: k,
     questionStatus: C,
@@ -52,7 +52,7 @@ const E = {
     hasCorrectAnswer: x,
     marketClosed: f,
     isEarlyPrediction: B
-  } = t, [L, R] = j(0), I = tt(t), Q = et({ questionType: d, questionVoted: s, correct: A, hasCorrectAnswer: x, questionStatus: C }), m = f && d === o.PREDICTION, T = s || m, W = d === o.PREDICTION && !s && !f, p = s && !h && I !== "incorrect" && !w;
+  } = t, [L, R] = j(0), I = tt(t), Q = et({ questionType: d, questionVoted: c, correct: A, hasCorrectAnswer: x, questionStatus: C }), m = f && d === o.PREDICTION, T = c || m, W = d === o.PREDICTION && !c && !f, p = c && !h && I !== "incorrect" && !w;
   return y(() => {
     R(0), requestAnimationFrame(() => {
       R(i);
@@ -60,11 +60,12 @@ const E = {
   }, [i]), /* @__PURE__ */ l(
     z,
     {
-      value: c,
+      value: a,
       "data-selected": h,
       "data-answer-state": I,
-      disabled: s || v || k || m,
+      disabled: c || v || k || m,
       "data-is-not-checked": p,
+      "data-a": "intr",
       onClick: (b) => {
         g(
           d === o.PREDICTION ? f : C === S.RESOLVED
@@ -82,9 +83,9 @@ const E = {
             }
           }
         ) }),
-        /* @__PURE__ */ l(J, { children: [
+        /* @__PURE__ */ l(J, { "data-a": "intr", children: [
           n && P && ((N = E[P]) == null ? void 0 : N.call(E, n)),
-          /* @__PURE__ */ e(K, { children: r }),
+          /* @__PURE__ */ e(K, { "data-a": "intr", children: r }),
           W && /* @__PURE__ */ l(X, { children: [
             D,
             /* @__PURE__ */ e(Y, { children: "pts" })
@@ -99,5 +100,5 @@ const E = {
   );
 };
 export {
-  st as VotingOption
+  ct as VotingOption
 };

package/lib/ui/navigation/button/index.js

@@ -1,22 +1,23 @@
-import { jsx as t, jsxs as l, Fragment as d } from "react/jsx-runtime";
+import { jsx as e, jsxs as d, Fragment as l } from "react/jsx-runtime";
 import { cx as m } from "@linaria/core";
 import { SButton as s, SelectedButton as u, HoverIconState as h, HoverIconLeaderboardState as p, ButtonIcon as B, ButtonLabel as f } from "./styles.js";
-const I = ({ disabled: n, active: r, onClick: a, label: c, icon: o, id: e }) => /* @__PURE__ */ t(
+const i = ({ disabled: n, active: r, onClick: a, label: c, icon: o, id: t }) => /* @__PURE__ */ e(
   s,
   {
     onClick: a,
+    "data-a": "intr",
     disabled: n,
     className: m(
       r && u,
-      !r && (e === "channels" || e === "featuredGroups") && h,
-      !r && e === "leaderboard" && p
+      !r && (t === "channels" || t === "featuredGroups") && h,
+      !r && t === "leaderboard" && p
     ),
-    children: /* @__PURE__ */ l(d, { children: [
-      o && /* @__PURE__ */ t(B, { children: o }),
-      /* @__PURE__ */ t(f, { children: c })
+    children: /* @__PURE__ */ d(l, { children: [
+      o && /* @__PURE__ */ e(B, { children: o }),
+      /* @__PURE__ */ e(f, { children: c })
     ] })
   }
 );
 export {
-  I as Button
+  i as Button
 };

package/lib/ui/theme/constants.d.ts

@@ -9,6 +9,7 @@ export declare const COLORS: {
     PRIMARY_TEXT: string;
     SECONDARY_TEXT: string;
     QUESTION_TYPE_ICON: string;
+    QUESTION_BODY_TEXT: string;
     SUCCESS: string;
     UNSUCCESS: string;
     SECONDARY_RED1: string;

package/lib/ui/theme/constants.js

@@ -11,6 +11,7 @@ const R = {
   PRIMARY_TEXT: "#090E13",
   SECONDARY_TEXT: "rgba(10, 14, 19, 0.70)",
   QUESTION_TYPE_ICON: "#1D7BFF",
+  QUESTION_BODY_TEXT: "#090E13",
   SUCCESS: "#107D57",
   UNSUCCESS: "#DF2F3B",
   SECONDARY_RED1: "#DF2F3B",
@@ -87,7 +88,7 @@ const R = {
   SIZE_DEFAULT1: "14px",
   SIZE_DEFAULT2: "12px",
   LINE_HEIGHT: "24px",
-  MARGIN_TITLE_DEFAULT: "24px 0px"
+  MARGIN_TITLE_DEFAULT: "0px 0px 12px"
 }, A = {
   xs: 324,
   sm: 576,

package/lib/ui/video-player/index.js

@@ -64,6 +64,7 @@ const G = (s) => {
     B,
     {
       onClick: b ? void 0 : S,
+      "data-a": "intr",
       className: C(d && N, b && q, M),
       style: y ? { aspectRatio: y } : {},
       children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.22.6",
+  "version": "1.23.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -69,19 +69,19 @@
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
     "uuid": "^11.1.0",
-    "@streamlayer/feature-gamification": "^1.16.8",
-    "@streamlayer/react-polyfills": "^0.1.15",
-    "@streamlayer/sdk-web": "^1.10.8",
-    "@streamlayer/sdk-web-analytics": "^1.7.8",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.1.34",
-    "@streamlayer/sdk-web-api": "^1.8.8",
-    "@streamlayer/sdk-web-core": "^1.11.10",
-    "@streamlayer/sdk-web-features": "^1.0.55",
-    "@streamlayer/sdk-web-interfaces": "^1.4.21",
-    "@streamlayer/sdk-web-logger": "^1.0.55",
-    "@streamlayer/sdk-web-notifications": "^1.3.17",
-    "@streamlayer/sdk-web-storage": "^1.0.55",
-    "@streamlayer/sdk-web-types": "^1.10.12"
+    "@streamlayer/feature-gamification": "^1.16.9",
+    "@streamlayer/react-polyfills": "^0.1.16",
+    "@streamlayer/sdk-web": "^1.10.9",
+    "@streamlayer/sdk-web-analytics": "^1.7.9",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.1.35",
+    "@streamlayer/sdk-web-api": "^1.8.9",
+    "@streamlayer/sdk-web-core": "^1.11.11",
+    "@streamlayer/sdk-web-features": "^1.0.56",
+    "@streamlayer/sdk-web-interfaces": "^1.5.0",
+    "@streamlayer/sdk-web-logger": "^1.0.56",
+    "@streamlayer/sdk-web-notifications": "^1.3.18",
+    "@streamlayer/sdk-web-storage": "^1.0.56",
+    "@streamlayer/sdk-web-types": "^1.10.13"
   },
   "nx": {
     "implicitDependencies": [
@@ -121,7 +121,7 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@streamlayer/react": "^1.14.8"
+    "@streamlayer/react": "^1.15.0"
   },
   "dependencies": {
     "@dailymotion/vast-client": "^6.2.0",