frst-components 0.20.0

package/src/components/cards/cardProblem/cardProblem.stories.tsx

@@ -0,0 +1,164 @@
+import React from 'react'
+
+import CardProblem from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Cards/CardProblem',
+    component: CardProblem,
+    argTypes: {
+        language: {
+            control: 'select',
+            options: ['pt-BR', 'en-US', 'es-ES']
+        }
+    }
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <CardProblem {...args} />
+
+export const hipoteseLevantada = Template.bind({})
+hipoteseLevantada.args = {
+    
+    selected: false,
+    language: 'pt-BR',
+    
+    problemID: "bla-blu-fla",
+    userName: "Roberto Lima",
+    
+    problemStatus: "hipoteseLevantada",
+    
+    userCargo: "Tecnologia da informação (Estudante/Universitário(a))",
+    cardTitle: "Aumentar o engajamento dos alunos na plataforma D2L",
+    statusProblema: 'aguardando',
+    trilhaVinculada: 'Digital Business Mindset',
+    lastUpdated: 'Atualizado 30 de Abr. 2022',
+    isButtonVerMais: true,
+    onClick: (problemID) => { alert(problemID)}
+}
+
+export const finalizado = Template.bind({})
+finalizado.args = {
+    
+    selected: false,
+    language: 'pt-BR',
+    problemID: "bla-blu-fla",
+    userName: "Roberto Lima",
+    problemStatus: "finalizado",
+    userCargo: "Tecnologia da informação (Estudante/Universitário(a))",
+
+    cardTitle: "Aumentar o engajamento dos alunos na plataforma D2L",
+    statusProblema: 'aprovado',
+    trilhaVinculada: 'Digital Business Mindset',
+    lastUpdated: 'Atualizado 30 de Abr. 2022'
+}
+
+export const proxPassos = Template.bind({})
+proxPassos.args = {
+    
+    selected: false,
+    language: 'pt-BR',
+    
+    problemID: "bla-blu-fla",
+    userName: "Roberto Lima",
+    
+    problemStatus: "proxPassos",
+    
+    userCargo: "Tecnologia da informação (Estudante/Universitário(a))",
+    cardTitle: "Aumentar o engajamento dos alunos na plataforma D2L",
+    statusProblema: 'revisar',
+    trilhaVinculada: 'Digital Business Mindset',
+    lastUpdated: 'Atualizado 30 de Abr. 2022'
+}
+
+export const resultadosAprendizados = Template.bind({})
+resultadosAprendizados.args = {
+    
+    selected: false,
+    language: 'pt-BR',
+    
+    problemID: "bla-blu-fla",
+    userName: "Roberto Lima",
+    
+    problemStatus: "resultadosAprendizados",
+    
+    userCargo: "Tecnologia da informação (Estudante/Universitário(a))",
+    cardTitle: "Aumentar o engajamento dos alunos na plataforma D2L",
+    statusProblema: 'aprovado',
+    
+    lastUpdated: 'Atualizado 30 de Abr. 2022'
+}
+
+export const testesRealizados = Template.bind({})
+testesRealizados.args = {
+    
+    selected: false,
+    language: 'pt-BR',
+    
+    problemID: "bla-blu-fla",
+    userName: "Roberto Lima",
+    
+    problemStatus: "testesRealizados",
+    
+    userCargo: "Tecnologia da informação (Estudante/Universitário(a))",
+    cardTitle: "Aumentar o engajamento dos alunos na plataforma D2L",
+    trilhaVinculada: 'Digital Business Mindset',
+    lastUpdated: 'Atualizado 30 de Abr. 2022'
+}
+
+export const verificado = Template.bind({}) 
+verificado.args = {
+    
+    selected: false,
+    language: 'pt-BR',
+    
+    problemID: "bla-blu-fla",
+    userName: "Roberto Lima",
+    
+    problemStatus: "hipoteseLevantada",
+    
+    userCargo: "Tecnologia da informação (Estudante/Universitário(a))",
+    cardTitle: "Aumentar o engajamento dos alunos na plataforma D2L",
+    statusProblema: 'aguardando',
+    trilhaVinculada: 'Digital Business Mindset',
+    lastUpdated: 'Atualizado 30 de Abr. 2022',
+    isButtonVerMais: true,
+    onClick: (problemID) => { alert(problemID)},
+    isVerified: true,
+
+}
+
+
+export const problemaDefinido = Template.bind({})
+problemaDefinido.args = {
+    
+    selected: false,
+    language: 'pt-BR',
+    
+    problemID: "bla-blu-fla",
+    userName: "Roberto Lima",
+    
+    problemStatus: "problemaDefinido",
+    
+    userCargo: "Tecnologia da informação (Estudante/Universitário(a))",
+    cardTitle: "Aumentar o engajamento dos alunos na plataforma D2L",
+    statusProblema: 'aguardando',
+    
+    lastUpdated: 'Atualizado 30 de Abr. 2022'
+}
+
+
+export const naoIniciou = Template.bind({})
+naoIniciou.args = {
+    
+    selected: false,
+    language: 'pt-BR',
+    
+    problemID: "bla-blu-fla",
+    userName: "Roberto Lima",
+    
+    problemStatus: "naoIniciou",
+    
+    userCargo: "Tecnologia da informação (Estudante/Universitário(a))",
+
+}

