frst-components 0.36.9 → 0.38.0

package/dist/esm/src/components/users-challenge/variant-lxp/index.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box, Avatar, Typography, AvatarGroup } from '@mui/material';
+import { useState } from 'react';
+import { Container, AvatarInfo, StyledText, AvatarsSection } from './styles.js';
+import ModalShowUsers from '../../modal/modalShowUsers/index.js';
+
+function UsersChallengeLXP({ goalUsers = [], hasOnlyAutor, onUserNameClick, onClickAvatar, avatar, name, userId, areaName, companyName, createData }) {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const maxVisibleUsers = 4;
+    const reorderedUsers = [...goalUsers.filter((user) => user.author), ...goalUsers.filter((user) => !user.author)];
+    const remainingUsersCount = reorderedUsers.length - maxVisibleUsers;
+    return (jsxs(Container, { children: [hasOnlyAutor ? (jsxs(AvatarInfo, { children: [jsx(Box, { children: jsx(Avatar, { sx: { width: 56, height: 56, cursor: 'pointer' }, className: 'avatar-image-only-owner', src: avatar || 'https://lxp-cdn.frstfalconi.cloud/STORYBOOK/path582.svg', onClick: () => onClickAvatar(userId) }) }), jsxs(Box, { children: [jsx(Typography, { sx: {
+                                    color: '#f7f9fc',
+                                    fontWeight: 700,
+                                    fontSize: '16px',
+                                    fontFamily: 'PT Sans',
+                                    cursor: 'pointer'
+                                }, onClick: () => onUserNameClick(userId), children: name }), jsx(Box, { children: jsxs(StyledText, { children: [`${areaName} `, " \u00B7 ", ` ${companyName}`] }) }), jsx(StyledText, { children: `${createData}` })] })] })) : (jsx(AvatarsSection, { children: jsxs(AvatarGroup, { spacing: "small", children: [reorderedUsers.slice(0, maxVisibleUsers).map((user) => (jsx(Box, { children: jsx(Avatar, { alt: user.name, sx: { width: 40, height: 40 }, className: user.author ? 'avatar-image-owner' : 'avatar-image-user', src: user.avatar || 'https://lxp-cdn.frstfalconi.cloud/STORYBOOK/path582.svg', onClick: () => onClickAvatar(user.user_uuid) }) }, user.user_uuid))), remainingUsersCount > 0 && (jsx("div", { className: "plus-users", onClick: () => setIsModalOpen(true), children: jsxs("span", { children: ["+", remainingUsersCount] }) }))] }) })), jsx(ModalShowUsers, { isOpen: isModalOpen, handleClose: () => setIsModalOpen(false), goalUsers: goalUsers, onClickAvatar: onClickAvatar })] }));
+}
+
+export { UsersChallengeLXP as default };

package/dist/esm/src/components/users-challenge/variant-lxp/styles.js

@@ -0,0 +1,122 @@
+import styled from 'styled-components';
+
+const Container = styled.div `
+    display: flex;
+    .avatar-image-only-owner {
+        border: 3px solid #e2e8f0 !important;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+    .avatar-image-owner {
+        border: 3px solid #f26818 !important;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+    .avatar-image-user {
+        border-radius: 50%;
+        cursor: pointer;
+    }
+`;
+styled.div `
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9;
+    background: #f26818;
+    border-radius: 18px;
+    right: 0.5rem;
+    height: 12px;
+    bottom: 10px;
+    > p {
+        color: #ffffff;
+        font-weight: 700;
+        font-size: 10px;
+    }
+`;
+const AvatarInfo = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+`;
+styled.p `
+    color: #bdbdbd;
+    font-family: PT Sans;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+`;
+styled.div `
+    margin-left: 10px;
+    max-width: 34rem;
+    margin-bottom: 6px;
+    .list-users {
+        font-weight: 700;
+        font-size: 16px;
+        font-family: 'PT Sans';
+        color: #f7f9fc;
+        cursor: pointer;
+        &:hover {
+            color: #f18624;
+            text-decoration: underline #f18624;
+        }
+    }
+    .owner {
+        color: #f18624;
+    }
+    .not-owner {
+        color: #f7f9fc;
+    }
+    .more-users {
+        color: #f7f9fc;
+        font-weight: 700;
+        font-size: 16px;
+        font-family: 'PT Sans';
+        cursor: pointer;
+        &:hover {
+            text-decoration: underline;
+        }
+        &:active {
+            text-decoration: underline #f18624;
+            color: #f18624;
+        }
+    }
+`;
+const AvatarsSection = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .MuiAvatarGroup-avatar {
+        margin: -4px !important;
+    }
+    .plus-users {
+        width: 48px !important;
+        height: 48px !important;
+        background-color: #444444 !important;
+        border-radius: 50% !important;
+        font-weight: bold !important;
+        cursor: pointer;
+        border: none !important;
+
+        > span {
+            font-size: 19px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            width: 100%;
+            margin-top: -1px;
+            color: #ffffff;
+        }
+    }
+`;
+const StyledText = styled.p `
+    color: #bdbdbd;
+    font-weight: 400 !important;
+    font-size: 12px !important;
+    font-family: 'PT Sans' !important;
+`;
+
+export { AvatarInfo, AvatarsSection, Container, StyledText };

