frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/DS/CardJourney/style.js

@@ -0,0 +1,123 @@
+import styled from 'styled-components';
+
+const Card = styled.div `
+    display: flex;
+    width: 290px;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-shrink: 0;
+    background-color: #585858;
+    border-radius: 12px;
+    position: relative;
+`;
+const CardInf = styled.div `
+    display: flex;
+    padding: 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    align-self: stretch;
+`;
+const UserPerfil = styled.div `
+    
+    display: flex;
+    flex-direction: row;
+    cursor: pointer;
+
+`;
+const ButtonRemove = styled.div `
+  display: flex;
+  justify-content: center; 
+  padding: 6px;
+  align-items: center;
+  gap: 10px;
+  position: absolute; 
+  right: 14px; 
+  top: 0;
+  margin:11px;
+  border-radius: 100px;
+  background: #404040;
+  cursor: pointer;
+  margin-right: 0; 
+  width: 22px;
+  height: 22px;
+`;
+const TextChallege = styled.p `
+    
+    align-self: stretch;
+    color: var(--primary_2, #F18624);
+    font-family: "Work Sans";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    margin-top: 6px;
+`;
+const TextDescription = styled.p `
+    
+    color: var(--neutrals-neutral_6, #E0E0E0);
+    font-family: "PT Sans";
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    align-self: stretch;
+    margin-top: 0px;
+`;
+const Colaboracao = styled.div `
+    
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    align-self: stretch;
+    border-top: solid 1.5px #444;
+    margin-top: 4px;
+    
+`;
+const Button = styled.div `
+    
+    border-radius: 0px 0px 12px 12px;
+    background: #2F2F2F;
+    display: flex;
+    height: 40px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+    cursor: pointer;
+    
+`;
+const ButtonText = styled.div `
+    
+    color: var(--primary_2, #F18624);
+    text-align: center;
+    font-family: "Work Sans";
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    align-self: stretch;
+    
+`;
+const ColaboracaoText = styled.p `
+    
+    color: var(--neutrals-neutral_6, #E0E0E0);
+    font-family: "PT Sans";
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    margin-top: 12px;
+`;
+const UserName = styled.p `
+    color: #E0E0E0;
+    font-family: "PT Sans";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    padding: 4px 8px;
+`;
+
+export { Button, ButtonRemove, ButtonText, Card, CardInf, Colaboracao, ColaboracaoText, TextChallege, TextDescription, UserName, UserPerfil };

package/dist/esm/src/components/DS/ConfirmationModal/ComfirmModalDownload/ComfirmModalDownload.js

@@ -0,0 +1,20 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { ConfirmationModal } from '../ConfirmationModal.js';
+
+const ComfirmModalDownload = ({ emailUser, handleCloseModal, open }) => {
+    return (jsx(Fragment, { children: jsx(ConfirmationModal, { onClose: handleCloseModal, labelButton: "Ok, entendi", onConfirm: handleCloseModal, open: open, title: "Download de arquivo", children: jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    marginTop: '32px'
+                }, children: [jsx("img", { src: "https://lxp-cdn.frstfalconi.cloud/STORYBOOK/dowload.png" }), jsx("p", { style: {
+                            marginTop: '32px',
+                            fontFamily: 'PT Sans',
+                            fontSize: '18px',
+                            color: '#222',
+                            fontWeight: 700
+                        }, children: "Arquivo enviado! Verifique sua caixa de entrada." }), jsx("p", { style: { marginTop: '16px', fontFamily: 'PT Sans', fontSize: '16px', color: '#222' }, children: "Devido a quest\u00F5es de seguran\u00E7a o arquivo foi enviado para o seu e-mail:" }), jsx("p", { style: { fontFamily: 'PT Sans', fontSize: '16px', color: '#222', marginBottom: '19px' }, children: emailUser })] }) }) }));
+};
+
+export { ComfirmModalDownload };

package/dist/esm/src/components/DS/ConfirmationModal/ConfirmationModal.js

