frst-components 0.20.1 → 0.20.3

package/src/components/LXP/tooltip/tooltipStyle.ts

@@ -1,114 +0,0 @@
-import styled from 'styled-components'
-
-interface ParticipantCardI {
-    size?: string,
-    src?: any,
-    disabled?: boolean,
-}
-
-
-export const Tooltip = styled.div<{position}>`
-    position: relative;
-    display: inline-block;
-    
-    &:after #tooltipinfo {
-        content: "";
-        position: absolute;
-
-        ${({position}) => {
-            switch(position) {
-                case 'top':
-                    return 'top: 100%; left: 50%;'
-
-                case 'bottom':
-                    return 'bottom: 100%; left: 50%;'
-                
-                case 'right':
-                    return 'top: 50%; right: 100%;'
-
-                case 'left':
-                    return 'top: 50%; left: 100%;'
-            }
-        }}
-        margin-left: -5px;
-        border-width: 5px;
-        border-style: solid;
-        border-color: black transparent transparent transparent;
-    }
-
-    &:hover #tooltipinfo {
-        visibility: visible;
-    }
-
-    &:hover {
-        visibility: visible;
-    }
-`
-
-
-export const Tooltiptext = styled.div<{position}>`
-    visibility: hidden;
-    width: 156px;
-    background-color: #fff;
-    border: solid 1px #BDBDBD;
-
-    padding: 8px! important;
-    padding-bottom: 4px;
-
-    word-wrap: break-word;
-
-    color: #757575;
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 18px;
-
-    text-align: center;
-    border-radius: 6px;
-    padding: 5px 0;
-    position: absolute;
-    z-index: 1;
-    ${({position}) => {
-        switch(position) {
-            case 'top':
-                return 'bottom: 160%; left: 50%;'
-            case 'bottom':
-                return 'top: 160%; left: 50%;'
-            case 'right':
-                return 'top: -5px; left: 220%;'
-            case 'left':
-                return 'top: -5px; right: 120%;'
-        }
-    }}
-
-    margin-left: -70px;
-
-    -webkit-box-shadow: 10px 35px 40px -8px rgba(0,0,0,0.31);
-    -moz-box-shadow: 10px 35px 40px -8px rgba(0,0,0,0.31);
-    box-shadow: 10px 35px 40px -8px rgba(0,0,0,0.31);
-
-    &:after {
-        content: "";
-        width: 0;
-        height: 0;
-        
-        ${({position}) => {
-            switch(position) {
-                case 'top':
-                    return 'left: 48%; bottom: -6px;'
-                case 'bottom':
-                    return 'left: 48%; top: -6px;'
-                case 'right':
-                    return 'top: 35%; left: -6px; border: 5px solid #fff !important;'
-                case 'left':
-                    return 'top: 35%; right: -6px; border: 5px solid #fff !important;'
-            }
-        }}
-        position: absolute;
-    
-        border: 6px solid #fff;
-        transform: rotate(135deg);
-        transition: border 0.3s ease-in-out;
-      }
-`

package/src/components/LXP/urlAddress/index.tsx

@@ -1,30 +0,0 @@
-import '../../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './urlAddressStyle'
-import { IURLAddress } from './urlAddress'
-import Button from "@components/buttons"
-import * as Icons from '../../../shared/icons'
-
-export default function URLAddress({ variant, url, onClickEncurta, onClickCopia }: IURLAddress) {
-
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            <Styles.Container>
-                <Styles.ContainerLink>
-                    <Styles.TypographyCanal>Endereço do seu canal</Styles.TypographyCanal>
-                    <Styles.BoxLink>
-                        <Styles.TypographyLink>{url}</Styles.TypographyLink>
-                        <Styles.TypographyMsn>
-                            Este é o endereço do seu site LXP, ele sempre pode ser acessado dese domínio e nunca expira.
-                        </Styles.TypographyMsn>
-                    </Styles.BoxLink>
-                </Styles.ContainerLink>
-                <Styles.ContainerButton>
-                    <Button handleClick={onClickEncurta} label={'Encurtar link'} variant={'secondary'} startIcon={<Icons.Link fill={'#FF4D0D'} />} />
-                    <Button handleClick={onClickCopia} label={'Copiar link'} variant={'secondary'} startIcon={<Icons.CopyPaste fill={'#FF4D0D'} />} />
-                </Styles.ContainerButton>
-            </Styles.Container>
-        </ThemeProvider>
-    );
-}

package/src/components/LXP/urlAddress/urlAddress.d.ts

