frst-components 0.20.0

package/src/components/FI/sessionFilters/index.tsx

@@ -0,0 +1,160 @@
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../../theme'
+import * as Styles from './sessionFiltersStyle'
+import * as Icons from '../../../shared/icons'
+import { ISessionFilters } from './sessionFilters'
+import { useEffect, useState } from 'react'
+import { ListItemText, MenuItem, Select, Checkbox, autocompleteClasses } from '@mui/material'
+
+type enumVariant = 'myBusiness' | 'mission' |  'trail'
+
+interface IFilterButton{
+    /**
+     * @prop {string} variant: As variants dos botões dos filtros:(myBusiness, mission, trail)
+     */  
+    variant: enumVariant
+    label: string
+    id: string
+    handleClick ?: () => void
+}
+
+const MenuProps = {
+    PaperProps: {
+    style: {
+        overflow: 'auto',
+        maxHeight: 255,
+        borderRadius: 8,
+    },
+    },
+};
+
+
+export default function SessionFilters(props: ISessionFilters) {
+    const [selectedFilter, setSelectedFilter] = useState(props.selectedFilter);
+    const [selectFilterContent, setSelectFilterContent] = useState([]);
+    const [isVisibleSelect, setIsVisibleSelect] = useState(false)
+    const [isVisiblePlaceholderSelect, setIsVisiblePlaceholderSelect] = useState(true)
+   
+    useEffect(() => {
+        setSelectedFilter(props.selectedFilter)
+    }, [props.selectedFilter]);
+
+    useEffect(() => {
+        setIsVisiblePlaceholderSelect(props.isVisiblePlaceholderSelect)
+    }, [props.isVisiblePlaceholderSelect]);
+
+    useEffect(() => {
+        setIsVisibleSelect(props.isVisibleSelect)
+    }, [props.isVisibleSelect]);
+
+    const selectItem = (item) => {
+        let index = selectFilterContent.indexOf(item.title)
+        let newArray = [].concat(selectFilterContent)
+        if(selectFilterContent.includes(item.title) ){
+            newArray.splice(index, 1)
+            setSelectFilterContent(currentValue => currentValue = newArray )
+        }
+        else{
+            newArray.push(item.title)
+            setSelectFilterContent(currentValue => currentValue = newArray)
+        }
+    }
+
+    function FilterButton(props: IFilterButton) {
+        return (
+            <>
+                {props.variant === 'myBusiness' ?
+                    <Styles.ButtonSessionFilters active={selectedFilter === props.id} onClick={props.handleClick}>                    
+                        <Icons.Handshake />                                    
+                        {props.label}
+                    </Styles.ButtonSessionFilters>  
+                :  props.variant === 'mission' ?
+                    <Styles.ButtonSessionFilters active={selectedFilter === props.id} onClick={props.handleClick}>                    
+                        <Icons.Mission />                                        
+                        {props.label}
+                    </Styles.ButtonSessionFilters> 
+                : props.variant ===  'trail' ?
+                    <Styles.ButtonSessionFilters active={selectedFilter === props.id} onClick={props.handleClick}>                    
+                        <Icons.Lamp />                                        
+                        {props.label}
+                    </Styles.ButtonSessionFilters>
+                : null}
+            </>
+            
+        );
+    }
+
+    return (
+        <ThemeProvider theme={FRSTTheme}>
+            <Styles.ContainerFilter style={{...props.style}}>
+                {props.labelFilters}
+                <Styles.ButtonList>
+                    {props.filterList.map((item,index) => {
+                        return(
+                            <div style={{marginRight: 24}} key={index}>
+                                {FilterButton({variant:item.variant, label: item.label, id: item.id, handleClick: item.handleClick})}
+                            </div>
+                        )
+                    })}
+                </Styles.ButtonList>
+                {props.selectedFilterContentList ?
+                <>
+                    { isVisibleSelect &&  <>{props.labelSelectItens}</> }
+                    <Styles.SelectedItens>
+                    { isVisibleSelect ?
+                        <>
+                            {isVisiblePlaceholderSelect && <Styles.LabelSelect isVisible={true}>{props.textLabelSelect}</Styles.LabelSelect>}
+                            <Select  
+                                multiple
+                                labelId='selectedFilterInfoLabel'
+                                id='selectedFilterInfo'
+                                value={selectFilterContent} 
+                                // renderValue={(selected) =>`${selected.length} ${selected.length > 1 ? props.textMultipleSelected : props.textSingleSelected}`}
+                                renderValue={() => props.textSelectedItems}
+                                style={{height: 48, width: 384}}
+                                MenuProps={MenuProps}
+                                onChange={props.handleSelectedFilterData(selectFilterContent)}
+                            >
+                                {
+                                    props.selectedFilterContentList.map((item) => (
+                                        <MenuItem
+                                            onClick={() => selectItem(item)} 
+                                            defaultValue={item.title} key={item.id} 
+                                            style={{borderBottom: `1px solid ${FRSTTheme['colors'].neutralsGrey7}`}}
+                                        >
+                                            
+                                            <Checkbox
+                                                checked={selectFilterContent.indexOf(item.title) > -1}
+                                                sx={{
+                                                    color: FRSTTheme['colors'].neutralsGrey5,
+                                                    '&.Mui-checked': {
+                                                        color: FRSTTheme['colors'].primary1,
+                                                    },
+                                                }}
+                                            />
+                                            <ListItemText style={{color: FRSTTheme['colors'].neutralsGrey1, fontSize: 16, fontWeight: 400}} primary={item.title} />
+                                        </MenuItem>
+                                    ))
+                                }
+                            </Select>
+                            </>
+                            :
+                            <div></div>
+                        
+                    }
+                            <div style={{color: FRSTTheme['colors'].linkOnfocus, marginRight: 24, cursor: 'pointer', display: 'flex', justifyContent: 'flex-end'}} 
+                            // onClick={props.handleDeleteFilter}
+                            onClick={() => setSelectFilterContent(currentValue => currentValue = [])} 
+                        >
+                            <Icons.Trash fill={FRSTTheme['colors'].linkOnfocus} />
+                            &nbsp;
+                            {props.textDeleteFilter}
+                        </div>
+                    </Styles.SelectedItens>
+                </>
+                : null
+                }
+            </Styles.ContainerFilter>
+        </ThemeProvider>
+    );
+}

