frst-components 0.20.0

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

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

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

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

@@ -0,0 +1,142 @@
+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;
+`