frst-components 0.20.1 → 0.20.3

package/src/components/LXP/participantThumbnails/participantThumbnails.ts

@@ -1,114 +0,0 @@
-import styled, { css } from 'styled-components'
-
-interface HeaderThumbnailsProps {
-  img?: any
-}
-
-export const CardThumbnails = styled.div`
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  color: #000;
-  width: 11rem;
-  margin: 1rem 1.1rem;
-  position: relative;
-  transition: transform 1s;
-  border-radius: 8px;
-
-  h1 {
-    font-family: ${({ theme }) => theme.fonts.textMessageComponentsCardTitle.fontFamily};
-    font-weight: ${({ theme }) => theme.fonts.textMessageComponentsCardTitle.fontWeight};
-    padding-top: 0.5rem;
-    font-size: ${({ theme }) => theme.fonts.textMessageComponentsCardTitle.fontSize};
-    line-height: 23px;
-    word-break: break-word;
-    width: 11rem;
-    white-space: normal;
-    color: ${({ theme }) => theme.fonts.neutralsGrey1};
-  }
-`
-
-export const ThumbnailHeaderImage = styled.div<HeaderThumbnailsProps>`
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  height: 14.9rem;
-  flex-direction: column;
-  position: relative;
-  width: 12rem;
-  color: #fff;
-  background-image: url(${(props) => props.img});
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  border-radius: 8px;
-`
-export const CardThumbnailsHove = styled.div`
-  cursor: pointer;
-  width: 17rem;
-  height: 27.3rem;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-`
-
-export const ThumbnailImageHover = styled.div<HeaderThumbnailsProps>`
-  width: 17rem;
-  height: 14.9rem;
-  background-image: url(${(props) => props.img});
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  border-radius: 8px 8px 0px 0px;
-  box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.15), 0px 35px 25px -20px rgba(34, 34, 34, 0.2);
-`
-
-export const DescriptionThumbnails = styled.div`
-  width: 17.8rem;
-  height: 15.1rem;
-  background-color: #000;
-  border-radius: 0px 0px 8px 8px;
-  display: flex;
-  flex-direction: column;
-  margin-top: -1px;
-  padding: 8px 16px 16px 16px;
-
-  h2 {
-    font-family: ${({ theme }) => theme.fonts.textMessageComponentsCardTitle.fontFamily};
-    font-weight: ${({ theme }) => theme.fonts.textMessageComponentsCardTitle.fontWeight};
-    font-size: ${({ theme }) => theme.fonts.textMessageComponentsCardTitle.fontSize};
-    line-height: 23px;
-    word-break: break-word;
-    white-space: normal;
-    color: ${({ theme }) => theme.colors.shadeWhite};
-    padding-bottom: 8px;
-  }
-  p {
-    color: ${({ theme }) => theme.colors.shadeWhite};
-    font-weight: ${({ theme }) => theme.fonts.textMessageComponentsBodyRegular.fontWeight};
-    font-size: 14px;
-    line-height: 18px;
-    padding-right: 16px;
-    word-break: break-word;
-    font-family: 'PT Sans';
-    font-family: ${({ theme }) => theme.fonts.textMessageComponentsBodyRegular.fontFamily};
-    white-space: normal;
-  }
-`
-
-export const ContainerThumbnailResposive = styled.div<HeaderThumbnailsProps>`
-  display: flex;
-  height: 35vh;
-  overflow: hidden;
-  max-width: 100%;
-  cursor: grab;
-  @media (max-width: 414px) {
-    height: 45vh;
-  }
-  @media (max-width: 320px) {
-    height: 65vh;
-  }
-  .motionThumbnails {
-    display: flex;
-  }
-`

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