@@ -0,0 +1,10 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Modal } from '@mui/material';
+import { ModalContainer, ModalHeader, ModalTitle, CloseButton, HorizontalLine, ContainerContent, ButtonContainer } from './styles.js';
+import Button from '../../buttons/index.js';
+
+const ConfirmationModal = ({ open, onClose, title, children, onConfirm, labelButton }) => {
+    return (jsx(Modal, { open: open, onClose: onClose, children: jsxs(ModalContainer, { children: [jsxs(ModalHeader, { children: [jsx(ModalTitle, { children: title }), jsx(CloseButton, { onClick: onClose, children: "X" })] }), jsx(HorizontalLine, {}), jsxs(ContainerContent, { children: [children, jsx(ButtonContainer, { children: jsx(Button, { variant: "primary", label: labelButton, handleClick: onConfirm }) })] })] }) }));
+};
+
+export { ConfirmationModal };

package/dist/esm/src/components/DS/ConfirmationModal/styles.js

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+
+const ModalContainer = styled.div `
+    position: absolute;
+    width: 630px;
+    min-height: 473px;
+    border-radius: 16px;
+    top: 50%;
+    left: 50%;
+    background-color: white;
+    transform: translate(-50%, -50%);
+    background-repeat: no-repeat;
+    background-position: top -554px right -126px;
+    padding-bottom: 24px;
+`;
+const ModalHeader = styled.div `
+    display: flex;
+    justify-content: space-between;
+    padding-left: 32px;
+    padding-right: 24px;
+    padding-top: 24px;
+`;
+const ModalTitle = styled.p `
+    font-weight: 700;
+    font-family: 'Work Sans';
+    font-size: 20px;
+    /* margin-top: 18px; */
+    line-height: 26px;
+    color: #222222;
+    margin-top: 40px;
+    margin-bottom: 16px;
+`;
+const CloseButton = styled.div `
+    width: 16px;
+    height: 16px;
+    color: #757575;
+    cursor: pointer;
+`;
+const HorizontalLine = styled.hr `
+    border: 1px solid #E0E0E0;
+`;
+const ContainerContent = styled.div `
+    padding-left: 32px;
+    padding-right: 32px;
+    display: flex;
+    flex-direction: column;
+    min-height: 328px;
+    justify-content: space-between;
+`;
+const ButtonContainer = styled.div `
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+`;
+
+export { ButtonContainer, CloseButton, ContainerContent, HorizontalLine, ModalContainer, ModalHeader, ModalTitle };

package/dist/esm/src/components/DS/LightTooltip/index.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { styled } from '@mui/material/styles';
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
+
+const StyledTooltip = styled(({ className, ...props }) => (jsx(Tooltip, { ...props, classes: { popper: className } })))(({ theme }) => ({
+    [`&.${tooltipClasses.popper}`]: {
+        zIndex: theme.zIndex.modal + 1,
+    },
+    [`& .${tooltipClasses.tooltip}`]: {
+        backgroundColor: theme.palette.common.white,
+        color: '#757575',
+        boxShadow: 'rgba(0, 0, 0, 0.12) 0px 0px 8px 0px',
+        fontSize: '12px',
+        fontFamily: 'Poppins',
+        borderRadius: '8px',
+        border: '1px solid #E0E0E0',
+        width: '180px',
+    },
+}));
+const LightTooltip = ({ title, children, ...props }) => {
+    return (jsx(StyledTooltip, { title: title, ...props, children: children }));
+};
+
+export { LightTooltip };

package/dist/esm/src/components/DS/admButton/admButton.styles.js

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+
+const AvatarContent = styled.div `
+    width: 32px;
+    height: 32px;
+    border-radius: 16px;
+    background-color: ${props => props.background};
+    color: rgba(255, 255, 255, 1);
+    font-weight:700;
+    border: 2px solid ${({ theme }) => theme.colors.shadeWhite};
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    position: relative;
+    font-size: 10px;
+    font-family:'PT Sans';
+    box-sizing: border-box;
+    cursor: pointer;
+`;
+const PlusButton = styled.div `
+    width: 12px;
+    height: 12px;
+    border-radius: 6px;
+    display: flex;
+    justify-content: center;
+    vertical-align: center;
+    font-size: 13px;
+    background-color: rgba(242, 104, 24, 1);
+    position: absolute;
+    bottom: -2px;
+    right: 0px;
+    line-height: 13px;
+`;
+const ImageAvatarContent = styled.div `
+    position: absolute;
+    bottom: -3px;
+    right: 3px;
+`;
+const ImageContent = styled.div `
+    width:32px;
+    height: 32px;
+    border-radius: 50%;
+    overflow: hidden;
+    img{
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+    
+`;
+
+export { AvatarContent, ImageAvatarContent, ImageContent, PlusButton };