@@ -1,10 +0,0 @@
-import React from "react"
-
-type enumVariant = 'default' | 'customizedLink'
-
-export interface IURLAddress {
-    variant?: enumVariant;
-    url?: string,   
-    onClickEncurta?: () => void,
-    onClickCopia?: () => void, 
-}

package/src/components/LXP/urlAddress/urlAddress.stories.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-
-import URLAddress from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'LXP/URLAddress',
-    component: URLAddress,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <URLAddress {...args} />
-
-export const URLAdress = Template.bind({})
-URLAdress.args = {
-    variant: 'default',
-    url: 'https://www.frstfalconi.com/nomedocanal',        
-    onClickEncurta: () => { alert('Encurta Link') },
-    onClickCopia: () => { alert('Copia') }
-}
-

package/src/components/LXP/urlAddress/urlAddressStyle.ts

@@ -1,61 +0,0 @@
-import styled, { css } from 'styled-components'
-
-export const Container = styled.div`
-    width: 100%;
-    min-height: 169px;    
-    background: #FFFDEE;
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    align-items: center;
-    padding-left: 120px;
-    gap: 40px;
-`
-export const ContainerLink = styled.div`
-    margin: 0;
-`
-export const TypographyCanal = styled.p`
-    margin-bottom: 16px;
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 19px;
-    color: ${({ theme }) => theme.colors.primary1};
-`
-export const BoxLink = styled.div`
-    width: 100%;
-    min-height: 63px;
-    border-radius: 8px;
-    border: 1px solid ${({ theme }) => theme.colors.secondary2};
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    padding-top: 11px;
-    padding-left: 13px;
-    padding-right: 30px;
-    margin-right: 10px;
-`
-export const TypographyLink = styled.p`
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 21px;
-    color: ${({ theme }) => theme.colors.linkOnfocus};
-`
-export const TypographyMsn = styled.p`
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 16px;
-    color: ${({ theme }) => theme.colors.secondary};
-    padding-top: 8px;
-`
-export const ContainerButton = styled.div`
-    display: flex;
-    flex-direction: row;
-    margin-top: 45px;
-    display: flex;
-    gap: 20px;
-    margin-bottom: 10px;
-`    

package/src/components/LXP/video/Video.d.ts

@@ -1,19 +0,0 @@
-import React from "react"
-
-type enumQuality= '240p' | '360p' | '540p' | '720p' | '1080p' | '2K' | '4K'
-type enumBoolean= 0 | 1 
-
-export interface IVideo {
-    videoId: string,    
-    privateHash: string,
-    width?: number,
-    height?: number,
-    autoplay?: enumBoolean,
-    quality?: enumQuality,
-    timeStart?: string
-    showSpeedControl?: enumBoolean
-    controls?: enumBoolean
-    loop?: enumBoolean
-    keyboard?: enumBoolean
-    style?: React.CSSProperties, 
-}

package/src/components/LXP/video/Video.stories.tsx

@@ -1,95 +0,0 @@
-import React from 'react'
-
-import Video from './index'
-import * as Icons from '../../../shared/icons'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'LXP/Video',
-    component: Video,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Video {...args} />
-
-export const Autoplay = Template.bind({})
-Autoplay.args = {
-    videoId: '730966804',    
-    privateHash: '410e4127a0',
-    autoplay: 1,
-
-}
-
-export const StartTime = Template.bind({})
-StartTime.args = {
-    videoId: '730966804',    
-    privateHash: '410e4127a0',
-    timeStart: '1m10s'
-}
-
-export const HightQuality = Template.bind({})
-HightQuality.args = {
-    videoId: '730966804',    
-    privateHash: '410e4127a0',
-    quality: '720p',
-}
-
-export const SpeedControl = Template.bind({})
-SpeedControl.args = {
-    videoId: '730966804',    
-    privateHash: '410e4127a0',
-    showSpeedControl: 1
-}
-
-export const HiddenControls = Template.bind({})
-HiddenControls.args = {
-    videoId: '730966804',    
-    privateHash: '410e4127a0',
-    controls: 'false'
-}
-
-export const LoopingEnable = Template.bind({})
-LoopingEnable.args = {
-    videoId: '730966804',    
-    privateHash: '410e4127a0',
-    loop: 1
-}
-
-export const KeyboardEvents = Template.bind({})
-KeyboardEvents.args = {
-    videoId: '730966804',    
-    privateHash: '410e4127a0',
-    keyboard: 1,
-}
-
-export const StartTimeAutoplay = Template.bind({})
-StartTimeAutoplay.args = {
-    videoId: '730966804',    
-    privateHash: '410e4127a0',
-    autoplay: 1,
-    timeStart: '1m58s'
-}
-
-export const CustomSize = Template.bind({})
-CustomSize.args = {
-    videoId: '730966804',    
-    privateHash: '410e4127a0',
-    width: 840,
-    height: 542,
-}
-
-export const MobileSize = Template.bind({})
-MobileSize.args = {
-    videoId: '730966804',    
-    privateHash: '410e4127a0',
-    width: 320,
-    height: 150,
-}
-
-export const Centered = Template.bind({})
-Centered.args = {
-    videoId: '730966804',    
-    privateHash: '410e4127a0',
-    style: { width: '640px', height: '342px', margin: 'auto' }
-}
-

