frst-components 0.20.1 → 0.20.2

package/src/components/speech-bubble/speechBubbleStyles.ts

@@ -1,121 +0,0 @@
-import { style } from '@mui/system'
-import styled from 'styled-components'
-
-interface ISpeechBubble {
-    height?:string,
-    width?:string,
-    highlight?: boolean,
-    flap?: string
-}
-
-export const SpeechBubbleWrapper = styled.div<ISpeechBubble>`
-    width: ${props => props.width ? props.width  : "100%"};
-    height: ${props => props.height ? props.height  : "auto"};
-    min-height: 20px
-`
-
-export const SpeechBubble = styled.div<ISpeechBubble>`
-    width: auto;
-    height: inherit;
-    min-height: 20px;
-    background-color: ${({theme}) => theme.colors.shadeWhite};
-    border: 1px solid  ${ ({highlight, theme}) => highlight ?   theme.colors.primary1 :  theme.colors.neutralsGrey4 };
-
-    border-radius: ${ (props:any) => getStyleValuesBorder(props) };   
-    margin-left: 12px;
-`
-
-const getStyleValuesBorder = (props: any) => {
-    switch (props.flap) {
-        case 'left-top':
-            return '0 4px 4px 4px;'
-
-        case 'left-bottom':
-            return '4px 4px 4px 0;'
-        
-        default:
-            return '0 4px 4px 4px;'
-    }
-}
-
-
-export const Flap = styled.div<ISpeechBubble>`
-    position: absolute;
-    width: 0px;
-    height: inherit;
-    min-height: 20px;
-    background-color: black;
-    z-index: 2;
-
-    ${ (props:any) => getStylePositionFlap(props) };
-
-`
-
-const getStylePositionFlap = (props: any) => {
-    switch (props.flap) {
-        case 'left-top':
-            return StyleFlapLeftTop(props)
-
-        case 'left-bottom':
-            return StyleFlapLeftBottom(props)
-        
-        default:
-            return StyleFlapLeftTop(props)
-    }
-}
-
-const StyleFlapLeftTop = (props: any) => {
-    let fill = props.theme.colors.shadeWhite
-    let border = props.highlight ? props.theme.colors.primary1 :  props.theme.colors.neutralsGrey4
-
-    return (
-        `&:before {
-            content: "";
-            position: relative;
-            top: 12px;
-            left: 4px;
-            border-top: 12px solid ${border};
-            border-bottom: 0px solid transparent;
-            border-left: 8px solid transparent; 
-            border-right: 0px solid transparent;
-        }
-
-        &:after {
-            content: "";
-            position: relative;
-            top: 13px;
-            left: -2px;
-            border-top: 12px solid ${fill};
-            border-bottom: 0px solid transparent;
-            border-left: 8px solid transparent;
-            border-right: 0px solid transparent;
-        }`)
-}
-
-const StyleFlapLeftBottom = (props: any) => {
-    let fill = props.theme.colors.shadeWhite
-    let border = props.highlight ? props.theme.colors.primary1 :  props.theme.colors.neutralsGrey4
-
-    return (
-        `&:before {
-            content: "";
-            position: absolute;
-            bottom: 0px;
-            left: 4px;
-            border-top: 0px solid transparent;
-            border-bottom: 12px solid ${border};
-            border-left: 8px solid transparent; 
-            border-right: 0px solid transparent;
-        }
-
-        &:after {
-            content: "";
-            position: absolute;
-            bottom: 1px;
-            left: 6px;
-            border-top: 0px solid transparent;
-            border-bottom: 12px solid ${fill};
-            border-left: 8px solid transparent;
-            border-right: 0px solid transparent;
-        }`)
-}

package/src/components/step-card/index.tsx