package/src/components/FI/sessionFilters/sessionFilters.d.ts

@@ -0,0 +1,35 @@
+import React from "react"
+
+type enumVariant = 'myBusiness' | 'mission' |  'trail'
+
+export type typeContentList = {
+    title: string
+    id: string
+}
+
+export type typeFilter = {
+    variant: enumVariant
+    label: string
+    id: string
+    handleClick?: () => void
+}
+
+export interface ISessionFilters {
+    filterList : Array<typeFilter>
+    selectedFilter : string
+    selectedFilterContentList : Array<typeContentList>
+    labelFilters?: string
+    labelSelectItens ?: string
+    textDeleteFilter ?: string
+    textMultipleSelected ?: string
+    textSingleSelected ?: string
+    textSelectedItems ?: string
+    textLabelSelect ?: string
+    isVisibleSelect ?: boolean
+    isVisiblePlaceholderSelect ?: boolean
+
+    handleSelectedFilter : () => void
+    handleDeleteFilter : () => void
+    handleSelectedFilterData : any
+    style?: React.CSSProperties
+}

package/src/components/FI/sessionFilters/sessionFilters.stories.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+
+import SessionFilters 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: 'FI/SessionFilters',
+    component: SessionFilters,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <SessionFilters {...args} />
+
+export const Filters = Template.bind({})
+Filters.args = {
+    labelFilters: 'Filtros:',
+    labelSelectItens: 'Escolha abaixo:',
+    textDeleteFilter: 'Excluir filtro',
+    style: {backgroundColor: '#ebebeb'} ,
+    textMultipleSelected: 'itens selecionados',
+    textSingleSelected: 'item selecionado',
+    selectedFilter: 'businessId',
+    selectedFilterContentList: [
+        {
+            title: 'Missão 1: Marte - Definição do Problema',
+            id: '1',
+        },
+        {
+            title: 'Missão 2: Júpiter - Levantamento das Hipóteses',
+            id: '2',
+        },
+        {
+            title: 'Missão 3: Saturno - Testes Realizados',
+            id: '3',
+        },
+        {
+            title: 'Missão 4: Urano - Resultados e Aprendizados',
+            id: '4',
+        },
+        {
+            title: 'Missão 5: Netuno - Próximos Passos',
+            id: '5',
+        }
+    ],
+    filterList: [
+        {
+            variant: 'myBusiness',
+            label: 'Minha empresa',
+            id: 'businessId',
+            handleClick: () => alert('Minha empresa!'),
+            
+        },
+        {
+            variant: 'mission',
+            label: 'Missão',
+            id: 'missionId',
+            handleClick: () => alert('Missão!'),
+        },
+        {
+            variant: 'trail',
+            label: 'Trilha',
+            id: 'trailId',
+            handleClick: () => alert('Trilha!'),
+        },
+    ],
+    textSelectedItems: "n itens selecionados",
+    textLabelSelect: 'Selecione:',
+    isVisibleSelect: true,
+    isVisiblePlaceholderSelect: true,
+    handleDeleteFilter: () => alert('delete'),
+    handleSelectedFilterData: (e) => console.log(e),
+    handleSelectedFilter: () => console.log('Filter Seleted')
+}

