frst-components 0.20.0 → 0.20.2

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

@@ -1,68 +0,0 @@
-import '../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../theme'
-import * as Styles from './lateralMenuStyles'
-import { ILateralMenu } from './lateralMenu'
-import IItemLateralMenu from '@components/item-lateral-menu'
-
-import Avatar from '@components/avatar'
-import Button from '@components/buttons'
-
-export default function LateralMenu({ variant, hiddenButtonHeader, avatar, name, channel, button, listOptions, style }: ILateralMenu) {
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-                <Styles.WrapperCard style={{...style}}>
-                    <Styles.WrapperHeader>
-                        <Avatar 
-                            src={avatar.src}
-                            alt={avatar.alt ? avatar.alt : 'Image profile avatar'}
-                            size={avatar.size ? avatar.size : '80px'} 
-                        />
-                        <Styles.NameProfile>
-                            {name}
-                        </Styles.NameProfile>
-                        { channel &&
-                            <Styles.Channel>
-                                {channel}
-                            </Styles.Channel>
-                        }
-                        { !hiddenButtonHeader && 
-                            <Styles.WrapperButton>
-                                    { !channel ?
-                                        <Button 
-                                            variant='primary'
-                                            label={button.label}
-                                            handleClick={(e) => button.onClick(e)}
-                                        /> 
-                                        :
-                                        <Button 
-                                            variant='link'
-                                            label={button.label}
-                                            handleClick={(e) => button.onClick(e)}
-                                        />
-                                    }
-                            </Styles.WrapperButton>
-                        }
-
-                        <Styles.HR/>
-
-                    </Styles.WrapperHeader>
-                    { listOptions && listOptions.length > 0 && listOptions.map((item, index) => {
-                        return (
-                        <IItemLateralMenu 
-                            key={index}
-                            label={item.label}
-                            button={item.button}
-                            beginComponent={item.beginComponent}
-                            activeBeginIcon={item.activeBeginIcon}
-                            hiddenIconDropArrow={item.hiddenIconDropArrow}
-                            onClick={(e) => item.onClick(e)}
-                            selected={item.selected}
-                            subItems={item.subItems}
-                            style={{width: '100%'}}
-                        />)
-                    })}
-                </Styles.WrapperCard>
-        </ThemeProvider>
-    )
-}

package/src/components/lateral-menu/lateralMenu.d.ts

@@ -1,17 +0,0 @@
-import React from "react"
-
-import { IAvatar } from "@components/avatar/avatar"
-import { IItemLateralMenu, typeButton } from "@components/item-lateral-menu/itemLateralMenu"
-
-type enumVariant = 'primary' | 'secondary'
-
-export interface ILateralMenu {
-    variant: enumVariant,
-    avatar?: IAvatar,
-    name: string,
-    channel: string,
-    button: typeButton,
-    listOptions: Array<IItemLateralMenu>,
-    hiddenButtonHeader?: boolean,
-    style?: React.CSSProperties
-}

package/src/components/lateral-menu/lateralMenu.stories.tsx

