frst-components 0.20.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,114 @@
+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;
+`