package/src/components/cards/cardProblem/index.tsx

@@ -0,0 +1,251 @@
+import '../../../shared/global.css'
+import { useState, useEffect, useLayoutEffect } from 'react'
+import { EditIcon, CheckboxChecked, CheckboxEmpty, WithTrail, WithoutTrail, SawBadgeIcon } from '@shared/icons'
+import style from './cardProblem.module.css'
+import Avatar from '../../avatar/index'
+import RocketButton from '@components/cardLT/RocketButton'
+import MessageBox from '@components/cardLT/MessageBox'
+import TextIcon from '@components/cardLT/TextIcon'
+import Button from '@components/buttons'
+import { dividerClasses } from '@mui/material'
+import { Padding } from '@mui/icons-material'
+
+
+
+interface CardProblemProps {
+
+    selected: boolean
+    language: string,
+    isButtonVerMais: boolean
+    handleSelect?: (id: string) => void
+    onClick?: (problemID: string) => void
+    problemID: string
+    userName: string
+    userCargo: string
+    /**
+        * @prop {string} problemStatus: Qual o status do problema: (finalizado, proxPassos, resultadosAprendizados, testesRealizados, hipoteseLevantada, problemaDefinido, problemaCriado)
+    */
+    problemStatus: string
+    userAvatar?: string
+
+    cardTitle?: string
+    /**
+        * @prop {string} statusProblema: Qual o status do problema (aprovado, revisar ou aguardando)
+    */
+    statusProblema?: string
+    trilhaVinculada?: string
+    lastUpdated?: string
+    isVerified?: boolean
+}
+
+
+const translate = {
+    "pt-BR": {
+        'notStarted': "Não iniciou",
+        'finished': "Finalizado",
+        'nextSteps': "Próximos passos",
+        'resultsAndLearnings': "Resultados e aprendizados",
+        'testsPerformed': "Testes realizados",
+        'hypothesesTaised': "Hipóteses levantadas",
+        'problemDefined': "Problema definido",
+        'problemCreated': "Problema criado",
+
+        'evaluation': 'avaliação',
+        'impact': 'Impacto',
+        'relevance': 'Relevância',
+
+        'problemApproved': 'Problema aprovado',
+        'reviewProblem': 'Revisar problema proposto',
+        'waitingApproval': 'Aguardando aprovação',
+
+        'linkedTrail': 'Vinculado à trilha',
+        'notLinkedTrail': 'Ainda não está vinculado a uma trilha',
+
+        'verifiedChallenge': 'Desafio verificado',
+        'challenge': 'Desafio',
+
+        'viewMore': 'Ver mais',
+
+    },
+    'en-US': {
+        'notStarted': 'Not started',
+        'finished': "Finished",
+        'nextSteps': "Next steps",
+        'resultsAndLearnings': "Results and learnings",
+        'testsPerformed': "Tests performed",
+        'hypothesesTaised': "Hypotheses raised",
+        'problemDefined': "Problem defined",
+        'problemCreated': "Problem created",
+
+        'evaluation': 'evaluation(s)',
+        'impact': 'Impact',
+        'relevance': 'Relevance',
+
+        'problemApproved': 'Problem approved',
+        'reviewProblem': 'Review proposed problem',
+        'waitingApproval': 'Waiting for approval',
+
+        'linkedTrail': 'Linked to trail',
+        'notLinkedTrail': 'Not yet linked to a trail',
+
+        'verifiedChallenge': 'Verified Challenge',
+        'challenge': 'Challenge',
+
+        'viewMore': 'View more',
+    },
+    "es-ES": {
+        'notStarted': "No empezado",
+        'finished': "Acabado",
+        'nextSteps': "Próximos pasos",
+        'resultsAndLearnings': "Resultados y aprendizajes",
+        'testsPerformed': "Pruebas completadas",
+        'hypothesesTaised': "Hipótesis planteadas",
+        'problemDefined': "Problema definido",
+        'problemCreated': "Problema creado",
+
+        'evaluation': 'evaluación',
+        'impact': 'Impacto',
+        'relevance': 'Relevancia',
+
+        'problemApproved': 'Problema aprobado',
+        'reviewProblem': 'Revisar el problema propuesto',
+        'waitingApproval': 'Aguardando aprobación',
+
+        'linkedTrail': 'Vinculado a sendero',
+        'notLinkedTrail': 'Aún no vinculado a un sendero',
+
+        'verifiedChallenge': 'Desafío verificado',
+        'challenge': 'Desafío',
+
+        'viewMore': 'Ver más',
+    }
+}
+
+const isValidLanguage = (lang) => {
+    return lang == 'en-US' || lang == 'pt-BR' || lang == "es-ES";
+}
+
+/**
+ * @param {CardProblemProps} props
+ */
+export default function CardProblem(props: CardProblemProps) {
+    const [languageSlected, onChangeLanguage] = useState(isValidLanguage(props.language) ? props.language : 'pt-BR')
+
+    useEffect(() => {
+        onChangeLanguage(isValidLanguage(props.language) ? props.language : 'pt-BR')
+    }, [props.language])
+
+    const [statusName, setStatusName] = useState(translate[languageSlected]['notStarted'])
+    const [selected, setSelected] = useState(props.selected)
+
+
+
+    const [statusColor, setStatusColor] = useState('#757575')
+
+    useEffect(() => {
+        switch (props.problemStatus) {
+            case 'finalizado': setStatusColor("#158214"), setStatusName(translate[languageSlected]['finished']); break
+            case 'proxPassos': setStatusColor("#222222"), setStatusName(translate[languageSlected]['nextSteps']); break
+            case 'resultadosAprendizados': setStatusColor("#AD005C"), setStatusName(translate[languageSlected]['resultsAndLearnings']); break
+            case 'testesRealizados': setStatusColor("#663366"), setStatusName(translate[languageSlected]['testsPerformed']); break
+            case 'hipoteseLevantada': setStatusColor("#F8B911"), setStatusName(translate[languageSlected]['hypothesesTaised']); break
+            case 'problemaDefinido': setStatusColor("#252BB1"), setStatusName(translate[languageSlected]['problemDefined']); break
+            case 'problemaCriado':
+            default: setStatusColor("#757575"), setStatusName(translate[languageSlected]['problemCreated']); break
+        }
+    }, [props.problemStatus, languageSlected])
+
+    useEffect(() => {
+        setSelected(props.selected)
+    }, [props.selected])
+
+    // Função para pegar o width da tela
+    const [size, setSize] = useState([0, 0])
+    useLayoutEffect(() => {
+        function updateSize() {
+            setSize([window.innerWidth, window.innerHeight]);
+        }
+        window.addEventListener('resize', updateSize);
+        updateSize();
+        return () => window.removeEventListener('resize', updateSize);
+    }, []);
+
+    const BREAKWIDTH = 450;
+
+    return (
+
+        <div className={style.container} style={{ border: '1px solid ', borderColor: statusColor, backgroundColor: selected ? '#FF4D0D' : '#FFF', color: selected ? '#FFF' : '#000' }}>
+            <div className={style.tagStatusProblem} style={{ background: statusColor, color: statusName === translate[languageSlected]['hypothesesTaised'] ? '#222222' : '#FFF' }}>
+                {statusName}
+            </div>
+
+            <div className={style.checkBox} onClick={() => {
+                props.handleSelect(props.problemID)
+            }}>
+
+                {selected ? <CheckboxChecked /> : <CheckboxEmpty />}
+
+            </div>
+            <div className={style.contentCard} onClick={() => { props.onClick(props.problemID) }} >
+
+                <div className={style.avatarInfoUser}>
+                    <div> <Avatar size='40px' src={props.userAvatar} /> </div>
+                    <div className={style.infoUser}>
+                        <span style={{ fontSize: 16, fontWeight: 600 }}>{props.userName}</span>
+                        <span style={{ fontSize: 14, fontWeight: 400 }}>{props.userCargo}</span>
+                    </div>
+                </div>
+
+                {
+                    props.isVerified ?
+                        <div
+                            style={{ textAlign: 'center', display:'flex' }}
+                         >
+                            <div style={{ color: selected ? '#FFF' : '#000', width: '100%', fontWeight: 700 }}>
+                                <span >{translate[languageSlected]['verifiedChallenge']}</span>
+                            </div>
+                            <SawBadgeIcon />
+                        </div>
+
+                        :
+                        <div style={{ color: selected ? '#FFF' : '#000', width: '100%', fontWeight: 700 }}>
+                            <span >{translate[languageSlected]['challenge']}</span>
+                        </div>
+
+                }
+
+                {
+                    props.cardTitle &&
+                    <div className={style.tituloCard} style={{ color: selected ? '#FFF' : '#FF4D0D', width: '100%' }}>
+                        <span >{props.cardTitle}</span>
+                    </div>
+                }
+
+
+                {
+                    statusName !== translate[languageSlected][6] ?
+                        props.trilhaVinculada ?
+                            <TextIcon description={`${translate[languageSlected]['linkedTrail']} ${props.trilhaVinculada}`} svg={<WithTrail />} style={{ fontSize: 12, fontWeight: 400, marginTop: 8 }} />
+                            :
+                            <TextIcon description={translate[languageSlected]['notLinkedTrail']} svg={<WithoutTrail />} style={{ fontSize: 12, fontWeight: 400, marginTop: 8 }} />
+                        :
+                        <></>
+                }
+                {
+                    props.lastUpdated &&
+                    <div style={{ color: '#000', fontSize: 12, fontWeight: 400, marginTop: 40 }}>{props.lastUpdated} </div>
+                }
+
+                {
+                    props.isButtonVerMais &&
+                    <div className={style.buttonVerMais} >
+                        <Button variant='link' label={translate[languageSlected]['viewMore']} handleClick={() => props.onClick(props.problemID)} />
+
+                    </div>
+                }
+
+            </div>
+
+        </div>
+    )
+}