package/src/components/FI/sessionFilters/sessionFiltersStyle.ts

@@ -0,0 +1,86 @@
+import styled, { css } from 'styled-components'
+
+interface IFilterButton {
+    active: boolean
+}
+
+export const ButtonSessionFilters = styled.button<IFilterButton>`
+    max-width: 180px;
+    height: 72px;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding: 19px;
+    background-color: ${( props ) => props.active ? props.theme.colors.primary1 : props.theme.colors.shadeWhite};
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
+    border-radius: 8px;
+    font-family: PT Sans;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 21px;
+    cursor: pointer;
+    color: ${( props ) => props.active ? props.theme.colors.shadeWhite : props.theme.colors.neutralsGrey1};
+
+`
+
+export const ContainerFilter = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    width: fit-content;
+
+    color: ${({ theme }) => theme.colors.neutralsGrey1};
+    ${({ theme }) => theme.fonts.textMessageComponentsBodyRegular};
+    
+`
+
+export const ButtonList = styled.div`
+    display:flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+
+    margin-top: 8px;
+    margin-bottom: 24px;
+`
+
+export const SelectedItens = styled.div`
+    display:flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+
+    width: 100%;
+
+
+    ${({ theme }) => theme.fonts.textMessageComponentsBodyBold};
+
+    margin-top: 8px;
+    margin-bottom: 24px;
+
+    & :nth-child(1) {
+      z-index: 1;
+    }
+
+    & :nth-child(3) {
+        z-index: 1;
+      }
+
+    & :nth-child(4) {
+        background: #FFF;
+    }
+`
+
+export const LabelSelect = styled.div<{isVisible: Boolean}>`
+    padding-left: 20px;
+    margin-right: -115px;
+
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 18px;
+    color: #9C9C9C;
+
+`

package/src/components/FI/smallSRGBanner/index.tsx

@@ -0,0 +1,24 @@
+import Button from '@components/buttons'
+import * as Styles from './smallSRGBannerStyles'
+import {AddIcon} from '@shared/icons'
+
+interface ISmallSRGBanner {
+    style: React.CSSProperties
+    textButton: string
+    handleClick: () => void
+}
+
+export default function SmallSRGBanner( props : ISmallSRGBanner ){
+    return(
+        <Styles.Container style={{...props.style}} onClick={props.handleClick} >
+            <Styles.mask>   
+                <Styles.SrgLogo>
+                    <img src='https://i.gyazo.com/eb084ab35cbd9ad52b24148afba59950.png' alt='SRG Logo' />
+                </Styles.SrgLogo>
+                <Styles.Button>
+                    <Button variant='primary' label={props.textButton} startIcon={<AddIcon fill='#FFF' />} />
+                </Styles.Button>
+            </Styles.mask>
+        </Styles.Container>
+    )
+}

package/src/components/FI/smallSRGBanner/smallSRGBanner.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import SmallSRGBanner from './index'
+
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'FI/SmallSRGBanner',
+    component: SmallSRGBanner,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <SmallSRGBanner {...args} />
+
+export const normal = Template.bind({})
+normal.args = {
+    textButton: 'Criar novo desafio',
+    handleClick: () => alert('Clicado!'),
+}

package/src/components/FI/smallSRGBanner/smallSRGBannerStyles.ts

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    cursor: pointer;
+    border-radius: 8px;
+    width: 282px;
+    height: 336px;
+    background: url('https://i.gyazo.com/bc4a52062b79d16e1840ed274b436684.png');
+    
+`
+export const mask = styled.div`
+    background: linear-gradient(180deg, rgba(17, 17, 17, 0.6) 0%, #111111 100%);
+    width: 100%;
+    height: 100%;
+    padding: 48px 32px;
+    border-radius: 8px;
+`
+
+export const SrgLogo = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`
+
+export const Button = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 24px;
+`

package/src/components/IJ/ContentCycle/ContentCycle.d.ts

