frst-components 0.20.1 → 0.20.2

package/src/components/LXP/cardLearningCicle/cardLearningCicleStyle.ts

@@ -1,118 +0,0 @@
-import styled, { css } from 'styled-components'
-
-interface PropsStyleCardLearningCicle {
-  active: boolean
-  activeTwo: boolean
-  activeThree: boolean
-  activeFour: boolean
-}
-
-export const Container = styled.div`
-  width: 18.5rem;
-  height: 27.063rem;
-  border-right: 1px solid ${({ theme }) => theme.colors.borderPrimary};
-  background-color: #f7f9fc;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 24px;
-`
-export const ContainerStepNumbers1 = styled.div<PropsStyleCardLearningCicle>`
-  widht: 12.5rem;
-  height: 3.875rem;
-  display: flex;
-  flex-direcitono: row;
-  aling-items: center;
-  gap: 0.9rem;
-  cursor: pointer;
-
-  .step1 {
-    font-family: Work Sans;
-    font-size: 24px;
-    font-weight: 700;
-    line-height: 31px;
-    letter-spacing: 0.01em;
-    ${(props) =>
-      props.active &&
-      css`
-        color: ${({ theme }) => theme.colors.neutralsGrey2};
-      `}
-  }  
-`
-export const ContainerStepNumbers2 = styled.div<PropsStyleCardLearningCicle>`
-  widht: 12.5rem;
-  display: flex;
-  flex-direcitono: row;
-  aling-items: center;
-  gap: 0.9rem;
-  cursor: pointer;
-
-  .step2 {
-    font-family: Work Sans;
-    font-size: 24px;
-    font-weight: 700;
-    line-height: 31px;
-    letter-spacing: 0.01em;
-    color: ${({ theme }) => theme.colors.neutralsGrey4};
-  }
-
-  .txt2 {
-    font-family: PT Sans;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 18px;
-    color: ${({ theme }) => theme.colors.neutralsGrey2};
-    display: none;   
-  }  
-`
-export const ContainerStepNumbers3 = styled.div<PropsStyleCardLearningCicle>`
-  widht: 12.5rem;
-  display: flex;
-  flex-direcitono: row;
-  aling-items: center;
-  gap: 0.9rem;
-  cursor: pointer;
-
-  .step3 {
-    font-family: Work Sans;
-    font-size: 24px;
-    font-weight: 700;
-    line-height: 31px;
-    letter-spacing: 0.01em;
-    color: ${({ theme }) => theme.colors.neutralsGrey4};
-  }
-
-  .txt3 {
-    font-family: PT Sans;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 18px;
-    color: ${({ theme }) => theme.colors.neutralsGrey2};
-    display: none;   
-  }
-`
-export const ContainerStepNumbers4 = styled.div<PropsStyleCardLearningCicle>`
-  widht: 12.5rem;
-  display: flex;
-  flex-direcitono: row;
-  aling-items: center;
-  gap: 0.9rem;
-  cursor: pointer;
-
-  .step4 {
-    font-family: Work Sans;
-    font-size: 24px;
-    font-weight: 700;
-    line-height: 31px;
-    letter-spacing: 0.01em;
-    color: ${({ theme }) => theme.colors.neutralsGrey4};
-  }
-  .txt4 {
-    font-family: PT Sans;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 18px;
-    color: ${({ theme }) => theme.colors.neutralsGrey2};
-    display: none;   
-  }
-`

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