package/dist/esm/src/components/DS/admButton/index.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { AvatarContent, ImageAvatarContent, PlusButton, ImageContent } from './admButton.styles.js';
+import { EmptyAvatar } from '../../../shared/icons.js';
+import { useMemo } from 'react';
+
+function AdmButton({ variant, count, image, onClick }) {
+    const backgroudVariant = useMemo(() => {
+        if (variant === 'count' || variant === 'countMore')
+            return 'rgba(68, 68, 68, 1)';
+        return '#E0E0E0';
+    }, [variant]);
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(AvatarContent, { onClick: onClick, background: backgroudVariant, children: [variant == 'count' && jsxs("div", { id: 'count', style: { paddingRight: '6px' }, children: ["+", count] }), variant == 'countMore' && jsxs("div", { id: 'count-more', style: { paddingRight: '6px' }, children: [count, "+"] }), variant == 'add' && (jsxs(Fragment, { children: [jsx(ImageAvatarContent, { id: 'add-people', children: jsx(EmptyAvatar, {}) }), jsx(PlusButton, { children: "+" })] })), " ", variant == 'image' && (jsx(Fragment, { children: image ? jsx(ImageContent, { id: 'avatar-image', children: jsx("img", { src: image, alt: "" }) }) : jsx(ImageAvatarContent, { id: 'avatar-empty', children: jsx(EmptyAvatar, {}) }) }))] }) }));
+}
+
+export { AdmButton as default };

package/dist/esm/src/components/DS/cardPeople/cardPeople.styles.js

@@ -0,0 +1,71 @@
+import styled from 'styled-components';
+
+const PeopleContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    height: 144px;
+    border-radius: 12px;
+    background: ${({ theme, isChecked }) => isChecked ? '#FDF3E9' : theme.colors.shadeWhite};
+    border: 1px solid ${({ theme, isChecked }) => isChecked ? 'rgba(241, 134, 36, 1)' : theme.colors.shadeWhite};
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+    :hover{
+        border: 1px solid rgba(241, 134, 36, 1);
+    }
+`;
+const PeopleInfo = styled.div `
+    display: flex;
+    flex-direction: row;
+`;
+const DescriptionPeople = styled.div `
+    padding-left: 12px;
+`;
+const PeopleName = styled.div `
+    font-weight: 600;
+    max-width: 188px;
+    line-height: 18.77px;
+    padding-top: 26px;
+    padding-right: 20px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    top: 26px;
+    left: 100px;
+`;
+const PeopleEmail = styled.div `
+    font-size: 12px;
+    color: rgba(117, 117, 117, 1);
+    font-weight: 500;
+    line-height: 14.8px;
+    max-width: 188px;
+    margin-top: 4px;
+    padding-right: 20px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+`;
+const PositionContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    margin-top: 16px;
+    padding-right: 25px;
+    padding-left: ${({ hiddenCheckbox }) => hiddenCheckbox ? '16' : '48'}px;
+    padding-bottom: 24px;
+`;
+const DataBlock = styled.div `
+    display: flex;
+    font-size: 14px;
+    line-height: 16.8px;
+    font-weight: 600;
+    margin-top: 4px;
+    span{
+        font-weight: 400;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        max-width: 188px;
+        padding-right: 2px;
+    }
+`;
+
+export { DataBlock, DescriptionPeople, PeopleContainer, PeopleEmail, PeopleInfo, PeopleName, PositionContainer };

