frst-components 0.20.0 → 0.20.2

package/src/components/EBR/rating/rating.d.ts

@@ -1,42 +0,0 @@
-///-----------------------------------------
-/// Interface do Componente
-
-declare type enumOrientation = 'horizontal' | 'vertical';
-
-export interface IRating {
-  /**
-   * @prop {number} nota: Valor da classificação aplicada
-   */
-    rating: number;
-  /**
-   * @prop {boolean} isVisibleNumberRating: Exibição do valor rating
-   */
-    isVisibleNumberRating: boolean;
-  /**
-   * @prop {number} nota: Quantidade de estrelas
-   */
-   qtdStars: number;
-  /**
-   * @prop {any} handleRating: Função de manipulação da classificação
-   */  
-    handleRating: any;
-  /**
-   * @prop {number} sizeStars: Tamanho das estrelas
-   */  
-   sizeStars: number;
-
-  /**
-   * @prop {string} marginStars: Margin das estrelas
-   */  
-      marginStars: string;
-
-  /**
-   * @prop {enumOrientation} orientation: Disposição das estrelas: horizontal ou vertical
-   */  
-   orientation: enumOrientation;
-
-  /**
-   * @prop {boolean} disabled: Boolean para desabilitar edição
-   */  
-   disabled: boolean;
-}

package/src/components/EBR/rating/rating.stories.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-
-import Rating from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'EBR/Rating',
-    component: Rating,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Rating {...args} />
-
-export const DefaultRating = Template.bind({})
-DefaultRating.args = {
-    rating: 4,
-    disabled: false,
-    isVisibleNumberRating: true,
-    qtdStars: 5,
-    sizeStars: 18,
-    marginStars: '3.5px',
-    orientation: 'horizontal',
-    handleRating: (e) => alert(e),
-}

package/src/components/EBR/rating/ratingStyles.ts

@@ -1,25 +0,0 @@
-import styled from 'styled-components'
-
-
-export const WrapperStars = styled.div<({orientation: string})>`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    flex-direction: ${({orientation}) => orientation == 'vertical' ? 'column' : 'row'};
-    width: auto;
-`
-
-export const Raiting  = styled.p`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-family: Work Sans;
-    font-size: 24px;
-    line-height: 100%;
-    font-weight: 500;
-    line-height: 28px;
-    color: #222;
-    padding-top: 3px;
-    margin-left: 16.5px;
-`

package/src/components/EBR/specialist-contact/index.tsx

@@ -1,40 +0,0 @@
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './specialistContactStyles'
-import { ISpecialistContact } from './specialistContact'
-import { WhatAppBordered, MailBordered } from '@shared/icons'
-
-import Button from '@components/buttons/index'
-
-export default function SpecialistContact({ title, avatar, name, email, telephone, mobileVersion,
-    handleActionConversation, textButtonConversation,handleActionSendEmail, textButtonSendEmail }: ISpecialistContact) {
-    const src = 'https://i.gyazo.com/499dda909b1ebfe0375d1efa2d5d00a8.png'
-    return (
-        <Styles.Wrapper mobileVersion={mobileVersion}>
-            <Styles.Title mobileVersion={mobileVersion}>{title}</Styles.Title>
-            <Styles.WrapperSpecialist mobileVersion={mobileVersion}>
-                <Styles.AvatarImg src={avatar ? avatar : src}/>
-                <Styles.TextSpecialist  mobileVersion={mobileVersion}>
-                    <Styles.Name mobileVersion={mobileVersion}> {name} </Styles.Name>
-                    <Styles.Email mobileVersion={mobileVersion}> {email} </Styles.Email>
-                    <Styles.Phone mobileVersion={mobileVersion}> {telephone} </Styles.Phone>
-                </Styles.TextSpecialist>
-            </Styles.WrapperSpecialist>
-
-            <Styles.WrapperButtons>
-                <Button 
-                    variant='primary' 
-                    label={textButtonConversation ? textButtonConversation : 'Iniciar conversa'}
-                    handleClick={() => handleActionConversation()}
-                    startIcon={!mobileVersion && <WhatAppBordered/>}
-                    sizeIcon={'22px'}/>
-                <Button 
-                    variant='primary' 
-                    label={textButtonSendEmail ? textButtonSendEmail : 'Enviar e-mail'}
-                    handleClick={() => handleActionSendEmail()}
-                    startIcon={!mobileVersion && <MailBordered/>}
-                    sizeIcon={'22px'}/>
-            </Styles.WrapperButtons>
-        </Styles.Wrapper>
-    )
-}

package/src/components/EBR/specialist-contact/specialistContact.d.ts