package/dist/esm/src/components/users-challenge/variant-vitrine/index.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box, Avatar, Typography, AvatarGroup } from '@mui/material';
+import { useState } from 'react';
+import { Container, AvatarInfo, StyledText, AvatarsSection, AvatarAutor, AllAvatarUsers } from './styles.js';
+import ModalShowUsers from '../../modal/modalShowUsers/index.js';
+import { LightTooltip } from '../../DS/LightTooltip/index.js';
+import { PrivateIcon, ProtectedIcon } from '../../../shared/icons.js';
+
+function UsersChallengeVitrine({ goalUsers = [], hasOnlyAutor, onUserNameClick, onClickAvatar, avatar, name, userId, areaName, companyName, createData, accessLevel }) {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const maxVisibleUsers = 4;
+    const reorderedUsers = [...goalUsers.filter((user) => user.author), ...goalUsers.filter((user) => !user.author)];
+    const remainingUsersCount = reorderedUsers.length - maxVisibleUsers;
+    const AccessLevelIcon = ({ accessLevel }) => {
+        if (accessLevel === 'private') {
+            return (jsx(LightTooltip, { title: "Este desafio pode ser visto e acessado apenas por pessoas selecionadas", children: jsx("span", { style: { display: 'inline-flex', cursor: 'pointer' }, children: jsx(PrivateIcon, { width: 16, height: 16 }) }) }));
+        }
+        if (accessLevel === 'protected') {
+            return (jsx(LightTooltip, { title: "Este desafio pode ser visto e acessado por todas as pessoas da organiza\u00E7\u00E3o de seu autor", children: jsx("span", { style: { display: 'inline-flex', cursor: 'pointer' }, children: jsx(ProtectedIcon, { width: 16, height: 16 }) }) }));
+        }
+        return null;
+    };
+    return (jsxs(Container, { children: [hasOnlyAutor ? (jsxs(AvatarInfo, { children: [jsx(Box, { children: jsx(Avatar, { sx: { width: 56, height: 56, cursor: 'pointer' }, className: 'avatar-image-only-owner', src: avatar || 'https://lxp-cdn.frstfalconi.cloud/STORYBOOK/path582.svg', onClick: () => onClickAvatar(userId) }) }), jsxs(Box, { children: [jsx(Typography, { sx: {
+                                    color: '#f7f9fc',
+                                    fontWeight: 700,
+                                    fontSize: '16px',
+                                    fontFamily: 'PT Sans',
+                                    cursor: 'pointer'
+                                }, onClick: () => onUserNameClick(userId), children: name }), jsxs(Box, { sx: { display: 'flex', gap: '10px' }, children: [jsxs(StyledText, { children: [`${areaName} `, " \u00B7 ", ` ${companyName}`] }), jsx("span", { children: jsx(AccessLevelIcon, { accessLevel: accessLevel }) })] }), jsx(StyledText, { children: `${createData}` })] })] })) : (jsxs(AvatarsSection, { children: [jsxs(AvatarGroup, { spacing: "small", children: [reorderedUsers.slice(0, maxVisibleUsers).map((user) => (jsxs(Box, { children: [jsx(Avatar, { alt: user.name, sx: { width: 48, height: 48 }, className: user.author ? 'avatar-image-owner' : 'avatar-image-user', src: user.avatar || 'https://lxp-cdn.frstfalconi.cloud/STORYBOOK/path582.svg', onClick: () => onClickAvatar(user.user_uuid) }), user.author && (jsx(AvatarAutor, { children: jsx("p", { children: "Autor" }) }))] }, user.user_uuid))), remainingUsersCount > 0 && (jsx("div", { className: "plus-users", onClick: () => setIsModalOpen(true), children: jsxs("span", { children: ["+", remainingUsersCount] }) }))] }), jsx(AllAvatarUsers, { children: jsxs(Box, { display: 'flex', gap: '4px', alignItems: 'center', flexWrap: 'wrap', children: [reorderedUsers.slice(0, maxVisibleUsers).map((user, index) => (jsxs(Box, { onClick: () => onUserNameClick(user.user_uuid), color: '#fff', children: [jsx("span", { className: `list-users ${user.author ? 'owner' : 'not-owner'}`, children: user.name }), index === reorderedUsers.slice(0, maxVisibleUsers).length - 2 ? (jsxs("span", { style: { color: '#fff', fontFamily: 'PT Sans', fontWeight: 'bold' }, children: [' ', "e", ' '] })) : (index < reorderedUsers.slice(0, maxVisibleUsers).length - 1 && ', ')] }, user.user_uuid))), remainingUsersCount > 0 && (jsxs("span", { onClick: () => {
+                                        setIsModalOpen(true);
+                                    }, className: "more-users", children: [' ', "e mais ", remainingUsersCount, " pessoa", remainingUsersCount > 1 ? 's' : ''] })), jsx("span", { children: jsx(AccessLevelIcon, { accessLevel: accessLevel }) })] }) })] })), jsx(ModalShowUsers, { isOpen: isModalOpen, handleClose: () => setIsModalOpen(false), goalUsers: goalUsers, onClickAvatar: onClickAvatar })] }));
+}
+
+export { UsersChallengeVitrine as default };