@@ -1,48 +0,0 @@
-import '../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../theme'
-import { CardWrapper, WrapperHeader, TitleCard, WrapperFooter, AvatarInternal, WrapperAvatar, ButtonMore} from './stepCardStyles'
-import { IStepCard } from './stepCard'
-
-import { Bullseye } from '@shared/icons'
-
-import Avatar from '@components/avatar'
-
-export default function StepCard({ title, onClick, numberPeople, textButtonMore, active, src, width }: IStepCard) {
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            <CardWrapper active={active} onClick={onClick} width={width}>
-                <WrapperHeader>
-                    <Bullseye/>
-                    <TitleCard>{title}</TitleCard>
-                </WrapperHeader>
-                <WrapperFooter>
-                    <WrapperAvatar>
-                        { numberPeople > 0 ? (
-                        <AvatarInternal size={'30px'} zIndex={'1'} margin={'0 0 0 0px'}>
-                            <Avatar size={'28px'} src={src && src.length > 0 ? src[0] : null}/> 
-                        </AvatarInternal>) : (null)}
-                        
-                        { numberPeople > 1 ? (
-                        <AvatarInternal size={'30px'} zIndex={'2'} margin={'0 0 0 -10px'}>
-                            <Avatar size={'28px'} src={src && src.length > 0 ? src[1] : null}/> 
-                        </AvatarInternal>) : (null)}
-
-                        { numberPeople > 2 ? (
-                        <AvatarInternal size={'30px'} zIndex={'3'} margin={'0 0 0 -10px'}>
-                            <Avatar size={'28px'} src={src && src.length > 0 ? src[2] : null}/> 
-                        </AvatarInternal>) : (null)}
-
-                        { (numberPeople-3) > 0 ? (
-                            <AvatarInternal size={'30px'} zIndex={'4'} margin={'0 0 0 -10px'} backgroundColor={'#E8E8E8'} padding={'2px 0 0 0'}>
-                                +{numberPeople-3 > 99 ? 99 : numberPeople-3}
-                            </AvatarInternal>) : (null)}
-                    </WrapperAvatar>
-                    <ButtonMore>
-                        {textButtonMore}
-                    </ButtonMore>
-                </WrapperFooter>
-            </CardWrapper>
-        </ThemeProvider>
-    )
-}

package/src/components/step-card/stepCard.d.ts

@@ -1,12 +0,0 @@
-import React from "react"
-
-export interface IStepCard {
-    title?: string,
-    onClick: () => any,
-    numberPeople?: number,
-    className?: string,
-    textButtonMore?: string,
-    active?: boolean,
-    src?: any,
-    width?: string,
-}

package/src/components/step-card/stepCard.stories.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-
-import StepCard from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Learning Tech/StepCard',
-    component: StepCard,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <StepCard {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    title: "0. Não iniciou",
-    onClick: (e : any) => { alert("StepCard")},
-    numberPeople: 15,
-    className: null,
-    textButtonMore: 'Ver mais',
-    active: false,
-    src: ['https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
-        'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg', 
-        'https://i.pinimg.com/474x/2b/27/2f/2b272f528c3e14054436edd0d8bd2a26.jpg'],
-    width: '343px'
-}

package/src/components/step-card/stepCardStyles.ts

