frst-components 0.20.0

package/src/components/LXP/extraContent/studentExtraContent.tsx

@@ -0,0 +1,160 @@
+import { IExtraContent } from "./extraContent";
+import React, { useRef, useState, useMemo } from "react";
+import { Grid, Tab, Tabs } from "@mui/material";
+import style from './extraContent.module.css';
+import Avatar from '../../avatar'
+import CommentaryBox from '../../commentary-box';
+import InputComment from '../../input-comment';
+import {DownloadIcon} from '@shared/icons'
+import RichTextEditor from './richTextEditor/index'
+import Button from "@components/buttons";
+
+
+export default function StudentExtraContent(props: IExtraContent) {
+    const [valueTabs, setValueTabs] = useState(0)
+    const [comments, setComments] = useState('')
+    const [note, setNote] = useState('')
+
+    const handleChangeTabs = ( e, newTab ) => {
+        setValueTabs(newTab)
+    }
+
+    const handleComments = (e) => {
+        setComments(e.target.value)
+    }
+
+    return (
+        <div className={style.container} >
+            <div className={style.contentTabs}> 
+                <Tabs value={valueTabs}  
+                    onChange={handleChangeTabs}
+                    sx={{
+                        '& .Mui-selected ' : {
+                            color: '#FF4D0D !important',
+                            fontWeight: '700 !important'
+                        },
+                        '& .MuiTab-root' : {
+                            fontFamily: 'PT Sans !important',
+                            textTransform: 'none !important',
+                            fontWeight: '400 !important',
+                        },
+                        '& .MuiTabs-indicator' : {
+                            backgroundColor: '#FF5427 !important',
+                        }}
+                    }
+                >
+                    <Tab label='Anotações' value={0} />
+                    
+                    <Tab label='Livros recomendados' value={1} />
+                    
+                    <Tab label='Material de apoio' value={2} />
+
+                    <Tab label='Transcrição' value={3} />
+
+                    <Tab label='Comentários' value={4} />
+
+                    
+                </Tabs>
+            </div>
+            <div className={style.contentInfo} >
+                {valueTabs === 0 &&
+                    <div className={style.notes}>
+
+                        <span style={{fontSize:16, fontWeight:400, color:'#000'}}> Escreva e faça suas anotações aqui para rever depois, este espaço é seu.</span>
+                        <div style={{marginTop:12}}>
+                            <RichTextEditor  />
+                        </div>
+                        <div className={style.saveNotes}>
+                            <Button label="Salvar" variant="primary" handleClick={ () => { }} />
+                        </div>
+                    </div>
+                }
+                {valueTabs === 1 &&
+                    <Grid container spacing={0}>
+                        
+                        {props.bookList?.map((item: any , index: any) => {
+                            return(
+                                <Grid item key={index} 
+                                    style={{position: 'relative', width: 200, height: 310, backgroundColor: '#FFF', display:'flex', flexDirection:'column', alignItems: 'center', justifyContent:'flex-start', padding: '16px 32px 8px 32px', border: '1px solid #BDBDBD', cursor: 'pointer'} }
+                                    onClick={ () => { props.onClickBook(item.id)}} 
+                                >
+                                    
+                                    <img src={item.img} width={130} height={185} />
+                                    <span style={{fontSize:16, fontWeight:400, color:'#000', marginTop: 12}}> {item.title} </span>
+                                    <span style={{fontSize:12, fontWeight:400, color:'#000', position: 'absolute', bottom: 0, marginBottom: 8}}> {item.autor} </span>
+                                </Grid>
+                            )
+                        })}
+                    </Grid>
+                }
+                {valueTabs === 2 &&
+                    <Grid container spacing={0} >
+                        {props.suportMaterial?.map((item : any, index: number) => {
+                            return(
+                                <Grid item  key={index} 
+                                    style={{width: 200, height: 240, backgroundColor: '#FFF', display:'flex', flexDirection:'column', alignItems: 'center', justifyContent:'space-between', padding: '16px 32px 8px 32px', border: '1px solid #BDBDBD'}} >
+                                    <img src={item.img} width={65} height={70} />
+                                    <span style={{fontSize:16, fontWeight:400, color:'#000', marginTop: 12}}>{item.description}</span>
+                                    <label htmlFor="downloadBtn" onClick={ () => { props.onClickSuportMaterial(item.id) }} style={{color: '#0645AD', fontWeight: 700, cursor: 'pointer'}} > <DownloadIcon fill="#0645AD" /> &nbsp; Download</label>
+                                    
+                                </Grid>
+                            )
+                        })}
+                    </Grid>
+                }
+                {valueTabs === 3 &&
+                    <div style={{fontSize: 16, fontWeight:400, textAlign:'justify'}}>
+                        <span>{props.transcription}</span>
+                    </div>
+                }
+
+                {valueTabs === 4 &&
+                    <div style={{display:'flex', flexDirection: 'column'}}>
+                        <div style={{display: 'flex', flexDirection:'row'}}>
+
+                        <Avatar size={'40px'} src={props.userAvatar} />
+                        <InputComment
+                            className={''}
+                            showCharacterCounter={false}
+                            IDInput='1'
+                            emojiWindowlanguage='pt'
+                            placeholder={'Comente aqui sobre o seu problema'}
+                            value={comments}
+                            onChange={(e) => handleComments(e)}
+                            remain={1000 - comments.length}
+                            limit={1000}
+                            hasEmoji={true}
+                            styles={{ marginLeft: '8px', width: '80%' }}
+                            />
+                        </div>
+                        <div>
+                            {props.commentList?.map( ( item : any, index: number) => {
+                                return(
+                                    <div key={index} style={{display: 'flex', flexDirection:'row', marginTop: 20}}>
+                                        <Avatar size={'40px'} src={item?.userAvatar} />
+                                        <CommentaryBox 
+                                            className={''}
+                                            name={item.userName}
+                                            position={item.userPosition}
+                                            value={item.comments}
+                                            date={item.date}
+                                            onChange={()=> {}}
+                                            styles={{marginRight: 8, width: '80%'}}
+                                            textLiked='Curtir'
+                                            actionLike={() => {item.isLiked = true}}
+                                            isLiked={item?.isLiked}
+
+                                        /> 
+                                    </div>
+                                )
+                            })}
+                        </div>
+                    </div>
+                }
+                
+            </div>
+            
+
+        </div>
+    );
+}