package/src/components/LXP/video/index.tsx

@@ -1,22 +0,0 @@
-import '../../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import { IVideo } from './Video'
-
-export default function Video({ videoId, privateHash, width, height, autoplay, quality, timeStart, showSpeedControl, controls, loop, keyboard, style }: IVideo) {
-    
-    return (        
-        <ThemeProvider theme={FRSTTheme}>
-            <div style={{...style}}>
-                <iframe 
-                    src={`https://player.vimeo.com/video/${videoId}?h=${privateHash ? privateHash : ''}&autoplay=${autoplay ? autoplay : 0}&quality=${quality ? quality : '720p'}&speed=${showSpeedControl ? showSpeedControl : 0}&controls=${controls ? controls : 1}&loop=${loop ? loop : 0}&keyboard=${keyboard ? keyboard : 0}&#t=${timeStart ? timeStart : '0m0s'}`} 
-                    width={width ? width : 640}
-                    height={height ? height : 342}
-                    allow="autoplay; fullscreen; picture-in-picture" 
-                    frameBorder="0" 
-                    allowFullScreen 
-                />
-            </div>
-        </ThemeProvider>            
-    )
-}

package/src/components/LogoFRST/index.tsx

@@ -1,34 +0,0 @@
-import '../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../theme'
-import style from "./logoFRST.module.css"
-
-interface ILogoFRST {
-  variant: string 
-  title1Logo?: string
-  title2Logo?: string
-}
-
-export default function LogoFRST(props: ILogoFRST) {
-   
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-          {props.variant === 'light' ? (
-          <div className={style.containerLight} >
-            <img src="https://api-deimos-cdn.frstfalconi.cloud/frst_branco_1.png" alt='LogoFRST'  width={198} height={64}/>
-            <p>{props.title1Logo ? props.title1Logo : 'Pessoas transformam o jogo,'}</p> 
-            <p>{props.title2Logo ? props.title2Logo : 'Resultados transformam as pessoas.'}</p>           
-          </div> 
-          )
-         : props.variant === 'dark' ? (
-         <div className={style.containerDark} >
-            <img src="https://api-deimos-cdn.frstfalconi.cloud/logofrst_black.png" alt='LogoFRST'  width={198} height={64}/>
-            <p>{props.title1Logo ? props.title1Logo : 'Pessoas transformam o jogo,'}</p> 
-            <p>{props.title2Logo ? props.title2Logo : 'Resultados transformam as pessoas.'}</p>          
-          </div>
-         )
-         :null
-        }            
-        </ThemeProvider>
-    )
-}

package/src/components/LogoFRST/logoFRST.module.css

@@ -1,27 +0,0 @@
-
-.containerLight img{
-    margin-bottom: 10px;
-}
-
-.containerLight p {
-    font-family: PT Sans;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 16px;
-    letter-spacing: 0em;
-    text-align: left;
-    color: #fff
-}
-
-.containerDark img{
-    margin-bottom: 10px;
-}
-
-.containerDark p {
-    font-family: PT Sans;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 16px;
-    letter-spacing: 0em;
-    text-align: left;
-}

package/src/components/LogoFRST/logoFRST.stories.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-
-import LogoFRST from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Hall/LogoFRST',
-    component: LogoFRST,    
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <LogoFRST {...args} />
-
-export const LogoLight = Template.bind({})
-LogoLight.args = {
-    variant: 'light',
-}
-
-export const LogoDark = Template.bind({})
-LogoDark.args = {
-    variant: 'dark',
-}
-
-export const LogoLightTranslate = Template.bind({})
-LogoLightTranslate.args = {
-    variant: 'light',
-    title1Logo: 'People transform the game,',
-    title2Logo: 'Results transform people.'
-}
-
-export const LogoDarkTranslate = Template.bind({})
-LogoDarkTranslate.args = {
-    variant: 'dark',
-    title1Logo: 'People transform the game,',
-    title2Logo: 'Results transform people.'
-}
-
-

