frst-components 0.20.0 → 0.20.2

package/src/components/FI/bannerSRG/bannerSRGStyle.ts

@@ -1,226 +0,0 @@
-import styled, { css } from 'styled-components'
-
-export const ContainerTotal = styled.div<{isExtendedVersion, bannerLarge, bannerNormal, bannerResponsive}>`
-    width: 100%;
-    min-height: 508px;
-    background-image: url("${({bannerNormal, bannerLarge, isExtendedVersion}) => isExtendedVersion ? bannerLarge : bannerNormal}");
-    background-repeat: no-repeat;
-    background-position: top;
-    background-size: cover;
-
-    display: flex;
-    flex-direction: column;
-
-    @media (max-width: 870px) {
-        background-image: url("${({bannerResponsive}) => bannerResponsive}");
-        height: 745px;
-    }
-`
-
-export const VersionExtended = styled.div<{isExtendedVersion, heightExtended}>`
-    height: ${({isExtendedVersion, heightExtended}) => isExtendedVersion ? heightExtended ? heightExtended : '508px': '0px'};
-    @media (max-width: 870px) {
-        display: none;
-    }
-`
-
-export const ContainerBanner = styled.div`
-    width: 100%;
-    height: 508px;
-
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-
-    & > div:nth-child(5) {
-        display: none;
-    }
-    @media (max-width: 1500px) {
-        padding: 20px !important;
-    }
-
-    @media (max-width: 1200px) {
-        & > div:nth-child(1) {
-            display: none !important;
-        }
-    }
-
-    @media (max-width: 870px) {
-        height: 745px;
-
-        & > div:nth-child(2) {
-            min-width: 100%;
-        }
-        & > div:nth-child(3) {
-            min-width: 360px;
-            max-width: 360px;
-
-            & > div:nth-child(2) {
-                margin-bottom: 0px;
-            }
-            & > button {
-                display: none;
-            }
-        }
-        & > div:nth-child(4) {
-            min-width: 100%;
-            max-width: 100%;
-            display: flex;
-            justify-content: center;
-
-            & > div:nth-child(1) {
-                width: 270px;
-                margin-left: 0px;
-
-                & > div:nth-child(1) {
-
-                }
-            }
-        }
-        & > div:nth-child(5) {
-            min-width: 100%;
-            min-width: 360px;
-            display: flex;
-            align-self: flex-end;
-            margin-bottom: 40px;
-            & > button {
-                width: 360px;
-                max-width: 100%;
-            }
-        }
-    }
-`
-export const WrapperContent = styled.div`
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-`
-export const WrapperContentMain = styled.div`
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    flex-direction: column;
-    & button {
-        width: fit-content;
-        white-space:  nowrap;
-    }
-`
-
-export const WrapperContentHelper = styled.div`
-    flex: 1;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-end;
-    flex-direction: row;
-`
-
-export const TitleSRG = styled.div`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 130%;
-    white-space:  nowrap;
-
-    display: flex;
-    align-items: center;
-    letter-spacing: 0.01em;
-
-    color: ${({theme}) => theme.colors.shadeWhite};
-    margin-bottom: 24px;
-    
-`
-
-export const DescriptionSRG = styled.div`
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 18px;
-    line-height: 23px;
-    display: flex;
-    align-items: center;
-
-    color: ${({theme}) => theme.colors.shadeWhite};
-    margin-bottom: 24px;
-`
-
-
-
-export const SpeechBubble = styled.div`
-    flex-direction: column;
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
-
-    background: ${({theme}) => theme.colors.messageAlert2};
-    border: 1.5px solid ${({theme}) => theme.colors.borderSecondary2};
-    border-radius: 8px;
-    padding: 16px;
-    
-    width: 160px;
-    margin-right: 22px;
-    margin-left: 50px;
-
-    &:before {
-        content: "";
-        position: absolute;
-        border-top: 10px solid transparent;
-        border-bottom: 10px solid transparent;
-        border-left: 20px solid ${({theme}) => theme.colors.borderSecondary2}; 
-        border-right: 10px solid transparent;
-        margin-right: -46px;
-        margin-bottom: 0px;
-    }
-
-    &:after {
-        content: "";
-        position: absolute;
-        border-top: 10px solid transparent;
-        border-bottom: 10px solid transparent;
-        border-left: 20px solid ${({theme}) => theme.colors.messageAlert2}; 
-        border-right: 10px solid transparent;
-        margin-right: -44px;
-        margin-bottom: 0px;
-    }
-
-    & a {
-        align-self: flex-start;
-    }
-`
-export const HelperText = styled.div`
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 21px;
-
-    color: ${({theme}) => theme.colors.neutralsGrey1};
-    margin-bottom: 8px;
-`
-
-
-export const FrstSocials = styled.div`
-    display:flex;
-    justify-content: center;
-    align-center: center;
-    flex-direction: row;
-    margin-top: 24px;
-    margin-bottom: 32px;
-    position: absolute;
-    right: 120px;
-    top: 60px;
-    @media (max-width: 1500px) {
-        right: 40px;
-    }
-`
-
-export const ItemFrstSocials = styled.button`
-    border: none;
-    background: none;
-    cursor: pointer;
-    margin-left: 11px;
-`

