frst-components 0.36.9 → 0.38.0

package/dist/esm/src/components/DS/newCards/articles/styles.js

@@ -0,0 +1,92 @@
+import styled from 'styled-components';
+
+const ArticleContainer = styled('div') `
+    width: 450px;
+    height: 225px;
+    display: flex;
+    flex-direction: column;
+    gap: 29px;
+    padding: 16px;
+    border-radius: 12px;
+    background-color: #FFFFFF;
+
+    :hover {
+        border: 2px solid #757575;
+    }
+
+    :focus {
+        border: 2px solid #757575;
+        background-color: #F7F7F7;
+    }
+`;
+const ArticleContent = styled('div') `
+    display: flex;
+    flex-direction: column;
+
+    .cardType {
+        font-family: 'PT Sans';
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 1.5;
+        color: #F18624;
+        margin-bottom: 4px;
+    }
+
+    .title {
+        font-family: 'PT Sans';
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 1.5;
+        color: #444444;
+        margin-bottom: 10px;
+    }
+
+    .description {
+        font-family: 'PT Sans';
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 1.5;
+
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 4; 
+        -webkit-box-orient: vertical;
+        text-overflow: ellipsis;
+    }
+
+`;
+const ArticleFooter = styled('div') `
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+
+    .company {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-family: 'PT Sans';
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 1.5;
+        color: #444444;
+
+        img {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+        }
+    }
+
+    .cta {
+        display: flex;
+        gap: 4px;
+        font-family: 'PT Sans';
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 1.5;
+        color: #444444;
+        cursor: pointer;
+    }
+`;
+
+export { ArticleContainer, ArticleContent, ArticleFooter };

