frst-components 0.20.1 → 0.20.3

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

@@ -1,388 +0,0 @@
-import { FRSTTheme } from "../../../theme";
-import { ThemeProvider } from "styled-components";
-import * as Styles from './bannerProblemFeedStyles'
-import Avatar from "@components/avatar";
-import Tag from "@components/tag";
-import MissionSteps from "@components/cardLT/StepsMission/StepMission";
-import { useState, useEffect } from "react";
-import Slider from '@mui/material/Slider';
-import { withStyles } from '@material-ui/styles';
-import Button from "@components/buttons";
-import * as Icons from '@shared/icons'
-import FeedInteraction from "../feedInteraction";
-
-interface IBannerProblemFeed extends stepsInfo{
-    id : string
-    userAvatar ?: string
-    userName : string
-    userPosition : string
-    userCompany ?: string
-    problemTitle : string
-    problemTags ?: []
-
-    lastUpdated ?: string
-    lastUpdatedStep ?: string
-
-    stepProblem : number
-    stepActive : number
-
-    textButton : string
-
-    onClickButton : () => void
-    onSelectedStep : (step : number) => void
-
-    language : 'pt-BR' | 'pt-PT' | 'en-US' | 'es' 
-
-    isSuccessCase ?: boolean
-
-/** -------------------------------------------------------------------------------- 
-*   Interaction Feed params 
------------------------------------------------------------------------------------*/
-    avatar?: string
-    qtdLikes: string
-    qtdComments: string
-    textLikes: string
-    textDeslike: string
-    textComments: string
-    textAvaluation: string
-    isLiked: boolean
-    textAvaluationTitle: string
-    ratingImpacto: number
-    textImpacto: string
-    ratingRelevancia: number
-    textRelevancia: string
-    userCommentPlaceholder: string
-    textLatestComment: string
-    latestComment: any
-    textSaveCommentBtn: string
-    handleSaveCommentBtn?: () => any
-
-    isDisabledAvaluation ?: boolean,
-
-    onCommentChange ?: () => void
-    handleLikeClick ?: () => void
-    handleImpactoChange?: any
-    handleRelevanciaChange?: any,
-
-    topHeaderTagColor?: string
-    topHeaderTagBgColor?: string
-    topHeaderTagText?: string
-
-    textTotalView?: string
-    handleClickTextTotalViews?: () => void
-}
-
-interface stepsInfo{
-/**
- * Step 1 info
- */
-    step1Title ?: string
-    textIndicator ?: string
-    indicatorValue ?: string
-    textIndicatorSituation ?: string
-    indicatorSituationValue ?: string
-    textIndicatorObjective ?: string
-    indicatorObjectiveValue ?: string
-    textResultsFuture ?: string
-    resultsFutureValue ?: string
-/**--------------------------------------------------------
- * Step 2 info
- */
-    step2Title ?: string
-    textHypotheses ?: string
-    hypothesesValue ?: string
-    textResponsableAction ?: string
-    ResponsableActionValue ?: string
-    textDate ?: string
-    dateValue ?: string
-    textWhatToDo ?: string
-    whatToDoValue ?: string
-    textSuccessAction ?: string
-    successActionValue ?: string
-/**------------------------------------------------------------
- * Step 3 info
- */
-    step3Title ?: string
-    textTestMade ?: string
-    testMadeValue ?: string
-    textSuccessTest ?: string
-    successTestValue ?: number
-    textDownloadFiles ?: string
-    handleDownloadFiles ?: () => void
-/**------------------------------------------------------------
- * Step 4 info
- */
-    step4Title ?: string
-    textMainAchievement ?: string
-    mainAchievementValue ?: string
-    textMainLearning ?: string
-    mainLearningValue ?: string
-/**-------------------------------------------------------------
- * Step 5 info
- */
-    step5Title ?: string
-    textNextSteps ?: string
-    nextStepsValue ?: string
-
-}
-
-
-export default function BannerProblemFeed(props : IBannerProblemFeed){
-    const [selectedStep, setSelectedStep] = useState(props.stepActive);
-    const learningIcon = 'https://i.gyazo.com/4e0807b581bf9780f07a27516a809a21.png'
-    const achievementIcon = 'https://i.gyazo.com/9b192733f4947946a3f47080ae12727f.png'
-
-    const [stateLatestComment, setStateLatestComment] = useState(props.latestComment)
-    useEffect(() => {
-        setStateLatestComment(props.latestComment)
-    }, [props.latestComment]);
-
-    const CustomSlider = withStyles({
-        root: {
-            color: "#FF4D0D",
-            height: 3,
-            padding: "13px 0",
-        },
-        track: {
-            color: "#FF4D0D",
-        },
-        disabled: {
-            color: '#FF4D0D',
-        }
-    })(Slider);
-    const marks = [
-        {
-            value: 1,
-            label: '1'
-        },
-        {
-            value: 2,
-            label: '2'
-        },
-        {
-            value: 3,
-            label: '3'
-        },
-        {
-            value: 4,
-            label: '4'
-        },
-        {
-            value: 5,
-            label: '5'
-        }
-    ]
-    
-    const RenderSteps = () => {
-        return(
-            <>
-                {selectedStep === 1 ?
-                    <Styles.stepsContainer>
-                        <Styles.stepsTitle>{props.step1Title}</Styles.stepsTitle>
-
-                        <Styles.stepsLabel>{props.textIndicator}:</Styles.stepsLabel>
-                        <Styles.stepsValueText>{props.indicatorValue}</Styles.stepsValueText>
-
-                        <Styles.stepsLabel>{props.textIndicatorSituation}:</Styles.stepsLabel>
-                        <Styles.stepsValueText>{props.indicatorSituationValue}</Styles.stepsValueText>
-
-                        <Styles.stepsLabel>{props.textIndicatorObjective}:</Styles.stepsLabel>
-                        <Styles.stepsValueText>{props.indicatorObjectiveValue}</Styles.stepsValueText>
-
-                        <Styles.stepsLabel>{props.textResultsFuture}:</Styles.stepsLabel>
-                        <Styles.stepsValueText>{props.resultsFutureValue}</Styles.stepsValueText>
-
-                    </Styles.stepsContainer>
-                    
-                    : selectedStep === 2 ?
-                        <Styles.stepsContainer>
-                            <Styles.stepsTitle>{props.step2Title}</Styles.stepsTitle>
-
-                            <Styles.stepsLabel style={{color: FRSTTheme['colors'].primary1}} >{props.textHypotheses}:</Styles.stepsLabel>
-                            <Styles.stepsValueText>{props.hypothesesValue}</Styles.stepsValueText>
-
-                            <Styles.stepsLabel style={{color: FRSTTheme['colors'].primary1}} > {props.language === 'en-US' ? 'Action 1' : 'Ação 1'} </Styles.stepsLabel>
-
-                            <Styles.stepsLabel>{props.textResponsableAction}:</Styles.stepsLabel>
-                            <Styles.stepsValueText>{props.ResponsableActionValue}</Styles.stepsValueText>
-                            
-                            <Styles.stepsLabel>{props.textDate}:</Styles.stepsLabel>
-                            <Styles.stepsValueText>{props.dateValue}</Styles.stepsValueText>
-                            
-                            <Styles.stepsLabel>{props.textWhatToDo}:</Styles.stepsLabel>
-                            <Styles.stepsValueText>{props.whatToDoValue}</Styles.stepsValueText>
-                            
-                            <Styles.stepsLabel>{props.textSuccessAction}:</Styles.stepsLabel>
-                            <Styles.stepsValueText>{props.successActionValue}</Styles.stepsValueText>
-                            
-                        </Styles.stepsContainer>
-
-                        : selectedStep === 3 ?
-                            <Styles.stepsContainer>
-                                <Styles.stepsTitle>{props.step3Title}</Styles.stepsTitle>
-
-                                <Styles.stepsLabel style={{color: FRSTTheme['colors'].primary1}} >{props.textTestMade}:</Styles.stepsLabel>
-                                <Styles.stepsValueText>{props.testMadeValue}</Styles.stepsValueText>
-
-                                <Styles.stepsLabel>{props.textSuccessTest}:</Styles.stepsLabel>
-                                <div style={{width: '100%', marginBottom: 32, marginTop: 12}}>
-                                    <CustomSlider
-                                        value={props.successTestValue}
-                                        min={1}
-                                        max={5}
-                                        marks={marks}
-                                        disabled={true}
-                                    />
-                                </div>
-                                {/* {props.handleDownloadFiles ?
-                                    <Button 
-                                        variant="link" 
-                                        startIcon={<Icons.DownloadIcon fill={'currentColor'} width='24px' height='24' />} 
-                                        label={props.textDownloadFiles}
-                                        handleClick={props.handleDownloadFiles}
-                                    />
-                                    : null
-                                } */}
-
-                            </Styles.stepsContainer>
-
-                            : selectedStep === 4 ?
-                                <Styles.stepsContainer>
-                                    <Styles.stepsTitle>{props.step4Title}</Styles.stepsTitle>
-
-                                    {props.textMainAchievement ?
-                                        <>
-                                            <Styles.stepsLabel style={{color: FRSTTheme['colors'].primary1}} >{props.textMainAchievement}:</Styles.stepsLabel>
-                                            <Styles.stepsValueText>{props.mainAchievementValue}</Styles.stepsValueText>
-                                        </>
-                                        : props.textMainLearning ?
-                                        <>
-                                            <Styles.stepsLabel style={{color: FRSTTheme['colors'].primary1}} >{props.textMainLearning}:</Styles.stepsLabel>
-                                            <Styles.stepsValueText>{props.mainLearningValue}</Styles.stepsValueText>
-                                        </>
-                                        : null
-                                    }
-                                </Styles.stepsContainer>
-
-                                : selectedStep === 5 ?
-                                    <Styles.stepsContainer>
-                                        <Styles.stepsTitle>{props.step5Title}</Styles.stepsTitle>
-
-                                        <Styles.stepsLabel style={{color: FRSTTheme['colors'].primary1}} >{props.textNextSteps}:</Styles.stepsLabel>
-                                        <Styles.stepsValueText>{props.nextStepsValue}</Styles.stepsValueText>
-
-                                    </Styles.stepsContainer>
-
-                                    : null
-                }
-            </>
-        )
-    }
-
-    return(
-        <ThemeProvider theme={FRSTTheme}>
-            { props.mainAchievementValue || props.mainLearningValue ?
-                <Styles.achievementHeader style={{backgroundColor: props.isSuccessCase ? '#444' : '#4B2961' }} >
-                    <img
-                        src={props.mainAchievementValue ? achievementIcon : learningIcon} 
-                        width= '56'
-                        height= '56'
-                    />
-                    <span style={{marginLeft: 16, wordBreak: 'break-word', overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical'}}>
-                        {props.mainAchievementValue ? props.mainAchievementValue : props.mainLearningValue}
-                    </span>
-                </Styles.achievementHeader>
-                : null
-            }
-            <Styles.bannerContainer style={{borderTopLeftRadius: props.mainAchievementValue || props.mainLearningValue ? 0 : 8, borderTopRightRadius: props.mainAchievementValue || props.mainLearningValue ? 0 : 8}}>
-                {props.topHeaderTagText &&
-                    <Styles.topHeaderTag background={props.topHeaderTagBgColor} color={props.topHeaderTagColor}>
-                        {props.topHeaderTagText}
-                    </Styles.topHeaderTag>
-                }
-                <Styles.headerContent>
-                    <Avatar size="54px" src={props.isSuccessCase ? 'https://i.gyazo.com/e9608cb76d36242de07661bee9da60dd.png' : props.userAvatar} />
-                    <Styles.userInfo>
-                        <span style={{fontWeight: 600, fontSize: 20}}>
-                            {props.isSuccessCase ?   
-                                (props.language === 'pt-BR' ?  'Case de sucesso'
-                                    : props.language === 'en-US' ? 'Success case'
-                                        : props.language === 'es' ? 'Caso de exito'
-                                            : props.language === 'pt-PT' ? 'Case de sucesso'
-                                                : null
-                                )
-                                : props.userName
-                            }
-                        </span>
-                        <span style={{fontWeight: 400, fontSize: 16}}>{props.userPosition}</span>
-                        <span style={{fontWeight: 400, fontSize: 16}}>{props.userCompany}</span>
-                    </Styles.userInfo>
-                </Styles.headerContent>
-                <Styles.problemTitle> {props.problemTitle} </Styles.problemTitle>
-                <Styles.tagContent>
-                    {
-                        props.problemTags?.map((item,index) => (
-                            item &&
-                                <Tag style={{ color: '#000 !important' }} title={item} color="#E4E1FF" selected={false} inverted={false} key={index} />
-                        ))
-                    }
-                </Styles.tagContent>
-                <Styles.lastUpdatedText>
-                    <span style={{fontWeight: 700}}>{props.lastUpdated}:</span>
-                    <span>&nbsp;{props.lastUpdatedStep}</span>
-                </Styles.lastUpdatedText>
-                <div style={{width:'100%', marginTop: 16, borderTop: `1px solid ${FRSTTheme['colors'].borderPrimary}`}}>
-
-                    <MissionSteps
-                        stepProblem={props.stepProblem}
-                        stepActive={props.stepActive}
-                        onSelected={(step: number) => {
-                            props.onSelectedStep(step)
-                            setSelectedStep(step)
-                        }} 
-                        idioma={props.language}
-                    />
-                </div>
-                
-                <RenderSteps />
-                
-                <Button
-                    label={props.textButton} 
-                    variant='expandedPrimary' 
-                    handleClick={props.onClickButton} 
-                    startIcon={<Icons.AddIcon fill={FRSTTheme['colors'].shadeWhite} />} 
-                />
-
-            </Styles.bannerContainer>
-            <FeedInteraction
-                isChallengeReview={true}
-                id={props.id}
-                isLiked={props.isLiked}
-                qtdComments={props.qtdComments}
-                qtdLikes={props.qtdLikes}
-                textAvaluation={props.textAvaluation}
-                textAvaluationTitle={props.textAvaluationTitle}
-                isDisabledAvaluation={props.isDisabledAvaluation}
-                textComments={props.textComments}
-                textDeslike={props.textDeslike}
-                textLikes={props.textLikes}
-                latestComment={stateLatestComment}
-                textLatestComment={props.textLatestComment} 
-                textImpacto={props.textImpacto}
-                ratingImpacto={props.ratingImpacto}
-                textRelevancia={props.textRelevancia}
-                ratingRelevancia={props.ratingRelevancia}
-                userCommentPlaceholder={props.userCommentPlaceholder}
-                onCommentChange={props.onCommentChange}
-                handleLikeClick={props.handleLikeClick}
-                handleImpactoChange={props.handleImpactoChange}
-                handleRelevanciaChange={props.handleRelevanciaChange}
-                textSaveCommentBtn={props.textSaveCommentBtn}
-                handleSaveCommentBtn={props.handleSaveCommentBtn}
-                userAvatar={props.avatar}
-                textTotalView={props.textTotalView}
-                handleClickTextTotalViews={props.handleClickTextTotalViews}
-            />
-        </ThemeProvider>
-    )
-}

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

@@ -1,33 +0,0 @@
-import React from "react"
-
-type labelsBanner = {
-    textTitle?: string,
-    textDescription?: string,
-    textHelperDescription?: string,
-}
-
-type bannerSRC = {
-    normal?: string,
-    large?: string,
-    responsive?: string
-}
-
-export interface IBannerSRG {
-    style?: React.CSSProperties,
-    bannerSRG?: bannerSRC,
-    isExtendedVersion?: boolean,
-    heightExtended?: string,
-    logoSRG?: string,
-    avatarSRG?: string,
-    labels?: labelsBanner,
-    newProject?: {
-        label?: string, 
-        action?: () => void
-    }
-    acessHere?: {
-        label?: string, 
-        action?: () => void
-    },
-    lateralMenu: any,
-    social: any
-}

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

@@ -1,106 +0,0 @@
-import React from 'react'
-
-import BannerSRG from './index'
-import * as Icons from '../../../shared/icons'
-
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'FI/BannerSRG',
-    component: BannerSRG,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <BannerSRG {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    bannerSRG: {
-        normal: 'https://i.gyazo.com/865239e98e9e1e30976f1c78506093a5.png',
-        large: 'https://i.gyazo.com/5386a2f06adf4507361dd85fb8f48dd1.png',
-        responsive: 'https://i.gyazo.com/4c51a9876f08e41507d6f9e7c8515af3.png'
-    },
-    isExtendedVersion: false,
-    heightExtended: '500px',
-    logoSRG: 'https://i.gyazo.com/566e0a91f926e5f7b24b34d2194bce76.png',
-    avatarSRG: 'https://i.gyazo.com/59d6b73b26541b748ca6a5d167645746.png',
-    labels: {
-        textTitle: 'Space Race Game',
-        textDescription: 'Nossa ferramenta guia de resolução de problemas em ciclos ágeis de aprendizado, colaboração e experimentação.',
-        textHelperDescription: 'Antes de começar seu projeto, confira o nosso material de apoio para a etapa de definição do problema!',
-    },
-    newProject: {
-        label: 'Criar novo projeto', 
-        action: () => alert('Criar novo projeto')
-    },
-    acessHere: {
-        label: 'Acesse aqui', 
-        action: () => alert('Acesse aqui')
-    },
-    social: {
-        onClickSite: () => alert('Site'),
-        onClickLinkedin: () => alert('Linkedin'),
-        onClickInstagram: () => alert('Instagram'),
-        onClickYoutube: () => alert('Youtube'),
-        onClickSpotify: () => alert('Spotify'),
-        onClickPodCast: () => alert('PodCast'),
-    },
-    lateralMenu: {     
-        variant: 'primary',
-        hiddenButtonHeader: true,
-        avatar: {
-            src: 'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
-            alt: 'Alt example'
-        },
-        name: 'Student Name',
-        button: {
-            variant: 'primary',
-            label: 'Button CTA',
-            onClick: () => alert('Click')
-        },
-        listOptions: [
-            {    
-                label: 'Início',
-                selected: true,
-                onClick: () => alert('Início'),
-                beginComponent: <Icons.HomeLineIcon/>,
-                activeBeginIcon: <Icons.HomeFilledIcon/>,
-                style: {
-                    width: '280px' 
-                },
-            },
-            {    
-                label: 'Assessment',
-                onClick: () => alert('Assessment'),
-                selected: false,
-                beginComponent: <Icons.PencilLineIcon/>,
-                activeBeginIcon: <Icons.PencilFilledIcon/>,
-                style: {
-                    width: '280px' 
-                }
-            },
-            {    
-                label: 'Eventos',
-                hiddenIconDropArrow: true,
-                onClick: () => alert('Eventos'),
-                selected: false,
-                beginComponent: <Icons.CalendarLineIcon/>,
-                activeBeginIcon: <Icons.CalendarFilledIcon/>,
-                style: {
-                    width: '280px' 
-                }
-            },
-            {    
-                label: 'Hall de projetos',
-                hiddenIconDropArrow: false,
-                onClick: () => alert('Hall de projetos'),
-                selected: false,
-                beginComponent: <Icons.MedalLineIcon/>,
-                activeBeginIcon: <Icons.MedalFilledIcon/>,
-                style: {
-                    width: '280px' 
-                }
-            },
-        ]
-    }
-}