package/src/components/FI/bannerSRG/index.tsx

@@ -1,93 +0,0 @@
-import '../../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import { IBannerSRG } from './bannerSRG'
-import Button from '@components/buttons'
-import LateralMenu from '@components/lateral-menu'
-import * as Icons from '@shared/icons'
-import { 
-    ContainerTotal,
-    ContainerBanner, 
-    VersionExtended,
-    WrapperContent, 
-    WrapperContentMain,
-    WrapperContentHelper,
-    TitleSRG, 
-    DescriptionSRG,
-    SpeechBubble,
-    HelperText,
-    FrstSocials,
-    ItemFrstSocials } from './bannerSRGStyle'
-
-export default function BannerSRG(props: IBannerSRG) {
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            <ContainerTotal 
-                isExtendedVersion = {props?.isExtendedVersion}
-                bannerLarge={props?.bannerSRG?.large} 
-                bannerNormal={props?.bannerSRG?.normal} 
-                bannerResponsive={props?.bannerSRG?.responsive} 
-                style={{...props.style}}
-            >
-                <ContainerBanner>
-                    <WrapperContent style={{maxHeight: '240px', height: '240px', display: 'flex', alignItems: 'flex-start', marginTop: '-100px'}}>
-                        { props &&  props.social &&
-                        <FrstSocials>
-                            {props.social.onClickSite &&      <ItemFrstSocials onClick={() => props.social.onClickSite()} > <Icons.SiteIcon /> </ItemFrstSocials>}
-                            {props.social.onClickLinkedin &&  <ItemFrstSocials onClick={() => props.social.onClickLinkedin()} > <Icons.LinkedinIcon /> </ItemFrstSocials>}
-                            {props.social.onClickInstagram && <ItemFrstSocials onClick={() => props.social.onClickInstagram()} > <Icons.InstagramIcon /> </ItemFrstSocials>}
-                            {props.social.onClickYoutube &&   <ItemFrstSocials onClick={() => props.social.onClickYoutube()} > <Icons.YoutubeIcon /> </ItemFrstSocials>}
-                            {props.social.onClickSpotify &&   <ItemFrstSocials onClick={() => props.social.onClickSpotify()} > <Icons.SpotifyIcon /> </ItemFrstSocials>}
-                            {props.social.onClickPodCast &&   <ItemFrstSocials onClick={() => props.social.onClickPodCast()} > <Icons.PodCastIcon /> </ItemFrstSocials>}
-                        </FrstSocials> }
-                        <LateralMenu
-                            variant={'primary'}
-                            channel={''}
-                            name={props.lateralMenu.name}
-                            hiddenButtonHeader={true}
-                            avatar={props.lateralMenu.avatar}
-                            button={props.lateralMenu.button}
-                            listOptions={props.lateralMenu.listOptions}
-                        />
-                    </WrapperContent>
-                    
-                    <WrapperContent>
-                        <img src={props.logoSRG}/>
-                    </WrapperContent>
-                    
-                    <WrapperContentMain>
-                        <TitleSRG>{props?.labels?.textTitle ? props?.labels?.textTitle : 'Space Race Game'}</TitleSRG>
-                        <DescriptionSRG>{props?.labels?.textDescription}</DescriptionSRG>
-                        <Button 
-                            variant='primary' 
-                            label={props?.newProject?.label ? props.newProject?.label : 'Criar novo projeto'} 
-                            handleClick={() => props.newProject.action()} 
-                            startIcon={<Icons.AddIcon fill='#FFFFFF' />}
-                        />
-                    </WrapperContentMain>           
-                    
-                    <WrapperContentHelper>
-                        <SpeechBubble>
-                            <HelperText>{props.labels.textHelperDescription}</HelperText>
-                            <Button 
-                                variant='link' 
-                                label={props?.acessHere?.label ? props.acessHere.label : 'Acesse aqui'} 
-                                handleClick={() => props.acessHere.action()} 
-                                style={{ color: '#21bffc' }} />
-                        </SpeechBubble>
-                        <img src={props.avatarSRG}/>
-                    </WrapperContentHelper>
-                    <WrapperContent>
-                        <Button 
-                            variant='primary' 
-                            label={props?.newProject?.label ? props.newProject?.label : 'Criar novo projeto'} 
-                            handleClick={() => props.newProject.action()} 
-                            startIcon={<Icons.AddIcon fill='#FFFFFF' />}
-                        />
-                    </WrapperContent>
-                </ContainerBanner>
-                <VersionExtended isExtendedVersion={props.isExtendedVersion} heightExtended={props.heightExtended}/>
-            </ContainerTotal>
-        </ThemeProvider>
-    )
-}

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

