frst-components 0.20.1 → 0.20.3

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

@@ -1,98 +0,0 @@
-import React from 'react'
-
-import Login from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'LXP/Login',
-  component: Login
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Login {...args} />
-
-export const LoginComponent = Template.bind({})
-LoginComponent.args = {
-  variant: 'login',
-  isError: false,
-  handleClickLogin: (email, password) => {
-    alert(`email: ${email}, senha: ${password}`)
-  },
-  handleClickForgotPassword: (email) => {
-    alert(`emailRecuperado: ${email}`)
-  },
-  onClickConfimationBackToLogin: () => {
-    alert('confirmação enviada com sucesso. Retornar para login')
-  }
-}
-
-export const NewPassword = Template.bind({})
-NewPassword.args = {
-  variant: 'newPassword',
-  handleClickChangePassword: (newPassword, codigoNewPassword) => {
-    alert(`Nova Senha: ${newPassword}, Confirmar Código: ${codigoNewPassword}`)
-  },
-  handleClickChangePasswordCancel: () => {
-    alert('Voltar Login')
-  }
-}
-
-export const LoginTranslate = Template.bind({})
-LoginTranslate.args = {
-  variant: 'login',
-  isError: false,
-  handleClickLogin: (email, password) => {
-    alert(`email: ${email}, senha: ${password}`)
-  },
-  handleClickForgotPassword: (email) => {
-    alert(`emailRecuperado: ${email}`)
-  },
-  onClickConfimationBackToLogin: () => {
-    alert('confirmação enviada com sucesso. Retornar para login')
-  },
-  textBoasVindas: 'Welcome',
-  textLoginInformacao: 'To access, fill in the fields below:',
-  textoLabelLoginButtonLink: 'Forgot password?',
-  textInputLoginSenha: 'Password',
-  textLoginConectado: 'keep me logged in',
-  textLoginButton: 'Login',
-  textErrorEmailNaoInformado: 'E-mail not informed',
-  textErrorSenhaNaoInformado: 'Password Not Informed',
-  textErrorLoginPropsIsError: 'Incorrect email or passwords.',
-  textEmailCadastro: 'Enter your registration email below and click send.',
-  textEmailCadastro2: 'We will send you an email with a link to reset your password.',
-  textEmailButtonLinkCancel: 'No, cancel',
-  textEmailButtonEnviar: 'Submit',
-  textEmailErrorNaoPrenchido: 'unfilled e-mail',
-  textEmailErrorInvalido: 'invalid e-mail',
-  textEmailErrorPropsIsError: 'Error sending password recovery email.',
-  textConfirmacaoRespostaEmail: 'Request successfully sent to your email.',
-  textConfirmacaoButtonRetorna: 'Return'
-}
-
-export const NewPasswordTranslate = Template.bind({})
-NewPasswordTranslate.args = {
-  variant: 'newPassword',
-  handleClickChangePassword: (newPassword, codigoNewPassword) => {
-    alert(`Nova Senha: ${newPassword}, Confirm Code: ${codigoNewPassword}`)
-  },
-  handleClickChangePasswordCancel: () => {
-    alert('Voltar Login')
-  },
-  textNewPasswordInformacao: 'To create a new password, fill in the fields below:',
-  textNewPasswordInput: 'New Passaword',
-  textNewPasswordInputConfirma: 'Confirm password',
-  textNewPasswordButtonLink: 'Back login',
-  textNewPasswordButtonSalvar: 'to save',
-  textNewPasswordErrorNaoInformada: 'New password not provided.',
-  textNewPasswordErrorSenhaForte:
-    'Use at least 8 characters, 1 uppercase, 1 lowercase, and a number or special character. Do not use part of your email (yourname@company.com) as a password.',
-  textNewPasswordErrorIguais: 'The two passwords must be the same.',
-  textNewPasswordErrorInforma: 'Error entering new password',
-  textNewPasswordInputCodigo: 'Code',
-  textNewPasswordInputPlaceholderCodigo: 'Type the code',
-  textNewPasswordErrorCodigo: 'Code not reported.',
-  textNewPasswordInputEmailPlaceholder: 'Enter the email',
-  textNewPasswordInputEmail: 'Enter the email',
-  textNewPasswordErrorEmailNaoInformada: 'Invalid email.'
-}