package/src/components/LXP/fileUpload/FileUpload.d.ts

@@ -0,0 +1,14 @@
+import React from "react"
+
+type enumVariant = 'landscape' | 'portrait'
+
+export interface IFileUpload {
+    variant?: enumVariant,
+    src?: any,
+    alt?: string,
+    disabled?: boolean, 
+    startIcon?: any,
+    style?: React.CSSProperties,
+    selectedFile?: ([]) => void, 
+    handleClick?: () => void
+}

package/src/components/LXP/fileUpload/FileUpload.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import FileUpload 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: 'LXP/FileUpload',
+    component: FileUpload,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <FileUpload {...args} />
+
+export const Landscape = Template.bind({})
+Landscape.args = {
+    variant: 'landscape',    
+    disabled: false,
+    startIcon: <Icons.Cam fill={'#ffffff'}/>,   
+    handleClick: () => { alert('Click') }
+}
+
+export const Portrait = Template.bind({})
+Portrait.args = {
+    variant: 'portrait',    
+    disabled: false,
+    startIcon: <Icons.Cam fill={'#ffffff'}/>,    
+    handleClick: () => { alert('Click') }
+}

package/src/components/LXP/fileUpload/fileUploadStyles.ts

@@ -0,0 +1,86 @@
+import styled from 'styled-components'
+
+export const LandscapeContainer = styled.label`
+    width: 544px;
+    height: 240px;
+    border-radius: 8px;
+    background-color: ${({ theme }) => theme.colors.neutralsGrey7};
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    position: relative;
+    object-fit: cover;
+    border: none; 
+    
+    & input{
+        display: none;
+    }
+`
+export const PortraitContainer = styled.label`
+    width: 180px;
+    height: 240px;
+    border-radius: 8px;
+    background-color: ${({ theme }) => theme.colors.neutralsGrey7};
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    object-fit: cover;
+    border: none; 
+    
+    & input{
+        display: none;
+    }
+`
+export const UploadCam = styled.div`
+    width: 48px;
+    height: 47.02px;
+    background-color: ${({ theme }) => theme.colors.neutralsGrey4};
+    border-radius: 50px; 
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    visibility: visible;      
+`
+export const TextFileUpload = styled.div`
+    margin-top: 95px;
+    font: 'PT Sans';
+    font-weight: 700;
+    font-size: 16px;  
+    line-height: 21px;  
+    color: ${({ theme }) => theme.colors.neutralsGrey4};
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;   
+`
+export const ImgLandscape = styled.img`
+    width: 544px;
+    height: 240px;
+    border-radius: 8px;    
+    position: absolute;
+    object-fit: cover; 
+    color: ${({ theme }) => theme.colors.neutralsGrey4};
+
+    .oculto {
+        visibility: hidden;
+    }
+`
+export const ImgPortrait = styled.img`
+    width: 180px;
+    height: 240px;
+    border-radius: 8px;    
+    position: absolute;
+    object-fit: cover; 
+    color: ${({ theme }) => theme.colors.neutralsGrey4};
+
+    .oculto {
+        visibility: hidden;
+    }
+`