@@ -1,129 +0,0 @@
-import '../../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './cardLearningCicleStyle'
-import { ITranlateCardLearningCicle } from './cardLearningCicle'
-import * as Icons from '../../../shared/icons'
-import { useState } from 'react'
-
-export default function CardLearningCicle(props: ITranlateCardLearningCicle) {
-
-    const [active, setActive] = useState(false)
-    const [activeTwo, setActiveTwo] = useState(false)
-    const [activeThree, setActiveThree] = useState(false)
-    const [activeFour, setActiveFour] = useState(false)
-    const [counterRender, setCounterRender] = useState(0)
-
-    function handleClickCheckStep1() {
-        !active ? setActive(true) : setActive(false)
-        setActiveTwo(false)
-        setActiveThree(false)
-        setActiveFour(false)
-        props.handleClick()     
-    }
-
-    function handleClickCheckStep2() {
-        !activeTwo ? setActiveTwo(true) : setActiveTwo(false)
-        setActive(true)
-        props.handleClick()     
-    }
-
-    function handleClickCheckStep3() {
-        !activeThree ? setActiveThree(true) : setActiveThree(false)
-        setActive(true)
-        setActiveTwo(true)
-        props.handleClick()     
-    }
-
-    function handleClickCheckStep4() {
-        !activeFour ? setActiveFour(true) : setActiveFour(false)
-        setActive(true)
-        setActiveTwo(true)
-        setActiveThree(true)       
-        props.handleClick()     
-    }
-    
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            <Styles.Container>
-                <>
-                    <Styles.ContainerStepNumbers1 active={active} activeTwo activeThree activeFour onClick={handleClickCheckStep1}>
-                        {!active ?
-                            <div>
-                                <Icons.StepCicleOne />
-                            </div>
-                            :
-                            <div>
-                                <Icons.StepCheckInCicle />
-                            </div>
-                        }
-                        <p className='step1'>{props.titleStep1 ? props.titleStep1 : 'Criar ciclo de Aprendizagem'}</p>
-                    </Styles.ContainerStepNumbers1>
-                </>
-                <>
-                    <Styles.ContainerStepNumbers2 activeTwo={activeTwo} active={active} activeThree activeFour onClick={handleClickCheckStep2}>
-                        {!activeTwo ?
-                            <div>
-                                <Icons.StepCicleTwo fill={!active ? '#9C9C9C' : "#0645AD"} />
-                            </div>
-                            :
-                            <div>
-                                <Icons.StepCheckInCicle />
-                            </div>
-                        }
-                        {!activeTwo ?
-                            <div>
-                            <p className='step2' style={{ color: !active ? '#9c9c9c' : '#000000' }}>{props.titleStep2 ? props.titleStep2 : 'Grupo de participantes'}</p>
-                            <p className='txt2'style={{display: !active ? 'none' : 'block'}}>{props.txtStep2 ? props.txtStep2 : 'Crie ou selecione um grupo de participantes para relacioná-lo a um ou mais conteúdos.'}</p>
-                            </div>
-                            :
-                            <p className='step2' style={{ color: !activeTwo ? '#000000' : '#444444' }}>{props.titleStep2 ? props.titleStep2 : 'Grupo de participantes'}</p>
-                        }
-                    </Styles.ContainerStepNumbers2>
-                </>
-                <>
-                    <Styles.ContainerStepNumbers3 activeTwo={activeTwo} active activeThree={activeThree} activeFour onClick={handleClickCheckStep3}>
-                        {!activeThree ?
-                            <div>
-                                <Icons.StepCicleThree fill={!activeTwo ? '#9C9C9C' : "#0645AD"} />
-                            </div>
-                            :
-                            <div>
-                                <Icons.StepCheckInCicle />
-                            </div>
-                        }
-                        {!activeThree ?
-                            <div>
-                            <p className='step3' style={{ color: !activeTwo ? '#9c9c9c' : '#000000' }}>{props.titleStep3 ? props.titleStep3 : 'Conteúdos criados'}</p>
-                            <p className='txt3' style={{ display: !activeTwo ? 'none' : 'block' }}>{props.txtStep3 ? props.txtStep3 : 'Selecione um ou mais conteúdos para o grupo selecionado ver.'}</p>
-                            </div>
-                            :
-                            <p className='step3' style={{ color: !activeThree ? '#000000' : '#444444' }}>{props.titleStep3 ? props.titleStep3 : 'Conteúdos criados'}</p>
-                        }
-                    </Styles.ContainerStepNumbers3>
-                </>
-                <>
-                    <Styles.ContainerStepNumbers4 activeTwo active activeThree={activeThree} activeFour={activeFour} onClick={handleClickCheckStep4}>
-                        {!activeFour ?
-                            <div>
-                                <Icons.StepCicleFour fill={!activeThree ? '#9C9C9C' : "#0645AD"} />
-                            </div>
-                            :
-                            <div>
-                                <Icons.StepCheckInCicle />
-                            </div>
-                        }
-                        {!activeFour ?
-                            <div>
-                            <p className='step4' style={{ color: !activeThree ? '#9c9c9c' : '#000000' }}>{props.titleStep4 ? props.titleStep4 : 'Calendário'}</p>
-                            <p className='txt4' style={{ display: !activeThree ? 'none' : 'block' }}>{props.txtStep4 ? props.txtStep4 : 'Selecione a data de início destes conteúdos para este grupo.'}</p>
-                            </div>                           
-                            :
-                            <p className='step4' style={{ color: !activeThree ? '#000000' : '#444444' }}>{props.titleStep4 ? props.titleStep4 : 'Calendário'}</p>
-                        }
-                    </Styles.ContainerStepNumbers4>
-                </>
-            </Styles.Container>
-        </ThemeProvider>
-    );
-}

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

@@ -1,6 +0,0 @@
-import React from "react"
-export interface IColorpicker {
-    width?: string,
-    height?: string,
-    color?: string
-}

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