@@ -1,429 +0,0 @@
-import React from 'react'
-
-import LateralMenu 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: 'Header/Lateral Menu',
-    component: LateralMenu,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <LateralMenu {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    variant: 'primary',
-    avatar: {
-        src: 'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
-        alt: 'Alt example'
-    },
-    hiddenButtonHeader: false,
-    name: 'Student/Channel name',
-    button: {
-        variant: 'primary',
-        label: 'Button CTA',
-        onClick: () => alert('Click')
-    },
-    listOptions: [
-        {    
-            label: 'Label',
-            onClick: () => alert('label'),
-            selected: false,
-            beginComponent: <Icons.Noun/>,
-            style: {
-                width: '280px' 
-            }
-        },
-        {    
-            label: 'Label',
-            onClick: () => alert('label'),
-            selected: false,
-            beginComponent: <Icons.Noun/>,
-            subItems: [
-                { id: '1', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '2', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '3', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '4', label: 'List Entry', onClick: (e) => alert(e) }
-            ],
-            style: {
-                width: '280px' 
-            }
-        },
-        {    
-            label: 'Label',
-            onClick: () => alert('label'),
-            selected: false,
-            beginComponent: <Icons.Noun/>,
-            subItems: [
-                { id: '1', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '2', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '3', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '4', label: 'List Entry', onClick: (e) => alert(e) }
-            ],
-            style: {
-                width: '280px' 
-            }
-        },
-        {    
-            label: 'Label',
-            onClick: () => alert('label'),
-            selected: false,
-            beginComponent: <Icons.Noun/>,
-            subItems: [
-                { id: '1', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '2', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '3', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '4', label: 'List Entry', onClick: (e) => alert(e) }
-            ],
-            style: {
-                width: '280px' 
-            }
-        },
-    ]
-}
-
-export const normalWithItemActive = Template.bind({})
-normalWithItemActive.args = {
-    variant: 'primary',
-    avatar: {
-        src: 'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
-        alt: 'Alt example'
-    },
-    name: 'Student/Channel name',
-    hiddenButtonHeader: false,
-    button: {
-        variant: 'primary',
-        label: 'Button CTA',
-        onClick: () => alert('Click')
-    },
-    listOptions: [
-        {    
-            label: 'Label',
-            onClick: () => alert('label'),
-            selected: true,
-            beginComponent: <Icons.Noun/>,
-            style: {
-                width: '280px' 
-            }
-        },
-        {    
-            label: 'Label',
-            onClick: () => alert('label'),
-            selected: false,
-            beginComponent: <Icons.Noun/>,
-            subItems: [
-                { id: '1', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '2', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '3', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '4', label: 'List Entry', onClick: (e) => alert(e) }
-            ],
-            style: {
-                width: '280px' 
-            }
-        },
-        {    
-            label: 'Label',
-            onClick: () => alert('label'),
-            selected: false,
-            beginComponent: <Icons.Noun/>,
-            subItems: [
-                { id: '1', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '2', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '3', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '4', label: 'List Entry', onClick: (e) => alert(e) }
-            ],
-            style: {
-                width: '280px' 
-            }
-        },
-        {    
-            label: 'Label',
-            onClick: () => alert('label'),
-            selected: false,
-            beginComponent: <Icons.Noun/>,
-            subItems: [
-                { id: '1', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '2', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '3', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '4', label: 'List Entry', onClick: (e) => alert(e) }
-            ],
-            style: {
-                width: '280px' 
-            }
-        },
-    ]
-}
-
-
-export const channel = Template.bind({})
-channel.args = {
-    variant: 'primary',    
-    channel: 'Info channel',
-    avatar: {
-        src: 'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
-        alt: 'Alt example'
-    },
-    name: 'Student name',
-    button: {
-        variant: 'primary',
-        label: 'Button CTA',
-        onClick: () => alert('Click')
-    },
-    listOptions: [
-        {    
-            label: 'Label',
-            onClick: () => alert('label'),
-            selected: false,
-            beginComponent: <Icons.Noun/>,
-            style: {
-                width: '280px' 
-            }
-        },
-        {    
-            label: 'Label',
-            onClick: () => alert('label'),
-            selected: false,
-            beginComponent: <Icons.Noun/>,
-            subItems: [
-                { id: '1', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '2', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '3', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '4', label: 'List Entry', onClick: (e) => alert(e) }
-            ],
-            style: {
-                width: '280px' 
-            }
-        },
-        {    
-            label: 'Label',
-            onClick: () => alert('label'),
-            selected: false,
-            beginComponent: <Icons.Noun/>,
-            subItems: [
-                { id: '1', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '2', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '3', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '4', label: 'List Entry', onClick: (e) => alert(e) }
-            ],
-            style: {
-                width: '280px' 
-            }
-        },
-        {    
-            label: 'Label',
-            onClick: () => alert('label'),
-            selected: false,
-            beginComponent: <Icons.Noun/>,
-            subItems: [
-                { id: '1', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '2', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '3', label: 'List Entry', onClick: (e) => alert(e) },
-                { id: '4', label: 'List Entry', onClick: (e) => alert(e) }
-            ],
-            style: {
-                width: '280px' 
-            }
-        },
-    ]
-}
-
-
-export const versionOneSRG = Template.bind({})
-versionOneSRG.args = {
-    variant: 'primary',
-    hiddenButtonHeader: true,
-    avatar: {
-        src: 'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
-        alt: 'Alt example'
-    },
-    name: 'Student/Channel name',
-    button: {
-        variant: 'primary',
-        label: 'Button CTA',
-        onClick: () => alert('Click')
-    },
-    listOptions: [
-        {    
-            label: 'Início',
-            selected: true,
-            onClick: () => alert('Início'),
-            beginComponent: <Icons.HomeLineIcon/>,
-            activeBeginIcon: <Icons.HomeFilledIcon/>,
-            style: {
-                width: '280px' 
-            }
-        },
-        {    
-            label: 'Assessment',
-            onClick: () => alert('Assessment'),
-            selected: false,
-            beginComponent: <Icons.PencilLineIcon/>,
-            activeBeginIcon: <Icons.PencilFilledIcon/>,
-            style: {
-                width: '280px' 
-            }
-        },
-        {    
-            label: 'Eventos',
-            hiddenIconDropArrow: true,
-            onClick: () => alert('Eventos'),
-            selected: false,
-            beginComponent: <Icons.CalendarLineIcon/>,
-            activeBeginIcon: <Icons.CalendarFilledIcon/>,
-            style: {
-                width: '280px' 
-            }
-        },
-        {    
-            label: 'Hall de projetos',
-            hiddenIconDropArrow: false,
-            onClick: () => alert('Hall de projetos'),
-            selected: false,
-            beginComponent: <Icons.MedalLineIcon/>,
-            activeBeginIcon: <Icons.MedalFilledIcon/>,
-            style: {
-                width: '280px' 
-            }
-        },
-    ]
-}
-
-
-export const versionTwoSRG = Template.bind({})
-versionTwoSRG.args = {
-    variant: 'primary',
-    hiddenButtonHeader: true,
-    avatar: {
-        src: 'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
-        alt: 'Alt example'
-    },
-    name: 'Student/Channel name',
-    button: {
-        variant: 'primary',
-        label: 'Button CTA',
-        onClick: () => alert('Click')
-    },
-    listOptions: [
-        {    
-            label: 'Início',
-            selected: false,
-            onClick: () => alert('Início'),
-            beginComponent: <Icons.HomeLineIcon/>,
-            activeBeginIcon: <Icons.HomeFilledIcon/>,
-            style: {
-                width: '280px' 
-            }
-        },
-        {    
-            label: 'Trilhas e Desafios',
-            onClick: () => alert('Trilhas e Desafios'),
-            selected: false,
-            beginComponent: <Icons.LampLineIcon/>,
-            activeBeginIcon: <Icons.LampFilledIcon/>,
-            style: {
-                width: '280px' 
-            }
-        },
-        {    
-            label: 'Assessment',
-            onClick: () => alert('Assessment'),
-            selected: false,
-            beginComponent: <Icons.PencilLineIcon/>,
-            activeBeginIcon: <Icons.PencilFilledIcon/>,
-            style: {
-                width: '280px' 
-            }
-        },
-        {    
-            label: 'Eventos',
-            hiddenIconDropArrow: true,
-            onClick: () => alert('Eventos'),
-            selected: false,
-            beginComponent: <Icons.CalendarLineIcon/>,
-            activeBeginIcon: <Icons.CalendarFilledIcon/>,
-            style: {
-                width: '280px' 
-            }
-        },
-    ]
-}
-
-export const versionThreeSRG = Template.bind({})
-versionThreeSRG.args = {
-    variant: 'primary',
-    hiddenButtonHeader: true,
-    avatar: {
-        src: 'https://media.istockphoto.com/photos/rocking-astronaut-3d-render-picture-id621597534?k=20&m=621597534&s=612x612&w=0&h=feOiFpDr7yah5o8dY1yrhkUh-grNKJNCevZn_fV-qz4=',
-        alt: 'Alt example'
-    },
-    name: 'Student/Channel name',
-    button: {
-        variant: 'primary',
-        label: 'Button CTA',
-        onClick: () => alert('Click')
-    },
-    listOptions: [
-        {    
-            label: 'Início',
-            selected: false,
-            onClick: () => alert('Início'),
-            beginComponent: <Icons.HomeLineIcon/>,
-            activeBeginIcon: <Icons.HomeFilledIcon/>,
-            style: {
-                width: '280px' 
-            }
-        },
-        {    
-            label: 'Trilhas e Desafios',
-            onClick: () => alert('Trilhas e Desafios'),
-            selected: false,
-            beginComponent: <Icons.LampLineIcon/>,
-            activeBeginIcon: <Icons.LampFilledIcon/>,
-            style: {
-                width: '280px' 
-            }
-        },
-        {    
-            label: 'Assessment',
-            onClick: () => alert('Assessment'),
-            selected: false,
-            beginComponent: <Icons.PencilLineIcon/>,
-            activeBeginIcon: <Icons.PencilFilledIcon/>,
-            subItems: [
-                { id: '1', label: 'Realizar reassessment', onClick: (e) => alert(e) },
-                { id: '2', label: 'Ver resultado', onClick: (e) => alert(e) },
-            ],
-            style: {
-                width: '280px' 
-            }
-        },
-        {    
-            label: 'Eventos',
-            hiddenIconDropArrow: true,
-            onClick: () => alert('Eventos'),
-            selected: false,
-            beginComponent: <Icons.CalendarLineIcon/>,
-            activeBeginIcon: <Icons.CalendarFilledIcon/>,    
-            button: {
-                label: 'Entrar',
-                variant: 'primary',
-                onClick: () => alert('Click')
-            },
-            style: {
-                width: '280px' 
-            }
-        },
-        {    
-            label: 'Conteúdos FRST',
-            onClick: () => alert('Conteúdos FRST'),
-            selected: false,
-            beginComponent: <Icons.LampLineIcon/>,
-            activeBeginIcon: <Icons.LampFilledIcon/>,
-            style: {
-                width: '280px' 
-            }
-        },
-    ]
-}