package/dist/esm/src/components/DS/cardPeople/index.js

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { PeopleContainer, PeopleInfo, DescriptionPeople, PeopleName, PeopleEmail, PositionContainer, DataBlock } from './cardPeople.styles.js';
+import Avatar from '../../avatar/index.js';
+import Checkbox from '../../form-elements/checkbox/index.js';
+import Tooltip from '../tooltip/index.js';
+
+function CardPeople({ labels, userInfo, isChecked, onChecked, hiddenCheckbox, style }) {
+    const handleChecked = () => {
+        onChecked({
+            ...userInfo, isChecked: !isChecked
+        });
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(PeopleContainer, { isChecked: isChecked, style: { ...style }, id: 'people-card-container', children: [jsxs(PeopleInfo, { children: [jsxs("div", { style: { paddingTop: '24px', display: 'flex', paddingLeft: '16px' }, children: [jsx("div", { style: { paddingTop: '12px' }, id: 'container-check', children: hiddenCheckbox ? jsx("div", {}) : jsx(Checkbox, { label: "", isChecked: isChecked, handleCheck: handleChecked }) }), jsx(Avatar, { size: "40px", src: userInfo.avatar })] }), jsxs(DescriptionPeople, { children: [userInfo.name && userInfo.name.length > 19 ? (jsx(Tooltip, { content: userInfo.name, direction: 'bottom', style: {
+                                        fontFamily: 'PT Sans',
+                                        fontWeight: 400,
+                                        fontSize: '14px',
+                                        color: 'rgba(117, 117, 117, 1)',
+                                        width: 'fit-content',
+                                        height: '31px',
+                                        top: '8px',
+                                        left: '4px',
+                                        whiteSpace: 'nowrap',
+                                        boxShadow: ' 0px 0px 18px 0px rgba(34, 34, 34, 0.2)'
+                                    }, children: jsx(PeopleName, { style: { cursor: 'pointer' }, children: userInfo.name }) })) : (jsx(PeopleName, { children: userInfo.name })), userInfo.email && userInfo.email.length > 24 ? (jsx(Tooltip, { content: userInfo.email, direction: 'bottom', style: {
+                                        fontFamily: 'PT Sans',
+                                        fontWeight: 400,
+                                        fontSize: '14px',
+                                        color: 'rgba(117, 117, 117, 1)',
+                                        width: 'fit-content',
+                                        height: '31px',
+                                        top: '8px',
+                                        left: '4px',
+                                        whiteSpace: 'nowrap',
+                                        boxShadow: ' 0px 0px 18px 0px rgba(34, 34, 34, 0.2)'
+                                    }, children: jsx(PeopleEmail, { style: { cursor: 'pointer' }, children: userInfo.email }) })) : (jsx(PeopleEmail, { children: userInfo.email }))] })] }), jsxs(PositionContainer, { hiddenCheckbox: hiddenCheckbox, children: [jsxs(DataBlock, { children: [jsxs("div", { style: { paddingRight: '2px' }, children: [labels?.area, ":"] }), userInfo.area && userInfo.area.length > 25 ? (jsx(Tooltip, { content: userInfo.area, direction: 'bottom', style: {
+                                        fontFamily: 'PT Sans',
+                                        fontWeight: 400,
+                                        fontSize: '14px',
+                                        color: 'rgba(117, 117, 117, 1)',
+                                        width: 'fit-content',
+                                        height: '31px',
+                                        top: '8px',
+                                        left: '4px',
+                                        whiteSpace: 'nowrap',
+                                        boxShadow: ' 0px 0px 18px 0px rgba(34, 34, 34, 0.2)'
+                                    }, children: jsx("span", { style: { cursor: 'pointer' }, children: userInfo.area }) })) :
+                                    (jsx("span", { children: userInfo.area }))] }), jsxs(DataBlock, { children: [jsxs("div", { style: { paddingRight: '2px' }, children: [labels?.position, ":"] }), userInfo?.position && userInfo?.position.length > 24 ? (jsx(Tooltip, { content: userInfo?.position, direction: 'bottom', style: {
+                                        fontFamily: 'PT Sans',
+                                        fontWeight: 400,
+                                        fontSize: '14px',
+                                        color: 'rgba(117, 117, 117, 1)',
+                                        width: 'fit-content',
+                                        height: '31px',
+                                        top: '8px',
+                                        left: '4px',
+                                        whiteSpace: 'nowrap',
+                                        boxShadow: ' 0px 0px 18px 0px rgba(29, 15, 15, 0.2)'
+                                    }, children: jsx("span", { style: { cursor: 'pointer' }, children: userInfo?.position }) })) : (jsx("span", { children: userInfo?.position }))] })] })] }) }));
+}
+
+export { CardPeople as default };

