@streamlayer/react-ui 0.1.0

package/src/lib/gamification/user-statistics/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import trophyIcon from '../../../assets/icons/icon-trophy.svg';
+import { Statistics } from './components/statistics';
+import { Rank } from './components/rank';
+import { Container, TopInfo, BottomInfo, User, Avatar, UserInfo, UserName, UserRating, TrophyIcon, Rts, RtsIndicator, Top, Ranks, AvatarPlaceholder, } from './styles';
+const abbreviate = (name) => name
+    .split(/\s+/)
+    .map((p) => p[0])
+    .join('')
+    .toUpperCase();
+export const UserStatistics = ({ avatar, name, points, grade, friendsRank, globalRank, winStreak, correct, incorrect, successRate, }) => {
+    return (_jsxs(Container, { children: [_jsxs(TopInfo, { children: [_jsxs(User, { children: [avatar && _jsx(Avatar, { alt: "avatar", src: avatar }), !avatar && _jsx(AvatarPlaceholder, { children: abbreviate(name) }), _jsxs(UserInfo, { children: [_jsx(UserName, { children: name }), _jsxs(UserRating, { children: [_jsx(TrophyIcon, { alt: "rank-icon", src: trophyIcon }), _jsxs(Rts, { children: [_jsx(RtsIndicator, { children: points || '-' }), "RTS"] }), _jsxs(Top, { children: ["TOP ", grade, "%"] })] })] })] }), _jsxs(Ranks, { children: [_jsx(Rank, { title: "Friens rank", indicator: friendsRank || '-' }), _jsx(Rank, { title: "Global rank", indicator: globalRank || '-' })] })] }), _jsxs(BottomInfo, { children: [_jsx(Statistics, { indicator: winStreak || '-', title: "Win streak" }), _jsx(Statistics, { indicator: correct || '-', title: "Correct" }), _jsx(Statistics, { indicator: incorrect || '-', title: "Incorrect" }), _jsx(Statistics, { indicator: `${successRate || '-'}%`, title: "Success rate" })] })] }));
+};
+//# sourceMappingURL=index.js.map

package/src/lib/gamification/user-statistics/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/gamification/user-statistics/index.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,uCAAuC,CAAA;AAE9D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AACxC,OAAO,EACL,SAAS,EACT,OAAO,EACP,UAAU,EACV,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,UAAU,EACV,GAAG,EACH,YAAY,EACZ,GAAG,EACH,KAAK,EACL,iBAAiB,GAClB,MAAM,UAAU,CAAA;AAejB,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,EAAE,CAClC,IAAI;KACD,KAAK,CAAC,KAAK,CAAC;KACZ,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KAChB,IAAI,CAAC,EAAE,CAAC;KACR,WAAW,EAAE,CAAA;AAElB,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC5D,MAAM,EACN,IAAI,EACJ,MAAM,EACN,KAAK,EACL,WAAW,EACX,UAAU,EACV,SAAS,EACT,OAAO,EACP,SAAS,EACT,WAAW,GACZ,EAAE,EAAE;IACH,OAAO,CACL,MAAC,SAAS,eACR,MAAC,OAAO,eACN,MAAC,IAAI,eACF,MAAM,IAAI,KAAC,MAAM,IAAC,GAAG,EAAC,QAAQ,EAAC,GAAG,EAAE,MAAM,GAAW,EACrD,CAAC,MAAM,IAAI,KAAC,iBAAiB,cAAE,UAAU,CAAC,IAAI,CAAC,GAAqB,EACrE,MAAC,QAAQ,eACP,KAAC,QAAQ,cAAE,IAAI,GAAY,EAC3B,MAAC,UAAU,eACT,KAAC,UAAU,IAAC,GAAG,EAAC,WAAW,EAAC,GAAG,EAAE,UAAU,GAAI,EAC/C,MAAC,GAAG,eACF,KAAC,YAAY,cAAE,MAAM,IAAI,GAAG,GAAgB,WACxC,EACN,MAAC,GAAG,uBAAM,KAAK,SAAQ,IACZ,IACJ,IACN,EACP,MAAC,KAAK,eACJ,KAAC,IAAI,IAAC,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,WAAW,IAAI,GAAG,GAAS,EAChE,KAAC,IAAI,IAAC,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,UAAU,IAAI,GAAG,GAAS,IACzD,IACA,EACV,MAAC,UAAU,eACT,KAAC,UAAU,IAAC,SAAS,EAAE,SAAS,IAAI,GAAG,EAAE,KAAK,EAAC,YAAY,GAAG,EAC9D,KAAC,UAAU,IAAC,SAAS,EAAE,OAAO,IAAI,GAAG,EAAE,KAAK,EAAC,SAAS,GAAG,EACzD,KAAC,UAAU,IAAC,SAAS,EAAE,SAAS,IAAI,GAAG,EAAE,KAAK,EAAC,WAAW,GAAG,EAC7D,KAAC,UAAU,IAAC,SAAS,EAAE,GAAG,WAAW,IAAI,GAAG,GAAG,EAAE,KAAK,EAAC,cAAc,GAAG,IAC7D,IACH,CACb,CAAA;AACH,CAAC,CAAA"}