package/src/components/LXP/login/loginStyle.ts

@@ -1,290 +0,0 @@
-import styled, { css } from 'styled-components'
-
-interface Props {
-  isColorError?: boolean
-  isError?: boolean
-  isStep?: number
-}
-const isColorBlack = ({ theme }) => theme.colors.shadeBlack
-const isColorError = ({ theme }) => theme.colors.linkError
-
-export const Container = styled.div`
-  width: 100%;
-  max-width: 445px;
-  min-height: 509px;
-  border-radius: 8px;
-  background-color: ${({ theme }) => theme.colors.shadeWhite};
-  box-sizing: border-box;
-  position: relative;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-`
-export const ContainerLogo = styled.div`
-  width: 100%;
-  min-height: 88px;
-  position: absoulte;
-  background-color: ${({ theme }) => theme.colors.primary1};
-  border-radius: 8px 8px 0px 0px;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 82, 71%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
-export const ContainerTypography = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin-top: 22px;
-  margin-bottom: 20px;
-`
-export const TypographyWelcome = styled.p`
-  font-family: Work Sans;
-  font-style: normal;
-  font-size: 24px;
-  font-weight: 700;
-  line-height: 31px;
-  letter-spacing: 0.01em;
-  color: ${({ theme }) => theme.colors.primary1};
-`
-export const TypographyFill = styled.p`
-  font-family: PT Sans;
-  font-style: normal;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 21px;
-  letter-spacing: 0em;
-  color: ${({ theme }) => theme.colors.neutralsGrey1};
-  margin-left: 44px;
-  margin-right: 44px;
-  margin-bottom: 22px;
-`
-export const ContainerEmail = styled.div<Props>`
-  width: 80%;
-  margin-left: 44px;
-  @media (max-width: 414px) {
-    margin-right: 44px;
-  }
-
-  ${(props) =>
-    props.isError &&
-    css`
-      @media (max-width: 414px) {
-        margin-right: 5px;
-      }
-    `}
-`
-export const ContainerButtonLink = styled.div`
-  right: 0;
-  margin-right: 44px;
-  margin-top: 7.5rem;
-  position: absolute;
-  @media (max-width: 414px) {
-    margin: 7.5rem 44px 0px 0px;
-  }
-`
-export const ContainerPassword = styled.div<Props>`
-  width: 80%;
-  margin-left: 44px;
-  margin-top: 33px;
-  @media (max-width: 414px) {
-    margin-right: 44px;
-  }
-
-  ${(props) =>
-    props.isError &&
-    css`
-      @media (max-width: 414px) {
-        margin-right: 5px;
-      }
-    `}
-`
-export const ContainerInputAndLink = styled.div`
-  display: flex;
-  flex-direction: column;
-`
-
-export const IconAlert = styled.div<Props>`
-  right: 0;
-  bottom: 0;
-  padding: 45px 10px 0px 6px;
-  ${(props) =>
-    props.isStep === 2 &&
-    css`
-      margin-top: 36px;
-    `}
-`
-export const ContainerIpuntAndIsIcon = styled.div`
-  display: flex;
-  align-items: flex-start;
-`
-
-export const ContainerConnect = styled.div`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-  margin-right: 44px;
-  margin-left: 44px;
-  margin-top: 32px;
-  margin-bottom: 20px;
-  padding-bottom: 32px;
-`
-export const ContainerCheckbox = styled.div`
-  cursor: pointer;
-  display: flex;
-  gap: 8px;
-`
-export const TypographyConnect = styled.p`
-  font-family: PT Sans;
-  font-style: normal;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 21px;
-  letter-spacing: 0em;
-  color: ${({ theme }) => theme.colors.shadeBlack};
-`
-
-// ######################recover####################
-
-export const ContainerRecover = styled.div`
-  width: 100%;
-  max-width: 445px;
-  border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
-  background-color: ${({ theme }) => theme.colors.shadeWhite};
-  box-sizing: border-box;
-  position: relative;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-`
-export const ContainerLogoRecover = styled.div`
-  width: 100%;
-  min-height: 88px;
-  position: absoulte;
-  background-color: ${({ theme }) => theme.colors.primary1};
-  border-radius: 8px 8px 0px 0px;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
-export const ContainerTypographyRecover = styled.div`
-  margin: 32px 44px 0 44px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-`
-export const TypographyRecover = styled.p`
-  font-family: PT Sans;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 21px;
-  color: ${({ theme }) => theme.colors.neutralsGrey1};
-`
-export const ContainerEmailRecover = styled.div<Props>`
-  margin-left: 44px;
-  margin-top: 35px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 80%;
-  @media (max-width: 414px) {
-    margin-right: 44px;
-  }
-
-  ${(props) =>
-    props.isError &&
-    css`
-      @media (max-width: 414px) {
-        margin-right: 5px;
-      }
-    `}
-`
-export const ContainerEmailAndTypeRecoverRecover = styled.div`
-  display: flex;
-  flex-direction: column;
-`
-
-export const ContainerButtonRecover = styled.div`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  margin: 30px 30px 20px 44px;
-  padding-bottom: 32px;
-  @media (max-width: 767px) {
-    margin-top: 58px;
-  }
-`
-
-//#########################NewPassaword#################
-
-export const TypographyNewPassword = styled.p<Props>`
-  font-family: PT Sans;
-  font-size: 16px;
-  font-weight: ${(props) => (props.isColorError ? 600 : 400)};
-  line-height: 21px;
-  color: ${(props) => (props.isColorError ? isColorError : isColorBlack)};
-  position: absolute;
-  margin: 34px 44px 10px 44px;
-`
-export const ContainerTypographyNewPassword = styled.div`
-  width: 100%;
-  height: 6.5rem;
-`
-
-export const ContainerPasswordNew = styled.div<Props>`
-  margin-top: 100px;
-  margin-left: 44px;
-  margin-right: 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-
-  @media (max-width: 414px) {
-    margin-right: 31px;
-  }
-
-  ${(props) =>
-    props.isError &&
-    css`
-      @media (max-width: 414px) {
-        margin-right: 13px;
-      }
-    `}
-`
-
-//###############SendComfirmation##############
-
-export const ContainerSendComfirmation = styled.div`
-  width: 100%;
-  max-width: 445px;
-  min-height: 302px;
-  border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
-  background-color: ${({ theme }) => theme.colors.shadeWhite};
-  box-sizing: border-box;
-  position: relative;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-`
-export const ContainerButtonSendConfirmation = styled.div`
-  display: flex;
-  justify-content: end;
-  margin: 126px 44px 0 0;
-`

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

@@ -1,70 +0,0 @@
-import '../../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './manageLearningCicles.Style'
-import { IManageLearningCicles } from './manageLearningCicles';
-import * as Icons from '../../../shared/icons'
-import moment from 'moment';
-import { useEffect, useState } from 'react';
-
-export default function ManageLearningCicles({ variant, label, disabled, style, handleClick, handleChange }: IManageLearningCicles) {
-
-    const dateAtual = moment().subtract(10, 'days').calendar();
-
-    const [individualContent, setIdividualContent] = useState([
-        { title: 'individualContents1' },
-        { title: 'individualContents2' },
-        { title: 'individualContents3' },
-    ])
-    const [listTrails, setListTrails] = useState([
-        { id: '1', name: 'trails' },
-        { id: '2', name: 'trails' },
-        { id: '3', name: 'trails' },
-    ])
-
-    const [isOpen, setIsOpen] = useState(false)
-    const [counterRender, setCounterRender] = useState(0)
-
-    function handleClickCheck() {
-        !isOpen ? setIsOpen(true) : setIsOpen(false)     
-    }
-
-    useEffect(()=>{
-        if(counterRender > 0 && isOpen){
-            handleClick()
-        }else{
-            setCounterRender(1)
-        }
-    },[isOpen])
-
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            <Styles.Container isOpen={isOpen}>
-                <Styles.TypographyDefinition>{label}</Styles.TypographyDefinition>
-                <Styles.Date>{dateAtual}</Styles.Date>
-                <Styles.ContetsName>
-                    {individualContent.length !== 0 ?
-                        individualContent.map((item, index) =>
-                            <Styles.TypographyContentsName key={index}>{item.title}</Styles.TypographyContentsName>
-                        )
-                        : <Styles.TypographyContentsName >Introdução a blockchain</Styles.TypographyContentsName>
-                    }
-                </Styles.ContetsName>
-                <Styles.ContainerIcon>
-                    <p>{<Icons.DropdownIconWhite fill='#000000' />}</p>
-                    <Styles.SelectIcon
-                        onChange={handleChange}
-                    >
-                        {listTrails.map((item, index) =>
-                            <option key={index} value={item.id}>{item.name}</option>
-                        )}
-                    </Styles.SelectIcon>
-                </Styles.ContainerIcon>
-                <Styles.GroupName isOpen={isOpen} >
-                    <p>Group name</p>
-                    <div onClick={handleClickCheck}>{<Icons.MoreHorizontal />}</div>
-                </Styles.GroupName>
-            </Styles.Container>
-        </ThemeProvider>
-    );
-}

package/src/components/LXP/manageLerningCicles/manageLearningCicles.Style.ts

@@ -1,88 +0,0 @@
-import styled, { css } from 'styled-components'
-
-interface PropsStyleManagerLerningCicle {
-    isOpen: boolean
-}
-
-export const Container = styled.div<PropsStyleManagerLerningCicle>`
-    width: 24.188rem;    
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    positon: relative;
-    ${(props) =>
-    props.isOpen &&
-    css`
-        background-color: #D3D3D3;
-    `}
-    
-`
-export const TypographyDefinition = styled.p`
-    font-family: 'Work Sans';
-    font-Weight: 700;
-    font-size: 1.1rem;
-    color: ${({ theme }) => theme.colors.borderSecondary4};
-    margin-top: 2rem;
-    margin-left: 1.6rem;
-`
-export const Date = styled.p`
-    font-family: 'PT Sans';
-    font-Weight: 400;
-    font-size: 0.6rem;
-    color: ${({ theme }) => theme.colors.neutralsGrey3};
-    margin-left: 1.6rem;
-`
-export const ContetsName = styled.div`
-    margin-left: 1.6rem;
-    margin-top: 1.5rem;    
-`
-export const TypographyContentsName = styled.p`
-    font-family: 'PT Sans';
-    font-Weight: 400;
-    font-size: 1rem;
-    color: ${({ theme }) => theme.colors.neutralsGrey3};
-`
-export const ContainerIcon = styled.div`
-    display: flex;
-    flex-direction: column;
-    margin-left: 1.6rem;
-    margin-top: 1.5rem;    
-    position: relative;    
-`
-export const SelectIcon = styled.select`
-    font-family: 'PT Sans';
-    font-Weight: 400;
-    font-size: 1rem;
-    color: ${({ theme }) => theme.colors.neutralsGrey4};
-    border: none;
-    background: none;
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;    
-    padding-left: 20px;
-    position: absolute;    
-`
-export const GroupName = styled.div<PropsStyleManagerLerningCicle>`
-    width: 24.1rem;
-    height: 78.63px;
-    background-color: #F7F9FC;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    align-content: center;    
-    margin-top: 62px;
-    ${(props) =>
-    props.isOpen &&
-    css`
-        background-color: ${({ theme }) => theme.colors.borderPrimary};        
-    `}
-
-    p{
-        margin-left: 1.6rem; 
-    }
-
-    div{
-        margin-right: 2rem;
-        cursor: pointer;
-    }  
-`

package/src/components/LXP/manageLerningCicles/manageLearningCicles.d.ts

@@ -1,12 +0,0 @@
-import React from "react"
-
-type enumVariant = 'cicleDefault'
-
-export interface IManageLearningCicles {
-    variant?: enumVariant;
-    label?: string,
-    disabled?: boolean,    
-    style?: React.CSSProperties,
-    handleClick?: () => void,
-    handleChange?: (checkedValue: any) => void,
-}

package/src/components/LXP/manageLerningCicles/manageLearningCicles.stories.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-
-import ManagerLearningCicles from './index'
-
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'LXP/ManagerLearningCicles',
-    component: ManagerLearningCicles,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <ManagerLearningCicles {...args} />
-
-export const Contents = Template.bind({})
-Contents.args = {
-    variant: 'cicleDefault',
-    label: 'Definition name',
-    disabled: false,    
-    handleClick: () => { alert('Click') },
-    handleChange: (e) => { console.log(e.target.value)}
-}
-

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

@@ -1,85 +0,0 @@
-import '../../../shared/global.css'
-import * as styleThumbnails from './participantThumbnails'
-import { FRSTTheme } from '../../../theme'
-import { useState } from 'react'
-import Popover from '@material-ui/core/Popover'
-
-interface ParticipantThumbnails {
-  imgThumbnails?: any
-  titleThumbnail?: string
-  descpThumbnail?: string
-  handleFunctionThumbnail?: () => void
-}
-
-export default function ParticipantThumbnails(props: ParticipantThumbnails) {
-  const [anchorEl, setAnchorEl] = useState(null)
-  const [itemSelected, setItemSelected] = useState(null)
-
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-
-  const open = Boolean(anchorEl)
-  const id = open ? 'simple-popover' : undefined
-
-  return (
-    <>      
-      <Popover
-        id={id}
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: 'center',
-          horizontal: 'center'
-        }}
-        transformOrigin={{
-          vertical: 'center',
-          horizontal: 'center'
-        }}
-        PaperProps={{
-          style: {
-            backgroundColor: '#FFF',
-            boxShadow: 'none',
-            borderRadius: 8,
-            marginTop: '-1rem'
-          }
-        }}
-        style={{
-          borderRadius: 8
-        }}
-      >
-        <styleThumbnails.CardThumbnailsHove
-          onMouseLeave={(event) => {
-            setAnchorEl(null)
-            setItemSelected(null)
-          }}
-        >
-          <styleThumbnails.CardThumbnailsHove theme={FRSTTheme} onClick={props.handleFunctionThumbnail}>
-            <styleThumbnails.ThumbnailImageHover
-              img={props.imgThumbnails ? props.imgThumbnails : '/img/NoUploaded.png'}
-            />
-            <styleThumbnails.DescriptionThumbnails theme={FRSTTheme}>
-              <h2>{props.titleThumbnail}</h2>
-              <p>{props.descpThumbnail}</p>
-            </styleThumbnails.DescriptionThumbnails>
-          </styleThumbnails.CardThumbnailsHove>
-        </styleThumbnails.CardThumbnailsHove>
-      </Popover>
-      <styleThumbnails.CardThumbnails
-        theme={FRSTTheme}
-        onClick={props.handleFunctionThumbnail}
-        onMouseOver={(event) => {
-          setAnchorEl(event.currentTarget)
-          setItemSelected(props)
-          props.handleFunctionThumbnail
-        }}
-      >
-        <styleThumbnails.ThumbnailHeaderImage
-          img={props.imgThumbnails ? props.imgThumbnails : '/img/NoUploaded.png'}
-        />
-        <h1>{props.titleThumbnail}</h1>
-      </styleThumbnails.CardThumbnails>
-    </>
-  )
-}

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

@@ -1,19 +0,0 @@
-import React from 'react'
-
-import ParticipantThumbnails from './index'
-
-export default {
-  title: 'LXP/ParticipantThumbnails',
-  component: ParticipantThumbnails
-}
-
-const Template = (args) => <ParticipantThumbnails {...args} />
-
-export const ParticipantThumbnailsComponent = Template.bind({})
-ParticipantThumbnailsComponent.args = {
-  imgThumbnails: 'https://cdn-lxp.dev.frstfalconi.cloud/8c8463ba501c84831da34466364041ca.png',
-  titleThumbnail: 'Name of the Content',
-  descpThumbnail:
-    'Empresas e profissionais precisam proteger seus dados contra ameaças digitais. Neste curso você aprenderá sobre políticas de segurança, gerenciamento de riscos, prevenção de ataques cibernéticos, resposta a incidentes e muito mais.',
-  handleFunctionThumbnail: () => alert('voce clicou aqui :D')
-}