package/src/components/lateral-menu/lateralMenuStyles.ts

@@ -1,68 +0,0 @@
-import styled from 'styled-components'
-
-export const WrapperCard = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 24px 0px 12px;
-
-    position: relative;
-    width: 282px;
-    height: auto;
-
-    background: ${({theme}) => theme.colors.shadeWhite};
-
-    border: 1px solid #BDBDBD;
-    border-radius: 8px;
-`
-
-export const WrapperHeader = styled.div`
-    width: 100%;
-    padding-left: 24px;
-    padding-right: 24px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-`
-
-export const NameProfile = styled.span`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 20px;
-    line-height: 23px;
-    display: flex;
-    align-items: center;
-    text-align: center;
-
-    color: ${({theme}) => theme.colors.neutralsGrey1};
-
-    margin-top: 16px;
-`
-
-export const Channel = styled.span`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    display: flex;
-    align-items: center;
-    text-align: center;
-
-    color: ${({theme}) => theme.colors.neutralsGrey1};
-
-    margin-top: 4px;
-`
-export const WrapperButton = styled.div`
-margin-top: 10px;
-
-`
-
-
-export const HR = styled.hr`
-    border-top: 1px solid #BDBDBD;
-    margin-top: 20px;
-    margin-bottom: 20px;
-    width: 100%;
-`

package/src/components/learning-steps/index.tsx

@@ -1,67 +0,0 @@
-import React,{ useState } from 'react'
-import '../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../theme'
-
-import { TitleComponent, HeaderWrapper, ClearComponent, TextClear }  from './learningStepsStyles'
-import { ILearningSteps } from './learningSteps'
-
-import { TrashIcon } from '@shared/icons'
-
-import StepCard from '@components/step-card'
-import ScrollContainer from '@components/scroll-container'
-
-export default function LearningSteps({ title, onSelected, objectCards, widthCard,
-    marginLeftTitle, marginRightClear, marginsArrowButton, sizeArrowButton, horizontalMarginInternScroll,
-    textClearFilter, textViewMore }: ILearningSteps) {
-    const [ itemSelected, setItemSelected ] = useState(-1);
-
-    const onItemSelect = (n: number) => {
-        setItemSelected(n)
-        onSelected(n)
-    }
-
-    function renderCard(item) {
-        return (
-            <StepCard
-                key={item.id}
-                title={item.title}
-                onClick={() => onItemSelect(item.id)}
-                numberPeople={item.numberPeople}
-                className={null}
-                textButtonMore={textViewMore ? textViewMore : 'Ver mais'}
-                active={itemSelected == item.id}
-                src={item.photos}
-                width={widthCard}
-            />
-        )
-    }
-
-
-
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            <HeaderWrapper 
-            marginLeft={marginLeftTitle ? marginLeftTitle : '0px'}
-            marginRight={marginRightClear ? marginRightClear : '0px'}
-            >
-                <TitleComponent>
-                    {title}
-                </TitleComponent>
-                <ClearComponent  onClick={() => onItemSelect(-1)}>
-                     <TrashIcon/>
-                     <TextClear>{textClearFilter? textClearFilter : 'Excluir Filtro'}</TextClear>
-                </ClearComponent>
-            </HeaderWrapper>
-            <ScrollContainer 
-                stepMove={380} 
-                isVisibleControlsButtons 
-                sizeArrowButton={sizeArrowButton} 
-                marginsArrowButton={marginsArrowButton}
-                horizontalMarginInternScroll={horizontalMarginInternScroll}
-            >
-                {objectCards.map(renderCard)}
-            </ScrollContainer>
-        </ThemeProvider>
-    )
-}

package/src/components/learning-steps/learningSteps.d.ts

@@ -1,16 +0,0 @@
-import React from "react"
-
-
-export interface ILearningSteps {
-    title?: string,
-    objectCards?: any,
-    onSelected?: (n: number) => void,
-    marginLeftTitle?: string,
-    marginRightClear?: string,
-    marginsArrowButton?: number,
-    sizeArrowButton?: number,
-    widthCard?: string,
-    horizontalMarginInternScroll?: string,
-    textClearFilter?: string, 
-    textViewMore?: string,
-}