frst-components 0.20.0

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+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}`)}           
+}
+
+
+
+