@@ -1,64 +0,0 @@
-import '../../../shared/global.css'
-import ScrollContainer from '../../scroll-container/index'
-import { useEffect, useState } from 'react'
-import ParticipantThumbnails from '../participantThumbnails'
-
-interface objThumbnails {
-  imgThumbnails?: any
-  titleThumbnail?: string
-  descpThumbnail?: string
-  handleFunctionThumbnail?: () => void
-}
-interface ParticipantThumbnails {
-  listThumbnails: Array<objThumbnails>
-}
-
-function handleThumbnails(listThumbnails, isVisibleControlsButtons) {
-
-  return (
-    <>
-      <ScrollContainer
-        type={'horizontal'}
-        stepMove={100}
-        isVisibleControlsButtons={isVisibleControlsButtons}
-        sizeArrowButton={80}
-        marginsArrowButton={1}
-        horizontalMarginInternScroll={'0'}
-        marginTopArrrowButton={'-5rem'}
-        className={'scrollThumbnail'}
-      >
-        {listThumbnails.map((item, index) => {
-          return (
-            <ParticipantThumbnails
-              imgThumbnails={item.imgThumbnails}
-              titleThumbnail={item.titleThumbnail}
-              descpThumbnail={item.descpThumbnail}
-              handleFunctionThumbnail={item.handleFunctionThumbnail}            
-            />
-          )
-        })}
-      </ScrollContainer>      
-    </>
-  )
-}
-
-export default function ParticipantThumbnailsList({ listThumbnails }: ParticipantThumbnails) {
-  const [width, setWidth] = useState<number>(typeof window !== "undefined" && window.innerWidth)
-
-  function handleWindowSizeChange() {
-    setWidth(typeof window !== "undefined" && window.innerWidth)
-  }
-  useEffect(() => {
-    typeof window !== "undefined" && window.addEventListener('resize', handleWindowSizeChange)
-    return () => {
-      typeof window !== "undefined" && window.removeEventListener('resize', handleWindowSizeChange)
-    }
-  }, [])
-
-  if (width <= 834) {
-    return handleThumbnails(listThumbnails, false)
-  } else {
-    return handleThumbnails(listThumbnails, true)
-  }
-}
-  

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

@@ -1,93 +0,0 @@
-import React from 'react'
-
-import ParticipantThumbnailsList from './index'
-
-export default {
-  title: 'LXP/ParticipantThumbnailsList',
-  component: ParticipantThumbnailsList
-}
-
-const Template = (args) => <ParticipantThumbnailsList {...args} />
-
-export const ParticipantThumbnailsComponent = Template.bind({})
-ParticipantThumbnailsComponent.args = {
-  listThumbnails: [
-    {
-      titleThumbnail: 'Name of the Content',
-      descpThumbnail:
-        'Empresas e profissionais precisam proteger seus dados contra ameaças digitais. Neste curso você aprenderá sobre políticas de segurança, gerenciamento de riscos, prevenção de ataques cibernéticos, resposta a incidentes e muito mais.',
-      handleFunctionThumbnail: () => alert('voce clicou aqui :D')
-    },
-    {
-      imgThumbnails: '/bg2.png',
-      // limite de caracteres 50 no titulo
-      titleThumbnail: 'Blockchain e criptomoedas e criptomoedas e moedas.',
-      descpThumbnail:
-        'Empresas e profissionais precisam proteger seus dados contra ameaças digitais. Neste curso você aprenderá sobre políticas de segurança, gerenciamento de riscos, prevenção de ataques cibernéticos, resposta a incidentes e muito mais.',
-      handleFunctionThumbnail: () => alert('voce clicou aqui :D')
-    },
-    {
-      imgThumbnails: 'img/Picture.png',
-      titleThumbnail: 'Name of the Content',
-      descpThumbnail:
-        'Empresas e profissionais precisam proteger seus dados contra ameaças digitais. Neste curso você aprenderá sobre políticas de segurança, gerenciamento de riscos, prevenção de ataques cibernéticos, resposta a incidentes e muito mais.',
-      handleFunctionThumbnail: () => alert('voce clicou aqui :D')
-    },
-    {
-      imgThumbnails: '',
-      titleThumbnail: 'Blockchain e criptomoedas',
-      descpThumbnail:
-        'Empresas e profissionais precisam proteger seus dados contra ameaças digitais. Neste curso você aprenderá sobre políticas de segurança, gerenciamento de riscos, prevenção de ataques cibernéticos, resposta a incidentes e muito mais.',
-      handleFunctionThumbnail: () => alert('voce clicou aqui :D')
-    },
-    {
-      imgThumbnails: 'img/Picture.png',
-      titleThumbnail: 'Name of the Content',
-      descpThumbnail:
-        'Empresas e profissionais precisam proteger seus dados contra ameaças digitais. Neste curso você aprenderá sobre políticas de segurança, gerenciamento de riscos, prevenção de ataques cibernéticos, resposta a incidentes e muito mais.',
-      handleFunctionThumbnail: () => alert('voce clicou aqui :D')
-    },
-    {
-      imgThumbnails: '/bg2.png',
-      titleThumbnail: 'Blockchain e criptomoedas',
-      descpThumbnail:
-        'Empresas e profissionais precisam proteger seus dados contra ameaças digitais. Neste curso você aprenderá sobre políticas de segurança, gerenciamento de riscos, prevenção de ataques cibernéticos, resposta a incidentes e muito mais.',
-      handleFunctionThumbnail: () => alert('voce clicou aqui :D')
-    },
-    {
-      imgThumbnails: 'img/Picture.png',
-      titleThumbnail: 'Name of the Content',
-      descpThumbnail:
-        'Empresas e profissionais precisam proteger seus dados contra ameaças digitais. Neste curso você aprenderá sobre políticas de segurança, gerenciamento de riscos, prevenção de ataques cibernéticos, resposta a incidentes e muito mais.',
-      handleFunctionThumbnail: () => alert('voce clicou aqui :D')
-    },
-    {
-      imgThumbnails: '/bg2.png',
-      titleThumbnail: 'Blockchain e criptomoedas',
-      descpThumbnail:
-        'Empresas e profissionais precisam proteger seus dados contra ameaças digitais. Neste curso você aprenderá sobre políticas de segurança, gerenciamento de riscos, prevenção de ataques cibernéticos, resposta a incidentes e muito mais.',
-      handleFunctionThumbnail: () => alert('voce clicou aqui :D')
-    },
-    {
-      imgThumbnails: 'img/Picture.png',
-      titleThumbnail: 'Name of the Content',
-      descpThumbnail:
-        'Empresas e profissionais precisam proteger seus dados contra ameaças digitais. Neste curso você aprenderá sobre políticas de segurança, gerenciamento de riscos, prevenção de ataques cibernéticos, resposta a incidentes e muito mais.',
-      handleFunctionThumbnail: () => alert('voce clicou aqui :D')
-    },
-    {
-      imgThumbnails: '/bg2.png',
-      titleThumbnail: 'Blockchain e criptomoedas',
-      descpThumbnail:
-        'Empresas e profissionais precisam proteger seus dados contra ameaças digitais. Neste curso você aprenderá sobre políticas de segurança, gerenciamento de riscos, prevenção de ataques cibernéticos, resposta a incidentes e muito mais.',
-      handleFunctionThumbnail: () => alert('voce clicou aqui :D')
-    },
-    {
-      imgThumbnails: 'img/Picture.png',
-      titleThumbnail: 'Name of the Content',
-      descpThumbnail:
-        'Empresas e profissionais precisam proteger seus dados contra ameaças digitais. Neste curso você aprenderá sobre políticas de segurança, gerenciamento de riscos, prevenção de ataques cibernéticos, resposta a incidentes e muito mais.',
-      handleFunctionThumbnail: () => alert('voce clicou aqui :D')
-    }
-  ]
-}