package/dist/esm/src/components/DS/newCards/challenge/index.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Checkbox, Typography } from '@mui/material';
+import { cardWrapper, tagTypeChallenge, labelTypeChallenge, cardContentWrapper, checkboxWrapper, contentWrapper, headerContent, userInfo, namePositionInfo, contentDescription, wrapperResults, wrapperStepTag, wrapperRating, rating, contentUpdatedChallenge } from './styles.js';
+import { LookChallengeIcon, PresentationIcon, RoomGroupIcon, CopyIcon, UserIcon, PinIcon, UncheckedBox, StarRatingIcon } from '../../../../shared/icons.js';
+import { abbreviateMiddleSurnames } from '../../../../utilityFunctions/abbreviateMiddleSurnames.js';
+import Tooltip from '../../tooltip/index.js';
+import Avatar from '../../../avatar/index.js';
+import MenuMore from '../../../menu-more/index.js';
+import { ProgressGoalBar } from '../../progressGoalBar/index.js';
+
+function NewChallengeCard({ selected, avatar, name, role, description, lastStep, cardID, type_challenge = "original", isIterator, isVisibleHeaderTypeChallenge = false, indicatorStart, indicatorCurrent, indicatorGoal, impact, relevance, handleSelected, handleClickChallenge, handleClickPresentation, onClickAvatar, handleGroupExecution, iteratorNumber, resultNumber, showCheckbox, showExecutionGroup, }) {
+    const options = [
+        {
+            description: 'Ver desafio',
+            startIcon: jsx(LookChallengeIcon, {}),
+            onClick: handleClickChallenge
+        },
+        {
+            description: 'Apresentar desafio',
+            startIcon: jsx(PresentationIcon, {}),
+            onClick: handleClickPresentation
+        },
+        showExecutionGroup && {
+            description: 'Grupo de execução',
+            startIcon: jsx(RoomGroupIcon, {}),
+            onClick: handleGroupExecution
+        }
+    ]?.filter(Boolean);
+    const getStepName = (step) => {
+        let steps = {
+            '0-problema': {
+                name: 'Fase 1 - Definição da meta',
+                color: '#F2CEE4'
+            },
+            '1-hipotese': {
+                name: 'Fase 2 - Plano de ação',
+                color: '#FCDFA6'
+            },
+            '2-testes': {
+                name: 'Fase 3 - Execução',
+                color: '#DACEF2'
+            },
+            '3-aprendizados-e-resultados': {
+                name: 'Fase 4 - Resultado',
+                color: '#EBEBEB'
+            },
+            '4-proximos-passos': {
+                name: 'Desafio finalizado',
+                color: '#BDE3B9'
+            }
+        };
+        return steps[step];
+    };
+    return (jsxs(cardWrapper, { id: cardID, children: [isVisibleHeaderTypeChallenge ? jsxs(tagTypeChallenge, { isIterator: isIterator, children: [jsx("div", { style: { marginTop: "6px" }, children: type_challenge == "duplicated" ?
+                            jsx(CopyIcon, { fill: isIterator ? "#F8FAFC" : "#334155" })
+                            :
+                                type_challenge == "assigned" ?
+                                    jsx(UserIcon, { fill: isIterator ? "#F8FAFC" : "#334155" })
+                                    :
+                                        jsx(PinIcon, { fill: isIterator ? "#F8FAFC" : "#334155" }) }), jsxs(labelTypeChallenge, { isIterator: isIterator, children: [type_challenge == "duplicated" ? "Desafio duplicado"
+                                :
+                                    type_challenge == "assigned" ? "Desafio atribuído"
+                                        :
+                                            "Desafio original", isIterator && ` / Iteração ${iteratorNumber}`] })] })
+                :
+                    jsx("div", { style: { height: "28px" } }), jsxs(cardContentWrapper, { children: [showCheckbox &&
+                        jsx(checkboxWrapper, { selected: selected, children: jsx(Checkbox, { checked: selected, onChange: (e) => {
+                                    e.stopPropagation();
+                                    handleSelected(e);
+                                }, icon: jsx(UncheckedBox, {}), size: 'small', sx: {
+                                    padding: 0,
+                                    color: '#9C9C9C',
+                                    '&.Mui-checked': {
+                                        color: '#FF4D0D',
+                                    },
+                                } }) }), jsxs(contentWrapper, { children: [jsxs(headerContent, { children: [jsx(Tooltip, { direction: "bottom", content: 'Visitar perfil', trigger: 'hover', width: '101px', height: '32px', style: { top: '10px', textAlign: 'center' }, children: jsxs(userInfo, { onClick: onClickAvatar, children: [jsx(Avatar, { size: '40px', src: avatar, isActiveClick: true, onClick: onClickAvatar }), jsxs(namePositionInfo, { children: [jsx(Typography, { component: 'h6', children: abbreviateMiddleSurnames(name) }), jsx(Typography, { component: 'p', children: role })] })] }) }), jsx(MenuMore, { options: options, closeAfterClick: true })] }), jsxs(contentDescription, { onClick: () => handleClickChallenge?.(), children: [jsx(Typography, { component: 'h6', children: (lastStep == "3-aprendizados-e-resultados" || lastStep == "4-proximos-passos") && indicatorCurrent ? `RESULTADO ${resultNumber === 1 ? '' : resultNumber}` : "DESAFIO" }), jsx(Typography, { component: 'p', children: description })] }), (lastStep == "3-aprendizados-e-resultados" || lastStep == "4-proximos-passos") && indicatorCurrent ?
+                                jsx(wrapperResults, { onClick: () => handleClickChallenge?.(), children: jsx(ProgressGoalBar, { start: indicatorStart || 0, current: indicatorCurrent || 0, goal: indicatorGoal || 0, isVisibleMessage: false }) })
+                                :
+                                    jsxs(wrapperStepTag, { onClick: () => handleClickChallenge?.(), children: [jsxs(wrapperRating, { children: [jsxs(rating, { children: [jsx(StarRatingIcon, {}), " ", impact ? Math.floor(impact) : "0", " - Impacto"] }), jsxs(rating, { children: [jsx(StarRatingIcon, {}), " ", relevance ? Math.floor(relevance) : "0", " - Relev\u00E2ncia "] })] }), jsx(contentUpdatedChallenge, { style: { background: getStepName(lastStep)?.color }, children: jsx(Typography, { component: 'p', children: getStepName(lastStep)?.name }) })] })] })] })] }));
+}
+
+export { NewChallengeCard as default };

package/dist/esm/src/components/DS/newCards/challenge/styles.js

