frst-components 0.20.1 → 0.20.2

package/src/components/FI/bannerProblemFeed/bannerProblemFeed.stories.tsx

@@ -1,355 +0,0 @@
-import React from 'react'
-
-import BannerProblemFeed from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'FI/Banner Problem Feed',
-    component: BannerProblemFeed,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <BannerProblemFeed {...args} />
-
-export const Normal = Template.bind({})
-Normal.args = {
-    id: 'abc',
-    userAvatar: 'https://i.gyazo.com/59d6b73b26541b748ca6a5d167645746.png',
-    userName: 'Rayana Gama',
-    userPosition: 'Tecnologia da Informação',
-    userCompany: 'FRST Falconi',
-    problemTitle: 'Aumentar a venda de produto adicional na loja física',
-    topHeaderTagText: 'Convite recebido para aprovação',
-    problemTags: ['Customer Success', 'Experiência do usuário', 'CSAT'],
-    lastUpdated: 'Atualizado hoje',
-    lastUpdatedStep: 'Missão 3: Saturno - Testes realizados',
-    stepProblem: 5,
-    stepActive: 1,
-    textButton: 'Mais detalhes',
-
-    language: 'pt-BR',
-
-    step1Title: 'Missão 1: Marte - Definição do Problema',
-    textIndicator: 'Indicador',
-    indicatorValue: '% de venda de produto adicional',
-    textIndicatorSituation: 'Situação atual do indicador',
-    indicatorSituationValue: '% (porcentagem)',
-    textIndicatorObjective: 'Objetivo com o uso do indicador',
-    indicatorObjectiveValue: 'Aumentar',
-    textResultsFuture: 'Resultado que gostaria de alcançar no futuro',
-    resultsFutureValue: '200% em relação ao produto principal ao fim do ciclo ágil (a cada 1 produto principal vendido, devemos vender 2 itens adicionais)',
-
-    step2Title: 'Missão 2: Júpiter - Hipóteses levantadas',
-    textHypotheses: 'Hipótese (priorizada)',
-    hypothesesValue: 'Eu acredito que o oferecimento do item adicional pelo vendedor ao cliente pode aumentar a venda dessa variável. Além disso, a experimentação, contato ou aquisição de cohecimento do produto adicional por parte do cliente, pode aumentar a quantidade de itens vendidos.',
-    textResponsableAction: 'Responsável pela ação',
-    ResponsableActionValue: 'Rayana Ribeiro ',
-    textDate: 'Data limite',
-    dateValue: '30/06/2022',
-    textWhatToDo: 'O que será feito',
-    whatToDoValue: 'Acompanhar a oferta de item adicional no ato da venda e durante a experimentação do produto por parte do cliente.',
-    textSuccessAction: 'Essa ação terá sido um sucesso, caso eu consiga',
-    successActionValue: 'Se percebemos que o cliente vê valor nos produtos oferecidos e adicioná-los à compra.',
-
-    step3Title: 'Missão 3: Saturno - Testes realizados',
-    textTestMade: 'Teste feito para essa ação',
-    testMadeValue: 'O teste, seguido do acompanhamento do vendedor apresentando as características e benefícios do produto, foi fator positivo na conversão de venda, além de proporcionar ao cliente uma diferenciação no atendimento.',
-    textSuccessTest: 'Sucesso desse teste ou ação',
-    successTestValue: 4,
-    textDownloadFiles: 'Baixar arquivo anexado',
-    handleDownloadFiles: () => alert('Downloading'),
-
-    step4Title: 'Missão 4: Urano - Resultados e aprendizados',
-    textMainAchievement: 'Principal conquista',
-    mainAchievementValue: 'Aumentei a % de venda de produto adicional de 5% para 35% ao final do ciclo ágil.',
-
-    step5Title: 'Missão 5: Netuno - Próximos passos',
-    textNextSteps: 'Próximo(s) passo(s)',
-    nextStepsValue: 'Elencar mais produtos que possam repassar de modo prático e sem custos adicionais uma melhor experiência ao cliente.',
-
-    qtdLikes: '23 pessoas',
-    qtdComments: '1 comentário',
-    textLikes: 'Curtir',
-    textDeslike: 'Descurtir',
-    textComments: 'Comentar',
-    textAvaluation: 'Avaliar',
-    isLiked: true,
-    textAvaluationTitle: 'Como você avalia esse desafio?',
-    ratingImpacto: 0,
-    textImpacto: 'Impacto',
-    ratingRelevancia: 0,
-    textRelevancia: 'Relevância',
-
-    avatar: "https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=",
-    userCommentPlaceholder: 'Escreva seu comentário aqui...',
-    textLatestComment: 'Comentário mais recente:',
-    latestComment: {
-        avatar: 'https://i.gyazo.com/59d6b73b26541b748ca6a5d167645746.png',
-        name: 'Roberto Lima',
-        date: '1 minuto atrás',
-        position: 'Estudante/Universitário(a) de Tecnologia da Informação',
-        value: `Oi, Rayana!
-Muito bom o seu projeto! No momento estou lidando com um problema bem parecido e estava com dúvidas na etapa de testes. Os seus foram bem definidos e me deram ideias de como posso me organizar por aqui.`,
-        onChange: () => alert('mudança!'),
-        actionLike: () => alert('Liked'),
-        textLike: 'Curtir',
-        textDeslike: 'Descurtir',
-        isLiked: false,
-        totalLikes: 3,
-        isAuthor: true,
-        isMe: true,
-        hasDropdown: true,
-        detectLinks: true,
-        actionEditComment: () => alert('Edit'),
-        textEditComment: 'Editar Comentário',
-        actionMakePrivate: () => alert('Privado'),
-        textMakePrivate: 'Tornar Privado',
-        textMakePublic: 'Tornar Público',
-        textEdited: 'editado',
-        actionDeleteComment: () => alert('Delete'),
-        textDeleteComment: 'Excluir Comentário',
-        actionUpdateValue: (e) => alert('update: ' + e),
-        textSaveButton: 'Save changes',
-        textSaveButtonMobile: 'Save',
-        textCancelButton: 'Cancel',
-    },
-    textSaveCommentBtn: 'Salvar',
-    isDisabledAvaluation: true,
-    handleSaveCommentBtn: (comment) => alert(`${comment}`),
-    handleImpactoChange: (e) => alert(e),
-    handleRelevanciaChange: (e) => alert(e),
-    handleLikeClick: () => alert('Click'),
-    onCommentChange: (e) => console.log(e.target.value),
-
-    onSelectedStep: (n) => alert(n),
-    onClickButton: () => alert('Ver detalhe')
-}
-
-export const SuccessCase = Template.bind({})
-SuccessCase.args = {
-    id: 'abc',
-    userAvatar: 'https://i.gyazo.com/59d6b73b26541b748ca6a5d167645746.png',
-    userName: 'Rayana Gama',
-    userPosition: 'Tecnologia da Informação',
-    problemTitle: 'Aumentar a venda de produto adicional na loja física',
-    problemTags: ['Customer Success', 'Experiência do usuário', 'CSAT'],
-    lastUpdated: 'Atualizado hoje',
-    lastUpdatedStep: 'Missão 3: Saturno - Testes realizados',
-    stepProblem: 5,
-    stepActive: 1,
-    textButton: 'Mais detalhes',
-
-    language: 'pt-BR',
-    isSuccessCase: true,
-
-    step1Title: 'Missão 1: Marte - Definição do Problema',
-    textIndicator: 'Indicador',
-    indicatorValue: '% de venda de produto adicional',
-    textIndicatorSituation: 'Situação atual do indicador',
-    indicatorSituationValue: '% (porcentagem)',
-    textIndicatorObjective: 'Objetivo com o uso do indicador',
-    indicatorObjectiveValue: 'Aumentar',
-    textResultsFuture: 'Resultado que gostaria de alcançar no futuro',
-    resultsFutureValue: '200% em relação ao produto principal ao fim do ciclo ágil (a cada 1 produto principal vendido, devemos vender 2 itens adicionais)',
-
-    step2Title: 'Missão 2: Júpiter - Hipóteses levantadas',
-    textHypotheses: 'Hipótese (priorizada)',
-    hypothesesValue: 'Eu acredito que o oferecimento do item adicional pelo vendedor ao cliente pode aumentar a venda dessa variável. Além disso, a experimentação, contato ou aquisição de cohecimento do produto adicional por parte do cliente, pode aumentar a quantidade de itens vendidos.',
-    textResponsableAction: 'Responsável pela ação',
-    ResponsableActionValue: 'Rayana Ribeiro ',
-    textDate: 'Data limite',
-    dateValue: '30/06/2022',
-    textWhatToDo: 'O que será feito',
-    whatToDoValue: 'Acompanhar a oferta de item adicional no ato da venda e durante a experimentação do produto por parte do cliente.',
-    textSuccessAction: 'Essa ação terá sido um sucesso, caso eu consiga',
-    successActionValue: 'Se percebemos que o cliente vê valor nos produtos oferecidos e adicioná-los à compra.',
-
-    step3Title: 'Missão 3: Saturno - Testes realizados',
-    textTestMade: 'Teste feito para essa ação',
-    testMadeValue: 'O teste, seguido do acompanhamento do vendedor apresentando as características e benefícios do produto, foi fator positivo na conversão de venda, além de proporcionar ao cliente uma diferenciação no atendimento.',
-    textSuccessTest: 'Sucesso desse teste ou ação',
-    successTestValue: 4,
-    textDownloadFiles: 'Baixar arquivo anexado',
-    handleDownloadFiles: () => alert('Downloading'),
-
-    step4Title: 'Missão 4: Urano - Resultados e aprendizados',
-    textMainAchievement: 'Principal conquista',
-    mainAchievementValue: 'Aumentei a % de venda de produto adicional de 5% para 35% ao final do ciclo ágil.',
-
-    step5Title: 'Missão 5: Netuno - Próximos passos',
-    textNextSteps: 'Próximo(s) passo(s)',
-    nextStepsValue: 'Elencar mais produtos que possam repassar de modo prático e sem custos adicionais uma melhor experiência ao cliente.',
-
-    qtdLikes: '23 pessoas',
-    qtdComments: '1 comentário',
-    textLikes: 'Curtir',
-    textDeslike: 'Descurtir',
-    textComments: 'Comentar',
-    textAvaluation: 'Avaliar',
-    isLiked: true,
-    textAvaluationTitle: 'Como você avalia esse desafio?',
-    ratingImpacto: 0,
-    textImpacto: 'Impacto',
-    ratingRelevancia: 0,
-    textRelevancia: 'Relevância',
-
-    avatar: "https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=",
-    userCommentPlaceholder: 'Escreva seu comentário aqui...',
-    textLatestComment: 'Comentário mais recente:',
-    latestComment: {
-        avatar: 'https://i.gyazo.com/59d6b73b26541b748ca6a5d167645746.png',
-        name: 'Roberto Lima',
-        date: '1 minuto atrás',
-        position: 'Estudante/Universitário(a) de Tecnologia da Informação',
-        value: `Oi, Rayana!
-Muito bom o seu projeto! No momento estou lidando com um problema bem parecido e estava com dúvidas na etapa de testes. Os seus foram bem definidos e me deram ideias de como posso me organizar por aqui.`,
-        onChange: () => alert('mudança!'),
-        actionLike: () => alert('Liked'),
-        textLike: 'Curtir',
-        textDeslike: 'Descurtir',
-        isLiked: true,
-        totalLikes: 3,
-        isAuthor: true,
-        isMe: true,
-        hasDropdown: true,
-        detectLinks: true,
-        actionEditComment: () => alert('Edit'),
-        textEditComment: 'Editar Comentário',
-        actionMakePrivate: () => alert('Privado'),
-        textMakePrivate: 'Tornar Privado',
-        textMakePublic: 'Tornar Público',
-        textEdited: 'editado',
-        actionDeleteComment: () => alert('Delete'),
-        textDeleteComment: 'Excluir Comentário',
-        actionUpdateValue: (e) => alert('update: ' + e),
-        textSaveButton: 'Save changes',
-        textSaveButtonMobile: 'Save',
-        textCancelButton: 'Cancel',
-    },
-    textSaveCommentBtn: 'Salvar',
-    isDisabledAvaluation: true,
-    handleSaveCommentBtn: (comment) => alert(`${comment}`),
-    handleImpactoChange: (e) => alert(e),
-    handleRelevanciaChange: (e) => alert(e),
-    handleLikeClick: () => alert('Click'),
-    onCommentChange: (e) => console.log(e.target.value),
-
-    onSelectedStep: (n) => alert(n),
-    onClickButton: () => alert('Ver detalhe')
-}
-
-
-export const SuccessCaseWithStatusViews = Template.bind({})
-SuccessCaseWithStatusViews.args = {
-    id: 'abc',
-    userAvatar: 'https://i.gyazo.com/59d6b73b26541b748ca6a5d167645746.png',
-    userName: 'Rayana Gama',
-    userPosition: 'Tecnologia da Informação',
-    problemTitle: 'Aumentar a venda de produto adicional na loja física',
-    problemTags: ['Customer Success', 'Experiência do usuário', 'CSAT'],
-    lastUpdated: 'Atualizado hoje',
-    lastUpdatedStep: 'Missão 3: Saturno - Testes realizados',
-    stepProblem: 5,
-    stepActive: 1,
-    textButton: 'Mais detalhes',
-
-    language: 'pt-BR',
-    isSuccessCase: true,
-
-    step1Title: 'Missão 1: Marte - Definição do Problema',
-    textIndicator: 'Indicador',
-    indicatorValue: '% de venda de produto adicional',
-    textIndicatorSituation: 'Situação atual do indicador',
-    indicatorSituationValue: '% (porcentagem)',
-    textIndicatorObjective: 'Objetivo com o uso do indicador',
-    indicatorObjectiveValue: 'Aumentar',
-    textResultsFuture: 'Resultado que gostaria de alcançar no futuro',
-    resultsFutureValue: '200% em relação ao produto principal ao fim do ciclo ágil (a cada 1 produto principal vendido, devemos vender 2 itens adicionais)',
-
-    step2Title: 'Missão 2: Júpiter - Hipóteses levantadas',
-    textHypotheses: 'Hipótese (priorizada)',
-    hypothesesValue: 'Eu acredito que o oferecimento do item adicional pelo vendedor ao cliente pode aumentar a venda dessa variável. Além disso, a experimentação, contato ou aquisição de cohecimento do produto adicional por parte do cliente, pode aumentar a quantidade de itens vendidos.',
-    textResponsableAction: 'Responsável pela ação',
-    ResponsableActionValue: 'Rayana Ribeiro ',
-    textDate: 'Data limite',
-    dateValue: '30/06/2022',
-    textWhatToDo: 'O que será feito',
-    whatToDoValue: 'Acompanhar a oferta de item adicional no ato da venda e durante a experimentação do produto por parte do cliente.',
-    textSuccessAction: 'Essa ação terá sido um sucesso, caso eu consiga',
-    successActionValue: 'Se percebemos que o cliente vê valor nos produtos oferecidos e adicioná-los à compra.',
-
-    step3Title: 'Missão 3: Saturno - Testes realizados',
-    textTestMade: 'Teste feito para essa ação',
-    testMadeValue: 'O teste, seguido do acompanhamento do vendedor apresentando as características e benefícios do produto, foi fator positivo na conversão de venda, além de proporcionar ao cliente uma diferenciação no atendimento.',
-    textSuccessTest: 'Sucesso desse teste ou ação',
-    successTestValue: 4,
-    textDownloadFiles: 'Baixar arquivo anexado',
-    handleDownloadFiles: () => alert('Downloading'),
-
-    step4Title: 'Missão 4: Urano - Resultados e aprendizados',
-    textMainAchievement: 'Principal conquista',
-    mainAchievementValue: 'Aumentei a % de venda de produto adicional de 5% para 35% ao final do ciclo ágil.',
-
-    step5Title: 'Missão 5: Netuno - Próximos passos',
-    textNextSteps: 'Próximo(s) passo(s)',
-    nextStepsValue: 'Elencar mais produtos que possam repassar de modo prático e sem custos adicionais uma melhor experiência ao cliente.',
-
-    qtdLikes: '23 pessoas',
-    qtdComments: '1 comentário',
-    textLikes: 'Curtir',
-    textDeslike: 'Descurtir',
-    textComments: 'Comentar',
-    textAvaluation: 'Avaliar',
-    isLiked: true,
-    textAvaluationTitle: 'Como você avalia esse desafio?',
-    ratingImpacto: 0,
-    textImpacto: 'Impacto',
-    ratingRelevancia: 0,
-    textRelevancia: 'Relevância',
-
-    avatar: "https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=",
-    userCommentPlaceholder: 'Escreva seu comentário aqui...',
-    textLatestComment: 'Comentário mais recente:',
-    latestComment: {
-        avatar: 'https://i.gyazo.com/59d6b73b26541b748ca6a5d167645746.png',
-        name: 'Roberto Lima',
-        date: '1 minuto atrás',
-        position: 'Estudante/Universitário(a) de Tecnologia da Informação',
-        value: `Oi, Rayana!
-Muito bom o seu projeto! No momento estou lidando com um problema bem parecido e estava com dúvidas na etapa de testes. Os seus foram bem definidos e me deram ideias de como posso me organizar por aqui.`,
-        onChange: () => alert('mudança!'),
-        actionLike: () => alert('Liked'),
-        textLike: 'Curtir',
-        textDeslike: 'Descurtir',
-        isLiked: true,
-        totalLikes: 3,
-        isAuthor: true,
-        isMe: true,
-        hasDropdown: true,
-        detectLinks: true,
-        actionEditComment: () => alert('Edit'),
-        textEditComment: 'Editar Comentário',
-        actionMakePrivate: () => alert('Privado'),
-        textMakePrivate: 'Tornar Privado',
-        textMakePublic: 'Tornar Público',
-        textEdited: 'editado',
-        actionDeleteComment: () => alert('Delete'),
-        textDeleteComment: 'Excluir Comentário',
-        actionUpdateValue: (e) => alert('update: ' + e),
-        textSaveButton: 'Save changes',
-        textSaveButtonMobile: 'Save',
-        textCancelButton: 'Cancel',
-    },
-    textSaveCommentBtn: 'Salvar',
-    isDisabledAvaluation: true,
-    handleSaveCommentBtn: (comment) => alert(`${comment}`),
-    handleImpactoChange: (e) => alert(e),
-    handleRelevanciaChange: (e) => alert(e),
-    handleLikeClick: () => alert('Click'),
-    onCommentChange: (e) => console.log(e.target.value),
-
-    onSelectedStep: (n) => alert(n),
-    onClickButton: () => alert('Ver detalhe'),
-    textTotalView: '12 Visualizações',
-    handleClickTextTotalViews: () => alert('Click Views')
-}

