frst-components 0.20.0

package/src/components/card-trail/cardTrailStyle.ts

@@ -0,0 +1,31 @@
+import styled from 'styled-components'
+import { Grid, Box, Avatar, CardContent } from '@mui/material/'
+
+
+export const HeaderImage = styled(Box)<{image, notstarted}>`
+    width: 320px;
+    height: 200px;
+    cursor: ${({notstarted}) => notstarted ? 'no-drop' : 'pointer'};
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url('${({image}) => image}');
+    filter: grayscale(${({notstarted}) => notstarted ? '1' : '0'});
+    background-size: contain;
+`
+
+export const MyBox = styled(Box)`
+    padding: 0px;
+    height: 245px;
+    padding-top: 12px;
+`
+
+export const MyCardContent = styled(CardContent)<{notstarted: any, hasmentor: any}>`
+    cursor: ${({notstarted}) => notstarted ? 'no-drop' : 'pointer'};
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: ${({hasmentor}) => hasmentor ? 'space-between' : 'flex-start'};
+`
+
+export const WrapperDate = styled.div<{notstarted}>`
+    display: ${({notstarted}) => notstarted ? 'flex' : 'none'};
+    margin-bottom: 7px;
+`

package/src/components/card-trail/index.tsx

@@ -0,0 +1,160 @@
+import * as React from 'react'
+import * as Styles from './moduleStyle'
+import { Grid } from '@mui/material/'
+import Avatar from '@components/avatar'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../theme'
+
+import { LinkedinIconMentor } from '@shared/icons'
+import { HeaderImage, MyCardContent, MyBox, WrapperDate } from './cardTrailStyle'
+
+interface Mentor {
+  avatar: string
+  name: string
+  linkedin: string
+}
+
+interface ModuleCardProps {
+  name: string
+  start: string
+  bannerImage: string
+  description: string
+  progress?: number | null
+  variant: string
+  mentor: Mentor
+  action: () => any
+  notStarted?: boolean
+  labels: any
+}
+
+export default function CardTrail(props: ModuleCardProps) {
+
+  const redirectToD2L = async () => {
+    if (props?.notStarted) return
+
+    let URL = await props.action()
+    return window.open(URL)
+  }
+
+  const getResumeDescription = (description, isResume) => {
+    if(isResume && description.length > 50)
+      return `${description.substring(0, 50)}...`
+    else 
+      return description
+  }
+
+  const getAlign = () => {
+    if(props.variant == 'primary' && props.notStarted) {
+      if(props.start || props.mentor?.name) return +true
+      if(!props.start || !props.mentor?.name) return +false
+    }
+    if(props.variant == 'primary' && !props.notStarted) {
+      if(props.start && !props.mentor?.name) return +false
+      if(!props.start && props.mentor?.name) return +false
+      if(!props.start && !props.mentor?.name) return +false
+    }
+
+    return +true
+  }
+
+  return (
+    <ThemeProvider theme={FRSTTheme}>
+      <Styles.CardContainer>
+        {!props?.notStarted && props.variant == 'primary' &&
+          <PercentageProgress 
+            progress={props.progress}
+          />
+        }
+        <HeaderImage
+          onClick={redirectToD2L}
+          image={props.bannerImage}
+          notstarted={+props?.notStarted}
+        />
+
+        <MyBox>{/* ((props.mentor?.name && props.start) || props.variant !== 'primary') */}
+          <MyCardContent 
+            notstarted={+props?.notStarted} 
+            hasmentor={getAlign()}
+          >
+            <Styles.TitleCard onClick={redirectToD2L} >{props.name}</Styles.TitleCard>
+            <Styles.TextDescription onClick={redirectToD2L} >
+              {props.description}
+            </Styles.TextDescription>
+            {props.variant == 'primary' ? 
+            <> 
+              { props.start &&
+                <WrapperDate onClick={redirectToD2L} notstarted={+props?.notStarted}>
+                  <b>{props.labels?.dateStart ? props.labels?.dateStart : 'Data de início'}:&nbsp;</b> 
+                  {props.start}
+                </WrapperDate>
+              }
+              { props.mentor?.name && 
+                <>
+                  <Styles.TitleMentoring onClick={redirectToD2L}>
+                  {props.labels?.mentor ? props.labels?.mentor : 'Mentor(a)'}
+                  </Styles.TitleMentoring>
+                  <MentorComponent
+                    mentor={props.mentor}
+                    notstarted={+props?.notStarted}
+                  /> 
+                </>
+                }
+            </> 
+            : 
+            <>
+            <WrapperDate onClick={redirectToD2L} notstarted={+true} style={{margin: '0px'}}>
+                <b>{props.labels?.dateStart ? props.labels?.dateStart : 'Data de início'}:&nbsp;</b> 
+                {props.start}
+              </WrapperDate>
+            </>
+            }
+          </MyCardContent>
+        </MyBox>
+      </Styles.CardContainer>
+    </ThemeProvider>
+  )
+}
+
+
+function MentorComponent(props) {
+  return <>
+      <Styles.GridFooter
+        container
+        spacing={2}
+        onClick={() => { props.mentor.linkedin && window.open(`${props.mentor.linkedin}`, '_blank') }}
+        style={{margin: '0px', cursor: 'pointer'}}
+      >
+            <Avatar
+              size="32px"
+              alt="Mentoring"
+              src={props.mentor?.avatar ? props.mentor.avatar : "https://certificates-mentor.s3.amazonaws.com/frst-avatar-default.png"}
+              disabled={props?.notStarted}
+            />
+            <Styles.GridNameMentoring item>
+              <Styles.NameMentoring>{props.mentor?.name}</Styles.NameMentoring>
+            </Styles.GridNameMentoring>
+            {props.mentor.linkedin && <LinkedinIconMentor/>}
+      </Styles.GridFooter>
+  </>
+}
+
+function PercentageProgress({progress}) {
+  return <>
+      { progress && (
+        <Styles.ProgressBox>
+          <Grid container spacing={0} alignItems="center">
+            {progress > 0 && 
+              <>
+                <Grid item xs={10}>
+                  <Styles.ProgressBar variant="determinate" value={progress} />
+                </Grid> 
+                <Grid item xs={2}>
+                  <Styles.ProgressLabel>{progress}%</Styles.ProgressLabel>
+                </Grid>
+              </>
+            }
+          </Grid>
+        </Styles.ProgressBox>
+      )}
+  </>
+}