package/src/lib/gamification/user-statistics/styles.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TopInfo: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BottomInfo: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const User: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Avatar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const UserInfo: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const UserName: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const UserRating: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TrophyIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const Rts: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const RtsIndicator: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Top: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Ranks: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AvatarPlaceholder: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/src/lib/gamification/user-statistics/styles.js

@@ -0,0 +1,98 @@
+import styled from '@emotion/styled';
+export const Container = styled.div `
+  background-color: ${(props) => props.theme.COLORS.BG_TRANSPARENT_USER_CONTAINER};
+  border-radius: 12px;
+  color: ${(props) => props.theme.COLORS.GREY_PRIMARY};
+  font-size: 10px;
+  font-weight: 600;
+`;
+export const TopInfo = styled.div `
+  padding: 12px;
+  border-bottom: ${(props) => `1px solid ${props.theme.COLORS.DIVIDER_COLOR_PRIMARY}`};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: 5px;
+`;
+export const BottomInfo = styled.div `
+  padding: 12px 16px;
+  text-transform: uppercase;
+  display: flex;
+  justify-content: space-between;
+  column-gap: 16px;
+`;
+export const User = styled.div `
+  display: flex;
+  column-gap: 8px;
+  flex: 1;
+  overflow: hidden;
+`;
+export const Avatar = styled.img `
+  width: 100%;
+  height: 100%;
+  max-width: 48px;
+  max-height: 48px;
+  border-radius: 50%;
+  object-fit: cover;
+  object-position: center;
+  flex-shrink: 0;
+`;
+export const UserInfo = styled.div `
+  padding-top: 4px;
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+  overflow: hidden;
+`;
+export const UserName = styled.div `
+  font-size: 18px;
+  color: ${(props) => props.theme.COLORS.WHITE};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+export const UserRating = styled.div `
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+`;
+export const TrophyIcon = styled.img `
+  width: 12px;
+  height: 12px;
+  margin-right: 4px;
+`;
+export const Rts = styled.div `
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  border-right: ${(props) => `1px solid ${props.theme.COLORS.DIVIDER_COLOR_SECONDARY}`};
+  padding-right: 5px;
+`;
+export const RtsIndicator = styled.div `
+  font-size: 14px;
+  color: ${(props) => props.theme.COLORS.WHITE};
+`;
+export const Top = styled.div `
+  padding-left: 5px;
+`;
+export const Ranks = styled.div `
+  text-transform: uppercase;
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+`;
+export const AvatarPlaceholder = styled.div `
+  background: #2d6ffd;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  text-align: center;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 18px;
+  flex-shrink: 0;
+`;
+//# sourceMappingURL=styles.js.map

package/src/lib/gamification/user-statistics/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../packages/react-ui/src/lib/gamification/user-statistics/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;sBACb,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,6BAA6B;;WAEtE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY;;;CAGpD,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;mBAEd,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,qBAAqB,EAAE;;;;;CAKpF,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMnC,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK7B,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CAS/B,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMjC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;WAEvB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;CAI7C,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAInC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAInC,CAAA;AAED,MAAM,CAAC,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,CAAA;;;;kBAIX,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE;;CAErF,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;WAE3B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;CAC7C,CAAA;AAED,MAAM,CAAC,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE5B,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK9B,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;CAa1C,CAAA"}

package/src/lib/gamification/vote/components/voting-header/components/points/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface PointsProps {
+    points: number;
+}
+export declare const Points: React.FC<PointsProps>;
+export {};

package/src/lib/gamification/vote/components/voting-header/components/points/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Container, Point, PointContainer, PointLabel, Title } from './styles';
+export const Points = ({ points }) => (_jsxs(Container, { children: [_jsx(Title, { children: "YOU WON" }), _jsxs(PointContainer, { children: [_jsx(Point, { children: points }), _jsx(PointLabel, { children: "PTS" })] })] }));
+//# sourceMappingURL=index.js.map

package/src/lib/gamification/vote/components/voting-header/components/points/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../../../packages/react-ui/src/lib/gamification/vote/components/voting-header/components/points/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAM9E,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAC3D,MAAC,SAAS,eACR,KAAC,KAAK,0BAAgB,EACtB,MAAC,cAAc,eACb,KAAC,KAAK,cAAE,MAAM,GAAS,EACvB,KAAC,UAAU,sBAAiB,IACb,IACP,CACb,CAAA"}

package/src/lib/gamification/vote/components/voting-header/components/points/styles.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Title: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PointContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Point: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const PointLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/src/lib/gamification/vote/components/voting-header/components/points/styles.js

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+export const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin-right: 10px;
+  font-weight: 700;
+`;
+export const Title = styled.div `
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 8px;
+  line-height: 12px;
+  text-align: right;
+`;
+export const PointContainer = styled.div `
+  text-align: right;
+`;
+export const Point = styled.span `
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 14px;
+  line-height: 16px;
+  margin-right: 2px;
+`;
+export const PointLabel = styled.span `
+  color: white;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 16px;
+`;
+//# sourceMappingURL=styles.js.map