package/dist/esm/src/components/users-challenge/variant-vitrine/styles.js

@@ -0,0 +1,123 @@
+import styled from 'styled-components';
+
+const Container = styled.div `
+    display: flex;
+    .avatar-image-only-owner {
+        border: 3px solid #e2e8f0 !important;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+    .avatar-image-owner {
+        border: 2px solid #f26818 !important;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+    .avatar-image-user {
+        border: 2px solid #e2e8f0 !important;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+`;
+const AvatarAutor = styled.div `
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9;
+    background: #f26818;
+    border-radius: 18px;
+    right: 0.5rem;
+    height: 12px;
+    bottom: 10px;
+    > p {
+        color: #ffffff;
+        font-weight: 700;
+        font-size: 10px;
+    }
+`;
+const AvatarInfo = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+`;
+styled.p `
+    color: #bdbdbd;
+    font-family: PT Sans;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+`;
+const AllAvatarUsers = styled.div `
+    margin-left: 10px;
+    max-width: 34rem;
+    margin-bottom: 6px;
+    .list-users {
+        font-weight: 700;
+        font-size: 16px;
+        font-family: 'PT Sans';
+        color: #f7f9fc;
+        cursor: pointer;
+        &:hover {
+            color: #f18624;
+            text-decoration: underline #f18624;
+        }
+    }
+    .owner {
+        color: #f18624;
+    }
+    .not-owner {
+        color: #f7f9fc;
+    }
+    .more-users {
+        color: #f7f9fc;
+        font-weight: 700;
+        font-size: 16px;
+        font-family: 'PT Sans';
+        cursor: pointer;
+        &:hover {
+            text-decoration: underline;
+        }
+        &:active {
+            text-decoration: underline #f18624;
+            color: #f18624;
+        }
+    }
+`;
+const AvatarsSection = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .MuiAvatarGroup-avatar {
+        margin: -4px !important;
+    }
+    .plus-users {
+        width: 48px !important;
+        height: 48px !important;
+        background-color: #444444 !important;
+        border-radius: 50% !important;
+        font-weight: bold !important;
+        cursor: pointer;
+        border: none !important;
+
+        > span {
+            font-size: 19px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            width: 100%;
+            margin-top: -1px;
+            color: #ffffff;
+        }
+    }
+`;
+const StyledText = styled.p `
+    color: #bdbdbd;
+    font-weight: 400 !important;
+    font-size: 12px !important;
+    font-family: 'PT Sans' !important;
+`;
+
+export { AllAvatarUsers, AvatarAutor, AvatarInfo, AvatarsSection, Container, StyledText };

package/dist/esm/src/shared/global.css.js

