frst-components 0.20.1 → 0.20.2

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

@@ -1,164 +0,0 @@
-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

@@ -1,251 +0,0 @@
-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

@@ -1,99 +0,0 @@
-.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

@@ -1,78 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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>
-    )
-}