@@ -1,13 +0,0 @@
-import React from "react"
-export interface ISpecialistContact {
-    title?: string,
-    avatar?: string,
-    name?: string,
-    email?: string,
-    telephone?: string,
-    textButtonConversation?: string,
-    handleActionConversation?: any,
-    textButtonSendEmail?: string,
-    handleActionSendEmail?: any,
-    mobileVersion?: boolean,
-}

package/src/components/EBR/specialist-contact/specialistContact.stories.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-
-import SpecialistContact from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'EBR/SpecialistContact',
-    component: SpecialistContact,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <SpecialistContact {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    title: 'Especialista FRST responsável',
-    mobileVersion: false,
-    avatar: 'https://i.gyazo.com/499dda909b1ebfe0375d1efa2d5d00a8.png',
-    name: 'Bárbara Vianello',
-    email: 'barbara.martins@frstfalconi.com',
-    telephone: '(11) 97474-3346',
-    textButtonConversation: 'Iniciar conversa',
-    handleActionConversation: () => alert('conversation'),
-    textButtonSendEmail: 'Enviar e-mail',
-    handleActionSendEmail: () => alert('send email'),
-}

package/src/components/EBR/specialist-contact/specialistContactStyles.ts

@@ -1,93 +0,0 @@
-import styled from 'styled-components'
-
-export const Wrapper = styled.div<{mobileVersion: boolean}>`
-    display: flex;
-    flex-direction: column;
-    max-width:  ${({mobileVersion})=> mobileVersion ? '343px': '400px'};
-`
-
-export const Title = styled.p<{mobileVersion: boolean}>`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 130%;
-
-    display: flex;
-    align-items: ${({mobileVersion})=> mobileVersion ? 'start': 'center'};
-    letter-spacing: 0.01em;
-    color:  #222;
-`
-
-export const AvatarImg = styled.img`
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    object-fit: cover;
-`
-
-export const WrapperSpecialist = styled.div<{mobileVersion: boolean}>`
-    display: flex;
-    margin-top: ${({mobileVersion})=> mobileVersion ? '32px': '48px'};
-    flex-direction:${({mobileVersion})=> mobileVersion ? 'column': 'row'};
-    align-items: ${({mobileVersion})=> mobileVersion ? 'center': 'start'};
-`
-
-export const TextSpecialist = styled.div<{mobileVersion: boolean}>`
-    margin-left: ${({mobileVersion})=> mobileVersion ? '0px': '24px'};
-`
-    export const Phone = styled.p<{mobileVersion: boolean}>`        
-        font-family: 'Work Sans';
-        font-style: normal;
-        font-weight: 400;
-        font-size: 16px;
-        line-height: 19px;
-
-        display: flex;
-        align-items: center;
-        justify-content:${({mobileVersion}) => mobileVersion ? 'center': 'start'};
-        text-align: center;
-        letter-spacing: 0.25px;
-
-        color: #222222;
-        margin-bottom: 8px;
-    `
-    export const Email = styled.p<{mobileVersion: boolean}>`
-        font-family: 'Work Sans';
-        font-style: normal;
-        font-weight: 400;
-        font-size: 16px;
-        line-height: 19px;
-        
-        display: flex;
-        align-items: center;
-        text-align: start;
-        justify-content:${({mobileVersion}) => mobileVersion ? 'center': 'start'};
-        
-        letter-spacing: 0.25px;
-
-        color: #222222;
-        margin-bottom: 8px;
-    `
-    export const Name = styled.p<{mobileVersion: boolean}>`
-        font-family: 'Work Sans';
-        font-style: normal;
-        font-weight: 600;
-        font-size: 20px;
-        line-height: 23px;
-        display: flex;
-        align-items: center;
-        justify-content:${({mobileVersion}) => mobileVersion ? 'center': 'start'};
-        text-align: center;
-        letter-spacing: 0.25px;
-        color:  #222;
-        margin-bottom: 8px;
-        margin-top:${({mobileVersion}) => mobileVersion ? '24px': '0px'};
-    `
-export const WrapperButtons = styled.div`
-    display:flex;
-    justify-content: space-between;
-    width: 100%;
-    margin-top: 45px;
-    gap: 16px;
-`

package/src/components/EBR/stepper/index.d.ts

