frst-components 0.20.0

package/src/components/learning-steps/learningSteps.stories.tsx

@@ -0,0 +1,123 @@
+import React from 'react'
+
+import LearningSteps from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Learning Tech/Learning Steps',
+    component: LearningSteps,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <LearningSteps {...args} />
+
+export const normal = Template.bind({})
+normal.args = {
+    title: "Etapas do ciclo de aprendizagem",
+    onSelected: (e : any) => { alert("Item Selecionado: " + e)},
+    textViewMore: 'Ver mais',
+    textClearFilter: 'Excluir Filtro',
+    objectCards: [
+                    {
+                        id: 0,
+                        title: '0. Não iniciou',
+                        numberPeople: 15,
+                    },
+                    {
+                        id: 1,
+                        title: '1. Problema definido',
+                        numberPeople: 3,
+                        photos:
+                            ['https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
+                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
+                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg']
+                    },
+                    {
+                        id: 2,
+                        title: '2. Hipóteses levantadas',
+                        numberPeople: 10,
+                        photos:
+                            ['https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
+                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
+                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg']
+                    },
+                    {
+                        id: 3,
+                        title: '3. Testes realizados',
+                        numberPeople: 4,
+                        photos:
+                            ['https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
+                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
+                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg']
+                    },
+                    {
+                        id: 4,
+                        title: '4. Resultados e aprendizados',
+                        numberPeople: 13,
+                        photos:
+                            ['https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
+                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
+                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg']
+                    },
+                    {
+                        id: 5,
+                        title: '5. Próximos passos',
+                        numberPeople: 105,
+                        photos:
+                            ['https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
+                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
+                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg']
+                    },
+                    {
+                        id: 6,
+                        title: '6. Finalizado',
+                        numberPeople: 2,
+                        photos:
+                            ['https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
+                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
+                            'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg']
+                    },
+                ],
+    marginLeftTitle: '0px',
+    marginRightClear: '0px',
+    marginsArrowButton: 50,
+    sizeArrowButton: 80,
+    widthCard: '343px',
+    horizontalMarginInternScroll: '100px',
+}
+
+
+export const minimo = Template.bind({})
+minimo.args = {
+    onSelected: (e : any) => { alert("Item Selecionado: " + e)},
+    objectCards: [
+            {
+                id: 0,
+                title: '0. Não iniciou',
+            },
+            {
+                id: 1,
+                title: '1. Problema definido',
+            },
+            {
+                id: 2,
+                title: '2. Hipóteses levantadas',
+            },
+            {
+                id: 3,
+                title: '3. Testes realizados',
+            },
+            {
+                id: 4,
+                title: '4. Resultados e aprendizados',
+            },
+            {
+                id: 5,
+                title: '5. Próximos passos',
+            },
+            {
+                id: 6,
+                title: '6. Finalizado',
+            },
+        ],
+}

package/src/components/learning-steps/learningStepsStyles.ts

@@ -0,0 +1,46 @@
+import styled from 'styled-components'
+
+interface AvatarI {
+    size?: string,
+    src?: any,
+    disabled?: boolean,
+}
+
+export const HeaderWrapper = styled.div<{marginLeft?:string, marginRight?:string}>`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    margin-left: ${({marginLeft})=> marginLeft};
+    margin-right: ${({marginRight})=> marginRight};
+
+    margin-bottom: 5px;
+`
+
+export const ClearComponent = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: #0645AD;
+    cursor: pointer;
+`
+
+export const TitleComponent = styled.div`
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 23px;
+    letter-spacing: -0.02em;
+`
+
+export const TextClear =  styled.div`
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 19px;
+    display: flex;
+    align-items: center;
+    margin-left: 18px;
+`

package/src/components/menu-more/index.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState, MouseEvent } from 'react'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../theme'
+import '../../shared/global.css'
+
+import {
+    MoreDotsVertical,
+} from './../../shared/icons'
+
+import { 
+    ButtonMore,
+    MenuCustom,
+    MenuItemCustom,
+    TextOption,
+    IconOption } from './menuMoreStyles'
+import { IMenuMore } from './menuMore'
+
+
+export default function MenuMore({iconButton, options, style}: IMenuMore) {
+    const [ listOptions, setListOptions ] = useState(options)
+    
+    useEffect(() => {
+      setListOptions(options)
+    }, [options])
+
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+    const open = Boolean(anchorEl)
+    
+    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget)
+    }
+    const handleClose = () => {
+      setAnchorEl(null)
+    }
+    
+    return (
+    <ThemeProvider theme={FRSTTheme}>
+      <div style={{...style}}>
+        <ButtonMore
+          id="basic-button"
+          aria-controls="basic-menu"
+          aria-haspopup="true"
+          aria-expanded={open ? 'true' : undefined}
+          onClick={handleClick}
+        >
+            {iconButton ? iconButton : <MoreDotsVertical/>}
+        </ButtonMore>
+        {listOptions && listOptions?.length > 0 && 
+            <MenuCustom
+                id="basic-menu"
+                anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+                transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+            > 
+                { listOptions.map((itemOption, index)=> {
+                    return <>
+                        <MenuItemCustom 
+                            key={index}
+                            onClick={() =>  itemOption?.onClick()}
+                            style={{borderBottom: ((listOptions?.length -1) == index) ? '' : '1px solid #EBEBEB',
+                                color: itemOption?.color ? itemOption?.color : '#222'
+                            }}
+                            disableRipple
+                        >
+                            <IconOption>{itemOption?.startIcon ? itemOption?.startIcon : ''}</IconOption>
+                            <TextOption>{itemOption?.description}</TextOption>
+                        </MenuItemCustom>
+                    </>
+                  })
+                }
+            </MenuCustom>
+        }
+      </div>
+      </ThemeProvider>
+    )
+}
+  

package/src/components/menu-more/menuMore.d.ts

@@ -0,0 +1,15 @@
+
+import React from 'react'
+
+export interface IOptionItem {
+    description: string
+    startIcon: any
+    onClick: (e?:any) => void
+    color?:  string
+}
+
+export interface IMenuMore {
+    iconButton: any
+    options:  Array<IOptionItem>
+    style?: React.CSSProperties;
+}

package/src/components/menu-more/menuMore.stories.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import MenuMore from './index'
+
+
+import {
+    MoreDotsHorizontal,
+    EditIcon,
+    TrashIconNew,
+    CheckInCicle,
+    Plus,
+    FowardArrow
+} from './../../shared/icons'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Components/Menu More',
+    component: MenuMore,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <MenuMore {...args} />
+
+export const normal = Template.bind({})
+normal.args = {
+    options: [
+        {
+            description: 'Continuar',
+            startIcon: <FowardArrow fill='#222'/>,
+            onClick: (e) => alert('click continue')
+        },
+        {
+            description: 'Editar',
+            startIcon: <EditIcon fill='#222'/>,
+            onClick: (e) => alert('click edit')
+        },
+        {
+            description: 'Excluir',
+            startIcon: <TrashIconNew fill='#C1341A'/>,
+            onClick: (e) => alert('click delete'),
+            color: '#C1341A'
+        },
+    ],
+    style: {marginLeft: '200px'}
+}
+
+export const twoItems = Template.bind({})
+twoItems.args = {
+    options: [
+        {
+            description: 'Editar',
+            startIcon: <EditIcon fill='#222'/>,
+            onClick: (e) => alert('click edit')
+        },
+        {
+            description: 'Excluir',
+            startIcon: <TrashIconNew fill='#C1341A'/>,
+            onClick: (e) => alert('click delete'),
+            color: '#C1341A'
+        },
+    ],
+    style: {marginLeft: '200px'}
+}
+
+export const oneItem = Template.bind({})
+oneItem.args = {
+    iconButton: <MoreDotsHorizontal fill='#222'/>,
+    options: [
+        {
+            description: 'Excluir',
+            startIcon: <TrashIconNew fill='#C1341A'/>,
+            onClick: (e) => alert('click delete'),
+            color: '#C1341A'
+        },
+    ],
+    style: {marginLeft: '200px'}
+}

package/src/components/menu-more/menuMoreStyles.ts

@@ -0,0 +1,123 @@
+import styled from 'styled-components'
+import MenuItem from '@mui/material/MenuItem'
+import Menu from '@mui/material/Menu'
+import Button from '@mui/material/Button'
+
+export const UserName = styled.p`
+  color: white;
+  padding-left: 5px;
+  font-size: 16px;
+`
+
+export const ButtonMore = styled(Button)`
+    width: 30px !important;
+    min-width: 30px !important;
+    max-width: 30px !important;
+    height: 30px !important;
+    margin: 0px !important;
+    padding: 0px !important;
+    display: flex !important;
+    justify-content: center !important;
+    border-radius: 12px !important;
+
+    &:hover {
+        background-color: #FFF9 !important;
+    }
+
+`
+
+export const MenuCustom = styled(Menu)`
+  margin-top: 10px;
+  margin-left: 30px;
+  overflow: hidden;
+  border-radius: 8px;
+
+  & .MuiPaper-root {
+    border-radius: 0px;
+    box-shadow: none !important;
+    overflow: visible;
+    background: #00000000;
+
+    &:before {
+        content: "";
+        position: absolute;
+        top: -15px;
+        right: 8.5px;
+        border-top: 6px solid transparent;
+        border-bottom: 10px solid #EBEBEB;
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+    }
+  
+    &:after {
+        content: "";
+        position: absolute;
+        top: -14px;
+        right: 8.5px;
+        border-top: 6px solid transparent;
+        border-bottom: 10px solid #FFF;
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+    }
+  }
+  ul {
+    box-shadow:  0px 3px 10px rgba(0, 0, 0, 0.15), 0px 15px 20px -20px rgba(34, 34, 34, 0.15);;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    border: 1px solid #EBEBEB !important;
+    border-radius: 8px !important;
+    overflow: hidden;
+    background: #FFF;
+    width: 160px;
+
+
+  li {
+    padding-left: 25px;
+  }
+  }
+`
+
+export const MenuItemCustom = styled(MenuItem)`
+  background-color: ${({theme}) => theme.colors.shadeWhite} !important;
+  padding-right: 45px !important;
+  margin: 1px !important;
+  transition: none !important;
+  animation: none !important;
+  &:hover {
+    background-color: #F7F9FC !important;
+  }
+  &:active {    
+    background-color: #FCF3EB !important;
+  }
+
+  
+`
+
+export const SubMenuItemCustom = styled(MenuItem)`
+  color: white !important;
+  background-color: #F5792A !important;
+
+  display: flex;
+  flex-direction: row;
+  &:hover {
+    background-color: #FD9350 !important;
+  }
+`
+
+export const TextOption = styled.div`
+  margin-left: 10px;
+  padding-top: 1px;
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 21px;
+`
+
+export const IconOption = styled.div`
+  width: 20px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`

package/src/components/modal/modalLearningTech/index.tsx

@@ -0,0 +1,67 @@
+import { Grid, Box, Modal } from '@mui/material'
+import style from './modalLearningTech.module.css'
+import Button from '../../buttons/index'
+import { CloseIcon } from '@shared/icons'
+
+
+type enumTypeButton = 'primary' | 'secondary' | 'link'
+interface ModalLearningTechProps {
+    open: boolean
+    title?: string
+
+    confirmationButton?: string
+    cancelButton?: string
+    /**
+   * @prop {number} tipeButton: Tipos de botão (primary, secondary, link)
+    */
+    typeButtonConfirmation?: enumTypeButton
+
+    language?: 'pt-BR' | 'pt-PT' | 'en-US' | 'es' 
+
+    children: React.ReactNode
+
+    handleClose: () => void
+
+    handleConfirmation: () => void
+
+    style?: React.CSSProperties
+    
+}
+
+export default function ModalLearningTech(props: ModalLearningTechProps) {
+    
+    
+    return (
+        <Modal open={props.open} onClose={props.handleClose} >
+            
+            <Box className={style.modalBox} style={{top: '50%', left: '50%', transform: 'translate(-50%, -50%)', ...props.style}}>
+                <div className={style.fechar} onClick={props.handleClose}>
+                    <CloseIcon />
+                </div>
+                <div className={style.titulo}>
+                    {props.title}
+                </div>
+                <div className={style.container} >
+                    {props.children}
+                </div>
+                <div className={style.conclusao}>
+                    {
+                        props.confirmationButton ?
+                            props.cancelButton ?
+                                <>
+                                    <Button variant='link' label={props.cancelButton} handleClick={props.handleClose} />
+                                    <span style={{marginRight: 8, marginLeft: 8}}>{props.language === 'en-US' ? 'or' : 'ou'}</span>
+                                    <Button variant={props.typeButtonConfirmation} label={props.confirmationButton} handleClick={props.handleConfirmation} />
+                                </>
+                            :
+                                <Button variant={props.typeButtonConfirmation} label={props.confirmationButton} handleClick={props.handleConfirmation} />
+                        :
+                        <></>
+                    }
+
+                </div>
+                        
+            </Box>
+        </Modal>
+    )
+}

package/src/components/modal/modalLearningTech/modalLearningTech.module.css

@@ -0,0 +1,79 @@
+.modalBox{
+    background-color: #FFF;
+    max-width: 900px;
+    min-height: 300px;
+    max-height: 80%;
+    padding-top: 30px;
+    padding-bottom: 30px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    position: relative;
+
+    border-radius: 10px;
+
+    font-family: 'Work Sans';
+    
+
+}
+
+.fechar{
+    font-size: 12px;
+    color: #222222;
+    padding: 12px;
+    background-color: transparent;
+    border-top-right-radius: 10px;
+
+    display: flex;
+    justify-content: right;
+    align-items: center;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+
+    margin-top: 0px;
+    cursor: pointer;
+}
+
+.titulo{
+    
+    width: 100%;
+
+    margin-top: 10px;
+    
+    font-size: 24px;
+    font-weight: 700;
+    
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    
+}
+
+.container {
+    overflow: auto;
+    width: 100%;
+
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column;
+    flex-wrap: noWrap;
+
+    margin-top: 10px;
+
+}
+
+.conclusao{
+    margin-top: 30px;
+
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+
+}

package/src/components/modal/modalLearningTech/modalLearningTech.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+
+import ModalLearningTech from './index'
+import ComentaryBox from '../../commentary-box/index'
+import Avatar from '../../avatar/index'
+import { textAlign } from '@mui/system'
+import { ArrowForwardIosOutlined } from '@mui/icons-material'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Modal/ModalLearningTech',
+    component: ModalLearningTech,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <ModalLearningTech {...args} />
+
+export const ModalTornarComentarioPrivado = Template.bind({})
+ModalTornarComentarioPrivado.args = {
+    open: true,
+    title: 'Tem certeza de que quer tornar privado o comentário?',
+    cancelButton: 'Cancelar',
+    confirmationButton: 'Tornar privado',
+    children: 'Dessa forma, só o criador do comentário e o autor do problema (você) poderão visualizar e interagir com o comentário.',
+    style: {textAlign:'center', padding: 20},
+    typeButtonConfirmation: 'primary',
+    language: 'en-US'
+    
+}
+
+export const ModalExcluirComentario = Template.bind({})
+ModalExcluirComentario.args = {
+    open: true,
+    title: 'Tem certeza de que quer excluir comentário?',
+    cancelButton: 'Cancelar',
+    confirmationButton: 'Excluir',
+    typeButtonConfirmation: 'primary',
+    children: 
+    <>
+        <div style={{borderTop: '1px solid #BDBDBD', borderBottom: '1px solid #BDBDBD', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'flexStart', padding: 20}}> 
+            <Avatar size='40px' src={'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg'}/>
+            <ComentaryBox 
+                name='Rayana Gama' 
+                date='8 horas atrás' 
+                position='Estudante/Universitário(a) de Designer'
+                value="Olá, Roberto! Tudo bem?
+                Estou iniciando a trilha Digital Business Mindest e achei que o desenvolvimento do seu projeto foi muito bem estruturado. Parabéns!"
+                className='Comentario Rayana'
+                styles={{}}
+                textLiked='Curtir'
+                textAnswer='Responder'
+                hasAnswer={true}
+                actionLike={() => {}}
+                onChange={() => {}}
+            />
+        </div>
+        <span style={{fontSize: 16, fontWeight: 600, paddingTop: 20}}> Todas as interações com o comentário também serão removidas</span>
+    </>
+      
+}