frst-components 0.20.0

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

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

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

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

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

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

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