frst-components 0.20.1 → 0.20.2

package/src/components/DS/select/styles/StylesSelect.tsx

@@ -1,100 +0,0 @@
-import styled, { css } from 'styled-components'
-
-interface PropsSelect {
-  error?: boolean
-}
-
-export const DropDownContainer = styled.div<PropsSelect>`
-  width: 100%;
-  height: 48px;
-  background: #ffffff;
-  border: 1px solid #e8e8e8;
-  border-radius: 4px;
-  position: relative;
-  ${(props) =>
-    props.error &&
-    css`
-      background: ${({ theme }) => theme.colors.inputError};
-      border: 1px solid ${({ theme }) => theme.colors.messageError1};
-    `}
-`
-export const EventOverlay = styled.div`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background: transparent;
-  cursor: pointer;
-  z-index: 2;
-`
-export const DropDownHeader = styled.div<PropsSelect>`
-  font-weight: 500;
-  font-size: 1.3rem;
-  color: #3faffa;
-  background: #ffffff;
-  cursor: pointer;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  padding-left: 16px;
-  border-radius: 4px;
-
-  p {
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 19px;
-    color: #a6a6a6;
-  }
-  ${(props) =>
-    props.error &&
-    css`
-      background: ${({ theme }) => theme.colors.inputError};
-      p {
-        color: ${({ theme }) => theme.colors.linkError};
-      }
-    `}
-`
-export const DropDownListContainer = styled('div')``
-
-export const DropDownList = styled('ul')`
-  padding: 0;
-  margin: 0;
-  background: #ffffff;
-  border: 2px solid #e5e5e5;
-  box-sizing: border-box;
-  color: #3faffa;
-  font-size: 1.3rem;
-  font-weight: 500;
-  position: absolute;
-  width: 100%;
-  z-index: 5;
-
-  &:first-child {
-    padding-top: 0.8em;
-  }
-`
-export const DropDownHeaderIcon = styled('div')<{ open: boolean }>`
-  position: absolute;
-  right: 16.48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.1s ease-in-out;
-
-  ${({ open }) =>
-    open === true &&
-    css`
-      transform: rotate(180deg);
-    `}
-`
-export const SelectedOption = styled('p')`
-  font-family: 'Work Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 19px;
-  color: #222222 !important;
-`

package/src/components/DS/tooltip/index.stories.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import Tooltip from './index';
-import { TooltipProps } from './types'
-
-export default {
-  title: 'DS/Tooltip',
-  component: Tooltip,
-} as Meta;
-
-const Template: Story<TooltipProps> = (args) => (
-  <Tooltip
-    content="Este desafio consta como verificado pois o objetivo dele está alinhado às metas da empresa a qual ele pertence"
-    direction="bottom"
-    trigger='click'
-    width='361px'
-    height='54px'
-    style={{ top: '10px' }}
-  >
-    <button>Hover me</button>
-  </Tooltip>
-);
-
-export const Default = Template.bind({});

package/src/components/DS/tooltip/index.tsx

@@ -1,81 +0,0 @@
-import { useState, useRef, useEffect } from "react"
-import { TooltipWrapper, TooltipGhost, TooltipTip } from './styles'
-import { TooltipProps } from './types'
-
-function Tooltip({
-  content,
-  direction,
-  children,
-  trigger = 'hover',
-  delay = 400,
-  style,
-  className,
-  width,
-  height,
-  onShow,
-  onHide
-}: TooltipProps ): JSX.Element {
-  let shpwTimeout: any
-  let hideTimeout: any
-  const [active, setActive] = useState(false)
-  const [renderHeight, setRenderHeight] = useState('51px')
-  const ref = useRef(null)
-
-  useEffect(() => {
-    if(!ref.current || !active) return
-
-    if(height) setRenderHeight(height)
-    if(renderHeight === '51px') setRenderHeight(ref.current.clientHeight + 'px')
-  }, [active])
-
-  const showTip = () => {
-    const timeoutDelay = trigger === 'click' ? 0 : delay
-
-    shpwTimeout = setTimeout(() => {
-      setActive(true)
-      if(onShow) onShow({ active: true })
-    }, timeoutDelay)
-  }
-
-  const hideTip = () => {
-    clearInterval(shpwTimeout)
-    clearInterval(hideTimeout)
-
-    hideTimeout = setTimeout(() => {
-      ref.current = null
-      setRenderHeight('51px')
-      setActive(false)
-      if(onHide) onHide({ active: false })
-    }, 1000)
-  }
-
-  return (
-    <TooltipWrapper
-      onMouseEnter={trigger === 'hover' ? showTip : undefined}
-      onMouseLeave={hideTip}
-      onClick={trigger === 'click' ? showTip : undefined}
-    >
-      {children}
-      {active && (
-        <TooltipGhost
-          direction={direction || 'top'}
-          className={className}
-          width={width || '100px'}
-          height={height ? height : renderHeight || '100px'}
-          ref={ref}
-        >
-          <TooltipTip
-            direction={direction || 'top'}
-            style={style}
-            width={width || '100px'}
-            height={height ? height : renderHeight || '100px'}
-          >
-            {content}
-          </TooltipTip>
-        </TooltipGhost>
-      )}
-    </TooltipWrapper>
-  )
-}
-
-export default Tooltip

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