frst-components 0.20.0

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

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

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+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')
+}