package/src/components/card-trail/moduleStyle.ts

@@ -0,0 +1,98 @@
+import styled from 'styled-components'
+import { Grid, Box, Card, Typography, LinearProgress } from '@mui/material/'
+
+export const ProgressBox = styled(Box)`
+  z-index: 1 !important;
+  float: right !important;
+  padding-left: 10% !important;
+  padding-right: 10% !important;
+  margin-top: 160px !important;
+  position: relative !important;
+`
+
+export const ProgressBar = styled(LinearProgress)`
+  width: 128px !important;
+  height: 13px !important;
+  border-radius: 100px !important;
+  background-color: rgba(245, 94, 14, 0.5) !important;
+  & .MuiLinearProgress-bar{
+    padding-left: 10px !important;
+    background-color: ${({theme}) => theme.colors.primary1} !important;
+  }
+`
+export const ProgressLabel = styled.label`
+  display: inline-block !important;
+  width: 32px !important;
+  height: 16px !important;
+  font-size: 16px !important;
+  color: white !important;
+`
+
+export const GridNameMentoring = styled(Grid)`
+  padding: 0 !important;
+  max-width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+export const GridAvatar = styled(Grid)`
+  padding: 0 !important;
+`
+
+export const GridFooter = styled(Grid)`
+  display: flex;
+  align-items: center;
+  height: 50px;
+  margin: 0;
+  gap: 5px;
+`
+
+export const NameMentoring = styled.span`
+  font-size: 14px !important;
+`
+
+export const TitleMentoring = styled.span`
+  display: block !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+`
+
+export const TextDescription = styled(Typography)`
+  margin-top: 10px !important;
+  white-space: normal !important;
+  height: 101px !important;
+  overflow: hidden !important;
+  display: -webkit-box;
+  -webkit-line-clamp: 6; 
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  font-size: 15px !important;
+  line-height: 1.1 !important;
+`
+
+export const TitleCard = styled.div`
+  height: 32px !important;
+  font-size: 16px !important;
+  font-weight: bold !important;
+  white-space: normal !important;
+`
+
+export const CardContainer = styled(Card)`
+  max-width: 345px !important;
+  height: 445px !important;
+  width: 282px !important;
+  box-shadow: none !important;
+  border: 1px solid #c4c4c4;
+
+  background: #FBFBFB;
+  border: 1px solid #E8E8E8;
+  box-sizing: border-box !important;
+  border-radius: 4px !important;
+  display: inline-block !important;
+  margin-right: 24px !important;
+  margin-bottom: 24px !important;
+
+  &:hover {
+    border: 1px solid ${({theme}) => theme.colors.secondary2} !important;
+  }
+`

package/src/components/card-trail-carousel/cardsTrailsCarousel.d.ts

@@ -0,0 +1,13 @@
+import React from "react"
+
+export interface ICardTrailCarolsel {
+    objectCards?: any,
+    marginsArrowButton?: number,
+    sizeArrowButton?: number,
+    horizontalMarginInternScroll?: string,
+    positionArrowButton?: string,    
+    marginTopArrrowButton?: string,    
+    move?:any,
+    isVisibleButtons?: boolean,
+    label?: any
+}

package/src/components/card-trail-carousel/cardsTrailsCarousel.stories.tsx

@@ -0,0 +1,152 @@
+import React from 'react'
+import CardTrailCarousel from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Base/Card Trail Carousel',
+    component: CardTrailCarousel,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <CardTrailCarousel {...args} />
+
+export const primary = Template.bind({})
+primary.args = {
+    marginsArrowButton: 50,
+    sizeArrowButton: 80,
+    horizontalMarginInternScroll: '50px',
+    
+    objectCards: [
+        {
+            variant: 'primary',
+            name: 'Primeiros passos',
+            start: '10/10/2022',
+            description: 'Entenda como funciona o Agile Learning Experience FRST e comece sua jornada de aprendizado.',
+            mentor: {
+                name: 'Gabriela Duarte',
+                linkedin: 'urlLinkedin'
+            },
+            progress: 30,
+            action: () => alert('redirect to'),
+            notStarted: false,
+            bannerImage: 'https://frst-api-student-group-prod.s3.amazonaws.com/media/product/module/cover-image/25/Inovacao_Customer_Centric.jpg?AWSAccessKeyId=ASIAYR3BIRGASFQHZ4R3&Signature=wvaGy%2Bv5tRqx%2BdS4eu0uzBKmFZw%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEJf%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLWVhc3QtMSJGMEQCIGqz84mztgCLzY6IfrckAYVf3l%2FgLZSqM49QjlkFNeCqAiB2IbSdsnFi9JKsk0g%2Fg8eHPgBNALlrj5JEPn4y5%2FWEhCqLAwhfEAEaDDU4ODA3NzYzMTg3MyIMFS3FcLYdFnHvEr6ZKugCPtUlTfjVs%2B8sbXIyyv1lD0Db7EQuTGYDawHWouNxtwBf7PYIBzcY3upravUZftxsvHb9lGDzCQ3KAjU4R1x4KCERcHHw3UYq5hgFz4nzPQQbGxCcq8IcfalyXFaXnCSwzdFbealGANch%2B8fjmA6HycrYgaoNeIA86KWe%2B9SSgrHReZjIBUtQwUdSI8leapS1mmq5W1jASu%2BTjxKSTAfiOybZ%2FyKms%2B3vK8RJZGihGzPdTKCPhagzHeTd3PvfeUl4xzsVrJLnypq9hc1IqbvMak46AZ5VwO5Tx1XIpFI70GXNZPripwywwn5dy%2FvIYtrL1BPRSY8L9DvxDSbgMPYi0%2BrZHBztdcMbxuK6WSN4wX0en441p30F82PO0gIooCSvrc1GhrzW8FMz5JOLB1Ygk5eTkYcN7imtPvFP4tnG%2Fjo0h0PZ8MRg2khnQuAnfALa8kaDM1mvGRVlxBjb5zpNGeGlLckCwcahMIrTkJoGOp4BcKnXmAfb1x70b5GvEmVUONGx5wTRLlcszjj%2BUaJGGoLuSIMvTetUw9i%2BON8R0hLDlkzX8mn2Esmc%2Fr4PtLt8i%2BrKEA%2BhvNHAy%2FFX4dA87FIblfX79fwztjI1tgAWSfLz9VZFgF7i7fZjbksoVewtHN2NoM3gTMUIVZE6bNiY9Fmsk92DQzAxLvYoO8MkooDfKqRAaXB2B12y7wIt91I%3D&Expires=1665416214',
+            labels: {
+                mentor: 'Mentor(a)',
+                dateStart: 'Data de Início'
+            }
+        },
+        {
+            variant: 'primary',
+            name: 'Liderança que Inspira',
+            start: '01/01/2021',
+            description: 'Mais do que apenas bater metas, o líder inspirador...',
+            mentor: {
+                name: 'Maria Arrazi',
+                linkedin: 'urlLinkedin'
+            },
+            action: () => alert('redirect to'),
+            notStarted: true,
+            bannerImage: 'https://frst-api-student-group-prod.s3.amazonaws.com/media/product/module/cover-image/25/Inovacao_Customer_Centric.jpg?AWSAccessKeyId=ASIAYR3BIRGASFQHZ4R3&Signature=wvaGy%2Bv5tRqx%2BdS4eu0uzBKmFZw%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEJf%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLWVhc3QtMSJGMEQCIGqz84mztgCLzY6IfrckAYVf3l%2FgLZSqM49QjlkFNeCqAiB2IbSdsnFi9JKsk0g%2Fg8eHPgBNALlrj5JEPn4y5%2FWEhCqLAwhfEAEaDDU4ODA3NzYzMTg3MyIMFS3FcLYdFnHvEr6ZKugCPtUlTfjVs%2B8sbXIyyv1lD0Db7EQuTGYDawHWouNxtwBf7PYIBzcY3upravUZftxsvHb9lGDzCQ3KAjU4R1x4KCERcHHw3UYq5hgFz4nzPQQbGxCcq8IcfalyXFaXnCSwzdFbealGANch%2B8fjmA6HycrYgaoNeIA86KWe%2B9SSgrHReZjIBUtQwUdSI8leapS1mmq5W1jASu%2BTjxKSTAfiOybZ%2FyKms%2B3vK8RJZGihGzPdTKCPhagzHeTd3PvfeUl4xzsVrJLnypq9hc1IqbvMak46AZ5VwO5Tx1XIpFI70GXNZPripwywwn5dy%2FvIYtrL1BPRSY8L9DvxDSbgMPYi0%2BrZHBztdcMbxuK6WSN4wX0en441p30F82PO0gIooCSvrc1GhrzW8FMz5JOLB1Ygk5eTkYcN7imtPvFP4tnG%2Fjo0h0PZ8MRg2khnQuAnfALa8kaDM1mvGRVlxBjb5zpNGeGlLckCwcahMIrTkJoGOp4BcKnXmAfb1x70b5GvEmVUONGx5wTRLlcszjj%2BUaJGGoLuSIMvTetUw9i%2BON8R0hLDlkzX8mn2Esmc%2Fr4PtLt8i%2BrKEA%2BhvNHAy%2FFX4dA87FIblfX79fwztjI1tgAWSfLz9VZFgF7i7fZjbksoVewtHN2NoM3gTMUIVZE6bNiY9Fmsk92DQzAxLvYoO8MkooDfKqRAaXB2B12y7wIt91I%3D&Expires=1665416214',
+            labels: {
+                mentor: 'Mentor(a)',
+                dateStart: 'Data de Início'
+            }
+        },
+    ]
+}
+
+
+export const primaryMultiple = Template.bind({})
+primaryMultiple.args = {
+    marginsArrowButton: 50,
+    sizeArrowButton: 80,
+    horizontalMarginInternScroll: '50px',
+    objectCards: [
+        {
+            variant: 'primary',
+            name: 'Primeiros passos',
+            start: '10/10/2022',
+            description: 'Entenda como funciona o Agile Learning Experience FRST e comece sua jornada de aprendizado.',
+            mentor: {
+                name: 'Gabriela Duarte',
+                linkedin: 'urlLinkedin'
+            },
+            progress: 30,
+            action: () => alert('redirect to'),
+            notStarted: false,
+            bannerImage: 'https://frst-api-student-group-prod.s3.amazonaws.com/media/product/module/cover-image/25/Inovacao_Customer_Centric.jpg?AWSAccessKeyId=ASIAYR3BIRGASFQHZ4R3&Signature=wvaGy%2Bv5tRqx%2BdS4eu0uzBKmFZw%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEJf%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLWVhc3QtMSJGMEQCIGqz84mztgCLzY6IfrckAYVf3l%2FgLZSqM49QjlkFNeCqAiB2IbSdsnFi9JKsk0g%2Fg8eHPgBNALlrj5JEPn4y5%2FWEhCqLAwhfEAEaDDU4ODA3NzYzMTg3MyIMFS3FcLYdFnHvEr6ZKugCPtUlTfjVs%2B8sbXIyyv1lD0Db7EQuTGYDawHWouNxtwBf7PYIBzcY3upravUZftxsvHb9lGDzCQ3KAjU4R1x4KCERcHHw3UYq5hgFz4nzPQQbGxCcq8IcfalyXFaXnCSwzdFbealGANch%2B8fjmA6HycrYgaoNeIA86KWe%2B9SSgrHReZjIBUtQwUdSI8leapS1mmq5W1jASu%2BTjxKSTAfiOybZ%2FyKms%2B3vK8RJZGihGzPdTKCPhagzHeTd3PvfeUl4xzsVrJLnypq9hc1IqbvMak46AZ5VwO5Tx1XIpFI70GXNZPripwywwn5dy%2FvIYtrL1BPRSY8L9DvxDSbgMPYi0%2BrZHBztdcMbxuK6WSN4wX0en441p30F82PO0gIooCSvrc1GhrzW8FMz5JOLB1Ygk5eTkYcN7imtPvFP4tnG%2Fjo0h0PZ8MRg2khnQuAnfALa8kaDM1mvGRVlxBjb5zpNGeGlLckCwcahMIrTkJoGOp4BcKnXmAfb1x70b5GvEmVUONGx5wTRLlcszjj%2BUaJGGoLuSIMvTetUw9i%2BON8R0hLDlkzX8mn2Esmc%2Fr4PtLt8i%2BrKEA%2BhvNHAy%2FFX4dA87FIblfX79fwztjI1tgAWSfLz9VZFgF7i7fZjbksoVewtHN2NoM3gTMUIVZE6bNiY9Fmsk92DQzAxLvYoO8MkooDfKqRAaXB2B12y7wIt91I%3D&Expires=1665416214',
+            labels: {
+                mentor: 'Mentor(a)',
+                dateStart: 'Data de Início'
+            }
+        },
+        {
+            variant: 'primary',
+            name: 'Liderança que Inspira',
+            start: '01/01/2021',
+            description: 'Mais do que apenas bater metas, o líder inspirador...',
+            mentor: {
+                name: 'Maria Arrazi',
+                linkedin: 'urlLinkedin'
+            },
+            action: () => alert('redirect to'),
+            notStarted: true,
+            bannerImage: 'https://frst-api-student-group-prod.s3.amazonaws.com/media/product/module/cover-image/25/Inovacao_Customer_Centric.jpg?AWSAccessKeyId=ASIAYR3BIRGASFQHZ4R3&Signature=wvaGy%2Bv5tRqx%2BdS4eu0uzBKmFZw%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEJf%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLWVhc3QtMSJGMEQCIGqz84mztgCLzY6IfrckAYVf3l%2FgLZSqM49QjlkFNeCqAiB2IbSdsnFi9JKsk0g%2Fg8eHPgBNALlrj5JEPn4y5%2FWEhCqLAwhfEAEaDDU4ODA3NzYzMTg3MyIMFS3FcLYdFnHvEr6ZKugCPtUlTfjVs%2B8sbXIyyv1lD0Db7EQuTGYDawHWouNxtwBf7PYIBzcY3upravUZftxsvHb9lGDzCQ3KAjU4R1x4KCERcHHw3UYq5hgFz4nzPQQbGxCcq8IcfalyXFaXnCSwzdFbealGANch%2B8fjmA6HycrYgaoNeIA86KWe%2B9SSgrHReZjIBUtQwUdSI8leapS1mmq5W1jASu%2BTjxKSTAfiOybZ%2FyKms%2B3vK8RJZGihGzPdTKCPhagzHeTd3PvfeUl4xzsVrJLnypq9hc1IqbvMak46AZ5VwO5Tx1XIpFI70GXNZPripwywwn5dy%2FvIYtrL1BPRSY8L9DvxDSbgMPYi0%2BrZHBztdcMbxuK6WSN4wX0en441p30F82PO0gIooCSvrc1GhrzW8FMz5JOLB1Ygk5eTkYcN7imtPvFP4tnG%2Fjo0h0PZ8MRg2khnQuAnfALa8kaDM1mvGRVlxBjb5zpNGeGlLckCwcahMIrTkJoGOp4BcKnXmAfb1x70b5GvEmVUONGx5wTRLlcszjj%2BUaJGGoLuSIMvTetUw9i%2BON8R0hLDlkzX8mn2Esmc%2Fr4PtLt8i%2BrKEA%2BhvNHAy%2FFX4dA87FIblfX79fwztjI1tgAWSfLz9VZFgF7i7fZjbksoVewtHN2NoM3gTMUIVZE6bNiY9Fmsk92DQzAxLvYoO8MkooDfKqRAaXB2B12y7wIt91I%3D&Expires=1665416214',
+            labels: {
+                mentor: 'Mentor(a)',
+                dateStart: 'Data de Início'
+            }
+        },
+        {
+            variant: 'primary',
+            name: 'Design-Driven Innovation',
+            start: '10/10/2022',
+            description: 'Entenda como funciona o Agile Learning Experience FRST e comece sua jornada de aprendizado.',
+            mentor: {
+                name: 'Diego Silverio',
+                linkedin: 'urlLinkedin'
+            },
+            action: () => alert('redirect to'),
+            notStarted: true,
+            bannerImage: 'https://frst-api-student-group-prod.s3.amazonaws.com/media/product/module/cover-image/14/DESIGN-DRIVEN_INNOVATION.jpg?AWSAccessKeyId=ASIAYR3BIRGA7XQ6PKZC&Signature=wWEmx%2BMM%2FubHeWPoUn0n%2FehafOA%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEJn%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLWVhc3QtMSJHMEUCIHpIo4d7ZoyjzmqbBJSh%2Flsc5QMh6fxmzoyBaezwosiHAiEAw7Rf%2Fh%2Fk3iZEwd24lxhkHTPlhcRZIbJ4NxoMbn9KnMAqiwMIYhABGgw1ODgwNzc2MzE4NzMiDKjzDmspIQFnyTAX6yroAtX5iHwWKfrJLcJxjxcC6a%2BFT%2FBhqrnranep0jUbKQ8D06hlGH7%2BPZMVkSa%2BZf0%2FMZ3WZePjTy29M86MXeg%2BBSIAXaCpOcynItE%2BSS6EC%2BIzdatMgpsHc9EHjrrybVsbmX%2FF0RbJWCk2ge%2FpussLZQb3irIiMkfQZ1LAyXy50FcJHoHPfJVYnhWoOcZ%2FAUIbGAJ0u9DXOY0FVJcnB%2FgfnGzrCxLTkurgGfIZjnzKZx6x3U85zi0emHUaV7s%2FG5tjHltrHnElxChaYna2k%2FmNr5WgSLKo09dGGsott4SM03wc5AwQuIbaHyqd4yva10%2FEkA7dGhQZC2UGlcaCxxr83sRcsYmkDZASQWi1iuLIpwT8V5Gx8JmSTMKQSnVsTUDMCXisJfdcOW2s4UsXfxCMCSnokLd28vfZEdjb1%2Fb4uWiLAebFcR3LNevNFMxZB%2FLn2Fk0svMQoUiBMSjVgCmeabnkjv%2FUu3ZPczDvmpGaBjqdAUJCHxYq%2F%2BwWV9dy3pbLQS6P2Lz92QHxq6hdB5we4MuOPiMKaQR0uSPW0rC7xxBDVszlagalKqDiFTGhVGvT1rn5pjulZ7e0QQpF48%2BnIW89ZvFtXIPTtAsnKOl%2BAQ%2F3LnL0%2FB3AnL8AbKohr6yv4miRRj6WsKIwE8U1zY%2F5LjImSJ0E5dBjCFPoip6M%2BdIs1TGw8%2BYOgvq2M6N5fLs%3D&Expires=1665430971',
+            labels: {
+                mentor: 'Mentor(a)',
+                dateStart: 'Data de Início'
+            }
+        },
+        {
+            variant: 'primary',
+            name: 'Liderança que Inspira',
+            start: '01/01/2021',
+            description: 'Mais do que apenas bater metas, o líder inspirador...',
+            mentor: {
+                name: 'Maria Arrazi',
+                linkedin: 'urlLinkedin'
+            },
+            action: () => alert('redirect to'),
+            notStarted: true,
+            bannerImage: 'https://frst-api-student-group-prod.s3.amazonaws.com/media/product/module/cover-image/25/Inovacao_Customer_Centric.jpg?AWSAccessKeyId=ASIAYR3BIRGASFQHZ4R3&Signature=wvaGy%2Bv5tRqx%2BdS4eu0uzBKmFZw%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEJf%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLWVhc3QtMSJGMEQCIGqz84mztgCLzY6IfrckAYVf3l%2FgLZSqM49QjlkFNeCqAiB2IbSdsnFi9JKsk0g%2Fg8eHPgBNALlrj5JEPn4y5%2FWEhCqLAwhfEAEaDDU4ODA3NzYzMTg3MyIMFS3FcLYdFnHvEr6ZKugCPtUlTfjVs%2B8sbXIyyv1lD0Db7EQuTGYDawHWouNxtwBf7PYIBzcY3upravUZftxsvHb9lGDzCQ3KAjU4R1x4KCERcHHw3UYq5hgFz4nzPQQbGxCcq8IcfalyXFaXnCSwzdFbealGANch%2B8fjmA6HycrYgaoNeIA86KWe%2B9SSgrHReZjIBUtQwUdSI8leapS1mmq5W1jASu%2BTjxKSTAfiOybZ%2FyKms%2B3vK8RJZGihGzPdTKCPhagzHeTd3PvfeUl4xzsVrJLnypq9hc1IqbvMak46AZ5VwO5Tx1XIpFI70GXNZPripwywwn5dy%2FvIYtrL1BPRSY8L9DvxDSbgMPYi0%2BrZHBztdcMbxuK6WSN4wX0en441p30F82PO0gIooCSvrc1GhrzW8FMz5JOLB1Ygk5eTkYcN7imtPvFP4tnG%2Fjo0h0PZ8MRg2khnQuAnfALa8kaDM1mvGRVlxBjb5zpNGeGlLckCwcahMIrTkJoGOp4BcKnXmAfb1x70b5GvEmVUONGx5wTRLlcszjj%2BUaJGGoLuSIMvTetUw9i%2BON8R0hLDlkzX8mn2Esmc%2Fr4PtLt8i%2BrKEA%2BhvNHAy%2FFX4dA87FIblfX79fwztjI1tgAWSfLz9VZFgF7i7fZjbksoVewtHN2NoM3gTMUIVZE6bNiY9Fmsk92DQzAxLvYoO8MkooDfKqRAaXB2B12y7wIt91I%3D&Expires=1665416214',
+            labels: {
+                mentor: 'Mentor(a)',
+                dateStart: 'Data de Início'
+            }
+        },
+        {
+            variant: 'primary',
+            name: 'Design-Driven Innovation',
+            start: '10/10/2022',
+            description: 'Entenda como funciona o Agile Learning Experience FRST e comece sua jornada de aprendizado.',
+            mentor: {
+                name: 'Diego Silverio',
+                linkedin: 'urlLinkedin'
+            },
+            action: () => alert('redirect to'),
+            notStarted: true,
+            bannerImage: 'https://frst-api-student-group-prod.s3.amazonaws.com/media/product/module/cover-image/14/DESIGN-DRIVEN_INNOVATION.jpg?AWSAccessKeyId=ASIAYR3BIRGA7XQ6PKZC&Signature=wWEmx%2BMM%2FubHeWPoUn0n%2FehafOA%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEJn%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLWVhc3QtMSJHMEUCIHpIo4d7ZoyjzmqbBJSh%2Flsc5QMh6fxmzoyBaezwosiHAiEAw7Rf%2Fh%2Fk3iZEwd24lxhkHTPlhcRZIbJ4NxoMbn9KnMAqiwMIYhABGgw1ODgwNzc2MzE4NzMiDKjzDmspIQFnyTAX6yroAtX5iHwWKfrJLcJxjxcC6a%2BFT%2FBhqrnranep0jUbKQ8D06hlGH7%2BPZMVkSa%2BZf0%2FMZ3WZePjTy29M86MXeg%2BBSIAXaCpOcynItE%2BSS6EC%2BIzdatMgpsHc9EHjrrybVsbmX%2FF0RbJWCk2ge%2FpussLZQb3irIiMkfQZ1LAyXy50FcJHoHPfJVYnhWoOcZ%2FAUIbGAJ0u9DXOY0FVJcnB%2FgfnGzrCxLTkurgGfIZjnzKZx6x3U85zi0emHUaV7s%2FG5tjHltrHnElxChaYna2k%2FmNr5WgSLKo09dGGsott4SM03wc5AwQuIbaHyqd4yva10%2FEkA7dGhQZC2UGlcaCxxr83sRcsYmkDZASQWi1iuLIpwT8V5Gx8JmSTMKQSnVsTUDMCXisJfdcOW2s4UsXfxCMCSnokLd28vfZEdjb1%2Fb4uWiLAebFcR3LNevNFMxZB%2FLn2Fk0svMQoUiBMSjVgCmeabnkjv%2FUu3ZPczDvmpGaBjqdAUJCHxYq%2F%2BwWV9dy3pbLQS6P2Lz92QHxq6hdB5we4MuOPiMKaQR0uSPW0rC7xxBDVszlagalKqDiFTGhVGvT1rn5pjulZ7e0QQpF48%2BnIW89ZvFtXIPTtAsnKOl%2BAQ%2F3LnL0%2FB3AnL8AbKohr6yv4miRRj6WsKIwE8U1zY%2F5LjImSJ0E5dBjCFPoip6M%2BdIs1TGw8%2BYOgvq2M6N5fLs%3D&Expires=1665430971',
+            labels: {
+                mentor: 'Mentor(a)',
+                dateStart: 'Data de Início'
+            }
+        },
+    ]
+}

package/src/components/card-trail-carousel/index.tsx

@@ -0,0 +1,47 @@
+import React,{ useState, useEffect } from 'react'
+import '../../shared/global.css'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../theme'
+import {ICardTrailCarolsel} from './cardsTrailsCarousel'
+
+import ScrollContainer from '@components/scroll-container'
+import CardTrail from '@components/card-trail'
+
+export default function CardTrailCarousel({ objectCards, marginsArrowButton, move, isVisibleButtons,
+    sizeArrowButton, horizontalMarginInternScroll, positionArrowButton, marginTopArrrowButton, label }: ICardTrailCarolsel ) {
+    
+    function renderCard(item, index) {
+
+        return <CardTrail
+                key={index}
+                variant={item.variant}
+                name={item.name}
+                progress={item.progress}
+                start={item.start}
+                description={item.description}
+                mentor={item.mentor}
+                action={item.action}
+                notStarted={item.notStarted}
+                bannerImage={item.bannerImage}
+                labels={label ? label : { mentor: 'Mentor(a)', dateStart: "Data de Início"}}
+            />
+    }
+
+    return (
+        <ThemeProvider theme={FRSTTheme}>
+            <ScrollContainer 
+                stepMove={move ? move : 380} 
+                isVisibleControlsButtons={isVisibleButtons} 
+                sizeArrowButton={sizeArrowButton} 
+                marginsArrowButton={marginsArrowButton}
+                horizontalMarginInternScroll={horizontalMarginInternScroll}
+                positionArrowButton={positionArrowButton ? positionArrowButton : ''}
+                marginTopArrrowButton={marginTopArrrowButton ? marginTopArrrowButton :'20px'}
+            >
+                <div>
+                    { objectCards.map(renderCard) }
+                </div>
+            </ScrollContainer>
+        </ThemeProvider>
+    )
+}

package/src/components/cardLT/AvatarWithInfo/avatarWithInfo.module.css

@@ -0,0 +1,20 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=VT323&display=swap');
+
+.container {
+  /* width: 100%; */
+  height: fit-content;
+  padding: 4px 16px 4px 4px;
+  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  border: 1px solid #BDBDBD;
+  border-radius: 25px;
+  background-color: #FFF;
+  font-size: 16px;
+  
+  flex-direction: row;
+  flex-wrap: nowrap;
+  font-family: 'Work Sans';
+  flex-wrap: wrap;
+}

package/src/components/cardLT/AvatarWithInfo/avatarWithInfo.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import AvatarWithInfo from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Card LT/Avatar With Info',
+    component: AvatarWithInfo,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <AvatarWithInfo {...args} />
+
+export const Teste1 = Template.bind({})
+Teste1.args = {
+  nomeCompleto: 'Roberto Lima',
+  cargo: 'Estudante / Universitário(a)'
+}

package/src/components/cardLT/AvatarWithInfo/index.tsx

@@ -0,0 +1,55 @@
+
+import React, { useEffect, useState } from 'react'
+import style from './avatarWithInfo.module.css'
+import Avatar from '../../avatar'
+import Vector from './vector'
+
+
+///-----------------------------------------
+/// Interface do Componente
+interface AvatarWithInfoParams {
+  /**
+   * @prop {string} fotoAvatar: Foto do perfil do usuario
+   */
+   fotoAvatar ?: string;
+  /**
+   * @prop {string} nomeCompleto: nome completo do usuario
+   */
+   nomeCompleto : string;
+  /**
+   * @prop {string} cargo: Cargo do usuario
+   */
+   cargo : string;
+  /**
+   * @prop {React.CSSProperties} style: Styles de CSS adicional
+   */  
+  style?: React.CSSProperties;
+  
+}
+
+///-----------------------------------------
+/// Componente
+
+
+
+/**
+ * 
+ * @componente Planet: Componente responsável por gerenciar os controles dos steps das missões
+ */
+export default function AvatarWithInfo(props: AvatarWithInfoParams) {
+
+
+  return (
+
+    <>    
+      <div className={style.container} style={{...props.style }}>
+
+        <Avatar size='40px' src={props.fotoAvatar}/>
+        <span style={{fontWeight:600, marginLeft: 8, marginRight: 4}}>{props.nomeCompleto}</span> {props.cargo ? <Vector /> : ''} <span style={{fontWeight:400, marginLeft: 4, marginRight: 8, textAlign: 'center'}}>{props.cargo}</span>
+               
+      </div>
+    </>
+  )
+
+
+}

package/src/components/cardLT/AvatarWithInfo/vector.tsx

@@ -0,0 +1,25 @@
+
+///-----------------------------------------
+/// Interface do Componente
+interface VectorIconParam {
+    color?: string;  
+  }
+  
+  ///-----------------------------------------
+  /// Componente
+  
+  /**
+   * 
+   * @componente 
+   */
+  export default function Vector(props: VectorIconParam) {
+  
+    return (
+      <>    
+        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M2 4C1.46957 4 0.960859 3.78929 0.585786 3.41421C0.210713 3.03914 0 2.53043 0 2C0 1.46957 0.210713 0.960859 0.585786 0.585786C0.960859 0.210713 1.46957 0 2 0C2.53043 0 3.03914 0.210713 3.41421 0.585786C3.78929 0.960859 4 1.46957 4 2C4 2.53043 3.78929 3.03914 3.41421 3.41421C3.03914 3.78929 2.53043 4 2 4Z" fill={props.color ? props.color : "#757575"}/>
+        </svg>
+
+      </>
+    )
+  }