frst-components 0.20.0

package/src/components/calendar/calendar.stories.tsx

@@ -0,0 +1,156 @@
+import React from 'react'
+
+import Calendar from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Hall/Calendar',
+    component: Calendar,
+    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+    // argTypes: {
+    //     backgroundColor: { control: 'color' },
+    // },
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <Calendar {...args} />
+
+export const Loading = Template.bind({})
+Loading.args = {
+    loading: true,
+    short: false,
+    trails: [],
+}
+
+export const Empty = Template.bind({})
+Empty.args = {
+    loading: false,
+    short: false,
+    showFullPageAction: () => { alert('Redirecting to Fullpage') },
+    trails: [],
+}
+
+
+export const ActiveSingle = Template.bind({})
+ActiveSingle.args = {
+    loading: false,
+    short: true,
+    showFullPageAction: () => { alert('Redirecting to Fullpage') },
+    trails: [{
+        id: 1,
+        moduleID: 1,
+        name: "Atingindo Resultados Excepcionais",
+        nextEvent: { weekday: 5, hour: '17:00' },
+        joinEventAction: () => { alert('Join event action') },
+        events: [
+            { id: 0, title: 'Evento 00', day: 1, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 1, title: 'Evento 01', day: 2, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 2, title: 'Evento 02', day: 3, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 3, title: 'Evento 03', day: 4, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 4, title: 'Evento 04', day: 5, month: 1, hour: '17:00', weekday: 1, present: false, completed: false, today: true },
+            { id: 5, title: 'Evento 05', day: 6, month: 1, hour: '17:00', weekday: 1, present: false, completed: false, today: false },
+            { id: 6, title: 'Evento 06', day: 7, month: 1, hour: '17:00', weekday: 1, present: false, completed: false, today: false },
+        ],
+    }],
+}
+
+export const ActiveMultiple = Template.bind({})
+ActiveMultiple.args = {
+    loading: false,
+    short: true,
+    showFullPageAction: () => { alert('Redirecting to Fullpage') },
+    trails: [{
+        id: 1,
+        moduleID: 1,
+        name: "Atingindo Resultados Excepcionais",
+        events: [
+            { id: 0, title: 'Evento 00', day: 1, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 1, title: 'Evento 01', day: 2, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 2, title: 'Evento 02', day: 3, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 3, title: 'Evento 03', day: 4, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 4, title: 'Evento 04', day: 5, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 5, title: 'Evento 05', day: 6, month: 1, hour: '17:00', weekday: 1, present: false, completed: false, today: true },
+            { id: 6, title: 'Evento 06', day: 7, month: 1, hour: '17:00', weekday: 1, present: false, completed: false, today: false },
+        ],
+        nextEvent: { weekday: 5, hour: '17:00' },
+        joinEventAction: () => { alert('Join event 5 action') },
+    }, {
+        id: 2,
+        moduleID: 2,
+        name: "O Líder Que Bate Metas",
+        events: [
+            { id: 0, title: 'Evento 00', day: 1, month: 2, hour: '17:00', weekday: 2, present: false, completed: true, today: false },
+            { id: 1, title: 'Evento 01', day: 2, month: 2, hour: '17:00', weekday: 2, present: false, completed: true, today: false },
+            { id: 2, title: 'Evento 02', day: 3, month: 2, hour: '17:00', weekday: 2, present: false, completed: false, today: true },
+            { id: 3, title: 'Evento 03', day: 4, month: 2, hour: '17:00', weekday: 2, present: false, completed: false, today: false },
+            { id: 4, title: 'Evento 04', day: 31, month: 2, hour: '17:00', weekday: 2, present: false, completed: false, today: false },
+        ],
+        nextEvent: { weekday: 3, hour: '17:00' },
+        joinEventAction: () => { alert('Join event 2 action') },
+    }],
+}
+
+export const NoEventsSingle = Template.bind({})
+NoEventsSingle.args = {
+    loading: false,
+    short: true,
+    showFullPageAction: () => { alert('Redirecting to Fullpage') },
+    trails: [{
+        id: 1,
+        moduleID: 1,
+        name: "Atingindo Resultados Excepcionais",
+        nextEvent: null,
+        joinEventAction: null,
+        events: [
+            { id: 0, title: 'Evento 00', day: 1, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 1, title: 'Evento 01', day: 2, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 2, title: 'Evento 02', day: 3, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 3, title: 'Evento 03', day: 4, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 4, title: 'Evento 04', day: 5, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 5, title: 'Evento 05', day: 6, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 6, title: 'Evento 06', day: 7, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 7, title: 'Evento 07', day: 7, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 8, title: 'Evento 08', day: 8, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 9, title: 'Evento 09', day: 9, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 10, title: 'Evento 10', day: 10, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 11, title: 'Evento 11', day: 11, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 12, title: 'Evento 12', day: 12, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+        ],
+    }],
+}
+
+export const NoEventsMultiple = Template.bind({})
+NoEventsMultiple.args = {
+    loading: false,
+    short: true,
+    showFullPageAction: () => { alert('Redirecting to Fullpage') },
+    trails: [{
+        id: 1,
+        moduleID: 1,
+        name: "Atingindo Resultados Excepcionais",
+        nextEvent: null,
+        joinEventAction: null,
+        events: [
+            { id: 0, title: 'Evento 00', day: 1, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 1, title: 'Evento 01', day: 2, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 2, title: 'Evento 02', day: 3, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 3, title: 'Evento 03', day: 4, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 4, title: 'Evento 04', day: 5, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 5, title: 'Evento 05', day: 6, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+            { id: 6, title: 'Evento 06', day: 7, month: 1, hour: '17:00', weekday: 1, present: false, completed: true, today: false },
+        ],
+    }, {
+        id: 2,
+        moduleID: 2,
+        name: "O Líder Que Bate Metas",
+        nextEvent: null,
+        joinEventAction: null,
+        events: [
+            { id: 0, title: 'Evento 00', day: 1, month: 2, hour: '17:00', weekday: 2, present: false, completed: true, today: false },
+            { id: 1, title: 'Evento 01', day: 2, month: 2, hour: '17:00', weekday: 2, present: false, completed: true, today: false },
+            { id: 2, title: 'Evento 02', day: 3, month: 2, hour: '17:00', weekday: 2, present: false, completed: true, today: false },
+            { id: 3, title: 'Evento 03', day: 4, month: 2, hour: '17:00', weekday: 2, present: false, completed: true, today: false },
+            { id: 4, title: 'Evento 04', day: 31, month: 2, hour: '17:00', weekday: 2, present: false, completed: true, today: false },
+        ],
+    }],
+}

package/src/components/calendar/calendarStyle.ts

@@ -0,0 +1,209 @@
+import styled from 'styled-components'
+import Card from '@mui/material/Card'
+import Stepper from '@mui/material/Stepper'
+import FormControl from '@mui/material/FormControl'
+import Select from '@mui/material/Select'
+import CheckIcon from '@mui/icons-material/Check'
+import LoginIcon from '@mui/icons-material/Login'
+import Box from '@mui/material/Box'
+import Step from '@mui/material/Step'
+import CardActions from '@mui/material/CardActions'
+import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector'
+import { styled as muiStyled } from '@mui/material/styles'
+
+export interface LabelStepperProps {
+  $active: boolean
+}
+
+export const Container = styled(Card)`
+  height: 100%;
+  box-shadow: none !important;
+  border: 1px solid #c4c4c4 !important;
+  box-sizing: border-box !important;
+  border-radius: 8px !important;
+  padding: 24px !important;
+`
+
+export const Title = styled.span`
+  font-size: 20px !important;
+  color: #ff4d0d !important;
+`
+
+export const TextDescription = styled.span`
+  font-size: 14px !important;
+  color: #222222 !important;
+`
+
+export const ContainerDescription = styled.div`
+  padding-top: 26px !important;
+`
+
+export const ContainerText = styled.div`
+  padding-top: 35px !important;
+`
+
+export const CheckIconCustom = styled(CheckIcon)`
+  color: white !important;
+  font-size: 19px !important;
+`
+
+export const LoginIconCustom = styled(LoginIcon)`
+  color: white !important;
+  font-size: 20px !important;
+`
+
+export const FormControlSelect = styled(FormControl)`
+  .MuiInputLabel-formControl {
+    color: rgba(0, 0, 0, 0.6) !important;
+    margin-top: 5px !important;
+  }
+`
+export const DropDownList = styled(Select)`
+  max-width: 350px !important;
+  height: 40px !important;
+  & > div {
+    border: 1px solid #e8e8e8 !important;
+  }
+  .MuiSelect-select {
+    border: none !important;
+  }
+  .MuiSelect-icon {
+    color: #000 !important; // for icon drop down icon color
+  }
+  &.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+    border-color: #ff4d0d !important;
+    border-width: 1px !important;
+  }
+`
+
+export const LabelDateStepper = styled.label`
+  font-size: 14px !important;
+  line-height: 14px !important;
+`
+
+export const LabelTitleStepper = styled.label`
+  overflow: hidden; !important;
+  display: block !important;
+  max-height: 1.33rem !important;
+;
+`
+
+export const ContainerStepper = styled.div`
+  margin-top: 10px !important;
+`
+
+export const CustomStepper = styled(Stepper)`
+  height: 100px !important;
+  overflow-x: auto !important;
+  overflow-y: hidden !important;
+  box-sizing: content-box !important;
+  scroll-behavior: smooth !important;
+  padding-bottom: 30px !important;
+`
+
+export const CustomStep = styled(Step)`
+  padding: 0px !important;
+  min-width: 150px !important;
+`
+
+export const BoxStepper = styled(Box)`
+  width: 100% !important;
+  padding-top: 20px !important;
+  text-align: center !important;
+  overflow: hidden !important;
+  height: 120px !important;
+`
+
+export const LabelTimeMentoring = styled.label`
+  font-size: 16px !important;
+  color: #ff4d0d !important;
+  font-weight: bolder !important;
+`
+
+export const BoxLabelTimeMentoring = styled.div`
+  padding-top: 30px !important;
+  padding-bottom: 16px !important;
+`
+
+export const LabelSchedule = styled.span`
+  font-size: 16px !important;
+`
+
+export const LabelScheduleClick = styled.span`
+  color: #0645ad !important;
+  font-size: 16px !important;
+  font-weight: bolder !important;
+  cursor: pointer !important;
+`
+
+export const ActionContainer = styled(CardActions)`
+  padding: 0px !important;
+`
+
+export const ColorlibConnector = muiStyled(StepConnector)(({ theme }) => ({
+  [`&.${stepConnectorClasses.alternativeLabel}`]: {
+    top: 40,
+    left: 'calc(-54% + 7px)',
+    right: 'calc(40% + 20px)',
+    [`&.MuiStepLabel-labelContainer`]: {
+      [`&.Mui-active`]: {
+        backgroundColor: 'red'
+      }
+    }
+  },
+  [`&.${stepConnectorClasses.active}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      backgroundColor: '#ff4d0d'
+    }
+  },
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      backgroundColor: '#000'
+    }
+  },
+  [`& .${stepConnectorClasses.line}`]: {
+    height: 1,
+    border: 0,
+    backgroundColor: '#ff4d0d',
+    borderRadius: 1
+  }
+}))
+
+export const ColorlibStepIconRoot = muiStyled('div')<{
+  ownerState: { completed?: boolean; active?: boolean }
+}>(({ ownerState }) => ({
+  backgroundColor: '#000',
+  zIndex: 1,
+  color: '#fff',
+  display: 'flex',
+  borderRadius: '50%',
+  justifyContent: 'center',
+  alignItems: 'center',
+  boxShadow: 'none !important',
+  ...(ownerState.active && {
+    backgroundColor: '#ff4d0d',
+    width: 32,
+    height: 32,
+    boxShadow: 'none !important'
+  }),
+  ...(ownerState.completed && {
+    backgroundColor: '#000',
+    width: 24,
+    height: 24,
+    boxShadow: 'none !important'
+  }),
+  ...(!ownerState.active &&
+    !ownerState.completed && {
+    backgroundColor: '#ff4d0d',
+    width: 24,
+    height: 24,
+    boxShadow: 'none !important'
+  }),
+  ...(ownerState.active &&
+    ownerState.completed && {
+    backgroundColor: '#000',
+    width: 24,
+    height: 24,
+    boxShadow: 'none !important'
+  })
+}))

package/src/components/calendar/index.tsx

@@ -0,0 +1,157 @@
+import '../../shared/global.css'
+import { useState, useEffect } from 'react'
+import * as Global from '@shared/globalComponentsStyle'
+import * as Styles from './calendarStyle'
+import { StepIconProps } from '@mui/material/StepIcon'
+import { WarningIcon } from '@shared/icons'
+import { useTranslation } from 'react-i18next'
+
+import { Tooltip, MenuItem, CardContent, StepLabel } from '@mui/material'
+
+interface Trail {
+  id: string,
+  moduleID: string,
+  name: string,
+  events: Array<any>
+  nextEvent?: any,
+  joinEventAction?: () => void,
+}
+
+interface CalendarProps {
+  loading: boolean,
+  short: boolean,
+  trails: Array<Trail>,
+  showFullPageAction?: () => void
+}
+
+function getStepIcon(props: StepIconProps) {
+  const { active, completed } = props
+
+  return (
+    <Styles.ColorlibStepIconRoot ownerState={{ completed, active }}>
+      {
+        completed ? <Styles.CheckIconCustom /> : active ? <Styles.LoginIconCustom /> : <div />
+      }
+    </Styles.ColorlibStepIconRoot>
+  )
+}
+
+function getMissedStepIcon() {
+  return (
+    <Styles.ColorlibStepIconRoot ownerState={{ completed: true, active: true }} >
+      <div />
+    </Styles.ColorlibStepIconRoot>
+  )
+}
+
+function StepsComponent(props: any) {
+  const { t } = useTranslation()
+  let { events } = props
+
+  return (
+    <Styles.BoxStepper>
+      <Styles.CustomStepper alternativeLabel connector={<Styles.ColorlibConnector />}>
+        {events && events.length > 0 && events?.map((event) => (
+          <Styles.CustomStep key={event.id} completed={event.completed} active={event.today}>
+            <Styles.LabelDateStepper>{event.day} {t(`calendar.monthsInitials.${event.month}`)}</Styles.LabelDateStepper>
+            <Styles.ContainerStepper>
+              <Tooltip title={event.title}>
+                <StepLabel StepIconComponent={event.completed && !event.present ? getMissedStepIcon : getStepIcon}>
+                  <Styles.LabelTitleStepper>{event.title}</Styles.LabelTitleStepper>
+                </StepLabel>
+              </Tooltip>
+            </Styles.ContainerStepper>
+          </Styles.CustomStep>
+        ))}
+      </Styles.CustomStepper>
+    </Styles.BoxStepper >
+  )
+}
+
+/**
+ * @param {CalendarProps} props
+ */
+export default function CalendarCard(props: CalendarProps) {
+  const { t } = useTranslation()
+
+  const [module, setModule] = useState(0)
+  const [moduleEvents, setModuleEvents] = useState([])
+  const [moduleSelector, setModuleSelector] = useState(false)
+
+  const handleChange = (event: any) => {
+    let val = event.target?.value
+    setModule(val)
+    if (props.trails[val].events) setModuleEvents(props.trails[val].events)
+  }
+
+  useEffect(() => {
+    if (props.trails[0]) {
+      if (props.trails[0].events) setModuleEvents(props.trails[0].events)
+      if (props.trails.length > 1) setModuleSelector(true)
+    }
+  }, [props.trails])
+
+  return (
+    <div style={{ height: '100%' }}>
+      {
+        props.loading ?
+          <Styles.Container className='shimmer'></Styles.Container>
+          :
+          <Styles.Container>
+            <CardContent style={{ padding: '0px' }} >
+              <Styles.Title>{t('calendar.title')}</Styles.Title>
+              {
+                moduleSelector &&
+                <Styles.ContainerDescription>
+                  <Styles.TextDescription>{t('calendar.card.description')}</Styles.TextDescription>
+                  <Styles.FormControlSelect fullWidth>
+                    <Styles.DropDownList id="module-id" value={module} onChange={handleChange}>
+                      {props.trails?.map((item, index) => {
+                        return <MenuItem key={index} value={index}>{item.name} - {item.moduleID}</MenuItem>
+                      })}
+                    </Styles.DropDownList>
+                  </Styles.FormControlSelect>
+                </Styles.ContainerDescription>
+              }
+
+              {moduleEvents?.length === 0 &&
+                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '140px', paddingBottom: '32px' }}>
+                  <WarningIcon /><span style={{ paddingLeft: '8px' }}>{t('calendar.notAvailable')}</span>
+                </div>
+              }
+
+              {moduleEvents && <StepsComponent events={moduleEvents} short={props.short} />}
+
+              {moduleEvents && moduleEvents.length > 0 &&
+                <Styles.BoxLabelTimeMentoring>
+                  {props.trails[module]?.nextEvent ?
+                    <Styles.LabelTimeMentoring>{t('calendar.card.mentoringSchedule')} {t(`calendar.weekdays.${props.trails[module].nextEvent.weekday}`)} @ {props.trails[module]?.nextEvent.hour}</Styles.LabelTimeMentoring>
+                    :
+                    <Styles.LabelTimeMentoring>{t(`calendar.noMoreEvents`)}</Styles.LabelTimeMentoring>
+                  }
+
+                </Styles.BoxLabelTimeMentoring>
+              }
+              <Styles.ActionContainer>
+                {props.short &&
+                  <Styles.LabelSchedule>
+                    <Styles.LabelScheduleClick onClick={props.showFullPageAction}>
+                      {t('globals.clickHere')}
+                    </Styles.LabelScheduleClick>{' '}
+                    {t('calendar.card.fullSchedule')}
+                  </Styles.LabelSchedule>
+                }
+                {
+                  props.trails[module]?.joinEventAction &&
+                  <Global.FRSTButton style={{ marginLeft: 'auto' }} variant="contained" onClick={props.trails[module]?.joinEventAction}>
+                    {t('calendar.card.joinEvent')}
+                  </Global.FRSTButton>
+                }
+              </Styles.ActionContainer>
+            </CardContent>
+
+          </Styles.Container>
+      }
+    </div >
+  )
+}

package/src/components/card-trail/cardTrail.stories.tsx

@@ -0,0 +1,167 @@
+import React from 'react'
+
+import CardTrail from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Base/Card Trail',
+    component: CardTrail,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <CardTrail {...args} />
+
+export const primaryNotStarted = Template.bind({})
+primaryNotStarted.args = {
+    variant: 'primary',
+    name: 'Inovação Customer Centric',
+    start: '10/10/2022',
+    description: 'Aprenda como preparar os seus times, processos e mindset para que toda a empresa funcione agindo de acordo com a necessidade do cliente.',
+    mentor: {
+        avatar: 'https://img.freepik.com/fotos-gratis/mulher-moderna-tomando-uma-selfie_23-2147893976.jpg?w=2000',
+        name: 'Gabriela Duarte',
+        linkedin: 'urlLinkedin'
+    },
+    action: () => alert('opa'),
+    notStarted: true,
+    bannerImage: 'https://www.sydle.com/api/1/blog/com.sydle.site/blogFacade/images/e-business-612541b6b060f57604938af9/e-business.jpg',
+    labels: {
+        mentor: 'Mentor(a)',
+        dateStart: 'Data de Início'
+    }
+}
+
+export const primaryNotStartedWithoutMentor = Template.bind({})
+primaryNotStartedWithoutMentor.args = {
+    variant: 'primary',
+    name: 'Inovação Customer Centric',
+    start: '10/10/2022',
+    description: 'Aprenda como preparar os seus times, processos e mindset para que toda a empresa funcione agindo de acordo com a necessidade do cliente.',
+    action: () => alert('opa'),
+    notStarted: true,
+    bannerImage: 'https://www.sydle.com/api/1/blog/com.sydle.site/blogFacade/images/e-business-612541b6b060f57604938af9/e-business.jpg',
+    labels: {
+        mentor: 'Mentor(a)',
+        dateStart: 'Data de Início'
+    }
+}
+
+export const primaryNotStartedWithoutDate = Template.bind({})
+primaryNotStartedWithoutDate.args = {
+    variant: 'primary',
+    name: 'Inovação Customer Centric',
+    description: 'Aprenda como preparar os seus times, processos e mindset para que toda a empresa funcione agindo de acordo com a necessidade do cliente.',
+    mentor: {
+        avatar: 'https://img.freepik.com/fotos-gratis/mulher-moderna-tomando-uma-selfie_23-2147893976.jpg?w=2000',
+        name: 'Gabriela Duarte',
+        linkedin: 'urlLinkedin'
+    },
+    action: () => alert('opa'),
+    notStarted: true,
+    bannerImage: 'https://www.sydle.com/api/1/blog/com.sydle.site/blogFacade/images/e-business-612541b6b060f57604938af9/e-business.jpg',
+    labels: {
+        mentor: 'Mentor(a)',
+        dateStart: 'Data de Início'
+    }
+}
+
+export const primaryNotStartedWithoutMentorDate = Template.bind({})
+primaryNotStartedWithoutMentorDate.args = {
+    variant: 'primary',
+    name: 'Inovação Customer Centric',
+    description: 'Aprenda como preparar os seus times, processos e mindset para que toda a empresa funcione agindo de acordo com a necessidade do cliente.',
+    action: () => alert('opa'),
+    notStarted: true,
+    bannerImage: 'https://www.sydle.com/api/1/blog/com.sydle.site/blogFacade/images/e-business-612541b6b060f57604938af9/e-business.jpg',
+    labels: {
+        mentor: 'Mentor(a)',
+        dateStart: 'Data de Início'
+    }
+}
+
+export const primaryStarted = Template.bind({})
+primaryStarted.args = {
+    variant: 'primary',
+    name: 'Inspiring leadership',
+    start: '10/10/2022',
+    description: 'More than just hitting goals, the inspiring leader.',
+    progress: 80,
+    mentor: {
+        avatar: 'https://st.depositphotos.com/1743476/2267/i/600/depositphotos_22675279-stock-photo-businesswoman.jpg',
+        name: 'Gabriela Duarte',
+        linkedin: 'urlLinkedin'
+    },
+    action: () => alert('redirect'),
+    notStarted: false,
+    bannerImage: 'https://www.sydle.com/api/1/blog/com.sydle.site/blogFacade/images/e-business-612541b6b060f57604938af9/e-business.jpg',
+    labels: {
+        mentor: 'Mentor',
+        dateStart: 'Start date'
+    }
+}
+
+export const primaryStartedWithoutMentor = Template.bind({})
+primaryStartedWithoutMentor.args = {
+    variant: 'primary',
+    name: 'Inspiring leadership',
+    start: '10/10/2022',
+    description: 'More than just hitting goals, the inspiring leader.',
+    progress: 80,
+    action: () => alert('redirect'),
+    notStarted: false,
+    bannerImage: 'https://www.sydle.com/api/1/blog/com.sydle.site/blogFacade/images/e-business-612541b6b060f57604938af9/e-business.jpg',
+    labels: {
+        mentor: 'Mentor',
+        dateStart: 'Start date'
+    }
+}
+
+export const primaryStartedWithoutDate = Template.bind({})
+primaryStartedWithoutDate.args = {
+    variant: 'primary',
+    name: 'Inspiring leadership',
+    description: 'More than just hitting goals, the inspiring leader.',
+    progress: 80,
+    mentor: {
+        avatar: 'https://st.depositphotos.com/1743476/2267/i/600/depositphotos_22675279-stock-photo-businesswoman.jpg',
+        name: 'Gabriela Duarte',
+        linkedin: 'urlLinkedin'
+    },
+    action: () => alert('redirect'),
+    notStarted: false,
+    bannerImage: 'https://www.sydle.com/api/1/blog/com.sydle.site/blogFacade/images/e-business-612541b6b060f57604938af9/e-business.jpg',
+    labels: {
+        mentor: 'Mentor',
+        dateStart: 'Start date'
+    }
+}
+
+export const primaryStartedWithoutMentorDate  = Template.bind({})
+primaryStartedWithoutMentorDate.args = {
+    variant: 'primary',
+    name: 'Inspiring leadership',
+    description: 'More than just hitting goals, the inspiring leader.',
+    progress: 80,
+    action: () => alert('redirect'),
+    notStarted: false,
+    bannerImage: 'https://www.sydle.com/api/1/blog/com.sydle.site/blogFacade/images/e-business-612541b6b060f57604938af9/e-business.jpg',
+    labels: {
+        mentor: 'Mentor',
+        dateStart: 'Start date'
+    }
+}
+
+export const secondary = Template.bind({})
+secondary.args = {
+    variant: 'secondary',
+    name: 'Open Talks | O futuro na perspectiva das Plataformas',
+    start: '10/10/2022',
+    description: 'Clique aqui para asssistir a mais um episódio do Open Talks com especialistas renomados sobre O futuro na perspectiva das Plataformas.',
+    progress: 80,
+    mentor: {
+        name: 'Gabriela Duarte',
+        linkedin: 'url'
+    },
+    action: () => alert('opa'),
+    bannerImage: 'https://frst-api-student-group-prod.s3.amazonaws.com/media/product/module/cover-image/7/CAPA_7_-_Open_Talks_-_O_futuro_na_perspectvia_das_plataformas.png?AWSAccessKeyId=ASIAYR3BIRGASFQHZ4R3&Signature=GQk5PUXBIPsM%2Fepjv9uMZi9N23g%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=1665416213'
+}