package/src/components/accordion-tabs/accordionTabs.d.ts

@@ -1,19 +0,0 @@
-import React from "react"
-
-declare type enumTypeAccordion = 'horizontal' | 'vertical';
-declare type enumtypeTab = 'transparent' | 'filled';
-
-export interface IAccordionTabs {
-    titleAccordion?: string,
-    typeAccordion?: enumTypeAccordion,
-    typeButtonTab?: enumtypeTab,
-    titleTabs?: any,
-    activeTabID?: string,
-    handleActiveTab?: (e) => void,
-    hasCleanButton?: boolean,
-    hasCounterTab?: boolean,    
-    textCleanButton?: string,
-    handleActionClean?: (e) => void,
-    children?: any,
-    style?: any
-}

package/src/components/accordion-tabs/accordionTabs.stories.tsx

@@ -1,34 +0,0 @@
-import React from 'react'
-
-import Avatar from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Base/Accordion Tabs',
-    component: Avatar,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Avatar {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    titleAccordion: "Escolha abaixo:",
-    typeAccordion: 'horizontal',
-    typeButtonTab: 'transparent',
-    activeTabID: '0',
-    titleTabs: [
-        {id: 0, title: 'Label', totalCounter: 1, description: 'Tab Internal Title'},
-        {id: 1, title: 'Label', totalCounter: 2},
-        {id: 2, title: 'Label', totalCounter: 0, description: 'Tab Internal Title - 2'},
-        {id: 3, title: 'Label', totalCounter: 3},
-        {id: 4, title: 'Label', totalCounter: 5},
-        {id: 5, title: 'Label', totalCounter: 3},
-    ],
-    handleActiveTab: (e) => alert(e),
-    hasCleanButton: true,
-    handleActionClean: (e) => alert(e),
-    hasCounterTab: true,
-    textCleanButton: "Excluir filtros",
-    children: null
-}

package/src/components/accordion-tabs/accordionTabsStyles.ts

@@ -1,114 +0,0 @@
-import styled from 'styled-components'
-
-
-export const WrapperHeaderTabs = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    width: auto;
-`
-
-export const TitleAccordion = styled.div`
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 21px;
-
-    color: ${({ theme }) => theme.colors.shadeBlack};
-    margin-bottom: 10px;
-`
-
-export const ContainerTitleTabs = styled.div`
-    display: flex;
-    overflow-x: scroll;
-    &::-webkit-scrollbar {
-        display: none;
-    }
-`
-
-export const ContainerCleanAction = styled.div`
-    margin-left: 10px;
-    display: flex;
-    height: fit-content;
-    align-items: center;
-    justify-content: center;
-    white-space: nowrap;
-    cursor: pointer;
-`
-
-export const TextClean = styled.span`
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 21px;
-
-    padding-left: 8px;
-
-    color: ${({ theme }) => theme.colors.linkOnfocus};
-`
-
-export const TitleTabWrapper = styled.div<({typeButton: string, status: boolean})>`
-    display: flex;
-    flex-direction: row;
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 21px;
-
-    color: ${({ theme }) => theme.colors.linkOnfocus};
-    padding-right: 16px;
-    padding-bottom: 16px;
-    cursor: pointer;
-
-    
-
-    ${({ typeButton, status }) => 
-    (typeButton == 'filled') ? (status == true ? 'background-color: #fff; margin-bottom: -1px;' : 'background-color: #bdbdbd') : null};
-`
-
-export const TextTotalTab  = styled.div`
-    margin-left: 2px;
-    margin-right: 2px;
-    color: #FF4D0D;
-`
-
-export const TextTitleTab  = styled.div`
-    white-space: nowrap;
-`
-
-
-
-
-export const WrapperContent  = styled.div<({status: boolean})>`
-
-    background-color: transparent;
-    padding-top: 30px;
-    padding-bottom: 25px;
-    
-    transition: transform 1s;
-
-    ${({status}) => status ? 'height: auto; padding-top: 30px; padding-bottom: 25px;': 'max-height: 0px; padding-top: 0px; padding-bottom: 0px;'};
-    overflow: hidden;
-`
-// border: 1px solid ${({ theme }) => theme.colors.linkDisabled};
-
-export const DropIcon = styled.div<({status: boolean})>`
-    margin-left: 2px;
-    transform: rotate(${({status}) => status ? '180deg': '0deg'});
-    transition: transform 0.3s;
-    transition: all 0.2s ease-in-out;
-`
-
-
-export const TitleCurrentTabOpened = styled.p`
-    font-family: Work Sans;
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 19px;
-
-    margin-bottom: 10px;
-`