@@ -1,18 +0,0 @@
-import React from "react";
-import Colorpicker from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'LXP/Colorpicker',
-    component: Colorpicker,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Colorpicker {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    width: 256,
-    height: 165,
-    color: '#FFFFFF',
-}

package/src/components/LXP/colorpicker/colorpickerStyles.ts

@@ -1,46 +0,0 @@
-import styled from 'styled-components'
-
-interface Colorpicker{
-  width?: string,
-  height?: string,
-
-}
-export const Container = styled.span<Colorpicker>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  width: ${props => props.width || '147px'};
-  height: ${props => props.height || '48px'};
-  padding: 12px 16px;
-  border: 1px solid #E0E0E0;
-  border-radius: 8px;
-  background: #EBEBEB;
-  
-
-  input[type="color"] {
-    -webkit-appearance: none;
-    border: none;
-    width: auto;
-    height: auto;
-    cursor: pointer;
-    background: none;
-    &::-webkit-color-swatch-wrapper {
-      padding: 0;
-      width: 23px;
-      height: 23px;
-    }
-    &::-webkit-color-swatch {
-      border: 1px solid #E0E0E0;
-      border-radius: 4px;
-      padding: 0;
-    }
-  }
-
-  input[type="text"] {
-    border: none;
-    width: 60px;
-    height: 18px;
-    font-size: 14px;
-    background: #EBEBEB;
-  }
-`;

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

@@ -1,30 +0,0 @@
-import '../../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './colorpickerStyles'
-import { IColorpicker } from './colorpicker'
-import React, { useState } from 'react'
-
-
-
-const ColorPicker = props => {
-  return (
-    <Styles.Container>
-      <input type="text" {...props} />
-      <input type="color" {...props} />
-    </Styles.Container>
-  );
-};
-export default function Colorpicker({ width, height, color, }: IColorpicker) {
-  const [state, updateState] = useState(color);
-
-  const handleInput = e => {
-    updateState(e.target.value);
-    color= state
-  };
-  return(
-    <ThemeProvider theme={FRSTTheme}>
-       <ColorPicker onChange={handleInput} value={state} width={width} height={height}/>
-    </ThemeProvider>
-  )
-}

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

@@ -1,12 +0,0 @@
-import React from 'react'
-
-export interface IcontentSwitcher {
-  label?: string
-  handleClick: () => void
-  style?: React.CSSProperties
-  startIcon?: any
-  sizeIcon?: string
-  startIconSelected?: any
-  isActive?: boolean
-  idButtonSwitcher: string
-}

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

@@ -1,26 +0,0 @@
-import React from 'react'
-import ContentSwitcher 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/ContentSwitcher',
-  component: ContentSwitcher
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <ContentSwitcher {...args} />
-let isActive = false
-export const primary = Template.bind({})
-primary.args = {
-  label: 'Criar conteúdo',
-  startIcon: <Icons.Course />,
-  startIconSelected: <Icons.Course fill={'#FFFFFF'} />,
-  handleClick: () => {
-    isActive = true
-    console.log(isActive)
-    alert(isActive)
-  },
-  isActive: isActive,
-  idButtonSwitcher: 'idBotao'
-}

package/src/components/LXP/contentSwitcher/contentSwitcherStyle.ts

@@ -1,92 +0,0 @@
-import styled, { css } from 'styled-components'
-
-export const Container= styled.div<{sizeIcon}>`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;    
-    width: 180px;
-    height: 176px;
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
-    cursor: pointer;
-    border-radius: 8px;
-    box-sizing: border-box;
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 20px;
-    line-height: 23px;
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    
-    & > svg {        
-        max-height: ${({sizeIcon}) => sizeIcon ? sizeIcon:'64px'};
-        height: 100%;
-        width: auto;
-    }
-
-    &:hover{
-        box-shadow: 0px 15px 5px -15px;  
-    }
-`
-export const ContentSwitcher= styled.button<{}>`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    padding: 0 20px 0 20px!important;    
-    width: 180px;
-    height: 176px;
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
-    cursor: pointer;
-    border-radius: 8px;
-    box-sizing: border-box;
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 20px;
-    line-height: 23px;
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-         
-    & > svg {        
-        height: 64px;
-        width: 64px;       
-    }
-
-    &:hover{
-        box-shadow: 0px 15px 5px -15px;    
-    }
-`;
-export const ContentSwitcherSelected= styled.button<{sizeIcon}>`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    padding: 0 20px 0 20px!important;
-    width: 180px;
-    height: 176px;
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
-    cursor: pointer;
-    border-radius: 8px;
-    box-sizing: border-box;
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 20px;
-    line-height: 23px;
-    background-color: ${({ theme }) => theme.colors.primary1};
-    color: ${({ theme }) => theme.colors.shadeWhite};
-
-    & > svg {        
-        max-height: ${({sizeIcon}) => sizeIcon ? sizeIcon:'64px'};
-        height: 100%;
-        width: auto;
-        stroke: #FFFFFF;       
-    }
-
-    /* &:hover{
-        background-color: ${({ theme }) => theme.colors.primary3} ;
-    } */
-`;

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

@@ -1,33 +0,0 @@
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './contentSwitcherStyle'
-import { IcontentSwitcher } from './contentSwitcher'
-
-export default function ContentSwitcher({
-  label,
-  handleClick,
-  style,
-  sizeIcon,
-  startIcon,
-  startIconSelected,
-  isActive,
-  idButtonSwitcher
-}: IcontentSwitcher) {
-  return (
-    <ThemeProvider theme={FRSTTheme}>
-      <Styles.Container sizeIcon={sizeIcon} style={{ ...style }}>
-        {!isActive ? (
-          <Styles.ContentSwitcher onClick={handleClick} id={idButtonSwitcher}>
-            {startIcon}
-            {label}
-          </Styles.ContentSwitcher>
-        ) : (
-          <Styles.ContentSwitcherSelected sizeIcon={sizeIcon} onClick={handleClick} id={idButtonSwitcher}>
-            {startIconSelected}
-            {label}
-          </Styles.ContentSwitcherSelected>
-        )}
-      </Styles.Container>
-    </ThemeProvider>
-  )
-}

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

@@ -1,21 +0,0 @@
-import React from 'react'
-//import * as Icons from '../../shared/icons'
-import { content } from '../../shared/icons'
-
-type enumVariant = 'individualCourse' | 'trilha'
-
-export interface IContentThumbnails {
-  label?: string
-  src?: string
-  disabled?: boolean
-  icon?: any
-  handleClick?: (item) => void
-  onChange?: () => void
-  handleReloadItens?: () => void
-  contentList?: []
-  variant?: enumVariant
-  title?: string
-  isOpen?: boolean
-  removeContentList?: (item) => void
-  onChangeOrder?: (listOrder) => void
-}

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

@@ -1,106 +0,0 @@
-import React from 'react'
-import { typeContent } from './index'
-
-import ContentThumbnails from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'LXP/ContentThumbnails',
-  component: ContentThumbnails
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <ContentThumbnails {...args} />
-
-export const IndividualCourseWithActivity = Template.bind({})
-IndividualCourseWithActivity.args = {
-  variant: 'individualCourse',
-  label: 'Label',
-  src: 'https://i.gyazo.com/7ccff0252cbd94f10bae665be4456854.png',
-  disabled: false,
-  title: 'Name of the Content',
-  isOpen: true,
-  contentList: [
-    {
-      title: 'Introdução ao curso',
-      type: typeContent.Content,
-      id: 'abc'
-    },
-    {
-      title: 'Título do Conteúdo',
-      type: typeContent.Content,
-      id: 'ade'
-    },
-    {
-      title: 'Título do Vídeo',
-      type: typeContent.Video,
-      id: 'tsd'
-    },
-    {
-      title: 'Título de Podcast',
-      type: typeContent.PodCast,
-      id: 'psf'
-    },
-    {
-      title: 'Título do Quiz',
-      type: typeContent.QuizSucessError,
-      id: 'ling'
-    },
-    {
-      title: 'Título do questionário teste de duas linhas',
-      type: typeContent.Quiz,
-      id: 'jkr'
-    },
-    {
-      title: 'Título do Certificado',
-      type: typeContent.Certificate,
-      id: 'fsp'
-    }
-  ],
-  handleClick: () => {
-    alert('Click')
-  },
-  handleReloadItens: () => {
-    alert('Click 2')
-  },
-  removeContentList: () => {
-    alert('excluiu!')
-  },
-  onChangeOrder: (list) => console.log(list)
-}
-export const IndividualCourseWithNoActivity = Template.bind({})
-IndividualCourseWithNoActivity.args = {
-  variant: 'individualCourse',
-  label: 'Label',
-  src: '',
-  disabled: false,
-  title: 'Name of the Content',
-  handleClick: () => {
-    alert('Click')
-  },
-  handleReloadItens: () => {
-    alert('Click 2')
-  },
-  removeContentList: () => {
-    alert('excluiu!')
-  },
-  onChangeOrder: (list) => console.log(list)
-}
-
-export const Trilha = Template.bind({})
-Trilha.args = {
-  variant: 'trilha',
-  label: 'Label',
-  src: '',
-  disabled: false,
-  title: 'Nome do curso',
-  contentList: [
-    {
-      title: 'Introdução ao curso',
-      type: typeContent.Content
-    }
-  ],
-  handleClick: () => {
-    alert('Click')
-  }
-}