@@ -0,0 +1,56 @@
+import React from 'react'
+
+export type IContentCycleProps = {
+  /**
+   * @prop {string} id: Identificação
+   */
+  id: string
+  /**
+   * @prop {string} title: Titulo do conteudo
+   */
+  title: string
+  /**
+   * @prop {string} description: Descrição do conteudo
+   */
+  description: string
+  /**
+   * @prop {boolean} selected: Se o componente esta selecionado ou não
+   */
+  selected: boolean
+  /**
+   * @prop {(value?: boolean)=>void } onSelect: Func para selecionar o componente
+   */
+  onSelect: (value?: boolean) => void
+  /**
+   * @prop {string[]} listSkils: Lista de competencias relacionadas ao conteudo
+   */
+  listSkils?: string[]
+  /**
+   * @prop {string} urlPhoto: Foto/Banner de identificação do conteudo
+   */
+  urlPhoto?: string
+  /**
+   * @prop {string} urlVideo: link do teaser
+   */
+  urlVideo?: string
+  /**
+   * @prop {titleVideo} urlVideo: url do teaser
+   */
+  titleVideo?: string
+  /**
+   * @prop {boolean} started: Validação para saber se o aluno ja começou a consguir o conteudo
+   */
+  started?: boolean
+  /**
+   * @prop {number} progress: titulo do teaser
+   */
+  progress?: number
+  /**
+   * @prop {boolean} stepContent: Validação para saber se o passo de add conteudos ao ciclo foi finalizado
+   */
+  stepContent?: boolean
+  /**
+   * @prop {'video' | 'text' | 'podcast'} typeContent: Tipo do conteúdo Video, text ou podcast
+   */
+  typeContent: 'video' | 'text' | 'podcast'
+}

package/src/components/IJ/ContentCycle/ContentCycle.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import ContentCycle from './index'
+
+export default {
+  title: 'IJ/ContentCycle',
+  component: ContentCycle
+}
+
+const Template = (args) => <ContentCycle {...args} />
+
+export const normal = Template.bind({})
+normal.args = {
+  id: 'cttLQI01',
+  title: 'Liderança que inspira',
+  description: `Description bacon ipsum dolor amet landjaeger pastrami pork belly flank shankle ground round. 
+     Chicken tri-tip alcatra, pastrami buffalo pork chop shoulder drumstick ham hock landjaeger. Short
+     loin hamburger tri-tip, chuck flank pork chop doner porchetta.  Tenderloin tri-tip meatloaf cow brisket
+     `,
+  selected: false,
+  listSkils: ['Liderança', 'colaboração'],
+  urlPhoto: '',
+  urlVideo: 'https://vimeo.com/367756121',
+  titleVideo: 'Um video Legal',
+  progress: 0,
+  started: false,
+  onSelect: () => alert('selecionei'),
+  stepContent: false,
+  typeContent: 'video'
+}

package/src/components/IJ/ContentCycle/ContentCycleStyles.ts

@@ -0,0 +1,152 @@
+import styled from 'styled-components'
+
+interface IProgressProps {
+  progress: number
+}
+
+export const Container = styled.div`
+  width: auto;
+  height: 218px;
+  min-width: 720px;
+  padding: 25px 26px 20px 26px;
+  background: #ffffff;
+  border: 1px solid #bdbdbd;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 14px;
+  cursor: pointer;
+  &.selected {
+    background: #fce4cc;
+    border: 1px solid #ff8a15;
+  }
+  :hover {
+    background: #fcf3eb;
+    border: 1px solid #ff8a15;
+  }
+`
+
+export const Thumbnail = styled.section`
+  height: 100%;
+  width: 88px;
+  border-radius: 8px;
+
+  > img {
+    width: 100%;
+    height: 120px;
+    object-fit: cover;
+    object-position: 50% 50%;
+    border-radius: 8px;
+  }
+`
+export const Content = styled.section`
+  width: calc(100% - 88px - 14px);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+`
+
+export const Article = styled.article`
+  width: 100%;
+  height: 120px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+`
+export const Options = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const Title = styled.h3`
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 21px;
+  color: #6a3f86;
+`
+
+export const Description = styled.p`
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 110%;
+  color: #757575;
+  width: 60%;
+`
+export const SkillsList = styled.ul`
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  padding-left: 0;
+  gap: 8px;
+
+  > .title {
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    color: #757575;
+  }
+`
+export const Skill = styled.li`
+  text-decoration: none;
+  list-style: none;
+  text-transform: capitalize;
+  padding: 2px 4px;
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+
+  color: #ffffff;
+  background: #6a3f86;
+  border-radius: 4px;
+`
+export const ContentBarProgess = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  > p {
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 18px;
+    display: flex;
+    align-items: center;
+    color: #222222;
+  }
+`
+export const BarProgress = styled.div`
+  width: 160px;
+  height: 20px;
+  padding: 2px;
+  border: 1px solid #9c9c9c;
+  border-radius: 100px;
+  background: #e0e0e0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+`
+export const Progress = styled.span<IProgressProps>`
+  height: 100%;
+  background-color: #ff4d0d;
+  width: ${(p) => p.progress}%;
+  z-index: 2;
+  border-radius: 100px;
+`