frst-components 0.20.0 → 0.20.2

package/src/components/challenge-cards/challengeCardStyles.ts

@@ -1,266 +0,0 @@
-import styled from 'styled-components'
-
-interface AvatarI {
-    size?: string,
-    src?: any,
-    disabled?: boolean,
-}
-
-export const WrapperCard = styled.div<{active}>`
-    display: flex;
-    flex-direction: column;
-    width: 282px;
-    height: 445px;
-    background: ${({theme, active}) => active ? theme.colors.neutralsGrey9 : theme.colors.shadeWhite};
-    border-radius: 8px;
-
-    overflow: hidden;
-
-    &:hover{
-        // background: ${({theme}) => theme.colors.neutralsGrey9};
-        // border: 1px solid ${({theme}) => theme.colors.neutralsGrey5};
-
-        box-shadow: 0px 10px 20px 7px rgb(255 255 255 / 20%);
-        cursor: pointer;
-    }
-`
-
-export const TagText = styled.span`
-    border-radius: 0px 8px;
-    /* margin-bottom: -24px; */
-
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 16px;
-    white-space: nowrap;
-    color: #FFFFFF;
-`
-
-export const WrapperBanner = styled.div`
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    height: 200px;
-    max-height: 200px;
-`   
-
-    export const TagStep = styled.div<{variant}>`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        align-self: flex-end;
-        padding: 4px 15px;
-        border-radius: 0px 8px;
-        
-        height: 24px;
-        z-index: 2 ;
-        ${({variant, theme}) => getVariantTagStyle(variant, theme)};
-    `
-    export const BannerCard = styled.img`
-        margin-top: -24px;
-
-        margin-bottom: 0px;
-        height: fit-content;
-    `
-    export const StepName = styled.div<{variant}>`
-        font-family: 'VT323', monospace;
-        font-size: 40px;
-        color: white;
-        -webkit-text-stroke: 0.5px black;
-        text-shadow: 2px 0 0 black, 0 2px 0 black,-2px 0 0 black,0 -2px 0 black;
-        
-        display: flex;
-        justify-content: center;
-        border: 2px dashed #FFF;
-
-        z-index: 2;
-        ${({variant}) => variant != 'completed' && variant != 'srg' &&
-            `margin-top: -60px;
-            margin-bottom: 16px;`
-        }
-        padding: 0px 12px 0px 12px;
-    `
-
-export const ContentCard = styled.div`
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 282px;
-    border-radius: 8px;
-    border: 1px solid ${({theme}) => theme.colors.neutralsGrey5};
-    border-top-left-radius: 0px;
-    border-top-right-radius: 0px;
-    border-top: 0px;
-`
-
-export const WrapperHeader = styled.div`
-    width: 100%;   
-    display: flex;
-    flex-direction: row;
-    padding-right: 10px;
-`
-
-export const TitleProject = styled.p`
-    flex: 1;
-    padding: 17px;
-    padding-left: 24px;
-    padding-bottom: 0px;
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 21px;
-`
-
-export const Dots = styled.div`
-    margin-top: 5px;
-
-    height: fit-content;
-`
-
-export const DescriptionProject = styled.span`
-    flex: 1;
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 20px;
-    line-height: 23px;
-    
-    color: ${({theme}) => theme.colors.primary1};
-    padding: 24px;
-    padding-top: 16px;
-
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 4; /** número de linhas que você quer exibir */
-    -webkit-box-orient: vertical;
-    word-wrap: break-word;
-`
-
-export const DescriptionSRG = styled.span`
-    flex: 1;
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 21px;
-    
-    /* neutrals/grey_1 */
-    
-    color: #222222;
-    
-    color: ${({theme}) => theme.colors.neutralsGrey1};
-    padding: 24px;
-    padding-right: 25px;
-    padding-top: 16px;
-`
-
-export const ButtonActionWrapper = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    align-items: center;
-`
-
-export const ButtonAction = styled.div<{ variant: string }>`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 47px;
-    padding: 12px;
-    width: 100%;
-
-    border-top: 1px solid ${({theme}) => theme.colors.neutralsGrey5};
-
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 21px;
-
-    color: ${({theme}) => theme.colors.linkOnfocus};
-
-    &:nth-child(1) {
-        ${({variant, theme}) => variant != 'completed' && variant != 'srg' && `
-            border-right: 1px solid ${theme.colors.neutralsGrey5};
-        `}
-    }
-
-    &:hover {
-        background-color: ${({theme}) => theme.colors.neutralsGrey8};
-        color: ${({theme}) => theme.colors.linkHover};
-    }
-`
-
-export const MyPopOver = styled.div`
-    position: absolute;
-    width: 130px;
-    background: ${({theme}) => theme.colors.shadeWhite};
-
-    border: 1px solid ${({theme}) => theme.colors.neutralsGrey5};
-    border-radius: 4px;
-
-    margin-left: -100px;
-
-`
-
-
-
-function getVariantTagStyle(variant, theme) {
-    switch(variant) {
-        case 'incompleteMars':
-            return `
-                background: rgb(117, 117, 117);
-                & > span {
-                    color: #FFF !important;
-                }
-            `
-        case 'mars':
-            return `
-                background: ${theme.colors.linkHover};
-                & > span {
-                    color: #FFF !important;
-                }
-            `
-        case 'jupiter': 
-            return `
-                background: #F8B911;
-                & > span {
-                    color: #222222!important;
-                }
-            `
-        case 'saturn': 
-        return `
-            background: #663366;
-            & > span {
-                color: #FFF !important;
-            }
-        `
-        case 'uranus': 
-        return `
-            background: #AD005C;
-            & > span {
-                color: #FFF !important;
-            }
-        `
-        case 'neptune':
-            return `
-                background: #222222;
-                & > span {
-                    color: #FFF !important;
-                }
-            `
-        case 'completed': 
-            return `
-                background: #158214;
-                & > span {
-                    color: #FFF !important;
-                }
-            `
-    }
-}

package/src/components/challenge-cards/dropdownMenuStyle.ts

@@ -1,87 +0,0 @@
-import styled from 'styled-components'
-import MenuItem from '@mui/material/MenuItem'
-import Menu from '@mui/material/Menu'
-
-export const UserName = styled.p`
-  color: white;
-  padding-left: 5px;
-  font-size: 16px;
-`
-
-export const MenuCustom = styled(Menu)<{step}>`
-  margin-left: ${({step}) => step == 'completed' ? '-64px' : '-84px'} ;
-  margin-top: 10px;
-
-  & .MuiPaper-root {
-    border-radius: 0px;
-    box-shadow: none !important;
-    overflow: visible;
-
-    &:before {
-      content: "";
-      position: absolute;
-      top: -17px;
-      right: 19.5px;
-      border-top: 7px solid transparent;
-      border-bottom: 10px solid #BDBDBD;
-      border-left: 7px solid transparent;
-      border-right: 7px solid transparent;
-    }
-  
-    &:after {
-        content: "";
-        position: absolute;
-        top: -16px;
-        right: 19.5px;
-        border-top: 7px solid transparent;
-        border-bottom: 10px solid #FFF;
-        border-left: 7px solid transparent;
-        border-right: 7px solid transparent;
-    }
-  }
-  ul {
-    box-shadow: -3px 16px 12px -12px #BDBDBD;
-    padding-top: 0px;
-    padding-bottom: 0px;
-    border: 1px solid #BDBDBD !important;
-    border-radius: 4px !important;
-    overflow: hidden;
-  }
-`
-
-export const MenuItemCustom = styled(MenuItem)`
-  background-color: ${({theme}) => theme.colors.shadeWhite} !important;
-  margin: 1px !important;
-
-  &:hover {
-    background-color: ${({theme}) => theme.colors.neutralsGrey8} !important;
-    color: ${({theme}) => theme.colors.linkHover} !important;
-  }
-
-  &:last-child {
-    &:hover {
-      color: ${({theme}) => theme.colors.linkError} !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: 700;
-  font-size: 16px;
-  line-height: 21px;
-`

package/src/components/challenge-cards/index.tsx

@@ -1,308 +0,0 @@
-import { useEffect, useState, MouseEvent } from 'react'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../theme'
-import '../../shared/global.css'
-
-import { IChallengeCard } from './challengeCard'
-import {
-    MoreDotsVertical,
-    EditIcon,
-    TrashIcon,
-    CheckInCicle,
-    Plus,
-    FowardArrow
-} from '@shared/icons'
-
-import * as Styles from './challengeCardStyles'
-import * as StylesDrop from './dropdownMenuStyle'
-import Button from '@mui/material/Button'
-
-export default function ChallengeCard({ 
-    variant, 
-    description, 
-    language, 
-    onClickView, 
-    onClickNewProject, 
-    onClickContinue, 
-    onClickDelete,
-    onClickEdit,
-    style }: IChallengeCard) {
-    
-    const [ label, setLabel] = useState<any>(labels['ptBR'])
-    const [ activeClick, setActiveClick ] = useState(false)
-
-    useEffect(() => {
-        let valuesTranslate = language?.replace(/\-/g, "")
-        setLabel(utilAssign(labels[valuesTranslate], labels['ptBR']))
-    }, [language])
-
-    const handleClick = () => {
-        if(variant == 'srg') onClickNewProject()
-        else onClickView();
-
-        setActiveClick(true)
-        setTimeout(() => {
-            setActiveClick(false)
-        }, 700)
-    }
-
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            <Styles.WrapperCard style={{...style}} active={activeClick}>                
-                <Styles.TagStep onClick={() => handleClick()} variant={variant}>
-                    <Styles.TagText>
-                        {label.tagStep[variant]}
-                    </Styles.TagText>
-                    { variant == 'completed' &&
-                        <span style={{marginLeft: '10px', height: '100%'}}>
-                            <CheckInCicle customColor_1="transparent" height='16' width='16'/>
-                        </span>
-                    }
-                </Styles.TagStep>                    
-                <Styles.WrapperBanner onClick={() => handleClick()}>
-                    <Styles.BannerCard src={BannersSRC[variant]} />
-                    <Styles.StepName variant={variant}>{label.nameStep[variant]}</Styles.StepName>
-                </Styles.WrapperBanner>
-
-                <Styles.ContentCard>
-                    <Styles.WrapperHeader>
-                        <Styles.TitleProject onClick={() => handleClick()}>
-                        {variant == 'srg' ? 'Space Race Game': label.project}
-                        </Styles.TitleProject>
-                        { variant != 'srg' && onClickContinue && onClickDelete &&
-                            <Styles.Dots>
-                                <MoreVerticalMenu 
-                                    textContinue={label.continue}
-                                    textDelete={label.delete}
-                                    textEdit={label.edit}
-                                    handleContinue={() => onClickContinue()}
-                                    handleDelete={() => onClickDelete()}
-                                    handleEdit={() => onClickEdit()}
-                                    variant={variant}
-                                />
-                            </Styles.Dots> }
-                    </Styles.WrapperHeader>
-                    { variant != 'srg'  ?
-                    <Styles.DescriptionProject onClick={() => handleClick()}>
-                        {resumeString(description, 73)}
-                    </Styles.DescriptionProject>
-                    :
-                    <Styles.DescriptionSRG onClick={() => handleClick()}>
-                    {label.srgDecription}
-                    </Styles.DescriptionSRG>
-                    }
-
-                    <Styles.ButtonActionWrapper>
-                        <Styles.ButtonAction onClick={() => handleClick()} variant={variant}>
-                            {variant == 'srg' ? 
-                            <>
-                                <Plus/>
-                                <span style={{marginLeft: '12px'}}>
-                                    {label.newProject}
-                                </span>
-                            </>
-                            : 
-                            label.view
-                            }
-                        </Styles.ButtonAction>
-                        {variant !== 'srg' && variant !== 'completed' && onClickContinue &&
-                            <Styles.ButtonAction onClick={() => onClickContinue()} variant={variant}>
-                                <span style={{marginLeft: '12px'}}>
-                                    {label.continue}
-                                </span>
-                            </Styles.ButtonAction>
-                        }
-                    </Styles.ButtonActionWrapper>
-                </Styles.ContentCard>
-
-            </Styles.WrapperCard>
-        </ThemeProvider>
-    )
-}
-
-const resumeString = (str, limit) => {
-    if(!str) return str
-    if(str?.length < limit) return str;
-
-    return `${str.substr(0, limit)}...`
-}
-
-const utilAssign = (value, optional) => {
-    return value ? value : optional
-}
-
-const BannersSRC = {
-    srg:'https://api-deimos.s3.amazonaws.com/srg.png',
-    incompleteMars:'https://api-deimos.s3.amazonaws.com/step1Mars.png',
-    mars:'https://api-deimos.s3.amazonaws.com/step1Mars.png',
-    jupiter: 'https://api-deimos.s3.amazonaws.com/step2Jupiter.png',
-    saturn: 'https://api-deimos.s3.amazonaws.com/step3Saturn.png',
-    uranus: 'https://api-deimos.s3.amazonaws.com/step4Uranus.png',
-    neptune: 'https://api-deimos.s3.amazonaws.com/step4Neptune.png',
-    completed: 'https://api-deimos.s3.amazonaws.com/completed.png'
-}
-
-const labels = {
-    ptBR: {
-        srgDecription: 'Nossa ferramenta ágil para atingir resultados e garantir aprendizados reais com ciclos de colaboração e experimentação.',
-        project: 'Desafio',
-        delete: 'Excluir',
-        edit: 'Editar',
-        continue: 'Continuar',
-        view: 'Visualizar',
-        newProject: 'Criar desafio',
-        tagStep: {
-            incompleteMars: 'Problema criado',
-            mars: 'Definição do desafio',
-            jupiter: 'Hipóteses e plano de ação',
-            saturn: 'Testes e experimentos',
-            uranus: 'Resultados e aprendizados',
-            neptune: 'Próximos passos',
-            completed: 'Finalizado'
-        },
-        nameStep: {
-            incompleteMars: 'Marte',
-            mars: 'Marte',
-            jupiter: 'Júpiter',
-            saturn: 'Saturno',
-            uranus: 'Urano',
-            neptune: 'Netuno'
-        }
-    },
-    enUS: {
-        srgDecription: 'Our agile tool to achieve results and ensure real learning with cycles of collaboration and experimentation.',
-        project: 'Challenge',
-        delete: 'Delete',
-        edit: 'Edit',
-        continue: 'Continue',
-        view: 'View',
-        newProject: 'Create challenge',
-        tagStep: {
-            incompleteMars: 'Created problem',
-            mars: 'Challenge definition',
-            jupiter: 'Hypotheses and action plan',
-            saturn: 'Tests and experiment',
-            uranus: 'Results and learnings',
-            neptune: 'Next steps',
-            completed: 'Completed'
-        },
-        nameStep: {
-            incompleteMars: 'Mars',
-            mars: 'Mars',
-            jupiter: 'Jupiter',
-            saturn: 'Saturn',
-            uranus: 'Uranus',
-            neptune: 'Neptune'
-        }
-    },
-
-    es: {
-        srgDecription: 'Nuestra herramienta ágil para lograr resultados y asegurar un aprendizaje real con ciclos de colaboración y experimentación.',
-        project: 'Desafio',
-        delete: 'Elimina',
-        edit: 'Edita',
-        continue: 'Continúa',
-        view: 'Para ver',
-        newProject: 'Crear desafio',
-        tagStep: {
-            incompleteMars: 'Problema creado',
-            mars: 'Definición del desafío',
-            jupiter: 'Hipótesis y plan de acción',
-            saturn: 'Pruebas y Experimentos',
-            uranus: 'Resultados y aprendizajes',
-            neptune: 'Próximos pasos',
-            completed: 'Terminado'
-        },
-        nameStep: {
-            incompleteMars: 'Marte',
-            mars: 'Marte',
-            jupiter: 'Júpiter',
-            saturn: 'Saturno',
-            uranus: 'Urano',
-            neptune: 'Neptuno'
-        }
-    },
-}
-
-
-export function MoreVerticalMenu({textContinue, textDelete, textEdit, handleContinue, handleDelete, handleEdit, variant}) {
-    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-    const [activeClick, setActiveClick] = useState([false, false])
-    const open = Boolean(anchorEl)
-    
-    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-      setAnchorEl(event.currentTarget)
-    }
-    const handleClose = () => {
-      setAnchorEl(null)
-    }
-    const handleSelect = (value) => {
-      setActiveClick(value)
-      
-      setTimeout(() => {
-        if(value[0]) handleContinue()
-        if(value[1]) handleEdit()
-        if(value[2]) handleDelete()
-        setActiveClick([false, false])
-        setAnchorEl(null)
-      }, 600);
-    }
-    
-    return (
-      <div>
-        <Button
-          id="basic-button"
-          aria-controls="basic-menu"
-          aria-haspopup="true"
-          aria-expanded={open ? 'true' : undefined}
-          onClick={handleClick}
-          style={{
-            width: '51px',
-            minWidth: '30px',
-            height: '47px',
-            margin: 0,
-            padding: 0,
-            display: 'flex',
-            justifyContent: 'center'
-        }}
-        >
-            <MoreDotsVertical/>
-        </Button>
-
-        <StylesDrop.MenuCustom
-          id="basic-menu"
-          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-          transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-          anchorEl={anchorEl}
-          open={open}
-          onClose={handleClose}
-          step={variant}
-        >   
-            {variant !== 'completed' &&
-                <StylesDrop.MenuItemCustom 
-                    onClick={() => handleSelect([true, false, false])} 
-                    style={{color: activeClick[0] ? '#663366' : '#0645AD', borderBottom: '1px solid #EBEBEB'}}
-                >                
-                    <FowardArrow width='16' height='16' fill={activeClick[0] ? '#663366' : '#0645AD'}/>
-                    <StylesDrop.TextOption>{textContinue}</StylesDrop.TextOption>
-                </StylesDrop.MenuItemCustom>
-            }
-            <StylesDrop.MenuItemCustom 
-                onClick={() => handleSelect([false, true, false])} 
-                style={{color: activeClick[0] ? '#663366' : '#0645AD', borderBottom: '1px solid #EBEBEB'}}
-            >                
-                <EditIcon width='16' height='16' fill={activeClick[0] ? '#663366' : '#0645AD'}/>
-                <StylesDrop.TextOption>{textEdit}</StylesDrop.TextOption>
-            </StylesDrop.MenuItemCustom>
-            <StylesDrop.MenuItemCustom 
-                onClick={() => handleSelect([false, false, true])} 
-                style={{color: activeClick[1] ? '#C00F00' : '#FF0000' }}
-            >
-                <TrashIcon fill={activeClick[1] ? '#C00F00' : '#FF0000'} width='13' height='16' /> 
-                <StylesDrop.TextOption>{textDelete}</StylesDrop.TextOption>
-            </StylesDrop.MenuItemCustom>
-        </StylesDrop.MenuCustom>
-      </div>
-    )
-}
-  

package/src/components/checkmark/checkmark.d.ts

@@ -1,11 +0,0 @@
-import React from "react"
-
-export interface ICheckmark {
-    type?: string,
-    subtitle?: string,
-    active?: boolean,
-    handleClick?: () => void, 
-    className?: string,
-    disabled?: boolean,
-    styles?: any,
-}

package/src/components/checkmark/checkmark.stories.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-
-import Checkmark from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Learning Tech/Checkmark',
-    component: Checkmark,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Checkmark {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    type: "checked",
-    subtitle: "Sim",
-    active: true,
-    handleClick: (e : any) => { alert(e) }, 
-    className: null,
-    disabled: false,
-    styles: {marginLeft:'10px'}
-}