frst-components 0.20.0 → 0.20.2

package/src/components/DS/tooltip/styles.ts

@@ -1,155 +0,0 @@
-import styled from 'styled-components'
-
-export const TooltipWrapper = styled.div`
-  display: inline-flex;
-  position: relative;
-`;
-
-export const TooltipTip = styled.div<{
-  direction: string,
-  width: string,
-  height: string
-}>`
-  background: #FFF;
-  border-radius: 4px;
-  border: 1px solid #BDBDBD;
-  font-family: 'PT Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 18px;
-  color: #757575;
-  box-shadow: 0px 25px 18px -20px rgba(34, 34, 34, 0.2);
-  padding: 6px;
-  position: relative;
-
-  ${({ width }) => width && `width: ${width};`}
-  ${({ height }) => height && `height: ${height};`}
-
-  &::after {
-    content: " ";
-    left: 50%;
-    border: solid transparent;
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-    border-width: 5px;
-    margin-left: calc(5px * -1);
-  }
-
-  &::before {
-    content: " ";
-    left: 50%;
-    border: solid transparent;
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-    border-width: 6px;
-    margin-left: calc(6px * -1);
-  }
-
-  ${({ direction }) => {
-    switch (direction) {
-      case 'top':
-        return `
-          &::before,
-          &::after {
-            top: 100%;
-            border-top-color: #BDBDBD
-          }
-
-          &::after {
-            border-top-color: #FFFFFF;
-          }
-        `
-      case 'right':
-        return `
-          &::before,
-          &::after {
-            left: calc(6px * -1);
-            top: 50%;
-            transform: translateX(0) translateY(-50%);
-            border-right-color: #BDBDBD;
-          }
-
-          &::after {
-            border-right-color: #FFFFFF;
-          }
-        `
-      case 'bottom':
-        return `
-          &::before,
-          &::after {
-            bottom: 100%;
-            border-bottom-color: #BDBDBD;
-          }
-
-          &::after {
-            border-bottom-color: #FFFFFF;
-          }
-        `
-
-      case 'left':
-        return `
-          &::before,
-          &::after {
-            left: auto;
-            right: calc(6px * -2);
-            top: 50%;
-            transform: translateX(0) translateY(-50%);
-            border-left-color: #BDBDBD;
-          }
-
-          &::after {
-            border-left-color: #FFFFFF;
-          }
-        `
-      default:
-        return ''
-    }
-  }}
-
-`
-
-export const TooltipGhost = styled.div<{
-  direction: string,
-  width: string,
-  height: string
-}>`
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 100;
-
-
-  ${({ direction, height }) => {
-    switch (direction) {
-      case 'top':
-        return `
-          top: calc(${height} * -1);
-        `
-      case 'right':
-        return `
-          left: calc(100% + 5px);
-          top: 50%;
-          transform: translateX(0) translateY(-50%);
-        `
-      case 'bottom':
-        return `
-          bottom: calc(${height} * -1);
-        `
-
-      case 'left':
-        return `
-          left: auto;
-          right: calc(100% + 5px);
-          top: 50%;
-          transform: translateX(0) translateY(-50%);
-        `
-      default:
-        return ''
-    }
-  }}
-`;

package/src/components/DS/tooltip/types.d.ts

@@ -1,21 +0,0 @@
-export type TooltipProps = {
-  trigger?: 'hover' | 'click'
-  children?: React.ReactNode
-  content?: string | React.ReactNode | JSX.Element
-  delay?: number
-  style?: React.CSSProperties
-  className?: string
-  width?: string
-  height?: string
-  onShow?: (event: any) => void
-  onHide?: (event: any) => void
-  direction?:
-    | "top"
-    | "right"
-    | "bottom"
-    | "left"
-    | "top-right"
-    | "top-left"
-    | "bottom-right"
-    | "bottom-left"
-}

package/src/components/EBR/buttons-group/index.d.ts

@@ -1,4 +0,0 @@
-export interface IButtonGroup {
-  children: any
-  active?: boolean
-}

package/src/components/EBR/buttons-group/index.stories.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-
-import Button from '../../buttons'
-import ButtonGroup from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'EBR/ButtonGroup',
-    component: ButtonGroup,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <ButtonGroup {...args} />
-
-export const vertical = Template.bind({})
-vertical.args = {
-    active: '1',
-    children: [
-        <Button value="1" label="Setembro/22" disabled={false} handleClick={() => { alert('Click') }} />,
-        <Button value="2" label="Junho/22" disabled={false} handleClick={() => { alert('Click') }} />,
-        <Button value="3" label="Março/22" disabled={false} handleClick={() => { alert('Click') }} />
-    ]
-}

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

