frst-components 0.20.1 → 0.20.3

package/src/components/EBR/group-statistics/groupStatisticsStyles.ts

@@ -1,63 +0,0 @@
-import styled from 'styled-components'
-
-interface AvatarI {
-    size?: string,
-    src?: any,
-    disabled?: boolean,
-}
-
-export const AvatarImg = styled.img<AvatarI>`
-    width: ${props => props.size || '120px'};
-    height: ${props => props.size || '120px'};
-    border-radius: 50%;
-    object-fit: cover;
-
-    ${({ disabled }) => disabled === true && `
-        filter: grayscale(100%);
-    `}
-`
-
-export const CardWrapper = styled.div<{hasShadow}>`
-    width: 100%;
-    min-height: 154px;
-    padding: 24px;
-
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    border: 1px solid #BDBDBD;
-    border-radius: 8px;
-    padding: 20px;
-    ${({hasShadow}) => hasShadow && 'box-shadow: 0px 18px 40px -15px #D3D3D3'};
-`
-
-export const FeaturedNumber = styled.p`
-    font-family: 'Work Sans' ;
-    font-style: normal;
-    font-weight: 300;
-    font-size: 48px;
-    line-height: 56px;
-    color: #222222;
-`
-
-export const DescriptionStatistics = styled.span`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 20px;
-    line-height: 23px;
-    color: #FF4D0D;
-`
-export const ItemStatistics = styled.div<({hasDivider, index, isNamedGrid, twoRows})>`
-
-    grid-area: ${({index, isNamedGrid}) => isNamedGrid && index} !important;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-itens: flex-start;
-    min-height: 106px;
-    max-width: 272px;
-    padding: 0px 24px 0px 24px;
-    margin-top: ${({twoRows}) => twoRows ? '24px' : '0px'};
-    ${({hasDivider, theme}) => hasDivider ? 
-    'border-left: 1px solid ' + theme.colors.borderPrimary :
-    'border-left: 1px solid ' + theme.colors.shadeWhite }
-`

package/src/components/EBR/group-statistics/index.tsx

@@ -1,85 +0,0 @@
-import React,{useState, useEffect} from 'react'
-import '../../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import { CardWrapper, FeaturedNumber, DescriptionStatistics, ItemStatistics } from './groupStatisticsStyles'
-import { IGroupStatistics } from './groupStatistics'
-
-export default function TotalizerCard({ objectStatistics, loading, hasShadow, styles }: IGroupStatistics) {
-
-    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 renderObjectStatistics = (isNamed: any) => {
-        const calcHasDivider = (myIndex) => {
-            if(myIndex == 0) return false;
-
-            switch(objectStatistics.length) {
-                case 6:
-                case 7:
-                case 8:
-                if(myIndex == 4) return false;
-            }
-            return true;
-        }
-        return objectStatistics.map((item, index) => {
-            return <ItemStatistics 
-                hasDivider={ calcHasDivider(index)} 
-                twoRows={ objectStatistics.length > 5 && index > 3} 
-                key={index} 
-                isNamedGrid={isNamed} 
-                index={'card-'+(index+1).toString()}
-            >
-                <FeaturedNumber>{item.featuredNumber}</FeaturedNumber>
-                <DescriptionStatistics>{item.description}</DescriptionStatistics>
-            </ItemStatistics> 
-       })
-    }
-
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            { loading ? <CardWrapper  hasShadow={hasShadow} className='shimmer' style={{...styles}}/> :
-            <CardWrapper hasShadow={hasShadow} style={{...styles}}>
-                { (objectStatistics && objectStatistics.length > 0 && objectStatistics.length <= 5) ?
-                    <div style={{ 
-                        display: 'grid', 
-                        gridTemplateAreas: objectStatistics.length == 5 ? `'card-1 card-2 card-3 card-4 card-5'` : `'card-1 card-2 card-3 card-4'`
-                    }}>
-                        {renderObjectStatistics(true)}
-                    </div>
-                    :
-                    (objectStatistics && objectStatistics.length > 0 && objectStatistics.length <= 6) ?
-                    <div style={{ 
-                        display: 'grid', 
-                        gridTemplateAreas: `'card-1 card-2 card-3 card-4''. card-5 card-6 .'`
-                    }}>
-                        {renderObjectStatistics(true)}
-                    </div>
-                    :
-                    (objectStatistics && objectStatistics.length > 0 && objectStatistics.length <= 7) ?
-                    <div style={{ 
-                        display: 'grid', 
-                        gridTemplateAreas: `'card-1 card-1 card-2 card-2 card-3 card-3 card-4 card-4''. card-5 card-5 card-6 card-6 card-7 card-7 .'`
-                    }}>
-                        {renderObjectStatistics(true)}
-                    </div>
-                    :
-                    (objectStatistics && objectStatistics.length > 0 && objectStatistics.length > 7) &&
-                    <div style={{ 
-                        display: 'grid', 
-                        gridTemplateColumns: '1fr 1fr 1fr 1fr',
-                    }}>
-                        {renderObjectStatistics(false)}
-                    </div>
-                }
-            </CardWrapper> }
-        </ThemeProvider>
-    )
-}