package/src/lib/gamification/vote/components/voting-header/components/points/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../../../../../packages/react-ui/src/lib/gamification/vote/components/voting-header/components/points/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMlC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK9B,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEvC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAK/B,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKpC,CAAA"}

package/src/lib/gamification/vote/components/voting-header/components/timer/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface TimerProps {
+    isPlaying?: boolean;
+    duration?: number;
+    setTimeToExpire: (flag: boolean) => void;
+}
+export declare const Timer: React.FC<TimerProps>;
+export {};

package/src/lib/gamification/vote/components/voting-header/components/timer/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useEffect } from 'react';
+import { CountdownCircleTimer } from 'react-countdown-circle-timer';
+import { theme } from '../../../../../../theme/theme';
+import { RemainingTime } from './styles';
+const TIMER_COLORS = [theme.COLORS.BLUE_PRIMARY, theme.COLORS.GREEN_1, theme.COLORS.RED_1];
+const TIMER_COLORS_TIME = [10, 6, 0];
+const DEFAULT_DURATION = 30;
+const TIMER_SIZE = 32;
+const STROKE_WIDTH = 4;
+const TRAIL_STROKE_WIDTH = 0;
+export const Timer = ({ isPlaying = true, duration = DEFAULT_DURATION, setTimeToExpire }) => {
+    const renderTime = ({ remainingTime }) => (_jsx(RemainingTime, { remainingTime: remainingTime, children: remainingTime }));
+    useEffect(() => {
+        setTimeToExpire(false);
+    }, [setTimeToExpire]);
+    return (_jsx(CountdownCircleTimer, { isPlaying: isPlaying, duration: duration, colors: TIMER_COLORS, colorsTime: TIMER_COLORS_TIME, size: TIMER_SIZE, strokeWidth: STROKE_WIDTH, trailStrokeWidth: TRAIL_STROKE_WIDTH, onComplete: () => setTimeToExpire(true), children: renderTime }));
+};
+//# sourceMappingURL=index.js.map