@@ -1,219 +0,0 @@
-import React from 'react'
-
-import FeedInteraction from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'FI/Feed Interaction',
-    component: FeedInteraction,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <FeedInteraction {...args} />
-
-export const Challenge = Template.bind({})
-Challenge.args = {
-    id: 'abc',
-    qtdLikes: '23 pessoas',
-    qtdComments: '1 comentário',
-    textLikes: 'Curtir',
-    textDeslike: 'Descurtir',
-    textComments: 'Comentar',
-    textAvaluation: 'Avaliar',
-    isLiked: true,
-    textAvaluationTitle: 'Como você avalia esse desafio?',
-    isChallengeReview: true,
-    ratingImpacto: 3,
-    textImpacto: 'Impacto',
-    ratingRelevancia: 4,
-    textRelevancia: 'Relevância',
-    userAvatar: 'https://i.gyazo.com/59d6b73b26541b748ca6a5d167645746.png',
-
-    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'),
-        className: 'latestComment',
-        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: 'Publicar',
-
-    handleSaveCommentBtn: (comment) => alert(comment),
-    handleImpactoChange: (e) => alert(e),
-    handleRelevanciaChange: (e) => alert(e),
-    handleLikeClick: () => alert('Click'),
-    onCommentChange: (e) => console.log(e.target.value)
-}
-
-export const Post = Template.bind({})
-Post.args = {
-    id: 'abc',
-    qtdLikes: '23 pessoas',
-    qtdComments: '2 comentários',
-    textLikes: 'Curtir',
-    textDeslike: 'Descurtir',
-    textComments: 'Comentar',
-    textAvaluation: 'Avaliar',
-    isLiked: false,
-    textAvaluationTitle: 'Este conteúdo foi útil para você?',
-    isPostReview: true,
-    ratingPostReview: 0,
-
-    userCommentPlaceholder: 'Escreva seu comentário aqui...',
-    textLatestComment: 'Comentário mais recente:',
-    commentList: [
-        {
-            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',
-        },
-        {
-            name: 'Marlon Pereira',
-            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',
-        },
-    ],
-    textLoadMoreComments: 'Carregar mais comentários',
-    textSaveCommentBtn: 'Salvar',
-
-    handleSaveCommentBtn: (comment) => alert(comment),
-    handlePostReviewChange: (e) => alert(e),
-    handleLikeClick: () => alert('Click'),
-    onCommentChange: (e) => console.log(e.target.value)
-}
-
-export const ChallengeWithInfoViews = Template.bind({})
-ChallengeWithInfoViews.args = {
-    id: 'abc',
-    qtdLikes: '23 pessoas',
-    qtdComments: '1 comentário',
-    textLikes: 'Curtir',
-    textDeslike: 'Descurtir',
-    textComments: 'Comentar',
-    textAvaluation: 'Avaliar',
-    isLiked: true,
-    textAvaluationTitle: 'Como você avalia esse desafio?',
-    isChallengeReview: true,
-    ratingImpacto: 3,
-    textImpacto: 'Impacto',
-    ratingRelevancia: 4,
-    textRelevancia: 'Relevância',
-    userAvatar: 'https://i.gyazo.com/59d6b73b26541b748ca6a5d167645746.png',
-
-    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'),
-        className: 'latestComment',
-        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: 'Publicar',
-
-    handleSaveCommentBtn: (comment) => alert(comment),
-    handleImpactoChange: (e) => alert(e),
-    handleRelevanciaChange: (e) => alert(e),
-    handleLikeClick: () => alert('Click'),
-    onCommentChange: (e) => console.log(e.target.value),
-    textTotalView: '12 Visualizações',
-    handleClickTextTotalViews: () => alert('Click Views')
-}