package/src/components/LXP/participantThumbnailsList/participantThumbnailsList.ts

@@ -1,114 +0,0 @@
-import styled, { css } from 'styled-components'
-
-interface HeaderThumbnailsProps {
-  img?: any
-}
-
-export const CardThumbnails = styled.div`
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  color: #000;
-  width: 11rem;
-  margin: 1rem 1.1rem;
-  position: relative;
-  transition: transform 1s;
-  border-radius: 8px;
-
-  h1 {
-    font-family: ${({ theme }) => theme.fonts.textMessageComponentsCardTitle.fontFamily};
-    font-weight: ${({ theme }) => theme.fonts.textMessageComponentsCardTitle.fontWeight};
-    padding-top: 0.5rem;
-    font-size: ${({ theme }) => theme.fonts.textMessageComponentsCardTitle.fontSize};
-    line-height: 23px;
-    word-break: break-word;
-    width: 11rem;
-    white-space: normal;
-    color: ${({ theme }) => theme.fonts.neutralsGrey1};
-  }
-`
-
-export const ThumbnailHeaderImage = styled.div<HeaderThumbnailsProps>`
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  height: 14.9rem;
-  flex-direction: column;
-  position: relative;
-  width: 12rem;
-  color: #fff;
-  background-image: url(${(props) => props.img});
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  border-radius: 8px;
-`
-export const CardThumbnailsHove = styled.div`
-  cursor: pointer;
-  width: 17rem;
-  height: 27.3rem;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-`
-
-export const ThumbnailImageHover = styled.div<HeaderThumbnailsProps>`
-  width: 17rem;
-  height: 14.9rem;
-  background-image: url(${(props) => props.img});
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  border-radius: 8px 8px 0px 0px;
-  box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.15), 0px 35px 25px -20px rgba(34, 34, 34, 0.2);
-`
-
-export const DescriptionThumbnails = styled.div`
-  width: 17.8rem;
-  height: 15.1rem;
-  background-color: #000;
-  border-radius: 0px 0px 8px 8px;
-  display: flex;
-  flex-direction: column;
-  margin-top: -1px;
-  padding: 8px 16px 16px 16px;
-
-  h2 {
-    font-family: ${({ theme }) => theme.fonts.textMessageComponentsCardTitle.fontFamily};
-    font-weight: ${({ theme }) => theme.fonts.textMessageComponentsCardTitle.fontWeight};
-    font-size: ${({ theme }) => theme.fonts.textMessageComponentsCardTitle.fontSize};
-    line-height: 23px;
-    word-break: break-word;
-    white-space: normal;
-    color: ${({ theme }) => theme.colors.shadeWhite};
-    padding-bottom: 8px;
-  }
-  p {
-    color: ${({ theme }) => theme.colors.shadeWhite};
-    font-weight: ${({ theme }) => theme.fonts.textMessageComponentsBodyRegular.fontWeight};
-    font-size: 14px;
-    line-height: 18px;
-    padding-right: 16px;
-    word-break: break-word;
-    font-family: 'PT Sans';
-    font-family: ${({ theme }) => theme.fonts.textMessageComponentsBodyRegular.fontFamily};
-    white-space: normal;
-  }
-`
-
-export const ContainerThumbnailResposive = styled.div<HeaderThumbnailsProps>`
-  display: flex;
-  height: 35vh;
-  overflow: hidden;
-  max-width: 100%;
-  cursor: grab;
-  @media (max-width: 414px) {
-    height: 45vh;
-  }
-  @media (max-width: 320px) {
-    height: 65vh;
-  }
-  .motionThumbnails {
-    display: flex;
-  }
-`

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