package/src/lib/gamification/vote/components/voting-header/components/timer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../../../packages/react-ui/src/lib/gamification/vote/components/voting-header/components/timer/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAkB,oBAAoB,EAAE,MAAM,8BAA8B,CAAA;AAEnF,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAExC,MAAM,YAAY,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAA6B,CAAA;AACtH,MAAM,iBAAiB,GAAG,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAiC,CAAA;AACpE,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAC3B,MAAM,UAAU,GAAG,EAAE,CAAA;AACrB,MAAM,YAAY,GAAG,CAAC,CAAA;AACtB,MAAM,kBAAkB,GAAG,CAAC,CAAA;AAQ5B,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAAE,SAAS,GAAG,IAAI,EAAE,QAAQ,GAAG,gBAAgB,EAAE,eAAe,EAAE,EAAE,EAAE;IAChH,MAAM,UAAU,GAAG,CAAC,EAAE,aAAa,EAA6B,EAAE,EAAE,CAAC,CACnE,KAAC,aAAa,IAAC,aAAa,EAAE,aAAa,YAAG,aAAa,GAAiB,CAC7E,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,KAAK,CAAC,CAAA;IACxB,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAA;IAErB,OAAO,CACL,KAAC,oBAAoB,IACnB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,YAAY,EACpB,UAAU,EAAE,iBAAiB,EAC7B,IAAI,EAAE,UAAU,EAChB,WAAW,EAAE,YAAY,EACzB,gBAAgB,EAAE,kBAAkB,EACpC,UAAU,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,YAEtC,UAAU,GACU,CACxB,CAAA;AACH,CAAC,CAAA"}

package/src/lib/gamification/vote/components/voting-header/components/timer/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const RemainingTime: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    remainingTime: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/src/lib/gamification/vote/components/voting-header/components/timer/styles.js

@@ -0,0 +1,6 @@
+import styled from '@emotion/styled';
+export const RemainingTime = styled.div `
+  color: ${(props) => (props.remainingTime ? 'inherit' : props.theme.COLORS.RED_2)};
+  font-size: 12px;
+`;
+//# sourceMappingURL=styles.js.map

package/src/lib/gamification/vote/components/voting-header/components/timer/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../../../../../packages/react-ui/src/lib/gamification/vote/components/voting-header/components/timer/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAA2B;WACvD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;;CAEjF,CAAA"}

package/src/lib/gamification/vote/components/voting-header/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { QuestionType } from '@streamlayer/sdk-web-types';
+export interface VotingHeaderProps {
+    points: number;
+    questionAnswered: boolean;
+    questionAnsweredCorrectly?: boolean;
+    logo: string;
+    questionType: QuestionType;
+    closeQuestion: () => void;
+    setTimeToExpire: (flag: boolean) => void;
+}
+export declare const VotingHeader: React.FC<VotingHeaderProps>;