package/src/components/EBR/objective-step/index.tsx

@@ -1,18 +0,0 @@
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './objectiveStepStyles'
-import { IObjectiveStep } from './objectiveStep'
-
-export default function ObjectiveStep({ description, number }: IObjectiveStep) {
-    return (
-        <Styles.WrapperCard>
-            <Styles.WrapperTopic>
-            {number}
-
-            </Styles.WrapperTopic>
-            <Styles.WrapperDescription>
-            {description}
-            </Styles.WrapperDescription>
-        </Styles.WrapperCard>
-    )
-}

package/src/components/EBR/objective-step/objectiveStep.d.ts

@@ -1,5 +0,0 @@
-import React from "react"
-export interface IObjectiveStep {
-    description?: string,
-    number?: any
-}

package/src/components/EBR/objective-step/objectiveStep.stories.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-
-import ObjectiveStep from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'EBR/ObjectiveStep',
-    component: ObjectiveStep,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <ObjectiveStep {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    number: 1,
-    description: 'Desenvolver pessoas que resolvem problemas reais da empresa em ciclos ágeis de aprendizado, colaboração e experimentação.',
-}
-
-export const oneline = Template.bind({})
-oneline.args = {
-    number: 4,
-    description: 'Implementar o mindset ágil de resolução de problemas nos colaboradores.',
-}

package/src/components/EBR/objective-step/objectiveStepStyles.ts

@@ -1,42 +0,0 @@
-import styled from 'styled-components'
-
-interface AvatarI {
-    size?: string,
-    src?: any,
-    disabled?: boolean,
-}
-
-
-export const WrapperCard = styled.div`
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    background-color: #FFF;
-    border-radius: 8px;
-    border: 1px solid #BDBDBD;
-    overflow: hidden;
-`
-
-export const WrapperTopic = styled.div`
-    min-width: 49px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    background: #FF4D0D;
-    color: #FFF;
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 24px;
-    border-right: 1px solid #BDBDBD;
-
-`
-export const WrapperDescription = styled.div`
-    padding: 16px;
-    color: #222222;
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-`

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

@@ -1,97 +0,0 @@
-import { useEffect, useState } from 'react'
-import { StarRating } from '@shared/icons'
-import { WrapperStars, Raiting } from './ratingStyles'
-import { IRating } from './rating'
-
-/**
- * @componente 
- */
-export default function Rating({ rating, isVisibleNumberRating, qtdStars, marginStars, handleRating, sizeStars, orientation, disabled }: IRating) {
-  const [ tempRating, setTempRating ] = useState(rating+1)
-  const [ hoverRaiting, setHoverRaiting ] = useState(-1)
-
-  
-
-  const rederStars = () => {
-    var groupStars = [];
-    let temRating = tempRating;
-
-    const handleClick = (e) => {
-      if(!disabled) handleRating(e)
-    }
-
-    const getStatusActive = (id) => {
-      if(id < hoverRaiting) return true; 
-      else if(hoverRaiting != -1) return false
-      else if(id < rating) return true;
-    }
-
-    for (var i = 0; i < qtdStars; i++) {
-      groupStars.push(
-        <StarRatingComponent 
-          key={i}
-          id={i+1}
-          active={getStatusActive(i)} 
-          setOnHover={setHoverRaiting} 
-          handleClick={handleClick} 
-          sizeStars={sizeStars}
-          marginStars={marginStars}
-          disabled={disabled}
-        />);
-      temRating--;
-    }
-    return groupStars;
-  }
-
-  return (
-    <WrapperStars orientation={orientation}>
-      {rederStars()}
-      {isVisibleNumberRating && <Raiting>{(rating).toFixed(1)}</Raiting>}
-    </WrapperStars>
-  )
-}
-
-function StarRatingComponent({id, active, handleClick, sizeStars, marginStars, setOnHover, disabled}) {
-  const [ actionArea, setActionArea ] = useState(false);
-
-  const getSizeStar = () => {
-
-  }
-
-  const getColorStar = () => {
-    if(active)
-      return '#FFC200'
-    else 
-      return '#757575'
-  }
-
-  useEffect(()=> {
-    setTimeout(() => {
-    if(actionArea)
-      setOnHover(id)
-    else
-      setOnHover(-1)
-  }, 150)
-  }, [actionArea]);
-
-  return <>
-    <div 
-      onMouseOver={() => setActionArea(true && !disabled)}
-      onMouseOut={() => setActionArea(false && !disabled)}
-      onClick={() => handleClick(id)}
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: marginStars ? marginStars : '3.5px' 
-      }}
-    >
-      <StarRating 
-        width={sizeStars ? sizeStars : 30}
-        height={sizeStars ? sizeStars : 29}
-        fill={getColorStar()}
-        fillOpacity={disabled ? '0.6' : '1'}
-      />
-    </div>
-  </>
-}

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')}
-    />
-  )
-}