@@ -1,31 +0,0 @@
-import React from 'react'
-import {
-  IButtonGroup
-} from './index.d'
-
-import {
-  ButtonGroupWrapper
-} from './styles'
-
-export default function ButtonGroup({
-  children,
-  active
-}: IButtonGroup) {
-
-  const ButtonGroupProps = {
-    type: 'group',
-    variant: 'primary'
-  }
-
-  return (
-    <ButtonGroupWrapper className="buttons-group">
-      {React.Children.map(children, (child) =>
-        React.cloneElement(child, {
-          ...ButtonGroupProps,
-          active: child.props.value === active,
-          length: children.length
-        })
-      )}
-    </ButtonGroupWrapper>
-  )
-}

package/src/components/EBR/buttons-group/styles.ts

@@ -1,7 +0,0 @@
-import styled from 'styled-components'
-
-export const ButtonGroupWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`

package/src/components/EBR/group-statistics/groupStatistics.d.ts

@@ -1,6 +0,0 @@
-export interface IGroupStatistics {
-    objectStatistics: any,
-    styles?: any,
-    loading?: boolean,
-    hasShadow?: boolean,
-}

package/src/components/EBR/group-statistics/groupStatistics.stories.tsx

@@ -1,89 +0,0 @@
-import React from 'react'
-
-import GroupStatistics from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'EBR/GroupStatistics',
-    component: GroupStatistics,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <GroupStatistics {...args} />
-
-
-export const eightItems = Template.bind({})
-eightItems.args = {    
-    objectStatistics: [
-        { featuredNumber: '400', description: 'Trilhas concluídas' },
-        { featuredNumber: '96%', description: 'Engajamento com o consumo de conteúdo' },
-        { featuredNumber: '85%', description: 'Satisfação com o conteúdo apresentado' },
-        { featuredNumber: '84%', description: 'Indicariam o programa' },
-        { featuredNumber: '400', description: 'Trilhas concluídas' },
-        { featuredNumber: '96%', description: 'Engajamento com o consumo de conteúdo' },
-        { featuredNumber: '85%', description: 'Satisfação com o conteúdo apresentado' },
-        { featuredNumber: '84%', description: 'Indicariam o programa' },
-    ], 
-    loading: false, 
-    hasShadow: true,
-    styles: {width: '1280px'}
-}
-
-
-export const sevenItems = Template.bind({})
-sevenItems.args = {    
-    objectStatistics: [
-        { featuredNumber: '400', description: 'Trilhas concluídas' },
-        { featuredNumber: '96%', description: 'Engajamento com o consumo de conteúdo' },
-        { featuredNumber: '85%', description: 'Satisfação com o conteúdo apresentado' },
-        { featuredNumber: '84%', description: 'Indicariam o programa' },
-        { featuredNumber: '400', description: 'Trilhas concluídas' },
-        { featuredNumber: '96%', description: 'Engajamento com o consumo de conteúdo' },
-        { featuredNumber: '85%', description: 'Satisfação com o conteúdo apresentado' },
-    ], 
-    loading: false, 
-    hasShadow: true,
-    styles: {width: '1280px'}
-}
-
-export const sixItems = Template.bind({})
-sixItems.args = {    
-    objectStatistics: [
-        { featuredNumber: '400', description: 'Trilhas concluídas' },
-        { featuredNumber: '96%', description: 'Engajamento com o consumo de conteúdo' },
-        { featuredNumber: '85%', description: 'Satisfação com o conteúdo apresentado' },
-        { featuredNumber: '84%', description: 'Indicariam o programa' },
-        { featuredNumber: '96%', description: 'Engajamento com o consumo de conteúdo' },
-        { featuredNumber: '85%', description: 'Satisfação com o conteúdo apresentado' },
-    ], 
-    loading: false, 
-    hasShadow: true,
-    styles: {width: '1280px'}
-}
-
-export const fiveItems = Template.bind({})
-fiveItems.args = {    
-    objectStatistics: [
-        { featuredNumber: '400', description: 'Trilhas concluídas' },
-        { featuredNumber: '328', description: 'Participantes' },
-        { featuredNumber: '96%', description: 'Engajamento com o consumo de conteúdo' },
-        { featuredNumber: '85%', description: 'Satisfação com o conteúdo apresentado' },
-        { featuredNumber: '84%', description: 'Indicariam o programa' },
-    ], 
-    loading: false, 
-    hasShadow: true,
-    styles: {width: '1280px'}
-}
-
-export const fourItems = Template.bind({})
-fourItems.args = {    
-    objectStatistics: [
-        { featuredNumber: '400', description: 'Trilhas concluídas' },
-        { featuredNumber: '96%', description: 'Engajamento com o consumo de conteúdo' },
-        { featuredNumber: '85%', description: 'Satisfação com o conteúdo apresentado' },
-        { featuredNumber: '84%', description: 'Indicariam o programa' },
-    ], 
-    loading: false, 
-    hasShadow: true,
-    styles: {width: '1280px'}
-}

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