package/src/components/FI/bannerProblemFeed/bannerProblemFeedStyles.ts

@@ -1,128 +0,0 @@
-import styled from "styled-components";
-
-export const achievementHeader = styled.div`
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-direction: row;
-    
-    height: 96px;
-    padding: 20px 32px;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-    word-wrap: break-word;
-
-    ${({theme}) => theme.fonts.textMessageComponentsBodyBold};
-    color: ${({theme}) => theme.colors.shadeWhite};
-`
-
-export const bannerContainer = styled.div`
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-direction: column;
-    border: 1px solid ${({theme}) => theme.colors.borderPrimary}; 
-    background-color: ${({theme}) => theme.colors.shadeWhite};
-    padding: 24px;
-    position: relative;
-`
-
-export const headerContent = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: row;
-`
-
-export const userInfo = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    flex-direction: column;
-
-    font-family: 'Work Sans';
-    color: ${({theme}) => theme.colors.neutralsGrey1};
-    margin-left: 16px;
-`
-
-export const problemTitle = styled.div`
-    font-family: 'Work Sans';
-    color: ${({theme}) => theme.colors.primary1};
-    font-size: 24px;
-    font-weight: 600;
-    text-align: center;
-    margin-top: 24px;
-    word-wrap: break-word;
-`
-
-export const tagContent = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    margin-top: 24px;
-    gap: 8px;
-`
-
-export const lastUpdatedText = styled.div`
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-direction: row;
-    ${({theme}) => theme.fonts.textMessageComponentsBodySmall};
-    margin-top: 16px;
-`
-
-export const stepsContainer = styled.div`
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-direction: column;
-    width: 100%;
-    border: 1px solid ${({theme}) => theme.colors.borderPrimary}; 
-    border-radius: 8px;
-    background-color: ${({theme}) => theme.colors.shadeWhite};
-    padding: 24px;
-    margin-bottom: 24px;
-`
-
-export const stepsTitle = styled.span`
-    ${({theme}) => theme.fonts.header2};
-    font-size: 24px !important;
-`
-
-export const stepsLabel = styled.span`
-    font-family: 'Work Sans';
-    font-size: 16px;
-    font-weight: 700;
-    color: ${({theme}) => theme.colors.neutralsGrey1};
-    margin-top: 16px;
-    word-wrap: break-word;
-`
-
-export const stepsValueText = styled.span`
-    font-family: 'Work Sans';
-    font-size: 16px;
-    font-weight: 400;
-    color: ${({theme}) => theme.colors.neutralsGrey1};
-    margin-top: 8px;
-    word-wrap: break-word;
-`
-
-export const topHeaderTag = styled.span<{ background: string, color: string }>`
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    padding: 4px 16px;
-    gap: 10px;
-
-    position: absolute;
-    right: -1px;
-    top: -1px;
-
-    background: ${({background}) => background || '#940059'};
-    color: ${({color}) => color || '#FFFFFF'};
-    border-radius: 0px 8px;
-
-`