@@ -1,223 +0,0 @@
-import '../../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './permissionStyle'
-import { IPermission } from './permission'
-import Switch from 'react-switch';
-import { useState } from 'react'
-
-export default function Permission({ variant, disabled, style, handleChangeAdmin, handleChangeEditor, handleChangeInstructor, handleChangeMentor, handleChangeViewer }: IPermission) {
-    const [checked, setChecked] = useState(true)
-    const [checkedAdmin, setCheckedAdmin] = useState(false)
-    const [checkedEditor, setCheckedEditor] = useState(false)
-    const [checkedInstructor, setCheckedInstructor] = useState(false)
-    const [checkedViewer, setCheckedViewer] = useState(false)
-    const [checkedMentor, setCheckedMentor] = useState(false)
-    const [ disableAdmin, setDisableAdmin] =  useState(false)
-    const [ disableEditor, setDisableEditor] =  useState(false)
-    const [ disableInstructor, setDisableInstructor] =  useState(false)
-    const [ disableViewer, setDisableViewer] =  useState(false)
-    const [ disableMentor, setDisableMentor] =  useState(false) 
-    
-    const onChangeAdmin = (checkedValue) => {
-        setCheckedAdmin(checkedValue)
-        handleChangeAdmin(checkedValue)
-    };
-
-    const onChangeEditor = (checkedValue) => {
-        setCheckedEditor(checkedValue)
-        handleChangeEditor(checkedValue)
-        
-        if(checkedValue){
-            setDisableAdmin(true)
-            setDisableInstructor(true)
-            setDisableMentor(true)
-            setDisableViewer(true)
-        } else {
-            setDisableAdmin(false)
-            setDisableInstructor(false)
-            setDisableMentor(false)
-            setDisableViewer(false)
-        }
-    };
-
-    const onChangeInstructor = (checkedValue) => {
-        setCheckedInstructor(checkedValue)
-        handleChangeInstructor(checkedValue)
-
-        if(checkedValue){
-            setDisableAdmin(true)
-            setDisableEditor(true)
-            setDisableMentor(true)
-            setDisableViewer(true)
-        } else {
-            setDisableAdmin(false)
-            setDisableEditor(false)
-            setDisableMentor(false)
-            setDisableViewer(false)
-        }
-    };
-
-    const onChangeViewer = (checkedValue) => {
-        setCheckedViewer(checkedValue)
-        handleChangeViewer(checkedValue)
-
-        if(checkedValue){
-            setDisableAdmin(true)
-            setDisableEditor(true)
-            setDisableMentor(true)
-            setDisableInstructor(true)
-        } else {
-            setDisableAdmin(false)
-            setDisableEditor(false)
-            setDisableMentor(false)
-            setDisableInstructor(false)
-        }        
-    };
-
-    const onChangeMentor = (checkedValue) => {
-        setCheckedMentor(checkedValue)
-        handleChangeMentor(checkedValue)
-
-        if(checkedValue){
-            setDisableAdmin(true)
-            setDisableEditor(true)
-            setDisableInstructor(true)
-            setDisableViewer(true)
-        } else {
-            setDisableAdmin(false)
-            setDisableEditor(false)
-            setDisableInstructor(false)
-            setDisableViewer(false)
-        }
-    };
-   
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-    
-            <Styles.Container className={variant = 'Administrador'}>
-                <Styles.Typography>Membros podem ter diferentes niveis de acesso baseados em seus papéis</Styles.Typography>
-                <Styles.ContainerPermission>
-                    <Styles.ContainerTypography>
-                        <Styles.TypographyTitle>Administrador</Styles.TypographyTitle>
-                        <Styles.TypographyPermission>Tem acesso total</Styles.TypographyPermission>
-                    </Styles.ContainerTypography>
-                    <Styles.ContainerSwitch >
-                        <Switch                        
-                            disabled={disableAdmin}
-                            onChange={onChangeAdmin}
-                            checked={checkedAdmin}
-                            height={16}
-                            width={40}
-                            checkedIcon={false}
-                            uncheckedIcon={false}
-                            handleDiameter={24}
-                            onHandleColor='#ffffff'
-                           offHandleColor='#ffffff'
-                            onColor='#FF4D0D'
-                           offColor='#ebebeb'
-                           activeBoxShadow={checkedAdmin ? '0 0 2px 2px #FF4D0D' : '0 0 2px 2px #757575'}
-                           boxShadow={checkedAdmin ? '0 0 2px 2px #FF4D0D' : '0 0 2px 2px #757575'}
-                        />
-                    </Styles.ContainerSwitch>
-                </Styles.ContainerPermission>
-                <Styles.ContainerPermission>
-                    <Styles.ContainerTypography>
-                        <Styles.TypographyTitle>Editor</Styles.TypographyTitle>
-                        <Styles.TypographyPermission>Pode visualizar a evolução dos alunos de gráficos e editar os conteúdos dos cursos</Styles.TypographyPermission>
-                    </Styles.ContainerTypography>
-                    <Styles.ContainerSwitch >
-                        <Switch                       
-                            disabled={disableEditor}
-                            onChange={onChangeEditor}
-                            checked={checkedAdmin ? true : checkedEditor}
-                            height={16}
-                            width={40}
-                            checkedIcon={false}
-                            uncheckedIcon={false}
-                            handleDiameter={24}
-                            onHandleColor='#ffffff'
-                            offHandleColor='#ffffff'
-                            onColor='#FF4D0D'
-                            offColor='#ebebeb'
-                            activeBoxShadow={checkedAdmin ? '0 0 2px 2px #FF4D0D' : '0 0 2px 2px #757575'}
-                            boxShadow={checkedAdmin ? '0 0 2px 2px #FF4D0D' : '0 0 2px 2px #757575'}
-                        />
-                    </Styles.ContainerSwitch>
-                </Styles.ContainerPermission>
-                <Styles.ContainerPermission>
-                    <Styles.ContainerTypography>
-                        <Styles.TypographyTitle>Instrutor</Styles.TypographyTitle>
-                        <Styles.TypographyPermission>Só pode visualizar e editar o conteúdo dos cursos</Styles.TypographyPermission>
-                    </Styles.ContainerTypography>
-                    <Styles.ContainerSwitch >
-                        <Switch
-                            disabled={disableInstructor}                    
-                            onChange={onChangeInstructor}
-                            checked={checkedAdmin ? true : checkedInstructor}
-                            height={16}
-                            width={40}
-                            checkedIcon={false}
-                            uncheckedIcon={false}
-                            handleDiameter={24}
-                            onHandleColor='#ffffff'
-                            offHandleColor='#ffffff'
-                            onColor='#FF4D0D'
-                            offColor='#ebebeb'
-                            activeBoxShadow={checkedAdmin ? '0 0 2px 2px #FF4D0D' : '0 0 2px 2px #757575'}
-                            boxShadow={checkedAdmin ? '0 0 2px 2px #FF4D0D' : '0 0 2px 2px #757575'}
-                        />
-                    </Styles.ContainerSwitch>
-                </Styles.ContainerPermission>
-                <Styles.ContainerPermission>
-                    <Styles.ContainerTypography>
-                        <Styles.TypographyTitle>Visualizador</Styles.TypographyTitle>
-                        <Styles.TypographyPermission>Só pode visualizar através dos gráficos a evolução dos alunos e cursos</Styles.TypographyPermission>
-                    </Styles.ContainerTypography>
-                    <Styles.ContainerSwitch >
-                        <Switch
-                            disabled={disableViewer}
-                            onChange={onChangeViewer}
-                            checked={checkedAdmin ? true : checkedViewer}
-                            height={16}
-                            width={40}
-                            checkedIcon={false}
-                            uncheckedIcon={false}
-                            handleDiameter={24}
-                            onHandleColor='#ffffff'
-                            offHandleColor='#ffffff'
-                            onColor='#FF4D0D'
-                            offColor='#ebebeb'
-                            activeBoxShadow={checkedAdmin ? '0 0 2px 2px #FF4D0D' : '0 0 2px 2px #757575'}
-                            boxShadow={checkedAdmin ? '0 0 2px 2px #FF4D0D' : '0 0 2px 2px #757575'}
-                        />
-                    </Styles.ContainerSwitch>
-                </Styles.ContainerPermission>
-                <Styles.ContainerPermission>
-                    <Styles.ContainerTypography>
-                        <Styles.TypographyTitle>Mentor</Styles.TypographyTitle>
-                        <Styles.TypographyPermission>Convidado para dar mentorias para os alunos quando houver necessidade</Styles.TypographyPermission>
-                    </Styles.ContainerTypography>
-                    <Styles.ContainerSwitch >
-                        <Switch
-                            disabled={disableMentor}
-                            onChange={onChangeMentor}
-                            checked={checkedAdmin ? true : checkedMentor}
-                            height={16}
-                            width={40}
-                            checkedIcon={false}
-                            uncheckedIcon={false}
-                            handleDiameter={24}
-                            onHandleColor='#ffffff'
-                            offHandleColor='#ffffff'
-                            onColor='#FF4D0D'
-                            offColor='#ebebeb'
-                            activeBoxShadow={checkedAdmin ? '0 0 2px 2px #FF4D0D' : '0 0 2px 2px #757575'}
-                            boxShadow={checkedAdmin ? '0 0 2px 2px #FF4D0D' : '0 0 2px 2px #757575'}
-                        />
-                    </Styles.ContainerSwitch>
-                </Styles.ContainerPermission>
-            </Styles.Container>
-        </ThemeProvider>
-    );
-}

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