package/src/components/cards/cardProblemGestor/cardProblemaGestor.module.css

@@ -0,0 +1,99 @@
+.container {
+    width: 100%;
+    padding-top: 30px;
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-bottom: 16px;
+
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: row;
+    position: relative;
+}
+
+.container:hover {
+    cursor: pointer;
+}
+
+.tagStatusProblem {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    font-size: 12px;
+    font-weight: 500;
+    padding: 8px;
+
+    border-bottom-left-radius: 8px;
+    
+
+}
+
+.checkBox {
+    
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    height: 100%;
+    padding-top: 20px;
+    padding-left: 12px;
+    
+
+    position: absolute;
+    left: 0;
+
+}
+
+.contentCard {
+    
+    
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+}
+
+.avatarInfoUser {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+}
+
+.infoUser {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    margin-left: 4px;
+}
+
+.tituloCard {
+    
+    margin-top: 4px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    font-weight: 600;
+    font-size: 18px;
+    word-wrap: break-word;
+}
+
+.tagsContainer {
+    
+    
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.avaliacao {
+
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    
+}

package/src/components/cards/cardProblemGestor/cardProblemaGestor.stories.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+
+import CardProblemGestor from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Cards/CardProblemGestor',
+    component: CardProblemGestor,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) =>  <CardProblemGestor {...args} /> 
+    
+
+
+export const problemaDefinido = Template.bind({}) 
+problemaDefinido.args = {
+    
+    problemID: "bla-blu-fla",
+    userName: "Roberto Lima",
+    
+    problemStatus: "problemaDefinido",
+    
+    userCargo: "Tecnologia da informação (Estudante/Universitário(a))",
+    cardTitle: "Aumentar o engajamento dos alunos na plataforma D2L",
+    tags: ['Customer Success', 'Experiência do usuário', 'CSAT'],
+    ratingImpacto:{
+        nota: 4.6,
+        qtdeAvaliacao: 19,
+        description: 'Ótimo'
+    },
+    ratingRelevancia:{
+        nota: 3.8,
+        qtdeAvaliacao: 23,
+        description: 'Bom'
+    },
+    ratingCurtidas: 24,
+        
+    onClick: (problemID) => { alert(problemID)},
+    lastUpdated: 'Atualizado a 2 dias',
+
+    locales: {
+        impact: 'Impacto',
+        relevance: 'Relevância',
+        likes: 'Curtidas',
+        evaluation: 'Avaliação',
+        likesDescription: 'Pessoas',
+    }
+}
+
+export const hipoteseLevantada = Template.bind({})
+hipoteseLevantada.args = {
+    
+    problemID: "bla-blu-fla",
+    userName: "Roberto Lima",
+    
+    problemStatus: "hipoteseLevantada",
+    
+    userCargo: "Tecnologia da informação (Estudante/Universitário(a))",
+    cardTitle: "Aumentar o engajamento dos alunos na plataforma D2L",
+    onClick: (problemID) => { alert(problemID)},
+    lastUpdated: 'Atualizado a 2 dias'
+}
+
+export const resultadosAprendizados = Template.bind({}) 
+resultadosAprendizados.args = {
+    
+    problemID: "bla-blu-fla",
+    userName: "Roberto Lima Ribeiro da Silva Santos",
+    
+    problemStatus: "resultadosAprendizados",
+    
+    userCargo: "Tecnologia da informação (Estudante/Universitário(a))",
+    cardTitle: "Aumentar o engajamento dos alunos na plataforma D2L",
+    tags: ['Customer Success', 'Experiência do usuário', 'CSAT'],        
+    onClick: (problemID) => { alert(problemID)},
+    lastUpdated: 'Atualizado a 2 dias'
+}

