frst-components 0.20.0

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,106 @@
+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')
+  }
+}