@@ -0,0 +1,198 @@
+import styled from 'styled-components';
+
+const cardWrapper = styled('div') `
+    width: 404px;
+    height: 266px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    border-radius: 12px;
+    overflow: hidden;
+    background: #FFFFFF;
+    box-shadow: 0px 0px 10px 0px #00000026;
+    scroll-margin-top: 150px;
+    border: 2px solid transparent;
+
+    :hover,
+    :focus {
+        border: 2px solid #757575;
+    }
+
+`;
+const cardContentWrapper = styled('div') `
+    display: flex;
+    height: 100%;
+    flex-direction: row;
+    border-radius: 12px;
+    padding: 0px 12px 30px 12px;
+`;
+const tagTypeChallenge = styled('div') `
+    width: 100%;
+    height: 34px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 6px;
+    padding: 0px 12px 0px 12px;
+    background-color: ${({ isIterator }) => isIterator ? "#6A7B8A" : "#CBDCF1"};
+    border-bottom: 4px solid ${({ isIterator }) => isIterator ? "#92A5BB" : "#B1C8E4"};
+`;
+const labelTypeChallenge = styled('div') `
+    font-family: Work Sans;
+    font-size: 11.5px;
+    font-weight: 600;
+    text-align: left;
+    margin-top: 2px;
+
+    color: ${({ isIterator }) => isIterator ? "#F8FAFC" : "#334155"};
+`;
+const checkboxWrapper = styled('div') `
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding-top: ${({ selected }) => selected ? "7px" : "10px"};
+    width: 22px;
+    margin-right: 4px;
+`;
+const contentWrapper = styled('div') `
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    cursor: pointer;
+`;
+const headerContent = styled('div') `
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+`;
+const userInfo = styled('div') `
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    cursor: pointer;
+`;
+const namePositionInfo = styled('div') `
+    display: flex;
+    flex-direction: column;
+
+    h6 {
+        font-family: 'PT Sans';
+        font-size: 0.875rem;
+        line-height: 1.1;
+        font-weight: 700;
+        color: #222222;
+        width: 230px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    p {
+        font-family: 'PT Sans';
+        font-size: 0.75rem;
+        line-height: 1.1;
+        font-weight: 400;
+        color: #757575;
+        width: 230px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+`;
+const contentDescription = styled('div') `
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    height: calc(100% - 24px);
+    margin-top: 8px;
+
+    h6 {
+        font-family: 'Work Sans';
+        font-size: 0.875rem;
+        line-height: 1.17;
+        font-weight: 600;
+        color: #F26818;
+    }
+
+    p {
+        font-family: 'Work Sans';
+        font-size: 1rem;
+        line-height: 1.17;
+        font-weight: 600;
+        color: #444444;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        white-space: normal;
+    }
+`;
+styled('div') `
+    display: flex;
+    gap: 16px;
+`;
+styled('div') `
+    display: flex;
+
+    p {
+        font-family: 'PT Sans';
+        font-size: 0.875rem;
+        line-height: 1.3;
+        font-weight: 400;
+        color: #222222;
+    }
+`;
+const contentUpdatedChallenge = styled('div') `
+    width: calc(100% - 24px);
+    padding: 4px 12px;
+    border-radius: 50px;
+
+    p {
+        font-family: 'PT Sans';
+        font-size: 0.875rem;
+        line-height: 1.3;
+        font-weight: 400;
+        color: #222222;
+    }
+`;
+const wrapperStepTag = styled.div `
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    justify-content: flex-end;
+`;
+const wrapperRating = styled.div `
+    height: fit-content;
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+`;
+const rating = styled.div `
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    
+    font-family: PT Sans;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18.12px;
+    text-align: center;
+
+`;
+const wrapperResults = styled.div `
+    height: 100%;
+    transform: scale(0.94);
+    transform-origin: top left;
+    display: flex;
+    align-items: flex-end;
+    padding-bottom: 30px;
+`;
+
+export { cardContentWrapper, cardWrapper, checkboxWrapper, contentDescription, contentUpdatedChallenge, contentWrapper, headerContent, labelTypeChallenge, namePositionInfo, rating, tagTypeChallenge, userInfo, wrapperRating, wrapperResults, wrapperStepTag };

package/dist/esm/src/components/DS/newCards/channels/index.js