@@ -1,16 +0,0 @@
-import React from "react"
-
-type enumVariant = 'Administrador' | 'Editor' | 'Instrutor' | 'Visualizador' | 'Mentor'
-
-
-
-export interface IPermission {
-    variant?: enumVariant,
-    disabled?: boolean,    
-    style?: React.CSSProperties,
-    handleChangeAdmin?: (checkedValue) => void,
-    handleChangeEditor?: (checkedValue) => void,
-    handleChangeInstructor?: (checkedValue) => void,
-    handleChangeViewer?: (checkedValue) => void,
-    handleChangeMentor?: (checkedValue) => void
-}

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

@@ -1,28 +0,0 @@
-import React from 'react'
-
-import Permission 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/Permission',
-    component: Permission,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Permission {...args} />
-
-export const Administrator = Template.bind({})
-Administrator.args = {
-    variant: 'Administrador',    
-    disabled: false,
-    handleChangeAdmin: (checkedValue) => { console.log(`acesso ativado=${checkedValue}`)},   
-    handleChangeEditor: (checkedValue) => { console.log(`acesso ativado=${checkedValue}`)},
-    handleChangeInstructor: (checkedValue) => { console.log(`acesso ativado=${checkedValue}`)},
-    handleChangeViewer: (checkedValue) => { console.log(`acesso ativado=${checkedValue}`)},
-    handleChangeMentor: (checkedValue) => { console.log(`acesso ativado=${checkedValue}`)}           
-}
-
-
-
-