package/src/components/FI/feedInteraction/feedInteractionStyles.ts

@@ -1,142 +0,0 @@
-import styled from 'styled-components'
-
-export const Container = styled.div`
-    padding: 1px 24px 0px 24px;
-    display: flex;
-    flex-direction: column;
-    background-color: ${({theme}) => theme.colors.shadeWhite};
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
-    border: 1px solid ${({ theme }) => theme.colors.borderPrimary};
-    border-top: 0px !important;
-`
-
-export const infoContent = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    position: relative;
-    border-bottom: 1px solid ${({ theme }) => theme.colors.borderPrimary};
-    font-family: 'Work Sans';
-    font-size: 16px;
-    font-weight: 400;
-    padding: 12px;
-    padding-top: 24px;
-`
-export const infoContentWithView = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid ${({ theme }) => theme.colors.borderPrimary};
-    font-family: 'Work Sans';
-    font-size: 16px;
-    font-weight: 400;
-    padding-top: 12px;
-`
-
-export const info = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: row;
-    position: absolute;
-    margin-bottom: 12px;
-    ${({theme}) => theme.fonts.textMessageComponentsBodyRegular};
-`
-
-export const infoWithView = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: row;
-    margin-bottom: 12px;
-    ${({theme}) => theme.fonts.textMessageComponentsBodyRegular};
-`
-
-export const buttonsContent = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    align-items: center;
-    padding: 16px;
-`
-
-export const buttons = styled.button`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: row;
-    border: none;
-    background-color: inherit;
-    ${({theme}) => theme.fonts.textMessageComponentsBodyBold};
-    color: ${({theme}) => theme.colors.linkOnfocus};
-    
-    cursor: pointer;
-    gap: 8px;
-
-    &:hover{
-        color: ${({theme}) => theme.colors.linkHover};
-    }
-
-`
-
-export const reviewContainer = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    margin-top: 28px;
-    ${({theme}) => theme.fonts.textMessageComponentsBodyBold};
-`
-
-export const reviewContent = styled.div`
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    flex-direction: row;
-    margin-top: 16px;
-    margin-bottom: 32px;
-`
-
-export const commentsContainer = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    padding-bottom: 32px;
-`
-
-export const comment = styled.div`
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-direction: row;
-    width: 100%;
-    margin-top: 28px;
-`
-
-export const inputComment = styled.div`
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-direction: row;
-    width: 100%;
-    margin-top: 12px;
-`
-
-export const submitButton = styled.div`
-    border: none;
-    background: none;
-    margin-left: 8px;
-`
-
-export const commentList = styled.div`
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-direction: column;
-    width: 100%;
-    margin-top: 16px;
-`