@@ -0,0 +1,10 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ThemeProvider } from 'styled-components';
+import { ContainerCard, ContentCard } from './styles.js';
+import { FRSTTheme } from '../../../../theme/index.js';
+
+function ChannelsCard({ channelImg, channelTitle, handleClickCard }) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx(ContainerCard, { onClick: handleClickCard, children: jsxs(ContentCard, { children: [jsx("img", { src: channelImg, alt: 'Channel Image' }), jsx("p", { children: channelTitle })] }) }) }));
+}
+
+export { ChannelsCard as default };

package/dist/esm/src/components/DS/newCards/channels/styles.js

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+
+const ContainerCard = styled('div') `
+    width: 140px;
+    height: 146px;
+    border-radius: 12px;
+    padding: 16px;
+    background: ${({ theme }) => theme.colors.shadeWhite};
+    cursor: pointer;
+    border: 2px solid transparent;
+
+    :hover {
+        border: 2px solid #757575;
+    }
+
+    :focus {
+        border: 2px solid #757575;
+        background-color: #F7F7F7;
+    }
+`;
+const ContentCard = styled('div') `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+
+    img {
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+    }
+
+    p {
+        font-family: 'PT Sans';
+        font-size: 1rem;
+        line-height: 1.1;
+        font-weight: 700;
+        text-align: center;
+        color: #222222;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+`;
+
+export { ContainerCard, ContentCard };

package/dist/esm/src/components/DS/newCards/content/index.js

@@ -0,0 +1,16 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ThemeProvider } from 'styled-components';
+import { CardContainer, WrapperImage, CardInfo, DescriptionWrapper, CardFooter } from './styles.js';
+import { FRSTTheme } from '../../../../theme/index.js';
+
+function DownloadIcon() {
+    return (jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M15.9031 12.1523V14.7604C15.9031 15.1062 15.7657 15.4379 15.5212 15.6825C15.2766 15.927 14.945 16.0644 14.5991 16.0644H5.47101C5.12516 16.0644 4.79348 15.927 4.54893 15.6825C4.30438 15.4379 4.16699 15.1062 4.16699 14.7604V12.1523", stroke: "#444444", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M6.17285 9.66699L9.92285 13.0003L13.6729 9.66699", stroke: "#444444", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M9.92285 13.0002V3.8335", stroke: "#444444", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+function CardContent({ contentType, contentImage, contentDescription, company, enableDownload, handleDownload, handleClickCard }) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(CardContainer, { onClick: handleClickCard ? handleClickCard : () => { }, children: [jsx(WrapperImage, { children: jsx("img", { src: contentImage }) }), jsxs(CardInfo, { children: [jsxs(DescriptionWrapper, { children: [jsxs("p", { className: 'title', children: [" ", contentType.toUpperCase(), " "] }), jsxs("p", { className: 'description', children: [" ", contentDescription, " "] })] }), jsxs(CardFooter, { children: [company &&
+                                    jsxs("p", { className: 'company', children: [company.icon && company.icon !== '' &&
+                                                jsx("img", { src: company.icon }), company.name] }), enableDownload &&
+                                    jsxs("p", { className: 'download', onClick: handleDownload, children: ["Baixar", jsx(DownloadIcon, {})] })] })] })] }) }));
+}
+
+export { CardContent as default };

package/dist/esm/src/components/DS/newCards/content/styles.js

@@ -0,0 +1,103 @@
+import styled from 'styled-components';
+
+const CardContainer = styled('div') `
+    display: flex;
+    gap: 16px;
+    background-color: #FFFFFF;
+    border-radius: 12px;
+    width: 450px;
+    height: 120px;
+    padding-right: 16px;
+    box-sizing: content-box;
+    border: 2px solid transparent;
+    cursor: pointer;
+
+    :hover {
+        border: 2px solid #757575;
+    }
+
+    :focus {
+        border: 2px solid #757575;
+        background-color: #F7F7F7;
+    }
+`;
+const WrapperImage = styled('div') `
+    img {
+        width: 140px;
+        height: 120px;
+        border-top-left-radius: 12px;
+        border-bottom-left-radius: 12px;
+        object-fit: cover;
+    }
+`;
+const CardInfo = styled('div') `
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 12px 0;
+    width: 100%;
+`;
+const DescriptionWrapper = styled('div') `
+    height: 61px;
+    .title {
+        font-family: 'PT Sans';
+        font-size: 10px;
+        font-weight: 600;
+        line-height: 1.5;
+        color: #F18624;
+        margin-bottom: 4px;
+    }
+
+    .description {
+        font-family: 'PT Sans';
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 1.5;
+        color: #444444;
+
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2; 
+        -webkit-box-orient: vertical;
+        text-overflow: ellipsis;
+    }
+
+`;
+const CardFooter = styled('div') `
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    .company {
+        display: flex;
+        gap: 8px;
+        font-family: 'PT Sans';
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 1.5;
+        color: #444444;
+        margin: 0;
+
+        img {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+        }
+    }
+
+    .download {
+        display: flex;
+        gap: 4px;
+        font-family: 'PT Sans';
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 1.5;
+        color: #444444;
+        cursor: pointer;
+        margin: 0;
+    }
+
+`;
+
+export { CardContainer, CardFooter, CardInfo, DescriptionWrapper, WrapperImage };