@@ -1,29 +0,0 @@
-export interface IStepperItem {
-  /**
-    * @prop {string} title: Texto em destaque no passo
-  */
-  title?: string
-  /**
-    *  @prop {string} subtitle: Texto em abaixo do texto em destaque no passo
-  */
-  subtitle?: string
-  /**
-    *  @prop {string} buttonText: Texto personalizado para o botão de ação
-  */
-  buttonText?: string
-  /**
-    *  @prop {boolean} active: Seta o item como destaque, exibindo o subtitulo e o botão de ação.
-  */
-  active?: boolean
-  /**
-    *  @prop {React.MouseEvent} onClick: Ação do botão
-  */
-  onClick?: (e: React.MouseEvent) => void
-}
-
-export interface IStepper {
-  /**
-    *  @prop {JSX.Element} children: Elementos filhos do componente(Devem ser do tipo ProgressStepperItem)
-  */
-  children?: any
-}

package/src/components/EBR/stepper/index.stories.tsx

@@ -1,43 +0,0 @@
-import React from 'react'
-import Stepper from './stepper'
-import StepperItem from './stepperItem'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'EBR/Nexts Steps - Progress Stepper',
-    component: Stepper,
-}
-
-const ProgressStepsData = [
-  {
-    title: 'Elaboração dos desafios atuais',
-    subtitle: 'Vamos juntos trazer mais resultados para sua empresa?',
-    buttonText: 'Agendar reunião',
-    active: true,
-  },
-  {
-    title: 'Elaboração de plano e produtos',
-  },
-  {
-    title: 'Apresentação da proposta',
-  },
-  {
-    title: 'Contrato e início de operação',
-  }
-]
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Stepper {...args} />
-
-export const Default = Template.bind({})
-Default.args = {
-  children: ProgressStepsData.map((item, index) => 
-    <StepperItem
-      key={index}
-      title={item.title}
-      subtitle={item.subtitle}
-      active={item.active}
-      onClick={() => console.log('click')}
-    />
-  )
-}

package/src/components/EBR/stepper/index.tsx

@@ -1,7 +0,0 @@
-import ProgressStepper from './stepperItem'
-import ProgressStepperItem from './stepper'
-
-export {
-  ProgressStepper,
-  ProgressStepperItem
-}

package/src/components/EBR/stepper/stepper.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import {
-  IStepper
-} from './index.d'
-import {
-  ProgressContainer,
-  Progress
-} from './styles'
-
-
-export default function Stepper({
-  children,
-}: IStepper ) {
-  return (
-    <>
-      <ProgressContainer>
-        <Progress>
-          {children && children}
-        </Progress>
-      </ProgressContainer>
-    </>
-  )
-}

package/src/components/EBR/stepper/stepperItem.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import {
-  IStepperItem
-} from './index.d'
-import {
-  ProgressItem,
-  ProgressItemTitle,
-  ProgressItemSubtitle,
-} from './styles'
-
-import Button from '../../buttons'
-
-export default function StepperItem({
-  title,
-  subtitle,
-  buttonText,
-  active = false,
-  onClick
-}: IStepperItem ) {
-  return (
-    <ProgressItem active={active}>
-      {active
-      ?
-        <>
-          <ProgressItemTitle active={active}>{title}</ProgressItemTitle>
-          <ProgressItemSubtitle active={active}>{subtitle}</ProgressItemSubtitle>
-          <Button
-            handleClick={onClick}
-            label={buttonText || 'Agendar reunião'}
-            variant="primary"
-          />
-        </>
-      :
-        <ProgressItemTitle>{title}</ProgressItemTitle>
-      }
-    </ProgressItem>
-  )
-}

package/src/components/EBR/stepper/styles.ts

