@streamlayer/react-ui 0.62.0 → 0.64.0

package/lib/ui/gamification/question/notification/prediction-result/animation-lines/styles.js

@@ -0,0 +1,165 @@
+import { styled as s } from "@linaria/react";
+const o = s.div`
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: -1px;
+  left: 0;
+  z-index: 1;
+  display: none;
+
+  &[data-active='true'] {
+    display: block;
+
+    & > div {
+      &:nth-child(1) {
+        animation: showLines 1000ms 50ms ease-out forwards, hiddenLines 1500ms 4500ms ease-in forwards;
+      }
+
+      &:nth-child(2) {
+        animation: showLines 700ms 500ms ease-out forwards, hiddenLines 1000ms 5000ms ease-in forwards;
+      }
+
+      &:nth-child(3) {
+        animation: showLines 500ms 700ms ease-out forwards, hiddenLines 700ms 5300ms ease-in forwards;
+      }
+
+      &:nth-child(4) {
+        animation: showLines 400ms 1000ms ease-out forwards, hiddenLines 500ms 5500ms ease-in forwards;
+      }
+    }
+
+    &[data-first-screen='true'] {
+      & > div {
+        &:nth-child(1) {
+          animation: showLines 1000ms 1000ms ease-out forwards, hiddenLines 1500ms 4500ms ease-in forwards;
+        }
+
+        &:nth-child(2) {
+          animation: showLines 700ms 1400ms ease-out forwards, hiddenLines 1000ms 5000ms ease-in forwards;
+        }
+
+        &:nth-child(3) {
+          animation: showLines 500ms 1700ms ease-out forwards, hiddenLines 700ms 5300ms ease-in forwards;
+        }
+      }
+    }
+
+    &[data-last-screen='true'] {
+      & > div {
+        &:nth-child(1) {
+          animation: showLines 1000ms 50ms ease-out forwards;
+        }
+
+        &:nth-child(2) {
+          animation: showLines 700ms 500ms ease-out forwards;
+        }
+
+        &:nth-child(3) {
+          animation: showLines 500ms 700ms ease-out forwards;
+        }
+
+        &:nth-child(4) {
+          animation: showLines 400ms 1000ms ease-out forwards;
+        }
+      }
+    }
+  }
+
+  & > div {
+    background-color: var(--color-white);
+  }
+
+  &[data-correct='true'] {
+    & > div {
+      background-color: var(--color-primary-green2);
+    }
+  }
+
+  &[data-correct='false'] {
+    & > div {
+      background-color: var(--color-neutrals-gray6);
+    }
+  }
+
+  @keyframes showLines {
+    0% {
+      transform: translateX(400px) rotate(137deg);
+    }
+
+    100% {
+      transform: translateX(0px) rotate(137deg);
+    }
+  }
+
+  @keyframes hiddenLines {
+    0% {
+      width: 1000px;
+    }
+
+    100% {
+      width: 2000px;
+      opacity: 0;
+    }
+  }
+`, e = s.div`
+  position: absolute;
+  opacity: 0.05;
+  height: 1000px;
+  width: 1000px;
+  bottom: -580px;
+  transform: translateX(400px) rotate(137deg);
+`, n = s(e)`
+  right: -818px;
+`, t = s(e)`
+  right: -902px;
+`, r = s(e)`
+  right: -997px;
+`, a = s(e)`
+  right: -891px;
+`, h = s(e)`
+  right: -942px;
+`, d = s(e)`
+  right: -996px;
+`, m = s(e)`
+  right: -931px;
+`, c = s(e)`
+  right: -981px;
+  opacity: 0.1;
+`, w = s(e)`
+  right: -1035px;
+  opacity: 0.15;
+`, p = s(e)`
+  right: -1088px;
+  opacity: 0.2;
+`, L = s(e)`
+  right: -931px;
+  opacity: 0.1;
+`, l = s(e)`
+  right: -981px;
+  opacity: 0.1;
+`, f = s(e)`
+  right: -1035px;
+  opacity: 0.1;
+`, u = s(e)`
+  right: -1088px;
+  opacity: 0.1;
+`;
+export {
+  u as BGFourLineFour,
+  L as BGFourLineOne,
+  f as BGFourLineThree,
+  l as BGFourLineTwo,
+  e as BGLineBase,
+  n as BGOneLineOne,
+  r as BGOneLineThree,
+  t as BGOneLineTwo,
+  p as BGThreeLineFour,
+  m as BGThreeLineOne,
+  w as BGThreeLineThree,
+  c as BGThreeLineTwo,
+  a as BGTwoLineOne,
+  d as BGTwoLineThree,
+  h as BGTwoLineTwo,
+  o as BGWrap
+};