package/src/components/LXP/fileUpload/index.tsx

@@ -0,0 +1,51 @@
+import '../../../shared/global.css'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../../theme'
+import * as Styles from './fileUploadStyles'
+import { IFileUpload } from './FileUpload'
+import { useState } from 'react'
+
+export default function FileUpload({ variant, src, alt, disabled, startIcon, style, handleClick, selectedFile}: IFileUpload) {
+    const [uploadFile, setUploadFile] = useState({})
+
+    const handleFileSelected = (file) => {
+        setUploadFile(file)
+        selectedFile([selectedFile])
+    }
+    
+    return (        
+        <ThemeProvider theme={FRSTTheme}>
+        { variant === 'landscape' ?            
+            <Styles.LandscapeContainer   style={{...style}}  className={variant = 'landscape'} htmlFor={'fileSelector'}>
+                 
+                 <input type="file" id='fileSelector' accept='.jpg, .jpeg, .png' onChange={ (e) => handleFileSelected(e.target.files[0])}
+                        />
+                <Styles.ImgLandscape
+                    src={src }
+                    alt={alt }
+                />
+                <Styles.UploadCam className='oculto'>{startIcon}</Styles.UploadCam>
+                <Styles.TextFileUpload>
+                    <p>Clique para</p>
+                    <p>adicionar imagem</p>
+                </Styles.TextFileUpload>
+            </Styles.LandscapeContainer>
+        : variant === 'portrait' ?
+            <Styles.PortraitContainer style={{...style}} className={variant = 'portrait'} htmlFor={'fileSelector'}>
+                <input type="file" id='fileSelector' accept='.jpg, .jpeg, .png' onChange={ (e) => handleFileSelected(e.target.files[0])}
+                        />
+                <Styles.ImgPortrait
+                    src={src}
+                    alt={alt}                    
+                />
+                <Styles.UploadCam className='oculto'>{startIcon}</Styles.UploadCam>
+                <Styles.TextFileUpload>
+                    <p>Clique para</p>
+                    <p>adicionar imagem</p>
+                </Styles.TextFileUpload>
+            </Styles.PortraitContainer>
+        : null
+        }                  
+        </ThemeProvider>            
+    )
+}

package/src/components/LXP/headerContent/headerContent.stories.tsx