@@ -1,140 +0,0 @@
-import styled from 'styled-components'
-
-export const Container = styled.div`
-  width: 100%;
-  width: 1280px;
-  height: 587px;
-  background: #F2F2F2;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`
-
-export const ProgressContainer = styled.div`
-  position: relative;
-  padding-left: 75px;
-`
-
-export const Progress = styled.ul`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  list-style: none;
-  align-items: flex-start;
-`
-
-export const ProgressItem = styled.li<{ active: boolean }>`
-  width: 100%;
-  min-height: 78px;
-  height: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  position: relative;
-  counter-increment: list;
-
-  ${({ active }) => active === true && `
-    padding-bottom: 50px;
-
-    @media (max-width: 768px) {
-      padding-bottom: 50px;
-    }
-  `}
-
-  &:first-child {
-    &::before {
-      top: 10px;
-    }
-  }
-
-  &:last-child {
-    min-height: 46px;
-
-    &::before {
-      top: -30px;
-      display: none;
-    }
-  }
-
-  &:before {
-    content: "";
-    position: absolute;
-    left: -79px;
-    top: 2px;
-    height: 100%;
-    background-color: #6A3F86;
-    width: 14px;
-    z-index: 0;
-  }
-
-  &:after {
-    content: counter(list);
-    position: absolute;
-    z-index: 1;
-    left: -95px;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background: transparent;
-    color: ${({ active }) => active === true ? '#FFFFFF' : '#757575'};;
-    text-align: center;
-    border: 3.5px solid #9C9C9C;
-    background-color: #fff;
-    top: 0;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 600;
-    font-size: 24px;
-    line-height: 28px;
-
-    ${({ active }) => active === true && `
-      background-color: #FF4D0D;
-      border-color: #FF4D0D;
-      -webkit-box-shadow: 0px 0px 0px 15px rgba(255,77,13,0.5); 
-      box-shadow: 0px 0px 0px 15px rgba(255,77,13,0.5);
-    `}
-  }
-`
-
-export const ProgressItemTitle = styled.p<{ active?: boolean }>`
-  font-family: 'Work Sans';
-  font-style: normal;
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 23px;
-  color: #757575;
-
-  height: 46px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  ${({ active }) => active === true && `
-    color: #222222;
-    height: auto;
-    margin: 11px 0 8px 0;
-    font-weight: 600;
-  `}
-`
-
-export const ProgressItemSubtitle = styled.p<{ active: boolean }>`
-  font-family: 'Work Sans';
-  font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 19px;
-  color: #222222;
-
-  ${({ active }) => active === true && `
-    margin-bottom: 24px;
-  `}
-`

package/src/components/EBR/trail-list/index.tsx

@@ -1,82 +0,0 @@
-import React,{useState, useEffect} from 'react'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './trailListStyles'
-import { ITrailList } from './trailList'
-
-import { MessageCheckLine } from '@shared/icons'
-
-export default function TrailList({ title, trails, style }: ITrailList) {
-    const [ trailsList, setTrailsList ] = useState(trails);
-    const [ windowSize, setWindowSize ] = useState([0,0 ])
-    useEffect(() => {
-      function updateSize() {
-        setWindowSize([window.innerWidth, window.innerHeight]);
-      }
-      window.addEventListener('resize', updateSize);
-      updateSize();
-      return () => window.removeEventListener('resize', updateSize);
-     }, []);
-
-     const renderTrails = () => {
-        return (trailsList.map((item, index) => {
-            return <Styles.ItemList key={index} isMobile={windowSize[0] < 400}> 
-                    <Styles.IconList> <MessageCheckLine/> </Styles.IconList> 
-                    <Styles.TextList> {item} </Styles.TextList>
-                </Styles.ItemList>
-            
-        }))
-     }
-
-     useEffect(() => {
-        setTrailsList(trails)
-     }, [trails])
-
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            <Styles.Wrapper style={{...style}}>
-                <Styles.Title>{title}</Styles.Title>
-                <Styles.WrapperList>
-                {( trailsList && trailsList.length > 0 && trailsList.length <= 2) ? 
-                    <div style={{
-                            display: 'flex', 
-                            flexDirection: 'column'
-                        }}>
-                        { renderTrails() }
-                    </div>
-                    :
-                    (trailsList && trailsList.length > 0 && trailsList.length <= 3) ? 
-                    <div style={{
-                            display: 'grid', 
-                            columnGap: '80px', 
-                            gridTemplateColumns: windowSize[0] > 900 ? '1fr 1fr' : '1fr'
-                        }}>
-                        { renderTrails() }
-                    </div>
-                    :
-                    (trailsList && trailsList.length > 0 && trailsList.length <= 5) ?
-                    <div style={{
-                            display: 'grid', 
-                            columnGap: '80px', 
-                            gridTemplateColumns:windowSize[0] > 1400 ? '1fr 1fr 1fr' : 
-                            windowSize[0] > 900 ? '1fr 1fr' : '1fr'
-                        }}>
-                        { renderTrails() }
-                    </div>                    
-                    :
-                    (trailsList && trailsList.length > 0 && trailsList.length > 5) && 
-                    <div style={{
-                            display: 'grid', 
-                            columnGap: '80px', 
-                            gridTemplateColumns:windowSize[0] > 1400 ? '1fr 1fr 1fr' : 
-                            windowSize[0] > 900 ? '1fr 1fr' : '1fr'
-                        }}>
-                        { renderTrails() }
-                    </div>
-                    
-                }
-                </Styles.WrapperList>
-            </Styles.Wrapper>
-        </ThemeProvider>
-    )
-}

package/src/components/EBR/trail-list/trailList.d.ts

@@ -1,6 +0,0 @@
-import React from "react"
-export interface ITrailList{
-    title?: string,
-    trails?: any,
-    style?: React.CSSProperties;
-}