frst-components 0.20.1 → 0.20.3

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

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

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

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

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