@@ -1,109 +0,0 @@
-import styled from 'styled-components'
-
-interface ICardWrapper {
-    active?: boolean,
-    width?: string
-}
-
-
-interface IAvatarInternal {
-    size?: string,
-    zIndex?: string,
-    margin?: string,
-    padding?: string,
-    backgroundColor?: string
-}
-
-export const CardWrapper = styled.div<ICardWrapper>`
-    min-width: ${({width}) => width ? width : '343px'};
-    min-height: 136px;
-    max-width: ${({width}) => width ? width : '343px'};;
-    max-height: 136px;
-    border-radius: 8px;
-
-
-    background-color: ${({ theme }) => theme.colors.neutralsGrey8};
-    border: 1px solid #E8E8E8;
-
-    ${({ active }) => active === true && `
-        background-color: #FDBC91;
-        border: 1px solid #FF4D0D;
-    `}
-    padding: 24px;
-    margin: 15px;   
-    cursor: pointer;
-`
-
-export const WrapperHeader = styled.div`
-    display: flex;
-    flex-diretion: row;
-    padding-left: 3.2px;
-`
-
-export const TitleCard = styled.div`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 19px;
-    display: flex;
-    align-items: center;
-
-    color: #222222;
-    margin-left: 11.2px;
-`
-
-export const WrapperFooter = styled.div`
-    margin-top: 27px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-`
-
-
-export const WrapperAvatar = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: end;
-`
-
-export const AvatarInternal = styled.div<IAvatarInternal>`
-    box-sizing: border-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-width: ${({ size }) => size };
-    min-height: ${({ size }) => size };
-    max-width: ${({ size }) => size };
-    max-height: ${({ size }) => size };
-    
-    border: 2px solid #FAFAFA;
-    border-radius: 50%;
-    margin: ${({ margin }) => margin };
-    padding: ${({ padding }) => padding };
-    z-index: ${({ zIndex }) => zIndex };
-    background: ${({ backgroundColor }) => backgroundColor ? backgroundColor : '#FAFAFA' };
-
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 12px;
-    line-height: 14px;
-    display: flex;
-    align-items: center;
-    text-align: center;
-
-`
-
-export const ButtonMore = styled.div`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 19px;
-
-    color: #0645AD;
-    cursor: pointer;
-    margin-right: 4px;
-`

package/src/components/tag/base.stories.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-
-import Tag from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Base/Tag',
-  component: Tag
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Tag {...args} />
-
-export const loading = Template.bind({})
-loading.args = {
-  loading: true,
-  inverted: false,
-  selected: false,
-  color: '#000',
-  title: 'Titulo Tag',
-  onClick: () => {}
-}
-
-export const normal = Template.bind({})
-normal.args = {
-  loading: false,
-  inverted: false,
-  selected: false,
-  color: '#000',
-  title: 'Titulo Tag',
-  onClick: () => {}
-}
-
-export const inverted = Template.bind({})
-inverted.args = {
-  loading: false,
-  inverted: true,
-  selected: false,
-  color: '#000',
-  title: 'Titulo Tag',
-  onClick: () => {}
-}
-
-export const colored = Template.bind({})
-colored.args = {
-  loading: false,
-  inverted: false,
-  selected: false,
-  color: '#FF0000',
-  title: 'Titulo Tag',
-  onClick: () => console.log('Clicou na tag')
-}

package/src/components/tag/index.tsx

@@ -1,59 +0,0 @@
-import '../../shared/global.css'
-import { DoubleCheck, AlertCicle } from '@shared/icons'
-
-type iconStatus = 'warning' | 'checked'
-
-interface TagProps {
-  title: string
-  color: string
-  loading?: boolean
-  selected: boolean
-  inverted: boolean
-  iconType?: iconStatus
-  onClick?: () => void
-  /**
-   * @prop {React.CSSProperties} style: Styles de CSS adicional
-   */
-  style?: React.CSSProperties
-}
-
-export default function Tag(props: TagProps) {
-  function getBG() {
-    return props.selected === props.inverted ? props.color : '#fff'
-  }
-
-  function getColor() {
-    return props.selected === props.inverted ? '#fff' : props.color
-  }
-
-  return (
-    <>
-      {props.loading ? (
-        <div className="shimmer tag" style={props.style}>
-          <span style={{ verticalAlign: 'middle', margin: '8px' }}>Shimmer Text</span>
-        </div>
-      ) : (
-        <div
-          className="tag"
-          style={{ border: `1px solid ${getColor()} `, background: getBG(), color: getColor(), ...props.style }}
-        >
-          <span
-            style={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              height: '24px',
-              margin: '0 8px',
-              gap: '8px'
-            }}
-            onClick={props?.onClick}
-          >
-            {props.title}
-            {props.iconType === 'warning' && <AlertCicle fill={getColor()} />}
-            {props.iconType === 'checked' && <DoubleCheck fill={getColor()} />}
-          </span>
-        </div>
-      )}
-    </>
-  )
-}

package/src/components/totalizer-card/index.tsx

@@ -1,29 +0,0 @@
-import '../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../theme'
-import { CardWrapper, TitleCard, AreaCounter, TotalText, TotalNumber, PartialNumber, TitleCardLoading, TotalLoading } from './totalizerCardStyles'
-import { ITotalizerCard } from './totalizerCard'
-
-export default function TotalizerCard({ titleCard, textTotal, numberTotal, numberPartial, loading, className, hasShadow, styles }: ITotalizerCard) {
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-                <CardWrapper hasShadow={hasShadow} style={{...styles}}>
-                    { loading ?                         
-                        <TitleCardLoading className='shimmer'/>
-                        :                    
-                        <TitleCard> { titleCard } </TitleCard>
-                    }
-                    { loading ? 
-                    <TotalLoading className='shimmer'/> :
-                    <AreaCounter>
-                    <TotalText> { textTotal } </TotalText>
-                    <div style={{display: 'flex', flexDirection:'row', alignItems: 'baseline', marginBottom: '16px'}}>
-                        <TotalNumber> { numberTotal } </TotalNumber>
-                        { numberPartial && <PartialNumber>/{ numberPartial } </PartialNumber>}
-                    </div>
-                    </AreaCounter>
-                    }
-                </CardWrapper>
-        </ThemeProvider>
-    )
-}

package/src/components/totalizer-card/totalizerCard.d.ts

@@ -1,10 +0,0 @@
-export interface ITotalizerCard {
-    titleCard: string,
-    textTotal: any,
-    numberTotal: number,
-    numberPartial: number,
-    hasShadow: boolean,
-    loading?: boolean,
-    className?: string,
-    styles?: any,
-}

package/src/components/totalizer-card/totalizerCard.stories.tsx

@@ -1,34 +0,0 @@
-import React from 'react'
-
-import TotalizerCard from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Learning Tech/Totalizer Card',
-    component: TotalizerCard,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <TotalizerCard {...args} />
-
-export const normal = Template.bind({})
-normal.args = {    
-    titleCard: 'Alunos',
-    textTotal: 'Total',
-    numberTotal: 410,
-    loading: false,
-    className: 'opa',
-    styles: { width: '180px'},
-}
-
-export const  withPartialNumberAndShade= Template.bind({})
-withPartialNumberAndShade.args = {    
-    titleCard: 'Licenças operadas',
-    textTotal: 'Total',
-    numberTotal: 410,
-    numberPartial: 420,
-    hasShadow: true,
-    loading: false,
-    className: 'opa',
-    styles: { width: '180px'},
-}

package/src/components/totalizer-card/totalizerCardStyles.ts

@@ -1,97 +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: auto;
-    min-height: auto;
-
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    border: 1px solid #E8E8E8;
-    border-radius: 4px;
-    padding: 20px;
-    ${({hasShadow}) => hasShadow && 'box-shadow: 0px 18px 40px -15px #D3D3D3'};
-`
-
-export const TitleCard = styled.p`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 600;
-    font-size: 20px;
-    line-height: 23px;
-
-    color: #F55E0E;
-    margin-top: 3px;
-    margin-left: 5px;
-`
-
-export const TitleCardLoading = styled.div`
-    height: 22px;
-    width: 100px;
-    border-radius: 8px;
-
-    margin-top: 3px;
-    margin-left: 5px;
-`
-
-
-export const AreaCounter  = styled.div`
-    margin-top: 36px;
-    margin-left: 5px;
-    display: flex;
-    flex-direction: column;
-`
-
-export const TotalText = styled.span`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 300;
-    font-size: 14px;
-    line-height: 16px;
-
-    color: #222222;
-`
-
-export const TotalLoading = styled.div`
-    margin-top: 36px;
-    margin-left: 5px;
-    height: 50px;
-    width: 100px;
-    border-radius: 10px;
-`
-
-export const TotalNumber = styled.p`
-    font-family: 'Work Sans' ;
-    font-style: normal;
-    font-weight: 300;
-    font-size: 48px;
-    line-height: 56px;
-
-    color: #222222;
-    margin-top: -13px;
-`
-
-export const PartialNumber = styled.p`
-    font-family: 'Work Sans' ;
-    font-style: normal;
-    font-weight: 300;
-    font-size: 24px;
-    line-height: 56px;
-
-    color: #222222;
-`