frst-components 0.20.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+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>
+  )
+}