package/dist/esm/src/components/DS/cardUser/cardUser.styles.js

@@ -0,0 +1,70 @@
+import styled, { css } from 'styled-components';
+
+const UserContainer = styled.div `
+    width: 100%;
+    display: flex;
+    position: relative;
+    flex-direction:column;
+    align-items:center;
+    justify-content: space-between;
+    background:${({ theme }) => theme.colors.shadeWhite};
+    border-radius: 12px;
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+
+    ${(props) => props.variant ? css `
+            padding-top: 12px;
+            padding-left:16px;
+            padding-right: 16px;
+            padding-bottom: 16px;
+            min-height: 231px;
+        ` : css `
+            padding-top: 18px;
+            padding-left:16px;
+            padding-right: 16px;
+            padding-bottom: 22px;
+            min-height: 208px;
+        `}
+`;
+const Headers = styled.div `
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+
+`;
+const UserInfo = styled.p `
+    font-weight: 600;
+    font-size: 14px;
+    text-align: center;
+    font-family: 'Work Sans';
+    ${(props) => props.variant ? css `
+            margin-top: 12px;
+        ` : css `
+            margin-top: 8px;
+        `}
+`;
+const InfoBottom = styled.div `
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    margin-top: 8px;
+    font-size:12px;
+    text-align: center;
+    margin-top:14px;
+    font-family:PT Sans;
+    `;
+const InfoDescription = styled.div `
+    margin-top:8px;
+    font-size:12px;
+    text-align:center;
+    margin-bottom:3px;
+    color:#757575;
+    ${(props) => props.variant ? css `
+            font-family: 'PT Sans';
+            font-weight: 400;
+            line-height:  130%;
+        ` : css `
+            font-family: 'Work Sans'
+        `}
+`;
+
+export { Headers, InfoBottom, InfoDescription, UserContainer, UserInfo };

package/dist/esm/src/components/DS/cardUser/index.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { UserContainer, Headers, UserInfo, InfoDescription, InfoBottom } from './cardUser.styles.js';
+import Avatar from '../../avatar/index.js';
+import Button from '../../buttons/index.js';
+import CloseIcon from '@mui/icons-material/Close';
+
+function CarUser({ style, userInfo, handleLinkProfile, hasButton, labelButton, handleInvite, handleRemove }) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(UserContainer, { id: "userContainer", style: { ...style }, variant: Boolean(hasButton), children: [jsxs(Headers, { children: [jsx(Avatar, { src: userInfo.avatar, size: hasButton ? '56px' : '74px', onClick: handleLinkProfile, isActiveClick: true }), jsx(UserInfo, { variant: Boolean(hasButton), children: userInfo.name }), hasButton &&
+                            jsx("div", { style: { position: 'absolute', top: '8px', right: '8px', cursor: 'pointer' }, onClick: handleRemove, children: jsx(CloseIcon, { htmlColor: '#BDBDBD', fontSize: 'small' }) })] }), jsxs(InfoDescription, { variant: Boolean(hasButton), children: [jsx("p", { children: userInfo.profession }), jsx("p", { style: { marginTop: '3px' }, children: userInfo.education })] }), hasButton ? (jsx(Button, { label: labelButton, variant: 'primary', handleClick: handleInvite, style: { width: '160px', height: '36px', marginTop: '24px' } })) : (jsx(InfoBottom, { children: jsxs("p", { children: [userInfo.activeSice, " ", jsx("b", { children: userInfo.date })] }) }))] }) }));
+}
+
+export { CarUser as default };