@@ -0,0 +1,94 @@
+import React from 'react'
+
+import HeaderContent from './index'
+
+export default {
+  title: 'LXP/HeaderContent',
+  component: HeaderContent
+}
+
+const Template = (args) => <HeaderContent {...args}/>
+
+export const InProgress = Template.bind({})
+InProgress.args = {
+  autoplayTime: 5000,
+  textViewMore: 'Ver mais',
+  textViewLess: 'Ver menos',
+  listaRecomendacao: [
+    {
+      title: 'Blockchain e criptomoedas',
+      description:
+        'Bacon ipsum dolor amet landjaeger pastrami pork belly flank shankle ground round. Bacon ipsum dolor amet landjaeger pastrami pork belly flank shankle ground round.',
+      typeOfHeader: 'inProgress',
+      progresso: 80,
+      bgImg: '/bg1.png',
+      onClick: () => {
+        alert('Continuar o Curso')
+      },
+      // channel: 'XP Investimentos',
+      labelButton: 'Continuar curso'
+    },
+    {
+      title: 'Blockchain e criptomoedas',
+      description:
+        'Bacon ipsum dolor amet landjaeger pastrami pork belly flank shankle ground round. Bacon ipsum dolor amet landjaeger pastrami pork belly flank shankle ground round. Bacon ipsum dolor amet landjaeger pastrami pork belly flank shankle ground round. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
+      typeOfHeader: 'recomendation',
+      bgImg: '/bg2.png',
+      onClick: () => {
+        alert('Começar o Curso!')
+      },
+      channel: 'XP Investimentos',
+      labelButton: 'Começar curso'
+    },
+    {
+      title: 'Blockchain e criptomoedas',
+      description:
+        'Bacon ipsum dolor amet landjaeger pastrami pork belly flank shankle ground round. Chicken tri-tip alcatra, pastrami buffalo pork chop shoulder drumstick ham hock landjaeger.',
+      typeOfHeader: 'inProgress',
+      progresso: 80,
+      bgImg: '/bg1.png',
+      onClick: () => {
+        alert('Continuar o Curso')
+      },
+      channel: 'XP Investimentos',
+      labelButton: 'Continuar curso'
+    },
+    {
+      title: 'Blockchain e criptomoedas',
+      description:
+        'Bacon ipsum dolor amet landjaeger pastrami pork belly flank shankle ground round. Chicken tri-tip alcatra, pastrami buffalo pork chop shoulder drumstick ham hock landjaeger.',
+      typeOfHeader: 'recomendation',
+      bgImg: '/bg2.png',
+      onClick: () => {
+        alert('Começar o Curso!')
+      },
+      channel: 'XP Investimentos',
+      labelButton: 'Começar curso'
+    },
+    {
+      title: 'Blockchain e criptomoedas',
+      description:
+        'Bacon ipsum dolor amet landjaeger pastrami pork belly flank shankle ground round. Chicken tri-tip alcatra, pastrami buffalo pork chop shoulder drumstick ham hock landjaeger.',
+      typeOfHeader: 'inProgress',
+      progresso: 80,
+      bgImg: '/bg1.png',
+      onClick: () => {
+        alert('Continuar o Curso')
+      },
+      channel: 'XP Investimentos',
+      labelButton: 'Continuar curso'
+    },
+    {
+      title: 'Blockchain e criptomoedas',
+      description:
+        'Bacon ipsum dolor amet landjaeger pastrami pork belly flank shankle ground round. Chicken tri-tip alcatra, pastrami buffalo pork chop shoulder drumstick ham hock landjaeger.',
+      typeOfHeader: 'recomendation',
+      bgImg: '/bg2.png',
+      onClick: () => {
+        alert('Começar o Curso!')
+      },
+      channel: 'XP Investimentos',
+      labelButton: 'Começar curso'
+    }
+  ]
+}

package/src/components/LXP/headerContent/headerContent.ts