package/src/lib/gamification/vote/components/voting-header/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { QuestionType } from '@streamlayer/sdk-web-types';
+import iconTrophyGreen from '../../../../../assets/icons/icon-trophy-green.svg';
+import iconThumbDown from '../../../../../assets/icons/icon-thumb-down.svg';
+import iconExit from '../../../../../assets/icons/icon-exit.svg';
+import { Timer } from '../../components/voting-header/components/timer';
+import { Container, Logo, ReactionIconWrap, ReactionIcon, RightBlock, Interactive, ExitBtn, ExitIcon } from './styles';
+import { Points } from './components/points';
+export const VotingHeader = ({ logo, points, questionAnswered, questionAnsweredCorrectly, questionType, closeQuestion, setTimeToExpire, }) => {
+    const isShowTimer = !questionAnswered && questionType !== QuestionType.PREDICTION;
+    const isShowTriviaFeedback = questionAnswered && questionType === QuestionType.TRIVIA;
+    const successTriviaFeedback = isShowTriviaFeedback && questionAnsweredCorrectly;
+    const errorTriviaFeedback = isShowTriviaFeedback && !questionAnsweredCorrectly;
+    const isShowPredictionFeedback = questionAnswered && questionType === QuestionType.PREDICTION;
+    return (_jsxs(Container, { children: [_jsxs(RightBlock, { children: [_jsxs(Interactive, { children: [isShowTimer && _jsx(Timer, { setTimeToExpire: setTimeToExpire }), successTriviaFeedback && (_jsxs(_Fragment, { children: [_jsx(Points, { points: points }), _jsx(ReactionIconWrap, { isSuccess: true, children: _jsx(ReactionIcon, { alt: "reaction-icon", src: iconTrophyGreen }) })] })), errorTriviaFeedback && (_jsxs(_Fragment, { children: [_jsx(Points, { points: 0 }), _jsx(ReactionIconWrap, { isSuccess: false, children: _jsx(ReactionIcon, { alt: "reaction-icon", src: iconThumbDown }) })] })), isShowPredictionFeedback && _jsx(Points, { points: points })] }), _jsx(ExitBtn, { onClick: closeQuestion, children: _jsx(ExitIcon, { alt: "exit-icon", src: iconExit }) })] }), logo && _jsx(Logo, { src: logo })] }));
+};
+//# sourceMappingURL=index.js.map

package/src/lib/gamification/vote/components/voting-header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-ui/src/lib/gamification/vote/components/voting-header/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAEzD,OAAO,eAAe,MAAM,mDAAmD,CAAA;AAC/E,OAAO,aAAa,MAAM,iDAAiD,CAAA;AAC3E,OAAO,QAAQ,MAAM,2CAA2C,CAAA;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,iDAAiD,CAAA;AAEvE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACtH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAY5C,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,IAAI,EACJ,MAAM,EACN,gBAAgB,EAChB,yBAAyB,EACzB,YAAY,EACZ,aAAa,EACb,eAAe,GAChB,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,CAAC,gBAAgB,IAAI,YAAY,KAAK,YAAY,CAAC,UAAU,CAAA;IAEjF,MAAM,oBAAoB,GAAG,gBAAgB,IAAI,YAAY,KAAK,YAAY,CAAC,MAAM,CAAA;IACrF,MAAM,qBAAqB,GAAG,oBAAoB,IAAI,yBAAyB,CAAA;IAC/E,MAAM,mBAAmB,GAAG,oBAAoB,IAAI,CAAC,yBAAyB,CAAA;IAE9E,MAAM,wBAAwB,GAAG,gBAAgB,IAAI,YAAY,KAAK,YAAY,CAAC,UAAU,CAAA;IAE7F,OAAO,CACL,MAAC,SAAS,eACR,MAAC,UAAU,eACT,MAAC,WAAW,eACT,WAAW,IAAI,KAAC,KAAK,IAAC,eAAe,EAAE,eAAe,GAAI,EAC1D,qBAAqB,IAAI,CACxB,8BACE,KAAC,MAAM,IAAC,MAAM,EAAE,MAAM,GAAI,EAC1B,KAAC,gBAAgB,IAAC,SAAS,EAAE,IAAI,YAC/B,KAAC,YAAY,IAAC,GAAG,EAAC,eAAe,EAAC,GAAG,EAAE,eAAe,GAAI,GACzC,IAClB,CACJ,EACA,mBAAmB,IAAI,CACtB,8BACE,KAAC,MAAM,IAAC,MAAM,EAAE,CAAC,GAAI,EACrB,KAAC,gBAAgB,IAAC,SAAS,EAAE,KAAK,YAChC,KAAC,YAAY,IAAC,GAAG,EAAC,eAAe,EAAC,GAAG,EAAE,aAAa,GAAI,GACvC,IAClB,CACJ,EACA,wBAAwB,IAAI,KAAC,MAAM,IAAC,MAAM,EAAE,MAAM,GAAI,IAC3C,EACd,KAAC,OAAO,IAAC,OAAO,EAAE,aAAa,YAC7B,KAAC,QAAQ,IAAC,GAAG,EAAC,WAAW,EAAC,GAAG,EAAE,QAAQ,GAAa,GAC5C,IACC,EACZ,IAAI,IAAI,KAAC,IAAI,IAAC,GAAG,EAAE,IAAI,GAAI,IAClB,CACb,CAAA;AACH,CAAC,CAAA"}