package/src/components/cards/cardProblemGestor/index.tsx

@@ -0,0 +1,105 @@
+import '../../../shared/global.css'
+import Tag from '@components/tag'
+import style from './cardProblemaGestor.module.css'
+import Avatar from '../../avatar/index'
+
+import Rating from '@components/cardLT/Rating'
+import RatingCurtidas from '@components/cardLT/RatingCurtidas'
+
+
+interface CardProblemGestorProps {
+    problemID: string
+    userName: string
+    userCargo: string
+    problemStatus: string
+    userAvatar?: string
+    
+    tags?: string[]
+    cardTitle?: string
+    ratingImpacto?: any
+    ratingRelevancia?: any 
+    ratingCurtidas?: number
+
+    lastUpdated?: string
+
+    onClick: (problemID: string) => void
+
+    statusName?: string
+    statusColor?: string
+    statusBackgroundColor?: string
+    locales?: any
+}
+
+
+/**
+ * @param {CardProblemGestorProps} props
+ */
+export default function CardProblemGestor(props: CardProblemGestorProps) {
+    const statusBg = props.statusBackgroundColor || '#757575'
+    const statusColor = props.statusColor || '#FFFFFF'
+
+    return (
+        
+        <div className={style.container} style={{border: '1px solid ', borderColor: '#CCC', backgroundColor: '#FFF', color: '#000' }} onClick={() => props.onClick(props.problemID)} >
+            <div className={style.tagStatusProblem} style={{background: statusBg || '#757575', color: statusColor}}>
+                {props.statusName}
+            </div>
+            
+            <div className={style.contentCard}>
+                <div className={style.avatarInfoUser}>
+                    <div> <Avatar size='40px' src={props.userAvatar} /> </div>
+                    <div className={style.infoUser}> 
+                        <span style={{fontSize:16, fontWeight:600}}>{props.userName}</span> 
+                        <span style={{fontSize:14, fontWeight:400}}>{props.userCargo}</span>
+                    </div>
+                </div>
+                {props.cardTitle &&
+                    <div className={style.tituloCard} style={ {color: '#FF4D0D' , width: '100%'}}> 
+                        <span >{props.cardTitle}</span>
+                    </div>
+                }
+                {props.tags &&
+                    <div className={style.tagsContainer}> 
+                        {props.tags.map((item, index) =>(
+                                <Tag  title={item} color={'#050505'} selected={false} inverted={true} key={index} style={{fontWeight: 500, fontSize:14, marginRight: 8, marginTop: 8}} /> 
+                            ))
+                        }
+                    </div>
+                }
+                {props.ratingImpacto &&
+                    <div className={style.avaliacao}>
+                        <Rating 
+                            nota={props.ratingImpacto.nota}
+                            qtdeAvaliacao={props.ratingImpacto.qtdeAvaliacao} 
+                            descricaoAvaliacao={props.ratingImpacto.description} 
+                            titulo={props.locales?.impact}
+                            tipoVisualizacao={2} 
+                            style={{margin: 0, width:120}}
+                            nomeAvaliacao={props.locales?.evaluation}
+                        />
+                        <Rating 
+                            nota={props.ratingRelevancia.nota} 
+                            qtdeAvaliacao={props.ratingRelevancia.qtdeAvaliacao} 
+                            descricaoAvaliacao={props.ratingRelevancia.description} 
+                            titulo={props.locales?.relevance} 
+                            tipoVisualizacao={2} 
+                            style={{margin: 0, width:120}} 
+                            nomeAvaliacao={props.locales?.evaluation}
+                        />
+                        <RatingCurtidas 
+                            qtdeCurtidas={props.ratingCurtidas}
+                            titulo={props.locales?.likes}
+                            tipoBotao={4} 
+                            style={{margin: 0, width:90}}
+                            descricaoCurtida={props.locales?.likesDescription}
+                        />
+                    </div>
+                }
+                {props.lastUpdated &&
+                    <div style={{color: '#0645AD', fontSize: 12, fontWeight: 400, marginTop:8}}>{props.lastUpdated} </div>
+                }
+            </div>
+            
+        </div>
+    )
+}