@@ -0,0 +1,6 @@
+import styleInject from '../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "/* DEFAULTS */\n@import url('https://fonts.googleapis.com/css?family=Work+Sans:regular,bold,italic&subset=latin,latin-ext');\n@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400&family=Work+Sans:wght@700&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=VT323&display=swap');\n\nhtml,\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: Work Sans !important;\n  font-weight: 500 !important;\n}\n\np {\n  margin: 0px;\n}\n\nbr {\n  display: block;\n  margin: 8px 0;\n}\n\n* {\n  box-sizing: border-box;\n  outline: none;\n}\n\n.avatar {\n  vertical-align: middle;\n  width: 50px;\n  height: 50px;\n  border-radius: 50%;\n}\n\n.ellipsis {\n  overflow: hidden !important;\n  white-space: nowrap !important;\n  text-overflow: ellipsis !important;\n  display: inline-block !important;\n}\n\n.tag {\n  border-radius: 13px;\n  min-height: 24px;\n  text-align: center;\n  font-size: 14px;\n  line-height: 16px;\n  display: inline-block;\n}\n\n.content {\n  padding: 24px !important;\n  border-radius: inherit;\n}\n\n.fixedBottom {\n  position: absolute !important;\n  bottom: 0px !important;\n  right: 0px !important;\n}\n\n.innerContent {\n  padding: 0px 24px 0px 24px !important;\n  border-radius: inherit;\n}\n\n.centeredVertically {\n  display: inline-flex;\n  align-items: center;\n}\n\n.cardContent {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  box-shadow: none !important;\n  border: 1px solid #c4c4c4;\n  background-color: #fff;\n  box-sizing: border-box !important;\n  border-radius: 8px !important;\n  padding: 24px !important;\n}\n\n.cardContentNoMargin {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  box-shadow: none !important;\n  border: 1px solid #c4c4c4;\n  background-color: #fff;\n  box-sizing: border-box !important;\n  border-radius: 8px !important;\n}\n\n.cardTopRightConner {\n  float: right;\n  border-radius: 0px 8px;\n}\n\n.frstButton {\n  color: #fff;\n  font-weight: bold !important;\n  background-color: #ff4d0d;\n  border-color: #ff4d0d;\n  height: 48px !important;\n  font-size: 16px !important;\n  padding-left: 16px !important;\n  padding-right: 16px !important;\n  padding-top: 18px !important;\n  padding-bottom: 18px !important;\n  text-transform: none !important;\n  border-radius: 5px 5px 5px 5px !important;\n  box-shadow: 0 2px 0 rgb(0 0 0 / 2%) !important;\n}\n\n.blue {\n  border: 1px solid #e8e8e8 !important;\n  background-color: #fff !important;\n  color: #0645ad !important;\n}\n\n.shimmer {\n  background: #f6f7f8;\n  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #c4c4c4 40%, #c4c4c4 100%);\n  background-repeat: no-repeat;\n  background-size: 100% 100%;\n  position: relative;\n  color: transparent;\n\n  -webkit-animation-duration: 1s;\n  -webkit-animation-fill-mode: forwards;\n  -webkit-animation-iteration-count: infinite;\n  -webkit-animation-name: placeholderShimmer;\n  -webkit-animation-timing-function: linear;\n}\n\n@keyframes placeholderShimmer {\n  0% {\n    background-position: -468px 0;\n  }\n\n  100% {\n    background-position: 468px 0;\n  }\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };

package/dist/esm/src/shared/globalComponentsStyle.js

@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+
+styled.span `
+  color: #0645AD !important;
+  font-size: 16px !important;
+  font-weight: bolder !important;
+  cursor: pointer !important;
+  &:disabled {
+    color: #7C7C7C !important;
+  }
+`;
+styled.div `
+  .Mui-selected {
+    color: #FF4D0D !important; 
+  }
+  .MuiTab-root {
+    font-family: Work Sans !important;
+    text-transform: none !important;
+    font-weight: bolder !important;
+  }
+  .MuiTabs-indicator {
+    background-color: #FF4D0D !important;
+  }
+`;
+styled.label `
+  font-size: 20px;
+  color: #ff4d0d;
+  font-weight: bolder;
+`;
+styled.label `
+  font-size: 20px;
+  color: #ff4d0d;
+`;
+styled.label `
+  font-size: 16px;
+  color: #ff4d0d;
+`;
+const FRSTButton = styled(Button) `
+  color: #fff !important;
+  font-weight: bold !important;
+  background-color: #FF4D0D !important;
+  border-color: #FF4D0D !important;
+  height: 48px !important;
+  font-size: 16px !important;
+  padding-left: 16px !important;
+  padding-right: 16px !important;
+  padding-top: 18px !important;
+  padding-bottom: 18px !important;
+  text-transform: none !important;
+  border-radius: 5px 5px 5px 5px !important;
+  box-shadow: 0 2px 0 rgb(0 0 0 / 2%) !important;
+  &:focus,
+  &:hover {
+    color: #fff !important;
+    background-color: #E94E1B !important;
+    border-color: #fff !important;
+  };
+  &:disabled {
+    background-color: #7C7C7C !important;
+  }
+`;
+styled(Menu) `
+  & .MuiPaper-root{
+    border-radius: 0px;
+    box-shadow: none !important;
+  }
+  ul {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+`;
+styled(MenuItem) `
+  color: white !important;
+  background-color: #FF4D0D !important;
+  &:hover {
+    background-color: #F5792A !important;
+  }
+`;
+
+export { FRSTButton };