@@ -0,0 +1,216 @@
+import styled, { css } from 'styled-components'
+
+interface HeaderContentProps {
+  img?: any
+  zeroHeigthDescription?: boolean
+  tmnDescription?: number
+  onDisplay?: boolean
+}
+
+export const Container = styled.div`
+  display: flex;
+  position: relative;
+`
+
+export const HeaderImage = styled.div<HeaderContentProps>`
+  display: flex;
+  justify-content: flex-start;
+  height: 200;
+  align-items: flex-start;
+  flex-direction: column;
+  position: relative;
+  -webkit-transition: width 0.4s ease-in-out;
+  transition: width 0.4s ease-in-out;
+  color: #fff;
+  background-image: url(${(props) => props.img});
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  
+  ${(props) =>
+    props.tmnDescription < 164 &&
+    css`
+      section {
+        visibility: hidden;
+      }
+    `}
+  @media (max-width: 834px) {
+    height: 450px;
+    ${(props) =>
+      props.tmnDescription >= 134 &&
+      css`
+        section {
+          visibility: inherit;
+        }
+      `}
+  }
+
+  ${(props) =>
+    props.onDisplay ?
+      css` width: 100%;`
+    :
+      css` width: 0px;`
+  }
+
+  @media (max-width: 414px) {
+    height: 450px;
+  }
+  @media (max-width: 320px) {
+    height: 450px;
+  }
+`
+export const Content = styled.div<HeaderContentProps>`
+  width: 100%;
+  height: 450px;
+  padding: 64px;
+  background: linear-gradient(52deg, #111111 0%, rgba(17, 17, 17, 0) 100%);
+  
+  ${(props) =>
+    !props.onDisplay &&
+      css` display: none;`
+  }
+
+  @media (max-width: 414px) {
+    padding: 2rem;
+  }
+`
+
+export const ListCounters = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+
+  position: absolute;
+  margin-bottom: 36px;
+  bottom: 0;
+  right: 50%;
+
+`
+
+export const Counters = styled.button<{selected : boolean}>`
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border-radius: 100%;
+  border: none;
+  background-color: ${({selected, theme}) => selected ? theme.colors.primary1 : theme.colors.neutralsGrey5 };
+`
+
+export const Title = styled.div`
+  font-size: 40px;
+  font-weight: 700;
+  max-width: 40rem;
+  @media (max-width: 320px) {
+    word-break: break-word;
+    font-size: 25px;
+  }
+`
+
+export const Description = styled.div<HeaderContentProps>`
+  font-size: 16px;
+  font-weight: 400;
+  margin-top: 32px;
+  max-width: 44rem;
+  height: fit-content;
+  ${(props) =>
+    !props.zeroHeigthDescription &&
+    css`
+      height: 2.4rem;
+    `}
+  overflow: hidden;
+  transition: all 0.9s ease-in-out;
+  display: -webkit-box;
+
+  @media (max-width: 834px) {
+    max-width: 34rem;
+    ${(props) =>
+      !props.zeroHeigthDescription &&
+      css`
+        height: 2.4rem;
+      `}
+  }
+
+  @media (max-width: 414px) {
+    word-break: break-word;
+    ${(props) =>
+      !props.zeroHeigthDescription &&
+      css`
+        height: 2.4rem;
+      `}
+  }
+  @media (max-width: 320px) {
+    font-size: 12px;
+    ${(props) =>
+      !props.zeroHeigthDescription &&
+      css`
+        height: 2.4rem;
+      `}
+  }
+`
+
+export const SpaceProgressAndButton = styled.div`
+  margin-top: 68px;
+  display: flex;
+  height: 50px;
+  gap: 28px;
+  align-items: center;
+  margin-bottom: 2rem;
+  cursor: pointer;
+  @media (max-width: 414px) {
+    flex-direction: column;
+    margin-top: 40px;
+  }
+  @media (max-width: 320px) {
+    font-size: 14px;
+  }
+`
+export const SpaceButtonLeft = styled.div`
+  margin-left: 24px;
+  margin-bottom: 2rem;
+
+  @media (max-width: 414px) {
+    margin-left: 0;
+    margin-top: 1rem;
+  }
+  button {
+    @media (max-width: 320px) {
+      font-size: 14px;
+    }
+  }
+`
+export const SpaceButtonTop = styled.div`
+  margin-top: 48px;
+  margin-bottom: 2rem;
+  button {
+    @media (max-width: 320px) {
+      font-size: 14px;
+    }
+  }
+`
+
+export const SpaceButtonTopViewMore = styled.section<HeaderContentProps>`
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  cursor: pointer;
+  svg {
+    rotate: 269deg;
+    margin-top: 0.2rem;
+    margin-left: 0.5rem;
+    ${(props) =>
+      !props.zeroHeigthDescription
+        ? css`
+            transform: rotate(3.142rad);
+            transition: transform 0.5s;
+          `
+        : css`
+            transform: rotate(360deg);
+            transition: transform 0.5s;
+          `}
+  }
+  a {
+    color: #649af3;
+    font-weight: 700;
+  }
+`