package/dist/esm/src/components/DS/newCards/mentoring/index.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Avatar from '../../../avatar/index.js';
+import { CardContainer, CardContent, PhasesContent } from './styles.js';
+import { Box, Typography } from '@mui/material';
+import Button from '../../../buttons/index.js';
+
+function MentoringCard({ avatar, first_name, last_name, position, title, subtitle1, happenedIn, date, link_recording, handleAvatarClick, handleRecordLink }) {
+    return (jsxs(CardContainer, { children: [jsxs(CardContent, { children: [jsx(Box, { children: jsx(Avatar, { size: "67px", src: avatar, isActiveClick: true, onClick: handleAvatarClick, id: "avatar-cardSessionConfirmed" }) }), jsxs(Box, { children: [jsxs(Typography, { fontFamily: "PT Sans", fontWeight: 700, color: "#475569", children: [first_name, " ", last_name] }), jsx("p", { style: {
+                                    fontSize: "12px",
+                                    fontFamily: "PT Sans",
+                                    fontWeight: 700,
+                                    color: "#475569",
+                                    marginBottom: "10.35px",
+                                    marginTop: "5px",
+                                }, children: position }), jsx("p", { style: {
+                                    fontSize: "12px",
+                                    fontFamily: "PT Sans",
+                                    fontWeight: 700,
+                                    color: "#475569",
+                                }, children: title }), jsx(PhasesContent, { children: subtitle1?.map((item, index) => (jsx("div", { children: item }, index))) })] })] }), jsxs("div", { style: {
+                    display: "flex",
+                    gap: "21px",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginTop: "6px",
+                }, children: [jsxs("div", { children: [jsx("p", { style: { fontFamily: "Work Sans", fontSize: "12px" }, children: happenedIn }), jsx("p", { style: {
+                                    fontFamily: "Work Sans",
+                                    fontSize: "12px",
+                                    fontWeight: 700,
+                                }, id: "date-cardSessionConfirmed-sessionHistory", children: date })] }), jsx(Button, { handleClick: () => handleRecordLink(link_recording), variant: "primary", style: {
+                            fontSize: "12px",
+                            width: "134px",
+                            height: "27px",
+                            borderRadius: "13.94px",
+                        }, label: 'Assistir Sessão', id: "watchRecordingBtn-cardSessionConfirmed" })] })] }));
+}
+
+export { MentoringCard as default };

package/dist/esm/src/components/DS/newCards/mentoring/styles.js

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+const CardContainer = styled.div `
+    width: 312px;
+    min-height: 152px;
+    background-color: #FFFFFF;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-bottom: 20px;
+    padding-left: 20px;
+    padding-top: 17px;
+    padding-right: 20px;
+    border-radius: 12px;
+    border: 2px solid transparent;
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+
+    :hover,
+    :focus {
+        border: 2px solid #757575
+    }
+`;
+const CardContent = styled.div `
+    border-bottom: 1px solid #D1D5DB;
+    display: flex;
+    flex-direction: row;
+    gap: 22px;
+    padding-bottom: 18px;
+`;
+const PhasesContent = styled.div `
+    font-size: 12px;
+    font-family: 'PT Sans';
+    color:#475569;
+    margin-bottom: 5px;
+`;
+
+export { CardContainer, CardContent, PhasesContent };