package/lib/ui/gamification/question/notification/prediction-result/index.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
-import type { Notification as NotificationProps } from '@streamlayer/sdk-web-notifications';
-export declare const PredictionResult: React.FC<NotificationProps>;
+import type { NotificationData } from '@streamlayer/sdk-web-notifications';
+export declare const PredictionResult: React.FC<NotificationData['question'] & {
+    close?: () => void;
+}>;

package/lib/ui/gamification/question/notification/prediction-result/index.js

@@ -1,7 +1,78 @@
-import { jsx as o } from "react/jsx-runtime";
-import { PredictionResultContainer as t } from "./styles.js";
+import { jsxs as c, jsx as i, Fragment as f } from "react/jsx-runtime";
+import { useState as b, useEffect as g } from "react";
+import { AnimationLines as S } from "./animation-lines/index.js";
+import { Container as x, AnimateContent as E, Content as t, Title as n, SubtitleFG as d, Subtitle as a, AnswerText as h, FeedbackIcon as m, CloseButton as C, CloseIcon as p } from "./styles.js";
+import "./animation-lines/styles.js";
 import "@linaria/react";
-const c = ({ close: r }) => /* @__PURE__ */ o(t, { children: /* @__PURE__ */ o("button", { onClick: r, children: "close" }) });
+import "../../../../icons/index.js";
+const j = ({
+  close: u,
+  votedAnswer: l,
+  correct: r,
+  correctAnswerTitle: k
+}) => {
+  const [o, s] = b(1);
+  return g(() => {
+    const P = setInterval(() => {
+      s((e) => r && e > 4 || !r && e > 3 ? e : ++e);
+    }, 6e3);
+    return () => clearInterval(P);
+  }, [r]), /* @__PURE__ */ c(x, { "data-bg-color-white": o > 3, children: [
+    /* @__PURE__ */ i(S, { step: o, correct: r }),
+    /* @__PURE__ */ c(E, { "data-active-number": o, children: [
+      /* @__PURE__ */ c(t, { children: [
+        /* @__PURE__ */ i(n, { children: "Master" }),
+        /* @__PURE__ */ i(d, { children: "FEATURED GROUPS +" })
+      ] }),
+      /* @__PURE__ */ c(t, { children: [
+        /* @__PURE__ */ i(n, { children: "Prediction results are in!" }),
+        /* @__PURE__ */ i(d, { children: "FEATURED GROUPS +" })
+      ] }),
+      /* @__PURE__ */ c(t, { children: [
+        /* @__PURE__ */ i(n, { children: "Who holds the most birdies in golf?" }),
+        /* @__PURE__ */ c(a, { children: [
+          "Your Pick: ",
+          /* @__PURE__ */ i(h, { children: l == null ? void 0 : l.title })
+        ] })
+      ] }),
+      r ? /* @__PURE__ */ c(f, { children: [
+        /* @__PURE__ */ c(t, { "data-color-green": "true", children: [
+          /* @__PURE__ */ i(n, { children: "Congratulations! You answered correctly." }),
+          /* @__PURE__ */ c(a, { children: [
+            /* @__PURE__ */ i(m, { name: "selected" }),
+            "Your Pick: ",
+            /* @__PURE__ */ i(h, { children: l == null ? void 0 : l.title })
+          ] })
+        ] }),
+        /* @__PURE__ */ c(t, { "data-color-green": "true", children: [
+          /* @__PURE__ */ i(C, { onClick: u, children: /* @__PURE__ */ i(p, { name: "icon-cross" }) }),
+          /* @__PURE__ */ c(n, { children: [
+            "+",
+            l == null ? void 0 : l.points,
+            " points"
+          ] }),
+          /* @__PURE__ */ c(a, { children: [
+            /* @__PURE__ */ i(m, { name: "selected" }),
+            "Your Pick: ",
+            /* @__PURE__ */ i(h, { children: l == null ? void 0 : l.title })
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ c(t, { children: [
+        /* @__PURE__ */ i(C, { onClick: u, children: /* @__PURE__ */ i(p, { name: "icon-cross" }) }),
+        /* @__PURE__ */ c(n, { "data-incorrect": "true", children: [
+          "Better luck next time! Correct: ",
+          k,
+          "."
+        ] }),
+        /* @__PURE__ */ c(a, { "data-incorrect": "true", children: [
+          /* @__PURE__ */ i(m, { name: "circleClose" }),
+          "Your Pick: ",
+          /* @__PURE__ */ i(h, { children: l == null ? void 0 : l.title })
+        ] })
+      ] })
+    ] })
+  ] });
+};
 export {
-  c as PredictionResult
+  j as PredictionResult
 };

package/lib/ui/gamification/question/notification/prediction-result/styles.d.ts

@@ -1,2 +1,13 @@
 /// <reference types="react" />
-export declare const PredictionResultContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const AnimateContent: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Content: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Title: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Subtitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SubtitleFG: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export declare const AnswerText: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const FeedbackIcon: any;
+export declare const CloseButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const CloseIcon: any;

package/lib/ui/gamification/question/notification/prediction-result/styles.js

@@ -1,12 +1,132 @@
-import { styled as r } from "@linaria/react";
-const i = r.div`
+import { styled as t } from "@linaria/react";
+import { SvgIcon as r } from "../../../../icons/index.js";
+import "react/jsx-runtime";
+import "react";
+const c = t.div`
   box-sizing: border-box;
   width: 100%;
   height: 118px;
-  border-radius: 10px;
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
   background-color: var(--color-primary-green2);
+
+  &[data-bg-color-white='true'] {
+    background-color: var(--color-white);
+  }
+
+  transition: background-color 700ms ease-in;
+`, s = t.div`
+  width: 100%;
+  background-color: transparent;
+  transform: translateY(0px);
+  transition: transform 1s ease-in;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+
+  &[data-active-number='2'] {
+    transform: translateY(-118px);
+  }
+
+  &[data-active-number='3'] {
+    transform: translateY(-236px);
+  }
+
+  &[data-active-number='4'] {
+    transform: translateY(-354px);
+  }
+
+  &[data-active-number='5'] {
+    transform: translateY(-472px);
+  }
+`, l = t.div`
+  width: 100%;
+  height: 118px;
+  border-radius: 8px;
+  background-color: transparent;
   position: relative;
+  padding: 22px 16px;
+  color: var(--color-white);
+  font-family: var(--font-serif);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  &[data-color-green='true'] {
+    color: var(--color-primary-green1);
+  }
+`, p = t.div`
+  margin-bottom: 10px;
+  font-size: 20px;
+  font-weight: var(--font-weight-default);
+  display: flex;
+  justify-content: center;
+  text-align: center;
+
+  &[data-incorrect='true'] {
+    color: var(--color-neutrals-gray9);
+  }
+`, o = t.div`
+  font-size: 12px;
+  font-weight: 500;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+  font-family: var(--font-regular);
+
+  &[data-incorrect='true'] {
+    color: var(--color-secondary-red1);
+  }
+`, d = t(o)`
+  font-family: var(--font-serif);
+`, f = t.div`
+  font-weight: 400px;
+  margin-left: 5px;
+`, g = t(r)`
+  width: 14px;
+  height: 14px;
+  margin-right: 6px;
+`, x = t.button`
+  width: 30px;
+  height: 30px;
+  border: none;
+  border-radius: 50%;
+  outline: none;
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  cursor: pointer;
+`, u = t(r)`
+  width: 20px;
+  height: 20px;
+
+  path {
+    stroke: var(--color-neutrals-gray7);
+  }
+
+  &:hover {
+    path {
+      stroke: var(--color-primary-green2);
+    }
+  }
 `;
 export {
-  i as PredictionResultContainer
+  s as AnimateContent,
+  f as AnswerText,
+  x as CloseButton,
+  u as CloseIcon,
+  c as Container,
+  l as Content,
+  g as FeedbackIcon,
+  o as Subtitle,
+  d as SubtitleFG,
+  p as Title
 };

package/lib/ui/gamification/question/notification/styles.js

@@ -35,8 +35,8 @@ const p = o.div`
   display: flex;
   align-items: center;
 `, l = o(r)`
-  width: 20px;
-  height: 20px;
+  width: 13px;
+  height: 13px;
   margin-right: 4px;
 
   path {

package/lib/ui/icons/index.d.ts

@@ -42,6 +42,7 @@ export declare const icons: {
     incorrect: any;
     questionExpired: any;
     selected: any;
+    circleClose: any;
 };
 export declare const Icon: React.FC<{
     name: keyof typeof icons;