package/src/lib/gamification/vote/components/voting-header/styles.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Logo: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const RightBlock: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ExitBtn: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const ExitIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const Interactive: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ReactionIconWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isSuccess: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ReactionIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

package/src/lib/gamification/vote/components/voting-header/styles.js

@@ -0,0 +1,54 @@
+import styled from '@emotion/styled';
+export const Container = styled.div `
+  box-sizing: border-box;
+  background-color: transparent;
+  color: ${(props) => props.theme.COLORS.WHITE};
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  padding: 0px 16px;
+  align-items: center;
+`;
+export const Logo = styled.img `
+  width: 60px;
+  height: 80%;
+`;
+export const RightBlock = styled.div `
+  display: flex;
+  align-items: center;
+`;
+export const ExitBtn = styled.button `
+  border: none;
+  outline: none;
+  background-color: transparent;
+  border-radius: 50%;
+  padding: 0px;
+  width: 24px;
+  height: 24px;
+  margin-left: 25px;
+  cursor: pointer;
+`;
+export const ExitIcon = styled.img `
+  width: 24px;
+  height: 24px;
+`;
+export const Interactive = styled.div `
+  display: flex;
+  align-items: center;
+  padding: 4px 0px;
+  margin-left: 10px;
+`;
+export const ReactionIconWrap = styled.div `
+  background-color: ${(props) => (props.isSuccess ? '#f1be1c' : '#da3732')};
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+export const ReactionIcon = styled.img `
+  width: 20px;
+  height: 20px;
+`;
+//# sourceMappingURL=styles.js.map

package/src/lib/gamification/vote/components/voting-header/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-ui/src/lib/gamification/vote/components/voting-header/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;WAGxB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;CAM7C,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG7B,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGnC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;CAUnC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGjC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKpC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAwB;sBAC5C,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;;;;;;;CAOzE,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGrC,CAAA"}

package/src/lib/gamification/vote/components/voting-option/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+interface VotingOptionProps {
+    icon: string;
+    title: string;
+    id: string;
+    questionId: string;
+    percentage: number;
+    disabled: boolean;
+    correct: boolean;
+    questionAnswered: boolean;
+    hasCorrectAnswer: boolean;
+    answered: boolean;
+    onVote: (questionId: string, answerId: string) => void;
+}
+export declare const VotingOption: React.FC<VotingOptionProps>;
+export {};

package/src/lib/gamification/vote/components/voting-option/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import checkIconGreen from '../../../../../assets/icons/icon-check.svg';
+import checkIconWhite from '../../../../../assets/icons/icon-check-white.svg';
+import { Container, AnsweredContainer, ButtonPct, Icon, Title, Percentage, Button, Indicators, CheckIconWrap, CheckIcon, } from './styles';
+export const VotingOption = ({ icon, id, title, questionId, disabled, percentage, onVote, correct, questionAnswered, hasCorrectAnswer, answered, }) => {
+    if (questionAnswered && answered) {
+        return (_jsxs(AnsweredContainer, { answeredCorrect: !hasCorrectAnswer || correct, questionAnswered: false, children: [_jsx(ButtonPct, { style: { width: `${percentage}%` } }), _jsxs(Button, { disabled: disabled, onClick: () => onVote(questionId, id), children: [icon && _jsx(Icon, { alt: "option-icon", src: icon }), _jsx(Title, { children: title }), _jsxs(Indicators, { children: [hasCorrectAnswer && correct && (_jsx(CheckIconWrap, { children: _jsx(CheckIcon, { alt: "icon-correct", src: answered ? checkIconWhite : checkIconGreen }) })), _jsxs(Percentage, { children: [percentage, "%"] })] })] })] }));
+    }
+    return (_jsxs(Container, { questionAnswered: questionAnswered, children: [questionAnswered && _jsx(ButtonPct, { style: { width: `${percentage}%` } }), _jsxs(Button, { disabled: disabled, onClick: () => onVote(questionId, id), children: [icon && _jsx(Icon, { alt: "option-icon", src: icon }), _jsx(Title, { children: title }), questionAnswered && (_jsxs(Indicators, { children: [hasCorrectAnswer && correct && (_jsx(CheckIconWrap, { children: _jsx(CheckIcon, { alt: "icon-correct", src: answered ? checkIconWhite : checkIconGreen }) })), _jsxs(Percentage, { children: [percentage, "%"] })] }))] })] }));
+};
+//# sourceMappingURL=index.js.map

package/src/lib/gamification/vote/components/voting-option/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-ui/src/lib/gamification/vote/components/voting-option/index.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,MAAM,4CAA4C,CAAA;AACvE,OAAO,cAAc,MAAM,kDAAkD,CAAA;AAE7E,OAAO,EACL,SAAS,EACT,iBAAiB,EACjB,SAAS,EACT,IAAI,EACJ,KAAK,EACL,UAAU,EACV,MAAM,EACN,UAAU,EACV,aAAa,EACb,SAAS,GACV,MAAM,UAAU,CAAA;AAgBjB,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,IAAI,EACJ,EAAE,EACF,KAAK,EACL,UAAU,EACV,QAAQ,EACR,UAAU,EACV,MAAM,EACN,OAAO,EACP,gBAAgB,EAChB,gBAAgB,EAChB,QAAQ,GACT,EAAE,EAAE;IACH,IAAI,gBAAgB,IAAI,QAAQ,EAAE;QAChC,OAAO,CACL,MAAC,iBAAiB,IAAC,eAAe,EAAE,CAAC,gBAAgB,IAAI,OAAO,EAAE,gBAAgB,EAAE,KAAK,aACvF,KAAC,SAAS,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,UAAU,GAAG,EAAE,GAAI,EACjD,MAAC,MAAM,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC,aAC9D,IAAI,IAAI,KAAC,IAAI,IAAC,GAAG,EAAC,aAAa,EAAC,GAAG,EAAE,IAAI,GAAI,EAC9C,KAAC,KAAK,cAAE,KAAK,GAAS,EACtB,MAAC,UAAU,eACR,gBAAgB,IAAI,OAAO,IAAI,CAC9B,KAAC,aAAa,cACZ,KAAC,SAAS,IAAC,GAAG,EAAC,cAAc,EAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,GAAI,GACnE,CACjB,EACD,MAAC,UAAU,eAAE,UAAU,SAAe,IAC3B,IACN,IACS,CACrB,CAAA;KACF;IAED,OAAO,CACL,MAAC,SAAS,IAAC,gBAAgB,EAAE,gBAAgB,aAC1C,gBAAgB,IAAI,KAAC,SAAS,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,UAAU,GAAG,EAAE,GAAI,EACtE,MAAC,MAAM,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC,aAC9D,IAAI,IAAI,KAAC,IAAI,IAAC,GAAG,EAAC,aAAa,EAAC,GAAG,EAAE,IAAI,GAAI,EAC9C,KAAC,KAAK,cAAE,KAAK,GAAS,EACrB,gBAAgB,IAAI,CACnB,MAAC,UAAU,eACR,gBAAgB,IAAI,OAAO,IAAI,CAC9B,KAAC,aAAa,cACZ,KAAC,SAAS,IAAC,GAAG,EAAC,cAAc,EAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,GAAI,GACnE,CACjB,EACD,MAAC,UAAU,eAAE,UAAU,SAAe,IAC3B,CACd,IACM,IACC,CACb,CAAA;AACH,CAAC,CAAA"}

package/src/lib/gamification/vote/components/voting-option/styles.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    questionAnswered: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AnsweredContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    questionAnswered: boolean;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    answeredCorrect: boolean;
+}, {}, {}>;
+export declare const ButtonPct: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Button: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const Icon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const Title: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Indicators: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const CheckIconWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Percentage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CheckIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

package/src/lib/gamification/vote/components/voting-option/styles.js

@@ -0,0 +1,85 @@
+import styled from '@emotion/styled';
+export const Container = styled.div `
+  box-sizing: border-box;
+  border-radius: 4px;
+  height: 44px;
+  background-color: ${(props) => props.theme.COLORS.BG_TRANSPARENT_ITEM_VOTE};
+  border: 2px solid transparent;
+  position: relative;
+
+  ${(props) => !props.questionAnswered &&
+    `
+      &:hover {
+      border-color: inherit;
+    }
+  `}
+`;
+export const AnsweredContainer = styled(Container) `
+  background-color: ${({ answeredCorrect, theme }) => answeredCorrect ? theme.COLORS.BG_TRANSPARENT_ITEM_SUCCESS : theme.COLORS.BG_TRANSPARENT_ITEM_ERROR};
+  border: 2px solid;
+  border-color: ${({ answeredCorrect, theme }) => answeredCorrect ? theme.COLORS.BLUE_PRIMARY : theme.COLORS.RED_PRIMARY};
+
+  &:hover {
+    border-color: ${({ answeredCorrect, theme }) => answeredCorrect ? theme.COLORS.BLUE_PRIMARY : theme.COLORS.RED_PRIMARY};
+  }
+`;
+export const ButtonPct = styled.div `
+  position: absolute;
+  left: 0;
+  border-radius: 2px;
+  z-index: 0;
+  height: 100%;
+  background-color: inherit;
+  transition: all 1s ease-in;
+`;
+export const Button = styled.button `
+  border-radius: 20px;
+  position: relative;
+  background-color: transparent;
+  padding: 0px 16px;
+  display: flex;
+  align-items: center;
+  border: none;
+  outline: none;
+  width: 100%;
+  color: ${(props) => props.theme.COLORS.WHITE};
+  font-weight: 700;
+  font-size: 14px;
+  height: 100%;
+  border-radius: 2px;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+  }
+`;
+export const Icon = styled.img `
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  margin-right: 8px;
+`;
+export const Title = styled.span `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 8px 0px;
+  flex: 1;
+  text-align: left;
+`;
+export const Indicators = styled.span `
+  display: flex;
+`;
+export const CheckIconWrap = styled.div `
+  width: 16px;
+  height: 16px;
+  margin-left: 8px;
+`;
+export const Percentage = styled.div `
+  margin-left: 12px;
+`;
+export const CheckIcon = styled.img `
+  width: 16px;
+  height: 16px;
+`;
+//# sourceMappingURL=styles.js.map

package/src/lib/gamification/vote/components/voting-option/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-ui/src/lib/gamification/vote/components/voting-option/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA+B;;;;sBAI5C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,wBAAwB;;;;IAIxE,CAAC,KAAK,EAAE,EAAE,CACV,CAAC,KAAK,CAAC,gBAAgB;IACvB;;;;GAID;CACF,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,SAAS,CAAC,CAA8B;sBAC1D,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,EAAE,CACjD,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,yBAAyB;;kBAErF,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,EAAE,CAC7C,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW;;;oBAGtD,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,EAAE,CAC7C,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW;;CAE3E,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQlC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;WAUxB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;;CAU7C,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK7B,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;CAO/B,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAA;;CAEpC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAItC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEnC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGlC,CAAA"}